JS笔记

什么是JavaScript？
是一种客户交互脚本语言。
客户：有两个含义第一指的是客户端，第二个指的是用户。
交互：指的是用户动作之后，页面或服务器会有相应的反馈。
脚本：指的需要按一定顺序才能正常执行的。

怎么使用JavaScript
直接使用script标签，在标签中写JS语言即可。也可以在script标签中使用src属性来进行外链脚本文件。跟CSS的外联样式表使用基本相同。

变量
定义变量的方法：
1、var 变量名
2、let 变量名
如何选择使用哪个方法来定义变量。以现在的标准来讲，一般情况下都应该优先使用let来定义变量。在某情况下才会使用var来定义变量
变量名命名规范，不要使用特殊字符（除了大小写英文字母、数字0-9还有下划线_以外的所有字符都是特殊字符）。不能使用纯数字，也不能使用数字开头。

变量的赋值
= 赋值符，作用是把右边的值赋给左边。
let a = “牛奶”

变量可以认为是一个有名字用于存放数据的容器。

变量的数据类型
分类为标量类型
一、字符串（String）
定义字符串需要使用定界符（’ 或者 "）包裹。
一般情况下单引号或双引号做定界是没有区别的。但是如果字符串中有单引号，我们就使用双引号做为定界符，反则亦然。
\ 转译符 主要有两个作用，1、把后一位的字符转为纯字符串。2、用于特殊字符的输出，比方说换行符

• 拼接符 把左右两边的字符串进行拼接

二、数字（Number）
整型(Integer)：整数，包括负数
浮点型（float）：小数，包括负数

• • • / %这五个是最常用的运算方法。并且它们的运算顺序也遵循正常计算方法，也就是说先乘除后加减。如果有需要提前运算的话一样可以使用()。 小括号是优先运算符。

自运算：
i++, ++i
自增符或者叫做递增符。当前值加+1后返回给自己。
i++ => i = i + 1
i++跟++i 一般情况下是相同的。但如果在自增的同时进行调用。就会有两种情况。
i++ 是行调用后运算。
++i 先运算后调用。
i–, --i
自减或者叫做递减，其原理跟自增一样。

三、布尔型（Boolean）
只有两值true 跟false。

下面两种类型是复合型
四、数组（Array）
定义数组：
格式： let 数组名 = Array(元素1, 元素2, …)
let 数组名 = [元素1, 元素2, …]
调用数组中元素的方法
数组名[下标( 键值)]
注意在JS中所有的下标都是从0开始
多维数组：
数组中的元素也是一个数组。在数组中有多一层的数组我们叫做二维数组，再多一层叫做三维数组。

五、对象（Object）
定义对象
格式： let 对象名 = {属性1:值, 属性2:值…}

调用对象属性的方法
对象.属性

下三种分类为特殊型
null 空类型
undefinde 值未定义，也是所以变量的默认值
NaN 非数字。 not a number。 由于NaN是泛指所有非数字的值，所以NaN是不等于NaN。无法直接用这个值进行判断。

基础语法：
判断语句
格式：
If(判断条件){当判断条件成立时执行的语句}

扩展格式：
If(判断条件){当判断条件成立时执行的语句}else {当判断条件不成立时执行}
也叫做二路选择语句

扩展格式2：
If(条件1){当条件1成立时执行的语句}else if(条件2) {当前面条件不成立时并且条件2成立时执行}else if(条件3)…[else{前所有条件都不成立时执行}]

判断的条件也就是小括号中的值最终会以布尔值来进行判断，如果最终值不是布尔，那JS会对面里的值进行转换。一般来讲只要是正经可使用的值就是true比方说123，”小明”等可以真使用的值。比较特殊的值有数字0会自动转换为false，所有特殊值null，undefined，NaN都是转换为false

