JavaScript: JavaScript 简介
JavaScript 是网页的编程语言——它让静态的 HTML 页面变得活灵活现。
本教程面向零基础学习者，从变量和函数讲起，直到你能独立开发一个完整的待办清单应用。
1. 你将学到
- JavaScript 基本语法和核心概念
- 数组、对象、函数的使用
- DOM 操作和事件处理
- 异步编程和模块化
- 综合项目实战
▶ 示例
JAVASCRIPT
// 本节代码示例
const message = "你好，世界!";
console.log(message);
这是最简单的示例，后续章节会详细解释。## 2. 前置知识
学习本教程前，你应该已经了解：
- HTML 基础（标签、属性、表单）
- CSS 基础（选择器、盒模型）
3. JavaScript 是什么
JavaScript 是一种脚本语言，可以直接在浏览器中运行，不需要编译。你写的每一行 JS 代码，浏览器会逐行读取并立即执行。
JS 最初只为浏览器设计，但现在它的势力范围已经扩展到了服务器（Node.js）、桌面应用（Electron）、甚至手机 App（React Native）。不过在本教程中，我们聚焦于 JS 在网页中的用法。
4. JavaScript 能做什么
JS 的能力覆盖网页交互的方方面面：
- 改变 HTML 内容——点击按钮后替换页面上的文字
- 响应事件——用户点击、滚动、输入时触发逻辑
- 验证表单——提交前检查邮箱格式、密码长度
- 操作 CSS——动态修改样式、实现动画效果
- 与服务器通信——无需刷新页面即可获取数据（AJAX）
一句话总结：HTML 搭骨架，CSS 披皮肤，JS 让它动起来。
5. JavaScript 与 HTML/CSS 的关系
把网页比作一个人：
- HTML 是骨架——定义页面结构
- CSS 是皮肤和衣服——控制外观样式
- JavaScript 是肌肉——让页面产生动作和反应
三者各司其职，JS 通过操作 HTML 元素和 CSS 样式来改变页面的呈现和行为。
6. JavaScript 的历史趣事
1995 年，网景公司的 Brendan Eich 用 10 天写出了 JavaScript 的第一版。没错，如今统治互联网的这门语言，诞生只花了不到两周。
几个容易混淆的事实：
- JavaScript 和 Java 是两门完全不同的语言，就像"雷峰塔"和"雷锋"的关系
- JS 最初叫 Mocha，后来改名 LiveScript，最终蹭了 Java 的热度改名 JavaScript
- 1997 年，JS 被提交给 ECMA 组织标准化，正式名称是 ECMAScript（ES）。你常听到的 ES6 就是 2015 年发布的第六版
7. 浏览器如何执行 JavaScript
每个浏览器都内置了 JS 引擎，负责把你写的代码翻译成机器能执行的指令：
- Chrome / Edge：V8 引擎
- Firefox：SpiderMonkey 引擎
- Safari：JavaScriptCore 引擎
执行流程很简单：浏览器加载 HTML → 遇到 script 标签 → JS 引擎逐行解析执行 → 结果反映在页面上。
▶ 示例：用 JavaScript 改变页面文字
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS 简介 - 改变文字</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; text-align: center; margin-top: 80px; }
#msg { font-size: 24px; color: #333; transition: all 0.3s; }
button { padding: 12px 28px; font-size: 16px; cursor: pointer; border: none; border-radius: 6px; background: #4CAF50; color: #fff; }
button:hover { background: #45a049; }
</style>
</head>
<body>
<p id="msg">你好，世界！</p>
<button id="changeBtn">点我改变文字</button>
<script>
document.getElementById("changeBtn").onclick = function() {
document.getElementById("msg").textContent = "JavaScript 让页面动起来了！";
document.getElementById("msg").style.color = "#e91e63";
};
</script>
</body>
</html>
▶ 示例：JavaScript 响应用户事件
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS 简介 - 响应事件</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; text-align: center; margin-top: 60px; }
.card { display: inline-block; padding: 40px; border: 2px solid #ddd; border-radius: 12px; cursor: pointer; transition: all 0.3s; }
.card:hover { border-color: #2196F3; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.card.active { border-color: #e91e63; background: #fce4ec; }
#info { margin-top: 20px; font-size: 18px; color: #555; }
</style>
</head>
<body>
<div class="card" id="myCard">
<p>把鼠标移到这里</p>
</div>
<p id="info"></p>
<script>
var card = document.getElementById("myCard");
var info = document.getElementById("info");
card.onmouseenter = function() {
info.textContent = "你进入了卡片区域！";
card.classList.add("active");
};
card.onmouseleave = function() {
info.textContent = "你离开了卡片区域！";
card.classList.remove("active");
};
</script>
</body>
</html>
▶ 示例：JavaScript 验证表单输入
HTML
📖 仅展示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS 简介 - 表单验证</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; max-width: 400px; margin: 60px auto; }
label { display: block; margin-top: 16px; font-weight: bold; }
input { width: 100%; padding: 8px; margin-top: 4px; border: 2px solid #ddd; border-radius: 4px; box-sizing: border-box; }
input:focus { outline: none; border-color: #2196F3; }
button { margin-top: 20px; padding: 10px 24px; border: none; border-radius: 6px; background: #2196F3; color: #fff; cursor: pointer; font-size: 16px; }
button:hover { background: #1976D2; }
.error { color: #e91e63; font-size: 14px; margin-top: 4px; display: none; }
.success { color: #4CAF50; font-size: 16px; margin-top: 12px; display: none; }
</style>
</head>
<body>
<h2>用户注册</h2>
<label for="username">用户名</label>
<input type="text" id="username" placeholder="至少3个字符">
<p class="error" id="usernameError">用户名至少需要3个字符</p>
<label for="email">邮箱</label>
<input type="text" id="email" placeholder="输入邮箱地址">
<p class="error" id="emailError">请输入有效的邮箱地址</p>
<button id="submitBtn">提交</button>
<p class="success" id="successMsg">验证通过，提交成功！</p>
<script>
document.getElementById("submitBtn").onclick = function() {
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var valid = true;
if (username.length < 3) {
document.getElementById("usernameError").style.display = "block";
valid = false;
} else {
document.getElementById("usernameError").style.display = "none";
}
if (email.indexOf("@") === -1 || email.indexOf(".") === -1) {
document.getElementById("emailError").style.display = "block";
valid = false;
} else {
document.getElementById("emailError").style.display = "none";
}
if (valid) {
document.getElementById("successMsg").style.display = "block";
} else {
document.getElementById("successMsg").style.display = "none";
}
};
</script>
</body>
</html>
❓ 常见问题
Q JavaScript 和 Java 是同一种语言吗？
A 完全不是。这就好比"老婆饼"里没有老婆——Java 是编译型语言，用于后端和 Android 开发；JavaScript 是解释型脚本语言，主要用于网页。二者只是名字蹭了热度，语法和用途都大不相同。
Q 学习 JS 之前必须精通 HTML 和 CSS 吗？
A 不需要精通，但至少要了解基本概念。因为 JS 的主要工作就是操作 HTML 元素和 CSS 样式，如果你连标签和选择器都看不懂，学 JS 会很吃力。
Q JS 只能在浏览器里用吗？
A 不是。Node.js 让 JS 可以运行在服务器上，Electron 让它开发桌面应用，React Native 让它开发手机 App。但浏览器端仍然是 JS 最重要的舞台。
📖 小节
- JavaScript 是浏览器的脚本语言，逐行解释执行，无需编译
- JS 的核心能力：改内容、响应事件、验证表单、操作样式、与服务器通信
- HTML/CSS/JS 三者分工明确——结构、样式、行为
- JS 由 Brendan Eich 在 1995 年用 10 天创建，经 ECMA 标准化后称 ECMAScript
- 浏览器通过内置 JS 引擎（如 V8）执行代码
📝 作业
- 基础题：创建一个 HTML 页面，包含一个按钮和一个段落，点击按钮后段落文字变为"我学会了 JavaScript！"，文字颜色变为蓝色。
- 进阶题：创建一个页面，包含两个按钮"放大"和"缩小"，点击后分别让页面上一段文字的字号增大或减小 2px。
- 挑战题：创建一个简单的密码验证页面，要求密码长度不少于 6 位且必须包含数字，不符合条件时在输入框下方显示红色提示文字。
