2.在 HTML 中使用 JavaScript
2.1 <script>元素
2.1.1<script>六个属性
- async（异步脚本）：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或 等待加载其他脚本。只对外部脚本文件有效。
- defer（延迟脚本）：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有 效，IE7及更早版本对嵌入脚本也支持这个属性。
- charset：可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值， 因此这个属性很少有人用。
- src：可选。表示包含要执行代码的外部文件。
- type：可选。可以看成是 language 的替代属性；这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为 text/javascript。
- language：已废弃。原来用于表示编写代码使用的脚本语言（如 JavaScript、JavaScript1.2 或 VBScript）。大多数浏览器会忽略这个属性，因此也没有必要再用了。
- 使用<script>元素的方式有两种：直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript 文件。 在使用<script>元素嵌入 JavaScript代码时，只须为<script>指定 type 属性。然后，像下面这 样把 JavaScript代码直接放在元素内部即可：
2.1.2<script>元素的使用方式
用<script>元素的方式有两种：
- 页面中嵌入 JavaScript 代码
在使用<script>元素嵌入 JavaScript代码时，只须为<script>指定 type 属性。然后，把 JavaScript代码直接放在元素内部即可：
包含在<script>元素内部的 JavaScript代码将被从上至下依次解释，在解释器对<script>元素内部的所 有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。 在使用<script>嵌入 JavaScript代码时，记住不要在代码中的任何地方出现"</script>"字符串。 例如，浏览器在加载下面所示的代码时就会产生一个错误：
<script type="text/javascript">
function sayScript(){ alert("</script>"); }
</script>
因为按照解析嵌入式代码的规则，当浏览器遇到字符串"</script>"时，就会认为那是结束的 </script>标签。而通过转义字符“/”可以解决这个问题，例如：
<script type="text/javascript">
function sayScript(){ alert("<\/script>"); }
</script>
这样写代码浏览器可以接受，因而也就不会导致错误了。
- 包含外部 JavaScript 文件。
如果要通过<script>元素来包含外部 JavaScript 文件，那么 src 属性就是必需的。这个属性的值 是一个指向外部 JavaScript文件的链接。与解析嵌入式 JavaScript代码一样， 在解析外部 JavaScript文件（包括下载该文件）时，页面的处理也会暂时停止。如果是在 XHTML文档 中，也可以省略前面示例代码中结束的</script>标签，例如：
<script type="text/javascript" src="example.js" />
但是，不能在 HTML文档使用这种语法。原因是这种语法不符合 HTML规范，而且也得不到某些 浏览器（尤其是 IE）的正确解析。
按照惯例，外部 JavaScript文件带有.js扩展名。但这个扩展名不是必需的，因为 浏览器不会检查包含 JavaScript 的文件的扩展名。这样一来，使用 JSP、PHP 或其他 服务器端语言动态生成 JavaScript 代码也就成为了可能。但是，服务器通常还是需要 看扩展名决定为响应应用哪种 MIME 类型。如果不使用.js 扩展名，请确保服务器能 返回正确的 MIME类型。
需要注意的是，带有 src 属性的<script>元素不应该在其<script>和</script>标签之间再 包含额外的 JavaScript代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码 会被忽略。 另外，通过<script>元素的 src 属性还可以包含来自外部域的 JavaScript 文件。这一点既让 <script>元素倍显强大，又让它备受争议。在这一点上，<script>与<img>元素非常相似，即它的 src 属性可以是指向当前 HTML页面所在域之外的某个域中的完整 URL，例如：
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
这样，位于外部域中的代码也会被加载和解析，就像这些代码位于加载它们的页面中一样。利用这 一点就可以在必要时通过不同的域来提供 JavaScript 文件。不过，在访问自己不能控制的服务器上的 JavaScript 文件时则要多加小心。如果不幸遇到了怀有恶意的程序员，那他们随时都可能替换该文件中 的代码。因此，如果想包含来自不同域的代码，则要么你是那个域的所有者，要么那个域的所有者值得 信赖。 无论如何包含代码，只要不存在 defer 和 async 属性，浏览器都会按照<script>元素在页面中 出现的先后顺序对它们依次进行解析。换句话说，在第一个<script>元素包含的代码解析完成后，第 二个<script>包含的代码才会被解析，然后才是第三个、第四个……
2.1.3<script>标签的位置
<script>元素放在<head>元素中，这种做法的目的就是把所有外部文件（包括 CSS文件和 JavaScript文件）的引用都放在相同的地方。 可是，在文档的<head>元素中包含所有 JavaScript文件，意味着必须等到全部 JavaScript代码都被下载、 解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于 那些需要很多 JavaScript 代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟 期间的浏览器窗口中将是一片空白。
为了避免这个问题，现代 Web 应用程序一般都把全部 JavaScript引 用放在<body>元素中页面内容的后面这样，在解析包含的 JavaScript 代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏 览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
2.1.4延迟脚本和异步脚本
延迟脚本：<script>标签的 defer 属性。这个属性使脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置 defer 属性，相当于告诉浏览器立即下载，但延迟执行。
defer 属性只适用于外部脚本文件，给嵌入脚本设置的 defer 属性会被忽略
异步脚本：<script>标签的 async 属性。指定 async 属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。 为此，建议异步脚本不要在加载期间修改 DOM。 标记为 async 的脚本并不保证按照指定它们的先后顺序执行。
2.1.5<script>标签在XHTML的使用
有的代码块在Xhtml'中无效，例如
<script type="text/javascript">
function compare(a, b) {
if (a < b) {
alert("A is less than B"); }
else if (a > b) { alert("A is greater than B");
} else {
alert("A is equal to B");
}
}
</script> 使用下面的办法解决
- 用相应的html实体 if (a < b)
- CData块
-
<script type="text/javascript"> <![CDATA[ function compare(a, b) { if (a < b) { alert("A is less than B"); } else if (a > b) { alert("A is greater than B"); } else { alert("A is equal to B"); } } ]]> </script>2.1.6嵌入代码和引入外部文件的区别
使用外部文件有如下优点。
可维护性：遍及不同 HTML页面的 JavaScript会造成维护问题。但把所有 JavaScript文件都放在 一个文件夹中，维护起来就轻松多了。而且开发人员因此也能够在不触及 HTML标记的情况下， 集中精力编辑 JavaScript代码。
可缓存：浏览器能够根据具体的设置缓存链接的所有外部 JavaScript文件。也就是说，如果有两个 页面都使用同一个文件，那么这个文件只需下载一次。因此，终结果就是能够加快页面加载的 速度。
适应未来：通过外部文件来包含 JavaScript 无须使用前面提到 XHTML 或注释 hack。HTML 和 XHTML包含外部文件的语法是相同的
2.1.7文档模式
这个概念是通过使用文档类型（doctype）切换实现的。初的两种模式是
：混杂模式（quirks mode）和标准模式（standards mode）。混杂模式会让 IE的行为与（包 含非标准特性的）IE5相同，而标准模式则让 IE的行为更接近标准行为。虽然这两种模式主要影响 CSS 内容的呈现，但在某些情况下也会影响到 JavaScript 的解释执行。
2.1.8 <noscript>元素
早期浏览器都面临一个特殊的问题，即当浏览器不支持 JavaScript 时如何让页面平稳地退化。对这 个问题的终解决方案就是创造一个<noscript>元素，用以在不支持 JavaScript 的浏览器中显示替代 的内容。这个元素可以包含能够出现在文档<body>中的任何 HTML元素——<script>元素除外。
包含 在<noscript>元素中的内容只有在下列情况下才会显示出来：
浏览器不支持脚本；
浏览器支持脚本，但脚本被禁用。
符合上述任何一个条件，浏览器都会显示<noscript>中的内容。而在除此之外的其他情况下，浏 览器不会呈现<noscript>中的内容。
用来检测脚本的支持情况和禁用情况
扫一扫
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
