资讯专栏INFORMATION COLUMN

【转】什么是JavaScript

rockswang / 2585人阅读

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

转自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] 和