• Web基础 - JavaScript

    前言

              学习 JavaScript 内容！

    文章目录

    一、js 的引用方式与执行顺序

    1. 引用方式

    与使用加载 css 文件类似，在 HTML 页面中的任意想要执行 js 代码的位置加上<script type="module"></script>标签即可

    引入 js 代码的方式

    1. 在标签中直接写 js 代码
      <script type="module"> 中的 type=“module” 的作用：会严格限制每个变量等在应有的作用域内，不会对作用域外其它部分 js 代码产生影响。
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 方式1 -->
    <script type="module">
        let x = 3;
        console.log(x);
    </script>
</body>

</html>	

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    1. 复用 js 代码（让一份代码在多个页面里执行）
      用一个文件管理 js 代码，然后在页面任意位置引入 js文件即可。
    // /static/js/index.js文件中的内容为
console.log("Hello World")

    • 1
    • 2
    <!-- <script type="module"></script>中的内容为： -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 方式2 -->
    <script type="module" src="/js课/static/js/index.js"></script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    1. 将所需的代码通过 import 关键字引入到当前作用域（只希望用到 js 文件中的某些变量或函数）
      通过 export 将其它文件可以调用的变量、函数、类等暴露出来。
      通过 import 将 js 文件里暴露出来的内容引入到当前作用域。
    // /static/js/index.js文件中的内容为
let name = "yjx";
let age = 18

function print() {
    console.log("My name is " + name);
}

