本文介绍在HTML中使用JavaScript的方法，包括直接嵌入代码和通过src属性包含外部文件。讲解了<script>元素的属性如async、defer，以及如何在不同位置放置脚本以优化页面加载速度。
在HTML中使用JavaScript
<script>元素
通过<script>元素插入JavaScript
HTML4.01为<script>定义了以下6个属性：
async：
- 可选
- 表示应该立即下载脚本，但不应妨碍页面中的其他操作
- 只对外部脚本有效
charset：
- 可选
- 表示通过
src属性指定的代码的字符集
defer：
- 可选
- 表示脚本可以延迟到文档完全被解析和显示之后再执行
- 只对外部脚本有效
language：
- 已废弃
- 表示用于表示代码使用的脚本语言
src：
- 可选
- 表示包含要执行代码的外部文件
type：
- 可选
- 可以看成
language的替代属性，表示编写代码使用的脚本语言的内容类型（MIME类型） - 人们使用的是
text/javascript和text/ecmascript（不推荐） - 实际服务器传送
JavaScript文件时使用的MIME类型通常是application/x-javascript - 不过，这个属性不是必需的，默认值为
text/javascript
使用<script>元素的方式有两种
-
直接在页面中嵌入JavaScript代码
<script type="text/javascript"> function sayHi(){ alert("Hi!"); } </script> -
通过
src包含外部JavaScript文件<script type="text/javascript" src="example.js"></script>带有
src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码，则只会下载并执行脚本文件，嵌入的代码会被忽略
标签的位置
按照惯例，所有<script>元素都应该放在页面的<head>元素中
意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容。
为了避免这个问题，现代Web应用程序一般都把全部JavaScript引用放在<body>元素中，放在页面的内容后面
- 延迟脚本
通过defer属性，告诉浏览器立即下载，但延迟执行。最好只包含一个延迟脚本。只适用于外部脚本文件。
<script type="text/javascript" defer="defer" src="example1.js"></script>
- 异步脚本
async只适用于外部脚本文件，并告诉浏览器立即下载文件。
<script type="text/javascript" async src="example1.js"></script>
嵌入代码与外部文件
使用外部文件的优点：
- 可维护性
- 可缓存
- 适应未来
文档模式
-
混杂模式
-
标准模式
<!-- HTML 5 --> <!DOCTYPE html> -
准标准模式
<noscript>元素
用以在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body>中的任何HTML元素——<script>元素除外。包含在<noscript>元素中的内容只有在下列情况下才会显示出来：
- 浏览器不支持脚本；
- 浏览器支持脚本，但脚本被禁用。
小结
把JavaScript插入到HTML页面中要使用<script>元素。使用这个元素可以把JavaScript嵌入到HTML页面中，让脚本与标记混合在一起；也可以包含外部的JavaScript文件。而我们需要注意的地方有：
-
在包含外部JavaScript文件时，必须将
src属性设置为指向相应文件的URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件。 -
所有
<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用defer和async属性的情况下，只有在解析完前面<script>元素中的代码之后，才会开始解析后面<script>元素中的代码。 -
由于浏览器会先解析完不使用
defer属性的<script>元素中的代码，然后再解析后面的内容，所以一般应该把<script>元素放在页面最后，即主要内容后面，</body>标签前面。 -
使用
defer属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。 -
使用
async属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
另外，使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下，浏览器不会显示<noscript>元素中的任何内容。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
