前端-JavaScript

一、JavaScript介绍

1.1 背景介绍

1.1.1 JavaScript框架介绍

jQuery

Angular

React

Vue

Axios

1.1.2 UI框架

Ant-Design

ElementUI、iview、ice

BootStrap：

AmazeUI

1.1.3 JavaScript 构建工具

Babel

WebPack

1.2 什么是JavaScript

1.2.1 概述

JavaScript是一门世界上最流行的脚本语言

Java vs JavaScript

10天

一个合格的后端人员，必须要精通JavaScript

1.2.2 历史

ECMAScript它可以理解为是JavaScript的一个标准

最新版本已经到es6版本~

但是大部分浏览器还只停留在支持es5代码上！

二、快速入门

2.1 引入JavaScript的两种方式

2.1.1 内部标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js快速入门</title>
<!--    1、一般把JavaScript放在head里-->
    <script>
        alert("hello,world");
    </script>
</head>
<body>

<!--    2、或者一般把JavaScript放在body里尾部-->
<!--<script>-->
<!--    alert("hello,world");-->
<!--</script>-->
</body>
</html>

2.1.1 外部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js快速入门</title>
<!--    1、一般把JavaScript放在head里-->
<!--    <script>-->
<!--        alert("hello,world");-->
<!--    </script>-->

<!--    外部引入-->
<!--    最好必须成对出现-->
    <script src="../resouces/js/ex.js">

    </script>
</head>
<body>

<!--    2、或者一般把JavaScript放在body里尾部-->
<!--<script>-->
<!--    alert("hello,world");-->
<!--</script>-->
</body>
</html>

外部js文件

效果如下：

2.2 基本语法入门

确认idea的JavaScript是版本6

2.2.1 变量赋值

JavaScript中一切的变量类型都可以是var

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <script>
    // 变量类型 变量名=变量值
    // 而在JavaScript一切的变量类型都是var
    var a=10;
    var b="1234"
    alert(a+b);
  </script>
</head>
<body>

</body>
</html>

2.2.2 条件控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <script>
    // 变量类型 变量名=变量值
    // 而在JavaScript一切的变量类型都是var
    var score=78;
    var b="1234"
    // alert(a+b);
    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>

2.2.3 多行注释

// 多行注释
/**
 * 
 */

2.2.4 `console.log`

console.log(score)
//相当于java的System.out.println()

2.3 javascript的调试

直接用google浏览器

2.3.1 使用source

流程如下：

2.3.2 其他需要用到发google功能

2.4 数据类型简介

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

2.4.1 `变量`

var abc

2.4.2`number`

js不区分小数和整数

123
123.1
1.123e3  //科学计数
-99      //复数
NaN     //not a number
Infinity  //表示无限大

2.4.3`字符串`

“abc” ‘abc’

2.4.4`布尔值`

true false

2.4.5`逻辑运算`

&&  //-两个都为真，结果为真
||  //一个为真，结果为真
! //真即假，假即真

比较运算符！！！重要！

=
==   //等于（类型不一样，值一样，也会为true）
===  //绝对等于（类型一样，值一样，为true）

这是一个js的缺陷，坚持不要使用==比较

2.4.6`null`和`undefined`

null 空指针

undefined 未定义

2.4.7`数组`

java数组要求：一系列相同类型的对象，但js不需要这样！

var arr=[1,2,3,4,5,"happy",null,true]
new Array(1,2,3,4,5,"happy",null,true)

取数组小标，如果越界了，就会undifined

2.4.8`对象`

对象用大括号，数组是中括号

每个属性之间用逗号分开。最后一个不需要逗号

var person={
    name:"happy",
    age:3,
    tag:[13,4334,"java","..."],
}

2.4.9`取对象的值`

person.name

person.age

注意：

1.NaN===NaN，这个域所有的数字都不相等，包括自己

只能通过isNaN(NaN)来判断

2.浮点数问题

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

尽量避免使用浮点数进行运算，存在精度问题。

2.5 严格检查模式

“'use strict' ” 严格检查模式，预防JavaScript的随意性导致产生的一些问题。

必须写在script的``

局部变量都建议使用let定义
前提Idea支持ES6语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>严格检查模式</title>
    <script>
        'use strict'
        i = 1;
    </script>
</head>
<body>

</body>
</html>

开启严格检查后：

三、数据类型详细应用

3.1 字符串

3.1.1 声明字符串

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

3.1.2 注意转义字符 \

\.
\n
\t
\u4e2d
\x41

3.1.3 多行字符串编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>严格检查模式</title>
    <script>
        'use strict'
        let i = 1;
        // 多行，用tab键上方的``
        let msg=`
        hello
        world
        你好
        `
        alert(msg)
    </script>
