1、摘摘 要要本論文將對個人網頁的設計與制作的方法、工具等展開研究和探討。在介紹網頁設計與制作語言的基礎上，著重使用 javascript 作為工具語言進行網頁設計與制作的實際操作，分別對基于對象的 javascript 語言、內部對象系統的使用及web 頁面信息交互窗口和框架進行詳細描述，并利用具體的實例進行驗證。本論文主要章節如下，第一章：緒論，本章主要介紹網頁設計的相關知識。第二章：網頁設計語言概述，本章主要介紹網頁設計的語言html，以及用于編輯 html 語言的軟件，為后續工作奠定基礎。第三章：基于對象的javascript 語言，本章介紹了基于對象的 javascript 中常用內部對

2、象屬性、方法的使用。第四章：內部對象系統的使用，本章主要介紹使用瀏覽器的內部對象系統，可實現與 html 文檔進行交互。第五章：web 頁面信息的交互窗體與框架，本章主要介紹實現網頁的動態交互，必須掌握有關窗體對象（form）和框架對象（frames）更為復雜的知識。關鍵詞：關鍵詞： 網頁制作 、 網頁設計 、 html 、 asp目目 錄錄第一章 緒論 .11.1 網頁設計概述.11.2 網頁設計的要素.11.3 本論文工作.2第二章 網頁設計語言概述 .32.1 html 語言介紹 .32.2 常用的 html 語言編輯軟件.42.3 本章小結.9第三章 基于對象的 javascript

3、語言 .103.1 對象的基礎知識.103.2 常用對象的屬性和方法 .133.3 本章小結.18第四章 內部對象系統的使用 .194.1 瀏覽器對象層次及其主要作用 .194.2 文檔對象功能及其作用 .194.3 內部對象系統實例 .214.4 本章小結.23第五章 web 頁面信息的交互窗體與框架.245.1 窗體基礎知識 .245.2 窗體中的基本元素.255.3 窗體對象實例 .295.4 框架.325.5 框架的訪問.345.6 本章小結.37第六章 結 論 .38致 謝 .39參考文獻 .40第一章 緒論2第一章第一章 緒論緒論隨著 21 世紀的到來，人們更深切地感受到計算機在生

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

5、的整體風格在這里，我提供給大家一些參考經驗：1將你的標志 logo，盡可能的放在每個頁面上最突出的位置。2突出你的標準色彩。3總結一句能反映貴站精髓的宣傳標語！4相同類型的圖像采用相同效果，比如說標題字都采用陰影效果，那么在網站中出現的所有標題字的陰影效果的設置應該是完全一致的！二、網頁色彩的搭配1用一種色彩。這里是指先選定一種色彩，然后調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。2用兩種色彩。先選定一種色彩，然后選擇它的對比色。3用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。在網頁配色中，還要切記一些誤區：1不要將所有顏色都用到，盡量控制

6、在三至五種色彩以內。2背景和前文的對比盡量要大(絕對不要用花紋繁復的圖案作背景)，以便突出主要文字內容。第二章 網頁設計語言概述31.31.3 本論文工作本論文工作本論文主要是對網頁設計與制作的語言基礎上進行探討，主要內容如下：第一章：緒論本章主要介紹網頁設計的相關知識。第二章：網頁設計語言概述本章主要介紹網頁設計的語言html，以及用于編輯 html 語言的軟件，為后續工作奠定基礎。第三章：基于對象的 javascript 語言本章介紹了基于對象的 javascript 中常用內部對象屬性、方法的使用。第四章：內部對象系統的使用本章主要介紹使用瀏覽器的內部對象系統，可實現與 html 文檔進

7、行交互。它的作用是將相關元素組織包裝起來，提供給程序設計人員使用，從而減輕編程人的勞動，提高設計 web 頁面的能力。第五章：web 頁面信息的交互窗體與框架本章主要介紹實現網頁的動態交互，必須掌握有關窗體對象（form）和框架對象（frames）更為復雜的知識。第六章：總結第二章 網頁設計語言概述4第二章第二章 網頁設計語言概述網頁設計語言概述2.1 htmlhtml 語言介紹語言介紹html（hypertext mark-up language）即超文本標記語言或超文本鏈接標示語言，是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言。html 文本是由 html 命令組成的描述性文

