es6新特性，获取除了已经定义的参数之外的所有参数~

function aaa(a,b,...rest) {
	console.log("a=>"+a);
	console.log("b=>"+b);
    console.log(rest);//es6新特性，获取除了已经定义的参数之外的所有参数~
}

rest参数只能写在最后面，必须用...标识。

4.2、变量作用域

在javascript中，var 定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用~(非要想实现的话，后面可以研究一下闭包)

function ls() {
	var x=1;
	x = x+1;
}
x = x+2;	//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突.

function ls() {
	var x=1;
	x = x+1;
}
function lq() {
	var x=1;
	x = x+1;
}

内部函数可以访问外部函数的成员，反之则不行

function lq() {
	var	x = 1;
    //内部函数可以访问外部函数的成员，反之则不行
	function lq2() {
		vary = X + 1; //2
	}
	var Z = y + 1; // Uncaught ReferenceError: y is not defined
}

假设，内部函数变量和外部函数的变量，重名!

function lq() {
	var x=1;
	function lq2() {
		var x = 'A';
		console.log('inner'+x); // outer1
	}
	console.log('outer'+x); //innerA
	lq2()
}
lq()
/*控制台输出结果：
outer1
innerA
*/
/*
假设在JavaScript中函数查找变量从自身函数开始~，由"内"向“外”查找.假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
*/

提升变量的作用域

function lk() {
	var x="x”+y;
	console.log(x);
	var y = 'y';
}
/*控制台输出结果:
xundefined
*/

说明； js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

function lk() {
	var y;
	var x="x”+y;
	console.log(x);
	y = 'y';
}

这个是在JavaScript建立之初就存在的特性。养成规范:所有的变量定义都放在函数的头部，不要乱放，便于代码维护；

function qj2() {
	var x = 1,
		y = x+1,
		z,i,a; //undefined
	//之后随意用
}

全局函数

//全局变量
var x =1;
function f() {
	console.1og(x);
}
f();
console.log(x);

全局对象window

varx =
XXX' ;
alert(x);
alert(window.x); //默认所有的全局变量，都会自动绑定在window对象下;

alert()这个函数本身也是一个window变量;

var x='xxx';
window.alert(x);
var old_alert = window.alert;
//old_alert(x);
window.alert = function () {
};
//发现alert()失效了
window.alert(123);
//恢复
window.alert = old_alert;
window.alert(456);

Javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量）假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定到window上。如果不同的js文件使用了相同的全局变量，冲突~----》如何减少冲突