</head>
<body>

</body>
</html>

3.1.4 模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>严格检查模式</title>
    <script>
        'use strict'
        let i = 1;
        // 多行，用tab键上方的``
        let msg=`
        hello
        world
        你好
        `
        alert(msg)
        let name="happy"
        let msg2=`${name} hello`
        alert(msg2)

    </script>
</head>
<body>

</body>
</html>

3.1.5 字符串的一些方法和属性

var student="student"
undefined
student.length;
7
student[0]
's'
student[2]
'u'
student.toUpperCase()
'STUDENT'
student.indexOf("t")
1
student.charAt(2)
'u'
student.substr(3)
'dent'
student.substring(0,5)
'stude'
student.substr(0,3)
'stu'

3.1.6 字符串的可变性: 不可变

3.2 数组

3.2.1 声明数组

Array可以包含任意的数据类型。作用：存储数据（如何存、取数据）

var arr=[1,2,3,4,5,6]

3.2.2 数组的一些方法和属性

键入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

var arr=[1,2,3,4,5,6]
undefined
arr
(6) [1, 2, 3, 4, 5, 6]
arr.length
6
arr.length=10
10
arr.length
10
arr
(10) [1, 2, 3, 4, 5, 6, empty × 4]0: 11: 22: 33: 44: 55: 6length: 10[[Prototype]]: Array(0)
arr[7]
undefined
arr[11]
undefined
arr[2]
3
arr.indexOf(3)
2

3.2.3 特殊的方法

`slice()`:

数组版的substring

push()：

压入元素到尾部

pop()：

弹出尾部的一个元素

unshift() :

压入头部的一个元素

shift()：

弹出头部的一个元素

sort()：

排序

reverse()：

元素反转

concat()：

拼接数组。并没有修改数组，只是会返回一个新的数组

join('-')：

连接符，将数组变成字符串。打印拼接字符串，使用特定的的字符串连接

arr.slice(3,5)
(2) [4, 5]
arr.push('a','b');
12
arr
(12) [1, 2, 3, 4, 5, 6, empty × 4, 'a', 'b']
arr.pop();
'b'
arr
(11) [1, 2, 3, 4, 5, 6, empty × 4, 'a']
arr.unshift('A','B');
13
arr
(13) ['A', 'B', 1, 2, 3, 4, 5, 6, empty × 4, 'a']
arr.shift();
'A'
arr
(12) ['B', 1, 2, 3, 4, 5, 6, empty × 4, 'a']
arr.sort();
(12) [1, 2, 3, 4, 5, 6, 'B', 'a', empty × 4]
arr.reverse();
(12) [empty × 4, 'a', 'B', 6, 5, 4, 3, 2, 1]
arr.concat([1,2,3]);
(15) [empty × 4, 'a', 'B', 6, 5, 4, 3, 2, 1, 1, 2, 3]
arr.join('-');
'----a-B-6-5-4-3-2-1'

3.2.4 多维数组

[[1,2],['a','b'],['A','B']]
(3) [Array(2), Array(2), Array(2)]
arr1=[[1,2],['a','b'],['A','B']]
(3) [Array(2), Array(2), Array(2)]
arr1
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) ['a', 'b']
2: (2) ['A', 'B']
length: 3
[[Prototype]]: Array(0)

3.3 对象

3.3.1 声明对象

javascript也是一个面向对象的语言，可以理解为若干个键值对。

JavaScript中所有的键都是字符串，值是任意对象！


var 对象名={
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}
var person={
    name: "happy",
    age: 18,
    sex: man
}

js中的对象，{}表示一个对象，键值对描述属性xxx：yyy。多个属性之间使用逗号隔开，最后一个属性不加逗号！

3.3.2 对象复制

person
{name: 'happy', age: 31, sex: 'man'}
person.name
'happy'
person.name="gaoxing"
'gaoxing'

3.3.3 使用一个不存在的对象属性，不会报错！

person.email
undefined

3.3.4 动态的删减属性和添加属性

delete

delete person.name
true
person
{age: 31, sex: 'man'}
person.email="103098723@qq.com";
'103098723@qq.com'
person
{age: 31, sex: 'man', email: '103098723@qq.com'}

3.3.5 判断属性值是否在这个对象中

person['age']
31
person['sex']
'man'
"sex" in person
true
'toString' in person
true
person.hasOwnProperty("sex")
true
person.hasOwnProperty("toString")
false

3.4 流程控制

if 判断

while循环

for循环

forEach 循环

for in循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象</title>
    <script>
        `use strict`
        let person = {
            name: "happy",
            age: 31,
            sex: "man"
        }
        var age = 3;
        if (age > 3) {
            alert("nao nao");
        } else if (age < 3 && age >= 0) {
            alert("wawa");
        } else {
            alert("...");
        }

