JavaScript初级教程(第四课)_基础知识

我们已了解变量可是数字、字符串及对象参数。还有一个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.php.cn/
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文件的头部中。
    
        
            
            
        
        
        ...
        
    
    好，让我们逐行复习这个函数。首先，所有函数来自于该种格式：
    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()开始
1.the_minute = the_date.getMinutes();则the_minute = 4
2.fixed_minute = fixNumber(the_minute);等于函数fixNumber()并将其值返回给fixed_minute
现在进入函数fixNumber()
3.函数fixNumber(the_number)fixNumber()用the_minute的值调用，the_minute值是4，所以现在the_number = 4
4.如果(the_number < 10) {the_number = "0" + the_number;}由于4小于10，所以the_number现在等于"04"
5.返回the_number值，退出该函数并返回值"04"
现在已经退出函数fixTime()，所以现在我们回到announceTime()
6.该函数返回值为"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函数本身： 
    function arrayIntersect(intersect_name, array_1, array_2)
    {
        var the_list = "";
        for (loop_1=0; loop_1 {
for (loop_2=0; loop_2 {
if (array_1[loop_1] == array_2[loop_2])
{
the_list = the_list + array_1[loop_1] + " ";
}
}
}
alert("the " + intersect_name + " are: "+ the_list);
}
看看你是否已经弄懂本例中的循环。关键是函数第一行：
function arrayIntersect(intersect_name, array_1, array_2)
这里定义了一个叫arrayIntersect的函数，它有3个参数。就象上例，每个参数就象一个变量，当函数调用时赋值。因此，当函数被调用时：
arrayIntersect('dancing monkeys',monkeys,discophile);
下列分配：
intersect_name = 'dancing monkeys'
array_1 = monkeys
array_2 = discophile
唯一需注意的是，你必须以正确的参数数目来调用函数。如果你一旦象这样调用arrayIntersect：
arrayIntersect(monkeys,discophile);
将会出错。试一下看会发生什么错误。
在任一标准的Javascript程序中，函数都是基本的部件。因此理解其工作原理极其重要。第四课就到此结束了。
对于JavaScript来说有两个主要部分：该语言本身及其对象。在第2课介绍的语法中，我们已经研究了变量，语句和if
语句，这些是所有程序设计语言的组成部分。现在来学习Java script语法的其余部分。
对于JavaScript语法来说，我们仅剩下三个问题需要学习：循环、数组和函数。
让我们从循环开始。
有时你想反复做同一件事。你想向某些人询问一个口令，你不断地问，直到得到正确的口令。如果你只想给他们两次尝
试的机会，你可以这么做：
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语句，这决不是件好事。
    反复做相似的事情的最好方法是使用一个循环(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("

A Grid

");
    for (height_loop=0; height_loop< height; height_loop++)
{
a_line = "";
for(height_loop=0; height_loop {
a_line+="x";
}
new_window.document.writeln(a_line + "
");
    }
在请求高及宽后，打开一新窗口，并为它写一个头，进入for循环。第一个for循环设a_line=“”。试一下不用该行做一下本例，看看会发生什么。在初始化a_line后，程序进入下一个for循环，当宽达到所需值后，建立X`S行并将它显现在新窗口中。这些将发生height次。