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下一页阅读全文

赞 (0)

相关推荐

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

    我们已了解变量可是数字.字符串及对象参数.还有一个Javascript的重要部分:数组.     数组是一种列表.各种列表比如名单.URL以颜色列表都可以存储在数组中.      这里我们生成颜色的数组:     var colors = new Array("red","blue","green");     现在你就有了一个数组,你能对它做什么呢?数组的优点在于数组中的各个元素可以通过数字调用.第一个元素的数字是0,可以用以下方式调用:   

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

    本课的目的是调用目标名,本例中即窗口名yer_new_window. 既然我们已经简单的重温了一下href目标, 那么该开始学习在JavaScript中打开窗口. 在HTML中打开窗口应用极为普遍,但也有一些缺陷:用户浏览器决定窗口看起来是什么样的,你左右不了其窗口的大小及式样.幸运的是,JavaScript给了你这种控制权. 看一看其原由: window.open("URL","name","features"); 本语句以你调用时采用的第一个

  • JavaScript初级教程(第五课)第1/4页

    现在你已经了解了计算机编程的基本知识.我们接下来继续研究一下文档对象模型(Document Object Model-DOM).DOM的点击关系起始于窗口对象在每个窗口对象中是一个文档对象(Document object).我们将重点谈谈文档对象,看看如何利用它从你的用户获得各项信息,并且动态显示新的信息. 我们已经看过文件对象的一个属性-图象数组(Images array).在第3课中,文件中第1个图象可以通过改变其src属性被修改. 例: window.document.images[0].

  • JavaScript进阶教程(第四课第一部分)

    在以前的课程中,我们学习了对文本和字符串的各种操作,今天我们专注于两种不同的数据类型:图象和对象.学完这一课,你将知道如何: 使用JavaScript来加速图象交换. 创建你自己的对象来使脚本易于理解. 使用关联数组来快速存取脚本中的每一个对象. 使用JavaScript做图象变换的一个主要问题是,它直到需要换图时才去告诉浏览器下载那张图象.如果你有一张大的图象,想在鼠标滑过一副图象时调出来,浏览器得临时下载这张图,这可能会花一定时间从而使滑动效果大打折扣. 如果你的连接速度较慢,而你要调入的是

  • JavaScript初级教程(第五课续)第1/3页

    在JavaScript中单选框的用法和复选框相似.不同之处在于HTML中的应用.复选框是一种开关.如果一个复选框被选中,你可以再点击后取消选取. 但如果单选框被选中,则只能通过选取另外一个单选框才能取消对该单选框的选取.例: Larry    Moe    Curly 在该例中,如果你打算取消对一个单选框的选取,你必须点击另一个单选框.再看下面的程序: Light off    Light on 表单代码如下: <form name="form_1">        <

  • javascript asp教程第四课 同时使用vbscript和javascript

    开始: 你能让javascript和vbscript实现从同一个表格里传出音乐.看看下面的脚本: function JSGreeting() { return "Greetings from a JavaScript Function"; } Function VBGreeting() VBGreeting="Greetings from a VBScript Function" End Function Function toDollars(x) toDollar

  • JavaScript进阶教程(第三课)第1/2页

    事件的定时以及浏览器的识别 随着我们所掌握的JavaScript日渐丰富,我们可以编制出越来越复杂的应用程序.上次的课程中我们学习了如何利用JavaScripts编写Cookies.今天我们将学习如何加入定时功能.给时间定时的能力在浏览器中非常有用,而在动态HTML应用中发挥更大的功用. 你可能会注意到动态HTML可以在页面中移动不同的内容.在JavaScript中将某个物体在屏幕中移动需要用到一个循环(loop),用循环的功能使物体随着时间推移移动.但是你如何告诉JavaScript将某个物体

  • javascript asp教程第三课 new String() 构造器

    javascript asp教程第三课 new String() 构造器

    开始:new String() 是本课程计划中较早出现的另一个让人感觉到奇怪的地方.但和转义字符一样, new String()是创建一个成功的asp javascript应用的必须元素.下面是本课的两个脚本:下面是实际上承担重量的脚本:行为中的new String( ):现在我们来看看下面的asp行.Request.Form 我们将在后面有独立的课程来讲授.下面才是我们现在要讲的重点.在request.form中所持有的数据(来自用户的数据)并不是一个javascript数据类型.相反,它是一

  • JavaScript初级教程(第二课)第1/7页

    上一讲我们学了JavaScript出现在何处,看起来象什么.现在我们开始学习这种语言.本课我们将学习JavaScript如何存储信息,如何根据信息作决定,如何根据用户交互要求交替图片     准备好了吗? 现在开始学习电脑编程基础. 第一讲, 变量.     如果你学过代数,你一定见过变量.如果没学过也不要紧.变量是JavaScript存储信息的简单方式.例如,当你写:"x=2," "x"是一个变量,它存储值为2.如果而后你又说"y=x+3,",

  • JavaScript初级教程(第一课)第1/4页

    交互性!多数网站声称交互性即当你点击一个链接时到达一个新的页面,但严格道来甚至当网页中具有CGI语言时也并不意味它真正具有交互性.填好表格,按提交钮,等待......这就像往海中扔一个瓶子等候它自己飘回来一样. 幸运的是,现在我们有了Javascript, 于是网页可真正如你希望的那样交互作用.当鼠标移动到哪里,图片交换,表格元素在传递过程中即相互影响,无须等待CGI回复结果计算即可进行.没有任何提交 - 等待过程 - 任何事只是在你使用它时发生. Javascript最杰出之处在于你可以用很小

随机推荐