// while循环
        while (age<100){
            age++;
            console.log(age);
        }
// for循环
        for (let i=0;i<100;i++){
            console.log(i);
        }
// foreach循环，里面传的是一个function
        let a=[1,2,3,4,5,6,77,88]
        a.forEach(function (e) {
            console.log(e);
        })
// for in循环里面 index是索引
        for(let index in a){
            console.log(index);
        }
// for of循环里面 num是值
        for(let value of a){
            console.log(value);
        }

    </script>
</head>
<body>

</body>
</html>

3.5 Map 和 Set

ES6才出来的

3.5.1 Map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>set和map</title>
  <script>
    'use strict';
    let map=new Map([['tom',100],['jack',90],['happy',80]]);
    let name=map.get('tom');
    console.log(name);
  </script>
</head>
<body>
</body>
</html>

console显示如下：

Map(3) {'tom' => 100, 'jack' => 90, 'happy' => 80}
map.set("hha",30);
Map(4) {'tom' => 100, 'jack' => 90, 'happy' => 80, 'hha' => 30}
map.set("tom",30);
Map(4) {'tom' => 30, 'jack' => 90, 'happy' => 80, 'hha' => 30}

3.5.2 Set

无序不重复的集合。所以set可以用来去重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>set和map</title>
  <script>
    'use strict';
    let map=new Map([['tom',100],['jack',90],['happy',80]]);
    let name=map.get('tom');
    map.delete("jack")
    console.log(name);
    let set= new Set([3,1,2,3,1,1])
    console.log(set)
    // set只有添加和删除
    set.add(2);
    set.delete(1);
    // 查询set是否包含
    set.has(2)
    console.log(set)
    console.log("是否包含2："+set.has(2))
  </script>
</head>
<body>
</body>
</html>

效果如下：

3.6 iterator

只用iterator来遍历

四.函数及面向对象

方法 VS 函数

方法	函数
存在对象里	脱离对象存在

4.1 定义函数

一旦执行到retrun代表函数结束，返回结果
如果没有执行return，函数执行完也会返回结果，结果就是undefined

如下，绝对值函数

4.1.1 定义方式一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function</title>
</head>
<script>
    function abs(x){
        if (x>=0){
            return x;
        } else {
            x= -x;
            return x;
        }
    }
</script>
<body>


</body>
</html>

4.1.2 定义方式二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function</title>
</head>
<script>
    // 方式一
    function abs(x){
        if (x>=0){
            return x;
        } else {
            x= -x;
            return x;
        }
    }

    // 方式二
    var abs1=function (x){
        if (x>=0){
            return x;
        } else {
            x= -x;
            return x;
        }
    }
</script>
<body>


</body>
</html>

4.2 调用函数

abs(-10)
abs(10)

参数问题：JavaScript可以传递任意个参数，也可以不传，也不报错

typeof

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function</title>
</head>
<script>
    // 方式一
    function abs(x){
        if (x>=0){
            return x;
        } else {
            x= -x;
            return x;
        }
    }

    // 方式二
    var abs1=function (x){
        if (x>=0){
            return x;
        } else {
            x= -x;
            return x;
        }
    }
    // 判断参数
    function abs2(x){
        //可以手动抛出一场，规避不传入参数的问题
        if (typeof x!=="number"){
            throw "please input a number as argument";
        }
        if (x>=0){
            return x;
        } else {
            x= -x;
            return x;
        }
    }

</script>
<body>


</body>
</html>

arguments

argument：是一个JS免费赠送的关键字

代表，传递进来的所有的参数，是一个数组！

rest

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

rest只能写最后面，必须用...标识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function</title>
</head>
<script>
    // 方式一
    function abs(x){
        if (x>=0){
            return x;
        } else {
            x= -x;
            return x;
        }
    }

    // 方式二
    var abs1=function (x){
        if (x>=0){
            return x;
        } else {
            x= -x;
            return x;
        }
    }
    // 判断参数
    function abs2(x){
        //可以手动抛出一场，规避不传入参数的问题
        if (typeof x!=="number"){
            throw "please input a number as argument";
        }
        if (x>=0){
            return x;
        } else {
            x= -x;
            return x;
        }
    }
    // 引入rest，接收已经定义参数以外的所有参数。
    function abs3(x,y,...rest){
        //可以手动抛出一场，规避不传入参数的问题
        if (typeof x!=="number"){
            throw "please input a number as argument";
        }
        console.log("x--->",x);
        console.log("y--->",y);
        console.log(rest);
        if (x>=0){
            return x;
        } else {
            x= -x;
            return x;
        }
    }


</script>
<body>


</body>
</html>

