JavaScript

JavaScript 的作用，是让网页“动起来”。

如果只有 HTML 和 CSS，页面更多是在“展示”；有了 JavaScript，页面就可以：

• 响应点击
• 读取输入框内容
• 修改页面文本
• 控制显示和隐藏
• 向后端发送请求

所以你可以把 JavaScript 理解成网页的交互层。

本节目标

• 理解 JavaScript 在网页中的作用
• 学会变量、数据类型、条件、循环、函数这些基础语法
• 学会获取和修改页面元素
• 学会绑定事件
• 理解常见内置对象
• 理解定时器和简单页面交互

JavaScript 到底在页面里干什么

先看一个最常见的场景：

页面里有一个按钮，用户点击后，标题文字变成“欢迎回来”。

这个过程里：

• HTML 提供按钮和标题
• CSS 控制外观
• JavaScript 负责“点击后修改内容”

所以 JavaScript 的核心价值是：让页面不再是静态展示，而是能根据用户动作和数据变化做出响应。

JavaScript 写在哪里

1. 行内写法

<button onclick="alert('你好')">点击</button>

这种写法能用，但不适合正式项目，因为结构和行为耦合太紧。

2. 页面内写在 <script> 中

<script>
  console.log("欢迎学习 JavaScript");
</script>

3. 外部 JS 文件

<script src="main.js"></script>

这是更推荐的做法，便于维护。

变量

let

let name = "小明";

通常用于值会变化的变量。

const

const age = 18;

通常用于不希望被重新赋值的变量。

var

老代码里你经常会看到 var，但现代代码通常更推荐 let 和 const。

数据类型

JavaScript 中常见的数据类型包括：

• 字符串
• 数字
• 布尔值
• 数组
• 对象
• null
• undefined

字符串

let name = "Python 学习空间";

数字

let score = 95;

布尔值

let isLogin = true;

数组

let skills = ["Python", "Linux", "MySQL"];

对象

let student = {
  name: "小明",
  age: 18
};

输出：console.log()

学习 JavaScript 时最常用的调试方式就是：

console.log("你好，JavaScript");

结果会显示在浏览器开发者工具的控制台中。

条件判断

let age = 18;

if (age >= 18) {
  console.log("已成年");
} else {
  console.log("未成年");
}

输出结果：

已成年

多条件判断

let score = 82;

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

输出结果：

及格

循环

for 循环

for (let i = 1; i <= 3; i++) {
  console.log("第 " + i + " 次循环");
}

输出结果：

第 1 次循环
第 2 次循环
第 3 次循环

遍历数组

let skills = ["Python", "Linux", "Django"];

for (let i = 0; i < skills.length; i++) {
  console.log(skills[i]);
}

输出结果：

Python
Linux
Django

函数

函数用于封装可重复使用的逻辑。

function add(a, b) {
  return a + b;
}

console.log(add(3, 5));

输出结果：

8

一个更贴近页面操作的函数

function showMessage(name) {
  console.log("欢迎你，" + name);
}

showMessage("小明");

输出结果：

欢迎你，小明

获取页面元素

这一步是 JavaScript 操作页面的基础。

getElementById

const box = document.getElementById("box");

表示：获取 id="box" 的元素。

querySelector

const title = document.querySelector(".title");

表示：获取第一个匹配 .title 的元素。

querySelectorAll

const items = document.querySelectorAll(".item");

表示：获取所有匹配 .item 的元素。

修改页面内容

修改文本

const title = document.querySelector(".title");
title.innerText = "新的标题";

修改 HTML 结构

const box = document.getElementById("box");
box.innerHTML = "<strong>加粗内容</strong>";

修改属性

const img = document.querySelector("img");
img.src = "cat.jpg";
img.alt = "一只猫";

修改样式

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

事件

事件可以理解成“用户做了某个动作”。

例如：

• 点击按钮
• 鼠标移入
• 输入内容
• 页面加载完成

最简单的点击事件

HTML：

<button id="btn">点击我</button>

JavaScript：

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

button.onclick = function () {
  alert("你点击了按钮");
};

点击按钮后，浏览器会弹出提示框。

更推荐的写法：addEventListener

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

button.addEventListener("click", function () {
  console.log("按钮被点击了");
});