switch:语句
格式：
switch (判断值) {
case 对比值1:
如果对比值1等于判断值就执行的语句
break;
case 对比值:
如果对比值2等于判断值就执行的语句
break;
…

        default:

当所有对比值都不等于判断值时执行我语句
break;
}
一般来讲switch 都是可以使用if语句来进行替用的，但本来switch语句会更加方便阅读并且它的执行效率会比if…else要更高，所以能用switch的我都应该使用switch。

比较运算符：
比较符号两边的值。如果符合该符号的预期结果则返回布尔值true，否则返回false

==、>、>= 、<、<= 、!=、 ===（严格等于）

===严格等于也叫做绝对等于，除了值要相同外，数据类型也必须要相同才会返回true

循环语句：
For循环
格式：
for(初始化;判断条件; 循环后执行的语句){
当判断条件成立时执行的语句
}

循环作用：
1、需要重复使用的语句时，我们可以使用循环来完成。
2、有些计算需要用于循环来完成。
3、数组的遍历。

for…in循环
格式：
For(属性变量 in 对象){
执行的语句
}
作用：
是用于对象的遍历。

数组的遍历：
数组的遍历是指把数组中的元素一个一个进行调用。

while循环
格式：
while (循环条件){
循环条件成立执行的语句
}

由于使用while循环比较容易写成死循环，所使用for循环会比它要多一些。

do… while循环
格式：
do{
循环条件成立时执行的语句
}while(循环条件);
do… while循环里的执行语句至少会执行一次。

关键字说明：
Break 跳出当前语句
continue 跳过当前环节执行下一个环节

自定义函数
自定义函数就是用户自定义下来的函数。所以谓的函数就在程序中封装好的语句。
定义格式：
function 函数名(参数1, 参数2…){
执行的语句
}
PS:定义函数时，所用函数中的语句是不执行的。

调用格式：
函数名(参数, 参数…)

作用：
1、用于重复调用的语句，在需要时候可以直接调用。
2、可以通过参数的改变把结果改变。
3、把复杂的语进行分割，方便阅读与修改。

有返回值的函数就是该函数使用了关键字return把需要的值返回出去。
函数执行了return的话就是结束当前函数。

变量的作用域
变量的作用域是指变量可以作用的区域，一般这些区域都是以函数作用分割。

一般情况下，高级的域所定义在变量是可以直接在低级域（使用函数分割出来的区域）中使用。这样的变量我们叫做全局变量。
在函数中定义的变量他的作用域只在该函数中或其低级的函数生效，所以这样变量我们叫做局部变量。

var关键字与let关键字的区别
1、var有着编译级别的优先级。
2、let同一个作用域只能定义一个变量名

JavaScript的内置对象
什么是对象？
所有拥有相同属性与方法的集合就是对象。（这个是JS中对象的概念，在其它面向对象语言中这是类的概念）
对象的属性：可以静态描述对象的信息就是属性。
调用方法： 对象名.属性名

对象的方法：对象要吧做的事情，或者可以对对象做的事情就是方法。
调用方法： 对象名.方法名()

new 关键字，用于实例化对象。实例化对象是从对象集合中把一个个体作用研究的对象。只用实例化后对象才能使用。

什么是JS内置对象：
不需要创建JS本就有的对象。
字符串对象：
常用属性：
Length: 返回对象的长度（字的多少）
常用方法：
indexOf: 返回目标字符串在原字符串对象所在位置的下标
Substr: 返回目标字符串从指定开始下标到指定长度之间的所有字符串。
Substring： 返回目标字符串从指定开始下标到指定结束下标的所有字符串。

数组对象：
arrayObj = new Array()
常用属性：
length: 返回对象的长度（元素的个数）
常用方法：
push: 为数组添加一个新的元素，返回新数组的长度
pop: 移除数组中最后一个元素，返回该元素
Splice: 移除数组中指位置下一个或多个元素，有需要可以用新的元素替换移除的元素。返回的是移除的元素
reverse ：返回原数组倒序的数组。
join: 返回一个使用指字符串连接起所有数组元素的字符串

