一、前端知识体系

想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。

1、前端三要素

HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。
JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为

1、1、结构层（HTML）

1、2、表现层（CSS）

CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，主要缺陷如下：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具,提CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。

什么是CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只需要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。

常用的CSS预处理器有哪些

SASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用LESS。

1、3行为层（JavaScript）

JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。

2、JavaScript框架

JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）
React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；
Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能；

UI框架

Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
BootStrap：Teitter推出的一个用于前端开发的开源工具包
AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架

JavaScript构建工具

Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载

注：以上知识点已将WebApp开发所需技能全部梳理完毕

3、三端同一

混合开发（Hybrid App）

主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：

云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
本地打包： Cordova（前身是 PhoneGap）

微信小程序

详见微信官网，这里就是介绍一个方便微信小程序UI开发的框架：WeUI

二、快速入门

1、引入JavaScript

内部使用
1
2
3
<script>
//....
<script>

外部引入

<!--外部引入
       注意：script必须成对出现
   -->
   <script src="js/hj.js"></script>
    
   <!--不用显示定义type，也默认就是javaScript-->
   <script type="text/javascript"></script>

测试

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--script标签内，写Javascript代码-->
    <!--<script>
        alert("hello,world");
    </script>-->

    <!--外部引入
        注意：script必须成对出现
    -->
    <script src="../js/1、快速入门/快速入门.js"></script>

    <!--不用显示定义type，也默认就是javaScript-->
    <script type="text/javascript"></script>
</head>
<body>


<!--这里也可以存放-->
</body>
</html>

JavaScript代码
1
alert("快速入门");

2、基本语法入门

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本语法</title>
        <!--JavaScript严格区分大小写-->
        <script>
            // 1. 定义变量   变量类型 变量名 = 变量值
            var score = 1;
            //alert(num)
            // 2. 条件控制

            if (score > 60 && score < 70) {
                alert("60~70");
            } else if (score > 70 && score < 80) {
                alert("70~80");
            } else {
                alert("other")
            }
        </script>
    </head>
    <body>

    </body>
</html>

3、数据类型简单定义

数值，文本，图形，音频，视频

number、字符串、布尔值、逻辑运算符、比较运算符、浮点数（number）、null、undefind、数组、对象、

'use strict';
// number、
let num = 1;
// 字符串、
let str = "how are you ";
// 布尔值、
let bool_value = false;
// 逻辑运算符、
console.log(num && float_num);
// 比较运算符、
console.log(num > float_num);
// 浮点数（number）、
let float_num = 1.5;
// null、
let a;
console.log(a);
//undefind、
console.log(b);
// 数组、
let arrays = [1, 2, 3, 4, "123"];
// 对象、
let Person = {
    name: "张三",
    gender: "男"
}

数据类型：
- numbe：不区分小数和整数，只要是数字就是Number类型的
  - NaN === NaN，这个与所有的数值都不相等，包括自己
  - 只能通过isNaN（NaN）来判断这个数是否是NaN
    1
    2
    3
    4
    5
    6
    123//整数123
    123.1//浮点数123.1
    1.123e3//科学计数法
    -99//负数
    NaN //not a number
    Infinity // 表示无限大

- 字符串：'abc'  "abc"

- 布尔值：true、false

- 逻辑运算

    1
2
3
4
5
&& 两个都为真，结果为真

|| 一个为真，结果为真

! 	真即假，假即真


- 比较运算符：**这是一个JS的缺陷，坚持不要使用 == 比较**

    1
2
3
4
=  赋值运算符
1，"1"
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）




- 定义变量

1
var 变量名;




- 浮点数问题：**存在进度损失，在Java中可以使用BigDecimal类来解决精度问题**

1
console.log((1/3) === (1-2/3))  /*false*/



- null 和 undefined

    - null 空
    - undefined 未定义



- 数组

    - Java的数组必须是相同类型的对象~，JS中不需要这样
    - 取数字下标：如果越界了，就会 报undefined



- 对象    

    - 对象是大括号，数组是中括号
    - 每个属性之间使用逗号隔开，最后一个属性不需要逗号

4、严格检查模式

var和let的区别：var定义相当于成员变量，let定义的相当于局部变量，建议使用let来定义变量

语法检查：在JavaScript代码的最前面加上（ ‘use strict’; ）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    前提：IDEA需要设置支持ES6语法
        'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
        必须写在JavaScript的第一行！
        局部变量建议都使用let去定义~
    -->
    <script>
        'use strict';
        //全局变量
         let i=1
        //ES6 let
    </script>
</head>
<body>
</body>
</html>

三、数据类型

1、字符串使用

正常字符串我们使用单引号，或者双引号包裹

注意转义字符 \

```
\’
\n
\t
\u4e2d \u##### Unicode字符
\x41 Ascall字符


- 多行字符串编写

    - ```javascript
        //tab 上面 esc下面
        let a =
            `
        how
        are
        you
        `

