JavaScrip編程技術(shù)

1、javascript編程技術(shù)javascript training內(nèi)容摘要p理解javascript語言基本特征p掌握如何將 javascript 嵌入到 html 中p理解變量、數(shù)據(jù)類型和運(yùn)算符p掌握 流程控制語句p理解網(wǎng)頁文檔對象模型p理解瀏覽器對象模型p理解各種javascript典型應(yīng)用javascript trainingpjavascript是在瀏覽器端執(zhí)行的腳本語言，嵌是在瀏覽器端執(zhí)行的腳本語言，嵌套在套在html程序中，通過控制網(wǎng)頁中各種標(biāo)記程序中，通過控制網(wǎng)頁中各種標(biāo)記的樣式變化增加的樣式變化增加網(wǎng)頁動態(tài)效果網(wǎng)頁動態(tài)效果；或?qū)撁鏀?shù)據(jù)；或?qū)撁鏀?shù)據(jù)進(jìn)行進(jìn)行合法性驗(yàn)證合法性驗(yàn)證

2、。什么是javascriptjavascript trainingjenyjeny 想創(chuàng)建一個電子郵件帳戶j*24us帳戶 id： 密碼：年齡：國家：提交提交*請等待，正在請等待，正在創(chuàng)建您的帳戶創(chuàng)建您的帳戶ok提交提交這樣，這樣，javascript 將驗(yàn)證數(shù)據(jù)并給出錯誤信息（如有）將驗(yàn)證數(shù)據(jù)并給出錯誤信息（如有）錯誤消息錯誤消息密碼不能密碼不能 少于六位少于六位 !javascript training3.1 javascript基本語法基本語法3.1.1 javascript程序結(jié)構(gòu)程序結(jié)構(gòu)p和css與html文件結(jié)合方法類似，javascript文件可以通過三種途徑和html文件結(jié)合：

3、 javascript獨(dú)立腳本文件形式、標(biāo)記塊形式、具體的事件屬性方式。javascript training1、獨(dú)立、獨(dú)立js腳本文件形式腳本文件形式p如果有獨(dú)立文件4-1.js document.write(hello bits!)p document代表瀏覽器中的當(dāng)前html網(wǎng)頁，write是輸出到當(dāng)前文檔。javascript trainingp文件4-1.html 比特塞威斯 歡迎光臨比特塞威斯公司 hello bits! this is bits p通過標(biāo)記引入外界js腳本文件，適用于js文件中的程序通用性較高的情況，所有頁面都可調(diào)用。javascript training2、通過

4、、通過標(biāo)記與標(biāo)記與html結(jié)合結(jié)合 比特塞威斯 歡迎光臨比特塞威斯公司 document.write(hello bits!) this is bits p適用于重用度不高的情況，當(dāng)前頁面中可以被重用。javascript training3、通過事件屬性與、通過事件屬性與html結(jié)合結(jié)合 比特塞威斯 歡迎光臨比特塞威斯公司 this is bits p事件處理性程序語句直接寫在事件屬性中，不需要標(biāo)記。javascript training3.1.2 javascript中的變量中的變量p變量是構(gòu)成程序語言的基本元素， javascript中變量以var關(guān)鍵字聲明。 var strname;

5、var i=0;p類型后期確定機(jī)制javascript training 比特塞威斯 歡迎光臨比特塞威斯公司 var i=1; var head1=hello bits; document.write(head1); i=2; head1=hello bits; document.write(head1); javascript training var x=100;var y;var z;document.write(競拍sony數(shù)碼相機(jī) 600萬像素 +x+$起價);y=prompt(加多少銀子？,1); z=x+y; alert(您最終的出價n+z+$); /”n”用于換行顯示 prom

6、pt函數(shù)返回輸入的字符串“+”號的用法號的用法 10020 ? bug+字符串相連：100+”200”200javascript training var x=100;var y;var z;document.write(競拍sony數(shù)碼相機(jī) 600萬像素 +x+$起價);y=prompt(加多少銀子？,1); z=x+parsefloat( y ); alert(您最終的出價n+z+$); /”n”用于換行顯示 parsefloat( )函數(shù)將字符串轉(zhuǎn)換為float數(shù)據(jù) parseint( )函數(shù)將字符串轉(zhuǎn)換為int數(shù)據(jù)如果轉(zhuǎn)換失敗，返回nan值(not a number)javascrip

