资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/【转】什么是JavaScript

【转】什么是JavaScript

rockswang / 2473人阅读

摘要：运行代码以响应在网页中发生的特定事件。以及更多然而更令人兴奋的是建立在语言的核心之上的功能。这就是为什么谷歌地图可以找到你的位置，而且标示在地图上。谷歌地图允许你去嵌入定制的地图到你的网站，和其他的功能。

转自mdn学习网站-什么是JavaScript

什么是JavaScript？

欢迎来到 MDN JavaScript 初学者的课程！ 在第一篇文章中，我们将会站在一定的高度来俯看 JavaScript，回答一些像“它是什么？”和“它能做什么？”的问题 。并确保你熟悉 JavaScript 的用途。

一个高水平的定义

JavaScript 是允许你在网页中实现复杂事情的一门编程语言 —— 每次当你浏览网页时不只是显示静态信息—— 显示即时更新的内容， 或者交互式的地图，或 2D/3D 图形动画，又或者自动播放视频等，你可以确信，JavaScript 参与其中。这是 Web技术的三层蛋糕标准:

  • HTML是一种标记语言，用来结构化我们的网页内容和赋予内容含义，例如定义段落、标题、和数据表,或在页面中嵌入图片和视频。
  • CSS 是一种样式规则语言，我们将样式应用于我们的 HTML 内容， 例如设置背景颜色和字体，在多个列种布局我们的内容。
  • JavaScript 是一种编程语言，允许你创建动态更新的内容，控制多媒体，图像动画，和一些其他的东西。好吧，虽然不是一切，但是它的神奇之处是你能够用几行JavaScript代码就能实现。

这三个层次规矩地建立在彼此之上。让我们用一个简单的文本标签作为例子。我们可以用 HTML 来标记它，以赋予它结构和目的：

Player 1: Chris

然后我们可以加上一点 CSS 来使它看起来更好：

p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor:pointer;
}

而最后，我们可以加上一些 JavaScript 来实现动态行为：

var para = document.querySelector("p");

para.addEventListener("click", updateName);

function updateName() {
  var name = prompt("Enter a new name");
  para.textContent = "Player 1: " + name;
}

尝试点击文本标签，观察会发生什么（同时注意，你可以在 GitHub 上找到这个演示—— 源代码，或者 实时运行）！

JavaScript 可以做比这更多的东西——让我们详细探索它可以做些什么。

所以它_实际上_可以做什么？

JavaScript 语言的核心包含一些普遍的编程特点，以让你可以做到如下的事情：

  • 在变量中储存有用的值。以上面的演示做例子，我们请求输入一个新的名字，然后把那个名字储存到一个叫 name 的变量.
  • 对一段文本（在编程中被称为“字符串”）进行操作。在上面的例子中，我们取出字符串 "Player 1: "，然后把它和 name 变量连结起来，创造出完整的文本标签，例："Player 1: Chris"。
  • 运行代码以响应在网页中发生的特定事件。在上述的例子中，我们用了一个 click 事件来检测按钮什么时候被点击，然后运行更新文本标签的代码。
  • 以及更多！

然而更令人兴奋的是建立在 JavaScript 语言的核心之上的功能。在你的 JavaScript 代码里，被称为应用程序编程接口 [Application Programming Interfaces (APIs) ] 的功能会提供额外的超能力给你使用。

APIs 是已经建立好的一套代码组件，目的是让开发者可以实现除此之外很难甚至不可能实现的程序。它们的作用就像是已经制作好的家具套件对家居建设的作用一样——从一堆已经切好的木板开始组装一个书柜，显然比自己设计，寻找合适的木材，裁切至合适的大小和形状，找到合适大小的螺丝钉，然后组装成一个书柜要简单得多。

它们 (APIs) 通常分成两个分类。

浏览器 APIs (Browser APIs) 已经安装在你的网页浏览器中，而且能够从周围的计算机环境中揭露数据，或者做有用的复杂事情。举个例子：

  • 文档对象模型 API [DOM (Document Object Model) API] 允许你操作 HTML 和 CSS，创建，移除和修改 HTML，动态地应用新的样式到你的页面，等等。比如说每次你在一个页面里看到一个弹出窗口，或者显示一些新的内容（像我们在上面的简单演示中看到那样），这就是 DOM 在运作。

  • 地理定位 API [Geolocation API] 获取地理信息。这就是为什么谷歌地图 [Google Maps] 可以找到你的位置，而且标示在地图上。

  • 画布 [Canvas] 和 WebGL APIs 允许你创建生动的 2D 和 3D 图像。人们正运用这些网页技术进行一些令人惊叹的事情——比如说 Chrome Experiments 和 webglsamples。

  • 音像和影像 APIs [Audio and Video APIs]，像 HTMLMediaElement 和 WebRTC 允许你运用多媒体去做一些非常有趣的事情，比如在网页中播放音像和影像，或者从你的网页摄像头中获取获取录像，然后在其他人的电脑上展示（尝试我们的简单快照演示 [Snapshot demo] 以理解这个概念）。

Note: 上述的很多演示都不能在旧的浏览器中运行——当进行实验时，在现代浏览器，像 Firefox, Chrome, Edge 或者 Opera，中运行会是一个好的想法。当你接近交付产品代码时，你会需要更深入地去考虑跨平台测试 [cross browser testing]（例：现实客户会使用的实际代码）。

第三方 APIs (Third party APIs) 默认是没有安装到浏览器中的，而你通常需要从网络上的某些地方取得它们的代码和信息。举个例子：

  • 推特 API [Twitter API] 允许你做一些像是在你的网站上展示你的最新推送之类的事情。

  • 谷歌地图 API [Google Maps API] 允许你去嵌入定制的地图到你的网站，和其他的功能。

