北大青鳥軟件工程師HTML.ppt

《北大青鳥軟件工程師HTML.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《北大青鳥軟件工程師HTML.ppt（35頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

第七章,JavaScript語(yǔ)法基礎(chǔ),2,回顧,樣式表有什么用？分為哪三類？什么場(chǎng)合使用行內(nèi)樣式？要求某一段落顯示紅色，20號(hào)字，HTML代碼為：請(qǐng)采用行內(nèi)樣式什么場(chǎng)合使用內(nèi)嵌樣式，根據(jù)選擇器的不同，又分為哪三類？指定在Z軸方向的順便號(hào)使用哪個(gè)屬性？,3,目標(biāo),理解什么是JavaScript如何將JavaScript嵌入到HTML中理解變量、數(shù)據(jù)類型和運(yùn)算符掌握if-else和switch語(yǔ)句,4,什么是JavaScript3-1,一萬(wàn)元整,JenySmiss,10,000/-,JenySmiss,A/cNo.010077,,瑞士銀行,Jeny想在銀行存錢,驗(yàn)證Jeny帳戶詳細(xì)信息,余額,帳號(hào),簽名,帳戶驗(yàn)證完畢,,5,什么是JavaScript3-2,同樣，,Jeny,,Jeny想創(chuàng)建一個(gè)電子郵件帳戶,,Jeny@***24US,帳戶Id：密碼：年齡：國(guó)家：,******,,這樣，JavaScript將驗(yàn)證數(shù)據(jù)并給出錯(cuò)誤信息（如有）,6,什么是JavaScript,JavaScript是一種腳本語(yǔ)言提供用戶交互動(dòng)態(tài)更改內(nèi)容數(shù)據(jù)驗(yàn)證,7,將JavaScript嵌入網(wǎng)頁(yè),可以將JavaScript語(yǔ)句插入HTML文檔，方式如下：使用標(biāo)簽將語(yǔ)句嵌入文檔將JavaScript源文件鏈接到HTML文檔中,8,使用Script標(biāo)簽,JavaScript代碼,document.write("歡迎來(lái)到JavaScript世界");盡情享受學(xué)習(xí)的快樂!!!,,腳本代碼,設(shè)置語(yǔ)言,,9,使用外部JS文件,外部JavaScript文件可以鏈接到HTML文檔中SCRIPT標(biāo)簽的SRC（源文件）屬性可用于包括此外部文件,,10,使用外部JS文件,,JavaScript代碼(test.htm),使用外部文件以上文本是通過訪問外部JavaScript文件顯示的,,11,變量,變量名必須以字母或下劃線（"_"）開頭變量可以包含數(shù)字、從A至Z的大小寫字母JavaScript區(qū)分大小寫，即變量myVar、myVAR和myvar是不同的變量,12,聲明變量,,vara;“var”－用于聲明變量的關(guān)鍵字“a”－變量名,,,同時(shí)聲明和初始化變量vara=10;,,a=10;,聲明變量,聲明多個(gè)變量varx,y,z=10;,賦值,13,聲明變量,使用變量varx;x=prompt("淘寶網(wǎng)竟拍，請(qǐng)出一口價(jià)",1);document.write("拍賣價(jià)格"+x+"")//"+"用來(lái)連接多個(gè)字符串document.write("恭喜您，您以最高價(jià)拍賣成功！");alert("歡迎下次光臨！");,定義變量,賦值,輸出,prompt(“提示信息”,”默認(rèn)值”)將彈出提示對(duì)話框，接受用戶的輸入。點(diǎn)擊確定返回輸入的字符串，點(diǎn)擊取消反饋空字符串。,14,,,變量a、b和c只能在其各自的函數(shù)中被訪問,,,變量的作用域,,,,腳本,函數(shù)function1局部變量a,函數(shù)function2局部變量b,函數(shù)function3局部變量c,可由函數(shù)1、函數(shù)2和函數(shù)3訪問,全局變量gg,,,,,全局變量不需要以var關(guān)鍵字進(jìn)行聲明，但局部變量則必須以此關(guān)鍵字來(lái)聲明,15,常量,整型浮點(diǎn)型字符串型,和C語(yǔ)言一樣，js也有轉(zhuǎn)義字符，常用的就是：“\n”,16,數(shù)據(jù)類型,17,varx=100;vary;varz;document.write("競(jìng)拍SONY數(shù)碼相機(jī)600萬(wàn)像素"+x+"$起價(jià)");y=prompt("加多少銀子？","1");z=x+y;alert("您最終的出價(jià)\n"+z+"$");//”\n”用于換行顯示,Prompt函數(shù)返回輸入的字符串,“+”號(hào)的用法-1,10020?bug,+字符串相連：100+”200”,200,18,varx=100;vary;varz;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值(notanumber),“+”號(hào)的用法-2,19,運(yùn)算符,運(yùn)算符對(duì)一個(gè)或多個(gè)變量或值（操作數(shù)）進(jìn)行運(yùn)算，并返回一個(gè)新值根據(jù)所執(zhí)行的運(yùn)算，運(yùn)算符可分為以下類別：算術(shù)運(yùn)算符比較運(yùn)算符邏輯運(yùn)算符,20,運(yùn)算符,21,算術(shù)運(yùn)算符-1,實(shí)現(xiàn)步驟：1.使用DreamWeaver設(shè)計(jì)頁(yè)面2.指定各個(gè)文本框的名稱3.切換為代碼視圖，編寫腳本代碼4.瀏覽并調(diào)試,22,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;vartotal=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;},計(jì)算總價(jià)并顯示,…,添加單擊事件，單擊按鈕時(shí)調(diào)用“calcu()”函數(shù),算術(shù)運(yùn)算符-2,獲取表單中輸入的數(shù)據(jù)：document.表單名.表單元素名.value,,定義calcu()計(jì)算函數(shù),實(shí)現(xiàn)兩個(gè)數(shù)相乘的功能.定義函數(shù)的語(yǔ)法：function函數(shù)名(參數(shù)列表){//JavaScript語(yǔ)句；},,23,比較運(yùn)算符,比較運(yùn)算符2-1,24,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;vartotal=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;if(total>500)alert("購(gòu)買總價(jià)超過500\n支付時(shí)將贈(zèng)送超級(jí)Q幣2枚！");}….其他代碼略，同上例,,比較運(yùn)算符,購(gòu)買總價(jià)超過500，贈(zèng)送超級(jí)Q幣2枚！,25,運(yùn)算符,邏輯運(yùn)算符,26,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;vartotal=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;if((total>500)}….其他代碼略，同上例,,邏輯運(yùn)算符,500－1000之間，贈(zèng)送超級(jí)Q幣兩枚；1000－2000之間，贈(zèng)送IBM智能鼠標(biāo)一只；2000以上，直接與貴賓臺(tái)聯(lián)系。,27,,條件語(yǔ)句用于測(cè)試條件。,if(條件){JavaScript代碼;},語(yǔ)法：,if語(yǔ)句2-1,如果要執(zhí)行多個(gè)語(yǔ)句，必須將這些語(yǔ)句放在一對(duì)大括號(hào)({})內(nèi)。但如果只要執(zhí)行一個(gè)語(yǔ)句，則可以省略大括號(hào),28,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if((numb1!="")}}….其他代碼略，同上例,,If語(yǔ)句2-2,如果輸入框中的數(shù)據(jù)用戶漏填了，出現(xiàn)NaN的bug為什么呢?,29,ifelse語(yǔ)句2-1,if(條件){//JavaScript代碼;}else{//JavaScript代碼;},語(yǔ)法：,30,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if((numb1!="")},,If-else語(yǔ)句2-2,提示沒有填寫購(gòu)買數(shù)量或者競(jìng)拍價(jià)格?,31,if(條件1){if(條件2){//JavaScript代碼;}},語(yǔ)法：,嵌套if語(yǔ)句2-1,32,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if((numb1!="")…..,,嵌套If語(yǔ)句2-2,購(gòu)買數(shù)量無(wú)意中輸入負(fù)數(shù)，出現(xiàn)bug怎么辦?,33,switch語(yǔ)句2-1,switch(表達(dá)式){case常量1:JavaScript語(yǔ)句;break;case常量2:JavaScript語(yǔ)句;break;...default:JavaScript語(yǔ)句;},語(yǔ)法：,34,switch語(yǔ)句2-2,.....varf=document.calc.pay.value;//支付方式代號(hào)vargrade;//折扣率vartotal=parseFloat(numb1)*parseFloat(numb2);switch(parseInt(f)){case1:grade=0.6;//打6折優(yōu)惠break;case2:…….同理其他方式打7折、八折case4:grade=0.9;//打9折優(yōu)惠break;default:alert("請(qǐng)重新選擇支付方式！");return;}varmoney=total*grade;//根據(jù)折扣率，計(jì)算實(shí)際總價(jià)document.calc.result.value=money;alert("您享受了"+grade*10+"折優(yōu)惠！");…..,,銀行轉(zhuǎn)帳－打6折電話支付－打7折郵政匯款－打8折Q幣支付－打9折,下拉列表框pay的選項(xiàng)和值,35,總結(jié),網(wǎng)頁(yè)中嵌入腳本有兩種方式：使用標(biāo)簽或外部*.js文件JavaScript中聲明變量：var變量名“+”可以用于兩個(gè)數(shù)相加，還可以用于連接字符串parseInt()和parseFloat()函數(shù)將字符串分別轉(zhuǎn)換為整型和小數(shù)運(yùn)算符號(hào)分為算術(shù)運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符條件語(yǔ)句分為if語(yǔ)句，if-else語(yǔ)句、if的嵌套多分支語(yǔ)句switch根據(jù)表達(dá)式的值，進(jìn)入不同的分支執(zhí)行,