js笔记（学习存档）

🕗 发布于 2024-04-08 15:12 javascript 笔记学习

JS的调用方式与执行顺序

使用方式

HTML页面中的任意位置加上<script type="module"></script>标签即可。

常见使用方式有以下几种：

直接在<script type="module"></script>标签内写JS代码。
直接引入文件：<script type="module" src="/static/js/index.js"></script>。
将所需的代码通过import关键字引入到当前作用域。
例如：

/static/js/index.js文件中的内容为：

let name = "acwing";

function print() {
    console.log("Hello World!");
}

export {
    name,
    print
}

<script type="module"></script>的内容为：

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

执行顺序

类似于HTML与CSS，按从上到下的顺序执行；
事件驱动执行；

HTML, CSS, JavaScript三者之间的关系

CSS控制HTML
JavaScript控制HTML与CSS
为了方便开发与维护，尽量按照上述顺序写代码。例如：不要在HTML中调用JavaScript中的函数。

let与const

用来声明变量，作用范围为当前作用域。

et用来定义变量；
const用来定义常量；

例如：

let s = "acwing", x = 5;

let d = {
    name: "yxc",
    age: 18,
}

const n = 100;

变量类型

number：数值变量，例如1, 2.5
string：字符串，例如"acwing", ‘yxc’，单引号与双引号均可。字符串中的每个字符为只读类型。
boolean：布尔值，例如true, false
object：对象，类似于C++中的指针，例如[1, 2, 3]，{name: “yxc”, age: 18}，null
undefined：未定义的变量
类似于Python，JavaScript中的变量类型可以动态变化。

运算符

与C++、Python、Java类似，不同点：

**表示乘方
等于与不等于用=== 和 !==

输入与输出

输入

从HTML与用户的交互中输入信息，例如通过input、textarea等标签获取用户的键盘输入，通过click、hover等事件获取用户的鼠标输入。
通过Ajax与WebSocket从服务器端获取输入
标准输入，参考AcWing 1. A + B

输出

调试用console.log，会将信息输出到浏览器控制台
改变当前页面的HTML与CSS
通过Ajax与WebSocket将结果返回到服务器

格式化字符串

字符串中填入数值：

let name = 'yxc', age = 18;
let s = `My name is ${name}, I'm ${age} years old.`;

定义多行字符串：

let s = 
`<div>
    <h2>标题</h2>
    <p>段落</p>
/div>`

保留两位小数如何输出:

let x = 1.234567;
let s = `${x.toFixed(2)}`;

判断语句

JavaScript中的if-else语句与C++、Python、Java中类似。

例如：

let score = 90;
if (score >= 85) {
    console.log("A");
} else if (score >= 70) {
    console.log("B");
} else if (score >= 60) {
    console.log("C");
} else {
    console.log("D");
}

JavaScript中的逻辑运算符也与C++、Java中类似：

&&表示与
||表示或
!表示非

循环语句

JavaScript中的循环语句与C++中类似，也包含for、while、do while循环。

for循环

for (let i = 0; i < 10; i++) {
    console.log(i);
}

枚举对象或数组时可以使用：

for-in循环，可以枚举数组中的下标，以及对象中的key
for-of循环，可以枚举数组中的值，以及对象中的value

while循环

let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

do while循环

do while语句与while语句非常相似。唯一的区别是，do while语句限制性循环体后检查条件。不管条件的值如何，我们都要至少执行一次循环。

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 10);

对象

英文名称：Object。
类似于C++中的map，由key:value对构成。

value可以是变量、数组、对象、函数等。
函数定义中的this用来引用该函数的“拥有者”。
例如：

let person = {
    name: "yxc",
    age: 18,
    money: 0,
    add_money: function (x) {
        this.money += x;
    }
}

对象属性与函数的调用方式：

person.name、person.add_money()
person[“name”]、person[“add_money”]()

数组

