Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. JavaScript
Code

JavaScript简介

by
Difficulty:BeginnerLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Wentao Wang (王文涛) (you can also view the original English article)

简单地说JavaScript在Web开发中日益重要并不能真正表达JavaScript的重要性。 事实上,几年前就有一位著名的程序员叫Jeff Atwood,他发明了埃特伍德定律内容是

凡是可以用JavaScript写的应用,最终都会用JavaScript来写。

在本文写作时,JavaScript框架和库可以说已经铺天盖地了,让人眼花缭乱。初学者就更别提了。

我知道,这个网站中的很多内容都面向的是有Web开发经验的人。 然而这些人却并非本文的目标读者。

相反,这篇文章是写给那些从未写过一行JavaScript代码又想知道它到底怎么样的人看的。 此外,我们还想介绍如何使用它,以及用它能干什么。

简而言之,如果你是专业程序员,这篇文章就不用看了;如果你对JavaScript感到好奇却不知从何下手,那么本教程将为你指明正确的方向。

那我们就开始吧。

JavaScript之定义

你大概早就听说JavaScript是"一门客户端脚本语言",但还可以有另一种说法,那就是它是一门运行在网页浏览器中的程序语言。

而维基百科将其定义为

JavaScript是一种高级动态无类型的解释型程序语言。 它已经由ECMAScript语言规范标准化了。

上述说法都没错 (只不过复杂度不同),只是还要补充一点,JavaScript其实是可以运行在服务器端的。 不过,这超出了本文的范围。 现在,我们先谈谈前面几点,服务器端JavaScript留到本文后面部分再讨论。

  • 高级语言 说一门程序语言是高级语言,指的是我们在编程时无需知道底层计算机的更多细节。 你不需要管理内存,不需要知道处理器类型,也不需要处理指针之类的问题 (比如C语言和汇编语言中就有)
  • 动态语言 动态语言支持在程序运行时通过新的代码或引入新对象来扩展语言功能 (比如Post对象),而静态语言则需要编译一下才能做到。 这是JavaScript一个强大的功能。
  • 无类型语言 如果你有编程经验,你肯定遇到过某些语言要求你在声明变量时必须指定变量类型。 比如,你有一个存储string或一个boolean值的变量。 在JavaScript中,这是不需要的。 你在声明一个变量时,只需要用var关键字就够了。
  • 解释型语言 对于编译型语言,你写的代码要转化为可执行二进制,然后才能发布给别人。 在Windows操作系统中,这些可执行二进制文件是EXE文件。 在OS X中,则为App Store中下载的程序,或你拖到Applications目录中的那些程序。 而JavaScript是解释型的,意思是它不需要编译器。 因为,代码是解释执行的 (和PHP一样),在代码和计算机指令之间有一种中间层软件,称为解释器,负责它们之间的翻译工作。
  • 标准化语言 JavaScript标准化的 (它的官方名称是ECMAScript),意思是只要实现了它的标准,浏览器们就能提供相同的功能。 如果它不标准化,那么Chrome就可能会提供Edge不支持的功能,反之亦然。

说了该语言的一些特点之后,我们就可以开始讨论它的某些具体内容了。

前面讲的固然重要,但知道一门语言是如何工作的也同样关键 (特别是当你已经用过其它语言时尤其如此),这样你就不会无端猜测它可能应该的运行方式。

因而,我会介绍它实际上是如何工作的,然后你就可以开始写代码并完全理解你所写的代码了。

关于JavaScript语言

除了前面说的那些,JavaScript还是一种面向对象的程序语言,但可能和你通常见到的有所差别 (如果你已经用过其它的面向对象程序语言的话)。

因为JavaScript实际上是一种原型语言。 意思是,JavaScript中的所有对象,比如String,都是基于原型的。

作为开发者,我们就可以通过使用原型继承来为一个对象添加新的功能:

