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
