目 錄
一、 JavaScript語(yǔ)言概況
什么是JavaScript
JavaScript和Java的區別
JavaScript程序運行環(huán)境
編寫(xiě)第一個(gè)JavaScript程序
二、 JavaScript基本數據結構
JavaScript代碼的加入
基本數據類(lèi)型
表達式和運算符
范例：跑馬燈效果
三、 JavaScript程序構成
程序控制流
函 數
事件驅動(dòng)及事件處理
范例：自動(dòng)裝卸載；獲取版本號
四、 基于對象的JavaScript語(yǔ)言
對象的基礎知識
常用對象的屬性和方法
范例：時(shí)鐘
五、 創(chuàng )建新對象
對象的定義
創(chuàng )建對象實(shí)例
對象方法的使用
JavaScript中的數組
范例：動(dòng)態(tài)文字滾動(dòng)；顏色變化
六、 使用內部對象系統
瀏覽器對象層次及其主要作用
文檔對象功能及其作用
范例：文檔對象的綜合應用
七、 窗口及輸入輸出
窗口及輸入輸出
簡(jiǎn)單的輸入、輸出例子
范例：在線(xiàn)時(shí)間
八、 WEB頁(yè)面信息交互
窗體基礎知識
窗體中的基本元素
范例：動(dòng)態(tài)按鈕
九、 實(shí)現更復雜交互
什么是框架
如何訪(fǎng)問(wèn)框架
范例：動(dòng)態(tài)交互
第一講 JavaScript語(yǔ)言概況
Internet時(shí)代，造就了我們新的工作和生活方式，其互聯(lián)性、開(kāi)放性和共享信息的模式，打破了傳統信息傳播方式
的重重壁壘，為我們帶來(lái)了新的機遇。隨著(zhù)計算機和信息時(shí)代的到來(lái)，人類(lèi)社會(huì )前進(jìn)的腳步在逐漸加快，每一天都有新
的事情發(fā)生，每一天都在創(chuàng )造著(zhù)奇跡。隨著(zhù)Internet技術(shù)的突飛猛進(jìn)，各行各業(yè)都在加入Internet的行業(yè)中來(lái)。無(wú)論從
管理方面，還是從商業(yè)角度來(lái)看，Internet都可以帶來(lái)無(wú)限生機。通過(guò)Internet，可以實(shí)現地區、集體乃至個(gè)人的連接
，從而達到一種“統一的和諧”。那么怎樣把自己的或公司的信息資源加入到 WWW 服務(wù)器，是廣大用戶(hù)日益關(guān)心的問(wèn)題
。采用超鏈技術(shù)（超文本和超媒體技術(shù)）是實(shí)現這個(gè)目標最簡(jiǎn)單的、最快速的手段和途徑。具體實(shí)現這種手段的支持環(huán)
境，那就是HTML超文本標識語(yǔ)言。通過(guò)它們可制作所需的Web網(wǎng)頁(yè)。
通過(guò)超文本(Hyper Text)和超媒體(Hyper Media)技術(shù)結合超鏈接(Hyper link)的鏈接功能將各種信息組織成網(wǎng)絡(luò )
結構(web)，構成網(wǎng)絡(luò )文檔(Document)，實(shí)現Internet上的“漫游”。通過(guò)HTML符號的描述就可以實(shí)現文字、表格、聲
音、圖像、動(dòng)畫(huà)等多媒體信息的檢索。
然而采用這種超鏈技術(shù)存在有一定的缺陷，那就是它只能提供一種靜態(tài)的信息資源，缺少動(dòng)態(tài)的客戶(hù)端與服務(wù)器端
的交互。雖然可通過(guò)CGI (Common Gateway Interface)通用網(wǎng)關(guān)接口實(shí)現一定的交互，但由于該方法編程較為復雜，
因而在一段時(shí)間防礙了Internet技術(shù)的發(fā)展。而JavaScript的出現，無(wú)疑為Internet網(wǎng)上用戶(hù)帶來(lái)了一線(xiàn)生機?？梢赃@
樣說(shuō),JavaScript的出現是時(shí)代的需求,是當今的信息時(shí)代造就了JavaScript。
JavaScript的出現，它可以使得信息和用戶(hù)之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現了一種實(shí)時(shí)的、動(dòng)態(tài)的
、可交式的表達能力。從而基于CGI靜態(tài)的HTML頁(yè)面將被可提供動(dòng)態(tài)實(shí)時(shí)信息，并對客戶(hù)操作進(jìn)行反應的Web頁(yè)面的取代
。JavaScript腳本正是滿(mǎn)足這種需求而產(chǎn)生的語(yǔ)言。它深受廣泛用戶(hù)的喜愛(ài)的歡迎。它是眾多腳本語(yǔ)言中較為優(yōu)秀的一
種，它與WWW的結合有效地實(shí)現了網(wǎng)絡(luò )計算和網(wǎng)絡(luò )計算機的藍圖。無(wú)凝Java家族將占領(lǐng)Internet網(wǎng)絡(luò )的主導地位。因此
，盡快掌握JavaScript腳本語(yǔ)言編程方法是我國廣大用戶(hù)日益關(guān)心的。
一、什么是JavaScript
JavaScript是一種基于對象(Object)和事件驅動(dòng)(Event Driven)并具有安全性能的腳本語(yǔ)言。使用它的目的是與
HTML超文本標記語(yǔ)言、Java 腳本語(yǔ)言（Java小程序）一起實(shí)現在一個(gè)Web頁(yè)面中鏈接多個(gè)對象，與Web客戶(hù)交互作用。
從而可以開(kāi)發(fā)客戶(hù)端的應用程序等。它是通過(guò)嵌入或調入在標準的HTML語(yǔ)言中實(shí)現的。它的出現彌補了HTML語(yǔ)言的缺陷
，它是Java與HTML折衷的選擇，具有以下幾個(gè)基本特點(diǎn)：
是一種腳本編寫(xiě)語(yǔ)言
JavaScript是一種腳本語(yǔ)言，它采用小程序段的方式實(shí)現編程。像其它腳本語(yǔ)言一樣,JavaScript同樣已是一種解
釋性語(yǔ)言,它提供了一個(gè)易的開(kāi)發(fā)過(guò)程。
它的基本結構形式與C、C++、VB、Delphi十分類(lèi)似。但它不像這些語(yǔ)言一樣，需要先編譯，而是在程序運行過(guò)程中
被逐行地解釋。它與HTML標識結合在一起，從而方便用戶(hù)的使用操作。
基于對象的語(yǔ)言。
JavaScript是一種基于對象的語(yǔ)言，同時(shí)以可以看作一種面向對象的。這意味著(zhù)它能運用自己已經(jīng)創(chuàng )建的對象。因
此，許多功能可以來(lái)自于腳本環(huán)境中對象的方法與腳本的相互作用。
簡(jiǎn)單性
JavaScript的簡(jiǎn)單性主要體現在：首先它是一種基于Java基本語(yǔ)句和控制流之上的簡(jiǎn)單而緊湊的設計, 從而對于學(xué)
習Java是一種非常好的過(guò)渡。其次它的變量類(lèi)型是采用弱類(lèi)型，并未使用嚴格的數據類(lèi)型。
安全性
JavaScript是一種安全性語(yǔ)言，它不允許訪(fǎng)問(wèn)本地的硬盤(pán)，并不能將數據存入到服務(wù)器上，不允許對網(wǎng)絡(luò )文檔進(jìn)行
修改和刪除，只能通過(guò)瀏覽器實(shí)現信息瀏覽或動(dòng)態(tài)交互。從而有效地防止數據的丟失。
動(dòng)態(tài)性
JavaScript是動(dòng)態(tài)的，它可以直接對用戶(hù)或客戶(hù)輸入做出響應，無(wú)須經(jīng)過(guò)Web服務(wù)程序。它對用戶(hù)的反映響應，是采用
以事件驅動(dòng)的方式進(jìn)行的。所謂事件驅動(dòng)，就是指在主頁(yè)(Home Page)中執行了某種操作所產(chǎn)生的動(dòng)作，就稱(chēng)為“事件
”(Event)。比如按下鼠標、移動(dòng)窗口、選擇菜單等都可以視為事件。當事件發(fā)生后，可能會(huì )引起相應的事件響應。
跨平臺性
JavaScript是依賴(lài)于瀏覽器本身，與操作環(huán)境無(wú)關(guān)，只要能運行瀏覽器的計算機，并支持JavaScript的瀏覽器就可正確
執行。從而實(shí)現了“編寫(xiě)一次,走遍天下”的夢(mèng)想。
實(shí)際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無(wú)須有高性能的電腦，軟件僅需一個(gè)字處理軟件
及一瀏覽器，無(wú)須WEB服務(wù)器通道，通過(guò)自己的電腦即可完成所有的事情。
綜合所述JavaScript 是一種新的描述語(yǔ)言，它可以被箝入到 HTML 的文件之中。 JavaScript語(yǔ)言可以做到回應使
用者的需求事件 (如： form 的輸入) ，而不用任何的網(wǎng)路來(lái)回傳輸資料，所以當一位使用者輸入一項資料時(shí)，它不用
經(jīng)過(guò)傳給伺服端 (server)處理，再傳回來(lái)的過(guò)程，而直接可以被客戶(hù)端 (client) 的應用程式所處理。
JavaScript 和 Java 很類(lèi)似，但到底并不一樣！ Java 是一種比 JavaScript 更復雜許多的程式語(yǔ)言，而
JavaScript 則是相當容易了解的語(yǔ)言。JavaScript 創(chuàng )作者可以不那麼注重程式技巧，所以許多 Java 的特性在 Java
Script 中并不支援。
二、JavaScript和Java的區別
雖然JavaScript與Java有緊密的聯(lián)系，但卻是兩個(gè)公司開(kāi)發(fā)的不同的兩個(gè)產(chǎn)品。Java是SUN公司推出的新一代面向
對象的程序設計語(yǔ)言，特別適合于Internet應用程序開(kāi)發(fā)；而JavaScript是Netscape公司的產(chǎn)品，其目的是為了擴展
Netscape Navigator功能,而開(kāi)發(fā)的一種可以嵌入Web頁(yè)面中的基于對象和事件驅動(dòng)的解釋性語(yǔ)言, 它的前身是Live
Script；而Java的前身是Oak語(yǔ)言。下面對兩種語(yǔ)言間的異同作如下比較：
基于對象和面向對象
Java是一種真正的面向對象的語(yǔ)言，即使是開(kāi)發(fā)簡(jiǎn)單的程序，必須設計對象。
JavaScript是種腳本語(yǔ)言，它可以用來(lái)制作與網(wǎng)絡(luò )無(wú)關(guān)的，與用戶(hù)交互作用的復雜軟件。它是一種基于對象（Object
Based）和事件驅動(dòng)（Event Driver）的編程語(yǔ)言。因而它本身提供了非常豐富的內部對象供設計人員使用。
解釋和編譯
兩種語(yǔ)言在其瀏覽器中所執行的方式不一樣。Java的源代碼在傳遞到客戶(hù)端執行之前，必須經(jīng)過(guò)編譯，因而客戶(hù)端
上必須具有相應平臺上的仿真器或解釋器，它可以通過(guò)編譯器或解釋器實(shí)現獨立于某個(gè)特定的平臺編譯代碼的束縛。
JavaScript是一種解釋性編程語(yǔ)言，其源代碼在發(fā)往客戶(hù)端執行之前不需經(jīng)過(guò)編譯，而是將文本格式的字符代碼發(fā)
送給客戶(hù)編由瀏覽器解釋執行。
強變量和弱變量
兩種語(yǔ)言所采取的變量是不一樣的。
Java采用強類(lèi)型變量檢查，即所有變量在編譯之前必須作聲明。如:
Integer x;
String y;
x=1234;
x=4321;
其中X=1234說(shuō)明是一個(gè)整數，Y=4321說(shuō)明是一個(gè)字符串。
JavaScript中變量聲明，采用其弱類(lèi)型。即變量在使用前不需作聲明，而是解釋器在運行時(shí)檢查其數據類(lèi)型，如：
x=1234;
y＝"4321";
前者說(shuō)明x為其數值型變量，而后者說(shuō)明y為字符型變量。
代碼格式不一樣
Java是一種與HTML無(wú)關(guān)的格式，必須通過(guò)像HTML中引用外媒體那么進(jìn)行裝載，其代碼以字節代碼的形式保存在獨立
的文檔中。
JavaScript的代碼是一種文本字符格式，可以直接嵌入HTML文檔中，并且可動(dòng)態(tài)裝載。編寫(xiě)HTML文檔就像編輯文本
文件一樣方便。
嵌入方式不一樣
在HTML文檔中，兩種編程語(yǔ)言的標識不同，JavaScript使用<Script>...</Script>來(lái)標識，而Java使用
<applet>...</applet>來(lái)標識。
靜態(tài)聯(lián)編和動(dòng)態(tài)聯(lián)編
Java采用靜態(tài)聯(lián)編，即Java的對象引用必須在編譯時(shí)的進(jìn)行，以使編譯器能夠實(shí)現強類(lèi)型檢查。
JavaScript采用動(dòng)態(tài)聯(lián)編，即JavaScript的對象引用在運行時(shí)進(jìn)行檢查，如不經(jīng)編譯則就無(wú)法實(shí)現對象引用的檢查。
三、JavaScript程序運行環(huán)境
軟件環(huán)境：
Windows 95/98或Windows NT。
Netscape Navigator x.0或Internet Explorer x.0。
用于編輯HTML文檔的字符編輯器(WS、WPS、Notepad、WordPad等)或HTML文檔編輯器。
硬件配置：
首先必須具備運行Windows 95/98或Windows NT的基本硬件配置環(huán)境。推薦：
基本內存32M。
CRT只少需要256顏色，分辨率在640X480以上。
CPU只少133以上。
鼠標和其它外部設置（根據需要選用）。
四、編寫(xiě)第一個(gè)JavaScript程序
下面我們通過(guò)一個(gè)例子，編寫(xiě)第一個(gè)JavaScript程序。通過(guò)它可說(shuō)明JavaScript的腳本是怎樣被嵌入到HTML文檔中
的。
test1.html文檔：
<html>
<head>
<Script Language ="JavaScript">
// JavaScript Appears here.
alert("這是第一個(gè)JavaScript例子!");
alert("歡迎你進(jìn)入JavaScript世界!");
alert("今后我們將共同學(xué)習JavaScript知識！");
</Script>
</Head>
</Html>
在Internet Explore5.0中運行行后的結果見(jiàn)下圖所示。
說(shuō)明：
test.html是HTML文檔，其標識格式為標準的HTML格式；
如同HTML標識語(yǔ)言一樣， JavaScript程序代碼是一些可用字處理軟件瀏覽的文本，它在描述頁(yè)面的HTML相關(guān)區域
出現。
JavaScript代碼由 <Script Language ="JavaScript">...</Script>說(shuō)明。在標識<Script Language
="JavaScript">...</Script>之間就可加入JavaScript腳本。
alert()是JavaScript的窗口對象方法，其功能是彈出一個(gè)具有OK對話(huà)框并顯示（）中的字符串。
通過(guò)<!-- ...//-->標識說(shuō)明：若不認識JavaScript代碼的瀏覽器，則所有在其中的標識均被忽略；若認識，則執
行其結果。使用注釋這是一個(gè)好的編程習慣，它使其他人可以讀懂你的語(yǔ)言。
JavaScript 以 </Script> 標簽結束。
從上面的實(shí)例分析中我們可以看出，編寫(xiě)一個(gè)JavaScript程序確實(shí)非常容易的。
第二講 JavaScript基本數據結構
JavaScript提供腳本語(yǔ)言的編程與C++非常相似，它只是去掉了Ｃ語(yǔ)言中有關(guān)指針等容易產(chǎn)生的錯誤，并提供了功
能強大的類(lèi)庫。對于已經(jīng)具備Ｃ++或Ｃ語(yǔ)言的人來(lái)說(shuō)，學(xué)習JavaScript腳本語(yǔ)言是一件非常輕松愉快的事。
一、JavaScript代碼的加入
JavaScript的腳本包括在HTML中，它成為HTML文檔的一部分。與HTML標識相結合，構成了一個(gè)功能強大的
Internet網(wǎng)上編程語(yǔ)言?？梢灾苯訉avaScript腳本加入文檔：
<Script Language ="JavaScript">
JavaScript語(yǔ)言代碼；
JavaScript 語(yǔ)言代碼;
....
</Script>
說(shuō)明：
通過(guò)標識<Script>...</Script>指明JavaScript腳本源代碼將放入其間。
通過(guò)屬性L(fǎng)anguage ="JavaScript"說(shuō)明標識中是使用的何種語(yǔ)言，這里是JavaScript語(yǔ)言, 表示在JavaScript中使
用的語(yǔ)言?！ ∠旅媸菍avaScript腳本加入Web文檔中的例子:
<HTML>
<Head>
<Script Language ="JavaScript">
document. Write("網(wǎng)上世界真精彩！");
document. close();
</Script>
</Head>
</HTML>
在瀏覽器的窗口中調用，則顯示“網(wǎng)上世界真精彩！”字串。
說(shuō)明:
Document. write()是文檔對象的輸出函數，其功能是將括號中的字符或變量值輸出到窗口；document. close()
是將輸出關(guān)閉。
可將<Script>...</Script>標識放入head>.. </Head>或<Body> ...</Body>之間。將JavaScript標識放置
<Head>... </Head>在頭部之間，使之在主頁(yè)和其余部分代碼之前裝載，從而可使代碼的功能更強大；可以將
JavaScript標識放置在<Body>... </Body>主體之間以實(shí)現某些部分動(dòng)態(tài)地創(chuàng )建文檔。
二、基本數據類(lèi)型
JavaScript腳本語(yǔ)言同其它語(yǔ)言一樣，有它自身的基本數據類(lèi)型、表達式和算術(shù)運算符以及程序的基本框架結構。
JavaScript提供了四種基本的數據類(lèi)型用來(lái)處理數字和文字, 而變量提供存放信息的地方, 表達式則可以完成較復雜的
信息處理。
1、基本數據類(lèi)型
在JavaScript中四種基本的數據類(lèi)型：數值（整數和實(shí)數）、字符串型（用“”號或‘’括起來(lái)的字符或數值）、
布爾型（使True或False表示）和空值。在JavaScript的基本類(lèi)型中的數據可以是常量，也可以變量。由于JavaScript
采用弱類(lèi)型的形式，因而一個(gè)數據的變量或常量不必首先作聲明，而是在使用或賦值時(shí)確定其數據的類(lèi)型的。當然也可
以先聲明該數據的類(lèi)型，它是通過(guò)在賦值時(shí)自動(dòng)說(shuō)明其數據類(lèi)型的。
2、常量
整型常量
JavaScript的常量通常又稱(chēng)字面常量，它是不能改變的數據。其整型常量可以使用十六進(jìn)制、八進(jìn)制和十進(jìn)制表示
其值。
實(shí)型常量
實(shí)型常量是由整數部分加小數部分表示，如12.32、193.98 ?？梢允褂每茖W(xué)或標準方法表示：5E7、4e5等。
布爾值
布爾常量只有兩種狀態(tài)：True或False。 它主要用來(lái)說(shuō)明或代表一種狀態(tài)或標志，以說(shuō)明操作流程。它與Ｃ＋＋是
不一樣的,Ｃ＋＋可以用１或０表示其狀態(tài),而JavaScript只能用True或False表示其狀態(tài)。
字符型常量
使用單引號（‘）或雙引號（“）括起來(lái)的一個(gè)或幾個(gè)字符。如 "This is a book of JavaScript
"、"3245"、"ewrt234234" 等。
空值
JavaScript中有一個(gè)空值null,表示什么也沒(méi)有。如試圖引用沒(méi)有定義的變量,則返回一個(gè)Null值。
特殊字符
同Ｃ語(yǔ)言一樣，JavaScript中同樣以有些以反斜杠（／）開(kāi)頭的不可顯示的特殊字符。通常稱(chēng)為控制字符。
3、變量
變量的主要作用是存取數據、提供存放信息的容器。對于變量必須明確變量的命名、變量的類(lèi)型、變量的聲明及其
變量的作用域。
變量的命名
JavaScript中的變量命名同其計算機語(yǔ)言非常相似，這里要注意以下兩點(diǎn)：
必須是一個(gè)有效的變量，即變量以字母開(kāi)頭，中間可以出現數字如test1、text2等。除下劃線(xiàn)（－）作為連字符外，變
量名稱(chēng)不能有空格、（＋）、（－）、（，）或其它符號。
不能使用JavaScript中的關(guān)鍵字作為變量。
在JavaScript中定義了４０多個(gè)類(lèi)鍵字，這些關(guān)鍵是JavaScript內部使用的，不能作為變量的名稱(chēng)。如Var、int、
double、true不能作為變量的名稱(chēng)。
在對變量命名時(shí)，最好把變量的意義與其代表的意思對應起來(lái)，以免出現錯誤。
變量的類(lèi)型
在JavaScript中，變量可以用命令Var作聲明:
var mytest;
該例子定義了一個(gè)mytest變量。但沒(méi)有賦予它的值。
Var mytest=”This is a book”
該例子定義了一個(gè)mytest變量, 同時(shí)賦予了它的值。
在JavaScript中，變量以可以不作聲明，而在使用時(shí)再根據數據的類(lèi)型來(lái)確其變量的類(lèi)型。
如：
x=100
y="125"
xy= True
cost=19.5等。
其中x整數，y為字符串，xy為布爾型，cost為實(shí)型。
變量的聲明及其作用域
JavaScript變量可以在使用前先作聲明，并可賦值。通過(guò)使用var關(guān)鍵字對變量作聲明。對變量作聲明的最大好處
就是能及時(shí)發(fā)現代碼中的錯誤；因為JavaScript是采用動(dòng)態(tài)編譯的，而動(dòng)態(tài)編譯是不易發(fā)現代碼中的錯誤，特別是變量
命名的方面。
對于變量還有一個(gè)重要性──那就是變量的作用域。在JavaScript中同樣有全局變量和局部變量。全局變量是定義
在所有函數體之外，其作用范圍是整個(gè)函數；而局部變量是定義在函數體之內，只對其該函數是可見(jiàn)的，而對其它函數
則是不可見(jiàn)的。
三、表達式和運算符
１、表達式
在定義完變量后，就可以對它們進(jìn)行賦值、改變、計算等一系列操作，這一過(guò)程通常又叫稱(chēng)一個(gè)叫表達式來(lái)完成，
可以說(shuō)它是變量、常量、布爾及運算符的集合，因此表達式可以分為算術(shù)表述式、字串表達式、賦值表達式以及布爾表
達式等。
２、運算符
運算符完成操作的一系列符號，在JavaScript中有算術(shù)運算符，如＋、-、*、/等；有比較運算符如!＝、＝＝等;
有邏輯布爾運算符如?。ㄈ》矗?、|、||; 有字串運算如＋ 、 ＋＝等。
在JavaScript主要有雙目運算符和單目運算符。其雙目運算符由下列組成：
操作數１ 運算符 操作數２
即由兩個(gè)操作數和一個(gè)運算符組成。如50＋40、"This"+"that"等。單目運算符，只需一個(gè)操作數，其運算符可在
前或后。
（１）算術(shù)運算符
JavaScript中的算術(shù)運算符有單目運算符和雙目運算符。
雙目運算符：
+（加） 、-（減）、 *（乘）、 /（除）、 %（取模） 、|（按位或）、&(按位與)、<<（左移）、 >>（右移）、
>>>（右移，零填充）。
單目運算符：
-（取反）、~（取補）、++（遞加1）、--（遞減1）。
（２）比較運算符
比較運算符它的基本操作過(guò)程是，首先對它的操作數進(jìn)行比較，爾后再返回一個(gè)true或False值，有８個(gè)比較運算符
:
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。
（３）布爾邏輯運算符
在JavaScript中增加了幾個(gè)布爾邏輯運算符:
!（取反)、&=（與之后賦值）、 &（邏輯與）、 |=（或之后賦值）、 |（邏輯或）、 ^=（異或之后賦值）、 ^（邏輯
異或）、 ?:（三目操作符）、||（或）、==(等于)、|=(不等于)。
其中三目操作符主要格式如下：
操作數？結果１：結果２
若操作數的結果為真，則表述式的結果為結果１，否則為結果２。
四、范例
下面是一個(gè)跑馬燈效果的JavaScript文檔。
<html><head><script Language="JavaScript">
var msg="這是一個(gè)跑馬燈效果的JavaScript文檔";
var interval = 100;
var spacelen = 120;
var space10=" ";
var seq=0;
function Scroll() {
len = msg.length;
window.status = msg.substring(0, seq+1);
seq++;
if ( seq >= len ) {
seq = spacelen;
window.setTimeout("Scroll2();", interval );}
else
window.setTimeout("Scroll();", interval );}
function Scroll2() {
var out="";
for (i=1; i<=spacelen/space10.length; i++) out +=
space10;
out = out + msg;
len=out.length;
window.status=out.substring(seq, len);
seq++;
if ( seq >= len ) { seq = 0; };
window.setTimeout("Scroll2();", interval );}
Scroll();
</script><body></body></html>
本講介紹了JavaScript腳本是如何加入Web頁(yè)面, 并學(xué)習了JavaScript語(yǔ)言中的基本數據類(lèi)型、變量、常量、操作
運算符等。從本講中的內容中可以看出，對于已經(jīng)掌握Ｃ＋＋語(yǔ)言的人來(lái)說(shuō)，學(xué)習JavaScript真是一件非常輕松愉快的
事。
第三講 JavaScript程序構成
JavaScript腳本語(yǔ)言的基本構成是由控制語(yǔ)句、函數、對象、方法、屬性等,來(lái)實(shí)現編程的。
一、程序控制流
在任何一種語(yǔ)言中，程序控制流是必須的，它能使得整個(gè)程序減小混亂，使之順利按其一定的方式執行。下面是
JavaScript常用的程序控制流結構及語(yǔ)句:
１、if條件語(yǔ)句
基本格式
if（表述式）
語(yǔ)句段１；
......
else
語(yǔ)句段２；
.....
功能：若表達式為true，則執行語(yǔ)句段１；否則執行語(yǔ)句段２。
說(shuō)明：
if -else 語(yǔ)句是JavaScript中最基本的控制語(yǔ)句，通過(guò)它可以改變語(yǔ)句的執行順序。
表達式中必須使用關(guān)系語(yǔ)句，來(lái)實(shí)現判斷，它是作為一個(gè)布爾值來(lái)估算的。
它將零和非零的數分別轉化成false和true。 若if后的語(yǔ)句有多行，則必須使用花括號將其括起來(lái)。
if語(yǔ)句的嵌套：
if（布爾值）語(yǔ)句１；
else（布爾值）語(yǔ)句２；
else if（布爾值）語(yǔ)句３；
……
else 語(yǔ)句４；
在這種情況下，每一級的布爾表述式都會(huì )被計算，若為真，則執行其相應的語(yǔ)句，否則執行else后的語(yǔ)句。
２、For循環(huán)語(yǔ)句
基本格式
for（初始化；條件；增量）
語(yǔ)句集；
功能：實(shí)現條件循環(huán)，當條件成立時(shí)，執行語(yǔ)句集，否則跳出循環(huán)體。
說(shuō)明：
初始化參數告訴循環(huán)的開(kāi)始位置，必須賦予變量的初值；
條件：是用于判別循環(huán)停止時(shí)的條件。若條件滿(mǎn)足，則執行循環(huán)體，否則 跳出。
增量：主要定義循環(huán)控制變量在每次循環(huán)時(shí)按什么方式變化。
三個(gè)主要語(yǔ)句之間，必須使用逗號分隔。
３、while循環(huán)
基本格式
while（條件）
語(yǔ)句集；
該語(yǔ)句與For語(yǔ)句一樣，當條件為真時(shí)，重復循環(huán)，否則退出循環(huán)。
For與while語(yǔ)句都是循環(huán)語(yǔ)句，使用For語(yǔ)句在處理有關(guān)數字時(shí)更易看懂，也較緊湊；而while循環(huán)對復雜的語(yǔ)句效
果更特別。
４、break和continue語(yǔ)句
與C++語(yǔ)言相同，使用break語(yǔ)句使得循環(huán)從For或while中跳出，continue使得跳過(guò)循環(huán)內剩余的語(yǔ)句而進(jìn)入下一次
循環(huán)。
二、函數
函數為程序設計人員提供了一個(gè)豐常方便的能力。通常在進(jìn)行一個(gè)復雜的程序設計時(shí)，總是根據所要完成的功能，
將程序劃分為一些相對獨立的部分，每部分編寫(xiě)一個(gè)函數。從而，使各部分充分獨立，任務(wù)單一，程序清晰，易懂、易
讀、易維護。JavaScript函數可以封裝那些在程序中可能要多次用到的模塊。并可作為事件驅動(dòng)的結果而調用的程序。
從而實(shí)現一個(gè)函數把它與事件驅動(dòng)相關(guān)聯(lián)。這是與其它語(yǔ)言不樣的地方。
１、JavaScript函數定義
Function 函數名 （參數,變元）{
函數體;.
Return 表達式;
}
說(shuō)明：
當調用函數時(shí),所用變量或字面量均可作為變元傳遞。
函數由關(guān)鍵字Function定義。
函數名：定義自己函數的名字。
參數表，是傳遞給函數使用或操作的值，其值可以是常量 ，變量或其它表達式。
通過(guò)指定函數名（實(shí)參）來(lái)調用一個(gè)函數。
必須使用Return將值返回。
函數名對大小寫(xiě)是敏感的。
２、函數中的形式參數：
在函數的定義中，我們看到函數名后有參數表，這些參數變量可能是一個(gè)或幾個(gè)。那么怎樣才能確定參數變量的個(gè)
數呢？在JavaScript中可通過(guò)arguments .Length來(lái)檢查參數的個(gè)數。
例：
Function function_Name(exp1,exp2,exp3,exp4)
Number =function _Name . arguments .length;
if (Number>1）
document.wrile(exp2);
if (Number>2)
document.write(exp3);
if(Number>3)
document.write(exp4);
...
三、事件驅動(dòng)及事件處理
１、基本概念
JavaScript是基于對象(object-based)的語(yǔ)言。這與Java不同,Java是面向對象的語(yǔ)言。而基于對象的基本特征，
就是采用事件驅動(dòng)(event-driven)。它是在用形界面的環(huán)境下，使得一切輸入變化簡(jiǎn)單化。通常鼠標或熱鍵的動(dòng)作我們
稱(chēng)之為事件（Event），而由鼠標或熱鍵引發(fā)的一連串程序的動(dòng)作，稱(chēng)之為事件驅動(dòng)（Event Driver）。而對事件進(jìn)行
處理程序或函數，我們稱(chēng)之為事件處理程序（Event Handler）。
２、事件處理程序
在JavaScript中對象事件的處理通常由函數(Function)擔任。其基本格式與函數全部一樣，可以將前面所介紹的所
有函數作為事件處理程序。格式如下：
Function 事件處理名（參數表）{
事件處理語(yǔ)句集；
……
}
３、事件驅動(dòng)
JavaScript事件驅動(dòng)中的事件是通過(guò)鼠標或熱鍵的動(dòng)作引發(fā)的。它主要有以下幾個(gè)事件：
（１）單擊事件onClick
當用戶(hù)單擊鼠標按鈕時(shí)，產(chǎn)生onClick事件。同時(shí)onClick指定的事件處理程序或代碼將被調用執行。通常在下列基
本對象中產(chǎn)生：
button（按鈕對象）
checkbox（復選框）或（檢查列表框）
radio （單選鈕）
reset buttons（重要按鈕）
submit buttons（提交按鈕）
例：可通過(guò)下列按鈕激活change()文件：
<Form>
<Input type="button" Value=“ ” onClick="change()">
</Form>
在onClick等號后，可以使用自己編寫(xiě)的函數作為事件處理程序，也可以使用JavaScript中內部的函數。還可以直
接使用JavaScript的代碼等。例：
<Input type="button" value=" " onclick=alert("這是一個(gè)例子"）;
（２）onChange改變事件
當利用text或texturea元素輸入字符值改變時(shí)發(fā)該事件，同時(shí)當在select表格項中一個(gè)選項狀態(tài)改變后也會(huì )引發(fā)該
事件。
例： <Form>
<Input type="text" name="Test" value="Test" onCharge="check('this.test)">
</Form>
（３）選中事件onSelect
當Text或Textarea對象中的文字被加亮后，引發(fā)該事件。
（４）獲得焦點(diǎn)事件onFocus
當用戶(hù)單擊Text或textarea以及select對象時(shí)，產(chǎn)生該事件。此時(shí)該對象成為前臺對象。
（５）失去焦點(diǎn)onBlur
當text對象或textarea對象以及select對象不再擁有焦點(diǎn)、而退到后臺時(shí)，引發(fā)該文件，他與onFocas事件是一個(gè)
對應的關(guān)系。
（６）載入文件onLoad
當文檔載入時(shí)，產(chǎn)生該事件。onLoad一個(gè)作用就是在首次載入一個(gè)文檔時(shí)檢測cookie的值，并用一個(gè)變量為其賦值
，使它可以被源代碼使用。
（７）卸載文件onUnload
當Web頁(yè)面退出時(shí)引發(fā)onUnload事件，并可更新Cookie的狀態(tài)。
四、范例
范例1：下例程序是一個(gè)自動(dòng)裝載和自動(dòng)卸載的例子。即當裝入HTML文檔時(shí)調用loadform()函數,而退出該文檔進(jìn)入
另一HTML文檔時(shí)則首先調用unloadform()函數,確認后方可進(jìn)入。
<HTML>
<HEAD>
<script Language="JavaScript">
<!--
function loadform(){
alert("這是一個(gè)自動(dòng)裝載例子!");
}
function unloadform(){
alert("這是一個(gè)卸載例子!");
}
//-->
</Script>
</HEAD>
<BODY OnLoad="loadform()" OnUnload="unloadform()">
<a href="test.htm">調用</a>
</BODY>
</HTML>
范例2：這是一個(gè)獲取瀏覽器版本號的程序。該程序首先顯示一個(gè)波浪一提示信息。之后顯示瀏覽器的版本號有關(guān)信
息。
<html>
<head>
<script language="JavaScript"><!--
// -->
function makeArray(n){
this.length=n
return this
}
function hexfromdec(num) {
hex=new makeArray(1);
var hexstring="";
var shifthex=16;
var temp1=num;
for(x=1; x>=0; x--) {
hex[x]=Math.round(temp1/shifthex - .5);
hex[x-1]=temp1 - hex[x] * shifthex;
temp1=hex[x-1];
shifthex /= 16;
}
for (x=1; x>=0; x--) { hexstring+=getletter(hex[x]); }
return (hexstring);
}
function getletter(num) {
if (num < 10) { return num; }
else {
if (num == 10) { return "A" }
if (num == 11) { return "B" }
if (num == 12) { return "C" }
if (num == 13) { return "D" }
if (num == 14) { return "E" }
if (num == 15) { return "F" }
}
}
function rainbow(text){
var color_d1;
var allstring="";
for(i=0;i<text.length;i=i+2){
color_d1=255*Math.sin(i/(text.length/3));
color_h1=hexfromdec(color_d1);
allstring+="<FONT COLOR="+color_h1+"ff"+color_h1+">"+text.substring(i,i+2)+"</FONT>";
}
return allstring;
}
function sizefont(text){
var color_d1;
var allstring="";
var flag=0;
for(i=0,j=0;i<text.length;i=i+1){
if (flag==0) {
j++;
if (j>=7) {
flag=1;}}
if (flag==1) {
j=j-1;
if (j<=0) {
flag=0; }}
allstring+="<FONT SIZE="+ j + ">" + text.substring(i,i+1) + "</FONT>";
}
return allstring;
}
document.write("<font size=8><CENTER>")
document.write("<BR><BR>")
document.write( sizefont("這是一個(gè)獲取WEB瀏覽器的程序"))
document.write("</CENTER></font>")
document.write("瀏覽器名稱(chēng): "+navigator.appName+"<br>");
document.write("版本號: "+navigator.appVersion+"<br>");
document.write("代碼名字: "+navigator.appCodeName+"<br>");
document.write("用戶(hù)代理標識: "+navigator.userAgent);
</script>
<body></body></html>
本講介紹了JavaScript程序設計的有關(guān)內容。程序流、函數、事件是我們學(xué)習掌握JavaScript編程的重點(diǎn)。
第四講 基于對象的JavaScript語(yǔ)言
JavaScript語(yǔ)言是基于對象的（Object-Based），而不是面向對象的（object-oriented）。之所以說(shuō)它是一門(mén)基
于對象的語(yǔ)言，主要是因為它沒(méi)有提供象抽象、繼承、重載等有關(guān)面向對象語(yǔ)言的許多功能。而是把其它語(yǔ)言所創(chuàng )建的
復雜對象統一起來(lái)，從而形成一個(gè)非常強大的對象系統。
雖然JavaScript語(yǔ)言是一門(mén)基于對象的，但它還是具有一些面向對象的基本特征。它可以根據需要創(chuàng )建自己的對象
，從而進(jìn)一步擴大JavaScript的應用范圍，增強編寫(xiě)功能強大的Web文檔。
一、對象的基礎知識
１、對象的基本結構
JavaScript中的對象是由屬性(properties)和方法(methods)兩個(gè)基本的元素的構成的。前者是對象在實(shí)施其所需
要行為的過(guò)程中，實(shí)現信息的裝載單位，從而與變量相關(guān)聯(lián)；后者是指對象能夠按照設計者的意圖而被執行，從而與特
定的函數相聯(lián)。
２、引用對象的途徑
一個(gè)對象要真正地被使用，可采用以下幾種方式獲得：
引用JavaScript內部對象；
由瀏覽器環(huán)境中提供；
創(chuàng )建新對象。
這就是說(shuō)一個(gè)對象在被引用之前，這個(gè)對象必須存在，否則引用將毫無(wú)意義，而出現錯誤信息。從上面中我們可以
看出JavaScript引用對象可通過(guò)三種方式獲取。要么創(chuàng )建新的對象，要么利用現存的對象。
３、有關(guān)對象操作語(yǔ)句
JavaScript不是一純面向對象的語(yǔ)言，它設有提供面向對象語(yǔ)言的許多功能，因此JavaScript設計者之所以把它你
“基于對象”而不是面向對象的語(yǔ)言，在JavaScript中提供了幾個(gè)用于操作對象的語(yǔ)句和關(guān)鍵字及運算符。
1）、For...in語(yǔ)句
格式如下：
For（對象屬性名 in 已知對象名）
說(shuō)明：
該語(yǔ)句的功能是用于對已知對象的所有屬性進(jìn)行操作的控制循環(huán)。它是將一個(gè)已知對象的所有屬性反復置給一個(gè)變
量；而不是使用計數器來(lái)實(shí)現的。
該語(yǔ)句的優(yōu)點(diǎn)就是無(wú)需知道對象中屬性的個(gè)數即可進(jìn)行操作。
例：下列函數是顯示數組中的內容：
Function showData(object)
for (var X=0; X<30;X++)
document.write(object[i])；
該函數是通過(guò)數組下標順序值，來(lái)訪(fǎng)問(wèn)每個(gè)對象的屬性，使用這種方式首先必須知道數組的下標值，否則若超出范
圍，則就會(huì )發(fā)生錯誤。而使For...in語(yǔ)句，則根本不需要知道對象屬性的個(gè)數，見(jiàn)下：
Function showData(object)
for(var prop in object)
document.write(object[prop])；
使用該函數時(shí)，在循環(huán)體中，For自動(dòng)將的屬性取出來(lái)，直到最后為此。
.with語(yǔ)句
使用該語(yǔ)句的意思是：在該語(yǔ)句體內，任何對變量的引用被認為是這個(gè)對象的屬性，以節省一些代碼。
with object{
...}
所有在with語(yǔ)句后的花括號中的語(yǔ)句，都是在后面object對象的作用域的。
.this關(guān)鍵字
this是對當前的引用，在JavaScript由于對象的引用是多層次，多方位的，往往一個(gè)對象的引用又需要對另一個(gè)對
象的引用，而另一個(gè)對象有可能又要引用另一個(gè)對象，這樣有可能造成混亂，最后自己已不知道現在引用的那一個(gè)對象
，為此JavaScript提供了一個(gè)用于將對象指定當前對象的語(yǔ)句this。
.New運算符
雖然在JavaScript中對象的功能已經(jīng)是非常強大的了。但更強大的是設計人員可以按照需求來(lái)創(chuàng )建自己的對象，以
滿(mǎn)足某一特定的要求。使用New運算符可以創(chuàng )建一個(gè)新的對象。其創(chuàng )建對象使用如下格式：
Newobject=NEW Object(Parameters table);
其中Newobject創(chuàng )建的新對象：object是已經(jīng)存在的對象； parameters table參數表；new是JavaScript中的命令
語(yǔ)句。
如創(chuàng )建一個(gè)日期新對象
newData=New Data()
birthday=New Data (December 12.1998)
之后就可使NewData、birthday作為一個(gè)新的日期對象了。
４、對象屬性的引用
對象屬性的引用可由下列三種方式之一實(shí)現：
（１）使用點(diǎn)（.）運算符
university.Name=“云南省”
university.city=“昆明市”
university.Date="1999"
其中university是一個(gè)已經(jīng)存在的對象，Name、City、Date是它的三個(gè)屬性，并通過(guò)操作對其賦值。
（２）通過(guò)對象的下標實(shí)現引用
university[0]=“云南”
university[1]=“昆明市”
university[2]="1999"
通過(guò)數組形式的訪(fǎng)問(wèn)屬性，可以使用循環(huán)操作獲取其值。
function showunievsity(object)
for (var j=0;j<2; j++)
document.write(object[j])
若采用For...in則可以不知其屬性的個(gè)數后就可以實(shí)現：
Function showmy(object)
for (var prop in this)
docament.write(this[prop]);
（３）通過(guò)字符串的形式實(shí)現
university["Name"]=“云南”
university["City"]=“昆明市”
university["Date"]="1999"
５、對象的方法的引用
在JavaScript中對象方法的引用是非常簡(jiǎn)單的。
ObjectName.methods()
實(shí)際上methods()=FunctionName方法實(shí)質(zhì)上是一個(gè)函數。 如引用university對象中的showmy（）方法，則可使用：
document.write (university.showmy())
或：document.write(university)
如引用math內部對象中cos()的方法
則：
with(math)
document.write(cos(35));
document.write(cos(80));
若不使用with則引用時(shí)相對要復雜些：
document.write(Math.cos(35))
document.write(math.sin(80))
二、常用對象的屬性和方法
JavaScript為我們提供了一些非常有用的常用內部對象和方法。用戶(hù)不需要用腳本來(lái)實(shí)現這些功能。這正是基于對
象編程的真正目的。
在JavaScript提供了string（字符串）、math（數值計算）和Date（日期）三種對象和其它一些相關(guān)的方法。從而
為編程人員快速開(kāi)發(fā)強大的腳本程序提供了非常有利的條件。
１、常用內部對象
在JavaScript中對于對象屬性與方法的引用，有兩種情況：其一是說(shuō)該對象是靜態(tài)對象，即在引用該對象的屬性或
方法時(shí)不需要為它創(chuàng )建實(shí)例；而另一種對象則在引用它的對象或方法是必須為它創(chuàng )建一個(gè)實(shí)例，即該對象是動(dòng)態(tài)對象。
對JavaScript內部對象的引用，以是緊緊圍繞著(zhù)它的屬性與方法進(jìn)行的。因而明確對象的靜動(dòng)性對于掌握和理解
JavaScript內部對象是具有非常重要的意義。
１)、串對象
string對象：內部靜態(tài)性。
訪(fǎng)問(wèn)properties和methods時(shí)，可使用（.）運算符實(shí)現。
基本使用格式：objectName.prop/methods
（１）串對象的屬性
該對象只有一個(gè)屬性，即length。它表明了字符串中的字符個(gè)數，包括所有符號。例：
mytest="This is a JavaScript"
mystringlength=mytest.length
最后mystringlength返回mytest字串的長(cháng)度為20。
（２）串對象的方法
string對象的方法共有１９個(gè)。主要用于有關(guān)字符串在Web頁(yè)面中的顯示、字體大小、字體顏色、字符的搜索以及字
符的大小寫(xiě)轉換。
其主要方法如下：
錨點(diǎn)anchor()：該方法創(chuàng )建如用Html文檔中一樣的anchor標記。使用anchor如用Html中(A Name="")一樣。通過(guò)下
列格式訪(fǎng)問(wèn):string.anchor(anchorName)。
有關(guān)字符顯示的控制方法
big字體顯示, Italics()斜體字顯示，bold()粗體字顯示，blink()字符閃爍顯示，small（）字符用小體字顯示
，fixed()固定高亮字顯示、fontsize(size)控制字體大小等。
字體顏色方法；fontcolor(color)
字符串大小寫(xiě)轉換
toLowerCase()－小寫(xiě)轉換，toUpperCase()大寫(xiě)轉換。下列把一個(gè)給定的串分別轉換成大寫(xiě)和小寫(xiě)格式:
string=stringValue.toUpperCase和string=stringValue.toLowerCase。
字符搜索：indexOf[charactor,fromIndex]
從指定formIndtx位置開(kāi)始搜索charactor第一次出現的位置。
返回字串的一部分字串：substring(start,end)
從start開(kāi)始到end的字符全部返回。
２)、算術(shù)函數的math對象
功能：提供除加、減、乘、除以外的一引些自述運算。如對數，平方根等 。
靜動(dòng)性：靜態(tài)對象
（１）主要屬性
math中提供了６個(gè)屬性，它們是數學(xué)中經(jīng)常用到的常數Ｅ、以１０為底的自然對數ＬＮ１０、以２為底的自然對數
LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根為SQRT2。
（２）主要方法
絕對值：abs()
正弦余弦值：sin(),cos()
反正弦反余弦 :asin(), acos()
正切反正切：tan(),atan()
四舍五入：round()
平方根：sqrt()
基于幾方次的值：Pow(base,exponent)
...
３)、日期及時(shí)間對象
功能：提供一個(gè)有關(guān)日期和時(shí)間的對象。
靜動(dòng)性：動(dòng)態(tài)性，即必須使用New運算符創(chuàng )建一個(gè)實(shí)例。例:
MyDate=New Date()
Date對象沒(méi)有提供直接訪(fǎng)問(wèn)的屬性。只具有獲取和設置日期和時(shí)間的方法。
日期起始值:１７７０年１月１日００:００:００。
獲取日期的時(shí)間方法
getYear(): 返回年數
getMonth():返回當月號數
getDate(): 返回當日號數
getDay():返回星期幾
getHours():返回小時(shí)數
getMintes(:返回分鐘數
getSeconds():返回秒數
getTime() : 返回毫秒數
（２）設置日期和時(shí)間：
setYear();設置年
setDate():設置當月號數
setMonth():設置當月份數
setHours():設置小時(shí)數
setMintes():設置分鐘數
setSeconds():設置秒數
setTime ():設置毫秒數
...
2、JavaScript中的系統函數
JavaScript中的系統函數又稱(chēng)內部方法。它提供了與任何對象無(wú)關(guān)的系統函數，使用這些函數不需創(chuàng )建任何實(shí)例,
可直接用。
返回字符串表達式中的值：
方法名：eval（字串表達式），例：
test=eval("8+9+5/2");
返回字符串ASCI碼：
方法名：unEscape (string)
返回字符的編碼：
方法名：escape(character)
返回實(shí)數：
parseFloat(floustring);
返回不同進(jìn)制的數：
parseInt(numbestring ,rad.X)
其中radix是數的進(jìn)制，numbs字符串數
三、范例
下面是一個(gè)時(shí)鐘顯示的JavaScript文檔。在文檔中用了非常多的函數。
<html><head>
<style TYPE="text/css">
<style>
</style>
<title>時(shí)鐘</title>
<script LANGUAGE="JavaScript">
function showClock() {
}
function hideClock() {
}
var timerID = null
var timerRunning = false
function stopClock() {
if(timerRunning)
clearTimeout(timerID);
timerRunning = false
document.clock.face.value = "";
}
function showTime() {
var now = new Date();
var year = now.getYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hours = now.getHours();
var mins = now.getMinutes();
var secs = now.getSeconds();
var timeVal = "";
timeVal += ((hours <= 12) ? hours : hours - 12);
timeVal += ((mins < 10) ? ":0" : ":") + mins;
timeVal += ((secs <= 10) ? ":0" : ":") + secs;
timeVal += ((hours < 12) ? "AM" : "PM");
timeVal += ((month < 10) ? " on 0" : " on ") + month + "-";
timeVal += date + "-" + year;
document.clock.face.value = timeVal;
timerID = setTimeout("showTime()", 1000);
timerRunning = true
}
function startClock() {
stopClock();
showTime();
}
function windowOpener( indexnum ){
var loadpos="date.html"+"#"+indexnum;
controlWindow=window.open
(loadpos,"date","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable
=yes,width=620,height=400");
}
</script>
</head>
<body onLoad="startClock()" >
<p
align="center"><big><span style="background-color:
#2d2d2d"><font face="Arial">form</font>
<font>時(shí)鐘</font></span></big></p>
<p align="center"> </p>
<div align="center"><center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form NAME="clock" onSubmit="0">
<div align="center"><center><p><input TYPE="text" NAME="face" size="20" VALUE style="background-
color: #c0c0c0"> </p>
</center></div>
</form>
</td>
</tr>
</table>
</center></div>
</body>
</html>
本講介紹了基于對象的JavaScript中常用內部對象屬性、方法的使用。
閱讀全文(73) | 回復(1) | 引用(0)
回復:JavaScript教程
alpha發(fā)表評論于2005-3-15 9:48:59
第五講 創(chuàng )建新對象
使用JavaScript可以創(chuàng )建自己的對象。雖然JavaScript內部和瀏覽器本身的功能已十分強大，但JavaScript還是提
供了創(chuàng )建一個(gè)新對象的方法。使其不必像超文本標識語(yǔ)言那樣，求于或其它多媒體工具，就能完成許多復雜的工作。
在JavaScript中創(chuàng )建一個(gè)新的對象是十分簡(jiǎn)單的。首先它必須定義一個(gè)對象，而后再為該對象創(chuàng )建一個(gè)實(shí)例。這個(gè)
實(shí)例就是一個(gè)新對象，它具有對象定義中的基本特征。
一、對象的定義
JavaScript對象的定義，其基本格式如下：
Function Object（屬性表）
This.prop1=prop1
This.prop2=prop2
...
This.meth=FunctionName1;
This.meth=FunctionName2;
...
在一個(gè)對象的定義中，可以為該對象指明其屬性和方法。通過(guò)屬性和方法構成了一個(gè)對象的實(shí)例。如以下是一個(gè)關(guān)
于University對象的定義：
Function university(name,city,creatDate URL)
This.name=name
This.city=city
This.creatDate=New Date(creatDate)
This.URL=URL
其基本含義如下：
Name－指定一個(gè)“單位”名稱(chēng)。
City－“單位”所在城市。
CreatDate－記載university對象的更新日期。
URL－該對象指向一個(gè)網(wǎng)址。
二、創(chuàng )建對象實(shí)例
一旦對象定義完成后，就可以為該對象創(chuàng )建一個(gè)實(shí)例了：
NewObject=New object();
其中Newobjet是新的對象，Object已經(jīng)定義好的對象。例：
U1=New university(“云南省”，“昆明市”，"January 05,199712:00:00","U2=New university(“云南電子科技大學(xué)”，“昆明”,"January 07,1997 12:00:00","htlp://www.YNKJ.CN")
三、對象方法的使用
在對象中除了使用屬性外，有時(shí)還需要使用方法。在對象的定義中，我們看到This.meth=FunctionName語(yǔ)句，那就
是為定義對象的方法。實(shí)質(zhì)對象的方法就是一個(gè)函數FunctionName，通過(guò)它實(shí)現自己的意圖。
例:在university對象中增加一個(gè)方法，該方法是顯示它自己本身，并返回相應的字串。
function university(name,city,createDate,URL)
This.Name=Name;
This.city=city;
This.createDate=New Date(creatDate)；
This.URL=URL；
This.showuniversity=showuniversity;
其中This.showuniversity就是定義了一個(gè)方法－－－showuniversity()。
而showuniversity()方法是實(shí)現university對象本身的顯示。
function showuniversity()
For (var prop in this)
alert(prop+="+this[prop]+"");
其中alert是JavaScript中的內部函數，顯示其字符串。
四、JavaScript中的數組
使用New創(chuàng )建數組
JavaScript中沒(méi)有提供像其它語(yǔ)言具有明顯的數組類(lèi)型，但可以通過(guò)function定義一個(gè)數組，并使用New對象操作
符創(chuàng )建一個(gè)具有下標的數組。從而可以實(shí)現任何數據類(lèi)型的存儲。
a、定義對象的數組
Function arrayName(size){
This.length=Size;
for(var X=; X<=size;X++)
this[X]=0;
Reture this;
}
其中arrayName是定義數組的一個(gè)名子，Size是有關(guān)數組大小的值（1-size），即數組元素的個(gè)數。通過(guò)for循環(huán)對
一個(gè)當前對象的數組進(jìn)行定義，最后返回這個(gè)數組。
從中可以看出，JavaScript中的數組是從1到size，這與其它０到size的數組表示方法有所不同，當然你可根據需
要將數組的下標由１到size調整到０到size－１,可由下列實(shí)現:
Function arrayName (size)
For (var X=0; X<=size;X++)
this[X]=0;
this.lenght=size;
Return this;
從上面可以看出該方法是只是調整了this.lenght的位置，該位置是用于存儲數組的大小的。從而調整后的數組的
下標將與其它語(yǔ)言一致。但請讀者注意正是由于數組下標順序由１到size，使得JavaScript中的對象功能更加強大。
b、創(chuàng )建數組實(shí)例
一個(gè)數組定義完成以后，還不能馬上使用，必須為該數組創(chuàng )建一個(gè)數組實(shí)例：
Myarray=New arrayName(n);
并賦于初值：
Myarray[1]=“字串１”；
Myarray[2]=“字串２”；
Myarray[3]=“字串３”；
...
Myarray[n]=“字串n”；
一旦給數組賦于了初值后，數組中就具有真正意義的數據了，以后就可以在程序設計過(guò)程中直接引用。
創(chuàng )建多維數組
Function creatMArray(row,col){
var indx=0;
this.length=(row*10)+col
for(var x=1;x<=row;x++)
for(var y=1;y<=col;y++)
indx=(x*10)+y;
this[indx]=””;
}
myMArray=new creatMArray();
之后可通過(guò)myMArray[11]、myMArray[12]、myMArray[13]、myMArray[21]、myMArray[22]、myMArray[23]、
…來(lái)引用。
內部數組
在Java中為了方便內部對象的操作,可以使用窗體(Forms)、框架(Frames)、元素(element)、鏈接(links)和錨
(Anchors)數組實(shí)現對象的訪(fǎng)問(wèn)。
anchors[]:使用《A name=“anchorName“》標識來(lái)建立錨的鏈接。
links[]: 使用<A href=”URL”>來(lái)定義一個(gè)越文本鏈接項。
Forms[]: 在程序中使用多窗體時(shí),建立該數組。
Elements[]:在一個(gè)窗口中使用從個(gè)元素時(shí),建立該數組。
Frames[]:建立框架時(shí),使用該數組
anchors[]用于窗體的訪(fǎng)問(wèn)(它是通過(guò)《form name=“form1”》所指定的),link[]用于被鏈接到的錨點(diǎn)的訪(fǎng)問(wèn)(它是
通過(guò)《a href=URL》所指定的)。Forms[]反映窗體的屬性,而anchors[]反映Web頁(yè)面中的鏈接屬性。
有關(guān)錨數組的文檔：
<HTML><HEAD><BODY>
<A NAME=”MyAnchorsName1”> 定義第一個(gè)錨名
HTML Code
<A NAME=”MyAnchorsName2”> 定義第二個(gè)錨名
HTML Code
<A HREF=”#MyAnchorsName1”>建立錨的鏈接
<A HREF=”#MyAnchorsName2”> 建立錨的鏈接
….
該文檔段建立了兩面全錨的鏈接,可通過(guò)Anchors[]訪(fǎng)問(wèn)這些錨。document.Anchors[0]反映第一個(gè)錨,而
document.Anchors[1]反映第二個(gè)錨的有關(guān)信息。
五、范例
范例1：一個(gè)動(dòng)態(tài)文字滾動(dòng)的例子。
<html><head><title></title>
<script LANGUAGE="JavaScript">
with (top.window.location)
{baseURL = href.substring (0,href.lastIndexOf ("/") + 1)}
total_toc_items = 0;
current_overID = "";
last_overID = "";
browser = navigator.appName;
version = parseInt(navigator.appVersion);
client=null;
loaded = 0;
if (browser == "Netscape" && version >= 3) client = "ns3";
function toc_item (img_name,icon_col,width,height) {
if (client =="ns3") {
img_prefix = baseURL + img_name;
this.icon_col = icon_col;
this.toc_img_off = new Image (width,height);
this.toc_img_off.src = img_prefix + "_off.gif";
this.toc_img_on = new Image (width,height);
this.toc_img_on.src = img_prefix + "_on.gif";
}
}
function new_toc_item (img_name,icon_row,width,height) {
toc_item [img_name] = new toc_item (img_name,icon_row,width,height);
}
function toc_mouseover (itemID) {
if (client =="ns3") {
current_overID = itemID;
if (current_overID != last_overID) {
document [current_overID].src = toc_item [current_overID].toc_img_on.src;
if (last_overID != "") {
document.images [last_overID].src = toc_item[last_overID].toc_img_off.src;
}
last_overID = current_overID;
}
}
}
function toc_mouseout () {
if (client =="ns3") {
if (current_overID != "") {
document.images [current_overID].src = toc_item [current_overID].toc_img_off.src;
}
current_overID = "";
last_overID = "";
}
}
new_toc_item ("1",2,120,20);
<!-- Begin
function bannerObject(p){
this.msg = MESSAGE
this.out = " "
this.pos = POSITION
this.delay = DELAY
this.i = 0
this.reset = clearMessage}
function clearMessage(){
this.pos = POSITION}
var POSITION = 50;
var DELAY = 150;
var MESSAGE = "這是一個(gè)動(dòng)態(tài)JavaScript文字顯示的例子";
var scroll = new bannerObject();
function scroller(){
scroll.out += " ";
if(scroll.pos>0)
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) { scroll.out +=" " ; }
if (scroll.pos>= 0)
scroll.out += scroll.msg
else
scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
document.noticeForm.notice.value = scroll.out
scroll.out = " ";
scroll.pos--;
scroll.pos--;
if (scroll.pos < -(scroll.msg.length)) { scroll.reset(); } setTimeout
('scroller()',scroll.delay);}
</script>
</head>
<body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0"
alink="#008080"
text="#C0C0C0">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form NAME="noticeForm">
<p><input TYPE="text" name="notice" size="40" style="background-color: #c0c0c0"></p>
</form>
</td>
</tr>
</table>
</center></div>
</body></html>
范例2:顏色變化的例子。
<html><head>
<script>
<!--
function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;}
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a";
hexa[11]="b";
hexa[12]="c";
hexa[13]="d";
hexa[14]="e";
hexa[15]="f";
function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setbgColor(r, g, b) {
var hr = hex(r);
var hg = hex(g);
var hb = hex(b);
document.bgColor = "#"+hr+hg+hb;}
function fade(sr, sg, sb, er, eg, eb, step) {
for(var i = 0; i <= step; i++) {
setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)),
Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb *
((step-i)/step) + eb * (i/step))); }}
function fadein() {
fade(255,0,0,0,0,255,100);
fade(0,0,255,0,255,0,100);
fade(0,255,0, 0,0,0, 100);}
fadein();
// -->
</script>
<body>
</body></html>
本講介紹了用戶(hù)自行創(chuàng )建對象的方法, 用戶(hù)可根據需要創(chuàng )建自己的對象。并介紹了JavaScript中建數組的方法。
第六講 使用內部對象系統
使用瀏覽器的內部對象系統, 可實(shí)現與HTML文檔進(jìn)行交互。它的作用是將相關(guān)元素組織包裝起來(lái)，提供給程序設計
人員使用，從而減輕編程人的勞動(dòng)，提高設計Web頁(yè)面的能力。
一、瀏覽器對象層次及其主要作用
除了前面提到過(guò)的文檔document對象外，Navigator瀏覽器中還提供了窗口（Window）對象以及歷史（History）
和位置（Location）對象。
瀏覽器對象(Navigator):
提供有關(guān)瀏覽器的信息
窗口對象(Windows)：
Window對象處于對象層次的最頂端，它提供了處理Navigator窗口的方法和屬性。
位置對象(Location)：
Location對象提供了與當前打開(kāi)的URL一起工作的方法和屬性，它是一個(gè)靜態(tài)的對象。
歷史對象(History)：
History對象提供了與歷史清單有關(guān)的信息。
文檔對象(Document) ：
document對象包含了與文檔元素(elements)一起工作的對象，它將這些元素封裝起來(lái)供編程人員使用。
編程人員利用這些對象，可以對WWW瀏覽器環(huán)境中的事件進(jìn)行控制并作出處理。在JavaScript中提供了非常豐富的
內部方法和屬性,從而減輕了編程人員的工作,提高編程效率。這正是基于對象與面向對象的根本區別所在。在這些對象
系統中,文檔對象屬于非常重要的,它位于最低層,但對于我們實(shí)現Web頁(yè)面信息交互起作關(guān)鍵作用。因而它是對象系統的
核心部分。
二、文檔對象功能及其作用
在Navigator瀏覽器中，document文檔對象是核心是，同時(shí)也是最重要的。見(jiàn)下表：
Links Anchor Form Method Prop
鏈接對象 錨對象 窗體對象 方法 對象
document對象的主要作用就是把這些基本的元素（如links,anchor等）包裝起來(lái)，提供給編程人員使用。從另一個(gè)
角度看，document對象中又是由屬性和方法組成。
１、document中三個(gè)主要的對象
在document中主要有：links,anchor,form等三個(gè)最重要的對象：
（１）anchor錨對象：
anchor對象指的是<A Name=...> </A>標識在HTML源碼中存在時(shí)產(chǎn)生的對象。它包含著(zhù)文檔中所有的anchors信息
。
（２）鏈接links對象
link對象指的是用<A Href=...> </A>標記的連接一個(gè)超文本或超媒體的元素作為一個(gè)特定的URL。
（３）窗體（Form）對象
窗體對象是文檔對象的一個(gè)元素，它含有多種格式的對象儲存信息，使用它可以在JavaScript腳本中編寫(xiě)程序進(jìn)行
文字輸入，并可以用來(lái)動(dòng)態(tài)改變文檔的行為。通過(guò)document. Forms[]數組來(lái)使得在同一個(gè)頁(yè)面上可以有多個(gè)相同的窗
體,使用forms[]數組要比使用窗體名字要方便得多。
例:下面就是一個(gè)使用窗體數組和窗體名字的例子。該程序使得兩個(gè)窗體中的字段內容保持一致。
<Html><head></head>
<body>
<form >
<input type=text onChange="document.my.elements[0].value=this.value;" >
</form>
<form NAME="my">
<input type=text onChange="document.forms[0].elements[0].value=this.value;">
</form>
</body></html>
其中用了OnChnge事件(當窗體內容改變時(shí)激發(fā))。第一個(gè)使用窗體名字標識my,第二個(gè)使用窗體數組Forms[]。其效
果是一致。
２、文檔對象中的attribute屬性
document對象中的attribute屬性，主要用于在引用Href標識時(shí)，控制著(zhù)有關(guān)顏色的格式和有關(guān)文檔標題、文檔原
文件的URL以及文檔最后更新的日期。這部分元素的主要含義如下：
（１）鏈接顏色：alinkcolor
這個(gè)元素主要用于，當選取一個(gè)鏈接時(shí)，鏈接對象本身的顏色就按alinkcolo r指定改變。
（２）鏈接顏色：linkcolor
當用戶(hù)使用<A Href=...> Text string </A>鏈接后，Textstring的顏色就會(huì )按Linkcolor所指定的顏色更新。
（３）瀏覽過(guò)后的顏色：VlinkColor
該屬性表示的是已被瀏覽存儲為已瀏覽過(guò)的鏈接顏色。
（４）背景顏色：bgcolor
該元素包含文檔背景的顏色。
（５）前景顏色：Fgcolor
該元素包含HTML文檔中文本的前景顏色。
３、文檔對象的基本元素
（１）窗體屬性：
窗體屬性是與HTML文檔中<Form>...</Form>相對應的一組對象在HTML文檔所創(chuàng )建的窗體數，由length指定。通過(guò)
document.forms.length反映該文檔中所創(chuàng )建的窗體數目。
（２）錨屬性：anchors
該屬性中，包含了HTML文檔的所有<A> </A>標記為Name=...的語(yǔ)句標識。所有“錨”的數目保存在
document.anchors.length中。
（３）鏈接屬性：links
鏈接屬性是指在文檔中<A>...</A>的由Href=...指定的數目，其鏈接數目保存在document.links.length中。
三、范例
例1:下面我們通過(guò)一個(gè)例子來(lái)說(shuō)明文檔對象的綜合應用。輸出結果見(jiàn)圖6-2所示。
<html><head>
</HEAD>
<BOdy>
<Form Name="mytable">
請輸入數據：
<Input Type="text" Name="text1" Value="">
</Form>
<A name="Link1" href="test31.htm">鏈接到第一個(gè)文本</a><br>
<A name="Link2" href="test32.htm">鏈接到第二個(gè)文本</a><br>
<A name="Link2" href="test33.htm">鏈接到第三個(gè)文本</a><br>
<A href="#Link1">第一錨點(diǎn)</a>
<A href="#Link2">第二錨點(diǎn)</a>
<A Href="#Link3">第三錨點(diǎn)</a>
<BR>
<Script Language="JavaScript">
document.write("文檔有"+document.links.length+"個(gè)鏈接"+"<br>");
document.write("文檔有"+document.anchors.length+"個(gè)錨點(diǎn)"+"<br>");
document.write("文檔有"+document.forms.length+"個(gè)窗體");
</script>
</body>
</HTML>
例子2：下列程序隨機產(chǎn)生每日一語(yǔ)。
<HTML>
<HEAD>
<script Language="JavaScript">
<!--
tips = new Array(6);
tips[0]="每日一語(yǔ)（1）";
tips[1]="每日一語(yǔ)（2）";
tips[2]="每日一語(yǔ)（3）";
tips[3]="每日一語(yǔ)（4）";
tips[4]="每日一語(yǔ)（5）";
tips[5]="每日一語(yǔ)（6）";
index = Math.floor(Math.random() * tips.length);
document.write("<FONT SIZE=8 COLOR=DARKBLUE>" + tips[index]+"</FONT>");
</Script>
</HEAD>
</BODY>
</HTML>
本講主要介紹了JavaScript對象系統的使用方法，其中重點(diǎn)介紹了文檔對象及使用。
第七講 窗口及輸入輸出
JavaScript是基于對象的腳本編程語(yǔ)言，那么它的輸入輸出就是通過(guò)對象來(lái)完成的。其中有關(guān)輸入可通過(guò)窗口
（Window）對象來(lái)完成，而輸出可通過(guò)文檔（document）對象的方法來(lái)實(shí)現。
一、窗口及輸入輸出
請看下面例子：
<HTML>
<Head>
<script languaga="JavaScript">
Var test=window.prompt("請輸入數據:");
document.write(test+"JavaScript輸入輸出的例子");
</script>
</Head>
</HTML>
其中window.prompt()就是一個(gè)窗口對象的方法，其基本作用是，當裝入Web頁(yè)面時(shí)在屏幕上顯示一個(gè)具有“確定”
和“取消”的對話(huà)框，讓你輸出數據。document.writle是一個(gè)文檔對象的方法，它的基本功能，是實(shí)現Web頁(yè)面的輸出
顯示。見(jiàn)下圖所示。
1、窗口對象
該對象包括許多有用的屬性、方法和事件驅動(dòng)程序，編程人員可以利用這些對象控制瀏覽器窗口顯示的各個(gè)方面，
如對話(huà)框、框架等。在使用應注意以下幾點(diǎn)：
該對象對應于HTML文檔中的<Body>和<FrameSet>兩種標識；
onload和onunload都是窗口對象屬性；
在JavaScript腳本中可直接引用窗口對象。如：
window.alert("窗口對象輸入方法")
可直接使用以下格式：
alert("窗口對象輸入方法")
2、窗口對象的事件驅動(dòng)
窗口對象主要有裝入Web文檔事件onload和卸載時(shí)onunload事件。用于文檔載入和停止載入時(shí)開(kāi)始和停止更新文檔
。
3、窗口對象的方法
窗口對象的方法主要用來(lái)提供信息或輸入數據以及創(chuàng )建一個(gè)新的窗口。
創(chuàng )建一個(gè)新窗口open()
使用window.open（參數表）方法可以創(chuàng )建一個(gè)新的窗口。其中參數表提供有窗口的主要特性和文檔及窗口的命名。
具有OK按鈕的對話(huà)框
alert()方法能創(chuàng )建一個(gè)具有OK按鈕的對話(huà)框。
具有OK和Cancel按鈕的對話(huà)框
confirm()方法為編程人員提供一個(gè)具有兩個(gè)按鈕的對話(huà)框。
具有輸入信息的對話(huà)框
prompt()方法允許用戶(hù)在對話(huà)框中輸入信息，并可使用默認值，其基本格式如下prompt（“提示信息”，默認值）。
4、窗口對象中的屬性
窗口對象中的屬性主要用來(lái)對瀏覽器中存在的各種窗口和框架的引用，其主要屬性有以下幾個(gè)：
frames 文檔中幀的數目
frames（幀）作為實(shí)現一個(gè)窗口的分隔操作，起到非常有用的作用，在使用注意以下幾點(diǎn)：
frames屬性是通過(guò)HTML標識<Frames>的順序來(lái)引用的，它包含了一個(gè)窗口中的全部幀數。
幀本身已是一類(lèi)窗口，繼承了窗口對象所有的全部屬性和方法。
Parent 指明當前窗口或幀的父窗口。
defaultstatus:默認狀態(tài)，它的值顯示在窗口的狀態(tài)欄中。
status:包含文檔窗口中幀中的當前信息。
top:包括的是用以實(shí)現所有的下級窗口的窗口。
window.指的是當前窗口
self:引用當前窗口。
5、輸出流及文檔對象
在JavaScript文檔對象中，提供了用于顯示關(guān)閉、消除、打開(kāi)HTML頁(yè)面的輸出流。
（１）創(chuàng )建新文檔open()方法
使用document.open()創(chuàng )建一個(gè)新的窗口或在指定的命令窗口內打開(kāi)文檔。由于窗口對象是所加載的父對象,因而我
們在調用它的屬性或方法時(shí),不需要加入Window對象。例用Window. Open()與Open()是一樣的。
打開(kāi)一個(gè)窗口的基本格式：
Window .open("URL","窗口名字","窗口屬性"]
window屬性參數是由一個(gè)字符串列表項它由逗號分隔，它指明了有關(guān)新創(chuàng )建窗口的屬性。見(jiàn)下表所示。
參 數
設定值
含 義
toolbar
yes/no
建立或不建立標準工具條
location
yes/no
建立或不建立位置輸入字段
directions
yes/no
建立或不建立標準目錄按鈕
status
yes/no
建立或不建立狀態(tài)條
menubar
yes/no
建立或不建立菜單條
scrollbar
yes/no
建立或不建立滾動(dòng)條
revisable
yes/no
能否改變窗口大小
width
yes/no
確定窗口的寬度
Height
yes/no
確定窗口的高度。
在使用Open()方法時(shí)，需要注意以下點(diǎn)：
通常瀏覽器窗中，總有一個(gè)文檔是打開(kāi)的。因而不需要為輸出建立一個(gè)新文檔。
在完成對Web文檔的寫(xiě)操作后，要使用或調用close()方法來(lái)實(shí)現對輸出流的關(guān)閉。
在使用open()來(lái)打開(kāi)一個(gè)新流時(shí)，可為文檔指定一個(gè)有效的文檔類(lèi)型，有效文檔類(lèi)型包括text/HTML、text/gif、
text/xim、text/plugin等。
（２）write()、writeln()輸出顯示。
該方法主要用來(lái)實(shí)現在Web頁(yè)面上顯示輸出信息。在實(shí)際使用中，需注意以下幾點(diǎn)：
writeln()與write()唯一不同之處在于在未尾加了一個(gè)換符。
為了正常顯示其輸出信息，必須指明<pre> </Pre>標記，使之告訴編輯器。
輸出的文檔類(lèi)型，可以由瀏覽器中的有效的合法文本類(lèi)型所確定。
（３）關(guān)閉文檔流close()
在實(shí)現多個(gè)文檔對象中，必須使用close()來(lái)關(guān)閉一個(gè)對象后，才能打開(kāi)另一個(gè)文檔對象。
（４）清除文檔內容clear()
使用該方法可清除已經(jīng)打開(kāi)文檔的內容。
二、簡(jiǎn)單的輸入、輸出例子
在JavaScript中可以非常方便地實(shí)現輸入輸出信息，并與用戶(hù)進(jìn)行交互。
1、JavaScript信息的輸入
通過(guò)使用JavaScript中所提供的窗口對象方法prompt(), 就能完成信息的輸入。該方法提供了最簡(jiǎn)便的信息輸入方
式，其基本格式如下：
Window.prompt("提示信", 預定輸入信息);
此方法首先在瀏覽器窗口中彈出一個(gè)對話(huà)框, 讓用戶(hù)自行輸入信息。一旦輸入完成后，就返回用戶(hù)所輸入信息的值
。例:
test=prompt（“請輸入數據:”，”this is a JavaScript”）
實(shí)際上prompt()是窗口對象的一個(gè)方法。因為缺省情況下所用的對象就是window對象, 所以windows對象可以省略
不寫(xiě)。
2、輸出顯示
每種語(yǔ)言，都必須提供信息數據的輸出顯示。JavaScript也是一樣，它提供有幾個(gè)用于信息輸出顯示的方法。比較
常用的有window.alert()、document.write和及document.writln()方法。
１)、document.write()方法和document.writeln()方法
document是JavaScript中的一個(gè)對象在它中封裝許多有用的方法，其中write()和writeln()就是用于將文本信息
直接輸出到瀏覽器窗口中的方法。
document.write()；
document.writeln()；
說(shuō)明：
write()和writeln()方法都是用于向瀏覽器窗口輸出文本字串；
二者的唯一區別就是writeln()方法自動(dòng)在文本之后加入回車(chē)符。
２)、 window.alert()輸出
在JavaScript為了方便信息輸出，JavaScript提供了具有獨立的對話(huà)框信息輸出─alert()方法。
alert()方法是window對象的一個(gè)方法，因此在使用時(shí)，不需要寫(xiě)window窗口對象名，而是直接使用就行了。它主要用
途用在輸出時(shí)產(chǎn)生有關(guān)警告提示信息或提示用戶(hù)，一旦用戶(hù)按“確定”鈕后，方可繼續執行其他腳本程序。例:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<Script Language ="JavaScript">
alert("這是一個(gè)JavaScript測試程序");
</Script>
</BODY>
</HTML>
３)、利用輸入、輸出方法實(shí)現交互
在JavaScript中，可以利用prompt()方法和write()方法實(shí)現與Web頁(yè)面用戶(hù)進(jìn)行交互。例下面就是一個(gè)有關(guān)實(shí)現交
互的例子。
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<Script Language="JavaScript">
<!-- Hide From Other Browsers
document.write("<H1>有關(guān)交互的例子");
my=prompt("請輸入數據:");
document.write(my+"</H1>");
document.close();
// Stop Hiding from Other Browsers-->
</Script>
</BODY>
</HTML>
從上面程序可以看出：
可通過(guò)write()和prompt()方法實(shí)現交互。
在JavaScript腳本語(yǔ)言中可以使用HTML標識語(yǔ)言的代碼。從而實(shí)現混合編程。其中<H1>和<Br>就是HTML標識符。
三、范例
下列程序演示了你進(jìn)入主頁(yè)所停留的時(shí)間。
<html>
<form name="myform">
<td vAlign="top" width="135">您在此停留了：
<input name="clock" size="8" value="在線(xiàn)時(shí)間"></td>
</form>
<script language="JavaScript">
var id, iM = 0, iS = 1;
start = new Date();
function go()
{
now = new Date();
time = (now.getTime() - start.getTime()) / 1000;
time = Math.floor( time);
iS = time % 60;
iM = Math.floor( time / 60);
if ( iS < 10)
document.myform.clock.value = " " + iM + " 分 0" + iS + " 秒";
else
document.myform.clock.value = " " + iM + " 分 " + iS + " 秒";
id = setTimeout( "go()", 1000);
}
go();
</script>
</body>
</html>
在瀏覽器中的結果，見(jiàn)下圖1所示。
第八講 WEB頁(yè)面信息的交互
要實(shí)現動(dòng)態(tài)交互，必須掌握有關(guān)窗體對象(Form)和框架對象(Frames)更為復雜的知識。
一、窗體基礎知識
窗體對象可以使設計人員能用窗體中不同的元素與客戶(hù)機用戶(hù)相交互，而用不著(zhù)在之前首先進(jìn)行數據輸入，就可以
實(shí)現動(dòng)態(tài)改變Web文檔的行為。
１、什么是窗體對象
窗體（Form）:它構成了Web頁(yè)面的基本元素。通常一個(gè)Web頁(yè)面有一個(gè)窗體或幾個(gè)窗體，使用Forms[]數組來(lái)實(shí)現不
同窗體的訪(fǎng)問(wèn)。
<form Name=Form1>
<INPUT type=text...>
<Input type=text...>
<Inpup byne=text...>
</form>
<form Name=Form2>
<INPUT type=text...>
<Input type=text...>
</form>
在Forms[0]中共有三個(gè)基本元素，而Forms[1]中只有兩個(gè)元素。
窗體對象最主要的功能就是能夠直接訪(fǎng)問(wèn)HTML文檔中的窗體，它封裝了相關(guān)的HTML代碼：
<Form
Name ="表的名稱(chēng)"
Target ="指定信息的提交窗口"
action ="接收窗體程序對應的URL"
Method =信息數據傳送方式(get/post)
enctype ="窗體編碼方式"
[onsubmit ="JavaScript代碼"]>
</Form>
２、窗體對象的方法
窗體對象的方法只有一個(gè)--submit()方法，該方法主要功用就是實(shí)現窗體信息的提交。如提交Mytest窗體,則使用
下列格式：
document.mytest.submit()
３、窗體對象的屬性
窗體對象中的屬性主要包括以下：elements name action target encoding method.
除Elements外，其它幾個(gè)均反映了窗體中標識中相應屬性的狀
態(tài)，這通常是單個(gè)窗體標識；而elements常常是多個(gè)窗體元素值的數組，例：
elements[0].Mytable.elements[1]
４、訪(fǎng)問(wèn)窗體對象
在JavaScript中訪(fǎng)問(wèn)窗體對象可由兩種方法實(shí)現：
（１）通過(guò)訪(fǎng)問(wèn)窗體
在窗體對象的屬性中首先必須指定其窗體名，而后就可以通過(guò)下列標識訪(fǎng)問(wèn)窗體如：document.Mytable()。
（２）通過(guò)數組來(lái)訪(fǎng)問(wèn)窗體 除了使用窗體名來(lái)訪(fǎng)問(wèn)窗體外，還可以使用窗體對象數組來(lái)訪(fǎng)問(wèn)窗體對象。但需要注意
一點(diǎn)，因窗體對象是由瀏覽器環(huán)境的提供的，而瀏覽器環(huán)境所提供的數組下標是由0到n。所以可通過(guò)下列格式實(shí)現窗體
對象的訪(fǎng)問(wèn)：
document.forms[0]
document.forms[1]
document.forms[2]
...
５、引用窗體的先決條件
在JavaScript中要對窗體引用的條件是：必須先在頁(yè)面中用標識創(chuàng )建窗體，并將定義窗體部分放在引用之前。
二、窗體中的基本元素
窗體中的基本元素由按鈕、單選按鈕、復選按鈕、提交按鈕、重置按鈕、文本框等組成。
在JavaScript中要訪(fǎng)問(wèn)這些基本元素，必須通過(guò)對應特定的窗體元素的數組下標或窗體元素名來(lái)實(shí)現。每一個(gè)元素
主要是通過(guò)該元素的屬性或方法來(lái)引用。其引用的基本格式見(jiàn)下:
formName.elements[].methadName (窗體名.元素名或數組.方法)
formName.elemaent[].propertyName(窗體名.元素名或數組.屬性)
下面分別介紹：
１、Text單行單列輸入元素
功能：對Text標識中的元素實(shí)施有效的控制。
基本屬性：
Name：設定提交信息時(shí)的信息名稱(chēng)。對應于HTML文檔中的Name。
Value：用以設定出現在窗口中對應HTML文檔中Value的信息。
defaultvalue：包括Text元素的默認值
基本方法：
blur()：將當前焦點(diǎn)移到后臺。
select()：加亮文字。
主要事件：
onFocus：當Text獲得焦點(diǎn)時(shí)，產(chǎn)生該事件。
OnBlur：從元素失去焦點(diǎn)時(shí)，產(chǎn)生該事件。
Onselect：當文字被加亮顯示后，產(chǎn)生該文件。
onchange：當Text元素值改變時(shí)，產(chǎn)生該文件。
例：...
<Form name="test">
<input type="text" name="test" value="this is a javascript" >
</form>
...
<script language ="Javascirpt">
document.mytest.value="that is a Javascript";
document.mytest.select();
document.mytest.blur();
</script>
２、textarea多行多列輸入元素
功能：實(shí)施對Textarea中的元素進(jìn)行控制。
基本屬性
name：設定提交信息時(shí)的信息名稱(chēng)，對應HTML文檔Textarea的Name。
Value：用以設定出現在窗口中對應HTML文檔中Value的信息。
Default value：元素的默認值。
方法：
blur()：將輸入焦點(diǎn)失去
select()：將文字加亮后
事件：
onBlur:當失去輸入焦點(diǎn)后產(chǎn)生該事件
onFocus:當輸入獲得焦點(diǎn)后，產(chǎn)生該文件
Onchange:當文字值改變時(shí)，產(chǎn)生該事件
Onselect:當文字加亮后，產(chǎn)生該文件
３、Select選擇元素
功能：實(shí)施對滾動(dòng)選擇元素的控制。
屬性：
name:設定提交信息時(shí)的信息名稱(chēng)，對應文檔select中的name。
Length:對應文檔select中的length
options:組成多個(gè)選項的數組
selectIndex;該下標指明一個(gè)選項
select在中每一選項都含有以下屬性：
Text:選項對應的文字
selected:指明當前選項是否被選中
Index:指明當前選項的位置
defaultselected:默認選項
事件：
OnBlur：當select選項失去焦點(diǎn)時(shí)，產(chǎn)生該文件。
onFocas:當select獲得焦點(diǎn)時(shí)，產(chǎn)生該文件。
Onchange:選項狀態(tài)改變后，產(chǎn)生該事件。
４、Button按鈕
功能：實(shí)施對Button按鈕的控制。
屬性：
Name:設定提交信息時(shí)的信息名稱(chēng)，對應文檔中button的Name。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息。
方法：
click()該方法類(lèi)似于一個(gè)按下的按鈕。
事件：
onclick當單擊button按鈕時(shí)，產(chǎn)生該事件。
例 ：
<Form name="test">
<input type="button" name="testcall" onclick=tmyest()>
</form>
...
<script language="javascirpt">
document.elements[0].value="mytest"; //通過(guò)元素訪(fǎng)問(wèn)
或
document.testcallvalue="mytest"; // 通過(guò)名字訪(fǎng)問(wèn)
</script>
.....
５、checkbox檢查框
功能：實(shí)施對一個(gè)具有復選框中元素的控制。
屬性：
name:設定提交信息時(shí)的信息名稱(chēng)。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息。
Checked:該屬性指明框的狀態(tài)true/false.
defauitchecked:默認狀態(tài)
方法：
click()該方法使得框的某一個(gè)項被選中。
事件：
onclick:當框的選被選中時(shí)，產(chǎn)生該事件。
６、radio無(wú)線(xiàn)按鈕
功能：實(shí)施對一個(gè)具單選功能的無(wú)線(xiàn)按鈕控制。
屬性：
name:設定提交信息時(shí)的信息名稱(chēng)，對應HTML文檔中的radio的name相同
value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中的radio的name。
length:單選按鈕中的按鈕數目。
defalechecked:默認按鈕。
checked:指明選中還是沒(méi)有選中。
index:選中的按鈕的位置。
方法：
chick():選定一個(gè)按鈕。
事件：
onclick:單擊按鈕時(shí)，產(chǎn)生該事件。
７、hidden:隱藏
功能：實(shí)施對一個(gè)具有不顯示文字并能輸入字符的區域元素的控制。
屬性：
name:設定提交信息時(shí)的信息名稱(chēng)，對應HTML文檔的hidden中的Name。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔hidden中的value。
defaleitvalue:默認值
８、Password口令
功能：實(shí)施對具有口令輸入的元素的控制。
屬性：
Name:設定提交信息時(shí)的信息名稱(chēng)，對應HTML文檔中password中的name。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中password中的Value。
defaultvalu:默認值
方法
select():加亮輸入口令域。
blur():使這丟失passward輸入焦點(diǎn)。
focus():獲得password輸入焦點(diǎn)。
９、submit提交元素
功能：實(shí)施對一個(gè)具有提交功能按鈕的控制。
屬性：
name:設定提交信息時(shí)的信息名稱(chēng)，對應HTML文檔中submit。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中value。
方法
click()相當于按下submit按鈕。
事件：
onclick()當按下該按鈕時(shí)，產(chǎn)生該事件。
三、范例
下面我們演示通過(guò)點(diǎn)擊一個(gè)按鈕（red）來(lái)改變窗口顏色，點(diǎn)擊“調用動(dòng)態(tài)按鈕文檔”調用一個(gè)動(dòng)態(tài)按鈕文檔。
<html><head>
<Script Language="JavaScript">
//原來(lái)的顏色
document.bgColor="blue";
document.vlinkColor="white";
document.linkColor="yellow";
document.alinkcolor="red";
//動(dòng)態(tài)改變顏色
function changecolor(){
document.bgColor="red";
document.vlinkColor="blue";
document.linkColor="green";
document.alinkcolor="blue";
}
</script>
</HEAD>
<body bgColor="White" >
<A href="test8_2.htm"> 調用動(dòng)態(tài)按鈕文檔</a>
<form >
<Input type="button" Value="red" onClick="changecolor()">
</form>
</BODY>
</HTML>
輸出結果見(jiàn)下圖1所示。
動(dòng)態(tài)按鈕程序。
<HTML><HEAD></HEAD>
<p align="center"> </p>
<div align="center"><center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="form2" onSubmit="null">
<p><input type="submit" name="banner" VALUE="Submit"
onClick="alert('You have to put an \'action=[url]\' on the form
tag!!')"> <br>
<script language="JavaScript">
var id,pause=0,position=0;
function banner() {
// variables declaration
var i,k,msg=" 這里輸入你要的內容";// increase msg
k=(30/msg.length)+1;
for(i=0;i<=k;i++) msg+=" "+msg;
// show it to the window
document.form2.banner.value=msg.substring(position,position-30);
// set new position
if(position++==msg.length) position=0;
// repeat at entered speed
id=setTimeout("banner()",60); }
// end -->
banner();
</script></p>
</form>
</td>
</tr>
</table>
</center></div>
<p> </p>
<BODY>
<A href="test8_1.htm"> 返回</a>
</BODY>
</HTML>
輸出結果見(jiàn)下圖所示。
本講介紹了使用JavaScript腳本實(shí)現Web頁(yè)面信息交互的方法。其中主要介紹了窗體中的基本元素的主要功能和使
用。
第九講 實(shí)現更復雜的交互
一、什么是框架
框架Frames最主要功用是"分割"視窗，使每個(gè)"小視窗"能顯示不同的HTM L文件，不同框架之間可以互動(dòng)
(interact)，這就是說(shuō)不同框架之間可以交換訊息與資料。例如:假設您開(kāi)了兩個(gè)frames，第一個(gè)frame可顯示書(shū)的目錄
，第二個(gè)frame則顯示章節的具體內容。
框架可以將屏幕分割成不同的區域，每個(gè)區域有自己的URL，通過(guò)Frames[]數組對象來(lái)實(shí)現不同框架的訪(fǎng)問(wèn)。實(shí)際
上框架對象本身也一類(lèi)窗口，它繼承了窗口對象的所有特征，并擁有所有的屬性和方法。
<HTML><HEAD>
</HEAD>
<Frameset Rows="20%,80%">
<frame src="test9_1.html">
<Frameset Cols="50%,50%">
<frame src="test9_2.html">
<frame src="test9_3.html">
</Frameset>
</Frameset>
</HTML>
以上HTML標識將屏幕分成三個(gè)框架。先將窗口分成以二行為單位的窗口，之后再按分成二個(gè)窗口。并在相應的框架
中放入自己的HTML文檔。
通過(guò)[Framset ]告訴瀏覽器您要設置幾個(gè)框架；rows這項參數告訴瀏覽器您想將視窗分割成幾列；而 cols這項參
數是告訴瀏覽器您想將視窗分割成幾行。
可以用很多組的 <frameset...> tags 將視窗分割得更復雜。
可以給每個(gè)frame一個(gè)"名字" (name)。frame的名字在JavaScript語(yǔ)法中的地位非常重要。
可以用 <src> 告訴瀏覽器您要載入哪一個(gè) HTML文件。
二、如何訪(fǎng)問(wèn)框架
在前面我們介紹過(guò)使用document.forms[]實(shí)現單一窗體中不同元素的訪(fǎng)問(wèn)。而要實(shí)現框架中多窗體的不同元素的訪(fǎng)
問(wèn)，則必須使用window對象中的Frames屬性。Frames屬性同樣也是一個(gè)數組，他在父框架集中為每一個(gè)子框架設有一項
。通過(guò)下標實(shí)現不同框架的訪(fǎng)問(wèn):
parent.frames[Index1].docuement.forms[index2]
通過(guò)parent.frames.length確定窗口中窗體的數目。
除了使用數組下標來(lái)訪(fǎng)問(wèn)窗體外還可以使用框架名和窗體名來(lái)實(shí)現各元素的訪(fǎng)問(wèn)：
parent.framesName.decument.formNames.elementName.(m/p)
三、范例
下面我們通過(guò)一個(gè)具體的實(shí)例, 來(lái)說(shuō)明利用JavaScript腳本在WEB中實(shí)現更為復雜的信息交互。該例子是在一個(gè)多
窗口中實(shí)現窗體信息的動(dòng)態(tài)交互,在程序中首先在瀏覽器窗口中制作三個(gè)用于窗體交互的窗口,每個(gè)窗體窗口實(shí)現不同信
息的動(dòng)態(tài)交互。
main.html為主調用文檔它首先將窗口劃分為具有二行的窗體,爾后再將第二行的窗體劃分為具有二列的窗體；
1.html為顯示標題文檔；
2.html為第二框架文檔其中需要注意的是:
通過(guò)JavaScript腳本將所示的“云南省”和“四川省”分別改為“昆明市”和“成都市”；
3.html為第三框架文檔。
主調文檔
主要作用是將窗口劃分為具有二行的窗體,爾后再將第二行的窗體劃分為具有二列的窗體。
main.htm
<HTML>
<HEAD>
</HEAD>
<Frameset Rows="10%,90%">
<frame src="1.htm">
<Frameset Cols="40%,60%">
<frame src="2.htm">
<frame src="3.htm">
</Frameset>
</Frameset>
</HTML>
第一個(gè)框架
主要作用是顯示標題文檔。
1.htm
<HTML>
<HEAD>
</HEAD>
<H2>使用框架實(shí)現WEB交互</H2>
</HTML>
第二個(gè)框架
主要作用是實(shí)現交互?？梢酝ㄟ^(guò)JavaScript腳本將所示的“云南省”和“四川省”分別改為“昆明市”和“成都市”。
2.htm
<HTML>
<HEAD>
</HEAD>
<Body>
<Form name="1">
請選擇城市：<BR>
<Select name="select1" Multiple>
<Option>云南省
<Option>四川省
<Option>貴州省
<Option>山東省
<Option>江蘇省
<Option>浙江省
<Option>安徽省
<Option>河南省
</select><BR>
<HR>
<Input Type="Submit" name="" value="提交">
<Input Type="reset" name="" value="復位">
</Form>
<pre>
<script language="JavaScript">
document.test9_1.elements[0].options[0].text="昆明市";
document.test9_1.elements[0].options[1].text="成都市";
</script>
</pre>
</Body>
</HTML>
第三個(gè)框架
主要作用是實(shí)現交互。
3.htm
<HTML>
<HEAD>
</HEAD>
<Body>
<Form name="2">
請輸入用戶(hù)名：
<Input Type="text" name="text1" Value="" Size=20><BR>
<HR>
請選擇:
<Input Type="Checkbox" name="checkbox1" Value="qb">全部信息<BR>
<Input Type="Checkbox" name="checkbox2" Value="bf">部分信息<BR>
<Input Type="Checkbox" name="checkbox3" Value="sy">所有城市<br>
<HR>
<Input Type="Submit" name="" value="提交">
<Input Type="reset" name="" value="復位">
<BR>
</Form>
<script language="JavaScript">
document.test9_2.elements[0].value="勞動(dòng)和社會(huì )保障";
document.test9_2.elements[1].checked=true;
document.test9_2.elements[2].checked=true;
document.test9_2.elements[3].checked=false;
</script>
</Body>
</HTML>
本講介紹框架中的基本元素的主要功能和使用，利用JavaScript腳本可以非常方便、靈活地實(shí)現Web頁(yè)面更為復雜的信息交互，這是HTML標識語(yǔ)言所不能具備的。從中可以看出JavaScript是多么的吸引眾多的Web設計人員。
聯(lián)系客服
