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

合肥財(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ù) 年年 級(jí)級(jí) 0802 學(xué)學(xué) 制制 三年三年 學(xué)學(xué) 號(hào)號(hào) 20813045 姓姓 名名 程俊嵐程俊嵐 2010 年 09 月題目題目 個(gè)人網(wǎng)頁(yè)設(shè)計(jì)主主要要內(nèi)內(nèi)容容1 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述2 基于對(duì)象的基于對(duì)象的 JavaScript 語(yǔ)言語(yǔ)言3 內(nèi)部對(duì)象系統(tǒng)的使用內(nèi)部對(duì)象系統(tǒng)的使用4 WEB 頁(yè)面信息的交互頁(yè)面信息的交互窗體與框架窗體與框架5 結(jié)結(jié) 論論導(dǎo)導(dǎo)師師評(píng)評(píng)語(yǔ)語(yǔ)成成 績(jī)績(jī)導(dǎo)導(dǎo) 師師摘摘 要要本論文將對(duì)個(gè)人網(wǎng)頁(yè)設(shè)計(jì)與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁(yè)設(shè)計(jì)與制作語(yǔ)言的基礎(chǔ)上，著重使用 JavaScript 作為工具語(yǔ)言進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)與制作的實(shí)際操作，分別對(duì)基于對(duì)象的 JavaScript 語(yǔ)言、內(nèi)部對(duì)象系統(tǒng)的使用及WEB 頁(yè)面信息交互窗口和框架進(jìn)行詳細(xì)描述，并利用具體的實(shí)例進(jìn)行驗(yàn)證。本論文主要章節(jié)如下，第一章：緒論，本章主要介紹網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)知識(shí)。第二章：網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述，本章主要介紹網(wǎng)頁(yè)設(shè)計(jì)的語(yǔ)言HTML，以及用于編輯 HTML 語(yǔ)言的軟件，為后續(xù)工作奠定基礎(chǔ)。第三章：基于對(duì)象的JavaScript 語(yǔ)言，本章介紹了基于對(duì)象的 JavaScript 中常用內(nèi)部對(duì)象屬性、方法的使用。第四章：內(nèi)部對(duì)象系統(tǒng)的使用，本章主要介紹使用瀏覽器的內(nèi)部對(duì)象系統(tǒng)，可實(shí)現(xiàn)與 HTML 文檔進(jìn)行交互。第五章：WEB 頁(yè)面信息的交互窗體與框架，本章主要介紹實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)交互，必須掌握有關(guān)窗體對(duì)象（Form）和框架對(duì)象（Frames）更為復(fù)雜的知識(shí)。關(guān)鍵詞：關(guān)鍵詞： 網(wǎng)頁(yè)制作 網(wǎng)頁(yè)設(shè)計(jì) HTML ASP目目 錄錄第一章 緒論 .11.1 網(wǎng)頁(yè)設(shè)計(jì)概述.11.2 網(wǎng)頁(yè)設(shè)計(jì)的要素.11.3 本論文工作.2第二章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述 .32.1 HTML 語(yǔ)言介紹 .32.2 常用的 HTML 語(yǔ)言編輯軟件.42.3 本章小結(jié).9第三章 基于對(duì)象的 JAVASCRIPT 語(yǔ)言 .103.1 對(duì)象的基礎(chǔ)知識(shí).103.2 常用對(duì)象的屬性和方法 .133.3 本章小結(jié).18第四章 內(nèi)部對(duì)象系統(tǒng)的使用 .194.1 瀏覽器對(duì)象層次及其主要作用 .194.2 文檔對(duì)象功能及其作用 .194.3 內(nèi)部對(duì)象系統(tǒng)實(shí)例 .214.4 本章小結(jié).23第五章 WEB 頁(yè)面信息的交互窗體與框架.245.1 窗體基礎(chǔ)知識(shí) .245.2 窗體中的基本元素.255.3 窗體對(duì)象實(shí)例 .295.4 框架.325.5 框架的訪問(wèn).345.6 本章小結(jié).37第六章 結(jié) 論 .38致 謝 .39參考文獻(xiàn) .40目 錄0第一章 緒論1第一章第一章 緒論緒論隨著 21 世紀(jì)的到來(lái)，人們更深切地感受到計(jì)算機(jī)在生活和工作中的作用越來(lái)越重要，越來(lái)越來(lái)的職業(yè)需要具有計(jì)算機(jī)的應(yīng)用技能。掌握計(jì)算機(jī)是職業(yè)的需要，更是事業(yè)發(fā)展的需要。網(wǎng)頁(yè)設(shè)計(jì)與制作是計(jì)算機(jī)能力的具體表現(xiàn)，本章主要介紹網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)知識(shí)。1.11.1 網(wǎng)頁(yè)設(shè)計(jì)概述網(wǎng)頁(yè)設(shè)計(jì)概述網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)，離開網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)” ，也是企業(yè)無(wú)形資產(chǎn)的組成部分，而網(wǎng)站是 INTERNET 上宣傳和反映企業(yè)形象和文化的重要窗口。1.21.2 網(wǎng)頁(yè)設(shè)計(jì)的要素網(wǎng)頁(yè)設(shè)計(jì)的要素網(wǎng)頁(yè)設(shè)計(jì)的兩大要素是：整體風(fēng)格和色彩搭配。一、確定網(wǎng)站的整體風(fēng)格在這里，我提供給大家一些參考經(jīng)驗(yàn)：1將你的標(biāo)志 logo，盡可能的放在每個(gè)頁(yè)面上最突出的位置。2突出你的標(biāo)準(zhǔn)色彩。3總結(jié)一句能反映貴站精髓的宣傳標(biāo)語(yǔ)！4相同類型的圖像采用相同效果，比如說(shuō)標(biāo)題字都采用陰影效果，那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的！二、網(wǎng)頁(yè)色彩的搭配1用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，有層次感。2用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色。3用一個(gè)色系。簡(jiǎn)單的說(shuō)就是用一個(gè)感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。在網(wǎng)頁(yè)配色中，還要切記一些誤區(qū)：1不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。2背景和前文的對(duì)比盡量要大(絕對(duì)不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。第二章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述21.31.3 本論文工作本論文工作本論文主要是對(duì)網(wǎng)頁(yè)設(shè)計(jì)與制作的語(yǔ)言基礎(chǔ)上進(jìn)行探討，主要內(nèi)容如下：第一章：緒論本章主要介紹網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)知識(shí)。第二章：網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述本章主要介紹網(wǎng)頁(yè)設(shè)計(jì)的語(yǔ)言HTML，以及用于編輯 HTML 語(yǔ)言的軟件，為后續(xù)工作奠定基礎(chǔ)。第三章：基于對(duì)象的 JavaScript 語(yǔ)言本章介紹了基于對(duì)象的 JavaScript 中常用內(nèi)部對(duì)象屬性、方法的使用。第四章：內(nèi)部對(duì)象系統(tǒng)的使用本章主要介紹使用瀏覽器的內(nèi)部對(duì)象系統(tǒng)，可實(shí)現(xiàn)與 HTML 文檔進(jìn)行交互。它的作用是將相關(guān)元素組織包裝起來(lái)，提供給程序設(shè)計(jì)人員使用，從而減輕編程人的勞動(dòng)，提高設(shè)計(jì) Web 頁(yè)面的能力。第五章：WEB 頁(yè)面信息的交互窗體與框架本章主要介紹實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)交互，必須掌握有關(guān)窗體對(duì)象（Form）和框架對(duì)象（Frames）更為復(fù)雜的知識(shí)。第六章：總結(jié)第二章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述3第二章第二章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述2.1 HTMLHTML 語(yǔ)言介紹語(yǔ)言介紹HTML（HyperText Mark-up Language）即超文本標(biāo)記語(yǔ)言或超文本鏈接標(biāo)示語(yǔ)言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語(yǔ)言，也是構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言。HTML 文本是由 HTML 命令組成的描述性文本，HTML 命令可以說(shuō)明文字、圖形、動(dòng)畫、聲音、表格、鏈接等。HTML 的結(jié)構(gòu)包括頭部（Head） 、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說(shuō)明的具體內(nèi)容。2.1.1 HTML 語(yǔ)言的特點(diǎn)HTML 文檔制作不是很復(fù)雜，且功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，這也是 WWW 盛行的原因之一，HTML 語(yǔ)言的特點(diǎn)如下：1、簡(jiǎn)易性，HTML 版本升級(jí)采用超集方式，從而更加靈活方便。2、可擴(kuò)展性，HTML 語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，HTML 采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。3、平臺(tái)無(wú)關(guān)性。雖然 PC 機(jī)大行其道，但使用 MAC 等其他機(jī)器的大有人在，HTML 可以使用在廣泛的平臺(tái)上，這也是 WWW 盛行的另一個(gè)原因。2.1.2 HTML 語(yǔ)言的編輯軟件HTML 的本質(zhì)是文本，需要瀏覽器的解釋，HTML 的編輯器大體可以分為三種：1、基本編輯軟件，使用 WINDOWS 自帶的記事本或?qū)懽职娑伎梢跃帉?，?dāng)然，如果你用 WPS 來(lái)編寫，也可以。不過(guò)存盤時(shí)請(qǐng)使用.htm 或.html 作為擴(kuò)展名，這樣瀏覽器就可以解釋執(zhí)行了。2、半所見即所得軟件，這種軟件能大大提高開發(fā)效率，它可以使你在很短的時(shí)間內(nèi)做出 Homepage，且可以學(xué)習(xí) HTML，這種類型的軟件主要有HOTDOG，還有國(guó)產(chǎn)的軟件網(wǎng)頁(yè)作坊。3、所見即所得軟件，使用最廣泛的編輯器，完全可以一點(diǎn)不懂 HTML 的知識(shí)就可以做出網(wǎng)頁(yè)，這類軟件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。一個(gè) HTML 文件由一個(gè) HTML 元素組成，即文件以開始。以第二章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述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 文件的文件體部分開始文件體HTML 文件的文件部分結(jié)束標(biāo)記該 HTML 文件結(jié)束有些元素只能出現(xiàn)在頭元素中，如 meta、title 等元素，而大多數(shù)的元素只能出現(xiàn)在體元素中。在頭元素中的元素表示的是該 HTML 文件的一般信息，比如該文件的標(biāo)題、來(lái)源、作者、版本、字符集和關(guān)鍵字等，這些元素與書寫的順序無(wú)關(guān)，它們只是表明該 HTML 文件的屬性值。但出現(xiàn)在元素體中的元素則是要注意書寫順序的，改變了它們的書寫順序就會(huì)改變 HTML 文件在瀏覽器上輸出的形式。2.2 常用的常用的 HTMLHTML 語(yǔ)言編輯軟件語(yǔ)言編輯軟件2.2.1 Dreamweaver Dreamweaver 是美國(guó) Adobe(原 Macromedia，2005 年被 Adobe 收購(gòu))公司開發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁(yè)開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。它不僅是優(yōu)秀的WYSIWYG 編輯器，更是優(yōu)秀的代碼編輯器，有代碼加亮，代碼提示等豐富功能，提供各種示例代碼，并支持 Javascript,PHP,ASP,JSP 等多種腳本語(yǔ)言。最新版本為 CS4，發(fā)布于 2008 年 9 月。2.2.2 ASPASP 技術(shù)是 Microsoft 公司開發(fā)的一套全新的服務(wù)器端腳本程序環(huán)境。它可以根據(jù)客戶端的不同請(qǐng)求，在服務(wù)器端經(jīng)過(guò)相應(yīng)的 ASP 程序處理生成不同的靜第二章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述5態(tài) HTML 頁(yè)面并穿回給瀏覽器。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,中文名稱叫做動(dòng)態(tài)服務(wù)器網(wǎng)頁(yè)，其功能在于可以使用它來(lái)開發(fā)運(yùn)行在 Windows 服務(wù)器平臺(tái)上的動(dòng)態(tài)網(wǎng)頁(yè)和網(wǎng)頁(yè)。盡管我們常把“ASP 腳本”掛在嘴邊，但 ASP 既不是一種編程語(yǔ)言，也不是開發(fā)工具軟件，同樣也不是一種應(yīng)用程序，它實(shí)際上是一種開發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。2、ASP 的腳本語(yǔ)言ASP 的腳本語(yǔ)言可以是 VBScript 或者 Jscript，也可以是兩者的結(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，但是仍然可以瀏覽動(dòng)態(tài)的網(wǎng)頁(yè)。VBScript 是 IIS 默認(rèn)的腳本語(yǔ)言，當(dāng)然可以在 IIS 中更改默認(rèn)的腳本語(yǔ)言。如果改成 Jscript，那么默認(rèn)的腳本語(yǔ)言就是 Jscript。因?yàn)?VBScript 在屬性和方法上的靈活表現(xiàn)方式更適合作為服務(wù)器的腳本，所以推薦大家用 VBScript 作為 ASP的默認(rèn)腳本語(yǔ)言。3、ASP 的運(yùn)行環(huán)境由于 ASP 是一種服務(wù)器的腳本語(yǔ)言，所以并不是所有的 Web 服務(wù)器都具有這個(gè)功能。ASP 是由 Microsoft 公司推出的，當(dāng)然在目前頁(yè)只有 Microsoft 公司推出的服務(wù)器能實(shí)現(xiàn) ASP 的強(qiáng)大功能，其他的一些服務(wù)器在安裝了 ASP 組件后才能實(shí)現(xiàn)這個(gè)功能。Microsoft 公司推出的支持 ASP 的 Web 服務(wù)器有以下幾個(gè)：Microsoft Internet Information Server version (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í)行的，因此訪問(wèn)這些以.asp 為后綴的文件時(shí)，就不能使用實(shí)際的物理路徑，而只能用虛擬路徑。使用虛擬路徑訪問(wèn) ASP 最簡(jiǎn)單的方法就是將 ASP 文件拷貝到 IIS 的安裝目錄中 (默認(rèn)的安裝目錄為第二章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述6C：Inetpubwwwroot),然后就可以通過(guò) IE 瀏覽器直接訪問(wèn)了。訪問(wèn)文件名為“index.asp”的 ASP 文件，如果在 IE 瀏覽器中用物理路徑訪問(wèn)，本來(lái)期望的結(jié)果是不會(huì)出現(xiàn)的，瀏覽器只會(huì)顯示普通的 HTML 頁(yè)面。為此應(yīng)該將“index.asp”文件拷貝到服務(wù)器目錄下，然后通過(guò)虛擬路徑來(lái)訪問(wèn)該頁(yè)面。如果程序沒有錯(cuò)的話即可看到預(yù)期的效果。4、ASP 的工作原理通過(guò)上述介紹，大家應(yīng)該了解到一個(gè) ASP 頁(yè)面從服務(wù)器端傳送到客戶端的原理與一般靜態(tài) HTML 頁(yè)面是不同的。從客戶端的一 URL 請(qǐng)求到服務(wù)器反饋一個(gè)頁(yè)面給瀏覽器，其大致的流程如下：(1) 用戶在客戶端瀏覽器中輸入一個(gè)網(wǎng)址，與服務(wù)器建立連接。(2) 服務(wù)器根據(jù)用戶請(qǐng)求的網(wǎng)址在硬盤上找到相應(yīng)的文件。(3) 如果文件是普通的 HTML 文檔，那么服務(wù)器將直接把該文件傳送到客戶端。(4) 如果文件是服務(wù)器腳本，那么服務(wù)器將運(yùn)行這個(gè)文件。如果需要查詢數(shù)據(jù)庫(kù)，則通過(guò) ADO 組件連接 ODBC 或 DSN 數(shù)據(jù)源訪問(wèn)數(shù)據(jù)庫(kù)。進(jìn)行了一系列的運(yùn)算和解釋后，將最終結(jié)果形成一個(gè)純 HTML 文檔。(5) 把這個(gè)文檔傳送到客戶端。(6) 結(jié)束這次連接。由于最后傳送給客戶端的是一個(gè)純 HTML 文本文件，因此用戶在瀏覽器上是看不到 ASP 文件的源代碼的。5、ASP 的開發(fā)工具使用 ASP 進(jìn)行網(wǎng)路編程，選擇一個(gè)合適的開發(fā)工具是很重要的。ASP 對(duì)開發(fā)工具沒有特殊的要求，只要具有文本編輯器功能的工具均可。因此 ASP 的開發(fā)工具很多，比較好的由 Visual Interdev、Dreamweaver 等。Dreamweaver 是一個(gè)集成的 Web 應(yīng)用軟件開發(fā)系統(tǒng)，包括開發(fā)、發(fā)行以及管理數(shù)據(jù)庫(kù)驅(qū)動(dòng)的 Web 應(yīng)用軟件所需的所有的功能，所以一般情況下推薦使用Dreamweaver。2.2.3 JavaScript一、JavaScript 概述JavaScript 是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(Event Driven)并具有安全性能的腳本語(yǔ)言。使用它的目的是與 HTML 超文本標(biāo)記語(yǔ)言、Java 腳本語(yǔ)言（Java 小程序）一起實(shí)現(xiàn)在一個(gè) Web 頁(yè)面中鏈接多個(gè)對(duì)象，與 Web 客戶交互第二章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述7作用。從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過(guò)嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML 語(yǔ)言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了 HTML 語(yǔ)言的缺陷，它是 Java 與HTML 折衷的選擇，具有以下幾個(gè)基本特點(diǎn)： 1、是一種腳本編寫語(yǔ)言JavaScript 是一種腳本語(yǔ)言，它采用小程序段的方式實(shí)現(xiàn)編程。像其它腳本語(yǔ)言一樣,JavaScript 同樣已是一種解釋性語(yǔ)言,它提供了一個(gè)易的開發(fā)過(guò)程。它的基本結(jié)構(gòu)形式與 C、C+、VB、Delphi 十分類似。但它不像這些語(yǔ)言一樣，需要先編譯，而是在程序運(yùn)行過(guò)程中被逐行地解釋。它與 HTML 標(biāo)識(shí)結(jié)合在一起，從而方便用戶的使用操作。 2、基于對(duì)象的語(yǔ)言。JavaScript 是一種基于對(duì)象的語(yǔ)言，同時(shí)以可以看作一種面向?qū)ο蟮?。這意味著它能運(yùn)用自己已經(jīng)創(chuàng)建的對(duì)象。因此，許多功能可以來(lái)自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用。 3、簡(jiǎn)單性JavaScript 的簡(jiǎn)單性主要體現(xiàn)在：首先它是一種基于 Java 基本語(yǔ)句和控制流之上的簡(jiǎn)單而緊湊的設(shè)計(jì), 從而對(duì)于學(xué)習(xí) Java 是一種非常好的過(guò)渡。其次它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。 4、安全性JavaScript 是一種安全性語(yǔ)言，它不允許訪問(wèn)本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。 5、動(dòng)態(tài)性的JavaScript 是動(dòng)態(tài)的，它可以直接對(duì)用戶或客戶輸入做出響應(yīng)，無(wú)須經(jīng)過(guò)Web 服務(wù)程序。它對(duì)用戶的反映響應(yīng)，是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。所謂事件驅(qū)動(dòng)，就是指在主頁(yè)(Home Page)中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作，就稱為“事件”(Event)。比如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會(huì)引起相應(yīng)的事件響應(yīng)。 6、跨平臺(tái)性JavaScript 是依賴于瀏覽器本身，與操作環(huán)境無(wú)關(guān)，只要能運(yùn)行瀏覽器的計(jì)算機(jī)，并支持 JavaScript 的瀏覽器就可正確執(zhí)行。從而實(shí)現(xiàn)了“編寫一次,走遍天下”的夢(mèng)想。 實(shí)際上 JavaScript 最杰出之處在于可以用很小的程序做大量的事。無(wú)須有高性能的電腦，軟件僅需一個(gè)字處理軟件及一瀏覽器，無(wú)須 WEB 服務(wù)器通道，通過(guò)自己的電腦即可完成所有的事情。第二章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言概述8總之，JavaScript 是一種新的描述語(yǔ)言，它可以被箝入到 HTML 的文件之中。 JavaScript 語(yǔ)言可以做到回應(yīng)使用者的需求事件 (如：form 的輸入) ，而不用任何的網(wǎng)路來(lái)回傳輸資料，所以當(dāng)一位使用者輸入一項(xiàng)資料時(shí)，它不用經(jīng)過(guò)傳給伺服端 (server)處理，再傳回來(lái)的過(guò)程，而直接可以被客戶端 (client) 的應(yīng)用程式所處理。JavaScript 和 Java 很類似，但到底并不一樣！ Java 是一種比 JavaScript 更復(fù)雜許多的程式語(yǔ)言，而 JavaScript 則是相當(dāng)容易了解的語(yǔ)言。JavaScript 創(chuàng)作者可以不那麼注重程式技巧，所以許多 Java 的特性在 Java Script 中并不支援。二、JavaScript 和 Java 的區(qū)別雖然 JavaScript 與 Java 有緊密的聯(lián)系，但卻是兩個(gè)公司開發(fā)的不同的兩個(gè)產(chǎn)品。Java 是 SUN 公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計(jì)語(yǔ)言，特別適合于Internet 應(yīng)用程序開發(fā)；而 JavaScript 是 Netscape 公司的產(chǎn)品，其目的是為了擴(kuò)展 Netscape Navigator 功能,而開發(fā)的一種可以嵌入 Web 頁(yè)面中的基于對(duì)象和事件驅(qū)動(dòng)的解釋性語(yǔ)言, 它的前身是 Live Script；而 Java 的前身是 Oak 語(yǔ)言。下面對(duì)兩種語(yǔ)言間的異同作如下比較： 1、基于對(duì)象和面向?qū)ο驤ava 是一種真正的面向?qū)ο蟮恼Z(yǔ)言，即使是開發(fā)簡(jiǎn)單的程序，必須設(shè)計(jì)對(duì)象。JavaScript 是種腳本語(yǔ)言，它可以用來(lái)制作與網(wǎng)絡(luò)無(wú)關(guān)的，與用戶交互作用的復(fù)雜軟件。它是一種基于對(duì)象（Object Based）和事件驅(qū)動(dòng)（Event Driver）的編程語(yǔ)言。因而它本身提供了非常豐富的內(nèi)部對(duì)象供設(shè)計(jì)人員使用。 2、解釋和編譯兩種語(yǔ)言在其瀏覽器中所執(zhí)行的方式不一樣。Java 的源代碼在傳遞到客戶端執(zhí)行之前，必須經(jīng)過(guò)編譯，因而客戶端上必須具有相應(yīng)平臺(tái)上的仿真器或解釋器，它可以通過(guò)編譯器或解釋器實(shí)現(xiàn)獨(dú)立于某個(gè)特定的平臺(tái)編譯代碼的束縛。JavaScript 是一種解釋性編程語(yǔ)言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過(guò)編譯，而是將文本格式的字符代碼發(fā)送給客戶編由瀏覽器解釋執(zhí)行。 3、強(qiáng)變量和弱變量?jī)煞N語(yǔ)言所采取的變量是不一樣的。Java 采用強(qiáng)類型變量檢查，即所有變量在編譯之前必須作聲明。如: Integer x;String y;第三章 基于對(duì)象的 JavaScript 語(yǔ)言9x=1234;x=4321;其中 X=1234 說(shuō)明是一個(gè)整數(shù)，Y=4321 說(shuō)明是一個(gè)字符串。JavaScript 中變量聲明，采用其弱類型。即變量在使用前不需作聲明，而是解釋器在運(yùn)行時(shí)檢查其數(shù)據(jù)類型，如：x=1234;y4321;前者說(shuō)明 x 為其數(shù)值型變量，而后者說(shuō)明 y 為字符型變量。4、代碼格式不一樣Java 是一種與 HTML 無(wú)關(guān)的格式，必須通過(guò)像 HTML 中引用外媒體那么進(jìn)行裝載，其代碼以字節(jié)代碼的形式保存在獨(dú)立的文檔中。JavaScript 的代碼是一種文本字符格式，可以直接嵌入 HTML 文檔中，并且可動(dòng)態(tài)裝載。編寫 HTML 文檔就像編輯文本文件一樣方便。 5、嵌入方式不一樣在 HTML 文檔中，兩種編程語(yǔ)言的標(biāo)識(shí)不同，JavaScript 使用.來(lái)標(biāo)識(shí)，而 Java 使用.來(lái)標(biāo)識(shí)。 6、靜態(tài)聯(lián)編和動(dòng)態(tài)聯(lián)編Java 采用靜態(tài)聯(lián)編，即 Java 的對(duì)象引用必須在編譯時(shí)的進(jìn)行，以使編譯器能夠?qū)崿F(xiàn)強(qiáng)類型檢查。JavaScript 采用動(dòng)態(tài)聯(lián)編，即 JavaScript 的對(duì)象引用在運(yùn)行時(shí)進(jìn)行檢查，如不經(jīng)編譯則就無(wú)法實(shí)現(xiàn)對(duì)象引用的檢查。 2.3 本章小結(jié)本章小結(jié)本章主要介紹了網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言 HTML 和 JavaScript，第三章 基于對(duì)象的 JavaScript 語(yǔ)言10第三章第三章 基于對(duì)象的基于對(duì)象的 JavaScriptJavaScript 語(yǔ)言語(yǔ)言JavaScript 語(yǔ)言是基于對(duì)象的（Object-Based） ，而不是面向?qū)ο蟮模╫bject-oriented） 。之所以說(shuō)它是一門基于對(duì)象的語(yǔ)言，主要是因?yàn)樗鼪]有提供象抽象、繼承、重載等有關(guān)面向?qū)ο笳Z(yǔ)言的許多功能。而是把其它語(yǔ)言所創(chuàng)建的復(fù)雜對(duì)象統(tǒng)一起來(lái)，從而形成一個(gè)非常強(qiáng)大的對(duì)象系統(tǒng)。雖然 JavaScript 語(yǔ)言是一門基于對(duì)象的，但它還是具有一些面向?qū)ο蟮幕咎卣鳌Ｋ梢愿鶕?jù)需要?jiǎng)?chuàng)建自己的對(duì)象，從而進(jìn)一步擴(kuò)大 JavaScript 的應(yīng)用范圍，增強(qiáng)編寫功能強(qiáng)大的 Web 文檔。3.1 對(duì)象的基礎(chǔ)知識(shí)對(duì)象的基礎(chǔ)知識(shí)3.1.1 對(duì)象的基本結(jié)構(gòu) JavaScript 中的對(duì)象是由屬性(properties)和方法(methods)兩個(gè)基本的元素的構(gòu)成的。前者是對(duì)象在實(shí)施其所需要行為的過(guò)程中，實(shí)現(xiàn)信息的裝載單位，從而與變量相關(guān)聯(lián)；后者是指對(duì)象能夠按照設(shè)計(jì)者的意圖而被執(zhí)行，從而與特定的函數(shù)相聯(lián)。3.1.2 引用對(duì)象的途徑 一個(gè)對(duì)象要真正地被使用，可采用以下幾種方式獲得：（1）引用 JavaScript 內(nèi)部對(duì)象；（2）由瀏覽器環(huán)境中提供；（3）創(chuàng)建新對(duì)象。這就是說(shuō)一個(gè)對(duì)象在被引用之前，這個(gè)對(duì)象必須存在，否則引用將毫無(wú)意義，而出現(xiàn)錯(cuò)誤信息。從上面中我們可以看出 JavaScript 引用對(duì)象可通過(guò)三種方式獲取。要么創(chuàng)建新的對(duì)象，要么利用現(xiàn)存的對(duì)象。3.1.3 有關(guān)對(duì)象操作語(yǔ)句JavaScript 不是一純面向?qū)ο蟮恼Z(yǔ)言，它設(shè)有提供面向?qū)ο笳Z(yǔ)言的許多功能，因此 JavaScript 設(shè)計(jì)者之所以把它你“基于對(duì)象”而不是面向?qū)ο蟮恼Z(yǔ)言，在JavaScript 中提供了幾個(gè)用于操作對(duì)象的語(yǔ)句和關(guān)鍵字及運(yùn)算符。（1） 、For.in 語(yǔ)句格式如下：For（對(duì)象屬性名 in 已知對(duì)象名）第三章 基于對(duì)象的 JavaScript 語(yǔ)言11說(shuō)明：該語(yǔ)句的功能是用于對(duì)已知對(duì)象的所有屬性進(jìn)行操作的控制循環(huán)。它是將一個(gè)已知對(duì)象的所有屬性反復(fù)置給一個(gè)變量；而不是使用計(jì)數(shù)器來(lái)實(shí)現(xiàn)的。該語(yǔ)句的優(yōu)點(diǎn)就是無(wú)需知道對(duì)象中屬性的個(gè)數(shù)即可進(jìn)行操作。例：下列函數(shù)是顯示數(shù)組中的內(nèi)容：Function showData(object)for (var X=0; X30;X+)document.write(objecti)；該函數(shù)是通過(guò)數(shù)組下標(biāo)順序值，來(lái)訪問(wèn)每個(gè)對(duì)象的屬性，使用這種方式首先必須知道數(shù)組的下標(biāo)值，否則若超出范圍，則就會(huì)發(fā)生錯(cuò)誤。而使 For.in 語(yǔ)句，則根本不需要知道對(duì)象屬性的個(gè)數(shù)，見下：Function showData(object)for(var prop in object)document.write(objectprop)；使用該函數(shù)時(shí)，在循環(huán)體中，F(xiàn)or 自動(dòng)將的屬性取出來(lái)，直到最后為此。（2）with 語(yǔ)句使用該語(yǔ)句的意思是：在該語(yǔ)句體內(nèi)，任何對(duì)變量的引用被認(rèn)為是這個(gè)對(duì)象的屬性，以節(jié)省一些代碼。with object.所有在 with 語(yǔ)句后的花括號(hào)中的語(yǔ)句，都是在后面 object 對(duì)象的作用域的。（3）this 關(guān)鍵字this 是對(duì)當(dāng)前的引用，在 JavaScript 由于對(duì)象的引用是多層次，多方位的，往往一個(gè)對(duì)象的引用又需要對(duì)另一個(gè)對(duì)象的引用，而另一個(gè)對(duì)象有可能又要引用另一個(gè)對(duì)象，這樣有可能造成混亂，最后自己已不知道現(xiàn)在引用的那一個(gè)對(duì)象，為此 JavaScript 提供了一個(gè)用于將對(duì)象指定當(dāng)前對(duì)象的語(yǔ)句 this。（4）New 運(yùn)算符雖然在 JavaScript 中對(duì)象的功能已經(jīng)是非常強(qiáng)大的了。但更強(qiáng)大的是設(shè)計(jì)人員可以按照需求來(lái)創(chuàng)建自己的對(duì)象，以滿足某一特定的要求。使用 New 運(yùn)算符可以創(chuàng)建一個(gè)新的對(duì)象。其創(chuàng)建對(duì)象使用如下格式：Newobject=NEW Object(Parameters table);其中 Newobject 創(chuàng)建的新對(duì)象：object 是已經(jīng)存在的對(duì)象； parameters table參數(shù)表；new 是 JavaScript 中的命令語(yǔ)句。第三章 基于對(duì)象的 JavaScript 語(yǔ)言12如創(chuàng)建一個(gè)日期新對(duì)象newData=New Data()birthday=New Data (December 12.1998)之后就可使 NewData、birthday 作為一個(gè)新的日期對(duì)象了。3.1.4 對(duì)象屬性的引用 對(duì)象屬性的引用可由下列三種方式之一實(shí)現(xiàn)：（1）使用點(diǎn)（.）運(yùn)算符university.Name=“云南省”university.city=“昆明市”university.Date=1999其中 university 是一個(gè)已經(jīng)存在的對(duì)象，Name、City、Date 是它的三個(gè)屬性，并通過(guò)操作對(duì)其賦值。（2）通過(guò)對(duì)象的下標(biāo)實(shí)現(xiàn)引用university0=“云南”university1=“昆明市”university2=1999通過(guò)數(shù)組形式的訪問(wèn)屬性，可以使用循環(huán)操作獲取其值。function showunievsity(object)for (var j=0;j2; j+)document.write(objectj)若采用 For.in 則可以不知其屬性的個(gè)數(shù)后就可以實(shí)現(xiàn)：Function showmy(object)for (var prop in this)docament.write(thisprop);（3）通過(guò)字符串的形式實(shí)現(xiàn)universityName=“云南”universityCity=“昆明市”universityDate=19993.1.5 對(duì)象的方法的引用 在 JavaScript 中對(duì)象方法的引用是非常簡(jiǎn)單的。ObjectName.methods()實(shí)際上 methods()=FunctionName 方法實(shí)質(zhì)上是一個(gè)函數(shù)。 如引用第三章 基于對(duì)象的 JavaScript 語(yǔ)言13university 對(duì)象中的 showmy（）方法，則可使用：document.write (university.showmy()或：document.write(university)如：引用 math 內(nèi)部對(duì)象中 cos()的方法則：with(math)document.write(cos(35);document.write(cos(80);若不使用 with 則引用時(shí)相對(duì)要復(fù)雜些：document.write(Math.cos(35)document.write(math.sin(80)3.2 常用對(duì)象的屬性和方法常用對(duì)象的屬性和方法 JavaScript 為我們提供了一些非常有用的常用內(nèi)部對(duì)象和方法。用戶不需要用腳本來(lái)實(shí)現(xiàn)這些功能。這正是基于對(duì)象編程的真正目的。在 JavaScript 提供了 string（字符串） 、math（數(shù)值計(jì)算）和 Date（日期）三種對(duì)象和其它一些相關(guān)的方法。從而為編程人員快速開發(fā)強(qiáng)大的腳本程序提供了非常有利的條件。3.2.1 常用內(nèi)部對(duì)象 在 JavaScript 中對(duì)于對(duì)象屬性與方法的引用，有兩種情況：其一是說(shuō)該對(duì)象是靜態(tài)對(duì)象，即在引用該對(duì)象的屬性或方法時(shí)不需要為它創(chuàng)建實(shí)例；而另一種對(duì)象則在引用它的對(duì)象或方法是必須為它創(chuàng)建一個(gè)實(shí)例，即該對(duì)象是動(dòng)態(tài)對(duì)象。對(duì) JavaScript 內(nèi)部對(duì)象的引用，以是緊緊圍繞著它的屬性與方法進(jìn)行的。因而明確對(duì)象的靜動(dòng)性對(duì)于掌握和理解 JavaScript 內(nèi)部對(duì)象是具有非常重要的意義。1、串對(duì)象 string 對(duì)象：內(nèi)部靜態(tài)性。訪問(wèn) properties 和 methods 時(shí)，可使用（.）運(yùn)算符實(shí)現(xiàn)?；臼褂酶袷剑簅bjectName.prop/methods（1）串對(duì)象的屬性該對(duì)象只有一個(gè)屬性，即 length。它表明了字符串中的字符個(gè)數(shù)，包括所有符號(hào)。例：第三章 基于對(duì)象的 JavaScript 語(yǔ)言14mytest=This is a JavaScriptmystringlength=mytest.length最后 mystringlength 返回 mytest 字串的長(zhǎng)度為 20。（2）串對(duì)象的方法string 對(duì)象的方法共有個(gè)。主要用于有關(guān)字符串在 Web 頁(yè)面中的顯示、字體大小、字體顏色、字符的搜索以及字符的大小寫轉(zhuǎn)換。其主要方法如下： 錨點(diǎn) anchor()：該方法創(chuàng)建如用 Html 文檔中一樣的 anchor 標(biāo)記。使用anchor 如用 Html 中(A Name=)一樣。通過(guò)下列格式訪問(wèn):string.anchor(anchorName)。有關(guān)字符顯示的控制方法big 字體顯示, Italics()斜體字顯示，bold()粗體字顯示，blink()字符閃爍顯示，small（）字符用小體字顯示，fixed()固定高亮字顯示、fontsize(size)控制字體大小等。字體顏色方法；fontcolor(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 對(duì)象 功能：提供除加、減、乘、除以外的一引些自述運(yùn)算。如對(duì)數(shù)，平方根等 。靜動(dòng)性：靜態(tài)對(duì)象（1）主要屬性math 中提供了個(gè)屬性，它們是數(shù)學(xué)中經(jīng)常用到的常數(shù)、以為底的自然對(duì)數(shù)、以為底的自然對(duì)數(shù) LN2、3.14159 的 PI、1/2 的平方根SQRT1-2,2 的平方根為 SQRT2。（2）主要方法絕對(duì)值：abs()正弦余弦值：sin(),cos()第三章 基于對(duì)象的 JavaScript 語(yǔ)言15反正弦反余弦 :asin(), acos()正切反正切：tan(),atan()四舍五入：round()平方根：sqrt()基于幾方次的值：Pow(base,exponent)3、日期及時(shí)間對(duì)象 功能：提供一個(gè)有關(guān)日期和時(shí)間的對(duì)象。靜動(dòng)性：動(dòng)態(tài)性，即必須使用 New 運(yùn)算符創(chuàng)建一個(gè)實(shí)例。例：MyDate=New Date()Date 對(duì)象沒有提供直接訪問(wèn)的屬性。只具有獲取和設(shè)置日期和時(shí)間的方法。（1）獲取日期的時(shí)間方法getYear(): 返回年數(shù)getMonth():返回當(dāng)月號(hào)數(shù)getDate(): 返回當(dāng)日號(hào)數(shù)getDay():返回星期幾getHours():返回小時(shí)數(shù)getMintes(:返回分鐘數(shù)getSeconds():返回秒數(shù)getTime() : 返回毫秒數(shù)（2）設(shè)置日期和時(shí)間：setYear();設(shè)置年setDate():設(shè)置當(dāng)月號(hào)數(shù)setMonth():設(shè)置當(dāng)月份數(shù)setHours():設(shè)置小時(shí)數(shù)setMintes():設(shè)置分鐘數(shù)setSeconds():設(shè)置秒數(shù)setTime ():設(shè)置毫秒數(shù)3.2.2 JavaScript 中的系統(tǒng)函數(shù) JavaScript 中的系統(tǒng)函數(shù)又稱內(nèi)部方法。它提供了與任何對(duì)象無(wú)關(guān)的系統(tǒng)函數(shù)，使用這些函數(shù)不需創(chuàng)建任何實(shí)例,可直接用。1、返回字符串表達(dá)式中的值：方法名：eval（字串表達(dá)式） ，例：第三章 基于對(duì)象的 JavaScript 語(yǔ)言16test=eval(8+9+5/2);2、返回字符串 ASCI 碼：方法名：unEscape (string)3、返回字符的編碼：方法名：escape(character)4、返回實(shí)數(shù)：parseFloat(floustring);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.clock.face.value = ;第三章 基于對(duì)象的 JavaScript 語(yǔ)言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 : 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 = truefunction 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)部對(duì)象系統(tǒng)的使用18 3.3 本章小結(jié)本章小結(jié)本講介紹了基于對(duì)象的 JavaScript 中常用內(nèi)部對(duì)象屬性、方法的使用。第四章 內(nèi)部對(duì)象系統(tǒng)的使用19第四章第四章 內(nèi)部對(duì)象系統(tǒng)的使用內(nèi)部對(duì)象系統(tǒng)的使用使用瀏覽器的內(nèi)部對(duì)象系統(tǒng)，可實(shí)現(xiàn)與 HTML 文檔進(jìn)行交互。它的作用是將相關(guān)元素組織包裝起來(lái)，提供給程序設(shè)計(jì)人員使用，從而減輕編程人的勞動(dòng)，提高設(shè)計(jì) Web 頁(yè)面的能力。4.1 瀏覽器對(duì)象層次及其主要作用瀏覽器對(duì)象層次及其主要作用除了前面提到過(guò)的文檔 document 對(duì)象外，Navigator 瀏覽器中還提供了窗口（Window）對(duì)象以及歷史（History）和位置（Location）對(duì)象。瀏覽器對(duì)象(Navigator)：提供有關(guān)瀏覽器的信息窗口對(duì)象(Windows)：Window 對(duì)象處于對(duì)象層次的最頂端，它提供了處理Navigator 窗口的方法和屬性。位置對(duì)象(Location)：Location 對(duì)象提供了與當(dāng)前打開的 URL 一起工作的方法和屬性，它是一個(gè)靜態(tài)的對(duì)象。歷史對(duì)象(History)：History 對(duì)象提供了與歷史清單有關(guān)的信息。文檔對(duì)象(Document)：document 對(duì)象包含了與文檔元素(elements)一起工作的對(duì)象，它將這些元素封裝起來(lái)供編程人員使用。網(wǎng)頁(yè)設(shè)計(jì)與制作人員利用這些對(duì)象，可以對(duì) WWW 瀏覽器環(huán)境中的事件進(jìn)行控制并作出處理。在 JavaScript 中提供了非常豐富的內(nèi)部方法和屬性，從而減輕了編程人員的工作，提高編程效率。這正是基于對(duì)象與面向?qū)ο蟮母緟^(qū)別所在。在這些對(duì)象系統(tǒng)中，文檔對(duì)象屬于非常重要的，它位于最低層，但對(duì)于我們實(shí)現(xiàn) Web 頁(yè)面信息交互起作關(guān)鍵作用。因而它是對(duì)象系統(tǒng)的核心部分。4.2 文檔對(duì)象功能及其作用文檔對(duì)象功能及其作用在 Navigator 瀏覽器中，document 文檔對(duì)象是核心是，同時(shí)也是最重要的。見表 4-1 所示。表 4-1 document 對(duì)象LinksAnchorFormMethodProp鏈接對(duì)象錨對(duì)象窗體對(duì)象方法對(duì)象從表 4-1 中可以看出，document 對(duì)象的主要作用就是把這些基本的元素（如 links,anchor 等）包裝起來(lái)，提供給編程人員使用。從另一個(gè)角度看，document 對(duì)象中又是由屬性和方法組成。第四章 內(nèi)部對(duì)象系統(tǒng)的使用204.2.1 document 中三個(gè)主要的對(duì)象在 document 中主要有：links,anchor,form 等三個(gè)最重要的對(duì)象：（1）anchor 錨對(duì)象：anchor 對(duì)象指的是 標(biāo)識(shí)在 HTML 源碼中存在時(shí)產(chǎn)生的對(duì)象。它包含著文檔中所有的 anchors 信息。（2）鏈接 links 對(duì)象link 對(duì)象指的是用 標(biāo)記的連接一個(gè)超文本或超媒體的元素作為一個(gè)特定的 URL。（3）窗體（Form）對(duì)象窗體對(duì)象是文檔對(duì)象的一個(gè)元素，它含有多種格式的對(duì)象儲(chǔ)存信息，使用它可以在 JavaScript 腳本中編寫程序進(jìn)行文字輸入，并可以用來(lái)動(dòng)態(tài)改變文檔的行為。通過(guò) document. Forms數(shù)組來(lái)使得在同一個(gè)頁(yè)面上可以有多個(gè)相同的窗體,使用 forms數(shù)組要比使用窗體名字要方便得多。下面就是一個(gè)使用窗體數(shù)組和窗體名字的例子。該程序使得兩個(gè)窗體中的字段內(nèi)容保持一致。Test6_1.htm其中用了 OnChnge 事件(當(dāng)窗體內(nèi)容改變時(shí)激發(fā))。第一個(gè)使用窗體名字標(biāo)識(shí) my,第二個(gè)使用窗體數(shù)組 Forms。其效果是一致。4.2.2 文檔對(duì)象中的 attribute 屬性document 對(duì)象中的 attribute 屬性，主要用于在引用 Href 標(biāo)識(shí)時(shí)，控制著有第四章 內(nèi)部對(duì)象系統(tǒng)的使用21關(guān)顏色的格式和有關(guān)文檔標(biāo)題、文檔原文件的 URL 以及文檔最后更新的日期。這部分元素的主要含義如下：（1）鏈接顏色：alinkcolor這個(gè)元素主要用于，當(dāng)選取一個(gè)鏈接時(shí)，鏈接對(duì)象本身的顏色就按alinkcolo r 指定改變。（2）鏈接顏色：linkcolor當(dāng)用戶使用 Text string 鏈接后，Textstring 的顏色就會(huì)按Linkcolor 所指定的顏色更新。（3）瀏覽過(guò)后的顏色：VlinkColor該屬性表示的是已被瀏覽存儲(chǔ)為已瀏覽過(guò)的鏈接顏色。（4）背景顏色：bgcolor該元素包含文檔背景的顏色。（5）前景顏色：Fgcolor該元素包含 HTML 文檔中文本的前景顏色。4.2.3 文檔對(duì)象的基本元素（1）窗體屬性：窗體屬性是與 HTML 文檔中.相對(duì)應(yīng)的一組對(duì)象在 HTML文檔所創(chuàng)建的窗體數(shù)，由 length 指定。通過(guò) document.forms.length 反映該文檔中所創(chuàng)建的窗體數(shù)目。（2）錨屬性：anchors該屬性中，包含了 HTML 文檔的所有 標(biāo)記為 Name=.的語(yǔ)句標(biāo)識(shí)。所有“錨”的數(shù)目保存在 document.anchors.length 中。（3）鏈接屬性：links鏈接屬性是指在文檔中.的由 Href=.指定的數(shù)目，其鏈接數(shù)目保存在 document.links.length 中。4.3 內(nèi)部對(duì)象系統(tǒng)實(shí)例下面我們通過(guò)一個(gè)例子來(lái)說(shuō)明文檔對(duì)象的綜合應(yīng)用。輸出結(jié)果見圖 4-2 所示。Test6_2.htm第四章 內(nèi)部對(duì)象系統(tǒng)的使用22請(qǐng)輸入數(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)生每日一語(yǔ)。test6_3.html第五章 WEB 頁(yè)面信息的交互窗體與框架23!-tips = new Array(6);tips0=每日一語(yǔ)（1）;tips1=每日一語(yǔ)（2）;tips2=每日一語(yǔ)（3）;tips3=每日一語(yǔ)（4）;tips4=每日一語(yǔ)（5）;tips5=每日一語(yǔ)（6）;index = Math.floor(Math.random() * tips.length);document.write( + tipsindex+);圖 4-3 4.4 本章小結(jié)本章主要介紹內(nèi)部對(duì)象系統(tǒng)及其使用方法。第五章 WEB 頁(yè)面信息的交互窗體與框架24第五章第五章 WEBWEB 頁(yè)面信息的交互頁(yè)面信息的交互窗體與框架窗體與框架要實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)交互，必須掌握有關(guān)窗體對(duì)象（Form）和框架對(duì)象（Frames）更為復(fù)雜的知識(shí)。5.1 窗體基礎(chǔ)知識(shí)窗體基礎(chǔ)知識(shí)窗體對(duì)象可以使設(shè)計(jì)人員能用窗體中不同的元素與客戶機(jī)用戶相交互，而用不著在之前首先進(jìn)行數(shù)據(jù)輸入，就可以實(shí)現(xiàn)動(dòng)態(tài)改變 Web 文檔的行為。5.1.1 窗體對(duì)象窗體（Form）：它構(gòu)成了 Web 頁(yè)面的基本元素。通常一個(gè) Web 頁(yè)面有一個(gè)窗體或幾個(gè)窗體，使用 Forms數(shù)組來(lái)實(shí)現(xiàn)不同窗體的訪問(wèn)。在 Forms0中共有三個(gè)基本元素，而 Forms1中只有兩個(gè)元素。窗體對(duì)象最主要的功能就是能夠直接訪問(wèn) HTML 文檔中的窗體，它封裝了相關(guān)的 HTML 代碼：第五章 WEB 頁(yè)面信息的交互窗體與框架255.1.2 窗體對(duì)象的方法窗體對(duì)象的方法只有一個(gè)-submit()方法，該方法主要功用就是實(shí)現(xiàn)窗體信息的提交。如提交 Mytest 窗體，則使用下列格式：document.mytest.submit()5.1.3 窗體對(duì)象的屬性窗體對(duì)象中的屬性主要包括以下：elements name action target encoding method。除 Elements 外，其它幾個(gè)均反映了窗體中標(biāo)識(shí)中相應(yīng)屬性的狀態(tài)，這通常是單個(gè)窗體標(biāo)識(shí)；而 elements 常常是多個(gè)窗體元素值的數(shù)組，例：elements0.Mytable.elements15.1.4 訪問(wèn)窗體對(duì)象在 JavaScript 中訪問(wèn)窗體對(duì)象可由兩種方法實(shí)現(xiàn)：（1）通過(guò)訪問(wèn)窗體在窗體對(duì)象的屬性中首先必須指定其窗體名，而后就可以通過(guò)下列標(biāo)識(shí)訪問(wèn)窗體如：document.Mytable()。（2）通過(guò)數(shù)組來(lái)訪問(wèn)窗體除了使用窗體名來(lái)訪問(wèn)窗體外，還可以使用窗體對(duì)象數(shù)組來(lái)訪問(wèn)窗體對(duì)象。但需要注意一點(diǎn)，因窗體對(duì)象是由瀏覽器環(huán)境的提供的，而瀏覽器環(huán)境所提供的數(shù)組下標(biāo)是由 0 到 n。所以可通過(guò)下列格式實(shí)現(xiàn)窗體對(duì)象的訪問(wèn)：document.forms0document.forms1document.forms2.5.1.5 引用窗體的先決條件在 JavaScript 中要對(duì)窗體引用的條件是：必須先在頁(yè)面中用標(biāo)識(shí)創(chuàng)建窗體，并將定義窗體部分放在引用之前。5.2 窗體中的基本元素窗體中的基本元素窗體中的基本元素由按鈕、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。在 JavaScript 中要訪問(wèn)這些基本元素，必須通過(guò)對(duì)應(yīng)特定的窗體元素的數(shù)第五章 WEB 頁(yè)面信息的交互窗體與框架26組下標(biāo)或窗體元素名來(lái)實(shí)現(xiàn)。每一個(gè)元素主要是通過(guò)該元素的屬性或方法來(lái)引用。其引用的基本格式見下：formName.elements.methadName (窗體名.元素名或數(shù)組.方法)formName.elemaent.propertyName(窗體名.元素名或數(shù)組.屬性)下面分別介紹：（1）Text 單行單列輸入元素功能：對(duì) Text 標(biāo)識(shí)中的元素實(shí)施有效的控制?；緦傩裕篘ame：設(shè)定提交信息時(shí)的信息名稱。對(duì)應(yīng)于 HTML 文檔中的 Name。Value：用以設(shè)定出現(xiàn)在窗口中對(duì)應(yīng) HTML 文檔中 Value 的信息。defaultvalue：包括 Text 元素的默認(rèn)值基本方法：blur()：將當(dāng)前焦點(diǎn)移到后臺(tái)。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;document.mytest.select();document.mytest.blur();（2）textarea 多行多列輸入元素功能：實(shí)施對(duì) Textarea 中的元素進(jìn)行控制?；緦傩詎ame：設(shè)定提交信息時(shí)的信息名稱，對(duì)應(yīng) HTML 文檔 Textarea 的 Name。Value：用以設(shè)定出現(xiàn)在窗口中對(duì)應(yīng) HTML 文檔中 Value 的信息。第五章 WEB 頁(yè)面信息的交互窗體與框架27Default value：元素的默認(rèn)值。方法：blur()：將輸入焦點(diǎn)失去select()：將文字加亮后事件：onBlur:當(dāng)失去輸入焦點(diǎn)后產(chǎn)生該事件onFocus:當(dāng)輸入獲得焦點(diǎn)后，產(chǎn)生該文件Onchange:當(dāng)文字值改變時(shí)，產(chǎn)生該事件Onselect:當(dāng)文字加亮后，產(chǎn)生該文件（3）Select 選擇元素功能：實(shí)施對(duì)滾動(dòng)選擇元素的控制。屬性：name:設(shè)定提交信息時(shí)的信息名稱，對(duì)應(yīng)文檔 select 中的 name。Length:對(duì)應(yīng)文檔 select 中的 lengthoptions:組成多個(gè)選項(xiàng)的數(shù)組selectIndex;該下標(biāo)指明一個(gè)選項(xiàng)select 在中每一選項(xiàng)都含有以下屬性：Text:選項(xiàng)對(duì)應(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)生該文件。onFocas:當(dāng) select 獲得焦點(diǎn)時(shí)，產(chǎn)生該文件。Onchange:選項(xiàng)狀態(tài)改變后，產(chǎn)生該事件。（4）Button 按鈕功能：實(shí)施對(duì) Button 按鈕的控制。屬性：Name:設(shè)定提交信息時(shí)的信息名稱，對(duì)應(yīng)文檔中 button 的 Name。Value:用以設(shè)定出現(xiàn)在窗口中對(duì)應(yīng) HTML 文檔中 Value 的信息。方法：click()該方法類似于一個(gè)按下的按鈕。事件：onclick 當(dāng)單擊 button 按鈕時(shí)，產(chǎn)生該事件。第五章 WEB 頁(yè)面信息的交互窗體與框架28例 ：.document.elements0.value=mytest; /通過(guò)元素訪問(wèn)或document.testcallvalue=mytest; / 通過(guò)名字訪問(wèn).（5）checkbox 檢查框功能：實(shí)施對(duì)一個(gè)具有復(fù)選框中元素的控制。屬性：name:設(shè)定提交信息時(shí)的信息名稱。Value:用以設(shè)定出現(xiàn)在窗口中對(duì)應(yīng) HTML 文檔中 Value 的信息。Checked:該屬性指明框的狀態(tài) true/false.defauitchecked:默認(rèn)狀態(tài)方法：click()該方法使得框的某一個(gè)項(xiàng)被選中。事件：Onclic