一、简介：JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器
1 <!-- 方式一 --> 2 <script type"text/javascript" src="JS文件"></script> 3 4 <!-- 方式二 --> 5 <script type"text/javascript"> 6 Js代码内容 7 </script>JavaScript代码存在形式
JavaScript代码存放位置
- HTML的head中
- HTML的body代码块底部(推荐)
二、变量
JavaScript中变量的声明，局部变量必须用var+变量名，否则便是全局变量
1 <script type="text/javascript">
2
3 // 全局变量，type="text/javascript"可不加
4 name = 's';
5
6 function func(){
7 // 局部变量
8 var age = 18;
9
10 // 全局变量
11 gender = "男"
12 }
13 </script>
14
15 //JavaScript中代码注释：
16
17 单行 //
18 多行 /* */
var 变量名,注释
三、数据类型
JavaScript 中的数据类型分为原始类型和对象类型：
- 原始类型
- 数字
- 字符串
- 布尔值
- 对象类型
- 数组
- 字典
1 // null、undefined 2 3 null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。 4 undefined是一个特殊值，表示变量未定义。 5 6 特别的，数字、布尔值、null、undefined、字符串是不可变null、undefined
1、数字（Number）
JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
转换：
- parseInt(..) 将某值转换成数字，不成功则NaN
- parseFloat(..) 将某值转换成浮点数，不成功则NaN
特殊值：
- NaN，非数字。可使用 isNaN(num) 来判断。
- Infinity，无穷大。可使用 isFinite(num) 来判断。
1 常量 2 3 Math.E 4 常量e，自然对数的底数。 5 6 Math.LN10 7 10的自然对数。 8 9 Math.LN2 10 2的自然对数。 11 12 Math.LOG10E 13 以10为底的e的对数。 14 15 Math.LOG2E 16 以2为底的e的对数。 17 18 Math.PI 19 常量figs/U03C0.gif。 20 21 Math.SQRT1_2 22 2的平方根除以1。 23 24 Math.SQRT2 25 2的平方根。 26 27 静态函数 28 29 Math.abs( ) 30 计算绝对值。 31 32 Math.acos( ) 33 计算反余弦值。 34 35 Math.asin( ) 36 计算反正弦值。 37 38 Math.atan( ) 39 计算反正切值。 40 41 Math.atan2( ) 42 计算从X轴到一个点的角度。 43 44 Math.ceil( ) 45 对一个数上舍入。 46 47 Math.cos( ) 48 计算余弦值。 49 50 Math.exp( ) 51 计算e的指数。 52 53 Math.floor( ) 54 对一个数下舍人。 55 56 Math.log( ) 57 计算自然对数。 58 59 Math.max( ) 60 返回两个数中较大的一个。 61 62 Math.min( ) 63 返回两个数中较小的一个。 64 65 Math.pow( ) 66 计算xy。 67 68 Math.random( ) 69 计算一个随机数。 70 71 Math.round( ) 72 舍入为最接近的整数。 73 74 Math.sin( ) 75 计算正弦值。 76 77 Math.sqrt( ) 78 计算平方根。 79 80 Math.tan( ) 81 计算正切值。Math
2、字符串（String）：无法修改
1 obj.length 长度 2 3 obj.trim() 移除空白 4 obj.trimLeft() 5 obj.trimRight) 6 obj.charAt(n) 返回字符串中的第n个字符 7 obj.concat(value, ...) 拼接 8 obj.indexOf(substring,start) 子序列位置 9 obj.lastIndexOf(substring,start) 子序列位置 10 obj.substring(from, to) 根据索引获取子序列 11 obj.slice(start, end) 切片 12 obj.toLowerCase() 大写 13 obj.toUpperCase() 小写 14 obj.split(delimiter, limit) 分割 15 obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效) 16 obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。 17 obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项， 18 $数字：匹配的第n个组内容； 19 $&：当前匹配的内容； 20 $`：位于匹配子串左侧的文本； 21 $'：位于匹配子串右侧的文本 22 $$：直接量$符号字符串操作
3、布尔类型（Boolean）
1 == 比较值相等 2 != 不等于 3 === 比较值和类型相等 4 !=== 不等于 5 || 或 6 && 且Boolean
4、数组：相当于python中的列表
1 obj.length 数组的大小 2 3 obj.push(ele) 尾部追加元素 4 obj.pop() 尾部获取一个元素 5 obj.unshift(ele) 头部插入元素 6 obj.shift() 头部移除元素 7 obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素 8 obj.splice(n,0,val) 指定位置插入元素 9 obj.splice(n,1,val) 指定位置替换元素 10 obj.splice(n,1) 指定位置删除元素 11 obj.slice( ) 切片 12 obj.reverse( ) 反转 13 obj.join(sep) 将数组元素连接起来以构建一个字符串 14 obj.concat(val,..) 连接数组 15 obj.sort( ) 对数组元素进行排序数组操作
5、正则
1 /.../ 用于定义正则表达式 2 /.../g 表示全局匹配 3 /.../i 表示不区分大小写 4 /.../m 表示多行匹配 5 6 <!-- JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容) --> 7 8 var a = "JavaScript is more fun than \nJavaEE or JavaBeans!" 9 undefined 10 var b = /^Java\w*/gm 11 undefined 12 r = b.exec(a) 13 ["JavaScript", index: 0, input: "JavaScript is more fun than ↵JavaEE or JavaBeans!", groups: undefined] 14 r = b.exec(a) 15 ["JavaEE", index: 29, input: "JavaScript is more fun than ↵JavaEE or JavaBeans!", groups: undefined] 16 r = b.exec(a) 17 null定义
1 >var n = '333sss' 2 <undefined 3 >reg = /\d+/ 4 </\d+/ 5 >reg.test(n) 6 <true 7 8 //只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$匹配 text(string)检查字符串中是否和正则匹配
1 //获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。 2 3 <!--非全局模式：获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）--> 4 var s = "JavaScript is more fun than JavaEE or JavaBeans!" 5 undefined 6 var p = /\bJava\w*\b/ 7 undefined 8 res = p.exec(s) 9 ["JavaScript", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 10 res = p.exec(s) 11 ["JavaScript", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 12 13 var p = /\b(Java)\w*\b/ 14 undefined 15 res = p.exec(s) 16 (2) ["JavaScript", "Java", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 17 18 19 <!--全局模式：需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕--> 20 var s = "JavaScript is more fun than JavaEE or JavaBeans!" 21 undefined 22 var p = /\bJava\w*\b/g 23 undefined 24 res = p.exec(s) 25 ["JavaScript", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 26 res = p.exec(s) 27 ["JavaEE", index: 28, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 28 res = p.exec(s) 29 ["JavaBeans", index: 38, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 30 res = p.exec(s) 31 null 32 var p = /\b(Java)\w*\b/g 33 undefined 34 res = p.exec(s) 35 (2) ["JavaScript", "Java", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 36 res = p.exec(s) 37 (2) ["JavaEE", "Java", index: 28, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 38 res = p.exec(s) 39 (2) ["JavaBeans", "Java", index: 38, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 40 res = p.exec(s) 41 null匹配 exec(string)
1 obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效) 2 obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部 3 obj.replace(regexp, replacement) 替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项， 4 5 $数字：匹配的第n个组内容； 6 $&：当前匹配的内容； 7 $`：位于匹配子串左侧的文本； 8 $'：位于匹配子串右侧的文本 9 $$：直接量$符号字符串中相关方法
6、其他
1 //序列化就是将JavaScript中的数据类型转换成字符串 2 JSON.stringify(obj) 序列化 3 JSON.parse(str) 反序列化序列化
1 var r = "www.baidu.com?name='你好'" 2 3 encodeURI(r) //URI中的转义字符 4 "www.baidu.com?name='%E4%BD%A0%E5%A5%BD'" 5 6 decodeURI(r) //URl中未转义的字符 7 "www.baidu.com?name='你好'" 8 9 encodeURIComponent(r) //转义URI组件中的字符 10 "www.baidu.com%3Fname%3D'%E4%BD%A0%E5%A5%BD'" 11 12 decodeURIComponent(r) //URI组件中的未转义字符 13 "www.baidu.com?name='你好'" 14 15 <!-- 16 escape( ) 对字符串转义 17 unescape( ) 给转义字符串解码 18 URIError 由URl的编码和解码方法抛出 19 -->转义
//JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。 >eval(2+2*5) <12eval
时间处理：http://www.shouce.ren/api/javascript/main.html
四、语句异常
1、条件语句
1 if(条件){
2
3 }else if(条件){
4
5 }else{
6
7 }
if 语句
1 switch(name){
2 case '1':
3 age = 123;
4 break;
5 case '2':
6 age = 456;
7 break;
8 default :
9 age = 789;
10 }
switch 语句
2、循环
1 var names = ["a", "b", "c"];
2
3 for(var i=0;i<names.length;i++){
4 console.log(i);
5 console.log(names[i]);
6 }
for i 循环
1 var names = ["a", "b", "c"];
2
3 for(var index in names){
4 console.log(index);
5 console.log(names[index]);
6 }
for index 循环
1 while(条件){
2 // break;
3 // continue;
4 }
while 循环
1 try {
2 //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
3 }
4 catch (e) {
5 // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
6 //e是一个局部变量，用来指向Error对象或者其他抛出的对象
7 }
8 finally {
9 //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
10 }
异常处理
五、函数
1、基本函数：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。
1 // 普通函数
2 function func(arg){
3 return true;
4 }
普通函数
1 //普通函数
2 function func(){
3 console.log(1);
4 }
5 setInterval("func()", 5000);
6
7 //匿名函数
8 setInterval(function(){console.log(1);},5000)
9
10
11 setinterval为定时器；
匿名函数
1 // 自执行函数
2 (function(arg){
3 console.log(arg);
4 })('123')
5
6 //自执行函数等同于以下代码：
7 function func(arg){
8 console.log(arg);
9 }
10 func(123)
自执行函数
2、函数作用域
1 function M(){
2 if(1==1){
3 var name = 'jack';
4 }
5 console.log(name);
6 }
7 // 输出： jack
8
9 JavaScript6中新引入了 let 关键字，用于指定变量属于块级作用域
一、“JavaScript中无块级作用域”
1 //在JavaScript中每个函数作为一个作用域，在外部无法访问内部作用域中的变量。
2
3 function Main(){
4 var innerValue = 'seven';
5 }
6
7 Main();
8
9 console.log(innerValue);
10
11 // 报错：Uncaught ReferenceError: innerValue is not defined
二、JavaScript采用函数作用域
1 //JavaScript中的每个函数作为一个作用域，如果出现函数嵌套函数，则就会出现作用域链。
2
3 a = '1'; //第三步
4
5 function Func(){
6 var a = "2"; //第二步
7 function inner(){
8 var a = '3'; //第一步
9 console.log(a);
10 }
11 inner();
12 }
13 Func();
14
15 //当执行console.log(a)时，其寻找顺序为根据作用域链从内到外的优先级寻找，如果内层没有就逐步向上找，直到没找到抛出异常。
三、JavaScript的作用域链
1 //JavaScript的作用域在被执行之前已经创建，日后再去执行时只需要按照作用域链去寻找即可。
2
3 a = '1';
4
5 function Func(){
6 var a = "2";
7 function inner(){
8
9 console.log(a);
10 }
11 a = '3';
12 return inner;
13 }
14
15 var ret = Func();
16 ret();
17 // 输出结果： 3
18
19 全局作用域 -> Func函数作用域 -> inner函数作用域
四、JavaScript的作用域链执行前已创建
1 JavaScript中如果不创建变量，直接去使用，则报错：
2 console.log(a);
3 // 报错：Uncaught ReferenceError: a is not defined
4
5 JavaScript中如果创建值而不赋值，则该值为 undefined，如：
6 var a;
7 console.log(a);
8 // 输出：undefined
9
10 函数内：
11 function Foo(){
12 console.log(a);
13 var a = 's';
14 }
15 Foo();
16 // 输出：undefined
17 上述代码，不报错而是输出 undefined，其原因是：JavaScript的函数在被执行之前，会将其中的变量全部声明，而不赋值。所以，相当于上述实例中，函数在“预编译”时，已经执行了var a；所以上述代码中输出的是undefined。
五、函数内局部变量声明提前
3、面向对象
1 function Foo (name,age) { //Foo充当构造函数
2 this.Name = name; //this代指对象
3 this.Age = age;
4 this.Func = function(arg){
5 return this.Name + arg;
6 }
7 }
8
9 var obj = new Foo('abc', 18); //创建对象时需要使用 new
10 var ret = obj.Func("ss");
11 console.log(ret);
12
13
14 //上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题
创建对象
1 我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个对象;
2
3 用途:包含可以由特定类型的所有实例共享的属性和方法;
4
5 理解:prototype是通过调用构造函数创建的那个对象的原型对象;
6
7 使用原型的好处是可以让所有对象实例共享它所包含的属性和方法;
8
9 也就是说,不必在构造函数中定义对象信息(属性/方法),而是可以直接将这些信息添加到原型中;
10
11 function Foo (name,age) {
12 this.Name = name;
13 this.Age = age;
14 }
15 Foo.prototype = {
16 GetInfo: function(){
17 return this.Name + this.Age
18 },
19 Func : function(arg){
20 return this.Name + arg;
21 }
22 }
prototype-原型
六、AO词法分析
1 <body>
2 <script>
3 function t1(age) {
4 console.log(age);
5 var age = 27;
6 console.log(age);
7 function age() {};
8 console.log(age);
9 }
10 t1(3);
11 </script>
12 </body>
13
14 输出结果为：
15 function age(){}
16 27
17 27
先看一段代码
1 active object ====>AO
2 1、形式参数
3 2、局部变量
4 3、函数声明表达式
5
6 分析：
7 1、形式参数
8 AO.age = undefined;
9 AO.age = 3;
10
11 2、局部变量
12 AO.age = undefined;
13
14 3、函数声明表达式
15 AO.age = function(){};
active object分析