如果你学过代数，你一定见过变量。如果没学过也不要紧。变
量是JavaScript存储信息的简单方式。例如，当你写：
"x=2," "x"是一个变量，它存储值为2。如果而后你又说"y=x+3,"
"y"将具有值“5”
这里是一个使用变量的JavaScript例子。
在本例中我们一步一步浏览源码 你将看到:
<script language="JavaScript"> <!-- hide me
开始的这两行我们已经见过。这是任何JavaScript程序都必须
的序曲。
// load up some variables var secs_per_min = 60; var mins_per_hour = 60; var hours_per_day = 24; var days_per_year = 365;
第一行是一个注释。含义很明确。
下几行是变量申明，有几样事情需注意：
当首次用一变量时，应以“var”申明。
尽管以var 作为变量申明严格说并不必要，但这是一个好
习惯。当我们讨论接下来的两课时，我们将知道为什么。
变量必须以字母或强调性字符起始。
第一个字符后，变量须有数字。因此monkey_23即是合法的
变量名。
变量名多数是大小写敏感的，但对不同版本的JavaScript也不
尽然。
这意味着变量Loop和loop在有些浏览器中是不同的。一般
情况下，建议坚持使用一种命名习惯并保持不变。我本人
习惯使用变量间加下划线。其他人有喜欢变量间首字大
写的，如secsPerMin。
变量应描述其目的。
象 x, y, 或hack_hack_hack对想要了解你的语言的人来
说没有什么用。别使变量名太长以致敲起来费劲，但要长
到有一定的描述力。
在定义变量时就可赋于其一个值，也可今后在给出。
在该例中每个变量开始定义时就被赋于了值。不一定非
如此，今后的例子中我们将看到即使我们不知道其值，我
们也可很好的定义它。
语句以半括弧结束。
语句是JavaScript的表达句，半括弧是结束标志。空格和
空行是可被JavaScript编译器忽略的，他们仅是为人们读
起来方便，该例可被写成长长的一行，但即使加上注释，
看起来也会极其吃力。
结束前我要提一下有时半括弧是不必须的，你可能也注意
到有的人编的语句没有半括弧作为结束。但加上它是个好
习惯，这不仅是由于你的程序的可读性会好的多，这也可
减少空行，这些空行会塞满你的程序Webmonkey的习惯是
在每一语句后加上半括弧作为结束。
// do some calculations
var secs_per_day = secs_per_min * mins_per_hour * hours_per_day;
var secs_per_year = secs_per_day * days_per_year;
这里我们看到了一些基本的算术。每当JavaScript执行了该
语句，变量secs_per_year将是无论得到的什么数乘以60, 60,
24, 和 365。以后，无论何时遇到变量secs_per_year，它
将以这些巨大的数字替代。
// end hiding --> </script>
这里没什么新鲜的，是一个JavaScript片的结束。
这是该例中头文件中JavaScript的全部，当JavaScript执行这
些代码时，上述变量将被定义。但此时这些变量尚未做任何
事，这是在该例主体中要完成的事。
第三页：首个变量例子的程序主体
现在我们已经定义了变量，让我们用它来做一些事。
<script language="JavaScript">
<!-- hide me
这里介绍如何用JavaScript写变量和网页。
// here's how to use JavaScript to write out HTML
document.writeln("<b>The monkey dances ");
document.writeln(secs_per_year);
document.writeln(" seconds per year.</b><p>");
这里是关于这三行的兴趣点：
document.writeln() 对于网页写入插入词。
在document.writeln()中可作大量细节之事，但到此为止
你只需记住你是在<script>和</script>标签之间，必须
用document.writeln("blah!")在网页中写HTML
引号中的字符显现出来；引号外的字符被认为是变量。
注意在第一和第三行中，引号中的是我们想要显现的，
而secs_per_year无引号。因此JavaScript认为它是变量
并交换成变量值。幸好，在头文件中我们定义
了secs_per_year是一大数，因此可被显现，否
则JavaScript将报错。
引号中的任何字都被称为字符串，JavaScript不编译它。
本例中使用的是双引号(")，也可使用单引号(')，二者可
互换。若第二行中的是
document.writeln("secs_per_year")，JavaScript
将直接将secs_per_year显现，而不是31,536,000.
本例和字符的区别很重要，因此在我们继续下去之前，保
证你已读懂了这段。
这即是该例的概要。我们常见的一个问题是：“通常什么出现
在头文件中，什么出现在主体文件中？”
一般这关系不大。好的习惯是把大多数JavaScript放在页面的
头上。这是因为比主体要先读到，所以出现在主体中的变量
(如secs_per_min)都在头中定义了。当secs_per_min
在JavaScript试图执行document.writeln(secs_per_min)命令
后定义则JavaScript会报错。
好，现在我们准备作一个关于变量的练习，但首先再注意一下
字符串。
第四页：字符串的魔力
如前一节所提，引号间的字符都称为字符串，无论单双引号。
就如变量可为数字一样，它也可为字符串。因此可说：
var nice_monkey = "The monkey smiles at you and recites Shakespeare.";
var bad_monkey = "The monkey scowls at you and burps.";
申报变量时即给变量赋值，使它等于这些字符串，于是当你想
写这些字符串时，你可写：
document.writeln(nice_monkey);
这里是可用字符串做事的例子。
仔细看一看源码，你将常会发现一些新鲜，有趣的事。
看以下新鲜之处:
var monkey = prompt("What's the monkey's name?", "The monkey");
这里我们称为用户反馈提示方式，当它被调用时，启动一个对
话框请求用户输入信息。用户完成后敲OK返回信息。在上行中
返回信息放入其变量中。
注意该提示方式有两个变量，且都是字符串。第一个在对话框
输入区上面显示，本例中它是：“What's the monkey's
name?”。本例中第二个参数"The monkey"，放置输入框的缺
省值。如果你不想要缺省值，则在第二个参数加上引号，就象
这样：
var monkey = prompt("What's the monkey's name?", "");
下一行是直接变量分配，就象此前我们看到的：
var techy_monkey = monkey + demanding + tech;
该行介绍了一个字符串操作器：累加标记。当两个字符串间出
现累加标记时，则这两个变量出现在同一字符串中，这称为
“连锁”。于是上行创造了一个新的变量称为techy_monkey
含有包含上述三个变量的字符串。换一句话说，其结果即是
"The monkey" + "demands, no, insists upon receiving" +
"a computer that won't crash, and a homemade browser!"
var techy_monkey = monkey + demanding + tech;
于是也可说：
var techy_monkey = "The monkey demands, no, insists upon
receiving a computer
that won't crash, and a homemade browser!";
下面一段显示更多的使用字符串的诀窍。其工作原理是相同
的，我们只看三行：
var italic_hippy = hippy_monkey.italics();
var shouting_hippy= hippy_monkey.toUpperCase();
var red_bold_tech = bold_tech.fontcolor('red');
第一行是说：“使该字符串包含变量以斜体显示”，这实际上
即是：
var italic_hippy = "<i>" + hippy_monkey + "</i>";
但看起来要好的多！今后在JavaScript写document.writeln
(italic_hippy)时，你得到的是斜体显示的字符。
下一行讲述的技巧是在HTML中实现不了的，它使得hippy_monkey
中所有字符以大写显示
第三行显示改变字符串属性的例子。。所有的字符具有颜色，
你可用string.fontcolor('new color');命令改变其颜色。也
可这样作：
var red_bold_tech = "<font color='red'>" + bold_tech + "</font>";
但它阅读起来不如这样容易：
var red_bold_tech = bold_tech.fontcolor('red');
本例中除本行外你还可看到其他的应用：
document.writeln(bold_tech + "<br>");
它除替代显示一字符串外，还连接两个字符串然后显示结果。
也可写成两行，象这样：
var broken_bold = bold_tech + "<br>";
document.writeln(broken_bold);
但这要创建另一个变量，并不必要的写另一行。
现在我们已学习了所有的关于变量和字符串知识，请做一个练习
第五页：变量练习
请不要用HTML在<body> and </body>标签间写一个mad-lib。
当你完成该工作后，该开始if-then子句练习了。
第六页：if-then子句
"if-then"子句的应用可以使得程序根据用户输入的值作出不同
的反应。例如你可以写一段程序使得它对你与对其他人反应
不同。这里是它的基本格式：
if (some condition is true) { do something; do something; do something; }
本结构的重要部分: 以单词 "if"开始 (if 必须小写). 圆括弧中是条件：非真即伪。 如果条件为真的话执行花括弧中的语句。
记住：空格是唯一保持程序可读性的东西。当然你可以将整
个if-then语句写在一行中，但它读起来就费劲了。
这里是一个if-then子句的例子。
第七页：if-then语句的例子
如果你在即时对话框中键入yes，你将在看到本页其他部分前收
到一个亲切的问候。若敲入别的则没有。
这里是该语句的核心：
var monkey_love = prompt("你喜欢网猴吗？","敲入是
或否。");
if (monkey_love == "是")
{
alert("谢谢！很高兴您能来这儿！请往下读吧！");
}
第一行你见过。它唤起一个对话框并将用户的反馈调入变
量monkey_love中。但第二行就有些不同：它有个条件，即如果
变量monkey_love等于值"是" ，则运行花括号中的语句。若它
等于其他值，则不运行。
注意该条件中的两个等于标记，这是人们容易搞混的地方之
一。如果你只用一个标记，实际上是告诉JavaScript测试是
否monkey_love等于 "是"。幸运的是，多数浏览器在你运行这
些语句时会识别这些错误并警告你。但最好现在开始就注意别
犯这种错误。
其他重要的条件是：
(variable_1 > variable_2) is true if variable_1 is greater than variable_2
(variable_1 < variable_2) is true if variable_1 is less than variable_2
(variable_2 <= variable_2) is true if variable_1 is less than or equal to variable_2
(variable_1 != variable_2) is true if variable_1 does not equal variable_2
有两个方法可使你的条件更合理：
在运行花括号中的语句前如果你想要两件事为“是”，可这
样做：
if ((variable_1 > 18) && (variable_1 < 21))
{
document.writeln("variable_1 can vote, but can't drink.");
}
注意这里的两个“&&”在JavaScript中这是“与”的意思。也
注意整个子句有两个部分，&&须在圆括号中。
若想两件事之一为真，这样做：
if ((variable_1 == "bananas") || (variable_1 == "JavaScript"))
{
document.writeln("The monkey is happy because it has " + variable_1);
}
回到if-then 练习中来!
第八页：if-then练习
如果这些都没问题后, 那么开始作链结事件。
第九页：链结事件
一旦用户点击一个链结，或将鼠标移到其上，JavaScript发送
一个链结事件。一种链结事件叫做onClick, 当用户点击它时才
发送。另一种叫onMouseOver，用户将鼠标移到上面时即发送。
你可用这些事件来影响用户所见。这里是一个如何使用链结事
件的例子，试一试，再瞧瞧源码，然后我们来一行一行的复习。
第一个有趣的事情是没有<script> 标签。这是因为出现在
onClick 和 onMouseOver引号中的任何事度是可为JavaScripts
编译的。事实上句末前的半括号内允许你将JavaScripts写成
一行，你可将整个JavaScripts程序放在一个onClick的引号
内，但看上去会很难看。
请看第一行：
<a href="#" onClick="alert('Ooo, do it again!');">Click on me!</a>
这就象一个正式的定位标签，但它具有神奇的onClick=""这即
说“当某人点击该链结时运行该引号中的JavaScripts”注意
在alert后有一有一中止性的半括号。
也请注意在href=""的引号中没有东西，这表明虽然有链结，但
当你点击时那儿也去不了。
下一行是：
<a href="#" onMouseOver="alert('Hee hee!');">Mouse over me!</a>
这就象第一行，只是用onMouseOver代替onClick。
现在我们学完了链结事件，请进入奇妙的图片交替！
第十页：图片交换
JavaScripts的一个主要应用是其具有使你移动鼠标时图片自动
切换功能。不幸的是，微软的IE3.0不支持这种应用。用户最好
立即更新到IE4.0或改用Netscape 3.0。
这里是一个快捷的基本的图片交换例子。
让我们一步布的剖析这个例子，
第一行是：
<img src="button_r.gif" name="the_image">
这就象一个标准的 <img src= > 标签，只是它被给了一个名
字：the_image， 名字是任意取的：my_image, a_box......
但不许有任何空格在里面。
下一行是：
<a href="#" onMouseOver="document.the_image.
src='button_d.gif';">change</a>
这是图片交换发生的地方。就象你以前见到的onMouseOver。
出现在onMouseOver的引号中JavaScript主要之处是：
document.the_image.src='button_d.gif';
该句是说：“找到叫'the_image'的图片并将其src 变为
button_d.gif." 注意整个语句使用双引号，而'button_d.gif'
使用单引号。尽管二者可互换，但注意如果一组引号存在于另
一组引号之中，别搞混了。你可写成" 'something' "
或' "something" ' ，但不可写成：" 'something" ' or "
"something" ".明白了吗？
正如我没告诉你许多document.writeln() 工作细节一样，本
例我也没有告诉图片交换的工作原理。你将在下一讲关于“目
标导向编程”及“文件目标模块”中详述。
请注意！要交换的图片须和原图片尺寸一样！否则，它变形。
现在，该作今天的家庭作业了。
第十一页：练习2
欢迎你！
移动鼠标到下图，等到一个你喜欢的图，点击它。
你的家庭作业是写一个象这样的程序。这需要一些技巧，多花
些时间没关系。完成后，看一下本例的源码对比一下，然后到
第二讲的复习。
第十二页：复习
现在来复习一下今天所学到的。
变量
变量值可为数字或字符串。命名变量时它有一些限制和规
律需记住。
语句
语句以半圆括号结束。
字符串
字符串是引号标记中的做法序列，引号可是单引号，也可
是双引号。可用字符串作许多奇妙之事。你可用”＋“来
连接两个字符串。
document.writeln()
可用document.writeln() 来写文本和网页中的HTML。
prompt
你可用prompt来得到用户的输入反馈。
if-then-else
可用if-then-else子句使你的JavaScript依不同的用户反
应给予不同的表现。
链接事件
在一个href中的onClick和onMouseOver可基于用户反应运
行JavaScript。
图片变换
图片命名后，可用JavaScript改变所显示的图片。
如果你感到你已经全部掌握了上面我们所讲的，那么祝贺你！
还有许多东西要学。下一次，我们要切入JavaScript的心脏:
文件目标模块，我们也将学到如何打开并操作窗口和frames ,
并开始建造我们自己的新的浏览器。
本文地址：http://com.8s8s.com/it/it7818.htm