http://www.flyne.org/article/407
JavaScript（核心、BOM、DOM）
JavaScript是基于对象和事件驱动的客户端脚本语言。有如下特点：
- 交互性
- 安全性（不可以直接访问本地硬盘）
- 跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）
1、JavaScript和Java不同！ ①所属：NetScape和Sun ②基于对象和面向对象 ③JS可以直接解析执行，Java需先编译在运行 ④JavaScript是一种弱类型的语言，Java是强类型的语言。
2、JavaScript的实现包括以下3个部分：
1）核心（ECMAScript）：描述了JS的语法和基本对象。
2）文档对象模型 ☆（DOM）：处理网页内容的方法和接口
3）浏览器对象模型（BOM）：与浏览器交互的方法和接口
ECMAScript扩展知识：
① ECMAScript是一个标准，JS只是它的一个实现，其他实现包括ActionScript。
② “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力……”，即ECMAScript不与具体的宿主环境相绑定，如JS的宿主环境是浏览器，AS的宿主环境是Flash。
③ECMAScript描述了以下内容：语法、类型、语句、关键字、保留字、运算符、对象。
3、在HTML中使用JavaScript
1）在<script></script>标签内部直接编写JS代码
2）通过script标签的src属性直接引入外部js文件
注意：若以上两种方式同时存在，则标签内部定义的JS代码不会被执行。
JS核心
4、JS的数据类型（☆）
在JS中使用var关键词声明变量，变量的类型会根据其所赋值来决定。JS中数据类型分为原始数据类型（5种）和引用数据类型（Object类型）。
1）5种原始数据类型：Undefined、Null、Boolean、Number和String。需要注意的是JS中字符串属于原始数据类型。
2）typeof运算符：查看变量类型，对变量或值调用typeof运算符将返回下列值之一：
undefined – 如果变量是 Undefined 类型的
boolean – 如果变量是 Boolean 类型的
number – 如果变量是 Number 类型的
string – 如果变量是 String 类型的
object – 如果变量是一种引用类型或 Null 类型的
3）通过instanceof 运算符解决引用类型判断问题
4）JS中对类型的定义：一组值的集合。如Boolean类型的值有两个：true、false。Undefined和Null 类型都只有一个值，分别是undefined和null。
5）null 被认为是对象的占位符，typeof运算符对于null值返回“object”。
6）原始数据类型和引用数据类型变量在内存中的存放如下：
5、局部变量和全局变量
在函数中声明的变量只能在函数中使用，当你退出函数时，变量就会被释放，这种变量被称为局部变量。因为每个局部变量只在各自的函数中有效，所以你可以在不同的函数中使用名称相同的变量。
如果在函数之外声明变量，那么页面中所有的函数都可以使用它。在全局变量被声明后，它们就开始生效了。在网页被关闭后，变量才会失效。
注意：JS语言中，在代码块中声明的变量属于全局变量。
6、数组（两种创建方式）
1）var arr = [123,”abc”,true,null]
2）var arr = new Array(4); //创建数组长度为4的数组
var arr = new Array(123,”abc”,true,null);//等同于1）
注意：
①js中，数组元素类型可以不一致。
②js中，数组长度可以动态改变。
③接着上述代码，typeof arr 和 arr instanceof Array 分别输出object和true。
7、函数
特点：关键字function；无需指定返回值类型；参数列表声明不需var关键字；无函数重载；函数内部可以直接调用arguments数组（隐式定义），该数组存储了实参列表；函数名代表一种引用类型，可用（函数名 instanceof Function）测试；打印函数引用会输出整个函数定义。
8、动态函数和匿名函数
1）动态函数是通过js的内置对象Function定义。形式为：new Function(arg1 , arg2)，由于arg1和arg2为变量，所以可以动态指定。如：
var run = new Function(“x,y”,”return x+y;”);
2）匿名函数：没有函数名，形如：var run = function(x,y){return x+y;};
注：打印动态函数的引用可以发现动态函数也是匿名函数。
9、JS对象（需要new一个对象）
1）String对象，方法分为两类：①与Html有关的 ②同java中的String相似的。具体查文档。
2）Array对象，一些常用方法：
concat() 同String的concat()方法。
join() 同String的split()方法相反。
pop()、push() 同栈中的弹栈、压栈。
sort() 对数组元素排序。
3）Date对象
getTime()、Date.parse(dateString)方法返回时间戳。
钟表例子：在body中加入onload=”startTime();”则可以在#div_1块中动态显示当前时间
|
1 2 3 4 5 6 7 8 |
|
4）Math对象，主要是一些静态方法，常用的有random()、ceil(x)/floor(x)/round(x)方法。
5）RegExp对象：该对象代表正则表达式，用于字符串匹配
① 两种RegExp对象创建方式：
方式一，new 一个RegExp对象：var regExp = new RegExp(“[a-zA-Z0-9]{3,8}”);
方式二，通过直接量赋值：var regExp = /^[a-zA-Z0-9]{3,8}$/;
② 正则表达式的具体写法使用时查询文档。
③ 常用方法：test(string)，返回true或false。
10、全局函数
encodeURI / decodeURI：编码解码URI
进行url跳转时可以整体使用encodeURI
encodeURIComponent / decodeURIComponent：编码解码URI组件
传递参数时需要使用encodeURIComponent
escape / unescape：对字符串进行unicode编码
isNaN：检查某个值是否为NaN（Not a Number，非数字）
parseInt、parseFloat：将字符串解析为整数和浮点数
eval：计算JS字符串，并把它作为脚本代码来执行。
BOM（浏览器对象模型）
11、BOM（浏览器对象模型）
1）window对象：浏览器中打开的窗口
① 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
② window.frames 返回窗口中所有命名的框架
③parent是父窗口（如果窗口是*窗口，那么parent==self==top）
top是最*父窗口（有的窗口中套了好几层frameset或者iframe）
self是当前窗口（等价window）
opener是用open方法打开当前窗口的那个窗口
④与消息框有关的方法：alert(String)、confirm(String)、prompt(String)
⑤两种定时器：setTimeout(code,latency) 和 setInterval(code,period)
注：setTimeout只执行一次code，如果要多次调用，可以让code自身再次调用setTimeout()；setInteval()会不停地调用code，直到clearInterval()被调用。
2）location对象：包含当前URL信息。重点掌握location对象的href属性，用于设置或返回完整的URL。
3）history对象：主要是back()/forward()和go()方法，几乎用不到。
DOM（文档对象模型）
DOM是W3C组织制定的一套用于访问和操作XML和HTML文档的标准。W3C DOM被分为3个不同的部分 / 级别（parts / levels）：
核心DOM：用于任何结构化文档的标准模型（不作研究）
XML DOM：用于XML……
HTML DOM：用于HTML……
12、XML DOM和HTML DOM
HTML和XML：
HTML：超文本标记语言，标记是有限的，每个标记有自己固定的含义，主要用于信息的显示。
XML：可扩展标记语言，可以自定义标记，扩展性很强，主要用于信息的存储和传送
1） XML DOM和HTML DOM分别定义了访问和操作XML和HTML文档的标准方法（接口）。
2）HTML文档符合XML语法标准，所以可以使用XML DOM API解析HTML（比较麻烦），后面的例子会分别使用HTML DOM和XML DOM进行解析。
3）如果把HTML当做XML对待，不会忽略回车、空格和制表符。
13、DOM节点树模型（以HTML DOM树为例）
1）DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构，并用document对象表示该文档。
2）DOM规定文档中的每个成分都是一个节点（Node）：
文档节点（Document）：代表整个文档
元素节点（Element）：文档中的一个标记
文本节点（Text）：标记中的文本
属性节点（Attr）：代表一个属性，元素才有属性
3）Node为所有节点的父接口，其定义了一组公共的属性和方法，如下：
14、DOM节点三大属性（XML DOM）
1）nodeName：元素节点、属性节点、文本节点分别返回元素的名称、属性的名称和#text的字符串。
2）nodeType：元素节点、属性节点、文本节点的nodeType值分别为1、2、3.、
3）nodeValue：元素节点、属性节点、文本节点的返回值分别为null、属性值和文本节点内容。
15、Document对象常用属性和方法
属性：
documentElement：返回文档根元素的引用。如HTML文档中返回<html>标签元素
方法：
getElementById()：☆根据id获取元素
getElementsByName()：根据name属性获取元素，没有name时，根据id获取。
getElementsByTagName()：根据标签名获取
createElement()、createTextNode()：创建元素节点、文本节点。
16、练习
Eg1、获取代码<h1 id=”test”>明天休息</h1>中的文本内容。
|
1 2 3 4 5 6 7 8 9 |
|
Eg2、将下图中的文本内容打印出来
|
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 |
|
17、DOM常见操作（XML DOM）☆
1）获取节点
① 获取元素节点：通过document对象的三个方法获取
② 获取属性节点：属性节点附属于元素节点，可通过元素节点的getAttributeNode(attrName)方法获取属性节点，也可通过getAttribute(attrName)直接获取属性值。（与之相对的是Element接口的setAttribute(attrName , attrValue)方法，如果属性不存在，则直接添加到元素节点上）
③ 获取文本节点：文本节点为元素节点的子节点，可通过元素节点（Element接口）提供的childnodes()[index] 方法获得。
2）改变节点
① 改变属性节点的值：可以通过属性节点的nodeValue直接修改属性值，也可通过元素节点的setAttribute()方法改变（17.1.2节）。
② 改变文本节点的值：通过文本节点的nodeValue直接修改。
3）删除节点
① 删除元素节点：要想删除元素节点A，需获得A的父节点B，父节点可通过17.1.1中的方法获得，也可以直接通过A的parentNode属性获得（推荐）。调用B的removeChild(A) 即可删除A节点。
② 删除属性节点：可通过属性节点所属的元素节点的removeAttribute(attrName)或removeAttributeNode(node)删除。
③ 清空文本节点：最简单也是最常用的方法就是直接设置文本节点的nameNode属性为空串：textNode.nodeValue = ””。
4）创建和添加节点
① 创建节点：通过document对象的createElement(eleName)、createTextNode(nodeValue)方法可分别创建元素节点和文本节点。属性节点也有自己的create方法，但是用的少，直接用元素节点的setAttribute()方法即可添加属性。
② 添加节点：两个重要的方法：appendChild()和insertBefore()，具体见Node接口中的方法（13节）。
扩展：上面的两个方法都是在已知父节点时用到的，也可以直接在兄弟节点后添加新节点：x.insertBefore(newNode) 和 x.appendChild(newNode) 都可以向 x 后追加一个新的子节点。
5）替换节点：主要掌握replaceChild(newNode , oldNode) 替换元素节点。（属性节点和文本节点有更简单的方法）
18、HTML DOM（☆）
1）在HTML DOM中，获取和改变元素内容最简单方法是使用元素的innerHTML属性（innerText属性返回去掉标签的innerHTML）
2）改变HTML样式（style属性）：element.style.color = “red”;
3）DOM事件：当 HTML 元素”有事情发生“时，浏览器就会生成事件，HTML DOM允许JS对HTML事件作出反应。使用方法有两种：
① 将JavaScript 代码添加到 HTML 事件属性中，如onclick = JavaScript
② HTML DOM允许在JS中为HTML元素分配事件，如下面的代码演示了为button元素分配onclick事件：document.getElementById(“myBtn”).onclick = function(){}
常见的JS事件有：
加载事件：onload
鼠标移动事件：onmouseover、onmouseout
鼠标点击事件：onclick
聚焦与离焦事件：onfocus、onblur
键盘事件：onkeypress（一般要配合event.keyCode使用）
提交与重置事件：onsubmit、onreset
域改变事件：onchange
19、DOM操作练习
DOM操作练习请看本博客另外一篇文章：http://www.flyne.org/article/420
20、BOM和HTML DOM关系图（了解）