模板字符串

``javascript
  //tab 上面 esc下面
  let name = 'Tom';
  let age = 3;
  var msg =

你好，${name}`


- 字符串长度

    - ```javascript
        let str = "how are you"
        alert(str.length) /* 11 */

字符串的可变性：字符串是不可变的

```javascript
//通过数组来修改之后字符串还是不会改变
let str = “are”
str[1] = ‘b’
alert(str) / are /


- 大小写转换

    - ```javascript
        //注意，这里是方法，不是属性了
        let str = "how ARE you ! ";
        alert(str.toUpperCase());//将小写字母转换为大写：HOW ARE YOU !
        alert(str.toLowerCase());//将大写字母转换为小写：how are you !

查询字符串第一次出现的位置：如果没有出现返回-1，如果出现了就返回第一次出现的位置

```JavaScript
let str = “how ARE you ! “;
alert(str.indexOf(‘A’));


- 截取字符串

    - ```JavaScript
        let str = "howAREYou ! ";
        alert(str.substr(2));//从第2个字符串截取到最后一个字符串
        alert(str.substr(0,2));//[1,3)

2、数组使用

Array可以包含任意的数据类型

Array可以包含任意的数据类型，通过下标取值和赋值

```JavaScript
let array = [1, 2, “3”]
array[1] = “12”; //通过下标赋值
alert(array[1]); //通过下标取值


- 长度：**假如给arr.lennth赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失，最好不去修改数组的下标**

    - ```JavaScript
        let array = [1, 2, "3"]
        array.length = 10;
        alert(array)

indexOf，通过元素获得下标索引：如果没有出现返回-1，如果出现了就返回第一次出现的位置

字符串的”1”和数字 1 是不同的

```javascript
let array = [“1”, 1, “3”]
alert(array.indexOf(“1”)) // 0


- slice（）：和substr使用方法一样。截取Array的一部分，返回的一个新数组，类似于String中substring，**不会修改原来的数组**

    - ```JavaScript
        let array = ["1", 1, "3"]
        alert(array.slice(1))//1,3
        alert(array.slice(0, 2))//1,1

push()，pop()尾部：

push()：将新元素追加到数组末尾，然后返回数组的新长度。
pop()：从数组中删除最后一个元素并返回它。

```javascript
//push(“新数据值”)：在数组尾部插入一个数据或一个数组
//pop()：将数组最后一个数据删除

//插入数组：插入数组将会作为一个元素，数组的元素只会加一，相当于插入了一个数组类型的值进去，而不是将数组的每一个值插入进去
let array = [“1”, “1”, “3”];
let array2 = [“how”, “are”, “you”];
alert(array.push(array2));
console.log(array)// 4

//插入普通类型的值：
alert((array.push(“123”)));

//删除数组的最后一个元素：
alert(array.pop()) // 123


- unshift(),shift() 头部：

    - unshift()：在数组的开头插入新元素

    - shift()：从数组中删除第一个元素并返回它。

    - ```JavaScript
        //unshift()：在数组的开头插入新元素
        //shift()：从数组中删除第一个元素并返回它。
        
        //插入数组：插入数组将会作为一个元素，数组的元素只会加一，相当于插入了一个数组类型的值进去，而不是将数组的每一个值插入进去
        let array = ["1", "1", "3"];
        let array2 = ["how", "are", "you"];
        alert(array.unshift(array2));
        console.log(array)// 4 
        
        //插入普通类型的值：
        alert((array.unshift("123")));
        
        //删除数组的第一个一个元素：
        alert(array.shift()) // 123

排序sort()：默认升序排列

```javascript
let array = [“B”,”C”,”A”]
array.sort()
alert(array)//A,B,C


- 元素反转reverse()：

    - ```JavaScript
        let array = ["B","C","A"]
        array.reverse()
        alert(array)//A,C,B

concat()：该函数不会修改原数组，只会返回一个新的数组，原来的数组不会改变

```javascript
let array = [“B”,”C”,”A”];
let array2 = [“1”,”2”,”3”];
alert(array.concat(array2));//B,C,A,1,2,3
alert(array);//B,C,A


- 连接符join：打印拼接数组，使用特定的字符串连接（**不会修改原来的数组**）

    - ```javascript
        let array = ["B","C","A"];
        alert(array.join("-"))//B-C-A
        alert(array);//B,C,A

多维数组

```javascript
let array3 = [[1,2],[3,4],[5,6]];
alert(array3[1][1]);//4


- find()：







## 3、对象

若干个键值对



- Js中对象，{…}表示一个对象，建制对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！JavaScript中的所有的键都是字符串，值是任意对象！

    ```javascript
    var 对象名 = {
    	属性名：属性值，
    	属性名：属性值，
    	属性名：属性值
    }
    //定义了一个person对象
    let Person = {
        name: "张三",
        gender: "男",
        id: 1
    }

