在HTML中使用JavaScript

本章内容:

##2.1 <script>元素

HTML4.01为<script>定义了下列6个属性:

使用<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中出现类似语法错误的方法有两个。

###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文件。而我们需要注意的地方有:

另外,使用<noscript>元素可以指定在不支持脚本的李兰器中显示的替代内容。但在启用了脚本的情况下,浏览器不会显示<noscript>元素中的任何内容。