什么是 JavaScript？
概述：JavaScript 入门
下一步
欢迎来到 MDN JavaScript 初学者课程！ 在本文中，我们将从更高的层次了解 JavaScript，回答诸如“它是什么？”和“你能用它做什么？”之类的问题，并确保您对 JavaScript 的用途感到满意。
先决条件
对 HTML 和 CSS 的基本了解。
目标
熟悉 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 来实现动态行为
jsconst button = document.querySelector("button");
button.addEventListener("click", updateName);
function updateName() {
const name = prompt("Enter a new name");
button.textContent = `Player 1: ${name}`;
}
尝试单击文本标签的最后一个版本，看看会发生什么（还要注意，您可以在 GitHub 上找到此演示——查看 源代码，或 在线运行）！
JavaScript 可以做的不仅仅是这些——让我们更详细地探讨一下。
它到底能做什么？核心客户端 JavaScript 语言包含一些常见的编程功能，这些功能允许您执行以下操作
将有用的值存储在变量中。例如，在上面的示例中，我们要求输入一个新的姓名，然后将该姓名存储在名为 name 的变量中。
对文本片段（在编程中称为“字符串”）进行操作。在上面的示例中，我们将字符串“玩家 1：”与 name 变量连接起来，创建完整的文本标签，例如“玩家 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）允许您对多媒体做一些非常有趣的事情，例如在网页中播放音频和视频，或者从您的网络摄像头获取视频并在其他人的计算机上显示它（尝试我们简单的 Snapshot 演示，了解一下）。
**注意：** 上述许多演示在较旧的浏览器中将无法正常工作——在进行实验时，最好使用现代浏览器（如 Firefox、Chrome、Edge 或 Opera）来运行您的代码。在您更接近交付生产代码时（即真正的客户将使用的真实代码），您将需要更详细地考虑 跨浏览器测试。
**第三方 API** 默认情况下不会内置到浏览器中，您通常需要从 Web 上的某个地方获取它们的代码和信息。例如
Twitter API 允许您执行诸如在您的网站上显示您最新的推文之类的操作。
Google 地图 API 和 OpenStreetMap API 允许您将自定义地图嵌入您的网站，以及其他此类功能。
**注意：** 这些 API 很高级，我们不会在本模块中介绍任何这些 API。您可以在我们的 客户端 Web API 模块 中找到更多有关这些 API 的信息。
还有更多可用！但是，现在不要太兴奋。在学习 JavaScript 24 小时后，您将无法构建下一个 Facebook、Google 地图或 Instagram——有很多基础知识需要首先学习。这就是您来到这里的原因——让我们继续吧！
JavaScript 在您的页面上做什么？在这里，我们将开始实际查看一些代码，并在查看代码的同时，探索在页面中运行一些 JavaScript 时实际发生了什么。
让我们简要回顾一下在浏览器中加载网页时发生的事情（首先在我们的 CSS 如何工作 文章中讨论）。当您在浏览器中加载网页时，您是在执行环境（浏览器选项卡）中运行您的代码（HTML、CSS 和 JavaScript）。这就像一个工厂，它接收原材料（代码）并输出产品（网页）。
JavaScript 的一个非常常见的用途是通过文档对象模型 API（如上所述）动态地修改 HTML 和 CSS 以更新用户界面。
浏览器安全每个浏览器选项卡都有自己的单独区域来运行代码（在技术术语中，这些区域称为“执行环境”）——这意味着在大多数情况下，每个选项卡中的代码都是完全独立运行的，并且一个选项卡中的代码不能直接影响另一个选项卡中的代码——或另一个网站上的代码。这是一个很好的安全措施——如果没有这个，海盗就可以开始编写代码来窃取其他网站的信息，以及其他此类坏事。
**注意：** 有些方法可以以安全的方式在不同的网站/选项卡之间发送代码和数据，但这些都是我们不会在本课程中介绍的高级技术。
JavaScript 运行顺序当浏览器遇到一段 JavaScript 代码时，它通常会按顺序从上到下运行它。这意味着您需要小心放置代码的顺序。例如，让我们回到我们第一个示例中看到的 JavaScript 代码块
jsconst button = document.querySelector("button");
button.addEventListener("click", updateName);
function updateName() {
const name = prompt("Enter a new name");
button.textContent = `Player 1: ${name}`;
}
在这里，我们首先使用 document.querySelector 选择一个按钮，然后使用 addEventListener 为其附加一个事件监听器，以便当单击按钮时，运行 updateName() 代码块（第 5-8 行）。updateName() 代码块（这些类型的可重用代码块称为“函数”）询问用户一个新的姓名，然后将该姓名插入按钮文本中以更新显示。
如果您交换前两行代码的顺序，它将不再起作用——相反，您将在 浏览器开发者控制台 中收到一个错误——未捕获的 ReferenceError：在初始化之前无法访问 'button'。这意味着 button 对象尚未初始化，因此我们无法为其添加事件监听器。
**注意：** 这是一个非常常见的错误——您需要确保代码中引用的对象在您尝试对它们执行操作之前存在。
解释型代码与编译型代码您可能会在编程上下文中听到 **解释型** 和 **编译型** 术语。在解释型语言中，代码从上到下运行，运行代码的结果立即返回。您不必将代码转换为另一种形式，然后浏览器才能运行它。代码以程序员友好的文本形式接收，并直接从该形式进行处理。
另一方面，编译型语言在由计算机运行之前会被转换为另一种形式（编译）。例如，C/C++ 会被编译成机器代码，然后由计算机运行。程序从二进制格式执行，该二进制格式是从原始程序源代码生成的。
JavaScript 是一种轻量级的解释型编程语言。Web 浏览器以其原始文本形式接收 JavaScript 代码，并从该形式运行脚本。从技术角度讲，大多数现代 JavaScript 解释器实际上使用一种称为 **即时编译** 的技术来提高性能；JavaScript 源代码在脚本使用时被编译成更快的二进制格式，以便能够尽快运行。但是，JavaScript 仍然被认为是一种解释型语言，因为编译是在运行时处理的，而不是在运行之前处理的。
两种类型的语言都有优点，但我们现在不讨论它们。
服务器端代码与客户端代码你可能还会听到服务器端和客户端代码这两个术语，尤其是在 Web 开发的语境中。客户端代码是在用户计算机上运行的代码——当浏览网页时，网页的客户端代码会被下载，然后由浏览器运行和显示。在本模块中，我们明确地讨论的是客户端 JavaScript。
另一方面，服务器端代码在服务器上运行，然后它的结果被下载并在浏览器中显示。流行的服务器端 Web 语言的示例包括 PHP、Python、Ruby、ASP.NET，甚至 JavaScript！JavaScript 也可以用作服务器端语言，例如在流行的 Node.js 环境中——你可以在我们的动态网站 – 服务器端编程主题中了解更多关于服务器端 JavaScript 的信息。
动态代码与静态代码动态这个词用于描述客户端 JavaScript 和服务器端语言——它指的是在不同情况下更新网页/应用程序显示以显示不同内容的能力，根据需要生成新内容。服务器端代码动态地在服务器上生成新内容，例如从数据库中提取数据，而客户端 JavaScript 动态地在客户端的浏览器中生成新内容，例如创建一个新的 HTML 表格，用从服务器请求的数据填充它，然后在显示给用户的网页中显示表格。这两个上下文中的含义略有不同，但相关联，并且两种方法（服务器端和客户端）通常协同工作。
没有动态更新内容的网页被称为静态——它总是显示相同的内容。
如何将 JavaScript 添加到您的页面？JavaScript 应用于你的 HTML 页面，类似于 CSS 的应用方式。CSS 使用元素应用外部样式表，使用