对象赋值
使用一个不存在的对象属性，不会报错！undefined
动态的删减属性，通过delete删除对象的属性
动态的添加，直接给新的属性添加值即可
判断属性值是否在这个对象中！xxx in xxx

判断一个属性是否是这个对象自身拥有的 hasOwnProperty()：确定对象是否具有具有指定名称的属性。

let Person = {
    name: "张三",
    gender: "男",
    id: 1
}

//对象赋值
Person.name = "韩信"
alert(Person.name);//韩信

// 使用一个不存在的对象属性，不会报错！undefined
alert(Person.password);//undefined

//动态的删减属性，通过delete删除对象的属性
delete Person.id;
alert(Person.id);//删除后去访问变为：undefined

//动态的添加，直接给新的属性添加值即可
Person.email = "1903078434@qq.com";
alert(Person.email);//1903078434@qq.com

//判断属性值是否在这个对象中！xxx in xxx
alert("email" in Person);//true
alert("password" in Person);//false

//判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
alert(Person.hasOwnProperty("name"));//true

4、流程控制

if判断

while循环，避免程序死循环

for循环

forEach循环（ES5.1特性）

for …in———-下标：在不知道数组大小的时候可以使用该函数

/*
   if判断
   */
   if (1 < 2) {
       console.log("1<2");
   }

   /*
   while循环，避免程序死循环
   */
   let i = 1;
   while (i < 5) {
       console.log("while" + i++);
   }
   /*
   for循环
   */
   for (let j = 0; j < 5; j++) {
       console.log("for" + j);
   }

   /* forEach循环（ES5.1特性）
   */
   let arr = [1, 2, 3, 4, 5];
   arr.forEach(function (value) {
       console.log("foreach" + value);
   });

   /*  for …in-------下标
    */

   for (let i in arr) {
       console.log("for...in：" + i);
   }

5、Map和Set（ES6的新特性）

格式：

//创建Map集合
let map = new Map([	["键","值"],["键","值"] ])

//创建Set集合
let set = new Set([ [1,2,3,1,2,3] ])//重复的元素会被删除

Map：和python中的字典类似

```JavaScript

          'use strict';
          let map = new Map([["name", "张三"], ["gender", "男"]])
          alert(map.get("name"))//张三
          map.set("gender", "女");//set方法会修改原来的map集合
          alert(map.get("gender"));//女


    

Set：无序不重复的集合

- ```javascript
                let set = new Set([3, 1, 2, 1, 1, 2]);
                set.delete(1);
                set.add(4);
                alert(set.has(3));//true

6、iterator（es6新特性）

建议使用iterator，不建议使用for…in

遍历数组

```JavaScript
/遍历数组/
let array = [1, 23, 22, 3, 42];
for (let i of array) {

  console.log("数组：" + arr[i]);

}


遍历Map：遍历Map，Map集合遍历出来的每一个键值对都是一个数组

- ```javascript
    /*遍历Map，Map集合遍历出来的每一个键值对都是一个数组*/
    let map = new Map([["name", "张三"], ["gender", "男"]]);
    for (let i of map) {
        console.log("Map集合" + i);
    }

遍历set：

```javascript
/Set集合遍历出来的值，会将重复的值去除/
let set = new Set([3, 1, 2, 1, 1, 2]);
for (let i of set) {

  console.log("Set集合：" + i);

}


    







# 四、函数

方法：对象（属性，方法）



## 1、定义函数



- 格式

    ```javascript
    //定义函数格式
    function 函数名(参数...){
        方法体
    }

定义方式一
- 一旦执行到return代表函数结束，返回结果！如果没有执行return，函数执行完也会返回结果，结果就是undefined
  1
  2
  3
  4
  5
  6
  7
  function abs(x){
  if(x>0){
  return x;
  }else{
  return -x;
  }
  }

定义方式二
- function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！方式一和方式二等价，调用方式一样！
  1
  2
  3
  4
  5
  6
  7
  8
  9
  var abs = function(x){
  if(x>0){
  return x;
  }else{
  return -x;
  }
  }
  
  //调用：变量名(参数)

调用函数