4.3 变量作用域

Java vs Javascript

Javascript	Java
提升作用域：提升声明，但不提升赋值	变量可以提升作用域

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

假设在函数提声明的，则在函数体外不可以使用。非要实现的话可以研究下闭包

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

假设内部函数变量和外部函数变量名重名，内部为准。JavaScript中函数查找变量从自身函数开始，由内向外查找，屏蔽外部变量。（有一个查找过程）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量作用域</title>
    <script>
        'use strict';
        function f1() {
            let a = 1;
        }
        a = a + 1;
    </script>
</head>
<body>

</body>
</html>

1.提升变量的作用域：

js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值。所以与其自动提升，一般要求规范都提升到函数头部分对变量进行声明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量作用域</title>
    <script>
        // 'use strict';

        // function f1() {
        //     let a = 1;
        // }
        //
        // a = a + 1;
        function f2(){
            var x='x'+y;
            console.log(x);
            var y='y';
        }
        // f2();
    </script>
</head>
<body>
</body>
</html>

结果如下：

而如果不声明y，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量作用域</title>
    <script>
        // 'use strict';

        // function f1() {
        //     let a = 1;
        // }
        //
        // a = a + 1;
        function f2(){
            var x='x'+y;
            console.log(x);
            // var y='y';
        }
        // f2();
    </script>
</head>
<body>
</body>
</html>

一个报变量声明了没有赋值，一个报没有赋值。由此说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

但注意换成let后效果不一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量作用域</title>
    <script>
        // 'use strict';

        // function f1() {
        //     let a = 1;
        // }
        //
        // a = a + 1;
        function f2(){
            let x='x'+y;
            console.log(x);
            let y='y';
        }
        // f2();
    </script>
</head>
<body>
</body>
</html>

2.变量的声明

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

function happy(){
    var x=1,
        y=x+1,
        z,i,a;   //undefined
}

3.全局变量和函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局变量</title>
</head>
<script>
    // 全局变量
  x="happy";
  function print(){
      console.log(x);
  }
  print()
  console.log(x);
</script>
<body>

</body>
</html>

4.全局对象window

javascript的window是默认的全局变量。

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

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

5.创建全局变量和函数的规范

由于我们所有的全局变量都会绑定到我们的windows。如果不同的js文件，使用了相同的全局变量，冲突==>如何能减少冲突？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义一个全局对象避免全局变量冲突</title>
    <script>
        // 定义一个全局对象
        var happy = {};
        happy.name = "happyname";
        happy.add = function (x, y) {
            return x + y;
        }


        console.log(happy.name);
    </script>
</head>
<body>


</body>
</html>

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

比如jQuery就是把自己的变量全部绑定在jQuery对象中，调用jQuery或者$()都可以

6.局部作用域let

ES6 let关键字解决局部变量作用域冲突的问题，建议使用let去定义局部作用域的变量

使用老版本的var定义变量，不规范，局部变量可以出局部作用域。现在规范使用let

老版本var定义变量：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部作用域</title>
  <script>
    function f1(){
        for (var a=0;a<100;a++){
            console.log(a);
        }
        console.log("a的值为："+a);
    }
    f1();
  </script>
</head>
<body>

</body>
</html>

使用let以后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部作用域</title>
  <script>
    // function f1(){
    //     for (var a=0;a<100;a++){
    //         console.log(a);
    //     }
    //     console.log("a的值为："+a);
    // }
    // f1();

    function f2(){
        for (let a=0;a<100;a++){
            console.log(a);
        }
        console.log("a的值为："+a);
    }
    f2();
  </script>
</head>
<body>

</body>
</html>

7.常量const

在ES6之前，怎么定义常量：只用大写字母命名的变量就是常量，建议人不要修改，只是约定。

var PI=“3.14”;

ES6之后，引入const

4.4 方法：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象里的方法</title>
</head>
<script>
    var happy = {
        name: "happy",
        birth: 1987,
        age: function () {
            var now=new Date().getFullYear();
            return now- this.birth;
        }
    }
    console.log(happy.name);
    //注意调方法一定要用括号
    console.log(happy.age());
</script>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象里的方法</title>
</head>
<script>
    function getAge() {
        var now=new Date().getFullYear();
        return now- this.birth;
    }

    // var happy = {
    //     name: "happy",
    //     birth: 1987,
    //     age: function () {
    //         var now=new Date().getFullYear();
    //         return now- this.birth;
    //     }
    // }

    var happy = {
        name: "happy",
        birth: 1987,
        age: getAge
    }
    console.log(happy.name);
    console.log(happy.age());
</script>
<body>

</body>
</html>

1.this

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

说明：直接调getAge()没用，因为window调用他，此时this指window，而window没有这个this.age

