前端——JavaScript

JavaScript 是一种脚本的语言（触发动作）；

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript引入方式

第一种直接在script标签内写代码（script标签写在body标签的最后面，因为代码从上到下加载后，才能得到元素）

?

1 2 3

<script>   // 在这里写你的JS代码 </script>

 

第二种是引入JS文件

?

1	<script src="myscript.js"></script>

　

JavaScript语言规范

注释（注释是代码之母）

?

1 2 3 4 5 6

// 这是单行注释   /* 这是 多行注释 */

　

结束符

JavaScript中的语句要以分号（;）为结束符。

 

JavaScript语言基础

申明变量的时候必须在前面填上var;       var 变量名

变量名可以用_，数字，字母和$组成，不能以数字开头；

在JS里面推荐用驼峰式的命名规则；（var  nameElen）

 

JavaScript数据类型

1.变量

JS 的 数据 也是 动态类型（变量可以赋值（多种数据类型））（弱语言）

?

1 2 3

var x;  // 此时x是undefined var x = 1;  // 此时x是数字 var x = "Alex"  // 此时x是字符串

 

2.数据类型：

　　1.数字（Number）

　　　　1.NaN（not  a  number （不是一个数字））

　　　　2.parseInt("111")   --> 把字符串转成数字

　　　　3.parseFloat("111")   --> 把字符串转成小数

　　2. 字符串 （String）

　　　和Python一样的用法

　　字符串的常用的方法:

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

string.slice(start, stop)和string.substring(start, stop)：   两者的相同点： 如果start等于end，返回空字符串 如果stop参数省略，则取到字符串末 如果某个参数超过string的长度，这个参数会被替换为string的长度   substirng()的特点： 如果 start > stop ，start和stop将被交换 如果参数是负数或者不是数字，将会被0替换   silce()的特点： 如果 start > stop 不会交换两者 如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符) 如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

　　

　　3.布尔值 (Boolean)

　　区别与python是，true,false是小写的

　　""(空字符串)、0、null 、undefined、NaN都是false。

　　4.数组   (Array)

　　　和python里面的 列表 相似；

　　　数组的常用的方法

.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

　　注意sort()排序是按照按照字符编码的顺序进行排序（即先看比较第一个的ascil码，相同则比较第二个）

?

1 2 3 4

var n= [11,522,369,6,8] undefined n.sort() // [11, 369, 522, 6, 8]

　遍历数值中的元素，就和python中遍历列表相似;

?

1 2 3 4

var a = [11,22,66,9,6,8]; for (var i=0;i<a.length;i++){     console.log(a[i]);     }

　　5.null

　　表示值是空的；

　　6.undefined

　　是定义了变量，但是没有赋值；

类型查询：

?

1 2 3 4

typeof "abc"  // "string" typeof null  // "object" typeof true  // "boolean" typeof 123 // "number"

对象(Object)

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

3. 条件判断

　　()括号里面是条件，当条件为True的时候，就执行{}大括号里面的内容；

　　1.if (){}；

　　　else{}；

　　

　　2.　if; else if; else; 多个条件的 注意没有 elif；

　　　if (){}；

　　　else{}；

　　

            if (){}；

　　　else{}；

　　

　　3. switch

?

1 2 3 4 5 6 7 8 9 10 11

var day = new Date().getDay(); switch (day) {   case 0:   console.log("Sunday");   break;   case 1:   console.log("Monday");   break; default:   console.log("...") }

　switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。当没有对应的值的时候就执行 default 的语句；

4. 循环
　　1. for循环
　　　　for (var i=0;i<值;i++){
　　　　　　console.log(i);
　　　　　　　　}
　　2. while循环
　　　　var i = 5;
　　　　　　while (i>0){
　　　　　　console.log(i);
　　　　　　i--;
　　　　　　}

 

5. 运算符
　　1. 算数运算符
　　　　+ - * / % ++ --
　　2. 比较运算符
　　　　== != > < >= <=
　　　　注意!!! 强等于 === !==
　　== 只是判断两者的数值是否相等； 而强等于（===）是判断 两者 数据类型和数值 都要 一样；

?

1 2	1 == “1”  // true 1 === "1"  // false

　

　　3. 逻辑运算符
　　　　||(或) &&(与) !(非)

　　4. 赋值运算符
　　　　= += -= *= /=

　　5.三元运算

?

1 2 3

var a = 1; var b = 2; var c = a > b ? a : b

　　

函数

JS中的函数和python中的函数非常相似，只是用定义的关键字为function；

function  函数名(参数){函数体}

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

