我们已了解变量可是数字、字符串及对象参数。还有一个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 //m.sbmmt.com/
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的。试一下本例,看一下源码。
document.image_name.src = 'some_image.gif';
为了做这事,每个图片都需命名到。若你不知要交换的图片名,但却知道其在HTML页中的顺序。可以用它的DOM数来指定该图片。
一个HTML文件中的第一个图片是document.images[0],第二个是document.images[1],如此类推。若你想知道一个文件中有多少个图片,你可检查图片数组长度知道:document.images.length。例如,你想改变你的网页中所有图形为一个Spacer GLF图片,你可以这样做:
for(loop=0; loop
document.images[loop].src = 'spacer.gif';
}
清楚了吧?
好。下一讲我们准备学习函数。
函数是编程需学的最后一个基本组成。所有的程序语言都是函数。函数是一些角次可调用的、无须重写的东西。
如果你想教会自己快速阅读并且用一个一旦点击可告诉你当前时间的长文本链接。
例如…时间!
看源码:
时间!
在这里这段JavaScript的工作细节并不重要;一会我们再回来复习一下。
重要的是它太长了。若这些时间链接再有10个,你须每次剪贴这段程序。这使你的HTML既长且难看。另外,若你想改变这段程序,就必须在10个不同地方改变。
你可以写一个函数来执行而不用作10次拷贝程序。这里的函数使用变的即容易编辑又容易阅读。
请看如何写一段计时函数。
该HTML页含有一个叫做announceTime的函数。从一个链接调用annoumnceTime:
时间!
就象这样:
下行看起来就象第二课:
Hello!
这称为从一个链接调用警告对话框。函数就象一种方法,唯一不同的是,方法依附于一个对象。在这个警告的例子中,这个对象是一个窗口对象。
让我们回到函数本身。如果你看看源码,你将看到函数位于HTML文件的头部中。
");
} else {
document.write("That's right!
");
}
} else {
document.write("That's right!
");
}
不幸的是如果你想不住地问直到得到正确答案,上述做法是不起作用的。假使你是想询问四次而不是两次,那这已经是
很讨厌的事了。你将使用四个层次的if语句,这决不是件好事。
反复做相似的事情的最好方法是使用一个循环(loop)。在这种情况下,你可以用一个循环来不断的要求口令直到这个人
说出为止。这里有一个while循环工作的例子,口令是:pass the wrench。
var password="pass the wrench";
var answer;
while (answer != password)
{
answer = prompt("What's the woyd?","");
}
在这个典型的Javascript中,我们从双变量声明开始:
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将没有数值。提前定义它并设定其处始值为“”。
由于不定义循环经常地使用,循环经常用来执行一组语句某一特定的次数。在接下来的教程中用另一个循环来演示如何作这项工作。
我们已见到了很多所请求的X`S(X`S是什么?说不清,原文如此--jsfan注),现在复习一下:
第一步:请求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 = "" (因为初始值为"")
loop=0 (因为初始值为0)
width=2 (用户赋的值)
0 比2小,所以
a_line = a_line + "x", 所以 a_line = "x"
loop=loop+1, 所以 loop = 1
返回循环:
第二次
loop=1
width=2
a_line = "x"
1比2小,所以
a_line = a_line + "x", so now a_line = "xx"
loop=loop+1, so now loop = 2
返回循环:
第三次
loop=2
width=2
a_line = "xx"
2不小于2,所以退出循环,继续向下执行:
随后是:
alert(a_line);
启动一个警告对话框。
这种循环运用的如此普遍以至于程序员们开发了一些简便方式,条件循环可写成这样:
while (loop < width)
{
a_line += "x"; //相当于 a_line = a_line + "x";
loop++; //相当于 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循环。
上例中while循环可以写成如下形式:
var a_line="";
var loop = 0;
while (loop < width)
{
a_line += "x";
loop++;
}
也可用For循环写成:
var a_line="";
for (loop=0; loop < width; loop++)
{
a_line += "x";
}
for循环的格式为:
for (initial value; test; increment)
{
do this stuff;
}
这样,上述for loop设置loop=0并持续加1直到loop
这是程序:
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("