JavaScript的使用
1、介绍
js是一种基于对象和事件驱动、并且具有相对安全性的客户端脚本语言，是一种弱语言
js的主要目的是验证发往服务器端的数据、增加web互动、加强用户体验度等。
组成部分
ECMAScript(基础语法)
ECMAScript定义的只是这门语言的基础，与web浏览器没有依赖关系
javascript的核心语法ECMAscript描述了该语言的语法和基本对象
DOM（文档对象模型）
描述了处理网页内容的方法和接口
DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM属于浏览器，而不是Javascript语言规范里的规定的核心内容。
BOM（浏览器对象模型）
DOM是为了操作浏览器中的文档，而为了控制浏览器的行为和操作，浏览器还提供了BOM。
2、ECMAScript
基础语法
1、行内js
将代码写在html标签上，相当于css的style，js使用onclick表示
onclick表示点击事件，当点击元素时触发
2、内部js
写在html页面的script标签中，推荐放在body标签后
3、外部js
创建js文件，通过script标签引入js文件
输入输出：
输出：
利用js向页面显示一些内容：document.write（“要显示的内容”）；
document.write（“图片：”）;
console.log（“”） 打印内容在控制台，在控制台显示打印
输入：
prompt（“请输入数字”）；
会弹出一个输入框，框的标签就是双引号里面的内容
prompt是将用户输入的信息全部转换为字符串，而不是数字
弹出：
alert（“内容”）弹出框
变量的定义与使用
js是一种弱语言，在声明变量时不用指定数据类型，直接使用var修饰符声明变量
当变量只声明未赋值的时候返回的是undfinded
定义： var 变量名 = 内容；
输出：document.write（变量名）；
字符串数字转换成数字：parseInt（）；
parseInt（）转换只是把里面的字符串转换成了数字，并不会改变原有的变量
例如：
var a = "12";
parseInt(a);
document.write(a+12);
//输出1212如果需要运算加法则需要新的变量来接受parseInt（）；转换的变量
var a = "12";
var b = parseInt(a);
document.write(b+12);
//输出24在js中如果先输出打印再定义变量是可以输出不会报错的，这叫做变量提升，
console.log（“name”）；
var name = “张三”；变量提升是针对用var定义的变量，在编译的时候会把这个变量提升到代码最前面
变量提升只针对使用var定义的变量，且先输出的是undfinded未赋值
数据类型
虽然说js是弱语言，变量没有类型，但数据本身是有类型的，针对不同的类型，我们可以进行不同的操作。
javascript中有六种数据类型，其中有五种简单的数据类型：undefined、null、布尔、数值和字符串，一种复杂数据类型object。
使用typeof操作符测试数据类型
使用方法：type 数据；
数值（number）：整数和小数
字符串（string）：字符串和文本
布尔值（boolean）：true和false两个特定值
undefined：表示未定义或者不存在，即此处目前没有任何值
null：表示空缺，即此处应该有一个值，但目前为空
对象object（引用）：各种组成的集合
（1）、对象
（2）、数组
（3）、函数
undefined：
表示不存在，出现情况：
1、当申明了变量但未赋值时
2、调用函数（方法）时，函数有形参，但未提供实参
3、函数没有返回值null：
表示空值，使用注意：
1、使用typeof测试null返回的是object字符串。
2、undefined派生自null，所以两者比较返回值是true。数值型：
1、所有数字都是以64位浮点型存储的，所以在js中1与1.0是相等的
2、浮点类型最高精度是17位，浮点类型运算时可能不准确，不建议使用浮点型做判断
3、在存储数据时会自动将浮点数值1.0转换成1，1+1.0的值为2。字符串：
字符串使用单引号双引号是都可以的
类型转换
函数转换
js提供了parseint（）和parsefloat（）两个全局转换函数，前者把值转换成整数，后者把值转换成浮点数，只有对string类型调用这个方法，这两个数值才能正确运行，其他返回类型都是NaN(not a number)
parseint（）
在转换之前，首先会分析该字符串，判断位置为0处的字符，如果不是就返回nan，是的话就继续判断，直到结束或者找到非字符结束
parseint("123abs");//返回123
parseint("1234");//返回1234
parseint("ble");//返回nanparsefloat（）
该方法与parseint（）方法的处理方式相同，但是对于这个方法来说，第一个出现的小数点是有效字符，第二个出现会被看作无效的
parsefloat（“123blue”）；//返回123.0
parsefloat（“1234”）；//返回1234.0
parsefloat（“123.45”）；返回123.45
parsefloat（“123.45.67”）；//返回123.45
parsefloat（“blue”）；//返回nan注意：
var a = 123ab;
var b = parseInt（a）；
alert(a);//输出123ab
alert(b);//输出123因为parstint是一个函数转换，它只是把当前这个值转换成为整数值，并不是把变量的值改变了。所以需要输出转换的值需要一个新的变量来接收它。
显示转换
显示转换有两个方法，是方法所以就需要一个变量来使用这个方法，当变量没有值为null时也就不可以使用了。
tostring（）；将内容转换为字符串形式
tofixed（）；根据小数点后指定位数将数字转换成字符串
//tostring
var a = 10;
document.write(a.tostring())
//输出10字符串
//tofixed()
var b = 1.234;
document.write(a.tofixed(1))
//输出1.2字符串js也为number、boolean、string对象提供了构造方法，用于强制转换成其他数据类型，此时操作的是整个数据，而不是部分
例如：
Number（false）//输出0
Number（undefined）//输出nan
Number（null）//输出0
Number（“5.6.7”）//输出nan
Number（new object（））//nan
Boolean（“”）//false
Boolean（“hi”）//true
Boolean（100）//true
Boolean（null）//null
Boolean（0）//false
Boolean（new object（））//true
//将任意值转换成字符串，包括null和undefinded
var q = null；
document.write（string（q））
输出null字符串运算符和控制语句
运算符和控制语句都是和Java一样，其中最需要注意的就是==和===
== 相等，比较值是否相等
===全等，比较值和类型是否相等
var a = 1;
var b = "1";
alert(a==b)//true
alert(a===b)//fales数组
数组的定义
var arr = [值1，值2，值3] //隐式创建
var arr = new Array（值1，值2，值3）；//直接实例化
var arr = new Array（长度）//创建数组且指定长度特点
1、长度可变
2、数组中数据类型任意
3、索引从0开始
4、可以使用任意字符当作数组的索引，如果索引是非正整数，我们称之为属性，属性不占据长度
数组遍历
1、一种普通for循环，不会去取索引
2、 一种数增强for循环，var 下标名 in 数组名，会打印属性 ，不遍历undefined
3、还有一种是foreach结构：
数组名.forEach（function（element，index））{
//element（名称任意）：元素
//index（名称任意）：下标
这种也不会遍历属性和undefined
数组方法
push 添加元素到最后
unshift 添加元素到最前
pop 删除最后一项
shift 删除第一项
reverse 数组翻转
join 数组转换成字符串
indexof 数组元素索引
slice 截取数组，原数组不发生改变
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并函数
函数定义
1、函数声明语句：
function 函数名（参数列表）{}
2、函数定义表达式：
var 变量名 = function（参数列表）{}
3、function构造函数：
var 变量名 = new function（‘变量1’，‘变量2’，‘return（想要的结果，如变量1+变量2）’）；
注意：
1、如果使用函数声明语句这种方式，这回又函数提升的效果
2、js中方法没有重载，如果出现同方法名则覆盖
函数作用域
js的作用域只有在函数中才能体现
if(true){
var a = 1;
}
alert(a);//输出1
比如在这种情况，在Java中输出a的值是会报错的，因为a的作用只有在if语句里面，但是在js中，作用域不会体现在这里。
function a(){
var b = 10;
}
alert(b);
//报错,因为函数有作用域概念，b只在函数中有用
当有作用域的时候就会出现局部变量和全局变量，
局部变量和全局变量重名的时候，在方法中输出这个变量输出打是局部变量的值，采用就近原则
在函数中定义变量的时候，若没有加var关键字，使用之后自动变为全局变量，在方法外部也可以调用这个变量
对象
对象是js的核心概念，也是最重要的数据类型，js的所有数据都可以被视为对象，js提供多个内置对象，对象是带有属性和方法的特殊数据类型。
内置对象
String：
charAt（idx） 返回指定位置处的字符
indexof（chr） 返回指定子字符串的位置
substr（m，n） 返回给指定字符串中从m位置开始，取n个字符，如果n省略则取到末尾
substring（m，n） 返回指定字符串从m位置开始，到n结束，如果n省略则到末尾
tolowercase（） 将字符串的字符全部转化为小写
touppercase（） 将字符串全部转化为大写
length 属性不是方法，返回字符串的长度math：
math.random（） 随机数
math.ceil（） 向上取整，大于最大整数
math.floor（） 向下取整data：
//获取日期
getfullyear（） 年
getmonth（） 月
getdate（） 日
gethours（） 时
getminutes（） 分
getseconds（） 秒
//设置日期
setyear（）
setmonth（）
setdate（）
sethours（）
setminutes（）
setseconds（）
toloacalestring（）转换成本地时间字符串注意：
1、getmonth（） 得到的值：0~11（1月到12月）
2、setmonth（） 设置值时0~11
3、tolocalestring（）可以根据本地时间把date对象转换成字符串
调用日期：var date = new date();
对象的创建
1、字面量形式创建对象：
var 对象名 = {
键：值，
键：值，
。。。。
}；
赋值：对象名。键=值
如果值已经存在，则表示修改数据，如果键不存在，则表示添加数据
键都是字符串，相当于名字，值可以是六种数据类型中任意一种
var a = {
name:"张三",//字符串
age:18,//数值
like:true,//布尔值
play:function(){//函数
alert("玩");
}
cats:['狗','猫'],//数组
dog:{//对象
name:"里斯",
age:17,
}
};对象的序列化和反序列化
序列化就是将对象序列化为字符串，当成tostring方法把里面的内容全部输出，反序列化就是将字符串变成js对象，序列化放序列化都是json方法。
//序列化对象，将对象转换成字符串 json.stringify(对象名); //反序列化，将一个json字符串转换成对象 json.parse(对象名);
3、DOM
Document object model文档对象模型
要实现页面的动态效果，bom操作远远不够，需要操作html才是核心，如何操作html，就是DOM。简单说，dom提供了用程序动态控制html接口。
节点
加载html页面时，web浏览器生成一个树状结构，用来表示页面内部结构，DOM将这种树形结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类型的节点：
| 节点类型 | HTML内容 | 例如 |
|---|---|---|
| 文档节点 | 文档本身 | 整个文档document |
| 元素节点 | 所有的HTML元素 | 、 、 |
| 属性节点 | HTML元素内的属性 | id、href、name、class |
| 文本节点 | 元素内的文本 | hello |
| 注释节点 | HTML中的注释 |
获取节点
在进行增删改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过Document对象提供的方法，查找定位某个对象（也就是我们说的节点）。
注意：操作dom必须等节点初始化完毕后，才能执行。
处理方式：
1、把script调用标签移到HTML末尾即可
2、使用oncload时间来处理js，等待html加载完毕再加载onload时间里的js。
获取方式：
| 方法 | 描述 |
|---|---|
| getElementById（） | 根据id获取dom对象，如果id重复，那么以第一个为准 |
| getElementsByTagName（） | 根据标签名获取dom对象数组 |
| getElementsByClassName（） | 根据样式名获取对象数组 |
| getElementsByName（） | 根据name属性值获取dom对象数组，常用语多选获取值 |
根据id获取对象，如果id重复，则以第一个为准
这是第一个段落
这是第二个段落
根据name获取,因为获取的是一个数组，所以可以通过下标精确访问第几个。
这是第一个段落
这是第二个段落
这是第三个段落
按照标签名获取，因为标签里面有各种元素，所以也可以获取到元素类型
游泳
篮球
足球
根据class获取
这是第一个段落
这是第二个段落
创建节点和插入节点
很多时候我们想要在某一个位置插入一个新的节点，此时我们首先需要有一个节点存在，可以通过以下几种方式创建新的节点
创建节点：
| 方法 | 描述 |
|---|---|
| createElement（） | 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象 |
| createTextNode（） | 创建一个文本节点，可以传入文本内容 |
| innerHTML | 也能达到创建节点的效果，直接添加到指定位置了 |
插入节点：
| 方法 | 描述 |
|---|---|
| write（） | 将任意字符串插入到文档中 |
| appendChild（） | 向元素中添加新的子节点，作为最后一个子节点 |
| insertBefore（） | 向指定的已有的节点之前插入新的节点，参数一：要插入的节点标签，参数二：需要添加在哪个标签的id，需要使用document.getElementById("")来声明。 |
添加文本
运用一：
运用二：
运用三：
添加图片
方式一：
方式二：
方式三：
添加文本框
方法一：
方法二：
方法三：
插入节点
write（） 将任意字符串插入到文档中
document.write(你好
);
insertBefore()，需要参考父节点，返回父节点parentElement
- 红色
- 绿色
间接查找节点
| 方法|属性 | 描述 |
|---|---|
| childNodes | 返回元素的一个子节点的数组 |
| firstChild | 返回元素的第一个子节点 |
| lastChild | 返回元素的最后一个子节点 |
| nextSibling | 返回元素的下一个兄弟节点 |
| parentNode | 返回元素的父节点 |
| previousSling | 返回元素的上一个兄弟节点 |
删除节点
| 方法|属性 | 描述 |
|---|---|
| removeChild（） | 从元素中移除子节点 |
你好
4、BOM
BOM的核心对象是window，表示浏览器的一个实例，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
window对象方法
系统对话框：
消息框：alert，常用
输入框：prompt
参数（可选）：
参数一：提示输入文本
参数二：输入框默认文字
确认框：confirm，返回true/false
因为是window对象方法，所以系统对话框的全称为window.alert（），只不过是省略了window
打开和关闭窗口
打开窗口：
window.open()方法既可以导航到一个特定的url也可以用来打开一个新的窗口
1、打开空白页面
2、打开指定页面
3、打开外部页面
4、指定方式打开页面
关闭窗口：
时间函数
指定时间执行：
settimeout（function，times）；
参数一：执行的函数名
参数二：时间，单位毫秒
利用时间函数在html页面实现控制时间：
循环执行：
setInterval(参数1，参数2)；
参数一：执行的函数名
参数二：循环间隔时间，毫秒
history对象
history对象的属性：length，返回浏览器历史列表中的url数量。
history对象的方法：
back（）：加载history列表中的前一个url，也就是返回上一个页面
forward()：加载历史列表中的下一个url。
go()；返回在history相对的位置
location对象
location 对象的属性：
href：设置或返回完整的URL，也就是返回路径名
location对象的方法：
1、reload()：重新加载当前文档
2、replace()：用新的文档替换当前文档，也就是新的页面，不能后退访问
5、事件
介绍
事件是js应用跳动的心脏，进行交互，使网页动起来，事件可能是用户在某些内容上的点击，鼠标经过某个特定的元素或按下键盘上的某些按钮，事件还可能是web浏览器中发生的事情，比如说某个web页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过js，你可以监听特定事件的发生，并规定让某些事件发生以对这些事情做出响应。
作用
1、验证用户输入的数据 2、增加页面的动感效果 3、增强用户的体验度
名词
事件源：谁触发的事件 事件名：触发了什么事件 事件监听：谁管这件事，谁监听 事件处理：发生了怎么办
事件流
事件流的顺序：事件冒泡和事件捕获
事件冒泡（从小到大）：
事件开始有最具体的元素接受，然后逐级向上传播到较为不具体的节点
事件捕获（从大到小 ）：
事件开始由document对象接收，然逐级向下传播到具体的节点
事件处理程序
响应某个事件的函数就叫做事件处理程序，事件处理程序以on开头
1、html事件处理程序
2、DOM 零级事件处理程序
将一个函数赋值给一个事件处理程序属性
只能为同一个元素的同一个事件设定一个程序（覆盖）
3、DOM 二级处理事件
二级处理事件可以为同一个元素的同一个事件设定多个程序。
addEventListener()和removeEventListener();
这两个函数有三个参数：
参数一：事件名（不用加on）
参数二：处理事件的函数（可以直接定义）
参数三：false（事件冒泡）或true（事件捕获）
移除事件只能移除有函数名的事件，比如第一个事件直接在里面定义函数没有函数名就无法移除
常用事件
前面加上on表示绑定这个事件，on后面的为事件名
加载事件：
onload：当页面或图像加载完后立即触发
焦点事件：
onblur：元素失去焦点
onfocus：元素获得焦点
鼠标事件：
onclick：鼠标点击某个对象
onmouseout：鼠标从某个元素上离开
onmouseover：鼠标移动到某个元素上
键盘事件：
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下
表单事件：
onchange：用户改变域的内容
onsubmit：确认按钮被点击
onselect：文本被选中
加载事件：
//window.onload表示页面加载完之后再触发
焦点事件：
姓名：
鼠标事件：
表单事件：
城市：
键盘事件：
表单
表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送之前，我们应该在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。
获取表单
前两种常用
1、document.表单 2、document.getElementById（表单id）； 3、document.forms[表单名称] 4、document.forms[索引]；//从0开始
1、document.表单
2、document.getElementById（表单id）；
3-4:
去除表单前面的空格：表单名.trim（）；
只去除前面和最后面的空格，不去除中间的5555555555
获取表单元素
1、通过id获取：document.getElementById(元素id); 2、通过form.名称形式获取：myform.元素名称； 3、通过name获取：document.getElementsByName(name属性值)； 4、通过tagName数组：document.getElementsByTagName（‘input’）[索引];
例：
获取表单按钮
前提：将一组单选按钮设置的n相同ame属性值
1、获取单选按钮
document.geElementsByName("name属性值");
2、遍历每个单选按钮，并查看单选按钮元素的checked属性
若属性为true表示被选中，否则位被选中
选中状态：checked=‘checked’ 或checked=‘true’或checked
未选中状态：没有checked属性或者checked=‘false’
下拉表单获取被选中的索引：对象名.selectedIndex;
如果下拉表单获取的是value，但是被选中的值没有value，就会输出文本值
获取文本值：对象名.text；
提交表单
获取提交表单.submit（）
1、使用普通button按钮+onclick事件+事件中编写代码
trum（）去除字符串前后空格（不去除字符串中间的空格）
2、使用submit按钮 + οnclick=“return 函数（）”
最后必须返回 return true|false。
3、使用submit按钮/图片提交按钮 + 表单οnsubmit="return 函数（）"
表单校验
重置表单
document.getElementById("表名").reset();
//或者
document.getElementById("表名").clear();
通过id参数，返回dom对象
function $(id){
return document.getElementById(id);
}
这个相当于简化dom操作，不用频繁的去使用id调用对象，以后调用可以直接使用$(“id”)方法调用