JavaScript（一）
JavaScript 简介
JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本 语言，是一种动态、弱类型、基于原型的语言，内置支持类。它的解释器被称为 JavaScript 引擎，为浏览器的一部份。同时也是一种广泛用于客户端 Web 开发的脚本语言。最初 由网景公司（Netscape）的布兰登·艾克（Brendan Eich）设计，1997 年，在 ECMA（欧 洲计算机制造商协会）的协调下，由 Netscape、Sun、微软、Borland 组成的工作组确定 统一标准：ECMA-262。JavaScript 是 Sun 公司的注册商标，和 Java 没有直接关系。
JavaScript 基本特点
>JavaScript 是一种轻量级的编程语言。
>JavaScript 是可插入 HTML 页面的编程代码。
>JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
>JavaScript 很容易学习。
开启JavaScript学习之旅
学习JavaScript的起点就是处理网页，所以我们先学习基础语法和如何使用DOM进行简单操作。先来看一段简单的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>My JavaScrip</title>
</head>
<body>
<button>Click Me!</button>
<script type="text/javascript"> //借助 window.onload 事件，在文档加载之后，进行相关操作 window.onload = function(){ //获取按钮对应的元素节点对象 var btn = document.getElementsByTagName("button")[0]; //绑定单击响应函数 btn.onclick = function(){ //打印文本值 alert(this.firstChild.nodeValue); } } </script>
</body>
</html>
由以上简单的应用引出的四个问题
1. JavaScript 基本语法和 Java 有什么区别？
2. 为什么要使用 window.onload？
3. 在我单击按钮后如何让程序执行我希望的操作？
4. HTML 代码中的 button 标签在 JavaScript 代码中是怎么表示的？如何获取？
JavaScript 基本语法
1.script 标签：
> < script> 标签用于定义客户端脚本，比如 JavaScript ；
>在语法上， < script> 标签可以写在< html>< /html>标签内的任何位置 ；
>type 属性是必需的，用来规定脚本的 MIME 类型。对于 JavaScript，其 MIME 类型是 “text/javascript”。
> language 属性：不建议使用。
>在文档中直接插入 JavaScript 代码
<script type="text/javascript">alert("Hello World!"); </script> 使用< script>标签在HTML网页中插入JavaScript代码。注意， < script>标签要成对出现，并把JavaScript代码写在< script>< /script>之间。
> 连接外部 JavaScript 文件
使用< script>标签的 src 属性：规定外部脚本文件的 URL。
纯 JavaScript 代码可以保存到“.js”文件中，在“.js”文件中， 写 JavaScript 代码和在 script 标签中完全一样
<script type="text/javascript" src="script/jquery-1.7.2.js"></script> 注意：加载外部 CSS 样式表使用的是 link 标签，和加载外部 JS 文件 不同！
<link rel="stylesheet" type="text/css" href="theme.css" />
2. JavaScript 数据类型
字符串：JavaScript 中没有“字符型”数据，单个字符也被当成字符串处理。
数字型：JavaScript 不区分整型和浮点型，所有数字都是以浮点型来表示的。
布尔型： true用于true、非零的数字、非空的字符串 ；false用于false、数字 0、空字符串、undefined、null。
函数：在 JavaScript 中，函数也是一个对象，可作为一个值赋给变量，函数 名就是这个对象的引用。
Null：代表“空”。Null 是数据类型，它只有一个值：null 不代表数字型的 0，不代表字符串类型的””空字符串 不是一个有效的数字、字符串、对象、数组和函数，什么数据类型都不是 JavaScript 区分大小写，Null、NULL 都不等同于 null typeof(null)返回 Object（为了向下兼容）。
undefined：表示：未定义 定义了一个变量但未赋值 使用了一个未定义的变量 使用了一个不存在的对象的属性。
3. 变量
>使用 var 关键字声明 ;
>JavaScript 是弱类型语言，声明变量时，不需要指定类型。 变量在使用中也 可以存储各种类型的数据。
4. 函数
5. JavaScript 严格区分大小写 。
6. JavaScript 标识符命名规范和 Java 完全一样 。
JavaScript代码应该写在哪里
javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。
我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。
放在< head>部分
最常用的方式是在页面中head部分放置< script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
放在< body>部分
JavaScript代码在网页读取到该语句的时候就会执行。
放在不同地方的利与弊
HTML 标签内
< button onclick=”alert(‘hello’)”>ClickMe< /button>
js 和 html 强耦合, 不利于代码的维护。例如：给 10 个 button 按钮绑定同 样的单击响应函数。如果要修改函数名则必须在10个button标签处都修改， 容易造成遗漏或不一致 。
< head> 标签内
这个位置更符合习惯，但有严重问题： 在 body 节点之前执行的代码无法直 接获取 body 内的节点。 原因：此时 html 文档树还没有加载完成， 更准 确的说就是——内存中的 DOM 结构还不完整，不包括未加载的 DOM 节点， 所以相关节点 JavaScript 程序获取不到 。
浏览器加载原理分析
浏览器按照从上到下的顺序下载 HTML 文档，一边下载，一边加载到 内存， 不是全部下载后再全部加载到内存。 另外，DOM 树结构的绘 制优先于关联元素的加载，比如图片。
①载入后马上执行。
②执行时会阻塞页面后续内容（包括页面的渲染、其它资源的下载）。
浏览器加载 HTML 文档时，如果遇到< script>标签就会停止后面元素的 加载， 先对 JavaScript 脚本文件进行解析和执行。
< body>标签后面
能获取到 body 内的元素节点，
把代码写在这个位置严重不符合习惯。
window.onload
window.onload 事件是在当前文档完全加载之后被触发，此时 HTML 文档树 已经加载完成，可以获取到当前文档中的任何节点。
最终的加载执行顺序 ：
- 浏览器加载 HTML 文档 ；
- 遇到< script>标签停止加载后面的 HTML 元素，开始解析执行 JavaScript 代 码 ；
- 将封装了相关操作的响应函数绑定到 window.onload 事件上；
- 加载 HTML 元素，绘制 DOM 结构
- HTML 文档加载完成，触发 window.onload 事件；
- 开始执行 window.onload 事件响应函数中的 JavaScript 代码 。
事件的监听和响应
事件的监听和响应是用户和应用程序进行交互的方式 。
为控件绑定事件响应函数步骤：
- 从文档对象模型中获取控件对象 ；
- 声明一个事件响应函数 ；
- 将事件响应函数的引用赋值给控件对象的 onclick 属性
window.onload = function(){
//从文档对象模型中获取控件对象
var btn = document.getElementsByTagName("button")[0];
//将事件响应函数的引用赋值给控件对象的 onclick 属性
btn.onclick = function(){
var text = this.firstChild.nodeValue;
alert(text);
}
}
取消控件默认行为
>超链接的跳转功能：return false;
> 提交按钮的提交功能：return false;
事件冒泡
> 概念：用户操作的动作要传递给当前控件，响应函数执行完之后，还要继续 传递给它的父元素，并一直向上传递，直到顶层。
> 产生的原因：监听区域的重合 。
> 取消的方法：return false。
焦点
>一个控件被激活时就获得了焦点，也可以反过来说：一个控件获得焦点时被激活
>获得焦点事件：onfocus
>失去焦点事件：onblur
DOM
>Document Object Model：文档对象模型 定义了访问和处理 HTML 文档的标准方 法。是 W3C 国际组织制定的统一标准，在很多计算机语言中都有不同实现如 C#、 PHP、Java、Ruby、perl、python 等。
>DOM 树
上下为父子关系；
左右为兄弟关系。
>节点
节点的概念来源于网络理论，代表网络中的一个连接点。网络是由节点构成 的集合。 相应的，我们可以说 HTML 文档是由 DOM 节点构成的集合；
节点的分类：
- 元素节点：构成 HTML 文档最基本的 HTML 元素，对应 HTML 文档中 的 HTML 标签；
- 属性节点：对应元素的属性；
- 文本节点：对应 HTML 标签内的文本内容。
节点细解
>节点的属性
- nodeName: 代表当前节点的名字，只读属性。如果给定节点是一个文本节点，nodeName 属性将返回内容为 #text 的字符串；
- nodeType：返回一个整数, 这个数值代表着给定节点的类型， 只读属性.。1 – 元素节点, 2 – 属性节点, 3 – 文本节点
- nodeValue：返回给定节点的当前值(字符串). 可读写的属性。
元素节点, 返回值是 null
属性节点: 返回值是这个属性的值
文本节点: 返回值是这个文本节点的内容
>获取元素节点
- 根据 id 属性值获取：调用 document 对象的 getElementById(元素的 id 属性)， 返回的是当前元素节点的引用 ;
- 根据标签名，获取元素节点 :调用 document 对象的 getElementsByTagName(标签名)，返回的是标签名对 应的元素节点的数组 ;也可以通过一个元素节点来调用 getElementsByTagName(标签名)方法 。
- 根据 name 属性值获取一组元素节点 ：通过调用 document 对象的 getElementsByName(元素的 name 属性值) 方 法，返回的是一个元素的数组；如果 HTML 标签本身没有 name 属性，这时通过 getElementsByName() 方 法获取元素节点，IE 获取不到 ，严格遵守 W3C 标准的浏览器可以获取到 。
- 操作属性：推荐方法是读用element.attrName，写用element.attrName=”new value”; 经典方法是获取属性节点对象用element.getAttributeNode(属性名) 返回一个属性节点对象的引用 ，读取值用attrNode.nodeValue，修改值用attrNode.nodeValue = ” new value“
>获取元素节点的子节点
- 查看元素节点是否存在子节点:hasChildNodes()。只有元素节点才可能有子节点 。
- 通过 childNodes 属性获取全部子节点。IE 和 W3C 的标准有区别：IE 忽略空格（空 行），W3C 标准会把空格也当作子节点 。
- 通过 firstChild 属性获取元素节点的第一个子节点。该方法经常被用来获取文本 节 点 如 ： 元 素 节 点 对 象 .firstChild 。 如 果 要 获 取 文 本 值 ： 元 素 节 点 对 象.firstChild.nodeValue 。
- 调用父节点的 getElementsByTagName()，更有针对性
>创建节点
- 注意：新创建的节点，包括文本节点和元素节点，都不会自动的加入到当前的文档中 。
- 创建文本节点 document.createTextNode(文本值)方法，返回一个文本节点的引用 var textNode = document.createTextNode(“广州”);
- 创建元素节点 document.createElement(标签名)方法，返回一个新的元素节点的引用 var liEle = document.createElement(“li”);
- 将新创建的文本节点，添加到元素节点当中元素节点.appendChild(文本节点)
liEle.appendChild(textNode);
alert(liEle.firstChild.nodeValue);
var cityEle = document.getElementById("city"); - 将新创建的元素节点，添加到文档中指定的元素节点.appendChild(新创建的元素节点)
cityEle.appendChild(liEle);
>替换节点: 调用 父节点.replaceChild(新节点,目标节点) 方法，实现节点的替换。
>获取元素节点的父节点: 子节点.parentNode
>复制节点: 原元素节点.cloneNode(true) 参数为布尔值：true 包括子节点都复制，false 只复制当前节点（默认）。
>插入节点
- 将新创建的元素节点，添加到文档中指定元素节点前面 ；
- 父节点.insertBefore(新节点,目标节点);
- 自定义 inserAfter()函数
function insertAfter(newNode,targetNode){
//将一个新节点，添加到目标节点的后面
var parentNode = targetNode.parentNode;
//判断目标节点是否为最后一个子节点
if(targetNode == parentNode.lastChild){
//如果是，调父节点的 appendChild
parentNode.appendChild(newNode);
}
else{
//如果不是，获取它后面的兄弟节点
var sibling = targetNode.nextSibling;
//调用父节点的 insertBefore 方法，以 sibling 为新的目标节点
parentNode.insertBefore(newNode,sibling);
}
}
>删除节点： 元素节点.removeChild(要删除的子节点) 。
>innerHTML 属性可读可写：读：读出指定元素节点内的 HTML 代码，写：将 HTML 代 码写入指定元素节点的开始和结束标签内。
>nextSibling： 元素节点.nextSibling 返回元素节点的下一个兄弟元素 。
>previousSibling：元素节点.previousSibling 返回元素节点的上一个兄弟元素 。