1 JavaScript速览:进入JavaScript的世界

1 JavaScript速览

进入JavaScript的世界

JavaScript赋予你强大的力量。JavaScript是一款纯正的Web编程语言,让你能够给网页添加行为。有了JavaScript,你就能够与用户互动,响应有趣的事件,从网上收集数据并将其用于网页中,在网页中绘制图形等。网页不再是枯燥、乏味、静态的,不再只是一动不动地展现在你面前。掌握JavaScript后,你还能够赋予网页全新的行为。

JavaScript的工作原理

如何编写JavaScript

如何将JavaScript代码加入网页

JavaScript,你进步不小

如何编写语句

变量和值

切勿随意命名

自我表达

重复操作

while循环的工作原理

使用JavaScript进行决策

进行大量决策

与用户交流

console.log详述

打开控制台

编写一个正式的应用程序

如何将JavaScript代码加入网页(细数各种方式)

棒打鸳鸯散

1 JavaScript速览:进入JavaScript的世界

JavaScript赋予你强大的力量。JavaScript是一款纯正的Web编程语言,让你能够给网页添加行为。有了JavaScript,你就能够与用户互动,响应有趣的事件,从网上收集数据并将其用于网页中,在网页中绘制图形等。网页不再是枯燥、乏味、静态的——只是一动不动地躺在那里。掌握JavaScript后,你还能够赋予网页全新的行为。

你也不会只是一个人在战斗。JavaScript是最流行的编程语言之一,所有现代浏览器(和大多数古老的浏览器)都支持它;其外沿在不断延伸,正逐渐被嵌入除浏览器外的其他众多环境中。话不多讲,咱们现在就动手吧!

JavaScript的工作原理

如果你习惯于在网页中添加结构、内容、布局和样式,现在也该添加一些行为了!这年头,只是静静地躺在那里的网页已经没有市场。要给人留下深刻的印象,网页必须是动态、交互性的,并以新颖的方式与用户互动;这正是JavaScript的用武之地。下面先来看看JavaScript在网页生态系统中所处的位置。

{%}

如何编写JavaScript

JavaScript在编程领域独树一帜。使用典型的编程语言时,你必须先编写代码,再编译、链接和部署。JavaScript则灵活多变得多。使用 JavaScript时,你只需直接在网页中编写代码,再在浏览器中加载网页,浏览器就会愉快地执行你编写的代码。下面更深入地探索其中的工作原理。

{%}

如何将JavaScript代码加入网页

重要的事情先说。如果不知道如何将JavaScript代码加入网页,你在JavaScript的道路上就走不了多远。如何加入呢?当然是使用<script>元素!

下面来看一个枯燥而平凡的网页,并使用<script>元素添加一些动态行为。请不要过度关注我们将添加的<script>元素的细节,你当前的目标是运行一些JavaScript代码。

{%}

试驾 

将这个网页的内容输入到一个名为behavior.html的文件中,将其拖放到浏览器中(或选择菜单“文件”>“打开”),以加载它。其中的JavaScript代码有何功能呢?你需要等待5秒钟才能知道。

 放松心情

一定要放松心情。我们并不要求你现在就对JavaScript了如指掌。事实上,我们只想让你感受一下JavaScript是什么样的。

话虽如此,你也不能完全置身事外,因为我们想让你热热身,让大脑活跃起来。还想着前一页的代码?下面就来猜猜它们是做什么的:

{%}

世上没有愚蠢的问题

问: 我听说JavaScript是一款无用的语言,是这样的吗?

答: 刚面世时,Java Script的动力肯定谈不上有多强劲,但随后其对Web来说变得日益重要,因此很多人(包括行业中一些最优秀的人才)都为改善JavaScript的性能做出了努力。不过你可能不知道,即便是在速度变得超快前,JavaScript也是一款非常杰出的语言。你将看到,我们会使用它来实现一些非常强大的功能。

问: JavaScript与Java有关系吗?

答: 除名字外毫无关系。JavaScript推出时,Java已经是炙手可热的流行语言,为搭上Java这辆顺风车,JavaScript 的发明者在其名称中包含了Java。这两种语言都借鉴了C等编程语言的一些语法,但除此之外,它们有天壤之别。

