第一章-JavaScript简介

JavaScript实现

虽然JavaScript和ECMAScript通常都被人们用来表达相同的含义,但JavaScript的含义却比ECMA-262中规定的要多得多。

一个完整的JavaScript实现应该包含以下三个部分

  • ECMAScript(核心)
  • DOM(文档对象模型)
  • BOM(浏览器对象模型)

ECMAScript

由ECMA-262定义的ECMAScript和Web浏览器没有任何依赖关系。实际上,这门语言本身并不包含输入和输出的定义。

常见的web浏览器只是ECMAScript实现可能的宿主环境之一。

宿主环境不仅仅提供基本的ECMAScript实现,同时还提供该语言的扩展,以便于语言与环境之间的对接和交互。而这些扩展,包括DOM,则利用ECMAScript的核心类型和语法提供更多更具体的功能,以便实现针对环境的操作。其他宿主环境包括Node和Adobe Flash。

ECMA-262规定了语言的组成部分包括语法、类型、语句、关键字、保留字、操作符、对象。

ECMAScript就是对实现该标准规定的各个方面内容的语言的描述。

DOM(文档对象模型)

DOM是针对与XML但经过扩展用于HTML的应用程序编程接口(Application Programming Interface)

DOM把整个页面映射成一个多层节点结构,DOM树

HTML或XML页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。

html 复制代码
        <html>
            <head>
                <title>Sample Page</title>
            </head>
            <body>
                <p>Hello World! </p>
            </body>
        </html>

这就是DOM中的一个分层节点图

通过DOM创建的这个树形图,开发者就获得了控制页面内容和结构的主动权。借助DOM提供的API,可以进行一系列的操作。

为什么用DOM?

由于历史原因,Netscape和微软开发方面各持己见,对于开发人员来说,无法做到只编写一个HTML页面来实现跨平台。

DOM级别

DOM1级由:DOM核心和DOM HTML组成

DOM核心(DOM CORE)规定的是如何映射 基于XML的文档结构,以便简化对文档中任意部分的访问和操作

DOM HTML模块则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法。

如果说DOM1级的目标主要是映射文档的结构,那么DOM2级的目标就要宽泛多了。DOM2级在原来DOM的基础上又扩充了(DHTML一直都支持的)鼠标和用户界面事件、范围、遍历(迭代DOM文档的方法)等细分模块,而且通过对象接口增加了对CSS(Cascading Style Sheets,层叠样式表)的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。

DOM2级引入新的模块,给出了众多类型和接口的定义

DOM视图(DOM Views):定义了跟踪不同文档

DOM事件(DOM Events):定义了事件和事件处理的接口

DOM样式(DOM Style):定义了基于CSS为元素应用样式的接口

DOM遍历和范围(DOM Traversal and Range):定义了遍历操作文档树的接口

DOM3级别进一步拓展了DOM,引入以统计方式加载和保存文档的方法,在DOM中加载和保存(DOM Load and Save)模块中定义:新增了验证文档的方法,在DOM验证(DOM Validation)模块中定义。DOM3级对象DOM CORE 进行了拓展,开始支持XML1.0规范

其他DOM标准

除了DOM核心和DOM HTML接口之外,另外几种语言还发布了只针对自己的DOM标准

WEB浏览器对于DOM的支持

在DOM标准出现了一段时间之后,Web浏览器才开始实现它。微软在IE5中首次尝试实现DOM,但直到IE5.5才算是真正支持DOM1级。在随后的IE6和IE7中,微软都没有引入新的DOM功能,而到了IE8才对以前DOM实现中的bug进行了修复。

BOM(浏览器对象模型)

Internet Explorer 3和Netscape Navigator 3有一个共同的特色,那就是支持可以访问和操作浏览器窗口的浏览器对象模型(BOM, Browser Object Model)。开发人员使用BOM可以控制浏览器显示的页面以外的部分

而BOM真正与众不同的地方(也是经常会导致问题的地方),还是它作为JavaScript实现的一部分但却没有相关的标准。这个问题在HTML5中得到了解决,HTML5致力于把很多BOM功能写入正式规范

从根本上来说,BOM只处理**浏览器窗口和框架。**但是人们习惯把所有针对浏览器的JavaScript扩展当作是BOM的一部分。

扩展:

  • 弹出新浏览器窗口的功能
  • 移动、缩放和关闭浏览器窗口的功能
  • 提供浏览器详细信息的navigator对象
  • 提供浏览器所加载页面的详细信息的location对象
  • 提供用户显示器分辨率详细信息的screen对象
  • 对cookies的支持
  • 像XMLHttpRequest和IE的ActiveXObject这样的自定义对象

由于没有BOM标准可以遵循,因此每个浏览器都有自己的实现。虽然也存在一些事实标准,例如要有window对象和navigator对象等,但每个浏览器都会为这两个对象乃至其他对象定义自己的属性和方法。

小结

JavaScript是一种专门为与网页交互而设计的脚本语言,由三个部分组成:

  • ECMAScript,由ECMA-262定义,提供核心语言功能
  • 文档对象模型(DOM),提供访问和操作网页内容的方法和接口
  • 浏览器对象模型(BOM),提供与浏览器交互的方法和接口
相关推荐
fruge几秒前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia9 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
IT技术分享社区17 分钟前
C#实战:使用腾讯云识别服务轻松提取火车票信息
开发语言·c#·云计算·腾讯云·共识算法
极客代码20 分钟前
【Python TensorFlow】入门到精通
开发语言·人工智能·python·深度学习·tensorflow
疯一样的码农26 分钟前
Python 正则表达式(RegEx)
开发语言·python·正则表达式
光影少年29 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
Rattenking34 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
&岁月不待人&1 小时前
Kotlin by lazy和lateinit的使用及区别
android·开发语言·kotlin
StayInLove1 小时前
G1垃圾回收器日志详解
java·开发语言
无尽的大道1 小时前
Java字符串深度解析:String的实现、常量池与性能优化
java·开发语言·性能优化