8、本，html 命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。html 的結構包括頭部（head） 、主體（body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。2.1.1 html 語言的特點html 文檔制作不是很復雜，且功能強大，支持不同數據格式的文件鑲入，這也是 www 盛行的原因之一，html 語言的特點如下：1、簡易性，html 版本升級采用超集方式，從而更加靈活方便。2、可擴展性，html 語言的廣泛應用帶來了加強功能，增加標識符等要求，html 采取子類元素的方式，為系統擴展帶來保證。3、平臺無關性。雖然 pc 機大行其道，但使用 mac 等其他機

9、器的大有人在，html 可以使用在廣泛的平臺上，這也是 www 盛行的另一個原因。2.1.2 html 語言的編輯軟件html 的本質是文本，需要瀏覽器的解釋，html 的編輯器大體可以分為三種：1、基本編輯軟件，使用 windows 自帶的記事本或寫字版都可以編寫，當然，如果你用 wps 來編寫，也可以。不過存盤時請使用.htm 或.html 作為擴展名，這樣瀏覽器就可以解釋執行了。2、半所見即所得軟件，這種軟件能大大提高開發效率，它可以使你在很短的時間內做出 homepage，且可以學習 html，這種類型的軟件主要有hotdog，還有國產的軟件網頁作坊。3、所見即所得軟件，使用最廣泛的編

10、輯器，完全可以一點不懂 html 的知識就可以做出網頁，這類軟件主要有frontpage，dreamweaver、delphi、eclipse、ultraedit。一個 html 文件由一個 html 元素組成，即文件以開始。以第二章 網頁設計語言概述5結束，文檔中其他元素及其屬性的聲明都是 html 的元素體。 html 元素的元素體和元素體由兩大部分組成，即頭元素和體元素。頭元素和體元素的元素體又由其他元素、文本和注釋等組成。 一個標準的 html 文件應該具備如下結構： 標記一個 html 文件的開始 html 文件的文件頭部分開始 文件頭部分內容 html 文件的文件頭部分結束 htm

11、l 文件的文件體部分開始文件體html 文件的文件部分結束標記該 html 文件結束有些元素只能出現在頭元素中，如 meta、title 等元素，而大多數的元素只能出現在體元素中。在頭元素中的元素表示的是該 html 文件的一般信息，比如該文件的標題、來源、作者、版本、字符集和關鍵字等，這些元素與書寫的順序無關，它們只是表明該 html 文件的屬性值。但出現在元素體中的元素則是要注意書寫順序的，改變了它們的書寫順序就會改變 html 文件在瀏覽器上輸出的形式。2.2 常用的常用的 htmlhtml 語言編輯軟件語言編輯軟件2.2.1 dreamweaver dreamweaver 是美國 ad

12、obe(原 macromedia，2005 年被 adobe 收購)公司開發的集網頁制作和管理網站于一身的所見即所得網頁編輯器，它是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。它不僅是優秀的wysiwyg 編輯器，更是優秀的代碼編輯器，有代碼加亮，代碼提示等豐富功能，提供各種示例代碼，并支持 javascript,php,asp,jsp 等多種腳本語言。最新版本為 cs4，發布于 2008 年 9 月。2.2.2 aspasp 技術是 microsoft 公司開發的一套全新的服務器端腳本程序環境。它可以根據客戶端

13、的不同請求，在服務器端經過相應的 asp 程序處理生成不同的靜第二章 網頁設計語言概述6態 html 頁面并穿回給瀏覽器。asp 自身有很多優點，這些優點使它成為了當今世界網絡上應用最多的腳本設計環境。1、什么是 aspasp 的全稱是 active server pages,中文名稱叫做動態服務器網頁，其功能在于可以使用它來開發運行在 windows 服務器平臺上的動態網頁和網頁。盡管我們常把“asp 腳本”掛在嘴邊，但 asp 既不是一種編程語言，也不是開發工具軟件，同樣也不是一種應用程序，它實際上是一種開發動態網頁的技術。2、asp 的腳本語言asp 的腳本語言可以是 vbscript

14、或者 jscript，也可以是兩者的結合，所以任何一種文本編輯器都能編輯 asp 腳本，當然不同的編輯器開發調試效率是不一樣的。和通常的 vbscript 和 jscript 應用程序不同，asp 所有的程序都是在服務器端運行的，而不是在瀏覽器或者客戶端執行的，這樣用戶就不必擔心自己的瀏覽器能否運行所編寫的 asp 代碼了。程序執行完畢，服務器僅將執行的結果返回給客戶端瀏覽器，這樣即使客戶端的瀏覽器不支持 vbscript 或 jscript，但是仍然可以瀏覽動態的網頁。vbscript 是 iis 默認的腳本語言，當然可以在 iis 中更改默認的腳本語言。如果改成 jscript，那么默認的

