Skip to content

JavaScript

学习 JavaScript——让网页具备交互能力的 Web 编程语言。

你将学到

  • JavaScript 是什么、为什么在浏览器里运行
  • JS 如何通过 DOM 与 HTML 交互
  • 事件处理器如何响应用户操作
  • JavaScript 与 Java 的区别

概念讲解

JavaScript

JavaScript 是 Web 的编程语言。每个现代浏览器都内置 JavaScript 引擎，所以 JS 代码直接在用户设备上运行，无需安装。HTML 给页面结构，CSS 给样式，JavaScript 给行为。

通过 DOM 实现交互

DOM（Document Object Model，文档对象模型）是浏览器在内存里对你 HTML 的表示。JavaScript 可以读写 DOM——改文字、加元素、改样式——以响应用户操作。

// 找到元素并改其文字
const heading = document.getElementById("title");
heading.textContent = "Welcome back!";

事件处理器

事件是发生的某件事——点击、按键、页面加载。你挂一个处理器——事件触发时运行的函数：

const button = document.querySelector("#myButton");
button.addEventListener("click", () => {
  alert("You clicked the button!");
});

每个交互式 Web 特性都靠这套机制：表单校验、菜单展开、无刷新加载数据。

JavaScript vs. Java

尽管名字像，JavaScript 和 Java 是完全不同的语言。1995 年把 JS 起名"JavaScript"只是借 Java 的热度做营销。两者语法不同、运行时不同、用途不同。别混淆。

JS 在哪里运行

  • 浏览器里 —— 操作 DOM、处理事件、取数据。
  • 服务器上 —— 通过 Node.js 处理文件、数据库、API。

同一种语言，两个环境。这就是为什么 JavaScript 被称为"到处可用的那一种语言"。

示例代码

              // 点击按钮时更新 DOM 的计数器
let count = 0;
const display = document.getElementById("count");
const button = document.getElementById("increment");

button.addEventListener("click", () => {
  count++;
  display.textContent = `Clicked ${count} times`;

  // 根据次数改变颜色
  if (count > 5) {
    display.style.color = "red";
  } else {
    display.style.color = "black";
  }
});

addEventListener 监听点击。每次点击让计数器自增、更新 DOM 文字、并按条件改颜色。这是大多数交互 UI 背后的模式。

动手试一试

  • Markdown Previewer

    这个工具用 JavaScript 构建——实时响应你的输入，就像交互式 Web 应用。

常见错误

错误写法

以为 JavaScript 和 Java 有关系。

正确做法

它们是完全不同的语言。JS 跑在浏览器和 Node.js；Java 跑在 JVM。相似的名字是历史营销巧合。

错误写法

在 DOM 加载完成前就去操作它。

正确做法

把 DOM 代码包进 DOMContentLoaded，或把 <script> 放在 <body> 末尾。否则 document.getElementById 可能返回 null，因为元素还没存在。

相关资源

相关代码片段

相关速查表

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误