計(jì)算機(jī)畢業(yè)設(shè)計(jì)-用JavaScript實(shí)現(xiàn)Web頁交互性

時(shí)間：2023-10-12 04:30:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-12 04:30:01 來源：網(wǎng)站運(yùn)營

計(jì)算機(jī)畢業(yè)設(shè)計(jì)-用JavaScript實(shí)現(xiàn)Web頁交互性：1、研究的意義，同類研究工作國內(nèi)外現(xiàn)狀、存在問題（重點(diǎn)論文網(wǎng)原創(chuàng)論文）

JavaScript更好的實(shí)現(xiàn)了網(wǎng)頁的交互性，同時(shí)擴(kuò)展了HTML語言的一些功能，使得信息與用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是一種實(shí)時(shí)的、動(dòng)態(tài)的、可交互的表達(dá)方式。不斷深入的探討和掌握J(rèn)avaScript腳本語言將給網(wǎng)絡(luò)編程人員和網(wǎng)頁瀏覽者帶來更大的方便。

本文主要參考文獻(xiàn)為：

[1] B：李開榮、Web設(shè)計(jì)技術(shù)[M]、高等教育出版社、2004：34-37.

[2] B：邵麗萍等、網(wǎng)頁編程技術(shù)[M]、清華大學(xué)出版社、2002：102-109.

[3] B：E書免費(fèi)電子圖書、網(wǎng)絡(luò)編程基礎(chǔ)篇之——JavaScript[M]、2001：1-7.




2、研究目標(biāo)、內(nèi)容和擬解決的關(guān)鍵問題（根據(jù)任務(wù)要求進(jìn)一步具體化）

通過對JavaScript腳本語言內(nèi)部對象的深入研究，進(jìn)一步了解JavaScript的特性，利用編寫簡單的JavaScript腳本語言實(shí)現(xiàn)網(wǎng)頁的交互。關(guān)鍵是對內(nèi)部對象屬性和方法的深入了解。內(nèi)容如下：

1. 簡單介紹JavaScript

2. 詳細(xì)敘述JavaScript對象和對象的引用

3. 詳細(xì)敘述利用內(nèi)部對象實(shí)現(xiàn)網(wǎng)頁交互

4. 完成JavaScript與網(wǎng)頁的結(jié)合設(shè)計(jì)和應(yīng)用

3、特色與創(chuàng)新之處

本文計(jì)劃運(yùn)用JavaScript腳本語言，通過實(shí)際設(shè)計(jì)，在自己的主題網(wǎng)站中具體實(shí)現(xiàn)如網(wǎng)頁加密、菜單彈出、圖片轉(zhuǎn)換、多媒體播放、問答測試及當(dāng)前時(shí)間顯示等與窗口、表格、按鈕、圖像及其它對像的交互功能，讓網(wǎng)頁變得更加的生動(dòng)、有趣，最終更好的實(shí)現(xiàn)網(wǎng)站網(wǎng)頁與瀏覽者的交互。

4、擬采取的研究方法、步驟、技術(shù)路線

通過對JavaScript語言和對象的研究，更深入的掌握J(rèn)avaScript的編程方法，接著更好的利用其實(shí)現(xiàn)網(wǎng)頁的交互。

5、使用的主要儀器設(shè)備、試劑和藥品

軟件環(huán)境： Windows 95/98或Windows NT以上版本的Windows操作系統(tǒng)配置。Netscape Navigator x.0或Internet Explorer 3.0以上版本的瀏覽器。用于編輯HTML文檔的類似Dream weaver MX的網(wǎng)頁開發(fā)工具軟件。

硬件配置：首先必須具備運(yùn)行Windows 95/98或Windows NT的基本硬件配置環(huán)境

基本內(nèi)存32M以上

CRT至少可以顯示256色，分辨率在640X480以上

CPU只少II233以上級別

鼠標(biāo)和其它外部設(shè)置（根據(jù)需要選用）

6、參考文獻(xiàn)

[1] B：將民、JavaScript實(shí)例、技巧與應(yīng)用[M]、清華大學(xué)出版社.、2003：16-18.

[2] B：李開榮、Web設(shè)計(jì)技術(shù)[M]、高等教育出版社、2004：34-37.

[3] B：E書免費(fèi)電子圖書、網(wǎng)絡(luò)編程基礎(chǔ)篇之——JavaScript[M]、2001：1-7.

[4] A：何克石、基于JavaScript的動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)[J] 、現(xiàn)代計(jì)算機(jī)、2000，3:：34-36.

[5] A： 鐘蘊(yùn)玉、 用JavaScript實(shí)現(xiàn)Web頁交互性[J] 、杭州師范大學(xué)自然科學(xué)學(xué)報(bào)、2002，3： 42-46.

[6] B：胡仁喜等、最新網(wǎng)頁制作實(shí)例教程——FrontPage 2003[M]、機(jī)械工業(yè)出版社、2005：1-309.

[7] B：邵麗萍等、網(wǎng)頁編程技術(shù)[M]、清華大學(xué)出版社、2002：102-109.

目 錄

摘 要（中文） 1

摘 要（英文） 2

前 言 3

1 JAVASCRIPT概述 4

1.1　JAVASCRIPT 簡介 4

1.2 JAVASCRIPT的特征 4

1.2.1 簡單性的語言 4

1.2.2 基于對象的語言 4

1.2.3 動(dòng)態(tài)的語言 4

1.2.4 具有較強(qiáng)的安全性的語言 4

1.2.5 多平臺的語言 4

1.3 JAVASCRIPT的局限性 4

1.3.1 瀏覽器相關(guān)的局限性 4

1.3.2 安全性有關(guān)的局限性 5

1.4 JAVASCRIPT和JAVA的區(qū)別 5

1.4.1 基于對象和面向?qū)ο?5

1.4.2 解釋和編譯 5

1.4.3 強(qiáng)變量和弱變量 5

1.4.4代碼格式不一樣 5

1.4.5 嵌入方式不一樣 6

1.4.6 靜態(tài)聯(lián)編和動(dòng)態(tài)聯(lián)編 6

1.5 JAVASCRIPT程序運(yùn)行環(huán)境 6

1.5.1 軟件環(huán)境 6

1.5.2 硬件配置 6

1.6 JAVASCRIPT程序在HTML中嵌入的兩種語法[4] 6

2 JAVASCRIPT對象和對象的引用 7

2.1 對象的基本結(jié)構(gòu) 7

2.2 引用對象的途徑 7

2.3 有關(guān)對象操作語句 7

2.4 對象屬性的引用 7

2.4.1 使用點(diǎn)（.）運(yùn)算符 7

2.4.2 通過對象的下標(biāo)實(shí)現(xiàn)引用 7

2.5 對象的方法的引用 8

3 利用內(nèi)部對象實(shí)現(xiàn)網(wǎng)頁交互 9

3.1 JAVASCRIPT窗口的輸入輸出 9

