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

    现在你已经了解了计算机编程的基本知识。我们接下来继续研究一下文档对象模型（Document Object Model－DOM）。DOM的点击关系起始于窗口对象在每个窗口对象中是一个文档对象（Document object）。我们将重点谈谈文档对象，看看如何利用它从你的用户获得各项信息，并且动态显示新的信息。

    我们已经看过文件对象的一个属性－图象数组（Images array）。在第3课中，文件中第1个图象可以通过改变其src属性被修改。

    例：

    window.document.images[0].src='some_new_picture.gif';

    该命令将把文档中的第1个图象改成一个名为some_new_picture.gif的新图象。在DOM中，图象数组中的每个图象也是对象。所以images[0].src指令象对对象那样发挥作用，它的意思就是：从Image数组中调用Image的中的对象image[0]，并设定其src属性。将其翻译过来即：从该窗口中调用文档（document）属性，从该文档的图象数组中调用第1幅图象，并将其src属性该为图象some_new_picture.gif。

    Image对象还有其它很多有趣的属性，例如，你可以让JavaScript在作其它事之前检查一幅图象是否已经完全载入。但是，我们只能在以后的课程中谈到这些属性。今天，我们将谈谈反馈表单及如何在JavaScript中应用反馈表单。

    反馈表单是HTML 1.0规范的一部分。许多人对其并不很了解。很多人只以为它只能由于用户端CGI编程。其实，即使你不是CGI程序员，反馈表单也会为你提供许多功能。而JavaScript可被用来为反馈表单添加各种功能。而且无须用户端CGI的辅助。

    如果你不了解反馈表单如何工作，请学习HTML入门中的有关课程。然后在开始学习本课。

    首先，在javascript中，反馈表单也被存储在一个对象数组中。你可以通过window.document.images[0]调用图象数组中的第一幅图象，你也可以用window.document.forms[0]调用反馈表单数组中的第1项表单。你可为图象命名，也可以以类似的方式为反馈表单命名。例如，如果该反馈表单

    的编程如下：

   

       
   

    你可以用以下两种方式之一引用该表单：

    var the_form = window.document.forms[0];
    var the_same_form = window.document.first_form;

    更多的时候，你需要引用到表单内的元素，例如上例中的文字域。

    将鼠标滑过该链接看看会发式什么事情。

    Yes, and I know it.  No! 

    通过改变文字域的值就可实现这种奇妙的变换。

   

       
   

    改变文字域的链接为：

    Yes, and I know it.

    No!

    意思是说，表单调用第1个表单，并将其值设为 'Clap clap!'第2行作用相似。这同改变图象的src非常相似。只不过文字域改变的是值。

    对textareas也可以采用类似的方法改变值:

   Part 1  Part 2 

    表单编码：

   

        <br>        Mouse over below to see the first verse of<br>        The Webmonkey song, adapted from<br>        "I Wanna Be Like You" (The Monkey Song)<br>        from Walt Disney's The Jungle Book<br>        written by Richard M. Sherman and Robert B. Sherman<br>       
   

    注意该表单有一个名字：third_form,并且文字区也有一个名字：the_textarea。

    其链接和文字域的设定方法基本相同：

    Part 1
    Part 2

    唯一的不同之处在于将一个变量赋值给textareas，而不是将字符串赋值给它。该变量在HTML首部已经做了定义。

    以下是变量的字符串赋值：

    var first_part = "Now I'm the king of the swingers\nOh, the jungle VIP\nI've reached the top and had to stop\nAnd that's what botherin' me";

    注意"\n"是换行符。如果你在一个

 并且或在一个textarea中写字，"\n" 换行符非常方便。

    除了改变表单元素的值，JavaScript还可以让你检测在表单中进行的事件。下一讲将进行介绍。





    文字域可以链接onBlur、onFocus和onChange事件。当有人点击文字域的里边时则发生onFocus事件。而如果点击文字域的外面或按了tab键时则发生onblur事件。如果有人改变了文字域内的内容然后转到文字域外部的区域时则发生onChange事件。
    试着做这些事情看下面的文字域会发生什么情况。

    以下是编制方法：文字域的编码：
    
    每一个事件处理器调用函数writeIt()，该函数已作了定义。编码如下：

    
    前几行是典型的JavaScript预定义。主体中的第1行
    var word_with_return = the_word + "\n";
    将一个变量word_with_return进行初始化为函数处理后的字符串并加上换行符"\n".。注意"\n" 是标准的计算机指令。
    下一行
    window.document.first_form.the_textarea.value += word_with_return;
    将文字区域的值设置为其原值加新变量。其作用相当于
    window.document.first_form.the_textarea.value = window.document.first_form.the_textarea.value + word_with_return;
    目前我们已经学习了文字域和文字区域（值）的属性，接下来我们学习文字域和文字区域处理所用的方法：blur()、focus()和select()。
    下面的链接显示了focus() 和select()如何工作。注意他们工作一次后可能会终止功能。



    Mouseover to focus
