JavaScript简介


本教程转载自(《现代 JavaScript 教程中文版》) 源自开源书籍https://github.com/javascript-tutorial/zh.javascript.info

什么是 JavaScript?

这种编程语言我们称之为 脚本。它们可以写在 HTML 中,在页面加载的时候会自动执行。

脚本作为纯文本存在和执行。它们不需要特殊的准备或编译即可运行。

这方面,JavaScript 和 Java 有很大的区别。

为什么叫 JavaScript?

JavaScript 在刚诞生的时候,它的名字叫 “LiveScript”。但是因为当时 Java 很流行,所以决定将一种新语言定位为 Java 的“弟弟”会有助于它的流行。

随着 JavaScript 的发展,它已经变成了一门独立的语言,同时也有了自己的语言规范 ECMAScript。现在,它和 Java 之间没有任何关系。

现在,JavaScript 不仅仅是在浏览器内执行,也可以在服务端执行,甚至还能在任意搭载了 JavaScript 引擎 的设备中都可以执行。

浏览器中嵌入了 JavaScript 引擎,有时也称作 JavaScript 虚拟机。

不同的引擎有不同的“代号”,例如:

  • V8 —— Chrome 和 Opera 中的 JavaScript 引擎。
  • SpiderMonkey —— Firefox 中的 JavaScript 引擎。
  • ……还有其他一些代号,像 “Trident”,“Chakra” 用于不同版本的 IE,“ChakraCore” 用于 Microsoft Edge,“Nitro” 和 “SquirrelFish” 用于 Safari,等等。

引擎是如何工作的?

引擎很复杂,但是基本原理很简单。

  1. 引擎(通常嵌入在浏览器中)读取(“解析”)脚本。
  2. 然后将脚本转化(“编译”)为机器语言。
  3. 然后这机器语言代码快速地运行。

引擎会对流程中的每个阶段都进行优化。它甚至可以在运行时监视编译的脚本,分析数据流并根据这些进一步优化机器代码。

浏览器中的 JavaScript 能做什么?

现代的 JavaScript 是一种“安全”语言。它不提供对内存或 CPU 的底层访问,因为它最初是为浏览器创建的,不需要这些功能。

JavaScript 的能力很大程度上依赖于它执行的环境。例如:Node.js 允许 JavaScript 读写任意文件、执行网络请求等。

浏览器中的 JavaScript 可以做与网页操作、用户交互和 Web 服务器相关的所有事情。

例如,浏览器中的 JavaScript 可以完成下面这些事:

  • 在网页中插入新的 HTML,修改现有的网页内容和网页的样式。
  • 响应用户的行为,响应鼠标的点击或移动、键盘的敲击。
  • 向远程服务器发送网络请求,下载或上传文件(所谓 AJAXCOMET 技术)。
  • 获取或修改 cookie,向访问者提出问题、发送消息。
  • 记住客户端的数据(本地存储)。

浏览器中的 JavaScript 不能做什么?

为了用户的(信息)安全,在浏览器中的 JavaScript 的能力是有限的。这样主要是为了阻止邪恶的网站获得或修改用户的私人数据。

这些限制的例子有:

  • 网页中的 JavaScript 不能读、写、复制及执行用户磁盘上的文件或程序。它没有直接访问操作系统的功能。

现代浏览器允许 JavaScript 做一些文件相关的操作,但是这个操作是受到限制的。仅当用户做出特定的行为,JavaScript 才能操作这个文件。例如,把文件“拖”到浏览器中,或者通过 <input> 标签选择文件。

JavaScript 有很多方式和照相机/麦克风或者其他设备进行交互,但是这些都需要提前获得用户的授权许可。所以,启用了 JavaScript 的网页应该不会偷偷地启动网络摄像头观察你,并把你的信息发送到 美国国家安全局

  • 不同的浏览器标签页之间基本彼此不相关。有时候,也会有一些关系。例如,一个标签页通过 JavaScript 打开另外一个新的标签页。但即使在这种情况下,如果两个标签页打开的不是同一个网站(域名、协议或者端口任一不相同的网站),他们都不能够相互通信。

这就是“同源策略”。为了解决“同源策略”问题,两个标签页必须 包含一些处理这个问题的特殊的 JavaScript 代码,并均允许数据交换。本教程会讲到这部分相关的知识。

这个限制也是为了用户的信息安全。例如,用户打开的 http://anysite.com 网页的 JavaScript 肯定不能访问 http://gmail.com(另外一个标签页打开的网页)也不能从那里窃取信息。

  • JavaScript 通过互联网可以轻松地和当前网页域名的服务器进行通讯。但是从其他网站/域名的服务器中获取数据的能力是受限的。尽管这可以实现,但是需要来自远程服务器的明确协议(在 HTTP header 中)。这也是为了用户的数据安全。

JavaScript 简介 - 图1

浏览器环境外的 JavaScript 一般没有这些限制。例如服务端的 JavaScript 就没有这些限制。现代浏览器还允许安装可能会要求扩展权限的插件或扩展。

是什么使得 JavaScript 与众不同?

至少有 3 件事值得一提:

  • 和 HTML/CSS 完全的集成。
  • 使用简单的工具完成简单的任务。
  • 被所有的主流浏览器支持,并且默认开启。

满足这三条的浏览器技术也只有 JavaScript 了。

这就是为什么 JavaScript 与众不同!这也是为什么它是创建浏览器界面的最普遍的工具。

此外,JavaScript 还支持创建服务器,移动端应用程序等。

比 JavaScript “更好”的语言

