【 js基础 Day2】js的流程控制:分支语句,循环.顺序结构

复习

JavaScript简称为JS
JavaScript是什么?
是一门脚本语言:不需要编译,直接运行
是一门解释性的语言:遇到一样代码就解释一行代码
C#语言是一门面向对象的语言,也是编译语言,是.net技术使用的
是一门动态类型的语言—不解析
是一门基于对象的语言—不解释
是一门弱类型的语言,声明变量的时候都使用var
强类型的语言:C#就是—–>
存储一个数字: int num=10; float num2=90.3;
JS分三个部分:

ECMAScript标准: js的基本的语法
DOM
BOM

JS用了将近10天来发明的
变量—作用:操作数据(存储数据,读取数据)
变量的声明:
var 变量名字;

var num;

变量的初始化
var 变量名字=值;—->字面量的方式赋值

var str="您好啊";

js中大小写是区分的
js中的字符串可以使用单引号,也可以使用双引号—暂时推荐使用双引号
js中每行代码结束要有分号 ;

数据类型:
js中的原始数据类型: number,string,boolean,undefined,null,object
null和undefined数据是没有太大意义的,null是很有意义的—对象的位置讲

NaN—-不是一个数字,不是一个数字和一个数字计算—>结果就是NaN

isNaN()—>判断这个变量或者这个值是不是不是一个数字—
如果不是一个数字结果是true,如果是一个数字结果false

number数据类型—-无论是整数还是小数都是number数据类型的

string数据类型—-字符串,获取字符串的长度:变量名.length

boolean数据类型—两个值,true，false

null—-只有一个,null

undefined—-只有一个,undefined,一个变量声明了,没有赋值

object—对象—–面向对象的时候讲解

类型转换:
其他类型转数字
parseInt()—->转整数
parseFloat()—>转小数
Number()—->转数字—–要比上面两个严格
其他类型转字符串
.toString()
String();
其他类型转布尔类型
Boolean()—->要么是true要么是false

运算符:—-操作符
算术运算符: + – * / %
复合运算符: += -= *= /= %=
赋值运算符: = 优先级别是最低的
一元运算符: ++ –
三元运算符: ? :
关系运算符: > < >= <= == === != !==
逻辑运算符: && || !
关系运算符的结果是布尔类型
逻辑运算符的结果是布尔类型
表达式1&&表达式2
如果有一个为false,整个结果就是false
表达式1||表达式2
只有有一个为true,整个结果为true
!表达式—结果就是取反
案例: 交换两个变量的值

重点

一元运算符: ++ –

流程控制:—-三个部分

下面的都是重点
分支结构:if ,if-else ,if-else if-else if-else, switch-case,三元表达式

循环结构:while, do-while ,for, 后期还有一个for-in循环

01 一元运算符

++ – 都是运算符
++ 和 – 可以分为:前+ 和后+ and 前- 和后-

如果++在后面:如: num++ +10参与运算
先参与运算,运算结束后自身再加1

如果++在前面:如: ++num+10参与运算
先自身加1,然后再参与运算

Ctrl+/可以把选中的代码全部注释掉

02 流程控制

流程控制；代码的执行过程
流程控制:有三种方式

1.顺序结构:从上到下,从左到右执行的顺序,就叫做顺序结构
2.分支结构:if语句,if-else语句,if-else if-else if…语句,switch-case语句,三元表达式语句
3.循环结构:while循环,do-while循环,for循环,后期还有一个for-in循环

03 分支语句之if语句

if语句:主要是判断

 语法:if(表达式){代码块}

执行过程:
先判断表达式的结果是true还是false,如果是true则执行代码块,如果是false,大括号中的代码是不执行的

例子:
1.如果8大于6,请输出8,如果一个数字大于另一个数字则输出大的数字
2.问:小苏的年龄是否大于18岁,如果是成年的,则提示,可以看电影了

if(8>6){console.log(8);}
//例子1:var num1=10;var num2=100;if(num1>num2){console.log(num1);}console.log("我执行了");//例子2
var age = 19;
if (age >= 18) {console.log("可以看电影了,嘿嘿...");
} else {console.log("看什么看，回家写作业去")
}
//例子3:
问小杨帅不帅,则输出真的好帅var str="帅";if(str=="帅"){console.log("真的好帅");}