2.`apply`

在js中可以改变控制this指向。第一个参数决定改变指向

所有方法本身都有个apply方法，改变this指向happy对象，传参为空。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象里的方法</title>
</head>
<script>
    function getAge() {
        var now=new Date().getFullYear();
        return now- this.birth;
    }

    // var happy = {
    //     name: "happy",
    //     birth: 1987,
    //     age: function () {
    //         var now=new Date().getFullYear();
    //         return now- this.birth;
    //     }
    // }

    var happy = {
        name: "happy",
        birth: 1987,
        age: getAge
    }
    console.log(happy.name);
    console.log(happy.age());
    console.log(getAge.apply(happy,[]));
</script>
<body>
</body>
</html>

五、常用内部对象

标准对象

可以用typeof判断对象的类型

typeof 34
'number'
typeof "34"
'string'
typeof '34'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof null
'object'
typeof []
'object'
typeof {}
'object'
typeof Map
'function'
typeof Math.abs
'function'
typeof undefined
'undefined'
typeof Date
'function'

5.1 Date

date对象相关方法：

注意month

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date</title>
    <script>
        let now=new Date();
        console.log("now.getFullYear()==》"+now.getFullYear());
        console.log("now.getMonth()==》"+now.getMonth());
        console.log("now.getDate()==》"+ now.getDate());
        console.log("now.getDay()==》"+now.getDay());
        console.log("now.getHours()==》"+now.getHours());
        console.log("now.getMinutes()==》"+now.getMinutes());
        console.log("now.getSeconds()==》"+ now.getSeconds());
        console.log("now.getTime()==》"+ now.getTime());
    </script>
</head>
<body>

</body>
</html>

当前时间：2022年4月8日11:34

now.toLocaleString()
'4/8/2022, 11:35:37 AM'
now.toLocaleTimeString()
'11:35:37 AM'

5.2 JSON

5.2.1 JSON的定义

json是什么

JSON（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式。

简洁和清晰的层次结构使得JSON成为理想的数据交换语言。

易于人阅读和编写，同时也易于机器解析和生成

有效提升网络传输效率

早期，数据传输都是使用xml格式。Json和XML的可读性不相上下，一边是简易的语法，一边是规范标签形式

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

5.2.2 JSON格式

对象和map都用{}

数组和list都用[]

所有的键值对，都是用key:value ，键值对之间用逗号，

Json实际为字符串，一种特殊的字符串。

JavaScript可以很方便的将对象转换成json字符串

对象转json字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var user = {
            name: "happy",
            age: 35,
            sex: "男"
        }
        // 对象转换成为json字符串
        // console.log(user.toString());
        let jsonuser = JSON.stringify(user);
        console.log(typeof user);
        console.log(user);
        console.log("*****************");
        console.log(typeof jsonuser);
        console.log(jsonuser);
    </script>
</head>
<body>

</body>
</html>

