html 第三課

第三天課程簡介

在前面的課程中，我們學習了:

如何把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 <a
href="yer_new_window.html"
target="yer_new_window">this
link</a> 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頁.

語句的首行：

<a href="#"

onClick="window.open('javascript_window_1.html','javascript_1');">Here's

a window named javascript_1</a>.

當你點擊該連結時一個名為javascript_1
的視窗開啟，其中出
現javascript_window_1.html的網頁。由於參數features是可
選的，我們先不理會它。

注意這裡我是用onClick來調用開啟視窗的。你大棵不必
將window.open()放在onClick中調用視窗，這很容易辦到。一
會你將看到在<script>標籤中的windows.open()例子。

第二個例子與第一個幾乎一樣的，它只是以不同的名字開啟一
個視窗及調用到不同的HTML頁中。

<a href="#"

onClick="window.open('javascript_window_2.html','javascript_2');">Here's

a window named javascript_2</a>.

第三個連結將一個新的HTML 頁放到第一個視窗中。這是由於你
要開啟的視窗和第一個連結重名：都叫javascript_1.

<a href="#"

onClick="window.open('javascript_window_3.html','javascript_1');">Here's

another HTML page going into javascript_1</a>.

妙事即將開始。我們加入第三個參數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!";

這是一個使用狀態條的例子。

狀態條的操作
將你的滑鼠放在下面兩個連結上，睜大你的眼睛看看視窗下的
狀態條上發生了什嗎？

Who do we love?
Why do we love them?

這裡是首行的源碼：

<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 DOM

現在我們已經瞭解了：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）描述了對象之間的等級關係。

在該教程中，我們只看到該等級關係的一部分。使你的網頁具有
精彩動感的大多數技巧都涉及到檔案對象。檔案對象內容非常豐
富，實際上應該專門開一門教程將這個問題。在本課程中，我們

將集中談談視窗的其它屬性。

視窗的其它特性
其它視窗屬性主要和分割視窗有關。如果你不知道如何使用分
割視窗，請先閱讀文章"Frames Are a Picnic."
。

在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()。>>

再談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頁中的各個特
性。