问: 使用JavaScript是创建动态网页的最佳方式吗?诸如Flash等解决方案怎么样?

答: Flash一度是很多人开发交互式网页和动态网页的首选,但行业的发展天平正日益倾向于HTML5和JavaScript。 HTML5推出后,JavaScript已成为标准的Web脚本语言。很多人都在努力改善JavaScript的性能和效率,以及开发扩展浏览器功能的JavaScript API。

问: 我的朋友在Photoshop中使用JavaScript,至少他是这样说的。这可能吗?

答: 完全可能。作为一种通用的脚本语言,JavaScript的使用范围不再局限于浏览器,还用于从图形工具到音乐应用程序的众多应用程序中,甚至用于服务器端编程。通过学习JavaScript,你的付出在未来很可能在除网页外的其他领域得到回报。

问: 你说很多其他语言都是编译型的。这到底是什么意思呢?为何JavaScript不是编译型的?

答: 使用C、C++或Java等传统编程语言时,执行代码前必须进行编译。编译是将代码转换为适合计算机的表示方式,通常可改善运行阶段性能。脚本语言通常是解释型的,这意味着浏览器执行它遇到的每行JavaScript代码。脚本语言不那么看重运行阶段性能,而更强调灵活性,因此更适合用于完成原型开发和交互式编码等任务。JavaScript最初是解释型的,因此多年来其性能始终不那么高。然而,还有一条中间路线,即可对解释型语言进行即时编译,这正是浏览器厂商对现代JavaScript采取的做法。事实上,现在使用JavaScript既可获得脚本语言的便利性,又可享受编译型语言的性能。顺便说一句,本书将使用术语解释、评估和执行,在不同的上下文中,它们的含义存在细微的差别,但在本书中,它们基本上是一回事。

JavaScript,你进步不小

{%}

 磨笔上阵

你看看,编写JavaScript多容易

你虽然还不熟悉JavaScript,但肯定能够对一些JavaScript代码的作用猜个八九不离十。请看下面的每行代码,你能猜出它们的作用吗?请在下面写出你的答案。我们指出了第一行代码的功能。如果你猜不出来,请参阅下一页的答案。

{%}

 

 磨笔上阵答案

你看看,编写JavaScript多容易

你虽然还不熟悉JavaScript,但肯定能够对一些JavaScript代码的作用猜个八九不离十。请看下面的每行代码,你能猜出它们的作用吗?请在下面写出你的答案。我们指出了第一行代码的功能。下面就是给出的答案。

{%}

确实如此

使用HTML和CSS,可创建一些漂亮的网页,但熟悉JavaScript后,就可以创建其他类型的网页了。实际上,你甚至可以将网页视为应用程序(甚至是一种体验),而不仅仅是网页。

你可能会说:“我知道,确实如此。不然我为什么会阅读这本书呢?”实际上,我们是想借此机会谈谈如何学习JavaScript。如果你使用过编程语言或脚本语言,肯定大致知道即将面临的困难。如果你以前主要使用的是HTML和CSS,就必须明白编程语言的一些截然不同之处。

使用HTML和CSS时,你做的主要工作都是声明型的,例如指出一些文本为段落,或指出属于sale类的元素都为红色。使用JavaScript时,则要给网页添加行为,为此需要对计算进行描述。你需要知道如何描述类似于下面的事情:对所有的正确答案求和,以计算用户的得分;用户单击按钮时,播放表示获胜的声音;取回我最近发布的消息,并将其放到这个网页中。

为此,需要使用与HTML和CSS截然不同的语言。下面就来看看如何使用这种语言。

如何编写语句

创建HTML时,你通常对文本进行标记,以指定其结构。为此,要给文本添加元素、特性和值。

{%}

CSS稍微有点不同。使用CSS时,你编写一系列规则,其中每条规则都指定了网页中的元素及其样式。

使用JavaScript时,你编写语句。每条语句都指定了计算的一小部分,而所有语句一起给网页添加行为。

变量和值

你可能注意到了,JavaScript语句通常包含变量。变量用于存储值。什么样的值呢?下面是一些示例。

{%}

除数字、字符串和布尔值外,变量还可存储其他类型的值,这将在稍后介绍;但不管存储的是哪种类型的值,变量的创建方式都相同。下面更深入地介绍如何声明变量。

