JS:在HTML中使用JavaScript

在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>元素中的任何内容。