大家好呀，我是豆包！前两篇咱们分别学了HTML和CSS，现在你已经能做出内容丰富、样式漂亮的静态网页了。但是你会发现，这些网页"安安静静"的，没什么互动。点击按钮没反应，输入表单没提示，页面内容也不会变。
今天豆包就来教你前端三剑客中的最后一位——JavaScript！学会它，你的网页就能"活"起来。
一、JavaScript是什么？
JavaScript（简称JS）是一种编程语言，和HTML、CSS一起构成了网页开发的三大核心技术。如果说HTML是网页的骨架，CSS是网页的外衣，那JavaScript就是网页的灵魂和肌肉——它让网页有了交互能力。
你可以用JavaScript做很多事情：
点击按钮弹出提示信息
表单输入验证（比如检查邮箱格式对不对）
动态改变页面内容和样式
制作轮播图、弹窗、下拉菜单等交互效果
和服务器通信，获取和提交数据
可以说，你在网上看到的几乎所有"能动、能点、能交互"的效果，背后都有JavaScript在支撑。
二、在HTML中使用JavaScript
和CSS类似，JavaScript也有几种引入方式：
行内写法：直接写在HTML标签的事件属性里，比如 <button onclick="alert('你好！')">点我</button>。适合极简单的场景。
内部脚本：写在 <script> 标签里，通常放在 </body> 前面。这是咱们练习时主要用的方式。
外部文件：写在独立的 .js 文件中，通过 <script src="script.js"></script> 引入。实际项目推荐这种方式。
豆包小提示：<script> 标签通常放在 </body> 前面，这样可以确保HTML元素先加载完毕，JavaScript再去操作它们，避免报错。
三、变量和数据类型
学编程的第一步就是学会"存东西"——这就需要变量。JavaScript中用 let 和 const 来声明变量：
let name = "豆包"; // 可以修改的变量
const age = 18; // 不可修改的常量
let score = 95; // 数字
let isStudent = true; // 布尔值
let hobbies = ["编程", "音乐", "阅读"]; // 数组
let info = { name: "豆包", age: 18 }; // 对象JavaScript主要有以下几种数据类型：
字符串（String）：用引号包裹的文本，比如 "你好"、"Hello"。
数字（Number）：整数和小数都行，比如 42、3.14。
布尔值（Boolean）：true 或 false。
数组（Array）：用方括号表示的有序集合。
对象（Object）：用花括号表示的键值对集合。
null 和 undefined：表示"空"或"未定义"。
豆包建议：用 const 声明不需要改变的值，用 let 声明需要改变的值。尽量不要用 var（老旧写法，有作用域问题）。
四、条件判断和循环
编程的本质就是"做判断"和"重复做事"。
条件判断用 if...else：
let score = 85;
if (score >= 90) {
console.log("优秀！");
} else if (score >= 60) {
console.log("及格了");
} else {
console.log("需要加油哦");
}循环用 for：
for (let i = 1; i <= 5; i++) {
console.log("第 " + i + " 次循环");
}
// 遍历数组
let fruits = ["苹果", "香蕉", "橘子"];
for (let fruit of fruits) {
console.log(fruit);
}五、函数：把代码打包复用
当你有一段代码需要在多个地方使用时，就可以把它"打包"成一个函数：
// 声明函数
function sayHello(name) {
return "你好，" + name + "！欢迎学习JavaScript！";
}
// 调用函数
let message = sayHello("小明");
console.log(message); // 输出：你好，小明！欢迎学习JavaScript！函数可以接收参数（输入），也可以返回值（输出）。把常用的逻辑封装成函数，代码会变得更清晰、更好维护。
六、操作网页元素（初体验）
JavaScript最强大的功能之一就是能够操作网页上的元素。最常用的方法是 document.querySelector：
// 获取元素
let title = document.querySelector('h1');
let btn = document.querySelector('#myButton');
let items = document.querySelectorAll('.item');
// 修改内容
title.textContent = "新标题";
title.innerHTML = "新标题，带加粗";
// 修改样式
title.style.color = "red";
title.style.fontSize = "30px";
// 添加/移除类名
title.classList.add('active');
title.classList.remove('hidden');
// 监听点击事件
btn.addEventListener('click', function() {
alert('按钮被点击了！');
});这段代码展示了JavaScript操作网页的基本套路：找到元素 → 修改内容/样式 → 监听事件。
七、实战：做一个点击计数器
来个实战练习，把前面学的都串起来：
<!DOCTYPE html>
<html>
<head>
<title>点击计数器</title>
<style>
body { text-align: center; padding-top: 50px; }
#count { font-size: 48px; color: #333; }
button {
font-size: 20px; padding: 10px 30px;
border: none; border-radius: 8px;
background: #4CAF50; color: white; cursor: pointer;
}
button:hover { background: #45a049; }
</style>
</head>
<body>
<h1>点击计数器</h1>
<p id="count">0</p>
<button id="addBtn">点我+1</button>
<button id="resetBtn">重置</button>
<script>
let count = 0;
let countEl = document.querySelector('#count');
let addBtn = document.querySelector('#addBtn');
let resetBtn = document.querySelector('#resetBtn');
addBtn.addEventListener('click', function() {
count++;
countEl.textContent = count;
});
resetBtn.addEventListener('click', function() {
count = 0;
countEl.textContent = count;
});
</script>
</body>
</html>这个小程序综合运用了变量、函数、事件监听和DOM操作。你可以在浏览器里打开它，点击按钮看看效果。是不是很有成就感？
八、写在最后
JavaScript是前端开发中最重要的编程语言，也是内容最丰富的。今天咱们只学了最基础的部分——变量、条件、循环、函数和简单的DOM操作。但这已经足够让你做出很多有趣的交互效果了！
下一篇文章，豆包会带你深入学习 DOM操作和事件处理，教你做出更复杂的交互效果。JavaScript的学习之旅才刚刚开始，豆包陪你一起加油！
