網(wǎng)頁設(shè)計(jì)畢業(yè)論文

《網(wǎng)頁設(shè)計(jì)畢業(yè)論文》由會員分享，可在線閱讀，更多相關(guān)《網(wǎng)頁設(shè)計(jì)畢業(yè)論文（47頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

1、合肥財(cái)經(jīng)職業(yè)學(xué)院西安電子科技大學(xué)網(wǎng)絡(luò)學(xué)院畢業(yè)設(shè)計(jì)西安電子科技大學(xué)網(wǎng)絡(luò)學(xué)院畢業(yè)設(shè)計(jì)畢業(yè)論文（實(shí)踐）報(bào)告畢業(yè)論文（實(shí)踐）報(bào)告系系 別別 機(jī)電系機(jī)電系 專專 業(yè)業(yè) 計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)計(jì)算機(jī)網(wǎng)絡(luò)技術(shù) 年年 級級 0802 學(xué)學(xué) 制制 三年三年 學(xué)學(xué) 號號 20813045 姓姓 名名 程俊嵐程俊嵐 2010 年 09 月題目題目 個(gè)人網(wǎng)頁設(shè)計(jì)主主要要內(nèi)內(nèi)容容1 網(wǎng)頁設(shè)計(jì)語言概述網(wǎng)頁設(shè)計(jì)語言概述2 基于對象的基于對象的 JavaScript 語言語言3 內(nèi)部對象系統(tǒng)的使用內(nèi)部對象系統(tǒng)的使用4 WEB 頁面信息的交互頁面信息的交互窗體與框架窗體與框架5 結(jié)結(jié) 論論導(dǎo)導(dǎo)師師評評語語成成 績績導(dǎo)導(dǎo) 師師摘摘 要要

2、本論文將對個(gè)人網(wǎng)頁設(shè)計(jì)與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設(shè)計(jì)與制作語言的基礎(chǔ)上，著重使用 JavaScript 作為工具語言進(jìn)行網(wǎng)頁設(shè)計(jì)與制作的實(shí)際操作，分別對基于對象的 JavaScript 語言、內(nèi)部對象系統(tǒng)的使用及WEB 頁面信息交互窗口和框架進(jìn)行詳細(xì)描述，并利用具體的實(shí)例進(jìn)行驗(yàn)證。本論文主要章節(jié)如下，第一章：緒論，本章主要介紹網(wǎng)頁設(shè)計(jì)的相關(guān)知識。第二章：網(wǎng)頁設(shè)計(jì)語言概述，本章主要介紹網(wǎng)頁設(shè)計(jì)的語言HTML，以及用于編輯 HTML 語言的軟件，為后續(xù)工作奠定基礎(chǔ)。第三章：基于對象的JavaScript 語言，本章介紹了基于對象的 JavaScript 中常用內(nèi)部對象屬性、方法

3、的使用。第四章：內(nèi)部對象系統(tǒng)的使用，本章主要介紹使用瀏覽器的內(nèi)部對象系統(tǒng)，可實(shí)現(xiàn)與 HTML 文檔進(jìn)行交互。第五章：WEB 頁面信息的交互窗體與框架，本章主要介紹實(shí)現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關(guān)窗體對象（Form）和框架對象（Frames）更為復(fù)雜的知識。關(guān)鍵詞：關(guān)鍵詞： 網(wǎng)頁制作 網(wǎng)頁設(shè)計(jì) HTML ASP目目 錄錄第一章 緒論 .11.1 網(wǎng)頁設(shè)計(jì)概述.11.2 網(wǎng)頁設(shè)計(jì)的要素.11.3 本論文工作.2第二章 網(wǎng)頁設(shè)計(jì)語言概述 .32.1 HTML 語言介紹 .32.2 常用的 HTML 語言編輯軟件.42.3 本章小結(jié).9第三章 基于對象的 JAVASCRIPT 語言 .103.1 對象

4、的基礎(chǔ)知識.103.2 常用對象的屬性和方法 .133.3 本章小結(jié).18第四章 內(nèi)部對象系統(tǒng)的使用 .194.1 瀏覽器對象層次及其主要作用 .194.2 文檔對象功能及其作用 .194.3 內(nèi)部對象系統(tǒng)實(shí)例 .214.4 本章小結(jié).23第五章 WEB 頁面信息的交互窗體與框架.245.1 窗體基礎(chǔ)知識 .245.2 窗體中的基本元素.255.3 窗體對象實(shí)例 .295.4 框架.325.5 框架的訪問.345.6 本章小結(jié).37第六章 結(jié) 論 .38致 謝 .39參考文獻(xiàn) .40目 錄0第一章 緒論1第一章第一章 緒論緒論隨著 21 世紀(jì)的到來，人們更深切地感受到計(jì)算機(jī)在生活和工作中的作用

5、越來越重要，越來越來的職業(yè)需要具有計(jì)算機(jī)的應(yīng)用技能。掌握計(jì)算機(jī)是職業(yè)的需要，更是事業(yè)發(fā)展的需要。網(wǎng)頁設(shè)計(jì)與制作是計(jì)算機(jī)能力的具體表現(xiàn)，本章主要介紹網(wǎng)頁設(shè)計(jì)的相關(guān)知識。1.11.1 網(wǎng)頁設(shè)計(jì)概述網(wǎng)頁設(shè)計(jì)概述網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，離開網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)” ，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站是 INTERNET 上宣傳和反映企業(yè)形象和文化的重要窗口。1.21.2 網(wǎng)頁設(shè)計(jì)的要素網(wǎng)頁設(shè)計(jì)的要素網(wǎng)頁設(shè)計(jì)的兩大要素是：整體風(fēng)格和色彩搭配。一、確定網(wǎng)站的整體風(fēng)格在這里

6、，我提供給大家一些參考經(jīng)驗(yàn)：1將你的標(biāo)志 logo，盡可能的放在每個(gè)頁面上最突出的位置。2突出你的標(biāo)準(zhǔn)色彩。3總結(jié)一句能反映貴站精髓的宣傳標(biāo)語！4相同類型的圖像采用相同效果，比如說標(biāo)題字都采用陰影效果，那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的！二、網(wǎng)頁色彩的搭配1用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。2用兩種色彩。先選定一種色彩，然后選擇它的對比色。3用一個(gè)色系。簡單的說就是用一個(gè)感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。在網(wǎng)頁配色中，還要切記一些誤區(qū)：1不要將所有顏色都用到，盡量控制在三至五種色彩以