数组是一种特殊的对象。
类似于C++中的数组，但是数组中的元素类型可以不同。

数组中的元素可以是变量、数组、对象、函数。

例如：

let a = [1, 2, "a", "yxc"];

let b = [
    1,  // 变量
    "yxc",  // 变量
    ['a', 'b', 3],  // 数组
    function () {  // 函数
        console.log("Hello World");
    },
    { name: "yxc", age: 18 }  // 对象
];

访问数组中的元素

通过下标。

例如：

a[0] = 1; // 访问数组a[]的第0个元素
console.log(a[0]);

数组的常用属性和函数

属性length：返回数组长度。注意length是属性，不是函数，因此调用的时候不要加()
函数push()：向数组末尾添加元素
函数pop()：删除数组末尾的元素
函数splice(a, b)：删除从a开始的b个元素
函数sort()：将整个数组从小到大排序
自定义比较函数：array.sort(cmp)，函数cmp输入两个需要比较的元素，
返回一个-实数，负数表示第一个参数小于第二个参数，0表示相等，正数表示大于。

函数

函数是用对象来实现的。
函数也C++中的函数类似。

定义方式

function add(a, b) {
    return a + b;
}

let add = function (a, b) {
    return a + b;
}

let add = (a, b) => {
    return a + b;
}

返回值

如果未定义返回值，则返回undefined。

类

与C++中的Class类似。但是不存在私有成员。

this指向类的实例。

定义

class Point {
    constructor(x, y) {  // 构造函数
        this.x = x;  // 成员变量
        this.y = y;
        this.init();
}

init() {
    this.sum = this.x + this.y;  // 成员变量可以在任意的成员函数中定义
}

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

let p = new Point(3, 4);
console.log(p.toString());

继承

class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y); // 这里的super表示父类的构造函数
        this.color = color;
    }
toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}

注意：

super这个关键字，既可以当作函数使用，也可以当作对象使用。
- 作为函数调用时，代表父类的构造函数，且只能用在子类的构造函数之中。
- super作为对象时，指向父类的原型对象。
在子类的构造函数中，只有调用super之后，才可以使用this关键字。
成员重名时，子类的成员会覆盖父类的成员。类似于C++中的多态。

静态方法

在成员函数前添加static关键字即可。静态方法不会被类的实例继承，只能通过类来调用。例如：

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
}
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
}
    static print_class_name() {
        console.log("Point");
    }
}
let p = new Point(1, 2);
Point.print_class_name();
p.print_class_name();  // 会报错

静态变量

在ES6中，只能通过class.propname定义和访问。例如：

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    Point.cnt++;
}

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}
Point.cnt = 0;

let p = new Point(1, 2);
let q = new Point(3, 4);

console.log(Point.cnt);

事件

JavaScript的代码一般通过事件触发。

可以通过addEventListener函数为元素绑定事件的触发函数。

常见的触发函数有：

鼠标

click：鼠标左键点击
dblclick：鼠标左键双击
contextmenu：鼠标右键点击
mousedown：鼠标按下，包括左键、滚轮、右键
event.button：0表示左键，1表示中键，2表示右键
mouseup：鼠标弹起，包括左键、滚轮、右键
event.button：0表示左键，1表示中键，2表示右键

键盘

keydown：某个键是否被按住，事件会连续触发
event.code：返回按的是哪个键
event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了alt、ctrl、shift键。
keyup：某个按键是否被释放
event常用属性同上
keypress：紧跟在keydown事件后触发，只有按下字符键时触发。适用于判定用户输入的字符。
event常用属性同上
keydown、keyup、keypress的关系类似于鼠标的mousedown、mouseup、click

表单

focus：聚焦某个元素
blur：取消聚焦某个元素
change：某个元素的内容发生了改变

窗口

需要作用到window元素上。

resize：当窗口大小放生变化
scroll：滚动指定的元素
load：当元素被加载完成

常用库

jQuery

在这里插入图片描述

