Web前端開發(fā)（HTML5+CSS3+JavaScript） 課件 第9章 JavaScript基礎2

Web前端基礎技術CSSJSHTML第9章JavaScript基礎(2/2)Contents目錄JavaScript概述數(shù)據(jù)類型變量定義與使用運算符與表達式程序結構字符串、數(shù)組的常用方法五、程序結構：類似C和Java1.順序結構：逐條語句順序執(zhí)行。包括：順序結構；分支結構；循環(huán)結構輸入對話框：prompt(字符串提示信息，默認值);返回值為字符串

注意，參數(shù)均為可選！按“確定”按鈕而無輸入則返回空字符串，否則返回輸入的字符串值；按“取消”按鈕則返回null.保留小數(shù)：value.toFixed(n)//n是指小數(shù)位數(shù)示例：1.接收用戶輸入半徑值；2.計算并輸出圓面積(Math.PI*r*r)，結果保留兩位小數(shù)。<script>

//彈出輸入對話框prompt()varr=prompt(“請輸入半徑”,20);//提示，默認值//默認使用Number轉(zhuǎn)換來進行除+之外的算術運算

vararea=Math.PI*r*r;

//結果保留兩位小數(shù)-四舍五入

alert(area.toFixed(2));

</script>If(條件表達式)｛語句體;｝/*如果語句體僅有一條語句，大括號可以省略*/示例：如果輸入是數(shù)字，則求其面積2.分支結構-單分支結構根據(jù)條件執(zhí)行相應的語句體。條件表達式的值為：0、NaN、undefined、null和

空字符串””時，都表示條件不成立，等價于false任何除0外的數(shù)字，以及非空字符串，等于true//如果點擊"取消"按鈕，返回null；在條件表達式中自動轉(zhuǎn)換為布爾類型==》false//如果單擊"確定"按鈕"，而且未輸入，則返回空字符串"",在條件表達式中自動轉(zhuǎn)換為布爾類型==》false//如果單擊"確定"按鈕"，有輸入，則輸入的字符串值

varr=prompt("請輸入半徑",0);//如果有輸入，而且為數(shù)字，則計算

if(r&&!isNaN(r)){//使用Math對象的PI屬性

vararea=Math.PI*r*r;//保留兩位小數(shù)輸出

console.log(area.toFixed(2));}if(條件表達式){語句體1；}else{語句體2;}分析，prompt對話框的使用和類型轉(zhuǎn)換：

取消：返回null值；確定：

返回輸入的字符串；但也可能是0，或者是空字符串和其他非數(shù)字；示例：輸入一個數(shù)，轉(zhuǎn)換為數(shù)字，如果可以轉(zhuǎn)換，判斷該數(shù)是否是奇數(shù)還是偶數(shù)2.分支結構-兩分支結構<script>

varnum=prompt("請輸入一個數(shù)：");

if(num&&!isNaN(num)){

if(num%2==0)alert("偶數(shù)");

elsealert("奇數(shù)");

}else{

alert("你取消了或者輸入非法數(shù)字！");

}</script>varnum1=prompt("輸入數(shù)1")varnum2=prompt("輸入數(shù)2")//按“確定”按鈕但沒有輸入，或者按了"取消"按鈕if(!num1||!num2){//沒有輸入，或者取消alert("取消計算")}else{//有輸入if(isNaN(num1)||isNaN(num2)){alert("存在非數(shù)字，不能計算")}else{//必須轉(zhuǎn)換為數(shù)字才能相加num1=Number(num1)num2=Number(num2)alert(num1+num2)}}試一試練習：接收用戶從鍵盤的輸入的兩個數(shù)：判斷是否都為數(shù)字，僅輸入數(shù)字時，在頁面上輸出兩數(shù)相加的結果；否則輸出提示信息：”輸入為非數(shù)字，無法計算”If(條件表達式){語句體1}elseif(條件表達式){語句體2}…else{語句體n

}示例：輸入百分制分數(shù)，輸出對應的分數(shù)等級2.分支結構-多分支結構if注意執(zhí)行順序<script>varnum=prompt("請輸入分數(shù):");//假如取消、沒有輸入，或者輸入不是數(shù)字

