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

JavaScript高级程序设计第三版（第二章：在HTML中使用JavaScript）

2016-08-14 00:00 471 查看

一、script元素

HTML4.0.1为script元素定义了下列6个属性：

async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。（只对外部脚本文件有效）。

charset：可选。大多浏览器会忽略它的值，这个属性很少有人用。

defer：可选。表示脚本可以延迟到文档完全解析和显示之后在执行。只对外部脚本有效。

language：已废弃。

src：可选。表示包含要执行代码的外部文件。

type：可选。这个属性不是必须的，如果没有指定，其值默认是text/javascript。

使用<script>的两种方式：直接在页面中嵌入脚本和包含外部脚本。

<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>

包含在script元素内部的JavaScript代码将被从上到下依次解释。在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。（在写嵌入代码时，不要在代码中任何地方出现"</script>"标签）

引用外部脚本：<script type="text/javascript" src="example.js"></script>。与解析嵌入式JavaScript代码一样，在解析外部JavaScript文件（包括下载该文件）的时候，页面的处理会暂时停止。在引用外部脚本的时候，<script >和</script>标签之间的代码将会被忽略。另外，<script>元素的src属性还可以包含来自外部域的JavaScript文件。无论如何包含代码，只要不存在defer和async属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。

二、标签的位置

放入<head>元素中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<script type="text/javascript" src="js/example1.js" ></script>
<script type="text/javascript" src="js/example2.js" ></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

把JavaScript文件放入<head>元素中，意味着必须等到全部JavaScript代码都被下载，解析和执行完成之后，才开始呈现页面内容（浏览器在遇到body标签时才开始呈现内容）。这个问题会导致浏览器在呈现页面时出现明显延迟，导致浏览器窗口一片空白。现在Web程序一般都把JavaScript引用放在<body>元素页面的内容后面。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>

</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="js/example1.js" ></script>
<script type="text/javascript" src="js/example2.js" ></script>
</body>
</
7fe0
html>

三、延迟脚本

HTML4.0.1为<script>标签定义了defer属性（只适用外部脚本）。这个属性是表明脚本在执行的时候不会影响页面的构造。脚本会被延迟到整个页面都解析完毕后在运行（立即下载，延迟执行）。IE4、FireFox3.5、Safari5、Chrome是最早支持defer属性的浏览器。其他浏览器会忽略这个属性，像平常脚本一样处理。

四、异步脚本

HTML5为<script>标签定义了async属性（只适用外部脚本）。告诉浏览器立即下载文件。标记为async的脚本并不保证它们的先后顺序执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>

</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" async src="js/example1.js" ></script>
<script type="text/javascript" async src="js/example2.js" ></script>
</body>
</html>

以上代码中第二个脚本可能会在第一个脚本之前执行，所以要确保两者互不依赖。指定async属性是为了不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load事件前执行。支持异步脚本的有、FireFox3.6、Safari5、Chrome。

五、<noscript>元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<!-- 这里放内容 -->
<noscript>
本页面需要浏览器支持JavaScript。
</noscript>
</body>
</html>

六、小结

JavaScript的src属性可以设置为同一个服务器上的文件，也可以是其它任何域中的文件。

所有的<script>元素都会按照他们在页面中出现的先后顺序依次被解析。

使用defer属性可以让脚本在文档完全呈现之后在执行。延迟执行脚本总是按照指定它们的顺序执行。

使用async属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照指定它们的顺序执行。

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

标签：

相关文章推荐

新的分享

章节导航