15、腳本語言就是 jscript。因為 vbscript 在屬性和方法上的靈活表現方式更適合作為服務器的腳本，所以推薦大家用 vbscript 作為 asp的默認腳本語言。3、asp 的運行環境由于 asp 是一種服務器的腳本語言，所以并不是所有的 web 服務器都具有這個功能。asp 是由 microsoft 公司推出的，當然在目前頁只有 microsoft 公司推出的服務器能實現 asp 的強大功能，其他的一些服務器在安裝了 asp 組件后才能實現這個功能。microsoft 公司推出的支持 asp 的 web 服務器有以下幾個：microsoft internet information s

16、erver version (iis);microsoft peer web server;microsoft personal webserver (pws);其中前兩個主要是為 microsoft 公司的 windowns nt /2000 /xp 系統開發的，當然它們的功能以及穩定性都要強很多。目前大型的站點大多是有 iis 作為服務器，而 pws 是為一般的 pc 用戶開發的。既然 asp 是在服務器端執行的，因此訪問這些以.asp 為后綴的文件時，就不能使用實際的物理路徑，而只能用虛擬路徑。使用虛擬路徑訪問 asp 最簡單的方法就是將 asp 文件拷貝到 iis 的安裝目錄中 (默認

17、的安裝目錄為第二章 網頁設計語言概述7c：inetpubwwwroot),然后就可以通過 ie 瀏覽器直接訪問了。訪問文件名為“index.asp”的 asp 文件，如果在 ie 瀏覽器中用物理路徑訪問，本來期望的結果是不會出現的，瀏覽器只會顯示普通的 html 頁面。為此應該將“index.asp”文件拷貝到服務器目錄下，然后通過虛擬路徑來訪問該頁面。如果程序沒有錯的話即可看到預期的效果。4、asp 的工作原理通過上述介紹，大家應該了解到一個 asp 頁面從服務器端傳送到客戶端的原理與一般靜態 html 頁面是不同的。從客戶端的一 url 請求到服務器反饋一個頁面給瀏覽器，其大致的流程如下：

18、(1) 用戶在客戶端瀏覽器中輸入一個網址，與服務器建立連接。(2) 服務器根據用戶請求的網址在硬盤上找到相應的文件。(3) 如果文件是普通的 html 文檔，那么服務器將直接把該文件傳送到客戶端。(4) 如果文件是服務器腳本，那么服務器將運行這個文件。如果需要查詢數據庫，則通過 ado 組件連接 odbc 或 dsn 數據源訪問數據庫。進行了一系列的運算和解釋后，將最終結果形成一個純 html 文檔。(5) 把這個文檔傳送到客戶端。(6) 結束這次連接。由于最后傳送給客戶端的是一個純 html 文本文件，因此用戶在瀏覽器上是看不到 asp 文件的源代碼的。5、asp 的開發工具使用 asp 進

19、行網路編程，選擇一個合適的開發工具是很重要的。asp 對開發工具沒有特殊的要求，只要具有文本編輯器功能的工具均可。因此 asp 的開發工具很多，比較好的由 visual interdev、dreamweaver 等。dreamweaver 是一個集成的 web 應用軟件開發系統，包括開發、發行以及管理數據庫驅動的 web 應用軟件所需的所有的功能，所以一般情況下推薦使用dreamweaver。2.2.3 javascript一、javascript 概述javascript 是一種基于對象(object)和事件驅動(event driven)并具有安全性能的腳本語言。使用它的目的是與 html

20、 超文本標記語言、java 腳本語言（java 小程序）一起實現在一個 web 頁面中鏈接多個對象，與 web 客戶交互第二章 網頁設計語言概述8作用。從而可以開發客戶端的應用程序等。它是通過嵌入或調入在標準的html 語言中實現的。它的出現彌補了 html 語言的缺陷，它是 java 與html 折衷的選擇，具有以下幾個基本特點： 1、是一種腳本編寫語言javascript 是一種腳本語言，它采用小程序段的方式實現編程。像其它腳本語言一樣,javascript 同樣已是一種解釋性語言,它提供了一個易的開發過程。它的基本結構形式與 c、c+、vb、delphi 十分類似。但它不像這些語言一樣，

