JS初识

一、JS (JavaScript) 引入方式

1、Script 标签内写代码

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

2、引入额外的JS文件

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

二、JavaScript语言规范

1、注释

// 这是单行注释

/*
这是
多行
注释
*/

2、结束符

　　在JavaScript 中的语句要以分号 ( ; ) 为结束符。

三、JavaScript语言基础

变量声明

1、变量名可以使用字母、数字、_、$组成，不能以数字开头。

2、声明变量使用 var 变量名; 的格式来进行声明。

var name = "alex";
var age = 18;

注意：变量名是区分大小写的。       推荐使用驼峰式命名规则。

四、JavaScript 数据类型

1、JavaScript 拥有动态类型

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

2、数字类型

JavaScript 不区分整型和浮点型，就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

常用方法：

parseInt("123");  // 返回123
parseInt("ABC");  // 返回NaN,NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字
parseFloat("123.456");  // 返回123.456

3、字符串

var a = "Hello";
var b = "word";
var c = a + b;
console.log(c);  // 结果是 Helloword

常用方法：

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

拼接字符串一般使用 “+” 。

4、布尔类型

区别于Python，true 和 false都是小写。

var a = true;
var b = false;

5、数组

类似于Python中的列表。

var a = [123,"ABC"];
console.log(a);  // 输出"ABC"

常用方法：

方法	说明
obj.length	数组的大小
obj.push(ele)	尾部追加元素
obj.pop()	获取尾部元素
obj.unshift(ele)	头部插入元素
obj.shift()	头部移除元素
obj.slice()	切片
obj.reverse()	反转
obj.join(seq)	将数组元素链接成字符串
obj.concat(value, .........)	连接数组
obj.sort()	排序

遍历数组中的元素：

var a = [10, 20, 30, 40];
for (var i = 0; i<a.length; i++) {
    console.log(i);  // 结果是 0 1 2 3 遍历的是数组的下标
    console.log(a[i]);  // 结果是 0 10 1 20 2 30 3 40 遍历的是整个数组，且是类似键值对的对应输出
}

6、null 和 undefined 

• undefined 表示的是当声明的变量未初始化时，该变量的默认值是 undefined 。还有就是函数无明确的返回值时，返回的也是 undefined。
• null 表示值不存在。

undefined 表示什么了变量，但是还没有赋值。null 声明了变量且变量值为空。

7、类型查询

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

typeof 是一个一元运算符 （就像 ++，！，-等一元运算符），不是一个函数，也不是一个语句。

五、运算符

1、算数运算符

+ - * / % ++ --

2、比较运算符

> < >= <= != == === !==

注意：

1 =="1";  // true
1 === "1";  // false

3、逻辑运算符

&& // 逻辑与
||  // 逻辑或
!  // 逻辑非

4、赋值运算符

= += -= *= /=

六、流程控制

1、if-else

var a = 10;
if (a > 5) {
    console.log("yes");
}else {
    console.log("no");
}  // 结果是 yes

2、if-else if-else

var a = 10;
if (a > 5) {
    console.log("a > 5");
}else if (a < 5) {
    console.log("a < 5");
}else {
    console.log("a = 5");
}  // 结果是 a > 5

3、switch

var day = new Date().getDay();
switch (day) {
    case 0:console.log("星期日");break;
    case 1:console.log("星期一");break;
    case 2:console.log("星期二");break;
    case 3:console.log("星期三");break;
    case 4:console.log("星期四");break;
    case 5:console.log("星期五");break;
    case 6:console.log("星期六");break;
}

4、for

for (var i = 0;i < 10;i++) {
    console.log(i);
}  // 结果是 0 1 2 3 4 5 6 7 8 9

5、while

var i = 0;
while (i < 10) {
    console.log(i);
    i++;
}  // 结果是 0 1 2 3 4 5 6 7 8 9

6、三元运算

// 条件 ? 值1 : 值2        如果条件为真，则结果为 值1，否则结果是 值2
var a = 1;
var b = 2;
var c = a > b ? a : b
console.log(c);  // 结果是 2

七、函数

1、函数定义

// 普通函数定义
function f1(){
    console.log("Hello world!");
}
f1();  // 结果是 Hello world!

// 带参数的函数
function f2(arg1,arg2) {
    console.log(arg1, arg2);
}
f2("alex", "特斯拉");  // 结果是 alex 特斯拉

// 带返回值的函数
function f3(rag1,rag2) {
    return rag1 + rag2;
}
f3(1,3);  // 结果是 4

// 匿名函数
var sum = function (a, b) {
    return a + b;
}
sum(2,3);  // 结果是 5

// 立执行函数
(function f4(a,b) {
    return a + b;
})(2,4);  // 结果是 6

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

局部变量：

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

全局变量：

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

变量生存周期：
　　JavaScript 变量的生命周期从它们被声明的时间开始。

　　局部变量会在函数运行完之后被删除。

　　全局变量会在页面关闭之后被删除。

3、作用域

　　首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

例子：

1、

var city = "beijing";
function f5() {
    var city = "shanghai";
    function inner() {
        var city = "shenzhen";
        console.log(city);
    }
    inner();
}
f5();  // 结果是 shenzhen

2、

