javaScript基础知识
ｊavaScript 是脚本语言
是一种轻量级的编程语言。
是可插入 HTML 页面的编程代码。
插入 HTML 页面后，可由所有的现代浏览器执行。
javaScript由3个不同的不封组成：核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）
１．１ ECMAScript：定义了JavaScript基础。web浏览器只是ECMAScript实现的宿主环境之一（宿主环境）
组成部分：a 语法 b 类型 c 语句 d 关键字 e 保留字 f 操作符 g 对象
ECMA: European Computer Manufacturers Association 欧洲计算机制造商协会
ECMAScript协议标准由39号技术委员会制定（TC39，Technical Committee#39）
１．２ DOM : Document Object Model 是针对XML但经过拓展用于HTML的应用程序接口（API，Application Programming Interface）
DOM把整个页面映射为一个多层次节点结构，HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点都包含某种
不同类型的数据。
W3C（World Wide Web Consortium，万维网联盟：负责制定通信 标准）着手规划DOM
DOM的级别: DOM1由两模块组成 a,DOM核心（ＤＯＭ Ｃｏｒｅ） 和 ＤＯＭ HTML
DOM核心：映射基于XML的文档结构，以便简化对文档的任意部分访问和操作
DOM HTML模块则在ＤＯＭ核心基础上加以拓展，添加正对ＨＴＭＬ的对象和想法
ＤＯＭ２： 在ＤＯＭ１基础上引入 ＤＯＭ试图（DOM Views):定义了跟踪不同文档试图的接口。
DOM 事件（DOM Events）：定义了事件和事件处理的接口。
DOM样式（ＤＯＭ Ｔｒａｖｅｒｓａｌ ａｎｄ Ｒａｎｇｅ）：
定义了遍历和操作树的接口。
ＤＯＭ３：在DOM2的基础之上 DOM加载和保存（DOM Load and Save）:引入以统一方式加载和保存文档的方式接口
ＤＯＭ验证（ＤＯＭ Ｖａｌｉｄａｔｉｏｎ）：定义了验证文档方法的接口
对ＤＯＭ核心的拓展
１．３ＢＯＭ： Ｂｒｏｗｓｅｒ Ｏｂｊｅｃｔ Ｍｏｄｅｌ。支持可以访问和操作浏览器窗口浏览器对象模型（其中ｗｉｎｄｏｗ对象和ｎａｖｉｇａｔｏｒ对象）
从根本上讲，ＢＯＭ只处理浏览器与窗口和框架，惯常也讲所有针对浏览器的ＪａｖａＳｃｒｉｐｔ拓展算作ＢＯＭ的一部分（如下）
弹出浏览器窗口的功能
移动、缩放、和关闭浏览器窗口的功能
提供浏览器详细信息的Ｎａｖｉｇａｔｏｒ对象
提供浏览器所加载页面的详细信息的ｌｏｃａｔｉｏｎ对象
提供用户显示器分辨率详细信息的ｓｃｒｅｅｎ对象
对ｃｏｏｋｉｅｓ的支持
像ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ和ＩＥ的ＡｃｔｉｖｅＸＯｂｊｅｃｔ这样的自定义对象的支持
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
在ＨＴＭＬ中使用ＪａｖａＳｃｒｉｐｔ
本章主要内容：＜ｓｃｒｉｐｔ＞元素（重点）
嵌入代码与外部文件
文档模式
２．１＜ｓｃｒｉｐｔ＞元素
属性：
ａｓｙｎｃ：可选属性，表示应该立即下载脚本，但不妨碍页面中的其它操作，比如下载其他资源或等待加载其他脚本
注意，只对外部脚本文件有用
ｃｈａｒｓｅｔ：可选属性，表示通过ｓｒｃ属性指定的代码字符集。大多数浏览器会忽略这个属性值。故这一属性基本不用
ｄｅｆｅｒ：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行
注意，只对外部脚本文件有效
ｓｒｃ： 可选。表示包含要执行代码的外部文件
外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
外部脚本不能包含 <script> 标签。【见于Ｗ３Ｃ学习网站】
ｔｙｐｅ：可选，表示编写代码使用脚本语言的内容类型（也称为ＭＩＭＥ类型）。实际上服务器在传送ｊａｖａＳｃｒｉｐｔ
文件是使用的ＭＩＭＥ类型通常是ａｐｐｌｉｃａｔｉｏｎ／ｘ－ｊａｖａｓｃｒｉｐｔ，在ｔｙｐｅ设置这一值
ａｐｐｌｉｃａｔｉｏｎ／ｘ－ｊａｖａｓｃｒｉｐｔ脚本会忽略，ｔｙｐｅ的值用的最多的是
ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ，这一值不是必须的许多浏览器默认值就是ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ
使用＜ｓｃｒｉｐｔ＞元素的方式有两种：直接在页面中嵌入ＪａｖａＳｃｒｉｐｔ代码
包含外部ＪａｖａＳｃｒｉｐｔ文件
２１.１.１＜ｓｃｒｉｐｔ＞标签的位置：
传统做法，所有＜ｓｃｒｉｐｔ＞元素放在＜ｈｅａｄ＞元素中，
目的：把所有外部文件（包括ＣＳＳ和ＪａｖａＳｃｒｉｐｔ文件）的引用都放在相同的地方
在文档＜ｈｅａｄ＞元素中包含的ｊａｖａｓｃｒｉｐｔ文件意味着：必须等到全部ＪａｖａＳｃｒｉｐｔ代码被下载、
解析 、和执行完成之后，才能呈现页面内容（浏览器遇到＜ｂｏｄｙ＞标签时才开始呈现内容）对于那些需要很多ＪａｖａＳｃｒｉｐｔ
代码的页面导致呈现页面出现明显延迟（延迟期间浏览器窗口是一片空白）
故 现代Ｗｅｂ应用程序讲全部ＪａｖａＳｃｒｉｐｔ引用放在＜ｂｏｄｙ＞元素中页面内容的后面【在解析ＪＳ代码
之前，页面内容将呈现在浏览器中。用户会因浏览器窗口的空白页面缩短而感到打开页面的速度加快】
注意 在＜ｓｃｒｉｐｔ＞元素内部不要出现＜／ｓｃｒｉｐｔ＞这表示结束标签 会报错。如需用到需要使用转义字符“＼”
例子 ：ａｌｅｒｔ｛“＜＼／ｓｃｒｉｐｔ＞”｝
如＜ｓｃｒｉｐｔ＞元素中包含外部文件 ｓｒｃ属性是必须的 外部文件会加载到当前页面当中
注意：＜ｓｃｒｉｐｔ ｔｙｐｅ＝＂ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ＂ ｓｒｃ＝＂ｅｘａｍｐｌｅ．ｊｓ＂／＞ 不符合ＨＴＭＬ
规范 不能正确解析
外部的ＪａｖａＳｃｒｉｐｔ文件带有．ｊｓ拓展名。但不是必须的、
带有ｓｒｃ属性的＜ｓｃｒｉｐｔ＞元素不应该在＜ｓｃｒｉｐｔ＞＜／ｓｃｒｉｐｔ＞之间再包含ＪａｖａＳｃｒｉｐｔ代码，若包含
嵌入的代码会忽略，只会执行外部脚本文件
ｓｒｃ属性可以是指向ＨＴＭＬ页面所在域外的某个域中完整的ＵＲＬ，
＜ｓｃｒｉｐｔ ｔｙｐｅ＝“ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”
ｓｒｃ＝＂ｈｔｔｐ：／／ｗｗｗ／ｓｏｍｅｗｈｅｒｅ．ｃｏｍ／ａｆｉｌｅ／ｊｓ＂＞＜ｓｃｒｉｐｔ＞
位于外部域中的代码会被加载和解析，像这些代码位于加载它们的页面中一样、利用这一点可以在必要时通过不同域来提供ＪａｖａＳｃｒｉｐｔ
文件，不过可要小心，要么你是域的所有者，要么那个域的所有者值的信赖
浏览器会按照＜ｓｃｒｉｐｔ＞元素在页面中的出现的先后顺序对他们进行依次解析｛只要不存在 ｄｅｆｅｒ 和ａｓｙｎｃ｝即第一个
＜ｓｃｒｉｐｔ＞解析完成后，第二个＜ｓｃｒｉｐｔ＞才会被解析，然后第３个，第４个
２１.２延迟脚本
＜ｓｃｒｉｐｔ＞标签的ｄｅｆｅｒ属性：表明脚本在执行时，不会影响页面的构造即脚本会被延迟到整个页面都解析完毕
后再运行 ｄｅｆｅｒ属性相当告诉浏览器立即下载，但延迟执行
理想状态： 多个延迟脚本时 按照他们出现的先后顺序执行，即第一个延迟脚本优先于第二个延迟脚本执行，而这两个
延迟脚本会优先于ＤＯＭＣｏｎｔｅｎｔＬｏａｄｅｄ事件，
现实情况： 多个延迟脚本的执行不是顺序执行也不一定会在ＤＯＭＣｏｎｔｅｎｔＬｏａｄｅｄ事件触发钱执行
故最好只包含一个延迟脚本
注意 ｄｅｆｅｒ属性只适用于外部脚本文件， ＨＴＭＬ５明确规定
２１.３异步脚本
ａｓｙｎｃ属性与延迟脚本类似 并告诉浏览器立即下载文件，
不同点： ａｓｙｎｃ的脚本并不保证按照指定它们的先后顺序执行、故脚本之间要互不依赖非常重要
使用ａｓｙｎｃ目的：不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。故建议几步脚本不要在加载期间修改ＤＯＭ
异步脚本一定会在页面的ｌｏａｄ事件之前执行，当可能会在ＤＯＭＣｏｎｔｅｎｔＬｏａｄ事件触发之前或之后执行
注意也只用于 外部文件
２１.４ 在XＨＴＭＬ中的用法（作者建议不用读，因为现前端开发人员采用HTML5标准）
2.2嵌入代码和外部文件
在HTML页面中最好的做法是使用外部文件来包含JavaScript代码、 有以下优点
可维护性 将所有JavaScript文件放在一个文件夹可以便于维护，也有利于开发人员在不触发HTML标记情况下，
集中精力编辑JavaScript代码
可缓存 浏览器根据具体的设置缓存链接的所有外部JavaScript文件即如果两个页面同时使用同一个文件，那么
该文件只需下载一次，故加快页面的加载速度
适应未来 通过外部文件夹包含JavaScript无需使用前面提到的XHTML和注解hack、
2.3文档模式
通过文档类型（doctype）切换实现的 最初有 混杂模式（quirks mode）和标准模式（standard mode） 模式的不同主要影响
ＣＳＳ内容的呈现，有时也会影响ＪａｖａＳｃｒｉｐｔ的解释执行
无申明的情况下，默认的是混杂模式
２.４＜ｎｏｎｓｃｒｉｐｔ＞
用于在不支持ＪａｖａＳｃｒｉｐｔ的浏览器中显示替代内容， １.浏览器不支持脚本 ２.浏览器支持，但禁用 在启用了
脚本的情况下浏览器不会解析 ＜ｎｏｎｓｃｒｉｐｔ＞中的任何内容