7、內(nèi)。2背景和前文的對比盡量要大(絕對不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。第二章 網(wǎng)頁設(shè)計(jì)語言概述21.31.3 本論文工作本論文工作本論文主要是對網(wǎng)頁設(shè)計(jì)與制作的語言基礎(chǔ)上進(jìn)行探討，主要內(nèi)容如下：第一章：緒論本章主要介紹網(wǎng)頁設(shè)計(jì)的相關(guān)知識。第二章：網(wǎng)頁設(shè)計(jì)語言概述本章主要介紹網(wǎng)頁設(shè)計(jì)的語言HTML，以及用于編輯 HTML 語言的軟件，為后續(xù)工作奠定基礎(chǔ)。第三章：基于對象的 JavaScript 語言本章介紹了基于對象的 JavaScript 中常用內(nèi)部對象屬性、方法的使用。第四章：內(nèi)部對象系統(tǒng)的使用本章主要介紹使用瀏覽器的內(nèi)部對象系統(tǒng)，可實(shí)現(xiàn)與 HTML 文檔進(jìn)行交互。它的作用

8、是將相關(guān)元素組織包裝起來，提供給程序設(shè)計(jì)人員使用，從而減輕編程人的勞動，提高設(shè)計(jì) Web 頁面的能力。第五章：WEB 頁面信息的交互窗體與框架本章主要介紹實(shí)現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關(guān)窗體對象（Form）和框架對象（Frames）更為復(fù)雜的知識。第六章：總結(jié)第二章 網(wǎng)頁設(shè)計(jì)語言概述3第二章第二章 網(wǎng)頁設(shè)計(jì)語言概述網(wǎng)頁設(shè)計(jì)語言概述2.1 HTMLHTML 語言介紹語言介紹HTML（HyperText Mark-up Language）即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。HTML 文本是由 HTML 命令組成的描述性文本，HTML 命

9、令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML 的結(jié)構(gòu)包括頭部（Head） 、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi)容。2.1.1 HTML 語言的特點(diǎn)HTML 文檔制作不是很復(fù)雜，且功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，這也是 WWW 盛行的原因之一，HTML 語言的特點(diǎn)如下：1、簡易性，HTML 版本升級采用超集方式，從而更加靈活方便。2、可擴(kuò)展性，HTML 語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，HTML 采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。3、平臺無關(guān)性。雖然 PC 機(jī)大行其道，但使用 MAC 等其他機(jī)器的大有人在，H

10、TML 可以使用在廣泛的平臺上，這也是 WWW 盛行的另一個(gè)原因。2.1.2 HTML 語言的編輯軟件HTML 的本質(zhì)是文本，需要瀏覽器的解釋，HTML 的編輯器大體可以分為三種：1、基本編輯軟件，使用 WINDOWS 自帶的記事本或?qū)懽职娑伎梢跃帉?，?dāng)然，如果你用 WPS 來編寫，也可以。不過存盤時(shí)請使用.htm 或.html 作為擴(kuò)展名，這樣瀏覽器就可以解釋執(zhí)行了。2、半所見即所得軟件，這種軟件能大大提高開發(fā)效率，它可以使你在很短的時(shí)間內(nèi)做出 Homepage，且可以學(xué)習(xí) HTML，這種類型的軟件主要有HOTDOG，還有國產(chǎn)的軟件網(wǎng)頁作坊。3、所見即所得軟件，使用最廣泛的編輯器，完全可以一

11、點(diǎn)不懂 HTML 的知識就可以做出網(wǎng)頁，這類軟件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。一個(gè) HTML 文件由一個(gè) HTML 元素組成，即文件以開始。以第二章 網(wǎng)頁設(shè)計(jì)語言概述4結(jié)束，文檔中其他元素及其屬性的聲明都是 HTML 的元素體。 HTML 元素的元素體和元素體由兩大部分組成，即頭元素和體元素。頭元素和體元素的元素體又由其他元素、文本和注釋等組成。 一個(gè)標(biāo)準(zhǔn)的 HTML 文件應(yīng)該具備如下結(jié)構(gòu)： 標(biāo)記一個(gè) HTML 文件的開始 HTML 文件的文件頭部分開始 文件頭部分內(nèi)容 HTML 文件的文件頭部分結(jié)束 HTML 文件的文件體

12、部分開始文件體HTML 文件的文件部分結(jié)束標(biāo)記該 HTML 文件結(jié)束有些元素只能出現(xiàn)在頭元素中，如 meta、title 等元素，而大多數(shù)的元素只能出現(xiàn)在體元素中。在頭元素中的元素表示的是該 HTML 文件的一般信息，比如該文件的標(biāo)題、來源、作者、版本、字符集和關(guān)鍵字等，這些元素與書寫的順序無關(guān)，它們只是表明該 HTML 文件的屬性值。但出現(xiàn)在元素體中的元素則是要注意書寫順序的，改變了它們的書寫順序就會改變 HTML 文件在瀏覽器上輸出的形式。2.2 常用的常用的 HTMLHTML 語言編輯軟件語言編輯軟件2.2.1 Dreamweaver Dreamweaver 是美國 Adobe(原 Ma

13、cromedia，2005 年被 Adobe 收購)公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。它不僅是優(yōu)秀的WYSIWYG 編輯器，更是優(yōu)秀的代碼編輯器，有代碼加亮，代碼提示等豐富功能，提供各種示例代碼，并支持 Javascript,PHP,ASP,JSP 等多種腳本語言。最新版本為 CS4，發(fā)布于 2008 年 9 月。2.2.2 ASPASP 技術(shù)是 Microsoft 公司開發(fā)的一套全新的服務(wù)器端腳本程序環(huán)境。它可以根據(jù)客戶端的不同請求，在服

14、務(wù)器端經(jīng)過相應(yīng)的 ASP 程序處理生成不同的靜第二章 網(wǎng)頁設(shè)計(jì)語言概述5態(tài) HTML 頁面并穿回給瀏覽器。ASP 自身有很多優(yōu)點(diǎn)，這些優(yōu)點(diǎn)使它成為了當(dāng)今世界網(wǎng)絡(luò)上應(yīng)用最多的腳本設(shè)計(jì)環(huán)境。1、什么是 ASPASP 的全稱是 Active Server Pages,中文名稱叫做動態(tài)服務(wù)器網(wǎng)頁，其功能在于可以使用它來開發(fā)運(yùn)行在 Windows 服務(wù)器平臺上的動態(tài)網(wǎng)頁和網(wǎng)頁。盡管我們常把“ASP 腳本”掛在嘴邊，但 ASP 既不是一種編程語言，也不是開發(fā)工具軟件，同樣也不是一種應(yīng)用程序，它實(shí)際上是一種開發(fā)動態(tài)網(wǎng)頁的技術(shù)。2、ASP 的腳本語言ASP 的腳本語言可以是 VBScript 或者 Jscri