04 分支语句之if-else语句

if-else 语句：两个分支,只能执行一个分支

if-else语句的语法:

  if(表达式){代码1}else{代码2}

执行过程:
如果表达式的结果是true则执行代码1,如果表达式的结果是false,则执行代码2

例子:问；小苏的年龄是否是成年人,如果是成年人则提示,可以看电影,否则；回家写作业区

//定义变量,并初始化
var age = 100;
//判断
if (age >= 18) {console.log("可以看电影了,嘎嘎...");
} else {console.log("看什么看,回家写作业去");
}//提示用户请输入年龄----
var age=prompt("请您输入您的年龄");//弹框---并且有输入,输入的内容在age变量中
console.log(age);//最终的结果是字符串的类型//案例1:
var age = parseInt(prompt("请您输入年龄"));
//判断
if (age >= 18) {console.log("可以看电影了,嘎嘎...");
} else {console.log("看什么看,回家写作业去");
}//练习1:找到两个数字中的最大值var num1=10;var num2=20;if(num1>num2){console.log(num1);}else{console.log(num2);}//练习2:判断这个数字是奇数还是偶数var number=parseInt(prompt("请输入一个数字"));if(number%2==0){console.log("偶数");}else{console.log("奇数");}

05 分支语句之三元表达式

获取两个数字中的最大值：if-else语句

 var num1 = 10;var num2 = 100;if (num1 > num2) {console.log(num1);} else {console.log(num2);}

两个分支,最终的结果是两个分支中的一个,像这种情况可以使用三元表达式

三元表达式
运算符号: ? :

语法:
var 变量=表达式1?表达式2:表达式3;
执行过程:
表达式1的结果是true还是false,如果是true则执行表达式2,然后把结果给变量
如果表达式1的结果是false,则执行表达式3,把结果给变量

//两个数字中的最大值var x = 10;var y = 20;var result1 = x > y ? x : y;console.log(result1);//显示成年还是未成年var age = 10;var result2 = age >= 18 ? "成年了" : "未成年";console.log(result2);

总结:大多数情况,使用if-else的语句都可以用三元表达式的方式来表示

06 分支语句之if-else if语句

if语句只有一个分支
if-else语句有两个分支,最终执行一个分支
if-else if-else if-else if-else if…else—多分支,最终也是执行一个
if-else if语句…

语法:

   if(表达式1){代码1}else if(表达式2){代码2}else if(表达式3){代码3}else{代码4}

else if—这种结构可以写多个,具体多少个看需求,
else–结构是可以不用写的,具体也是看需求

执行过程:
先判断表达式1的结果,
如果为true则执行代码1
如果为false,则判断表达式2
如果表达式2为true则执行代码2
如果为false,则判断表达式3
如果表达式3为true则执行代码3
否则执行代码4

例子: 成绩的结果是在90到100(包含)之间则显示A级
如果成绩是在80到90(包含)之间,则显示B级
如果成绩是在70到80(包含)之间,则显示C级
如果成绩是在60(包含)到70(包含)之间,则显示D级
如果成绩在0到60(不包含)之间,则显示E级

var score=parseInt(prompt("请你输入成绩"));//有bugif(!isNaN(score)&&!(score>100&&score<0)){//如果为true，说明不是数字console.log("输入不规范，请重新输入")if(score>90&&score<100){console.log("a级")}else if(score>80&&score<90){console.log("b级")}else if(score>70&&score<80){console.log("c级")}else if(score>=60&&score<70){console.log("d级");}else{console.log("e级")}}

实现代码

var score = Number(prompt("请您输入成绩"));//有bug
if (!isNaN(score)) {//如果为true就说明 不是数字if (score > 90 && score <= 100) {console.log("A级");} else if (score > 80) {console.log("B级");} else if (score > 70) {console.log("C级");} else if (score >= 60) {console.log("D级");} else {console.log("E级");}
} else {console.log("您输入有误");
}

练习:判断一个年份是不是闰年
定义变量存储一个年份

var year = 2017;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {console.log("闰年");
} else {console.log("平年");
}

var year=Number(prompt("请您输入年份"))
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {console.log("闰年");
}else{console.log("平年");
}

