JavaScrip編程技術(shù)

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

2、。什么是javascriptjavascript trainingjenyjeny 想創(chuàng)建一個(gè)電子郵件帳戶(hù)j*24us帳戶(hù) id： 密碼：年齡：國(guó)家：提交提交*請(qǐng)等待，正在請(qǐng)等待，正在創(chuàng)建您的帳戶(hù)創(chuàng)建您的帳戶(hù)ok提交提交這樣，這樣，javascript 將驗(yàn)證數(shù)據(jù)并給出錯(cuò)誤信息（如有）將驗(yàn)證數(shù)據(jù)并給出錯(cuò)誤信息（如有）錯(cuò)誤消息錯(cuò)誤消息密碼不能密碼不能 少于六位少于六位 !javascript training3.1 javascript基本語(yǔ)法基本語(yǔ)法3.1.1 javascript程序結(jié)構(gòu)程序結(jié)構(gòu)p和css與html文件結(jié)合方法類(lèi)似，javascript文件可以通過(guò)三種途徑和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)頁(yè)，write是輸出到當(dāng)前文檔。javascript trainingp文件4-1.html 比特塞威斯 歡迎光臨比特塞威斯公司 hello bits! this is bits p通過(guò)標(biāo)記引入外界js腳本文件，適用于js文件中的程序通用性較高的情況，所有頁(yè)面都可調(diào)用。javascript training2、通過(guò)

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

5、var i=0;p類(lèi)型后期確定機(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(競(jìng)拍sony數(shù)碼相機(jī) 600萬(wàn)像素 +x+$起價(jià));y=prompt(加多少銀子？,1); z=x+y; alert(您最終的出價(jià)n+z+$); /”n”用于換行顯示 prom

6、pt函數(shù)返回輸入的字符串“+”號(hào)的用法號(hào)的用法 10020 ? bug+字符串相連：100+”200”200javascript training var x=100;var y;var z;document.write(競(jìng)拍sony數(shù)碼相機(jī) 600萬(wàn)像素 +x+$起價(jià));y=prompt(加多少銀子？,1); z=x+parsefloat( y ); alert(您最終的出價(jià)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(競(jìng)拍sony數(shù)碼相機(jī) 600萬(wàn)像素 +x+$起價(jià));y=prompt(加多少銀子？,1); z=x+parsefloat( y ); alert(您最終的出價(jià)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 ：返回?cái)?shù)組中元素的個(gè)數(shù)：返回?cái)?shù)組中元素的個(gè)數(shù)p常用方法常用方法方方 法法說(shuō)說(shuō) 明明join將數(shù)組中的元素組合成字符串reverse顛倒數(shù)組元素的順序，使第一個(gè)元素成為最后一個(gè)，而最后一個(gè)元素成為第一個(gè)sort對(duì)數(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)義字符字字 符符說(shuō)說(shuō) 明明示示 例例b退格符alert(“這是第一句 b 這是第二句”)f換頁(yè)符alert(“這是第一局 f 這是第二句”)n換行符alert(“這是第一局 n 這是第二句”)r回車(chē)符alert(“這是第一局 r 這是第二句”)t制表符 alert(“這是第一局 t 這是第二句”)和c語(yǔ)言一樣，js也有轉(zhuǎn)義字符，常用的就是： “ n ”javascript training運(yùn)算符運(yùn)算符 p 運(yùn)算符對(duì)一個(gè)或多個(gè)變量或值（操作數(shù)）進(jìn)行運(yùn)算，并返 回一個(gè)新值p 根據(jù)

11、所執(zhí)行的運(yùn)算，運(yùn)算符可分為以下類(lèi)別：q 算術(shù)運(yùn)算符q 比較運(yùn)算符q 邏輯運(yùn)算符javascript training運(yùn)算符說(shuō) 明示 例+加a = 5 + 8-減a = 8 - 5/除a = 20 / 5*乘a = 5*19%取模兩個(gè)數(shù)相除的余數(shù)10 % 3 = 1+一元自加。該運(yùn)算符帶一個(gè)操作數(shù)，將操作數(shù)的值加 1。返回的值取決于 + 運(yùn)算符位于操作數(shù)的前面或是后面將返回 x 自加運(yùn)算后的值。x+ 將返回 x 自加運(yùn)算前的值- -一元自減。該運(yùn)算符只帶一個(gè)操作數(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ì)頁(yè)面2.指定各個(gè)文本框的名稱(chēng)3.切換為代碼視圖，編寫(xiě)腳本代碼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ì)算總價(jià)并