//唯一全局变量
var MikeApp = {};
//定义全局变量
MikeApp.name ='Mike';
MikeApp.add = function (a,b) {
	return a + b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~

jQuery

局部作用域 let

function aaa() {
for(var i=0;i<100;i++){
	console.log(i)
}
console.log(i+1); //问题? i出了这个作用域还可以使用
}

ES6 let关键字，解决局部作用域冲突问题?

function aaa() {
for(let i=0;i<100;i++){
	console.log(i)
}
console.log(i+1); //Uncaught ReferenceError: i is not defined

建议大家都是用let去定义局部作用域的变量；

常量 const

在ES6之前，怎么定义常量:只有用全部大写字母命名的变量就是常量;建议不要修改这样的值

var PI = '3.14';
console.log(PI);
PI='213'; //可以改变这个值
console.log(PI);
/*控制台输出结果：
3.14
213
*/

在ES6引入了常量关键字

const PI = '3.14'; //只读变量
console.1og(PI);
PI='123';//会报错 TypeError: Assi gnment to constant variable.

4.3、方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西:属性和方法

var Mike = {
	name: '张三丰'，
	bitrh: 2020,
	//方法
	age:function () {
		//今年 - 出生的年
    	var now = new Date().getFullYear();
    	return now-this.birth;
	}
}
//调属性
Mike.name
//调方法（一定要带括号）
Mike.age()

 'use strict';
function getAge () {
    //今年 - 出生的年
    var now = new Date().getFullYear();
    return now-this.birth;
}
var Mike = {
    name: '张三丰',
    birth: 2000,
    //方法
    age:getAge//这里不需要加分号
}
console.log(Mike.age())

this是无法指向的，是默认指向调用它的那个对象；

apply

在js中可以控制this指向

 'use strict';
 function getAge () {
     //今年 - 出生的年
     var now = new Date().getFullYear();
     return now-this.birth;
 }
 var Mike = {
     name: '张三丰',
     birth: 2000,
     //方法
     age:getAge//这里不需要加分号
 }
 var Jack = {
     name: '张伟',
     birth: 1999,
     //方法
     age:getAge//这里不需要加分号
 }
 getAge.apply(Jack,[]);//this指向了Mike这个对象，参数为空

5、内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true 
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"nundefined"

5.1、Date

基本使用

var now = new Date();
now.getFullYear();//年
now.getMonth();//月 0~11代表月
now.getDate();//日
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getDay();//星期
now.getTime();//时间戳 全世界统一 从1970.01.01 00:00:00 到现在的毫秒数
console.log(new Date (1578106175991));//时间戳转为时间
console.log(now);
/*控制台输出内容：
Mon Apr 11 2022 21:26:26 GMT+0800 (中国标准时间)
*/

转换

var now = new Date (1578106175991);
/*输出结果：
sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)
*/
/*now.tolocalestring //注意，调用是一个方法，不是一个属性!
f toLocalestring() { [native code] }*/
now.toLocalestring();
"2020/1/4上午10:49:35"
now.toGMTString();
"Sat，04 Jan 2020 02:49:35 GMT"

5.2、JSON

JSON是什么

• JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象、任何js 支持的类型都可以用JSON来表示

格式：

• 对象都用{}
• 数组都用[]
• 所有的键值对都用key:value

JSON字符串和JS对象的转化

var user = {
	name: "张三丰",
	age: 3,
	sex: '男'
}
//对象转化为json字符串
var jsonUser = JSON.stringify(user)
/*转换结果：
{"name": "张三丰", "age":3, "sex":"男"}
*/
//json字符串转化为对象参数为json字符串
var obj = JSON.parse('{"name": "张三丰", "age":3, "sex":"男"}')//这里因为内部是用了双引号，所以外层的要用单引号。

很多人搞不清楚，JSON 和JS对象的区别

var obj = {a: 'hello' ,b: 'hellob'};			//这是JS对象
var json = '{"a": "hello","b": "hellob"}';		//这是JSON字符串

5.3、Ajax

• 原生的js写法 xhr异步请求
• jQuery封装好的方法 $("#name").ajax("")
• axios请求

在后面的SpringMVC会详细讲解

6、面向对象编程

6.1、什么是面向对象

JavaScript、Java、C#。。。面向对象，JavaScript有一些区别！

• 类：模板
• 对象：具体的实例

在JavaScript这个需要大家换一下思维方式！

6.2、原型

var Student = {
	name :"mike",
	age: 3,
	run: function () {
	console.log(this.name +"run....");
	}
};
var xiaoming = {
	name:
	xiaoming
};
//小明的原型是Student
xiaoming.__proto__ = Student;//proto前面和后面都是各两个英文状态下的下划线
//proto给我们的感觉就像继承，xiaoming是子类，Student是父类

6.3、Class继承

Class关键字， 是在ES6引入的

ES6之前

//ES6之前
//这是一个对象（方法是放在对象里面的，JavaScript中万物皆对象,函数也可以是对象）
function Student (name) {
	this.name = name;
}
//给student新增一个方法
Student.prototype.hello = function(){
	alert('Hello');
}

ES6之后

1、定义一个类，有属性和方法

//ES6之后
//定义一个学生类
class Student {
    //构造器
    constructor(name){
        this.name = name;
    }
    //方法
    hello() {
        alert('hello')
    }
}
var xiaoming = new Student("xiaoming");
console.log(xiaoming.hello())
var xiaohong = new Student("xiaohong");
console.log(xiaohong.hello())

2、继承

本质：查看对象原型

6.4、原型链

__ proto __:

7、操作DOM元素(重点)

DOM：文档对象模型

核心

浏览器网页就是一个DOM树形结构

• 更新：更新DOM节点
• 遍历：遍历DOM节点（得到DOM节点）
• 删除：删除一个DOM节点
• 添加：添加一个DOM节点

要操作一个Dom节点, 就必须要先获得这个Dom节点

获得DOM节点

	
标题一
	
p1
	
p2

这是原生代码，之后我们尽量都是用jQuery

7.1、插入DOM

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了,如果这个DOM节点经存在元素了，我们就不能这么干了！会产生覆盖

追加

JavaScript

    
JavaSE
    
JavaEE
    
JavaME

创建一个新的标签，实现插入

JavaScript

    
JavaSE
    
JavaEE
    
JavaME

第二种创建新标签的方法

利用js给标签加样式（第一种方法）

利用js给标签加样式（第二种方法）

insertBefore 在某个标签的前面插入一个标签

JavaScript

    
JavaSE
    
JavaEE
    
JavaME

7.2、更新DOM

操作文本

//修改文本的值
id1.innerText = '456'
//加粗字体
id1.innerHTML = '123'		//可以解析HTML文本标签

操作js

id1.style.color = 'yellow';	//属性使用字符串包裹
id1.style.fontSize = '20px';// '-'转 驼峰命名问题
id1.style.padding = '2em';

7.3、删除DOM

删除节点的步骤：先获取父节点， 在通过父节点删除自己

	
标题一
	
p1
	
p2

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

总结操作DOM对象

8、操作BOM对象（重点）

浏览器介绍

• JavaScript和浏览器的关系
  • JavaScript诞生就是为了能够让它在浏览器中运行！

BOM：浏览器对象模型

• IE 6~11
• Chrome
• Safari
• Firefox
• Opera

上面的这些浏览器有自己的内核。

三方（包装了一层外壳）

• QQ浏览器
• 360浏览器

8.1、window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
258
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919

8.2、navigator

navigator封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.36'
navigator.appName
'Netscape'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.36'
navigator.platform
'Win32'

大多数时候，我们不会使用navigator对象， 因为会被人为修改!

不建议使用这些属性来判断和编写代码

8.3、 screen

screen代表屏幕尺寸

screen.width
1920 px
screen.height
1080 px

8.4、location（重要）

location代表当前页面的URL信息

host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"			//协议
reload: ? reload()			//重新加载,刷新网页
//设置新的地址
location.assign('https://www.cnblogs.com/')

8.5、document

document代表当前的页面，HTML DOM文档树

document.title
"百度一下，你就知道" 

获取具体的文档树节点

    
Java
    
JavaSE
    
JavaEE

获取 cookie

document.cookie
'pglt-edgeChromium-dhp=171; pglt-edgeChromium-ntp=171; 
......

劫持 cookie原理

服务器端可以设置cookie: httpOnly

8.7、history(不建议使用)

history代表浏览器的历史记录

history.forward();		//前进
history.back();			//后退

9、操作表单（验证）

表单是什么 form DOM树

• 文本框

  账户：
  

• 密码框

  密码：
  

• 下拉框

  国家：
      
          中国
          美国
          瑞士
          法国
      
  
  

• 单选框

  性别：
          
          男
          女
  
  

• 多选框

  爱好：
      睡觉
      吃饭
      打豆豆
  
  

• 隐藏域

  密码：
      
      
  
  

• 搜索框

  搜索：
  	
  
  

• 按钮

  按钮：
  	
  
  
  
  

• 文本域

  
      反馈信息：
      
  
  

• 文件域

• 提交

• 重置

表单的目的：提交信息

9.1、获得要提交的信息

    
    




    

        用户名： 
        
    
    

        性别：
         男
         女
    

9.2、提交表单

md5表单密码加密 利用隐藏域优化表单

    
    
    
    
    




    

        用户名： 
        
    
    

        密码：
        
    

    

    
    提交

10、jQuery

JavaScript

jQuery库：里面存放的是大量的JavaScript函数

10.1、获取jQuery

官网下载离线版本

CDN引入 ，使用在线jQuery库链接

记住一个公式

10.2快速入门

    
    
    
    
    
    



点我

10.3选择器

文档工具站：https://jquery.cuishifeng.cn/

10.4、事件

鼠标事件

键盘事件

其他事件

当网页元素加载完毕之后，响应事件

小案例

    
    
    
    



mouse : 

    在这里移动鼠标试试

10.5、操作DOM

节点文本操作

CSS操作

$('#test-ul li[name=python]').css("color", "red");

元素的显示和隐藏，本质display : none;

$("#test-ul li [name=python]").show();//显示
$("#test-ul li [name=python]").hide();//隐藏

娱乐测试

$(window).width();//获得宽度
$(window).height();//获得高度

$(document).width();//获得宽度
$(document).height();//获得高度

Ant Design

Element-ui

Layer弹窗组件