这种写法更灵活，也更适合正式开发。

一个完整交互案例：点击按钮切换标题

HTML：

<h1 id="title">欢迎来到 Python 学习空间</h1>
<button id="changeBtn">点击修改标题</button>

JavaScript：

const title = document.getElementById("title");
const button = document.getElementById("changeBtn");

button.addEventListener("click", function () {
  title.innerText = "标题已经被修改";
});

效果是：

• 页面初始显示原来的标题
• 点击按钮后，标题立刻变化

表单输入读取

HTML：

<input id="username" type="text" placeholder="请输入用户名">
<button id="showBtn">显示输入内容</button>

JavaScript：

const input = document.getElementById("username");
const button = document.getElementById("showBtn");

button.addEventListener("click", function () {
  console.log(input.value);
});

如果用户输入的是：

小明

控制台输出就是：

小明

简单表单校验

const input = document.getElementById("username");
const button = document.getElementById("showBtn");

button.addEventListener("click", function () {
  if (input.value === "") {
    alert("用户名不能为空");
  } else {
    alert("提交成功");
  }
});

这就是最基础的前端交互逻辑之一。

数组常见操作

添加元素

let skills = ["Python", "Linux"];
skills.push("Django");
console.log(skills);

输出结果：

["Python", "Linux", "Django"]

删除最后一个元素

skills.pop();
console.log(skills);

遍历数组

skills.forEach(function (item) {
  console.log(item);
});

对象常见操作

let student = {
  name: "小明",
  age: 18,
  city: "上海"
};

console.log(student.name);
student.age = 19;
console.log(student);

输出结果：

小明
{name: "小明", age: 19, city: "上海"}

常见内置对象

Math

console.log(Math.max(3, 8, 5));
console.log(Math.random());

Date

const now = new Date();
console.log(now);

字符串方法

let text = "python";
console.log(text.toUpperCase());
console.log(text.length);

数组方法

let arr = [1, 2, 3];
console.log(arr.length);

定时器

setTimeout

setTimeout(function () {
  console.log("3 秒后执行");
}, 3000);

setInterval

setInterval(function () {
  console.log("每隔 2 秒执行一次");
}, 2000);

这个在倒计时、轮播图、定时刷新里很常见。

一个完整小案例：点击按钮显示欢迎语

HTML：

<input id="nameInput" type="text" placeholder="请输入你的名字">
<button id="welcomeBtn">显示欢迎语</button>
<p id="result"></p>

JavaScript：

const input = document.getElementById("nameInput");
const button = document.getElementById("welcomeBtn");
const result = document.getElementById("result");

button.addEventListener("click", function () {
  if (input.value === "") {
    result.innerText = "请先输入名字";
    return;
  }

  result.innerText = "欢迎你，" + input.value;
});

如果用户输入：

小明

点击按钮后，页面会显示：

欢迎你，小明

这个案例已经把前端中最常见的流程串起来了：

• 获取元素
• 读取用户输入
• 条件判断
• 修改页面内容
• 绑定事件

常见错误

1. 先写 JavaScript，后写 HTML 元素

如果脚本执行时，页面元素还没出现，就可能获取失败。

2. id 写错

document.getElementById("btn")

如果 HTML 中根本没有 id="btn"，那结果就是 null。

3. 混淆 =、==、===

零基础阶段先尽量用：

===

做比较，更清晰。

4. 以为 console.log() 会显示在页面上

它只会显示在浏览器控制台，不会自动显示给用户。

练习题

练习 1

写变量保存你的名字、年龄、学习方向，并用 console.log() 输出。

练习 2

写一个按钮，点击后让页面标题变成另一句话。

练习 3

写一个输入框和按钮，点击按钮后把输入框内容显示到页面上。

练习 4

写一个简单校验：如果输入框为空，就提示“不能为空”。

练习 5

写一个数组，遍历输出其中每个学习方向。

本节小结

JavaScript 的核心价值，是让网页从“只能展示”变成“可以交互”。

你这一节最重要的收获应该是：

• 会写变量、条件、循环和函数
• 会获取页面元素
• 会修改页面内容和样式
• 会绑定点击事件
• 会处理最简单的用户输入

只要这一层打牢，后面你学 Ajax、jQuery、Django 前后端交互时，就会顺很多。