JavaScript 入门：让网页动起来
一、JavaScript 是什么？
HTML 负责页面结构（骨架），CSS 负责页面样式（外观），而 JavaScript 负责页面行为（动起来）。
点击按钮弹出提示、输入内容实时验证、滚动加载更多——这些都是 JavaScript 的功劳。
JavaScript 是浏览器内置的脚本语言，不需要安装任何东西，打开浏览器就能运行。
二、第一个 JavaScript 程序
方法一：在浏览器控制台运行
按 F12 打开开发者工具，点击 Console，输入以下代码回车：
console.log('Hello World!');方法二：在 HTML 中嵌入
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"></head><body><h1 id="title">点击下方按钮</h1><button id="btn">点我</button><script>document.getElementById('btn').onclick = function() { alert('你点击了按钮！'); };</script></body></html>三、变量：存储数据
let name = '小明';
let age = 25;
const PI = 3.14159;
console.log('姓名：', name);四、函数：封装可复用代码
function sayHello(name) {
return '你好，' + name + '！';
}
console.log(sayHello('小明'));
const add = (a, b) => a + b;
console.log(add(3, 5));
五、DOM 操作：控制页面元素
let title = document.getElementById('title');
title.innerText = '新标题';
title.style.color = 'red';
btn.onclick = function() { console.log('按钮被点击了'); };六、常见事件
| 事件 | 触发时机 |
|---|---|
onclick | 点击元素时 |
onmouseover | 鼠标移入时 |
oninput | 输入框内容变化时 |
onsubmit | 表单提交时 |
七、综合实例：点击切换主题
<!DOCTYPE html><html><head><style>body { background:#fff; color:#333; }body.dark { background:#1a1a1a; color:#eee; }</style></head><body><h1>主题切换演示</h1><button id="toggleBtn">切换深色模式</button><script>const btn = document.getElementById('toggleBtn');btn.onclick = function() { document.body.classList.toggle('dark'); const isDark = document.body.classList.contains('dark'); btn.innerText = isDark ? '切换浅色模式' : '切换深色模式'; };</script></body></html>八、常见错误
Cannot read property of null：JS 执行时元素还不存在。把 script 放到 /body 之前，或用 window.onload 包裹代码。