这一章将用简单的代码段来介绍每一个编程概念,它们都是用JavaScript写的(当然!)。
有一件事情怎么强调都不过分:在你通读本章时 —— 而且你可能需要花时间读好几遍 —— 你应当通过自己编写代码来实践这些概念中的每一个。最简单的方法就是打开你手边的浏览器(Firefox,Chrome,IE,等等)的开发者工具控制台。
提示: 一般来说,你可以使用快捷键或者菜单选项来启动开发者控制台。更多关于启动和使用你最喜欢的浏览器的控制台的细节,参见“精通开发者工具控制台”(http://blog.teamtreehouse.com/mastering-developer-tools-console)。要在控制台中一次键入多行,可以使用`来移动到下一行。一旦你敲击
让我们熟悉一下在控制台中运行代码的过程。首先,我建议你在浏览器中打开一个新的标签页。我喜欢在地址栏中键入about:blank
来这么做。然后,确认你的开发者控制台是打开的,就像我们刚刚提到的那样。
现在,键入如下代码看看它是怎么运行的:
a = 21;
b = a * 2;
console.log( b );
在Chrome的控制台中键入前面的代码应该会产生如下的东西:
继续,试试吧。学习编程的最佳方式就是开始编码!
输出
在前一个代码段中,我们使用了console.log(..)
。让我们简单地看看这一行代码在做什么。
你也许已经猜到了,它正是我们如何在开发者控制台中打印文本(也就是向用户 输出)的方法。这个语句有两个性质,我们应当解释一下。
首先,log( b )
部分被称为一个函数调用(见“函数”)。这里发生的事情是,我们将变量b
交给这个函数,它向变量b
要来它的值,并在控制台中打印。
第二,console.
部分是一个对象引用,这个对象就是找到log(..)
函数的地方。我们会在第二章中详细讲解对象和它们的属性。
另一种创建你可以看到的输出的方式是运行alert(..)
语句。例如:
alert( b );
如果你运行它,你会注意到它不会打印输出到控制台,而是显示一个内容为变量b
的“OK”弹出框。但是,一般来说与使用alert(..)
相比,使用console.log(..)
会使学习编码和在控制台运行你的程序更简单一些,因为你可以一次输出许多值,而不必干扰浏览器的界面。
在这本书中,我们将使用console.log(..)
来输出。
输入
虽然我们在讨论输出,你也许还想知道 输入(例如,从用户那里获得信息)。
对于HTML网页来说,输入发生的最常见的方式是向用户显示一个他们可以键入的form元素,然后使用JS将这些值读入你程序的变量中。
但是为了单纯的学习和展示的目的 —— 也就是你在这本书中将通篇看到的 —— 有一个获取输入的更简单的方法。使用prompt(..)
函数:
age = prompt( "Please tell me your age:" );
console.log( age );
正如你可能已经猜到的,你传递给prompt(..)
的消息 —— 在这个例子中,"Please tell me your age:"
—— 被打印在弹出框中。
它应当和下面的东西很相似:
一旦你点击“OK”提交输入的文本,你将会看到你输入的值被存储在变量age
中,然后我们使用console.log(..)
把它 输出:
为了让我们在学习基本编程概念时使事情保持简单,本书中的例子不要求输入。但是现在你已经看到了如何使用prompt(..)
,如果你想挑战一下自己,你可以试着在探索这些例子时使用输入。