版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第四篇提高篇
第11章網(wǎng)頁特效設(shè)計(jì)本章簡(jiǎn)介：本章以JavaScript網(wǎng)頁特效制作
為例，首先介紹了JavaScript的特點(diǎn)、功能、基本語法、對(duì)象和事件等必備的基礎(chǔ)知識(shí)，然后介紹了三種在網(wǎng)頁中使用JavaScript的方法，最后列舉了幾個(gè)實(shí)例。目錄JavaScript概述在網(wǎng)頁中使用JavaScript的方法JavaScript的基本語法JavaScript的對(duì)象和事件JavaScript應(yīng)用實(shí)例本章小結(jié)習(xí)題11.1
JavaScript概述網(wǎng)頁特效是用程序代碼在網(wǎng)頁中實(shí)現(xiàn)特殊效果或者特殊功能的一種技術(shù)，它為網(wǎng)頁活躍了氣氛，增加了網(wǎng)站的親和力。目前在網(wǎng)頁設(shè)計(jì)中常用的網(wǎng)頁特效有CSS特效、
JavaScript特效、Flash特效和HTML特效等，但是相比較而言，JavaScript特效的功能更加強(qiáng)大，所以下面就以
JavaScript為例介紹網(wǎng)頁特效的制作方法。JavaScript是一種能讓網(wǎng)頁更加生動(dòng)活潑的描述語言，也是目前網(wǎng)頁設(shè)計(jì)中最容易學(xué)又最方便的語言。利用
JavaScript可以在不涉及服務(wù)器的情況下直接通過HTML界面向用戶收集一定的數(shù)據(jù)，可以根據(jù)用戶的輸入立即更新頁面上的組件，可以為圖形增添交互性等?？梢哉f，掌握
JavaScript腳本語言編程方法就是獲得一項(xiàng)重要的網(wǎng)頁設(shè)計(jì)技能。11.1.1
JavaScript的特點(diǎn)JavaScript是一種被嵌入HTML網(wǎng)頁之中的基于對(duì)象和事件驅(qū)動(dòng)編程的腳本語言，它彌補(bǔ)了HTML語言交互功能差、控制呆板單調(diào)等缺陷。 腳本是一段用來完成某些特殊功能的程序，腳本程序可分為服務(wù)器端腳本（如：ASP、JSP等）和客戶端腳本（如：JavaScript等）兩類。客戶端腳本程序隨網(wǎng)頁同時(shí)下載到客戶機(jī)上，網(wǎng)頁對(duì)用戶數(shù)據(jù)的驗(yàn)證和對(duì)用戶的響應(yīng)，都無需通過服務(wù)器進(jìn)行通信，從而降低了網(wǎng)絡(luò)數(shù)據(jù)的傳輸和負(fù)荷。JavaScript是Netscape公司于1995年11月醞釀開發(fā)的，最早叫做LiveScript,它結(jié)構(gòu)簡(jiǎn)單，使用方便，對(duì)用戶的知識(shí)水平要求不高，相比Sun公司的Java來說要易學(xué)易懂。Java是一種適合于分布式計(jì)算的新型面向?qū)ο蟪绦蛟O(shè)計(jì)語言，功能強(qiáng)大，但十分復(fù)雜，更適合有一定程序設(shè)計(jì)經(jīng)驗(yàn)的人使用。JavaScript的整個(gè)語法以Java為基礎(chǔ)，但比Java簡(jiǎn)單。1995年12月，兩家公司達(dá)成協(xié)議將
LiveScript正式更名為JavaScript。目前，IE等主流瀏覽器均支持JavaScript。
JavaScript的特點(diǎn)如下：（1）JavaScript是一種腳本編程語言，采用小程序段的方式實(shí)現(xiàn)編程。它是由
一些ASCII字符構(gòu)成的，可以直接用記事本等文本編輯器編寫，事先也不用編譯，只需要利用解釋器就可以解釋執(zhí)行。同時(shí)它也是一種解釋性語言，提供了一個(gè)簡(jiǎn)易的程序開發(fā)過程，方便用戶的使用操作。JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)的語言。它能通過操作一些已有的對(duì)象而引導(dǎo)程序運(yùn)行，許多功能來源于對(duì)象之間的相互作用。它對(duì)用戶的響應(yīng)，是采用事件驅(qū)動(dòng)的方式進(jìn)行的。所以也可以把JavaScript看做是一種面向?qū)ο蟮恼Z言。JavaScript的簡(jiǎn)單性。它的簡(jiǎn)單性一方面體現(xiàn)在它是一種基于Java的基本語句和控制流之上的簡(jiǎn)單而緊湊的設(shè)計(jì)，這對(duì)于學(xué)習(xí)Java是一個(gè)非常好的過渡，另一方面是它的所有變量不使用嚴(yán)格的數(shù)據(jù)類型。JavaScript的安全性。它同Java一樣是一種非常安全的語言，它不允許訪問本地硬盤，并且不允許把數(shù)據(jù)存入到服務(wù)器上，還不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只允許通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)丟失。JavaScript的動(dòng)態(tài)性。它的動(dòng)態(tài)性體現(xiàn)在它可以直接對(duì)用戶或客戶的輸入操作做出響應(yīng)，而不必經(jīng)過Web服務(wù)器或Web服務(wù)器程序。JavaScript具有跨平臺(tái)性。JavaScript同Java一樣是與操作環(huán)境無關(guān)的，它只依賴于瀏覽器，只要有運(yùn)行支持JavaScript的瀏覽器就能正確解釋執(zhí)行。11.1.2
JavaScript的功能JavaScript的功能主要體現(xiàn)在以下幾個(gè)方面：控制文檔的外觀和內(nèi)容：通過JavaScript程序，可以控制Web頁面的外觀，也能評(píng)估用戶輸入數(shù)據(jù)的有效性，而且這些操作都無需與服務(wù)器進(jìn)行交互，從而減輕了服務(wù)器的負(fù)擔(dān)?？刂茷g覽器的行為：JavaScript程序也能檢測(cè)用戶計(jì)算機(jī)是否安裝了某些插件，并在需要時(shí)能夠從相應(yīng)的站點(diǎn)上下載所需的插件。與用戶交互:JavaScript程序可用于檢測(cè)用戶的活動(dòng)，并對(duì)用戶操作作出反應(yīng)，比如當(dāng)光標(biāo)經(jīng)過某個(gè)鏈接時(shí)，該鏈接變成另一種顏色，就是對(duì)用戶操作的一種反應(yīng)形式。使用Cookie讀寫客戶端的狀態(tài):JavaScript還能寫入和讀取Cookie值，并根據(jù)具體的Cookie值動(dòng)態(tài)的創(chuàng)建HTML頁面。JavaScript提供了字符串處理函數(shù)和正則表達(dá)式支持，利用它們，可以檢查電子郵件、網(wǎng)絡(luò)地址、信用卡號(hào)碼、手機(jī)號(hào)碼、身體證號(hào)碼等的有效性。JavaScript是一種解釋性程序，它提供了變量、數(shù)據(jù)類型、條件語句、循環(huán)語句、函數(shù)、對(duì)象等一組基本的語言構(gòu)件塊。通過這些構(gòu)件塊，能完成數(shù)學(xué)計(jì)算、操作日期和時(shí)間、分析字符串、操作數(shù)組和對(duì)象等功能。當(dāng)然JavaScript也不是萬能的，它受限于與瀏覽器和HTML相關(guān)的任務(wù)，并在受限制的上下文環(huán)境中使用，因此，JavaScript不具備獨(dú)立語言（如C++、JAVA、VB）所擁有的一些必須特性。JavaScript不具備以下特性：除了能夠格式化和顯示HTML文檔之外，JavaScript不具備有任何的圖像處理能力。出于安全方面的原因，客戶端的JavaScript不允許讀寫文件。除了能夠讓瀏覽器下載任何URL指定的內(nèi)容外，JavaScript不支持任何網(wǎng)絡(luò)訪問功能。JavaScript不具備任何多線程能力。11.2
在網(wǎng)頁中使用JavaScript的方法在網(wǎng)頁中使用JavaScript的方法主要有如下三種：1.將腳本代碼直接放在<script></script>標(biāo)記之間
在HTML文檔中，可以直接加入JavaScript的腳本代碼，使之成為文檔的一部分。其格式如下：<script
language="JavaScript">JavaScript
語言代碼;…</script>因?yàn)槭褂玫哪_步本語言是JavaScript，所以屬性language要給定“JavaScript”值。多條JavaScript語句定義放在<script></script>之間，<script></script>的位置是不固定的，可以出現(xiàn)在<head></head>或<body></body>中的任何地方，但通常將它加于<head></head>標(biāo)記之間。這種直接在HTML中加入JavaScript的方法適合于小型網(wǎng)站的網(wǎng)頁設(shè)計(jì)。但如果要將某段JavaScript代碼應(yīng)用到另一個(gè)網(wǎng)頁中時(shí)，就必須在該網(wǎng)頁中再次重寫或復(fù)制，因此這種方法不利于代碼的重復(fù)利用和后期維護(hù)。2.將JavaScript代碼放在一個(gè)單獨(dú)的文件中為了便于JavaScript代碼的重復(fù)利用，可以將需要重復(fù)利用的代碼保存在擴(kuò)展名為.js的文件中，若多個(gè)HTML文件需要引用該代碼，只需在HTML文件中將該.js文件引應(yīng)即可，引應(yīng)時(shí)使用script標(biāo)記的src屬性指定該外部腳本文件的URL路徑即可。其格式如下：<head>…<script
type="text/javascript"
src="腳本文件名.js"></script>…</head>屬性type="text/javascript"指出了文件的類型是JavaScript，而src屬性則定義欲引用的外部腳本文件（.js）的URL。通過與外部腳本文件相鏈接，瀏覽器只使用外部文件的腳本，同時(shí)忽略任何位于<script></script>之間的腳本。腳本文件的編輯也很簡(jiǎn)單，任何文本編輯器均可進(jìn)行編輯，文件內(nèi)容是腳本，不包含HTML的標(biāo)記。3.將腳本代碼作為屬性值為了響應(yīng)輸入的事件，可以在HTML表單的input標(biāo)記內(nèi)添加腳本。例如，對(duì)于Button表單元素，可以設(shè)置一個(gè)新的屬性onclick，而onclick的屬性值就是一段JavaScript程序代碼，當(dāng)單擊這個(gè)按鈕后，onclick屬性值中的
JavaScript代碼就會(huì)被瀏覽器解釋執(zhí)行。如下所示：<input
type=button
value=測(cè)試腳本onclick="alert(new
Date());">另外，超鏈接標(biāo)記<a>的href屬性值除了可以使用http和mailto等協(xié)議外，還可以使用JavaScript協(xié)議，如下所示：<a
href="JavaScript:alert(new
Date());">JavaScript協(xié)議</a>當(dāng)單擊這個(gè)超鏈接時(shí)，瀏覽器會(huì)執(zhí)行JavaScript：后面的腳本代碼。11.3.1常量整形常量整型常量可以使用十六進(jìn)制、八進(jìn)制和十進(jìn)制表示。十六進(jìn)制以0x或0X開頭，如：0x54af。八進(jìn)制以0開頭，如076。十進(jìn)制的第一位不能是0，如
154。實(shí)型常量由整數(shù)部分和小數(shù)部分組成，也可以用指數(shù)形式表示。如：-1.21和4e3等。邏輯常量只有兩種狀態(tài)，true和false。JavaScript表示邏輯常量只能用true或false，不能用1或0。字符串型常量使用單引號(hào)（‘’）或雙引號(hào)（“”）括起來的一個(gè)或幾個(gè)字符。如“this
is
a
good
idea”、‘a(chǎn)bc’、“a”等。一個(gè)字符串中也可以不包含任何字符，其形式為“”,表示一個(gè)空串?？罩悼罩祅ull表示什么也沒有。如要引用一個(gè)沒有定義的變量，則會(huì)返回一個(gè)null值。11.3
JavaScript的基本語法6.轉(zhuǎn)義字符JavaScript提供了如表11-1所示的八種轉(zhuǎn)義字符，這些字符都以反斜杠（\）開始，當(dāng)JavaScript的解釋器遇到反斜杠時(shí)，會(huì)將其識(shí)別為該轉(zhuǎn)義字符所代表的操作意圖。表11-1常用的轉(zhuǎn)義字符字符
意義
\b后退一格\f換頁\n換行\(zhòng)r回車\t制表\’單引號(hào)\”雙引號(hào)\\反斜杠11.3.2變量變量的主要作用是存放程序運(yùn)行過程中的臨時(shí)信息。對(duì)于變量必須了解變量的命名、變量的類型、變量的聲明以及變量的作用域。變量的命名變量名是由字母、數(shù)字、下劃線和美元符號(hào)（$）組成的一個(gè)字符串。但不能以數(shù)字開頭，不能是JavaScript中的關(guān)鍵字。需要提醒的是：聲明的變量名是區(qū)分大小寫的。變量的類型JavaScript中采用弱類型的變量形式，因而聲明一個(gè)變量時(shí)不必指定變量的類型，而是在賦值時(shí)根據(jù)數(shù)據(jù)的類型來確定變量的類型。JavaScript中的變量也可以不需要提前做聲明而直接使用，但是建議養(yǎng)成在使用變量之前先聲明的好習(xí)慣。變量的聲明若要對(duì)變量做聲明，可以用var關(guān)鍵字，如：var
name_x;聲明了一個(gè)名字是name_x的變量。11.3.3運(yùn)算符1.算術(shù)運(yùn)算符JavaScript中的算術(shù)運(yùn)算符如表11-2所示。表11-2算術(shù)運(yùn)算符及其含義運(yùn)算符含義+將兩數(shù)相加-將兩數(shù)相減*將兩數(shù)相乘\將兩數(shù)相除%余運(yùn)算符，將兩數(shù)相除后取余數(shù)++遞增運(yùn)算符，將數(shù)值加1--遞減運(yùn)算符，將數(shù)值減1-負(fù)號(hào)運(yùn)算符，取該數(shù)的負(fù)數(shù)2.字符串運(yùn)算符將兩個(gè)字符串結(jié)合起來的運(yùn)算符，JavaScript中的字符串運(yùn)算符如表11-3所示。表11-3字符串運(yùn)算符及其含義運(yùn)算符含義x+y將字符串x與字符串y合并，即首尾相連x+=y將字符串x與字符串y合并后的字符串賦給x3.比較運(yùn)算符比較運(yùn)算符的運(yùn)算過程是首先對(duì)其操作數(shù)進(jìn)行比較，再返回一個(gè)true或false的值。JavaScript中的字符串運(yùn)算符如表11-4所示。表11-4比較運(yùn)算符及其含義運(yùn)算符含義==如果兩操作數(shù)相等，返回true!=如果兩操作數(shù)不等，返回true===如果兩操作數(shù)相等且數(shù)據(jù)類型相同，返回true!==如果兩操作數(shù)不等且數(shù)據(jù)類型不同，返回true<如果左邊的操作數(shù)小于右邊的操作數(shù)，返回true<=如果左邊的操作數(shù)小于或等于右邊的操作數(shù)，返回true>如果左邊的操作數(shù)大于右邊的操作數(shù)，返回true>=如果左邊的操作數(shù)大于或等于右邊的操作數(shù)，返回true注意：在進(jìn)行比較運(yùn)算時(shí)，會(huì)遇到不同數(shù)據(jù)類型的數(shù)據(jù)參與運(yùn)算，此時(shí)數(shù)據(jù)類型的轉(zhuǎn)換是由JavaScript自動(dòng)進(jìn)行的。4.布爾運(yùn)算符布爾運(yùn)算也稱為邏輯運(yùn)算，運(yùn)算的結(jié)果仍然是邏輯值。JavaScript中的布爾運(yùn)算符如表11-5所示。表11-5布爾運(yùn)算符及其含義運(yùn)算符含義
a&&b若a,b都是true，則結(jié)果為truea||b若a,b中任意一個(gè)是true，則結(jié)果為true!a若a
是true，則結(jié)果為false11.3.4
表達(dá)式在定義完變量后，就可以對(duì)它們進(jìn)行賦值或運(yùn)算了，這些過程通常是通過表達(dá)式來完成的，也就是說表達(dá)式是變量、常量、布爾值及運(yùn)算符的有機(jī)集合。JavaScript中的表達(dá)式有算術(shù)表達(dá)式、字符表達(dá)式、比較表達(dá)式和布爾表達(dá)式等。11.3.5
程序控制流語句在任何程序設(shè)計(jì)語言中，程序控制流語句都是必需的，它可以使程序按照一定的方式或順序執(zhí)行，實(shí)現(xiàn)程序的運(yùn)行控制，減少程序的混亂。1.條件語句if-else語句是JavaScript中最基本的條件控制語句，通過對(duì)表達(dá)式的判斷，來改變語句的執(zhí)行順序。if-else語句共有如下三種格式：if(表達(dá)式)if(表達(dá)式)if(表達(dá)式1){{語句1；語句塊1；語句塊1；else
if(表達(dá)式2)}}語句2；elseelse
if(表達(dá)式3){語句3；語句塊2；…}else語句n；（a）（b）（c）2.for語句for語句主要用來實(shí)現(xiàn)條件循環(huán)操作，當(dāng)條件成立時(shí)，執(zhí)行循環(huán)體，否則結(jié)束循環(huán)執(zhí)行for語句后的語句。基本格式如下：for(初始化；條件；增量){循環(huán)體語句；}初始化主要是給計(jì)數(shù)器變量置初值；條件是用來判斷是否符合條件去執(zhí)行循環(huán)體語句；增量主要用來標(biāo)識(shí)計(jì)數(shù)器變量在每次循環(huán)時(shí)的變化方式。三者之間必須要用分號(hào)分開。3.switch語句分支語句switch可以根據(jù)一個(gè)變量的不同取值而采取不同的處理方法，即實(shí)現(xiàn)了多分支控制?；靖袷饺缦拢簊witch(表達(dá)式){case
label1:
語句串1；case
label2:
語句串2；case
label3:
語句串3；...default:語句串n；}如果表達(dá)式的值同程序中所提供的任何一條語句都不匹配，將執(zhí)行default中的語句。4.while循環(huán)語句while循環(huán)語句有兩種格式，一種是while循環(huán)，另一種是do
while循環(huán)。兩者的區(qū)別在于while循環(huán)是先判斷條件，再執(zhí)行循環(huán)體語句，而do
while循環(huán)是先執(zhí)行循環(huán)體語句，再判斷條件。當(dāng)?shù)谝淮闻袛鄺l件均為真時(shí)，兩者的執(zhí)行沒有什么不同，但如果第一次判斷條件就為假時(shí)，while循環(huán)的循環(huán)體語句一次也不執(zhí)行，而do
while循環(huán)則不同，循環(huán)體語句至少執(zhí)行一次。while(條件){循環(huán)體語句；}（a）（b）do{循環(huán)體語句；}while(條件)；for語句和while語句均可實(shí)現(xiàn)循環(huán)，for語句書寫簡(jiǎn)單，容易理解，一般有明確的循環(huán)次數(shù)，而while語句則對(duì)較為復(fù)雜、循環(huán)次數(shù)未知的循環(huán)執(zhí)行效率更高。break和continue語句break語句的主要功能是在循環(huán)執(zhí)行的過程中從for或while語句中直接跳出，執(zhí)行for或while后的語句。continue語句則可使程序的執(zhí)行跳出本次循環(huán)，直接進(jìn)入下次循環(huán)的判斷。注釋語句//這是單行注釋。/*這是多行注釋....*/。11.3.6
函數(shù)JavaScript支持兩種函數(shù)，一種是JavaScript的庫(kù)函數(shù)，另一種是用戶自定義函數(shù)。庫(kù)函數(shù)JavaScript語言中包括若干個(gè)庫(kù)函數(shù)，即本身自帶的函數(shù)，如：escape()、eval()等。用戶自定義函數(shù)在進(jìn)行較為復(fù)雜的程序設(shè)計(jì)時(shí)，通常將要完成的功能任務(wù)分解成一些相對(duì)獨(dú)立的小部分，每個(gè)部分由一個(gè)函數(shù)來獨(dú)立完成，這樣一來，使得復(fù)雜的設(shè)計(jì)不再“復(fù)雜”，結(jié)構(gòu)更清晰，維護(hù)更容易。用戶自定義函數(shù)的方法如下：function
函數(shù)名（參數(shù)，變?cè)﹞函數(shù)體；return
表達(dá)式；}11.4
JavaScript的對(duì)象和事件11.4.1
JavaScript的對(duì)象JavaScript是一門基于對(duì)象的語言，之所以這樣說是因?yàn)樗鼪]有提供像抽象、繼承、重載等有關(guān)面向?qū)ο笳Z言的許多功能，而是將其他語言所創(chuàng)建的復(fù)雜對(duì)象統(tǒng)一起來，形成了一個(gè)非常強(qiáng)大的對(duì)象系統(tǒng)，在需要時(shí)直接引用就可以了。1.Javascript的對(duì)象種類引用JavaScript內(nèi)部對(duì)象。由瀏覽器提供對(duì)象。用戶創(chuàng)建新對(duì)象。2.常用內(nèi)部對(duì)象串對(duì)象主要用于字符串在Web頁面中的顯示、字體大小、字體顏色以及字符的大小寫轉(zhuǎn)換。算術(shù)函數(shù)的math對(duì)象提供除了加、減、乘、除以外的一些運(yùn)算。如對(duì)數(shù)、平方根等。日期和時(shí)間對(duì)象提供一個(gè)有關(guān)日期和時(shí)間操作的對(duì)象。3.對(duì)象屬性的引用使用點(diǎn)（.）運(yùn)算符
=“李海明”
student.city=“蘭州市”
student.year="1990"通過對(duì)象的下標(biāo)實(shí)現(xiàn)引用
student[0]=“李海明”
student[1]=“蘭州市”
student[2]="1990"通過數(shù)組的形式訪問屬性，可以使用循環(huán)操作方便獲取其值。（3）通過字符串的形式實(shí)現(xiàn)
student
["name"]=“李海明”
student
["city"]=“蘭州市”
student["year"]="1990"4.瀏覽器內(nèi)部對(duì)象使用瀏覽器內(nèi)部對(duì)象系統(tǒng)的作用是將相關(guān)元素組織包裝后供程序設(shè)計(jì)人員使用，減輕設(shè)計(jì)負(fù)擔(dān)、提高設(shè)計(jì)能力。窗口對(duì)象（window）：window對(duì)象處于對(duì)象層次的最基層，它提供了處理窗口的方法和屬性，每個(gè)window
代表一個(gè)瀏覽器窗口。位置對(duì)象（location）：location對(duì)象提供了與當(dāng)前打開的URL一起工作的方法和屬性，經(jīng)常用于實(shí)現(xiàn)頁面跳轉(zhuǎn)。歷史對(duì)象（history）：history對(duì)象提供了與瀏覽器的瀏覽歷史有關(guān)的操作，以使得用戶在歷史站點(diǎn)頁面間漫游。文檔對(duì)象（document）：document對(duì)象可以更新正在裝入或已經(jīng)裝入的文檔，并可以訪問裝入文檔所包含的HTML元素，同時(shí)還提供許多幫助訪問這些元素的屬性。11.4.2
JavaScript的事件用戶對(duì)瀏覽器頁面所做的動(dòng)作叫做“事件”，這些動(dòng)作通常是通過鼠標(biāo)或鍵盤來完成的，由這些動(dòng)作引發(fā)的一連串程序動(dòng)作，稱之為事件驅(qū)動(dòng)。1.JavaScript支持的事件種類JavaScript支持的常用對(duì)象事件種類及其適用范圍如表11-6所示。表11-6
JavaScript支持的常用對(duì)象事件種類及其適用范圍事件名適用對(duì)象含義onBlurwindow及所有表單子組件失去焦點(diǎn)onClicklink及所有表單子組件用戶在對(duì)象上單擊鼠標(biāo)左鍵一下onDblclick同上用戶在對(duì)象上連續(xù)雙擊鼠標(biāo)左鍵onFocuswindow及所有表單子組件取得輸入焦點(diǎn)onKeyDownimage、link及所有表單子組件用戶按下鍵盤上的某個(gè)按鍵的一剎那onKeyPress同上用戶按下鍵盤上的某個(gè)按鍵時(shí)onKeyup同上按鍵彈起來的一剎那onLoaddocument瀏覽器加載頁面時(shí)onunLoaddocument用戶離開頁面時(shí)onMousedowndocument、link及所有表單子組件用戶單擊鼠標(biāo)時(shí)onMouseOut同上鼠標(biāo)光標(biāo)離開相應(yīng)對(duì)象時(shí)onMouseOver同上鼠標(biāo)光標(biāo)移到相應(yīng)對(duì)象上時(shí)onResizewindow用戶調(diào)整窗口大小尺寸時(shí)onSelecttext、password、texterea用戶選取相應(yīng)對(duì)象時(shí)onSubmitform用戶單擊表單中的submit按鈕時(shí)2.事件處理事件處理是對(duì)象化編程的一個(gè)很重要的環(huán)節(jié)，沒有了事件處理，程序就會(huì)變得很死，缺乏靈活性。事件處理的過程可以這樣表示：發(fā)生事件→啟動(dòng)事件處理程序→事件處理程序做出反應(yīng)。其中，要使事件處理程序能夠啟動(dòng)，必須先告訴對(duì)象，如果發(fā)生了什么事情，要啟動(dòng)什么處理程序，否則這個(gè)流程就不能進(jìn)行下去，使用事件處理程序有兩種方法。直接在HTML標(biāo)記中指定，這種方法是用得最為普遍。方法是：<標(biāo)記...事件="事件處理程序"[事件="事件處理程序"...]>如<body...onload="alert('網(wǎng)頁讀取完成，請(qǐng)慢慢欣賞！')"onunload="alert('再見！
')">，這樣定義的<body>標(biāo)記，能使文檔讀取完畢時(shí)彈出一個(gè)對(duì)話框，內(nèi)容為“網(wǎng)頁讀取完成，請(qǐng)慢慢欣賞”，而在用戶退出文檔（或者關(guān)閉窗口，或者到另一個(gè)頁面去）的時(shí)候又彈出一個(gè)對(duì)話框，內(nèi)容為“再見”。在JavaScript中說明。方法是：<對(duì)象>.<事件>=<事件處理程序>;例如：<script
language="javascript">document.onload=alert('網(wǎng)頁讀取完成，請(qǐng)慢慢欣賞!');</script>用這種方法需要注意的是事件處理程序是真正的代碼，而不是字符串形式的代碼。如果要做的事情不止一件，最好還是定義一個(gè)函數(shù)，然后用以下的語法調(diào)用比較好。function
multiaction(
)
{……}……window.onselect=multiaction(
);這個(gè)例子將multiaction()函數(shù)作為window對(duì)象的onselect事件的處理程序來使用。應(yīng)用JavaScript開發(fā)一些特效，可以活躍網(wǎng)頁設(shè)計(jì)，增強(qiáng)網(wǎng)頁功能。目前，在Internet上有大量的JavaScript特效代碼，在不侵犯版權(quán)的情況下，可以直接復(fù)制加工再應(yīng)用。下面列舉幾個(gè)JavaScript特效的例子。11.5.1
動(dòng)態(tài)顯示日期和時(shí)間【例11-1】：在網(wǎng)頁中的指定位置動(dòng)態(tài)顯示日期和時(shí)間。瀏覽器顯示效果如圖11-1所示。圖11-1在網(wǎng)頁中動(dòng)態(tài)顯示日期和時(shí)間11.5
JavaScript應(yīng)用實(shí)例程序代碼如下：<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"
"><html
xmlns="
"><head><meta
http-equiv="Content-Type"
content="text/html;charset=utf-8"
/><title>動(dòng)態(tài)顯示日期和時(shí)間</title></head><body>今天是：<script
language="javascript">var
enabled
=
0;
today
=
new
Date();var
day;
var
date;if(today.getDay()==0)day="星期日"if(today.getDay()==1)day="星期一"if(today.getDay()==2)day="星期二"if(today.getDay()==3)day="星期三"if(today.getDay()==4)day="星期四"if(today.getDay()==5)day="星期五"if(today.getDay()==6)day="星期六"date1=today.getFullYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日";date2=day;document.write(date1);document.write(date2);document.write("<span
id='clock'></span>");var
now,hours,minutes,seconds,timeValue;function
showtime(){now
=
new
Date();
hours
=
now.getHours();minutes
=
now.getMinutes();seconds
=
now.getSeconds();timeValue
=(hours
>=12)?""
:"
";timeValue
+=
hours+
":";timeValue
+=
((minutes
<
10)
?
"0"
:
"")
+
minutes
+
":";timeValue
+=
((seconds
<
10)
?
"0"
:
"")
+
seconds
+
"";clock.innerHTML
=
timeValue;setTimeout("showtime()",100);}showtime();</script></body></html>11.5.2
狀態(tài)欄跑馬燈信息【例11-2】：在瀏覽器的狀態(tài)欄中從左向右滾動(dòng)顯示文本信息。瀏覽器顯示效果如圖11-2所示。圖11-2狀態(tài)欄跑馬燈信息程序代碼如下：<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"
"><html
xmlns="
"><head><meta
http-equiv="Content-Type"
content="text/html;charset=utf-8"
/><title>狀態(tài)欄跑馬燈信息</title><script
language="javascript">function
scroll(seed){var
m1="歡迎光臨"var
m2="《網(wǎng)站開發(fā)與網(wǎng)頁設(shè)計(jì)》"var
msg=m1+""+m2;var
out=
"
";var
c
=1;if(seed
>
100)
{seed--;var
cmd="scroll("
+
seed
+
")";timerTwo=window.setTimeout(cmd,100);}else
if
(seed
<=
100
&&
seed
>
0)
{for
(c=0
;
c
<
seed
;
c++)
{out+="
";out+=msg;seed--;var
cmd="scroll("
+
seed
+")";window.status=out;timerTwo=window.setTimeout(cmd,100);}
else
if
(seed
<=
0)
{if
(-seed
<
msg.length)
{out+=msg.substring(-seed,msg.length);seed--;var
cmd="scroll("
+
seed
+")";window.status=out;timerTwo=window.setTimeout(cmd,100);}else
{window.status="
";timerTwo=window.setTimeout("scroll(100)",7);}}}timerONE=window.setTimeout('scroll(100)',50);</script></head><body></body></html>11.5.3
計(jì)時(shí)器【例11-3】：帶有開始和停止按鈕的計(jì)時(shí)器。瀏覽器顯示效果如圖11-3所示。圖11-3帶有開始和停止按鈕的計(jì)時(shí)器程序代碼如下：<html><head><title>計(jì)時(shí)器</title><script
language="javascript">varc=0vartfunction
timedCount(){document.getElementById('txt').value=cc=c+1t=setTimeout("timedCount()",1000)}function
stopCount(){clearTimeout(t)}</script></head><body><form><input
type="button"
value="開始計(jì)時(shí)"onClick="timedCount()"><input
type="text"id="txt"><input
type="button"
value="停止計(jì)時(shí)"onClick="stopCount()"></form><p>請(qǐng)點(diǎn)擊上面的“開始計(jì)時(shí)”按鈕來啟動(dòng)計(jì)時(shí)器。輸入框會(huì)一直進(jìn)行計(jì)時(shí)，從0
開始。點(diǎn)擊“停止計(jì)時(shí)”按鈕可以終止計(jì)時(shí)。</p></body></html>11.5.4
獲取瀏覽器版本號(hào)【例11-4】：獲取客戶端IE瀏覽器的版本號(hào)，如果版本號(hào)低于4.0則提示“您的瀏覽器該升級(jí)了！”
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- Unit 5 We're family Period 3 （說課稿）-2024-2025學(xué)年外研版（三起）（2024）英語三年級(jí)上冊(cè)
- 2024-2025學(xué)年高中生物 第四部分 淺嘗現(xiàn)代生物技術(shù)說課稿 浙科版選修1
- 2024-2025學(xué)年高中物理 第四章 電磁感應(yīng) 5 電磁感應(yīng)現(xiàn)象的兩類情況（1）說課稿 新人教版選修3-2
- 9古代科技 耀我中華-獨(dú)領(lǐng)風(fēng)騷的古代技術(shù)創(chuàng)造（說課稿）2023-2024學(xué)年統(tǒng)編版道德與法治五年級(jí)上冊(cè)
- 26 手術(shù)臺(tái)就是陣地 說課稿-2024-2025學(xué)年統(tǒng)編版語文三年級(jí)上冊(cè)001
- Welcome Unit Reading for Writing 說課稿-2023-2024學(xué)年高一上學(xué)期英語人教版（2019）必修第一冊(cè)
- Unit 1 Let's be friends!Period 4（說課稿）-2024-2025學(xué)年外研版（三起）（2024）英語三年級(jí)上冊(cè)
- 2024年五年級(jí)數(shù)學(xué)上冊(cè) 四 小數(shù)加法和減法練習(xí)八說課稿 蘇教版
- 2025公司向個(gè)人借款合同樣本
- 產(chǎn)品報(bào)價(jià)單（5篇）
- 康復(fù)護(hù)理練習(xí)題庫(kù)（附答案）
- 不銹鋼欄桿施工工藝
- 陜西演藝集團(tuán)有限公司招聘筆試題庫(kù)2023
- 小型餐飲店退股協(xié)議書
- 第九講 全面依法治國(guó)PPT習(xí)概論2023優(yōu)化版教學(xué)課件
- 兩淮礦區(qū)地面定向多分支水平井鉆進(jìn)作業(yè)技術(shù)規(guī)程
- vc約起來史上最全180個(gè)知名投資人聯(lián)系方式
- 社會(huì)穩(wěn)定風(fēng)險(xiǎn)評(píng)估報(bào)告風(fēng)險(xiǎn)評(píng)估參考
- GB/T 14343-2008化學(xué)纖維長(zhǎng)絲線密度試驗(yàn)方法
- 制冷操作證培訓(xùn)教材-制冷與空調(diào)設(shè)備運(yùn)行操作作業(yè)培課件
評(píng)論
0/150
提交評(píng)論