JavaScript高级程序设计（第三版）学习笔记（二）JavaScript使用

作者：我家小花儿 | 2024-07-23 19:37:54

踩

JavaScript设计初衷就是能在Web浏览器中直接运行的脚本语言，当然迫切想知道它是怎么使用的？
Web浏览器上运行的内容就是上篇提到过HTML文件，由XML衍生出来的超文本标记语言，由标签和内容组成，为了能够让JavaScript更好的与HTML融合使用，厂商和协会调整了HTML的规则，JavaScript语句能够直接添加HTML中并能够被解析。

JavaScript标签

JavaScript在HTML中的使用标签为开始标签<script>和结束</script>，虽然在DHTML文件调用外部JS文件可以不用</script>，但考虑编程的一致性，建议使用一对标签。

JavaScript的用法

知道了在HTML中使用<script>来标识JavaScript代码，但具体代码内容写在哪里及怎么写呢？
首先说一下用法，主要有两种方式：
第一种：直接在HTML直接内嵌JavaScript代码。

<script type="text/javascript">
    Javascript语法 
</script>
1
2
3

如上示例在<script>开始和结束标签之间添加JavaScript的相关代码，其中type是标签属性，表示该文件内容类型，以便访问的服务器返回正确类型的文件，也可以不添加该属性，浏览器会默认该值。
第二种方式：引用外部JavaScript文件。
JavaScript语言编写的代码也可以单独存放在扩展名为.js的文件中，如HTML文件需要引用，则需要通过<javascript> 标签的第二个属性src，它指向外部JS文件的URL，可以是本地文件也可以外部域（如http://www.google/abc.js）中的文件，使用方法如下：
<script scr="abc.js"></script>
或者
<script scr="http://www.google/abc.js"></script>

虽然两种方式都可以支持JS代码在Web浏览器中运行，但第二种方式存在以下优点：
1. HTML代码和JS代码分离，有助于后期的便捷维护。
2. HTML代码和JS代码分离，对于不支持JS代码解析的浏览器，不需要写特殊的代码注释从而保证浏览器兼容性。
3. 对于不同页面使用同一个JS的情况，可以减少代码量，并且前一个页面调用后在浏览器中缓存该文件，后一个页面可以快速调取该JS文件，提高响应速度。

JavaScript在HTML的中位置

原来JavaScript代码都是放在HTML的head标签里面，如下所示：

<html>
    <head>
        <script type="text/javascript"> JS代码 </script>
    </head>
    <body> 
        浏览器页面显示内容
    </body>
</html>
1
2
3
4
5
6
7
8

由于HTML页面常规情况下都是从上到下加载并解释内容，而显示内容只有进入<body>标签才加载，之前必须先加载和解释JS内容，如果内容过多需要长时间等待，给用户造成系统运行缓慢的错觉，所以现在都在</body> 结束前添加JS内容，如下所示：

    </head>
    <body> 
        浏览器页面显示内容
        <script type="text/javascript"> JS代码 </script>
    </body>
</html>
1
2
3
4
5
6

这样优先显示页面内容，再加载和解释JS代码，提高用户体检。

执行顺序

上面提到了HTML页面是顺序执行，有什么办法改变JS在HTML的执行顺序呢？<javascript> 还有两个属性async和defer，用法<script defer="defer" src="abc.js"></script> 和<script sync src="abc.js"></script>，如上所示它们只能用在引用外部JS的情况下，
defer表示延迟执行，即页面加载完成后再执行，可以提供页面显示速度；sync表示异步，也就是与加载页面内容同时进行，但要注意由于执行先后的随机性，不建议在JS中修改页面内容以便造成页面的显示不稳定性。

文档模式

什么是文档模式，为什么要介绍文档模式，学习该知识点有什么用？
文档模式简单来说就是Web页面不同模式下浏览器的解析规则不同，如果在HTML文件开头不指定文档模式，则默认为混杂模式，该模式下不同浏览器的解析规则不一致，所有为了页面兼容性，一般需要指定标准模式，有三种方式：
HTML 4.01 严格型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1

XHTML 1.0 严格型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1

HTML 5

<!DOCTYPE html>
1

禁用JavaScirpt的情况

如果浏览器中不识别或者禁用了JavaScript有什么解决方式？
对，提示用户开启支持JavaScript的设置或者提示浏览器不支持JavaScipt。
但是如果浏览器已经支持了，则不需要该提示，用<noscript> 和</noscipt> 标签则可以解决该问题，浏览器不支持JS的情况下会解析该标签中的内容，反之则忽略，如<noscript><p>该浏览器不支持JavaScript</p></noscript>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/871249