HTML 是骨骼,CSS 是衣服,JavaScript 是"肌肉和神经"——点了按钮会反应、输入会校验、内容能动态改变。这一关不求全,只带你打通"取元素、听事件、改内容"这条最重要的主线。
5.1 JS 能做什么 / 放在哪
轮播图、表单验证、点击展开、深色模式切换、游戏……都靠 JS。写法上,把脚本放在 <body> 最底部的 <script> 里最安全(此时页面元素已加载完)。
<body>
... 页面内容 ...
<script>
// JS 代码写这里,或 <script src="app.js"></script>
</script>
</body>5.2 变量与数据类型
变量是"贴了名字的盒子",用 let(会变)或 const(不变)声明。数据分几种类型:
let name = "小明"; // 字符串
let age = 16; // 数字
const PI = 3.14; // 常量,不许改
let ok = true; // 布尔值
let favs = ["游戏","音乐","篮球"]; // 数组拼接字符串用 +,或者更清爽的"模板字符串":`我是 ${name},今年 ${age} 岁`(注意用反引号)。
5.3 条件与循环:让程序会判断、会重复
if (age >= 18) {
console.log("成年");
} else {
console.log("未成年");
}for (let i = 1; i <= 3; i++) {
console.log("第" + i + "遍");
}console.log(...) 把内容打印到"开发者工具 → 控制台"(按 F12),是调试第一步。
5.4 函数:把一段动作起个名字反复用
function greet(name) { // name 是参数
return "你好, " + name; // 返回结果
}
console.log( greet("小红") ); // 调用,得到 "你好, 小红"5.5 操作 DOM:用 JS 改页面上的东西
DOM 就是"页面内容的程序化接口"。两步走:先找到元素,再改它。
let box = document.querySelector("#box"); // 找 id=box 的元素
box.textContent = "文字被改了"; // 改文字
box.style.color = "tomato"; // 改样式
box.classList.add("active"); // 加一个 class5.6 事件:点了按钮才执行
addEventListener 就是"监听某个动作,发生时执行一段代码":
let btn = document.querySelector("#myBtn");
btn.addEventListener("click", function() {
alert("你点到了!");
});"找元素 → 监听事件 → 在回调里改内容/样式" 这三步,是 90% 网页交互的套路。下面的练习让你亲手做一个点击计数器。
✏️ 动手练一练
这是一个"点击计数 + 换主题色"的小交互。三个标签页:HTML、CSS、JS。先点 ▶ 运行 让按钮活起来,再照任务改。
- 先点 ▶ 运行,再点预览里的按钮,看数字 +1。
- 在 JS 里把
count + 1改成count + 2,让每次点加 2。 - 把按钮文字
"点我"改成别的词试试。 - 挑战:改 JS 里
colors数组的颜色值,点按钮时背景会跟着换。
📝 随堂小测
Q1 想选中页面上 id="app" 的元素,下面哪种写法对?
querySelector 里 # 表示 id,. 表示 class,和 CSS 选择器写法一致。
Q2 要"当按钮被点击时执行一段代码",用哪个方法?
addEventListener 用来监听事件;click 是点击事件。
Q3 修改进取到的元素的文字内容,应该赋值哪个属性?
textContent 改文字;style.xxx 改样式;href 是链接地址。
Q4 声明一个"以后不允许再改"的值,应该用?
const 声明常量;会变的一律用 let,别用老写法 var。