json字符串转对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var user = {
        //     name: "happy",
        //     age: 35,
        //     sex: "男"
        // }
        // // 对象转换成为json字符串
        // // console.log(user.toString());
        // let jsonuser = JSON.stringify(user);
        // console.log(typeof user);
        // console.log(user);
        // console.log("*****************");
        // console.log(typeof jsonuser);
        // console.log(jsonuser);
        // {"name":"happy","age":35,"sex":"男"}
        let jsonuser='{"name":"happy","age":35,"sex":"男"}';
        let object=JSON.parse(jsonuser);
        console.log(typeof object);
        console.log(object);
    </script>
</head>
<body>

</body>
</html>

5.3 AJAX

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

六、面向对象编程

6.1 什么是面向对象

javascript、java、c# 、python都有面向对象，但javascript有些区别！

普通

类：模板，是一个抽象

对象：具体的示例

但在JavaScript里面需要大家换一个思维方式。

1.proto继承

ES6之前，用原型。可以把原型对象理解为父类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原型</title>
    <script>
        let user={
            name:"user",
            age:31,
            run: function(){
                console.log(this.name + " is running!")
            }
        }
        let happy={
            name:"happy",
            age:35
        }

        // happy的原型指向给user
        happy.__proto__=user;

    </script>
</head>
<body>

</body>
</html>

2.class继承

class关键字，支在ES6引入的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class继承</title>
    <script>
        // 定义一个类
        class student{
            constructor(name) {
                this.name=name;
            }
            hello(){
                alert(this.name+"hello");
            }
        }
        let happy=new student("happy！");
        happy.hello();

    </script>
</head>
<body>


</body>
</html>

也可以extends

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class继承</title>
    <script>
        // 定义一个类
        class student{
            constructor(name) {
                this.name=name;
            }
            hello(){
                console.log(this.name+"hello");
            }
        }
        let happy=new student("happy！");
        happy.hello();

        class xiaoxuesheng extends student{
            constructor(name,age) {
                super(name);
                this.age=age;

            }
            hello2(){
                console.log(this.name+" "+this.age+" hello");
            }
        }
        let happy2=new xiaoxuesheng("happy2",35);
        happy2.hello();
        happy2.hello2();

    </script>
</head>
<body>


</body>
</html>

本质上查看对象类型还是：proto

3.原型链

在JavaScript中，每个对象都有一个属性[[Prototype]]指向自己的原型对象

七、操作Bom对象

B/S

B:浏览器

BOM：浏览器对象模型

浏览器介绍

JavaScript和浏览器的关系？

JavaScript：诞生，就是为了让他在浏览器中运行脚本。

主流内核如下：

IE： 6~12
Chrome
FireFox （Linux默认浏览器内核）
Safari （苹果默认浏览器内核）

7.1 window对象

window代表浏览器窗口

window.innerHeight;
1376
window.innerWidth;
246
window.outerHeight
344
window.outerWidth;
61

7.2 Navigator

封装了浏览器的信息

Navigator {vendorSub: '', productSub: '20030107', vendor: 'Google Inc.', maxTouchPoints: 1, userActivation: UserActivation, …}
appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Mobile Safari/537.36"
bluetooth: Bluetooth {}
clipboard: Clipboard {}
connection: NetworkInformation {onchange: null, effectiveType: '4g', rtt: 50, downlink: 1.85, saveData: false}
cookieEnabled: true
credentials: CredentialsContainer {}
deviceMemory: 8
doNotTrack: null
geolocation: Geolocation {}
hardwareConcurrency: 8
hid: HID {onconnect: null, ondisconnect: null}
ink: Ink {}
keyboard: Keyboard {}
language: "en-US"
languages: (2) ['en-US', 'en']
locks: LockManager {}
managed: NavigatorManagedData {onmanagedconfigurationchange: null}
maxTouchPoints: 1
mediaCapabilities: MediaCapabilities {}
mediaDevices: MediaDevices {ondevicechange: null}
mediaSession: MediaSession {metadata: null, playbackState: 'none'}
mimeTypes: MimeTypeArray {length: 0}
onLine: true
pdfViewerEnabled: false
permissions: Permissions {}
platform: "Win32"
plugins: PluginArray {length: 0}
presentation: Presentation {defaultRequest: null, receiver: null}
product: "Gecko"
productSub: "20030107"
scheduling: Scheduling {}
serial: Serial {onconnect: null, ondisconnect: null}
serviceWorker: ServiceWorkerContainer {controller: null, ready: Promise, oncontrollerchange: null, onmessage: null, onmessageerror: null}
storage: StorageManager {}
usb: USB {onconnect: null, ondisconnect: null}
userActivation: UserActivation {hasBeenActive: true, isActive: true}
userAgent: "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Mobile Safari/537.36"
userAgentData: NavigatorUAData {brands: Array(3), mobile: true, platform: 'Android'}
vendor: "Google Inc."
vendorSub: ""
virtualKeyboard: VirtualKeyboard {boundingRect: DOMRect, overlaysContent: false, ongeometrychange: null}
wakeLock: WakeLock {}
webdriver: false
webkitPersistentStorage: DeprecatedStorageQuota {}
webkitTemporaryStorage: DeprecatedStorageQuota {}
xr: XRSystem {ondevicechange: null}
[[Prototype]]: Navigator

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

7.3 screen

代表屏幕尺寸

7.4 `locaton`（重要）

location代表当前页面的url信息

location
Location {ancestorOrigins: DOMStringList, href: 'https://www.baidu.com/', origin: 'https://www.baidu.com', protocol: 'https:', host: 'www.baidu.com', …}
ancestorOrigins: DOMStringList {length: 0}
assign: ƒ assign()
hash: ""
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload: ƒ reload()
replace: ƒ replace()
search: ""
toString: ƒ toString()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
[[Prototype]]: Location

注意上面

location.reload() 可以刷新网页

location.assign("http://www.google.com")

7.5 document

document代表当前的页面，HTML dom文档树，下面DOM会专门介绍

7.5.1 DOM入门：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom入门</title>

</head>
<body>
<dl id="happy">
    <dt>标题</dt>
    <dd>12</dd>
    <dd>22</dd>
    <dd>33</dd>
</dl>
<script>
    window.dl=document.getElementById("happy");
</script>
</body>
</html>

document可以获取cookie

这是前端获取的方式，后端可以通过request对象获取。

cookie是客户端的一些本地信息，是不安全的，cookie可以被劫持的。

cookie劫持原理

www.taobao.com

植入js

<script src="happy.js"></script>
<!--恶意人员：获取你们的cookie上传到他的服务器
用ajax上传
-->

服务器端可以设置cookie为：httpOnly来保证安全性

7.6 history

代表浏览器的历史浏览记录

八、`操作Dom元素` （重要）

8.1 DOM：文档对象模型介绍

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

更新：更新Dom节点

遍历DOM节点：得到DOM节点

删除：删除一个DOM节点

添加：添加一个新的节点

前端版的增删改查

要做一个DOM节点，就必须要先获得这个Dom节点

8.2 获取dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获得dom节点</title>
</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>


<script>
    let h1 = document.getElementsByTagName("h1");
    let p1 = document.getElementById("p1");
    let p2 = document.getElementsByClassName("p2")
    console.log(h1);
    console.log(p1);
    console.log(p2);
    let father = document.getElementById("father")
    father.children;
    father.firstChild;
    father.lastChild;
    p1.nextSibling;

</script>
</body>
</html>

以上都是原生的dom对象操作方法，之后我们都是用jQuery

8.3 更新dom节点

8.3.1 操作文本内容

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

<div id="id1">1234</div>
<script>
    let id1=document.getElementById("id1");

</script>

</body>
</html>

id1.innerHTML="happy test";
id1.innerText="<h1>happy</h1>";

8.3.2 操作CSS

也可以操作CSS

id1.innerHTML="happy test";
'happy test'
id1.style.fontSize="20px"
'20px'
id1.style.color="blue";
'blue'
id1.style.padding="20px";
'20px'

注意事项

dom操作css时，下划线转驼峰命名

属性用字符串包括

8.4 删除dom节点

删除节点，先获取该节点的父节点，再干掉自己。(不能自己删除自己)

let father=节点.parent
father.removeChild(节点)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    let self=document.getElementById("p1");
    let father=self.parentElement;
    father.removeChild(self)

    // 方法二
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])

