什么是 JavaScript？
高级定义
JavaScript 是一种脚本或编程语言，允许你在网页上实现复杂的功能——每当网页不仅仅是静态地显示信息供你查看时——比如显示及时内容更新、交互式地图、动画 2D/3D 图形、滚动视频点唱机等——你都可以肯定 JavaScript 可能参与其中。它是标准 Web 技术“分层蛋糕”的第三层，其中两层（HTML 和 CSS）我们已经在学习区其他部分更详细地介绍过。
HTML 是我们用来构造和赋予 Web 内容意义的标记语言，例如定义段落、标题和数据表，或在页面中嵌入图像和视频。
CSS 是一种样式规则语言，我们用它来为 HTML 内容应用样式，例如设置背景颜色和字体，以及将内容布局成多列。
JavaScript 是一种脚本语言，它使你能够创建动态更新的内容、控制多媒体、动画图像以及几乎所有其他功能。（好吧，不是所有，但你可以用几行 JavaScript 代码实现惊人的效果。）
这三层相互良好地构建。让我们以一个按钮为例。我们可以使用 HTML 对其进行标记以赋予其结构和目的
html
然后我们可以添加一些 CSS，让它看起来更漂亮
cssbutton {
font-family: "Helvetica Neue", "Helvetica", sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
border: 2px solid rgb(200 200 0 / 60%);
background-color: rgb(0 217 217 / 60%);
color: rgb(100 0 0 / 100%);
box-shadow: 1px 1px 2px rgb(0 0 200 / 40%);
border-radius: 10px;
padding: 3px 10px;
cursor: pointer;
}
最后，我们可以添加一些 JavaScript 来实现动态行为
jsfunction updateName() {
const name = prompt("Enter a new name");
button.textContent = `Player 1: ${name}`;
}
const button = document.querySelector("button");
button.addEventListener("click", updateName);
你可以点击“播放”在 MDN Playground 中查看和编辑示例。尝试点击文本标签看看会发生什么。
JavaScript 能做的远不止这些——让我们更详细地探讨一下。
注意：在继续之前，何不现在就动手尝试 Scrimba 的一项挑战？查看 渲染欢迎消息 MDN 学习伙伴。如果你不知道如何编写此代码，完全不用担心；你可以尝试进行一些网络搜索以找到答案，或者在教程结束时查看解决方案。
那么它到底能做什么？
核心客户端 JavaScript 语言包含一些常见的编程功能，允许你执行以下操作：
将有用的值存储在变量中。例如，在上面的示例中，我们请求输入一个新名称，然后将该名称存储在名为 name 的变量中。
对文本片段（在编程中称为“字符串”）执行操作。在上面的示例中，我们获取字符串 "Player 1: " 并将其与 name 变量连接起来，以创建完整的文本标签，例如 "Player 1: Chris"。
响应网页上发生的某些事件运行代码。我们在上面的示例中使用了 click 事件来检测标签何时被点击，然后运行更新文本标签的代码。
还有更多！
然而，更令人兴奋的是基于客户端 JavaScript 语言构建的功能。所谓的 应用程序编程接口 (API) 为你提供了额外的超能力，可以在你的 JavaScript 代码中使用。
API 是一组现成的代码构建块，允许开发人员实现原本难以或不可能实现的程序。它们在编程方面所做的事情，就像现成的家具套件在房屋建造方面所做的事情一样——与其自己设计、寻找合适的木材、将所有面板切割成正确的尺寸和形状、找到正确尺寸的螺丝，然后组装成一个书架，不如直接使用现成的面板并将它们拧在一起，这样要容易得多。
它们通常分为两类。
浏览器 API 内置于你的 Web 浏览器中，能够暴露周围计算机环境中的数据，或执行有用的复杂操作。例如：
DOM（文档对象模型）API 允许你操作 HTML 和 CSS，创建、删除和更改 HTML，动态地将新样式应用于你的页面等等。每当你在页面上看到弹出窗口出现，或显示一些新内容（如我们在上面的简单演示中看到的那样）时，那就是 DOM 在发挥作用。
地理定位 API 检索地理信息。这就是 Google 地图 能够找到你的位置并将其绘制在地图上的方式。
Canvas 和 WebGL API 允许你创建动画 2D 和 3D 图形。人们正在使用这些 Web 技术做一些令人惊奇的事情——请参阅 Chrome 实验 和 webglsamples。
音频和视频 API，如 HTMLMediaElement 和 WebRTC，允许你使用多媒体做一些非常有趣的事情，例如直接在网页中播放音频和视频，或者从你的网络摄像头抓取视频并将其显示在别人的计算机上（尝试我们的简单 快照演示 以了解其思想）。
第三方 API 默认不内置在浏览器中，你通常必须从 Web 上的某个地方获取它们的代码和信息。例如：
Bluesky API 允许你执行诸如在你的网站上显示最新帖子之类的操作。
Google 地图 API 和 OpenStreetMap API 允许你将自定义地图嵌入到你的网站中，以及其他此类功能。
注意：这些 API 是高级的，我们不会在本模块中涵盖任何这些 API。你可以在我们的客户端 Web API 模块中找到更多关于它们的信息。
还有更多可用！然而，不要太兴奋。你不会在学习 JavaScript 24 小时后就能构建下一个 Facebook、Google 地图或 Instagram——首先还有很多基础知识需要涵盖。这就是你来这里的原因——让我们继续！
JavaScript 在你的页面上做什么？
在这里，我们将真正开始查看一些代码，同时，探索当你页面中运行一些 JavaScript 时实际会发生什么。
让我们简要回顾一下浏览器加载网页时发生的事情（首次在我们什么是 CSS？文章中提到）。当你在浏览器中加载网页时，你正在执行你的代码（HTML、CSS 和 JavaScript）在一个执行环境（浏览器选项卡）中。这就像一个工厂，接收原材料（代码）并输出产品（网页）。
JavaScript 的一个非常常见的用途是，通过文档对象模型 API（如上所述）动态修改 HTML 和 CSS 来更新用户界面。
浏览器安全
每个浏览器选项卡都有自己独立的用于运行代码的“存储桶”（这些存储桶在技术术语中被称为“执行环境”）——这意味着在大多数情况下，每个选项卡中的代码都是完全独立运行的，一个选项卡中的代码不能直接影响另一个选项卡中的代码——或另一个网站。这是一个很好的安全措施——如果不是这样，那么黑客可能会开始编写代码从其他网站窃取信息，以及其他此类坏事。
注意：有方法可以安全地在不同网站/选项卡之间发送代码和数据，但这些是高级技术，我们不会在本课程中介绍。
JavaScript 运行顺序
当浏览器遇到 JavaScript 代码块时，它通常按从上到下的顺序运行。这意味着你需要小心放置内容的顺序。例如，让我们回到我们在第一个示例中看到的 JavaScript 代码块
jsfunction updateName() {
const name = prompt("Enter a new name");
button.textContent = `Player 1: ${name}`;
}
const button = document.querySelector("button");
button.addEventListener("click", updateName);
在这里，我们首先定义一个名为 updateName() 的代码块（这些可重用代码块被称为函数），它要求用户输入一个新名称并将该名称插入到按钮的文本中。然后我们使用 document.querySelector 存储对按钮的引用，并使用 addEventListener 为其附加一个事件监听器，以便在点击按钮时，运行 updateName() 函数。
如果你交换 const button = ... 和 button.addEventListener(...) 行的顺序，代码将不再起作用——相反，你会在浏览器开发者控制台中收到一个错误——Uncaught ReferenceError: Cannot access 'button' before initialization。这意味着 button 对象尚未初始化，因此我们无法为其添加事件监听器。
注意：JavaScript 并非总是完全按照从上到下的顺序运行，这取决于像提升这样的行为，但目前，请记住通常需要在使用之前定义项目。这是错误的常见来源。
解释型代码与编译型代码
你可能会在编程语境中听到解释型和编译型这两个术语。在解释型语言中，代码从上到下运行，并且代码运行的结果会立即返回。你无需在浏览器运行代码之前将其转换为不同的形式。代码以程序员友好的文本形式接收，并直接从该形式进行处理。
另一方面，编译型语言在由计算机运行之前会被转换（编译）成另一种形式。例如，C/C++ 被编译成机器代码，然后由计算机运行。程序从二进制格式执行，该格式是从原始程序源代码生成的。
JavaScript 是一种轻量级的解释型编程语言。Web 浏览器接收原始文本形式的 JavaScript 代码，并直接从该文本运行脚本。从技术角度来看，大多数现代 JavaScript 解释器实际上使用一种称为即时编译的技术来提高性能；JavaScript 源代码在使用时被编译成更快、二进制格式，以便尽快运行。然而，JavaScript 仍然被认为是解释型语言，因为编译是在运行时处理的，而不是提前处理。
这两种语言都有优点，但我们现在不会讨论它们。
服务器端代码与客户端代码
你可能还会听到服务器端和客户端代码的术语，尤其是在 Web 开发中。客户端代码是在用户计算机上运行的代码——当查看网页时，网页的客户端代码被下载，然后由浏览器运行和显示。在本模块中，我们明确讨论的是客户端 JavaScript。
另一方面，服务器端代码在服务器上运行，然后其结果被下载并显示在浏览器中。流行的服务器端 Web 语言示例包括 PHP、Python、Ruby、C#，甚至是 JavaScript！JavaScript 也可以用作服务器端语言，例如在流行的 Node.js 环境中——你可以在我们的动态网站 – 服务器端编程主题中找到更多关于服务器端 JavaScript 的信息。
动态代码与静态代码
动态这个词用于描述客户端 JavaScript 和服务器端语言——它指的是根据不同情况更新网页/应用程序显示不同内容的能力，按需生成新内容。服务器端代码在服务器上动态生成新内容，例如从数据库中提取数据，而客户端 JavaScript 在客户端的浏览器中动态生成新内容，例如创建新的 HTML 表格，用从服务器请求的数据填充它，然后将表格显示在呈现给用户的网页中。这两种含义在两个上下文中略有不同，但相关联，并且两种方法（服务器端和客户端）通常协同工作。
没有动态更新内容的网页被称为静态——它总是显示相同的内容。
如何将 JavaScript 添加到你的页面？
JavaScript 以类似于 CSS 的方式应用于你的 HTML 页面。CSS 使用 元素来应用外部样式表，并使用