1.JS写作标准
JS严格区分大小写
Js中每一条语句以分号结尾
忽略空格，换行
注意大括号{}后不能加分号
使用 {} 来代替 new Object()
使用 “” 来代替 new String()
使用 0 来代替 new Number()
使用 false 来代替 new Boolean()
使用 [] 来代替 new Array()
使用 /()/ 来代替 new RegExp() //正则表达式
使用 function (){}来代替 new Function()
2.字面量
都是不可变的量，都是可以直接使用的，即常量
var 声明变量
var a;
a = 123;
var b = 789;
3.标识符
不能以数字开头
不能是JS中的关键字或保留字
命名规则
驼峰命名（单词首字母大写）
关键字：
| break | do | instanceof | typeof | case |
|---|---|---|---|---|
| else | new | var | catch | finally |
| return | void | continue | for | switch |
| while | default | if | throw | delete |
| in | try | function | this | with |
| debugger | false | true | null |
保留字符：
| class | enum | extends | super | const | export |
|---|---|---|---|---|---|
| import | implements | let | private | public | yield |
| interface | package | protected | static |
4.转义字符:\
\"表示 "
\n表示换行
\t制表符
\\表示\
5.数据类型：
数据类型指的就是字面量的类型，在JS中一共有六种数据类型：
String字符串，Number数值，Boolean布尔值，Null空值，Undefined未定义，object对象
基本数据类型：
string，number，Boolean，null，undefined
JS中的变量都是保存在内存中的，基本数据类型的值直接在栈内存中存储，
值与值之间是相互独立存在的，修改一个变量不会影响其他的变量
例如：此代码输出a变量为124，输出B变量依然为123
var a = 123;
var b = a;
a++
引用数据类型：object
对象是保存在堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象的引用，当一个通过一个变量修改属性时，另一个也会受到影响
（0x123为引用地址做变量值）
注意：单独修改变量值不会对另一个变量产生影响。例如：obj2=null,obj2变为null,但obj不变
当我们比较两个基本数据类型时，就是比较值
而比较两个引用数据类型时，它是比较的对象的内存地址，如果两个对象是一模一样的，但是地址不同，它也会返回false
例：
var obj3 = new Object();
var obj4 = new Object();
obj3.name="shs";
obj4.name="shs";
console.log(obj3 == obj4) //结果为false
有三种对象类型
- 对象（Object）
- 日期（Date）
- 数组（Array）
Typeof：typeof:检查变量类型
Number.MAX_VALUE //JS中可以表示得数字最大值
Infinity正无穷
Number.MIN_VALUE //零以上得最小值
**constructor **属性返回所有 JavaScript 变量的构造器函数。
"Bill".constructor // 返回 "function String() { [native code] }"
(3.14).constructor // 返回 "function Number() { [native code] }"
false.constructor // 返回 "function Boolean() { [native code] }"
[1,2,3,4].constructor // 返回 "function Array() { [native code] }"
{name:'Bill', age:62}.constructor // 返回" function Object() { [native code] }"
new Date().constructor // 返回 "function Date() { [native code] }"
function () {}.constructor // 返回 "function Function(){ [native code] }"
Boolean
布尔值，只有两个值主要做逻辑判断
true和false表真假
var bool = true;
null
专门用来表示为空的对象
输出
1.innerHTML
如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
2.document.write()
一般用于测试
注意：在HTML文档完全加载后使用document.write()将删除所有已有的HTML
3.alert警告框
4.console.log()
6.强制类型转换
6.1 String类型转换
1.toString()方法
调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回
var a = 123;
//调用a的toString()方法
//调用xxx的yyy()方法，就是xxx.yyy()
var b = a.toString();
以上方法适用于String Number Boolean
null和undefined这两个值没有toString()方法，调用出错
2.调用string（）函数 //适用于所有数据类型
a = String(a);
调用String()函数，并将被转换的数据作为参数传递给函数
使用String( )函数做强制类型转换时，对于Number和Boolean实际上就是调用的tostring( )方法，但是对于null和undefined，就不会调用toString( )方法，它会将null直接转换为"null"，将undefined直接转为"undefined"
6.2 number类型转换
1.使用Number()函数
使用Number()函数
-字符串–>数字
*如果是纯数字的字符串，则直接将其转换为数字
*如果字符串中有非数字的内容，则转换为NaN
*如果字符串是一一个空串或者是一一个全是空格的字符串，则转换为0
2.使用+号
6.3将其它数据类型转换成Boolean
1.使用Boolean( )函数
-数字—>布尔
除了0和NaN，其余的都是true
字符串—>布尔
除了空串，其余的都是true
null和undefined都会转换为false
对象也会转换为true
2.隐式类型转换
为任意的数据类型做两次非运算，即可将其转换为布尔值
例子:
var a = "hello";
a = !!a; //true
3.进制表示
八进制0开头，二进制0b开头，十六进制0x开头
可以在parseInt()中传递一个第二个参数，来指定数字的进制
a=parseInt(a,10);//指定十进制
4.运算符
运算符也叫操作符
通过运算符可以对一个或多个值进行运算，并获取运算结果
比如: typeof就是运算符， 可以来获得一个值的类型，它会将该值的类型以字符串的形式返回
number string boolean undefined object
1.算数运算符
当对非Number类型的值进行运算时，会将这些值转换为Number然后在运算
任何值和NaN做运算都得NaN
2."+"
+可以对两个值进行加法运算，并将结果返回
如果对两个字符串进行加法运算，则会做拼串
会将两个字符串拼接为一个字符串，并返回
任何值和字符串相加都会转换为字符串，并作拼串操作
可以利用这一 特点，来将-一个任意的数据类型转换为String
只需要为任意的数据类型+一个“ ”即可将其转换为String类型，这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String()
var C = 123;
C = C + "";
对于非Number类型的值，它会将先转换为Number,然后再运算
可以对一个其他的数据类型使用+,来将其转换为number，它的原理和Number()函数一样
5.自增自减
a++自增前的值，但a更新为+1，例如a = 20，a++,a++ = 20,a=21
++a自增后的新值
自减：a- -变量原值
- -a变量新值
6.与或非
或运算：
第一个值为false，则会检查第二个值 false || alert(“123”);
第一个值为true，则不再检查第二个值 true || alert(“123”);
&& || 非布尔值的情况：
对于非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，并且返回原值
与运算:
如果第一个值为true,则必然返回第二个值
如果第一个值为false,则直接返回第一个值
或运算
如果第一个值为true,则直接返回第一个值
如果第一个值为false,则返回第二个值
Unicode编码
在字符串中使用转义字符输入Unicode编码
\u四位编码
console.1og("\u2620");//十六进制
在网页中使用Unicode编码
&#编码 //这里的编码需要的是10进制
<h1 style="font-size:200px;">☠</h1>
<h1 style="font-size:200px;">⚀</h1>
相等==
undefined 衍生自null，所以这两个值做相等判断时，会返回true
NaN不和任何值相等，包括他本身
可以通过isNaN( )函数来判断一个值是否是NaN，如果该值是NaN则返回true,否则返回false
console.log(isNaN(b));
相等运算符用来比较两个值是否相等，如果相等会返回true，否则返回false
使用==来做相等运算
-当使用==来比较两个值时， 如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后再比较
不相等
不相等用来判断两个值是否不相等，如果不相等返回true,否则返回false
-使用!=来做不相等运算
不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
===
全等
-用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换
如果两个值的类型不同，直接返回false
!= =
不全等
用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换
如果两个值的类型不同，直接返回true
| 运算符 | 描述 | 比较 | 返回 |
|---|---|---|---|
| == | 等于 | x == 8 | false |
| x == 5 | true | ||
| x == “5” | true | ||
| === | 值相等并且类型相等 | x === 5 | true |
| x === “5” | false | ||
| != | 不相等 | x != 8 | true |
| !== | 值不相等或类型不相等 | x !== 5 | false |
| x !== “5” | true | ||
| x !== 8 | true | ||
| > | 大于 | x > 8 | false |
| < | 小于 | x < 8 | true |
| >= | 大于或等于 | x >= 8 | false |
| <= | 小于或等于 |
7.条件运算符
条件运算符也叫三元运算符
语法:
条件表达式?语句1:语句2;
-执行的流程:
条件运算符在执行时，首先对条件表达式进行求值，如果该值为true,则执行语句1，并返回执行结果;
如果该值为false,则执行语句2，并还回执行结果
如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值然后在运算
8.流程控制语句
If
While
//创建一个循环，往往需要三个步骤
//1.创初始化-一个变量
vari=1;
//2.在循环中设置一个条件表达式
while(i <= 5000){
//3.定义一个更新表达式，每次更新初始化变量
document .write(i++ +"<br />")
do while
执行流程:
do… . while语句在执行时，会先执行循环体，循环体执行完毕以后，在对while后的条件表达式进行判断，如果结果为true,则继续执行循环体，
执行完毕继续判断以此类推,
如果结果为false，则终止循环;
实际上这两个语句功能类似，不同的是while是先判断后执行，而do… . while会先执行后判断，
do…while可以保证循环体至少执行一次，而while不能.
9.prompt()输入文本
prompt( )可以弹出一个提示框，该提示框中会带有一个文本框，用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，该字符串将 会作为提
示框的提示文字，用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容
var score = prompt( ”请输入小明的期末成绩:");
prompt返回值是string类型
可以在prompt前加上+，就可以将输入数值转换成number类型
var num1 , num2，num3 ;
num1 = +prompt("请输入第一个整数: ")
num2 = +prompt("请输入第二个整数: ")
num3 = +prompt("请输入第三个整数 ")
switch(true){
case score >= 60:
console.log("合格");
break;
default:
console.log("不合格");
break;
}
Document.write()是直接写在网页里的，所以换行符用
（相当于使用html语法）
//向页面中输出连续的数字
document.write(1+"<br />");
document.write(2+"<br />");
document.write(3+"<br />");
document.write(4+"<br />");
输出质数练习
//创建一个变量来保存当前的数的状态
//默认当前num是质数
var flag = true;
//判断num是否是质数
//获取2-num之间的数
for(var i=2 ; i<num ; i++){
//console.1og(i);
//判断num是否能被i整除
if(num % i == 0){
//如果num能被i整除，则说明num- - 定不是质数
//设置flag为false
flag = false;
}
}
//如果num是质数则输出
if(flag){
alert(num +"是质数! !");
}
10.外层循环决定图形高度，内层循环决定图形宽度
（九九乘法表也可以看做图）
for(var i = 1;i < 10;i++){
for(var j = 1;j <= i;j++){
document.write(j +""+ i +"="+ji+" ");
}
document.write("
");
}
Document.write()可以使用span更改样式
span样式可以在样式表里更改（注意span是行内元素，应使用display：inline-block；才能使设置生效）
Break关键字可以用来退出switch或循环语句，break只对离它最近的循环起作用
switch循环
Switch case 使用严格比较（===）,值必须与要匹配的类型相同。
只有操作数属于同一类型时，严格比较才能为 true。
var x = "0";//值不匹配
switch (x) {
case 0:
text = "Off";
break;
case 1:
text = "On";
break;
default:
text = "No value found";
}
11.标签
可以为循环语句创建一个label，来表示当前的循环
Label：循环语句（label可以是任意值）
例如：次嵌套循环名为outer
outer :
for(var i=θ ; i<5 ; i++){
console.log("@外层循环"+i)
for(var j=0 ; j<5; j++){
console.1og( "内层循环:"+j);
}
}
使用break语句时，可以在break后跟着一个label，这样break将会结束指定的循环而不是最近循环
例如：
outer :
for(var i=θ ; i<5 ; i++){
console.log("@外层循环"+i)
for(var j=0 ; j<5; j++){
break outer;
console.1og( "内层循环:"+j);
}
}
12.Continue
Continue关键字可以用来跳过当次循环，只对最近的循环产生影响，可以在后面加label跳过指定循环
13.Math.sqrt()
可以通过Math.sqrt()对一个数进行开方
14.object
对象属于一种复合得数据类型，在对象中可以保存多个不同的数据类型
对象的分类
1.内建对象
由ES标准中定义的对象
2.宿主对象
由JS的运行环境提供的对象，目前来讲主要是由浏览器提供的对象
比如BOM DOM
3.自定义对象
由开发人员自己创建的对象
==**3.1使用new关键字调用的函数，是构造函数constructor**==（构造函数是专门用来创建对象的函数 ）
使用typeof检查一个对象时，会返回object
var obj = new Object();
3.2在对象中保存的值称为属性
对象的属性值可以是任何的数据类型
向对象添加属性
语法：对象.属性名 = 属性值；
obj.name = "sunwukong"
obj.gender = "man"
obj.age = 18;
var obj = new Object();
//向对象中添加属性
obj.name = "孙悟空";
obj.age = 18;
//对象的属性值可以是任何的数据类型，也可以是个函数
obj.sayName = function(){
console.1og(obj.name) ;
};
//console.1og( obj . sayName);
obj.sayName( );
函数也可以称为对象的属性，如果一个函数作为一个对象的属性保存，那么我们称这个函数时这个对象的方法,调用这个函数就说调用对象的方法( method)
但是它只是名称上的区别没有其他的区别
obj.sayName( );//调方法
fun();//调函数
3.3读取对象中的属性
语法：对象.属性名
如果读取对象中没有的属性，不会报错而是会返回undefined
console.log(obj.name);
3.4修改对象的属性
语法：对象.属性名 = 新值
obj.name = "tom";
3.5删除对象属性
语法：delete 对象.属性名
delete obj.name;
3.6属性名，属性值
3.6.1属性名
如果要使用特殊的属性名，不能采用==.==的方式来操作需要
使用另一种方式:
语法:
对象[“属性名”] =属性值
读取时也需要采用这种方式
使用==[]==这种形式去操作属性，更加的灵活，
在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性
obj["123"] = 789;
var n = "123";
console.log(obj[n])//控制台输出789
3.6.2属性值
JS的属性值，可以是任意的数据类型，甚至也可以是一个对象
//创建一个对象
var obj2 = new Object();
obj2.name = "猪八戒";
//将obj2设置为obj的属性
obj.test = obj2;
console.1og(obj. test.name);
15.in运算符
通过该运算符可以检查一个对象中是否含有指定的属性
如果有则返回true，没有则返回false
语法：“属性名” in 对象
//检查obj中是否含有test 2属性
//console.1og("test2" in obj) ;
console.1og("name" in obj) ;
16.对象字面量
使用对象字面量来创建一个对象
var obj = {};//等于var obj = Object();
var obj = {
name:"zhubajie",
age:28
}; //同时指定属性,注意大括号内属性尾端不能加分号
var obj = {
name:"zhubajie",
age:28
test:{name:"shaheshang"}
};
console.log(obj.test)//输出shaheshang
17.函数
函数也是一个对象
函数中可以封装一些功能（代码），在需要时可以执行这些功能
函数中可以保存一些代码，在需要的时候调用
使用typeof检查一个函数对象时，会返回Function
1.创建函数//不常用
var fun = new Function();
2.常用：使用函数声明来创建一个函数
语法：function 函数名（[形参1，形参2…形参N]）{
语句。。。
}
//==[]==代表可选可不选，即可写可不写
例：
function fun(){
console.log("lalala");
alert("hhhhh");
}
fun(); //调用函数
function sum(a,b){ //声明形参，但不赋值
console.log(a+b);
}
//在调用函数时，可以在（）中指定实参，实参会赋值给函数中对应的形参
sum(1，2);
//调用函数时解析器不会检查实参的类型，注意是否接收非法参数，可能则需对参数进行类型检查
//解析器也不会检查实参的数量，多余实参不会被赋值
//如果实参的数量少于形参的数量，则没有对应形参的实参将是undefined
//函数的实参可以是任意的数据类型
3.使用函数表达式创建函数
var fun2 = function(){
console.log("我是匿名函数中封装的代码");
};
fun2;
18.返回值
可以使用return来设置函数的返回值
{
对象使用break可以退出当前的循环
continue用于跳过当次循环
使用return可以结束整个函数
}
语法：
return 值
return后的值将会作为函数的执行结果返回，可以定义一个变量来接收该结果
function sum(a,b,c){
var d = a + b + c;
return d;
}
var result = sum(5,6,7); // 变量result的值就是函数的执行结果,在函数中return后的函数都不再执行
如果return语句后不跟任何值就相当于返回一个undefined,
如果函数中不写return，则也会返undefined,
return后可以跟任意类型的值==
//定义一个函数，判断一个数字是否是偶数，如果是返回true,否则返回false
function isou(num){
return num%2 == 0;
}
var result = isOu(15);
console.1og("result = "+result) ;
实参可以是任意的数据类型，也可以是一个对象，也可以是一个函数
当我们参数过多时，可以将参数封装到一个对象中，然后通过对象传递
注意：
sum();//-调用函数，相当于使用函数的返回值
sum;
//-函数对象，相当于直接使用函数
function fun3(){
//在函数内部再声明一个函数
function fun4(){
alert("我是fun4");
}
//将fun4函数对象作为返回值返回
return fun4;
}
a = fun3();
//console.1og(a);
//a();
fun3()();//调用fun4(),直接输出“我是fun4“
19.立即执行函数
函数定义完，立即被调用，这种函数叫做立即执行函数
立即执行函数往往只会执行一次
(function(){
alert("我是一一个匿名函数~~~");
})();
20.枚举对象中的属性
使用 for…in 语句
语法:
for(var 变量 in 对象){
}
for… .in语句对象中有几个属性，循环体就会执行几次，每次执行时，会将对象中的一个属性的名字赋值给变量
for(var n in obj){
console.1og("属性名:"+n);
console.1og("属性值:"+obj[n]);
}
21.作用域
作用域指一个变量的作用的范围
在JS中一共有两种作用域:
1.全局作用域
-直接编写在script标签中的IS代码，都在全局作用域
全局作用域在页面打开时创建，在页面关闭时销毁。
在全局作用域中有一个全局对象window,
它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用
-在全局作用域中:
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存
全局作用域中的变量都是全局变量，在页面的任意部分都可以访问的到
2.函数作用域
*调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
*每调用一次函数就会创建一个 新的函数作用域，他们之间是互相独立的
*在函数作用域中可以访问到全局作用域的变量
在全局作用域中无法访问到函数作用域的变量
*当在函数作用域操作一个变量时， 它会先在自身作用域中寻找，如果有就直接使用，如果没有则向上一级作
用域中寻找，如果全局作用域中依然没有找到，则会报错ReferenceError
*在函数中要访问全局变量可以使用window对象
在函数作用域也有声明提前的特性，使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
函数声明也会在函数中所有的代码执行之前执行
在函数中，不使用var声明的变量都会成为全局变量
定义形参就相当于在函数作用域中声明了变量
function fun6(e){
alert(e) ;
}
fun6();
22.声明提前
1.变量的声明提前
使用var关键字声明的变量， 会在所有的代码执行之前被声明(但是不会赋值)，但是如果声明变量时不使用var关键字，则变量不会被声明提前
2.函数的声明提前
使用函数声明形式创建的函数function函数( ) { }它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数
函数表达式创建的函数，不会被声明提前，所以不能在声明前调用
//函数声明，会被提前创建
function fun( ){
console.1og( "我是一个fun函数" );
}
//函数表达式，不会被提前创建
var fun2 = function(){
console.1og( "我是fun2函数");
};
23.this
解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this, this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象
1.以函数的形式调用时，this永远都是window
2.以方法的形式调用时，this就是调用方法的那个对象
3.当以构造函数的形式调用时，this就是新创建的那个对象
- 在方法中，this 指的是所有者对象。
- 单独的情况下，this 指的是全局对象。
- 在函数中，this 指的是全局对象。
- 在函数中，严格模式下，this 是 undefined。
- 在事件中，this 指的是接收事件的元素。
像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。
在对象方法中，this 指的是此方法的“拥有者”。
function fun(){
console,log(this.name);
}
//创建两个对象
var obj1 = {
name:"swk"
sayname:fun
};
var obj2 = {
}
24.使用工厂方法创建对象
批量创建对象
function createPerson(name,age,gender){
//创建一个新的对象
var obj = new object();
//向对象中添加属性
obj.name= name;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){ //给属性添加方法
alert(this.name) ;
};
//将新的对象返回
return obj;
}
var obj2 = createPerson("猪八戒",28,"男");
var obj3 = createPerson("白骨精",16,"女");
var obj4 = createPerson("蜘蛛精",18,"女");
obj3.sayName();//输出“白骨精”
25.构造函数
使用工厂方法创建的对象，使用的构造函数都是0bject，所以创建的对象都是0bject这个类型，就导致我们无法区分出多种不同类型的对象
创建一个构造函数，专门门用来创建Person对象的，构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写
构造函数和普通函数的区别就是调用方式的不同
普通函数是直接调用，而构造函数需要使用new关键字来调用
function Person(){
}
var per = new Person();
console.log(per);
构造函数的执行流程:
//1.立刻创建一个新的对象
//*2.将新建的对象设置为函数中this ,在构造函数中可以使用this来引用新建的对象*
//3.逐行执行函数中的代码
//*4.将新建的对象作为返回值返回*
function Person(name ,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
alert (this.name);
};
}
var per = new Person("name","age","gender");
使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。
我们将通过一个构造函数创建的对象，称为是该类的实例
制造函数Person()称为类，函数的对象per称为Person类的实例
使用instanceof可以检查一个对象是否是一个类的实例
语法:
对象 instanceof 构造函数
如果是，则返回true,否则返回false
console.log(per instanceof Person);
创建一个Person构造函数
-在Person构造函数中，为每一 个对象都添加了一个sayName方法，目前我们的方法是在构造函数内部创建的，也就是构造函数每执行一次就会创建一个新的sayName方法，也是所有实例的S ayName都是唯一的。这样就导致了构造函数执行一次就会创建一个新的方法，执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的，这是完全没有必要，完全可以使所有的对象共享同一个方法
将函数定义在全局作用域中（污染全局作用域，不安全）
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
//向对象中添加一个方法
this.sayName = fun;
}
//将sayName方法在全局作用域中定义
function fun(){
alert("He11o大家好，我是: "+this.name);
};
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",28,"男");
per.sayName( );
constructor()
构造函数（Constructor）在对象创建或者实例化时候被调用的方法。通常使用该方法来初始化数据成员和所需资源。构造器Constructor在js不能被继承，因此不能重写Overriding，但可以被重载Overloading
对象的constructor 属性用于返回创建该对象的函数，也就是我们常说的构造函数 。
在JavaScript中，每个具有原型的对象都会自动获得constructor属性。除了arguments、Enumerator、Error、Global、Math、RegExp、Regular Expression等一些特殊对象之外，其他所有的JavaScript内置对象都具备constructor属性。例如：Array、Boolean、Date、Function、Number、Object、String等。所有主流浏览器均支持该属性
26.原型prototype
prototype
我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype,这个属性对应着一个对象，这个对象就是我们所谓的原型对象，如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过_ _proto__来访问该属性
原型对象就相当于一一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用
以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了
function MyClass(){
}
//向MyClass的原型中添加属性a
MyClass.prototype.a = 123;
//向MyClass的原型中添加一个方法
MyClass.prototype.sayHe1lo = function(){
alert("hel1o");
};
var mc = new MyClass();
mc.sayHello();
原型对象也是对象，所以它也有原型，当我们使用一个对象的属性或方法时，会现在自身中寻找，自身中如果有，则直接使用，如果没有则去原型对象中寻找，如果原型对象中有，则使用，如果没有则去原型的原型中寻找，直到找到Object对象的原型，object对象的原型没有原型，如果在Object中依然没有找到，则返undefined
console.1og(mc.__ proto__.__ proto__.hasOwnProperty("hasOwnProperty")
27.垃圾回收
垃圾回收(GC)
就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾，这些垃圾积攒过多以后，会导致程序运行的速度过慢，所以我们需要-个垃圾回收的机制，来处理程序运行过程中产生垃圾
-当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾， 这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作
我们需要将不再使用的对象设置为null ：obj = null
28.数组
1.数组(Array)
数组也是一个对象
它和我们普通对象功能类似，也是用来存储一些值的，不同的是普通对象是使用字符串作为属性名的，
而数组时使用数字来作为索引操作元素
Array.isArray() ：isArray() 方法检查对象是否为数组
索引:
从0开始的整数就是索引
数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据
//创建数组对象
var arr = new Array();
//使用typeof检查一个数组时， 会返回object
console.log(typeof arr);
//向数组中添加元素
//语法:数组[索引] =值
arr[0] = 10;
arr[1] = 33;
arr[2] = 22;
//读取数组中的元素
//语法:数组[索引],如果读取不存在的索引，他不会报错而是返回undefined
console.log(arr[1]);
获取数组的长度：length（元素个数）–设置或返回数组长度
语法：数组.length
对于连续的数组，使用length可以获取到数组的长度(元素的个数)，对于非连续的数组，使用length会获取到数组的最大的索引+1
修改length： arr.length = 10;
如果修改的length大于原长度，则多出部分会空出来
若小于原长，则多出的元素会被删除
//向数组的最后一个位置添加元素
arr[arr.length ]=70;
使用字面量构建数组（常用）
//使用字面量创建数组时，可以在创建时就指定数组中的元素
var arr=[1,2,3,4,5,10];
//console.1og(arr[3]);
//使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递
//元素之间使用,隔开
var arr2_ = new Array(10,20,30);
console.1og(arr2);
//创建一个数组数组中只有一个元素10
arr = [10];
//创建一个长度为10的数组
arr2 = new Array(10);
数组中的元素可以是任意的数据类型
arr = ["hel1o",1, true, null，undefined];
也可以是对象
var obj = {name:"孙悟空"};
arr[arr.1ength] = obj;
arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];
console.1og(arr[1]. name);//输出结果：孙悟空
也可以是函数
arr = [function(){alert(1)}, function(){alert(2)}];
arr[0]();//调用第一个函数
数组中也可以放数组，称为二维数组
2.数组的方法
push()
该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾
该方法会将数组新的长度作为返回值返回
arr.push("元素1","元素2","元素3");
pop()
该方法可以删除数组的最后一个元素，每调用一次删除一次，并将被删除的元素作为返回值返回
unshift()
向数组开头添加一个或多个元素，并返回新的数组长度
向前边插入元素以后，其他的元素索引会依次调整
shift()
可以删除数组的第一 个元素，并将被删除的元素作为返回值返回
3.数组的遍历
for(var i=0,i<arr.length,i++){
console.1og(arr[i]);
}
29.日期
var d = new Date();
日期格式化
JavaScript ISO 日期
ISO 8601 是表现日期和时间的国际标准。
ISO 8601 语法 (YYYY-MM-DD) 也是首选的 JavaScript 日期格式
ISO 日期（年和月）
写日期也可以不规定具体某日 (YYYY-MM)
ISO 日期（只有年）
写日期也可以不规定具体的月和日 (YYYY)
ISO 日期（完整的日期加时、分和秒）
写日期也可以添加时、分和秒 (YYYY-MM-DDTHH:MM:SS)
日期和时间通过大写字母 T 来分隔。
UTC 时间通过大写字母 Z 来定义。
如果您希望修改相对于 UTC 的时间，请删除 Z 并用 +HH:MM 或 -HH:MM 代替
var d = new Date("2018-02-19T12:00:00-08:30");
JavaScript 短日期
短日期通常使用 “MM/DD/YYYY” 这样的语法
var d = new Date("02/19/2018");
JavaScript 长日期
长日期通常以 “MMM DD YYYY” 这样的语法来写
月和天能够以任意顺序出现
逗号会被忽略，且对大小写不敏感
获取日期方法
| 方法 | 描述 |
|---|---|
| getDate() | 以数值返回天（1-31） |
| getDay() | 以数值获取周名（0-6） |
| getFullYear() | 获取四位的年（yyyy） |
| getHours() | 获取小时（0-23） |
| getMilliseconds() | 获取毫秒（0-999） |
| getMinutes() | 获取分（0-59） |
| getMonth() | 获取月（0-11） |
| getSeconds() | 获取秒（0-59） |
| getTime() | 获取时间（从 1970 年 1 月 1 日至今） |
设置日期方法
| 方法 | 描述 |
|---|---|
| setDate() | 以数值（1-31）设置日 |
| setFullYear() | 设置年（可选月和日） |
| setHours() | 设置小时（0-23） |
| setMilliseconds() | 设置毫秒（0-999） |
| setMinutes() | 设置分（0-59） |
| setMonth() | 设置月（0-11） |
| setSeconds() | 设置秒（0-59） |
| setTime() | 设置时间（从 1970 年 1 月 1 日至今的毫秒数） |
<script>
var d = new Date();
d.setFullYear(2020);//setFullYear() 方法可以选择设置月和日,d.setFullYear(2020, 11, 3);
document.getElementById("demo").innerHTML = d;
</script>
比较日期
var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2049, 0, 16);
if (someday > today) {
text = "今天在 2049 年 1 月 16 日之前";
} else {
text = "今天在 2049 年 1 月 16 日之后";
}
document.getElementById("demo").innerHTML = text;
30.Math 对象
Math.PI; // 返回 3.141592653589793
Math.round()
Math.round(x) 的返回值是 x 四舍五入为最接近的整数
Math.round(6.8); // 返回 7
Math.round(2.3); // 返回 2
Math.pow()
Math.pow(x, y) 的返回值是 x 的 y 次幂：
Math.sqrt()
Math.sqrt(x) 返回 x 的平方根：
Math.abs()
Math.abs(x) 返回 x 的绝对（正）值：
| 方法 | 描述 |
|---|---|
| abs(x) | 返回 x 的绝对值 |
| acos(x) | 返回 x 的反余弦值，以弧度计 |
| asin(x) | 返回 x 的反正弦值，以弧度计 |
| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
| atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度 |
| ceil(x) | 对 x 进行上舍入 |
| cos(x) | 返回 x 的余弦 |
| exp(x) | 返回 Ex 的值 |
| floor(x) | 对 x 进行下舍入 |
| log(x) | 返回 x 的自然对数（底为e） |
| max(x,y,z,…,n) | 返回最高值 |
| min(x,y,z,…,n) | 返回最低值 |
| pow(x,y) | 返回 x 的 y 次幂 |
| random() | 返回 0 ~ 1 之间的随机数 |
| round(x) | 把 x 四舍五入为最接近的整数 |
| sin(x) | 返回 x（x 以角度计）的正弦 |
| sqrt(x) | 返回 x 的平方根 |
| tan(x) | 返回角的正切 |
Math.random() 与 Math.floor() 一起使用用于返回随机整数。
Math.floor(Math.random() * 10); // 返回 0 至 9 之间的数
Math.floor(Math.random() * 11); // 返回 0 至 10 之间的数
Math.floor(Math.random() * 100); // 返回 0 至 99 之间的数
Math.floor(Math.random() * 10) + 1; // 返回 1 至 10 之间的数
返回介于 min（包括）和 max（不包括）之间的随机数：
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min) ) + min;
}
返回介于 min 和 max（都包括）之间的随机数:
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
31.正则表达式
正则表达式是构成搜索模式的字符序列。
该搜索模式可用于文本搜索和文本替换操作。
/pattern（正则表达式）/modifiers（匹配模式）;
//实例
var patt = /w3school/i; //w3school 是模式（pattern）（在搜索中使用）,i 是修饰符（把搜索修改为大小写不敏感）。
语法：
量词
通过量词可以设置一个内容出现的次数
{n}正好出现n次
{m,n}出现m-n次
{m,} m次以上
+: 至少一个，相当于{1,}
*: 0个或多个，相当于{0,}
?: 0个或1个，相当于{0,1}
正则表达式中使用\作为转义字符
var reg = /a{3}/;//连续出现三次
reg = /(ab){3}/; //ab连续出现三次
reg = /ab{3}c/; ac中间三个b
reg =/ab{1,3}c/; ac中间出现一个b，两个b或三个b都为true
检查一个字符串中是否以a开头
^ 表示开头
$表示结尾
如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
reg = /^a/ ; //以a开头字符串
reg = /a$/ ; //以a结尾
reg = /^a$/; // 只有单独的a才是true
/a|b/; //检查是否有a或b
[ ]里的内容也是或的关系
[ab] == a|b
[a-z]任意小写字母
[A-Z]任意大写字母
[A-z]任意字母
练习：创建一个正则表达式，用来检查一个字符串是否是一 个合法手机号
手机号的规则:13 567890123 (11位)
1.以1开头 ---->^1
2.第二位3-9任意数字 ---->[3-9]
3.三位以后任意数字9个 ---->[0-9]{9}$
var phoneReg = /^1[3-9][0-9]{9}$/ ;
31.1使用字符串方法
search() 方法使用表达式来搜索匹配，然后返回匹配的位置。
==replace() ==方法返回模式被替换处修改后的字符串。
//使用字符串搜索
var str = "Visit W3School!";
var n = str.search("W3School");
//使用正则表达式搜索
var str = "Visit W3School";
var n = str.search(/w3school/i);
//使用字符串方法 replace() 处理字符串
var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "W3School");
//在字符串方法 replace() 中使用正则表达式
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3School"); //用w3School替换句中的microsoft
31.2正则表达式修饰符
可以为一个正则表达式设置多个匹配模式，且顺序无所谓，即多个修饰符连用
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
31.3 test()
test() 是一个正则表达式方法。
它通过模式来搜索字符串，然后根据结果返回 true 或 false。
reg = /a|b/; //检查是否有a或b
//[ ]里的内容也是或的关系
//[ab] == a|b
//[a-z]任意小写字母
//[A-Z]任意大写字母
//[A-z]任意字母
reg = /[A-z]/
//检查一个字符串中是否含有abc或adc或aec
reg = /a[bde]c/
//[^ ]除了
reg = /[^ab]/; //"除了ab以外"，abc返回true
//[0-9]表示任意数字
//[^0-9]除了任意数字，全是数字返回false
31.4 exec()
exec() 方法是一个正则表达式方法。
它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。
如果未找到匹配，则返回 null。
/e/.exec("The best things in life are free!");
31.5 split()
-可以将一个字符串拆分为一个数组
-方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
31.6 match( )
可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
默认情况下我们的match只会找到第一个符合 要求的内容，找到以后就停止检索，可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容，使用g
可以为一个正则表达式设置多个匹配模式，且顺序无所谓
32. JavaScript 错误 - Throw 和 Try to Catch
try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。
try {
供测试的代码块
}
catch(err) {
处理错误的代码块
}
finally {
无论 try / catch 结果如何都执行的代码块
}
Error 对象
| 属性 | 描述 |
|---|---|
| name | 设置或返回错误名 |
| message | 设置或返回错误消息（一条字符串） |
33. Use Strict
use strict"; 定义 JavaScript 代码应该以“严格模式”执行。
在脚本开头进行声明，拥有全局作用域（脚本中的所有代码均以严格模式来执行）
在函数中声明严格模式，拥有局部作用域（只有函数中的代码以严格模式执行）
严格模式使我们更容易编写“安全的” JavaScript。
严格模式把之前可接受的“坏语法”转变为真实的错误。
34. Let和const
在 ES2015 之前，JavaScript 是没有块作用域的。
这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。
let
使用 var 关键字重新声明变量会带来问题。
在块中重新声明变量也将重新声明块外的变量
var x = 10;
// 此处 x 为 10
{
var x = 6;
// 此处 x 为 6
}
// 此处 x 为 6
使用 let 关键字重新声明变量可以解决这个问题。
在块中重新声明变量不会重新声明块外的变量：
var x = 10;
// 此处 x 为 10
{
let x = 6;
// 此处 x 为 6
}
// 此处 x 为 10
循环作用域
在循环中使用 var：
var i = 7;
for (var i = 0; i < 10; i++) {
// 一些语句
}
// 此处，i 为 10
在循环中使用 let：
let i = 7;
for (let i = 0; i < 10; i++) {
// 一些语句
}
// 此处 i 为 7
如果在块外声明，那么var和let都拥有全局作用域。但是
使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。
在 HTML 中，全局作用域是 window 对象。
通过 let 关键词定义的全局变量不属于 window 对象
允许在程序的任何位置使用 var 重新声明 JavaScript 变量
在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的
var x = 10; // 允许
let x = 6; // 不允许
{
var x = 10; // 允许
let x = 6; // 不允许
}
在相同的作用域，或在相同的块中，
通过 let 重新声明一个 let 变量是不允许的
通过 var 重新声明一个 let 变量是不允许的
在不同的作用域或块中，通过 let 重新声明变量是允许的:
let x = 6; // 允许
{
let x = 7; // 允许
}
{
let x = 8; // 允许
}
const
通过 const 定义的变量与 let 变量类似，但不能重新赋值
const PI = 3.141592653589793;
PI = 3.14; // 会出错
PI = PI + 10; // 也会出错
在块作用域内使用 const 声明的变量与 let 变量相似。
var x = 10;
// 此处，x 为 10
{
const x = 6;
// 此处，x 为 6
}
// 此处，x 为 10
const 变量必须在声明时赋值
const PI;
PI = 3.14159265359; //错误写法
const PI = 3.14159265359; //正确写法
不是真正的常数
关键字 const 有一定的误导性。
它没有定义常量值。它定义了对值的常量引用。
因此，我们不能更改常量原始值，但我们可以更改常量对象的属性。
常量对象可以更改
可以更改常量对象的属性,但是无法重新为常量对象赋值：
// 可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};
// 可以更改属性：
car.color = "White";
// 可以添加属性：
car.owner = "Bill";
const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"}; // ERROR
35.DOM
Document Object Model 文档对象模型
节点
节点: Node–构成HTML文档最基本的单元。
常用节点分为四类
-文档节点:整个HTML文档
-元素节点: HTML文档中的HTML标签
-属性节点:元素的属性
-文本节点: HTML标签中的文本内容
事件
document.getElementById(“btn”);
通过id"btn"从文档上获取一个元素节点对象
innerHTML 获取元素内部的HTML代码，（即获取内容）对于自结束标签，这个属性没有意义
innerText 获取元素内部文本内容，和innerHTML类似，不同的是它会自动将html去除
如果需要读取元素节点属性，直接使用元素.属性名
但是，注意：class属性不能采用这种方式
读取class属性时需要使用 元素.className
<BUTTON id = "btn">
我是一个按钮
</BUTTON>
<script>
var btn = document.getElementById("btn"); //获取按钮对象
btn.onclick = function(){
alert(btn.innerHTML);
};
</script>
document.getElementsByTagName()
通过标签名获取一组元素节点对象
如需访问第二个元素节点，可以使用数组方式
（所有查询到的元素都会封装到类数组对象中，所以该对象可直接使用数组语法）
//为id为btn02的按钮绑定-个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查找所有li节点
//getElementsByTagName()可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个也会封装到数组中返回
var lis = document.getElementsByTagName("1i");//lis就是一个数组
//遍历lis
for(var i;i<lis.length;i++){
alert(lis[i].innerHTML);
}
};
document.getElementsByName()
通过name属性获取一组元素节点对象（此方法同样返回数组对象）
主要用来操作一些表单项目
可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用
//绑定一个单击事件
//像这种为单击事件绑定的函数，我们称为单击响应函数
btn.onclick = function(){
alert("我是一个按钮");
};
onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
window.onload = function(){
};
DOM查询
获取元素节点的子节点：
1.get.ElementByTagName()
-方法，返回当前节点的指定标签名后代节点
var city = document.getElementById("city");//city是一个ul标签id
var lis = city.getElementsByTagName("li");
2.childNodes
-属性，表示当前节点的第一个子节点
childNodes属性会获取包括文本节点在的所有节点，根据DOM标签，标签间空白也会当成文本节点
3.firstChild
-属性，表示当前节点的第一个子节点（包括空白文本节点）
4.lastChild
-属性，表示当前节点的最后一个子节点
获取父节点和兄弟节点
1.parentNode
-属性，表示当前节点的父节点
2.previousSibling
-属性，表示当前节点的前一个兄弟节点
3.nextSibling
-属性，表示当前节点的后一个兄弟节点
定义一个函数，专门用来为指定元素绑定单机响应函数
参数：
idStr 要绑定单击响应函数的对象的id属性值
fun 事件的回调函数，当单击元素时，该函数将会被触发
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
//为id为btn07的按钮绑定一个单击响应函数
myClick("btn07",function(){
//添加单击事件
})
body
在document中有一个属性body，它保存的是body的引用
var body = document.body;
html
document . documentElement保存的是html根标签
all
document. all代表页面中所有的元素
相当于document.getElementsByTagName("*");
class
根据元素的class属性值查询一组元素节点对象
getElementsByClassName()可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8以下浏览器，慎用（可用document.querySelector() )
var box1 = document.getElementsByClassName("box1");//获取类名为box1的元素
document.querySelector()
-需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
-IE8兼容
-使用该方法只会返回唯一的一个元素，如果满足条件的元素有多个，只会返回第一个
var div = document.querySelector(".box1 div");//获取class为box1的div
var box1 = document.querySelector(".box1"); //获取类名为box1的元素
document.querySelectorAll()
想获取全部元素使用document.querySelectorAll()，该方法会将符合条件的元素封装到一个数组中返回
即使符合条件的元素只有一个也会封装为数组返回
增删改
document.createElement();
-可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回
var li = document.createElement("li");//创建一个li标签
var div = document.createElement("div");//创建一个div,类似的可以创建ul,td等等
document.createTextNode()
-可以用来创建一个文本节点对象
-需要一个文本内容作为参数，将会根据内容创建文本节点，并将新的节点返回
var Text = document.createTextNode("输入文字");
appendChild()
-向一个父节点中添加一个新的子节点
-用法:父节点.appendChild(子节点);
li.appendChild(Text);
在id = city下添加一个li标签，并向li标签里面添加内容完整步骤：
//创建一个li标签
var li = document.createElement("li");
//创建文本节点
var Text = document.createTextNode("广州");
//将文本节点设置为li的子节点
li.appendChild(Text);
//获取id为city的节点
var city = document.getElementById("city");
//将li添加到city下
city.appendChild(li);
//以上方法不够简洁，推荐使用：
var li = document.createElement("li");
li.innerHTML = "广州";
city.appendChild(li);
insertBefore()
-可以在指定的子节点前插入新的子节点
-语法： 父节点.insertBefore（新节点，旧节点）；
replacechild()
-可以使用指定的子节点替换已有的子节点
-语法： 父节点.replacechild()（新节点，旧节点）；
removeChild( )
-可以删除一-个子节点
-语法:父节点.removeChild(子节点) ;
**常用 子节点.parentNode.removeChild(子节点)；**就不用了单独找父节点了。
DOM动画
1.创建动画容器
所有动画都应该与容器元素关联。
<div id ="container">
<div id ="animate">我的动画在这里。</div>
</div>
2.为元素添加样式
应该通过 style = “position: relative” 创建容器元素
应该通过 style = “position: absolute” 创建动画元素
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
3.动画代码
JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。
这种变化通过一个计数器来调用。当计数器间隔很小时，动画看上去就是连贯的。
var id = setInterval(frame, 5);
function frame() {
if (/* 测试是否完成 */) {
clearInterval(id);
} else {
/* 改变元素样式的代码 */
}
}
setInterval()
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：
setInterval(code,millisec[,"lang"])
| 参数 | 描述 |
|---|---|
| code | 必需。要调用的函数或要执行的代码串。 |
| millisec | 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。 |
返回值：
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数
onmousedown, onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。
首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。
DOM监听器
addEventListener() 方法
addEventListener() 方法为指定元素指定事件处理程序。方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
能够向一个元素添加多个事件处理程序。
能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。
能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。
removeEventListener() 方法轻松地删除事件监听器。removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序
语法：
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
**注意：**请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。
事件冒泡和事件捕获
使用DOM操作CSS
通过JS修改元素的样式
语法：元素.style.样式名 = “样式值”
box1.style.width = "500px"; //修改box1的宽度
注意：如果CSS样式名中含有减号“—”是不合法的，例如：background-color
需要将这种样式名修改为驼峰命名法，例如：border-top-width改为borderTopWidth
通过style属性设置的都是内联样式，因为内联样式的优先级比较高所以往往会立即显示
但是如果在样式中写了! important,则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加! important
读取元素样式：元素.style.样式名（通过style属性设置和读取的都是内联样式，无法读取样式表中的样式）
获取元素当前正在显示的样式
语法：元素.currentStyle.样式名(只有IE浏览器支持)（只读）
box1.currentStyle.width
在其他浏览器：
使用**getComputedStyle() **获取当前样式（只读）
需要两个参数：
1.要获取样式的元素
2.可以传递一个伪元素，一般为null
该方法会返回一个对象，对象中封装了当前元素对应的样式
可以通过对象. 样式名来读取样式。如果获取的样式没有设置，则会获取到真实的值，而不是默认值
比如:没有设置width,它不会获取到auto,而是一个长度（该方法不支持IE8及以下）
var obj = getComputedStyle(box1,null);
alert(obj.width);
//或者：
alert(getComputedStyle(box1,null).width);
定义一个函数，用来获取指定元素的当前样式
参数：
obj 要获取样式的元素
name 要获取的样式名
function getStyle(obj,name){
if(window.getComputedStyle){ //！！注意：不加window，getComputedStyle是一个变量名，他在函数里找不到回到全局作用域寻找，如果还找不到就会报错；加了window，它就变成对象的一个属性，属性找不到会返回undefined（变量和属性的区别）
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];//IE8及以下的方法
}
}
36.Window - 浏览器对象模型BOM
window对象
全局变量是window对象的属性
全局函数是window对象的方法
窗口尺寸
window.innerHeight; 浏览器窗口内高度
window.innerWidth; 浏览器窗口内宽度
浏览器窗口不包括工具栏和滚动条
或者：
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
window.screen
window.screen 对象包含用户屏幕的信息
window.screen 对象不带 window 前缀也可以写：
属性：
screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth
window.location
window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面
window.history
window.history 对象包含浏览器历史
history.back() -等同浏览器得后退按钮
history.forward() - 前进按钮
window.navigator
window.navigator 对象包含有关访问者的信息
navigator.appName属性返回浏览器的应用程序名称
navigator.appCodeName属性返回浏览器的应用程序代码名称
navigator.platform属性返回浏览器平台（操作系统）
js弹出框
警告框
确认框confirm（）：
如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。
var r = confirm("请按按钮");
if (r == true) {
x = "您按了确认！";
} else {
x = "您按了取消！";
}
提示框：prompt（）；
window.prompt("sometext","defaultText");
Timing事件
定时事件，window 对象允许以指定的时间间隔执行代码。这些时间间隔称为定时事件。
通过 JavaScript 使用的有两个关键的方法：
setTimeout(function, milliseconds)
-在等待指定的毫秒数后执行函数。
setInterval(function, milliseconds)
-等同于 setTimeout()，但持续重复执行该函数。
window.setTimeout(function, milliseconds);//第一个参数是要执行的函数。第二个参数指示执行之前的毫秒数。
//单击按钮，等待三秒，页面显示
<button onclick="setTimeout(myFunction, 3000)">试一试</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
clearTimeout() 方法停止执行 setTimeout() 中规定的函数。
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Cookies
在网页中存储用户信息
Cookie 是在计算机上存储在小的文本文件中的数据。
37.apply()和call()的区别和应用
JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法，这两个方法能够改变函数体内部 this 的指向。
二者的作用完全一样，只是接受参数的方式不太一样。
func.apply(thisArg, [argsArray])
func.call(thisArg, arg1, arg2, ...)
apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments)；即A对象调用B对象的方法。
call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2)；即A对象调用B对象的方法。
第一个参数指定了函数体内this对象的指向，他可以为任何一个 JavaScript 对象(JavaScript 中一切皆对象)，如果为null，则函数体内的this会指向默认的宿主对象，在浏览器中则是window。
第二个参数，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。
当你的参数不确定数量时用 apply ，然后把参数 push 进数组传递进去。或者也可以通过 arguments来获取所有的参数。这样看来，apply的使用率更高。
注意：
apply：最多只能有两个参数——新对象thisArg和一个数组[argsArray]。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果[argsArray]不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供[argsArray]和thisArg任何一个参数，那么Global对象将被用作thisArg，并且无法被传递任何参数。一般的，目标函数只需要n个参数列表，而不接收一个数组参数，可以通过apply的方式巧妙地解决这个问题【见apply妙用】。
call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisArg参数，那么Global对象将被用作thisArg。
call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。
用法：
function add(a, b) {
return a + b
}
function sub(a, b) {
return a - b
}
// sub调用add的方法，同 var a1 = add.call(sub, 1, 2)
var a1 = add.apply(sub, [1, 2])
// add调用sub的方法，同 var a2 = sub.call(add, 1, 2)
var a2 = sub.apply(add, [1, 2])
console.log(a1, a2)
输出：3 -1
基础继承：
function Animal(name) {
this.name = name
this.showName = function () {
console.log(this.name)
}
}
function Cat(name) {
// Cat调用Animal方法，同 Animal.call(this, name)
Animal.apply(this, [name])
}
var cat = new Cat('小猫')
cat.showName()
输出：
小猫
多重继承
function Func1() {
this.sub = function (a, b) {
console.log(a - b)
}
}
function Func2() {
this.add = function (a, b) {
console.log(a + b)
}
}
function Func3() {
// Func3调用Func1方法，同 Func1.call(this)
Func1.apply(this)
// Func3调用Func2方法，同 Func2.call(this)
Func2.apply(this)
}
var func = new Func3()
func.sub(1, 2)
func.add(1, 2)
输出：
-1
3
apply妙用1
var numbers = [5, 6, 1, 3, 7];
var max = Math.max.apply(null, numbers)
console.log(max)
var min = Math.min.apply(null, numbers)
console.log(min)
输出：
7 1
Math.max()方法，只能传递参数列表Math.max(param1, param2…)，不支持Math.max([param1, param2]) 。借助apply，我们可以将一个数组参数转换为一个参数列表([param1, param2…] 转换为 (param1,param2…)
apply妙用2
var arr1 = new Array("1","2","3")
var arr2 = new Array("4","5","6")
// push返回数组长度
Array.prototype.push.apply(arr1, arr2) // 等价于arr1.push("4","5","6")
console.log(arr1)
输出：
6
[“1”, “2”, “3”, “4”, “5”, “6”]
一些补充
setAttribute() 方法添加指定的属性，并为其赋指定的值。
setAttribute（“属性名”，“属性值”）
JS中使用key-value存取值
在代码中,遇到需要单独提取对象的key值时，
可使用 Object.keys(object)
object是你需要操作的对象，Object.keys()会返回一个存储对象中所有key值的数组
获取当前对象每个key对应的值使用 object[key]
//例子
var map = {};
map[1] = 1;
map[2] = 2;
console.log(map[1]);//结果是 1
console.log(map[2]);//结果是 2
//遍历map
for(var prop in map){
if(map.hasOwnProperty(prop)){
console.log('key is ' + prop +' and value is' + map[prop]);
}
}
key-value解释：
数组的键名是有序列的数字
对象的键名是自定义的
对象的成员变量的名字其实都是key,变量值就是value
比如：
name:take,
old:13
这个key就是指name和old，而值就是指take和13
把html语言中的超文本链接a看作为一个对象，那么href就是其中的一个键名，style也是其中的键，class，id等都算作是这个对象a里面的键名，而键值，就是href、style等号后面的了。
扫一扫
1738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
