02. JavaScript
一、JavaScript介绍
??Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。JS是Netscape网景公司的产品，最早取名为LiveScript;JS是弱类型。
??特点：
- 交互性（它可以做的就是信息的动态交互）
- 安全性（不允许直接访问本地硬盘）
- 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）
二、JavaScript和html代码的结合方式
- 只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码
- 使用script标签引入单独的JavaScript代码文件
Title
??template.js位于该html文件的下一级目录【js】，内容如下：
alert("I'm coming!")
三、变量
??变量是可以存放某些值的内存的命名。
3.1、JavaScript的变量类型
| 变量名称 | 变量类型 |
|---|---|
| number | 数值类型 |
| string | 字符串类型 |
| object | 对象类型 |
| boolean | 布尔类型 |
| function | 函数类型 |
JavaScript里特殊的值：
| 特殊值 | 含义 |
|---|---|
| undefined | 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined |
| null | 空值 |
| NaN | 全称是：Not a Number。非数字，非数值。 |
3.2、JS中的定义变量格式
var 变量名;
var 变量名 = 值;
template：
Title
四、运算符
4.1、关系（比较）运算
| 关系运算符 | 含义 |
|---|---|
| > | 大于 |
| >= | 大于等于 |
| < | 小于 |
| <= | 小于等于 |
| != | 不等于 |
| == | 等于（简单的做字面值的比较） |
| === | 全等于（除了做字面值的比较，还会比较两个变量的数据类型） |
Title
4.2、逻辑运算
| 逻辑运算符 | 含义 |
|---|---|
| && | 且运算 |
| || | 或运算 |
| ! | 取反运算 |
- && 与运算
- 当表达式全为真的时候。返回最后一个表达式的值。
- 当表达式中，有一个为假的时候。返回第一个为假的表达式的值
- || 或运算
- 当表达式全为假时，返回最后一个表达式的值
- 只要有一个表达式为真。就会把回第一个为真的表达式的值
在JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用。
0、null、undefined、""（空串）、NaN都认为是false；
&&与运算和||或运算有短路。 短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行
Title
五、数组
??JS中数组的定义：
var 数组名 = []; // 空数组
var 数组名 = [1,'abc',true]; // 定义数组同时赋值元素
template：
Title
javaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
六、函数
6.1、函数定义的方式
//第一种定义方式
function 函数名(形参列表){
函数体
}
//第二种调用方式
var 函数名 = function(形参列表) {
函数体
}
template：
Title
在Java中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义
Title
6.2、隐形参数
??就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。隐形参数特别像java基础的可变长参数一样。public void fun( Object ... args ); 可变长参数其他是一个数组。那么js中的隐形参数也跟 java的可变长参数一样。操作类似数组。
Title
七、自定义对象
//Object形式的自定义对象
var 变量名 = new Object(); //对象实例（空对象）
变量名.属性名 = 值; //定义一个属性
变量名.函数名 = function(){} //定义一个函数
变量名.属性 / 函数名(); //对象的访问
//{}花括号形式的自定义对象
var 变量名 = {
属性名：值, //定义一个属性
函数名：function(){} //定义一个函数
};
template：
Title
Title
八、事件
??事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件
- onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作
- onclick 单击事件：常用于按钮的点击响应操作
- onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法
- onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
- onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法
??事件的注册又分为静态注册和动态注册两种。事件的注册（绑定）其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
- 静态注册事件：通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
- 动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋于事件响应后的代码，叫动态注册。
动态注册基本步骤：
- 获取标签对象
- 标签对象.事件名 = fucntion(){}
8.1、onload加载完成事件
8.1.1、onload事件静态注册
Title
8.1.2、onload事件动态注册
Title
8.2、onclick单击事件
8.2.1、onclick单击事件静态注册
Title
8.2.2、动态注册onclick事件
Title
8.3、onblur失去焦点事件
8.3.1、onblur失去焦点事件静态注册
Title
用户名：
密 码：
8.3.2、onblur失去焦点事件动态注册
Title
用户名：
密 码：
8.4、onchange内容发生改变事件
8.4.1、onchange内容发生改变事件静态注册事件
Title
请选择国籍
8.4.2、onchange内容发生改变事件动态注册事件
Title
请选择国籍
8.5、onsubmit表单提交事件
8.5.1、onsubmit表单提交事件静态注册
Title
8.5.2、onsubmit表单提交事件动态注册
Title
九、DOM模型
??DOM全称是Document Object Model文档对象模型，就是把文档中的标签，属性，文本，转换成为对象来管理。
9.1、Document对象
??Document它管理了所有的HTML文档内容，它是一种树结构的文档，有层级关系。它让我们把所有的标签都对象化。我们可以通过document访问所有的标签对象。
9.2、Document对象中的方法
document.getElementById(elementId) //通过标签的id属性查找标签dom对象，elementId是标签的id属性值
document.getElementsByName(elementName) //通过标签的name属性查找标签dom对象，elementName标签的name属性值
document.getElementsByTagName(tagname) //通过标签名查找标签dom对象。tagname是标签名
document.createElement( tagName) //通过给定的标签名，创建一个标签对象。tagName是要创建的标签名
document对象的三个查询方法，如果有id属性，优先使用getElementById()方法来进行查询 如果没有id属性，则优先使用 getElementsByName()方法来进行查询 如果id属性和name属性都没有最后再按标签名查getElementsByTagName()
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。
9.3、节点的常用属性和方法
??节点就是标签对象;
??属性：
childNodes //获取当前节点的所有子节点
firstChild //获取当前节点的第一个子节点
lastChild //获取当前节点的最后一个子节点
parentNode //获取当前节点的父节点
nextSibling //获取当前节点的下一个节点
previousSibling //获取当前节点的上一个节点
className //用于获取或设置标签的class属性值
innerHTML //表示获取/设置起始标签和结束标签中的内容innerText属性，表示获取/设置起始标签和结束标签中的文本
??方法：
getElementsByTagName() //获取当前节点的指定标签名孩子节点
appendChild(oChildNode) //可以添加一个子节点，oChildNode 是要添加的孩子节点