现在所说的JavaScript包含了三个部分

1. ECMAScript：js的语法规范
2. DOM：操作网页的功能
3. BOM：操作浏览器的功能

方式1：通过script标签即可

方式2：把JS代码写在单独的文件JS文件中，通过script标签引入

JS的注释：

// 单行注释 ctrl + /
/* 多行注释 */

HTML的注释：

CSS的注释：

alert('警告');
confirm('你确定要删除吗？');
prompt('请输入你的银行卡密码。');
document.write('hell world');
console.log('调试见');

① 由字母，数字，下划线，$符号组成，不能以数字开头
② 不能是关键字和保留字
③ 区分大小写

① 定义的变量要有意义
② 驼峰命名规范：除了第一个单词，其它单词首字母都需要大写

代码从上往下执行，一行报错，后面的代码不执行

var age;	// 声明变量 未声明时：is not defined => bug
age = 18; 	// 变量赋值
var age1 = 18, age2 = 20;	// 声明多个变量，以‘,'号隔开

值类型:简单数据类型或者基本数据类型 在存储时变量中存储的是值本身 因此叫做值类型
引用类型：复杂数据类型 在存储时变量中存储的仅仅是地址(引用) 因此叫做引用数据类型

typeof判断类型：
① 只能判断简单数据类型的类型（number，string，boolean，undefined）
② typeof判断复杂类型，全都是Object。
③ 例外：typeof如果判断是函数，返回值为function
④ typeof null结果为Object

function fn(){}
console.log(typeof(fn));		// 输出结果为function
var ss = null;
console.log(typeof(ss));		// 输出结果为Object

① 八进制：数字0开头，如077
② 十六进制：0x开头，用0-9,A-F表示，如0xFF或0XFF
③ 浮点数：11.2 11.1 // 不要拿小数的运算结果作比较
④ 科学计数法：var num = 5e-5 // 5*10的-5次方

所有编程语言中，小数时算不准确的，其他语言中，一般会对小数做处理，JS没有，所以不要拿小数的运算结果作比较

Infinity > Number.MAX_VALUE
Number.MIN_VALUE > 0

字符串必须用’或者"包含

俩边都是数字，+为加法的功能
俩边只要有字符串，+表示字符串的拼接

true 和 false

当一个变量没有赋值的时候，值就是undefined

null：表示一个空的对象

+	-	*	/	%
20 % 3 = 2  // 求余数，保留整数	
+ 号有拼接功能
-  *  /  % 只有算术的功能，如果有字符串，将字符串变成数字来算

= += -= *= /= %=

var num = 10;
var num = num + 10;
num %= 2  // num = num % 2

① 自增：++age，先让age+1，再返回结果；age++，先返回结果，再让age+1
② 自减：–a,先让a-1，再返回结果；a–，先返回结果，再让a-1

var a = 1;
var b = ++a + ++a;
console.log(b);	// 答案为5

① 与(&&)：只有俩个都为true，结果才为true
② 或(||)：只要有一个为true，结果就为true
③ 非(!)：取反

= 为赋值运算符，不是比较运算符
== 比较俩个值是否相等，不会比较类型
=== 全等，值相同，类型也相同

① ()最高
② 一元运算符：++ –
③ 算术运算符：* / % 高于 + -
④ 比较运算符
⑤ 逻辑运算符

① Number()
② parseInt() // parse：转换 interesting：整数
③ parseFloat() // 转换成浮点数
④ 直接运算：+0 -0

NaN：不是一个数字，NaN是number类型，表示一个没办法用数字表示的值

var age = '18';console.log(age - 0)	//  结果为数字18
console.log(isNaN(num))	// 返true说明是NaN，说明不是数字

① String() num = String(num)
② toString num = num.toString
③ 拼串（推荐）：num = num + ’ ’

① Boolean()
② 简单的方式(推荐)：!!

① undefined
② false
③ 0
④ “”(空字符串)
⑤ null
⑥ NaN

从上到下执行的代码就是顺序结构，程序默认就是由上到下顺序执行的。