不同的人喜欢不同的功能,JavaScript 的语法也不能够满足所有人的需求。

这是正常的,因为每个人的项目和需求都不一样。

所以,最近出现了很多不同的语言,这些语言在浏览器中执行之前,都会被 编译(转化)成 JavaScript。

现代化的工具使得编译速度非常快速且透明,实际上允许开发人员使用另一种语言编写代码并将其自动转换为 JavaScript。

这些编程语言的例子有:

  • CoffeeScript 是 JavaScript 的语法糖,它语法简短,明确简洁。通常使用 Ruby 的人喜欢用。
  • TypeScript 将注意力集中在增加严格的数据类型。这样就能简化开发,也能用于开发复杂的系统。TypeScript 是微软开发的。
  • Flow 也添加了数据类型,但是以一种不同的方式。由 Facebook 开发。
  • Dart 是一门独立的语言。它拥有自己的引擎用于在非浏览器环境中运行(如:手机应用),它也能被编译成 JavaScript 。由 Google 开发。

还有很多其他的语言。当然,即使我们在使用这些语言,我们也需要知道 JavaScript。因为学习 JavaScript 可以让我们真正明白我们自己在做什么。

总结

  • JavaScript 最开始是为浏览器设计的一门语言,但是现在也被用于很多其他的环境。
  • 现在,JavaScript 是一门在浏览器中使用最广、并且能够很好集成 HTML/CSS 的语言。
  • 有很多其他的语言可以被编译成 JavaScript,这些语言还提供了更多的功能。最好还是了解一下这些语言,至少在掌握了 JavaScript 之后简单地看一下。

规范

ECMA-262 规范包含了大部分深入的、详细的、规范化的关于 JavaScript 的信息。这份规范明确地定义了这门语言。

但正因其规范化,对于新手来说难以理解。所以如果你需要知道关于这门语言细节最权威的信息来源,这份规范就很适合你(去阅读)。但是它并不适合日常使用。

手册

  • MDN(Mozilla)JavaScript 索引是一本带有用例和其他信息的手册。它是一个获取关于个别语言函数、方法等深入信息的很好的来源。

你可以在 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference 找到这本手册。

虽然,利用互联网搜索通常是最好的选择。只需在查询时输入“MDN [关键字]”,例如 https://google.com/search?q=MDN+parseInt 搜索 parseInt 函数。

  • MSDN —— 一本微软的手册,它包含大量的信息,包括 JavaScript(在里面经常被写成 JScript)。如果有人需要关于 Internet Explorer 的规范细节,最好去看:http://msdn.microsoft.com/。

我们还可以在使用互联网搜索时使用如 “RegExp MSDN” 或 “RegExp MSDN jscript” 这样的词条。

兼容性表

JavaScript 还是一门还在发展中的语言,经常会添加一些新的功能。

如果想要获得一些关于浏览器和其他引擎的兼容性信息,请看:

  • http://caniuse.com —— 每个功能都列有一个支持信息表格,例如想看哪个引擎支持现代加密(cryptography)函数:http://caniuse.com/#feat=cryptography。
  • https://kangax.github.io/compat-table —— 一份列有语言功能以及引擎是否支持这些功能的表格。

所有这些资源在实际开发中都有用武之地,因为他们包含了语言细节以及它们被支持的程度等非常有价值的信息。

IDE

IDE(集成开发环境)是用于管理整个项目具有强大功能的编辑器。顾名思义,它不仅仅是一个编辑器,而且还是个完整的开发环境。

IDE 加载项目(通常包含很多文件),并且允许在不同文件之间导航(navigation)。IDE 还提供基于整个项目(不仅仅是打开的文件)的自动补全功能,集成版本控制(如 git)、集成测试环境等一些其他“项目层面”的东西。

如果你还没考虑好选哪一款 IDE,可以考虑下面两个:

对于 Windows 系统来说,也有个叫 “Visual Studio” 的 IDE,请不要跟 “Visual Studio Code” 混淆。“Visual Studio” 是一个收费的、强大的 Windows 专用编辑器,它十分适合于 .NET 开发。用它进行 JavaScript 开发也不错。“Visual Studio” 有个免费的版本 Visual Studio Community

大多数 IDE 是收费的,但是他们都可以试用。购买 IDE 的费用对于一名合格的程序员的薪水来说,肯定算不了什么,所以去选一个对你来说最好的吧。

轻量编辑器

“轻量编辑器”没有 IDE 功能那么强大,但是他们一般很快、优雅而且简单。

“轻量编辑器”主要用于立即打开编辑一个文件。

“轻量编辑器”和 IDE 最大的区别是,IDE 一般在项目中使用,这也就意味着在开启的时候要加载很多数据,如果需要的话,在使用的过程中还会分析项目的结构等。如果我们只需要编辑一个文件,那么“轻量编辑器”会更快。

实际上,“轻量编辑器”一般都有各种各样的插件,这些插件可以做目录级(directory-level)的语法分析和补全代码。所以“轻量编辑器”和 IDE 也没有严格的界限。

下面是一些值得你关注的“轻量编辑器”:

通常,开发者倾向于使用 Chrome 或 Firefox 进行开发,因为它们有最好的开发者工具。一些其他的浏览器也提供开发者工具,有时还具有一些特殊的功能,通常它们都是在追赶 Chrome 或 Firefox。所以大多数人都有“最喜欢”的浏览器,当遇到某个浏览器独有的问题的时候,人们就会切换到其他的浏览器。

就像这样:

开发者控制台 - 图1