if(!num||isNaN(num)){alert("取消或者非法輸入");}else{vargrade="";if(num>=90)grade="A";elseif(num>=80)grade="B";elseif(num>=70)grade="C";elseif(num>=60)grade="D";elsegrade="E";alert("對應的等級為："+grade);}</script>switch(變量){case常量1: {/*語句體1*/;break;}case常量2: {/*語句體2*/;break;}......case常量N: {/*語句體N*/;break;}default: {/*所有條件不滿足時執(zhí)行的語句體*/}}2.分支結構-多分支結構switch

規(guī)則：1.switch使用全等(絕對等)===判斷2.case后跟單一常數(shù)表達式值如果沒有break將全部順序都執(zhí)行示例：等級制轉(zhuǎn)換為百分制。A：90~100，B：80~89，C：70~79，D：60~69，E：<60輸入A-E，輸出分數(shù)范圍varch=prompt("請輸入字母：")if(ch){ch=ch.toUpperCase()varstr=""switch(ch){case"A":str=">=90";break;case"B":str=">70<=80";break;case"C":str=">60<=70";break;case"D":str="<60";break;default:str="非法輸入"}

alert("轉(zhuǎn)換結果為："+str)}elsealert(“取消或沒有輸入")vargrade//保存等級varscore=prompt("輸入分數(shù)")score=parseInt(score/10)//僅取整數(shù)部分//score=Math.floor(score/10)//去掉小數(shù)部分，得到整數(shù)部分

switch(score){case10:case9:grade="A";break;case8:grade="B";break;case7:grade="C";break;case6:grade="D";break;default:grade="E"

}alert("等級是："+grade)課外：百分制轉(zhuǎn)換為等級制。輸入分數(shù)，判斷分數(shù)等級：>=90A；[80-90)B；[70-80)C試一試此例使用多分支結構更簡單；而如果輸入等級，輸出分數(shù)范圍這種場景才適合使用switch1.基本循環(huán)結構：for結構：語法：for(vari=0;i<n;i++){語句體;}

2.列舉循環(huán)語法：for(varindexinarr){語句體；}3.循環(huán)結構：for結構滿足條件前提下，重復執(zhí)行語句體。示例，列舉數(shù)組的每一個元素vararrs=[10,32,100]//定義并初始化數(shù)組

//1.使用循環(huán)結構for(vari=0;i<arrs.length;i++)console.log(arrs[i])//2.使用列舉循環(huán):對于數(shù)組，依次取得下標for(varindexinarrs)console.log(arrs[index])varstudent={name:'張三',age:18,sex:'男'}for(varpropinstudent){console.log(“屬性名“,prop,“，屬性值："+student[prop])}結果為：屬性名name，屬性值：張三屬性名age，屬性值：18屬性名sex，屬性值：男示例，列舉對象的屬性和屬性值

屬性名如果是變量，使用：對象[變量名]

屬性名是常量，使用：對象.屬性名//3.使用列舉循環(huán):對于對象，依次取得屬性名

//對象數(shù)組

//books類型數(shù)組

varbooks=[{id:1,bookName:"三國演義",price:12.8,},{id:2,bookName:"紅樓夢",price:22.8,},];for(varindexinbooks){console.log(books[index])//輸出對象

//輸出對象的每一個屬性名和屬性值

for(varpropinbooks[index]){console.log(prop,books[index][prop]);}}示例，列舉對象數(shù)組的每一個對象的屬性和屬性值代碼分析：產(chǎn)生10個10-20的整數(shù)隨機數(shù)，并在控制臺逐個輸出；4.while結構：語法：while(條件表達式){語句體；}條件表達式通常是對循環(huán)變量的判斷，注意在循環(huán)體中需要有退出循環(huán)的條件

//1.產(chǎn)生隨機數(shù)【0-1)varrnd=Math.random();console.log(rnd);//2.產(chǎn)生10-20的隨機數(shù)

rnd=10+Math.round(Math.random()*10)

console.log(rnd);

//產(chǎn)生10個，10-20的隨機數(shù)

vartimes=0;varrnds=[]while(times<10){rnds[times]=10+Math.round(Math.random()*10)times++}for(varindexinrnds){console.log("隨機數(shù)"+index+":",rnds[index])}隨機數(shù)計算公式：下限+Math.round(Math.random()*(上限-下限))試一試關于continue/break的使用//偶數(shù)累加<script>

varsum=0

for(vari=1;i<=100;i++){

if(i%2!=0)continue

//直接繼續(xù)下一次循環(huán),不執(zhí)行其后續(xù)語句

sum+=i//累加

if(sum>1000)break

//退出循環(huán)

}

alert(i+“,”+sum)//結果</script>代碼分析：從1到100，計算偶數(shù)相加的結果，當結果超過1000退出，求得當前的數(shù)。vari=0varsum=0

while(i<=100){i++

if(i%2!=0)continue

sum+=i

if(sum>1000)break;

}//結果alert(i+“,”+sum)5.do-while結構：課外：猜數(shù)小程序；語法：do{語句體;}while(條件表達式);要求：產(chǎn)生一個范圍內(nèi)(1-10)的隨機整數(shù)，判斷用戶輸入是否正確，如果輸入大了或者小了，提示，繼續(xù)輸入；如果輸入正確，提示后退出猜數(shù)；如果用戶沒有輸入，退出程序。//1-10varnum//保存用戶輸入的數(shù)varrnd=1+Math.round((Math.random()*9))varisExit=falseconsole.log(rnd)//測試驗證do{num=prompt("猜猜是多少？1-10")if(num==null){alert("結束猜數(shù)！");break;}if(num==’’||isNaN(num)){alert("輸入不是數(shù)字，繼續(xù)猜")continue}

if(num==rnd){alert("猜對啦！");isExit=true}elseif(num>rnd){alert("大啦！")}else{alert("小啦！")}

}while(!isExit)console.log("結束了")可以使用

