JavaScript 简介
HTML 给页面骨架，CSS 给外观。橱窗摆好了，在真正发生事情之前仍然安静：一次点击、输入的值、加载后出现的一句话。JavaScript 就是在浏览器里做这些事的语言。
什么是 JavaScript？
JavaScript 是一门编程语言。你写下指令，浏览器一条接一条执行。它不是标记语言（那是 HTML），也不是样式表（那是 CSS）。在网页上，它的日常工作是行为：改文字、响应用户、计算一个值，以及本课程后面——向服务器取数据。
会执行的语言，不是一份文档
HTML 标签给内容片段起名字。CSS 规则描述它们长什么样。JavaScript 语句让计算机去做一件事：打印一条消息、改页面上的一个节点、或把两个数加起来。你已经会足够的 HTML，可以把脚本挂到页面上。本课程教的是那段脚本里面跑的语言。
📊 静态页面与带 JavaScript 的页面
| 情形 | 没有 JavaScript | 有一小段脚本 |
|---|---|---|
| 页面刚加载完 | 标题保持 HTML 里写死的样子 | 脚本可以在加载后再改写标题 |
| 访客点击按钮 | 按钮本身不会做出有用反应 | 后续课：点击时运行代码 |
| 需要合计或检查 | HTML 不会算；CSS 不会决策 | JavaScript 可以计算，再把结果显示出来 |
心里把三层分开。结构归 HTML。外观归 CSS。本课程是第三层：页面做什么。
先看一条语句
语句就是一条指令。下面的例子往开发者控制台写一行——那是给程序员用的工具，不是可见页面。学的时候会经常用控制台。
console.log("Hello, JavaScript");
这条语句做什么
console.log是内置函数，向控制台打印- 引号里的文字是字符串——也就是文本数据
- 分号结束语句（本课程里是稳妥习惯）
- 页面上还没有任何变化；这只是一条日志
打开开发者工具（常见是 F12），脚本运行后看 Console 面板。
在页面上看到 JavaScript
要改访客看见的内容，脚本得和页面说话。下面这段 HTML 段落先写一句。内联 <script> 用 id 找到它并替换文字。脚本该放哪里，下一课再说；这里一个文件就够。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
</head>
<body>
<h1>Welcome</h1>
<p id="msg">This line is from HTML only.</p>
<script>
document.getElementById("msg").textContent =
"JavaScript rewrote this sentence.";
</script>
</body>
</html>
什么变了
没有脚本时，访客看到原来的段落。有脚本时，浏览先读 HTML，再执行语句，再显示新句子。文档骨架相同——加载后的行为不同。
JavaScript 也会计算
因为它是编程语言，所以和数字、名字打交道，不只是标签。这个小例子与颜色、标题无关。它算出一个合计并记到控制台。变量和类型以后细讲；这里只要看见代码能计算。
const price = 120000;
const taxRate = 0.09;
console.log(price + price * taxRate);
本课程是什么（以及不是什么）
我们留在浏览器里：语言基础、DOM、事件、表单和 fetch。不从框架、Node.js 或 TypeScript 开头。没有那些工具，你也能写出有用的页面脚本。选修课是加餐，不是主路径的必需。
自己试一次
- 新建文件
intro.html。 - 粘贴带脚本的 HTML 示例，保存，用浏览器打开。
- 确认段落显示改写后的句子，而不是原来的 HTML 文字。
- 把
textContent里的字符串改成你自己的句子，保存并刷新。 - 可选：在同一个
<script>里加上console.log("Hello, JavaScript");，保存刷新，在 Console 面板找到那一行。
常见错误
- 把 JavaScript 当成再写一遍标题和段落的办法——结构留在 HTML；需要时再让 JS 改或补
- 指望 CSS 响应点击或算出合计——CSS 管样式，不跑程序逻辑
- 把重要文字的唯一副本只放在脚本里，一旦没有 JS 页面就空
- 把控制台和可见页面混为一谈：
console.log不会替换屏幕上的标题
小结
- JavaScript 是在浏览器里为网页增加行为的编程语言
- HTML 组织内容；CSS 控制呈现；JavaScript 决定页面做什么
- 一条语句就是一条指令，例如
console.log("Hello, JavaScript"); - 内联脚本可以找到元素，并在加载后改它的
textContent - JavaScript 也会计算数值，不只是碰标记
- 本课程留在浏览器，不需要框架
- 改一小段脚本并刷新浏览器来练习
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部