計(jì)算機(jī)應(yīng)用技術(shù)第3章 JavaScript語(yǔ)法基礎(chǔ)

第2章JavaScript基礎(chǔ)理解JavaScript中變量的概念理解JavaScript中的數(shù)據(jù)類(lèi)型了解數(shù)據(jù)類(lèi)型的轉(zhuǎn)換學(xué)習(xí)目標(biāo)010203掌握J(rèn)avaScript的條件語(yǔ)句掌握J(rèn)avaScript的循環(huán)語(yǔ)句掌握函數(shù)的定義及其調(diào)用040506本章任務(wù)任務(wù)1顯示變量數(shù)據(jù)類(lèi)型任務(wù)2根據(jù)成績(jī)給出學(xué)生考評(píng)任務(wù)3實(shí)現(xiàn)猜數(shù)游戲任務(wù)4制作簡(jiǎn)易計(jì)算器任務(wù)1顯示變量數(shù)據(jù)類(lèi)型任務(wù)描述如何在頁(yè)面顯示變量的數(shù)據(jù)類(lèi)型？演示任務(wù)1：在頁(yè)面顯示變量的數(shù)據(jù)類(lèi)型任務(wù)分析在頁(yè)面顯示變量數(shù)據(jù)類(lèi)型需要以下步驟：1.聲明變量2.為變量賦值3.使用typeof方法顯示數(shù)據(jù)類(lèi)型名稱(chēng)實(shí)現(xiàn)思路變量變量以字母或下劃線開(kāi)頭區(qū)分大小寫(xiě)可以包含數(shù)字、字母變量的聲明和賦值varcount;count=5;定義變量賦值

“var”－用于聲明變量的關(guān)鍵字“count”－變量名varx,y,z=10;varcount=10;同時(shí)聲明和賦值變量聲明多個(gè)變量示例示例示例示例聲明變量