21、需要先編譯，而是在程序運行過程中被逐行地解釋。它與 html 標識結合在一起，從而方便用戶的使用操作。 2、基于對象的語言。javascript 是一種基于對象的語言，同時以可以看作一種面向對象的。這意味著它能運用自己已經創建的對象。因此，許多功能可以來自于腳本環境中對象的方法與腳本的相互作用。 3、簡單性javascript 的簡單性主要體現在：首先它是一種基于 java 基本語句和控制流之上的簡單而緊湊的設計, 從而對于學習 java 是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴格的數據類型。 4、安全性javascript 是一種安全性語言，它不允許訪問本地的硬盤，并不能

22、將數據存入到服務器上，不允許對網絡文檔進行修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。 5、動態性的javascript 是動態的，它可以直接對用戶或客戶輸入做出響應，無須經過web 服務程序。它對用戶的反映響應，是采用以事件驅動的方式進行的。所謂事件驅動，就是指在主頁(home page)中執行了某種操作所產生的動作，就稱為“事件”(event)。比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發生后，可能會引起相應的事件響應。 6、跨平臺性javascript 是依賴于瀏覽器本身，與操作環境無關，只要能運行瀏覽器的計算機，并支持 javascript

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

24、ent) 的應用程式所處理。javascript 和 java 很類似，但到底并不一樣！ java 是一種比 javascript 更復雜許多的程式語言，而 javascript 則是相當容易了解的語言。javascript 創作者可以不那麼注重程式技巧，所以許多 java 的特性在 java script 中并不支援。二、javascript 和 java 的區別雖然 javascript 與 java 有緊密的聯系，但卻是兩個公司開發的不同的兩個產品。java 是 sun 公司推出的新一代面向對象的程序設計語言，特別適合于internet 應用程序開發；而 javascript 是 net

25、scape 公司的產品，其目的是為了擴展 netscape navigator 功能,而開發的一種可以嵌入 web 頁面中的基于對象和事件驅動的解釋性語言, 它的前身是 live script；而 java 的前身是 oak 語言。下面對兩種語言間的異同作如下比較： 1、基于對象和面向對象java 是一種真正的面向對象的語言，即使是開發簡單的程序，必須設計對象。javascript 是種腳本語言，它可以用來制作與網絡無關的，與用戶交互作用的復雜軟件。它是一種基于對象（object based）和事件驅動（event driver）的編程語言。因而它本身提供了非常豐富的內部對象供設計人員使用。

26、2、解釋和編譯兩種語言在其瀏覽器中所執行的方式不一樣。java 的源代碼在傳遞到客戶端執行之前，必須經過編譯，因而客戶端上必須具有相應平臺上的仿真器或解釋器，它可以通過編譯器或解釋器實現獨立于某個特定的平臺編譯代碼的束縛。javascript 是一種解釋性編程語言，其源代碼在發往客戶端執行之前不需經過編譯，而是將文本格式的字符代碼發送給客戶編由瀏覽器解釋執行。 3、強變量和弱變量兩種語言所采取的變量是不一樣的。java 采用強類型變量檢查，即所有變量在編譯之前必須作聲明。如: integer x;string y;第三章 基于對象的 javascript 語言10 x=1234;x=4321;

27、其中 x=1234 說明是一個整數，y=4321 說明是一個字符串。javascript 中變量聲明，采用其弱類型。即變量在使用前不需作聲明，而是解釋器在運行時檢查其數據類型，如：x=1234;y4321;前者說明 x 為其數值型變量，而后者說明 y 為字符型變量。4、代碼格式不一樣java 是一種與 html 無關的格式，必須通過像 html 中引用外媒體那么進行裝載，其代碼以字節代碼的形式保存在獨立的文檔中。javascript 的代碼是一種文本字符格式，可以直接嵌入 html 文檔中，并且可動態裝載。編寫 html 文檔就像編輯文本文件一樣方便。 5、嵌入方式不一樣在 html 文檔中，

28、兩種編程語言的標識不同，javascript 使用.來標識，而 java 使用.來標識。 6、靜態聯編和動態聯編java 采用靜態聯編，即 java 的對象引用必須在編譯時的進行，以使編譯器能夠實現強類型檢查。javascript 采用動態聯編，即 javascript 的對象引用在運行時進行檢查，如不經編譯則就無法實現對象引用的檢查。 2.3 本章小結本章小結本章主要介紹了網頁設計語言 html 和 javascript，第三章 基于對象的 javascript 語言11第三章第三章 基于對象的基于對象的 javascriptjavascript 語言語言javascript 語言是基于對象

