你好,JavaScript
在本章中,我们将介绍JavaScript语言,以及搭建一个编程环境。我们还将开始一些编程,并用JavaScript编写几个程序!
你还没有这本书的书签呢。
在本章中,我们将介绍JavaScript语言,以及搭建一个编程环境。我们还将开始一些编程,并用JavaScript编写几个程序!
以下是本章的内容:
什么是编程?
JavaScript的历史
用JavaScript编程所需的工具
安装node . js
控制台中的JavaScript
你好,世界!第一个JavaScript程序
web浏览器中的JavaScript
优美的退化和渐进的增强
一个更复杂的JavaScript程序
项目-我们将开始一个测试项目,将开发贯穿全书
编程就是让电脑做你想做的事。计算机程序基本上是告诉计算机如何执行一项任务的一系列指令。然而,不幸的是,计算机和我们说的语言不同——它们只使用1和0。第一台计算机是用穿孔卡片编程的,有一个孔代表1,没有孔代表0。
第一个计算机程序是用机器代码而且汇编语言.这些都是低级编程语言它们与计算机硬件紧密相关。这意味着它们可能是很难编程的语言,因为它们涉及编写与计算机架构紧密相关的抽象代码。然而,如果速度非常重要,那么用机器代码或汇编语言编写可能是最好的选择。
高级编程语言,另一方面,允许使用抽象,使代码更易于人类阅读和编写。程序是用C、c++或Java等语言编写的,然后编译成机器代码并执行。使用这些语言编写的程序非常快,使得高级语言适合编写游戏和专业商业软件,在这些地方速度是很重要的。大多数原生应用程序也是用高级语言编写的。
脚本语言也是高级的,但是它们是解释的,这意味着它们在运行时被翻译成机器代码。这通常使它们比编译语言慢,尽管解释器变得越来越复杂,并且越来越模糊编译语言和解释语言之间的界限。
我们将在这本书中学习的语言是JavaScript,通常被称为web语言。
几乎所有的网络浏览器都可以运行JavaScript,使其成为世界上最流行的编程语言之一。它的入门门槛很低——你所需要的只是一个文本编辑器和一个网络浏览器。虽然JavaScript很容易上手,但它可能是一种很难掌握的语言,因为它有一些独特的特性和有趣的怪癖。但是,一旦掌握了它,您就会发现它是一种非常灵活和富有表现力的语言,可以创建一些强大的应用程序。
JavaScript是一种高级脚本语言,在运行时进行解释和编译。这意味着它需要一个负责解释和运行程序的引擎。最常见的JavaScript引擎存在于Firefox、Chrome或Safari等浏览器中,尽管JavaScript可以在没有浏览器的情况下使用谷歌V8等引擎运行。许多现代JavaScript引擎使用Just-In-Time (JIT)解释过程,这大大加快了编译速度,使程序运行得更快。
JavaScript也是一种动态语言,因此程序的元素可以在运行时改变,它可以在运行时在后台做很多事情(比如类型检查,我们将在后面介绍)——像c++这样的编译语言会在编译时做的事情。
万维网最初是一堆由超链接链接起来的页面。用户很快就想与这些页面进行更多的交互,因此Netscape(早期的浏览器供应商)要求他们的员工Brendan Eich为他们的Navigator浏览器开发一种新的语言。这需要迅速完成,因为当时网景和微软之间的竞争非常激烈。
Eich成功地在10天内创建了一个原型脚本语言。为此,他从其他语言中借鉴了各种元素,包括AWK、Java、Perl、Scheme、HyperTalk和Self。这是一个令人印象深刻的壮举,但在急于率先推向市场的过程中,语言中出现了许多从未完全解决的怪癖和错误。
这种新语言最初被称为Mocha,但后来被改为LiveScript,然后又被匆忙地重新命名为JavaScript,这样它就可以从Sun Microsystem的Java语言吸引的宣传中受益。这个名字经常引起一些混淆,因为JavaScript通常被认为是Java的轻版本。然而,这两种语言并不相关——尽管JavaScript在语法上与Java有相似之处。
JavaScript于1995年在Netscape的Navigator浏览器的第2版中首次亮相。第二年,微软对JavaScript进行逆向工程,创建了自己的版本,并将其命名为JScript,以避免与拥有Java商标的太阳微系统公司(Sun Microsystems)的版权问题。JScript是随ie浏览器的第3版一起发布的,与JavaScript几乎完全相同——它甚至包含了所有相同的错误和怪癖——但它确实有一些Internet Explorer特有的额外功能。微软同时在ie浏览器中加入了另一种名为VBScript的脚本语言。
JavaScript(和JScript)立即流行起来。它的入门门槛很低,而且相对容易学习,这意味着它在使网页更具动态性和互动性方面的应用会有爆炸性增长。不幸的是,它的低门槛也是一种诅咒——许多人现在在编写代码片段时都不理解他们在做什么。代码现在可以很容易地复制和粘贴,并且经常被错误地使用,导致大量糟糕的示例出现在网络上。
JavaScript也经常被用来创建烦人的弹出广告,以及“浏览器嗅探”(检测哪个浏览器正在被用来查看网页的过程)。它已经开始获得负面的名声。
到Netscape Navigator 4和Internet Explorer 4发布的时候,JavaScript已经变得非常流行。微软开始大肆宣传动态HTML(简称DHTML)这个术语,指的是使用JavaScript使HTML更具交互性和动态性。为了利用这种流行,网景和微软试图添加新的专有功能,这导致使用不同的语法。这种添加新功能的“军备竞赛”被称为“浏览器战争”。不幸的是,程序员必须编写两个版本的代码才能在每个浏览器中实现相同的结果。专业程序员经常将JavaScript视为玩具语言,认为它不适合任何严肃的编程,但这是不公平的批评——问题不在于语言本身,而在于使用它的方式。
最终,微软赢得了浏览器大战,ie浏览器成为了主流浏览器。对标准的支持也有所增加,这主要得益于Web标准项目(WaSP)的努力。开发人员和浏览器供应商开始合作,接受万维网联盟(W3C)和ECMA制定的标准。
开源网络浏览器火狐于2002年首次亮相,苹果公司于2003年推出Safari浏览器。两者都有强大的标准支持,这意味着开发人员能够使用JavaScript开发更好的web应用程序,这些应用程序在不同的浏览器上表现一致。
2005年,谷歌Maps、Flickr和Gmail等网站开始出现,并证明了JavaScript能够创建外观和行为类似于本地桌面应用程序的富互联网应用程序。大约在同一时间,术语Ajax(异步JavaScript和XML的缩写)由Jesse James Garrett创造。这描述了一种从后台服务器获取数据的技术,只更新网页的相关部分,而不需要重新加载整个页面,使用户能够继续与页面的其余部分交互。这为用户创造了更加无缝的体验,并在许多Web 2.0应用程序中广泛使用。因此,专业程序员开始更多地注意到JavaScript,它开始被视为一种强大而灵活的编程语言,能够生成高质量的web应用程序。
随着JavaScript被用于更复杂的应用程序,以及浏览器采用标准,JavaScript的格局发生了变化。一场新的浏览器战争开始了,但这一次是关于哪种浏览器最符合标准。在提高不同浏览器内置的JavaScript引擎速度方面也存在竞争。这始于2008年,当时谷歌的工程师开发了在Chrome浏览器中运行的V8引擎。它比以前的JavaScript引擎要快得多,这标志着另一场军备竞赛,因为其他浏览器供应商也在提高他们的引擎速度。现在,JavaScript在现代浏览器中的运行速度明显加快,而且这种改进的速度丝毫没有放缓的迹象。
HTML5是最新的HTML规范,尽管它实际上更像是一个涵盖网络上使用的所有最新技术的总称。这包括HTML, CSS3和许多使用JavaScript与网页交互的api。这些将在[第10章]中更详细地介绍。
HTML5于2014年完成,并于2016年底提出了下一个版本5.1的建议(<一个href="https://www.w3.org/TR/html/" class="" target="_blank">https://www.w3.org/TR/html/一个>).它已经迅速成为web开发的主导标准。JavaScript是它的一些更有趣的方面如何工作的关键特性。
2009年,Ryan Dahl开发了node . js(通常称为Node),它允许服务器端应用程序用JavaScript编写。Node基于谷歌的V8引擎,并允许创建仅用JavaScript编写的快速而强大的实时web应用程序。它还导致许多应用程序和JavaScript库根本不使用浏览器。Node.js已经被证明是非常受欢迎的,它的使用还在继续增长。这增加了人们对JavaScript的兴趣和使用,因为它开始出现在网络之外的许多环境中。
Node的流行导致了一个有趣的发展,即同构JavaScript。这涉及到拥有可以在客户端或服务器端运行的相同JavaScript代码:如果浏览器无法运行代码,它可以在服务器上运行并下载,或者如果服务器不可用,代码可以在客户端上运行。
1996年,网景公司和太阳微系统公司决定在欧洲计算机制造商协会的帮助下,将该语言标准化。这种标准化的语言被称为ECMAScript,以避免侵犯Sun的Java商标。这引起了更多的混乱,但最终ECMAScript被用来指代规范,而JavaScript被用来指代语言本身(现在仍然是)。
在理想的情况下,ECMAScript标准应该意味着所有JavaScript引擎都以相同的方式解释程序。但是这些规范在某些地方很难解释,因此JavaScript的实现可能因引擎而异。这就是为什么一些浏览器在运行JavaScript程序时表现不同。JavaScript也是一个超集的特性,因为它通常包含额外的非标准特性,如alert ()
函数。
负责维护ECMAScript的工作组被称为技术委员会39或TC-39。它由来自所有主要浏览器供应商的代表组成,如苹果、谷歌、微软和Mozilla,以及来自其他对网络开发感兴趣的公司的受邀专家和代表。他们定期开会决定如何发展这门语言。
当JavaScript在1997年由TC-39标准化时,该规范被称为ECMAScript版本1。一年后出现了第二版,但没有对语言做任何重大更改。1999年12月,ECMAScript发布了第三版,并增加了许多新特性。
ECMAScript版本4的开发因TC-39上关于语言发展方向的分歧而陷入困境。一些成员认为该语言需要很多大的改变来使其更加健壮,而另一些成员则认为它只需要一些小的改变。提出了许多新特性,但通常被认为过于雄心勃勃或难以在浏览器中实现。在多年没有进展之后,版本4最终被放弃,工作组跳过了这个版本,直接开始开发版本5。大家一致认为,这需要一个可以实际实现的精简规范,最终于2009年12月发布。ECMAScript版本5为该语言添加了许多新特性,但它远没有命运多舛的版本4那么雄心勃勃。尽管如此,浏览器JavaScript引擎花了很长时间才完全支持其中一些特性。
在ES5发布后,开始了代号为“Harmony”的新标准的工作。关于Harmony的想法是为JavaScript的下一个版本列出所有理想的特性。又花了6年时间,但最终这些特性中的大部分都进入了ECMAScript版本6,尽管其中一些被推迟到版本7或更高的版本。
2015年,TC-39决定采用一种新的方法,开始每年发布一个新规范,版本以发布年份命名。这意味着只有那些被批准的特性才会出现在当年的规范中。因此,ECMAScript版本6在2015年6月发布时被重新命名为ECMAScript 2015,并为该语言添加了一些主要的新功能。该计划是在每年6月发布一个新版本,这样语言就会以更渐进的方式添加新功能,从而缓慢地发展;而不是每五年左右就进行一次大规模的增加。这意味着ES2015可能是JavaScript最后一个拥有如此多新特性并对语言做出重大改变的版本。事实上,ECMAScript 2016版本于2016年6月发布,仅在之前的版本基础上增加了两个新功能。
在这本书中,我们将ES2015称为ES6,因为这是它最常用的名称。代码示例将使用最新的语法,并说明哪个版本的ECMAScript引入了特定的特性。
我们还假设您使用的是现代浏览器(尝试更新到您最喜欢的最新版本)。您可以看到一个图表,显示在不同的浏览器中实现了哪些功能<一个href="http://kangax.github.io/compat-table/es2016plus/" class="" target="_blank">在这里一个>.
对于JavaScript来说,这是一个令人兴奋的时代,因为它被用于越来越多的应用程序,而不仅仅是使网页具有交互性。单页应用程序(spa)的使用有了巨大的增长,这些应用程序运行在浏览器中,严重依赖JavaScript。这些的下一个迭代是<一个href="https://developers.google.com/web/progressive-web-apps/" class="" target="_blank">渐进式Web应用程序一个>(PWAs)使用web技术创建的应用程序在移动设备上表现得像原生应用程序,但无需从应用程序商店安装。大量使用JavaScript的HTML5游戏也变得越来越受欢迎,特别是随着浏览器的图形化能力不断提高。
JavaScript和HTML5技术可以用来开发浏览器扩展、Windows桌面小部件和Chrome OS应用程序。许多与web无关的应用程序也使用JavaScript作为脚本语言。它可以用来为PDF文档添加交互性,与数据库交互,甚至控制家用电器!
JavaScript似乎有着光明的未来。还有许多令人兴奋的新特性正在讨论中,有望成为JavaScript的未来版本,并有助于使其成为一种更强大、表达能力更强的语言。随着web平台的不断发展和成熟,它的使用已经超越了浏览器,JavaScript肯定会继续成为未来技术发展的核心部分。
如果你想成为一名JavaScript程序员,你将需要一些工具。仅使用浏览器就可以编写和运行JavaScript程序,但为了最大限度地利用本书,您需要一个用于编写和编辑程序的文本编辑器,以及一个用于运行程序的JavaScript引擎。这意味着您需要一个现代的、最新的浏览器,并安装最新版本的Node。
当我们还在学习JavaScript的基础知识时,我对于在本书开始时建议安装Node有点担心。但经过深思熟虑,我认为这是最好的选择,原因如下:
如果此时您不想安装Node(或者由于某种原因无法安装Node),那么仍然可以运行书中的大多数代码示例。还有许多在线选项可以让您使用最新版本的JavaScript。
安装Node有两个选项:安装程序或节点版本管理器。
如果您使用Windows或Mac OS,则可以使用<一个href="https://nodejs.org/en/download/" class="" target="_blank">节点安装程序一个>要为您完成所有安装,您所需要做的就是下载它并按照说明进行安装。
另一种选择是使用节点版本管理器(nvm)。使用nvm的一个优点是,它允许您安装多个版本的Node,并且可以轻松地将安装更新到最新版本。不幸的是,nvm不支持Windows,但可以安装在Mac或Linux上。要下载和安装nvm,只需遵循下面概述的两步过程:
如果您不熟悉从命令行运行应用程序和工具,那么不要担心,这并不难。刚开始可能看起来很奇怪,但过一段时间,你很快就会想知道没有它你是如何应付的!
你可以在Mac OS中找到这个应用程序->实用程序->终端,或使用Spotlight搜索终端.在这个窗口中输入命令并点击返回运行它。
在Windows上,你通过输入来访问它cmd在开始菜单。
如果您正在使用Linux,我假设您已经能够轻松地打开和使用命令行!
如果你有一台Mac,你需要通过运行以下命令安装Xcode命令行工具:
xcode-select——安装
如果您正在使用Linux,则需要安装“build-essential”包。这可以通过在基于debian的发行版上运行以下命令来完成(在其他发行版上使用您选择的包管理器):
sudoapt-get更新sudoapt-get安装建设重要
要安装nvm,只需执行以下命令:
旋度- o - https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh|bash
现在已经安装了nvm,在安装Node之前,需要重新加载shell。这可以在Mac Os中使用以下命令完成:
.~ / . bash_profile
或者在Linux中使用以下命令:
.~ / . bashrc
现在您可以使用以下命令安装最新版本的Node:
nvm安装节点
您可能需要等待一段时间才能下载和安装所有内容,但一旦完成,您可以通过输入以下命令检查所有内容是否正常工作:
节点- v
这将返回已安装Node的版本号。
您可以使用nvm安装多个不同版本的Node,也可以使用它从一个版本切换到另一个版本。你可以通过阅读这篇文章了解更多<一个href="//www.shaoxingby.com/quick-tip-multiple-versions-node-nvm/" class="" target="_blank">https://www.必威西盟体育网页登录sitepoint.com/quick-tip-multiple-versions-node-nvm/一个>.
控制台是试验和测试代码段的有用工具。它允许你输入代码,然后在你按下“enter”后显示输出。这与完整的JavaScript程序不同,后者包含同时解释的多行代码。控制台可以让您在输入每行代码时看到结果,非常适合尝试小段代码。我们将经常使用控制台来演示本书中的许多示例。
有三个选项可以使用控制台:
节点
这应该会显示如下截图所示的提示:
要退出REPL,只需按住ctrl按下并点击C两次。
用JavaScript编程最好的一点是,你不需要任何花哨和昂贵的程序来编写代码——只需要一个简单的文本编辑器。
你的操作系统自带的默认文本编辑器(比如Windows上的记事本)可以很好地工作,尽管你可能想升级到适合编程的文本编辑器。它们提供了额外的功能,如代码高亮显示、代码完成和文件浏览,而不会占用过多的系统资源。有许多不错的免费选项,包括<一个href="https://atom.io/" class="" target="_blank">Atom文本编辑器一个>而且<一个href="http://brackets.io/" class="" target="_blank">括号一个>(这实际上是使用JavaScript构建的!)
另一种选择是使用集成开发环境(IDE)。它们通常比文本编辑器具有更多的功能,但对于小型项目来说,它们可能被认为是多余的。社区版<一个href="https://www.visualstudio.com" class="" target="_blank">Microsoft Visual Studio一个>是一个很好的选择,也是免费使用的。
本书中的许多示例都保存在CodePen上,因此您可以查看代码,也可以保存自己的副本以供参考。
JavaScript说得够多了!让我们编写您的第一个程序。
学习编程语言时,从“Hello world!”程序开始是一个传统。这是一个简单的程序,输出短语“Hello world!”来宣布你来到编程的世界。我们将坚持这个传统,用JavaScript编写一个“Hello world”程序。它将是一条语句,将短语“Hello world!”记录到控制台。
要开始,您需要打开首选控制台(Node REPL、浏览器控制台或<一个href="http://es6console.com" class="" target="_blank">ES6控制台一个>在网上)。一旦控制台打开,你所需要做的就是输入以下代码:
控制台.日志(“Hello world !”);
然后按输入.如果一切按计划进行,你应该看到一个输出' Hello world!的显示;类似于下面的截图。
祝贺您,您已经编写了第一个JavaScript程序!这可能看起来并不多,但一位智者曾经说过,每个忍者程序员的旅程都始于一行代码(或者类似的东西,无论如何!)
JavaScript是一种解释性语言,需要宿主环境才能运行。由于它的起源,JavaScript运行的主要环境是浏览器,尽管它可以在其他环境中运行;例如,我们刚刚写的第一个程序是在Node REPL中运行的。Node还可以用于在服务器上运行JavaScript。到目前为止,JavaScript最常见的用途仍然是使网页具有交互性。正因为如此,在我们继续之前,我们应该先看看是什么组成了一个网页。
几乎所有的网页都由三个关键成分组成——HTML、CSS和JavaScript。HTML用于标记内容。CSS是表示层,JavaScript增加了交互性。
每一层都建立在最后一层之上。一个网页应该只需要HTML层就能运行-事实上,许多网站都在庆祝“<一个href="https://css-naked-day.github.io/" class="" target="_blank">赤裸的一天一个>’当他们从网站上删除CSS层时。一个只使用HTML层的网站将是最纯粹的形式,看起来非常老式,但仍然应该是完整的功能。
人们普遍认为最佳实践是分离每一层的关注点,因此每一层只负责一件事。把它们放在一起会导致非常复杂的页面,所有的代码都混在一个文件中,导致“标签汤”或“代码意大利面”。这曾经是制作网站的标准方式,现在仍然有很多这样做的例子。
当JavaScript最初被使用时,它被设计成直接插入到HTML代码中,如图所示,当单击按钮时将显示一条消息:
<按钮id='按钮'href='#'onclick='警报(“Hello World”)'>点击我一个>
这使得很难看到发生了什么,因为JavaScript代码与HTML混合在一起。这也意味着代码与HTML紧密耦合,因此HTML中的任何更改都需要改变JavaScript代码,以防止其中断。
可以通过将JavaScript代码放在自己的HTML代码中,使其与其他HTML代码保持距离< >脚本
标签。下面的代码将实现与上面相同的结果:
<脚本>常量btn=文档.getElementById(“链接”)btn.addEventListener(“点击”,函数(){警报(“Hello World !”);};</脚本>
这样更好,因为所有JavaScript都在一个地方,在两个脚本标记之间,而不是与HTML标记混合在一起。
我们可以更进一步,将JavaScript代码与HTML和CSS完全分开保存在自己的文件中。可以将此链接到使用src
属性中的脚本
标记来指定要链接到的文件:
<脚本src=“main.js”></脚本>
JavaScript代码将被放置在一个名为main.js
在与HTML文档相同的目录中。的核心原则之一是将JavaScript代码完全分开<一个href="https://en.wikipedia.org/wiki/Unobtrusive_JavaScript" class="" target="_blank">低调的JavaScript.
类似地,CSS也应该保存在一个单独的文件中,所以网页中唯一的代码是实际的HTML与CSS和JavaScript文件的链接。这通常被认为是最佳实践,也是我们将在书中使用的方法。
如果你使用过XML或XHTML,你可能遇到过这样的自关闭标记:
<脚本src=“main.js”/>
这些在HTML5中无法工作,所以应该避免。
你可能会看到一些使用language属性的遗留代码:
<脚本src=“main.js”语言=javascript的></脚本>
这在HTML5中是不必要的,但它仍然可以工作。
优雅降级是构建一个网站的过程,使它在使用JavaScript的现代浏览器中运行最好,但在旧浏览器中仍然可以正常工作,或者如果JavaScript或其某些功能不可用。这方面的一个例子就是以高清(HD)播放的节目——它们在高清电视上运行得最好,但在标准电视上也能运行;只是照片的质量会变差。这些程序甚至可以在黑白电视上运行。
渐进增强是一个从基础功能层面构建一个网页的过程,然后在浏览器中添加额外的增强功能。如果你遵循三层原则,JavaScript层会增强网页,而不是成为页面不可或缺的基本元素,这应该是很自然的。例如,电话公司提供基本的电话服务,但如果您的电话支持,则提供诸如呼叫等待和来电显示等额外服务。
无论何时向网页添加JavaScript,你都应该考虑你想要采用的方法。你是否想从大量突破界限的惊人效果开始,然后确保那些可能没有最新和最好的浏览器的用户的体验优雅地退化?或者你想从构建一个在大多数浏览器上运行的功能性网站开始,然后使用JavaScript增强体验?这两种方法是相似的,但又有微妙的不同。这<一个href="//www.shaoxingby.com/progressive-enhancement-graceful-degradation-choice/" class="" target="_blank">必威滚博客一个>也许能帮你决定该怎么做。
我们将用第二个在浏览器中运行的JavaScript程序来结束本章。这个例子比前一个更复杂,包含了很多概念,这些概念将在后面的章节中更深入地讨论,所以如果你在这个阶段没有理解所有的东西,也不用担心!本文的目的是向您展示JavaScript的功能,并介绍一些将在接下来的章节中介绍的重要概念。
我们将遵循前面提到的不引人注目的JavaScript实践,并将JavaScript代码保存在单独的文件中。首先创建一个名为彩虹
.在该文件夹中创建一个名为rainbow.html
另一个叫main.js
.
让我们从HTML开始。打开rainbow.html
并输入以下代码:
<头><元字符集='utf - 8'><标题>我可以点击彩虹标题>头><身体><按钮id='按钮'>点击我按钮><脚本src='main.js'>脚本>身体>超文本标记语言>
这个文件是一个相当标准的HTML5页面,其中包含一个ID为的按钮按钮
.ID属性对于JavaScript来说非常有用,可以用作访问页面不同元素的钩子。底部是a脚本
标签链接到我们的JavaScript文件。
现在来看JavaScript。打开main.js
并输入以下代码:
常量btn=文档.getElementById(“按钮”);常量彩虹=[“红色”,“橙”,“黄色”,“绿色”,“蓝”,“rebeccapurple”,“紫色”];函数改变(){文档.身体.风格.背景=彩虹[数学.地板上(7*数学.随机())];}btn.addEventListener(“点击”,改变);
JavaScript代码中的第一个任务是创建一个名为btn
(我们将在第2章讨论变量)。
然后我们使用. getelementbyid
函数查找ID为的HTML元素btn
(查找HTML元素将在第6章中介绍)btn
变量。
我们现在创建另一个变量彩虹
.对象中包含不同颜色字符串列表的数组彩虹
变量(我们将在第二章讨论字符串和变量,在第三章讨论数组)。
然后我们创建一个函数改变
(我们将在第4章讨论函数)。它将body元素的背景色设置为彩虹的颜色之一(更改页面的样式将在第6章讨论)。这涉及使用内置的数学
对象(在第5章中介绍),并从彩虹
数组中。
最后,我们创建一个事件处理程序,它会检查按钮何时被单击。当这种情况发生时,它调用改变
函数(事件处理程序将在第7章中介绍)。
开放rainbow.html
在你最喜欢的浏览器中,试着点击几次按钮。如果一切正常,背景应该变成彩虹的每种颜色,如下面的截图所示。
如果您想快速试用,您可以签出<一个href="http://codepen.io/daz4126/pen/VPRdGa" class="" target="_blank">code在CodePen一个>.为了得到一些练习,我建议你也花时间创建这些文件,手写代码,并尝试在浏览器中运行。rebeccapurple
(是颜色的正式名称,十六进制编码为)# 663399
.(它是以网页设计师埃里克·梅耶的女儿命名的,她不幸去世,年仅6岁。这是她最喜欢的颜色,作为对她的致敬,它被添加到官方的CSS颜色列表中。)
JavaScript语言开发中的一个重要概念是它必须是向后兼容的.也就是说,当引擎运行新规范时,所有旧代码必须以相同的方式运行(这有点像说PlayStation 4必须仍然能够运行为PlayStation 1、2和3创建的游戏)。这是为了防止JavaScript通过做出巨大的改变来“破坏网络”,这意味着一些网站上的遗留代码不能在现代浏览器中运行。
因此,新版本的JavaScript不能做任何在以前版本的语言中不可能做到的事情。所有的变化都是用于实现特定功能的符号,以使其更容易编写。这被称为语法糖,因为它允许以更好、更简洁的方式编写现有的代码段。
所有版本的JavaScript向后兼容的事实意味着我们可以使用transpilers将一个版本的JavaScript代码转换成另一个版本。例如,您可以使用最新版本的JavaScript编写代码,然后将其转换为版本5代码,这几乎可以在任何浏览器中运行。
ECMAScript每年都会有一个新版本,这意味着浏览器在实现最新特性时可能会稍微滞后(它们在这方面的速度越来越快,但大多数浏览器仍然需要两年时间才能支持ES6模块)。这意味着如果您想使用最新的编码技术,您可能不得不依赖于使用一个转译器,例如<一个href="https://babeljs.io" class="" target="_blank">巴别塔一个>,在某种程度上。
如果你发现一些代码不能在你的浏览器中工作,你可以添加以下链接到你的HTML文档:
<脚本src=“https://unpkg.com/babel-standalone@6 babel.min.js”></脚本>
请注意,这个链接需要删除之前任何需要编译的JavaScript。
你还需要改变类型
在任何指向JavaScript文件的链接中,将属性设置为“text/babel”。例如,上面例子中的JavaScript文件链接将变为:
<脚本类型=“文本/巴别塔”src=“main.js”></脚本>
这并不是最好的长期解决方案,因为它需要浏览器在运行时转译所有的代码,尽管这对于测试代码是很好的。更好的解决方案是将代码作为构建过程的一部分进行编译,这将在第15章中介绍。
一些在线编辑器如<一个href="http://codepen.io" class="" target="_blank">CodePen一个>,<一个href="https://babeljs.io/repl" class="" target="_blank">巴别塔REPL一个>而且<一个href="https://jsfiddle.net" class="" target="_blank">JS小提琴一个>允许您在浏览器中编译代码。
的<一个href="http://kangax.github.io/compat-table/es6/" class="" target="_blank">ECMAScript 6兼容性表一个>还包含关于在各种编译器中实现了哪些特性的最新信息。
在本书中,我们将构建一个名为“Quiz Ninja”的示例应用程序。这是一款测试应用,目的是让玩家回答有关超级英雄真实姓名的问题。测试应用程序将在浏览器中运行,并使用书中涉及的许多概念。在每一章的末尾,我们将使用本章所涵盖的技能来进一步开发应用程序。
应用程序将遵循三个独立的web层和不显眼的JavaScript的原则。所以我们需要将HTML、CSS和JavaScript保存在单独的文件中。现在让我们创建这些文件。
创建一个名为测试
,并在其中创建以下文件:
index . html
main.js
styles.css
将以下代码添加到index . html
:
<!doctype html><html朗=“en”><头><元字符集=“utf - 8”><元的名字=“描述”内容=“JavaScript测试游戏”><标题>测试忍者</标题><链接rel=“样式表”href=“styles的css></头><身体><部分类=dojo的><div类=“quiz-body”><头><h1>测试忍者!</h1></头></div></部分><脚本src=“main.js”></脚本></身体></超文本标记语言>
这是一个标准的HTML5布局,在页面顶部有一个简单的标题。在后面的章节中,随着应用程序的开发,我们将在页面中添加更多内容。
现在是时候为页面设置样式了。将以下代码添加到styles.css
文件:
@进口url(“https://fonts.googleapis.com/css?family=Baloo + Da | Roboto”);身体{背景:# 5 f1c1c;字体-家庭:“Roboto”,无-衬线;}.dojo{背景:url(https://cdn.rawgit.com/alexmwalker/6 acbe9040d9fe6e5e9fd758a25e1b2a5/生/9 c8131eb2ccc1e3839a5a5114cb16b5dc74daf04/dojo.svg)没有-重复;宽度:One hundred.%;高度:800 px;背景-大小:One hundred.%汽车;填充-前:10 px;}.测试-身体{背景:rgba(255,255,255,1);保证金:150 px33%;填充:10px 20px 50px 20px;-webkit-盒子-影子:4px 4px 11px 3pxrgba(0,0,0,0.3);-moz-盒子-影子:4px 4px 11px 3pxrgba(0,0,0,0.3);盒子-影子:4px 4px 11px 3pxrgba(0,0,0,0.3);}h1{颜色:bdd # 611;字体-家庭:“巴鲁达”,草书;字体-重量:900;文本-对齐:中心;字体-大小:48像素;保证金:0;}按钮{颜色:# ffffff;背景-颜色:bdd # 611;边境-颜色:#130269;边境-半径:4 px;保证金:0.2他们0;显示:块;宽度:One hundred.%;字体-大小:24像素;}#问题{字体-大小:24像素;}#结果{颜色:# fff;保证金:0.2他们0;宽度:One hundred.%;文本-对齐:中心;}.正确的{背景-颜色:# 0 c0;}.错误的{颜色:# fff;背景-颜色:# c00;}
这个文件涵盖了整个项目中使用的所有样式,所以相当多的样式一开始没有使用,但这意味着我们不需要在书中再次编辑这个文件。
最后,我们将使用JavaScript添加一些交互性。将以下代码放在main.js
文件:
警报(“欢迎来到忍者小测验!”);
第一行使用alert ()
函数,该函数在浏览器中的对话框中向玩家显示欢迎消息。虽然警报
实际上并不是官方ECMAScript规范的一部分,它被所有浏览器用作显示消息的一种方式。
要尝试一下,请打开index . html
文件在您最喜欢的浏览器。您应该会看到欢迎消息警告框,如下面的截图所示。
你也可以看到一个活生生的例子<一个href="https://codepen.io/daz4126/pen/YNgvdG" class="" target="_blank">CodePen一个>.
这为我们的项目提供了一个良好的开端,随着我们的JavaScript知识的发展,我们可以在本书的课程中继续构建项目。
JavaScript是由Netscape公司的员工Brendan Eich在1995年创建的。
它迅速流行起来,很快就被认为是网络语言。
浏览器之争给JavaScript带来了许多问题,并导致了大量难以维护的碎片代码。
Ajax的出现及其在Web 2.0应用程序(如Gmail和谷歌Maps)中的使用促使JavaScript的复兴。
JavaScript的主要环境是浏览器,但也可以在其他环境中使用。
你只需要一个浏览器来编写JavaScript,但是推荐一个好的文本编辑器或IDE和Node安装。
优雅的降级和渐进的增强是确保用户获得体面体验的过程,即使他们缺乏某些需求。
不显眼的JavaScript是指JavaScript功能与HTML内容和CSS样式分离。
JavaScript的每个新版本都必须与旧版本兼容。
转译器可用于将代码从一个JavaScript版本转换为另一个版本。它们通常用于将该语言的最新版本转换为可在大多数浏览器中运行的旧版本。
在下一章中,我们将开始学习一些编程基础知识——让我们开始吧,忍者!