7、t trainingp驗(yàn)證上例 var x=100;var y;var z;document.write(競拍sony數(shù)碼相機(jī) 600萬像素 +x+$起價);y=prompt(加多少銀子？,1); z=x+parsefloat( y ); alert(您最終的出價n+z+$); /”n”用于換行顯示 變量練習(xí)變量練習(xí)javascript training數(shù)組數(shù)組 -1p聲明數(shù)組 var 數(shù)組名數(shù)組名 = = new array( (數(shù)組大小數(shù)組大小);); 例：例： var emp = = new array(3)p添加元素 emp0 = “aa; emp1 = “bb; emp2 = “cc

8、;aabbccemp 也可以聲明數(shù)組并賦初值： 例：例： var emp=new array(“aa”，“bb”，“cc”)；javascript training使用數(shù)組var emp = new array(3);emp0 = ryan dias;emp1 = graham browne;emp2 = david greene;document.write(數(shù)組emp中的數(shù)據(jù)為:);document.write(emp0+);document.write(emp1+);document.write(emp2+);數(shù)組數(shù)組 -2 javascript training數(shù)組數(shù)組 -3 p常用屬

9、性常用屬性 length ：返回數(shù)組中元素的個數(shù)：返回數(shù)組中元素的個數(shù)p常用方法常用方法方方 法法說說 明明join將數(shù)組中的元素組合成字符串reverse顛倒數(shù)組元素的順序，使第一個元素成為最后一個，而最后一個元素成為第一個sort對數(shù)組元素進(jìn)行排序javascript trainingvar emp = new array(3);emp0 = ryan dias;emp1 = graham browne;emp2 = david greene;emp.sort( );document.write(“排序結(jié)果是：);document.write(emp0+);document.write(e

10、mp1+);document.write(emp2+);數(shù)組數(shù)組 -4 javascript training轉(zhuǎn)義字符轉(zhuǎn)義字符字字 符符說說 明明示示 例例b退格符alert(“這是第一句 b 這是第二句”)f換頁符alert(“這是第一局 f 這是第二句”)n換行符alert(“這是第一局 n 這是第二句”)r回車符alert(“這是第一局 r 這是第二句”)t制表符 alert(“這是第一局 t 這是第二句”)和c語言一樣，js也有轉(zhuǎn)義字符，常用的就是： “ n ”javascript training運(yùn)算符運(yùn)算符 p 運(yùn)算符對一個或多個變量或值（操作數(shù)）進(jìn)行運(yùn)算，并返 回一個新值p 根據(jù)

11、所執(zhí)行的運(yùn)算，運(yùn)算符可分為以下類別：q 算術(shù)運(yùn)算符q 比較運(yùn)算符q 邏輯運(yùn)算符javascript training運(yùn)算符說 明示 例+加a = 5 + 8-減a = 8 - 5/除a = 20 / 5*乘a = 5*19%取模兩個數(shù)相除的余數(shù)10 % 3 = 1+一元自加。該運(yùn)算符帶一個操作數(shù)，將操作數(shù)的值加 1。返回的值取決于 + 運(yùn)算符位于操作數(shù)的前面或是后面將返回 x 自加運(yùn)算后的值。x+ 將返回 x 自加運(yùn)算前的值- -一元自減。該運(yùn)算符只帶一個操作數(shù)。返回的值取決于 - 運(yùn)算符位于操作數(shù)的前面或是后面-x 將返回 x 自減運(yùn)算后的值。x- 將返回 x 自減運(yùn)算前的值算術(shù)運(yùn)算符算術(shù)運(yùn)