这里说“也可”是因为创建变量时,可以不给它指定初始值,而在以后再给它赋值。要在创建变量时不指定初始值,只需省略赋值部分即可,如下所示。

 

切勿随意命名

你知道变量有名字,你也知道变量有值。你还知道,变量可存储数字、字符串和布尔值等。

但如何给变量命名呢随便命名都行吗?不是这样的,但变量命名规则非常简单:只要遵循下面两条规则,指定的变量名就是合法的。

以字母、下划线或美元符号打头。

然后使用任意数量的字母、数字、下划线或美元符号。

哦,还有一点:不能使用任何内置关键字,如varfunctionfalse等,以免让JavaScript感到迷惑。因此,给变量命名时,务必远离这些禁区。下面列出了JavaScript关键字,本书后面将使用其中的一些,并指出它们的含义:

break       delete      for         let         super        void
case        do          function    new         switch       while
catch       else        if          package     this         with
class       enum        implements  private     throw        yield
const       export      import      protected   true         
continue    extends     in          public      try          
debugger    false       instanceof  return      typeof       
default     finally     interface   static      var          

世上没有愚蠢的问题

问: 何为关键字?

答: 关键字是JavaScript保留字,JavaScript将其用于特殊目的。如果将关键字用作变量名,将让你和浏览器都感到迷惑。

问: 如果将关键字用作变量名的一部分呢?例如,可将变量命名为ifOnly(即在变量名中包含关键字if)吗?

答: 当然可以,只要变量名不与关键字完全相同就行。另外,编写代码时应确保其清晰,因此通常不要使用变量名elze,因为它容易与else混淆。

问: JavaScript区分大小写吗?换句话说,myvariableMyVariable指的是一回事吗?

答: 如果你习惯了HTML标记,可能习惯于不区分大小写,因为在浏览器看来,<head><HEAD>是一回事。然而,在JavaScript中,变量名、关键字和函数名等几乎所有一切的大小写都很重要,因此请务必注意大小写。

{%}

 有趣的语法

  • 每条语句都以分号结尾。

    x = x + 1;

  • 单行注释以两个斜杆打头。注释只是用于向你或其他开发人员解释代码,它们不会执行。

    // I'm a comment

  • 空白无关紧要(几乎在什么地方都是如此)。

    x = 2233;

  • 将字符串用双引号括起(也可使用单引号,这两种方式都可行,只要统一即可)。

    "You rule!" 'And so do you!'

  • 不要用引号括起布尔值true和false。

    rockin = true;

  • 声明变量时,可以不给它指定值。

    var width;

  • 不同于HTML标记,JavaScript区分大小写,这意味着大小写很重要。counterCounter是两个不同的变量。

变身浏览器

下面的JavaScript代码存在一些错误。你的任务是变身浏览器,将其中的错误找出来。完成这个练习后,请翻到本章末尾,看看你是否找出了所有的错误。

{%}

自我表达

要使用JavaScript准确地表达自我,需要使用表达式。表达式的结果为值,前面的代码示例就包含多个表达式,下面是其中之一:

{%}

如果你学过数学、计算过收支或计算过税费,就不会对这样的数值表达式感到陌生。

还有字符串表达式,如下所示:

{%}

* 假定变量youKnowTheRest的值为“fragilisticexpialidocious”。

还有结果为truefalse的表达式,这种表达式称为布尔表达式。请看下面的各个表达式,它们返回true还是false呢?

表达式的值还可能为其他几种类型,将在本书后面介绍。就现在而言,重点是牢记所有表达式的结果都为某种值:数字、字符串或布尔值。下面来看看表达式都有哪些作用。

 磨笔上阵

请拿起笔来,将一些表达式的作用搞清楚。计算下面每个表达式的值并写下来。是的,写下来。将老妈对你不要在书上乱写乱画的嘱咐忘了吧,在本书中想怎么写就怎么写!一定对照本章末尾的答案,看看你的答案对不对。

{%}

 

 编码技巧

你注意到了吗?运算符 = 用于赋值,而运算符==用于判断相等性。也就是说,给变量赋值时使用一个等号,判断两个值是否相等时使用两个等号。一种常见的编码错误是,该使用其中一个运算符时使用了另一个。

