JavaScript·Javascript 教程第 8 课 -- 追寻梦想＞编程乐园

JavaScript教程 - 第8课

　　关键词：HTML, JavaScript

　　可写成，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次拷贝程序。这里的函数使用变的即容易编辑又容易阅读。

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

(作者：N/A　来源：网络精英)