Note: 这些 APIs 是高级的，而我们不会在课程中涉及任何的这些 APIs，但是如果你想了解更多，上述的链接提供延展的文档供参考。

这里还有更多可用的东西！然而，不要这么快就感到太过兴奋。你不可能只通过 24 小时的 JavaScript 学习，就能够构建下一个 Facebook, Google Maps 或者 Instagram——这里有很多的基础需要优先覆盖。而这就是为什么你在这里——让我们继续前进！

JavaScript 在你的页面上做什么？

在这我们会开始确实地查看一些代码，而在这样做的同时，探索当你在你的页面上运行 JavaScript 的时候实际发生了什么。

让我们简单地回顾当你在浏览器中读取一个网页时发生什么（在文章 How CSS works 中第一次谈及到）。 当你在浏览器中读取一个网页，你在一个实行环境（浏览器标签）中运行你的代码（HTML, CSS 和 JavaScript）。这就像是一个工厂，获取原材料（代码）然后出产一个产品（网页）。

在 HTML 和 CSS 已经被集合和组装成一个网页后，浏览器的 JavaScript 引擎执行 JavaScript。这保证了当 JavaScript 开始运行时，网页的结构和样式已经在该出现的地方了。

这是一个好事情，正如 JavaScript 的普遍用处是通过 DOM API（如之前提及的那样）动态地修改 HTML 和 CSS 来更新用户交界面。如果 JavaScript 在 HTML 和 CSS 加载完成之前加载运行，那么会发生错误。

浏览器安全

每个浏览器标签本身就是一个用来运行代码的分离的容器（这些容器用专业术语称为“运行环境”）——这意味着在大多数情况中，每个标签中的代码是完全分离地运行，而且在一个标签中的代码不能直接影响在另一个标签中的代码——或者在另一个网站中的。这是一个好的安全措施——如果不是这样的话，那么海盗们就可以开始写从其他网站偷取信息的代码，和其他像这样的坏事。

Note: 这里有安全的方式去在不同网站/标签中传送代码和数据，但这些方法是高级的技术，而我们不会在这门课里覆盖这些。

JavaScript 运行顺序

当浏览器遇到一块 JavaScript 代码时，它通常会按顺序运行这代码块，从上往下。这意味着你需要注意你放置代码的顺序。举个例子，让我们回到我们在第一个例子中看到的 JavaScript 代码块：

var para = document.querySelector("p");

para.addEventListener("click", updateName);

function updateName() {
  var name = prompt("Enter a new name");
  para.textContent = "Player 1: " + name;
}

在这里我们正选定一个文本段落 (line 1)，然后给它附上一个事件监听器 (line 3) 使得当这个段落被点击时，updateName() 代码块 (lines 5–8) 会被运行。updateName() 代码块（这类可以重复使用的代码块被称为“函数”）向用户请求一个新的名字，然后把这个名字插入到段落中以更新显示。

如果你互换了代码里最初两行的顺序，它将不会工作——取而代之的是，你会在浏览器的开发者控制台中得到一个错误——TypeError: para is undefined [类型错误：para没有被定义]。这意味着 para 对象还不存在，所以我们不能为它增添一个事件监听器。

Note: 这是一个很常见的错误——你需要注意在尝试对你的代码中引用的对象进行操作前，它已经存在。

解释代码 vs 编译代码

在编程环境中，你或许听说过这两个术语 解释 [interpreted] 和 编译 [compiled]。JavaScript 是一个解释语言——代码从上到下运行，而运行的结果会马上被返回。在浏览器运行代码前，你不必先把它转化为其他形式。

另一方面来说，编译语言则需要在运行前转化为另一种形式。比如说 C/C++ 则要先被编译成汇编语言，然后再由电脑运行。

两种方式都有不同的优势，然而就目前而言，我们不会谈论这些。

服务器端代码 vs 客户端代码

你或许也听说过 服务器端 [server-side] 和 客户端 [client-side] 代码这两个术语，尤其是在网页开发的语境中。客户端代码是在用户的电脑上运行的代码——当浏览一个网页时，这个网页的客户端代码就会被下载，然后由浏览器来运行和展示。在这个 JavaScript 模块，我们将会明确地探讨 客户端 JavaScript [client-side JavaScript]。

在另一方面，服务器端代码则在服务器上运行，然后它的结果会由浏览器进行下载和展示。流行的服务器端网页语言包含以下几个例子：PHP, Python, Ruby, ASP.NET 和 JavaScript！JavaScript 同时也能用作服务器端语言，比如说在流行的 Node.js 环境中——你可以在我们的 动态网页 - 服务器端编程 [Dynamic Websites – Server-side programming] 主题中找到更多关于服务器端 JavaScript 的知识。

动态 [dynamic] 这个词被用来描述客户端 JavaScript 和服务器端语言——它指的是能更新网页/应用的内容以在不同环境下显示不同事物，当有需要时产生新内容的能力。服务器端代码会动态地在服务器上产生新的内容，比如说从数据库中提取信息。反之，客户端 JavaScript则在用户的浏览器中动态地生成新的内容，比如说创建一个新的 HTML 表格，从中插入从服务器请求到的数据，然后在已经向用户展示了的网页中显示这个表格。在这两个语境中，动态的意义有细微的不同，但是有联系，而且两种方法（服务器端和客户端）通常是在一起工作的。

一个没有动态更新内容的网页被指作 静态 [static] ——它只会一直显示一样的内容。

怎样向你的页面添加 JavaScript？

JavaScript 以一种近似于 CSS 的方式应用到你的 HTML 页面中。尽管 CSS 使用 元素去应用外部的样式表 [stylesheet] 和