前面学了 HTML 和 CSS。HTML 负责网页的内容，CSS 负责网页的样式。但是大家有没有发现一个问题——我们做出来的网页是"死的"，用户没办法和它互动。
⏸ 停顿一下 举个例子：你打开淘宝，点击"加入购物车"按钮，购物车数字就会变。你在微信网页版输入消息点发送，消息就出去了。这些"点击之后页面会变化"的行为，全都是 JavaScript 实现的。
所以，记住一句话：HTML 是骨架，CSS 是皮肤，JavaScript 是肌肉——它让网页动起来。
今天我们不讲理论，就做三个小东西，每个十几分钟，做完你就知道 JavaScript 是怎么让网页"活"起来的。
学会三件事 → 变量、函数、onclick 事件
我们来做第一个小东西：一个"打招呼机器"。页面上有一个输入框，你输入名字，点个按钮，页面就会显示"你好，XXX！"。⏸ 很简单对吧？但是这里面包含了 JavaScript 最核心的三个概念。我们一个一个来看。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打招呼机器</title> </head> <body> <h1>欢迎来到 JavaScript 的世界！</h1> <!-- 输入框：用户在这里打字 --> <input type="text" id="nameInput" placeholder="请输入你的名字"> <!-- 按钮：onclick 表示"点击时执行 greet() 函数" --> <button onclick="greet()">打招呼</button> <!-- 这个 p 标签一开始是空的，等着 JS 往里面写内容 --> <p id="output"></p> <script> function greet() { var name = document.getElementById("nameInput").value; if (name === "") { alert("请先输入名字！"); return; } var msg = "你好，" + name + "！欢迎学习 JavaScript 🎉"; document.getElementById("output").innerHTML = msg; } </script> </body> </html>
type="text" 表示它接收文字输入。重点是 id="nameInput"——我们给这个输入框起了个名字叫 "nameInput"。等一下 JavaScript 就靠这个名字来找到它、读取里面的内容。onclick="greet()" 的意思是：当用户点击这个按钮的时候，浏览器就去执行一个叫 greet 的函数。注意后面有个小括号 ()，这是调用函数的写法。id="output"，方便 JS 找到它。function 是 JavaScript 的关键字，意思是"定义一个函数"。greet 是我们给这个函数起的名字。大括号 { } 里面的代码，就是按下按钮后要执行的全部操作。document.getElementById("nameInput") — 在整个页面中，找到 id 为 "nameInput" 的那个元素（就是我们的输入框）。.value — 取出输入框里用户实际输入的文字。var name = ... — 把取出来的文字存到一个叫 name 的变量里。if 是"如果"的意思。name === "" 检查变量 name 是不是空的（用户什么都没输入）。如果是空的：alert(...) — 弹出一个提示框告诉用户"请先输入名字"。return — 意思是"到此为止，后面的代码不再执行了"，直接退出函数。+ 号把三段文字拼接在一起。如果用户输入的是"小明"，那么 msg 的值就变成 "你好，小明！欢迎学习 JavaScript"。在 JavaScript 里，+ 号用在字符串之间就是"把文字连起来"的意思。.innerHTML 把它的内容设置为 msg。这样欢迎语就显示在页面上了！.value 是"读取输入框的内容"，.innerHTML 是"设置元素显示的内容"。一个读，一个写。
好，代码讲完了。现在我们来实际跑一下。👉 现场演示
大家看，我在输入框里输入"小明"，然后点"打招呼"—— ⏸ 点击按钮 看到了吗？下面出现了"你好，小明！"。这就是 JavaScript 在工作：读取输入 → 处理数据 → 写回页面。
我再试一下什么都不输入直接点—— ⏸ 点击按钮 弹出来一个提示框"请先输入名字！"。这就是 if 判断在起作用。
好，我们来回顾这个案例教了什么：
第一，var 用来创建变量，存储数据；
第二，function 用来定义函数，把代码打包；
第三，onclick 让按钮被点击时执行函数。
这三个东西是 JavaScript 最基础的积木，后面所有复杂的东西都建立在它们之上。
学会三件事 → DOM 读写、if-else 条件判断、动态修改样式
第二个案例稍微升级一下。我们做一个"密码强度检测器"——你输入一个密码，它告诉你这个密码是弱的、中等的还是强的。就像你在注册账号时看到的那个密码强度条。
这个案例在第一个的基础上增加了两个新知识：if-else if-else 条件判断，和用 JS 改变页面元素的颜色。
result.style.color = "red" 就把文字变红。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>密码强度检测</title> </head> <body> <h1>密码强度检测器</h1> <input type="password" id="pwdInput" placeholder="请输入密码"> <button onclick="checkPassword()">检测强度</button> <p id="result"></p> <script> function checkPassword() { var pwd = document.getElementById("pwdInput").value; var result = document.getElementById("result"); var len = pwd.length; if (len === 0) { result.innerHTML = "⚠️ 请输入密码"; result.style.color = "gray"; } else if (len < 6) { result.innerHTML = "❌ 弱密码（少于6位）"; result.style.color = "red"; } else if (len < 10) { result.innerHTML = "⚡ 中等强度（6-9位）"; result.style.color = "orange"; } else { result.innerHTML = "✅ 强密码（10位以上）"; result.style.color = "green"; } } </script> </body> </html>
type="password"。这样用户输入的内容会显示成小圆点，不会被旁边的人看到。这就是"密码输入框"。pwd 里。result 里。为什么要提前存？因为下面要多次用到这个元素（改内容、改颜色），存到变量里可以少写很多重复代码。.length 是字符串自带的一个属性，告诉你这个字符串有多少个字符。比如用户输入了 "abc123"，那 pwd.length 就是 6。我们把它存到 len 变量里，方便后面判断。result 是我们之前找到的那个 <p> 元素，.style.color 对应 CSS 里的 color 属性。赋值为 "red" 就会让文字变成红色。JavaScript 可以修改任何 CSS 属性！元素.style.CSS属性名 = "值"
我们来演示一下。👉 现场演示
我先输入 "123"——⏸ 点击检测——红色！弱密码，只有3位。
我再输入 "abc12345"——⏸ 点击检测——橙色！中等，8位。
再试 "MyP@ssw0rd2024"——⏸ 点击检测——绿色！强密码，14位。
大家看，同一个函数，根据不同的输入，走不同的 if 分支，显示不同的结果和颜色。这就是"条件判断"的威力。
学会三件事 → 引入 jQuery 库、$() 选择器、.click() / .text() / .toggleClass()
第三个案例，我们要用一个叫 jQuery 的"工具库"。
⏸ 先解释什么是jQuery 前面两个案例我们写了很多 document.getElementById，写起来很长对吧？jQuery 就是别人写好的一个 JavaScript 工具包，它的核心思想是："用更少的代码做更多的事"。jQuery 把很多复杂的操作都简化了。
举个例子：原生 JS 写 document.getElementById("name")，jQuery 只需要写 $("#name")。是不是短多了？
我们这个案例做一个"个人名片"，可以修改名字、切换主题。
$ 就是 jQuery 的缩写。$("#xxx") 按 id 找元素，$(".xxx") 按 class 找元素。和 CSS 选择器写法一模一样。.val() = 获取输入框的值（等于原生的 .value）.text("新内容") = 修改文字（等于原生的 .innerHTML）.toggleClass("类名") = 如果有这个 class 就删掉，没有就加上（用来切换状态，比如切换深色模式）<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery 个人名片</title> <!-- ★ 引入 jQuery 库（必须在自己的代码之前引入） --> <script src="https://cdnjs.cloudflare.com/.../jquery.min.js"></script> </head> <body> <div id="card"> <h2 id="cardName">张三</h2> <p id="cardBio">保山学院 · 大数据学院</p> <span class="hobby">编程</span> <span class="hobby">游戏</span> </div> <input type="text" id="newName" placeholder="输入新名字"> <button id="btnChange">修改名字</button> <button id="btnTheme">切换主题</button> <script> // 点击"修改名字"按钮时执行 $("#btnChange").click(function() { var newName = $("#newName").val(); if (newName !== "") { $("#cardName").text(newName); } }); // 点击"切换主题"按钮时执行 $("#btnTheme").click(function() { $("#card").toggleClass("dark-mode"); }); </script> </body> </html>
src 指向一个网址，浏览器会从这个网址下载 jQuery 的代码。引入之后，我们就可以在自己的代码里使用 $ 了。$("#btnChange") — 用 jQuery 找到 id 为 "btnChange" 的按钮。# 表示"按 id 找"，和 CSS 一模一样。.click(...) — 给这个按钮绑定一个"点击事件"。效果等同于 HTML 里写 onclick，但这是 jQuery 推荐的写法。function() { ... } — 这个没有名字的函数叫"匿名函数"，就是点击后要执行的代码。$("#newName") 找到输入框，.val() 获取它的值。document.getElementById("newName").value 效果完全一样，但写法短了一半。.text(newName) 把找到的元素的文字内容修改为 newName 的值。比如 newName 是"李四"，那名片上的名字就从"张三"变成"李四"了。.toggleClass("dark-mode") 的意思是：切换这个元素身上有没有 "dark-mode" 这个 CSS 类名。我们来演示一下。👉 现场演示
我输入"李四"，点"修改名字"——⏸ 点击——看，名片上的名字变了！头像也跟着变了。
再点"切换主题"——⏸ 点击——变成深色了！再点一下——⏸ 点击——又变回来了。这就是 toggleClass 的开关效果。
jQuery 的口号：Write Less, Do More（写更少的代码，做更多的事）
好，案例三教了 jQuery 的基本用法。核心就是一个 $() 选择器，学会它就能用 jQuery 做很多事。选择器语法和 CSS 一样：# 找 id，. 找 class，直接写标签名找标签。
用3分钟收尾
好，我们来回顾一下今天的内容。今天一共做了三个案例，学了6个核心概念：
下节课是上机课。我会发一个 HTML 文件给大家，上面有几道编程题。题目是选择填空的形式——代码框架已经写好了，关键位置留了空，你们从选项里选出正确的代码填进去。填对了，网页的交互效果就能跑起来。
最后还有一道拔高题，需要自己写代码，不给选项。能做出来的同学加分。