3.1.1 窗口對象 9

3.1.2 窗口對象的事件驅(qū)動(dòng) 9

3.1.3 窗口對象的方法 9

3.1.4 窗口對象中的屬性 10

3.1.5 輸出流及文檔對象 10

3.1.6 范例 11

3.2 用窗體對象（FORM）實(shí)現(xiàn)交互 11

3.2.1 窗體基礎(chǔ)知識 11

3.2.2 窗體中的基本元素 12

3.2.3 范例 15

3.3 實(shí)現(xiàn)框架的交互 16

3.3.1 什么是框架 16

3.3.2 如何訪問框架 16

3.3.3 范例 17

4 JAVASCRIPT與網(wǎng)頁的結(jié)合設(shè)計(jì)和應(yīng)用 18

4.1 在網(wǎng)頁中自動(dòng)顯示更新時(shí)間 18

4.2 點(diǎn)擊彈出菜單 18

4.3 使用行為的交互 19

4.3.1 播放歌曲 19

4.3.2 圖片交換 19

4.4 在標(biāo)題欄顯示當(dāng)前時(shí)間 20

4.5 為網(wǎng)頁設(shè)置密碼 21

4.6 實(shí)現(xiàn)問答測試 21

4.7 小游戲 23

4.7.1 測試反應(yīng)能力 23

4.7.2 動(dòng)腦亮燈 24

4.7.3 數(shù)學(xué)計(jì)算 25

_Toc121598184.7.4 方框游戲 26

參考文獻(xiàn) 29

致 謝 30

附 錄 31

附錄1 輸入輸出實(shí)例 31

附錄2 在網(wǎng)頁停留的時(shí)間 31

附錄3 改變背景顏色 32

附錄4 框架交互 32

附錄5 點(diǎn)擊彈出菜單 35

附錄6 在標(biāo)題欄顯示當(dāng)前時(shí)間 35

附錄7 問答測試 35

附錄8 數(shù)學(xué)計(jì)算 37

附錄9 方框游戲 39

附錄10 動(dòng)腦亮燈 48

附錄11 測試反映 52




前言

隨著Internet國際互聯(lián)網(wǎng)在我國的普及，越來越多的社會(huì)團(tuán)體、企事業(yè)單位，在互聯(lián)網(wǎng)上建立自己的網(wǎng)絡(luò)，甚至個(gè)人也設(shè)立了自己的網(wǎng)站。企業(yè)及個(gè)人需要通過網(wǎng)站上的web網(wǎng)頁展示自身產(chǎn)品，發(fā)布最新動(dòng)態(tài)，與用戶進(jìn)行交流和溝通，與合作伙伴建立聯(lián)系，以及開展電子商務(wù)等。要實(shí)現(xiàn)這些需求及功能就要求網(wǎng)頁與用戶之間具備一定的交互能力。

早期的web網(wǎng)頁主要用來傳送靜態(tài)的用HTML語言編制的文檔,它基本采用超鏈接技術(shù)。通過超文本和超媒體技術(shù)結(jié)合超鏈接的鏈接功能將各種信息組織成網(wǎng)絡(luò)結(jié)構(gòu)(web)，構(gòu)成網(wǎng)絡(luò)文檔(Document)，實(shí)現(xiàn)Internet上的“漫游”。

然而，網(wǎng)站和電視是不一樣的，電視只是將特定的信息傳達(dá)給觀眾。每個(gè)看電視的人所接受到的信息都相同，不會(huì)因人而異，而網(wǎng)頁則需要和讀者之間互動(dòng)，因讀者不同的選擇而產(chǎn)生不同的結(jié)果，讓讀者更好的得到想要的信息。而采用這種超鏈接技術(shù)存在一定的缺陷，用HTML超文本標(biāo)識語言編寫的網(wǎng)頁, 信息與讀者之間缺少一種比較直觀的交互式方法, 它提供的信息基本是靜態(tài)的信息,缺少一種實(shí)時(shí)、動(dòng)態(tài)的表達(dá)和處理能力。

雖然，之前的靜態(tài)網(wǎng)頁可通過CGI(Common Gateway Interface)通用網(wǎng)關(guān)接口來實(shí)現(xiàn)一定的交互，但通過該方法，相關(guān)的運(yùn)算及處理都必須在服務(wù)端上執(zhí)行，再將執(zhí)行完的結(jié)果傳回給使用者端。如此一來，若同時(shí)有很多人在服務(wù)器端上執(zhí)行CGI接口程序，整個(gè)服務(wù)器的運(yùn)算速度就會(huì)降低，并且當(dāng)有很多計(jì)算機(jī)同時(shí)訪問服務(wù)器，服務(wù)器的負(fù)荷過重時(shí)，該機(jī)器就有死機(jī)的高危險(xiǎn)性存在。一旦服務(wù)器死機(jī)，網(wǎng)頁就無法正常瀏覽。同時(shí)由于該方法編程較為復(fù)雜，因而在一段時(shí)間內(nèi)妨礙了Internet技術(shù)的發(fā)展。

JavaScript腳本語言是一種基于對象和事件驅(qū)動(dòng)并具有安全性能的腳本語言。它的程序可以直接被瀏覽器讀取，然后通過瀏覽器中的直譯器執(zhí)行運(yùn)算。使用它不必通過服務(wù)器即可以與HTML超文本標(biāo)記語言、Java 腳本語言（Java小程序）一起實(shí)現(xiàn)在一個(gè)Web頁面中鏈接多個(gè)對象，與Web客戶實(shí)現(xiàn)交互作用。從而可以用簡單的腳本語言開發(fā)客戶端的應(yīng)用程序。JavaScript的出現(xiàn)彌補(bǔ)了HTML語言的缺陷，使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的、動(dòng)態(tài)的、可交式的表達(dá)能力。

在此之前，我查閱了許多有關(guān)網(wǎng)頁編程技術(shù)及JavaScript語言的資料。在這些相關(guān)資料中我發(fā)現(xiàn)，許多的書籍及論文都只是單方面的介紹了JavaScript的基礎(chǔ)知識，舉單獨(dú)的實(shí)例，并沒有真正具體的實(shí)現(xiàn)與網(wǎng)站網(wǎng)頁的結(jié)合設(shè)計(jì)。然而JavaScript是為了更好的實(shí)現(xiàn)網(wǎng)頁交互而產(chǎn)生的腳本語言，沒有和網(wǎng)站網(wǎng)頁的實(shí)際結(jié)合，一切猶如紙上談兵。

