docs(web): 添加 JavaScript 基础知识文档

添加 JavaScript 基础知识文档，包含变量、数据类型、运算符、条件语句、循环、函数和 DOM 操作等内容，为初学者提供全面的学习资源
2025-11-10 14:45:12 +08:00
parent 474f335e94
commit 2f55fc7184
2 changed files with 598 additions and 0 deletions
--- a/docs/.vuepress/notes.ts
+++ b/docs/.vuepress/notes.ts
@@ -152,6 +152,7 @@ const web = defineNoteConfig({
        { text: "Web 前端基础讲解", link: "/programming/web/basic-syntax/html-css-js/" },
        { text: "HTML 常用标签与属性", link: "/programming/web/basic-syntax/html-tags-attributes/" },
        { text: "HTML 列表与语义布局", link: "/programming/web/basic-syntax/html-lists-and-semantic-layout/" },
        { text: "JavaScript 基础知识", link: "/programming/web/basic-syntax/javascript-basics/" },
      ],
    },
  ]
--- a/docs/notes/programming/web/basic-syntax/javascript-basics.md
+++ b/docs/notes/programming/web/basic-syntax/javascript-basics.md
@@ -0,0 +1,597 @@
 ---
 title: JavaScript 基础知识
 createTime: 2025/11/2 21:30:00
 permalink: /programming/web/basic-syntax/javascript-basics/
 ---
 ## JavaScript 是什么？
 JavaScript 是一种广泛用于网页开发的脚本语言，它使网页能够实现交互式功能。与 HTML（负责结构）和 CSS（负责样式）不同，JavaScript 专注于**行为**，可以让网页变得动态和响应式。
 ## 第一个 JavaScript 程序
 JavaScript 代码可以直接写在 HTML 文件中，通常放在 `<body>` 标签的底部，使用 `<script>` 标签包裹。
 ```html title="index.html"
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
  <meta charset="utf-8">
  <title>我的第一个 JavaScript 程序</title>
 </head>
 <body>
  <h1>你好，世界！</h1>
  <script>
    // 这是注释，不会被执行
    console.log('Hello, JavaScript!'); // 在控制台输出文本
    alert('欢迎学习 JavaScript！'); // 弹出提示框
  </script>
 </body>
 </html>
 ```
 **提示**：你可以在浏览器中按下 F12 打开开发者工具，然后切换到 "Console" 标签查看 `console.log()` 的输出。
 `console.log()` 是 JavaScript 中最常用、最重要的调试工具，可以说是每个开发者的"最佳朋友"！
 ### 基本输出 ###
 ```javascript
 // 输出字符串
 console.log("Hello World!");
 // 输出变量
 const name = "小明";
 console.log(name);
 // 输出多个值
 const age = 18;
 const isStudent = true;
 console.log("学生信息:", name, age, isStudent);
 ```
 ### 输出不同类型的数据 ###
 ```javascript
 // 各种数据类型
 console.log("字符串:", "Hello");
 console.log("数字:", 42);
 console.log("布尔值:", true);
 console.log("数组:", [1, 2, 3]);
 console.log("对象:", {name: "李华", age: 20});
 console.log("函数:", function() {});
 console.log("undefined:", undefined);
 console.log("null:", null);
 ```
 ### 字符串插值 ###
 ```javascript
 const userName = "张三";
 const userAge = 25;
 const score = 95.5;
 // 传统方式
 console.log("用户 " + userName + " 年龄 " + userAge + " 分数 " + score);
 // 模板字符串（推荐）
 console.log(`用户 ${userName} 年龄 ${userAge} 分数 ${score}`);
 // 带表达式的插值
 console.log(`${userName} 是 ${userAge >= 18 ? "成年人" : "未成年人"}`);
 ```
 ### 格式化输出 ###
 ```javascript
 const product = {
    name: "笔记本电脑",
    price: 5999,
    brand: "Dell",
    inStock: true
 };
 // %s - 字符串
 console.log("产品名称: %s", product.name);
 // %d - 数字
 console.log("价格: %d 元", product.price);
 // %f - 浮点数
 console.log("折扣价: %f", product.price * 0.9);
 // %o - 对象
 console.log("完整产品信息: %o", product);
 // %c - CSS样式
 console.log("%c重要信息!", "color: red; font-size: 20px; font-weight: bold;");
 ```
 ## JavaScript 变量
 变量是用来存储信息的容器。在 JavaScript 中，我们使用 `let`、`const` 或 `var` 关键字来声明变量。
 ### 变量声明方式
 ```javascript
 // 使用 let 声明可变变量
 let name = "小明";
 name = "小红"; // 可以修改
 // 使用 const 声明常量（不可变）
 const PI = 3.14159;
 // PI = 3.14; // 错误！常量不能修改
 // 使用 var 声明变量（旧方式，现在推荐使用 let 和 const）
 var age = 25;
 ```
 **注意**：
 - 使用 `let` 声明的变量可以重新赋值
 - 使用 `const` 声明的变量不能重新赋值（常量）
 - 尽量避免使用 `var`，因为它有一些奇怪的作用域规则
 ## 数据类型
 JavaScript 有几种基本数据类型：
 ### 1. 字符串（String）
 用于表示文本，可以使用单引号或双引号。
 ```javascript
 const greeting = "你好";
 const name = 'JavaScript';
 const message = `${greeting}, ${name}!`; // 使用模板字符串（ES6 特性）
 console.log(message); // 输出：你好, JavaScript!
 ```
 ### 2. 数字（Number）
 用于表示数值。
 ```javascript
 const age = 25;
 const price = 99.99;
 const PI = 3.14159;
 ```
 ### 3. 布尔值（Boolean）
 用于表示真或假，只有两个值：`true` 和 `false`。
 ```javascript
 const isStudent = true;
 const hasGraduated = false;
 ```
 ### 4. 数组（Array）
 用于存储多个值的集合。
 ```javascript
 const fruits = ["苹果", "香蕉", "橙子"];
 console.log(fruits[0]); // 输出：苹果（数组索引从0开始）
 // 添加元素
 fruits.push("葡萄");
 console.log(fruits); // 输出：["苹果", "香蕉", "橙子", "葡萄"]
 ```
 ### 5. 对象（Object）
 用于存储键值对集合。
 ```javascript
 const person = {
  name: "小明",
  age: 25,
  isStudent: true,
  greet: function() {
    console.log(`你好，我是${this.name}！`);
  }
 };
 console.log(person.name); // 输出：小明
 person.greet(); // 输出：你好，我是小明！
 ```
 ## 运算符
 ### 算术运算符
 ```javascript
 const a = 10;
 const b = 5;
 console.log(a + b); // 15 加法
 console.log(a - b); // 5 减法
 console.log(a * b); // 50 乘法
 console.log(a / b); // 2 除法
 console.log(a % b); // 0 取余
 console.log(a ** b); // 100000 幂运算（ES6）
 ```
 ### 赋值运算符
 ```javascript
 const x = 10;
 x += 5; // 等同于 x = x + 5
 console.log(x); // 15
 x -= 3; // 等同于 x = x - 3
 console.log(x); // 12
 ```
 ### 比较运算符
 ```javascript
 const a = 10;
 const b = 5;
 console.log(a > b); // true
 console.log(a < b); // false
 console.log(a >= b); // true
 console.log(a <= b); // false
 console.log(a === b); // false（严格相等，比较值和类型）
 console.log(a == b); // false（宽松相等，只比较值）
 console.log(a !== b); // true（严格不相等）
 ```
 ## 条件语句
 ### if 语句
 ```javascript
 const age = 18;
 if (age >= 18) {
  console.log("你已经成年了！");
 } else if (age >= 13) {
  console.log("你是青少年。");
 } else {
  console.log("你还是个孩子。");
 }
 ```
 ## 循环
 ### for 循环
 ```javascript
 // 打印1到5
 for (const i = 1; i <= 5; i++) {
  console.log(i);
 }
 // 遍历数组
 const fruits = ["苹果", "香蕉", "橙子"];
 for (const i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
 }
 // 使用 for...of 遍历（ES6）
 for (const fruit of fruits) {
  console.log(fruit);
 }
 ```
 ### while 循环
 ```javascript
 const count = 1;
 while (count <= 5) {
  console.log(count);
  count++;
 }
 ```
 ## 函数
 函数是可重用的代码块，用于执行特定任务。
 ### 函数声明
 ```javascript
 function greet(name) {
  return `你好，${name}！`;
 }
 const message = greet("小明");
 console.log(message); // 输出：你好，小明！
 ```
 ### 箭头函数（ES6）
 ```javascript
 const sum = (a, b) => {
  return a + b;
 };
 // 简化写法（当只有一行返回语句时）
 const multiply = (a, b) => a * b;
 console.log(sum(3, 4)); // 7
 console.log(multiply(3, 4)); // 12
 ```
 ## DOM 操作
 DOM（文档对象模型）是 HTML 和 XML 文档的编程接口。JavaScript 可以通过 DOM 来操作网页元素。
 ### 选择元素
 ```javascript
 // 通过 id 选择元素
 const title = document.getElementById("title");
 // 通过 class 选择元素（返回元素集合）
 const items = document.getElementsByClassName("item");
 // 通过标签名选择元素
 const paragraphs = document.getElementsByTagName("p");
 // 通过 CSS 选择器选择元素（ES5+）
 const header = document.querySelector("header"); // 选择第一个匹配的元素
 const allLinks = document.querySelectorAll("a"); // 选择所有匹配的元素
 ```
 ### 修改元素内容
 ```javascript
 // 修改文本内容
 const title = document.getElementById("title");
 title.textContent = "新标题";
 // 修改 HTML 内容
 title.innerHTML = "<strong>加粗的新标题</strong>";
 ```
 ### 修改元素样式
 ```javascript
 const element = document.getElementById("box");
 element.style.color = "red";
 element.style.fontSize = "20px";
 element.style.backgroundColor = "#f0f0f0";
 ```
 ### 添加事件监听器
 ```javascript
 const button = document.getElementById("myButton");
 button.addEventListener("click", function() {
  console.log("按钮被点击了！");
  alert("你好，欢迎使用！");
 });
 ```
 ## 小案例：交互式计算器
 下面是一个简单的交互式计算器示例，演示如何结合 HTML、CSS 和 JavaScript。
 ::: code-tabs
