# JavaScript 基础知识 | 仲夏夜之梦
JavaScript 是什么？ JavaScript 是一种广泛用于网页开发的脚本语言，它使网页能够实现交互式功能。与 HTML（负责结构）和 CSS（负责样式）不同，JavaScript 专注于行为，可以让网页变得动态和响应式。 第一个 JavaScript 程序 JavaScript 代码可以直接写在 HTML 文件中，通常放在 <body> 标签...

Skip to content

# JavaScript 基础知识

约 2518 字大约 8 分钟

2025-11-2

## JavaScript 是什么？

JavaScript 是一种广泛用于网页开发的脚本语言，它使网页能够实现交互式功能。与 HTML（负责结构）和 CSS（负责样式）不同，JavaScript 专注于行为，可以让网页变得动态和响应式。

## 第一个 JavaScript 程序

JavaScript 代码可以直接写在 HTML 文件中，通常放在 `<body>` 标签的底部，使用 `<script>` 标签包裹。

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 中最常用、最重要的调试工具，可以说是每个开发者的"最佳朋友"！

### 基本输出

    // 输出字符串
    console.log("Hello World!");

    // 输出变量
    const name = "小明";
    console.log(name);

    // 输出多个值
    const age = 18;
    const isStudent = true;
    console.log("学生信息:", name, age, isStudent);

### 输出不同类型的数据

    // 各种数据类型
    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);

### 字符串插值

    const userName = "张三";
    const userAge = 25;
    const score = 95.5;

    // 传统方式
    console.log("用户 " + userName + " 年龄 " + userAge + " 分数 " + score);

    // 模板字符串（推荐）
    console.log(`用户 ${userName} 年龄 ${userAge} 分数 ${score}`);

    // 带表达式的插值
    console.log(`${userName} 是 ${userAge >= 18 ? "成年人" : "未成年人"}`);

### 格式化输出

    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` 关键字来声明变量。

### 变量声明方式

    // 使用 let 声明可变变量
    let name = "小明";
    name = "小红"; // 可以修改

    // 使用 const 声明常量（不可变）
    const PI = 3.14159;
    // PI = 3.14; // 错误！常量不能修改

    // 使用 var 声明变量（旧方式，现在推荐使用 let 和 const）
    var age = 25;

注意：

- 使用 `let` 声明的变量可以重新赋值
- 使用 `const` 声明的变量不能重新赋值（常量）
- 尽量避免使用 `var`，因为它有一些奇怪的作用域规则

## 数据类型

JavaScript 有几种基本数据类型：

### 1. 字符串（String）

用于表示文本，可以使用单引号或双引号。

    const greeting = "你好";
    const name = 'JavaScript';
    const message = `${greeting}, ${name}!`; // 使用模板字符串（ES6 特性）
    console.log(message); // 输出：你好, JavaScript!

### 2. 数字（Number）

用于表示数值。

    const age = 25;
    const price = 99.99;
    const PI = 3.14159;

### 3. 布尔值（Boolean）

用于表示真或假，只有两个值：`true` 和 `false`。

    const isStudent = true;
    const hasGraduated = false;

### 4. 数组（Array）

用于存储多个值的集合。

    const fruits = ["苹果", "香蕉", "橙子"];
    console.log(fruits[0]); // 输出：苹果（数组索引从0开始）

    // 添加元素
    fruits.push("葡萄");
    console.log(fruits); // 输出：["苹果", "香蕉", "橙子", "葡萄"]

### 5. 对象（Object）

用于存储键值对集合。

    const person = {
      name: "小明",
      age: 25,
      isStudent: true,
      greet: function() {
        console.log(`你好，我是${this.name}！`);
      }
    };

    console.log(person.name); // 输出：小明
    person.greet(); // 输出：你好，我是小明！

## 运算符

### 算术运算符

    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）

### 赋值运算符

    const x = 10;

    x += 5; // 等同于 x = x + 5
    console.log(x); // 15

    x -= 3; // 等同于 x = x - 3
    console.log(x); // 12

### 比较运算符

    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 语句

    const age = 18;

    if (age >= 18) {
      console.log("你已经成年了！");
    } else if (age >= 13) {
      console.log("你是青少年。");
    } else {
      console.log("你还是个孩子。");
    }

## 循环

### for 循环

    // 打印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 循环

    const count = 1;
    while (count <= 5) {
      console.log(count);
      count++;
    }

## 函数

函数是一段可重复使用的代码块，可以接受输入（参数），执行操作，并返回输出（返回值）。

### 函数声明

    function greet(name) {
      return `你好，${name}！`;
    }

    const message = greet("小明");
    console.log(message); // 输出：你好，小明！

格式如下

    function 函数名(参数1, 参数2, ...参数N) {
        // 函数体：要执行的代码
        return 返回值;  // 可选
    }

### 箭头函数（ES6）

    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 来操作网页元素。

### 选择元素

    // 通过 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"); // 选择所有匹配的元素

### 修改元素内容

    // 修改文本内容
    const title = document.getElementById("title");
    title.textContent = "新标题";

    // 修改 HTML 内容
    title.innerHTML = "<strong>加粗的新标题</strong>";

### 修改元素样式

    const element = document.getElementById("box");
    element.style.color = "red";
    element.style.fontSize = "20px";
    element.style.backgroundColor = "#f0f0f0";

### 添加事件监听器

    const button = document.getElementById("myButton");

    button.addEventListener("click", function() {
      console.log("按钮被点击了！");
      alert("你好，欢迎使用！");
    });

## 小案例：交互式计算器

下面是一个简单的交互式计算器示例，演示如何结合 HTML、CSS 和 JavaScript。

index.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>

style.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;
    }

script.js

    // 获取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

    // 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 是异步编程的一种解决方案，用于处理异步操作。

    // 创建一个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` 操作符检查变量类型

    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 的强大功能和灵活性！