重复操作

很多事情你都不只做一次:

擦肥皂、冲洗、重复……

上蜡、刮蜡……

不停地吃,直到把碗里的糖果吃光。

你经常需要编写代码来重复执行相同的操作,而JavaScript提供了多种反复执行循环代码的方式:whileforfor inforEach。本书将介绍所有这些循环方式,这里先将重点放在while循环上。

前面刚讨论过结果为布尔值的表达式,如scoops > 0。这种表达式在while 语句中扮演着至关重要的角色,如下所示。

{%}

while循环的工作原理

假设这是你遇到的第一个while循环,下面来跟踪其整个执行过程,以了解其中的工作原理。注意到这里新增了一条语句,它声明变量scoops并将其初始化为5

下面来执行这些代码。它首先将scoops设置为5

var scoops = 5;
while (scoops > 0) {
   document.write("Another scoop!<br>");
   scoops = scoops - 1;
}
document.write("Life without ice cream isn't the same");


接下来是while语句。执行while语句时,我们首先检查其中的条件,看看它是true还是false

{%}

由于条件为true,我们开始执行代码块,其中的第一条语句在浏览器中写入字符串"Another scoop!<br>"


{%}

下一条语句将球数减1,并将结果(4)赋给scoops

{%}


这是代码块中的最后一条语句,因此我们返回while语句开头并重新开始。

{%}


再次检查条件,这次scoops的值为4,依然大于0

{%}


我们再次在浏览器中写入字符串"Another scoop!<br>"

{%}

下一条语句将球数减1,并将结果(3)赋给scoops

{%}


这是代码块中的最后一条语句,因此我们返回while语句开头并重新开始。

{%}


再次检查条件,这次scoops的值为3,依然大于0

{%}


我们再次在浏览器中写入字符串"Another scoop!<br>"

{%}

正如你看到的,这个过程将不断重复。在每次循环中,我们都将scoops1,再次将指定的字符串写入浏览器并重新开始。

{%}


继续执行循环。

{%}


执行最后一次循环后,情况有点不同:scoops0,因此条件为false。这次到达了分水岭,我们不再继续循环——不执行代码块。这次我们跳过代码块,执行它后面的语句。

{%}


现在,我们执行另一条document.write语句,在浏览器中写入字符串Life without ice cream isnt the same 。至此,全部代码都执行完毕了!

{%}

 

使用JavaScript进行决策

你刚才看到了,在while语句中,可使用条件来决定是否继续循环。在JavaScript中,还可在if语句中使用布尔表达式来进行决策。仅当if语句的条件测试为true时,才会执行其代码块,如下例所示。

{%}

if语句中,还可添加一个或多个else if语句,以执行多重检查,如下所示:

{%}

进行大量决策

可根据需要将任意数量的if/else语句串接起来,还可在最后添加一条包罗万象的else语句,以处理所有条件都不满足的情形,如下所示。

{%}

世上没有愚蠢的问题

问: 代码块到底是什么?

答: 从语法上说,代码块是放在花括号内的一组语句,可以只包含一条语句,也可以包含任意数量的语句。代码块中的所有语句被视为一个整体,要么都执行,要么都不执行。例如,在while语句中,如果其条件为true,将执行其代码块中的所有语句。ifelse if语句的代码块亦如此。

问: 我遇到过这样的代码,其中的条件是一个变量,而这个变量的值为字符串而不是布尔值。请问这种代码是如何工作的?

答: 本书稍后会讲到这一点;简单地说,JavaScript在判断值为true还是false方面非常灵活。例如,任何包含非空字符串的变量都被视为true,而没有设置值的变量都被视为false。这些细节稍后介绍。

问: 你说过,表达式的结果可能不是数字、字符串或布尔值。请问还可能有哪些值?

答: 我们当前的重点是基本类型,即数字、字符串和布尔值。本书后面将介绍更复杂的类型,如数组(一系列值)、对象和函数。

问: 布尔值(boolean)是如何得名的?

答: 布尔值是以发明布尔逻辑的英国数学家George Boole命名的。在英文中,boolean常被写作Boolean,旨在指出这种变量类型是以George Boole命名的。

 代码冰箱贴

