`

JavaScript的组成与实现

阅读更多

JavaScript 的核心ECMAScript 描述了该语言的语法和基本对象

DOM 描述了处理网页内容的方法和接口

BOM 描述了与浏览器进行交互的方法和接口

  

ECMAScript、DOM 和 BOM

尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标准化的部分。实际上,一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

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

 

 

 

ECMAScript

ECMAScript 并不与任何具体浏览器相绑定 ,实际上,它也没有提到用于任何用户输入输出的方法(这点与 C 这类语言不同,它需要依赖外部的库来完成这类任务)。那么什么才是 ECMAScript 呢?ECMA-262 标准(第 2 段)的描述如下:

“ECMAScript 可以为不同种类的宿主环境提供核心的脚本编程能力 ,因此核心的脚本语言是与任何特定的宿主环境分开进行规定的... ...”

Web 浏览器对于 ECMAScript 来说是一个宿主环境,但它并不是唯一的宿主环境。事实上,还有不计其数的其他各种环境(例如 Nombas 的 ScriptEase,以及 Macromedia 同时用在 Flash 和 Director MX 中的 ActionScript)可以容纳 ECMAScript 实现。那么 ECMAScript 在浏览器之外规定了些什么呢?

简单地说,ECMAScript 描述了以下内容:

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 运算符
  • 对象

ECMAScript 仅仅是一个描述,定义了脚本语言的所有属性、方法和对象其他语言可以实现 ECMAScript 来作为功能的基准 ,JavaScript 就是这样:

 

 

每个浏览器都有它自己的 ECMAScript 接口的实现,然后这个实现又被扩展,包含了 DOM 和 BOM (在以下几节中再探讨)。当然还有其他实现并扩展了 ECMAScript 的语言,例如 Windows 脚本宿主(Windows Scripting Host, WSH)、Macromedia 在 Flash 和 Director MX 中的 ActionScript,以及 Nombas ScriptEase。

1. ECMAScript 的版本

ECMAScript 分成几个不同的版本,它是在一个叫做 ECMA-262 的标准中定义的。和其他标准一样,ECMA-262 会被编辑和更新。当有了主要更新时,就会发布一个标准的新版。最新 ECMA-262 的版本是第三版,于 1999 年 12 月发布。

 

ECMA-262 的第一版在本质上与 Netscape 的 JavaScript 1.1 是一样,只是把所有与浏览器相关的代码删除了 ,此外还有一些小的调整。首先,ECMA-262 要求对 Unicode 标准的支持 (以便支持多语言)。第二,它要求对象是平台无关的 (Netscape 的 JavaScript 1.1 事实上有不同的对象实现,例如 Date 对象,是依赖于平台)。这是 JavaScript 1.1 和 1.2 为什么不符合 ECMA-262 规范第一版 的主要原因。

ECMA-262 的第二版大部分更新本质上是编辑性的。这次标准的更新是为了与 ISO/IEC-16262 的严格一致,也并没有特别添加、更改和删除内容。ECMAScript 一般不会遵守第二版。

ECMA-262 第三版是该标准第一次真正的更新。它提供了对字符串处理、错误定义和数值输出 的更新。同时,它还增加了正则表达式、新的控制语句、try...catch 异常处理的支持 ,以及一些为使标准国际化而做的小改动。一般来说,它标志着 ECMAScript 成为一种真正的编程语言

 

2. Web 浏览器中的 ECMAScript 支持

含有 JavaScript 1.1 的 Netscape Navigator 3.0 在 1996 年发布。然后,JavaScript 1.1 规范被作为一个新标准的草案被提交给 EMCA。有了 JavaScript 轰动性的流行,Netscape 十分高兴地开始开发 1.2 版。但有一个问题,ECMA 并未接受 Netscape 的草案。在 Netscape Navigator 3.0 发布后不久,微软就发布了 IE 3.0。该版本的 IE 含有 JScript 1.0(微软自己的 JavaScript 实现的名称),原本计划可以与 JavaScript 1.1 相提并论。然后,由于文档不全以及一些不当的重复特性,JScript 1.0 远远没有达到 JavaScript 1.1 的水平。

 

在 ECMA-262 第一版定稿之前,发布含有 JavaScript 1.2 的 Netscape Navigator 4.0 是在 1997 年,在那年晚些时候,ECMA-262 标准被接受并标准化。因此,JavaScript 1.2 并不和 ECMAScript 的第一版兼容,虽然 ECMAScript 应该基于 JavaScript 1.1。

 

JScript 的下一步是 IE 4.0 中加入的 JScript 3.0(2.0 版是随 IIS 3.0 一起发布的,但并未包含在浏览器中)。微软大力宣传 JScript 3.0 是世界上第一个真正符合 ECMA 标准的脚本语言。而那时,ECMA-262 还没有最终定稿,所以 JScript 3.0 也遭受了和 JavaScript 1.2 同样的命运 - 它还是没能符合最终的 ECMAScript 标准。

 

Netscape 选择在 Netscape Navigator 4.06 中升级它的 JavaScript 实现。JavaScript 1.3 使 Netscape 终于完全符合了 ECMAScript 第一版 。Netscape 加入了对 Unicode 标准的支持,并让所有的对象保留了在 JavaScript 1.2 中引入的新特性的同时实现了平台独立。

 

当 Netscape 将它的源代码作为 Mozilla 项目公布于众时,本来计划 JavaScript 1.4 将会嵌入到 Netscape Navigator 5.0 中。然而,一个冒进的决定 - 要完全从头重新设计 Netscape 的代码,破坏了这个工作。JavaScript 1.4 仅仅作为一个 Netscape Enterprise Server 的服务器端脚本语言发布,以后也没有被放入浏览器中。

如今,所有主流的 Web 浏览器都遵守 ECMA-262 第三版

 

下面的表格列出了大部分流行的 Web 浏览器中的 ECMAScript 支持:

 

浏览器 DOM 兼容性
Netscape Navigator 2.0 -
Netscape Navigator 3.0 -
Netscape Navigator 4.0 - 4.05 -
Netscape Navigator 4.06 - 4.79 Edition 1
Netscape 6.0+ (Mozilla 0.6.0+) Edition 3
Internet Explorer 3.0 -
Internet Explorer 4.0 -
Internet Explorer 5.0 Edition 1
Internet Explorer 5.5+ Edition 3
Opera 6.0 - 7.1 Edition 2
Opera 7.2+ Edition 3
Safari 1.0+/Konqueror ~ 2.0+ Edition 3

 

DOM

DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。 DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。DOM 通过创建树来表示文档,从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点。

 

1. 为什么 DOM 必不可少

自从 IE 4.0 和 Netscape Navigator 4.0 开始支持不同形态的动态 HTML(DHTML),开发者首次能够在不重载网页的情况下修改它的外观和内容。这是 Web 技术的一大飞跃,不过也带来了巨大的问题。Netscape 和微软各自开发自己的 DHTML,从而结束了 Web 开发者只编写一个 HTML 页面就可以在所有浏览器中访问的时期。

业界决定必须要做点什么以保持 Web 的跨平台特性 ,他们担心如果放任 Netscape 和微软公司这样做,Web 必将分化为两个独立的部分,每一部分只适用于特定的浏览器。因此,负责指定 Web 通信标准的团体 W3C(World Wide Web Consortium)就开始制定 DOM。

2. DOM 的各个 level

DOM Level 1 是 W3C 于 1998 年 10 月提出的。它由两个模块组成,即 DOM CoreDOM HTML 。前者提供了基于 XML 的文档的结构图,以便访问和操作文档的任意部分 ;后者添加了一些 HTML 专用的对象和方法,从而扩展了 DOM Core

注意,DOM 不是 JavaScript 专有的,事实上许多其他语言都实现了它 。不过,Web 浏览器中的 DOM 已经用 ECMAScript 实现了,现在是 JavaScript 语言的一个很大组成部分。

DOM Level 1 只是一个目标,即规划文档的结构,DOM Level 2 的目标就广泛多了。对原始 DOM 的扩展添加了对鼠标和用户界面事件(DHTML 对此有丰富的支持)、范围、遍历(重复执行 DOM 文档的方法)的支持,并通过对象接口添加了对 CSS(层叠样式表)的支持。由 Level 1 引入的原始 DOM Core 也加入了对 XML 命名空间的支持。

DOM Level 2 引入了几种 DOM 新模块,用于处理新的接口类型:

  • DOM 视图 - 描述跟踪文档的各种视图(即 CSS 样式化之前和 CSS 样式化之后的文档)
  • DOM 事件 - 描述事件的接口
  • DOM 样式 - 描述处理基于 CSS 样式的接口
  • DOM 遍历和范围 - 描述遍历和操作文档树的接口

DOM Level 3 引入了以统一的方式载入和保持文档的方法(包含在新模块 DOM Load and Save)以及验证文档 (DOM Validation)的方法,从而进一步扩展了 DOM。在 Level 3 中,DOM Core 被扩展为支持所有的 XML 1.0 特性,包括 XML Infoset、XPath 和 XML Base。

在学习 DOM 时,可能会遇到有人引用 DOM Level 0。注意,根本没有 DOM Level 0 这个标准,它只是 DOM 的一个历史参考点(DOM Level 0 指的是 IE 4.0 和 Netscape Navigator 4.0 中支持的原始 DHTML)。

 

3. Web 浏览器中的 DOM 支持

DOM 在被 Web 浏览器开始实现之前就已经是一种标准了。IE 首次尝试 DOM 是在 5.0 版本中,不过其实直到 5.5 版本之后才具有真正的 DOM 支持,IE 5.5 实现了 DOM Level 1。从那时起,IE 就没有引入新的 DOM 功能。

Netscape 直到 Netscape 6(Mozilla 0.6.0)才引入 DOM 支持。目前,Mozilla 具有最好的 DOM 支持,实现了完整的 Level 1、几乎所有 Level 2 以及一部分 Level 3。(Mozilla 开发小组的目标是构造一个与标准 100% 兼容的浏览器,他们的工作得到了回报。)

Opera 直到 7.0 版本才加入 DOM 支持,还有 Safari 也实现了大部分 DOM Level 1。它们几乎都与 IE 5.5 处于同一水平,有些情况下,甚至超过了 IE 5.5。不过,就对 DOM 的支持而论,所有浏览器都远远落后于 Mozilla。下表列出了常用浏览器对 DOM 的支持。

 

浏览器 DOM 兼容性
Netscape Navigator 1.0 - 4.x -
Netscape 6.0+ (Mozilla 0.6.0+) Level 1、Level 2、Level 3(部分)
IE 2.0 - 4.x -
IE 5.0 Level 1(最小)
IE 5.5+ Level 1(几乎全部)
Opera 1.0 - 6.0 -
Opera 7.0+ Level 1(几乎全部)、Level (部分)
Safari 1.0+/Konqueror ~ 2.0+ Level 1

 

BOM

IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM(浏览器对象模型 ),可以对浏览器窗口进行访问和操作 。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于,它只是 JavaScript 的一个部分,没有任何相关的标准

BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括:

  • 弹出新的浏览器窗口
  • 移动、关闭浏览器窗口以及调整窗口大小
  • 提供 Web 浏览器详细信息的定位对象
  • 提供用户屏幕分辨率详细信息的屏幕对象
  • 对 cookie 的支持
  • IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象

由于没有相关的 BOM 标准,每种浏览器都有自己的 BOM 实现 。有一些事实上的标准,如具有一个窗口对象和一个导航对象,不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

 

可以把BOM定义为Browser Object Model包括window document frames history location navigator screen等对象,而BOM的hierarchy的顶层是window 视窗,DOM的hierarchy的顶层是document 文档,这样看BOM就包含DOM了 (DOM本身就是对客户端文档的控制方法,只不过它被标准化了)!

 

最后贴两幅图

  • javascript的组成


  •  javascript所有特性的图


  • 大小: 1.7 KB
  • 大小: 828 Bytes
  • 大小: 3.6 KB
  • 大小: 6.9 KB
分享到:
评论

相关推荐

    基于JavaScript实现的程序员表白爱心代码(2套)

    基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的...

    JavaScript实现的简单的计算器(web)

    JavaScript实现的简单的计算器,这是参考我同学的代码实现,希望能够帮助到你

    Javascript+Flash实现5副图片切换

    Javascript+Flash实现5副图片切换。 网上常用的图片切换代码。 主要通过Flash实现,代码很简单10行左右,自带5副图片和一个Flash文件。 下载后可直接看到效果。

    【JavaScript源代码】javascript实现图片预加载和懒加载.docx

    javascript实现图片预加载和懒加载  本文实例为大家分享了javascript实现图片预加载和懒加载的具体代码,供大家参考,具体内容如下 预加载 预加载是预先加载好后面需要用到的资源, 后面使用的时候直接去缓存里取...

    JAVASCRIPT从入门到精通

    《JavaScript从入门到精通(视频实战版)》深入介绍了JavaScript的本质,不仅讲解了其在页面特效中的应用,还挖掘了JavaScript作为一种基于对象语言所特有的类与继承的实现。《JavaScript从入门到精通(视频实战版)》...

    javascript高级教程

    全书从JavaScript语言实现的各个组成部分——语言核心、DOM、BOM、事件模型讲起,深入浅出地探讨了面向对象编程、Ajax与Comet服务器端通信,HTML5表单、媒体、Canvas(包括WebGL)及Web Workers、地理定位、跨文档传递...

    程序天下:JavaScript实例自学手册

    14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...

    JavaScript 实现 2048 小游戏

    本项目为使用JavaScript实现2048小游戏。游戏玩法:在 4*4 的16宫格中,您可以选择上、下、左、右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合并,组成更大的数字,每次移动或合并后会自动增加一...

    JavaScript详解(第2版)

     2.6 JavaScript与旧浏览器或受限的浏览器   2.7 应知应会   练习   第3章 数据类型、字面量和变量   3.1 数据类型   3.1.1 基本数据类型   3.1.2 复合数据类型   3.2 变量   3.2.1 有效...

    前端领域:html+css+javascript实现贪吃蛇游戏

    JavaScript是一种高级编程语言,用于在网页上实现交互和动态性。它是一种面向对象的语言,具有类似于C语言的语法和功能。 JavaScript最初是为了在网页上添加简单的交互功能而创建的,但随着时间的推移,它已经发展...

    WebGIS从基础到开发实践代码(基于ArcGIS API for JavaScript)

    2.2.2ArcGIS API for JavaScript与Dojo的关系 2.3开发与调试工具 2.3.1集成开发环境 2.3.2调试工具 2.3.3Firebug 2.3.4其他工具软件 2.4Dojo基础知识 2.4.1JavaScript对象 2.4.2函数也是对象 2.4.3模拟类与继承 ...

    超酷炫javascript爱心效果

    在现代Web开发中,JavaScript与Canvas的结合不仅打开了丰富多彩的前端视觉效果的大门,也使得复杂动态效果的实现成为可能。当我们谈到使用JS和Canvas实现的超酷炫爱心效果时,我们实际上是在探索一种将编程与艺术...

    《程序天下:JavaScript实例自学手册》光盘源码

    第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 ...22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 ...

    源文件程序天下JAVASCRIPT实例自学手册

    1.8 JavaScript的实现基础 1.8.1 ECMAScript 1.8.2 DOM 1.8.3 BOM 1.9 客户端与服务器端脚本 1.10 JavaScript与JScript、 VBScript 1.11 JavaScript与Java、Java applet 1.12 JavaScript的未来如何 1.13 本章小结 第...

    【JavaScript源代码】JavaScript正则验证密码强弱度的实现方法.docx

    JavaScript正则验证密码强弱度的实现方法  展示 设计  密码强弱度分析  密码由数字,字母,特殊符号组成  密码: 只有数字- 或者是只有字母,或者是只有特殊符号——1级:弱 两两组合: 数字和字母, 数字和特殊...

    【JavaScript源代码】JavaScript es6中var、let以及const三者区别案例详解.docx

    JavaScript es6中var、let...可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展。 2011 年,ECMAScript 5.1 版发布。之前我们大部分人用的也就是ES5 2015 年 6 月,ECMAScript

    JavaScript实例精通

    示例描述:JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 ...

    javascript实现输出指定行数正方形图案的方法

    javascript实现输出指定行数的正方形图案:点击生成图案,会有2个提示框,1,输入图案的组成字符,只能是1个字符哦2,输入正方形行数,路过大于10,会设置为10行数 <!DOCTYPE ...

    javascript脚本化文档

    一个文档对象模型或者说DOM就是一个API,它定义了如何访问组成一个文档的对象。W3C定义了一个标准的DOM,它理所当然地在所有现代Web浏览器中得到了很好的支持。不幸的是,情况并非总是如此。客户端JavaScript编程的...

    实现JavaScript的组成—-BOM和DOM详解

    我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型)。 今天主要学习BOM和DOM。 BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页...

Global site tag (gtag.js) - Google Analytics