29、的（object-based） ，而不是面向對象的（object-oriented） 。之所以說它是一門基于對象的語言，主要是因為它沒有提供象抽象、繼承、重載等有關面向對象語言的許多功能。而是把其它語言所創建的復雜對象統一起來，從而形成一個非常強大的對象系統。雖然 javascript 語言是一門基于對象的，但它還是具有一些面向對象的基本特征。它可以根據需要創建自己的對象，從而進一步擴大 javascript 的應用范圍，增強編寫功能強大的 web 文檔。3.1 對象的基礎知識對象的基礎知識3.1.1 對象的基本結構 javascript 中的對象是由屬性(properties)和方法(met

30、hods)兩個基本的元素的構成的。前者是對象在實施其所需要行為的過程中，實現信息的裝載單位，從而與變量相關聯；后者是指對象能夠按照設計者的意圖而被執行，從而與特定的函數相聯。3.1.2 引用對象的途徑 一個對象要真正地被使用，可采用以下幾種方式獲得：（1）引用 javascript 內部對象；（2）由瀏覽器環境中提供；（3）創建新對象。這就是說一個對象在被引用之前，這個對象必須存在，否則引用將毫無意義，而出現錯誤信息。從上面中我們可以看出 javascript 引用對象可通過三種方式獲取。要么創建新的對象，要么利用現存的對象。3.1.3 有關對象操作語句javascript 不是一純面向對象的

31、語言，它設有提供面向對象語言的許多功能，因此 javascript 設計者之所以把它你“基于對象”而不是面向對象的語言，在javascript 中提供了幾個用于操作對象的語句和關鍵字及運算符。（1） 、for.in 語句格式如下：for（對象屬性名 in 已知對象名）第三章 基于對象的 javascript 語言12說明：該語句的功能是用于對已知對象的所有屬性進行操作的控制循環。它是將一個已知對象的所有屬性反復置給一個變量；而不是使用計數器來實現的。該語句的優點就是無需知道對象中屬性的個數即可進行操作。例：下列函數是顯示數組中的內容：function showdata(object)for (

32、var x=0; x30;x+)document.write(objecti)；該函數是通過數組下標順序值，來訪問每個對象的屬性，使用這種方式首先必須知道數組的下標值，否則若超出范圍，則就會發生錯誤。而使 for.in 語句，則根本不需要知道對象屬性的個數，見下：function showdata(object)for(var prop in object)document.write(objectprop)；使用該函數時，在循環體中，for 自動將的屬性取出來，直到最后為此。（2）with 語句使用該語句的意思是：在該語句體內，任何對變量的引用被認為是這個對象的屬性，以節省一些代碼。with

33、 object.所有在 with 語句后的花括號中的語句，都是在后面 object 對象的作用域的。（3）this 關鍵字this 是對當前的引用，在 javascript 由于對象的引用是多層次，多方位的，往往一個對象的引用又需要對另一個對象的引用，而另一個對象有可能又要引用另一個對象，這樣有可能造成混亂，最后自己已不知道現在引用的那一個對象，為此 javascript 提供了一個用于將對象指定當前對象的語句 this。（4）new 運算符雖然在 javascript 中對象的功能已經是非常強大的了。但更強大的是設計人員可以按照需求來創建自己的對象，以滿足某一特定的要求。使用 new 運算符

34、可以創建一個新的對象。其創建對象使用如下格式：newobject=new object(parameters table);其中 newobject 創建的新對象：object 是已經存在的對象； parameters table參數表；new 是 javascript 中的命令語句。第三章 基于對象的 javascript 語言13如創建一個日期新對象newdata=new data()birthday=new data (december 12.1998)之后就可使 newdata、birthday 作為一個新的日期對象了。3.1.4 對象屬性的引用 對象屬性的引用可由下列三種方式之一實現

35、：（1）使用點（.）運算符university.name=“云南省”university.city=“昆明市”university.date=1999其中 university 是一個已經存在的對象，name、city、date 是它的三個屬性，并通過操作對其賦值。（2）通過對象的下標實現引用university0=“云南”university1=“昆明市”university2=1999通過數組形式的訪問屬性，可以使用循環操作獲取其值。function showunievsity(object)for (var j=0;j2; j+)document.write(objectj)若采用 fo