有一个JavaScript程序的代码被随机地贴在冰箱上。你能将这些冰箱贴放到正确的位置上,组成一个生成如下输出的JavaScript程序吗?请对照本章末尾的答案,再继续往下阅读。

{%}

与用户交流

前面一直在讨论如何提高网页的交互性,为此你必须能够与用户交流。实际上,与用户交流的方式有多种,其中的一些你在本章前面已经见到过。下面简要地介绍这些交流方式,本书后面将更详细地讨论它们。

{%}

 

所有的交流方法都戴着面具来参加晚会了。你能揭下它们的面具,将右边的描述与左边的名称正确地搭配起来吗?我们已经将一种交流方法与其描述搭配起来了。

console.log详述

下面来更深入地探索console.log的工作原理,以便在本章中使用它来查看代码的输出,并在全书中使用它来查看代码的输出以及调试代码。但别忘了,控制台并非普通Web用户能够明白的浏览器功能,因此不应在网页的最终版本中使用它。将消息写入控制台日志通常仅用于在开发网页期间调试代码,但在学习JavaScript时,这是一种了解代码功能的极佳方式。console.log的工作原理如下:

世上没有愚蠢的问题

问: 我知道console.log可用于输出字符串,但它到底是什么东西呢?我是说为何使用句点分隔console和log呢?

答: 问得好。我们讲得有点太快了,你可将控制台视为具有特定功能的对象。其功能之一是写入日志,而要让控制台执行这种功能,我们使用语法console.log,并将用圆括号括起的输出传递给它。请牢记这一点,本书后面将回过头来深入讨论对象。现在,你具备了使用console.log所需的全部知识。

问: 除了写入日志外,控制台还有其他功能吗?

答: 有,但大家通常只用它来写入日志。日志(和控制台)还有一些高级用法,但这些用法通常随浏览器而异。请注意,所有现代浏览器都提供了控制台,但控制台并不包含在正式规范中。

问: 控制台看起来很不错,但在哪里能够找到它呢?我在代码中使用了它,却没有看到任何输出!

答: 在大多数浏览器中,都可显式地打开控制台,详情请参阅下一页。

打开控制台

不同浏览器的控制台实现存在细微的差异,更糟糕的是,浏览器实现控制台的方式变化相当频繁——虽然没有达到离谱的程度,但当你阅读本书时,你的浏览器控制台可能与这里显示的稍有不同。

这里介绍在Mac上如何访问Chrome浏览器(25版)的控制台。对于如何在各种主流浏览器中访问控制台,请参阅http://wickedlysmart.com/hfjsconsole。明白如何在一款浏览器中访问控制台后,就很容易搞清楚如何在其他浏览器中访问控制台了。建议你至少在两款浏览器中尝试使用控制台,这样才更熟悉。

{%}

编写一个正式的应用程序

下面将新学到的JavaScript技能和console.log付诸应用,编写一个实用的应用程序。我们需要一些变量、一条while语句和一些带 else子句的if语句。再进行简单打磨,不知不觉间就将得到一个正式的商务应用程序。查看最终代码前,先想想你会如何编写一个程序来显示经典歌曲99 Bottles of Beer的歌词。

var word = "bottles";
var count = 99;
while (count > 0) {
    console.log(count + " " + word + " of beer on the wall");
    console.log(count + " " + word + " of beer,");
    console.log("Take one down, pass it around,");
    count = count - 1;
    if (count > 0) {
        console.log(count + " " + word + " of beer on the wall.");
    } else {
        console.log("No more " + word + " of beer on the wall.");
    }
}

 考考你的脑力

上述代码存在一个小缺陷:它能正确地运行,但输出并非完美无缺。你能找出并修复这个缺陷吗?

好主意!是的,是时候这样做了。这样做之前,我们想确保你具备了足够的JavaScript知识。你在本章开头看到了,可像添加CSS一样在HTML中添加JavaScript,也就是说,只需使用标签<script>来添加它们即可。

这里要说的是,与CSS一样,也可将JavaScript放在独立于HTML的外部文件中。

下面先将这个正式的商务应用程序放到网页中。经过详尽的测试后,再将这些JavaScript代码移到一个外部文件中。

 试驾

