一、简介
1、什么是JavaScript
JavaScript是一种具有面向对象能力的、解释型程序设计语言。更具体一点，它是基于对象和事件驱动、并具有相对安全性的客户端脚本语言。它的主要目的是，验证发往服务器端的数据、增加Web互动，加强用户体验度等。
HTML标记语言混合使用的脚本语言
编写的程序可以直接在浏览器中解释执行
Javascript的国际标准是ECMAScript
用来给HTML网页添加动态功能
网景公司的Brendan Eich设计
ECMAScript，文档对象模型DOM,浏览器对象模型BOM
当JS代码运行的时候，如果没有出现效果，请打开浏览器控制台: F12-->console
2、组成
ECMAScript------JS的基本语法
DOM----------------文档对象模型，如何操作页面
BOM----------------浏览器对象模型，如何操作浏览器
3、学习流程：
变量
运算符
流程控制
方法、函数
对象/类
4、使用方式：
--行内JS
写在html标签中的js代码
--内部JS
写在<script type="text/javascript"></script>标签之间
可以放在html中的任意位置，一般放在<head>标签中或<body>标签中或<body>标签后
--外部JS
引入外部的js文件
<script type="text/javascript" src="js文件的路径" ></script>
注：如果<script>标签中设置了src属性，此时写在<script>双标签中的js代码无效
二、变量和注释
1、语句
--语句（statement）是为了完成某种任务而进行的操作
--语句以分号结尾，一个分号即表示一个语句结束。
--多个语句可以写在一行内(不建议这么写代码)，但是一行写多条语句时，
语句必须以分号结尾。
--表达式不需要分号结尾。一旦在表达式后面添加分号，则JavaScript引擎
就将表达式视为语句，这样会产生一些没有任何意义的语句
2、变量名的命名规则和规范
变量名不能出现特殊字符 （字母数字_$之外的都属于特殊字符）
变量名不能是系统关键字
数字不能用字变量名的开头,_和$命名一般也不放在开头（放在开头都有一些特殊含义）
变量的长度理论上没有限制,但是不要特别长
注意驼峰原则
见名知意
2、变量类型
2.1、特点
JS是一种弱类型的语言
变量在声明的时候统一使用var
但是在具体使用的时候要注意变量的类型
2.2、分类
虽说 JS 是弱类型语言，变量没有类型，但数据本身是有类型的。
* 原生类型
1）、数字:number
整数类型
浮点类型:带有小数点
无限大或者无限小|infinity
NAN:Not A Number
与任意数字进行+-*/%都会把对方同化成NAN
自己不等于自己，更不会等于别人
2）、字符串:string
js中修饰字符串单双引号都可以
如果一个字符串没有加单双引号，那他就是一个变量
3）、布尔类型 boolean
只有两个值 true和false
* 非原生类型object
--对象（object）(引用) ： 各种值组成的集合
1)、对象（object）{name:”zhangsan”,age:”18”}
2)、数组（array）[1,2,3]
3)、函数（function）function test() {}
--非原生类型基本上都是由原生类型构成
--null——属于一种比较特殊的对象类型，他没有指向对象，但也是对象类型
--undefined——变量只声明，未赋值
2.3、声明
变量的声明使用var
--先声明再赋值
--声明并赋值
注：如果声明变量时不使用var修饰符，则该变量是全局变量
--变量的注意点：
1）若只声明而没有赋值，则该变量的值为 undefined
2）变量要有定义才能使用，若变量未声明就使用，JavaScript 会报错，告诉你变量未定义
3）可以在同一条 var 命令中声明多个变量。
4）若使用 var 重新声明一个已经存在的变量，是无效的。
5）若使用 var 重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值
6）JavaScript 是一种动态类型、弱类型语言，也就是说，变量的类型没有限制，
可以赋予各种类型的值
2.4、数据类型的比较和变量提升
变量提升：
JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行
地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫
做变量提升。只有通过var声明的变量才会有变量提升
--比较
1）、==
如果比较的双方为相同类型，直接进行比较
如果比较的双方为不同类型，就要开始转型
同时向数字类型靠拢
他们会默认调用Number(var)的函数
undefinde也会被转换成NAN
2）、===
如果比较的双方为相同类型，直接进行比较
如果比较的双方为不同类型，直接返回false
tips: 对象比较的时候比较的是内存中的地址
2.5、typeof
typeof 操作符是用来检测数据类型。对于值或变量使用 typeof 操作符会返回如下字符串：
字符串 描述
undefined 未定义
boolean 布尔值
string 字符串
number 数值
object 对象或 null
function 函数
2.6、变量类型转换
在 JS 数据类型转方法主要有三种：利用 js 变量弱类型自动转换、转换函数、强制类型转换。
* 自动转换
值 字符串 数字 布尔值
undefined "undefined" NAN false
null "null" 0 false
true "true" 1 true
false "false" 0 false
""(空字符串) “” 0 false
“1.5” "1.5" 1.5 true
"one" "one" NAN true
0或-0 "0" 0 false
NAN “NAN” NAN false
(-)Infinity "(-)Infinity" (-)Infinity true
1 "1" 1 true
* 函数转换
1）、parseInt()
--parseInt()在转换之前，首先会分析该字符串，判断位置为 0 处的字符，
判断它是否 是个有效数字，如果不是，则直接返回 NaN，不再继续，如果是则继续，
直到找到非字符
--parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转
换成整数。基是由 parseInt()方法的第二个参数指定的
--如果十进制数包含前导 0，那么最好采用基数 10，这样才不会意外地得到八进制的值
2）、parseFloat()方法与 parseInt()方法的处理方式相似，从位置 0 开始查看每个字符，
直到找到第一个非有效的字符为止，然后把该字 符之前的字符串转换成数字。不过，对于这
个 方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作
无效 的，parseFloat()方法会把这个小数点之前的字符串转换成数字。
* 显式转换
toString()函数将内容转换为字符串形式，其中 Number 提供的
toString()函数可以将数字以指定的进制转换为字符串，默认为十进制。
Number 还提供了 toFixed()函数将根据小数点后指定位数将数字转为字符串，四舍五入
* 强制转换
--JS 为 Number、Boolean、String 对象提供了构造方法，用于强制转换其他类型的数据。
此时操作的是整个数据，而不是部分
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object())NaN
Number(100) 100
Boolean(""); //false – empty string
Boolean("hi"); //true – non-empty string
Boolean(100); //true – non-zero number
Boolean(null); //false - null
Boolean(0); //false - zero
Boolean(new Object()); //true – object
--使用String强制转换成字符串和调用 toString()方法的唯一不同之处在于，
对 null 或 undefined 值强制类型转换可以生成字符串而不 引 发错误：
var s1 = String(null); //"null" var oNull = null;
var s2 = oNull.toString(); //won’t work, causes anerro
--最为简单的一种转换为字符串的方式，直接在任意数据后面+ ""即可
3、注释
单行注释：用//起头；
多行注释：放在/* 和 */之间。
兼容 html 注释方式：
三、运算符
1、算术运算符
+ - * /(整型/整型=?浮点型) %
++ --
++a 先+再用
a++ 先用再+
2、条件运算符
> < >= <= !=
3、逻辑运算符
&&:判断的左右两边都需要为true
||:判断的左右两边有一个为true即为true
4、赋值运算符
= += -= /= *= %=
5、字符串运算符 +
任意对象和字符串连接都会被同化成字符串
6、三目运算符
表达式1?表达式2:表达式3
true:2
false:3
四、逻辑控制语句
1、if & switch
if —— 一般情况下优先选择if， 较适用于变值的情况
switch —— 一般很少使用，较适用于定值的情况,而且有很多的限制
2、for循环
1）、循环执行固定的代码块
for(语句1;语句2;语句3){
循环体4
}
1:初始值
2:判断
3:迭代
循环顺序：1243 243 243 243 243... 2--结束
2）、中断循环
continue;
中断本次循环
break;
中断当前循环
当多个循环嵌套使用的时候，也是中断当前循环
五、数组
1、概念
数组（array）是按次序排列的一组数据
数组内部都是被整齐的分割，所以我们可以对他进行随机访问
通过他的下标(index)进行访问,index的值从0开始
在JS中只有一个Var类型的数据，所以数组可以存放任意数据，但是不推荐，会提高将来操作数据的难度
特点：
数组的长度是可变的
数组的类型可以不一样
不存在下标越界
2、定义
--隐式创建
var 变量名 = [值1,值2,...];
--直接实例化
var 变量名 = new Array(值1,值2,...);
--实例化并指定长度
var 变量名 = new Array(size);
--获取数组的长度
数组.length
--例
var a1 = new Array();
var a2 = new Array(10);
var a3 = new Array("lili", "nana", "huahua", "fangfang");
var a4 = [1, 2, 3, 4, 5, "aa", "bb", "cc", [1, 2, 3, 4, 5]];
--推荐使用 [ ]
3、访问数组
1）、获取值
数组[下标],下标从0开始
如果下标越界，返回undefined
遍历数组的时候，从index=0 开始 到index<数组.length结束
2）、修改值
数组[下标]=xxxx
3）、删除值
底层的思想也是做数据迁移
a.splice(3, 2);
4）、新增值
添加到最后
a[a.length] = "ii";
a.push("LL");
5）、插入到中间
for(var i = a.length; i > 3; i--) {
a[i] = a[i - 1];
}
a[3] = "zz";
*JS的数组长度是可变的，可以通过改变长度初始化数组中的值。
4、遍历
数组的遍历即依次访问数组的每一个元素 ，JS 提供三种遍历数组的方式：
--普通 for 循环遍历
for(var i = 0; i < 数组名.length; i++) {
}
注：可以拿到undefinded的值，无法获取数组中属性对应的值
--for ... in
for(var i in 数组) {
// i是下标或属性名
}
注：无法拿到undefinded的值，可以获取数组中属性对应的值
--foreach
数组.foreach(function(element,index){
// element：元素；index：下标
});
注：无法获取属性对应的值与undefinded的值
* for -- 不遍历属性
* foreach -- 不遍历属性和索引中的 undefined
* for in -- 不遍历索引中的 undefined
5、数组的方法
push 添加元素到最后
unshift 添加元素到最前
pop 删除最后一项
shift 删除第一项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取（切片）数组，原数组不发生变化
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并
六、函数
1、函数也是对象
所以他的值可以被覆盖、修改
所以很多时候有可能会覆盖到别人的函数
可以使用JSON来保护自己的函数
如果出现同名函数，后面的函数会把前面的函数给覆盖掉，类似于对象的赋值
函数也是对象，函数可以被当做实参在方法中进行传递和调用
就是把实现某一功能的代码放到一起，方便以后的调用和维护
2、定义和调用
* 函数的声明
--函数声明语句
function 函数名字(形参){
方法体
返回值
}
调用：函数名([实参]);
--函数定义表达式
var 变量名/函数名 = function([形参]){
}
调用：变量名([实参])/函数名([实参]);
--Function构造函数
var 函数名 = new Function('参数1','参数2','函数的主体内容');
调用：函数名([实参]);
注：构造韩束的最后一个参数是函数体。
注意：
js 中的函数没有重载，同名的函数，会被后面的函数覆盖。
js 中允许有不定数目的参数，后面介绍 arguments 对象
* 参数
函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部
数据就叫参数，定义时的参数称为形参，调用时的参数称为实参
--实参可以省略，那么对应形参为 undefined
--若函数形参同名（一般不会这么干）：在使用时以最后一个值为准。
--可以给参数默认值：当参数为特殊值时，可以赋予默认值。
--参数为值传递，传递副本 ；引用传递时传递地址，操作的是同一个对象
* 函数的四种调用方式
--常用调用方式：
函数名([实参]);
存在返回值可以变量接收，若接收无返回值函数则为 undefined
--函数调用模式
--方法调用模式
--call()和apply()
注：谁调用函数，this就指向谁
匿名函数立即调用
（1）匿名函数：function ([参数]){}
（2）调用：(function ([形参]) {})([实参]);
在函数只被使用一次的情况下可以使用这种方式，简便省事
* return
函数的执行可能会有返回值，需要使用 return 语句将结果返回。
return 语句不是必需的，如果没有的话，该函数就不返回任何值，或者说返回 undefined。
作用：在没有返回值的方法中，用来结束方法。
有返回值的方法中，一个是用来结束方法，一个是将值带给调用者。
3、调用函数注意：
1）、形参和实参数量不匹配的情况(JS)
不会报错
形参>实参 ： 实参按照形参的数量依次赋值,不够的相当于未赋值 undefined
实参>形参： 实参按照形参的数量依次赋值，多余的就被舍弃掉了
如果形参过多，传递值给指定形参将会不方便
更好的策略——JSON
2）、函数的返回值问题
一个函数可以有显示的返回值也可以没有显示返回值
但是如果不写返回值，默认返回undefined
可以强制结束当前函数的执行
3）、函数名的提升（了解）
JavaScript 引擎将函数名视同变量名，所以采用 function 命令声明函数时，
整个函数会像变量声明一样，被提升到代码头部。所以，下面的代码不会报错
但是，如果采用赋值语句定义函数，JavaScript 就会报错。
4、arguments 对象和函数的方法及属性
arguments对象可以得到函数的实参数量
函数名.name 得到函数名称
函数名.length 得到函数的形参数量
函数名.toString() 得到函数的源码
function fn1 (a,b,c) {
// arguments对象可以得到函数的实参数量
console.log(arguments.length);
console.log("函数....");
console.log(arguments);
}
fn1(1,2);
console.log(fn1.name);
console.log(fn1.length);
console.log(fn1.toString());
5、函数的作用域
函数作用域：全局(global variable)和局部(local variable)
1）全局变量与局部变量同名问题
2）在函数中定义变量时，若没有加 var 关键字，使用之后自动变为全局变量
3）变量作用域提升
var num = 1;
function fn() {
var num = 10; // 这是个局部变量，与全部变量毫无关系
console.log(num); // 就近原则
var b = 2; // 局部变量
c = 3; // 不用var修饰符声明的变量时全局变量
}
6、闭包
闭包的形成：
外部函数内部嵌套内部函数
内部函数中使用外部函数的环境
3、外部函数返回内部函数
闭包的作用：
获取函数内部的变量
保存变量的值在内存中
避免变量名重复
// 1、外部函数内部嵌套内部函数
function fn1() {
var a = "Hello!";
function fn2() {
// 2、内部函数中使用外部函数的环境
console.log(a);
}
// 3、外部函数返回内部函数
return fn2;
}
var f = fn1();
console.log(f);
f();
七、块
JavaScript 使用大括号，将多个相关的语句组合在一起，称为“区块”。 与大多数编程语言不一样，JavaScript 的区块不构成单独的作用域。也就是说，区块中的 变量与区块外的变量，属于同一个作用域。
{
var a = 10;
}
console.log("a------>" + a);
上面的代码，在区块内部声明并赋值了变量 a，然后在区块外部，变量 a 依然有效，这说 明区块不构成单独的作用域，与不使用区块的情况没有任何区别。所以，单独使用的区块在 JavaScript 中意义不大，很少出现。 区块往往用来构成其他更复杂的语法结构，比如 for、if、while 等
八、对象
1、创建对象
对象的方法
对象的属性
function factory(username, password, realname) {
var obj = new Object();
obj.username = username;
obj.password = password;
obj.realname = realname;
return obj;
}
2、原型继承
每创建一个函数，该函数就会自动带有一个 prototype 属性。该属性是个指针，指向了一个对象，我们称之为 原型对象。
原型对象上默认有一个属性 constructor，该属性也是一个指针，指向其相关联的构造函数。
通过调用构造函数产生的实例，都有一个内部属性，指向了原型对象。所以实例能够访问原型对象上的所有属性和方法。
三者的关系是，每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。实例通过内部指针可以访问到原型对象，原型对象通过constructor指针，又可以找到构造函数。
//人类构造函数
function Person(color, hair) {
this.color = color;
this.hair = hair;
this.fav = ["范冰冰", "杨幂", "李毅"];
this.eat = function() {
alert("吃饭...");
}
}
//学生类
function Student(sno, name, gender, grade) {
this.grade = grade;
this.sno = sno;
this.name = name;
this.gender = gender;
this.grade = grade;
this.study = function() {
alert(this.name + ":好好学习，天天向上");
}
this.toString = function() {
return "[object Student]";
}
}
//学生类就继承类黄种人对象(原型继承)
Student.prototype = new Person("yellow", "black");
function testObject() {
var stu1 = new Student(1, 'zs', 'm', 3);
var stu2 = new Student(2, 'ls', 'w', 2);
// 测试原型属性的修改
// 如果直接修改原型属性的值是允许的，但是修改地址不影响原型属性的值
// stu1.fav.push("韩红");
// alert(stu1.fav + "----" + stu2.fav);
// 输出："范冰冰", "杨幂", "李毅","韩红----"范冰冰", "杨幂", "李毅","韩红
// stu1.fav = ["王菲", "刘亦菲", "胡一菲"];
// alert(stu1.fav + "----" + stu2.fav);
// 输出："王菲", "刘亦菲", "胡一菲"----"范冰冰", "杨幂", "李毅"
}
testObject();
九、内置对象
Date:
//获取
getFullYear()年, getMonth()月, getDate()日,
getHours()时,getMinutes()分,getSeconds()秒
//设置
setYear(), setMonth(), …
toLoacaleString()
说明：
getMonth()：得到的值：0~11（1 月~12 月）
setMonth()：设置值时 0~11
toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。
十、JSON
定义
JSON(JavaScript Object Notation，JS 对象简谱)，是一种轻量级的数据交换格式。
JavaScript 标记对象，json是一个对象
JS中一切数据皆对象。
1、定义对象
JS 创建自定义对象，主要通过三种方式：
字面量形式创建对象
var 变量名 = {}; // 空对象
var 变量名 = {键:值,....};
通过 new Object 对象创建
var 变量名 = new Object();
通过 Object 对象的 create 方法创建对象
var 变量名 = Object.create(null或对象);
2、对象的序列化和反序列化
序列化即将 JS 对象序列化为字符串，反序列化即将字符串反序列化为 JS 对象。
JS 中通过调用 JSON 方法，可以将对象序列化成字符串，也可以将字符串反序列化成对
象 。
序列化对象，将对象转为字符串
JSON.stringify(object)
反序列化，将一个 Json 字符串转换为对象。
JSON.parse(jsonStr)
3、eval()
可借助 eval()动态函数，将参数字符串解析成 js 代码来执行
可将 json 串转为 json 对象
1）第一种解析方式：得到的 json 对象名就是 jsonObj
eval("var jsonObj = " + jsonStr);
2）第二种解析方式：对象中有多个属性
var jsonObj = eval("(" + jsonStr + ")");
由于 json 是以{ }的方式来开始以及结束的，在 eval 中会被当成一个语句块来处理，故必 须强制将它转换成一种表达式。加上圆括号是使 eval 函数在处理时强制将括号内的表达式转化为对象而不作为语句来执行。
3）第二种解析方式：对象中只有一个属性
eval(jsonStr);
典型应用
传参（参数比较多时，用json比较方便）
命名空间
// 1、字面量形式创建对象
var obj = {}; // 空对象
var obj2 = {
uname:"zhangsan",
uage:18
};
obj2.usex=true;
console.log(obj);
console.log(obj2);
// 2、通过 new Object 对象创建
var obj3 = new Object();
obj3.name = "Tom";
console.log(obj3);
// 3、通过 Object 对象的 create 方法创建对象
var obj4 = Object.create(null);
console.log(obj4.uname);
var obj5 = Object.create(obj2);
console.log(obj5.uname);
console.log('============序列化和反序列化============');
var str = '{"uname":"zhangsan", "uage":18 }';
// 反序列化：将字符串转换成对象
var object1 = JSON.parse(str);
console.log(object1);
console.log(object1.uname);
// 序列化，将对象转换成字符串
var json1 = JSON.stringify(object1)
console.log(json1);
console.log(json1.uname);
console.log("=============eval()============");
console.log('你好');
eval("console.log('你好')");//控制台输出你好
// 1）第一种解析方式：得到的 json 对象名就是 jsonObj
var ab = '{"uname":"zhangsan", "uage":18 }';
eval("var jsonObj = " + ab);
console.log(jsonObj);
// 2）第二种解析方式：对象中有多个属性
var jsonObj2 = eval("(" +ab + ")");
console.log(jsonObj2);
var arrStr = "[1,'1a','fg']";
// 第一种解析方式eval("var arrObj = " + arrStr);
eval("var arr=" + arrStr);
console.log(arr);
// 第二种解析方式：eval(arrStr);
console.log(arrStr);
console.log(eval(arrStr));