36、r.in 則可以不知其屬性的個數后就可以實現：function showmy(object)for (var prop in this)docament.write(thisprop);（3）通過字符串的形式實現universityname=“云南”universitycity=“昆明市”universitydate=19993.1.5 對象的方法的引用 在 javascript 中對象方法的引用是非常簡單的。objectname.methods()實際上 methods()=functionname 方法實質上是一個函數。 如引用第三章 基于對象的 javascript 語言14univer

37、sity 對象中的 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)3.2 常用對象的屬性和方法常用對象的屬性和方法 javascript 為我們提供了一些非常有用的常用內部對

38、象和方法。用戶不需要用腳本來實現這些功能。這正是基于對象編程的真正目的。在 javascript 提供了 string（字符串） 、math（數值計算）和 date（日期）三種對象和其它一些相關的方法。從而為編程人員快速開發強大的腳本程序提供了非常有利的條件。3.2.1 常用內部對象 在 javascript 中對于對象屬性與方法的引用，有兩種情況：其一是說該對象是靜態對象，即在引用該對象的屬性或方法時不需要為它創建實例；而另一種對象則在引用它的對象或方法是必須為它創建一個實例，即該對象是動態對象。對 javascript 內部對象的引用，以是緊緊圍繞著它的屬性與方法進行的。因而明確對象的靜動

39、性對于掌握和理解 javascript 內部對象是具有非常重要的意義。1、串對象 string 對象：內部靜態性。訪問 properties 和 methods 時，可使用（.）運算符實現。基本使用格式：objectnp/methods（1）串對象的屬性該對象只有一個屬性，即 length。它表明了字符串中的字符個數，包括所有符號。例：第三章 基于對象的 javascript 語言15mytest=this is a javascriptmystringlength=mytest.length最后 mystringlength 返回 mytest 字串的長度為 20。（2）串對象

40、的方法string 對象的方法共有個。主要用于有關字符串在 web 頁面中的顯示、字體大小、字體顏色、字符的搜索以及字符的大小寫轉換。其主要方法如下： 錨點 anchor()：該方法創建如用 html 文檔中一樣的 anchor 標記。使用anchor 如用 html 中(a name=)一樣。通過下列格式訪問:string.anchor(anchorname)。有關字符顯示的控制方法big 字體顯示, italics()斜體字顯示，bold()粗體字顯示，blink()字符閃爍顯示，small（）字符用小體字顯示，fixed()固定高亮字顯示、fontsize(size)控制字體大小等。字體

41、顏色方法；fontcolor(color)字符串大小寫轉換tolowercase()小寫轉換，touppercase()大寫轉換。下列把一個給定的串分別轉換成大寫和小寫格式:string=stringvalue.touppercase 和 string=stringvalue.tolowercase。字符搜索：indexofcharactor,fromindex從指定 formindtx 位置開始搜索 charactor 第一次出現的位置。返回字串的一部分字串：substring(start,end)從 start 開始到 end 的字符全部返回。2、算術函數的 math 對象 功能：提供除加

42、、減、乘、除以外的一引些自述運算。如對數，平方根等 。靜動性：靜態對象（1）主要屬性math 中提供了個屬性，它們是數學中經常用到的常數、以為底的自然對數、以為底的自然對數 ln2、3.14159 的 pi、1/2 的平方根sqrt1-2,2 的平方根為 sqrt2。（2）主要方法絕對值：abs()正弦余弦值：sin(),cos()第三章 基于對象的 javascript 語言16反正弦反余弦 :asin(), acos()正切反正切：tan(),atan()四舍五入：round()平方根：sqrt()基于幾方次的值：pow(base,exponent)3、日期及時間對象 功能：提供一個有關日

