您的位置：首页 > Web前端 > JavaScript

JavaScript高级程序设计第二章在HTML中使用JavaScript

2018-01-15 14:27 344 查看

2.1 <script>元素
向HTML中插入JavaScript的主要方法是使用<script>标签
<script>定义了6个属性：(1)async(异步)：表示应该立即下载脚本，但不应妨碍页面中的其他操作，只对外部脚本有效。
(2)charset：表示通过src属性指定的代码的字符集。
(3)defer(延迟)：表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本文件有效。
(4)language
(5)src：表示包含要执行代码的外部文件。
(6)type：并不是必须，默认值为text/javascript

使用<script>方式有两种：(1)直接在页面中嵌入JavaScript代码
包含在<script>中的JavaScript代码将被从上至下依次解释，在解释器对<script>中所有代码执行完毕之前，页面中的其余内容不会被浏览器加载和显示。记住不要在代码中的任何地方出现</script>,浏览器加载时会产生错误

<body>
<script>
function sayScript(){
alert("</script>");
}
sayScript();
</script>
</body>

通过转义字符“\”解决这个问题：

<body>
<script>
function sayScript(){
alert("<\/script>");
}
sayScript();
</script>
</body>

(2)包含外部JavaScript文件
需要注意的是：带有src属性的<script>元素不应该在其<script></script>标签之间再包含额外的JavaScript代码，如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。

2.1.1标签的位置
为什么一般都把全部的JavaScript引用放在<body>元素的最后面？

如果放在前面的话，意味着必须等到全部JavaScript代码都被下载，解析，执行完成之后，才能开始呈现页面内容（浏览器在遇到<body>标签时才会呈现内容）对于需要很多JavaScript代码的页面来说，会导致浏览器呈现页面时出现明显延迟，延迟期间浏览器为一片空白。

2.1.2 延迟脚本
<script>的defer属性（只适用于外部脚本）：脚本在执行时不会影响页面的构造，脚本会被延迟到整个页面都解析后再运行，相当于告诉浏览器立即下载但是延迟执行。规定延迟脚本也是按顺序执行的，但是，实际中延迟脚本并不一定按照顺序执行，因此最好只包含一个延迟脚本。

2.1.3异步脚本
<script>的async属性（只适用于外部脚本）：告诉浏览器立即下载文件，不保证按照指定顺序执行，保证文件之间不依赖很重要。async属性的目的是不让页面等待脚本下载和执行，而是异步加载页面的其他内容，因此建议异步脚本不要在加载期间修改DOM。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航