Web前端开发（HTML5+CSS3+JavaScript） 课件 第9章 JavaScript基础2

Web前端基础技术CSSJSHTML第9章JavaScript基础(2/2)Contents目录JavaScript概述数据类型变量定义与使用运算符与表达式程序结构字符串、数组的常用方法五、程序结构：类似C和Java1.顺序结构：逐条语句顺序执行。包括：顺序结构；分支结构；循环结构输入对话框：prompt(字符串提示信息，默认值);返回值为字符串

注意，参数均为可选！按“确定”按钮而无输入则返回空字符串，否则返回输入的字符串值；按“取消”按钮则返回null.保留小数：value.toFixed(n)//n是指小数位数示例：1.接收用户输入半径值；2.计算并输出圆面积(Math.PI*r*r)，结果保留两位小数。<script>

//弹出输入对话框prompt()varr=prompt(“请输入半径”,20);//提示，默认值//默认使用Number转换来进行除+之外的算术运算

vararea=Math.PI*r*r;

//结果保留两位小数-四舍五入

alert(area.toFixed(2));

</script>If(条件表达式)｛语句体;｝/*如果语句体仅有一条语句，大括号可以省略*/示例：如果输入是数字，则求其面积2.分支结构-单分支结构根据条件执行相应的语句体。条件表达式的值为：0、NaN、undefined、null和

空字符串””时，都表示条件不成立，等价于false任何除0外的数字，以及非空字符串，等于true//如果点击"取消"按钮，返回null；在条件表达式中自动转换为布尔类型==》false//如果单击"确定"按钮"，而且未输入，则返回空字符串"",在条件表达式中自动转换为布尔类型==》false//如果单击"确定"按钮"，有输入，则输入的字符串值

varr=prompt("请输入半径",0);//如果有输入，而且为数字，则计算

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

vararea=Math.PI*r*r;//保留两位小数输出

console.log(area.toFixed(2));}if(条件表达式){语句体1；}else{语句体2;}分析，prompt对话框的使用和类型转换：

取消：返回null值；确定：

返回输入的字符串；但也可能是0，或者是空字符串和其他非数字；示例：输入一个数，转换为数字，如果可以转换，判断该数是否是奇数还是偶数2.分支结构-两分支结构<script>

varnum=prompt("请输入一个数：");

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

if(num%2==0)alert("偶数");

elsealert("奇数");

}else{

alert("你取消了或者输入非法数字！");

}</script>varnum1=prompt("输入数1")varnum2=prompt("输入数2")//按“确定”按钮但没有输入，或者按了"取消"按钮if(!num1||!num2){//没有输入，或者取消alert("取消计算")}else{//有输入if(isNaN(num1)||isNaN(num2)){alert("存在非数字，不能计算")}else{//必须转换为数字才能相加num1=Number(num1)num2=Number(num2)alert(num1+num2)}}试一试练习：接收用户从键盘的输入的两个数：判断是否都为数字，仅输入数字时，在页面上输出两数相加的结果；否则输出提示信息：”输入为非数字，无法计算”If(条件表达式){语句体1}elseif(条件表达式){语句体2}…else{语句体n

}示例：输入百分制分数，输出对应的分数等级2.分支结构-多分支结构if注意执行顺序<script>varnum=prompt("请输入分数:");//假如取消、没有输入，或者输入不是数字

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: {/*所有条件不满足时执行的语句体*/}}2.分支结构-多分支结构switch

规则：1.switch使用全等(绝对等)===判断2.case后跟单一常数表达式值如果没有break将全部顺序都执行示例：等级制转换为百分制。A：90~100，B：80~89，C：70~79，D：60~69，E：<60输入A-E，输出分数范围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("转换结果为："+str)}elsealert(“取消或没有输入")vargrade//保存等级varscore=prompt("输入分数")score=parseInt(score/10)//仅取整数部分//score=Math.floor(score/10)//去掉小数部分，得到整数部分

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

}alert("等级是："+grade)课外：百分制转换为等级制。输入分数，判断分数等级：>=90A；[80-90)B；[70-80)C试一试此例使用多分支结构更简单；而如果输入等级，输出分数范围这种场景才适合使用switch1.基本循环结构：for结构：语法：for(vari=0;i<n;i++){语句体;}

2.列举循环语法：for(varindexinarr){语句体；}3.循环结构：for结构满足条件前提下，重复执行语句体。示例，列举数组的每一个元素vararrs=[10,32,100]//定义并初始化数组