① if语句：
if(条件){} if(){}else{} if(){}else if(){}else{}
② 三元运算符（条件满足为值一，不满足为值二）：
var 结果 = 条件 ? 值一 : 值二
③ switch-case // 每个case都有break

① if…else…：适用于范围的判断
② 三元运算符：只适用于非常简单的if…else…
③ switch…case：适用于具体值的判断

// if语句
var score = prompt('请输入自己的成绩');
if(score >= 90){
	console.log('A')
}else if(score >= 60){
	console.log('B')
}else{
	console.log('C')
}

// 三元运算符
var result = score >= 80 ? "优秀" : (score >= 60 ? "合格" : "不合格");
console.log (result);

// switch...case...
switch (new Date().getDay()) {
    case 0:
        day = "星期天";
        break;		// break 结束整个switch...case...语句
    case 1:
        day = "星期一";
         break;
    case 2:
        day = "星期二";
         break;
    case 3:
        day = "星期三";
         break;
    case 4:
        day = "星期四";
         break;
    case 5:
        day = "星期五";
         break;
    case 6:
        day = "星期六";
}

① while循环：
while(条件){
重复执行的代码，循环体
}
② do…while…：
do{
循环体
}while(条件)
③ for循环：
for(初始化语句; 判断条件; 自增或者自减){
循环体
}

① for循环：适用于有明确的循环次数
② while循环：适用于使用于不知道循环多少次的请求
③ do…while…：如果需要先执行一次，应该使用do…while…

// 数组的遍历
for(var i = 0; i <= arr.lengt-1; i++){
	console.log(arr[i]);
}

for(var i = 0; i < arr.length; i++){
	console.log(arr[i]);
}

for(var i = arr.length; i >= 0; i--){
	console.log(arr[i]);
}

值类型:简单数据类型或者基本数据类型 在存储时变量中存储的是值本身 因此叫做值类型
引用类型：复杂数据类型 在存储时变量中存储的仅仅是地址(引用) 因此叫做引用数据类型
（1） 数组
（2） 函数
（3） 对象

定义：有序的集合，内部可放多个元素（任意类型的）
(1) 创建数组：
① 构造函数的方式：

var arr = new Array();
var arr = new Array(100, 200, 300);

② 字面量的方式：

var arr = [];
var arr = [100, 200, 300];

(2) 数组的长度和下标：
arr[0] => 数组的第一个值
利用下标赋值：下标存在，修改值，不存在值时给数组增加这个值
下标不存在，返回undefined

(3) 给数组添加元素：
① arr[arr.length] = ‘元素1’
② arr.push() arr.push(‘元素2’)

// 冒泡排序
var arr = [7, 1, 2, 3, 4, 5, 6];
for(var j = 0; j < arr.length-1; j++){
	var flag = true;
	for(var i = 0; i < arr.length-1-j; i++){
		if(arr[i] > arr[i+1]){
			var temp = arr[i];
			arr[i] = arr[i+1];
			arr[i+1] = temp;
			flag = false;
		}
	}
	if(flag){
		break
	}
}

函数的三要素：函数名，参数，返回值
① 调用函数：函数名()
② 函数参数：形参，实参
③ 返回值：return
（1）声明函数的俩种方式：
① 函数声明：

function fn(){
	console.log('函数声明');
}
fn();

② 函数表达式(web的api中用的很多–注册事件)：

var fn1 = function(){
	console.log('函数表达式');
}
fn1();

二者的区别：
① function直接声明的函数，可以提升声明（预解析提升）
② 函数表达式必须先声明函数，才能调用

预解析：
① 提升所有的var声明，不会提升赋值
② 提升所有的函数的声明，不会提升调用
③ 如果变量名和函数名重名，函数优先
先预解析，代码再一步步执行（注意：不要让变量和函数名重名）

var fn = 12;
console.log(fn);		// 12
function fn(){
	console.log('好嗨森')
}
fn();		// 报错
// 变量声明和函数声明都会得到提升，但函数声明会最先得到提升，然后是变量声明。
// 对于代码var fn = 12来说，编译器看到的是两行代码var fn; fn = 12;第一个语句是声明语句，在编译阶段处理。第二个语句是赋值语句，在运行阶段处理。