15、pt，也可以是兩者的結(jié)合，所以任何一種文本編輯器都能編輯 ASP 腳本，當(dāng)然不同的編輯器開發(fā)調(diào)試效率是不一樣的。和通常的 VBScript 和 Jscript 應(yīng)用程序不同，ASP 所有的程序都是在服務(wù)器端運(yùn)行的，而不是在瀏覽器或者客戶端執(zhí)行的，這樣用戶就不必?fù)?dān)心自己的瀏覽器能否運(yùn)行所編寫的 ASP 代碼了。程序執(zhí)行完畢，服務(wù)器僅將執(zhí)行的結(jié)果返回給客戶端瀏覽器，這樣即使客戶端的瀏覽器不支持 VBScript 或 Jscript，但是仍然可以瀏覽動態(tài)的網(wǎng)頁。VBScript 是 IIS 默認(rèn)的腳本語言，當(dāng)然可以在 IIS 中更改默認(rèn)的腳本語言。如果改成 Jscript，那么默認(rèn)的腳本語言就是 J

16、script。因?yàn)?VBScript 在屬性和方法上的靈活表現(xiàn)方式更適合作為服務(wù)器的腳本，所以推薦大家用 VBScript 作為 ASP的默認(rèn)腳本語言。3、ASP 的運(yùn)行環(huán)境由于 ASP 是一種服務(wù)器的腳本語言，所以并不是所有的 Web 服務(wù)器都具有這個(gè)功能。ASP 是由 Microsoft 公司推出的，當(dāng)然在目前頁只有 Microsoft 公司推出的服務(wù)器能實(shí)現(xiàn) ASP 的強(qiáng)大功能，其他的一些服務(wù)器在安裝了 ASP 組件后才能實(shí)現(xiàn)這個(gè)功能。Microsoft 公司推出的支持 ASP 的 Web 服務(wù)器有以下幾個(gè)：Microsoft Internet Information Server ve

17、rsion (IIS);Microsoft Peer Web Server;Microsoft Personal WebServer (PWS);其中前兩個(gè)主要是為 Microsoft 公司的 Windowns NT /2000 /XP 系統(tǒng)開發(fā)的，當(dāng)然它們的功能以及穩(wěn)定性都要強(qiáng)很多。目前大型的站點(diǎn)大多是有 IIS 作為服務(wù)器，而 PWS 是為一般的 PC 用戶開發(fā)的。既然 ASP 是在服務(wù)器端執(zhí)行的，因此訪問這些以.asp 為后綴的文件時(shí)，就不能使用實(shí)際的物理路徑，而只能用虛擬路徑。使用虛擬路徑訪問 ASP 最簡單的方法就是將 ASP 文件拷貝到 IIS 的安裝目錄中 (默認(rèn)的安裝目錄為第二

18、章 網(wǎng)頁設(shè)計(jì)語言概述6C：Inetpubwwwroot),然后就可以通過 IE 瀏覽器直接訪問了。訪問文件名為“index.asp”的 ASP 文件，如果在 IE 瀏覽器中用物理路徑訪問，本來期望的結(jié)果是不會出現(xiàn)的，瀏覽器只會顯示普通的 HTML 頁面。為此應(yīng)該將“index.asp”文件拷貝到服務(wù)器目錄下，然后通過虛擬路徑來訪問該頁面。如果程序沒有錯(cuò)的話即可看到預(yù)期的效果。4、ASP 的工作原理通過上述介紹，大家應(yīng)該了解到一個(gè) ASP 頁面從服務(wù)器端傳送到客戶端的原理與一般靜態(tài) HTML 頁面是不同的。從客戶端的一 URL 請求到服務(wù)器反饋一個(gè)頁面給瀏覽器，其大致的流程如下：(1) 用戶在客

19、戶端瀏覽器中輸入一個(gè)網(wǎng)址，與服務(wù)器建立連接。(2) 服務(wù)器根據(jù)用戶請求的網(wǎng)址在硬盤上找到相應(yīng)的文件。(3) 如果文件是普通的 HTML 文檔，那么服務(wù)器將直接把該文件傳送到客戶端。(4) 如果文件是服務(wù)器腳本，那么服務(wù)器將運(yùn)行這個(gè)文件。如果需要查詢數(shù)據(jù)庫，則通過 ADO 組件連接 ODBC 或 DSN 數(shù)據(jù)源訪問數(shù)據(jù)庫。進(jìn)行了一系列的運(yùn)算和解釋后，將最終結(jié)果形成一個(gè)純 HTML 文檔。(5) 把這個(gè)文檔傳送到客戶端。(6) 結(jié)束這次連接。由于最后傳送給客戶端的是一個(gè)純 HTML 文本文件，因此用戶在瀏覽器上是看不到 ASP 文件的源代碼的。5、ASP 的開發(fā)工具使用 ASP 進(jìn)行網(wǎng)路編程，選擇

20、一個(gè)合適的開發(fā)工具是很重要的。ASP 對開發(fā)工具沒有特殊的要求，只要具有文本編輯器功能的工具均可。因此 ASP 的開發(fā)工具很多，比較好的由 Visual Interdev、Dreamweaver 等。Dreamweaver 是一個(gè)集成的 Web 應(yīng)用軟件開發(fā)系統(tǒng)，包括開發(fā)、發(fā)行以及管理數(shù)據(jù)庫驅(qū)動的 Web 應(yīng)用軟件所需的所有的功能，所以一般情況下推薦使用Dreamweaver。2.2.3 JavaScript一、JavaScript 概述JavaScript 是一種基于對象(Object)和事件驅(qū)動(Event Driven)并具有安全性能的腳本語言。使用它的目的是與 HTML 超文本標(biāo)記語言

21、、Java 腳本語言（Java 小程序）一起實(shí)現(xiàn)在一個(gè) Web 頁面中鏈接多個(gè)對象，與 Web 客戶交互第二章 網(wǎng)頁設(shè)計(jì)語言概述7作用。從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML 語言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了 HTML 語言的缺陷，它是 Java 與HTML 折衷的選擇，具有以下幾個(gè)基本特點(diǎn)： 1、是一種腳本編寫語言JavaScript 是一種腳本語言，它采用小程序段的方式實(shí)現(xiàn)編程。像其它腳本語言一樣,JavaScript 同樣已是一種解釋性語言,它提供了一個(gè)易的開發(fā)過程。它的基本結(jié)構(gòu)形式與 C、C+、VB、Delphi 十分類似。但它不像這些語言一樣，需要先編譯，而是

22、在程序運(yùn)行過程中被逐行地解釋。它與 HTML 標(biāo)識結(jié)合在一起，從而方便用戶的使用操作。 2、基于對象的語言。JavaScript 是一種基于對象的語言，同時(shí)以可以看作一種面向?qū)ο蟮?。這意味著它能運(yùn)用自己已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用。 3、簡單性JavaScript 的簡單性主要體現(xiàn)在：首先它是一種基于 Java 基本語句和控制流之上的簡單而緊湊的設(shè)計(jì), 從而對于學(xué)習(xí) Java 是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。 4、安全性JavaScript 是一種安全性語言，它不允許訪問本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)