07 分支语句之switch-case语句

switch-case语句—分支语句—多分支语句
语法:

switch(表达式){case 值1:代码1;break;case 值2:代码2;break;case 值3:代码3;break;case 值4:代码4;break;...多个casedefault:代码5;

注意问题:
default后面的break是可以省略的
default也可以省略

switch-case 语句中和case后面的值比较的时候使用的是严格的模式
break是可以省略

执行过程:
获取表达式的值,和值1比较,如果一样,则执行代码1,遇到break则跳出整个的语句,
后面代码不执行
如果表达式的值和值1不一样,则和值2比较,如果相同则执行代码2,
遇到break则跳出
否则和值3比较,相同则执行代码3,遇到break,跳出,
否则和值4比较,相同则执行代码4,遇到break则跳出,否则直接执行代码5

例子:获取一个人的成绩的级别,如果是A级则显示90到100直接的分数

如果是B级则显示80到90分
如果是C级则显示70到80之间分数
如果是D级则显示60到70分之间
否则显示0到59之间

var jiBie=prompt("请输入级别");
switch(jiBie){case"a":console.log("90-100");break;case"b":console.log("80-90");break;case"c":console.log("70-80");break;case"d":console.log("60-70");break;default:console.log("0-59");//break;(可以省略)
}var jiBie = "E";switch (jiBie) {case "A":console.log("90到100之间");break;case "B":console.log("80到90之间");break;case "C":console.log("70到80之间");break;case "D":console.log("60到70之间");break;default :console.log("0到59之间");}

//注意问题

   var num="10";console.log("10"===10);switch(num){case 10:console.log("数字的10");break;case "10":console.log("字符串的10");break;}var num = "10";//字符串// console.log("10"===10);//true还是falseswitch (num) {case 10:console.log("数字的10");break;case "10":console.log("字符串的10");break;}

根据月份显示对应的天数

   var  mouth=parseInt(prompt("请输入月份"));switch(mouth){case 1:case 3:case 5:case 7:case 8:case 10:case 12:console.log("31");break;case 2:console.log("28");break;case 4:case 6:case 9:case 11:console.log("30");break;}

// 1,3,5,7,8,10,12 —31天
// 2—-28天
// 4,6,9,11—-30

   var month=parseInt(prompt("请输入月份"));switch (month){case 1:console.log("31天");break;case 2:console.log("28天");break;case 3:console.log("31天");break;case 4:console.log("30天");break;case 5:console.log("31天");break;case 6:console.log("30天");break;case 7:console.log("31天");break;case 8:console.log("31天");break;case 9:console.log("30天");break;case 10:console.log("31天");break;case 11:console.log("30天");break;case 12:console.log("31天");break;}

   var month=parseInt(prompt("请输入月份"));switch (month){case 1:case 3:case 5:case 7:case 8:case 10:case 12:console.log("31天");break;case 4:case 6:case 9:case 11:console.log("30天");break;case 2:console.log("28天");break;}

练习:根据数字显示对应的星期


```javascript
var num = parseInt(prompt("请输入一个星期的数字"));
switch (num) {case 1: console.log("day1"); break;case 2: console.log("day2"); break;case 3: console.log("day3"); break;case 4: console.log("day4"); break;case 5: console.log("day5"); break;case 6: console.log("day6"); break;case 7: console.log("day7"); break;default: console.log("输入有误");
}

var num=parseInt(prompt("请输入一个星期的数字"));switch (num){case 1:console.log("星期一");break;case 2:console.log("星期二");break;case 3:console.log("星期三");break;case 4:console.log("星期四");break;case 5:console.log("星期五");break;case 6:console.log("星期六");break;case 7:console.log("星期日");break;default:console.log("输入错误");}

function fileUpload(fileSelector, url, suc) {//定义一个函数 有三个参数var file = document.querySelector(fileSelector).files[0],formData = new FormData(),reader = new FileReader();

定义三个变量，左边是变量名，右边是值，通过创建一个对象，然后赋值给它

// 判断上传文件类型
if (!/^.*?\.(xls|xlsx)$/i.test(file.name)) {console.error('所上传文件类型不符')return false
}

一个if结构

formData.append('file', file)//变量名.方法名var xhr = new XMLHttpRequest();//定义一个变量xhr.open('POST', url, true);xhr.onreadystatechange = function () {if (xhr.readyState === XMLHttpRequest.DONE) {var data = JSON.parse(xhr.responseText);//定义一个变量var src = data.url;//定义一个变量suc(src);//懵逼了}//一个if结构}xhr.onload = function (e) {if (xhr.status === 200) {console.log('uploaded');//如果条件成立，即判断结果为true，则在控制台输出uploaded} else {console.log('file upload failed');//如果条件成立，即判断结构为false，则在控制台输出file upload failed}一个if - else结构};xhr.send(formData);
}
//一个function函数

08 总结分支语句

分支语句:
if语句:一个分支
if-else语句:两个分支,最终只执行一个分支
if-else if-else if…语句: 多个分支,也是只会执行一个
switch-case语句:多分支语句,最终也会一个(必须要有break)
三元表达式:和if-else语句是一样的
什么时候使用if-else if…: 一般是对范围的判断
什么时候使用switch-case语句:一般是对具体的值的判断
如果有多个分支,是针对范围的判断一般选择if-else if的语句
如果有多个分支,是针对具体的值判断,一般选择用switch-case语句

09 循环语句之while循环

循环:一件事不停的或者是重复的做
循环要有结束的条件,循环还应该有计数器(记录循环的次数的
while循环

while循环语法:

计数器
var 变量=0;
while(循环的条件){循环体;计数器++;}

执行过程:
先判断条件是否成立,(条件的结果是true还是false),如果是false,
那么循环的代码(while的大括号中的代码都不执行),如果是true,
那么先执行循环体,然后执行计数器,然后,直接去—>循环的条件,
再次判断是否成立,成立则继续执行循环体,否则跳出循环,执行完循环体之后,
计数器加1,然后再去循环的条件,判断,成立则循环,否则跳出循环

 var i=0;while(i<20){循环体i++;}

请输出10次:哈哈,我又变帅了

var i=0;//计数器
while(i<10){console.log("哈哈,我又变帅了"+(i+1));i++;
}
//如果没有i++,则会无限循环下去，直到浏览器崩溃为止

var i=0;//计数器
while(i<10){console.log("哈哈,我又变帅了"+(i+1));i++;//记录次数var i=0;//计数器
while(i<100){console.log("哈哈,我又变帅了"+(i+1));i++;//记录次数
}

练习:计算1-100之间所有数字的和

var sum=0;
var i=0;
while(i<=100){
//sum=sum+i;
sum+=i;
i++
}
console.log("和为："+sum)var sum=0;
while(i<10){console.log("和为："+sum)sum+=i;
}var sum=0;//存储最终的和
var i=1;//计数器
while(i<=100){//sum=sum+i;//不停的计算数字的和sum+=i;i++;
}
console.log("和为:"+sum); var sum=0;//存储最终的和var i=0;//计数器while(i<=5){//sum=sum+i;//不停的计算数字的和sum+=i;i++;}console.log("和为:"+sum);

10 while循环的练习

求6的阶乘:

 var ji = 1;//存储最终的阶乘的结果var i = 1;//开始的数字while (i <= 6) {ji *= i;i++;}console.log(ji)var ji = 1;//存储最终的阶乘的结果var i = 1;//开始的数字while (i <= 6) {ji *= i;i++;}console.log(ji);

求1-100之间所有的偶数的和

var i=1;//计数器
var sum=0;//存储所有数字的和
//判断这个数字是不是奇数,如果是奇数则相加,把结果存放在sum变量中
while(i<=100){if(i%2!=0){sum+=i;}i++;//为了不变成死循环
}
console.log(sum)

var i=1;//计数器var sum=0;//存储所有数字的和while(i<=100){//判断这个数字是不是偶数,如果是偶数则相加,把结果存放在sum变量中if(i%2==0){sum+=i;}i++;//为了不变成死循环}console.log("和为:"+sum);

求1-100之间所有的奇数的和

var i = 1;//计数器var sum = 0;//存储和的while (i <= 100) {if (i % 2 != 0) {sum += i;}i++;}console.log(sum);

请输出1-100之间所有能够被7整除的数字

 var i = 0;while (i <= 100) {if (i % 7 == 0) {console.log(i);}i++;}var i=1;while(i<=100){//判断这个数字是否能够被7整除if(i%7==0){console.log(i);}i++;}

//求帐号和密码是否一致,登录的效果实现
//提示用户输入帐号
//提示用户输入密码
//如果帐号或者密码不对,则一直提示用户输入帐号和密码
//帐号–admin
//密码–123—字符串类型

var userName=prompt("请输入帐号");var userPwd=prompt("请输入密码");while(userName!="admin"||userPwd!="123"){userName=prompt("请输入帐号");userPwd=prompt("请输入密码");}console.log("登录成功")

var userName=prompt("请您输入帐号");//存储帐号的
var userPwd=prompt("请您输入密码");//存储密码
while(userName!="admin"||userPwd!="123"){//变量的重新赋值userName=prompt("请您输入帐号");//存储帐号的userPwd=prompt("请您输入密码");//存储密码
}
console.log("登录成功");

//变量可以重新赋值

var num=10;
console.log(num);//10
num=100;//变量的重新赋值
console.log(num);//100

11 循环语句之do-while循环

do-while循环

语法:

do{循环体
}while(条件);

执行过程:
先执行一次循环体,然后判断条件是否成立,不成立,
则跳出循环,成立则执行循环体,然后再判断条件是否成立,成立则继续循环,否则跳出…

输出:哈哈,我又变帅了…10次

var i=0;do{console.log("哈哈,我又变帅了")i++;}while(i<10);//注意：分号一定要下

var i=0;//计数器
do{console.log("哈哈,我又变帅了");i++;
}while(i<10);

do {var a = prompt("我有魅力吗？yes/no")} while (a != "yes")console.log("对的")do {//把用户输入的结果存储到result变量中var result = prompt("您觉得我帅吗?y/n");} while (result != "y");console.log("您真有眼光");

练习:求100以内所有3的倍数的和

  //方法1：var i = 1;var sum = 0;while (i <= 100) {if (i % 3 == 0) {sum += i;}i++;}console.log(sum)//方法2var i = 1;var sum = 0;do {if (i % 3 == 0) {sum += i;}i++;} while (i <= 100);console.log(sum)

 var i = 1;var sum = 0;while (i <= 100) {if (i % 3 == 0) {sum += i;}i++;}console.log(sum);//1683var i = 1;var sum = 0;do {if (i % 3 == 0) {sum += i;}i++;} while (i <= 100);console.log(sum);

12 总结while循环和do-while循环

while循环特点:先判断,后循环,有可能一次循环体都不执行

do-while循环特点:先循环,后判断,至少执行一次循环体

  var i=5;while(i<4){console.log("beautiful")i++;}console.log("ugle");

//if和else是在一起的，没有if就没有else，有if可以不用else
//可是这样就全部输出了，第二个又没有在条件范围内

var i=0;
do{console.log("yughbjnmbh");i++;
}while(i<10);var i=0;do{console.log("阿涅哈斯诶呦!");i++;}while(i<
var i=5;
while(i<4){console.log("小苏好帅哦");i++;
}
console.log("嘎嘎.");

13 循环语句之for循环

语法:

  for(表达式1;表达式2;表达式3){循环体;}

执行过程:
先执行一次表达式1,然后判断表达式2;如果不成立则直接跳出循环
如果表达式2成立,执行循环体的代码,结束后,跳到表达式3执行,然后跳到表达式2,判断表达式2是否成立,不成立,则跳出循环
如果表达式2成立,则执行循环体,然后再跳到表达式3,再跳到表达式2,判断是否成立,一直如此

  for(var i=0;i<10;i++){}

//例子:打印10次,哈哈,我又变帅了
for (var i = 0; i < 10; i++) {console.log("日照香炉生紫烟,一对情侣在林间.远看身影如神仙,近看竟然是于千");
}//求1-100之间所有数字的和var sum = 0;
for (var i = 1; i <= 100; i++) {sum += i;
}
console.log("和为:" + sum);//    for (var i = 0; i < 10; i++) {
//      console.log("小杨好帅");
//    }

14 for循环的练习

for(var i=0;i<10;i++){console.log("love")

//求1-100之间所有偶数的和

var sum=0;
for(var i=0;i<=100;i++){if(i%2==0){sum+=i;}
}
console.log(sum)

注意输出语句

var sum1=0;
for(var i=1;i<=100;i++){//判断i与2取余是0---->偶数if(i%2==0){sum1+=i;}
}
console.log(sum1);//2550

求1-100之间所有奇数的和

 var sum=0;for(var i=0;i<=10;i++){if(i%2!=0){sum+=i;}}console.log(sum)

 var sum2=0;for(var i=1;i<=100;i++){if(i%2!=0){//奇数sum2+=i;}}console.log("和为:"+sum2);

求1-100之间所有能被3整除的数字的和

var sum=0;
for(var i=1;i<100;i++){if(i%3==0){sum+=i;}
}
console.log(sum)

var sum3=0;
for(var i=1;i<=100;i++){if(i%3==0){sum3+=i;}
}
console.log(sum3);

求1-100之间所有能被7整除的数字的和

var sum=0;
for(var i=1;i<=100;i++){if(i%7==0){sum+=i;}
}
console.log(sum)

var sum4=0;
for(var i=1;i<=100;i++){if(i%7==0){sum4+=i;}
}
console.log(sum4);

14 for循环案例

//画星星

for(var i=0;i<=5;i++){for(var j=0;j<=i;j++){document.write("☪")}document.write("<br/>")
}//控制行数的---正方形的for (var i = 0; i <= 5; i++) {//控制每一行有几个星星for (var j = 0; j <= 5; j++) {document.write("★");}document.write("<br/>");}////    for(var j=0;j<=2;j++){//      document.write("★");//    }

三角形的—五角星—-随着行数的增加,每一行都会比上一行多一个五角星

for (var i = 0; i <= 5; i++) {//控制每一行有几个星星for (var j = 0; j <= i; j++) {document.write("★");}document.write("<br/>");
}

15 乘法口诀表

//控制行数

 for(var i=1;i<=9;i++){//控制每一行有多少个表达式for(var j=1;j<=9;j++){document.write(j+"*"+i+"="+i*j);}document.write("<br/>");}

//控制行数

 for(var i=1;i<=9;i++){//控制个数for(var j=1;j<=i;j++){document.write(j+"*"+i+"="+i*j)}document.write("<br/>")}

掌握——必须要写出来的

   for(var i=1;i<=9;i++){//控制每一行有多少个表达式for(var j=1;j<=i;j++){document.write(i+"*"+j+"="+i*j);}document.write("<br/>");}

document.write("<table border='1' cellpadding='0' cellspacing='0'>");for(var i=1;i<=9;i++){//控制每一行有多少个表达式document.write("<tr>");for(var j=1;j<=i;j++){document.write("<td>");document.write(i+"*"+j+"="+i*j);document.write("<td>");}document.write("<br/>");}

   document.write("<table />")document.write("<table border='1' cellpadding='0' cellspacing='0'>");for (var i = 1; i <= 9; i++) {//控制的行数document.write("<tr>");for (var j = 1; j <= i; j++) {document.write("<td>");document.write(i + "*" + j + "=" + i * j);document.write("</td>");}document.write("</tr>");}document.write("</table>");

16 调试

//调试:调试代码—高级程序员都是从调试开始的
//调试:写代码—打开浏览器–F12(开发人员工具)—>Sources—双击文件,在某一行代码前面点击一下(出现的东西就是断点)

var sum=0;
for(var i=0;i<5;i++){sum+=i;//观察一下这个变量的值是多少,或者这行代码执行后的效果如何
}
console.log(sum);

var sum=0;
for(var i=0;i<5;i++){sum+=i;
}
console.log(sum)

17 作业

讲解思路。如果不会写程序，可以先把数学公式准备好

1.本金10000元存入银行，年利率是千分之三，
每过1年，将本金和利息相加作为新的本金。计算5年后，获得的本金。

2.有个人想知道，一年之内一对兔子能繁殖多少对？于是就筑了一道围墙把一对兔子关在里面。
已知一对兔子每个月可以生一对小兔子，而一对兔子从出生后第3个月起每月生一对小兔子。
假如一年内没有发生死亡现象，那么，一对兔子一年内（12个月）能繁殖成多少对？
（兔子的规律为数列，1，1，2，3，5，8，13，21）