在HTML中使用JavaScript
本章内容:
- 使用
<script>
元素 - 嵌入脚本与外部脚本
- 文档模式对JavaScript的影响
- 考虑禁用JavaScript的场景
##2.1 <script>
元素
HTML4.01为<script>
定义了下列6个属性:
- async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效
- charset:可选。表示通过src属性制定的代码的字符集。由于大多数浏览器会忽略它的值,因此这个属性很少有人用。
- defer:可选。小时脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。
- language:已废弃。原来用于表示编写代码使用的脚本语言。大多数浏览器会忽略这个属性,因此也没有必要再用了。
- src:可选。表示包含要执行代码的外部文件。
- type:可选。可以看成是language的替代属性;表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。
使用<script>
元素的方式有两种:直接在页面中嵌入JavaScript代码和包含外部JavaScript文件
在解释器对<script>
元素内部的所有代码求值完毕之前,页面中的其余内容都不会被浏览器加载或显示。
在使用<script>
嵌入JavaScript代码时,记住不要在代码中的任何地方出现</script>
字符串。用转义字符”"解决这个问题
function sayScript(){
alert("<\/script>");
}
外部JavaScript文件带有.js扩展名。但这个扩展名不是必需的,因为浏览器不会检查包含JavaScript的文件的扩展名。这样使得其他服务器端语言动态生成JavaScript代码也就成为了可能。但服务器通常还是需要看扩展名决定相应应用哪种MIME类型。如果不适用.js扩展名,请确保服务器能返回正确的MIME类型。
带有src属性的<script>
元素不应该在其<script>
和</script>
标签之间博阿含额外的JavaScript代码。否则会被忽略。
另外,通过<script>
元素的src属性还可以包含来自外部域的JavaScript文件。这一点既让<script>
元素倍显强大,又让它备受争议。
在第一个<script>
元素包含的代码解析完成后,第二个<script>
包含的代码才会被解析,然后才是第三个,第四个······
###2.1.1 标签的位置
为了表面浏览器在呈现页面时出现明显的延迟,现代Web应用程序一般都把全部JavaScript引用放在<body>元素中页面内容的后面
###2.1.2 延迟脚本
在<script>
元素中设置defer属性,脚本会被延迟到整个页面都解析完毕后再运行。相当于告诉浏览器立即下载,但延迟执行。
<script type="text/javascript" defer="defer" src="example.js"></script>
在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。为了避免有些不支持的浏览器,把延迟脚本放在页面底部仍然是最佳选择。
defer属性只适用于外部脚本文件。这一点在HTML5中已经明确规定,因此支持HTML5的实现会忽略给嵌入脚本设置的defer属性。
###2.1.3 异步脚本
与defer类似,这个属性用于改变处理脚本的行为,且只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照指定它们的先后顺序执行。
指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。
异步脚本一定会在页面的load事件前执行。
###2.1.4 在XHTML中的用法
比较语句a < b中的小于号(<)在XHTML中将被当作开始一个新的标签来解析。但是作为标签来讲,小于号后面不能跟空格,因此就会导致语法错误。
避免在XHTML中出现类似语法错误的方法有两个。
-
一是用相应的HTML实体(<)替换代码中所有的小于号(<)。
-
二是用一个CData片段来包含JavaScript代码。
###2.1.5 不推荐使用的语法
让不支持<script>
元素的浏览器能够隐藏嵌入的JavaScript代码。一个方案就是把JavaScript代码包含在一个HTML注释中
<script><!--
function sayHi(){
alert("Hi!");
}
--></script>
虽然这种注释JavaScript代码的格式得到了所有浏览器的认可,也能被正确解释,但由于所有浏览器都已经支持JavaScript,因此也就没有必要在使用这种格式了。
##2.2 嵌入代码与外部文件
使用外部文件有以下优点:
- 可维护性
- 可缓存:如果有两个页面都使用同一个文件,那么这个文件只需下载一次。因此,最终结果就是能够快速页面加载的速度
- 适应未来
##2.3 文档模式
IE5.5引入了文档模式的概念,而这个概念是通过使用文档类型(doctype)切换实现的。最初的两种文档模式是:混杂模式和标准模式
虽然这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行。
##2.4 <noscript>
元素
早期浏览器都面临一个特殊的问题,即当浏览器不支持JavaScript时如何让页面平稳地退化。
这个元素可以包含能够出席那在文档<body>
中的任何HTML元素——<script>
元素除外。包含在<noscript>
元素中的内容只有在下列情况下才会显示出来:
- 浏览器不支持脚本;
- 浏览器支持脚本,但脚本被禁用
符合上述任何一个条件,浏览器都会显示<noscript>
中的内容。而在除此之外的其他情况下,浏览器不会呈现<noscript>
中的内容。
##2.5 小结
把JavaScript插入到HTML页面中要使用<script>
元素。使用这个元素可以把JavaScript嵌入到HTML页面中,让脚本与标记混合在一起;也可以包含外部的JavaScript文件。而我们需要注意的地方有:
- 在包含外部JavaScript文件时,必须将src属性设置为指向相应文件的URL。
- 所有
<script>
元素都会按照它们在页面中出现的先后顺序依次被解析。在不适用defer和async属性额情况下。 - 由于浏览器会先解析完不适用defer属性的
<script>
元素中的代码,然后再解析后面的内容,所以一般应该把<script>
元素放在页面最后,即主要内容后面,</body>标签之前。 - 使用defer属性可以让脚本在文档完全呈现之后再执行。
- 使用async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
另外,使用<noscript>
元素可以指定在不支持脚本的李兰器中显示的替代内容。但在启用了脚本的情况下,浏览器不会显示<noscript>
元素中的任何内容。