基础语法

数据类型

基本数据类型

字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol

对象类型

对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）

变量声明

1
2
3
var x = 10;    // function 作用域（不推荐）
let y = 20;    // 块级作用域
const z = 30;  // 常量，不能修改

输出

1
2
3
4
windows.alert(msg); // 配合 html 使用
console.log(msg);
document.write(msg); // 将 msg 写入 html 内
document.getElementById("id").innerHTML = msg; // 通过 id 进行查找元素并替换为 msg

函数

1
2
3
4
5
6
7
8
9
// 传统函数
function add(a, b) {
    return a + b;
}
console.log(add(1, 2)); // 3

// 箭头函数
const sub = (a, b) => (a - b);
console.log(sub(3, 2)); // 2

字符串操作

1
2
3
4
5
6
7
8
9
10
11
let str = "Alice";
console.log("Hello, " + str); // 传统拼接
console.log(`Hello, ${str}`); // 模板字符串

// 常用方法
console.log(str.length);          // 长度
console.log(str.toUpperCase());   // 转大写
console.log(str.toLowerCase());   // 转小写
console.log(str.includes("li"));  // 是否包含 "li"
console.log(str.replace("A", "O")); // 替换 "A" 为 "O"
console.log(str.slice(1, 3));     // 截取 "li"，区间左闭右开

条件语句

if-else

1
2
3
4
5
6
7
8
9
// if-else 语句
let score = 85;
if (score >= 90) {
    console.log("A");
} else if (score >= 80) {
    console.log("B");
} else {
    console.log("C");
}

switch

1
2
3
4
5
6
7
8
9
10
11
12
// switch 语句
let color = "red";
switch (color) {
    case "red":
        console.log("Stop");
        break;
    case "green":
        console.log("Go");
        break;
    default:
        console.log("Unknown");
}

循环语句

for

1
2
3
4
// for 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

while

1
2
3
4
5
6
// while 循环
let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

do-while

1
2
3
4
5
6
// do-while（至少执行一次）
let k = 0;
do {
    console.log(k);
    k++;
} while (k < 5);

错误捕获

1
2
3
4
5
6
7
try {
    let a = JSON.parse("{invalid_json}");
} catch (error) {
    console.log("捕获到错误:", error.message);
} finally {
    console.log("无论如何都会执行");
}

在 HTML 中使用 JavaScript

内联脚本

内联脚本是直接在 HTML 文件内使用 <script> 标签编写 JavaScript 代码。这种方式适用于简单的功能或少量代码。示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内联脚本示例</title>
</head>
<body>
    <h1>欢迎使用 JavaScript</h1>
    <script>
        // 页面加载时输出提示信息
        console.log("Hello!");
    </script>
</body>
</html>

在这种方式中，浏览器在解析到 <script> 标签时，会立即执行其中的代码。

外部脚本

1extends:2 head:3   - yml

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部脚本示例</title>
    <!-- 引入外部 JavaScript 文件 -->
    <script src="app.js"></script>
</head>
<body>
    <h1>欢迎使用 JavaScript</h1>
</body>
</html>

在 app.js 文件中，可以编写你的 JavaScript 代码：

1
2
// app.js
console.log("Hello, 外部脚本!");

将脚本代码与 HTML 分离，有助于保持代码整洁和提高可维护性。

在 HTML 中使用事件

通过内联事件属性绑定点击事件：

1
2
3
4
5
6
7
8
9
10
html复制编辑<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>事件属性示例</title>
</head>
<body>
    <button onclick="alert('按钮被点击了！')">点击我</button>
</body>
</html>

对于更复杂的交互效果，推荐使用 JavaScript 代码来统一管理事件绑定，这样更容易实现模块化开发和后期维护。

更详细的内容建议看菜鸟教程的文章

菜鸟教程-JavaScript