本論文將盡量從JavaScript的語言基礎(chǔ)到與網(wǎng)頁結(jié)合的設(shè)計(jì)應(yīng)用，精而簡的介紹JavaScript常用的內(nèi)部對象，運(yùn)用具體生動(dòng)的實(shí)例詳細(xì)講述如何應(yīng)用JavaScript實(shí)現(xiàn)網(wǎng)頁的交互。并通過實(shí)際設(shè)計(jì)，在自己的主題網(wǎng)站中具體實(shí)現(xiàn)如網(wǎng)頁加密、菜單彈出、圖片轉(zhuǎn)換、多媒體播放、問答測試及當(dāng)前時(shí)間顯示等與窗口、表格、按鈕、圖像及其它對像的交互功能，讓網(wǎng)頁變得更加的生動(dòng)、有趣，最終更好的實(shí)現(xiàn)網(wǎng)頁與瀏覽者的交互。







1 JavaScript概述




1.1　JavaScript 簡介

JavaScript是由 Netscape公司開發(fā)的一種腳本語言（scripting language），或者稱為描述語言。在HTML基礎(chǔ)上，使用JavaScript可以開發(fā)交互式Web網(wǎng)頁。JavaScript的出現(xiàn)使得網(wǎng)頁和用戶之間實(shí)現(xiàn)了一種實(shí)時(shí)性的、動(dòng)態(tài)的、交互性的關(guān)系，使網(wǎng)頁包含更多活躍的元素和更加精彩的內(nèi)容。運(yùn)行用JavaScript編寫的程序需要能支持JavaScript語言的瀏覽器。微軟公司還有自己開發(fā)的JavaScript，稱為JScript。JavaScript和Jscript基本上是相同的，只是在一些細(xì)節(jié)上有出入。JavaScript短小精悍，又是在客戶機(jī)上執(zhí)行的，大大提高了網(wǎng)頁的瀏覽速度和交互能力。同時(shí)它又是專門為制作Web網(wǎng)頁而量身定做的一種簡單編程語言。[1]




1.2 JavaScript的特征

JavaScript 主要具有以下特征：

1.2.1 簡單性的語言

JavaScript是一種腳本語言, 它是采用小文檔的方式實(shí)現(xiàn)編程的。 其基本的結(jié)構(gòu)形式與C+ + 、C、VB、Delphi 十分類似, 但它不像這些語言需要先編譯, 而是在文檔運(yùn)行過程中被逐行地解釋。它與HTML 結(jié)合在一起，方便了用戶的使用操作。JavaScript 的簡單性還體現(xiàn)在：首先它是一種基于Java 基本語句和控制流之上的簡單而緊湊的設(shè)計(jì)語言, 從而對于學(xué)習(xí)Java是一種非常好的過渡；其次它的變量類型采用的是弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。

1.2.2 基于對象的語言

JavaScript 是一種基于對象的語言, 同時(shí)也可以看作是一種面向?qū)ο蟮恼Z言。它能用自己創(chuàng)建的對象, 因此, 許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用。

1.2.3 動(dòng)態(tài)的語言

JavaScript 是動(dòng)態(tài)的, 它可以直接對用戶或客戶輸入做出響應(yīng), 無需經(jīng)過WEB服務(wù)文檔。 它對用戶的響應(yīng)是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。 所謂事件驅(qū)動(dòng), 就是指主頁(Homepage)中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作。（這種動(dòng)作也稱為“事件”, 如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等）, 會(huì)引起相應(yīng)的事件響應(yīng)。

1.2.4 具有較強(qiáng)的安全性的語言

JavaScript是一種安全性很強(qiáng)的語言, 它不允許客戶訪問本地硬盤, 且不能將數(shù)據(jù)存入服務(wù)器上, 不允許對網(wǎng)絡(luò)文檔干地修改和刪除, 只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互, 從而有效地防止“病毒”的入侵。

1.2.5 多平臺的語言

實(shí)際上JavaScript依賴于瀏覽器本身與操作環(huán)境無關(guān), 只要能運(yùn)行支持JavaScript的瀏覽器計(jì)算機(jī)都可正確運(yùn)行。




1.3 JavaScript的局限性[2]

JavaScript為Web內(nèi)容設(shè)計(jì)人員提供了極大的靈活性和控制手段。它能夠?qū)⒁粋€(gè)Web節(jié)點(diǎn)中的不同組成部分捆綁在一起，成為一個(gè)緊密結(jié)合的信息源。然而，像任何事物一樣，JavaScript也有它的局限性。

1.3.1 瀏覽器相關(guān)的局限性

目前WWW上有很多瀏覽器，到現(xiàn)在為止，只有Netscape Navigator2.0、 Netscape Navigator3.0 Netscape Gold2.0 完全支持JavaScript，IE3.0只是部分支持，不過IE4.0、IE5.0已可以完全支持JavaScript的信息，其他瀏覽器皆不支持。支持與不支持JavaScript的瀏覽器在顯示一個(gè)帶有JavaScript腳本的主頁時(shí)，結(jié)果全然不同。

1.3.2 安全性有關(guān)的局限性

JavaScript的設(shè)計(jì)目標(biāo)在于“Web安全性”，它比以前任何一種方法都更能保證Web的安全，這自然是犧牲JavaScript的一些功能換來的。

JavaScript不能打開、讀、寫、保存用戶在計(jì)算機(jī)上的文件。它有權(quán)訪問的唯一信息就是它所嵌入的那一個(gè)Web主頁中的信息。

JavaScript不能打開、讀、寫、保存Web服務(wù)器上的文件。盡管可以使用它來提交HTML命令，但HTML命令也不能打開那些文件。

JavaScript不能用來編寫破壞計(jì)算機(jī)上任何資源的“病毒”。它產(chǎn)生在糟糕的事情也不過是一個(gè)設(shè)計(jì)不好的主頁可能會(huì)顯示一些錯(cuò)誤信息（可能需要關(guān)閉瀏覽器），僅此而已。簡而言之，JavaScript只生存于它小小的世界——Web主頁里。




1.4 JavaScript和Java的區(qū)別[3]

雖然JavaScript與Java有緊密的聯(lián)系，但卻是兩個(gè)公司開發(fā)的不同的兩個(gè)產(chǎn)品。Java是SUN公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計(jì)語言，特別適合于Internet應(yīng)用程序開發(fā)；而JavaScript是Netscape公司的產(chǎn)品，其目的是為了擴(kuò)展Netscape Navigator功能，而開發(fā)的一種可以嵌入Web頁面中的基于對象和事件驅(qū)動(dòng)的解釋性語言，它的前身是Live Script；而Java的前身是Oak語言。下面對兩種語言間的異同作如下比較：

1.4.1 基于對象和面向?qū)ο?

Java是一種真正的面向?qū)ο蟮恼Z言，即使是開發(fā)簡單的程序，必須設(shè)計(jì)對象。

JavaScript是種腳本語言，它可以用來制作與網(wǎng)絡(luò)無關(guān)的，與用戶交互作用的復(fù)雜軟件。它是一種基于對象（Object Based）和事件驅(qū)動(dòng)（Event Driver）的編程語言。因而它本身提供了非常豐富的內(nèi)部對象供設(shè)計(jì)人員使用。

1.4.2 解釋和編譯