document.write("<h1>淘寶相機(jī)競(jìng)拍</h1>"); varprice=1000; varaddPrice=prompt("相機(jī)競(jìng)拍，請(qǐng)出一口價(jià):","1"); vartotal=price+addPrice; document.write(“<h2>你購(gòu)買(mǎi)相機(jī)的價(jià)格："+total+”</h2>”);定義變量并賦值賦值輸出示例變量的作用域變量a、b和c只能在其各自的函數(shù)中被訪問(wèn)可由函數(shù)1、函數(shù)2和函數(shù)3訪問(wèn)腳本函數(shù)function1局部變量a函數(shù)function2局部變量b函數(shù)function3局部變量c全局變量test根據(jù)編程目的決定將變量聲明為全局變量還是局部變量數(shù)據(jù)類(lèi)型數(shù)值型整型、浮點(diǎn)型字符串型單引號(hào)或雙引號(hào)引起來(lái)布爾型true,falseNull、undefined弱類(lèi)型，區(qū)分大小寫(xiě)，句尾分號(hào)非強(qiáng)制要求。類(lèi)型轉(zhuǎn)換toString()：把其他類(lèi)型轉(zhuǎn)換成字符串如:varnum=35;num.toString()parseInt(String)、parseFloat(String)將字符串轉(zhuǎn)換為整型、浮點(diǎn)型如:parseInt(“34.45”)將字符串“34.45”轉(zhuǎn)換為浮點(diǎn)值34.45基本數(shù)據(jù)類(lèi)型轉(zhuǎn)換Boolean(value)：把值轉(zhuǎn)換為布爾型，如Boolean(“”)返回false、Boolean(“-1”)返回trueNumber(value)：將值轉(zhuǎn)換為數(shù)值型String(value)：把值轉(zhuǎn)換為字符串toFixed()：把值按照指定的小數(shù)位返回?cái)?shù)字的字符串表示運(yùn)算符算術(shù)運(yùn)算符+、-、*、/、%、++、--比較運(yùn)算符==、!=、>、>=、<、<=邏輯運(yùn)算符&&、||、！條件運(yùn)算符？：document.write("<h1>淘寶相機(jī)競(jìng)拍</h1>");

varprice=1000;

varaddPrice=prompt("相機(jī)競(jìng)拍，請(qǐng)出一口價(jià):","1"); vartotal=price+parseFloat(addPrice); document.write(“<h2>你購(gòu)買(mǎi)相機(jī)的價(jià)格："+total+”</h2>”);“+”號(hào)的用法100

1000100

?bugPrompt函數(shù)返回輸入的字符串+字符串相連：1000+”100”示例任務(wù)實(shí)現(xiàn)document.write("<h2>對(duì)變量或值調(diào)用typeof運(yùn)算符返回值：</h2>");varwidth,height=160,name="Timmy";vardate=newDate();vararrlist=newArray();document.write(typeof(width)+"</br>");document.write(typeof(height)+"</br>");document.write(typeof(name)+"</br>");document.write(typeof(true)+"</br>");document.write(typeof(null)+"</br>");document.write(typeof(date)+"</br>");document.write(typeof(arrlist));定義時(shí)間日期對(duì)象定義數(shù)組練一練使用prompt語(yǔ)句完成加法運(yùn)算練習(xí)任務(wù)2根據(jù)成績(jī)給出學(xué)生考評(píng)任務(wù)描述提示用戶(hù)輸入成績(jī)，根據(jù)成績(jī)給出學(xué)生的考評(píng)：如果成績(jī)?cè)?0-100分，考評(píng)為“優(yōu)”，如果成績(jī)?cè)?0-89分之間，考評(píng)為“良”，成績(jī)?nèi)绻?0-79分之間，考評(píng)為“中”，成績(jī)?nèi)绻?0-69分之間，考評(píng)為“及格”，否則為“不及格”。演示任務(wù)2：根據(jù)成績(jī)給出學(xué)生考評(píng)任務(wù)分析實(shí)現(xiàn)思路使用輸入語(yǔ)句提示用戶(hù)輸入成績(jī)，并將該成績(jī)進(jìn)行轉(zhuǎn)換成數(shù)值類(lèi)型使用if條件語(yǔ)句或switch結(jié)構(gòu)判斷用戶(hù)輸入的成績(jī)?cè)谀膫€(gè)區(qū)間范圍使用輸出語(yǔ)句將評(píng)價(jià)等級(jí)輸出條件語(yǔ)句if條件語(yǔ)句switch多分支語(yǔ)句if(條件){//JavaScript代碼;}else{//JavaScript代碼;}switch(表達(dá)式){case常量1: JavaScript語(yǔ)句1; break; case常量2: JavaScript語(yǔ)句2; break; ... default:JavaScript語(yǔ)句3;}任務(wù)實(shí)現(xiàn)document.write("<h1>成績(jī)?cè)u(píng)定</h1>"); varscore=Number(prompt("請(qǐng)輸入你的成績(jī):","")); varleval;//成績(jī)等級(jí) if(isNaN(score)) { alert("你輸入的不是數(shù)字"); }else{ if(score<0||score>100){ alert("你輸入的成績(jī)不在有效范圍"); }else{ //采用多分支結(jié)構(gòu)來(lái)實(shí)現(xiàn) switch(parseInt(score/10)){ case10: case9: leval="優(yōu)秀"; break; case8: leval="良好"; break; case7: leval="中等"; break; case6: leval="及格"; break; default: leval="不及格"; break; } document.write("<h2>你的成績(jī)?cè)u(píng)定為："+leval+"</h2>"); } }score保存成績(jī)使用Number()或parseInt()對(duì)輸入的成績(jī)進(jìn)行類(lèi)型轉(zhuǎn)換，轉(zhuǎn)換失敗返回NaN判斷用戶(hù)輸入的數(shù)是否為數(shù)字，isNaN()判斷參數(shù)是否是NaN:返回true說(shuō)明是NaN則不是一個(gè)數(shù)字返回false不是NaN則是數(shù)字練一練使用prompt和控制語(yǔ)句設(shè)計(jì)四則運(yùn)算練習(xí)任務(wù)3實(shí)現(xiàn)猜數(shù)游戲任務(wù)描述系統(tǒng)隨機(jī)生成一個(gè)1-100之間的數(shù)，然后讓玩家猜該數(shù)。若玩家猜對(duì)該數(shù)，游戲則結(jié)束；若玩家猜得不對(duì)，則計(jì)算機(jī)告知玩家，數(shù)字猜大了還是小了；并提示玩家是否繼續(xù)游戲，玩家點(diǎn)擊確定則繼續(xù)游戲，否則退出游戲。演示任務(wù)3：猜數(shù)游戲任務(wù)分析實(shí)現(xiàn)思路由系統(tǒng)生成一個(gè)1-100之間的隨機(jī)整數(shù)提示用戶(hù)輸入一個(gè)1-100之間的整數(shù)，并將用戶(hù)輸入的數(shù)轉(zhuǎn)換為整型將用戶(hù)輸入的數(shù)與隨機(jī)生成的數(shù)進(jìn)行比較，如果相等則提示猜對(duì)了，否則給出提示，并詢(xún)問(wèn)用戶(hù)是否繼續(xù)游戲如果用戶(hù)在提示框中點(diǎn)擊確定則使用循環(huán)重復(fù)第一步，直到用戶(hù)點(diǎn)擊取消退出游戲1.循環(huán)語(yǔ)句for語(yǔ)句while語(yǔ)句for…in語(yǔ)句中斷循環(huán)語(yǔ)句for(初始化;條件;增量){

語(yǔ)句集;

}while(條件)do{{語(yǔ)句集

語(yǔ)句集;}while();}for(變量in對(duì)象){

語(yǔ)句集;

}break語(yǔ)句continue語(yǔ)句任務(wù)實(shí)現(xiàn)varnum=Math.floor(Math.random()*100+1);