setTimeout与setInterval

在这里插入图片描述

requestAnimationFrame

在这里插入图片描述

Map与Set

在这里插入图片描述

localStorage

在这里插入图片描述

JSON

在这里插入图片描述

日期

在这里插入图片描述

WebSocket

在这里插入图片描述

window

在这里插入图片描述

canvas

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

原文地址：https://blog.csdn.net/qq_34682765/article/details/137479141

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Scala第十八章节(Iterable集合、Seq集合、Set集合、Map集合以及统计字符个数案例)
下一篇：大话设计模式——10.适配器模式（Adapter Pattern）

MySQL数据库基础
在过去的mysql中主要是使用的utf8mb3，但是mysql显示的就是utf8，中mysql8中区分显示了。类似于不同的编译器，虽然C/C++的代码是一样的，但是预处理、编译、汇编、链接这些过程却不
阅读更多2024-09-30
Percona Monitoring and Management
Percona Monitoring and Management (PMM)是一款开源的专用于管理和监控MySQL、MongoDB、PostgreSQL。
阅读更多2024-09-30
鸿蒙开发（NEXT/API 12）【已连接穿戴设备查询】手机侧应用开发
Wear Engine提供查询用户已连接的穿戴设备列表（即支持Wear Engine能力且与手机侧运动健康App处于连接状态的穿戴设备）的接口。
阅读更多2024-09-30
Redis数据库
本篇文章介绍了redis的相关知识，并使用springboot集成redis，实现缓存和分布式锁，后续会对文章勘误及更新~~
阅读更多2024-09-30
旧版的存档
【代码】旧版的存档。
阅读更多2024-09-30
Spring Boot 封装统一返回结果及全局异常处理
为了更细致地控制异常处理，我们可以定义一些自定义异常。然后，在全局异常处理器中添加对自定义异常的处理。通过封装统一的返回结果和全局异常处理，我们可以让Spring Boot应用更加健壮和易于维护。这种
阅读更多2024-09-30
【C++】IO流
C++IO流，包含输入输出流、文件流、字符流
阅读更多2024-09-30
低至1元/小时：国庆七天，30元通关《黑神话：悟空》！
随着《黑神话：悟空》自8月20日全球同步上线，正式登陆PC、PS5平台以来，以其精湛的画面和流畅的战斗体验，在发售三天后，该作的全平台销量超过1000万套，打破中国游戏历史记录，被媒体称为“中国首款3
阅读更多2024-09-30
阿里巴巴国际站获取商品详情item_get接口技术分享
item_get API接口是阿里巴巴开放平台提供的一个重要接口，它允许商家通过API调用，获取阿里巴巴平台上的商品详细信息。这些信息包括商品标题、价格、库存、属性、描述等，为商家提供了全面、准确的商
阅读更多2024-09-30
软件测试谣言二三事，认真你就输了
软件测试的职业寿命，取决于互联网行业能存活多久，至少目前看来，这个职业没有消失的风险，至于你能在这个职业待多久，那取决于你自己的能力，我见过不少超过35岁的老员工还在测试的职位上兢兢业业。以广州为例，
阅读更多2024-09-30

js笔记（学习存档）

JS的调用方式与执行顺序

使用方式

常见使用方式有以下几种：

执行顺序

HTML, CSS, JavaScript三者之间的关系

let与const

变量类型

运算符

输入与输出

输入

输出

格式化字符串

字符串中填入数值：

定义多行字符串：

保留两位小数如何输出:

判断语句

循环语句

for循环

while循环

do while循环

对象

数组

访问数组中的元素

数组的常用属性和函数

函数

定义方式

返回值

类

定义

继承

注意：

静态方法

静态变量

事件

鼠标

键盘

表单

窗口

常用库

jQuery

setTimeout与setInterval

requestAnimationFrame

Map与Set

localStorage

JSON

日期

WebSocket

window

canvas

相关文章