Mouseover to select


    以下为表单和链接的编码：
    

        
    

    Mouseover to focus
    Mouseover to select
    其使用方法和调用任何对象方法的做法是一样的：object_name.method(). 该文字域的名称是window.document.form_name.text_field_name，所以用下列语句就可调用文字域的focus()方法。 
    window.document.method_form.method_text.focus();





    表单也是对象；他们有自己的方法、属性及事件处理器。其中有一项就是onSubmit。
    onSubmit的调用有以下两种情形：如果用户点击提交（Submit）按钮，或用户在文字域内按了回车键，则会触发onSubmit。
    在Netscape中，点击一个没有结果事件处理的Submit按钮通常会导致刷新原有的页面。为了避免这种情况，你可以这样做：
    

        
    

    Javascript用return false阻止浏览器刷新页面。另一个例子是阻止一个href转向赋值的URL 。例如：链接
    sohu!
    不会转向任何URL，因为你给onClick赋值为return false。
    以下是一个从用户获取信息的表单。在文字域中输入一些内容然后按回车键:
    Who does the monkey love:

    以下是表单的编码：
    

        
    

    当你点击文字域中的回车时，onSubmit处理器被调用执行函数monkeyLove()，该函数将改变文字域内的值。

    如果onsubmit处理器中没有return false语句的话，执行函数monkeyLove()会改变文字域内容，但由于同时网页内容会被刷新，从而又会将文字域的内容返回到原有的内容。为了阻止这种现象，就必须在onSubmit中加入return false.
    以下是monkeyLove() 函数的内容：
    function monkeyLove()
    {
        var who_it_is = window.document.text_entry_form.monkey_love.value;
        who_it_is = 'The monkey loves ' + who_it_is;
        window.document.text_entry_form.monkey_love.value = who_it_is;
    }





    文字域和文字区域是表单的两种元素。其它的还有复选框、单选框及下拉菜单。首先我们学习复选框。
    复选框的主要属性就是：被选中（checked）。
    如果有一个名为the_form的表单，其中一个复选框的名称为the_checkbox，你可以看到如果点击该复选框会发生什么情况：
    var is_checked = window.document.the_form.the_checkbox.checked;
    if (is_checked == true)
    {
        alert("Yup, it's checked!");
    } else {
        alert("Nope, it's not checked.");
    }
    如果复选框被选中，则复选框的属性为真(true）。真（true）是JavaScript内置的数据类型，所以你不必对true添加引号。如果复选框未被选中，则其属性为假（false），这也是一只内置数据类型。

    你还可以设定复选框的属性。以下是设置复选框属性的一个例子：
    Click to check Checkbox 1
    Click to uncheck Checkbox 1
    Click to see the value of Checkbox 1
    以下为代码：
    

        Checkbox 1
    

    Click to check Checkbox 1
    Click to uncheck Checkbox1
    Click to see the value of Checkbox 1

    注意我在链接中始终加入了return false，以防止浏览器刷新页面又回到原来的内容。复选框的事件处理器是onClick。当某人点击复选框时，onClick事件处理器即发挥作用。以下为其使用实例。

    该例子中，表单应用了onClick复选框处理器：
    

        The Light Switch
    

    当某人点击复选框时，onClick处理器被激活并执行函数switchLight()，以下为函数switchLight() 的编码（它置于网页首部中): 
    function switchLight()
    {
        var the_box = window.document.form_2.check_1;
        var the_switch = "";
        if (the_box.checked == false) {
            alert("Hey! Turn that back on!");      
            document.bgColor='black';
        } else {
            alert("Thanks!");
            document.bgColor='white';
        }
    }
    第一行： 
    var the_box = window.document.form_2.check_1;
    将复选框对象赋值给一个变量。这样可以缩小编程长度，还可以将对象作为参数传递给函数。
    下一讲我们将要讲解单选框的有关知识。