12、算符 javascript training算術(shù)運(yùn)算符算術(shù)運(yùn)算符-1實(shí)現(xiàn)步驟：1.使用dreamweaver設(shè)計(jì)頁面2.指定各個文本框的名稱3.切換為代碼視圖，編寫腳本代碼4.瀏覽并調(diào)試num1num2resultjavascript trainingfunction calcu( )var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;var total=parsefloat(numb1)*parsefloat(numb2);document.calc.result.value=total; 計(jì)算總價并

13、顯示添加單擊事件，單擊按鈕時調(diào)用“calcu()” 函數(shù)算術(shù)運(yùn)算符算術(shù)運(yùn)算符-2獲取表單中輸入的數(shù)據(jù)：document.表單名.表單元素名.value定義calcu( )計(jì)算函數(shù),實(shí)現(xiàn)兩個數(shù)相乘的功能.定義函數(shù)的語法： function 函數(shù)名(參數(shù)列表) /javascript語句； javascript training比較運(yùn)算符比較運(yùn)算符 -1運(yùn)算符運(yùn)算符說說 明明示示 例例= = 等于。如果兩個操作數(shù)相等，則返回真。a = = b!=不等于。如果兩個操作數(shù)不相等，則返回真。var2 != 5大于。如果左邊的操作數(shù)大于右邊的操作數(shù)，則返回真。var1 var2小于。如果左邊的操作數(shù)小于右

14、邊的操作數(shù)，則返回真。var2 var1=小于等于。如果左邊的操作數(shù)小于或等于右邊的操作數(shù)，則返回真。var2 = 4var2 =大于等于。如果左邊的操作數(shù)大于或等于右邊的操作數(shù)，則返回真。var1 = 5var1 = var2javascript trainingfunction calcu()var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;var total= parsefloat(numb1)*parsefloat(numb2);document.calc.result.value=total

15、; if (total500) alert(購買總價超過500n支付時將贈送超級q幣2枚！);.其他代碼略，同上例比較運(yùn)算符比較運(yùn)算符 -2購買總價超過500，贈送超級q幣2枚！ javascript training邏輯運(yùn)算符邏輯運(yùn)算符 -1運(yùn)算符運(yùn)算符值值說說 明明與 ( &)expr1 & expr2 只有當(dāng) expr1 和 expr2 同為真時，才返回真。否則，返回假?；?( | )expr1 | expr2如果其中一個表達(dá)式為真，或兩個表達(dá)式同為真，則返回真。否則，返回假。非 (!)!expr如果表達(dá)式為真，則返回假。如果為假，則返回真。javascript trai

16、ningfunction calcu()var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;var total= parsefloat(numb1)*parsefloat(numb2);document.calc.result.value=total; if (total500) &(total1000) &(total2000) alert(購買總價超過2000n請直接與貴賓臺聯(lián)系！);.其他代碼略，同上例邏輯運(yùn)算符邏輯運(yùn)算符 -25001000 之間，贈送超級q幣兩枚；1000200

17、0之間，贈送ibm智能鼠標(biāo)一只；2000以上，直接與貴賓臺聯(lián)系。javascript training3.1.3 javascript流程控制流程控制1、分支控制語句（條件語句）、分支控制語句（條件語句）if(條件) javascript代碼; 語法：語法：if 語句語句 -1如果要執(zhí)行多個語句，必須將這些語句放在一對大括號 ( ) 內(nèi)。但如果只要執(zhí)行一個語句，則可以省略大括號javascript trainingfunction calcu()var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;if

18、(numb1!=) & (numb2!=) var total= parsefloat(numb1)*parsefloat(numb2); document.calc.result.value=total; if (total500) &(total1000) &(total2000) alert(購買總價超過2000n請直接與貴賓臺聯(lián)系！); .其他代碼略，同上例if語句語句 -2如果輸入框中的數(shù)據(jù)用戶漏填了，出現(xiàn)nan的 bug 為什么呢?javascript trainingfunction calcu()var numb1= document.calc.num1

19、.value;var numb2= document.calc.num2.value;if (numb1!=) & (numb2!=) var total= parsefloat(numb1)*parsefloat(numb2); document.calc.result.value=total; if (total500) &(total1000) &(total2000) alert(購買總價超過2000n請直接與貴賓臺聯(lián)系！); else alert(購買數(shù)量或競拍價格沒有填寫n請重新輸入！);if-else語句語句提示沒有填寫購買數(shù)量或者競拍價格?javascr

