前言

前两篇我们已经完成了网页的 “骨架搭建” 和 “装修美化”：

  • HTML 负责结构，让网页有内容、有层级；
  • CSS 负责样式，让网页好看、排版舒服。

但此时的网页，就像一本印刷好的杂志，只能看，不能和你互动。你点击按钮，它不会有反应；你输入内容，它不会处理；你滑动页面，它也不会有任何变化。

而 JavaScript（简称 JS），就是给网页装上 “灵魂” 的语言。它让网页从 “静态的展示” 变成 “动态的交互”，你可以用它实现点击切换、表单提交、数据计算、动画效果，甚至开发复杂的 Web 应用。

今天这篇文章，我们就从新手视角，一步步搞懂 JS 的核心基础，再亲手实现几个简单交互效果，彻底告别 “静态页面”。

一、JavaScript 到底是什么？先搞懂 3 个核心作用

很多新手刚接触 JS 时，会觉得它 “又多又难”，其实你只需要记住，它在网页里主要做 3 件事：

  1. 操作页面内容（DOM 操作） 修改 HTML 的内容、结构和样式。比如点击按钮后，修改一段文字的内容、更换一张图片、给元素添加 / 删除 CSS 类名。

  2. 响应用户操作（事件监听） 监听用户的行为，比如点击、输入、滑动、鼠标悬停，然后执行对应的代码。比如用户点击 “提交” 按钮时，获取表单内容并验证。

  3. 处理数据与逻辑 进行计算、判断、循环，比如计算器的加减乘除、判断用户输入的密码是否符合要求、遍历列表渲染内容。

简单说：HTML 是 “什么”，CSS 是 “长什么样”，JS 是 “能做什么”。

二、新手入门：JS 基础语法，只学最常用的

不用一开始就啃完所有语法，先掌握这几个高频核心，就能写出大部分基础交互了。

1. 变量：存储数据的 “盒子”

变量就是用来存数据的容器，比如用户名、年龄、状态。

javascript

运行

// 声明变量：let/const 变量名 = 值;
let username = "前端新手"; // 可以修改的变量，用let
const PI = 3.1415; // 不能修改的常量，用const（推荐优先用const）

// 修改变量
username = "新的用户名";
// PI = 3.14; // 报错！常量不能修改

✅ 新手避坑：

  • 变量名不能以数字开头，不能有空格和特殊符号；
  • 区分大小写，userName 和 username 是两个不同的变量；
  • 不要用中文命名变量，比如 let 年龄 = 18 虽然不报错，但不规范。

2. 数据类型：JS 里常见的几种数据

你存的内容不同，数据类型也不同，常用的有这 4 种：

javascript

运行

// 字符串：文字内容，用单/双引号包裹
let name = "张三";
// 数字：数值，直接写
let age = 18;
// 布尔值：true/false（真/假）
let isStudent = true;
// 对象：键值对形式，存多个相关数据（比如用户信息）
let user = {
  name: "张三",
  age: 18,
  isStudent: true
};

3. 条件判断：让代码 “有选择地执行”

根据不同的情况，执行不同的代码，最常用的是 if-else：

javascript

运行

let score = 85;

if (score >= 90) {
  console.log("优秀！");
} else if (score >= 60) {
  console.log("及格啦！");
} else {
  console.log("不及格，加油！");
}

4. 循环：重复执行一段代码

比如遍历一个列表，给每个元素都执行相同的操作，最常用的是 for 循环：

javascript

运行

// 打印1到5
for (let i = 1; i <= 5; i++) {
  console.log(i);
}

