JavaScript学习笔记

在这里插入代码片提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

第一阶段

---

一、解释型语言和编译型语言

1、概述

翻译器翻译的方式有两种：一个是编译，另一个是解释两种方式之间的区别在于编译的时间点不同
编译器是在代码执行之前进行编译，生成中间代码文件
解释器是在运行时进行及时解释，并立即执行（当编译器以解释方式运行的时候，也称之为解释器）

2、执行过程

二、标识符、关键字、保留字

1.标识符

标识（zhi）符：开发人员为变量、属性、函数、参数取得名字

标识符不能是关键字或保留字。

2.关键字

关键字：是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。
包括：break、case、catch、continue、default、delete、do、else、finally、for、funtion、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、white、with等。

3、保留字

保留字：保留字∶实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。
包括：包括: boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package.volatile等。

三、算数运算

1、如何判断一个是为整数？

余数为0就说明这个数能被整除，这就是 **%**取余运算的主要用途

2、前置递增运算符：

++num 前置递增，就是自加1，类似于 num= num+1
使用口诀：先自加，后返回值

3、后置递增运算符：

num++ 后置递增，就是自加1，类似于 num= num+1
1.前置自增很后值自增如果单独使用效果是一样的
2.后置自增口诀：先返回原值，后自加1

var num = 10;
num++ //num=num+1   等同于 ++num
console.log(num)  //11
var age = 10;
console.log(age++ +10)  /先返回原值10,再跟10相加得： 20
console.log(age)  //11

四、逻辑运算

1、短路运算（逻辑中断）：

**短路运算原理:**当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值；
1.逻辑与（逻辑中断）
语法：表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

2.逻辑或（逻辑中断）很重要哦
语法：表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2

五、流程控制

结构图：

六、数字补0案例

使用三元运算符
代码如下（示例）：

var time propmt('请输入一个数字');
var result = time < 10 ? '0' + time : time;
alert(result)

七、九九乘法表案例

代码如下（示例）：

//九九乘法表
//一共有9行，但是每行的个数不一样，因此需要用到双重for循环
//外层的for循环控制行数9次，可以打印9行
//内层的for循环控制每行公式j
//核心算法：每一行公式的个数正好和行数一致，j<=i;
//每行打印完毕，都需要重新换一行

var str = '';
for(var i=1; i<=9; i++){
	for(var j=1; j<=i; j++){
		//1×1=1
		//str= str+'⭐';
		str+= j + '×' + i + '=' + i * j + '\t';
	}
	str += '\n';
}
console.log(str)

八、js隐式转化

数组转换成字符串，代码如下（示例）：

//将数组['red','green','blue','pink']转换成字符串，并用 | 或者其他符号分割
//1.需要一个新变量用来存放转换后的字符串 str
//2.遍历原来的数组，分别把里面的数据取出来，加到字符串里面
//3.同时在后面多加一个分隔符
var arr = ['red','green','blue','pink'];
var str = '';
var sep = '\';
for(var i=0; i<arr.length; i++){
str += arr[i] + sep
}
console.log(str)

筛选数组方法1，代码如下（示例）：

//将数组[2,7,45,64,0,1,6]中大于等于10的元素筛选出来，放入新数组
//1.声明一个新的数组用来存放新数据 newArr
//2.遍历原来的旧数组，找出大于等于10的元素
//3.依次追加给新数组 newArr
var arr = [2,7,45,64,0,1,6];
var newArr= [];
var j = 0;
for(var i=0; i<arr.length; i++){
 if(arr[i]>=10){
 newArr[j] = arr[i];
 j++;
 }
}
console.log(newArr)

筛选数组方法2，代码如下（示例）：

//将数组[2,7,45,64,0,1,6]中大于等于10的元素筛选出来，放入新数组
//1.声明一个新的数组用来存放新数据 newArr
//2.遍历原来的旧数组，找出大于等于10的元素
//3.依次追加给新数组 newArr
var arr = [2,7,45,64,0,1,6];
var newArr= [];
for(var i=0; i<arr.length; i++){
 if(arr[i]>=10){
 //新数组的索引号应该是从0开始，依次递增
 newArr[newArr.length] = arr[i]
 }
}
console.log(newArr)

翻转数组，代码如下（示例）：

//将数组['red','green','blue','pink','purple']的内容反过来存放
//1.声明一个新数组用来存放新数据 newArr
//2.遍历原来的旧数组，找出大于等于10的元素
//3.依次追加给新数组 newArr
var arr = ['red','green','blue','pink','purple'];
var newArr= [];
for(var i=arr.length-1; i>=0; i--){
 newArr[newArr.length] = arr[i]
 }
}
console.log(newArr)

冒泡排序，代码如下（示例）：

//冒泡排序
var arr = [4,3,5,1,2,8,6,7];
for(var i=0; i<=arr.length-1; i++){  //外部循环管躺数
	for(var j=0; j<= arr.length-i-1){ //内部循环管每一趟的交换次数
		//内部交换两个数的值，前一个和后一个元素进行相比较
		if(arr[j] < arr[j+1]){
			var temp = arr[j];
			arr[j] = arr[j+1];
			arr[j+1] = temp;
		}
	}
}

js基础

1.

let a = [1]
let b = a
console.log(a)  // 1
console.log(b)  // 1

b[0] = 2 
console.log(a) // 2
console.log(b) // 2

这就是声明了一个数组a

这是把a赋值给b,但是现在a和b指向同一个内存

这样a是不是也变了
2.

let a = 'sss'
let b = a
console.log(a)  // sss
console.log(b)  // sss

b = 'xxx'
console.log(a) // sss
console.log(b) // xxx

第二行 let b = a，这一行是把a的值复制一份再给b

而数组不会复制，就是把 [1] 在内存中的位置告诉了b