13、顯示添加單擊事件，單擊按鈕時(shí)調(diào)用“calcu()” 函數(shù)算術(shù)運(yùn)算符算術(shù)運(yùn)算符-2獲取表單中輸入的數(shù)據(jù)：document.表單名.表單元素名.value定義calcu( )計(jì)算函數(shù),實(shí)現(xiàn)兩個(gè)數(shù)相乘的功能.定義函數(shù)的語(yǔ)法： function 函數(shù)名(參數(shù)列表) /javascript語(yǔ)句； javascript training比較運(yùn)算符比較運(yùn)算符 -1運(yùn)算符運(yùn)算符說(shuō)說(shuō) 明明示示 例例= = 等于。如果兩個(gè)操作數(shù)相等，則返回真。a = = b!=不等于。如果兩個(gè)操作數(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(購(gòu)買(mǎi)總價(jià)超過(guò)500n支付時(shí)將贈(zèng)送超級(jí)q幣2枚！);.其他代碼略，同上例比較運(yùn)算符比較運(yùn)算符 -2購(gòu)買(mǎi)總價(jià)超過(guò)500，贈(zèng)送超級(jí)q幣2枚！ javascript training邏輯運(yùn)算符邏輯運(yùn)算符 -1運(yùn)算符運(yùn)算符值值說(shuō)說(shuō) 明明與 ( &)expr1 & expr2 只有當(dāng) expr1 和 expr2 同為真時(shí)，才返回真。否則，返回假。或 ( | )expr1 | expr2如果其中一個(gè)表達(dá)式為真，或兩個(gè)表達(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(購(gòu)買(mǎi)總價(jià)超過(guò)2000n請(qǐng)直接與貴賓臺(tái)聯(lián)系！);.其他代碼略，同上例邏輯運(yùn)算符邏輯運(yùn)算符 -25001000 之間，贈(zèng)送超級(jí)q幣兩枚；1000200

17、0之間，贈(zèng)送ibm智能鼠標(biāo)一只；2000以上，直接與貴賓臺(tái)聯(lián)系。javascript training3.1.3 javascript流程控制流程控制1、分支控制語(yǔ)句（條件語(yǔ)句）、分支控制語(yǔ)句（條件語(yǔ)句）if(條件) javascript代碼; 語(yǔ)法：語(yǔ)法：if 語(yǔ)句語(yǔ)句 -1如果要執(zhí)行多個(gè)語(yǔ)句，必須將這些語(yǔ)句放在一對(duì)大括號(hào) ( ) 內(nèi)。但如果只要執(zhí)行一個(gè)語(yǔ)句，則可以省略大括號(hào)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(購(gòu)買(mǎi)總價(jià)超過(guò)2000n請(qǐng)直接與貴賓臺(tái)聯(lián)系！); .其他代碼略，同上例if語(yǔ)句語(yǔ)句 -2如果輸入框中的數(shù)據(jù)用戶(hù)漏填了，出現(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(購(gòu)買(mǎi)總價(jià)超過(guò)2000n請(qǐng)直接與貴賓臺(tái)聯(lián)系！); else alert(購(gòu)買(mǎi)數(shù)量或競(jìng)拍價(jià)格沒(méi)有填寫(xiě)n請(qǐng)重新輸入！);if-else語(yǔ)句語(yǔ)句提示沒(méi)有填寫(xiě)購(gòu)買(mǎi)數(shù)量或者競(jìng)拍價(jià)格?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(競(jìng)拍價(jià)格不能小于零！n請(qǐng)重填); return; /函數(shù)返回，不再執(zhí)行后面的代碼 if (parsefloat(numb2)0) alert(購(gòu)買(mǎi)數(shù)量不能小于零！n請(qǐng)重填); return; var total= parsefloat(numb1)*parsefloat(numb2

21、); document.calc.result.value=total; .嵌套嵌套if語(yǔ)句語(yǔ)句購(gòu)買(mǎi)數(shù)量無(wú)意中輸入負(fù)數(shù)，出現(xiàn) bug 怎么辦?javascript trainingswitch 語(yǔ)句語(yǔ)句 -1switch (表達(dá)式) case 常量1 : javascript語(yǔ)句; break; case 常量2 : javascript語(yǔ)句; break; . default : javascript語(yǔ)句;語(yǔ)法：語(yǔ)法：javascript trainingswitch語(yǔ)句語(yǔ)句 -2 var f=document.calc.pay.value; /支付方式代號(hào) 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(請(qǐng)重新選擇支付方式！); return; var money=total*grade; /根據(jù)折扣率，計(jì)算實(shí)際總價(jià) document.calc.result.value=money; alert(您享受了+grade*10+折優(yōu)惠！); .銀行轉(zhuǎn)帳 打6折電

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

24、ile循環(huán) while(循環(huán)條件) /語(yǔ)句； q dowhile循環(huán) do /語(yǔ)句； 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(每個(gè)字符都對(duì)應(yīng)一個(gè)漂亮的埃及圖像每個(gè)字符都對(duì)應(yīng)一個(gè)漂亮的埃及圖像);do var c = prompt(輸入一個(gè)字符，輸入輸入一個(gè)字符，輸入n 或或n停止停止,a) ; d

25、ocument.write (+c+); while (c !=n & c !=n);while和和dowhile循環(huán)循環(huán)輸入一個(gè)字符，直到n停止，用哪個(gè)循環(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(“輸入一個(gè)表達(dá)式，我給您計(jì)算,1+1);var result=eval(str1);document.write(str1+=+result);var x = prompt(輸入一些數(shù)據(jù),0);if

26、(isnan(x) alert (x + 不是一個(gè)數(shù)字);else alert (x + 是一個(gè)數(shù)字); javascript training自定義函數(shù)自定義函數(shù)p定義函數(shù)：function 函數(shù)名( 參數(shù)1,參數(shù)2， ) 語(yǔ)句; p調(diào)用函數(shù)：函數(shù)調(diào)用一般和表單元素的事件一起使用，調(diào)用格式為：事件名“函數(shù)名” ;function sum ( one, two) var result = one + two; return result;表示單擊此按鈕時(shí)，調(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)算符號(hào) javascript training調(diào)用函數(shù)調(diào)用函數(shù) 第一個(gè)數(shù) 第二個(gè)數(shù) 計(jì)算結(jié)果 javascript trainingjavascript 函數(shù)練習(xí)函數(shù)練習(xí)p驗(yàn)證教材p73示例。 javascript training3.1.5 javascript 中的常用對(duì)象中的常用對(duì)象p對(duì)象是屬性和/方法的組合p屬性是對(duì)象所擁有的一組外觀特征，一般為名詞 p方法是對(duì)象可以執(zhí)行的功能，一般為動(dòng)詞

29、 例如：汽車(chē)ferrari對(duì)象：汽車(chē)屬性：型號(hào)：法拉利顏色：綠色方法：前進(jìn)、剎車(chē)、倒車(chē) javascript training1. date 對(duì)象對(duì)象pdate方法的分組：方法的分組： 方法分組方法分組說(shuō)說(shuō) 明明 setxxx這些方法用于設(shè)置時(shí)間和日期值getxxx 這些方法用于獲取時(shí)間和日期值toxxx這些方法用于從 date 對(duì)象返回字符串值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 方法：方法：方法方法說(shuō)明說(shuō)明setdate設(shè)置 date 對(duì)象中月份中的天數(shù)，其值介于 1 至 31 之間。sethours設(shè)置 date 對(duì)象中的小時(shí)數(shù)，其值介于 0 至 23 之間。setminutes設(shè)置 date 對(duì)象中的分鐘數(shù)，其值介于 0 至 59 之間。 setseconds設(shè)置 date 對(duì)象中的秒數(shù)，其值介于 0 至 59 之間。 settime設(shè)置 dat

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

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

33、c (year, month, day, hours, min., secs. )date 對(duì)象中自 1970 年 1 月 1 日以來(lái)的毫秒數(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)在時(shí)間:+now.gethours()+點(diǎn)+now.getminutes( )+分); 獲得當(dāng)前日期和時(shí)間獲得小時(shí)，即當(dāng)前是幾點(diǎn)判斷上午、下午還是晚上月份數(shù)字011，注意1date 對(duì)象應(yīng)用實(shí)例對(duì)象應(yīng)用實(shí)例 javascript trainingdate 對(duì)象應(yīng)用實(shí)例對(duì)象應(yīng)用實(shí)例javascript 代碼function disptime( ) var time = new date( ); /獲得當(dāng)前時(shí)間 var hour = time.gethours( ); /獲得小時(shí)、分鐘、秒 var minute = time.getminu

35、tes( ); var second = time.getseconds( ); var apm=am; /默認(rèn)顯示上午: am if (hour12) /按12小時(shí)制顯示 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í)器函數(shù)，每隔1秒調(diào)用disptime( )函數(shù)刷新顯示獲得小時(shí)、分鐘、秒根據(jù)根據(jù)12小時(shí)制調(diào)整時(shí)間和小時(shí)制調(diào)整時(shí)間和am/pm標(biāo)志標(biāo)志確保分鐘和秒顯示位數(shù)為 2 位var mytime = settimeout(“disptime( )”,1000);設(shè)置定時(shí)器每隔1秒（1000毫秒），調(diào)用函數(shù)disptime( )執(zhí)行，刷新時(shí)鐘。 javascript training設(shè)置樣式：無(wú)邊框的文本框onload ( ) 事件，頁(yè)面加載就調(diào)用函數(shù)：disptime（顯示時(shí)間） javascript trainingdate對(duì)象練習(xí)對(duì)象練習(xí)p驗(yàn)證上例 javascript trai

37、ning2. math 對(duì)象對(duì)象名稱(chēng)名稱(chēng) 說(shuō)說(shuō) 明明屬性pi 的值， 約等于 3.1415ln1010 的自然對(duì)數(shù)的值，約等于 2.302eeuler 的常量的值，約等于 2.718。euler 的常量用作自然對(duì)數(shù)的底數(shù)方法abs(y)返回 y 的絕對(duì)值sin (y) 返回 y 的正弦，返回值以弧度為單位。cos (y)返回 y 的余弦，返回值以弧度為單位tan (y)返回 y 的正切，返回值以弧度為單位 min (x, y)返回 x 和 y 兩個(gè)數(shù)中較小的數(shù) max (x, y)返回 x 和 y 兩個(gè)數(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自動(dòng)刷新 document.write(2秒自動(dòng)刷新，隨機(jī)顯示圖片); var i=0; i=math.round(math.random( )*8+1); document.write(); 假定隨機(jī)產(chǎn)生的數(shù)字i=3，上述代碼即為：顯示第三幅圖片（3.jpg） 每隔2秒刷新網(wǎng)頁(yè)math.round(math.random( )*8+1) 產(chǎn)

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

40、接字符串。indexof()檢索字符串。localecompare()用本地特定的順序來(lái)比較兩個(gè)字符串。match()找到一個(gè)或多個(gè)正則表達(dá)式的匹配。search()檢索與正則表達(dá)式相匹配的值。substr()從起始索引號(hào)提取字符串中指定數(shù)目的字符。tolowercase()把字符串轉(zhuǎn)換為小寫(xiě)。touppercase()把字符串轉(zhuǎn)換為大寫(xiě)。valueof()返回某個(gè)字符串對(duì)象的原始值。 javascript trainingstring對(duì)象方法練習(xí)對(duì)象方法練習(xí)p驗(yàn)證上例 javascript trainingjavascript 事件 事件名說(shuō)明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)移出，即離開(kāi)圖片等所在的區(qū)域onmousemove鼠標(biāo)移動(dòng)，表示在層等上方移動(dòng)onload 網(wǎng)頁(yè)文檔加載事件onsubmit 表單提交事件onmousedown 鼠標(biāo)按下onmouseup 鼠標(biāo)彈起3.2 網(wǎng)頁(yè)事件處理網(wǎng)頁(yè)事件處理 javascript trainingjavascript 事件處理程序事件處理程序 pjavascript 事件處理程序就是一組語(yǔ)句，在事件 （如點(diǎn)擊鼠標(biāo)

42、或移動(dòng)鼠標(biāo)等）發(fā)生時(shí)執(zhí)行 事件處理事件事件處理程序的基本語(yǔ)法是：事件名= javascript 代碼函數(shù) 表示鼠標(biāo)按下時(shí)，將調(diào)用執(zhí)行函數(shù)check( ) 。 javascript trainingcardpassmyformonfocus和和onblur 事件事件-1 javascript trainingfunction myfun1( ) if (document.myform.card.value=請(qǐng)注意格式：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(格式錯(cuò)誤，請(qǐng)重新輸入) ; document.myform.card.focus(); 文本框獲得鼠標(biāo)焦點(diǎn)時(shí)（onfocus）調(diào)用的函數(shù)：清空卡號(hào)文本框 文本框失去鼠標(biāo)焦點(diǎn)時(shí)（onblur）調(diào)用的函數(shù)：判斷格式是否正確 focus( )方法再次獲得焦點(diǎn)，即鼠標(biāo)光標(biāo)回到卡號(hào)文本框 javascript training卡號(hào)： 密碼： onfocus和和onblur 事件事件-2添加事件處理 javascript trainingonmouseover和和onmousedown事件事件 javascript tra

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

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

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

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

48、idth： 窗口寬度； top： 窗口距離屏幕上方的象素值； left：窗口距離屏幕左側(cè)的象素值； toolbar： 是否顯示工具欄，yes為顯示； menubar，scrollbars 表示菜單欄和滾動(dòng)欄。 resizable： 是否允許改變窗口大小，yes或1為允許 location： 是否顯示地址欄，yes或1為允許 status：是否顯示狀態(tài)欄內(nèi)的信息，yes或1為允許；我們需要預(yù)先制作好廣告頁(yè)面，假設(shè)為adv.htm，打開(kāi)廣告窗口的語(yǔ)句如下 ：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); 看看和我一起打開(kāi)的廣告窗口 使用 open 方法打開(kāi)廣告新窗口 添加頁(yè)面加載事件 javascript trainingq document 對(duì)象屬性對(duì)象屬性名稱(chēng)名稱(chēng) 說(shuō)明說(shuō)明a

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