// 遍历数组
let fruits = ["苹果", "香蕉", "橙子"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

5. 函数：把重复的代码 “打包复用”

如果一段代码要写很多次，就把它封装成函数，需要的时候调用就行：

javascript

运行

// 定义函数
function sayHello(name) {
  console.log("你好，" + name + "！");
}

// 调用函数
sayHello("张三");
sayHello("李四");

三、核心重点：DOM 操作，让 JS 控制网页

DOM（文档对象模型）就是把 HTML 页面里的所有元素，变成 JS 可以操作的对象。简单说，就是让 JS“找到页面上的元素，然后修改它”。

1. 第一步：获取页面元素

要操作元素，首先得找到它，常用的 3 种获取方式：

html

预览

<!-- HTML部分 -->
<p id="demo" class="text">这是一段文字</p>
<button class="btn">点击我</button>

javascript

运行

// 1. 通过id获取（id是唯一的）
const demo = document.getElementById("demo");

// 2. 通过class获取（返回一个列表）
const btns = document.getElementsByClassName("btn");

// 3. 最常用：querySelector，和CSS选择器写法一样
const demo = document.querySelector("#demo"); // 选id为demo的元素
const btn = document.querySelector(".btn"); // 选class为btn的第一个元素

✅ 新手避坑：

  • JS 代码要写在 HTML 元素的后面，或者用 DOMContentLoaded 事件，不然会找不到元素！

javascript

运行

// 推荐写法：等页面加载完成后再执行JS
document.addEventListener("DOMContentLoaded", function() {
  // 这里写获取元素和操作的代码
  const demo = document.querySelector("#demo");
});

2. 第二步：修改元素内容与样式

获取到元素后，就可以修改它的内容和样式了：

javascript

运行

// 修改文本内容
demo.innerText = "我被JS修改了！";

// 修改HTML内容（可以包含标签）
demo.innerHTML = "<strong>加粗的文字</strong>";

// 修改CSS样式（驼峰命名，比如background-color改成backgroundColor）
demo.style.color = "red";
demo.style.fontSize = "20px";
demo.style.backgroundColor = "#f0f0f0";

3. 第三步：事件监听，让用户操作触发 JS

事件监听就是 “当用户做了某个动作，就执行一段代码”，最常用的是 addEventListener：

javascript

运行

// 给按钮添加点击事件
btn.addEventListener("click", function() {
  // 点击后执行的代码
  demo.innerText = "按钮被点击了！";
  demo.style.color = "blue";
});

常见的事件还有：

  • click：点击
  • input：输入框内容变化
  • mouseover：鼠标悬停
  • mouseout：鼠标离开
  • scroll：页面滚动

四、实战 1：点击按钮切换文字（入门级交互）

我们来写一个完整的小案例，把上面的知识点串起来。

1. HTML 结构

html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JS入门案例：点击切换文字</title>
  <style>
    .box {
      width: 300px;
      margin: 50px auto;
      text-align: center;
    }
    #text {
      font-size: 18px;
      color: #333;
      margin-bottom: 20px;
    }
    .btn {
      padding: 8px 16px;
      background: #409eff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="box">
    <p id="text">点击按钮，我会变哦~</p>
    <button class="btn">点击切换</button>
  </div>

  <script>
    // 等页面加载完成
    document.addEventListener("DOMContentLoaded", function() {
      // 1. 获取元素
      const textEl = document.querySelector("#text");
      const btnEl = document.querySelector(".btn");

      // 2. 准备要切换的内容
      const texts = ["点击按钮，我会变哦~", "我变啦！", "再点一下试试~", "又变了！"];
      let index = 0; // 记录当前显示的文字索引

      // 3. 给按钮添加点击事件
      btnEl.addEventListener("click", function() {
        // 索引+1，循环切换
        index = (index + 1) % texts.length;
        // 修改文字内容
        textEl.innerText = texts[index];
        // 同时修改文字颜色
        const colors = ["#333", "#409eff", "#67c23a", "#e6a23c"];
        textEl.style.color = colors[index];
      });
    });
  </script>
</body>
</html>

2. 效果说明

打开这个页面，点击按钮，文字内容和颜色会循环切换，这就是一个最基础的 JS 交互效果。

五、实战 2：简单的输入框验证（表单交互）

再写一个稍微进阶的案例：用户输入内容，点击按钮后判断是否为空，并给出提示。

html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JS入门案例：输入框验证</title>
  <style>
    .form-box {
      width: 300px;
      margin: 50px auto;
    }
    .input-item {
      margin-bottom: 15px;
    }
    input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .btn {
      width: 100%;
      padding: 8px;
      background: #409eff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .tip {
      font-size: 12px;
      margin-top: 5px;
    }
    .tip.error {
      color: #f56c6c;
    }
    .tip.success {
      color: #67c23a;
    }
  </style>
</head>
<body>
  <div class="form-box">
    <div class="input-item">
      <input type="text" id="username" placeholder="请输入用户名">
      <p class="tip" id="tip"></p>
    </div>
    <button class="btn" id="submitBtn">提交</button>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // 获取元素
      const usernameInput = document.querySelector("#username");
      const tipEl = document.querySelector("#tip");
      const submitBtn = document.querySelector("#submitBtn");

      // 点击提交按钮
      submitBtn.addEventListener("click", function() {
        // 获取输入框的内容，trim()去掉首尾空格
        const value = usernameInput.value.trim();

        // 条件判断
        if (value === "") {
          // 为空，显示错误提示
          tipEl.innerText = "用户名不能为空！";
          tipEl.className = "tip error";
        } else if (value.length < 3) {
          // 长度不足3位
          tipEl.innerText = "用户名长度不能少于3位！";
          tipEl.className = "tip error";
        } else {
          // 验证通过
          tipEl.innerText = "用户名格式正确！";
          tipEl.className = "tip success";
        }
      });
    });
  </script>