</script>

</body>
</html>

注意事项

删除一个节点子节点的时候，其children是时刻在变化的。

8.5 插入dom节点

我们获得了某个dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个dom节点就会被覆盖，我们就最好不要这样干了。

所以我们通过追加方式插入appendChild

8.5.1 追加已有节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入节点</title>
</head>
<body>
<p id="js">javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    let js=document.getElementById("js");
    let list=document.getElementById("list");
</script>
</body>
</html>

8.5.2 增加新节点(追加)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入节点</title>
</head>
<body>
<p id="js">javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    let js=document.getElementById("js");
    let list=document.getElementById("list");
    let newP=document.createElement("p");
    newP.id="happy";
    newP.innerHTML="<h1>happy h1</h1>";
    list.appendChild(newP);
</script>
</body>
</html>

给节点设置样式的几种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入节点</title>
</head>
<body>
<p id="js">javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    let js = document.getElementById("js");
    let list = document.getElementById("list");
    let newP = document.createElement("p");
    newP.id = "happy";
    newP.innerHTML = "<h1>happy h1</h1>";
    list.appendChild(newP);

    js.happy1value = "happy1value";
    js.setAttribute("happy2","happy2value")
    let body = document.getElementsByTagName("body")[0];
    // body.setAttribute("style","
    body.style.backgroundColor="green";
    

</script>
</body>
</html>

8.5.2 增加新节点(插入)

list.insertBefore(新的节点,定位节点);

list.insertBefore(newP,ee);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入节点</title>
</head>
<body>
<p id="js">javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    let js = document.getElementById("js");
    let list = document.getElementById("list");
    let newP = document.createElement("p");
    newP.id = "happy";
    newP.innerHTML = "<h1>happy h1</h1>";
    list.appendChild(newP);

    // 给节点设置属性
    js.happy1value = "happy1value";
    js.setAttribute("happy2","happy2value")
    let body = document.getElementsByTagName("body")[0];
    // body.setAttribute("style","
    body.style.backgroundColor="green";

    // 插入节点,ee前面插入newP
    let ee=document.getElementById("ee");
    list.insertBefore(newP,ee);


</script>
</body>
</html>

九.操作表单（验证）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证表单</title>
</head>
<body>

<form action="post" method="post"></form>
<label for="username">username:</label><input type="text" id="username"/>
<p>
    <input type="radio" name="sex" value="man" id="man">男
    <input type="radio" name="sex" value="woman" id="woman">女
</p>


<script>
    let userinput=document.getElementById("username");
    userinput.value="默认输入";
    let man=document.getElementById("man");
    let woman=document.getElementById("woman");
    // man.checked="checked";
    woman.checked="true";

</script>
</body>
</html>

9.1 表单级别验证函数

使用onsubmit接收，固定写法onsubmit=“return aaa()”，记得return true或false

