第2章——在HTML中使用JavaScript
文章目录
一、< script >元素
向HTML页面中插入js的主要方法就是使用<script>元素。
1. 属性
HTML4.01为<script>定义了下列6个属性：
- async：表示应该立即下载脚本，但不应妨碍页面中的其他操作，如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
- defer：表示脚本可延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持该属性。
- src：表示包含要执行代码的外部文件。
- type：表示编写代码使用的脚本语言的内容类型，默认值为text/javascript。
- charset：表示通过src属性指定的代码的字符集，由于大多数浏览器会忽略该值，所以很少用到。
- language：已废弃，type成为该属性的替代属性。
2. 使用方式
（1）直接在页面中嵌入js代码
在使用<script>元素嵌入js代码时，只需为<script>指定type属性，然后将代码直接放在元素内部即可。包含在<script>元素内部的js代码将被从上至下依次解析。
当嵌入的js代码中出现"<\script>"字符串时，会被认为是结束的<\script>标签，因此需要使用转义字符“\”，将其写成“<\/script>”来解决。（转义字符可用于将可能被解析为特殊含义的字符串转义为仅包含字面意思的字符串）
（2）外部js文件
如果要通过<script>元素来包含外部js文件，那么src属性就是必需的，该属性指向一个外部js文件的链接。此时这个<script>元素内不能再嵌入其他js代码，嵌入的js代码会被忽略。
如果在XHTML文档中，也可以省略结束标签</script>，但不能在HTML文档中使用这种语法。
外部js文件通常带有.js扩展名，但这个扩展名不是必需的，因为浏览器不会检查包含js的文件的扩展名。
无论如何包含js代码，只要不存在async和defer属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次解析。
3. 标签的位置
传统做法：都放在<head>元素中，目的是把所有外部文件（包括css文件和js文件）的引用都放在相同的地方，如：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
页面内容
</body>
</html>
这种做法会带来一个问题：必须等到全部js代码都被下载、解析和执行完成后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容。对于需要很多js代码的页面来说，这会导致浏览器在呈现页面时出现明显的延迟，延迟期间窗口一片空白。
现代做法：把全部js引用放在<body>元素中页面内容的后面，如：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
页面内容
<script type="text/javascript" src="example.js"></script>
</body>
</html>
4. 延迟脚本（defer属性）
defer属性的用途是表明脚本在执行时不会影响页面的构造，脚本会延迟到整个页面都解析完毕后再运行。延迟脚本总是按照指定它们的顺序执行。
设置方式：
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
在以上代码中，设置了defer属性的两个脚本会延迟到浏览器遇到</html>标签后再执行。HTML5规范要求脚本按js出现的先后顺序执行，因此example1.js会先于example2.js执行，而这两个脚本会先于DOMContentLoaded事件执行。但现实中，延迟脚本不一定按顺序执行，也不一定会先于DOMContentLoaded事件执行，因此最好只包含一个延迟脚本。另外，最好也将延迟脚本放在页面底部。
5. 异步脚本（async属性）
async属性的用途是告诉浏览器立即下载脚本。与defer属性不同，async属性不保证脚本按指定它们的先后顺序执行。
设置方式：
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
在XHTML中，要设置为async=“async”。
在以上代码中，example2.js可能会先于example1.js执行，因此确保两个脚本互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。
异步脚本一定会在load事件前执行，但可能会在DOMContentLoaded事件触发前或后执行。
二、文档模式
文档模式是通过使用文档类型（doctype）切换实现的。最初的两种文档模式是混杂模式和标准模式，之后IE又提出准标准模式。混杂模式下，不同浏览器的行为差异非常大。而准标准模式与标准模式非常接近，它们的差异几乎可以忽略不计，检测文档模式时也不会发现什么不同。因此可以并称为“标准模式”。
如何触发文档模式
通过最开始的<!DOCTYPE>设置。
（1）混杂模式
如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。
（2）标准模式
可通过三种文档类型来开启：
【HTML4.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//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
【HTML5】
<!DOCTYPE html>
（3）准标准模式
可通过过渡型或框架集型文档类型来开启：
【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/xhtml1/DTD/xhtml1-transitional.dtd">
【XHTML 1.0 框架集型】
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
三、< noscript >元素
<noscript>元素用以在不支持js的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body>中的任何HTML元素（<script>元素除外）。<noscript>元素中的内容只在下列情况才会显示：
- 浏览器不支持脚本
- 浏览器支持脚本，但脚本被禁用
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