var city = "beijing";
function bar() {
    console.log(city);
}
function f6() {
    var city = "shanghai";
    return bar;
}
var ret = f6();
ret();  // 结果是 beijing

3、闭包

var city = "beijing";
function f7() {
    var city = "shanghai";
    function inner() {
        console.log(city);
    }
    return inner;
}
var ret = f7();
ret();  // 结果是 shanghai

八、内置对象和方法

 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期等。在JavaScript 中，对象是拥有属性和方法的数据。

1、自定义对象

类似于（某方面类似）Python中的字典数据类型

var a = {"name":"alex", "age":18};
console.log(a.name);  // 结果是 alex
console.log(a["age"]);  // 结果是 18

遍历对象中的内容：

var a = {"name":"alex", "age":18};
for (var i in a ) {
    console.log(i);
}  // 结果是 name age  此时遍历的只是对象中的各个键

 创建对象：

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

扩展：

// 父类构造函数
var fatherClass = function (loc) {
    this.loc = loc;
};

// 父类方法
fatherClass.prototype.move = function() {
    this.loc ++;
};

// 子类构造函数
var childClass = function (loc) {
    childClass(this,loc);
};

// 继承父类的方法
childClass.prototype = Object.create(fatherClass.prototype);

// 修复 constructor
childClass.prototype.constructor = fatherClass;

// 扩展方法
childClass.prototype.grab = function () {
    /*............*/
};

2、Date对象

 创建Date对象

// 方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());  // 结果是 2017/12/28 下午3:44:48

// 方法2：参数为日期字符串
var d2 = new Date("2018/1/1 11:11:11");
console.log(d2.toLocaleString());  // 结果是 2018/1/1 上午11:11:11

var d3 = new Date("17/01/01 11:12:12");
console.log(d3.toLocaleString());  // 结果是 Invalid Date

// 方法3：参数为毫秒数
var d4 = new Date(5000000000000);
console.log(d4.toLocaleString());  // 结果是 2128/6/11 下午4:53:20
console.log(d4.toUTCString());  // 这是UTC时间 结果是 Fri, 11 Jun 2128 08:53:20 GMT

// 方法4：参数为年月日小时分钟秒毫秒
var d5 = new Date(2018,1,1,11,11,11,11);
console.log(d5.toLocaleString());  // 毫秒并不直接显示  结果是 2018/2/1 上午11:11:11

Date对象的方法：

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

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

//将当前日期输出为“2017-12-27 11:11 星期三”格式
function getNow() {
    var d = new Date();
    var dYear = d.getFullYear();
    var dMonth = d.getMonth();
    var dDay = d.getDate();
    var dHour = d.getHours();
    var dminute = d.getMinutes();
    var dweek = d.getDay();
    switch (dweek) {
        case 0:dweek = "星期日";break;
        case 1:dweek = "星期一";break;
        case 2:dweek = "星期二";break;
        case 3:dweek = "星期三";break;
        case 4:dweek = "星期四";break;
        case 5:dweek = "星期五";break;
        case 6:dweek = "星期六";break;
    }
    if (dminute<10) {
        dminute = "0" + dminute;
    }
    return (dYear + "-" + (dMonth+1) + "-" + dDay + " " + dHour + ":" + dminute + dweek);
}
ret = getNow();
console.log(ret);

3、JSON 对象

 JSON能够实现序列化和反序列化

var a = {"name":"alex","age":38};
// 序列化
var s = JSON.stringify(a);
console.log(a, typeof(a));  // 结果是 {name: "alex", age: 38} "object"
console.log(s, typeof(s));  // 结果是 {"name":"alex","age":38} string

// 反序列化
var obj = JSON.parse(s);
console.log(obj, typeof(obj));  // 结果是 {name: "alex", age: 38} "object"

4、RegExp 对象

 与正则表达式相关

// 定义方式1:"第一个参数：正则表达式","第二个参数：匹配模式g(全局匹配)或i(忽略大小写)"
var r1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g");
var s1 = "alex123";
var s2 = "123alex";
console.log(r1.test(s1));  // 结果是 true
console.log(r1.test(s2));  // 结果是 false
// 定义方式2：/第一个参数：正则表达式/第二个参数：匹配模式g(全局匹配)或i(忽略大小写)
var r2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
console.log(r2.test(s1));  // 结果是 true
console.log(r2.test(s2));  // 结果是 false

注意：在使用 g 的时候是全局匹配，但是如果连续两次对同一个变量使用 test 时，第一次 test 是从索引为0 的地方开始匹配的，但是第二次使用 test 的时候就是从索引为1的地方开始对变量进行正则匹配的。

5、Math 对象

// asb(x)                  返回 x 的绝对值
// exp(x)                  返回e的指数(返回的其实就是e的x次方的值)
// floor(x)                对 x 进行下舍入(向下取整)
// log(x)                  返回 x 的自然对数（低为e）
// max(x,y)                返回 x 和 y 中的最高值
// min(x,y)                返回 x 和 y 中的最小值
// pow(x,y)                返回 x 的 y 次幂
// random()                返回0-1之间的随机数
// round(x)                把 x 四舍五入为最接近的整数
// sin(x)                  返回 x 的正弦
// sqrt(x)                 返回 x 的平方根
// tan(x)                  返回角 x 的正切