//1.使用循环结构for(vari=0;i<arrs.length;i++)console.log(arrs[i])//2.使用列举循环:对于数组，依次取得下标for(varindexinarrs)console.log(arrs[index])varstudent={name:'张三',age:18,sex:'男'}for(varpropinstudent){console.log(“属性名“,prop,“，属性值："+student[prop])}结果为：属性名name，属性值：张三属性名age，属性值：18属性名sex，属性值：男示例，列举对象的属性和属性值

属性名如果是变量，使用：对象[变量名]

属性名是常量，使用：对象.属性名//3.使用列举循环:对于对象，依次取得属性名

//对象数组

//books类型数组

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]);}}示例，列举对象数组的每一个对象的属性和属性值代码分析：产生10个10-20的整数随机数，并在控制台逐个输出；4.while结构：语法：while(条件表达式){语句体；}条件表达式通常是对循环变量的判断，注意在循环体中需要有退出循环的条件

//1.产生随机数【0-1)varrnd=Math.random();console.log(rnd);//2.产生10-20的随机数

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

console.log(rnd);

//产生10个，10-20的随机数

vartimes=0;varrnds=[]while(times<10){rnds[times]=10+Math.round(Math.random()*10)times++}for(varindexinrnds){console.log("随机数"+index+":",rnds[index])}随机数计算公式：下限+Math.round(Math.random()*(上限-下限))试一试关于continue/break的使用//偶数累加<script>

varsum=0

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

if(i%2!=0)continue

//直接继续下一次循环,不执行其后续语句

sum+=i//累加

if(sum>1000)break

//退出循环

}

alert(i+“,”+sum)//结果</script>代码分析：从1到100，计算偶数相加的结果，当结果超过1000退出，求得当前的数。vari=0varsum=0

while(i<=100){i++

if(i%2!=0)continue

sum+=i

if(sum>1000)break;

}//结果alert(i+“,”+sum)5.do-while结构：课外：猜数小程序；语法：do{语句体;}while(条件表达式);要求：产生一个范围内(1-10)的随机整数，判断用户输入是否正确，如果输入大了或者小了，提示，继续输入；如果输入正确，提示后退出猜数；如果用户没有输入，退出程序。//1-10varnum//保存用户输入的数varrnd=1+Math.round((Math.random()*9))varisExit=falseconsole.log(rnd)//测试验证do{num=prompt("猜猜是多少？1-10")if(num==null){alert("结束猜数！");break;}if(num==’’||isNaN(num)){alert("输入不是数字，继续猜")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.字符串拆分数组：split(‘分隔字符’)，结果为数组；4.数组转换为字符串：join(字符串)，按指定字符将数组元素连接为字符串。5.取字串：substr(开始下标[，长度])/subString(开始下标，结束下标(不包含)

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

varstr="JS基础语法";

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

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

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

//2.replace("原子串","新子串"),将子串替换为新子串，注意，不会改变原来的字串

//将"语法"替换为"应用"

varnewStr=str.replace(“语法”,“应用”);//如果参数2为空字符串，则相当删除子串

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

//3.split("分隔字符")按指定的分隔符，将字符串拆分为数组

str="HTML,CSS,JavaScrip";

//按逗号拆分成数组

vararrs=str.split(",");

console.log(arrs);

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

将数组连接成字符串，使用指定分隔符

newStr=arrs.join("|");//如果参数为空字符串，则直接连接

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

//5.substr(开始位置，长度)，取子串，如果不指定长度，则从指定位置开始取全部字子串

//从0开始，取四个字符

newnewStr=str.substr(0,4)

console.log("取得子串为：",newStr);试一试代码分析：字符串常用方法的使用5.数组及其常用方法数组的主要属性：长度length定义和使用数组：vararr=[];//定义空数组使用：arr[0]=1;arr[1]=2;arr[2]=3;主要方法(增、删、查、改)：添加元素push；排序sort；反转reverse；删除指定下标的元素splice;查找元素的下标indexOf注意：这些方法，除了查找，将直接改变原数组的内容//定义数组并初始化vararr=[1,3]//追加2个元素，当前arr的结果为；131011arr.push(10,11)

//插入2元素：当前arr的结果为：45131011arr.unshift(4,5)//移除第一个元素,当前arr的结果为：5131011arr.shift()

//移除最