第四课

---《网猴》

可写成，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<width，这
和上例中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("<h1>A Grid</h1>");

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 + "<br>");

}

在请求高及宽后，打开一新窗口，并为它写一个头，进入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 <url_names.length; 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';

}

清楚了吧？

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

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

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

例如…时间!

看源码：

<a href="#" onClick="

var the_date = new Date();

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var the_second = the_date.getSeconds();

var the_time = the_hour + ':' + the_minute + ':' + the_second;

alert('The time is now: ' + the_time);">time!</a>

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

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

你可以写一个函数来执行而不用作10次拷贝程序。这里的函数
使用变的即容易编辑又容易阅读。

请看如何写一段计时函数。