嵌入方式
向 HTML 页面中插入JavaScript 的主要方法,就是使用<script>
元素。
JavaScript嵌入HTML有几种方法:
- 在使用
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
包含在<script>
元素内部的JavaScript 代码将被从上至下依次解释。
- 如果要通过
<script>
元素来包含外部JavaScript 文件,那么src 属性就是必需的。这个属性的值是一个指向外部JavaScript 文件的链接:
<script type="text/javascript" src="example.js"></script>
外部文件example.js 将被加载到当前页面中。外部文件只须包含通常要放在开始
的<script>
和结束的</script>
之间的那些JavaScript 代码即可。
XHTML 文档也可以省略代码结束的</script>
标签,
<script type="text/javascript" src="example.js" />
但是,不能在HTML 文档使用这种语法。原因是这种语法不符合HTML 规范,而且也得不到某些浏览器(尤其是IE)的正确解析。
带有src 属性的
<script>
元素不应该在其<script>
和</script>
标签之间再包含额外的JavaScript 代码。如果包含了嵌入的代码,则只会下载并执行外部脚本文件,嵌入的代码会被忽略。
另外,通过<script>
元素的src 属性还可以包含来自外部域的JavaScript 文件。这一点既让<script>
元素倍显强大,又让它备受争议。在这一点上,<script>
与<img>
元素非常相似,即它的src属性可以是指向当前HTML 页面所在域之外的某个域中的完整URL。
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
这样,位于外部域中的代码也会被加载和解析,就像这些代码位于加载它们的页面中一样。利用这一点就可以在必要时通过不同的域来提供JavaScript 文件。
标签位置
传统做法是,所有<script>
元素都应该放在页面的<head>
元素中
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
这种做法的目的就是把所有外部文件(包括CSS 文件和JavaScript 文件)的引用都放在相同的地方。可是,在文档的<head>
元素中包含所有JavaScript 文件,意味着必须等到全部JavaScript 代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到<body>
标签时才开始呈现内容)。对于那些需要很多JavaScript 代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题,现代Web 应用程序一般都把全部JavaScript 引用放在<body>
元素中页面内容的后面
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
延迟脚本
HTML 4.01 为<script>
标签定义了defer 属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此,在<script>
元素中设置defer 属性,相当于告诉浏览器立即下载,但延迟执行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
在这个例子中,虽然我们把<script>
元素放在了文档的<head>
元素中,但其中包含的脚本将延迟到浏览器遇到</html>
标签后再执行。
HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded 事件执行。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded 事件触发前执行,因此最好只包含一个延迟脚本。
defer
属性只适用于外部脚本文件。
异步脚本
HTML5 为<script>
元素定义了async
属性。这个属性与defer
属性类似,都用于改变处理脚本的行为。同样与defer
类似,async
只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer
不同的是,标记为async
的脚本并不保证按照指定它们的先后顺序执行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
在以上代码中,第二个脚本文件可能会在第一个脚本文件之前执行。因此,确保两者之间互不依赖非常重要。指定async
属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM。
异步脚本一定会在页面的load 事件前执行,但可能会在DOMContentLoaded 事件触发之前或之后执行。
XHTML用法
是将HTML作为XML的应用而重新定义的一个标准。比HTML严格。
嵌入代码和外部文件
在 HTML 中嵌入JavaScript 代码虽然没有问题,但一般认为最好的做法还是尽可能使用外部文件来包含JavaScript 代码。不过,并不存在必须使用外部文件的硬性规定,但支持使用外部文件的人多会强调如下优点。
- 可维护性:遍及不同HTML 页面的JavaScript 会造成维护问题。但把所有JavaScript 文件都放在一个文件夹中,维护起来就轻松多了。而且开发人员因此也能够在不触及HTML 标记的情况下,集中精力编辑JavaScript 代码。
- 可缓存:浏览器能够根据具体的设置缓存链接的所有外部JavaScript 文件。也就是说,如果有两个页面都使用同一个文件,那么这个文件只需下载一次。因此,最终结果就是能够加快页面加载的速度。
- 适应未来:通过外部文件来包含JavaScript 无须使用前面提到XHTML 或注释hack。HTML 和XHTML 包含外部文件的语法是相同的。
放松一下吧
把 JavaScript 插入到HTML 页面中要使用<script>
元素。使用这个元素可以把JavaScript 嵌入到HTML 页面中,让脚本与标记混合在一起;也可以包含外部的JavaScript 文件。而我们需要注意的地方有:
- 在包含外部JavaScript 文件时,必须将src 属性设置为指向相应文件的URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件,也可以是其他任何域中的文件。
- 所有
<script>
元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用defer
和async
属性的情况下,只有在解析完前面<script>
元素中的代码之后,才会开始解析后面<script>
元素中的代码。 - 由于浏览器会先解析完不使用defer 属性的
<script>
元素中的代码,然后再解析后面的内容,所以一般应该把<script>
元素放在页面最后,即主要内容后面,</body>
标签前面。 - 使用
defer
属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。 - 使用
async
属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。