JavaScript教程

keaide

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

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

让我们从循环开始。

keaide

第二页：循环介绍
有时你想反复做同一件事。你想向某些人询问一个口令，你不
断地问，直到得到正确的口令。如果你只想给他们两次尝试的
机会，你可以这么做：


      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!<p>";

        } else {

                document.write("That's right!<p>";

        }

} else {

        document.write("That's right!<p>";

}


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

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

keaide

第三页：循环的密码
那就是密码！

让我们逐行地来研究这个例子，如果你想看整个答案，可以查看源码。

在这个典型的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将没有数值。提前定义它并
设定其处始值为“”。

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

keaide

第四页：再谈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循环。

keaide

第五页：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”。

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

keaide

第六页：嵌套循环
这是程序：


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次。

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

keaide

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

keaide

第八页：数组
我们已了解变量可是数字、字符串及对象参数。还有一个
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";



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

keaide

第九页：数组和循环
数组是一项非常有用的东西，因为你可以循环调用数组中的各
个元素执行某项功能。以下是循环显示一个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）的各个
方面。>>

keaide

第十页：文件目标模块中的数组
下面是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';

}


清楚了吧？

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

进入函数学习课程。