所以对于数组来说，a，b指向同一个值，但是字符串a，b各自有自己的值

九、函数参数

1、形参和实参

// 1.利用函数的参数实现函数重复不同的代码；
// function 函数名(形参1，形参2...){   //在声明函数的小扣号里面的是 形参（形式上的参数）
}
// 函数名（实参1，实参2...） //在函数调用的小括号里面的是 实参 （实际的参数）

2. // 形参和实参执行的过程
//声明函数
function cook(aru){ //形参是接受实参的 aru = '酸菜鱼' 形参类似于一个不需要声明的变量
console.log(aru)
}
// 调用函数 （函数不调用是不执行的）
cook('酸菜鱼');
cook('猪蹄火锅');

//3.函数的参数可以有也可以没有，个数不限

2.利用函数求任意两个数的和以及累加和

// 1.利用函数求任意两数的和
function getSum(num1,num2){
console.log(num1 + num2);
}
getSum(1,5);
getSum(3,6)
// 2.利用函数求任意两个数之间的和
function getSums(start,end){
	var sum = 0;
	for(var i = start;i <= end; i++){
	sum += i;
	}
}
getSums(1,100);
getSums(1,10)
// 3.注意点：
// （1）多个参数之间用逗号（，）隔开
// （2）形参可以看成是不用声明的变量

3.函数形参和实参匹配问题

// 函数形参和实参个数匹配
function getSum(num1,num2){
	console.log(num1 + num2)
}
// 1.如果形参的个数与实参的个数一致，则正常输出结果
getSum(1,2)
// 2.如果实参的个数多余实参的个数 会取到形参的个数
getSum(1,2,3)
// 3.如果实参的个数小于实参的个数 多余的形参定义为undefined 结果就是NaN
// 形参可以看成是一个不用声明的变量 num2 是一个变量，但是没有接收值 结果就是undefined
getSum(1) //NaN

//建议 尽量让实参的个数与形参相匹配

4.函数的返回值

// 1.函数的返回值格式
function 函数名(){
	return 需要返回的结果
}
函数名();
//（1）我们函数只是实现某种功能，最终的结果需要返回给函数的调用者 函数名() 通过 return 实现的
//（2）只要函数遇到 return 就把后面的结果返回给函数的调用者 函数名() = return后面的结果
//（3）代码验证
getResult(){
	return 666;
}
console.log(getResult())  // 666   getResult() = 666

function cook(aru){
	return aru;
}
console.log( cook('酸菜鱼') )
//（4）求任意两数之和
function getsum(num1,num2){
	return num1+num2;
}
console.log( getsum(4,6) )
//（5）求任两数的最大值
function getMax(num1,num2){
	// if(num1>num2){
	//	return num1
	//}else{
	//	return num2
	//}
	return num1 > num2 ? num1 : num2
}
console.log(getMax(1,7));		//7
console.log(getMax(56,22))		//56

5.arguments的使用

1、当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中 ,arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
2、arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点:
具有length属性
按索引方式储存数据
不具有数组的push , pop等方法

// arguments的使用︰只有函数才有arguments对象―而且是每个函数都内置好了这个
argumentsfunction fn {x
	console.log(arguments);1/里面存储了所有传递过来的实参arguments=[1,2,3,4]
	console.log( arguments.length);
	console.iog(arguments[2]);
//我们可以按照数组的方式遍历arguments
for (var i =e; i < arguments.length; i++) {
	console.log(arguments[i]);
}
fn(1,2,3,4);
fn(1,2,3,4,5,6)

案例使用

// 1. 利用函数求任意个数的最大值
function getMax(){
	var max = arguments[0];
	for(var i=0;i<arguments.length;i++){
		if (argumepts[i]>max) {
			max =arguments[i];
		}
	}
	return max;
}
console..log(getMax(1,2,3));
console..log(getMax(1,2,3,6,8));
console..log(getMax(12,85,97,8))

// 2. 利用函数翻转数组 reverse 翻转
function reverse(arr) {
	var newArr = [];
	for (var i = arr.length - 1; i >=e; i--){
	newArr[newArr. length] = arr[i];
	}
	return newArr;
}
var arr1 = reverse([5,8,97]);
console.log(arr1);
var arr2 = reverse([ ' red' , 'blue', 'pink']);
console.log(arr2);

// 3. 利用函数封装方式 对数组进行排序 --冒泡排序 sort
function sort(arr) i
	for (var i = e; i < arr.length - 1; i++){
		for (var j = e; j < arr.length - i - 1;j++){
			if (arr[j] > arr[j + 1]){
				var temp = arr[i];
				arr[j] = arr[j + 1];
				arr[j +1]= temp;
			}
		}
	}
	return arr;
}
var arr1 = sort([85,97,11,19,520]);
console.log(arr1);
var arr2 = sort([66,88,77,99,32]);
console.log(arr2);

// 4. 判断闰年
function isRunYear(year) i
	// 如果是闰年我们返回true否则返回 false
	var flag = false;
	if (year % 4 == e && year % 100 l=0 |l year % 400 == e){
		flag = true;
	}
	return flag;
}
console.log(isRunYear(2000));
console.log(isRunYear(1999));