基于原型的编程是面向对象编程的一种,它的重用行为 (也称为继承) 是通过克隆已有对象的过程来实现的,这些被克隆的对象即为其原型。

如果你从来没有用过面向对象程序语言,那我觉得你反而会有优势,因为你在理解其原理时无需从一个概念模型切换到另外一个。

当然,如果你确实已经用过这些不同类型的语言,原型继承和传统继承之间的区别也是值得去了解的。

  • 传统继承中,我们开发者常常会写一个类。 从这一个类可以创建多个对象。 此外,我们还可以从这个类继承出另外一个类,然后在为这些类创建一些实例。 在这里,子类与它们的基类共享代码。 所以,当你创建一个子类的实例时,你同时得到了子类和父类的功能。
  • 原型继承中,并不存在这样的类。 相反,你只需定义一个对象,然后在需要的时候添加任意的功能。 如果你想为一个已有的对象添加新功能,你可以将其加到这个对象的原型中去。 如果你想调用一个对象 (比如Number) 的一个方法,它首先会查看此对象是否包含这个方法。 如果没找到,它会沿着原型链向上,直到找到此方法 (也许基对象Object中有这个方法)。

最后,我要提一下也许是最重要的一件事。当你通过原型修改一个对象时,所有使用此对象的用户都可访问到这个修改后内容 (至少在当前上下文中是如此)。

这个功能很强大也很酷,但你若还不习惯这种环境,思维方式大概还需稍微转变一下。

如何使用JavaScript?

若问如何实际用上JavaScript,那首先要清楚你的目标是什么。 目前而言,用上JavaScript指的是你要在网页上"发生点什么"。 这意味着要控制某些行为。

比如添加一个元素,删除 (或隐藏) 一个元素,诸如此类。 然后,网络触发了一下,而浏览器向服务器异步发出请求,处理服务器响应,然后在网页上作出相应的状态变化。

所有这个过程都是通过Ajax实现的。 你在阅读本文时,大概对这个词并不陌生。 不然,你可以将其视为一种运行方式,通过这种方式,JavaScript可以在无需重载网页的情况下向服务器发送请求并处理响应。

但JavaScript已经远比这样的功能更为成熟了。

Google开发了一种高度复杂的称为V8的JavaScript解析引擎,而其它浏览器也在尽量提供最优的JavaScript性能。

The landing page for Chrome V8 Googles JavaScript Engine

事实上,我们可以用诸如Node.js的工具来在服务端编写JavaScript代码。 此外,我们甚至可以在移动设备上构建和运行混合应用。 即我们可以用JavaScript同时为我们的手机,平板,以及桌面计算机提供解决方案。

The homepage for Nodejs a runtime engine for writing JavaScript on the server

而这一切都出自于一门曾经还只是用于屏幕动画的语言。 说这么多只是告诉你,如果你刚接触JavaScript,不要太小看它。

“我对这门语言中能得到什么呢?”

前面提到的这些听起来有意思,了解可以做什么也挺有趣,但从纯粹实践的角度,我们在JavaScript这门语言提供了一些什么东西呢?

不断你对这门语言一无所知,还是想从其它背景转过来学习一门新的语言,你大概已经被吊足了胃口,想要看看它到底能提供什么语言特性。

虽然我们已经提到这门语言的内部运行方式,但却没说它里面到底有些什么东西,更别提它的API了。 不过老实说,整个API和这门语言的内置函数本身就可以写一篇文章了。