下面在浏览器中运行一些代码。请按如下说明来运行这个正式的商务应用程序,并查看最终的结果。

{%}

如何将JavaScript代码加入网页(细数各种方式)

你已经知道可以使用<script>标签将JavaScript代码添加到网页的<head><body>元素中,但还有另外两种在网页中添加JavaScript代码的方式。下面来看看可将JavaScript代码放在哪些地方(以及将代码放在一个地方而不是另一个地方的原因)。

{%}

棒打鸳鸯散

分手是痛苦的,但必须这样做。现在该将JavaScript代码提取出来,移到一个独立的文件中了,具体步骤如下。

{%}

{%}

{%}

 剖析script元素

你已经知道如何使用<script>元素在网页中添加代码了,但为了彻底明白这个主题,下面来复习一下<script>元素,确保不放过任何一个细节。

{%}

在HTML中引用独立的JavaScript文件时,像下面这样使用<script>元素:

{%}

 

 小心

不能在引用JavaScript文件的同时内嵌JavaScript代码。

使用src特性时,不能在<script>标签之间添加JavaScript代码。在这种情况下,需要使用两个<script>元素。

<script src ="goo die s.js">
 var = "quick hack";
</script>

错误的做法

 起底JavaScript

本周访谈:逐渐了解JavaScript

Head First:欢迎JavaScript。我们知道你始终忙于处理各种网页,很高兴你在百忙之中抽出时间接受访谈。

JavaScript:没什么。我的确比以前更忙了,现在我不仅被用于几乎所有的网页,还被用于实现简单的菜单效果和功能齐备的游戏等。真是忙得不可开交!

Head First:真令人惊讶。就在几年前,还有人说你不过是一款无用的脚本语言,而现在到处都能看到你的身影。

JavaScript:以前的事就别说了。我取得了长足的进步,很多杰出人物都为此付出了艰苦努力。

Head First:取得了什么进步呢?你的基本语言特性看起来不是跟以前一样吗?

JavaScript:这表现在两个方面。首先,现在我的速度快如闪电。我虽然被视为脚本语言,但性能几乎能够与编译型语言媲美。

Head First:其次呢?

JavaScript:在浏览器中,我能够做的事情多得多了。通过使用所有现代浏览器都有的Java Script库,你可确定当前位置,播放视频和音频,在网页中绘图,等等。但要完成这些任务,你必须熟悉JavaScript。

Head First:咱们来说说对你的批评吧。我听过一些不那么友好的评论,其中最著名的是“一款粗制滥造的语言”。

JavaScript:走自己的路,让别人去说吧。我即便不是世界上使用最广泛的语言,也是其中之一。我击败了很多竞争对手。还记得将Java用于浏览器的倡导吗?现在看来就是个笑话。还有VBScript、JScript、Flash、 Silverlight……不胜枚举。你说说,我怎么就不行呢?

Head First:有人批评你“过分简单”。

JavaScript:坦率地说,这是我最大的优点。事实上,只要启动浏览器,输入几行JavaScript代码,就万事大吉了,这多厉害呀。对初学者来说,这也很不错。有人说没有比JavaScript更好的入门语言了。

Head First:但这也是需要付出代价的,不是吗?

JavaScript:问得好。我简单是从易于上手的意义上说的。我也很深奥,最新的现代编程结构应有尽有。

Head First:比方说呢?

JavaScript:动态类型、一等函数和闭包,算吗?

Head First:都算,不过它们都是什么东西呢?

JavaScript:只要坚持阅读本书,你就会知道。

Head First:说点具体的吧。

JavaScript:我就说一点。JavaScript是针对动态Web环境打造的,在这种激动人心的环境中,用户与网页交互,数据是即时获得的,还会发生各种各样的事件,而JavaScript反映了这种编程风格。对JavaScript有更深入的了解后,你就能更好地理解这一点。

Head First:听你这样说,你是完美的语言了?

JavaScript(泪流满面):你知道,我不像其他大多数语言那样出生在象牙塔。我出身草莽,成败全靠自己,必须努力拼搏。虽然如此,我并非完美无缺,也有一些“缺点”。

Head First(面带Barbara Walters1式微笑):我们今天看到了你不为人知的一面,我想改天有必要再来一次访谈。离别之际,有什么要说的吗?

