JavaScript 简介
- 1995 年,Netscape 公司的布兰登・艾奇(Brendan Eich),在 Netscape 浏览器上首次设计实现了 JavaScript。
- JavaScript 是一种专为与网页交互而设计的脚本语言。
一个完整的 JavaScript 实现由三个不同的部分组成:
ECMAScript
- ECMAScript 是 ECMA 制定的脚本语言标准,它用来标准化 JavaScript 语言的基本语法结构,它是 JavaScript 实现的基础。
- 由 ECMA-262 定义的 ECMAScript 与 Web 浏览器没有依赖关系,Web 浏览器只是 ECMAScript 实现可能的宿主环境之一。
- 不同 Web 浏览器对 ECMAScript 的兼容性不同。
- ES6(即 ECMAScript 2015 )于 2015 年 6 月 17 日发布。
DOM
- 文档对象模型(DOM)是针对 XML 但经过扩展用于 HTML 的应用程序编程接口(API)。
- DOM 把 HTML 页面映射为一个多层节点结构。
- W3C 制定 DOM 标准。
- 不同 Web 浏览器对 DOM 标准(DOM1、DOM2、DOM3)的支持情况。
BOM
- 浏览器对象模型(BOM),支持访问和操作浏览器窗口。
在 HTML 中使用 JavaScript
把 JavaScript 插入到 HTML 页面中需要使用 <script> 元素。
<script> 元素
使用 <script> 元素的两种方式:
- 直接在页面中嵌入 JavaScript 代码;
- 包含外部 JavaScript 文件。
异步脚本
// async 属性:异步执行脚本。
// async 属性只适用于外部脚本文件。
// 标记为 async 的脚本并不保证按照指定它们的先后顺序执行。
// 在 XHTML 文档中,要把 async 属性设置为 async="async"。
<script async type="text/javascript" src="指向外部 JavaScript 文件的链接">
</script>
延迟脚本
// defer 属性:延迟到文档完全被解析和显示之后再执行脚本。
// defer 属性只适用于外部脚本文件。
// 在现实当中,存在多个脚本时,延迟脚本并不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发前执行,因此最好只包含一个延迟脚本。
// 在 XHTML 文档中,要把 defer 属性设置为 defer="defer"。
// *** 把延迟执行的脚本放在页面底部仍然是最佳选择。 ***
<script defer type="text/javascript" src="指向外部 JavaScript 文件的链接">
/* 如果包含了 src 属性,此处就不应该再包含额外的 JavaScript 代码 */
/* 即使包含了嵌入的代码,浏览器也会忽略嵌入代码 */
</script>
💡
- 所有 <script> 元素会按照它们在页面中出现的先后顺序依次被解析。所以一般应该把 <script> 元素放在页面最后,<body> 标签之前。
- type 属性是可选属性,用于设置脚本语言的内容类型,默认值为 text/javascript 。
CData 片段
- 可扩展超文本标记语言,即 XHTML(Extensible HyperText Markup Language),是将 HTML 作为 XML 的应用而重新定义的一个标准。编写 XHTML 代码的规则要比编写 HTML 严格得多,而且直接影响能否在嵌入 JavaScript 代码时使用 <script/> 标签。
- CData 片段解决的是在 HTML 代码中能正确解析的内容无法被 XHTML 解析的问题。
// CDATA 片段解决方法中出现特殊字符导致解析语法错误
// 很多浏览器不兼容 XHTML,可以把 CDATA 片段加注释解决。
<script type="text/javascript">
//<![CDATA[
function compare(a, b) {
if (a < b) {
alert("A is less than B");
}else if {
alert("A is greater than B");
}else {
alert("A is equal to B");
}
}
//]]>
</script>
💡
将页面的 MIME 类型指定为 “application/xhtml+xml” 可以触发 XHTML 模式,但并不是所有的浏览器都支持以这种方式提供 XHTML 文档。
<noscript> 属性
下列情况下会显示 <noscript> 中的内容:
- 浏览器不支持脚本;
- 浏览器支持脚本,但脚本被禁用;
<noscript>
<p>本页面需要浏览器支持(启用)JavaScript</p>
</noscript>
所有可以用 JavaScript 编写的程序,最终都会出现 JavaScript 的版本。
(Any application that can be written in JavaScript will eventually be written in JavaScript.)
—— Jeff Atwood