（2）匿名函数（没有名字的函数）
① 调用1：赋值给变量，函数表达式
② 调用2：匿名函数自调用（沙箱–避免全局污染）

(function(window){
	// 代码写在函数内部不会造成全局污染
	// 在沙箱中开启严格模式
	"use strict";
	console.log('匿名函数的自调用');
})(window);

严格模式：
语法：‘use strict’
作用：让js引擎以更加严格的模式执行js代码
不能在严格模式中运行的代码：
① 变量必须显示声明
② 函数参数不能重名
③ 禁止使用八进制
④ 不能使用保留字作为变量名称：implements，interface，let，package，private，protected，public，static，yield
严格模式使用建议：不要在全局中开启严格模式，建议配合沙箱模式一起使用
注意：
① 只对当前作用域起作用
② 应在当前作用域最顶端使用’use strict’

（3）递归函数：把复杂的问题简单化
注意：递归函数一定要有结束条件

// 斐波那契数列
function getSum(n){
	if(n === 1){
		ruturn 1;
	}
	return getSum(n-1) + n;
}

定义：无序的键值对集合，用逗号隔开键值对。
在js中，对象的特征叫做属性；
在js中，对象的行为叫做方法。
（1）创建单个对象

// 利用系统提供的Object构造函数创建
var obj = new Object();
var obj = new Object({});
// 直接使用字面量
var obj = {};
var obj = {name = 'zs'};

（2）批量创建对象

// 工厂函数
function creatPerson(){
	var obj = {};
	obj.name = '工厂张三';		// 给新对象增加属性和方法
	return obj;				// 返回这个新对象
}
var zs = creatPerson();
// 构造函数：默认首字母大写
function Student(){
	// 给this增加属性和方法
	this.name = '构造李四'
}
var ls = new Student();			// 对象是new创建

工厂函数和构造函数的对比（工厂函数的缺点）：
① 需要自己创建对象
② 需要自己返回对象
③ 创建出来的对象全都是Object的对象模型，而构造函数可以匹配自定义的对象模型

构造函数的作用（实例化对象）：
给新创建的对象增加属性和方法

new在执行时会做四件事情：
① 在内存中创建一个新的空对象
② 让this指向这个新的对象
③ 执行构造函数里面的代码，给这个新的对象添加属性和方法
④ 返回这个新的对象(所以构造函数里面不需要return)

① 常用的内置对象：Math Date Array String arguments
② 其它内置对象：Number Boolean Object Function Error Regexp
（1）Math：提供了很多和数学运算相关的方法
圆周率：Math.PI
最值：Math.max() Math.min()
取整：
Math.ceil() // 向上取整
Math.floor() // 向下取整
Math.round() // 四舍五入
求绝对值（absolute）：Math.abs()
求次幂：Math.pow(a, b) // a的b次幂
求开方：Math.sqrt(9)
随机数（默认0到1之间的数）：Math.random

// 0-99的随机数：
var num = parseInt(Math.random()*(99 + 1))
console.log(num)

（2）Date：js内置的一个构造函数
用法1：new Date() // 创建一个当前时间
用法2：创建一个指定的时间，参数：指定的时间字符串

var time = new Date('2020-01-01 12:00:00');
console.log(time);		
// 输出结果：Wed Jan 01 2020 12:00:00 GMT+0800 (中国标准时间)

用法3：参数可以是年月日时分秒 // 月份从0开始，既0代表1月

var time = new Date(2020, 1, 2);
console.log(time);
// Sun Feb 02 2020 00:00:00 GMT+0800 (中国标准时间)

用法4：参数可以是时间戳（1970年1月1日距离现在过去的毫秒数）

var time1 = new Date(2020, 0, 1);
var time2 = new Date(1970, 0, 1);
console.log(time1-time2);		// 输出结果：1577836800000
var time3 = new Date(1577836800000);
console.log(time3);		
// Wed Jan 01 2020 08:00:00 GMT+0800 (中国标准时间)

年，月，日，星期，小时，分钟，秒的获取