</body>
</html>

六、新手必踩的 3 个 JS 坑，提前避开！

  1. 找不到 DOM 元素 原因：JS 代码写在 HTML 元素前面，页面还没加载完，元素还没渲染出来，JS 就找不到它了。 解决：把 <script> 标签写在 </body> 前面，或者用 DOMContentLoaded 事件包裹代码。

  2. 变量名写错，导致 “undefined” 比如定义了 let userName = "张三"，后面写的时候写成了 username，JS 会把它当成一个新的变量，值为 undefined。 解决：写变量名时复制粘贴，或者用 VS Code 的自动补全，减少拼写错误。

  3. 事件绑定多次，导致代码重复执行 比如在循环里给按钮绑定事件，结果每个按钮都绑定了多次，点击一次执行多次代码。 解决：检查事件绑定的位置，避免重复绑定；或者在绑定前先移除旧的事件监听。

结语

到这里，你已经学会了 JS 的基础语法、DOM 操作和事件监听，并且实现了两个简单的交互效果。

现在你已经掌握了前端三剑客（HTML+CSS+JS）的核心基础，接下来我们就可以把这些知识点整合起来，写一个完整的实战项目了。

下一篇文章，我们就从零开始，搭建一个完整的个人静态博客页面，把学到的所有知识都用起来，敬请期待！

# javascript # 交互 # 开发语言 # 青少年编程 # css
Logo
亚马逊云科技技术品牌专区

更多推荐

Kiro Editor 开发实战：使用 Cargo 构建、测试与性能优化指南

欢迎来到这篇终极指南，我们将深入探索如何使用Rust构建高性能的终端文本编辑器Kiro Editor。无论你是Rust新手还是经验丰富的开发者，这篇完整教程将带你了解如何利用Cargo工具链进行高效的开发、测试和性能优化，打造一款快速、轻量且功能强大的UTF-8文本编辑器。## 什么是Kiro Editor？Kiro Editor是一款使用Rust编写的极简终端文本编辑器，它最初是著名编辑

avatar 亚马逊云科技技术品牌专区

2026年量化工具选择，要跟着能力基础走

读者应理解，选择工具前要先判断自己的能力基础和当前任务。工具应该帮助自己补上当前最关键的缺口，而不是替代学习顺序本身。

avatar 亚马逊云科技技术品牌专区

2026年下半年量化入门，学习表达开发验证要分开

读者应理解，一个更清楚的路径是先学习基本概念，再表达规则，再尝试开发实现，最后进行验证检查。每一阶段都有自己的任务和边界，不应提前替代下一阶段。

avatar 亚马逊云科技技术品牌专区