兩種語言在其瀏覽器中所執(zhí)行的方式不一樣。Java的源代碼在傳遞到客戶端執(zhí)行之前，必須經(jīng)過編譯，因而客戶端上必須具有相應(yīng)平臺上的仿真器或解釋器，它可以通過編譯器或解釋器實(shí)現(xiàn)獨(dú)立于某個(gè)特定的平臺編譯代碼的束縛。

JavaScript是一種解釋性編程語言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給客戶編由瀏覽器解釋執(zhí)行。

1.4.3 強(qiáng)變量和弱變量

兩種語言所采取的變量是不一樣的。

Java采用強(qiáng)類型變量檢查，即所有變量在編譯之前必須做聲明。如:

Integer x;

String y;

x=1234;

x=4321;

其中X=1234說明是一個(gè)整數(shù)，Y=4321說明是一個(gè)字符串。

JavaScript中變量聲明，采用其弱類型。即變量在使用前不需做聲明，而是解釋器在運(yùn)行時(shí)檢查其數(shù)據(jù)類型，如：

x=1234;

y＝"4321";

前者說明x為其數(shù)值型變量，而后者說明y為字符型變量。

1.4.4代碼格式不一樣

Java是一種與HTML無關(guān)的格式，必須通過像HTML中引用外媒體那么進(jìn)行裝載，其代碼以字節(jié)代碼的形式保存在獨(dú)立的文檔中。

JavaScript的代碼是一種文本字符格式，可以直接嵌入HTML文檔中，并且可動(dòng)態(tài)裝載。編寫HTML文檔就像編輯文本文件一樣方便。

1.4.5 嵌入方式不一樣

在HTML文檔中，兩種編程語言的標(biāo)識不同，JavaScript使用<Script>...</Script>來標(biāo)識，而Java使用<applet>...</applet>來標(biāo)識。

1.4.6 靜態(tài)聯(lián)編和動(dòng)態(tài)聯(lián)編

Java采用靜態(tài)聯(lián)編，即Java的對象引用必須在編譯時(shí)的進(jìn)行，以使編譯器能夠?qū)崿F(xiàn)強(qiáng)類型檢查。

JavaScript采用動(dòng)態(tài)聯(lián)編，即JavaScript的對象引用在運(yùn)行時(shí)進(jìn)行檢查，如不經(jīng)編譯就無法實(shí)現(xiàn)對象引用的檢查。




1.5 JavaScript程序運(yùn)行環(huán)境　　

1.5.1 軟件環(huán)境

Windows 95/98或Windows NT以上版本的Windows操作系統(tǒng)配置。

Netscape Navigator x.0或Internet Explorer 3.0以上版本的瀏覽器。用于編輯HTML文檔的字符編輯器(WS、WPS、Notepad、WordPad等)或HTML文檔編輯器、或者類似Dreamweaver MX的網(wǎng)頁開發(fā)工具軟件。

1.5.2 硬件配置

首先必須具備運(yùn)行Windows 95/98或Windows NT的基本硬件配置環(huán)境。推薦：

基本內(nèi)存32M、CRT至少可以顯示256色，分辨率在640X480以上CPU只少II233以上級別

鼠標(biāo)和其它外部設(shè)置（根據(jù)需要選用）




1.6 JavaScript程序在HTML中嵌入的兩種語法[4]

HTML規(guī)格說明本身并不直接支持條件選擇執(zhí)行， 因此用戶若要純粹用HTML文檔在網(wǎng)頁上完成一些交互工作，諸如請求有關(guān)用戶平臺的信息(Mac，UNIX或Windows)，然后在頁面上僅顯示選擇的平臺信息、根據(jù)用戶操作播放音頻消息、進(jìn)行大量數(shù)學(xué)計(jì)算并在屏幕上顯示結(jié)果等，就顯得有些力不從心了。而在HTML文檔中嵌入JavaScript程序后，完成這些工作就非常容易了。JavaScript程序在HTML中的嵌入有兩種語法格式：

(1) 基本語法

<Script Language="JavaScript">

JavaScript程序

<／Script>

(2) JavaScript的注釋語法

<Script Language="JavaScript">

< !--Hide the script from other browsers

JavaScript

／／Stop hiding from other browsers-->

<／Script>

JavaScript腳本與程序可以放人HTML文件頭部或文件體中的任何地方。在Netscape的Web站點(diǎn)中的許多例子以及其他地方，習(xí)慣上在HTML件的頭部包括Script容器，這也是較好的格式?；谝陨锨度胝Z法，我們可將JavaScript腳本程序嵌入HTML文檔中以實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁的設(shè)計(jì)。




2 JavaScript對象和對象的引用

JavaScript語言是基于對象的（Object-Based），而不是面向?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)用范圍，增加編寫Web文件的功能。[3]




2.1 對象的基本結(jié)構(gòu)

JavaScript中的對象是由屬性(properties)和方法(methods)兩個(gè)基本的元素構(gòu)成的。前者是對象在實(shí)施其所需要行為的過程中，實(shí)現(xiàn)信息的裝載單位，從而與變量相關(guān)聯(lián)；后者是指對象能夠按照設(shè)計(jì)者的意圖而被執(zhí)行，從而與特定的函數(shù)相關(guān)聯(lián)。




2.2 引用對象的途徑

一個(gè)對象要真正地被使用，可采用以下幾種方式獲得：引用JavaScript內(nèi)部對象、由瀏覽器環(huán)境中提供、創(chuàng)建新對象。

這就是說一個(gè)對象在被引用之前，這個(gè)對象必須存在，否則引用將毫無意義，而出現(xiàn)錯(cuò)誤信息。從上面中我們可以看出JavaScript引用對象可通過三種方式獲取。要么創(chuàng)建新的對象，要么利用現(xiàn)存的對象。




2.3 有關(guān)對象操作語句

JavaScript不是純面向?qū)ο蟮恼Z言，它設(shè)有提供面向?qū)ο笳Z言的許多功能，因此JavaScript設(shè)計(jì)者之所以把它稱為“基于對象”而不是面向?qū)ο蟮恼Z言，是因?yàn)樵贘avaScript中提供了幾個(gè)用于操作對象的語句、關(guān)鍵詞及運(yùn)算符。

2.4 對象屬性的引用

對象屬性的引用可由下列三種方式之一實(shí)現(xiàn)：

2.4.1 使用點(diǎn)（.）運(yùn)算符

university.Name=“浙江省”

university.city=“杭州市”

university.Date="1999"

其中university是一個(gè)已經(jīng)存在的對象，Name、City、Date是它的三個(gè)屬性，并通過操作對其賦值。