23、器上，不允許對網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。 5、動態(tài)性的JavaScript 是動態(tài)的，它可以直接對用戶或客戶輸入做出響應(yīng)，無須經(jīng)過Web 服務(wù)程序。它對用戶的反映響應(yīng)，是采用以事件驅(qū)動的方式進(jìn)行的。所謂事件驅(qū)動，就是指在主頁(Home Page)中執(zhí)行了某種操作所產(chǎn)生的動作，就稱為“事件”(Event)。比如按下鼠標(biāo)、移動窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會引起相應(yīng)的事件響應(yīng)。 6、跨平臺性JavaScript 是依賴于瀏覽器本身，與操作環(huán)境無關(guān)，只要能運(yùn)行瀏覽器的計(jì)算機(jī)，并支持 JavaScript 的瀏覽器就可正

24、確執(zhí)行。從而實(shí)現(xiàn)了“編寫一次,走遍天下”的夢想。 實(shí)際上 JavaScript 最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦，軟件僅需一個(gè)字處理軟件及一瀏覽器，無須 WEB 服務(wù)器通道，通過自己的電腦即可完成所有的事情。第二章 網(wǎng)頁設(shè)計(jì)語言概述8總之，JavaScript 是一種新的描述語言，它可以被箝入到 HTML 的文件之中。 JavaScript 語言可以做到回應(yīng)使用者的需求事件 (如：form 的輸入) ，而不用任何的網(wǎng)路來回傳輸資料，所以當(dāng)一位使用者輸入一項(xiàng)資料時(shí)，它不用經(jīng)過傳給伺服端 (server)處理，再傳回來的過程，而直接可以被客戶端 (client) 的應(yīng)用

25、程式所處理。JavaScript 和 Java 很類似，但到底并不一樣！ Java 是一種比 JavaScript 更復(fù)雜許多的程式語言，而 JavaScript 則是相當(dāng)容易了解的語言。JavaScript 創(chuàng)作者可以不那麼注重程式技巧，所以許多 Java 的特性在 Java Script 中并不支援。二、JavaScript 和 Java 的區(qū)別雖然 JavaScript 與 Java 有緊密的聯(lián)系，但卻是兩個(gè)公司開發(fā)的不同的兩個(gè)產(chǎn)品。Java 是 SUN 公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計(jì)語言，特別適合于Internet 應(yīng)用程序開發(fā)；而 JavaScript 是 Netscape 公司

26、的產(chǎn)品，其目的是為了擴(kuò)展 Netscape Navigator 功能,而開發(fā)的一種可以嵌入 Web 頁面中的基于對象和事件驅(qū)動的解釋性語言, 它的前身是 Live Script；而 Java 的前身是 Oak 語言。下面對兩種語言間的異同作如下比較： 1、基于對象和面向?qū)ο驤ava 是一種真正的面向?qū)ο蟮恼Z言，即使是開發(fā)簡單的程序，必須設(shè)計(jì)對象。JavaScript 是種腳本語言，它可以用來制作與網(wǎng)絡(luò)無關(guān)的，與用戶交互作用的復(fù)雜軟件。它是一種基于對象（Object Based）和事件驅(qū)動（Event Driver）的編程語言。因而它本身提供了非常豐富的內(nèi)部對象供設(shè)計(jì)人員使用。 2、解釋和編譯兩

27、種語言在其瀏覽器中所執(zhí)行的方式不一樣。Java 的源代碼在傳遞到客戶端執(zhí)行之前，必須經(jīng)過編譯，因而客戶端上必須具有相應(yīng)平臺上的仿真器或解釋器，它可以通過編譯器或解釋器實(shí)現(xiàn)獨(dú)立于某個(gè)特定的平臺編譯代碼的束縛。JavaScript 是一種解釋性編程語言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給客戶編由瀏覽器解釋執(zhí)行。 3、強(qiáng)變量和弱變量兩種語言所采取的變量是不一樣的。Java 采用強(qiáng)類型變量檢查，即所有變量在編譯之前必須作聲明。如: Integer x;String y;第三章 基于對象的 JavaScript 語言9x=1234;x=4321;其中 X=1234

28、說明是一個(gè)整數(shù)，Y=4321 說明是一個(gè)字符串。JavaScript 中變量聲明，采用其弱類型。即變量在使用前不需作聲明，而是解釋器在運(yùn)行時(shí)檢查其數(shù)據(jù)類型，如：x=1234;y4321;前者說明 x 為其數(shù)值型變量，而后者說明 y 為字符型變量。4、代碼格式不一樣Java 是一種與 HTML 無關(guān)的格式，必須通過像 HTML 中引用外媒體那么進(jìn)行裝載，其代碼以字節(jié)代碼的形式保存在獨(dú)立的文檔中。JavaScript 的代碼是一種文本字符格式，可以直接嵌入 HTML 文檔中，并且可動態(tài)裝載。編寫 HTML 文檔就像編輯文本文件一樣方便。 5、嵌入方式不一樣在 HTML 文檔中，兩種編程語言的標(biāo)識不

29、同，JavaScript 使用.來標(biāo)識，而 Java 使用.來標(biāo)識。 6、靜態(tài)聯(lián)編和動態(tài)聯(lián)編Java 采用靜態(tài)聯(lián)編，即 Java 的對象引用必須在編譯時(shí)的進(jìn)行，以使編譯器能夠?qū)崿F(xiàn)強(qiáng)類型檢查。JavaScript 采用動態(tài)聯(lián)編，即 JavaScript 的對象引用在運(yùn)行時(shí)進(jìn)行檢查，如不經(jīng)編譯則就無法實(shí)現(xiàn)對象引用的檢查。 2.3 本章小結(jié)本章小結(jié)本章主要介紹了網(wǎng)頁設(shè)計(jì)語言 HTML 和 JavaScript，第三章 基于對象的 JavaScript 語言10第三章第三章 基于對象的基于對象的 JavaScriptJavaScript 語言語言JavaScript 語言是基于對象的（Object-B

30、ased） ，而不是面向?qū)ο蟮模╫bject-oriented） 。之所以說它是一門基于對象的語言，主要是因?yàn)樗鼪]有提供象抽象、繼承、重載等有關(guān)面向?qū)ο笳Z言的許多功能。而是把其它語言所創(chuàng)建的復(fù)雜對象統(tǒng)一起來，從而形成一個(gè)非常強(qiáng)大的對象系統(tǒng)。雖然 JavaScript 語言是一門基于對象的，但它還是具有一些面向?qū)ο蟮幕咎卣鳌Ｋ梢愿鶕?jù)需要?jiǎng)?chuàng)建自己的對象，從而進(jìn)一步擴(kuò)大 JavaScript 的應(yīng)用范圍，增強(qiáng)編寫功能強(qiáng)大的 Web 文檔。3.1 對象的基礎(chǔ)知識對象的基礎(chǔ)知識3.1.1 對象的基本結(jié)構(gòu) JavaScript 中的對象是由屬性(properties)和方法(methods)兩個(gè)基本的

