当前页面: 开发资料首页 → Javascript 专题 → JavaScript 基础教程 第三课
JavaScript 基础教程 第三课
摘要: JavaScript 基础教程 第三课
在前面的课程中，我们学习了:
- 如何把JavaScript 加到你的 HTML页中。
- 如何用对话框和变量来存储并利用用户输入。
- 如何用 JavaScript 写HTML
- JavaScript如何用 if-then 语句作出选择。
- 如何使用链接事件制作依据用户行动而反应的网页。
- 怎样制作基本的图片交换。
至今我们已经了解了许多,但我们尚未解释其工作原理。例如上
一课中我演示的 window.document.monkey_image.src =
"happy_monkey.gif"将把名为happy_monkey.gif的图片替换为
名为monkey_image的图片。但是window.document是什么? .src
是从哪里来的? 同样, 你看到了document.writeln("monkey")。
但为什么是 document.writeln 而非 writeln?
上述答案可在文件目标模块(JavaScript Document Object
Model，简写为DOM)中解答。DOM是JavaScript网页的方式，它
是所有JavaScript编程的核心. 本讲我们主要讨论DOM，下一讲
中我们将教你电脑编程基础的剩余部分。下两课结束后你将了
解JavaScript所有主要思路和语法。剩下所需要学习的是一些
细节、技巧，以及如何避免混乱。
现在我们开始踏上DOM之路, 先学一下如何用JavaScript打开并
操作新的浏览器窗口。
第二页：窗口操作介绍
在学习如何在JavaScript中打开窗口前，你应已经知道如何
在HTML中打开它了。多数当前流行的浏览器中, 你可用一个href
语句打开一个新窗口，例如，点击本连接即可打开另一个窗口。
HTML 是这样作的:
clicking on
link will open another window.
重要的是要了解目标链接打开的窗口是上面名为
"yer_new_window" 相伴的窗口。一旦你已经有了一个以
"yer_new_window"作为目标的herf,那么，请先关闭它。无论你
在URL中置入何种链接，都将打开原来的窗口。想了解外的意
思吗？点击这里，然后打开另一个HTML 页
本课的目的是调用目标名，本例中即窗口名yer_new_window。
既然我们已经简单的重温了一下href目标, 那么该开始学习在
JavaScript中打开窗口.
第三页：Javascript中的窗口操作
在HTML中打开窗口应用极为普遍，但也有一些缺陷；用户浏览
器决定窗口看起来是什么样的，你左右不了其窗口的大小及
式样。幸运的是，JavaScript给了你这种控制权。
看一看其原由:
window.open("URL","name","features");
本语句以你调用时采用的第一个参数URL来打开一个窗口。这里
是以URL，实际中可写成
"http: //www.hotwired.com/webmonkey/" 或其他类似的东西。
第二个参数是窗口的名字。这就象上页中我们看到的名字，如
果你打开窗口时已有一个同名窗口打开，那么URL将把open语句
送到原先已打开的窗口。
第三个参数，features，是一个窗口所具有的不同特征。这是
个可选参数，我们先做关于头两个参数的练习。
这里是一些用JavaScript打开窗口的例子。
第四页：JavaScript中的窗口操作举例
试一下点击如下三个链接看看将发生什么。注意在三个链接都
打开前别先关闭其中任何一个。
这是名为 javascript_1的窗口.
名为javascript_2的窗口.
这里是另一个将进入javascript_1的HTML页.
语句的首行：
onClick="window.open('javascript_window_1.html','javascript_1');">Here's
a window named javascript_1.
当你点击该链接时一个名为javascript_1 的窗口打开，其中出
现javascript_window_1.html的网页。由于参数features是可
选的，我们先不理会它。
注意这里我是用onClick来调用打开窗口的。你大棵不必
将window.open()放在onClick中调用窗口，这很容易办到。一
会你将看到在<script>标签中的windows.open()例子。
第二个例子与第一个几乎一样的，它只是以不同的名字打开一
个窗口及调用到不同的HTML页中。
onClick="window.open('javascript_window_2.html','javascript_2');">Here's
a window named javascript_2.
第三个链接将一个新的HTML 页放到第一个窗口中。这是由于你
要打开的窗口和第一个链接重名：都叫javascript_1.
onClick="window.open('javascript_window_3.html','javascript_1');">Here's
another HTML page going into javascript_1.
妙事即将开始。我们加入第三个参数features，看看会发生
什么。
OK 让我们加入windows features再试试!
第五页：Windows特性window.open()中的第三个参数是你想要你的窗口表现的一组
特性。如果你不完全确定你的参数，则以用户浏览器的缺省值
替代。
然而，如果你指定了一些特性参数，则窗口将以参数设定值规
定的出现。特性参数是以一组逗号分隔的序列出现的。
例如，如果你是这么写的：
window.open("some_url","window_name","location,menubar");
你将得到一个规定了URL，窗口名及菜单条（文件，编辑条等等）
的窗口。注意别在字符串中加入任何空格，这将使得有些浏览
器出错。
看一下另一个例子：
window.open("some_url","window_name","location,height=100,width=100");
这将打开一个高宽各为100像素的窗口。再次请注意别在字符串
中加空格。
这里是一组可以在字符串中引用的特性参数：
- menubar （菜单条）
- 这是个在大多数软件应用中都引用的函数行。一般包括有
文件，编辑及其他一些条目。 - status（状态条）
- 这是位于你的窗口下部的信息条。当你的鼠标移到一个链
接上时，链接的URL就在这个状态条上出现。你可以将状
态条上显示的内容搬到一个滚动的marquee 中去。我不打
算为你做这个示例，如果你想知道怎样做，自己设法解决！ - scrollbars （滚动条）
- 当需要时允许滚动条出现。
- resizable （重调）
- 当重调参数被列出，窗口将可被重调。注意它的拼法，我
就经常搞错。 - width （宽度）
- 以像素点表达的窗口宽。
- height（高度）
- 以像素点表达的窗口高。
- toolbar （工具条）
- Home button, among others.
浏览器工具条，包括后退，前进钮，停止钮，以及HOME钮等等。 - location （定位区）
- 你可以键入URL 的浏览器文本区。
- directories （指示区）
- 如Netscape浏览器中所在的"What's new," "What's cool,"等等。
这里是一些不同类型窗口的示例。
一旦你搞懂了这些例子，你就可以在你的一些窗口中实现它了。
现在开始学窗口的具体内容
第六页：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!";
这是一个使用状态条的例子。
第七页：循环练习
循环练习程序要求一些字然后反向显示。试着自己写一下程
序，再看源码了解其原理。问题不大了吧，现在开始学习数组。
第八页：窗口间的交流
尽管将一个窗口模糊或聚焦并没有多大意义，但有时候你确实
需要将另一个窗口移到前台。为了使用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()一样。
现在我们看看将新窗口移到前台或移到后台的两个链接：
Bring
it forward
Put it
backward
第九页：再谈JavaScript DOM
现在我们已经了解了：JavaScript包括缺省对象，例如窗口，
对象具有用于描述对象的属性，方法用于描述对象采取行动
的方法。
对象的属性页可以是对象。举例来说：窗口有一个属性叫做
document，它用于引用到窗口中实际的HTML文件。该document
属性本身就是一个对象。在谈到图象掉换（image swap)的时
候，我们见到过这样的例子。你可以用下列语句作图象掉换:
change
上述语句的意思是说：找到window的document属性，找到
the_image的src属性并将其设置为图象button_d.gif。这样写
是因为窗口（windows）是对象，窗口内的文件（documents）
是对象，而文件（document）内的图象（images）页是对象。
看起来似乎很复杂，但它的结构很清楚。JavaScript的文件对
象模块（Document Object Model）描述了对象之间的等级关系。
在该教程中，我们只看到该等级关系的一部分。使你的网页具有
精彩动感的大多数技巧都涉及到文件对象。文件对象内容非常丰
富，实际上应该专门开一门教程将这个问题。在本课程中，我们
将集中谈谈窗口的其它属性。
第十页：窗口的其它特性
其它窗口属性主要和分割窗口有关。如果你不知道如何使用分
割窗口，请先阅读文章"Frames Are a Picnic." 。
在JavaScript中，对分割窗口的处理方法和摧窗口是一样的。
你只需利用javascript在一个出口里面修改另一个窗口外观，
你可以改变各个分割窗口的样子。但你要记住，在一个窗口内
的各个分割窗口实际上被当作另外的几个窗口来对待，因为分
割窗口可以再包含更小的分割窗口。也就是说，你有一个最高
层的窗口，其中包含这第一级分割窗口，个分割窗口实际上又
是新的小窗口，小的窗口中又可以包含更小的分割窗口。但一
般并不需将其搞得这么复杂。
下面是一个用javascript制作的分割窗口的例子。
首先，是分割窗口的窗框：
这和普通的分割窗口窗框是一样的。你要记住给窗框内的各个
分割窗口命名。第一个分割窗口的名字是control_frame, 其
中包含这加入了javascript的HTML网页。第二个分割窗口的
src="#",其中什么都不包含。
接下来，我们看看control_frame窗口内的内容。以下只是其
中关键的一行：
onClick="top.target_frame.document.writeln('Monkey
do!
');">Monkey see
执行该语句时，JavaScript从窗口等级的最高层开始，该层中
包含着分割窗口的窗框，从中发现名叫target_frame的分割
窗口，由于该分割窗口是也一个窗口，所它具有窗口的文件
（document）属性。JavaScript找到其document属性，并调
用writeln()方法。其执行结果是在文件中写出"Monkey
do!" 。writeln()是文件（document）对象的方法，所以我们
必须写document.writeln()，而不只是 writeln()。
第十一页：再谈Window及Frame树杈结构
在上个；例子中，我们用到了内置变量top，该变量永远指分割
窗口最高层次的浏览器窗口。如果你计划从分割窗口的最高层
次开始执行命令，你就可以用top变量。
另一个内置变量是parent， 指的是包含当前分割窗口的母窗
口。如果在一个窗口内有分割窗口，而在其中的一个分割窗口
中又包含着分割窗口，则第2层的分割窗口可以用parent变量引
用包含它的母分割窗口。稍有点复杂, 以下是用javascript编
写的在一个分割窗口中套更小的分割窗口的例子。
第十二页：自己动手操作
在给你布置的作业中，你需要利用第2课的作业构建你的浏览
器。document对象有一个属性叫做bgcolor，你可以想在HTML
的body标签中设置背景色那样设置document对象的背景色，你
可以用名称，如 "red," 或16进制值如"#FF0000"。
接下来用分割窗口和必要的JavaScript编写家庭作业3。
第十三页：第三天复习
今天的课程中我们将了以下内容：窗口、分割窗口、文件对象
模块（Document Object Model）和面向对象的编程。
其中学习了如何打开按自己的方式窗口；用JavaScript在一个
窗口中影响另一个窗口；在分割窗口之间的交流；对象的属性
和方法；域对象模块（Domain Object Model)。
- 浏览器窗口就是包含着其它对象的对象。了解了DOM中对
象的等级关系之后，你就可以控制HTML页中的各个特
性。