1Barbara Walters是美国著名访谈类节目主持人,被誉为“美国电视新闻第一夫人”。——编者注

JavaScript:不要只看我的缺点,要了解并坚持利用我的优点。

 要点

  • JavaScript用于给网页添加行为

  • 与几年前相比,浏览器引擎执行JavaScript代码的速度快得多。

  • 浏览器在网页中遇到JavaScript代码后就开始执行它们。

  • 使用<script>元素在网页中添加JavaScript代码。

  • 可在网页中内嵌JavaScript代码,也可在HTML中链接到包含JavaScript代码的独立文件。

  • 要链接到独立的JavaScript文件,可在<script>标签中使用特性src

  • HTML声明网页的结构和内容;JavaScript计算值并给网页添加行为。

  • JavaScript程序由一系列语句组成。

  • 变量声明语句是最常见的JavaScript语句之一,它使用关键字var来声明新变量,并使用赋值运算符=给变量赋值。

  • JavaScript变量的命名规则和指南只有几条,遵循它们至关重要。

  • 给变量命名时千万不要使用关键字。

  • JavaScript表达式计算值。

  • 三种常见的表达式是数字表达式字符串表达式布尔表达式

  • if/else语句让你能够在代码中作出决策。

  • while/for语句让你能够通过循环多次执行代码。

  • 使用console.log(而不是alert)将消息显示到控制台。

  • 控制台消息应该只用于调试,因为用户很可能根本看不到控制台消息。

  • JavaScript最常用于给网页添加行为,但也用于在Adobe Photoshop、OpenOffice和 Google Apps等应用程序中编写脚本,甚至被用作服务器端编程语言。

 JavaScript填字游戏

来玩一个填字游戏2,放松一下心情,让你的神经完全处于松弛状态。

2本书中的填字游戏均为填写英语单词。——编者注

{%}

横向

2. 在HTML中链接到外部JavaScript文件时,需要在<script>元素中指定的特性。

6. 为避免难堪的命名错误而使用的拼写方式。

7. JavaScript给网页添加的东西。

10. 前面例子中用到的啤酒的计量单位(复数形式)。

13. 表示一行JavaScript代码。

14. 3 + 4所属的JavaScript语言结构。

15. 所有JavaScript语句都以它结束。

16. 用于调试JavaScript代码的函数。

纵向

1. 一种用于在JavaScript程序中重复执行操作的循环。

3. JavaScript变量名是区分什么的?

4. 声明变量时使用的关键字。

5. 变量存储的东西。

6. 每次执行循环时,都要判断的一个表达式。

8. 当今JavaScript的运行速度比以前更快还是更慢?

9. if/else语句的用途。

11. 可使用+运算符将什么拼接起来?

12. 用于放置JavaScript代码的元素。

变身浏览器答案

下面的JavaScript代码存在一些错误。你的任务是变身浏览器,将其中的错误找出来。完成这个练习后,请翻到本章末尾,看看你是否找出了所有的错误。答案如下。

{%}

 磨笔上阵答案

请拿起笔来,将一些表达式的作用搞清楚。计算下面每个表达式的值并写下来。是的,写下来。将老妈对你不要在书上乱写乱画的嘱咐忘了吧,在本书中想怎么写就怎么写!一定对照本章末尾的答案,看看你的答案对不对。答案如下。

{%}

 

 编码技巧

你注意到了吗?运算符=用于赋值,而运算符==用于判断相等性。也就是说,给变量赋值时使用一个等号,判断两个值是否相等时使用两个等号。一种常见的编码错误是,该使用其中一个运算符时使用了另一个。

 

 代码冰箱贴答案

有一个JavaScript程序的代码被随机地贴在冰箱上。你能将这些冰箱贴放到正确的位置上,组成一个生成如下输出的JavaScript程序吗?请对照本章末尾的答案,再继续往下阅读。答案如下。

{%}

 JavaScript填字游戏答案

{%}

所有的交流方法都戴着面具来参加晚会了。你能揭下它们的面具,将右边的描述与左边的名称正确地搭配起来吗?我们已经将一种交流方法与其描述搭配起来了。答案如下。

{%}

目录