JavaScript初级教程(第四课)第1/2页

我们已了解变量可是数字、字符串及对象参数。还有一个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的。试一下本例，看一下源码。 
    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.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);">时间!</a>
    在这里这段JavaScript的工作细节并不重要；一会我们再回来复习一下。
    重要的是它太长了。若这些时间链接再有10个，你须每次剪贴这段程序。这使你的HTML既长且难看。另外，若你想改变这段程序，就必须在10个不同地方改变。
    你可以写一个函数来执行而不用作10次拷贝程序。这里的函数使用变的即容易编辑又容易阅读。
    请看如何写一段计时函数。
    该HTML页含有一个叫做announceTime的函数。从一个链接调用annoumnceTime：
    <a href="#" onClick="announceTime();">时间!</a>
    就象这样：
    下行看起来就象第二课：
    <a href="#" onClick="alert('Hello!');">Hello!</a>
    这称为从一个链接调用警告对话框。函数就象一种方法，唯一不同的是，方法依附于一个对象。在这个警告的例子中，这个对象是一个窗口对象。
    让我们回到函数本身。如果你看看源码，你将看到函数位于HTML文件的头部中。
    <html>
        <head>
            <title>无参数函数</title>
            <script langauge="JavaScript">
            <!-- hide me
                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 the_second = the_date.getSeconds();
                    //put together the string and alert with it
                    var the_time = the_hour + ":" + the_minute + ":" + the_second;
                    alert("The time is now: " + the_time);
                }
            // show me -->
            </script>
        </head>
        <body>
        ...
        </body>
    </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"
    该例用了一个只有一个参数的函数。实际上你可以为函数设置多个参数。下一讲我们将要讲多于一个参数的函数。

当前1/2页 12下一页阅读全文