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