//方式一：调用方式一建立的函数
abs(10;//10
    
//调用方式二调用的函数
abs(-10)；//10

参数问题
- 参数问题：javaScript可以传任意个参数，也可以不传递参数~
- 参数进来是否存在问题？
- 假设不存在参数，如何规避？

函数自带参数（arguments）

arguments是一个JS免费赠送的关键字；代表，传递进来的所有参数，是一个数组！（和Java中main方法中的args数组差不多）

如果传入的参数的值超过自定义的参数的个数，那么超过的参数就会被自动封装成为一个数组，这个数组的名字为arguments，使用方法和自己定义的数组的方式一样

let abs = function(x){
    alert("x = " + x);
    for(let i of arguments ){
        console.log(i);
    }
    if(x>0){
        return x;
    }else{
        return -x;
    }
}

使用arguments参数会有问题，argumens会把所有的参数都封装成为一个数组

可变形参（…rest）

rest参数只能写在所哟参数的最后面，必须用…标识。

ES6引入的新特性，获取除了已经定义的参数之外的所有参数

获取除了已经定义的参数之外的所有参数

多出来的参数会自动封装成为一个数组

```javascript
function abs(a,b,…rest){

  console.log(a);
  console.log(b);
  console.log(rest);

}






### arguments和rest的区别

arguments会把所有的参数的值都封装成为一个数组，就算自己定义了形参，形参接收到了值，但是arguments也会把所有参数都封装成为一个数组

rest和arguments的区别就是，他会把获取除了已经定义的参数之外的所有参数



```JavaScript
function abs(x, y) {
    let str = "";
    for (let i of arguments) {
        str = str + i + " ";
    }
    console.log("arguments = " + str);
}

function for_ary(x, y, ...args) {
    let str = "";
    for (let i of args) {
        str = str + i + " ";
    }
    console.log("rest = " + str);
}

abs(1, 2, 3, 4, 5, 6, 7, 8);//arguments = 1 2 3 4 5 6 7 8
for_ary(1, 2, 3, 4, 5, 6, 7, 8);//rest = 3 4 5 6 7 8

2、变量的作用域

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

假设在函数体内声明，则在函数体外不可以使用

function abs(){
    let x = 1;
}
x = x + 2;//x is not defined

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

function abs(){
    let x = 1;
}

function abs2(){
    let x = 1;
}

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

function abs() {
    let x = 1;

    function abs2() {
        let y = x + 2;
    }

    let z = x + y;
}

abs();// y is not defined

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

假设在JavaScript中，函数查找变量从自身函数开始~， 由“内”向“外”查找变量，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

function abs() {
    let x = 1;

    function abs2() {
        let x = 2;
    }

    let z = x + 1;
}

JavaScript会自动提升变量的作用域：

参数的调用可以在定义之前调用但必须要定义
JavaScript会把变量层级提到最前面，但是不会把变量值放到最前面，此时在定义之前调用参数会报初始化之前无法访问
这是个在JavaScript建立之初就存在的。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护

function  abs(){
    console.log("y = " + y);
    var y = 11; 
}

//此时调用不是报未定义了，而是报：初始化之前无法访问
abs(1); // Cannot access 'x' before initialization

全局变量：

let a = 10;

function abs() {
    console.log("我在函数内部调用全局变量：" + a);
}

abs();//我在函数内部调用全局变量：10
console.log("我在函数外面调用全局变量：" + a);//我在函数外面调用全局变量：10

全局对象：默认所有的全局变量dou’hui绑定在Windows对象下面；

alert() 这个函数本身也是一个window的变量；
javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错 Refrence

let x = "AAA";
window.alert(x);

/*将全局变量Windows对象中的alert变量赋值给一个自定义变量，这个自定义变量也有alert的功能*/
let new_alert = window.alert;
new_alert("new_alert = " + x);

//将一个空函数赋值给全局变量Windows，此时的alert将会失效
window.alert = function () {
};

//此时运行如下代码不会输出
alert("你猜我会不会输出呢");

//恢复原来的Windows中的alert变量的值，此时下面的代码就能实现之前的功能了
window.alert = new_alert;
alert("你猜我输出没有呢！！！！");

规范

由于我们的所有变量都会绑定到window上，。如果不同的js文件，使用了相同的全局变量，就会产生冲突—>如何减少这样的冲突？

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~jQuery中就是使用的该方法：jQuery.name，简便写法：$()

//唯一全局变量
let lf = {};
//将自定义全局变量绑定在全局变量中，可以避免个系统中的全局变量冲突
lf.name = "韩信";
lf.id = 1233;

局部变量：ES6的let关键字，解决了局部作用域冲突的问题！建议大家都用let去定义局部作用域的变量；

for (var i = 0; i < 10; i++) {
}
//正常如下代码应该要报错误，但是这里还能访问到for循环中定义的i，所以这是就需要使用let定义变量了
console.log(i);//   10  for循环结束后i的值变为了10

for (let x = 0; x < 10; x++) {
}
//这里使用了let定义变量，let严格要求了定义的变量的作用域
console.log(x);//x is not defined

常量：定义了时候，值是不能修改的

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

在ES6引入了常量关键字 const，使用const定义的变量必须赋值，且赋值之后不能改变

//在ES6之前定义常量，
var ES6_AFTER_PI = "3.14";

//ES6引入了const，此时可以用该关键字定义常量
const ES6_PI = "3.1415";

3、方法

定义方法

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

定义方式一：

/*
对象相当于Java中的类
对象中有：属性、方法
*/
let Person = {
    //属性
    name: "张三",
    birth: 2001,

    //方法，time为方法的返回值
    //相当于 let time = function(){ ... } 
    //调用方法为：time()
    time: function () {
        let now = new Date().getFullYear();

        //方法中调用属性：birth
    	return now - this.birth;
    }
}
//调用属性
alert(Person.name);//张三

//调用方法（属性名后面一定要带()）：对象名.属性名()
alert(Person.time());//20

定义方式二：

/*
    对象相当于Java中的类
    对象中有：属性、方法
    */
let Person = {
    //属性
    name: "张三",
    birth: 2001,

    //方法，time为方法的返回值
    time: getTime
}

function getTime() {
    let now = new Date().getFullYear();
    //方法中调用属性：birth
    return now - this.birth;
}

//调用属性
alert(Person.name);

//调用方法（属性名后面一定要带()）：对象名.属性名()
alert(Person.time());//20


//直接调用getTime()方法，不通过对象调用，此时的this是window，但是window中没有birth，所以返沪NaN
console.log(getTime());//NaN

上面代码中用到了 this。那么this代表什么？
- 谁调用谁就是this，上诉代码，单独调用函数，由于window中没有birth属性，所以this调用的时候是没有值的，所以直接调用的话返回的是NaN
- 只要调用者调用的地方没有就会返回NaN

apply：可以通过apply指定指向哪个对象

和Java中的反射的功能有点类似，传入的是哪个对象，那么此时里面就是哪个对象
在js中可以控制this指向

/*
    对象相当于Java中的类
    对象中有：属性、方法
    */
let Person = {
    //属性
    name: "张三",
    birth: 2001,

    //方法，time为方法的返回值
    time: getTime
}

let xiaoming = {
    //属性
    name: "小明",
    birth: 2010,

    //方法，time为方法的返回值
    time: getTime
}

function getTime() {
    let now = new Date().getFullYear();
    //方法中调用属性：birth
    return now - this.birth;
}

//使用apply()方法
//使用如下方法，那么第一个参数传入什么，this就会指向哪个对象，第二个参数为参数
//如下解释：传入了Person对象，this指向了Person，参数为空
alert(getTime.apply(Person,[])); // 20 

//传入xiaoming对象，此时this会指向xiaoming，参数为空
alert(getTime.apply(xiaoming,[])); // 11

4、闭包函数

想要了解上百度查询

五、内部对象

1、对象类别的测试

使用typeof：

console.log(typeof 123);//number
console.log(typeof '123');//string
console.log(typeof true);//boolean
console.log(typeof NaN);//number
console.log(typeof []);//object
console.log(typeof {});//object
console.log(typeof Math.abs());//number
console.log(typeof undefined);//undefined

2、Date使用

//基本使用
let now = new Date()
console.log(now);//Mon Mar 22 2021 22:25:20 GMT+0800 (中国标准时间)
console.log("年 = " + now.getFullYear());//年 = 2020
console.log("月 = " + now.getMonth());//月 = 2
console.log("日 = " + now.getDate());//日 = 22
console.log("时 = " + now.getHours());//时 = 22
console.log("分 = " + now.getMinutes());//分 = 22
console.log("秒 = " + now.getSeconds());//秒 = 22
console.log("时间戳 = " + now.getTime());//时间戳 = 1616423287299
console.log("时间戳转换的时间 = " + new Date(1616423287299));//时间戳转换的时间 = Mon Mar 22 2021 22:28:07 GMT+0800 (中国标准时间)

//转换
console.log("======================转换=====================================");
console.log("当前时间 = " + now.toLocaleString())//当前时间 = 2020/3/22下午10:33:51
console.log("当前GMT时间 = " + now.toGMTString())//当前GMT时间 = Mon, 22 Mar 2021 14:35:58 GMT

3、JSON

具体使用在JavaWeb和SpringMVC的笔记中有使用方式

JSON是什么

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，目前使用特别广泛。
采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在javascript中，一切皆为对象，任何js支持的类型都可以用JSON表示

格式
- 对象都用{}
- 数组都用[]
- 所有的键值对都是用key:value

JSON.stringify() 把 json 对象转换成为 json 字符串
JSON.parse() 把 json 字符串转换成为 json 对象

let Person = {
    name: "张三",
    age: 3,
    sex: "男"
}

console.log(Person);

//JSON.stringify() 		把 json 对象转换成为 json 字符串
let jsonPerson = JSON.stringify(Person);
console.log(jsonPerson)

//JSON.parse() 		把 json 字符串转换成为 json 对象
let personObject = JSON.parse(jsonPerson);
console.log(personObject);

JSON和JS对象的区别：

JSON是字符串

JS对象是对象

//对象：对象不是字符串。格式：
var Person = {name:"张三",age:18}

//JSON：JSON是一个字符串
var Person = '{"name":"张三","gender":"男"}'

4、BSON

想要了解去百度

5、AJAX

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

六、面向对象编程

1、原型对象

原型对象：javascript、java、c#———面向对象；但是javascript有些区别！

类：类是一个模板，可以写一个类（相当于Java中的接口），给其他类来继承
对象：具体实例

/*对象相当于Java中的类
对象中有：属性、方法*/
let Person = {
    //属性
    name: "张三",
    birth: 2001,

    //方法，time为方法的返回值
    time: getTime
}

function getTime() {
    let now = new Date().getFullYear();
    //方法中调用属性：birth
    return now - this.birth;
}

let man = {
    name: "男人"
};
//原型对象、相当于继承
man.__proto__ = Person;

//man中没有time属性，但是继承了Person，所以man中也有了该属性了
man.time();//20

function Student(name) {
    this.name = name;
}

//新增一个方法
Student.prototype.hello = function () {
    console.log("Say Hello");
};

//创造啊一个Student对象
let student = new Student("张三")

//调用新增的方法
student.hello();

2、class创建对象

class关键字，是在ES6引入的

定义一个类、属性、方法：（如下理解是建立在Java的角度上理解的）
- JavaScript中只能定义一个构造函数，传入的参数会封装在arguments中，在前面有arguments的解释

class Person {

    //创造一个构造函数，并且添加一个属性：name
    constructor(name) {
        this.name = name;
        console.log(this.name + "在说：" + arguments[1]);
    }

    //定义一个方法
    run() {
        console.log(this.name + "在跑步");
    }
}

//创建一个人的对象
let person = new Person("张三", "英语");//张三在说：英语
person.run();//张三在跑步

3、class继承

class Person {

    //创造一个构造函数，并且添加一个属性：name
    constructor(name) {
        this.name = name;
        console.log(this.name + "在说：" + arguments[1]);
    }

    //定义一个方法
    run() {
        console.log(this.name + "在跑步");
    }
}

class Man extends Person {
    constructor(name, food) {
        console.log("父类和谁先执行：谁在前面谁先执行")
        //super关键字前面不能有this：否则会报错（超类构造函数调用前不允许有 ''this'）
        //此处传不传参数都不会报错误，但最好父类中的构造函数有几个参数就传几个参数
        super(name);

        this.name = name;
        this.food = food;
    }
    eat() {
        console.log(this.name + "在吃" + this.food);
    }
}

//创建一个Person的子类Man，因为子类中使用了super，所以在子类在创建对象时还会调用父类的构造方法
let man = new Man("李白", "豆腐");
/*		创建对象的时候输出的东西：
李白在说：undefined
父类和谁先执行：谁在前面谁先执行
*/
man.eat();//李白在吃豆腐

3、JavaScript继承原型链

七、操作BOM对象（重点）

1、浏览器介绍

BOM：浏览器对象模型

javascript和浏览器关系？：JavaScript诞生就是为了能够让他在浏览器中运行

2、window对象（重要）

具体的使用可以去w3c查询使用方法

console.log(window.innerHeight);
console.log(window.innerWidth);
console.log(window.outerHeight);
console.log(window.outerWidth);

3、Navigator（不建议使用）

Navigator封装了浏览器的信息

大多数时候，我们不会使用navigator对象，因为Navigator中的信息可以被用户修改
不建议使用这些属性来判断和编写代码

console.log(navigator.appName);
console.log(navigator.appVersion);
console.log(navigator.userAgent);
console.log(navigator.platform);

4、screen

代表屏幕尺寸

1 2	console.log(screen.width);//1920 console.log(screen.height);//1080

5、location(重要)

location代表当前页面的URL信息

部分属性和方法值：

/**
* 返回Location对象的URL的主机和端口（如果与方案的默认端口不同）。
* Can be set, to navigate to the same URL with a changed host and port.
*/
host: string;

/**
 * 返回Location对象的URL。
 * Can be set, to navigate to the given URL.
 */
href: string;

/**
 * 返回Location对象的URL方案。
 * Can be set, to navigate to the same URL with a changed scheme.
 */
protocol: string;

/**
 * 导航到给定的URL。
 */
assign(url: string): void;

/**
 * 重新加载当前页面。
 */
reload(): void;

使用

console.log(location.host);//返回Location对象的URL的主机和端口（如果与方案的默认端口不同）。
console.log(location.href);//获取当前网页地址，返回Location对象的URL。
console.log(location.protocol);//获取网络协议（http或https），返回Location对象的URL方案。
location.assign("https://www.baidu.com");//重定向到填写的地址，导航到给定的URL。
location.reload();//刷新网页，重新加载当前页面。

6、history（不建议使用）

代表浏览器的历史记录

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

7、document（内容DOM）

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

1 2	console.log(document.title)//输出HTML的title中输入的值 document.title = "测试" //修改HTML的title标签中的值

获取具体的文档树节点

<dl id="aop">
<dt>Java</dt>
<dt>JavaScript</dt>
</dl>

<script>
let dl = document.getElementById("aop");
</script>

获取cookie

1	document.cookie

八、操作DOM对象（重点）

DOM：文档对象模型

1、核心（节点的增删改查）

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

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

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

2、获得Dom节点

原生代码，之后我们尽量使用jQuery

let h1 = document.getElementsByTagName("h1");
let p1 = document.getElementById("p1");
let p2 = document.getElementsByClassName("p2")
let father = document.getElementById("father");

//获取父节点下的节点
console.log(father.children);
console.log(father.firstChild);
console.log(father.lastChild);
console.log(father.lastChild);
console.log(father.nextSibling);

3、更新节点

innerText：只能跟新文字，加入HTML代码不会被执行，输入的HTML会被直接输出
1
box1.innerText = "测试innerText";

innerHTML：不仅能更新文字，还能在文字上加入HTML代码
1
box1.innerHTML = "<strong>测试innerHTML</strong>";

修改样式

box1.style.color = "white";
box1.style.backgroundColor = "deepskyblue";
box1.style.width = "100px";
box1.style.height = "100px";

4、删除节点

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

因为JavaScript代码是从上到下，所以JavaScript要写在节点的后面，不让会出现JavaScript代码扫描不到节点

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

<div id="father">
    <h1>操作DOM对象</h1>
    <p id="p1">
        要操作一个Dom节点，就必须要先获得这个Dom节点
    </p>
    <p class="p2">
        使用getElement系列方法访问指定节点：getElementById( )、getElementsByName( )、getElementsByTagName( )
    </p>
</div>
<script>
    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2')
    let father = document.getElementById('father');
	
    /*删除节点方式一
    father.removeChild(p1);
    father.removeChild(p2[0]);
    father.removeChild(h1[0]);
    */
    
    /*删除节点方式二，删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。
    father.removeChild(father.children[0]);
    father.removeChild(father.children[0]);
    father.removeChild(father.children[0]);
    */
    
</script>

5、插入节点

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

覆盖：使用innerHTML

追加：

<p id="test-first-p">Java</p>
<div id="list">
    <p id="JavaEE">JavaEE</p>
    <p id="JavaSE">JavaSE</p>
    <p id="JavaWeb">JavaWeb</p>
</div>
<script>
    let p = document.getElementById("test-first-p");
    let list = document.getElementById("list");

    //将第一个p标签追加到div中，原来的节点追加到另外的节点之后，原来的节点位置的值不会再存在
    list.appendChild(p);

创建一个新的标签节点追加到网页中：

- 方式一：使用 ==标签变量.属性名 = 属性值==

    1
2
3
4
5
6
7
8
9
10
11
12
<p id="test-first-p">Java</p>
<div id="list">
    <p id="JavaEE">JavaEE</p>
    <p id="JavaSE">JavaSE</p>
    <p id="JavaWeb">JavaWeb</p>
</div>
<script>
    let newP = document.createElement("p");
    newP.id = "newP";
    newP.innerHTML = "<strong>我是新创造的p节点</strong>"
    list.appendChild(newP);
</script>




- 方式二：使用==setAttribute("属性名","属性值")==

    1
2
3
4
let newP = document.createElement("p");
newP.setAttribute("id", "newP");
newP.innerHTML = "<strong>我是新创造的p节点</strong>"
list.appendChild(newP);




- 方式三：

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
	var js = document.getElementById('js');//已经存在的节点
    var list = document.getElementById('list');
    //通过JS创建一个新的节点
    var newP = document.creatElement('p');//创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello,Kuangshen';
    //创建一个标签节点
    var myScript = document.creatElement('script');
    myScript.setAttribute('type','text/javascript');
    
    //可以创建一个style标签
    var myStyle = document.creatElement('style');//创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容
    
    document.getElementByTagName('head')[0].appendChild(myStyle);
</script>

7、insertBefore（元素前插入）

//参数一：要插入的新的节点
//参数二：本来就有的节点
//作用：需要将新的节点插入在原来的节点的后边，如下为将newP节点插入在JavaSE节点的后面
list.insertBefore(newP, JavaSE);

<p id="test-first-p">Java</p>
<div id="list">
    <p id="JavaEE">JavaEE</p>
    <p id="JavaSE">JavaSE</p>
    <p id="JavaWeb">JavaWeb</p>
</div>
<script>
    let list = document.getElementById("list");
    let JavaSE = document.getElementById("JavaSE");

    let newP = document.createElement("p");
    newP.setAttribute("id", "newP");
    newP.innerHTML = "<strong>我是新创造的p节点</strong>"

    list.insertBefore(newP, JavaSE);

</script>

九、操作表单

1、表单是什么

表单是什么？：form——-DOM树

表单的目的：提交信息

文本框——text
下拉框——select
单选框——radio
多选框——checkbox
隐藏域——hidden
密码框——password
…

2、获得要提交的信息

<form action="https://www.baidu.com" onsubmit="" method="post">
    <label for="username">用户名：</label><input type="text" name="username" id="username"><br/>
    <label for="password">用户名：</label><input type="password" name="username" id="password"><br/>
    <input type="submit" value="提交">
</form>

<script>
    function submitTest() {
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;

        console.log(username);//输出用户名
        console.log(password);//输出密码
        return false;
      
    }

</script>

3、提交表单。md5加密密码，表单优化

提交表单：在form标签中有个属性onsubmit，如果填入return false可以阻止表单的提交
md5加密：需要使用md5的代码将表单输入的密码传入给md5
- 将正确密码保存到一个隐藏域中，通过隐藏域进行提交
使用onsubmit属性来控制表单的提交

<form action="https://www.baidu.com" onsubmit="return submitTest()" method="post">
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br/>

    <label for="password">用户名：
    </label><input type="password" id="password"><br/>

    <input type="hidden" id="hidden-password" name="password"><br/>
    
    <input type="submit" value="提交">

</form>

<!--MD5加密工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<script>

    function submitTest() {
        let username = document.getElementById("username");
        let password = document.getElementById("password");
        let hidden_password = document.getElementById("hidden-password");

        //将输入的密码保存到隐藏域中，通过隐藏域提交表单
        hidden_password.value = md5(password.value);

        if (password.value === "123456" && username.value === "admin") {
            //用户名和密码输入满足条件，返回true，提交表单
            return true;
        } else {
            //用户名和密码不满足条件按返回false，不提交表单
            return false;
        }
    }

</script>

十、jQuery

javaScript和jQuery的关系？

jQuery库，里面存在大量的JavaScript函数

1、获取jQuery

去jQuery官网下载

jQuery的使用公式：$(selector).action()

/*
公式：$(select).action()
公式：$(选择器).事件（点击事件、失去焦点事件等）()
使用：jQuery的使用公式：$(selector).action()
*/

//JavaScript中的点击事件
let clickTest = document.getElementById("jquery-test");
clickTest.onclick = function () {
    alert("123");
}

//jQuery中的点击事件
//选择器(select)：css中的选择器，action：绑定事件
$('#jquery-test').click(function () {
    alert("弹出来");
});

2、选择器

CSS中的选择器在jQuery中都能使用

API网址：http://jquery.cuishifeng.cn/

//标签选择器
//id选择器
//类选择器

//原生JavaScript
document.getElementsByTagName("");
document.getElementById("");
document.getElementsByClassName("");

//jQuery，css中的选择器这里全部能使用
$("p").click();
$("#pId").click();
$(".pClass").click();

3、事件

鼠标事件、键盘事件，其他事件

鼠标事件

简单使用：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery事件</title>
        <style>
            #divMove {
                width  : 500px;
                height : 500px;
                border : 1px solid red;
            }
        </style>
    </head>
    <body>

        mouse：<span id="mouseMove"></span>

        <div id="divMove">
            在这里移动鼠标试试
        </div>

        <script src="../js/jquery-3.6.0.js"></script>
        <script>
            //当页面加载完
            // $(document).read(function () {  });

            //当页面加载完成的简写
            $(function () {
                $("#divMove").mousemove(function (e) {
                    $("#mouseMove").text("x：" + e.pageX + "====y：" + e.pageY);
                });
            });
            //获取鼠标

        </script>

    </body>
