0107 JavaScript

1.JavaScript

JavaScript语言诞生主要是完成页面的数据验证，因此它运行在客户端，需要浏览器来解析执行JavaScript代码。

JS是弱类型（var，类型可变），Java是强类型（int,double...类型不可变）

特点：

1.交互性（信息动态交互）

2.安全性（不允许直接访问本地硬盘）

3.跨平台性（只要是可以解释JS的浏览器都可执行）

1.JavaScript和HTML结合的方式

1.在head标签或body标签中，使用script标签来书写JavaScript代码

---

2.使用script标签引入单独的JavaScript代码文件

script标签可以用来定义js代码，也可引入，但两个功能不能同时使用

---

2.变量 

变量是可以存放某些值的内存的命名

JavaScript的变量类型：

数值类型：number        （byte,int,float,double....）

字符串类型：string

对象类型：object

布尔类型：boolean

函数类型：function

JavaScript里的特殊值：

undefined：未定义，所有js变量未赋初始值时，默认为undefined

null：空值

NAN：非数值，not a number

JavaScript中的定义变量格式：

var 变量名；

var 变量名 = 值；

JavaScript中的关系（比较）运算：

等于：== 

等于是简单的做字面值比较

全等于：===

除了做字面值比较，还会比较两个变量的数据类型

其他与Java相同

JavaScript中的逻辑运算：

在JavaScript中，所有变量都可以作为一个Boolean类型的变量去使用

0、null、undefined、“”（空串）都认为是false

且运算：&&

        1.当表达式全为真时，返回最后一个表达式的值

        2.当表达式中有一个为假时，返回第一个为假的表达式的值

或运算：||

        1.当表达式全为假时，返回最后一个表达式的值

        2.只要有一个表达式为真，返回第一个为真的表达式的值

&&且运算与||运算有短路，即运算有结果后，不再执行后面的表达式

取反运算：！

---

3.数组 

格式：

var 数组名 = [];//空数组

var 数组名 = [1,'abc',true];//定义数组的同时赋值元素

JavaScript中的数组，只要我们通过数组下标赋值，最大的下标值就会自动的给数组做扩容操作

 遍历数组

---

4.函数

函数的两种定义方式：

1.使用function关键字来定义函数

        function 函数名（形参列表）{

                        函数体

        }

如何定义带有返回值的函数？

直接使用return语句返回值即可

2.使用var定义函数

var 函数名 = function（形参列表）{函数体}

注：在Java中函数允许重载，但在JS中函数的重载会覆盖掉上一次的定义

 3.隐形参数arguments（只在function函数内）

隐形参数就是在function函数中不需定义，但却可以直接用来获取所有参数的变量。

类似Java的可变长参数 public void fun(Object...args);

可变长参数其实是一个数组，JS中隐形参数也跟Java可变长参数一样，操作类似数组

如：编写一个函数，用于计算所有参数相加的和并返回

---

5.JS中自定义对象

1.object形式的自定义对象

1.对象的定义：

var 变量名 = new Object();//对象实例（空对象）

变量名.属性名 = 值；//定义一个属性

变量名.函数名 = function（）{} //定义一个函数

2.对象的访问

变量名.属性名/函数名（）；

2.花括号形式的自定义对象 

var 变量名 = {}；//空对象

var 变量名 = {

        属性名：值，//定义一个属性

        属性名：值，

        函数名：function（）{} //定义一个函数

}

---

6.JS中的事件 

事件是电脑输入设备与页面进行交互的响应

常用事件

onload 加载完成事件，常用于做页面JS代码初始化操作

onclick 单击事件，常用于按钮的点击响应操作

onblur 失去焦点事件，常用于输入框失去焦点后，验证其输入内容是否合法

onchange 内容发生改变事件，常用于下拉列表和输入框内容发送改变后的操作

onsubmit 表单提交事件，常用于表单提交时，验证所有表单项是否合法

---

事件的注册

事件的注册（绑定）就是告诉浏览器，当事件响应后要执行哪些操作代码

1.静态注册事件

通过HTML标签的事件属性直接赋予事件响应后的代码，称为静态注册

2.动态注册事件

先通过JS代码得到标签的dom对象，然后再通过dom对象.事件名=function（）{}这种形式赋予事件响应后的代码，称为动态注册

步骤：

        1.获取标签对象

        2.标签对象.事件名 = function（）{}

---

onload加载完成事件

onload事件是浏览器解析完页面后，就自动触发的事件

静态注册：

 动态注册：

window.onload = function(){}

---

onclick单击事件 

动态注册：

window.onload = function(){

        1.获取标签对象

        document.getElementById("");

        //document是JS提供的一个对象（文档）

        //getElementById 通过ID属性获取标签对象

        2.通过标签对象.事件名=function（）{}

}

---

onblur失去焦点事件

---

 onchange 内容发生改变事件

---

onsubmit表单提交事件 

---

7.DOM模型

全称Document Object Model 文档对象模型

就是把文档中的标签，属性，文本转换成对象来管理

1.document对象

理解：

1.document它管理了所有HTML文档内容

2.document它是一种树结构的文档，有层级关系

3.把所有标签都对象化

4.可以通过document访问所有的标签对象 

2.document对象中的方法

document.getElementById(elementId)

通过标签的id属性查找标签dom对象

document.getElementsByName(elementName)

通过标签的name属性查找标签dom对象

document.getElementsByTagName(tagName)

通过标签名属性查找标签dom对象

document.createElement(tagName) 

通过给定的标签名，创建一个标签对象

---

document.getElementById(elementId)

如：验证用户名是否有效

验证规则：必须由字母，数字，下划线组成，并且长度为5-12位

3.正则表达式

语法

var patt = new RegExp();

常用：

 

 

4.两种常见的验证提示效果 

 

 

 

---

 document.getElementsByName(elementName)

---

 document.getElementsByTagName(tagName)

---

 document对象三个查询方法的注意事项

1.如果有id属性，优先使用getElementById方法查询

2.如果没有id属性，则优先使用getElementsByName方法查询

3.若id属性和name属性都没有，最后按标签名getElementsByTagName查询

以上三个方法一定要在页面加载完成之后，才能查询到标签对象

---

document.createElement(tagName) 

---

8.节点的常用属性和方法

节点就是标签对象

方法：

getElementsByTagName() ：获取当前节点指定标签名孩子节点

appendChild(oChildNode)：添加一个子节点

属性：

childNodes：获取当前节点的所有子节点

firstChild：获取当前节点的第一个子节点

lastChild：获取当前节点的最后一个子节点

parentNode：获取当前节点的父节点

nextSibling：获取当前节点的下一个节点

previousSibling：获取当前节点的上一个节点

className：获取或设置标签的class属性值

innerHTML：获取或设置起始标签和结束标签中的内容

innerText：获取或设置起始标签和结束标签中的文本