准备好快速学习 JavaScript 了吗？
如果是，那么您需要这份 JavaScript 备忘单。它以清晰、简洁且适合初学者的方式涵盖了 JavaScript 的基础知识。
将其用作提高 JavaScript 技能的参考或指南。
让我们深入了解一下。
什么是 JavaScript？
JavaScript (JS) 是一种主要用于 Web 开发的编程语言。
它允许开发人员向网站添加交互性和动态行为。
例如，您可以使用 JavaScript 创建交互式表单来实时验证用户的输入。当用户出错时立即弹出错误消息。
像这样：
JavaScript 还可以用于启用诸如手风琴之类的功能，可以展开和折叠内容部分。
下面是一个扩展了“SEO”部分的示例：
在上面的示例中，单击系列中的每个元素会显示不同的内容。
JavaScript 通过实时操作页面的 HTML 和 CSS 来实现这一点。
JavaScript 在 Gmail 等基于 Web 的应用程序中也非常有用。
当您在 Gmail 收件箱中收到新电子邮件时，JavaScript 负责更新收件箱并通知您有新邮件，而无需手动刷新。
所以，换句话说：
JavaScript 使 Web 开发人员能够在互联网上打造丰富的用户体验。
了解代码结构
为了有效地利用 JavaScript，理解其代码结构至关重要。
JavaScript 代码通常位于网页的 HTML 中。
它是使用
<script>
// Your JavaScript code goes here
</script>您还可以使用
对于较大的 JavaScript 代码库，此方法是首选。因为它可以保持 HTML 干净并将代码逻辑与页面内容分开。
<script src="mycode.js"></script>现在，让我们探讨一下可以在 JavaScript 代码中使用的基本组件。
JavaScript 组件列表（包括备忘单）
下面，您将找到 JavaScript 中使用的最基本的组件。
随着您越来越熟悉这些构建块，您将拥有创建引人入胜且用户友好的网站的工具。
（这是备忘单，您可以下载并保存它，作为所有这些组件的方便参考。）
变量
变量是存储某些值的容器。该值可以是任何数据类型，例如字符串（即文本）或数字。
JavaScript 中有三个用于声明（即创建）变量的关键字：“var”、“let”和“const”。
变量关键字
“var”是一个关键字，用于告诉 JavaScript 创建一个新变量。
当我们用“var”创建一个变量后，它就像一个存储东西的容器。
考虑以下示例。
var name = "Adam";在这里，我们创建了一个名为“name”的变量，并将值“Adam”放入其中。
这个值是可以用的。这意味着我们可以在代码中需要时使用变量“name”来获取值“Adam”。
例如，我们可以写：
var name = "Adam";
console.log("Hello, " + name);这意味着第二行将在控制台中显示“Hello, Adam”（用于检查程序输出的消息窗口）。
使用关键字 var 创建的变量中的值可以更改。您可以稍后在代码中修改它们。
下面是一个例子来说明这一点：
var name = "Adam";
name = "John";
console.log("Hello, " + name);首先，我们将“Adam”放入“name”变量中。后来，我们将同一变量的值更改为“John”。这意味着当我们运行这个程序时，我们将在控制台中看到的输出是“Hello, John”。
但是，请记住一件事：
在现代 JavaScript 中，人们通常更喜欢使用“let”和“const”关键字（稍后会详细介绍）而不是“var”。因为“let”和“const”提供了改进的作用域规则。
让关键字
“let”是“var”的替代品，是在 JavaScript 中创建变量的另一个关键字。
像这样：
let name = "Adam";现在，我们可以在程序中使用变量“name”来显示它存储的值。
例如：
let name = "Adam";
console.log("Hello, " + name);当您运行该程序时，它将在控制台中显示“Hello, Adam”。
如果你想覆盖变量存储的值，你可以这样做：
var name = "Adam";
name = "Steve";
console.log("Hello, " + name);常量关键字
“const”与“let”类似，但声明一个固定变量。
意思是：
一旦您在其中输入值，以后就无法更改。
对数值等内容使用“const”有助于避免稍后在代码中发生意外更改，从而防止错误。
“const”也明确了意图。其他开发人员一眼就能看出哪些变量应该保持不变。
例如：
let name = "Adam";
const age = 30;在此示例中使用“const”表示“年龄”有助于防止无意中更改一个人的年龄。
它还向其他开发人员明确表示“年龄”在整个代码中保持不变。
运营商
运算符是对变量执行运算的符号。
想象一下，您有一些数字，并且想要对它们进行数学运算，例如加、减或比较它们。
在 JavaScript 中，我们使用特殊符号来执行此操作，这些符号称为运算符。运营商的主要类型有：
算术运算符
算术运算符用于对数字执行数学计算。这些包括：
运营商名称 | 象征 | 描述 |
“加法”运算符 | + | “加法”运算符将数字相加 |
“减法”运算符 | – | “减法”运算符从左侧值中减去右侧值 |
“乘法”运算符 | * | “乘法”运算符将数字相乘 |
“除法”运算符 | / | “除”运算符将左边的数字除以右边的数字 |
“模”运算符 | % | “模”运算符返回除法后的余数 |
让我们使用所有这些运算符并编写一个基本程序：
let a = 10;
let b = 3;
let c = a + b;
console.log("c");
let d = a - b;
console.log("d");
let e = a * b;
console.log("e");
let f = a / b;
console.log("f");
let g = a % b;
console.log("g");该程序的作用如下：
- 它将两个变量“a”和“b”分别设置为 10 和 3
- 然后，它使用算术运算符：
- “+”将“a”和“b”的值相加
- “-”从“a”中减去“b”的值
- “*”将“a”和“b”的值相乘
- “/”将“a”的值除以“b”
- “%”求“a”除以“b”时的余数
- 它使用“console.log()”显示每个算术运算的结果
比较运算符
比较运算符比较两个值并返回布尔结果，即 true 或 false。
它们对于在 JavaScript 中编写条件逻辑至关重要。
主要的比较运算符有：
运营商名称 | 象征 | 描述 |
“平等”运算符 | == | 比较两个值是否相等，无论数据类型如何。例如，“5 == 5.0”将返回“true”，即使第一个值是整数，另一个值是具有相同数值的浮点数（带小数位的数值）。 |
“严格相等”运算符 | === | 比较两个值是否相等（包括数据类型）。例如，“5 === 5.0”将返回“false”，因为第一个值是整数，另一个是浮点数，这是不同的数据类型。 |
“不等式”运算符 | != | 检查两个值是否不相等。它们是什么类型的值并不重要。例如，“5！= 10”将返回“true”，因为 5 不等于 10。 |
“严格不等式”运算符 | !== | 检查两个值是否不相等，包括数据类型。例如，“5 !== 5.0”将返回“true”，因为第一个值是整数，另一个是浮点数，这是不同的数据类型。 |
“大于”运算符 | > | 检查左侧值是否大于右侧值。例如，“10 > 5”返回“true”。 |
“小于”运算符 | < | 检查左值是否小于右值。例如，“5 < 10”返回“true”。 |
“大于或等于”运算符 | >= | 检查左侧值是否大于或等于右侧值。例如，“10 >= 5”返回“true”。 |
“小于或等于”运算符 | <= | 检查左侧值是否小于或等于右侧值。例如，“5 <= 10”返回“true”。 |
让我们使用所有这些运算符并编写一个基本的 JS 程序，以更好地理解它们是如何工作的：
let a = 5;
let b = 5.0;
let c = 10;
if (a == b) {
console.log('true');
} else {
console.log('false');
}
if (a === b) {
console.log('true');
} else {
console.log('false');
}
if (a != c) {
console.log('true');
} else {
console.log('false');
}
if (a !== b) {
console.log('true');
} else {
console.log('false');
}
if (c > a) {
console.log('true');
} else {
console.log('false');
}
if (a < c) {
console.log('true');
} else {
console.log('false');
}
if (c >= a) {
console.log('true');
} else {
console.log('false');
}
if (a <= c) {
console.log('true');
} else {
console.log('false');
}该程序的作用如下：
- 它设置三个变量：“a”的值为 5，“b”的值为 5.0（浮点数），“c”的值为 10
- 它使用“==”运算符来比较“a”和“b”。由于“a”和“b”具有相同的数值 (5)，因此它返回“true”。
- 它使用“===”运算符来比较“a”和“b”。这次，它不仅检查值，还检查数据类型。虽然值相同，但“a”是整数，“b”是浮点数。因此，它返回“false”。
- 它使用“!=”运算符来比较“a”和“c”。由于“a”和“c”具有不同的值，因此返回“true”。
- 它使用“!==”运算符来比较“a”和“b”。同样，它考虑数据类型，并且由于“a”和“b”属于不同类型（整数和浮点），因此它返回“true”。
- 它使用“>”运算符来比较“c”和“a”。由于“c”大于“a”，因此它返回“true”。
- 它使用“<”运算符来比较“a”和“c”。由于“a”确实小于“c”，因此它返回“true”。
- 它使用“>=”运算符来比较“c”和“a”。由于 c 大于或等于 a，因此返回“true”。
- 它使用“<=”运算符来比较“a”和“c”。由于“a”小于或等于“c”，因此返回“true”。
简而言之，该程序使用各种比较运算符根据变量“a”、“b”和“c”的值做出决策。
您可以看到每个运算符如何比较这些值并确定是否满足 if 语句中指定的条件。导致不同的控制台输出。
逻辑运算符
逻辑运算符允许您对值执行逻辑运算。
这些运算符通常用于在代码中做出决策、控制程序流程以及为执行特定代码块创建条件。
JavaScript 中有三个主要的逻辑运算符：
运营商名称 | 象征 | 描述 |
“逻辑与”运算符 | && | “逻辑与”运算符用于组合两个或多个条件。仅当所有条件都为真时，它才返回“true”。 |
“逻辑或”运算符 | | | | “逻辑或”运算符用于组合多个条件。如果至少有一个条件为真，则返回“true”。如果所有条件均为假，则结果将为“假”。 |
“逻辑非”运算符 | ! | “逻辑非”运算符用于反转单个条件的逻辑状态。如果条件为真，“！”使其成为“假”。如果条件为假，“！”使它成为“真实的”。 |
为了更好地理解每个运算符，让我们考虑下面的示例。
首先，“&&”（逻辑与）运算符示例：
let age = 25;
let hasDriverLicense = true;
if (age >= 18 && hasDriverLicense) {
console.log("You can drive!");
} else {
console.log("You cannot drive.");
}在此示例中，代码检查年龄是否大于或等于 18 岁以及此人是否拥有驾驶执照。由于这两个条件均成立，因此其输出为“You candrive!”
其次，一个“| |” （逻辑或）运算符示例：
let isSunny = true;
let isWarm = true;
if (isSunny || isWarm) {
console.log("It's a great day!");
} else {
console.log("Not a great day.");
}在此示例中，代码输出“It’s a beautiful day!”因为其中一个或两个条件成立。
第三，一个“！” （逻辑非）运算符示例：
let isRaining = true;
if (!isRaining) {
console.log("It's not raining. You can go outside!");
} else {
console.log("It's raining. Stay indoors.");
}这里，“！”运算符将 isRaining 的值从 true 反转为 false。
因此，“if”条件“!isRaining”的计算结果为 false。这意味着 else 块中的代码运行，返回“正在下雨。呆在室内。”
赋值运算符：
赋值运算符用于给变量赋值。标准赋值运算符是等号 (=)。但还有其他选择。
这是完整的列表：
运营商名称 | 象征 | 描述 |
“基本赋值”运算符 | = | “基本赋值”运算符用于为变量赋值 |
“加法赋值”运算符 | += | 该运算符将一个值添加到变量的当前值并将结果赋给变量 |
“减法赋值”运算符 | -= | 该运算符从变量的当前值中减去一个值，并将结果赋给变量 |
“乘法赋值”运算符 | *= | 该运算符将变量的当前值乘以指定值并将结果赋给变量 |
“除法赋值”运算符 | /= | 该运算符将变量的当前值除以指定值，并将结果赋给变量 |
让我们借助一些代码来理解这些运算符：
let x = 10;
x += 5;
console.log("After addition: x = ", x);
x -= 3;
console.log("After subtraction: x = ", x);
x *= 4;
console.log("After multiplication: x = ", x);
x /= 6;
console.log("After division: x = ", x);在上面的代码中，我们创建了一个名为“x”的变量并将其设置为等于10。然后，我们使用各种赋值运算符来修改其值：
- “x+=5；” “x”的当前值加 5，并将结果赋回“x”。因此，经过此操作，“x”变为 15。
- “x -= 3；”从“x”的当前值中减去 3，并将结果赋回给“x”。经过此操作，“x”变为12。
- “x*=4；”将“x”的当前值乘以 4，并将结果赋回给“x”。因此，“x”变为 48。
- “x/=6；”将“x”的当前值除以 6，并将结果赋回给“x”。经过此操作，“x”变为8。
在每次操作中，代码都会将“x”的更新值打印到控制台。
如果别的
“if-else”语句是一个条件语句，允许您根据条件执行不同的代码块。
它用于通过指定特定条件为真时应该发生的情况来在代码中做出决策。当它是错误的时候会发生什么。
下面是一个例子来说明“if-else”是如何工作的：
let age = 21;
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");在此示例中，使用“>=”运算符将“age”变量与 18 进行比较。
由于“年龄 >= 18”为真，因此消息“您是成年人”。被展示。但如果不是，则会显示“您是未成年人”的信息。将会被显示。
循环
循环是一种编程结构，只要满足指定的条件，循环就允许您重复执行代码块。
它们对于自动化重复性任务至关重要。
JavaScript 提供了多种类型的循环，包括：
for循环
“for”循环是指定“执行特定次数”的循环。
它结构良好，具有三个基本组成部分：初始化、条件和增量。这使其成为执行代码块预定次数的强大工具。
以下是“for”循环的基本结构：
for (initialization; condition; increment) {
// Code to be executed as long as the condition is true
}循环从初始化开始（这是您通过给定起始点来设置循环的地方），然后检查条件，如果条件为真则执行代码块。
每次迭代后，都会应用增量，并再次检查条件。
当条件变为假时循环结束。
例如，如果您想使用“for”循环从 1 数到 10，请按以下方法操作：
for (let i = 1; i <= 10; i++) {
console.log(i);
}在这个例子中：
- 初始化部分设置一个变量“i”从1开始
- 只要条件（在本例中为“i <= 10”）为真，循环就会继续运行
- 在循环内部，它使用“console.log(i)”记录“i”的值
- 每次运行循环后，增量部分“i++”将“i”的值加 1
运行此代码时的输出如下所示：
1
2
3
4
5
6
7
8
9
10正如您所看到的，“for”循环从“i”为 1 开始。并且在每次迭代中逐渐将其增加 1。
一直持续到“i”达到 10，因为满足条件“i <= 10”。
“console.log(i)”语句在每次迭代期间打印“i”的当前值。这会导致控制台中显示从 1 到 10 的数字。
while 循环
“while”循环是指示“只要某事为真就继续执行此操作”的循环。
它与“for”循环有点不同，因为它没有将初始化、条件和增量捆绑在一起。相反，您编写条件，然后将代码块放入循环内。
例如，如果您想使用“while”循环从 1 数到 10，请按以下方法操作：
let i = 1;
while (i <= 10) {
console.log(i);
i++;
}在这个例子中：
- 将“i”初始化为 1
- 只要“i”小于或等于 10，循环就会继续运行
- 在循环内部，它使用“console.log(i)”记录“i”的值
- 每次循环运行后“i”递增1
该代码的输出将是：
1
2
3
4
5
6
7
8
9
10因此，通过“for”和“while”循环，您可以使用工具来重复任务并自动化代码
do…while 循环
“do…while”循环的工作方式与“for”和“while”循环类似，但它具有不同的语法。
下面是使用“do…while”循环从 1 计数到 10 的示例：
let i = 1;
do {
console.log(i);
i++;
} while (i <= 10);在这个例子中：
- 在循环开始之前将变量“i”初始化为 1
- “do…while”循环首先执行代码块，该代码块使用“console.log(i)”记录“i”的值
- 每次运行循环后，使用“i++”将“i”递增 1
- 只要条件“i <= 10”为真，循环就会继续运行
此代码的输出将与前面的示例中的输出相同：
1
2
3
4
5
6
7
8
9
10for…in 循环
“for…in”循环用于迭代对象（保存键值对的数据结构）的属性。
当您想要遍历对象的所有键或属性并对每个键或属性执行操作时，它特别方便。
以下是“for…in”循环的基本结构：
for (variable in object) {
// Code to be executed for each property
}这是一个“for…in”循环的示例：
const person = {
name: "Alice",
age: 30,
city: "New York"
};
for (let key in person) {
console.log(key, person[key]);
}在这个例子中：
- 您有一个名为“person”的对象，其属性为“name”、“age”和“city”
- “for…in”循环迭代“person”对象的键（在本例中为“name”、“age”和“city”）
- 在循环内，它记录属性名称（键）及其在“person”对象中的相应值
该代码的输出将是：
name Alice
age 30
city New York当您想要执行数据提取或操作等任务时，“for…in”循环是一个强大的工具。
功能
函数是在代码中执行特定操作的代码块。 JavaScript 中的一些常见函数有：
警报（）函数
该函数在浏览器的弹出对话框中显示一条消息。它通常用于简单的通知、错误消息或引起用户的注意。
看看这个示例代码：
alert("Hello, world!");当您调用此函数时，它会在浏览器中打开一个弹出小对话框，其中包含消息“Hello, world!”用户可以通过单击“确定”按钮来确认此消息。
提示()函数
该函数显示一个对话框，用户可以在其中输入内容。输入以字符串形式返回。
这是一个例子：
let name = prompt("Please enter your name: ");
console.log("Hello, " + name + "!");在此代码中，要求用户输入他们的姓名。它们提供的值存储在 name 变量中。
随后，代码使用该名称通过显示消息来向用户打招呼，例如“Hello，[用户名]！”
确认()函数
此功能显示一个带有“确定”和“取消”按钮的确认对话框。如果用户单击“确定”，则返回“true”；如果单击“取消”，则返回“false”。
让我们用一些示例代码来说明：
const isConfirmed = confirm("Are you sure you want to continue?");
if (isConfirmed) {
console.log("true");
} else {
console.log("false");
}执行此代码时，会出现带有消息“您确定要继续吗？”的对话框。显示，并向用户呈现“确定”和“取消”按钮。
用户可以单击“确定”或“取消”按钮进行选择。
然后，“confirm()”函数根据用户的选择返回一个布尔值（“true”或“false”）：如果单击“确定”则返回“true”，如果单击“取消”则返回“false”。
console.log() 函数
该函数用于将消息和数据输出到浏览器的控制台。
示例代码：
console.log("This is the output.");您可能从本文前面的所有代码示例中认出了它。
parseInt() 函数
该函数从字符串中提取并返回一个整数。
示例代码：
const stringNumber = "42";
const integerNumber = parseInt(stringNumber);在此示例中，“parseInt()”函数处理字符串并提取数字 42。
然后，提取的整数存储在变量“integerNumber”中。您可以使用它进行各种数学计算。
parseFloat() 函数
此函数提取并返回浮点数（带小数位的数值）。
示例代码：
const stringNumber = "3.14";
const floatNumber = parseFloat(stringNumber);在上面的示例中，“parseFloat()”函数处理字符串并提取浮点数 3.14。
然后，提取的浮点数存储在变量“floatNumber”中。
弦乐
字符串是一种用于表示文本的数据类型。
它包含一系列字符，例如字母、数字、符号和空格。通常用双引号 (” “) 括起来。
以下是 JavaScript 中字符串的一些示例：
const name = "Alice";
const number = "82859888432";
const address = "123 Main St.";有很多方法可以用来操作 JS 代码中的字符串。这些是最常见的：
toUpperCase() 方法
此方法将字符串中的所有字符转换为大写。
例子：
let text = "Hello, World!";
let uppercase = text.toUpperCase();
console.log(uppercase);在此示例中，“toUpperCase()”方法处理文本字符串并将所有字符转换为大写。
结果，整个字符串变成大写。
然后，转换后的字符串存储在变量 uppercase 中，控制台中的输出为“HELLO, WORLD!”
toLowerCase() 方法
该方法将字符串中的所有字符转换为小写
这是一个例子：
let text = "Hello, World!";
let lowercase = text.toLowerCase();
console.log(lowercase);这段代码运行后，“lowercase”变量将包含值“hello, world!”这将是控制台中的输出。
concat() 方法
“concat()”方法用于组合两个或多个字符串并创建一个包含合并文本的新字符串。
它不会修改原始字符串。相反，它返回一个由原始字符串组合（称为串联）产生的新字符串。
它的工作原理如下：
const string1 = "Hello, ";
const string2 = "world!";
const concatenatedString = string1.concat(string2);
console.log(concatenatedString);在此示例中，我们有两个字符串“string1”和“string2”。我们想要连接它。
我们对“string1”使用“concat()”方法，并提供“string2”作为参数（括号内的输入值）。该方法组合两个字符串并创建一个新字符串，存储在“concatenatedString”变量中。
然后程序将最终结果输出到您的控制台。在这种情况下，那就是“你好，世界！”
match() 方法
“match()”方法用于在字符串中搜索指定模式，并将匹配结果作为数组（保存值集合的数据结构，如匹配的子字符串或模式）返回。
它使用正则表达式来实现这一点。 （正则表达式是定义搜索模式的字符序列。）
“match()”方法对于数据提取或模式验证等任务非常有用。
下面是使用“match()”方法的示例代码：
const text = "The quick brown fox jumps over the lazy dog";
const regex = /[A-Za-z]+/g;
const matches = text.match(regex);
console.log(matches);在此示例中，我们有一个名为“text”的字符串。
然后，我们对“text”字符串使用“match()”方法，并提供正则表达式作为参数。
这个正则表达式“/[A-Za-z]+/g”有两件事：
- 它匹配从“A”到“Z”的任何字母，无论它是大写还是小写
- 它执行全局搜索（由正则表达式末尾的“g”表示）。这意味着找到第一个匹配项后搜索不会停止。相反，它继续搜索整个字符串并返回所有匹配项。
之后，所有匹配都存储在“matches”变量中。
然后程序将这些匹配输出到您的控制台。在本例中，它将是“The Quick Brown Fox Jumps Over the Lazy Dog”句子中所有单词的数组。
charAt() 方法
“charAt()”方法用于检索字符串中指定索引（位置）处的字符。
第一个字符被认为位于索引 0 处，第二个字符位于索引 1 处，依此类推。
这是一个例子：
const text = "Hello, world!";
const character = text.charAt(7);
console.log(character);在此示例中，我们有字符串“text”，我们使用“charAt()”方法来访问索引 7 处的字符。
结果是字符“w”，因为“w”位于字符串中的位置 7。
替换()方法
“replace()”方法用于搜索指定的子字符串（字符串中的一部分）并将其替换为另一个子字符串。
它指定要搜索的子字符串和要替换的子字符串。
它的工作原理如下：
const text = "Hello, world!";
const newtext = text.replace("world", "there");
console.log(newtext);在此示例中，我们使用“replace()”方法搜索子字符串“world”并将其替换为“there”。
结果是一个包含替换文本的新字符串（“newtext”）。这意味着输出是“你好，那里！”
substr() 方法
“substr()”方法用于提取字符串的一部分，从指定索引开始并扩展指定数量的字符。
它指定要从中开始提取字符的起始索引以及要提取的字符数。
它的工作原理如下：
const text = "Hello, world!";
const substring = text.substr(7, 5);
console.log(substring);在此示例中，我们使用“substr()”方法从索引 7（即“w”）开始提取字符，并继续提取五个字符。
输出是子字符串“world”。
（请注意，第一个字符始终被认为位于索引 0 处。并且您从那里开始计数。）
活动
事件是浏览器中发生的操作，例如用户单击按钮、网页完成加载或鼠标悬停在页面上的元素上。
了解这些对于创建交互式动态网页至关重要。因为它们允许您响应用户操作并相应地执行代码。
以下是 JavaScript 支持的最常见事件：
onclick事件
当用户单击 HTML 元素（例如按钮或链接）时，“onclick”事件执行函数或脚本。
下面是这个事件的代码实现：
<button id="myButton" onclick="changeText()">Click me</button>
<script>
function changeText() {
let button = document.getElementById("myButton");
button.textContent = "Clicked!";
}
</script>现在，让我们了解这段代码是如何工作的：
- 当 HTML 页面加载时，它会显示一个带有文本“Click me”的按钮
- 当用户单击按钮时，HTML 中指定的“onclick”属性告诉浏览器调用“changeText”函数
- 执行“changeText”函数并使用其 id（“myButton”）选择按钮元素
- 按钮的“textContent”属性更改为“Clicked!”
因此，当单击该按钮时，其文本从“Click me”更改为“Clicked!”
这是使用 JavaScript 向网页添加交互性的简单示例。
onmouseover 事件
当用户将鼠标指针移到 HTML 元素（例如图像、按钮或超链接）上时，就会发生“onmouseover”事件。
执行此事件的代码如下所示：
<img id="myImage" src="image.jpg" onmouseover="showMessage()">
<script>
function showMessage() {
alert("Mouse over the image!");
}
</script>在此示例中，我们有一个 HTML 图像元素，其“id”属性设置为“myImage”。
它还指定了“onmouseover”属性，表示当用户将鼠标指针悬停在图像上时，应执行“showMessage()”函数。
此函数显示一个警告对话框，其中包含消息“鼠标悬停在图像上！”
“onmouseover”事件对于向网页添加交互性非常有用。例如提供工具提示、更改元素的外观或当鼠标移动到页面的特定区域时触发操作。
onkeyup 事件
“onkeyup”是当用户按下键盘上的某个键后释放该键时发生的事件。
下面是这个事件的代码实现：
<input type="text" id="myInput" onkeyup="handleKeyUp()">
<script>
function handleKeyUp() {
let input = document.getElementById("myInput");
let userInput = input.value;
console.log("User input: " + userInput);
}
</script>在此示例中，我们有一个 HTML 文本输入元素 <input></input>，其“id”属性设置为“myInput”。
它还指定了“onkeyup”属性，表示当在输入字段内释放按键时，应执行“handleKeyUp()”函数。
然后，当用户在输入字段中键入或释放按键时，将调用“handleKeyUp()”函数。
该函数从文本字段检索输入值并将其记录到控制台。
此事件通常用于表单和文本输入字段，以实时响应用户的输入。
它对于自动建议和字符计数等任务很有帮助，因为它允许您在用户键入时捕获他们的键盘输入。
鼠标移出事件
当用户将鼠标指针移出 HTML 元素（如图像、按钮或超链接）占据的区域时，就会发生“onmouseout”事件。
当事件被触发时，将执行预定义的函数或脚本。
这是一个例子：
<img id="myImage" src="image.jpg" onmouseout="hideMessage()">
<script>
function hideMessage() {
alert("Mouse left the image area!");
}
</script>在此示例中，我们有一个 HTML 图像元素，其“id”属性设置为“myImage”。
它还指定了“onmouseout”属性，表示当用户将鼠标光标移出图像区域时，应执行“hideMessage()”函数。
然后，当用户将鼠标光标移出图像区域时，将调用名为“hideMessage()”的 JavaScript 函数。
该函数显示一个警告对话框，其中包含消息“鼠标离开图像区域！”
加载事件
当网页或页面内的特定元素（例如图像或框架）完成加载时，“onload”事件执行函数或脚本。
下面是这个事件的代码实现：
<body onload="initializePage()">
<script>
function initializePage() {
alert("Page has finished loading!");
}
</script>在此示例中，当网页完全加载时，将执行“initializePage()”函数，并发出消息“页面已完成加载！”的警报。被展示。
焦点事件
当输入字段等 HTML 元素接收焦点或成为用户输入或交互的活动元素时，“onfocus”事件就会触发。
看看这个示例代码：
<input type="text" id="myInput" onfocus="handleFocus()">
<script>
function handleFocus() {
alert("Input field has received focus!");
}
</script>在此示例中，我们有一个 HTML 文本输入元素 <input></input>，其“id”属性设置为“myInput”。
它还指定了“onfocus”属性。这表明当用户单击输入字段或选项卡时，将执行“handleFocus()”函数。
此函数显示一条警报，其中包含消息“输入字段已获得焦点！”
“onfocus”事件通常用于 Web 表单中，以便在用户与输入字段交互时向用户提供视觉提示（例如更改背景颜色或显示附加信息）。
提交事件
当用户提交 HTML 表单时，将触发“onsubmit”事件。通常通过单击“提交”按钮或在表单字段中按“Enter”键。
它允许您定义当用户尝试提交表单时应执行的函数或脚本。
这是一个代码示例：
<form id="myForm" onsubmit="handleSubmit()">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">Submit</button>
</form>
<script>
function handleSubmit() {
let form = document.getElementById("myForm");
alert("Form submitted!");
}
</script>在此示例中，我们有一个 HTML 表单元素，其“id”属性设置为“myForm”。
它还指定了“onsubmit”属性，当用户提交表单时会触发“handleSubmit()”函数。
此函数显示一条警报，其中包含消息“表单已提交！”
数字和数学
JavaScript 支持许多方法（预定义函数）来处理数字和进行数学计算。
它支持的一些方法包括：
Math.abs()方法
此方法返回数字的绝对值，确保结果为正。
下面是一个演示“Math.abs()”方法用法的示例：
let negativeNumber = -5;
let positiveNumber = Math.abs(negativeNumber);
console.log("Absolute value of -5 is: " + positiveNumber);在此代码中，我们从负数 (-5) 开始。通过应用“Math.abs()”，我们获得了 5 的绝对（正）值。
此方法对于需要确保值非负（无论其初始符号如何）的场景很有帮助。
Math.round()方法
此方法将数字向上舍入到最接近的整数。
示例代码：
let decimalNumber = 3.61;
let roundedUpNumber = Math.round(decimalNumber);
console.log("Ceiling of 3.61 is: " + roundedUpNumber);在此代码中，我们有一个十进制数 (3.61)。应用“Math.round()”将其向上舍入到最接近的整数。也就是 4。
此方法通常用于需要对数量进行四舍五入的场景，例如计算特定任务所需的项目数量或处理不能为小数的数量时。
Math.max() 方法
此方法返回所提供的数字或值中的最大值。您可以传递多个参数来查找最大值。
下面是一个演示“Math.max()”方法用法的示例：
let maxValue = Math.max(5, 8, 12, 7, 20, -3);
console.log("The maximum value is: " + maxValue);在此代码中，我们将几个数字作为参数传递给“Math.max()”方法。
然后，该方法返回所提供的一组数字中的最大值，在本例中为 20。
该方法通常用于查找游戏中的最高分或一组数据点中的最高温度等场景。
Math.min()方法
“Math.min()”方法返回所提供的数字或值中的最小值。
示例代码：
let minValue = Math.min(5, 8, 12, 7, 20, -3);
console.log("The minimum value is: " + minValue);在此代码中，我们将几个数字作为参数传递给“Math.min()”方法。
然后该方法返回给定数字集中的最小值，即 -3。
此方法通常用于确定地图上多个点之间的最短距离或查找一组数据点中的最低温度等情况。
Math.random()方法
此方法生成 0（含）和 1（不含）之间的随机浮点数。
这是一些示例代码：
const randomValue = Math.random();
console.log("Random value between 0 and 1: " + randomValue);在此代码中，我们调用“Math.random()”方法，该方法返回 0（含）和 1（不含）之间的随机值。
它通常用于需要随机性的应用中。
Math.pow()方法
此方法计算底数的指数次方的值。
让我们看一个例子：
let base = 2;
let exponent = 3;
let result = Math.pow(base, exponent);
console.log(`${base}^${exponent} is equal to: ${result}`)在这段代码中，我们的底值为 2，指数值为 3。通过应用“Math.pow()”，我们计算 2 的 3 次方，即 8。
Math.sqrt()方法
此方法计算数字的平方根。
看看这个示例代码：
let number = 16;
const squareRoot = Math.sqrt(number);
console.log(`The square root of ${number} is: ${squareRoot}`);在此代码中，我们有数字 16。通过应用“Math.sqrt()”，我们计算 16 的平方根。即 4。
Number.isInteger() 方法
此方法检查给定值是否为整数。如果该值是整数，则返回 true，否则返回 false。
下面是一个演示“Number.isInteger()”方法用法的示例：
let value1 = 42;
let value2 = 3.14;
let isInteger1 = Number.isInteger(value1);
let isInteger2 = Number.isInteger(value2);
console.log(`Is ${value1} an integer? ${isInteger1}`);
console.log(`Is ${value2} an integer? ${isInteger2}`);在此代码中，我们有两个值：“value1”和“value2”。我们使用“Number.isInteger()”方法来检查每个值是否是整数：
- 对于“value1”(42)，“Number.isInteger()”返回“true”，因为它是一个整数
- 对于“value2”（3.14），“Number.isInteger()”返回“false”，因为它不是整数 – 它包含一个分数
日期对象
日期对象用于处理日期和时间。
它们允许您在 JavaScript 代码中创建、操作和格式化日期和时间值。
一些常见的方法包括：
getDate() 方法
此方法检索该月的当前日期。天以整数形式返回，范围从 1 到 31。
以下是如何使用“getDate()”方法：
let currentDate = new Date();
let dayOfMonth = currentDate.getDate();
console.log(`Day of the month: ${dayOfMonth}`);在此示例中，“currentDate”是表示当前日期和时间的“日期”对象。
然后，我们使用“getDate()”方法检索该月的日期并将其存储在“dayOfMonth”变量中。
最后，我们使用“console.log()”显示该月的日期。
getDay() 方法
此方法检索当前星期几。
日期以整数形式返回，星期日为 0，星期一为 1，依此类推。到周六六点为止。
示例代码：
let currentDate = new Date();
let dayOfWeek = currentDate.getDay();
console.log(`Day of the week: ${dayOfWeek}`);这里，“currentDate”是表示当前日期和时间的日期对象。
然后，我们使用“getDay()”方法来检索星期几并将其存储在“dayOfWeek”变量中。
最后，我们使用“console.log()”显示星期几。
getMinutes()方法
此方法从当前日期和时间检索分钟部分。
分钟将为整数值，范围从 0 到 59。
示例代码：
let currentDate = new Date();
let minutes = currentDate.getMinutes();
console.log(`Minutes: ${minutes}`);在此示例中，“currentDate”是表示当前日期和时间的“日期”对象。
我们使用“getMinutes()”方法来检索分钟部分并将其存储在分钟变量中。
最后，我们使用“console.log()”显示分钟数。
getFullYear() 方法
此方法检索当前年份。它将是一个四位整数。
这是一些示例代码：
let currentDate = new Date();
let year = currentDate.getFullYear();
console.log(`Year: ${year}`);这里，“currentDate”是表示当前日期和时间的日期对象。
我们使用“getFullYear()”方法来检索年份并将其存储在year变量中。
然后我们使用“console.log()”来显示年份。
setDate() 方法
此方法设置月份中的日期。通过更改“日期”对象内的月份值。
示例代码：
let currentDate = new Date();
currentDate.setDate(15);
console.log(`Updated date: ${currentDate}`);在此示例中，“currentDate”是表示当前日期和时间的“日期”对象。
我们使用“setDate()”方法将月份中的某一天设置为 15。“date”对象也会相应更新。
最后，我们使用“console.log()”显示更新日期。
如何识别 JavaScript 问题
JavaScript 错误很常见。您应该尽快解决这些问题。
即使您的代码没有错误，搜索引擎也可能无法正确呈现您的网站内容。这可能会阻止他们正确索引您的网站。
因此，您的网站的流量和可见度可能会减少。
您可以使用 Semrush 的站点审核工具审核您的网站，以检查 JS 是否导致任何渲染问题。
打开该工具并输入您的网站 URL。然后，单击“开始审核”。
将弹出一个新窗口。在此设置审核范围。
之后，进入“爬虫设置”并启用“JS渲染”选项。然后，单击“开始站点审核”。
该工具将开始审核您的网站。审核完成后，导航至“JS Impact”选项卡。
您将看到浏览器和爬虫是否以不同的方式呈现某些元素（链接、内容、标题等）。
为了优化您的网站，您应该致力于最大限度地减少网页的浏览器版本和爬虫版本之间的差异。
这将确保您的网站内容可以被搜索引擎完全访问和索引。
为了最大限度地减少差异，您应该遵循 JavaScript SEO 的最佳实践并实施服务器端渲染 (SSR)。
甚至谷歌也建议这样做。
为什么？
因为 SSR 最大限度地减少了浏览器和搜索引擎看到的网页版本之间的差异。
然后，您可以重新运行审核以确认问题已解决。
审核您的网站以查找 JavaScript 问题
JavaScript 入门
学习如何用 JavaScript 编码是一项技能。掌握它需要时间。
值得庆幸的是，我们整理了一份方便的备忘单，帮助您学习 JavaScript 基础知识并开始您的编码之旅。
您可以下载 PDF 文件形式的备忘单或在线查看。
我们希望这份备忘单能够帮助您熟悉 JavaScript 语言。并增强您作为编码员的信心和技能。
