标签：
本章内容
2.1 <script>元素
向Html页面中插入JavaScript的主要方法就是使用<script>元素。Html4.01为<script>定义了6个属性。
async：可选。表示应该立即下载脚本，但不应该妨碍页面中的其他操作，例如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
charset：可选，表示通过src属性指定代码的字符集。由于大多数浏览器会忽略该值，所以很少用。
defer：可选。表示脚本可以延迟到文档完全被解析和显示后执行。只对外部脚本文件有效。
language：已废弃。大多数浏览器会忽略该属性。
src：可选。表示包含要执行代码的外部文件。
type：可选。可以看成language的替代属性；表示编写代码使用的脚本语言的内容类型。考虑到约定俗成和最大限度地浏览器兼容性，目前type属性的值仍然是text/javascript。不过，这个属性不是必须的，如果没有指定该属性，其默认值依然是text/javascript。
使用<script>元素的方法有两种，直接在页面中嵌入代码和包含外部的JavaScript文件。
在使用<script>元素嵌入JavaScript代码时，包含在<script>元素内部的JavaScript代码将被从上至下依次解释。记住不要在代码中的任何地方出现"</script>"字符串。例如，浏览器在加载下面所示的代码时，就会产生一个错误：
<script type="text/javascript">
function sayScript(){
alert("</script>");
}
</script>
因为按照解析嵌入式代码的规则，当浏览器遇到字符串"</script>"时，就会认为是结束的</script>标签。通过把这个字符串分隔为两部分可以解决这个问题，
<script type="text/javascript">
function sayScript(){
alert("<\/script>");
}
</script>
如果通过<script>元素包含外部JavaScript文件，src属性就是必需的。这个属性的值是一个指向外部JavaScript文件的链接，例如：
<script type="text/javascript" src="example.js"></script>在这个例子中，外部文件example.js将被加载到当前页面中。与解析嵌入式JavaScript代码一样，在解析外部的JavaScript文件时（包括下载该文件），页面的处理也会暂时停止。如果是在XHTML文档中，也可以省略前面示例代码中结束的</script>标签，例如：
<script type="text/javascript" src="example.js" />
但是，不能再HTML文档中使用这种语法。因为不符合HTML规范，得不到浏览器的正确解释。
按照惯例，外部JavaScript文件带有.js扩展名。但这个扩展名不是比虚的，因为浏览器不会检查包含JavaScript的文件的扩展名。这样一来，使用JSP、PHP或其他服务器语言动态生成JavaScript代码也就成为了可能。但是，服务器通常还是需要看扩展名决定为响应应用哪种MIME类型。如果不使用.js扩展名，请确保服务器能返回正确的MIME类型。
备注：MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。
带有src属性的<script>元素不应该在其<script></script>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。
另外，通过<script>元素的src属性还可以包含来自外部域的JavaScript文件。这一点既使<script>元素倍显强大，又让它备受争议。在这一点上，<script>与<img>元素非常相似，即它的src属性可以指向当前HTML页面所在域之外的某个域的URL。但是这样是不安全的。
无论如何包含代码，只要不存在defer和async属性，浏览器会按照<script>元素在页面中出现的先后顺序对他们依次进行解析。也就是说，在第一个<script>元素包含的代码解析完成后，第二个<script>包含额代码才会被解析，然后才是第三个、第四个...
2.1.1 标签的位置
按照惯例，所有<script>元素都应该放在页面的<head>元素中，例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!--页面内容-->
<body>
</html>
这意味着必须等到全部JavaScript代码都被下载、解析和执行完成后，才能开始呈现页面的内容(浏览器在遇到<body>标签时才可以呈现内容)。对于大量JavaScript代码的页面来说，页面在呈现时出现明显的延迟，延迟期间浏览器窗口将是一片空白。所以，现代的Web应用程序一般把全部JavaScript引用放在<body>元素中页面的内容后面，例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!--页面内容-->
<script type="text/javascript" src="example.js"></script>
<script type="text/javascript" src="example2.js"></script>
<body>
</html>
2.1.2 延迟脚本
HTML4.01为<script>标签定义了defer属性。表明脚本在执行时不会影响页面的构造。脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!--页面内容-->
<body>
</html>
有的浏览器会忽略这个属性，像平常一样处理脚本。为此，把延迟脚本放在页面底部仍然是最佳选择。
2.1.3 异步脚本
HTML5 为<script>元素定义了async属性。这个属性与defer属性类似，也只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example.js"></script>
<script type="text/javascript" async defer="defer" src="example2.js"></script>
</head>
<body>
<!--页面内容-->
<body>
</html>
在以上代码中，第二个脚本可能会在第一个脚本文件之前执行。因此，却道两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面的其他内容。为此，建议异步脚本不要在加载期间修改DOM。
异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。支持异步脚本的浏览器有Firefox3.6、Safari5和Chrome。
在XHTML文档中，要把async属性设置为 async="async"。
2.1.4 在XHTML中的用法
在XHTML中，比较语句 a<b中的小于号<在XHTML中将被当作开始一个新标签来解析。解决的方法：
1> 使用相应HTML实体(<)替换代码中所有的小于号<。
2> 使用CData片段包含JavaScript代码。
2.2 嵌入代码与外部文件
与嵌入代码比骄傲，外部文件有如下优点：
1>可维护性，在单独的文件夹中存储js文件，可以在不触及HTML标记的情况下，集中精力编辑JavaScript代码。
2>可缓存，浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。
3>适应未来：通过外部文件包含JavaScript无须使用前面提到的XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的。
2.3 文档模式
文档模式包括混杂模式和标准模式。虽然这两种模式主要影响CSS内容的呈现，但是在某些情况下也会影响到JavaScript的解释执行。如果文档开始没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但这不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异很大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。
HTML 5 的文档模式(标准模式)
<!DOCTYPE html>
2.4 <noscript>元素
使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但是在启用了脚本的情况下，浏览器不会显示<noscript>元素的任何内容。
标签：
原文地址：http://www.cnblogs.com/mazg/p/5401880.html