43、期和時間的對象。靜動性：動態性，即必須使用 new 運算符創建一個實例。例：mydate=new date()date 對象沒有提供直接訪問的屬性。只具有獲取和設置日期和時間的方法。（1）獲取日期的時間方法getyear(): 返回年數getmonth():返回當月號數getdate(): 返回當日號數getday():返回星期幾gethours():返回小時數getmintes(:返回分鐘數getseconds():返回秒數gettime() : 返回毫秒數（2）設置日期和時間：setyear();設置年setdate():設置當月號數setmonth():設置當月份數sethours():

44、設置小時數setmintes():設置分鐘數setseconds():設置秒數settime ():設置毫秒數3.2.2 javascript 中的系統函數 javascript 中的系統函數又稱內部方法。它提供了與任何對象無關的系統函數，使用這些函數不需創建任何實例,可直接用。1、返回字符串表達式中的值：方法名：eval（字串表達式） ，例：第三章 基于對象的 javascript 語言17test=eval(8+9+5/2);2、返回字符串 asci 碼：方法名：unescape (string)3、返回字符的編碼：方法名：escape(character)4、返回實數：parsefloa

45、t(floustring);5、返回不同進制的數：parseint(numbestring ,rad.x)其中 radix 是數的進制，numbs 字符串數3.2.3 舉例 下面是一個時鐘顯示的 javascript 文檔。在文檔中用了非常多的函數。test4_1.htm時鐘function showclock() function hideclock() var timerid = nullvar timerrunning = falsefunction stopclock() if(timerrunning)cleartimeout(timerid);timerrunning = fals

46、edocument.clock.face.value = ;第三章 基于對象的 javascript 語言18function 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) ?

47、 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 = tru

48、efunction 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   時鐘第四章 內部對象系統的使用19 3.3 本

49、章小結本章小結本講介紹了基于對象的 javascript 中常用內部對象屬性、方法的使用。第四章 內部對象系統的使用20第四章第四章 內部對象系統的使用內部對象系統的使用使用瀏覽器的內部對象系統，可實現與 html 文檔進行交互。它的作用是將相關元素組織包裝起來，提供給程序設計人員使用，從而減輕編程人的勞動，提高設計 web 頁面的能力。4.1 瀏覽器對象層次及其主要作用瀏覽器對象層次及其主要作用除了前面提到過的文檔 document 對象外，navigator 瀏覽器中還提供了窗口（window）對象以及歷史（history）和位置（location）對象。瀏覽器對象(navigator)：

50、提供有關瀏覽器的信息窗口對象(windows)：window 對象處于對象層次的最頂端，它提供了處理navigator 窗口的方法和屬性。位置對象(location)：location 對象提供了與當前打開的 url 一起工作的方法和屬性，它是一個靜態的對象。歷史對象(history)：history 對象提供了與歷史清單有關的信息。文檔對象(document)：document 對象包含了與文檔元素(elements)一起工作的對象，它將這些元素封裝起來供編程人員使用。網頁設計與制作人員利用這些對象，可以對 www 瀏覽器環境中的事件進行控制并作出處理。在 javascript 中提供了非常

51、豐富的內部方法和屬性，從而減輕了編程人員的工作，提高編程效率。這正是基于對象與面向對象的根本區別所在。在這些對象系統中，文檔對象屬于非常重要的，它位于最低層，但對于我們實現 web 頁面信息交互起作關鍵作用。因而它是對象系統的核心部分。4.2 文檔對象功能及其作用文檔對象功能及其作用在 navigator 瀏覽器中，document 文檔對象是核心是，同時也是最重要的。見表 4-1 所示。表 4-1 document 對象linksanchorformmethodprop鏈接對象錨對象窗體對象方法對象從表 4-1 中可以看出，document 對象的主要作用就是把這些基本的元素（如 links

52、,anchor 等）包裝起來，提供給編程人員使用。從另一個角度看，document 對象中又是由屬性和方法組成。第四章 內部對象系統的使用214.2.1 document 中三個主要的對象在 document 中主要有：links,anchor,form 等三個最重要的對象：（1）anchor 錨對象：anchor 對象指的是 標識在 html 源碼中存在時產生的對象。它包含著文檔中所有的 anchors 信息。（2）鏈接 links 對象link 對象指的是用 標記的連接一個超文本或超媒體的元素作為一個特定的 url。（3）窗體（form）對象窗體對象是文檔對象的一個元素，它含有多種格式的對

53、象儲存信息，使用它可以在 javascript 腳本中編寫程序進行文字輸入，并可以用來動態改變文檔的行為。通過 document. forms數組來使得在同一個頁面上可以有多個相同的窗體,使用 forms數組要比使用窗體名字要方便得多。下面就是一個使用窗體數組和窗體名字的例子。該程序使得兩個窗體中的字段內容保持一致。test6_1.htm其中用了 onchnge 事件(當窗體內容改變時激發)。第一個使用窗體名字標識 my,第二個使用窗體數組 forms。其效果是一致。4.2.2 文檔對象中的 attribute 屬性document 對象中的 attribute 屬性，主要用于在引用 href