while(!isExit){}結構代替試一試4.常用對象的方法：字符串處理；1.字符串查找:indexOf(字符串[，位置])/反序查找lastIndexOf（字符串，位置）.返回值為-1則沒有找到，否則返回字符串的開始位置。查找位置默認從0開始。2.字符串替換：replace（‘原字符串’,’新字符串’）3.字符串拆分數(shù)組：split(‘分隔字符’)，結果為數(shù)組；4.數(shù)組轉(zhuǎn)換為字符串：join(字符串)，按指定字符將數(shù)組元素連接為字符串。5.取字串：substr(開始下標[，長度])/subString(開始下標，結束下標(不包含)

//1.indexOf("子串")查找子串的位置（下標）

varstr="JS基礎語法";

//查找"語法"所在的位置

varpos=str.indexOf("語法");

if(pos>=0)console.log(“找到了：”,pos);//如果沒有找到，則返回-1

//2.replace("原子串","新子串"),將子串替換為新子串，注意，不會改變原來的字串

//將"語法"替換為"應用"

varnewStr=str.replace(“語法”,“應用”);//如果參數(shù)2為空字符串，則相當刪除子串

console.log("原子串:",str,",替換后：",newStr);

//3.split("分隔字符")按指定的分隔符，將字符串拆分為數(shù)組

str="HTML,CSS,JavaScrip";

//按逗號拆分成數(shù)組

vararrs=str.split(",");

console.log(arrs);

//4.join("連接符")

將數(shù)組連接成字符串，使用指定分隔符

newStr=arrs.join("|");//如果參數(shù)為空字符串，則直接連接

console.log("連接后的字符串：",newStr);

//5.substr(開始位置，長度)，取子串，如果不指定長度，則從指定位置開始取全部字子串

//從0開始，取四個字符

newnewStr=str.substr(0,4)

console.log("取得子串為：",newStr);試一試代碼分析：字符串常用方法的使用5.數(shù)組及其常用方法數(shù)組的主要屬性：長度length定義和使用數(shù)組：vararr=[];//定義空數(shù)組使用：arr[0]=1;arr[1]=2;arr[2]=3;主要方法(增、刪、查、改)：添加元素push；排序sort；反轉(zhuǎn)reverse；刪除指定下標的元素splice;查找元素的下標indexOf注意：這些方法，除了查找，將直接改變原數(shù)組的內(nèi)容//定義數(shù)組并初始化vararr=[1,3]//追加2個元素，當前arr的結果為；131011arr.push(10,11)

//插入2元素：當前arr的結果為：45131011arr.unshift(4,5)//移除第一個元素,當前arr的結果為：5131011arr.shift()

//移除最