31、元素的構(gòu)成的。前者是對象在實(shí)施其所需要行為的過程中，實(shí)現(xiàn)信息的裝載單位，從而與變量相關(guān)聯(lián)；后者是指對象能夠按照設(shè)計(jì)者的意圖而被執(zhí)行，從而與特定的函數(shù)相聯(lián)。3.1.2 引用對象的途徑 一個(gè)對象要真正地被使用，可采用以下幾種方式獲得：（1）引用 JavaScript 內(nèi)部對象；（2）由瀏覽器環(huán)境中提供；（3）創(chuàng)建新對象。這就是說一個(gè)對象在被引用之前，這個(gè)對象必須存在，否則引用將毫無意義，而出現(xiàn)錯(cuò)誤信息。從上面中我們可以看出 JavaScript 引用對象可通過三種方式獲取。要么創(chuàng)建新的對象，要么利用現(xiàn)存的對象。3.1.3 有關(guān)對象操作語句JavaScript 不是一純面向?qū)ο蟮恼Z言，它設(shè)有提供面向

32、對象語言的許多功能，因此 JavaScript 設(shè)計(jì)者之所以把它你“基于對象”而不是面向?qū)ο蟮恼Z言，在JavaScript 中提供了幾個(gè)用于操作對象的語句和關(guān)鍵字及運(yùn)算符。（1） 、For.in 語句格式如下：For（對象屬性名 in 已知對象名）第三章 基于對象的 JavaScript 語言11說明：該語句的功能是用于對已知對象的所有屬性進(jìn)行操作的控制循環(huán)。它是將一個(gè)已知對象的所有屬性反復(fù)置給一個(gè)變量；而不是使用計(jì)數(shù)器來實(shí)現(xiàn)的。該語句的優(yōu)點(diǎn)就是無需知道對象中屬性的個(gè)數(shù)即可進(jìn)行操作。例：下列函數(shù)是顯示數(shù)組中的內(nèi)容：Function showData(object)for (var X=0; X

33、30;X+)document.write(objecti)；該函數(shù)是通過數(shù)組下標(biāo)順序值，來訪問每個(gè)對象的屬性，使用這種方式首先必須知道數(shù)組的下標(biāo)值，否則若超出范圍，則就會發(fā)生錯(cuò)誤。而使 For.in 語句，則根本不需要知道對象屬性的個(gè)數(shù)，見下：Function showData(object)for(var prop in object)document.write(objectprop)；使用該函數(shù)時(shí)，在循環(huán)體中，F(xiàn)or 自動將的屬性取出來，直到最后為此。（2）with 語句使用該語句的意思是：在該語句體內(nèi)，任何對變量的引用被認(rèn)為是這個(gè)對象的屬性，以節(jié)省一些代碼。with object.所有

34、在 with 語句后的花括號中的語句，都是在后面 object 對象的作用域的。（3）this 關(guān)鍵字this 是對當(dāng)前的引用，在 JavaScript 由于對象的引用是多層次，多方位的，往往一個(gè)對象的引用又需要對另一個(gè)對象的引用，而另一個(gè)對象有可能又要引用另一個(gè)對象，這樣有可能造成混亂，最后自己已不知道現(xiàn)在引用的那一個(gè)對象，為此 JavaScript 提供了一個(gè)用于將對象指定當(dāng)前對象的語句 this。（4）New 運(yùn)算符雖然在 JavaScript 中對象的功能已經(jīng)是非常強(qiáng)大的了。但更強(qiáng)大的是設(shè)計(jì)人員可以按照需求來創(chuàng)建自己的對象，以滿足某一特定的要求。使用 New 運(yùn)算符可以創(chuàng)建一個(gè)新的對象

35、。其創(chuàng)建對象使用如下格式：Newobject=NEW Object(Parameters table);其中 Newobject 創(chuàng)建的新對象：object 是已經(jīng)存在的對象； parameters table參數(shù)表；new 是 JavaScript 中的命令語句。第三章 基于對象的 JavaScript 語言12如創(chuàng)建一個(gè)日期新對象newData=New Data()birthday=New Data (December 12.1998)之后就可使 NewData、birthday 作為一個(gè)新的日期對象了。3.1.4 對象屬性的引用 對象屬性的引用可由下列三種方式之一實(shí)現(xiàn)：（1）使用點(diǎn)（.）

36、運(yùn)算符university.Name=“云南省”university.city=“昆明市”university.Date=1999其中 university 是一個(gè)已經(jīng)存在的對象，Name、City、Date 是它的三個(gè)屬性，并通過操作對其賦值。（2）通過對象的下標(biāo)實(shí)現(xiàn)引用university0=“云南”university1=“昆明市”university2=1999通過數(shù)組形式的訪問屬性，可以使用循環(huán)操作獲取其值。function showunievsity(object)for (var j=0;j2; j+)document.write(objectj)若采用 For.in 則可以不知

37、其屬性的個(gè)數(shù)后就可以實(shí)現(xiàn)：Function showmy(object)for (var prop in this)docament.write(thisprop);（3）通過字符串的形式實(shí)現(xiàn)universityName=“云南”universityCity=“昆明市”universityDate=19993.1.5 對象的方法的引用 在 JavaScript 中對象方法的引用是非常簡單的。ObjectName.methods()實(shí)際上 methods()=FunctionName 方法實(shí)質(zhì)上是一個(gè)函數(shù)。 如引用第三章 基于對象的 JavaScript 語言13university 對象中的

