JavaScript 简介
1. JavaScript 的实现
JavaScript 是一种专为与网页交互而设计的脚本语言, 由下列三个不同的部分组成:
(1) 核心 (ECMAScript), 由 ECMA-262 定义, 提供核心语言功能, 描述了该语言的语法和基本对象;
规定了该语言的以下组成部分:
语法
类型
语句
关键字
保留字
操作符
对象
(2) 文档对象模型 (DOM), 提供访问和操作网页内容的方法和接口;
DOM 将把整个页面规划成由节点层级构成的文档. html 或 xml 页面的每个部分都是一个节点的衍生物. DOM 通过创建树来表示文档, 从而使开发者对文档的内容和结构具有空前的控制力. 用 DOM API 可以轻松地删除, 添加和替换节点.
(3) 浏览器对象模型 (BOM), 提供与浏览器交互的方法和接口.
BOM 主要处理浏览器窗口和框架, 不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分. 这些扩展包括:
弹出新浏览器窗口的功能;
移动, 缩放和关闭浏览器窗口的功能;
提供浏览器详细信息的 navigator 对象;
提供浏览器所加载页面的详细信息的 location 对象;
提供用户显示器分辨率详细信息的 screen 对象;
对 cookies 的支持;
像 XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象.
2. ECMAScript 与 JavaScript 的关系
ECMAScript 是 JavaScript 语言的国际标准, 为 JavaScript 提供核心语言功能; JavaScript 是 ECMAScript 的实现.
在 HTML 中使用 JavaScript
1. 使用 < script > 元素
(1) <script > 的属性
async:(可选) 表示应该立即下载脚本, 但不应妨碍页面中的其他操作, 比如下载其他资源或等待加载其他脚本. 只对外部脚本文件有效.
src:(可选) 表示包含要执行代码的外部文件.
charset:(可选) 表示通过 src 属性指定的代码的字符集. 由于大多数浏览器会忽略它的值, 因此这个属性很少有人用.
defer:(可选) 表示脚本可以延迟到文档完全被解析显示之后再执行. 只对外部脚本文件有效.
language(已废弃) 用于表示编写代码使用的脚本语言.
type:(可选) 可以看作是 language 的替代属性: 表示编写代码使用的脚本语言的内容类型 (也称 MIME 类型).
(2) 使用 < script > 元素的方式
直接在页面中页面中嵌入 JavaScript 代码
在使用 < script > 元素嵌入 JavaScript 时, 只须为 < script > 指定 type 属性. 然后把 JavaScript 代码直接放在元素内部即可.
- <script type="text/javascript">// 此为 type 属性的一个默认值
- function sayHi(){
- alert("Hi!");
- // alert("</script>");
- // 代码中不能出现 "</script>" 字符串, 否则为错误;
- alert("<\/script>");
- // 若遇到可通过转义字符 "\" 解决这个问题.
- }
- </script>
包含外部 JavaScript 文件
如果要通过 < script > 元素来包含外部 JavaScript 文件, 那么 src 属性是必需的. 其属性值是一个指向外部 JavaScript 文件的 URL, 这个文件既可 以是与包含它的页面位于同一个服务器上的文件, 也可以是其他任何域中的文件..
<script type="text/javascript" src="example.js"></script>
带有 src 属性的 < script > 元素不应该在其 < script > 和 </script > 标签之间再包含额外的 JavaScript 代码. 如果包含, 则只会下载并执行外部脚本文件, 嵌入的代码会被忽略.
(3) 延迟脚本 (defer 属性)
在 < script > 元素中设置 defer 属性, 脚本会被延迟到整个页面都解析完毕后再运行, 相当于告诉浏览器立即下载, 但延迟执行.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- Example HTML Page
- </title>
- <!-- 虽然放在了 < head> 中, 但将延迟到浏览器遇到 </html > 后再执行 -->
- <!-- 第一个延迟脚本会先于第二个延迟脚本执行 -->
- <script type="text/javascript" defer="defer" src="example1.js">
- </script>
- <script type="text/jaavascript" defer="defer" src="example2.js">
- </script>
- </head>
- <body>
- <!-- 这里放页面内容 -->
- </body>
- </HTML>
把延迟脚本放在页面底部是最佳选择
(4) 异步脚本 (async 属性)
async 属性告诉浏览器立即下载文件, 且标记为 async 的脚本并不保证按照指定它们的先后顺序执行.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- Example HTML Page
- </title>
- <!-- 第二个脚本文件可能会在第一个脚本文件之前执行 -->
- <script type="text/javascript" async src="example1.js">
- </script>
- <script type="text/jaavascript" async src="example2.js">
- </script>
- </head>
- <body>
- <!-- 这里放页面内容 -->
- </body>
- </HTML>
指定 async 属性的目的是不让页面等待两个脚本下载和执行, 从而异步加载页面其他内容.
JavaScript 解析顺序
所有 < script > 元素都会按照它们在页面中出现的先后顺序依次被解析. 在不使用 defer 和 async 属性的情况下, 只有在解析完前面 < script > 元素中的代码之后, 才会开始解析后面 <script > 元素中的代码.
由于浏览器会先解析完不使用 defer 属性的 < script > 元素中的代码, 然后再解析后面的内容, 所以一般应该把 < script > 元素放在页面最后, 即主要内容后面,</body > 标签前面.
嵌入代码和外部文件
推荐使用外部文件来包含 JavaScript 代码, 有以下优点:
可维护性: 把所有 JavaScript 文件都放在一个文件夹中, 更易于维护.
可缓存: 浏览器能够根据具体的设置缓存链接的所有外部 JavaScript 文件. 也就是说, 如果有两个页面都使用同一个文件, 那么这个文件只需下载一次. 因此, 最终结果就是能够加快页面加载的速度.
适应未来
来源: http://www.jianshu.com/p/5bf8160eec1d