// 5. 函数可以互相调用
// 用户输入年份，输出当前年份2月份的天数
function backDay() {
	var year = prompt(·请您输入年份: ');
	if (isRunYear(year)) { //调用函数需要加小括号
	alert( "当前年份是闰年2月份有29天");
	else {
	alert( '当前年份是平年2月份有28天");
	}
}
backDay();

函数的声明方式

//函数的2中声明方式
// 1.利用函数关键字自定义函数(命名函数)
function fn() {
}
fn(); 
// 2.函数表达式(匿名函数)T
// var变量名= function() {}; 
var fun = function(aru) {
	console.log('我是函数表达式' );
	console .1og(aru);
}
fun( '一博王炸');
// (1) fun是变量名不是函数名
// (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达式里面存的是函数
// (3) 函数表达式也可以进行传递参数

十、作用域

通常来说, 一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这
个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

1.JavaScript作用域

// 1.JavaScript作用域：就是代码名字 (变量)在某个范围内起作用和效果目的是为了提高程序的可靠性更重要的是减少命名冲突
// 2. js的作用域(es6) 之前:全局作用域 局部作用域
// 3.全局作用域: 整个script标签或者是个单独的js文件
var num =10; I
var num = 30;
console . log(num);
// 4.局部作用域 (函数作用域) 在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用
function fn() {
//局部作用域
var num = 20;
	console .1og(num); 
}
fn();

2. 变量的作用域

2.1 变量作用域的分类

在JavaScript中，根据作用域的不同，变量可以分为两种:
全局变量
局部变量

2.2 全局变量

在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。●全局变量在代码的任何位置都可以使用
在全局作用域下var声明的变量是全局变量
特殊情况下，在函数内不使用var声明的变量也是全局变量(不建议使用)

var num = 10;  // num就是一个全局变量
console. log(num);
function fn() {
	console.1og(num);
}
fn();
// console . log(aru);

2.3 局部变量

在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
局部变量只能在该函数内部使用
在函数内部var声明的变量是局部变量
函数的形参实际上就是局部变量

// 2.局部变量 在局部作用域下的变量后者在函数内部的变量就是局部变量
//注意: 函数的形参也可以看做是局部变量
function fun(aru) {
	varnum1=10; //num1就是局部变量只能在函数内部使用
	num2 = 20;
}
fun();
// console .1og( num1);
// console . log(num2);

2.3 全局变量和局部变量的区别

全局变量:在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
局部变量:只在函数内部使用，当其所在的代码块被执行时，会被初始化;当代码块运行结束后，就会被销毁，因此更节省内存空间

了解：

// js中没有块级作用域 js的作用域:全局作用域局部作用域 现阶段我们js 没有块级作用域
//我们js也是在es6的时候新增的块级作用域
//块级作用域{}
if {} for {}
//  java
 if(xx) {
	int num = 10;
 }
//外面的是不能调用num的
// js
if(3<5){
	var num =10;
}
console.1og(num);

2.4. 作用域链

// 作用域链:内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值  			   这种结构我们称为作用域链就近原则
var num = 10;
function fn(){ 		//外部函数
	var num = 20;
	function fun() {	 //内部函数
		console.log(num);
	}
	fun();
}
fn();

十一 JavaScript 预解析

1. 预解析

JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步: 预解析和代码执行。

// 1问
// console.log(num);   // num is not defined

// 2问
console.log(num);  // undefined  坑 1
var num = 10;
//相当于执行了以下代码
var num;
console.log(num);
num = 10;


// 3问
fn();
function fn() {
	console.log(11);
}
// 执行一下代码   函数提升 
function fn() {
	console.log(11);
}
fn() //所以不报错，正常输出结果

// 4问
fun();  //报错 坑2  
var fun = function(){
	console.log(22);
}
//函数表达式调用必须写在函数表达式的下面
//相当于执行了以下代码
var fun;
fun();
fun = function() {
	console .1og(22);
}

// 1.我们js引擎运行js分为两步: 预解析代码执行
// (1). 预解析js引擎会把js里面所有的var 还有function 提升到当前作用域的最前面
// (2). 代码执行 按照代码书写的顺序从上往下执行
// 2.预解析分为变量预解析(变量提升) 和函数预解析(函数提升)
// (1) 变量提升就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
// (2) 函数提升就是把所有的函数声明提升到当前作用域的最前面 不调用函数

预解析案例

//案例1
var num=10;
fun();
function fun() {
	console.1og(num);   //结果就是 undefined
	var num = 20;
}

//相当于执行了以下操作
var num;
function fun() {
	var num;
	console.log(num);
	num = 20;
}
num=10;
fn();

//案例2
var num = 10;
function fn() {
console. log (num) ;
var num = 20;
console. log (num) ;
}
fn();

//相当于以下代码
var num;
function fn() {
	var num;
	console . log(num);		//undefined
	num = 20;
	console. log(num);		//20
}
num = 10;
fn();

//案例3
var a=18;
f1();
function f1() {
	var b=9;
	console.log(a);
	console .log(b);
	var a='123';
}

//相当于以下代码
var a;
function f1() {
	var b;
	var a;
	b=9;
	console.log(a);		//undefiend
	console.log(b);		//9
	a='123';
}
a=18;
f1();

//案例4
f1();
console.1og(c);
console.1og(b);
console.1og(a);
function f1() {
	var a=b=C=9;
	console.1og(a);
	console.log(b);
	console.1og(c);
}
//执行以下代码
function f1() {
	var a;
	a=b=C=9;
	//相当于： var a=9;b=9;c=9; b和c直接赋值 没有var声明 当全局变量看
	//集体声明： var a = 9，b =9，C= 9;
	console.1og(a);		//9
	console.log(b);		//9
	console.1og(c);		//9
}
f1();
console.1og(c);		//9
console.1og(b);		//9
console.1og(a);		//报错 a是局部变量

十二 对象

1. 对象

1.1 什么是对象？

在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。
● 属性:事物的特征,在对象中用属性来表示(常用名词)
● 方法:事物的行为,在对象中用方法来表示(常用动词)

1.2 为什么需要对象？

JS的对象表达结构更清晰，更强大

2.创建对象的三种方式

在JavaScript中,现阶段我们可以采用三种方式创建对象( object) :
●利用字面量创建对象
●利用 new Object创建对象
●利用构造函数创建对象

2.1 利用字面量创建对象

对象字面量
就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法。{} 里面采取 键值对 的形式表示
● 键:相当于属性名
● 值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)

// 1.利用对象字面量创建对象{}
//var obj={};//创建了一个空的对象
var obj={
	uname: '张三疯'
	age: 18,
	sex:'男',
	sayHi: function() {
	console.log('hi~');
	}
}
// (1)里面的属性或者方法我们采取键值对的形式 键属性名:值属性值
// (2) 多个属性或者方法中间用逗号隔开的
// (3)方法冒号后面跟的是一个匿名函数

// 2.使用对象
// (1). 调用对象的属性我们采取对象名.属性名.我们理解为的
	console.log(obj . uname );
// (2). 调用属性还有一种方法对象名['属性名']
	console.1og(obj[' age ']);
// (3) 调用对象的方法sayHi  对象名.方法名()千万别忘记添加小括号
	obj.sayHi();

对象的调用
●对象里面的属性调用:对象,属性名, 这个小点.就理解为"的”
●对象里面属性的另-一种调用方式:对象[‘属性名’] ,注意方括号里面的属性必须引号,我们后面会用
●对象里面的方法调用:对象.方法名() , 注意这个方法名字后面一定加括号

console.log (star. name)		//调用名字属性
console.log (star['name'])		// 调用名字属性
star.sayHi () ;		//调用sayHi 方法,注意，一定不要忘记带后面的括号

变量、属性、函数、方法总结
● 变量:单独声明赋值，单独存在
● 属性:对象里面的变量称为属性，不需要声明，用来描述该对象的特征
● 函数:单独存在的，通过“函数名0”的方式就可以调用
● 方法:对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

var num = 10;
var obj = {
	age: 18,
	fn: function() {}
	}
function fn() {
}
console.log(obj.age);

2.2 利用 new Object 创建对象

跟我们前面学的 new Array() 原理一样

// new Object 创建对象
var obj = new Object();		//创建了一个空的对象
obj.name = '张三';
obj.age = '18';
obj.sex = '男';
obj.sayHi = function(){
	console.log('hi~');
}
//（1）我们是利用 等号 = 赋值的方法 添加对象的属性和方法
//（2）每个属性和方法之前用 ; 分号结束
console.log(obj.name);
console.log(obj['sex']);
obj.sayHi();

2.3 构造函数创建对象

前提：
为什么需要使用构造函数？

1. 就是因为我们的前两种创建对象的方式一次只能创建一个对象
2. 因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 ，我们只能复制
3. 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个个函数称为 构造函数
4. 又因为这个函数不一样，里面封装的不是普通代码，而是 对象
5. 构造函数 就是 把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

var ldh = {
	name:'刘德华',
	age:55,
	sing: function(){
		console.log('冰雨')
	}
}
var zjl = {
name:'周杰伦',
	age:50,
	sing: function(){
		console.log('青花瓷')
	}
}

构造函数︰是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
构造函数的语法格式：
（1） 声明
function 构造函数名(){
this.属性 = 值;
this.方法 = function(){}
}
（2 ）调用
new 构造函数名();

// 1.构造函数 泛指的某一大类 他类似于 java 语言里面的 类(class)
function Start(uname, age, sex){
	this.name = uname;
	this.age = age;
	this.sex = sex;
	this.sing = function(sang){
		console.log(sang);
	}
}
//2.对象 特指 是一个具体的事物 
var ldh = new Start('刘德华','40','男');	//调用函数返回的是一个对象
console.log(typeof ldh);
console.log(ldh.name);		// 刘德华
console.log(ldh['sex]);		// 40
ldh.sing('冰雨')

var zxy = new Start('张学友',45,'男')
console.log(zxy.name);		// 张学友
console.log(zxy.age);		// 45
zxy.sing('李香兰')

注意 ：
（1）、构造函数名字首字母要大写
（2）、构造函数不需要 return 就可以返回结果
（3）、我们构造函数必须使用 new
（4）、我们只要 new Start(）调用函数就创建一个对象 ldh()
（5）、我们的属性和方法前面必须添加 this

2.4 构造函数和对象的区别

1.构造函数，如Stars0，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类( class )
2.创建对象，如new Stars)，特指某☆个，通过 new关键字创建对象的过程我们也称为对象实例化

new关键字执行过程

1. new 构造函数可以在内存中创建一个空的对象
2. this就会指向刚才创建的空对象
3. 执行构造函数里面的代码，给这个给空对象添加属性和方法
4. 返回这个对象 （所以构造函数里面不需要return）

2.5遍历对象 for in

for…in语句用于对数组或者对象的属性进行循环操作。
for in 遍历我们的对象
for(变量in 对象){

}

//遍历对象
var obj = {
	name:'pink',
	age: 18,
	sex:'男'
}
// console.log(obj.name);
// console.log(obj.age);
//console.log(obj.sex);
for (var k in obj) {
console.log(K); 		// k变量输出得到的是属性名
console.log(obj[k]); 	// obj[k]得到是属性值
}

注意：我们使用 for in里面的变量我们喜欢写k或者key

十三：内置对象

1.内置对象

（1）JavaScript 中的对象分为3种:自定义对象、内置对象、浏览器对象
（2）前面两种对象是JS基础内容，属于ECMAScript;第三个浏览器对象属于我们JS独有的，我们JS API讲解
（3）内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法)
（4）内置对象最大的优点就是帮助我们快速开发
（5）JavaScript提供了多个内置对象:Math、Date . Array、string等

2.Math对象

Math数学对象不是个构造函数 ，所以我们不需 要new来调用而是直接使用里面的属性和方法即可

console.log(Math.PI); 					//一个属性圆周率
console.log(Math. max(1, 99, 3)); 		// 99
console.log(Math.max(-1, -10)); 		// -1
console.log(Math.max(1, 99，'pink老师'));	 // NaN
console.log(Math.max());				 // -Infinity

2.1 封装自己的数学对象

利用对象封装自己的数学对象，里面有PI,最大值和最小值

var myMath = {
	PI: 3.141592653 ,
	max :function() {
		var max = arguments[0];
		for (var i = 1; i < arguments.length; i++) {
			if (arguments[i] > max) {
				max = arguments[i ]; 
			}
		}
	return max ;
	},
	min:function() {
		var min= arguments[0];
		for (var i = 1; i < arguments.length; i++) {
			if (arguments[i] < min) {
				min= arguments[i ]; 
			}
		}
	return min;
	}
}
console .log(myMath.PI);
console . log(myMath.max(1, 6, 9,85));
console .log(myMath.min(1, 8, 9,85));

2.2 Math的绝对值和三个取整值

（1）绝对值方法

console.log(Math.abs(1)); // 1
console .log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); //隐式转换会把字符串型-1 转换为数字型
console. log(Math. abs('pink' )); // NaN 

（2） 三个取整方法

// (1) Math.floor() 地板向下取整 往最小了取值
console. log(Math. floor(1.1)); // 1
console . log(Math. floor(1.9)); // 1
// (2) Math.ceil() ceil 天花板向上取整 往最大了取值
console. log(Math. ceil(1.1)); // 2
console. log(Math.ceil(1.9)); // 2

2.3 Math的随机整数

Math的随机整数方法 random() 返回一个随机的小数 0=< x <1 ，这个方法里面不跟参数

// 代码验证
console .1og(Math. random());
// 我们想要得到两个数之间的随机整数并且包含这2个整数
// Math. floor(Math. random() * (max - min + 1)) + min;
function getRandom(min, max) {
	return Math. floor (Math. random() * (max - min + 1)) + min;
}
console . log(getRandom(1, 10));
// 5.随机点名
var arr = ['张三', '张三丰', '张三疯子','李四', '李思思','pink老师'];
// console. log(arr[0]);
console .1og( arr [ getRandom(0, arr .length - 1)]);

案例：
题目：程序随机生成一个1~ 10之间的数字,并让用户输入-一个数字，
1.如果大于该数字,就提示，数字大了,继续猜;
2.如果小于该数字,就提示数字小了。继续猜;
3.如果等于该数字,就提示猜对了,结束程序。
分析：
①随机生成-个1~ 10的整数我们需要用到Math.random0方法。
②需要一直猜到正确为止,所以-直循环。
③用while 循环合适更简单。
④核心算法:使用if else if多分支语句来判断大于、小于、等于。

function getRandom(min, max) {
	return Math. floor (Math . random() * (max - min + 1)) + min;
}
var random = getRandom(1, 10);
while (true) { //死循环
	var num = prompt('你来猜?输 入1~10之间的一个数字');
	if (num > random) {
		alert('你猜大了');
	} else if (num < random) {
		alert('你猜小了');
	} else {
		alert('你好帅哦，猜对了');
		break; // 退出整个循环结束程序
	}
}

3.日期对象

3.1 Data概述

（1）Date对象和Math对象不一样，它是一个构造函数，所以我们需要实例化后才能使用
（2）Date实例用来处理日期和时间

3.2 Data()方法使用

1.获取当前时间必须实例化

var now = new Data();
console.log(now)

2.Data构造函数的参数

// 1．使用Date如果没有参数返回当前系统的当前时间var date = new Date();
	console.log(date);
// 2．参数常用的写法数字型 2019,10，01或者是字符串型‘2019-10-1 8:8:8'
var date1 = new Date(2019,10,1);
console.log(date1); //返回的是11月不是10月
var date2 = new Date( " 2019-10-1 8:8:8');
console.log(date2);

3.3 格式化日期年月日

var data = new Data();			
console.log(data.getFullYear());	//返回当前日期的年
console.log(data.getMonth()+1);		//月份 返回的月份比实际小一个月，所以记得月份 +1 
console.log(data.getDate());	//返回的是几号	
console.log(data.getDay());		//周一返回的是1，周六返回的是6，但是周日返回的是 0

//我们输出一个 2021年2月22号 星期一
var year = data.getFullYear();
var month = data.getMonth() +1;
var datas = data.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
var day = data.getDay();
console.log('今天是：' + year + '年' + month +'月' +datas+ '日' +arr[day])

//格式化日期时分秒
var date = new Date();
console.log(date.getHours());  	//时
console.log(date.getMinutes();	//分
console.log(date.getseconds();	//秒
//要求封装一个函数返回当前的时分秒格式08:08:08
function getTimer(){
	var time = new Data();
	var h = time.getHours();
	h = h < 10 ? '0' + h : h;
	var m = time.getMinutes();
	m = m < 10 ? '0' + m : m;
	var s = time.getSeconds();
	s = s < 10 ? '0' + s : s;
	return h + ':' + m + ':' + s;
}
console.log(getTimer());

3.4 获取日期的总的毫秒（时间戳）

Date对象是基于1970年1月1日(世界标准时间)起的毫秒数
我们经常利用总的毫秒数来计算时间，因为它更精确

//获取Data总的毫秒数 不是当前时间的毫秒数 ，而是距离1970年1月1号过了多少毫秒数
//1.通过 valueOf()  getTime()
var data = new Date();
console.log(data.valueOf());
console.log(data.getTime());
//2.简单的写法（最常用的）
var data1 = +new Date();	//+new Date() 返回的就是总的毫秒数
//3.H5 新增的 获取总的毫秒数
console.log(Date.now());

3.5 倒计时案例

（1）案例分析
核心算法∶输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒
相减，比如05分减去25分，结果会是负数的。
用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时
间的毫秒数。
把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换为时分秒)
转换公式如下:
d = parselnt(总秒数/60/60/24); 计算天数
h = parselnt(总秒数/60/60%24) 计算小时
m = parselnt(总秒数/60 %60); 计算分数
s = parseInt(总秒数%60); 计算当前秒数
（2）代码：

function countDown(time){
 var nowTime = +new Date();		//返回的是当前时间总的毫秒数
 var inputTime = +new Date(time);		//返回的是用户输入时间总的毫秒数
 var times = (inputTime - nowTime) /1000; 	//times是剩余时间总的秒数
 var d = parseInt(times / 60 / 60 / 24)		//天
 d = d < 10 ? '0' + d : d;
 var h = parseInt(times / 60 / 60 % 24)		//时
 h = h < 10 ? '0' + h : h;
 var m = parseInt(times / 60 % 60)		//分
 m = m < 10 ? '0' + m : m;
 var s = parseInt(times % 60)
 s = s < 10 ? '0'+ s : s;
 return d + '天' + h + '时' + m + '分' + s +'秒'
}
console.log(countDown(2020-2-24 18:00:00''));

4.数组对象

4.1 创建数组的两种方式

// 1.利用数组字面量
var arr =[1,2,3];
console. log(arr[0]);
// 2.利用 new Array()
var arr1 = new Array();		//创建一个空的数组
var arr2 = new Array(2);		//这个2表示 数组的长度为2 里面有2个空的数组元素
var arr3 = new Array(1,2,3)		// 等价于 [1,2,3] 表示有三个数组元素 1，2，3

4.2 检测是否为数组的两种方法

（1）instanceof() 运算符

var arr = [];
var obj = {};
console.log( arr instanceof Array );	//true
console.log( obj instanceof Array );	//false

（2） Array.isArray(参数); H5新增的方法，ie9以上版本支持

console.log(Array.isArray(arr));	//true
console.log(Array.isArray(obj));	//false

4.3 添加数组元素

//添加删除数组元素方法
// 1. push() 在我们数组的末尾添加一个或者多个数组元素 push推
var arr = [1, 2, 3];
// arr. push(4, ' pink'); 
console.log(arr .push(4, ' pink'));
console .log(arr);
// (1) push是可以给数组尾部追加新的元素
// (2) push() 参数直接写数组元素就可以了
// (3) push完毕之 后，返回的结果是 新数组的长度
// (4) 原数组也会发生变化

// 2. unshift 在我们数组的开头添加一个或者多个数组元素
console. log(arr .unshift('red', ' purple '));
console .1og(arr);
// (1) unshift是可以给数组前面追加新的元素
// (2) unshift() 参数直接写数组元素就可以了
// (3) unshift完毕之后，返回的结果是新数组的长度
// (4) 原数组也会发生变化

//3.pop()它可以删除数组的最后一个元素
console.log(arr .pop());
console.log(arr);
// (1) pop是可以删除数组的最后一个元素记住一 次只能删除个元素
// (2) pop() 没有参数
// (3) pop完毕之后， 返回的结果是删除的那个元素
// (4) 原数组也会 发生变化

// 4. shift() 它可以删除数组的第个元素
console.log(arr .shift());
console.log(arr);
// (1)shift是可以删除数组的第一个元素记住一次只能删除一个元素
// (2) shift() 没有参数
// (3) shift完毕之后，返回的结果是删除的那个元素
// (4)原数组也会发生变化

4.4 数组排序

//1.翻转数组
var arr = [ 'pink', 'red', 'blue'];
arr .reverse();
console.log(arr);
// 2.数组排序(冒泡排序)
var arr1 = [3, 4, 7, 1];
arr1.sort();
console.log(arr1);

注意： 当数组中的元素是 [1,16,5,45,15]这种的话排序就有问题
结果是 1,15,16,5,45这种
解决方法：

var arr2 =  [1,16,5,45,15];
arr2.sort(function(a,b)){
	//return a-b;		//按照升序的方式排列
	return b-a;			//按照降序的方式排列	
}

4.5 获取数组元素的索引

（1）indexof( 数组元素)
返回数组元素索引号方法 indexof( 数组元素) 作用就是 返回该数组元素的索引号 从前面开始查找
它只返回第一个满足条件的索引号
它如果在该数组里面找不到元素，则返回的是-1

// var arr = ['red',' green','blue','pink', 'blue ' ];
var arr=['red','green', ' pink' ];
console.log(arr.indexOf( 'blue'));

（2）lastIndexOf(数组元素)
返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是 返回该数组元素的索引号 从后面开始查找
它只返回后面查找的第一个满足条件的索引号
它如果在该数组里面找不到元素，则返回的是-1

var arr =['red', ' green','blue ''pink', 'blue' ];
console . log(arr.lastIndexOf('blue')); // 4

4.6 案例：数组去重（重点）

有一个数组 [‘a’,‘r’,‘e’,‘s’,‘a’,‘b’,‘s’,‘c’,‘e’,‘a’]，要求去除数组中重复的元素
案例分析:

①目标：把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留-一个,放到新数组中去重；
②核心算法：我们遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加；
否则不添加。
**③我们怎么知道该元素没有存在？**利用 新数组indexOf(数组元素) 如果返回时-1 就说明新数组里面没有改元素；
旧数组 [’ a ', ’ r ', ’ e ', ’ s ', ’ a ', ’ b ', ’ s ', ’ c ', ’ e ', ’ a ']
新数组 []

//封装一个去重的函数
unique(arr){
  var newArr = [];
  for(var i=0; i< arr.length;i++){
    if(newArr.indexOf(arr[i]) ===-1 ){
      newArr.push(arr[i])
    }
  }
  return newArr;
}

var demo = this.unique(['a','r','e','s','a','b','s','c','e','a']);
console.log('demo',demo)

4.7 数组转化为字符串

(1) toString()：把数组转化成字符串，逗号分隔每一项；返回的是字符串
(2) join(‘分隔符’)：用于把数组中的所有元素转换成一个字符串； 返回的是字符串

// toString()
var arr = [1,2,3]
console.log(arr.toString());	//1,2,3

//join('分隔符')
var arr1 = ['red','pink','yellow'];
console.log(arr1.join());	// red,pink,yellow
console.log(arr1.join('-'));	//red-pink-yellow
console.log(arr1.join('&'));	//red&pink&yellow

5. 字符串对象

5.1 基本包装类型

为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型: String. Number和 Boolean.
基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。

//下面代码有什么问题?
var str = 'andy' ;
console. log (str. length) ;

按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是因为js会把
基本数据类型包装为复杂数据类型,其执行过程如下:

// 1.生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2.赋值给我们声明的字符变量
str = temp;
// 3.销毁临时变量
temp = null;

5.2 字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

var str = 'abc' ;
str ='hello';
//当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中
//重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
//由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str = "";
for (var i = 0; i < 100000; i++){
	str += i;
}
console.log (str);
//这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间

5.3 根据字符返回位置

根据字符返回位置 str.indexof (‘要查找的字符’，[起始的位置])

//字符串对象
var str = '改革春风吹满地，春天来了';
console.log(str.indexof('春'));
console.log(str.indexof('春',3));	//从索引号是 3 的位置开始往后查找

案例： 返回字符串位置
查找字符串 "abcoefozgossztofo"中所有 o 出现的位置和次数
思路：
（1）核心算法：先查找第一个o出现的位置
（2）然后 只要 indexOf 返回的结果不是 -1 就继续往后查找
（3）因为 indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加一，然后继续查找

var str = 'abcoefozgossztofo';
var index = str.indexOf('0');
var num = 0;
while( index !== -1 ){
	console.log(index);
	num++;
	index = str.indexOf('o', index+1 );
}
console.log('o 出现的次数是：' + num)

5.4 根据位置返回字符(重点)

// 1. charAt(index)	根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));
// 遍历所有的字符
for(var i = 0 ;i < str.length; i++){
	console.log(str.charAt(i))
}

// 2. charCodeAt(index)		返回相应索引号的字符ASCII值	目的：判断用户按下了那个键
console.log( str.charCodeAt(0) );	//97

// 3. str[index] H5新增的
console.log(str[0]);	//a

5.5 案例： 统计出现次数最多的字符(重点)

案例：返回字符位置
判断一个字符串 ‘abcoSocorrofftoc’ 中出现次数最多的字符，并统计次数
（1）核心算法：利用 charAt() 遍历这个字符串
（2）把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就 +1。
（3）遍历对象，得到遍历最大值和该字符

var str = 'abcosocoroftoc'
var o = {}
for(var i=0; i< str.length; i++){
	var charts = str.charAt(i);	//charts 是字符串中的每一个字符
	if(o[charts]){		// o[charts] 得到的是属性值
		o[charts]++;
	}else{
		o[charts] = 1
	}
}
console.log('o的值',o)

// 2.遍历对象
var max = 0;
var ch = '';
for(var k in o){
	// k 得到的是属性名
	// o[k] 得到的是属性值
	if(o[k] > max){
		max = o[k];
		ch = k;
	}
	console.log('出现的次数',max);
      console.log('出现次数最多的字符'+ch)
}

5.6 字符串操作方法(重点)

// substr('截取的起始位置','截取几个字符')
var str = '改革春风吹满地';
console.log(str.substr(2,2))	//第一个2是索引号，第二个2是从第几个开始

//替换字符串及转换为数组
// 1.替换字符 replace('被替换的字符','替换的字符') 他只会替换第一个字符
var str = 'pink';
console.log(str.replace('i','o'));
// 有一个字符串 'abcofoscodofo' 要求把里面所有的 o 替换为 *
var str1 = 'abcofoscodofo';
while(str1.indexOf('o') !== -1){
	str1 = str1.replace('o','*')
}
console.log(str1)

// 2.字符转化为数组 split('分隔符')		前面我们学过 join 把转换为字符串
var str2 = 'red,pink,blue';
console.log(str2.split(','))
var str3 = 'red&pink&blue';
console.log(str3.split('&'))

6.简单数据类型和复杂数据类型

6.1 简单类型和复杂类型

简单类型：又叫基本数据类型/值类型
复杂类型： 又叫引用类型
（1）、值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此也叫做值类型:
string，number，Boolean，undefine，null
（2）、引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型通过 new 关键字创建的对象（系统对象，自定义对象），如：object，Array、Date 等

//简单数据类型	null 返回的是一个空的对象 objec
var timer = null;
console.log(typeof timer)	//object
//如果有个变量我们以后打算存储为对象，暂时没想好放啥，这个时候就给 null

6.2 堆和栈

6.3 数据类型内存分配

1、简单数据类型 是存放在栈里面 里面直接开辟一个空间存放值
2、复杂数据类型 首先是在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据

6.4 简单数据类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部变量。

function fn(a){
	a++;
	console.log(a)
}
var x = 10;
fn(x);
console.log(x)	// 10

6.5 复杂数据类型传参

函数的形参也可以看出做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象

// 复杂数据类型传参
function Person(name){
	this.name = name;
}

function f1(x){
	console.log(x.name);	//2. 输出 刘德华
	x.name = '张学友';
	console.log(x.name);	//3. 输出 张学友
}
var p = new Person('刘德华');
console.log(p.name)		//1. 输出 刘德华
f1(p);
console.log(p.na,e)		//4. 输出 张学友

第二阶段

一、web APIs和JS基础关联性

1.1 JS的组成

1.2 JS基础阶段以及Web APIs阶段

JS基础阶段：
（1）我们学习的是 ECMAScript 标准规定的基本语法
（2）要求掌握 JS 基础语法
（3）之学习基础语法，做不了常用的网页交互效果
（4）目的是为了 JS 后面的课程打基础，做铺垫

Web APIs阶段：
（1）Web APIs 是 w3c 组织的标准
（2）Web APIs 我们主要学习 DOM 和 BOM
（3）Web APIs 是我们 JS 所独有的部分
（4）主要学习页面交互功能
（5）需要使用 JS基础的课程内容做基础

总结：JS 基础学习ECMAScript 基础语法为后面做铺垫，Web APIs 是 JS 的应用，大量使用JS 基础语法做交互效果

二、API 和 Web API

2.1 API

API（应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节
简单理解：API是给程序员提供一种工具，以便能更轻松的实现想要完成的功能

2.2 Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果。比如：警示框 alert(‘弹出’)
因为 Web API很多，所以我们将这个阶段称为 Web APIs

2.3 API 和 Web API 总结

1、API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
2、Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3、Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）。
4、学习Web API 可以结合前面学习内置对象方法的思路学习

三、DOM

3.1 DOM简介

3.1.1 什么是DOM

文档对象模型（DocumnetObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

3.1.2 DOM树

文档：一个页面就是一个文档，DOM中使用 document 表示；
元素：页面中的所有标签都是元素，DOM中使用 element 表示；
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用 node 表示
DOM把以上内容都看作是对象

3.2 获取元素

3.2.1 如何获取页面元素

获取页面的元素的方式：
1、 根据 ID 获取；
2、 根据标签名获取 ；
3、 通过HTML5新增的方法获取；
4、 特殊元素获取；

3.2.2 根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象

<div id="box">获取ID元素</div>
    <script>
        // 1、因为我们文档页面是从上往下加载，所以先得有标签，所以我们的script写在标签的下面
        // 2、get 获得 element 元素 by 通过 采用驼峰命名法
        // 3、参数 id 是一个大小写敏感的字符串
        // 4、返回的是一个元素对象
        var getInfo = document.getElementById('box');
        console.log(getInfo);		//<div id="box">获取ID元素</div>
        console.log(typeof getInfo);		// object
        // 5、console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(getInfo)		// div#box
    </script>

3.2.3 根据标签名获取

（一）使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合
注意：
1、因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历；

注意：
2、得到的元素对象是动态的；

HTML：

<ul>
        <li>陪你到雪山之巅1</li>
        <li>陪你到雪山之巅2</li>
        <li>陪你到雪山之巅3</li>
        <li>陪你到雪山之巅4</li>
        <li>陪你到雪山之巅5</li>
   </ul>

JS：

//1.返回的是 获取过来元素对象的集合 以伪数组的形式存储
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0])
    //2.我们想要依次打印里面的元素对象我们可以采取遍历的方式
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i])
    }
    //3.如果页面中只有一个li 返回的还是伪数组的形式
    //4.如果页面中没有这个元素返回的空的伪数组的形式

