JavaScript初级教程(第三课)第2/2页
更新时间:2007年04月05日 00:00:00 作者:
既然你已经知道如何按你自己的意愿打开窗口,那么现在开始学习怎样在窗口中操作一些事。在此之前你要学习一下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变量引用包含它的母分割窗口。
最新评论