1、浏览器的内核和JS引擎
1.1、浏览器内核
网页浏览器的内核就是渲染引擎(renderingEngine)，也被称为排版引擎(Layout Engine)或模板引擎。它负责取得网页的内容和结构（HTML、XML、图像等）、样式信息（CSS等）以及计算网页的显示方式，然后会输出至显示器。也就是说，渲染引擎决定了浏览器如何显示网页的内容以及格式，因为不同的浏览器内核对网页编写语法的解析有所不同，所以同一网页在不同的内核浏览器里的展示效果就可能不同。
因为每一种渲染引擎都有其代表的浏览器，所以常常会把渲染引擎的名称和浏览器的名称混用，比如常说的IE内核、Chrome内核,其实这样子是不太合理的，因为一个完整的浏览器不仅仅只有渲染引擎，还有自己的界面框架和其它的功能支撑，比如JS引擎，而且一个浏览器也可以支持多个内核。下面罗列一下几款主流的排版引擎和浏览器。
| 内核 | 是否开源 | 插件支持 | 应用浏览器 | 支持操作系统 | 备注 |
| Trident | 否 | ActiveX | IE | Windows | 国产浏览器使用的多是W ebkit 内核 |
| Gecko | 是 | NPAPI/PPAPI | Firefox | Win\Mac\Lin | |
| Webkit | 是 | NPAPI/PPAPI | Chrome、Safari | Win\Mac\Lin |
1.2、JS引擎
说完了渲染引擎，接下来说说 JS 引擎。顾名思义，JS引擎就是用来解释JavaScript代码或者JScript代码的虚拟机，内置在浏览器中。譬如说，一个算圆周率的网页，渲染引擎把页面的结构和样式给显示出来了，但最终的数据需要用Javascript 程序或者或者JScript程序来计算，而Javascript 程序或者或者JScript程序是需要JS引擎解释执行的，所以JS引擎的执行效率对整个网页的速度有着很大影响。浏览器支持不同JS引擎：
| JS引擎 | 应用浏览器 | 备注 |
| Chakra引擎 | 9之后的IE、edge浏览器 | 译名为查克拉(专门解释JScript) |
| Monkey系列引擎 | Firefox | 采用C/C++编写 |
| V8引擎 | Chrome | node.js其实就是封装了V8引擎 |
| SquirrelFish系列引擎 | Safari | 执行效率超越所有引擎 |
2、JavaScript介绍
2.1、是什么
JavaScript由网景公司推出，是运行在客户端浏览器中的解释性脚本语言，依赖浏览器中的JS引擎解释执行，代码不需要编译；具有跨平台特性，在绝大多数浏览器和操作系统下都能运行。
备注：JScript是由微软开发的语言，抄袭JavaScipt，使用方法和功能都一样。1997年，Ecma国际制定ECMAScript标准，网景的JavaScript和微软的JScript都遵循此标准各自发布新版本，但基本是兼容互用的。
2.2、做什么
在前端技术中，Html负责结构，CSS负责样式，Javascript通过在HTML页面中嵌入动态文本读写HTML元素添加交互行为，具体用途有以下几点：
1、对客户端浏览器的事件(加载、点击、移动鼠标等)做出响应，修改HTML标签属性、增加、删除HTML标签等。
2、在数据被提交到服务器之前验证数据
3、检测访客的浏览器信息
4、控制cookies，包括创建和修改等
5、基于node.js技术进行服务器端编程。
2.3、组成部分
该语言的提下架构有三部分组成:
2.4、在Html文档中如何使用
3、组成部分一：ECMAScript
3.1、变量及数据类型
JavaScript是一种弱类型的程序设计语言，使用关键字var（也可以不用）声明变量也可以，根据赋值自动识别该变量的数据类型。安全的编程是：使用var声明同时初始化。
3.1.1、基本数据类型
b、常量
就是字面变量，只要赋值在其生命周期内就不允许改变值，值可以是除undefined类型的基本数据类型和对象类型，语法格式为const 变量名:数据类型 = 值;。JavaScript中有个内置的数字常量NaN，表示“非数值”，程序由于某种原因发生计算错误后将会产生一个没有意义的数值，此时JS引擎就会返回NaN。
b、Number类型
主要是整数（varnum1 = 36;）和浮点数（var num2 = 36.00;）。
c、Boolean类型
布尔类型表示一个逻辑数值，只有两个取值true和false，当把数值类型转为Boolean类型时，只有0及0.0是false，其他数值都是true。var bool = true;
d、undefined类型
指仅声明未赋值的变量。如varperson;当在浏览器中使用documen t.write(person + '<br\>');打印出来时会输出undefined。
e、null类型
指该变量被赋予了空值，null不同于空的字符串、0或undefined。如var car =null; 在浏览器中使用documen t.write(car + '<br\>');打印出来时会输出null。
3.1.2、对象Object类型
就是3.5中使用var声明但是使用自定义对象或者内置对象赋值的变量，这种变量内部既包含属性也包含方法。
3.1.3、JS变量的作用范围
是指可以访问该变量的代码区域。
a、全局变量
这种变量通常定义在函数体外，所以可以在整个HTML文档中使用。
b、局部变量
这种变量通常定义在函数体内，所以只能在在函数体内使用
3.2、运算符和表达式
3.2.1、算术运算符
普通运算符： +加 -减 *剩 /除 %取余 ++自加 --自减
位运算符：&与运算 |或运算 ^异或运算 ~取补运算 <<左移位 >>右移位
3.2.2、赋值运算符
基本赋值运算符：=
与算术运算符组合型：+= -= *= /= &= |= ^=
3.2.3、关系运算符
== 、 != 、> 、>=、<、 <=
3.2.4、逻辑运算符
&&逻辑与 、 ||逻辑或 、 ！逻辑非
3.2.5、条件运算符
条件表达式？表达式1：表达式2
3.2.5、表达式
表达式，是由字面数据、变量、运算符和分组符号（括号）等以能求得数值为目所进行的组合。可以分为两种：算术表达式是是通过算术运算符来进行运算的数学公式，逻辑表达式是通过四种运算符判断真假的表达式，比如赋值运算的结果永远是True。
一个表达式中，四种运算符和分组符号的优先级别大致为：分组符号→乘/除/余→加/减→关系运算符→逻辑运算符→赋值运算符；同级的运算是按从左到右次序进行；多层括号由里向外。
3.3、程序控制语句
3.3.1、条件判断语句
if语句 / if-else语句 / if...elseif语句
3.3.2、循环控制语句
while(){}语句 / do{}while()语句 / for(语句1;语句2;语句3){语句4}语句
3.3.3、跳转语句
跳转语句其实仅仅是属于控制循环的，但实际应用中通常是放在循环语句内部的条件判断语句中。
break: 退出该语句所处的最内层的循环
continue:终止本次循环，直接执行语句3开始下一次循环
3.4、函数
JavaScript虽然也支持对象编程，但实际工作中仍然采用函数式编程，一段js程序中大约95%的代码都包含在函数中。JavaScript是事件模型的程序语言，网页中的页面加载、用户单机、移动光标等都会产生事件，当Html就通过事件属性产生这些事件时，就会调用js中的对应函数响应这个事件。
3.5.1、自定义函数
第一步、定义函数
第二步、调用函数
3.4.2、JS引擎内置函数
JS引擎中自带一部分函数，这些函数不用引入也不用自定义就可以直接调用，使用这些函数可提高编程效率，以下是常用的5个......
a、eval函数
接受一个字符串类型的参数，将这个字符串作为代码在上下文环境中执行，并return执行结果。
b、isFinite函数
如果参数是数值类型且是有限型就返回true；如果是数值类型但非有限型或者是非数值类型就返回false。如isFinite(-3)就返回ture；isFinite(12/01)就返回false。
c、isNaN函数
如果参数为为保留值NaN，就返回true；如果不是保留值就返回false。如isNaN(123)就返回false，isNaN(2009/1/1)就返回true。
d、parseInt和parseFloat函数
parseInt函数可以把整数型字符串转换为整数，parseFloat函数可以把浮点型字符串转换为浮点数。
e、Number和String函数
Number函数可以把参数对象转换为数值，String函数可以把参数对象转换字符串。
f、JS引擎内置类和DOM对象/BOM对象提供的函数
3.5、JavaScript面向对象编程
3.5.1、自定义类和对象
JavaScript虽然也支持对象编程，但实际工作中仍然采用函数式编程，一段js程序中大约95%的代码都包含在函数中。所以这里就不介绍JavaScript中类和对象的使用方法了，仅仅介绍JS引擎中内置的几个对象。
3.5.2、JS引擎内置类
a、字符串类String
| 定义对象 | var myString = "This is a <b>sample</b>" ; | 两种声明定义形式，效果及使用方式都是一样的 | |
| var myString = new String("This is a sample") ; | |||
| 常用属性 | length | myString.length就是该字符串的长度 | |
| 常用方法 | charAt() | 根据指定位置返回对应的字符 | |
| indexOf() | 返回指定的字符(串)在原字符串中第一次出现的位置 | ||
| substr() | 根据开始位置和长度截取字符串并返回 | ||
| substring() | 根据开始位置和结束位置截取字符串并返回 | ||
| split() | 根据指定字符分割原字符串并返回一个数组对象 | ||
| replace() | 根据指定字符串替换指定字符串并返回修改后的字符串 | ||
| toLowerCase() | 无参数，返回原始字符串的全小写后的字符串 | ||
| toUpperCase() | 无参数，返回原始字符串的全大写后的字符串 | ||
b、数学类Math
使用逻辑和字符串类是一样的，实际使用的时候可以查阅手册文档。
c、日期类Date
使用逻辑和字符串类是一样的，实际使用的时候可以查阅手册文档。
d、数组类Array
使用逻辑和字符串类是一样的，实际使用的时候可以查阅手册文档。
3.5.3、内置对象：DOM和BOM
4、组成部分二：文档对象模型（DOM）
提供处理html/xml文档的API，实现对元素节点属性、文本和元素节点的动态的增删改查。W3C DOM能处理html和xml文档；有些接口只适用于html文档，这些接口属于HTML DOM；有些接口只适用于xml文档，这些接口属于XML DOM；所以HTML DOM和XML DOM的方式基本不会使用到，使用W3C DOM就足够了。
4.1、DOM主体架构继承图
a、node接口
此对象并不代表某个节点，而是代表文档所有节点的通性，主要有3个子对象
|
| 名称，类型或返回类型 | 说明 |
| 属性 | parentNode：Node | 该节点的父节点 |
| childNodes：Node[] | 该节点的所有子节点的集合，length属性代表子节点个数 | |
| firstChild：Node | 该节点的第一个子节点 | |
| lastChild：Node | 该节点的最后一个子节点 | |
| previousSibling Node | 该节点的上一个兄弟节点 | |
| nextSibling：Node | 该节点的下一个兄弟节点 | |
| nodeName：String | 该节点对应对的HTML标签名 | |
| nodeType：String | 该节点的类型（共12种类型） | |
| nodeValue：String | 该节点的元素值，多是文本内容 | |
| 方法 | appendChild( ) | 在该节点的最后一个子节点之后追加新节点 |
| insertBefore( ) | 在该节点的指定子节点之前插入新节点 | |
| removeChild( ) | 该父节点指定删除某个子节点 |
b、Document接口
此接口并不代表某个节点，而是代表整个文档，有1个子对象HTMLDocument
| Document | 名称，类型或返回类型 | 说明 |
| 属性 | documentElement：Element | 就是HTMLHtmlElement元素，对应<html>标签 |
| 方法 | getElementById( ) ：Element | 根据html标签的id名获取该节点 |
| createElement( ) ：Element | 参数是html标签创建新节点，如img代表<img> | |
| createTextNode( ) ：Text | 创建文本节点，参数是文本内容 |
| 子对象 | 名称，类型或返回类型 | 说明 |
| 属性 | body：Element | 就是HTMLBodyElement元素，对应<body>标签 |
| 方法 | getElementsByName():Element[] | 根据name属性的值获取一个元素集合，length属性代表元素个数 |
| write() | 输出文档到当前打开的浏览器窗口 |
c、Element接口
此接口才是代表文档中某个节点，，有1个子对象、一个孙子对象和一批重孙子对象，继承关系是Node—>Element—>HTMLElement，再往下就是一批重孙子对象了，具体对应html的一批标签。
| Element | 名称，类型或返回类型 | 说明 |
| 属性 | innerText：Text | 通常作为纯文本设置标签文本 |
| InnerHTML：Text | 通常作为HTML代码设置标签文本 | |
| 方法 | getAttribute( )：string | 根据属性获取该属性的值 |
| removeAttribute( )：string | 删除该属性 | |
| setAttribute( )：string | 为属性设置属性值 |
d、Text接口
此接口代表文档中的文本节点，比如<p>我是段落</p>，“我是段落”并不是直接存在p节点里，而是作为p节点内部的Text子节点的nodeValue存在。
该接口的继承关系是Node—>CharacterData —>Text。
4.2、DOM接口的实际应用
a、hmtl标签属性的增删改查
b、hmtl文本的修改
c、获取对象的第二种方式
d、创建HTML元素节点
e、创建新HTML文本节点
f、删除节点
5、组成部分三：浏览器对象模型（BOM）
BOM即浏览器对象模型，提供了处理浏览器对象的API，顶级对象是window对象，某些属性和方法的返回值也是window，并且html里或者js里使用window对象的属性和方法时不需要window.XXX这种新式，仅用属性名和方法名就可以了，常用属性和方法如下：
| window | 名称 | 说明 |
| 属性 | status | 浏览器状态栏显示的文本 |
| document | 就是DOM中的document对象，代表当前整个网页文档 | |
| location | 就是在窗口地址栏中显示的URL | |
| locationbar | 浏览器的地址栏 | |
| toolbar | 浏览器的工具栏 | |
| menubar | 浏览器的菜单栏 | |
| statusbar | 浏览器的状态栏 | |
| 方法 | open() | 用于弹出一个窗口，里面是版权信息、警告等之类的话 |
| close() | 弹出关闭当前窗口的提示框，有“是”和“否”俩按钮 | |
| alert() | 提示对话框，仅“确定”按钮 | |
| confirm() | 选择对话框，有“确定”、“取消”俩按钮 | |
| prompt() | 输入对话框，有“输入框”、“确定”和“取消”俩按钮 | |
| setInterval() | 这四个方法组合用于设置定时器，比如规定必须阅读完用户协议后，才把下一步按钮激活 | |
| clearInterval() | ||
| setTimeout() | ||
| clearTimeout() |
BOM中的windows对象及其子对象虽然有很多属性和方法，但常用只有创建对话框。对话框的作用是用户与浏览器进行交流，有提示、选择和获取信息的功能，JavaScript提供了三个标准的对话框。
5.1、提示对话框alert()
5.2、选择对话框confirm()
5.3、输入对话框prompt()
6、浏览器JS引擎兼容案例及解决
6.1、为何会有兼容问题
浏览器的兼容可以分为两个方面，一是内核兼容：内核负责解析html和css语言，渲染页面，如果不同浏览器使用的内核不一样，在打开同一个HTML网页时就可能出现页面显示不一致的问题，主要体现在CSS样式方面；二是JS引擎兼容：JS引擎负责解释JavaScript程序，提供交互功能，如果不同浏览器使用的JS引擎不一样，在通过HTML页面解释同一个Java Script程序时就可能出现交互效果不一致的问题。
6.2、内核兼容的案例及及解决方案
案例一
以《3.5.1、调用函数》为例，在表单提交中，如果<input>使用submit按钮触发提交操作后，在IE和Firefox浏览器就会维持终端打印界面，但Chrome就一闪即过。解决方按：<input>使用button按钮触发提交操作，IE、Firefox和Chrome浏览器都可以维持终端打印界面。
案例二
W3CDOM里node节点下的insertBefore()函数，只有一个参数时，在IE浏览器里和appendChild()函数的功能是一样的，用以把参数元素对象插入在父节点的最后子节点后；但在Chrome和Firefox浏览器里，当调用此函数时console里就会报错缺少一个参数。解决方案：不要投机取巧，按W3C的标准规范书写，基于两个对象，第一个是被插入对象；第二个是参考对象。
案例三
形如的结构
，但是在Chrome和Firefox浏览器里元素节点HTMLDivElement就有5个子节点，节点的nodeName是
...................
604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
