首页 > 代码库 > JS基础知识回顾：在HTML中使用JavaScript
JS基础知识回顾：在HTML中使用JavaScript
想HTML页面中插入JavaScript的主要方法就是使用<script>元素。
HTML4.01当中为<script>元素定义了下列6个属性：
language（已废弃）：原来用于表示编写代码使用的脚本语言，如JavaScript、JavaScript1.2、VBScript等，由于大多数浏览器会忽略此属性，因此就没有必要再用了；
type（可选）：可以看成是language的替代属性，表示编写代码使用的脚本语言的内容类型，也被称作MIME类型，在未指定此属性的情况下会被默认为text/javascript；
src（可选）：表示包含要执行代码的外部文件；
charset（可选）：表示通过src属性指定的代码的字符集，大多数浏览器会忽略此属性，因此这个属性很少有人使用；
async（可选）：表示立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本，只对外部脚本文件有效；
defer（可选）：表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本文件有效，但是IE7及更早版本IE对嵌入脚本也支持此属性；
使用<script>元素的方式有两种：直接在页面中嵌入JavaScript代码和包含外部JavaScript文件。
在使用<script>元素嵌入JavaScript代码时，只要为<script>指定type属性并将JavaScript代码放入元素内即可，包含在<script>元素内部的JavaScript代码将被从上至下依次解释。
另外按照节气嵌入式代码的规则，当浏览器遇到字符串"</script>"时，就会认为那是结束标签，如果此时遇到的字符串并非结束标签，则需要加入转义字符“/”，即：</\script>。
如果要通过<script>元素来包含外部JavaScript文件，那么src属性就是必须的，这个属性的值将指向一个外部JavaScript文件的链接。
与解析嵌入式JavaScript代码一样，在解析外部JavaScript文件（包括下载该文件）时，页面的处理也会暂时停止。
包含外部JavaScript文件的<script>元素在XHTML文档中可以写成成对标签形式也可以写成自闭和形式，但是在HTML中不能使用自闭和的形式，而且也得不到某些浏览器（尤其是IE）的正确解析。
如果能够确保服务器能返回正确的MIME类型，则在包含外部JavaScript文件时可以不写扩展名.js。
带有src属性的<script>元素不应该在标签中再包含额外的JavaScript代码，如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。
由于<script>元素的src属性值可以指向当前HTML页面所在域之外的某个域中的完整的URL，因此在访问自己无法控制的服务器上的JavaScript文件时需要小心防范恶意攻击。
无论如何包含代码，只要不存在defer和async属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。
在HTML中嵌入JavaScript代码虽然没有问题，但一般认为最好的做法还是尽可能使用外部文件来包含JavaScript代码，支持通过外部文件包含JavaScript代码的人通常会强调该方法的可维护性、可缓存、适应未来等优点。
按照传统的做法，所有<script>元素都应该放在页面的<head>元素中，这种做法的目的就是把所有的外部文件的引用都放在相同的地方。
这就意味着必须等到全部JavaScript代码都被下载、解析和执行完成后，才能开始呈现页面的内容，这样做会导致浏览器在呈现页面时出现明显的延迟。
为了避免这个问题，现代WEB应用程序一般都把全部JavaScript引用放在<body>元素中页面内容的后面。
这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中，而给人以缩短了打开时间的感觉。
HTML4.01为<script>标签定义了defer属性，若在<script>元素中设置了defer属性，相当于告诉浏览器立即下载，但延迟执行。
HTML5规范要求脚本按照他们出现的先后顺序执行，则第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。
而在实际情况中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发之前执行，因此最好只包含一个延迟脚本。
HTML5中已经明确规定defer属性值适用于外部脚本文件，IE4-IE7还是支持针对嵌入脚本的defer属性，但之后的版本则完全支持HTML5规定的行为。
IE4、Firefox3.5、Safari5、Chrome是最早支持defer属性的浏览器，而其他浏览器还是会忽略这个属性，因此把延迟脚本放在页面底部仍是最佳选择。
HTML5为<script>标签定义了async属性，该属性只适用于外部脚本文件，并告诉浏览器立即下载该文件，但并不保证按照指定他们的先后顺序执行。
async属性的意义在于不让页面等待脚本的下载和执行，从而异步加载页面其他内容，因此，建议异步脚本不要再加载期间修改DOM。
一步脚本一定会在页面的load事件之前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。
支持异步脚本的浏览器有Firefox3.6、Safari5和Chrome。
在将页面的MIME类型指定为"application/xhtml+xml"的情况下回触发XHTML模式，并不是所有浏览器都支持以这种方式提供XHTML文档。
在HTML当中，有特殊的规则用来确定<script>元素中哪些元素可以被解析，但这些特殊的规则在XHTML中并不适用，为了避免在XHTML当中出现不必要的语法错误，通常会将特殊字符以实体形式代替。
这种做法虽然能够使得代码在XHTML中正常运行，但却导致了代码不好理解，所以通常采用利用CData片段来包含JavaScript代码的形式在XHTML中创建不需要解析的任意格式的文本内容的区域：<script type="text/javascript"><![CDATA[~此处写正常的JavaScript代码~]]></script>
在兼容XHTML的浏览器中，这个方法可以解决问题，但实际上，还有不少浏览器不兼容XHTML，因而不支持该代码片段，此时需要在使用JavaScript注释将该标记注释掉：<script type="text/javascript">//<![CDATA[~换行~此处写正常的JavaScript代码~换行~//]]></script>
在早期引入<script>元素的时候，该元素与传统的HTML的解析规则有冲突，在不支持JavaScript的浏览器中会把<script>元素中的内容直接输出到页面上，早期的做法是将JavaScript代码包含在一个HTML注释中：<script type="text/javascript"><!--此处写正常的JavaScript代码--></script>
虽然这种注释JavaScript代码的格式得到了所有浏览器的认可，也能被正确结实，但是由于所有浏览器都已经支持了JavaScript，因此也就没有必要再使用这种格式了。在XHTML模式下，因为脚本包含在XML注释中，所以脚本会被忽略。
另外<noscript>元素也能够在浏览器不支持脚本或者脚本被禁用的情况下显示提示内容，这个元素会在脚本无效时显示包含在其中的提示信息，而在启用了脚本的浏览器中，用户永远也看不到它，该元素能够作为除<script>元素外任意元素的子节点。
IE5.5引入了文档模式的概念，这个概念通过使用文档类型（doctype）切换实现。
最初的两种文档模式是混杂模式（quirks mode）和标准模式（standards mode）。
混杂模式会让IE的行为与IE5相同，而标准模式会让IE的行为更接近标准行为。
这两种模式主要影响CSS内容的呈现，但在某些情况下也会影响到JavaScript的解释执行。
后来IE又提出了一种准标准模式（almost standards mode），它与标准模式非常接近，不标准的地方主要体现在处理图片间隙的时候。
标准模式可以通过使用下列文档类型来开启：
<!--HTML 4.01 严格型-->：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--XHTML 1.0 严格型-->：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xthml1-strict.dtd">
<!--HTML 5-->：<!DOCTYPE html>
准标准模式可以通过过渡型（transitional）或框架集型（frameset）文档类型来触发：
<!--HTML 4.01 过渡型-->：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--HTML 4.01 框架集型-->：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!--XHTML 1.0过渡型-->：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xthml1/DTD/xhtml1-transitional.dtd">
<!--XHTML 1.0框架集型-->：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xthml1/DTD/xhtml1-frameset.dtd">