@tab index.html
 ```html
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
  <meta charset="utf-8">
  <title>简易计算器</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <div class="calculator">
    <h2>简易计算器</h2>
    <input type="number" id="num1" placeholder="输入第一个数字">
    <select id="operation">
      <option value="add">+</option>
      <option value="subtract">-</option>
      <option value="multiply">×</option>
      <option value="divide">÷</option>
    </select>
    <input type="number" id="num2" placeholder="输入第二个数字">
    <button id="calculate">计算</button>
    <div id="result">结果将显示在这里</div>
  </div>
  <script src="script.js"></script>
 </body>
 </html>
 ```
@tab style.css
 ```css
 .calculator {
  max-width: 300px;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  font-family: system-ui;
 }
 input, select, button {
  margin: 0.5rem 0;
  padding: 0.5rem;
  width: 100%;
  box-sizing: border-box;
 }
 button {
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
 }
 button:hover {
  background: #0056b3;
 }
 #result {
  margin-top: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 4px;
 }
 ```
@tab script.js
 ```javascript
 // 获取DOM元素
 const num1Input = document.getElementById('num1');
 const num2Input = document.getElementById('num2');
 const operationSelect = document.getElementById('operation');
 const calculateButton = document.getElementById('calculate');
 const resultDiv = document.getElementById('result');
 // 添加点击事件监听器
 calculateButton.addEventListener('click', function() {
  // 获取输入值
  const num1 = parseFloat(num1Input.value);
  const num2 = parseFloat(num2Input.value);
  const operation = operationSelect.value;
  const result;
  // 检查输入是否有效
  if (isNaN(num1) || isNaN(num2)) {
    resultDiv.textContent = '请输入有效的数字！';
    return;
  }
  // 执行计算
  switch (operation) {
    case 'add':
      result = num1 + num2;
      break;
    case 'subtract':
      result = num1 - num2;
      break;
    case 'multiply':
      result = num1 * num2;
      break;
    case 'divide':
      // 检查除数是否为0
      if (num2 === 0) {
        resultDiv.textContent = '除数不能为0！';
        return;
      }
      result = num1 / num2;
      break;
  }
  // 显示结果
  resultDiv.textContent = `计算结果：${result}`;
 });
 ```
 :::
 ## JavaScript 的异步编程
 JavaScript 是单线程的，但它可以通过异步编程模型来处理耗时操作，如网络请求、定时器等。
 ### setTimeout 和 setInterval
 ```javascript
 // setTimeout - 延迟执行一次
 setTimeout(function() {
  console.log('2秒后执行');
 }, 2000);
 // setInterval - 定期重复执行
 const count = 0;
 const timer = setInterval(function() {
  count++;
  console.log(`执行第 ${count} 次`);
  if (count >= 5) {
    clearInterval(timer); // 清除定时器
    console.log('定时器已停止');
  }
 }, 1000);
 ```
 ### Promise（ES6）
 Promise 是异步编程的一种解决方案，用于处理异步操作。
 ```javascript
 // 创建一个Promise
 const fetchData = new Promise((resolve, reject) => {
  // 模拟网络请求
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('数据获取成功');
    } else {
      reject('数据获取失败');
    }
  }, 2000);
 });
 // 使用Promise
 fetchData
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });
 ```
 ## 常见错误和调试技巧
 ### 常见错误
 1. **语法错误**：代码不符合 JavaScript 语法规则
 2. **引用错误**：使用了未定义的变量或函数
 3. **类型错误**：对错误类型的值进行操作
 4. **范围错误**：数值超出有效范围
 ### 调试技巧
 1. **使用 console.log()**：在控制台输出变量值或执行流程
 2. **使用断点**：在浏览器开发者工具中设置断点，逐步执行代码
 3. **检查错误信息**：仔细阅读错误提示，找出问题所在
 4. **检查变量类型**：使用 `typeof` 操作符检查变量类型
 ```javascript
 console.log(typeof "hello"); // "string"
 console.log(typeof 42); // "number"
 console.log(typeof true); // "boolean"
 console.log(typeof {}); // "object"
 console.log(typeof []); // "object"（数组也是对象的一种）
 ```
 ## 实践练习
 ### 练习1：创建一个简单的待办事项列表
 使用 HTML、CSS 和 JavaScript 创建一个待办事项列表，包含添加、删除和标记完成功能。
 提示：
 - 使用数组存储待办事项
 - 使用 DOM 操作动态更新列表
 - 为按钮添加事件监听器
 ### 练习2：实现一个数字猜谜游戏
 计算机随机生成一个1到100之间的数字，玩家通过输入框猜测，程序提示"猜大了"或"猜小了"，直到猜对为止。
 提示：
 - 使用 `Math.random()` 生成随机数
 - 使用条件语句判断猜测结果
 - 记录并显示猜测次数
 ## 总结
 JavaScript 是现代 web 开发的核心技术之一，它可以让网页变得动态和交互。通过学习变量、数据类型、运算符、条件语句、循环、函数和 DOM 操作等基础知识，你已经迈出了学习 JavaScript 的第一步。
 继续练习和探索，你会发现 JavaScript 的强大功能和灵活性！