JavaScript初级教程(第三课)

既然你已经知道如何按你自己的意愿打开窗口，那么现在开始学习怎样在窗口中操作一些事。在此之前你要学习一下JavaScript的文档对象模型（DOM），首先，让我们学一点“基于对象的编程”。

    概述基于对象的编程

    基于对象的编程 - 特别是JavaScript版本的 - 是比较容易理解的。其主旨是信息依据对象组织。JavaScript其优越处之一在于其带有一内建式对象库。例如，一个窗口即一个对象。无论何时我提到一个缺省的JavaScript库对象，我将使用大写（Window）。特定的情况（特定的窗口）将用小写。

    对象都有用以描述它们的属性。窗口对象的其中一些属性是它的名字，（即状态条上的字），窗口文件的URL，及窗口文件本身。（其中包括单字，图形及窗口中的超文本链接。）

    在JavaScript 中缺省的窗口对象为 window.这里你可了解你将如何获取缺省窗口的属性。

    var the_status = window.status;

    这是说：找到称为window 的status属性，将之调用到变量the_status中。窗口的status特性包含了状态条上出现的词句。你也可事先设置它，像这样：

    window.status = "I'm monkeying around!";

    这是一个使用状态条的例子。

    <a href="#" onMouseOver="window.status='Monkeys!';">Who do we love?</a>

    这是说：“当鼠标移动到这个链接上时，改变状态条。”

    对象的方法：
    除了属性之外，对象还具有“方法”。“方法”是对象所知的如何运作的进程。例如，窗口知道如何打开另一些窗口：

    window.open("URL,""name,""features")。它告诉Javascript用窗口的open方式来打开一个新窗口。

    因而，就象上例中，一个对象的“方法”也被称为其获取一个特性的方式：对象名，周期，而后是方式。主要的不同在于方法总在其后跟随一对含有方式参数的圆括弧。甚至当方法不调用参数时，圆括弧也必须有的。还记得这个吗？

    var italic_hippy = hippy_monkey.italics();

    对啦！字符串实际上就是对象， italics()即是字符对象的参数。 

    你已经看了一些窗口方法的例子但还没有了解它。对话框调用alert及prompt实际上也是窗口对象的方式。如果你调用：

    window.alert("Viva la primate!");

    你将看到对话框并读到“Viva la primate!”我们直接能试试这个闪烁的窗口.

    看起来好象有点傻，更好的效果可以参看调用其它窗口。
尽管将一个窗口模糊或聚焦并没有多大意义，但有时候你确实需要将另一个窗口移到前台。为了使用javascript实现窗口之间的交流，你需要对该窗口的一个引用。

    获取和使用一个窗口引用 

    首先，我打开一个窗口，为其赋予一个引用：

    var new_window = window.open("hello.html","html_name","width=200,height=200");

    该语句打开一个小窗口并将其赋值给变量new_window作为对该窗口的引用。变量可以包含数字和字符串，也可以包含对对象的引用，在本例中，对象是一个窗口。现在变量new_window就可以象当前窗口那样使用。你可以象对窗口调用方法那样对new_window调用方法。 

    下面的语句是一个对new_window调用方法的例子:

    new_window.blur();

    它实现的作用和上篇中的window.blur()一样。 

    现在我们看看将新窗口移到前台或移到后台的两个链接：

    <a href="#" onMouseOver="new_window.focus();">Bring it forward</a>

    <a href="#" onMouseOver="new_window.blur();">Put it backward</a>
现在我们已经了解了：JavaScript包括缺省对象，例如窗口，对象具有用于描述对象的属性，方法用于描述对象采取行动的方法。

    对象的属性页可以是对象。举例来说：窗口有一个属性叫做document，它用于引用到窗口中实际的HTML文件。该document属性本身就是一个对象。在谈到图象掉换（image swap)的时候，我们见到过这样的例子。你可以用下列语句作图象掉换:

    <a href="#" onMouseOver="window.document.the_image.src='button_d.gif';">change</a>

    上述语句的意思是说：找到window的document属性，找到the_image的src属性并将其设置为图象button_d.gif。这样写是因为窗口（windows）是对象，窗口内的文件（documents）是对象，而文件（document）内的图象（images）页是对象。

    看起来似乎很复杂，但它的结构很清楚。JavaScript的文档对象模型（Document Object Model）描述了对象之间的等级关系。

    在该教程中，我们只看到该等级关系的一部分。使你的网页具有精彩动感的大多数技巧都涉及到文件对象。文件对象内容非常丰富，实际上应该专门开一门教程将这个问题。在本课程中，我们
将集中谈谈窗口的其它属性。

    其它窗口属性主要和分割窗口有关。

    在JavaScript中，对分割窗口的处理方法和其它窗口是一样的。你只需利用javascript在一个出口里面修改另一个窗口外观，你可以改变各个分割窗口的样子。但你要记住，在一个窗口内
的各个分割窗口实际上被当作另外的几个窗口来对待，因为分割窗口可以再包含更小的分割窗口。也就是说，你有一个最高层的窗口，其中包含这第一级分割窗口，这个分割窗口实际上又是新的小窗口，小的窗口中又可以包含更小的分割窗口。但一般并不需将其搞得这么复杂。 

    下面是一个用javascript制作的分割窗口的例子。 

    首先，是分割窗口的窗框：

    <frameset rows="25%,*">
        <frame src="frames_example_controls.html" name="control_frame">
        <frame src="blank.html" name="target_frame">
    </frameset>

    这和普通的分割窗口窗框是一样的。你要记住给窗框内的各个分割窗口命名。第一个分割窗口的名字是control_frame, 其中包含这加入了javascript的HTML网页。第二个分割窗口的src="#",其中什么都不包含。 

    接下来，我们看看control_frame窗口内的内容。以下只是其中关键的一行：

    <a href="#" onClick="top.target_frame.document.writeln('Monkey do!<br>');">Monkey see</a>

    执行该语句时，JavaScript从窗口等级的最高层开始，该层中包含着分割窗口的窗框，从中发现名叫target_frame的分割窗口，由于该分割窗口是也一个窗口，所它具有窗口的文件（document）属性。JavaScript找到其document属性，并调用writeln()方法。其执行结果是在文件中写出"Monkey do!" 。writeln()是文件（document）对象的方法，所以我们必须写document.writeln()，而不只是 writeln()。

    在上个例子中，我们用到了内置变量top，该变量永远指分割窗口最高层次的浏览器窗口。如果你计划从分割窗口的最高层次开始执行命令，你就可以用top变量。

    另一个内置变量是parent， 指的是包含当前分割窗口的母窗口。如果在一个窗口内有分割窗口，而在其中的一个分割窗口中又包含着分割窗口，则第2层的分割窗口可以用parent变量引用包含它的母分割窗口。

最新评论