（二）还可以获取某个元素（父元素）内部所有指定标签名的子元素
element.getElementsByTagName(‘标签名’)；
注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。

JS:

// var ol = document.getElementsByTagName('ol');   //父元素必须是指定的单个元素
// console.log(ol[0].getElementsByTagName('li'))
 var ol = document.getElementById('ol');  
 console.log(ol.getElementsByTagName('li'))

3.2.4 通过HTML5新增的方法获取

1. document.getElementsByClassName(‘类名’); //根据类名返回元素对象集合
   2. document.querySelector(‘选择器’) //根据指定选择器返回第一个元素对象
   3. document.querySelectorAll(‘选择器’) //根据指定选择器返回元素对象集合
   JS:

 // 1. document.getElementsByClassName('类名');     //根据类名返回元素对象集合
    var boxs = document.getElementsByClassName('box');
    console.log(boxs);
    // 2. document.querySelector('选择器')     //根据指定选择器返回第一个元素对象 切记里面的选择器需要加上符号 class选择器：.class  Id选择器： #id
    var firstBox = document.querySelector('.box');
    console.log(firstBox);
    var nav = document.querySelector('#nav');
    console.log(nav);
    var li = document.querySelector('li');
    console.log(li);
    // 3. document.querySelectorAll('选择器')  //根据指定选择器返回元素对象集合
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);
    var allLI = document.querySelectorAll('li');
    console.log(allLI);

3.2.5 获取特殊元素

获取body元素

1. document.body // 返回body元素对象
2. document.documentElememt //返回 HTML 元素对象
   JS：

 // 1.获取 body 元素
        var bodyEle = document.body;
        console.log(bodyEle);
        //2. 获取 HTML 元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);

3.3 事件基础

3.3.1 事件三要素

事件源 事件类型 事件处理程序
JS:

//点击一个按钮、弹出对话框
        //1. 事件是由三部分组成 事件源   事件类型   事件处理程序   我们也称为事件的三要素
        //（1）事件源  事件被触发的对象  谁 按钮
        var btn = document.getElementById('btn');
        //（2）事件类型   如何触发  什么事件 比如鼠标点击（onclick）还是鼠标经过 还是键盘按下
        //（3）事件处理程序    通过一个函数赋值的方式完成 
        btn.onclick = function () {
            alert('我出现了哟~')
        }

3.3.2 事件执行过程

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采用函数赋值形式）
   JS：

//执行事件步骤
//1.获取事件源
 var divBtn = document.querySelector('div');
 //2.绑定事件
 // divBtn.onclick
 //3.事件处理程序
 divBtn.onclick = function () {
     console.log('我被点击出来了')
 }

3.3.3 常见鼠标事件