北大青鳥軟件工程師HTML.ppt
《北大青鳥軟件工程師HTML.ppt》由會員分享,可在線閱讀,更多相關(guān)《北大青鳥軟件工程師HTML.ppt(35頁珍藏版)》請在裝配圖網(wǎng)上搜索。
第七章,JavaScript語法基礎(chǔ),2,回顧,樣式表有什么用?分為哪三類?什么場合使用行內(nèi)樣式?要求某一段落顯示紅色,20號字,HTML代碼為:請采用行內(nèi)樣式什么場合使用內(nèi)嵌樣式,根據(jù)選擇器的不同,又分為哪三類?指定在Z軸方向的順便號使用哪個屬性?,3,目標(biāo),理解什么是JavaScript如何將JavaScript嵌入到HTML中理解變量、數(shù)據(jù)類型和運算符掌握if-else和switch語句,4,什么是JavaScript3-1,一萬元整,JenySmiss,10,000/-,JenySmiss,A/cNo.010077,,瑞士銀行,Jeny想在銀行存錢,驗證Jeny帳戶詳細信息,余額,帳號,簽名,帳戶驗證完畢,,5,什么是JavaScript3-2,同樣,,Jeny,,Jeny想創(chuàng)建一個電子郵件帳戶,,Jeny@***24US,帳戶Id:密碼:年齡:國家:,******,,這樣,JavaScript將驗證數(shù)據(jù)并給出錯誤信息(如有),6,什么是JavaScript,JavaScript是一種腳本語言提供用戶交互動態(tài)更改內(nèi)容數(shù)據(jù)驗證,7,將JavaScript嵌入網(wǎng)頁,可以將JavaScript語句插入HTML文檔,方式如下:使用標(biāo)簽將語句嵌入文檔將JavaScript源文件鏈接到HTML文檔中,8,使用Script標(biāo)簽,JavaScript代碼,document.write("歡迎來到JavaScript世界");盡情享受學(xué)習(xí)的快樂!!!,,腳本代碼,設(shè)置語言,,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”-變量名,,,同時聲明和初始化變量vara=10;,,a=10;,聲明變量,聲明多個變量varx,y,z=10;,賦值,13,聲明變量,使用變量varx;x=prompt("淘寶網(wǎng)竟拍,請出一口價",1);document.write("拍賣價格"+x+"")//"+"用來連接多個字符串document.write("恭喜您,您以最高價拍賣成功!");alert("歡迎下次光臨!");,定義變量,賦值,輸出,prompt(“提示信息”,”默認值”)將彈出提示對話框,接受用戶的輸入。點擊確定返回輸入的字符串,點擊取消反饋空字符串。,14,,,變量a、b和c只能在其各自的函數(shù)中被訪問,,,變量的作用域,,,,腳本,函數(shù)function1局部變量a,函數(shù)function2局部變量b,函數(shù)function3局部變量c,可由函數(shù)1、函數(shù)2和函數(shù)3訪問,全局變量gg,,,,,全局變量不需要以var關(guān)鍵字進行聲明,但局部變量則必須以此關(guān)鍵字來聲明,15,常量,整型浮點型字符串型,和C語言一樣,js也有轉(zhuǎn)義字符,常用的就是:“\n”,16,數(shù)據(jù)類型,17,varx=100;vary;varz;document.write("競拍SONY數(shù)碼相機600萬像素"+x+"$起價");y=prompt("加多少銀子?","1");z=x+y;alert("您最終的出價\n"+z+"$");//”\n”用于換行顯示,Prompt函數(shù)返回輸入的字符串,“+”號的用法-1,10020?bug,+字符串相連:100+”200”,200,18,varx=100;vary;varz;document.write("競拍SONY數(shù)碼相機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值(notanumber),“+”號的用法-2,19,運算符,運算符對一個或多個變量或值(操作數(shù))進行運算,并返回一個新值根據(jù)所執(zhí)行的運算,運算符可分為以下類別:算術(shù)運算符比較運算符邏輯運算符,20,運算符,21,算術(shù)運算符-1,實現(xiàn)步驟:1.使用DreamWeaver設(shè)計頁面2.指定各個文本框的名稱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;},計算總價并顯示,…,添加單擊事件,單擊按鈕時調(diào)用“calcu()”函數(shù),算術(shù)運算符-2,獲取表單中輸入的數(shù)據(jù):document.表單名.表單元素名.value,,定義calcu()計算函數(shù),實現(xiàn)兩個數(shù)相乘的功能.定義函數(shù)的語法:function函數(shù)名(參數(shù)列表){//JavaScript語句;},,23,比較運算符,比較運算符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("購買總價超過500\n支付時將贈送超級Q幣2枚!");}….其他代碼略,同上例,,比較運算符,購買總價超過500,贈送超級Q幣2枚!,25,運算符,邏輯運算符,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)}….其他代碼略,同上例,,邏輯運算符,500-1000之間,贈送超級Q幣兩枚;1000-2000之間,贈送IBM智能鼠標(biāo)一只;2000以上,直接與貴賓臺聯(lián)系。,27,,條件語句用于測試條件。,if(條件){JavaScript代碼;},語法:,if語句2-1,如果要執(zhí)行多個語句,必須將這些語句放在一對大括號({})內(nèi)。但如果只要執(zhí)行一個語句,則可以省略大括號,28,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if((numb1!="")}}….其他代碼略,同上例,,If語句2-2,如果輸入框中的數(shù)據(jù)用戶漏填了,出現(xiàn)NaN的bug為什么呢?,29,ifelse語句2-1,if(條件){//JavaScript代碼;}else{//JavaScript代碼;},語法:,30,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if((numb1!="")},,If-else語句2-2,提示沒有填寫購買數(shù)量或者競拍價格?,31,if(條件1){if(條件2){//JavaScript代碼;}},語法:,嵌套if語句2-1,32,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if((numb1!="")…..,,嵌套If語句2-2,購買數(shù)量無意中輸入負數(shù),出現(xiàn)bug怎么辦?,33,switch語句2-1,switch(表達式){case常量1:JavaScript語句;break;case常量2:JavaScript語句;break;...default:JavaScript語句;},語法:,34,switch語句2-2,.....varf=document.calc.pay.value;//支付方式代號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("請重新選擇支付方式!");return;}varmoney=total*grade;//根據(jù)折扣率,計算實際總價document.calc.result.value=money;alert("您享受了"+grade*10+"折優(yōu)惠!");…..,,銀行轉(zhuǎn)帳-打6折電話支付-打7折郵政匯款-打8折Q幣支付-打9折,下拉列表框pay的選項和值,35,總結(jié),網(wǎng)頁中嵌入腳本有兩種方式:使用標(biāo)簽或外部*.js文件JavaScript中聲明變量:var變量名“+”可以用于兩個數(shù)相加,還可以用于連接字符串parseInt()和parseFloat()函數(shù)將字符串分別轉(zhuǎn)換為整型和小數(shù)運算符號分為算術(shù)運算符、比較運算符、邏輯運算符條件語句分為if語句,if-else語句、if的嵌套多分支語句switch根據(jù)表達式的值,進入不同的分支執(zhí)行,- 1.請仔細閱讀文檔,確保文檔完整性,對于不預(yù)覽、不比對內(nèi)容而直接下載帶來的問題本站不予受理。
- 2.下載的文檔,不會出現(xiàn)我們的網(wǎng)址水印。
- 3、該文檔所得收入(下載+內(nèi)容+預(yù)覽)歸上傳者、原創(chuàng)作者;如果您是本文檔原作者,請點此認領(lǐng)!既往收益都歸您。
下載文檔到電腦,查找使用更方便
9.9 積分
下載 |
- 配套講稿:
如PPT文件的首頁顯示word圖標(biāo),表示該PPT已包含配套word講稿。雙擊word圖標(biāo)可打開word文檔。
- 特殊限制:
部分文檔作品中含有的國旗、國徽等圖片,僅作為作品整體效果示例展示,禁止商用。設(shè)計者僅對作品中獨創(chuàng)性部分享有著作權(quán)。
- 關(guān) 鍵 詞:
- 北大 青鳥 軟件工程師 HTML
鏈接地址:http://www.3dchina-expo.com/p-11493059.html