38、showmy（）方法，則可使用：document.write (university.showmy()或：document.write(university)如：引用 math 內(nèi)部對象中 cos()的方法則：with(math)document.write(cos(35);document.write(cos(80);若不使用 with 則引用時(shí)相對要復(fù)雜些：document.write(Math.cos(35)document.write(math.sin(80)3.2 常用對象的屬性和方法常用對象的屬性和方法 JavaScript 為我們提供了一些非常有用的常用內(nèi)部對象和方法。用戶不需要

39、用腳本來實(shí)現(xiàn)這些功能。這正是基于對象編程的真正目的。在 JavaScript 提供了 string（字符串） 、math（數(shù)值計(jì)算）和 Date（日期）三種對象和其它一些相關(guān)的方法。從而為編程人員快速開發(fā)強(qiáng)大的腳本程序提供了非常有利的條件。3.2.1 常用內(nèi)部對象 在 JavaScript 中對于對象屬性與方法的引用，有兩種情況：其一是說該對象是靜態(tài)對象，即在引用該對象的屬性或方法時(shí)不需要為它創(chuàng)建實(shí)例；而另一種對象則在引用它的對象或方法是必須為它創(chuàng)建一個(gè)實(shí)例，即該對象是動態(tài)對象。對 JavaScript 內(nèi)部對象的引用，以是緊緊圍繞著它的屬性與方法進(jìn)行的。因而明確對象的靜動性對于掌握和理解 J

40、avaScript 內(nèi)部對象是具有非常重要的意義。1、串對象 string 對象：內(nèi)部靜態(tài)性。訪問 properties 和 methods 時(shí)，可使用（.）運(yùn)算符實(shí)現(xiàn)?；臼褂酶袷剑簅bjectName.prop/methods（1）串對象的屬性該對象只有一個(gè)屬性，即 length。它表明了字符串中的字符個(gè)數(shù)，包括所有符號。例：第三章 基于對象的 JavaScript 語言14mytest=This is a JavaScriptmystringlength=mytest.length最后 mystringlength 返回 mytest 字串的長度為 20。（2）串對象的方法string

41、對象的方法共有個(gè)。主要用于有關(guān)字符串在 Web 頁面中的顯示、字體大小、字體顏色、字符的搜索以及字符的大小寫轉(zhuǎn)換。其主要方法如下： 錨點(diǎn) anchor()：該方法創(chuàng)建如用 Html 文檔中一樣的 anchor 標(biāo)記。使用anchor 如用 Html 中(A Name=)一樣。通過下列格式訪問:string.anchor(anchorName)。有關(guān)字符顯示的控制方法big 字體顯示, Italics()斜體字顯示，bold()粗體字顯示，blink()字符閃爍顯示，small（）字符用小體字顯示，fixed()固定高亮字顯示、fontsize(size)控制字體大小等。字體顏色方法；fontc

42、olor(color)字符串大小寫轉(zhuǎn)換toLowerCase()小寫轉(zhuǎn)換，toUpperCase()大寫轉(zhuǎn)換。下列把一個(gè)給定的串分別轉(zhuǎn)換成大寫和小寫格式:string=stringValue.toUpperCase 和 string=stringValue.toLowerCase。字符搜索：indexOfcharactor,fromIndex從指定 formIndtx 位置開始搜索 charactor 第一次出現(xiàn)的位置。返回字串的一部分字串：substring(start,end)從 start 開始到 end 的字符全部返回。2、算術(shù)函數(shù)的 math 對象 功能：提供除加、減、乘、除以外的一

43、引些自述運(yùn)算。如對數(shù)，平方根等 。靜動性：靜態(tài)對象（1）主要屬性math 中提供了個(gè)屬性，它們是數(shù)學(xué)中經(jīng)常用到的常數(shù)、以為底的自然對數(shù)、以為底的自然對數(shù) LN2、3.14159 的 PI、1/2 的平方根SQRT1-2,2 的平方根為 SQRT2。（2）主要方法絕對值：abs()正弦余弦值：sin(),cos()第三章 基于對象的 JavaScript 語言15反正弦反余弦 :asin(), acos()正切反正切：tan(),atan()四舍五入：round()平方根：sqrt()基于幾方次的值：Pow(base,exponent)3、日期及時(shí)間對象 功能：提供一個(gè)有關(guān)日期和時(shí)間的對象。靜動

44、性：動態(tài)性，即必須使用 New 運(yùn)算符創(chuàng)建一個(gè)實(shí)例。例：MyDate=New Date()Date 對象沒有提供直接訪問的屬性。只具有獲取和設(shè)置日期和時(shí)間的方法。（1）獲取日期的時(shí)間方法getYear(): 返回年數(shù)getMonth():返回當(dāng)月號數(shù)getDate(): 返回當(dāng)日號數(shù)getDay():返回星期幾getHours():返回小時(shí)數(shù)getMintes(:返回分鐘數(shù)getSeconds():返回秒數(shù)getTime() : 返回毫秒數(shù)（2）設(shè)置日期和時(shí)間：setYear();設(shè)置年setDate():設(shè)置當(dāng)月號數(shù)setMonth():設(shè)置當(dāng)月份數(shù)setHours():設(shè)置小時(shí)數(shù)setMi

45、ntes():設(shè)置分鐘數(shù)setSeconds():設(shè)置秒數(shù)setTime ():設(shè)置毫秒數(shù)3.2.2 JavaScript 中的系統(tǒng)函數(shù) JavaScript 中的系統(tǒng)函數(shù)又稱內(nèi)部方法。它提供了與任何對象無關(guān)的系統(tǒng)函數(shù)，使用這些函數(shù)不需創(chuàng)建任何實(shí)例,可直接用。1、返回字符串表達(dá)式中的值：方法名：eval（字串表達(dá)式） ，例：第三章 基于對象的 JavaScript 語言16test=eval(8+9+5/2);2、返回字符串 ASCI 碼：方法名：unEscape (string)3、返回字符的編碼：方法名：escape(character)4、返回實(shí)數(shù)：parseFloat(floustri

46、ng);5、返回不同進(jìn)制的數(shù)：parseInt(numbestring ,rad.X)其中 radix 是數(shù)的進(jìn)制，numbs 字符串?dāng)?shù)3.2.3 舉例 下面是一個(gè)時(shí)鐘顯示的 JavaScript 文檔。在文檔中用了非常多的函數(shù)。Test4_1.htm時(shí)鐘function showClock() function hideClock() var timerID = nullvar timerRunning = falsefunction stopClock() if(timerRunning)clearTimeout(timerID);timerRunning = falsedocument.

47、clock.face.value = ;第三章 基于對象的 JavaScript 語言17function 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 : h

48、ours - 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 = truefunction

49、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);form   時(shí)鐘第四章 內(nèi)部對象系統(tǒng)的使用18 3.3 本章小結(jié)本章小結(jié)本講介紹了基于

50、對象的 JavaScript 中常用內(nèi)部對象屬性、方法的使用。第四章 內(nèi)部對象系統(tǒng)的使用19第四章第四章 內(nèi)部對象系統(tǒng)的使用內(nèi)部對象系統(tǒng)的使用使用瀏覽器的內(nèi)部對象系統(tǒng)，可實(shí)現(xiàn)與 HTML 文檔進(jìn)行交互。它的作用是將相關(guān)元素組織包裝起來，提供給程序設(shè)計(jì)人員使用，從而減輕編程人的勞動，提高設(shè)計(jì) Web 頁面的能力。4.1 瀏覽器對象層次及其主要作用瀏覽器對象層次及其主要作用除了前面提到過的文檔 document 對象外，Navigator 瀏覽器中還提供了窗口（Window）對象以及歷史（History）和位置（Location）對象。瀏覽器對象(Navigator)：提供有關(guān)瀏覽器的信息窗口對象

51、(Windows)：Window 對象處于對象層次的最頂端，它提供了處理Navigator 窗口的方法和屬性。位置對象(Location)：Location 對象提供了與當(dāng)前打開的 URL 一起工作的方法和屬性，它是一個(gè)靜態(tài)的對象。歷史對象(History)：History 對象提供了與歷史清單有關(guān)的信息。文檔對象(Document)：document 對象包含了與文檔元素(elements)一起工作的對象，它將這些元素封裝起來供編程人員使用。網(wǎng)頁設(shè)計(jì)與制作人員利用這些對象，可以對 WWW 瀏覽器環(huán)境中的事件進(jìn)行控制并作出處理。在 JavaScript 中提供了非常豐富的內(nèi)部方法和屬性，從而減

52、輕了編程人員的工作，提高編程效率。這正是基于對象與面向?qū)ο蟮母緟^(qū)別所在。在這些對象系統(tǒng)中，文檔對象屬于非常重要的，它位于最低層，但對于我們實(shí)現(xiàn) Web 頁面信息交互起作關(guān)鍵作用。因而它是對象系統(tǒng)的核心部分。4.2 文檔對象功能及其作用文檔對象功能及其作用在 Navigator 瀏覽器中，document 文檔對象是核心是，同時(shí)也是最重要的。見表 4-1 所示。表 4-1 document 對象LinksAnchorFormMethodProp鏈接對象錨對象窗體對象方法對象從表 4-1 中可以看出，document 對象的主要作用就是把這些基本的元素（如 links,anchor 等）包裝起來

53、，提供給編程人員使用。從另一個(gè)角度看，document 對象中又是由屬性和方法組成。第四章 內(nèi)部對象系統(tǒng)的使用204.2.1 document 中三個(gè)主要的對象在 document 中主要有：links,anchor,form 等三個(gè)最重要的對象：（1）anchor 錨對象：anchor 對象指的是 標(biāo)識在 HTML 源碼中存在時(shí)產(chǎn)生的對象。它包含著文檔中所有的 anchors 信息。（2）鏈接 links 對象link 對象指的是用 標(biāo)記的連接一個(gè)超文本或超媒體的元素作為一個(gè)特定的 URL。（3）窗體（Form）對象窗體對象是文檔對象的一個(gè)元素，它含有多種格式的對象儲存信息，使用它可以在 J

54、avaScript 腳本中編寫程序進(jìn)行文字輸入，并可以用來動態(tài)改變文檔的行為。通過 document. Forms數(shù)組來使得在同一個(gè)頁面上可以有多個(gè)相同的窗體,使用 forms數(shù)組要比使用窗體名字要方便得多。下面就是一個(gè)使用窗體數(shù)組和窗體名字的例子。該程序使得兩個(gè)窗體中的字段內(nèi)容保持一致。Test6_1.htm其中用了 OnChnge 事件(當(dāng)窗體內(nèi)容改變時(shí)激發(fā))。第一個(gè)使用窗體名字標(biāo)識 my,第二個(gè)使用窗體數(shù)組 Forms。其效果是一致。4.2.2 文檔對象中的 attribute 屬性document 對象中的 attribute 屬性，主要用于在引用 Href 標(biāo)識時(shí)，控制著有第四章 內(nèi)

55、部對象系統(tǒng)的使用21關(guān)顏色的格式和有關(guān)文檔標(biāo)題、文檔原文件的 URL 以及文檔最后更新的日期。這部分元素的主要含義如下：（1）鏈接顏色：alinkcolor這個(gè)元素主要用于，當(dāng)選取一個(gè)鏈接時(shí)，鏈接對象本身的顏色就按alinkcolo r 指定改變。（2）鏈接顏色：linkcolor當(dāng)用戶使用 Text string 鏈接后，Textstring 的顏色就會按Linkcolor 所指定的顏色更新。（3）瀏覽過后的顏色：VlinkColor該屬性表示的是已被瀏覽存儲為已瀏覽過的鏈接顏色。（4）背景顏色：bgcolor該元素包含文檔背景的顏色。（5）前景顏色：Fgcolor該元素包含 HTML 文檔

56、中文本的前景顏色。4.2.3 文檔對象的基本元素（1）窗體屬性：窗體屬性是與 HTML 文檔中.相對應(yīng)的一組對象在 HTML文檔所創(chuàng)建的窗體數(shù)，由 length 指定。通過 document.forms.length 反映該文檔中所創(chuàng)建的窗體數(shù)目。（2）錨屬性：anchors該屬性中，包含了 HTML 文檔的所有 標(biāo)記為 Name=.的語句標(biāo)識。所有“錨”的數(shù)目保存在 document.anchors.length 中。（3）鏈接屬性：links鏈接屬性是指在文檔中.的由 Href=.指定的數(shù)目，其鏈接數(shù)目保存在 document.links.length 中。4.3 內(nèi)部對象系統(tǒng)實(shí)例下面我們

57、通過一個(gè)例子來說明文檔對象的綜合應(yīng)用。輸出結(jié)果見圖 4-2 所示。Test6_2.htm第四章 內(nèi)部對象系統(tǒng)的使用22請輸入數(shù)據(jù)：鏈接到第一個(gè)文本鏈接到第二個(gè)文本鏈接到第三個(gè)文本第一錨點(diǎn)第二錨點(diǎn)第三錨點(diǎn)document.write(文檔有+document.links.length+個(gè)鏈接+);document.write(文檔有+document.anchors.length+個(gè)錨點(diǎn)+);document.write(文檔有+document.forms.length+個(gè)窗體);圖 4-2例子 2：下列程序隨機(jī)產(chǎn)生每日一語。test6_3.html第五章 WEB 頁面信息的交互窗體與框架23

58、!-tips = new Array(6);tips0=每日一語（1）;tips1=每日一語（2）;tips2=每日一語（3）;tips3=每日一語（4）;tips4=每日一語（5）;tips5=每日一語（6）;index = Math.floor(Math.random() * tips.length);document.write( + tipsindex+);圖 4-3 4.4 本章小結(jié)本章主要介紹內(nèi)部對象系統(tǒng)及其使用方法。第五章 WEB 頁面信息的交互窗體與框架24第五章第五章 WEBWEB 頁面信息的交互頁面信息的交互窗體與框架窗體與框架要實(shí)現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關(guān)窗體對象（F

59、orm）和框架對象（Frames）更為復(fù)雜的知識。5.1 窗體基礎(chǔ)知識窗體基礎(chǔ)知識窗體對象可以使設(shè)計(jì)人員能用窗體中不同的元素與客戶機(jī)用戶相交互，而用不著在之前首先進(jìn)行數(shù)據(jù)輸入，就可以實(shí)現(xiàn)動態(tài)改變 Web 文檔的行為。5.1.1 窗體對象窗體（Form）：它構(gòu)成了 Web 頁面的基本元素。通常一個(gè) Web 頁面有一個(gè)窗體或幾個(gè)窗體，使用 Forms數(shù)組來實(shí)現(xiàn)不同窗體的訪問。在 Forms0中共有三個(gè)基本元素，而 Forms1中只有兩個(gè)元素。窗體對象最主要的功能就是能夠直接訪問 HTML 文檔中的窗體，它封裝了相關(guān)的 HTML 代碼：第五章 WEB 頁面信息的交互窗體與框架255.1.2 窗體對象

60、的方法窗體對象的方法只有一個(gè)-submit()方法，該方法主要功用就是實(shí)現(xiàn)窗體信息的提交。如提交 Mytest 窗體，則使用下列格式：document.mytest.submit()5.1.3 窗體對象的屬性窗體對象中的屬性主要包括以下：elements name action target encoding method。除 Elements 外，其它幾個(gè)均反映了窗體中標(biāo)識中相應(yīng)屬性的狀態(tài)，這通常是單個(gè)窗體標(biāo)識；而 elements 常常是多個(gè)窗體元素值的數(shù)組，例：elements0.Mytable.elements15.1.4 訪問窗體對象在 JavaScript 中訪問窗體對象可由兩種方

61、法實(shí)現(xiàn)：（1）通過訪問窗體在窗體對象的屬性中首先必須指定其窗體名，而后就可以通過下列標(biāo)識訪問窗體如：document.Mytable()。（2）通過數(shù)組來訪問窗體除了使用窗體名來訪問窗體外，還可以使用窗體對象數(shù)組來訪問窗體對象。但需要注意一點(diǎn)，因窗體對象是由瀏覽器環(huán)境的提供的，而瀏覽器環(huán)境所提供的數(shù)組下標(biāo)是由 0 到 n。所以可通過下列格式實(shí)現(xiàn)窗體對象的訪問：document.forms0document.forms1document.forms2.5.1.5 引用窗體的先決條件在 JavaScript 中要對窗體引用的條件是：必須先在頁面中用標(biāo)識創(chuàng)建窗體，并將定義窗體部分放在引用之前。5.2

62、 窗體中的基本元素窗體中的基本元素窗體中的基本元素由按鈕、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。在 JavaScript 中要訪問這些基本元素，必須通過對應(yīng)特定的窗體元素的數(shù)第五章 WEB 頁面信息的交互窗體與框架26組下標(biāo)或窗體元素名來實(shí)現(xiàn)。每一個(gè)元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下：formName.elements.methadName (窗體名.元素名或數(shù)組.方法)formName.elemaent.propertyName(窗體名.元素名或數(shù)組.屬性)下面分別介紹：（1）Text 單行單列輸入元素功能：對 Text 標(biāo)識中的元素實(shí)施有效的控制。

63、基本屬性：Name：設(shè)定提交信息時(shí)的信息名稱。對應(yīng)于 HTML 文檔中的 Name。Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng) HTML 文檔中 Value 的信息。defaultvalue：包括 Text 元素的默認(rèn)值基本方法：blur()：將當(dāng)前焦點(diǎn)移到后臺。select()：加亮文字。主要事件：onFocus：當(dāng) Text 獲得焦點(diǎn)時(shí)，產(chǎn)生該事件。OnBlur：從元素失去焦點(diǎn)時(shí)，產(chǎn)生該事件。Onselect：當(dāng)文字被加亮顯示后，產(chǎn)生該文件。onchange：當(dāng) Text 元素值改變時(shí)，產(chǎn)生該文件。例：.document.mytest.value=that is a Javascript;doc

64、ument.mytest.select();document.mytest.blur();（2）textarea 多行多列輸入元素功能：實(shí)施對 Textarea 中的元素進(jìn)行控制?；緦傩詎ame：設(shè)定提交信息時(shí)的信息名稱，對應(yīng) HTML 文檔 Textarea 的 Name。Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng) HTML 文檔中 Value 的信息。第五章 WEB 頁面信息的交互窗體與框架27Default value：元素的默認(rèn)值。方法：blur()：將輸入焦點(diǎn)失去select()：將文字加亮后事件：onBlur:當(dāng)失去輸入焦點(diǎn)后產(chǎn)生該事件onFocus:當(dāng)輸入獲得焦點(diǎn)后，產(chǎn)生該文件Onc