但如果仅仅是它的内置对象呢? 我们倒是可以在结束文章之前回顾一下:

  • Object: 基对象,其它所有对象都可以继承它的一些基本功能。
  • Function。 因为JavaScript确实是面向对象的,这意味着所有一切都是对象,包括函数。 所以,当你创建一个新函数时,你得到的是一个具有Function类型的对象的引用。 函数有一些可以让你在运行时使用的属性 (比如为其传入参数)。
  • 布尔对象 (Boolean) 这种类型的对象用于对一个布尔值进行封装。 在很多语言中,布尔值都是一种数据类型,可以取值为truefalse。 在JavaScript中,你仍然可以用布尔值,只不过应该把它们理解为对象。
  • 数字对象 (Number) 在很多程序语言中,都有一些基本类型,比如floatintdouble等。 而在JavaScript中,只有一种数字类型,自然,它也是对象。
  • 日期对象 (Date) 编程中日期的处理从来不是一件好玩的事,特别是涉及到时区时尤其如此。 我不敢说JavaScript能解决所有时区相关的问题,但它确实可以让你更容易地处理日期 (从年月日到时分秒的所有处理工作)。
  • 字符串对象 (String) 几乎所有程序语言都有字符串这种基本类型。 JavaScript自然也不例外,它的字符串对象有一些独有的属性。

你需要记得的是,上述所有类型都是各自具有不同属性 (和函数) 的对象。 但并不是说你一定要用到构造器才能实例化你的变量。 比如,你可以用如下方式来生成字符串、布尔值、和数字:

然而,它们本质上还是对象。

更准确地讲,它们是基本对象。 除此之外,还有更高级的对象值得介绍,特别是错误处理,利用数组 (Array) 实现的对象集合,诸如此类。

如果你对这些仍然很感兴趣,我强烈推荐你看一看Mozilla Developer Network中的这个页面

有哪些库和框架呢?

如果你紧盯JavaScript社区中的各种框架、库、以及其他工具,你肯定对这个社区的生机勃勃留下深刻的印象。

当然,本文主要面向JavaScript初学者。 现在,既然你已经对这门语言的结构和运行方式有所了解,是时候看看有哪些库和框架可以帮助你进行网页或应用开发了。

  • jQuery是一个提供了跨浏览器API的JavaScript库,它可以让你"写得更少,做得更多"。
  • Angular是一个JavaScript框架,它用于帮助构建单页面应用。
  • React是一个用过构建用户界面的JavaScript库。
  • Backbone通过模型,集合和视图这样的结构来构建网页应用。
  • Ember.js是另一个用于"生成复杂网页应用"的框架。
  • 还有很多很多。

远非一个完整的清单,而仅仅是一个开头,可为正在熟悉JavaScript者提供更多选择,尽管你可能用不上。

当你开始学习JavaScript,并用上其中一些工具,你会发现它们是多么流行,甚至你最喜爱的应用就用到了它们。

学习JavaScript

你大概已经意识到了,Envato的唯一目标就是"向全世界亿万读者教授技艺"。 所以,我们这篇文章如果不包括一些其他更流行的JavaScript文章或教程,那就太不像样了。

所有这些资源都是JavaScript入门的理想材料,把它们加到你的网页开发工具箱中去吧。

总结

一提到网页开发,讲得很可能就是JavaScript。 虽然你可能不打算用所谓的"平凡的JavaScript",而倾向于其他一些软件库或框架,但JavaScript无疑是几乎每一个网页开发者应该了解的语言。

当然,不是每个人都做前端开发。 有些纯粹是服务器端开发者;有些则只做前端开发。 不过,我们都需要合作起来,以确保应用程序的不同部分能够相互通讯。

为实现这一点,我们至少应该理解数据是如何通过JavaScript从客户端发送到服务器端的,以及服务器端处理后是如何返还给客户端的。

不要因为你不是一个前端开发者,就轻易对JavaScript下结论。 有可能出现的情况是,你需要将别人基于JavaScript的工作组合起来。

诚然,本文只是一个开头。 我一开始已经说过,本文的目的是解释什么是JavaScript,如何用它,以及对它能有什么期望,主要针对那些初学者。

如果你喜欢这篇文章,你还可以在我的主页上找到其他一些课程和教程。如果你感兴趣,还可以在我的博客上看到一些关于WordPress和WordPress开发的文章。

其他资源

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.