export {
    name,
    print
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="module">
        import { name, print } from "/js课/static/js/index.js";
        console.log(name);
        print();
    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    2. 执行顺序

    1. js 与 C++ 和 Java 不同的地方在于 C++ 和 Java 执行从主函数的入口开始执行，而 js 代码没有明确的执行入口，按照在页面中从上到下的顺序依次执行与渲染 html 和 css 的顺序一样。
    2. 事件驱动执行。

    3. html、css、js 三者之间的关系

    1. css 可以操控 html，反之不行。
    2. js 可以操控 css 和 html。js 可以改变 html 的结构，在 html 里面随意添加和删除标签和内容，也可以通过 js 改变 css 对应样式。
      在这里插入图片描述

    二、变量与运算符

    1. 变量的声明与定义

      • 只声明不定义： let a;
      • 定义：let x = 3, name = "yjx";
      • const 用来定义常量 const y = 6;

    2. 变量类型动态变化：let 定义变量时，不用申明类型，js 中的变量类型是动态的。

    let name = "yjx", x = 6;

let d = {
    name: "yjx",
    age: 20,
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    1. 变量类型

      • 基本数据类型

        • number 数值变量：js 中不管是整数还是浮点数统一为 number 类型
        • string 字符串：
          • 不区分单引号 '' 和双引号 ""
          • 字符串中每一个字符都是只读变量，不能修改赋值
          • substr 函数，使用方法同 C++
        • boolean 布尔值：true，false
        • undefined：未定义的变量

      • 引用数据类型

        • 引用数据类型解释

          • 引用类型的值是保存在内存中的对象
          • 当一个变量是一个对象时，实际上变量中保存的并不是对象本身而是对象的引用
          • 当从一个变量向另一个变量复制引用类型的值时，会将对象的引用复制到变量中，并不是创建一个新的对象
          • 这时，两个变量指向的是同一个对象。因此，改变其中一个变量会影响另一个

        • object：对象，类似于C++中的指针

          • 类似于 C++ 中的 map 和 python 中的 字典
          • js 中的对象的关键字一般都是字符串，每个关键字对应的值可以是任意类型
          • 定义：let d = { name = "yjx", age = "18", };，关键字字符串可以加 "" 也可以不加
          • 调用属性
            • 方式 1：d["name"] = 'lj'; 或 d['name'] = 'lj';
            • 方式 2：d.name = "lj";
          • 动态加值：d["school"] = "pku"; 或者 d.school = "pku";
          • 删除字典中的某个属性：delete d.school;
          • 直接输出一个对象：console.log(b);
          • null 也是一个 object 类型
          • undefined 未定义的变量类型，例如：let x;

    1. 运算符
      • ** 表示乘方
      • === 等于，!== ，会同时判断变量的类型和数值

    三、输入和输出

    1. 输入

    1. 通过页面的交互输入
    2. 通过从服务器端获取输入
    3. 从标准输入里读取信息
    let fs = require('fs');
let buf = '';

// 当输入缓冲区内有内容时会执行下面的函数
process.stdin.on('readable', function() {
	// 如果有输入从缓冲区中将内容读进来，将内容放到 buf 里
    let chunk = process.stdin.read();
    if (chunk) buf += chunk.toString();
});

// 当输入缓冲区内没有内容时（输入完成）会执行下面的函数
process.stdin.on('end', function() {
    buf.split('\n').forEach(function(line) {
    	// 对于一行的输入内容用空格将其隔开，每一个数转换成整数放到 tokens 里。
        let tokens = line.split(' ').map(function(x) { return parseInt(x); });
        if (tokens.length != 2) return;
        console.log(tokens.reduce(function(a, b) { return a + b; }));
    });
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    2. 输出


    四、判断

               与 C++ 的使用类似

    五、循环

    1. 和 C++ 类似
    for (let i = 0; i < 10; i++) {
    console.log(i);
}

    • 1
    • 2
    • 3
    1. 枚举对象或数组时可以有下面两种写法
      • for-in 循环，可以枚举数组中的下标，以及对象中的 key
      • for-of 循环，可以枚举数组中的值，以及对象中的 value

    六、对象

    1. value 可以是变量、数组、对象、函数等。
    2. 对象属性与函数的调用：
      • 方式 1：对象属性的调用：person.name;，对象函数的调用：person.add_money();
      • 方式 2：对象属性的调用：person["name"];，对象函数的调用：person["add_money"]();
    3. 创建对象
      两种方式
      如果一个函数作为一个对象的属性保存，那么我们称这个函数是这个对象的方法，调用这个函数就说调用对象的方法（method）。方法和函数只是名称上的区别，没有其它别的区别
    // 方式1
let person = new Object();
person.name = "yjx";
person.age = 18;
console.log(person);

    • 1
    • 2
    • 3
    • 4
    • 5
    // 方式2
let person = {
    name: "yjx",
    age: 18
};
console.log(person);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    let person = {
    name: 'yjx',
    age: 18,
    money: 0,
    friends: ['Bob', 'Alice', 'Lucy'],  // 值为数组
    clothes: {
        color: "red",
        price: 20,
    },
    // 值为函数。如果一个函数作为一个对象的属性保存，那么我们称这个函数是这个对象的方法，
    // 调用这个函数就说调用对象的方法（method）。方法和函数只是名称上的区别，没有其它别的区别
    add_money: function (x) {			
        this.money += x;                // 函数定义中的this用来引用该函数的“拥有者”。
    },
};

function main() {
    // 调用方式 1
    console.log(person.money);
    person.add_money(10);                // ()：执行函数
    console.log(person.money);

    // 调用方式 2
    console.log(person["money"]);
    person["add_money"](10);
    console.log(person["money"]);
}

export {
    main
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="module">
        import { main } from "/js课/static/js/index.js";
        main();
    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    七、数组

    1. 数组的定义：数组内的元素可以是变量、数组、对象、函数
    let a = [1, 2, "yjx", [3, 4, 5]];
let b = []; // 空数组
let c = [
    1,  // 变量
    "yjx",  // 变量
    ['a', 'b', 3],  // 数组
    function () {  // 函数
        console.log("Hello World");
    },
    { name: "yxc", age: 18 }  // 对象
];

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    1. 数组的访问和赋值：通过下标，例如：c[0];，c[0] = 2; 没有数组下标越界的概念。
    2. 数组的常用属性和函数
      1. length：返回数组长度，注意不要加 ()
      2. push()：向数组末尾添加元素
      3. pop()：删除数组末尾元素
      4. splice(a, b)：删除下标从 a 开始的 b 个数
      5. sort()：将数组从小到大排序
        • 自定义比较函数：逆序：let main = { a.sort(function(a, b)) { return b - a; });

    八、函数

    1. 定义（3 种方式）

    1. 第一种方式
    // 第一种方式，function 为函数修饰符
function add (a, b) {
	return a + b;
};

    • 1
    • 2
    • 3
    • 4
    1. 第二种方式：js 中的函数名就是一个一般的变量名，可随便赋值。js 中函数和变量没有区别
    // 第二种方式：js 中的函数名就是一个一般的变量名，可随便赋值
let add = function (a, b) {
	return a + b;
}

let a = 3;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    1. 第三种方式：第二种方式的简写，将 function 换成 =>
    let add = (a, b) => {
	return a + b;
}

    • 1
    • 2
    • 3

    2. 函数的调用

    // 函数声明
let add = (a, b) => {
	return a + b;
}

// 函数调用
add();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    3. 函数返回值

    如果没有 return，返回 undefined。


    九、类

    1. 类与实例

    在这里插入图片描述

    2. 定义

    1. 使用构造函数来创建对象
      每一个构造函数都可以理解为一个类别，用构造函数所创建的对象我们也成为类的实例
    2. 构造函数
      • 构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写
      • 构造函数和普通函数的还有一个区别就是调用方式的不同，普通函数是直接调用，而构造函数需要使用 new 关键字来调用。
    3. 构造函数怎么执行创建对象的过程
      • 调用构造函数，它会立刻创建一个新的对象
      • 将新建的对象设置为函数中this，在构造函数中可以使用 this 来引用新建的对象
      • 逐行执行函数中的代码
      • 将新建的对象作为返回值返回
      • 注意：构造函数将创建对象和返回对象都给我们隐藏了，使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。我们将通过一个构造函数创建的对象，称为是该类的实例。

    3. this

    1. 当以函数的形式调用时，this是window

    2. 当以方法的形式调用时，哪个对象调用方法， this 就是哪个对象

    3. 当以构造函数的形式调用时，this 就是新创建的那个对象

    //创建一个全局变量name
var name = "全局变量name";

//创建一个函数
function fun() {
    console.log(this.name);
}

//创建一个对象
var obj = {
    name: "孙悟空",
    sayName: fun
};

//我们希望调用obj.sayName()时可以输出obj的名字而不是全局变量name的名字
obj.sayName();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    4. 继承

    继承用于实现一些比较类似的但又不是完全类似的东西

    class Point {
    constructor(x, y) {             // 构造函数
        this.x = x;                 // 成员变量，this 指当前类的实例
        this.y = y;
    }

    toString() {					// 成员函数
        return `(${this.x}, ${this.y})`;
    }
}

class ColorPoint extends Point {    // 类的命名一般用驼峰命名：每个单词的首字母大写
    constructor(x, y, color) {
        super(x, y);                // super()指父类的构造函数，先初始化父类的构造函数
        this.color = color;         // this 一定要在 super 后调用
    }

    toString() {
        return `${this.color} ${super.toString()}`;// super指父类的实例
    }
}

let main = function () {
    let p = new ColorPoint(3, 4, 'red');
    console.log(p.toString());      //当子类和父类的成员函数名称相同时，调用时当前的子类的成员函数会将父类的成员函数覆盖掉，类似于C++中多态
}

export {
    main
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    4.静态方法

    1. 静态方法的定义
    2. 静态方法的访问
    class Point {
    constructor(x, y) {             // 构造函数
        this.x = x;                 // this 指当前实例
        this.y = y;
    }

    toString() {
        return `(${this.x}, ${this.y})`;
    }

    static print_class_name() {     // 静态成员函数
        console.log('Ponit');
    }
}

let main = function () {
    let p = new ColorPoint(3, 4);	// 初始化实例时不会将静态成员变量和函数初始化，只会将非静态成员变量和函数初始化
    Point.print_class_name();       // 通过类名来访问静态成员函数
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    5. 静态变量

    1. 静态变量的定义
    2. 静态变量的访问
    class Point {
    constructor(x, y) {             // 成员函数
        this.x = x;                 // this 指当前实例
        this.y = y;

        Point.cnt++;                // 静态变量通过类名来访问
    }

    toString() {
        return `(${this.x}, ${this.y})`;
    }

    static print_class_name() {     // 静态成员函数
        console.log('Ponit');
    }
}

Point.cnt = 0;

let main = function () {
    for (let i = 0; i < 3; i++) {
        new Point(3, 4);            // 每次调用构造函数都会让静态变量 cnt ++
    }

    console.log(Point.cnt);         // 输出为 3
}

export {
    main
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    十、事件

    鼠标

    键盘

    1. keydown：按下某个键就会触发，长按会连续触发，所有键都可以识别到
    2. keyup：某个按键是否被释放
    3. keypress：与 keydown 的实现功能类似，但 keypress 按下字符键时才会触发，按下功能键不触发

    十一、常用库

    第一：jQuery

    作用：更方便的操作 html 和 css

    1. 安装

    示例：选取标签

    // 原生 js 写法
let main = function () {
    let div = document.querySelector('div');
    console.log(div);
}

export {
    main
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    // jQuery 写法
let main = function () {
    let $div = $('div');    // jQuery 选取的标签一般会加一个$，可加可不加
    console.log($div);
}

    • 1
    • 2
    • 3
    • 4
    • 5

    2. 选择器

    1. 作用：方便呢的选择 html 中的某一个标签
    2. 方式：$(selector)，可以将 $() 看成是一个函数；selector 是一个参数，类型是字符串。选择时候与 css 选择器写法类似，例如：
    $('div');	// 选取所有div
$('#big-div');	// 选取所有 id 为 big-div 的标签
$('.big-div');	// 选取所有 class 为 big-div 的标签
$('div > p')

    • 1
    • 2
    • 3
    • 4

    3. 事件

    1. 事件的绑定
    let main = function () {
    let $div = $('div');
    // 方式 1
    $div.on("click", function () {
        console.log('click div');
    })
    // 方式 2
    $div.click(function () {
        console.log('click div');
    })
}
export {
    main
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    1. 事件的解绑 $(selector).off(event, func)
    2. 当存在多个相同类型的事件触发函数时，可以通过 click.name 来区分
    3. return fasle

    4. 标签的隐藏和显示

    5. 标签的添加和删除

    6. ajax

    ajax 的优势：在不刷新页面的情况下只从服务器端获取某些数据
    GET 方法：从服务器端获取数据

    $.ajax({
    url: url,		// url 写后端的链接
    type: "GET",
    data: {			// 写向后端中传的各种参数
    },
    dataType: "json",
    success: function (resp) {		// 当后端成功返回内容后，从resp众解析出来内容

    },
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    POST 方法：将表单数据传给服务器端

    $.ajax({
    url: url,
    type: "POST",
    data: {
    },
    dataType: "json",
    success: function (resp) {

    },
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    第二：setTimeout与setInterval


    第三：requestAnimationFrame

    此函数经常用于显示动画效果
    浏览器每秒会刷新 60 次，requestAnimationFrame(func)，func 会在下次浏览器刷新页面之前执行一次，通常会用递归写法使其每秒执行 60 次 func 函数。

    let main = function() {
// 调用时会传入一个参数 timestamp，表示函数调用的时刻（每帧页面刷新的时刻），单位为 ms
	let step = (timestamp)=> {	
		$('div').width($('div').width + 1);
		requestAnimationFrame(step);
	}
}
requestAnimationFrame(step);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    第四：Map与Set

    map

    1. map 类似于 C++ 中的哈希表。与对象的区别：map 方便统计关键字的数量，遍历的时候一定是按照插入的顺序进行遍历。关键字可以是任意值，对象的关键字绝大部分是字符串
    2. 定义
    let map = new Map() {

}

    • 1
    • 2
    • 3

    1. 操作（增删改查）

      map.set(key, value)； 插入键值对，如果 key 已存在，则会覆盖原有的 value
      get(key); 查找关键字，如果不存在，返回 undefined
      size; 返回键值对数量
      has(key); 返回是否包含关键字 key
      delete(key)：删除关键字 key
      clear()：删除所有元素

    set

    1. 类似于 C++ 中的 set，相对于 map 来说，set 只存 key，当哈希表，用于判重
    2. 定义
    let set = new Set() {

}

    • 1
    • 2
    • 3

    1. 操作（增删改查）

      add(); 添加元素
      has(); 返回是否包含某个元素
      size(); 返回元素数量
      delete(); 删除某个元素
      clear(); 删除所有元素

    第五：localStorage

    在用户的浏览器中存键值对


    第六：JSON

    很多函数只能传字符串，但是很多内容用字符串存并不方便，一般用 MAP 存比较方便
    JSON.parse()：将字符串解析成对象
    JSON.stringify()：将对象转化为字符串

    let main = function () {
    let obj = {
        name: "yjx",
        age: 18,
    };

    let str = JSON.stringify(obj);
    let new_obj = JSON.parse(str);
}

export {
    main
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    第七、WebSocket

    ajax 协议：例如 http，前端（client 端）向后端发送一个请求，后端（server 端）接受到之后再向前端返回一个请求，完成之后就结束，后端没有办法向前端主动发送请求。
    websocket：例如：聊天工具，需要后端主动向前端发送请求，是一种全双工通信（两边都可以主动发送请求）

    第八、window

    第九、canvas

    作用：画布，高效简介地实现在浏览器中画
    学习 canvas 的方法：知道每个是干什么的即可，现用现查！
    fill开头的函数：填充
    stroke开头的函数：画边框
    画路线：直线，圆等。步骤是跟正常画画一样，一步一步画

  • 相关阅读:
    Git 使用规范流程
    51单片机+DS1302设计一个电子钟(LCD1602显示时间)
    HCL Domino/Notes专业课程和认证体系介绍
    Mapper代理开发
    什么是高防CDN?有什么优势？
    ArcGIS Pro中的拓扑检查
    【正点原子STM32连载】 第三十二章 停止模式实验 摘自【正点原子】APM32F407最小系统板使用指南
    2512. 奖励最顶尖的 K 名学生
    OpenHarmony AI 业务子系统
    ＜Linux＞Linux高级技巧和命令（自用）
  • 原文地址：https://blog.csdn.net/weixin_39903708/article/details/124913194