9.2 md5加密密码

前端用MD5加密后提交密码，不直接提交password，二是用隐藏域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作表单</title>
<!--    md5工具类-->
<!--    使用互联网-->
<!--    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>-->
<!--    使用本地md5 js-->
    <script src="../resouces/js/md5.min.js"></script>
</head>
<body>
<!--按钮级别绑定提交事件-->
<!--<form action="success.html" method="post">-->
<!--    <p><label for="username">username:</label><input type="text" id="username" name="username"/></p>-->
<!--    <p><label for="password">password:</label><input type="password" id="password"/></p>-->
<!--    <input type="hidden" id="md5password" name="password"/>-->
<!--<p>-->
<!--    <input type="radio" name="sex" value="man" id="man">男-->
<!--    <input type="radio" name="sex" value="woman" id="woman">女-->
<!--</p>-->
<!--    <p>-->
<!--        <input type="submit" value="提交" onclick="oncheck()">-->
<!--    </p>-->
<!--</form>-->

<!--表单级别绑定提交事件-->
<!--表单绑定提交事件
onsubmit=绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用onsubmit接收！
固定写法onsubmit=“return aaa()”
-->
<form action="success.html" method="post" onsubmit="return oncheck()">
    <p><label for="username">username:</label><input type="text" id="username" name="username"/></p>
<!--    <p><label for="password">password:</label><input type="password" id="password" name="password"/></p>-->
    <p><label for="password">password:</label><input type="password" id="password"/></p>
    <input type="hidden" id="md5password" name="md5password"/>
    <p>
        <input type="radio" name="sex" value="man" id="man">男
        <input type="radio" name="sex" value="woman" id="woman">女
    </p>
    <p>
        <input type="submit" value="提交">
    </p>
</form>
<script>
    function oncheck(){
        let username=document.getElementById("username");
        let password=document.getElementById("password");
        let md5password=document.getElementById("md5password");

        // password.value=md5(password.value);
        console.log(username);
        md5password.value=md5(password.value);
        /**
        这里可以写判断逻辑
         表单验证通过=》return true
         表单验证不通过=》return false
         */
        return true;
    }

</script>
</body>
</html>

posted @ 2022-04-08 20:22 高兴518 阅读(41) 评论(0) 编辑收藏举报

刷新页面返回顶部

happycarpediem

前端-JavaScript

前端-JavaScript

一、JavaScript介绍

1.1 背景介绍

1.1.1 JavaScript框架介绍

jQuery

Angular

React

Vue

Axios

1.1.2 UI框架

Ant-Design

ElementUI、iview、ice

BootStrap：

AmazeUI

1.1.3 JavaScript 构建工具

Babel

WebPack

1.2 什么是JavaScript

1.2.1 概述

1.2.2 历史

二、快速入门

2.1 引入JavaScript的两种方式

2.1.1 内部标签

2.1.1 外部引入

2.2 基本语法入门

2.2.1 变量赋值

2.2.2 条件控制

2.2.3 多行注释

2.2.4 console.log

2.3 javascript的调试

2.3.1 使用source

2.3.2 其他需要用到发google功能

2.4 数据类型简介

2.4.1 变量

2.4.2number

2.4.3字符串

2.4.4布尔值

2.4.5逻辑运算

2.4.6null和undefined

2.4.7数组

2.4.8对象

2.4.9取对象的值

2.5 严格检查模式

三、数据类型详细应用

3.1 字符串

3.1.1 声明字符串

3.1.2 注意转义字符 \

3.1.3 多行字符串编写

3.1.4 模板字符串

3.1.5 字符串的一些方法和属性

3.1.6 字符串的可变性: 不可变

3.2 数组

3.2.1 声明数组

3.2.2 数组的一些方法和属性

3.2.3 特殊的方法

slice():

push()：

pop()：

unshift() :

shift()：

sort()：

reverse()：

concat()：

join('-')：

3.2.4 多维数组

3.3 对象

3.3.1 声明对象

3.3.2 对象复制

3.3.3 使用一个不存在的对象属性，不会报错！

3.3.4 动态的删减属性和添加属性

delete

3.3.5 判断属性值是否在这个对象中

3.4 流程控制

3.5 Map 和 Set

3.5.1 Map

3.5.2 Set

3.6 iterator

四.函数及面向对象

2.2.4 `console.log`

2.4.1 `变量`

2.4.2`number`

2.4.3`字符串`

2.4.4`布尔值`

2.4.5`逻辑运算`

2.4.6`null`和`undefined`

2.4.7`数组`

2.4.8`对象`

2.4.9`取对象的值`

`slice()`:

2.`apply`

7.4 `locaton`（重要）

八、`操作Dom元素` （重要）