day8 js
一、流程控制
什么是流程控制?
按照一定的流程选择要执行的代码
流程控制分为三种结构:
顺序结构、选择(分支)结构、循环结构
1.1顺序结构
代码从上至下 一行一行进行解析!
1.2分支结构
虽然有多种选择,但是最终只会选择一个。
if语句和switch语句
if语句分为三种分支
1.2.1单分支
语法:
if(条件表达式){
要执行的代码块
}
结构说明:
当条件表达式成立时,才会执行代码块。
条件表达式成立指的是:得到布尔类型的值为true 就表示成立。
流程图:
输入对话框
window.prompt(Message,defaultValue);
在浏览器中弹出一个输入对话框
这个方法有两个参数,这两个参数可以写也可以不写
Message:表示提示信息
defaultValue:默认值
如果用户点击了确定按钮会得到一个字符串类型的数据!
如果用户点击了取消按钮会得到 null
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //如果考试分数为100分 则输出满足 var score = window.prompt("请输入您的考试成绩",100);//prompt两个参数,一个是输出的内容,一个是默认值 //拿score变量的值与100进行比较 如果相等就表示是满分 //将等于号右的值赋值给左边的变量 score 然后JS会将这个变量自动转换为布尔类型 if(score == 100){ document.write("满分"); } </script> </body> </html>
1.2.2双分支
语法:
if(条件表达式){
执行代码块1
}else{
执行代码块2
}
结构说明:
如果条件表达式成立的话就执行代码块1,反之如果不成立就执行代码块2
流程图:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //如果分类大于等于60 就是及格万岁 如果小于60就是太渣了 var score = window.prompt("请输入您的考试成绩",100); if(score >= 60){ document.write("及格万岁"); }else{ document.write("太渣了"); } </script> </body> </html>
如何使用断点调试工具:
谷歌的断点调试
第一步:使用谷歌浏览器打开一个HTML文件
第二步:在浏览器中点击鼠标的右键 选择“检测”
第三步:选择器开发者人员工具中的“sources”选项卡
第四步:双击指定的HTML文件
第五步:找到对应的地方设置断点 鼠标双击就可以设置断点
第六步:要刷新一下当前的HTML文件
1.2.3多分支
多分支也称之为多条件判断
语法:
if(条件表达式1){
代码块1
}else if(条件表达式2){
代码块2
} else if(条件表达式3){
代码块3
} else if(条件表达式n){
代码块n
}else{
默认代码块
}
结构说明:
l 第一步:先去判断条件表达式1是否成立 如果成立就执行代码块1 然后就结束if语句 如果不成立
l 第二步:判断条件表达式2是否成立 如果成立就执行代码块2 然后就结束if语句 如果不成立
l 第三步:判断条件表达式3是否成立 如果成立就执行代码块3 然后就结束if语句 如果不成立
l 第四步:判断条件表达式n是否成立 如果成立就会执行代码块n 然后就结束if语句 如果不成立
l 第五步:前提是有写else语句 else语句可以省略不写 上面的所有的条件表达式都不成立 就会执行else语句里面的代码块
流程图:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //如果考试成绩在90到100之间 就输出优秀 //如果在80到90之间 就输出良好 //如果在70到80之间 就输出中等 //如果在60到60之间 就输出及格 //如果小于就是不及格 var score = window.prompt("请输入您的考试成绩",100); if(score >=90 && score <=100){ document.write("优秀"); }else if(score >=80){ document.write("良好"); }else if(score >=70){ document.write("中等"); }else if(score >=60){ document.write("及格"); }else{ document.write("不及格"); } </script> </body> </html>
1.2.3switch语句
语法:
switch(变量名){
case 值1:
代码块1;
break;
case 值2:
代码块2
break;
case 值3:
代码块3;
break;
case 值n:
代码块n;
break;
default:
默认执行的代码块!
}
结构说明:
switch语句它是拿小括号中变量的值去与每一个case后面的值进行全等比较 如果比较成功(得到布尔true) 就会执行对应的代码块 还要去查找是否有break关键字 如果有break关键字 那么switch语句就会结束 但是如果没有break关键字 就会先执行下面的代码块 然后再判断是否有break关键字 它要找到break关键字才会结束执行。如果说变量的值与case中每一个值都不相等 那么它就会执行默认的代码块
流程图:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //如果今天星期一 就去打篮球 //如果今天星期二 就去打冰球 //如果今天星期三 就去踢足球 //如果今天星期四 就去打麻将 //如果今天星期五 就去打台球 //如果是周末 就要写代码 var week = 1; switch(week){ case 1: document.write("打篮球"); break; case 2: document.write("打冰球"); break; case 3: document.write("踢足球"); break; case 4: document.write("打麻将"); break; case 5: document.write("打台球"); break; default: document.write("写代码"); } </script> </body> </html>
关于if语句与switch之间的区别:
一般if语句用于范围之间的判断
switch语句一般用于固定值之间的判断
因为SWITCH能够实现的功能 我们其实完全可以使用IF语句多分支来实现!
案例:输出今天星期几?
想办法获取到电脑的时间日期!在JavaScript中有一个时间日期的对象 这个对象它就可以获取到电脑的时间日期! Date对象 这个Date对象需要我们程序员手动的创建才会有
第二步:从时间日期对象中获取一周中的某一天 getDay()方法 这个方法的返回值 0~6之间的一个整数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //第一步:要创建对象 new Date() var myDate = new Date(); //将创建好的时间日期对象赋值给myDate变量 //对象是由属性和方法组成的 var week = myDate.getDay(); //调用Date对象的方法 从时间日期对象中获取一周中的某一天 getDay()方法 这个方法的返回值 0~6之间的一个整数 //判断week变量的值 var str = "今天星期"; switch(week){ case 1: str += "一"; break; case 2: str += "二"; break; case 3: str += "三"; break; case 4: str += "四"; break; case 5: str += "五"; break; case 6: str += "六"; break; default: str += "天"; } document.write(str); </script> </body> </html>
sublime-----àctrl+shift+p ----->pci sublime的在线安装,视频中是安装sublimecodeintel代码自动补全
1.3循环结构
在满足一定的条件下 重复执行某些代码!
for循环、while循环、do…while循环
1.3.1for循环
语法:
for(变量初始化;条件表达式;变量更新){
循环体 //重复做的事情
}
结构说明:
l 第一步:变量初始化 定义一个变量并给其赋值 它只会执行一次
l 第二步:判断条件表达式是否成立 如果成立就执行第三步 如果不成立就会结束for循环
l 第三步:假设条件表达式成立 执行循环体
l 第四步:对变量进行更新 变量更新完毕以后接下来就会重复第二步--à第三步--à第四步
l 一直到条件表达式不成立了 然后for循环才会结束
流程图:
例1:使用for循环来输出10个hello
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //for循环的格式 //for(变量初始化;条件表达式;变量更新){ // 循环体 要执行的代码 //} //1.定义一个变量i 值 为1 //判断变量i的值是否小于等于10 //如果成立就执行循环体 对变量进行更新 //再次判断变量i的值是否小于等于10 ................... for(var i=1;i<=10;i++){ document.write("hello<br/>"); } </script> </body> </html>
例2:使用for循环来输出1到100之间的数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //例2:使用for循环来输出1到100之间的数。 for(var i=1;i<=100;i++){ document.write(i+"<br/>"); } </script> </body> </html>
例3:使用for循环来求1到100之间的和
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //例3:使用for循环来求1到100之间的和 //肯定先要有1-100之间所有的数 var sum = 0; //保存每一次相加的结果 for(var i=1;i<101;i++){ sum += i; } document.write(sum); </script> </body> </html>
例4:求某一个数的阶乘
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //求5的阶乘 //先要有54321这些数 var sum = 1; //保存每一次相乘的结果 for(var i=5;i>=1;i--){ sum *=i; } document.write(sum); </script> </body> </html>
例5:使用for循环来求1到100之间的偶数的和。
第一种方法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //例5:使用for循环来求1到100之间的偶数的和。 //第一种方法:先有1-100之间所有的数 然后再来判断这些数到底是不是偶数 如果是才让它们相加 var sum = 0; for(var i=1;i<=100;i++){ //判断变量i是不是偶数 if(i % 2 == 0){ sum += i; } } document.write(sum); </script> </body> </html>
第二种方法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //例5:使用for循环来求1到100之间的偶数的和。 //第一种方法:先有1-100之间所有的数 然后再来判断这些数到底是不是偶数 如果是才让它们相加 var sum = 0; for(var i=1;i<=100;i++){ //判断变量i是不是偶数 if(i % 2 == 0){ sum += i; } } document.write(sum+"<hr/>"); //第二种方法: 是否能够得到偶数 ] var sum = 0; for(var j=2;j<=100;j+=2){ sum += j; } document.write(sum); </script> </body> </html>
例5、恶心的游戏数字7
大家从小到大,都玩儿过的一个庸俗的游戏:
游戏玩儿法就是,大家轮流报数,如果报到能被7整除的数字,或者尾数是7的数字,都算踩地雷了。就应该罚唱歌。
请在控制台输出1~60之间的所有“安全数”。
比如:
1、2、3、4、5、6、8、9、10、11、12、13、15、16、18、19、20、22、23、24、25、26、29、30……
思路:
先应该得到1-60之间所有的数
i%7 != 0 表示不是7的倍数
i%10 !=7 表示个位数不为7
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //例5、恶心的游戏数字7 for(var i=1;i<=60;i++){ //判断 变量i 不能够被7整除 个位数不是7的 if(i % 7 !=0 && i%10 !=7){ console.log(i); } } </script> </body> </html>
例6:使用for循环来实现一个10行3列的表格并且这个表格要有隔行变色的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table{ border-collapse: collapse; } </style> </head> <body> <script type="text/javascript"> //例6:使用for循环来实现一个10行3列的表格并且这个表格要有隔行变色的效果 //我们可以使用for循环来输出表格 可以将表格的tr标签作为循环体 //判断变量i 偶数 能够被2整除的数 var str = "<table width='800' align='center' border='1' >"; for(var i=1;i<=10;i++){ if(i%2 !=0){ str += "<tr style='background-color:#ccc;'><td> </td><td> </td><td> </td></tr>"; }else{ str += "<tr><td> </td><td> </td><td> </td></tr>"; } } str += "</table>"; document.write(str); </script> </body> </html>
例7:使用for循环输出一个9行一列的表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table{ border-collapse: collapse; } </style> </head> <body> <script type="text/javascript"> //例7:使用for循环输出一个9行一列的表格 要求对表格的行进行循环 也就是说我们先应该有一个1行1列的表格 var str = "<table width='800' align='center' border='1' >"; for(var i=1;i<10;i++){ str += "<tr><td> </td></tr>"; } str += "</table>"; document.write(str); </script> </body> </html>
例8:使用for循环输出一个1行9列的表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table{ border-collapse: collapse; } </style> </head> <body> <script type="text/javascript"> //例8:使用for循环输出一个1行9列的表格 对td进行循环 var str = "<table width='800' align='center' border='1' >"; str += "<tr>"; for(var i=1;i<10;i++){ str += "<td> </td>"; } str += "</tr>"; str += "</table>"; document.write(str); </script> </body> </html>
例9:使用for循环输出一个9行9列的表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //例9:使用for循环输出一个9行9列的表格 //先输出9行1列表的表格 然后现在需要将每一行有9个列 对td标签还要进行循环 var str = "<table width='800' align='center' border='1' rules='all'>"; //i=2 2<=9 天上一天 地上9年 for(var i=1;i<=9;i++){ str += "<tr>"; // j=10 10<=9 for(var j=1;j<=9;j++){ str += "<td> </td>"; } str += "</tr>"; } str += "</table>"; document.write(str); </script> </body> </html>
例10:使用for循环来实现99乘法表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //例9:使用for循环输出一个9行9列的表格 //先输出9行1列表的表格 然后现在需要将每一行有9个列 对td标签还要进行循环 var str = "<table width='800' align='center' border='1' rules='all'>"; //i=2 2<=9 天上一天 地上9年 for(var i=1;i<=9;i++){ str += "<tr>"; // j=10 10<=9 for(var j=1;j<=i;j++){ str += "<td>"+j+"×"+i+"="+(i*j)+"</td>"; } str += "</tr>"; } str += "</table>"; document.write(str); </script> </body> </html>
1.3.2 while循环
语法:
变量初始化
while(条件表达式){
//循环体
变量更新
}
结构说明:
当条件表达式成立的时候就执行循环体,反之如果条件表达式不成立就结束while循环!
流程图:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> var i=1; //变量初始化 while(i<=100){ //条件表达式 document.write(i+"<br/>"); //要执行的代码块 i++; //变量更新 } </script> </body> </html>
使用while循环输出1-100之间能够被3整除的数。
var i=1; //变量初始化 while(i<=100){ //条件表达式 //要判断变量是否能够被3整除 if(i % 3 == 0){ document.write(i+"<br/>"); } i++; //变量更新 }
使用while循环输出1-100之间能够被3整除的数的平均值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //使用while循环输出1-100之间能够被3整除的数。 /*var i=1; //变量初始化 while(i<=100){ //条件表达式 document.write(i+"<br/>"); //要执行的代码块 i++; //变量更新 } */ /* var i=1; //变量初始化 while(i<=100){ //条件表达式 //要判断变量是否能够被3整除 if(i % 3 == 0){ document.write(i+"<br/>"); } i++; //变量更新 } */ //使用while循环输出1-100之间能够被3整除的数的平均值 var i=1; //变量初始化 var count = 0; //用于计数 var sum = 0; while(i<=100){ //条件表达式 //要判断变量是否能够被3整除 if(i % 3 == 0){ count++; sum += i; } i++; //变量更新 } document.write(sum/count); </script> </body> </html>
使用while循环打印九九乘法表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> var i =1; var str = "<table width='800' border='1' align='center' rules='all'>"; while(i<=9){ str += "<tr>"; var j = 1; while(j<=i){ str += "<td>"+j+"×"+i+"="+(i*j)+"</td>"; j++; } str +="</tr>"; i++; } str += "</table>"; document.write(str); </script> </body> </html>
1.3.3 do...while循环
语法:
变量初始化
do{
//循环体
变量更新
}while(条件表达式);
结构说明:
n 先执行一次循环体,然后再来判断条件表达式是否成立。如果条件表达式成立就继续执行循环体,如果不成立就会结束do while循环。
n 不管条件表达式是否成立,do while循环都会执行一次循环体。
流程图:
使用do while来求1-100之间数!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //do---while 先执行一次循环体 然后再来判断条件 var i = 1; do{ document.write(i+"<br/>"); i++; }while(i<=100); </script> </body> </html>
什么时候使用for循环什么时候使用while循环 不是绝对的
已知循环次数的时候多用for循环
未知循环次数的时候一般用while循环
while与do…while之间的区别
while循环是先判断条件表达式再来执行循环体
do…while先执行一次循环体 再来判断条件表达式是否成立 不管条件表达式成不成立 它先会执行一次循环体 。
二、循环的终止
典型的,当条件表达式不成立了,那么循环体就会终止执行。也可以称之为循环它寿终正寝了。
循环提前终止:本来条件表达式是成立了,循环体还可以继续的往下执行,但是我们可以使用一些关键字让其提前终止。
break和continue 循环终止的关键字 都需要配合 if语句来实现
主要的作用是为了提升循环的效率 !
2.1break
终止,当在循环体中遇到了break关键字以后,整个循环语句就会直接结束。不会再执行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> for(var i=1;i<=100;i++){ if( i == 50){ break; } document.write(i+"<br/>"); } </script> </body> </html>
2.2continue
继续,它会终止当前循环体,那么继续执行下一次循环体。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> for(var i=1;i<=100;i++){ if(i == 3){ continue; } document.write(i+"<br/>"); } </script> </body> </html>
三、四个常用的系统函数
3.1parseInt
语法:
parseInt(变量名)
作用:从一个字符串提取整数!
提取规则:如果字符串第一个字符不是数字 就会返回NaN ,它会遇到非数字就停止提取!
3.2parseFloat
语法:
parseFloat(变量名)
作用:从一个字符串提取小数!
提取规则:如果字符串第一个字符不是数字 就会返回NaN ,它如果遇到除第一个.以外的非数字就会停止提取!
3.3isNaN
isNaN 如果是NaN就返回true 如果不是的就是false
作用:先将一个变量的数据类型自动的转换为Number 如果是NaN就会得到true 如果是一个数字的话就是得到false
3.4window.prompt
这个方法是属性window对象的方法
window.prompt()
这个方法是用来向浏览器中弹出一个用户输入对话框
第一个参数:text表示提示信息
第二个参数:defautlText 表示输入框的中默认文本 默认值
但是注意:这两个参数都可以省略不写!
这个方法有两个按钮 :确定按钮、取消按钮
当用户点击确定按钮时会得到一个String类型的数据
当用户点击取消按钮会得到一个关键字 null