sort: 使用指定方法对数组中的元素进行排序 。会使用函数中的方法来进行排序，基本准则是如果返回值小于0则元位置不动。如果大于0则元素位置相调换。

PS：在JS中赋值是有两种赋值形式。一种是直接赋值，另一种是引用赋值。
直接赋值指的是把值直接赋值给变量（值的拷贝）。
引用赋值指是把值的内存地址进行传递（地址的拷贝）。
一般情况下都是直接赋值。但对数组跟对象的变量之间的赋值就是引用值。

日期对象：
用于日期的处理与生成的方法。
getTime 获取当前日期对象的时间戳。时间戳指的是从1970年1月1日零时零分零秒开始算到该日期的毫秒数（不同语言的单位可能不同，比方说PHP是按秒算的）

数学对象：
提供各种用数学计算的方法或才常数。
常用方法：
random: 生成一个0~1的伪随机数。有可能为0，不可能为1.
round: 四舍五入到整数的方法
floor : 向下取整
ceil： 向上取整

BOM与DOM
BOM浏览器操作对象
由于JS是基由对象开发的编程语言，所以实际上它所有内容都相当于是对象中的属性或方法。这由于JS最大的对象就是winodw(浏览器)

DOM文档操作对象
DMO就是对页面元素的操作。

页面中的有元素都是以节点的形式进行表现。

获取页面中指节点对象的方法：
通过ID获取节点对象
格式： document.getElementById(ID名)

通过标签名获取节点对象
格式： document.getElementsByTagName(标签名)
注意：由于一个页面中可能有多个同名的标签所以这个方法获到的是对象集合，如果需要使用其中一个节点需要加上下标签来使用。

通过Name值来获取节点对象
格式: docounet.getElementsByName(name值)

通过Class名来获取节点对象
格式： document.getElementsByClassName(Class名)

得到的是ELement对象所以可以使用Element的属性与方法。
注意是里Element里的节点（Node）又成了ElementNode与TextNode

JavaScript的事件绑定与触发

JS事件就是可以为页面中的元素绑定一些指的事件。通过这些事件触发，我们去执行指定的语句。

JS功能开发流程：
一、功能流程：
功能流程就是指用户在使用该功能的过程。
比如计算器的功能流程：
1、用户需要在数字1与数字2的输入的地方填入数字
2、用户会根据自己要需要选择一个运算方法的按钮去点击
3、用户会在显示结果的地方看到两个数字按要求运算后的结果

二、数据流程：
数据流程指就是程序上按照功能流程下来应该执行的流程。
比如计算器的数据流程：
1、获取数字1与数字2用户输入的值
2、得到用户选择运算方法
3、把得到数字1跟数字2使用运算方法进行运算并得到结果
4、把结果输出到页面指定的位置上

所有JS功能的基本步骤：
1、获取：指的是根据功能要求获取用户输入的信息或者是系统中的信息
2、处理：指的是根据功能要求把获取的数据进行处理
3、反馈：指的是根据功能要求把处理好的结果反馈给用户或才服务器

小知识点：
字符串转换成数字的方法：
1、使用函数parseFloat()或者parseInt()
2、使用强制转型 Number()
3、使用运算来转型 *1

关键字this是指对象本身。

逻辑运算符

! 逻辑非，返回当前值的反值
&& 逻辑与，当符号两边的值同时为true时才返回true
|| 逻辑或，当符号两边的值只要有一个为true时就返回true
PS: 逻辑运算符中同样有着优先顺序。

例子：
!true && true => false
!true || true => true
!(true || true ) => false
True && false || true && true => true
True || false && true || false => true

JavaScript定时器

setTimeout 等待指定的时间后执行语句，返回当前定时器的ID
setInterval 周期性的执行语句，返回当前定时器的ID

clearTimeout 清除setTimeout定时器，需要传入指定时器ID为参数
clearInterval 清除setInteravl定时器，需要传入指定时器ID为参数