var date = new Date();			
var year = date.getFullYear();		// 获取年份
var month = date.getMonth() + 1;	// 获取月份
var day = date.getDate();			// 获取日期
var week = date.getDay();			// 获取星期
var hour = date.getHours();			// 获取小时
var minute = date.getMinutes();		// 获取分钟
var second = date.getSeconds();		// 获取秒
console.log(year, month, day, week, hour, minute, second)

Date多与moment或者timeline插件配合使用，将时间转换为自己想要的格式
如moment插件（npm安装）：npm i moment
使用：moment(res).format(‘YYYY-MM-DD’)
（3）Array对象
☆ join：把一个数组中所有元素拼接成一个字符串，并返回字符串。

var arr = ['张三', '客串', '张飞'];
var result = arr.join('');
console.log(result);		// 输出结果：张三客串张飞

☆ push：给数组最后面添加一个或者多个元素。
☆ unshift：在数组的最前面添加一个值或者多个值。
push/unshift的返回值：添加后数组的长度。
☆ pop：删除数组最后一个元素。
☆ shift：在数组最前面删除一个元素。
pop/shift的返回值：删除的元素。

// 数组的push，unshift，pop，shift方法
var arr = ['张三', '张飞'];
var result = arr.push('关羽', '刘备');
console.log(result);			// 4
var result = arr.unshift('王五', '李四');
console.log(result);			// 6
var result = arr.pop();
console.log(result);			// 刘备
var result = arr.shift();
console.log(result);			// 王五

reverse：翻转一个数组，返回这个翻转后的数组

sort：默认按照unicode排序
arr.sort(function(a, b){return b - a})

var arr = [1, 2, 3];
var result = arr.sort(function(a, b){return b - a});
// 返回值大于0，交换位置
console.log(result);		// 输出结果：[3, 2, 1]

concat：合并俩个数组，原数组不改变，返回合并后的这个数组。

☆ slice(begin, end)截取数组
不传参数：浅拷贝原数组
传递一个begin
传递(begin, end)=>不包括end
☆ splice：在数组任意位置增加或者删除元素
splice(start, deleteCount, item1, item2)
从start删除指定个数，并且添加item1和item2

var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.slice(2), arr.slice(1, 3));	
//输出：[3, 4, 5, 6] 和[2, 3] 取start位置的值，不取end位置的值
var result = arr.splice(2, 2, 7, 8);
console.log(arr);			// 输出结果：[1, 2, 7, 8, 5, 6]
console.log(result);		// 输出结果：[3, 4]

indexof
arr.indexof(value)：获取value在数组第一次出现的下标
返回值：value第一次出现的位置，如果没有，返回-1
lastIndexof：从后往前查找，第一次出现的位置

// 数组去重：
var arr = [1, 1, 3, 2, 3]
console.log([...new Set(arr)])		// 输出结果：[1, 3, 2]

（4）String对象
基本包装类型：把简单类型包装成复杂类型（Number，Boolean，String）
由于js内部已将简单类型包装，故可调用复杂类型的属性和方法。

① Number对象：
tofixed：保留小数点位数
toString：转化为字符串

② Boolean对象：
toString：返回对象的字符串表示形式。

③ String对象的方法：
字符串所有的方法不改变字符串本身，需接受返回值
伪数组：可遍历（str.length，str[0]）
indexof和lastIndexof：获取字符串第一次出现的位置（从前往后和从后往前）

trim：去除字符串俩边的空格

toUpperCase()和toLowerCase()：全部转换成大写或者小写

☆ concat、slice：拼接和截取（与数组一样）
subString：截取字符串(string.substring(startIndex, endIndex))

☆ split：按照分隔符切割成一个数组，返回数组

// 字符串转换成数组
var str = 'a,b,c';
var arr = str.split(',');		
console.log(arr);			// 输出：["a", "b", "c"]
// 数组转换成字符串
var arr = [1, 2 ,3];
var str = arr.join('');
console.log(str);			// 输出：字符串123
// 翻转一个字符串：str.split('').reverse().join('');
var str = 'doog';
console.log(str.split('').reverse().join(''));	// 输出：good

replace(‘原先’，‘替换字符’)
（5）Arguments对象：所有函数都自带一个Arguments对象
作用：收集函数调用时传递的所有参数。