</html>

4、操作DOM

文本的操作

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>操作DOM</title>
    </head>
    <body>

        <ul id="test-ul">
            <li class="js">JavaScript</li>
            <li name="jQuery">jQuery</li>
            <li name="Vue">Vue</li>
        </ul>

        <script src="../js/jquery-3.6.0.js"></script>
        <script>
            //选择id为 test-ul 下的所有 li 且 li 中有属性为 name 且属性的值为 jQuery的文档
            let str = "#test-ul li[name='jQuery']";
            console.log("修改之前的值为：" + $(str).text());//查询值
            $(str).text("修改了吗");//修改值
            console.log("修改之后的值为：" + $(str).text());//查询值

            console.log("修改之前的值为：" + $("#test-ul").html());//查询值
            $("#test-ul").html("<strong>JavaScript</strong>");//修改值
        </script>

    </body>
</html>

CSS的操作

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>操作CSS</title>
    </head>
    <body>
        <div id="test-div"></div>
        <script src="../js/jquery-3.6.0.js"></script>
        <script>
            //写一条CSS语句
            $("#test-div").css("background-color","deepskyblue");

            //同时写多条css语句
            $("#test-div").css({"height": "100px", "width": "100px"})
        </script>

    </body>
</html>

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

1 2	$('#test-ul li[name=python]').show(); $('#test-ul li[name=python]').hide();

测试其他：

1
2
3

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

Ajax

$('#form').ajax()

$.ajax({url:"test.html",context:document.body,success:function(){
	$(this).addClass("done");
}})

5、小技巧

1、如何巩固JS（看jQuery源码，看游戏源码！）

2、巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果~）