// 普通函数定义 function f1() {   console.log("Hello world!"); }   // 带参数的函数 function f2(a, b) {   console.log(arguments);  // 内置的arguments对象   console.log(arguments.length);   console.log(a, b); }   // 带返回值的函数 function sum(a, b){   return a + b; } sum(1, 2);  // 调用函数   // 匿名函数方式 var sum = function(a, b){   return a + b; } sum(1, 2);   // 立即执行函数 (function(a, b){   return a + b; })(1, 2);

　arguments 参数 是函数中的 所有的参数

　

函数的全局变量和局部变量

全局变量：

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

局部变量：

在 JavaScript  函数内部声明的变量 （使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

 

作用域

跟Python的作用域一样，先在函数内部查找变量，找不到则在函数外寻找；从内往外找；

词法分析

?

1 2 3 4 5 6 7 8 9 10 11

var age = 18; function foo(age){   console.log(age);   var age = 22;   console.log(age);   function age(){     console.log("呵呵");   }   console.log(age); } foo();  //

　　

词法分析分为2个过程：

当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

1.分析过程：

词法分析过程：
1、分析函数的参数，有一个参数，形成一个 AO.age=undefine;
2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};

最终，AO上的属性只有一个age，并且值为一个函数声明

2.执行过程：

在执行过程中函数不起作用；

执行过程：
注意：执行过程中所有的值都是从AO对象上去寻找

1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 2
3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了

 

内置的对象和方法

JS中的对象是拥有属性和方法的数据;

注意var s1 = "abc" 和 var s2 = new String("abc")的区别：typeof s1 --> string  而 typeof s2 --> Object

1. 自定义对象
　　1. {name: "xiaoqiang", age: 18}
　　　　-键不用加引号,加上也不出错
　　　　-值 如果是  字符串必须写 双引号

　　2.new关键字形式　　

?

1 2 3

var person=new Object();  // 创建一个person对象 person.name="Alex";  // person对象的name属性 person.age=18;  // person对象的age属性

　　

2.内置的Date对象 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//方法1：不指定参数 var d1 = new Date(); console.log(d1.toLocaleString()); //方法2：参数为日期字符串 var d2 = new Date("2004/3/20 11:12"); console.log(d2.toLocaleString()); var d3 = new Date("04/03/20 11:12"); console.log(d3.toLocaleString()); //方法3：参数为毫秒数 var d3 = new Date(5000); console.log(d3.toLocaleString()); console.log(d3.toUTCString());   //方法4：参数为年月日小时分钟秒毫秒 var d4 = new Date(2004,2,20,11,12,0,300); console.log(d4.toLocaleString());  //毫秒并不直接显示

　Date对象 的方法:

?

1 2 3 4 5 6 7 8 9 10

var d = new Date(); //getDate()                 获取日(1-6 星期天为0) //getDay ()                 获取星期 //getMonth ()               获取月（0-11） //getFullYear ()            获取完整年份 //getHours ()               获取小时 //getMinutes ()             获取分钟 //getSeconds ()             获取秒 //getMilliseconds ()        获取毫秒 //getTime ()                返回累计毫秒数(从1970/1/1午夜)

?

1	编写代码，将当前日期按“2017-12-27 11:11 星期三”格式输出

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

//编写代码，将当前日期按“2017-12-27 11:11 星期三”格式输出 // var ret= new Date("2017-12-27 11:11"); // var day = ret.getDay(); // switch (day) { //     case 0: //         var n="星期日"; //         break; //     case 1: //         var n="星期一"; //         break; //     case 3: //         var n="星期三"; //         break; // } // // console.log(ret.toLocaleString(),n); // console.log(typeof ret.toLocaleString() );

 

3.JSON对象

?

1 2 3 4 5 6

var str1 = '{"name": "Alex", "age": 18}'; var obj1 = {"name": "Alex", "age": 18}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1);

　　

4.RegExp对象(正则对象)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

//在创建正则对象的时候不能有空格,逗号后面也不要加空格； // var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // var s1 = "name:Alex age:18";   //匹配的模式 //g 为 全局的 //i 为 不区分大小写   // var s1 = "name:Alex age:18"; // var r = /a/g; // // s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"   // var ss1=s1.replace(/a/g, "哈哈哈",);     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配 // console.log(ss1); // // s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写 //   //在全局匹配的时候： // 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。 // 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。 // 因此，当我们使用test()函数执行了一次匹配之后， // 如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。   //test()里面不填的话就默认为undefined;   var reg3 = /foo/g; // 此时 regex.lastIndex=0 var t = reg3.test('foo'); // 返回true console.log(t); // console.log(reg3.lastIndex); // 此时 regex.lastIndex=3 var t2 = reg3.test('xxxfoo'); // 还是返回true console.log(t2); // 所以我们在使用test()方法校验一个字符串是否完全匹配时， // 一定要加上^和$符号,即为var reg3 = /^foo$/g;