20、ipt trainingfunction calcu()var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;if (numb1!=) & (numb2!=) if (parsefloat(numb1)0) alert(競拍價格不能小于零！n請重填); return; /函數(shù)返回，不再執(zhí)行后面的代碼 if (parsefloat(numb2)0) alert(購買數(shù)量不能小于零！n請重填); return; var total= parsefloat(numb1)*parsefloat(numb2

21、); document.calc.result.value=total; .嵌套嵌套if語句語句購買數(shù)量無意中輸入負(fù)數(shù)，出現(xiàn) bug 怎么辦?javascript trainingswitch 語句語句 -1switch (表達(dá)式) case 常量1 : javascript語句; break; case 常量2 : javascript語句; break; . default : javascript語句;語法：語法：javascript trainingswitch語句語句 -2 var f=document.calc.pay.value; /支付方式代號 var grade; /折扣率

22、var total= parsefloat(numb1)*parsefloat(numb2); switch(parseint(f) case 1: grade=0.6 ; /打6折優(yōu)惠 break; case 2: .同理其他方式打7折、八折 case 4: grade=0.9 ; /打9折優(yōu)惠 break;default: alert(請重新選擇支付方式！); return; var money=total*grade; /根據(jù)折扣率，計(jì)算實(shí)際總價 document.calc.result.value=money; alert(您享受了+grade*10+折優(yōu)惠！); .銀行轉(zhuǎn)帳 打6折電

23、話支付 打7折郵政匯款 打8折q幣支付 打9折下拉列表框pay的選項(xiàng)和值 javascript training2、循環(huán)語句、循環(huán)語句 p for循環(huán)p do-whilep while javascript trainingq for循環(huán)例：var i;for (i=0; i10; i+) / 語句; for 循環(huán)循環(huán) javascript trainingfor 循環(huán)演示document.write(打印金字塔直線);for (var i= 0; i100; i=i+5) document.write();for 循環(huán)循環(huán)如何實(shí)現(xiàn)當(dāng)i=5 時， javascript trainingq wh

24、ile循環(huán) while(循環(huán)條件) /語句； q dowhile循環(huán) do /語句； while(循環(huán)條件);while和和dowhile循環(huán)循環(huán)先執(zhí)行，后判斷循環(huán)條件先執(zhí)行，后判斷循環(huán)條件 javascript training .myfont font-size:150; color:#c99c96; font-family:webdings /產(chǎn)生埃及圖像的特殊字體產(chǎn)生埃及圖像的特殊字體 document.write(每個字符都對應(yīng)一個漂亮的埃及圖像每個字符都對應(yīng)一個漂亮的埃及圖像);do var c = prompt(輸入一個字符，輸入輸入一個字符，輸入n 或或n停止停止,a) ; d

25、ocument.write (+c+); while (c !=n & c !=n);while和和dowhile循環(huán)循環(huán)輸入一個字符，直到n停止，用哪個循環(huán) javascript training3.1.4 javascript 函數(shù)函數(shù)內(nèi)置函數(shù)內(nèi)置函數(shù) peval 函數(shù)： 用于計(jì)算字符串表達(dá)式的值 pisnan 函數(shù)：用于驗(yàn)證參數(shù)是否為 nan（非數(shù)字）var str1=prompt(“輸入一個表達(dá)式，我給您計(jì)算,1+1);var result=eval(str1);document.write(str1+=+result);var x = prompt(輸入一些數(shù)據(jù),0);if

26、(isnan(x) alert (x + 不是一個數(shù)字);else alert (x + 是一個數(shù)字); javascript training自定義函數(shù)自定義函數(shù)p定義函數(shù)：function 函數(shù)名( 參數(shù)1,參數(shù)2， ) 語句; p調(diào)用函數(shù)：函數(shù)調(diào)用一般和表單元素的事件一起使用，調(diào)用格式為：事件名“函數(shù)名” ;function sum ( one, two) var result = one + two; return result;表示單擊此按鈕時，調(diào)用函數(shù)sum( )執(zhí)行 javascript training函數(shù)的應(yīng)用函數(shù)的應(yīng)用 num1num2result javascript t

27、raining定義函數(shù)定義函數(shù) javascript 代碼 function compute(op) var num1,num2; num1=parsefloat(document.myform.num1.value); num2=parsefloat(document.myform.num2.value); if (op=+)document.myform.result.value=num1+num2 ; if (op=-)document.myform.result.value=num1-num2 ; if (op=*)document.myform.result.value=num1*n

28、um2 ; if (op=/ & num2!=0)document.myform.result.value=num1/num2 ; 定義函數(shù)compute( )，完成計(jì)算的功能。op參數(shù)代表運(yùn)算符號 javascript training調(diào)用函數(shù)調(diào)用函數(shù) 第一個數(shù) 第二個數(shù) 計(jì)算結(jié)果 javascript trainingjavascript 函數(shù)練習(xí)函數(shù)練習(xí)p驗(yàn)證教材p73示例。 javascript training3.1.5 javascript 中的常用對象中的常用對象p對象是屬性和/方法的組合p屬性是對象所擁有的一組外觀特征，一般為名詞 p方法是對象可以執(zhí)行的功能，一般為動詞

29、 例如：汽車ferrari對象：汽車屬性：型號：法拉利顏色：綠色方法：前進(jìn)、剎車、倒車 javascript training1. date 對象對象pdate方法的分組：方法的分組： 方法分組方法分組說說 明明 setxxx這些方法用于設(shè)置時間和日期值getxxx 這些方法用于獲取時間和日期值toxxx這些方法用于從 date 對象返回字符串值p a r s e x x x & utcxx這些方法用于解析字符串 javascript trainingp用作用作 date 方法的參數(shù)的整數(shù)：方法的參數(shù)的整數(shù)： 值值整整 數(shù)數(shù) seconds 和和 minutes0 至至 59 hour

30、s0 至至 23 day0 至至 6（星期（星期幾）幾） date1 至至 31（月份中的天數(shù)）（月份中的天數(shù)） months0 至至 11（一月（一月至十二月）至十二月） javascript trainingpset 方法：方法：方法方法說明說明setdate設(shè)置 date 對象中月份中的天數(shù)，其值介于 1 至 31 之間。sethours設(shè)置 date 對象中的小時數(shù)，其值介于 0 至 23 之間。setminutes設(shè)置 date 對象中的分鐘數(shù)，其值介于 0 至 59 之間。 setseconds設(shè)置 date 對象中的秒數(shù)，其值介于 0 至 59 之間。 settime設(shè)置 dat

31、e 對象中的時間值。 setmonth設(shè)置 date 對象中的月份，其值介于 1 至 12 之間。 javascript trainingpget 方法：方法：方法方法說明說明getdate返回 date 對象中月份中的天數(shù)，其值介于 1 至 31 之間getday返回 date 對象中的星期幾，其值介于 0 至 6 之間gethours返回 date 對象中的小時數(shù)，其值介于 0 至 23 之間getminutes返回 date 對象中的分鐘數(shù)，其值介于 0 至 59 之間getseconds返回 date 對象中的秒數(shù)，其值介于 0 至 59 之間getmonth返回 date 對象中的月

32、份，其值介于 0 至11 之間getfullyear返回 date 對象中的年份，其值為四位數(shù)gettime返回自某一時刻（1970 年 1 月 1 日）以來的毫秒數(shù) javascript training方方 法法說說 明明 togmtstring使用格林尼治標(biāo)準(zhǔn)時間 (gmt) 數(shù)據(jù)格式將 date 對象轉(zhuǎn)換成字符串表示tolocalestring使用當(dāng)?shù)貢r間格式將 date 對象轉(zhuǎn)換成字符串表示pto 方法：pparse 方法和 utc 方法 方方 法法說說 明明date.parse (date string )用日期字符串表示自 1970 年 1 月 1 日以來的毫秒數(shù) date.ut

33、c (year, month, day, hours, min., secs. )date 對象中自 1970 年 1 月 1 日以來的毫秒數(shù) javascript training如何實(shí)現(xiàn) javascript trainingvar now= new date( );var hour = now.gethours( );if (hour=0 & hour 12 & hour18 & hour 24) document.write(晚上好!);document.write(今天日期:+now.getyear()+年+(now.getmonth( )+1)+月+now.

34、getdate()+日);document.write(現(xiàn)在時間:+now.gethours()+點(diǎn)+now.getminutes( )+分); 獲得當(dāng)前日期和時間獲得小時，即當(dāng)前是幾點(diǎn)判斷上午、下午還是晚上月份數(shù)字011，注意1date 對象應(yīng)用實(shí)例對象應(yīng)用實(shí)例 javascript trainingdate 對象應(yīng)用實(shí)例對象應(yīng)用實(shí)例javascript 代碼function disptime( ) var time = new date( ); /獲得當(dāng)前時間 var hour = time.gethours( ); /獲得小時、分鐘、秒 var minute = time.getminu

35、tes( ); var second = time.getseconds( ); var apm=am; /默認(rèn)顯示上午: am if (hour12) /按12小時制顯示 hour=hour-12; apm=pm ; if (minute 10) /如果分鐘只有1位，補(bǔ)0顯示 minute=0+minute; if (second 10) /如果秒數(shù)只有1位，補(bǔ)0顯示 second=0+second;document.myform.myclock.value= hour+:+minute+:+ second+ +apm;var mytime = settimeout(disptime( ),

36、1000);使用定時器函數(shù)，每隔1秒調(diào)用disptime( )函數(shù)刷新顯示獲得小時、分鐘、秒根據(jù)根據(jù)12小時制調(diào)整時間和小時制調(diào)整時間和am/pm標(biāo)志標(biāo)志確保分鐘和秒顯示位數(shù)為 2 位var mytime = settimeout(“disptime( )”,1000);設(shè)置定時器每隔1秒（1000毫秒），調(diào)用函數(shù)disptime( )執(zhí)行，刷新時鐘。 javascript training設(shè)置樣式：無邊框的文本框onload ( ) 事件，頁面加載就調(diào)用函數(shù)：disptime（顯示時間） javascript trainingdate對象練習(xí)對象練習(xí)p驗(yàn)證上例 javascript trai

37、ning2. math 對象對象名稱名稱 說說 明明屬性pi 的值， 約等于 3.1415ln1010 的自然對數(shù)的值，約等于 2.302eeuler 的常量的值，約等于 2.718。euler 的常量用作自然對數(shù)的底數(shù)方法abs(y)返回 y 的絕對值sin (y) 返回 y 的正弦，返回值以弧度為單位。cos (y)返回 y 的余弦，返回值以弧度為單位tan (y)返回 y 的正切，返回值以弧度為單位 min (x, y)返回 x 和 y 兩個數(shù)中較小的數(shù) max (x, y)返回 x 和 y 兩個數(shù)中較大的數(shù) random返回0-1的隨機(jī)數(shù)round (y)四舍五入取整sqrt (y)返

38、回 y 的平方根math.random( ) ：產(chǎn)生：產(chǎn)生01的隨機(jī)小數(shù)的隨機(jī)小數(shù)math.round( )：四舍五入取整，如：四舍五入取整，如9.34 取整為取整為9 javascript training如何實(shí)現(xiàn) javascript training自動刷新 document.write(2秒自動刷新，隨機(jī)顯示圖片); var i=0; i=math.round(math.random( )*8+1); document.write(); 假定隨機(jī)產(chǎn)生的數(shù)字i=3，上述代碼即為：顯示第三幅圖片（3.jpg） 每隔2秒刷新網(wǎng)頁math.round(math.random( )*8+1) 產(chǎn)

39、生1-9的數(shù)字 javascript trainingmath對象方法練習(xí)對象方法練習(xí)p驗(yàn)證上例 javascript training3. string 對象對象創(chuàng)建字符串有兩種不同方法 ：p使用 var 語句 var newstr = “這是我的字符串這是我的字符串p創(chuàng)建 string 對象var newstr = new string (“這是我的字符串這是我的字符串) javascript trainingstring相關(guān)函數(shù)p屬性：lengthp方法：qcharatqindexofqsubstrqtolowercaseqevalcharat()返回在指定位置的字符。concat()連

40、接字符串。indexof()檢索字符串。localecompare()用本地特定的順序來比較兩個字符串。match()找到一個或多個正則表達(dá)式的匹配。search()檢索與正則表達(dá)式相匹配的值。substr()從起始索引號提取字符串中指定數(shù)目的字符。tolowercase()把字符串轉(zhuǎn)換為小寫。touppercase()把字符串轉(zhuǎn)換為大寫。valueof()返回某個字符串對象的原始值。 javascript trainingstring對象方法練習(xí)對象方法練習(xí)p驗(yàn)證上例 javascript trainingjavascript 事件 事件名說明onclick鼠標(biāo)單擊onchange 文本內(nèi)容

41、或下拉菜單中的選項(xiàng)發(fā)生改變onfocus 獲得焦點(diǎn)，表示文本框等獲得鼠標(biāo)光標(biāo)。onblur 失去焦點(diǎn)，表示文本框等失去鼠標(biāo)光標(biāo)。onmouseover 鼠標(biāo)懸停，即鼠標(biāo)停留在圖片等的上方onmouseout 鼠標(biāo)移出，即離開圖片等所在的區(qū)域onmousemove鼠標(biāo)移動，表示在層等上方移動onload 網(wǎng)頁文檔加載事件onsubmit 表單提交事件onmousedown 鼠標(biāo)按下onmouseup 鼠標(biāo)彈起3.2 網(wǎng)頁事件處理網(wǎng)頁事件處理 javascript trainingjavascript 事件處理程序事件處理程序 pjavascript 事件處理程序就是一組語句，在事件 （如點(diǎn)擊鼠標(biāo)

42、或移動鼠標(biāo)等）發(fā)生時執(zhí)行 事件處理事件事件處理程序的基本語法是：事件名= javascript 代碼函數(shù) 表示鼠標(biāo)按下時，將調(diào)用執(zhí)行函數(shù)check( ) 。 javascript trainingcardpassmyformonfocus和和onblur 事件事件-1 javascript trainingfunction myfun1( ) if (document.myform.card.value=請注意格式：10 xxxxxx) document.myform.card.value= ;function myfun2( ) var a=document.myform.card.valu

43、e; if (a.substr(0,2)!=10 | isnan(a) alert(格式錯誤，請重新輸入) ; document.myform.card.focus(); 文本框獲得鼠標(biāo)焦點(diǎn)時（onfocus）調(diào)用的函數(shù)：清空卡號文本框 文本框失去鼠標(biāo)焦點(diǎn)時（onblur）調(diào)用的函數(shù)：判斷格式是否正確 focus( )方法再次獲得焦點(diǎn)，即鼠標(biāo)光標(biāo)回到卡號文本框 javascript training卡號： 密碼： onfocus和和onblur 事件事件-2添加事件處理 javascript trainingonmouseover和和onmousedown事件事件 javascript tra

44、ining圖片切換 低價轉(zhuǎn)讓哈士奇弟弟 移過來看看俺啊添加事件處理 ：切換圖片onmouseover=src=dog2.jpg 表示本圖片的圖片名稱替換為dog2.jpg。請注意：由于外面兩端已有雙引號，為區(qū)別起見，dog2.jpg改用為單引號括起來。 javascript training網(wǎng)頁事件練習(xí)網(wǎng)頁事件練習(xí)p驗(yàn)證上例 javascript training3.3 網(wǎng)頁瀏覽器對象網(wǎng)頁瀏覽器對象 http:/window 窗口對象location地址對象document文檔對象form表單對象瀏覽器對象的分層結(jié)構(gòu)window.document.myform.text1 javascript

45、 trainingq瀏覽器對象的分層結(jié)構(gòu)瀏覽器對象的分層結(jié)構(gòu) javascript trainingq window 對象對象屬性屬性 名稱名稱 說明說明 document表示給定瀏覽器窗口中的 html 文檔。 history 包含有關(guān)客戶訪問過的url的信息。location包含有關(guān)當(dāng)前 url 的信息。 name設(shè)置或檢索窗口或框架的名稱。 status 設(shè)置或檢索窗口底部的狀態(tài)欄中的消息。 screen包含有關(guān)客戶端的屏幕和顯示性能的信息。 1. window 對象對象 javascript training名稱 說明 alert (“m提示信息)顯示包含消息的對話框。 confirm

46、（“提示信息”）顯示一個確認(rèn)對話框，包含一個確定取消按鈕prompt（”提示信息“）彈出提示信息框open (url,name)打開具有指定名稱的新窗口，并加載給定 url 所指定的文檔；如果沒有提供 url，則打開一個空白文檔close ( )關(guān)閉當(dāng)前窗口settimeout（”函數(shù)”,毫秒數(shù)） 設(shè)置定時器：經(jīng)過指定毫秒值后執(zhí)行某個函數(shù) cleartimeout(定時器對象) q window 對象方法對象方法 javascript trainingwindow 對象應(yīng)用示例對象應(yīng)用示例1 javascript trainingfunction openwindow( ) window.op

47、en(google.htm);function closewindow( ) window.close ( );使用 open 方法打開新窗口 使用 close 方法關(guān)閉窗口添加單擊事件因?yàn)閣indow是最頂層的根，所以可以省略window.open(google.htm);可簡寫為：open(google.htm);其他方法也是如此。 javascript trainingwindow 對象應(yīng)用示例對象應(yīng)用示例2 javascript trainingopen（”打開窗口的打開窗口的url”，”窗口名窗口名”，”窗口特征窗口特征”）窗口的特征如下，可以任意組合：height： 窗口高度； w

48、idth： 窗口寬度； top： 窗口距離屏幕上方的象素值； left：窗口距離屏幕左側(cè)的象素值； toolbar： 是否顯示工具欄，yes為顯示； menubar，scrollbars 表示菜單欄和滾動欄。 resizable： 是否允許改變窗口大小，yes或1為允許 location： 是否顯示地址欄，yes或1為允許 status：是否顯示狀態(tài)欄內(nèi)的信息，yes或1為允許；我們需要預(yù)先制作好廣告頁面，假設(shè)為adv.htm，打開廣告窗口的語句如下 ：open(“adv.htm”, “”, “toolbars=0, scrollbars=0, location=0, statusbars=0

49、, menubars=0, resizable=0, width=650, height=150”); javascript trainingfunction openwindow( ) open(adv.htm, , toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=650, height=150); 看看和我一起打開的廣告窗口 使用 open 方法打開廣告新窗口 添加頁面加載事件 javascript trainingq document 對象屬性對象屬性名稱名稱 說明說明a

50、linkcolor設(shè)置或檢索文檔中所有活動鏈接的顏色 bgcolor設(shè)置或檢索 document 對象的背景色 body指定文檔正文的開始和結(jié)束linkcolor設(shè)置或檢索文檔鏈接的顏色location包含關(guān)于當(dāng)前 url 的信息 title包含文檔的標(biāo)題url設(shè)置或檢索當(dāng)前文檔的 urlvlinkcolor設(shè)置或檢索用戶訪問過的鏈接的顏色 2. document 對象對象 javascript trainingq document對象對象方法方法 名稱名稱 說明說明 clear ( )清除當(dāng)前文檔 close ( )關(guān)閉輸出流并強(qiáng)制顯示發(fā)送的數(shù)據(jù)write (text)將文本寫入文檔 getelementbyid(id) 返回指定元素的引用返回指定元素的引用 getelementsbyname(elementname) 返回返回name=elementname的所有的所有xhtml元素對象的列表元素對象的列表 getelementsbytagname(name) 返回文檔中所有匹配的元素的集合返回文檔中所有匹配的元素的集合 createcomment(data) 創(chuàng)建創(chuàng)建xhtml注釋注釋 createelement(name) 創(chuàng)建指定類型的新元素