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

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

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

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

vararea=Math.PI*r*r;

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

alert(area.toFixed(2));

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

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

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

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

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

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

取消：返回null值；確定：

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

varnum=prompt("請(qǐng)輸入一個(gè)數(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("取消計(jì)算")}else{//有輸入if(isNaN(num1)||isNaN(num2)){alert("存在非數(shù)字，不能計(jì)算")}else{//必須轉(zhuǎn)換為數(shù)字才能相加num1=Number(num1)num2=Number(num2)alert(num1+num2)}}試一試練習(xí)：接收用戶從鍵盤的輸入的兩個(gè)數(shù)：判斷是否都為數(shù)字，僅輸入數(shù)字時(shí)，在頁面上輸出兩數(shù)相加的結(jié)果；否則輸出提示信息：”輸入為非數(shù)字，無法計(jì)算”If(條件表達(dá)式){語句體1}elseif(條件表達(dá)式){語句體2}…else{語句體n

}示例：輸入百分制分?jǐn)?shù)，輸出對(duì)應(yīng)的分?jǐn)?shù)等級(jí)2.分支結(jié)構(gòu)-多分支結(jié)構(gòu)if注意執(zhí)行順序<script>varnum=prompt("請(qǐng)輸入分?jǐn)?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("對(duì)應(yīng)的等級(jí)為："+grade);}</script>switch(變量){case常量1: {/*語句體1*/;break;}case常量2: {/*語句體2*/;break;}......case常量N: {/*語句體N*/;break;}default: {/*所有條件不滿足時(shí)執(zhí)行的語句體*/}}2.分支結(jié)構(gòu)-多分支結(jié)構(gòu)switch

規(guī)則：1.switch使用全等(絕對(duì)等)===判斷2.case后跟單一常數(shù)表達(dá)式值如果沒有break將全部順序都執(zhí)行示例：等級(jí)制轉(zhuǎn)換為百分制。A：90~100，B：80~89，C：70~79，D：60~69，E：<60輸入A-E，輸出分?jǐn)?shù)范圍varch=prompt("請(qǐng)輸入字母：")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)換結(jié)果為："+str)}elsealert(“取消或沒有輸入")vargrade//保存等級(jí)varscore=prompt("輸入分?jǐn)?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("等級(jí)是："+grade)課外：百分制轉(zhuǎn)換為等級(jí)制。輸入分?jǐn)?shù)，判斷分?jǐn)?shù)等級(jí)：>=90A；[80-90)B；[70-80)C試一試此例使用多分支結(jié)構(gòu)更簡單；而如果輸入等級(jí)，輸出分?jǐn)?shù)范圍這種場景才適合使用switch1.基本循環(huán)結(jié)構(gòu)：for結(jié)構(gòu)：語法：for(vari=0;i<n;i++){語句體;}

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

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

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

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

//對(duì)象數(shù)組

//books類型數(shù)組

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

//輸出對(duì)象的每一個(gè)屬性名和屬性值

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

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

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

console.log(rnd);

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

vartimes=0;varrnds=[]while(times<10){rnds[times]=10+Math.round(Math.random()*10)times++}for(varindexinrnds){console.log("隨機(jī)數(shù)"+index+":",rnds[index])}隨機(jī)數(shù)計(jì)算公式：下限+Math.round(Math.random()*(上限-下限))試一試關(guān)于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)//結(jié)果</script>代碼分析：從1到100，計(jì)算偶數(shù)相加的結(jié)果，當(dāng)結(jié)果超過1000退出，求得當(dāng)前的數(shù)。vari=0varsum=0

while(i<=100){i++

if(i%2!=0)continue

sum+=i

if(sum>1000)break;

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

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

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

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

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

varstr="JS基礎(chǔ)語法";

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

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

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

//2.replace("原子串","新子串"),將子串替換為新子串，注意，不會(huì)改變?cè)瓉淼淖执?/p>

//將"語法"替換為"應(yīng)用"

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

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

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

str="HTML,CSS,JavaScrip";

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

vararrs=str.split(",");

console.log(arrs);

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

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

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

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

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

//從0開始，取四個(gè)字符

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；刪除指定下標(biāo)的元素splice;查找元素的下標(biāo)indexOf注意：這些方法，除了查找，將直接改變?cè)瓟?shù)組的內(nèi)容//定義數(shù)組并初始化vararr=[1,3]//追加2個(gè)元素，當(dāng)前arr的結(jié)果為；131011arr.push(10,11)

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

//移除最