javascript学习（ECMAScript，DOM，BOM）

我们一般学习js的时候大多应该是从dom操作开始的，它直接的效果就是改变网页，得到显而易见的效果，其实你只是学习了js的一部分。。。而我们也会错误的经常把这一部分直接叫做js（其实它只是js中的dom部分）。

第一部分：学习js
其实我们学习js是学习的三大模块分别是ECMAScript，DOM，BOM。
@1）ECMAScript:ECMAScript是一种由[Ecma国际]（前身为[欧洲计算机制造商协会]制定的标准，描述了JS的语法和基本对象，其实ECMAScript是一个标准，JS只是它的一个实现(通俗的来讲js是一门语言，那么语言就有自己的语法规则，ECMAScript就是语法规则)，ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力……”，即ECMAScript不与具体的宿主环境相绑定，如JS的宿主环境是浏览器，AS的宿主环境是Flash，ECMAScript描述了以下内容：语法、类型、语句、关键字、保留字、运算符、对象
@2）DOM：Document(文档对象模型)DOM 是为了操作文档出现的 API，document 是其的一个对象，描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档，DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础,就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如

这些标签都看做一个对象，每个对象都叫做一个节点（node）
@3）BOM:浏览器对象模型：BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。所以 BOM 就是为了解决这些事情出现的接口

第二部分：加深dom和bom在网页中的理解

image.png

1.dom就红色区域部分，bom为蓝色区域部分（地址栏，标签页，滚动条还有右键菜单（这里没有截出）等）其实我们很快就明白了dom操作就是改变网页元素的部分（html标签包含的部分）而bom就是控制浏览器的行为，比如说我们的页面长度超出浏览器的窗口，如果我们不做样式设置的话，那么浏览器会默认出现滚动条

第三部分：api的实现
既然ECMAScript，BOM，DOM都只是文档，那么他们靠什么来实现的呢？这里是最让人迷糊的地方，如果你已经读到这里了，那么其实你对js也有了一个轮廓的了解了，好，我们紧接着再来说他们的实现对象

@1）ECMAScript:Global对象是ECMAScript的终极兜底对象，换句话说，不属于任何其它对象的属性和方法都会是Global的属性和方法，比如全局变量和函数，这里又有迷惑了，全局变量和函数不是属于window的么，其实是这样的，ECMAScript虽然定义了这个global对象，但是并没有告诉我们如何直接访问Global对象，但web浏览器是将这个对象作为window对象的一部分来实现的，这里我们就会疑惑，既然有了global，定义window有什么意义呢，其实这也就回到了最初解释ECMAScript的时候（ECMAScript是一种由[Ecma国际]（前身为[欧洲计算机制造商协会]制定的标准）和我们的浏览器厂商是没有关系滴，只是js这门语言运行需要依赖于一个宿主环境（浏览器），这里好比你学习c++，他要依靠一个编译器来解释执行一样，浏览器厂商要对global实现那么就统一用window啦，其实这里我们也就知道了，为什么我们有的事件，样式在chrome浏览器可以运行，在其它浏览器会出现问题呢，就是这个原因，规范是别人制定的，不同的浏览器厂商自己内部的实现细节会有差异，所以也就造成这种现象啦。

@2）DOM:javascript通过Document类型表示文档，在浏览器中，document对象是HTMLDocument（继承自Document的实例）表示整个HTML页面，document是window对象下面的一个属性

@3）BOM:BOM的核心对象是window，对就是刚才上面提到的window，因为都是由浏览器厂商实现的，它表示一个浏览器的实例，是这样的，比如我是浏览器厂商，我要实现对浏览器的操作，那我就给浏览器命名为window然后添加对浏览器的前进，后退的操作方法，既然我还要实现global，那我也用这个window对象实现就好啦，只不过在window下面分成不同的对象去实现不通过类型的操作，比如地址我就交给localtion对象去实现，对文档dom的操作我就交给document对象来实现，但是localtion和document 都是window对象的属性，其实这就好比公司一样，有一个大的总经理，但是总经理会给自己的公司分配不同的部门分别去做不同的事情这样便于管理

image.png

1.js-dom基础https://www.jianshu.com/p/cf3231c5e17d
2.js-bom基础https://www.jianshu.com/p/1e856f23cf88
3.js-ajax基础https://www.jianshu.com/p/8e982f5d7a4d
4.关于浏览器(呈现引擎/js引擎)https://www.jianshu.com/p/e9e0ed473dc8
5.js函数(call/apply/bind与this)https://www.jianshu.com/p/2d6907cc0760
6.js对象(原型对象与原型链)https://www.jianshu.com/p/df7dc2262bcd
7.js事件流https://www.jianshu.com/p/7f5f4c74dde8
8.javascript闭包https://www.jianshu.com/p/53724b8c5da3