65、hange:當(dāng)文字值改變時(shí)，產(chǎn)生該事件Onselect:當(dāng)文字加亮后，產(chǎn)生該文件（3）Select 選擇元素功能：實(shí)施對滾動選擇元素的控制。屬性：name:設(shè)定提交信息時(shí)的信息名稱，對應(yīng)文檔 select 中的 name。Length:對應(yīng)文檔 select 中的 lengthoptions:組成多個(gè)選項(xiàng)的數(shù)組selectIndex;該下標(biāo)指明一個(gè)選項(xiàng)select 在中每一選項(xiàng)都含有以下屬性：Text:選項(xiàng)對應(yīng)的文字selected:指明當(dāng)前選項(xiàng)是否被選中Index:指明當(dāng)前選項(xiàng)的位置defaultselected:默認(rèn)選項(xiàng)事件：OnBlur：當(dāng) select 選項(xiàng)失去焦點(diǎn)時(shí)，產(chǎn)生該文件。on

66、Focas:當(dāng) select 獲得焦點(diǎn)時(shí)，產(chǎn)生該文件。Onchange:選項(xiàng)狀態(tài)改變后，產(chǎn)生該事件。（4）Button 按鈕功能：實(shí)施對 Button 按鈕的控制。屬性：Name:設(shè)定提交信息時(shí)的信息名稱，對應(yīng)文檔中 button 的 Name。Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng) HTML 文檔中 Value 的信息。方法：click()該方法類似于一個(gè)按下的按鈕。事件：onclick 當(dāng)單擊 button 按鈕時(shí)，產(chǎn)生該事件。第五章 WEB 頁面信息的交互窗體與框架28例 ：.document.elements0.value=mytest; /通過元素訪問或document.testcallvalue=mytest; / 通過名字訪問.（5）checkbox 檢查框功能：實(shí)施對一個(gè)具有復(fù)選框中元素的控制。屬性：name:設(shè)定提交信息時(shí)的信息名稱。Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng) HTML 文檔中 Value 的信息。Checked:該屬性指明框的狀態(tài) true/false.defauitchecked:默認(rèn)狀態(tài)方法：click()該方法使得框的某一個(gè)項(xiàng)被選中。事件：Onclic