这一章将用简单的代码段来介绍每一个编程概念,它们都是用JavaScript写的(当然!)。

有一件事情怎么强调都不过分:在你通读本章时 —— 而且你可能需要花时间读好几遍 —— 你应当通过自己编写代码来实践这些概念中的每一个。最简单的方法就是打开你手边的浏览器(Firefox,Chrome,IE,等等)的开发者工具控制台。

提示: 一般来说,你可以使用快捷键或者菜单选项来启动开发者控制台。更多关于启动和使用你最喜欢的浏览器的控制台的细节,参见“精通开发者工具控制台”(http://blog.teamtreehouse.com/mastering-developer-tools-console)。要在控制台中一次键入多行,可以使用` + 来移动到下一行。一旦你敲击`,控制台将运行你刚刚键入的任何东西。

让我们熟悉一下在控制台中运行代码的过程。首先,我建议你在浏览器中打开一个新的标签页。我喜欢在地址栏中键入about:blank来这么做。然后,确认你的开发者控制台是打开的,就像我们刚刚提到的那样。

现在,键入如下代码看看它是怎么运行的:

  1. a = 21;
  2. b = a * 2;
  3. console.log( b );

在Chrome的控制台中键入前面的代码应该会产生如下的东西:

亲自尝试 - 图1

继续,试试吧。学习编程的最佳方式就是开始编码!

输出

在前一个代码段中,我们使用了console.log(..)。让我们简单地看看这一行代码在做什么。

你也许已经猜到了,它正是我们如何在开发者控制台中打印文本(也就是向用户 输出)的方法。这个语句有两个性质,我们应当解释一下。

首先,log( b )部分被称为一个函数调用(见“函数”)。这里发生的事情是,我们将变量b交给这个函数,它向变量b要来它的值,并在控制台中打印。

第二,console.部分是一个对象引用,这个对象就是找到log(..)函数的地方。我们会在第二章中详细讲解对象和它们的属性。

另一种创建你可以看到的输出的方式是运行alert(..)语句。例如:

  1. alert( b );

如果你运行它,你会注意到它不会打印输出到控制台,而是显示一个内容为变量b的“OK”弹出框。但是,一般来说与使用alert(..)相比,使用console.log(..)会使学习编码和在控制台运行你的程序更简单一些,因为你可以一次输出许多值,而不必干扰浏览器的界面。

在这本书中,我们将使用console.log(..)来输出。

输入

虽然我们在讨论输出,你也许还想知道 输入(例如,从用户那里获得信息)。

对于HTML网页来说,输入发生的最常见的方式是向用户显示一个他们可以键入的form元素,然后使用JS将这些值读入你程序的变量中。

但是为了单纯的学习和展示的目的 —— 也就是你在这本书中将通篇看到的 —— 有一个获取输入的更简单的方法。使用prompt(..)函数:

  1. age = prompt( "Please tell me your age:" );
  2. console.log( age );

正如你可能已经猜到的,你传递给prompt(..)的消息 —— 在这个例子中,"Please tell me your age:" —— 被打印在弹出框中。

它应当和下面的东西很相似:

亲自尝试 - 图2

一旦你点击“OK”提交输入的文本,你将会看到你输入的值被存储在变量age中,然后我们使用console.log(..)把它 输出

亲自尝试 - 图3

为了让我们在学习基本编程概念时使事情保持简单,本书中的例子不要求输入。但是现在你已经看到了如何使用prompt(..),如果你想挑战一下自己,你可以试着在探索这些例子时使用输入。