do{varguess=parseInt(prompt("下面進(jìn)行猜數(shù)游戲\n請(qǐng)輸入1-100之間的整數(shù)：",""));if(guess>num){ alert("^_^,你猜的數(shù)字大了"); go_on=confirm("是否繼續(xù)游戲？");}elseif(guess<num){ alert("^_^,你猜的數(shù)字小了"); go_on=confirm("是否繼續(xù)游戲？"); }else{ alert("恭喜你，猜對(duì)了，幸運(yùn)數(shù)字是："+num); break; }}while(go_on);alert("謝謝參與游戲！");產(chǎn)生1～100之間的隨機(jī)整數(shù)練一練輸入打印行數(shù)，打印輸出由*組成的直角三角形。練習(xí)任務(wù)4制作簡(jiǎn)易計(jì)算器任務(wù)描述在頁(yè)面實(shí)現(xiàn)簡(jiǎn)易計(jì)算器，用戶(hù)在頁(yè)面輸入第一個(gè)數(shù)和第二個(gè)數(shù)，點(diǎn)擊相應(yīng)操作符將操作結(jié)果顯示在計(jì)算結(jié)果文本框中。演示任務(wù)4：簡(jiǎn)易計(jì)算器任務(wù)分析實(shí)現(xiàn)思路設(shè)計(jì)靜態(tài)頁(yè)面。獲取用戶(hù)輸入文本框的值。使用函數(shù)定義對(duì)應(yīng)的加、減、乘、除操作。單擊按鈕時(shí)調(diào)用函數(shù)。什么是函數(shù)函數(shù)的含義：類(lèi)似于Java中的方法，是執(zhí)行特定任務(wù)的語(yǔ)句塊。函數(shù)有兩種：JavaScript自帶的系統(tǒng)函數(shù)(例如IsNaN函數(shù))、用戶(hù)自定義函數(shù)function函數(shù)名(參數(shù)1,參數(shù)2，…){語(yǔ)句;[return[返回值];]}自定義函數(shù)語(yǔ)法調(diào)用函數(shù)：三種情況1.函數(shù)調(diào)用和表單元素的事件一起使用，格式：事件名＝“函數(shù)名()”;2.在腳本中直接調(diào)用，格式：函數(shù)名();3.在腳本中通過(guò)元素事件調(diào)用，格式：事件名=函數(shù)名；如何使用函數(shù)functionshowHello(){varcount=document.myForm.txtCount.value;for(i=0;i<count;i++)document.write("<H2>HelloWorld</H2>");}示例定義一個(gè)showHello函數(shù)，通過(guò)三種方式調(diào)用該函數(shù)。<inputtype="submit"name="Submit"value="顯示HelloWorld"onClick="showHello()">在<script>標(biāo)簽對(duì)中添加語(yǔ)句：showHello();在<script>標(biāo)簽對(duì)中添加語(yǔ)句：window.onload=showHello;三種調(diào)用方式表示單擊此按鈕時(shí)，調(diào)用函數(shù)showHello()執(zhí)行如何使用函數(shù)把showHello定義成有參函數(shù)，使用prompt()提示用戶(hù)每次輸出信息的行數(shù)，然后將prompt()方法返回的值作為參數(shù)傳遞給函數(shù)showHello如何使用函數(shù)示例把showHello定義成有參函數(shù)，使用prompt()提示用戶(hù)每次輸出信息的行數(shù)，然后將prompt()方法返回的值作為參數(shù)傳遞給函數(shù)showHellofunctionshowHello(count){ for(vari=0;i<count;i++){ document.write("<h3>HelloEverybody!</h3>"); }}<inputtype=“button”name=“btn”id=“btn”value=“輸入顯示信息的次數(shù)"onclick="showHello(prompt('請(qǐng)輸入顯示信息的次數(shù)：'，''))"/>整個(gè)語(yǔ)句類(lèi)似賦值語(yǔ)句：varshowHello=變量值;匿名函數(shù)匿名函數(shù)定義的整個(gè)語(yǔ)句可以像值一樣賦給一個(gè)變量進(jìn)行保存，也可以將它賦給一個(gè)事件觸發(fā)，因此可用變量名或事件名調(diào)用匿名函數(shù)把showHello改為匿名函數(shù)示例varshow=function(count){ for(vari=0;i<count;i++){ document.write("<h3>HelloEverybody!</h3>"); }};<inputtype="button"name="btn"id="btn"value="輸入顯信息的次數(shù)"onclick="show(prompt('請(qǐng)輸入顯示信息的次數(shù)：'，''))"/>整個(gè)語(yǔ)句類(lèi)似賦值語(yǔ)句：varshow=變量值;匿名函數(shù)匿名函數(shù)定義的整個(gè)語(yǔ)句可以賦給某個(gè)變量，該變量可以作為函數(shù)的參數(shù)進(jìn)行傳遞定義計(jì)算數(shù)的平方的匿名函數(shù)，使用事件名調(diào)用該函數(shù)匿名函數(shù)匿名函數(shù)定義的整個(gè)語(yǔ)句可以賦給某個(gè)變量，該變量可以作為函數(shù)的參數(shù)進(jìn)行傳遞定義計(jì)算數(shù)的平方的匿名函數(shù)，使用事件名調(diào)用該函數(shù)示例<scripttype="text/javascript">window.onload=function(){ document.getElementById("btn").onclick=function(){ varcount=prompt("請(qǐng)輸入計(jì)算的數(shù):"); alert(count+"的平方值是："+count*count); } }</script></head><body> <inputtype="button"name="btn"id="btn"value="計(jì)算數(shù)的平方值"/></body>document.getElementById(“btn”)表示獲取頁(yè)面id為“btn”的按鈕元素onclick指觸發(fā)按鈕的單擊事件時(shí)調(diào)用匿名函數(shù)window.onload是頁(yè)面加載時(shí)觸發(fā)的事件，此處定義了一個(gè)匿名函數(shù)簡(jiǎn)單了解獲取文本框值的方法document.表單名.文本框名.valuedocument.getElementById(id).value從文本框中獲取的值都是字符串，若進(jìn)行加減，都要進(jìn)行類(lèi)型轉(zhuǎn)換。任務(wù)實(shí)現(xiàn)使用有參函數(shù)在簡(jiǎn)易計(jì)算器中4個(gè)按鈕調(diào)用的函數(shù)的代碼很類(lèi)似，只有運(yùn)算符號(hào)不一樣，將運(yùn)算符號(hào)作為函數(shù)的參數(shù)即可。怎么用一個(gè)函數(shù)來(lái)代替4個(gè)結(jié)構(gòu)相似的函數(shù)？定義有參函數(shù)JavaScript代碼<scriptlanguage="JavaScript">functioncompute(op){varnum1,num2; num1=parseFloat(document.myform.txtNum1.value); num2=parseFloat(document.myform.txtNum2.value); if(op=="+") document.myform.txtResult.value=num1+num2; if(op=="-") document.myform.txtResult.value=num1-num2; if(op=="*") document.myform.txtResult.value=num1*num2; if(op=="/"&&num2!=0) document.myform.txtResult.value=num1/num2;}</script>定義有參函數(shù)compute()，完成計(jì)算功能，op參數(shù)代表運(yùn)算符號(hào)。調(diào)用有參函數(shù)<formaction=""method="post"name="myform"id="myform">……<tr><td><inputname="addButton2"type="button“ id="addButton2"value="＋"onClick="compute('+')"></td><td><inputname="subButton2"type="button" id="subButton2"value="－"onClick="compute('-')"></td><td><inputname="mulButton2"t