JavaScript 基础教程第四课

来源：Blog作者：Blog 发布时间:2008-04-15 02:48:56

第一页：第四课介绍

对于Java script来说有两个主要部分：该语言本身及其目
标库。在第2课介绍的语法中，我们已研究了变量，语句
和if-then子句，这些是任何程式设计语言的组成部分。现在来
学习Java script语法的其余部分。

对于Java script语法来说，我们仅剩下三个问题需要学习：
循环、数组和函数。

让我们从循环开始。

第二页：循环介绍

有时您想反复做同一件事。您想向某些人询问一个口令，您不
断地问，直到得到正确的口令。假如您只想给他们两次尝试的
机会，您能够这么做：

var the_password = "pass the wrench";

var answer = prompt("What’s the woyd?","");

if (answer != the_password) {

answer = prompt("What’s the woyd?","");

if (password != the_password) {

document.write("You lose!

");

} else {

document.write("That’s right!

");

}

} else {

document.write("That’s right!

");

}

不幸的是假如您想不住地问直到得到正确答案，上述做法是不
起作用的。假使您是想询问四次而不是两次，那这已是很讨
厌的事了。您将使用四个层次的if-then 子句，这决不是件好事。

反复做相似的事情的最好方法是使用一个循环(loop)。在这种
情况下，您能够用一个循环来不断的需要口令直到这个人说出
为止。这里有一个while循环工作的例子，口令是：pass the
wrench。

第三页：循环的密码

那就是密码！

让我们逐行地来研究这个例子，假如您想看整个答案，能够查看源码。

在这个典型的Java script序言之后，我们从双变量申报开始：

var password="pass the wrench";

var answer;

这里我们定义该密码作为一个字符串，我们申报一个称为
answer的变量。您将理解为什么我们不得不立即申报一
个answer。下面几行是很重要的：

while (answer != password)

{

answer = prompt("What’s the woyd?","");

}

这是个while循环。while 循环的一般格式为：

while (some test is true)

{

do the stuff inside the curly braces

}

上述几行表明：“当answer不等价于Password时，执行提示
命令。”这一循环将持续地执行波形括号内的语句直至测试
失败。在使用者输入的单词和密码一致(即Pass the wrench)的
情况下，测试必将失败。

由于在对一个未申报的变量执行一个如(answer!=password)的
测试时，在某些浏览器上会产生错误，所以我们必须申
报answer。由于在while循环中将通过提示方案对answer赋值，
在我们第一次进行循环中，answer将没有数值。提前定义他并
设定其处始值为“”。

由于不定义循环经常地使用，循环经常用来执行一组语句某一
特定的次数。这里用另一个循环来演示怎样作这项工作。

第四页：再谈WHILE循环

我们已见到了很多所请求的X`S，现在复习一下：

第一步：请求X`S的数目

var width = prompt("How many x’s would you like? (1-10 is
good)","5");

下一步，申报一些变量：

var a_line="";

var loop = 0;

现在，关键之处：

while (loop < width)

{

a_line = a_line + "x";

loop=loop+1;

}

即说：“当变量循环小于所请求的X`S行宽时，在该行加入另一
X然后在循环值上加1。”该循环将继续加一X到该行并在循环值
上加1直到循环不在小于请求的行宽。请看下列源码分析：

第一次

a_line = "" (because we initialized it to be "")
loop=0 (because we initialized it to be 0)
width=2 (because that’s what the user asked for)
0 is less than 2 so
a_line = a_line + "x", so now a_line = "x"
loop=loop+1, so now loop = 1

返回循环：第二次

loop=1
width=2
a_line = "x"
1 is less than 2 so
a_line = a_line + "x", so now a_line = "xx"
loop=loop+1, so now loop = 2

返回循环：第3次

loop=2
width=2
a_line = "xx"
2 is NOT less than 2 so
fall out of the loop and do what follows

随后是：

alert(a_line);

启动一个警告对话框。

这种循环运用的如此普遍以至于程式员们研发了一些简便
方式，条件循环可写成这样：

while (loop < width)

{

a_line += "x"; //this was a_line = a_line + "x";

loop++; //this was loop=loop+1;

}

首行，“x”，表示“本身加x”。若已有a_number=5，那么可
写成，a_number+=3，即是说：a_number=a_number+3。程式员
就是这么偷懒的。

下行，loop++，意味着“自身加1”。于是loop++即为：
loop=loop=1。他也可写成loop+=1。这样偷懒行为很有效。

就象不止一种方式在一个数上加1相同，也有不止一种方法来写
一个循环。While循环不是唯一的循环模式，另一流行的循环
是for循环。

第五页：For循环

上例中while循环能够写成如下形式：

var a_line="";

var loop = 0;

while (loop < width)

{

a_line = a_line + "x";

loop=loop+1;

}

也可用For Loop写成：

var a_line="";

for (loop=0; loop < width; loop++)

{

a_line = a_line + "x";

}

for循环的格式为：

for (initial value; test; increment)

{

do this stuff;

}

这样，上述for loop配置loop=0并持续加1直到loop和上例中while loop相同，仅是少了数行而已。都表示
“在a_line上加width次x”。

在我们练习使用循环之前应明白一件事：循环能够嵌套。这里
有一个关于嵌套循环的例子。

第六页：嵌套循环

这是程式：

var height = prompt("How high do you
want the grid? (1-10 is good)","10");

var width= prompt("How wide do you want
the grid? (1-10 is good)","10");

var a_line;

var new_window =
window.open("/webmonkey/98/04/files1a
/grid.html","looper","width=400,height=400");

new_window.document.writeln("

A Grid

");

for (height_loop = 0; height_loop
< height; height_loop++)

{

a_line = "";

for (width_loop = 0;
width_loop < width; width_loop++)

{

a_line+="x";

}

new_window.document.writeln
(a_line + "
");

}

在请求高及宽后，打开一新窗口，并为他写一个头，进入for
循环。第一个for循环设a_line=“”。试一下不用该行做一下
本例，看看会发生什么。在初始化a_line后，程式进入下一个
for循环，当宽达到所需值后，建立X`S行并将他显现在新窗
口中。这些将发生height次。

好，现在您的任务：看一下这个循环练习并亲自试着在看源码
前写一个。

第七页：循环练习

循环练习程式需要一些字然后反向显示。试着自己写一下程
序，再看源码了解其原理。问题不大了吧，现在开始学习数组。

第八页：数组

我们已了解变量可是数字、字符串及对象参数。更有一个
Javascript的重要部分：数组。

数组是一种列表。各种列表比如名单、URL以颜色列表都能够存
储在数组中。

这里我们生成颜色的数组：

var colors = new Array("red","blue","green");

现在您就有了一个数组，您能对他做什么呢？数组的长处在于
数组中的各个元素能够通过数字调用。第一个元素的数字是0，
能够用以下方式调用：

var the_element = colors[0];

执行这一行JavaScript指令时，变量the_element所被赋予的值
是字符串"red" 。通过写出数组的名称并将数组中元素的顺序号
放在方括号内就可调用数组中的该元素。数组中第2个元素的顺
序号是1。

一旦生成数组后，您能够添加和修改数组值。假如您打算将颜
色数组的第1个元素有红色该为紫色，您能够这样做：

colors[0] = "purple";

数组经常用于循环。下文将讲数组和循环的应用。

第九页：数组和循环

数组是一项很有用的东西，因为您能够循环调用数组中的各
个元素执行某项功能。以下是循环显示一个URL数组中的各个元素
的例子。

首先，要使该例子发挥作用，我们需要声明一些变量：

var url_names = new Array("hits.org","awaken.org","bianca.com");

var a_url;

接下来，我们循环调用数组中的各个元素，打开每
个URL并对待用户点击alert框的OK按钮：

for (loop = 0; loop
{

// make the name of a url, for example http://www.hits.org/

a_url = "http://www." + url_names[loop] + "/";

// open a window

var new_window=open(a_url,"new_window","width=300,height=300");

// wait for the click

alert("hit ok for the next site");

}

首先，您会注意到循环从0一直到url_names.length这个变量。
将.length放在数组名的后面由于告诉您数组中有多少个元素。
但是，注意数组元素的数目同数组最后一个元素的索引号（顺
序号）不同。假如数组中有3个元素，则数组的长度为3，但是
数组中最后一个元素的索引号却是array[2].。这是因为数组中
第1个元素的索引号是array[0].。假如您执行数组调用时得到
诸如"object not found" 的错误信息，而您的代码中有一个
数组，则有可能是因为您将数组元素的索引号同数组中元素的
数目混淆了。

不也许还会注意到将.length放在数组的结尾处很有点想给一个
对象附加一些属性。这是因为数组本身就是对象，而length就
是数组的一项属性。

数组术语对象的另一个表现是：您需要用新指令才能生成新的
数组。在上例中，url_names = new Array(......) 实际能够
解释为：生成一个新数组，用url_names对其做一个引用。您可
以注意到单词"new" 以这种方式被应用时，就生成了一个新的
对象。

循环中的第1行生成一个变量。其赋值为一个字符串。

a_url = "http://www." + url_names[loop] + "/";

循环开始时，变量循环的初始值为0。url_names数组的第1个元
素是字符串"hits.org".，所以在第一次循环中，变量a_url等
值于字符串"http://www.hits.org/".。

循环的下一行用该URL打开一个窗口

var new_window=open(a_url,"new_window","width=300,height=300");

由于每次打开窗口时我们给窗口起的名称都相同，所以在转到
新的URL时，不会打开许多窗口。假如我们在上例中去掉窗口
名称"new_window"，则每次循环时就会打开一个新窗口。

循环的第3行只是打开一个alert框，并对待用户点击OK 按钮。

数组还能够由于其他元素，而不只是字符串。数组能够应用
于JavaScript文档对象模块（Document Object Model）的各个
方面。>>

第十页：文档目标模块中的数组

下面是onClick=""链接中的代码：

var change=prompt(’Change which image (0 or 1)?’,’’);

window.document.images[change].src=’three.jpg’;

本例打算用图片交换来演示数组怎样介入DOM的。假如您用的
是IE3.0或Netscape2.0，赶紧升级。试一下本例，看一下源码。

document.image_name.src = ’some_image.gif’;

为了做这事，每个图片都需命名到。若您不知要交换的图片
名，但却知道其在HTML页中的顺序。能够用他的DOM数来指定该
图片。

一个HTML文档中的第一个图片是document.images[0]，第二个
是document.images[1]，如此类推。若您想知道一个文档中有
多少个图片，您可检查图片数组长度知道：
document.imageslength。例如，您想改变您的网页中任何图像
为一个Spacer GLF图片，您能够这样做：

for (loop = 0; loop < document.images.length; loop++)

{

document.images[loop].src = ’spacer.gif’;

}

清楚了吧？

好。下面我们准备三步是函数。函数学习中，我们要做一些
练习，并有一些作业。

进入函数学习课程。

第十一页：函数

函数是编程需学的最后一个基本组成。任何的程式语言都是
函数。函数是一些角次可调用的、无须重写的东西。

假如您想教会自己快速阅读并且用一个一旦点击可告诉您当前
时间的长文本链接。

例如…时间!

看源码：

time!

在这里这段JavaScript的工作细节并不重要；一会我们再回来
复习一下。

重要的是他太长了。若这些时间链接再有10个，您须每次剪贴
这段程式。这使您的HTML既长且难看。另外，若您想改变这段
程式，就必须在10个不同地方改变。

您能够写一个函数来执行而不用作10次拷贝程式。这里的函数
使用变的即容易编辑又容易阅读。

请看怎样写一段计时函数。

第十二页：无参数函数

该HTML页含有一个叫做announceTime的函数。从一个链接调用
annoumnceTime：

time!

就象这样：

下行看起来就象第二课：

Hello!

这称为从一个链接调用警告对话框。函数就象一种方法，唯一不
同的是，方法依附于一个对象。在这个警告的例子中，这个对象
是个窗口对象。

让我们回到函数本身。假如您看看源码，您将看到函数位于HTML
文档的头部中。

Function with No Parameters

...

好，让我们逐行复习这个函数。首先，任何函数来自于该种格式：

function functionName(parameter list)

{

statements ...

}

函数的命名规则于变量差不多。第一个字符必须是字母或一标准符
号。其余字符可为数字或一横线。但必须确保函数不于已定义的变
量同名。否则将出现很糟糕的结果。我是用内部大写的方式命名函
数以确保他们不和字符碰巧重名。

函数名后是一组参数。本例是无参数的函数，下一例中我们再举例
描述。

参数后是函数的主体。这是一组当函数调用后是想运行的语句。在
下面几个例子中，我打算利用这个报时器，所以让我描述一下他是
怎样工作的。

第一行：

var the_date = new Date();

取得一个新的日期对象。就象您在用数组时取得一个新的数组一
样，在您要找出实时是什么时间时您需要先取得一个日期对象。
当找到了一个新的日期对象，他自动重置到当前的日期和时间。
为了在对象以外得到这个信息，您必须使用这种对象方法：

这些方法从日期对象上取得了合适的数字。

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var the_second = the_date.getSeconds();

您可能疑惑：我怎样能假定日期对象知道何种方式？甚或我怎样
知道有这样一件事可作为日期对象？这些缘由应从Javascript
库中获取，我将尽我所能解释内置Javascript对象，但不一定能
完全的使您清楚。

函数的其他部分就很清楚了。他以这种方式调用返回数字，把他
们变成字符串，并且调用警告方式以弹出一个字符串对话框。注
意您能够在函数内部调用一个方式和函数。我们将详尽讨论。

现在假如您也玩透了时间链接，您可能注意到了有些什么不对的
事。您每次可能会得到这样的反馈：“12:12:04”，这是
getSecond()将返回值为“4”。那么当您合成为时间时，您看到
的就是the_minute+“:”+the_second得到14:4而非是我们想要
的。解决他是个容易的事，需要个新的函数来修补分、秒合成值。

请看参数及返回值。

第十三页：参数及返回值

尽管无参数的函数在减少写源码工作量，HTML源码可读性上很
有用，但有参数的函数会更为有用。

上一例中，当返回的分、秒值小于10时会有问题发生。我们想
要看到的秒值是04而非4。我们能够这样做：

var the_minute = the_date.getMinutes();

if (the_minute < 10)

{

the_minute = "0" + the_minute;

}

var the_second = the_date.getSeconds();

if (the_second < 10)

{

the_second = "0" + the_second;

}

他会很有效。但是注意，同样的源码您写了两次：若某件
东西小于10，则前面加“0”。所以要考虑当用同一代码要多
次重写时，用函数来做。本例中我写了一个叫fixNumber的函数：

function fixNumber(the_number)

{

if (the_number < 10)

{

the_number = "0" + the_number;

}

return the_number;

}

fixNumber的参数是the_number。一个参数也是个变量，当该
函数被调用时，其参数值也被配置。在本例中，我们这样调用
函数：

var fixed_variable = fixNumber(4);

参数the_number在函数中配置为4。到现在您应该对fixNumber
的主体有了一定的了解。他的意思是：假如变量the_number小
于10，则在他的前面加一个0。这里面新的内容是return指令：
返回the_number的值。在下面的情况中就会用到return指令：

var some_variable = someFunction();

变量some_variable的值是函数someFunction() 的返回值。
在fixNumber中，我加入: return the_number，则退出函数并
将返回the_number的值返回给任何一个等待被配置的变量。
所以，我这样书写代码：

var fixed_variable = fixNumber(4);

the_number的初始值将通过函数调用被配置为4，然后由于4小
于10，所以the_number将被改为"04"。然后the_number值被
返回，而且变量fixed_variable将被配置为"04" 。

为了将fixNumber包括在原始函数announceTime()中，我添加了
如下内容：

function announceTime()

{

//get the date, the hour, minutes, and seconds

var the_date = new Date();

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var fixed_minute = fixNumber(the_minute);

var the_second = the_date.getSeconds();

var fixed_second = fixNumber(the_second);

//put together the string and alert with it

var the_time = the_hour + ":" + fixed_minute + ":" + fixed_second;

alert("The time is now: " +the_time);

}

假定时间链接被点击时，时间为12:04:05。用new Date()获得
日期，用getHours()获得小时，用前面所属方法获得分钟，分
钟在本例中应该是4, 然后调用fixNumber，其参数为the_minute:

var fixed_minute = fixNumber(the_minute);

当fixNumber()被调用时，参数the_number被配置为the_minute。
在本例中由于the_minute是4，所以the_number将被配置为4。
配置完参数后，我们进入函数主体。由于4小于10，the_number
被改变为"04"，然后the_number值用return指令返回。当"04"
被fixNumber返回后，本例fixed_minute就等于"04"。

我们一步一步来研究该过程。假定时间为12:04:05。

我们从函数announceTime()开始

the_minute = the_date.getMinutes();则the_minute = 4
fixed_minute = fixNumber(the_minute);等于函
数fixNumber()并将其值返回给fixed_minute
现在进入函数fixNumber()
函数fixNumber(the_number)fixNumber()用the_minute的
值调用，the_minute值是4，所以现在the_number = 4
假如(the_number < 10) {the_number = "0" +
the_number;}由于4小于10，所以the_number现在等于"04"
返回the_number值，退出该函数并返回值"04"
现在已退出函数fixTime()，所以现在我们回
到announceTime()
该函数返回值为"04"，所以fixed_minute 现在等于"04"
该例用了一个只有一个参数的函数。实际上您能够为函数
配置多个参数。例如该函数输入两个数组并返回一个元素
列表。

第十四页：多于一个参数的函数

这是我定义的一个数组：

var monkeys = new Array("mattmarg","wendy",
"kristin","tim","aaron", "luke");

var kittyphile = new Array("wendy", "ruby",
"roscoe", "tim");

var discophile = new Array("mattmarg",
"john travolta", "wendy");

var happy = new Array("tim", "wendy",
"stimpy", "aaron");

var cranky = new Array("ren", "mattmarg","luke");

随着这些数组的定义，arrayIntersect函数给出，我们可轻
而易举的发现那些网猴酷爱迪斯科：爱跳舞的网猴

注意到尽管John Travolta喜爱迪斯科，但他不在monkeys请
单中，则他就不是只爱跳舞的网猴为调用该函数值，可这么来：

dancing monkeys

这是个具备3个参数的函数：一个代表交叉的姓名，第一个数组，
及第二个数组。这也很容易发现爱猫的网猴名爱猫的网猴。

看一下源码：

cat-loving monkeys

让我们看看arrayIntersect函数本身：