2.4.2 通過對象的下標(biāo)實(shí)現(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則可以不知其屬性的個(gè)數(shù)后就可以實(shí)現(xiàn)：

Function showmy(object)

for (var prop in this)

docament.write(this[prop]);

2.4.3 通過字符串的形式實(shí)現(xiàn)

university["Name"]=“浙江”

university["City"]=“杭州市”

university["Date"]="1999"




　 2.5 對象的方法的引用 [5]

在JavaScript中對象方法的引用是非常簡單的。

ObjectName.methods()

實(shí)際上methods()=FunctionName方法實(shí)質(zhì)上是一個(gè)函數(shù)。 如引用university對象中的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 利用內(nèi)部對象實(shí)現(xiàn)網(wǎng)頁交互

JavaScript為我們提供了一些非常有用的常用內(nèi)部對象和方法。用戶不需要用腳本即可實(shí)現(xiàn)網(wǎng)頁的交互。[3]




3.1 JavaScript窗口的輸入輸出

在JavaScript中可以非常方便地實(shí)現(xiàn)輸入輸出信息，并與用戶進(jìn)行交互。JavaScript是基于對象的腳本編程語言，那么它的輸入輸出就是通過對象來完成的。其中有關(guān)輸入可通過窗口（Window）對象來完成，而輸出可通過文檔（document）對象的方法來實(shí)現(xiàn)。請看下面例子：在彈出的對話框中輸入你要輸出在網(wǎng)頁中的話，按確定即可在網(wǎng)頁中實(shí)現(xiàn)輸出。

圖1 窗口輸入

圖2 窗口輸出

例子中使用的window.prompt()就是一個(gè)窗口對象的方法，其基本作用是，當(dāng)裝入Web頁面時(shí)在屏幕上顯示一個(gè)具有“確定”和“取消”的對話框，讓你輸入數(shù)據(jù)。document.writle是一個(gè)文檔對象的方法，它的基本功能，是實(shí)現(xiàn)Web頁面的輸出顯示。

3.1.1 窗口對象

該對象包括許多有用的屬性、方法和事件驅(qū)動(dòng)程序，編程人員可以利用這些對象控制瀏覽器窗口顯示的各個(gè)方面，如對話框、框架等。在使用應(yīng)注意以下幾點(diǎn)：

(1）該對象對應(yīng)于HTML文檔中的<Body>和<FrameSet>兩種標(biāo)識；

(2）onload和onunload都是窗口對象屬性；

(3）在JavaScript腳本中可直接引用窗口對象。如：window.alert（"窗口對象輸入方法"）可直接使用以下格式：alert（"窗口對象輸入方法"）

3.1.2 窗口對象的事件驅(qū)動(dòng)

窗口對象主要有裝入Web文檔事件onload和卸載時(shí)onunload事件。用于文檔載入和停止載入時(shí)開始和停止更新文檔。

3.1.3 窗口對象的方法

窗口對象的方法主要用來提供信息或輸入數(shù)據(jù)以及創(chuàng)建一個(gè)新的窗口。

(1）創(chuàng)建一個(gè)新窗口open()：使用window.open（參數(shù)表）方法可以創(chuàng)建一個(gè)新的窗口。其中參數(shù)表提供有窗口的主要特性和文檔及窗口的命名。

(2）具有OK按鈕的對話框 ：alert()方法能創(chuàng)建一個(gè)具有OK按鈕的對話框。

(3）具有OK和Cancel按鈕的對話框：confirm()方法為編程人員提供一個(gè)具有雙按鈕的對話框。

(4）具有輸入信息的對話框：prompt()方法允許用戶在對話框中輸入信息，并可使用默認(rèn)值，其基本格式如下prompt（“提示信息”，默認(rèn)值）。

3.1.4 窗口對象中的屬性

窗口對象中的屬性主要用來對瀏覽器中存在的各種窗口和框架的引用，其主要屬性有以下幾個(gè)：frames 確定文檔中幀的數(shù)目frames（幀）作為實(shí)現(xiàn)一個(gè)窗口的分隔操作，起到非常有用的作用，在使用注意以下幾點(diǎn)：

(1）幀本身已是一類窗口，繼承了窗口對象所有的屬性和方法。

(2）Parent：指明當(dāng)前窗口或幀的父窗口。

(3）defaultstatus：默認(rèn)狀態(tài)，它的值顯示在窗口的狀態(tài)欄中。

(4）status：包含文檔窗口中幀中的當(dāng)前信息。

(5）top：包括的是用以實(shí)現(xiàn)所有的下級窗口的窗口。

(6）window：指的是當(dāng)前窗口

(7）self：引用當(dāng)前窗口。

(8）frames：屬性是通過HTML標(biāo)識<Frames>的順序來引用的，它包含了一個(gè)窗口中的全部幀數(shù)。

3.1.5 輸出流及文檔對象

在JavaScript文檔對象中，提供了用于顯示關(guān)閉、消除、打開HTML頁面的輸出流。

(1）創(chuàng)建新文檔open() 方法 使用document.open()創(chuàng)建一個(gè)新的窗口或在指定的命令窗口內(nèi)打開文檔。由于窗口對象是所加載的父對象，因而我們在調(diào)用它的屬性或方法時(shí),不需要加入Window對象。例用Window. Open() 與Open() 是一樣的。

打開一個(gè)窗口的基本格式：Window .open("URL","窗口名字","窗口屬性")，window屬性參數(shù)是由字符串組成，由逗號分隔，它指明了有關(guān)新創(chuàng)建窗口的屬性。

表1 window屬性參數(shù)

參 數(shù) 設(shè)定值 含 義

toolbar yes/no 建立或不建立標(biāo)準(zhǔn)工具條

location yes/no 建立或不建立位置輸入字段

directions yes/no 建立或不建立標(biāo)準(zhǔn)目錄按鈕

status yes/no 建立或不建立狀態(tài)條

menubar yes/no 建立或不建立菜單條

scrollbar yes/no 建立或不建立滾動(dòng)條

revisable yes/no 能否改變窗口大小

width yes/no 確定窗口的寬度

Height yes/no 確定窗口的高度。

在使用Open() 方法時(shí)，需要注意以下點(diǎn)。

1）通常瀏覽器窗口中，總有一個(gè)文檔是打開的，因而不需要為輸出建立一個(gè)新文檔。

2）在完成對Web文檔的寫操作后，要使用或調(diào)用close() 方法來實(shí)現(xiàn)對輸出流的關(guān)閉。

3）在使用open() 來打開一個(gè)新流時(shí)，可為文檔指定一個(gè)有效的文檔類型，有效文檔類型包括text/HTML、text/gif、text/xim、text/plugin等。

(2）write()、writeln()輸出顯示 該方法主要用來實(shí)現(xiàn)在Web頁面上顯示輸出信息。在實(shí)際使用中，需注意以下幾點(diǎn)：

1）writeln()與write()唯一不同之處在于在末尾加了一個(gè)換行符。

2）為了正常顯示其輸出信息，必須指明<pre> </Pre>標(biāo)記，使之告訴編輯器。

3）輸出的文檔類型，可以由瀏覽器中的有效的合法文本類型所確定。

(3) 關(guān)閉文檔流close() 在實(shí)現(xiàn)多個(gè)文檔對象中，必須使用close()來關(guān)閉一個(gè)對象后，才能打開另一個(gè)文檔對象。

(4）清除文檔內(nèi)容clear() 使用該方法可清除已經(jīng)打開文檔的內(nèi)容。

3.1.6 范例

下列程序演示了你進(jìn)入主頁所停留的時(shí)間：該例子中通過時(shí)間對象來調(diào)用系統(tǒng)時(shí)間進(jìn)行計(jì)時(shí)并輸出。結(jié)果如下圖3：

圖3 計(jì)算停留時(shí)間




3.2 用窗體對象（Form）實(shí)現(xiàn)交互

3.2.1 窗體基礎(chǔ)知識

窗體對象使設(shè)計(jì)人員能用窗體中不同的元素與客戶機(jī)用戶相交互，而用不著在之前首先進(jìn)行數(shù)據(jù)輸入，就可以實(shí)現(xiàn)動(dòng)態(tài)改變Web文檔的行為。[3]

(1）什么是窗體對象 窗體（Form）：它構(gòu)成了Web頁面的基本元素。通常一個(gè)Web頁面有一個(gè)窗體或幾個(gè)窗體，使用Forms[]數(shù)組來實(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]中共有三個(gè)基本元素，而Forms[1]中只有兩個(gè)元素。窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關(guān)的HTML代碼：

<Form>

Name ="表的名稱"

Target ="指定信息的提交窗口"

action ="接收窗體程序?qū)?yīng)的URL"

Method =信息數(shù)據(jù)傳送方式(get/post)

ecotype ="窗體編碼方式"

[onsubmit ="JavaScript代碼"]>

</Form>

(2）窗體對象的方法 窗體對象的方法只有一個(gè)--submit()方法，該方法主要功用就是實(shí)現(xiàn)窗體信息的提交。如提交Mytest窗體,則使用下列格式：document.mytest.submit()

(3）窗體對象的屬性 窗體對象中的屬性主要包括以下：Elements name action target encoding method.

除Elements外，其它幾個(gè)均反映了窗體中標(biāo)識中相應(yīng)屬性的狀態(tài)，這通常是單個(gè)窗體標(biāo)識；而elements常常是多個(gè)窗體元素值的數(shù)組，例：elements[0].Mytable.elements[1]

(4）訪問窗體對象 在JavaScript中訪問窗體對象可由兩種方法實(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.forms[0]

document.forms[1]

document.forms[2]...

(5）引用窗體的先決條件 在JavaScript中要對窗體引用的條件是：必須先在頁面中用標(biāo)識創(chuàng)建窗體，并將定義窗體部分放在引用之前。

3.2.2 窗體中的基本元素

窗體中的基本元素由按鈕、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。在JavaScript中要訪問這些基本元素，必須通過對應(yīng)特定的窗體元素的數(shù)組下標(biāo)或窗體元素名來實(shí)現(xiàn)。每一個(gè)元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下：

formName.elements[].methadName (窗體名.元素名或數(shù)組.方法)

formName.elemaent[].propertyName(窗體名.元素名或數(shù)組.屬性)

下面分別介紹：

(1）Text單行單列輸入元素

功能：對Text標(biāo)識中的元素實(shí)施有效的控制。

1）基本屬性

name：設(shè)定提交信息時(shí)的信息名稱，對應(yīng)于HTML文檔中的Name。

value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。

defaultvalue：包括Text元素的默認(rèn)值

2）基本方法

blur()：將當(dāng)前焦點(diǎn)移到后臺。

select()：加亮文字。

3）主要事件

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)生該文件。

例：…

<Form name="test">

input type="text" name="test" value="this is a JavaScript" >

</form>

…

<script language ="JavaScript">

document.mytest.value="that is a JavaScript";

document.mytest.select();

document.mytest.blur();

</script>

（2）textarea多行多列輸入元素

功能：實(shí)施對Textarea中的元素進(jìn)行控制。

1）基本屬性

name：設(shè)定提交信息時(shí)的信息名稱，對應(yīng)HTML文檔Textarea的Name。

Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。

Default value：元素的默認(rèn)值。

2）方法

blur()：將輸入焦點(diǎn)失去

select()：將文字加亮后

3）事件

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í)施對滾動(dòng)選擇元素的控制。

1）屬性

name：設(shè)定提交信息時(shí)的信息名稱，對應(yīng)文檔select中的name。

length：對應(yīng)文檔select中的length

options：組成多個(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)　

2）事件

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í)施對Button按鈕的控制。

1）屬性

name：設(shè)定提交信息時(shí)的信息名稱，對應(yīng)文檔中button的Name。

value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。

2）方法

click()該方法類似于一個(gè)按下的按鈕。

3）事件

onclick當(dāng)單擊button按鈕時(shí)，產(chǎn)生該事件。例 ：

<Form name="test">

<input type="button" name="testcall" onclick=tmyest()>

</form>

…

<script language="javascirpt">

document.elements[0].value="mytest"; //通過元素訪問

或

document.testcallvalue="mytest"; // 通過名字訪問

</script>

…

(5）checkbox檢查框

功能：實(shí)施對一個(gè)具有復(fù)選框中元素的控制。

1）屬性

name：設(shè)定提交信息時(shí)的信息名稱。

value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。

checked：該屬性指明框的狀態(tài)true/false.

defauitchecked：默認(rèn)狀態(tài)

2）方法

click()該方法使得框的某一個(gè)項(xiàng)被選中。

3）事件

onclick:當(dāng)框的選被選中時(shí)，產(chǎn)生該事件。 　

(6） radio無線按鈕 功能：實(shí)施對一個(gè)具單選功能的無線按鈕控制。

1）屬性

nam：設(shè)定提交信息時(shí)的信息名稱，對應(yīng)HTML文檔中的radio的name相同

value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息，對應(yīng)HTML文檔中的radio的name。

length：單選按鈕中的按鈕數(shù)目。

defalechecked：默認(rèn)按鈕。

checked：指明選中還是沒有選中。

index：選中的按鈕的位置。

2）方法

chick():選定一個(gè)按鈕。

3）事件

onclick:單擊按鈕時(shí)，產(chǎn)生該事件。

(7) hidden:隱藏

功能：實(shí)施對一個(gè)具有不顯示文字并能輸入字符的區(qū)域元素的控制。

1）屬性

name：設(shè)定提交信息時(shí)的信息名稱，對應(yīng)HTML文檔的hidden中的Name。

value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息，對應(yīng)HTML文檔hidden中的value。defaleitvalue：默認(rèn)值

(8）Password口令

功能：實(shí)施對具有口令輸入的元素的控制。

1）屬性

name：設(shè)定提交信息時(shí)的信息名稱，對應(yīng)HTML文檔中password中的name。

value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中value的信息，對應(yīng)HTML文檔中password中的value。

defaultvalu：默認(rèn)值

2）方法

select():加亮輸入口令域。

blur()：使之丟失password輸入焦點(diǎn)。

focus()：獲得password輸入焦點(diǎn)。

(9）submit提交元素

功能：實(shí)施對一個(gè)具有提交功能按鈕的控制。

1）屬性

name:設(shè)定提交信息時(shí)的信息名稱，對應(yīng)HTML文檔中submit。

value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息，對應(yīng)HTML文檔中value。

2）方法

click()相當(dāng)于按下submit按鈕。

3）事件

onclick()當(dāng)按下該按鈕時(shí)，產(chǎn)生該事件。

3.2.3 范例

這個(gè)例子我們演示通過點(diǎn)擊一個(gè)按鈕（red）來改變窗口顏色，點(diǎn)擊“調(diào)用動(dòng)態(tài)按鈕文檔”調(diào)用一個(gè)動(dòng)態(tài)按鈕文檔。效果如圖4圖5所示：

圖4 原始背景

圖5 改變后背景

3.3 實(shí)現(xiàn)框架的交互

3.3.1 什么是框架

框架frames最主要功用是"分割"視窗，使每個(gè)"小視窗"能顯示不同的HTML文件，不同框架之間可以互動(dòng)(interact)，這就是說不同框架之間可以交換信息與資料。例如：假設(shè)您開了兩個(gè)frames，第一個(gè)frame可顯示書的目錄，第二個(gè)frame則顯示章節(jié)的具體內(nèi)容。[3]

框架可以將屏幕分割成不同的區(qū)域，每個(gè)區(qū)域有自己的URL，通過frames[]數(shù)組對象來實(shí)現(xiàn)不同框架的訪問。實(shí)際上框架對象本身也是一類窗口，它繼承了窗口對象的所有特征，并擁有所有的屬性和方法。下面我們先看一下框架的例子。如下圖3：




圖6 框架劃分




用HTML標(biāo)識將屏幕分成三個(gè)框架。先將窗口分成以兩行為單位的窗口，之后再按需要分成兩個(gè)窗口。并在相應(yīng)的框架中放入自己的HTML文檔。通過[frameset]告訴瀏覽器您要設(shè)置幾個(gè)框架；rows這項(xiàng)參數(shù)告訴瀏覽器您想將視窗分割成幾列；而cols這項(xiàng)參數(shù)是告訴瀏覽器您想將視窗分割成幾行?？梢杂煤芏嘟M的 <frameset...> tags 將視窗分割得更復(fù)雜。也可以給每個(gè)frame一個(gè)"名字" (name)，frame的名字在JavaScript語法中的地位非常重要。還可以用<src>告訴瀏覽器您要載入哪一個(gè) HTML文件。

3.3.2 如何訪問框架

在前面我們介紹過使用document.forms[]實(shí)現(xiàn)單一窗體中不同元素的訪問。而要實(shí)現(xiàn)框架中多窗體的不同元素的訪問，則必須使用window對象中的frames屬性。frames屬性同樣也是一個(gè)數(shù)組，他在父框架集中為每一個(gè)子框架設(shè)有一項(xiàng)。

通過下標(biāo)實(shí)現(xiàn)不同框架的訪問：

parent.frames[Index1].docuement.forms[index2]

通過parent.frames.length確定窗口中窗體的數(shù)目。

除了使用數(shù)組下標(biāo)來訪問窗體外還可以使用框架名和窗體名來實(shí)現(xiàn)各元素的訪問：

parent.framesName.decument.formNames.elementName.(m/p)

3.3.3 范例

下面我們通過一個(gè)具體的實(shí)例, 來說明利用JavaScript腳本在WEB中實(shí)現(xiàn)更為復(fù)雜的信息交互。該例子是在一個(gè)多窗口中實(shí)現(xiàn)窗體信息的動(dòng)態(tài)交互，在程序中首先在瀏覽器窗口中制作三個(gè)用于窗體交互的窗口，每個(gè)窗體窗口實(shí)現(xiàn)不同信息的動(dòng)態(tài)交互。

主調(diào)文檔：首先將窗口劃分為具有兩行的窗體,爾后再將第二行的窗體劃分為具有兩列的窗體；

1.html 為顯示標(biāo)題文檔；

2.html為第二框架文檔其中需要注意的是:通過JavaScript腳本將所示的“浙江”和“浙江”分別改為“杭州”和“杭州”；

3.html 為第三框架文檔。結(jié)果如下圖7：




圖7 框架交互

4 JavaScript與網(wǎng)頁的結(jié)合設(shè)計(jì)和應(yīng)用

網(wǎng)頁的設(shè)計(jì)者可以通過JavaScript控制HTML文檔的各種對象：窗口、幀、表格、按鈕、圖像、列表框、嵌入的插件和小程序等直接與這些對象交互。這里我將在自己設(shè)計(jì)的日劇“東京愛情故事”的主題小網(wǎng)站中加入一些實(shí)用的JavaScript程序以實(shí)現(xiàn)簡單的交互，令網(wǎng)頁更加生動(dòng)。[6]




4.1 在網(wǎng)頁中自動(dòng)顯示更新時(shí)間

使用document.write(document.lastModified)語句讓網(wǎng)頁自動(dòng)顯示更新時(shí)間，讓瀏覽者知道網(wǎng)站的最新更新情況。如下圖8，在設(shè)計(jì)者修改網(wǎng)頁并發(fā)布后，網(wǎng)頁將自動(dòng)顯示修改時(shí)間。[7]




圖8 網(wǎng)頁更新時(shí)間




4.2 點(diǎn)擊彈出菜單

使用窗口的一些屬性和方法函數(shù)來實(shí)現(xiàn)目錄的隱藏，讓網(wǎng)頁看起來更清晰明了，非常的實(shí)用。如下點(diǎn)擊圖9中的目錄即可彈出如圖10中的目錄菜單。

圖9 目錄

圖10 詳細(xì)目錄




4.3 使用行為的交互

在網(wǎng)頁可視編輯軟件FrontPage或Dream weaver中都鑲?cè)肓薐avaScript的行為面板，通過給選定的對象添加行為，即可輕易實(shí)現(xiàn)JavaScript的一些交互功能。[6]

4.3.1 播放歌曲

使用播放聲音行為如圖11，點(diǎn)擊文字鏈接即可聽到播放的歌曲




圖11 點(diǎn)擊播放音樂

4.3.2 圖片交換

使用交換圖像行為，當(dāng)鼠標(biāo)停留在圖12的圖片上時(shí)，圖片將轉(zhuǎn)換成圖13的圖片。

圖12 原始圖片

圖13 交換后圖片




4.4 在標(biāo)題欄顯示當(dāng)前時(shí)間

這里我們用document.title和today對象來鏈接系統(tǒng)時(shí)間并顯示在標(biāo)題欄上，如下圖14瀏覽者打開網(wǎng)頁即可看到標(biāo)題欄上顯示的當(dāng)天時(shí)間。




圖14 標(biāo)題欄顯示時(shí)間

4.5 為網(wǎng)頁設(shè)置密碼

在一些你想要限制用戶的網(wǎng)頁或資料里使用。利用while循環(huán)實(shí)現(xiàn)，密碼錯(cuò)誤時(shí)的重新輸入。如圖15至17所示，輸入密碼正確則顯示“歡迎光臨！”點(diǎn)確定按鈕后，進(jìn)入網(wǎng)頁。否則重新輸入密碼，直到密碼正確為止。




圖15 輸入密碼

圖16 密碼錯(cuò)誤

圖17 密碼正確




4.6 實(shí)現(xiàn)問答測試

這里利用添加選擇按鈕和自定義函數(shù)Score()來實(shí)現(xiàn)問答的效果。在網(wǎng)頁中添加這種小測試將增加瀏覽者參與的積極性。如下回答圖18的問題，可以得出圖19的答案。

圖18 選擇測試

圖19 測試結(jié)果

4.7 小游戲

當(dāng)然，還可以利用JavaScript編寫有趣的小游戲加入到網(wǎng)頁中，這些小小的JavaScript交互游戲?qū)⒁馂g覽者極大的興趣，增加網(wǎng)頁的訪問率。

圖20 小游戲

4.7.1 測試反應(yīng)能力

該游戲中玩家按住并拖動(dòng)紅色格子，避免紅色格子撞到藍(lán)色格子或邊框，否則游戲結(jié)束并輸出游戲總時(shí)間。

圖21 測試反映能力

圖22 測試反映結(jié)果




4.7.2 動(dòng)腦亮燈

玩家用鼠標(biāo)點(diǎn)擊方框，小方框四周及本身變成黃色。如燈已經(jīng)亮，即小方框已經(jīng)為黃色，則點(diǎn)擊后，燈滅。開動(dòng)腦筋，點(diǎn)擊亮燈，使全部的小方框都變成黃色。

圖23 動(dòng)腦亮燈

圖24 點(diǎn)擊亮燈

4.7.3 數(shù)學(xué)計(jì)算

這里調(diào)用數(shù)學(xué)函數(shù)，實(shí)現(xiàn)地一個(gè)隨機(jī)輸出，加、減、乘、除表達(dá)式的功能，玩者必須在指定時(shí)間內(nèi)得出并輸入表達(dá)式的計(jì)算結(jié)果。

圖25 數(shù)學(xué)計(jì)算游戲

圖26 數(shù)學(xué)計(jì)算結(jié)果

4.7.4 方框游戲

這是一個(gè)雙人游戲，玩家依次點(diǎn)擊邊框圍方框，方框分紅藍(lán)兩色，藍(lán)色先行，游戲最后哪個(gè)顏色圍的方框最多，則那方勝利。

圖27 方框游戲

圖27 點(diǎn)擊圍框




結(jié) 論

經(jīng)過兩個(gè)多月的設(shè)計(jì)和撰寫，畢業(yè)設(shè)計(jì)終于完成了。

設(shè)計(jì)初期，我查閱了許多有關(guān)網(wǎng)頁編程技術(shù)及JavaScript語言的資料。在這些相關(guān)資料中我發(fā)現(xiàn)，許多的書籍及論文都只是單方面的介紹了JavaScript的基礎(chǔ)知識和舉單獨(dú)的實(shí)例，并沒有實(shí)現(xiàn)與網(wǎng)站網(wǎng)頁的結(jié)合設(shè)計(jì)。而JavaScript是為了更好的實(shí)現(xiàn)網(wǎng)頁交互而產(chǎn)生的腳本語言，沒有和網(wǎng)頁的實(shí)際結(jié)合，一切猶如紙上談兵。

所以，本論文從JavaScript的語言基礎(chǔ)到與網(wǎng)頁結(jié)合的設(shè)計(jì)應(yīng)用，精而簡的介紹了JavaScript常用的內(nèi)部對象，詳細(xì)講述了如何應(yīng)用JavaScript實(shí)現(xiàn)網(wǎng)頁的交互。并通過設(shè)計(jì)的網(wǎng)站實(shí)例具體闡述了該怎樣把所學(xué)的JavaScript知識應(yīng)用到網(wǎng)站網(wǎng)頁的設(shè)計(jì)中以實(shí)現(xiàn)如網(wǎng)頁加密、多媒體播放、問答測試及當(dāng)前時(shí)間顯示等與窗口、表格、按鈕、圖像及其它對像的交互功能，讓網(wǎng)頁更加的生動(dòng)、有趣。

在此之前，編程本來就是我不擅長的方面。所以，在學(xué)習(xí)JavaScript腳本語言及完成編程設(shè)計(jì)的過程中遇到了不少困難。有時(shí)只是一個(gè)小小的循環(huán)或是一個(gè)小括號位置不對就可以讓我反復(fù)修改和測試十幾次甚至更多。即便如此，我還是很高興能完成這次畢業(yè)設(shè)計(jì)，因?yàn)樵诋厴I(yè)設(shè)計(jì)的過程中，我學(xué)到了不少與網(wǎng)頁制作相關(guān)的知識，也增加了自身網(wǎng)頁制作的實(shí)戰(zhàn)經(jīng)驗(yàn)。

JavaScript是一種短小精悍的網(wǎng)頁腳本語言。它用簡單的語言的實(shí)現(xiàn)了網(wǎng)頁的交互性，同時(shí)擴(kuò)展了HTML語言的一些功能，使得信息與用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是一種實(shí)時(shí)的、動(dòng)態(tài)的、可交互的表達(dá)方式。不斷深入的探討和掌握J(rèn)avaScript腳本語言將給網(wǎng)絡(luò)編程人員和網(wǎng)頁瀏覽者帶來更大的方便。

參 考 文 獻(xiàn)




[1] 蔣民. JavaScript實(shí)例. 技巧與應(yīng)用[M]. 清華大學(xué)出版社. 2003.16-18.

[2] 李開榮. Web設(shè)計(jì)技術(shù)[M]. 高等教育出版社. 2004.34-37.

[3] E書免費(fèi)電子圖書. 網(wǎng)絡(luò)編程基礎(chǔ)篇之——JavaScript[M]. 2001.1-7.

[4] 何克石. 基于JavaScript的動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)[J] 現(xiàn)代計(jì)算機(jī), 2000，3: 34-36.

[5] 鐘蘊(yùn)玉等. 用JavaScript實(shí)現(xiàn)Web頁交互性[J] 杭州師范大學(xué)自然科學(xué)學(xué)報(bào), 2002，3: 42-46.

[6] 胡仁喜等. 最新網(wǎng)頁制作實(shí)例教程——FrontPage 2003[M]. 機(jī)械工業(yè)出版社. 2005.1-309.

[7] 邵麗萍等. 網(wǎng)頁編程技術(shù)[M]. 清華大學(xué)出版社. 2002.102-109.

更多原創(chuàng)論文下載推薦：