54、 標識時，控制著有第四章 內部對象系統的使用22關顏色的格式和有關文檔標題、文檔原文件的 url 以及文檔最后更新的日期。這部分元素的主要含義如下：（1）鏈接顏色：alinkcolor這個元素主要用于，當選取一個鏈接時，鏈接對象本身的顏色就按alinkcolo r 指定改變。（2）鏈接顏色：linkcolor當用戶使用 text string 鏈接后，textstring 的顏色就會按linkcolor 所指定的顏色更新。（3）瀏覽過后的顏色：vlinkcolor該屬性表示的是已被瀏覽存儲為已瀏覽過的鏈接顏色。（4）背景顏色：bgcolor該元素包含文檔背景的顏色。（5）前景顏色：fgcolo

55、r該元素包含 html 文檔中文本的前景顏色。4.2.3 文檔對象的基本元素（1）窗體屬性：窗體屬性是與 html 文檔中.相對應的一組對象在 html文檔所創建的窗體數，由 length 指定。通過 document.forms.length 反映該文檔中所創建的窗體數目。（2）錨屬性：anchors該屬性中，包含了 html 文檔的所有 標記為 name=.的語句標識。所有“錨”的數目保存在 document.anchors.length 中。（3）鏈接屬性：links鏈接屬性是指在文檔中.的由 href=.指定的數目，其鏈接數目保存在 document.links.length 中。4.

56、3 內部對象系統實例下面我們通過一個例子來說明文檔對象的綜合應用。輸出結果見圖 4-2 所示。test6_2.htm第四章 內部對象系統的使用23請輸入數據：鏈接到第一個文本鏈接到第二個文本鏈接到第三個文本第一錨點第二錨點第三錨點document.write(文檔有+document.links.length+個鏈接+);document.write(文檔有+document.anchors.length+個錨點+);document.write(文檔有+document.forms.length+個窗體);圖 4-2例子 2：下列程序隨機產生每日一語。test6_3.html第五章 web

57、頁面信息的交互窗體與框架24!-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 本章小結本章主要介紹內部對象系統及其使用方法。第五章 web 頁面信息的交互窗體與框架25第五章第五章 webweb 頁面信息的交互頁面信息的交互窗體與框架窗體與框架要實現網頁的動態交

58、互，必須掌握有關窗體對象（form）和框架對象（frames）更為復雜的知識。5.1 窗體基礎知識窗體基礎知識窗體對象可以使設計人員能用窗體中不同的元素與客戶機用戶相交互，而用不著在之前首先進行數據輸入，就可以實現動態改變 web 文檔的行為。5.1.1 窗體對象窗體（form）：它構成了 web 頁面的基本元素。通常一個 web 頁面有一個窗體或幾個窗體，使用 forms數組來實現不同窗體的訪問。在 forms0中共有三個基本元素，而 forms1中只有兩個元素。窗體對象最主要的功能就是能夠直接訪問 html 文檔中的窗體，它封裝了相關的 html 代碼：第五章 web 頁面信息的交互窗體與

59、框架265.1.2 窗體對象的方法窗體對象的方法只有一個-submit()方法，該方法主要功用就是實現窗體信息的提交。如提交 mytest 窗體，則使用下列格式：document.mytest.submit()5.1.3 窗體對象的屬性窗體對象中的屬性主要包括以下：elements name action target encoding method。除 elements 外，其它幾個均反映了窗體中標識中相應屬性的狀態，這通常是單個窗體標識；而 elements 常常是多個窗體元素值的數組，例：elements0.mytable.elements15.1.4 訪問窗體對象在 javascrip

60、t 中訪問窗體對象可由兩種方法實現：（1）通過訪問窗體在窗體對象的屬性中首先必須指定其窗體名，而后就可以通過下列標識訪問窗體如：document.mytable()。（2）通過數組來訪問窗體除了使用窗體名來訪問窗體外，還可以使用窗體對象數組來訪問窗體對象。但需要注意一點，因窗體對象是由瀏覽器環境的提供的，而瀏覽器環境所提供的數組下標是由 0 到 n。所以可通過下列格式實現窗體對象的訪問：document.forms0document.forms1document.forms 引用窗體的先決條件在 javascript 中要對窗體引用的條件是：必須先在頁面中用標識創建窗體，并將定義窗體部分