3.JS基础学习——03day

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

目录

一、流程控制语句

二、if语句

三、if语句的练习

四、if语句求三个数的从小到大

五、条件分支语句

六、switch语句练习1

七、switch语句练习2

八、循环语句

九、while循环语句练习

十、循环输入的练习

 

总结


 

 

提示:以下是本篇文章正文内容,下面案例可供参考

一、流程控制语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			/*
			 JS中的程序是从上到下一行一行执行的
			 *  通过流程控制语句可以控制程序执行流程
			 * 		使程序可以根据一定条件来选择执行
			 * - 语句的分类:
			 * 		1.条件判断语句
			 * 		2.条件分支语句
			 * 		3.循环语句
			 * 
			 * 
			 * 第一种:条件判断语句
			 * 	  - 使用条件判断语句在执行某个语句之前进行判断
			 * 			如果条件成立才会执行语句,条件不成立则语句不执行
			 * 	  - if语句
			 * 			语法规则:
			 * 				if(条件表达式)
			 * 				{
			 * 					语句1;
			 * 					语句2;
			 * 						……
			 * 				}
			 * 
			 * 				if语句在执行的时候,会先对条件表达式进行求值判断
			 * 				如果条件表达式的值为true,则执行if后面的语句
			 * 				如果条件表达式的值为false,则不会执行if后的语句。
			 * 			if语句只能控制紧随其后的那个语句,	
			 * 				但是如果希望if语句可以控制多条语句
			 * 				可以将这些语句统一放到一个代码块中{}
			 * 			if语句后面的代码块不是必须的,但是在开发中尽量写上代码块,即使代码只有一行
			 * 
			 * 
			 * */
			/*第一种:条件判断语句:举例*/
			/*var a = 10;
			if(a>9)
			{
				alert("a比9大~~~~");
				alert("加上大括号变为语句1")
			}*/
			var a = 15;
			/*同时满足多个条件的时候才会输出语句1*/
			if(a>10 && a<=20)//true&&true=true
			{
				alert("a大于10,并且a小于等于20");
			}
			

		</script>
	</head>
	<body>
		
	</body>
</html>

二、if语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 if语句
			 * 语法规则二:
			 * 			if(条件表达式){
			 * 				语句....
			 * 			}else{
			 * 				语句....
			 * 			}
			 * if……else……语句
			 * 		当该语句执行时,会先对if后的条件表达式进行求值判断
			 * 			如果该值为true,则执行if后的语句
			 * 			如果该值为false, 则执行else后的语句
			 * 
			 * (选择多种)
			 * 	语法规则二:
			 * 			if(条件表达式){
			 * 				语句……
			 * 			} else if(条件表达式){
			 * 				语句……
			 * 			}else if(条件表达式){
			 * 				语句……
			 * 			}else{
			 * 				语句……
			 * 			}
			 * if……else if…… else语句	
			 * 		当该语句执行的时候,会从上到下依次对表达式进行求值判断
			 * 		如果值为true,则执行当前语句
			 * 		如果值为false,则继续向下判断else if里面的表达式
			 * 		如果值为false,则继续向下判断else if里面的表达式
			 * 		一个一个判断,直到有条件为true,才会执行该语句
			 		如果都不成立,那么就执行最后一个else
			 		(顺序有要求,从大到小/// 从小到大也可以,但是必须要完善逻辑代码,否则会出现死代码)
			 * 		
			 * 
			 * 
			 * 
			 */
			/*if……else if…… else语句
			 	相当于分支判断,往下执行
			 	一个一个判断,直到条件为true,才会执行该语句
			 	如果都不成立,那么就执行最后一个else
			 * */
			var age =65;
			
			if(age > 100){//false
				alert("age大于100");
			}else if(age>80){//false
				alert("age小于100大于80");
			}else if(age>60){//true 输出当前语句
				alert("age小于80大于60");
			}else{
				alert("age小于60");
			}
			
			
		</script>
	</head>
	<body>
	</body>
</html>

三、if语句的练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 
			 * 从键盘输入小明的期末成绩:
			 * 当成绩为100时,"奖励一辆BMW"
			 * 当成绩为[80-99]时,"奖励一台iphone15s"
			 * 当成绩为[60-80]时,"奖励一本JavaScript语法书"
			 * 其他时,什么都没有
			 * 
			 */
			
			/*
			 输入:prompt()可以弹出一个提示框,该提示框中会有一个文本框
			 		用户可以找文邦框中输入一段内容,该函数需要一个字符串作为参数
			 		该字符串将会作为提示框的提示文字
			 		
			 * 		将用户输入的内容将会作为函数的结果返回给一个变量,所以需要定义一个变量来接收
			 * 
			 * */
			//嵌套
			/*var score = prompt("请输入分数0-100:");
			 * if(score>100||score<0 || isNaN(score))//判断是否合法 , isNaN(score)输入字母的时候
			 * {
			 * 	alert("输入不合法");
			 * 
			 * }else{
			 * 	if(score==100){
					alert("奖励一辆BMW");
				}else if(score<=99&&score>=80){
					alert("奖励一台iphone15s");
				}
				else if(score<=79&&score>=60){
					alert("奖励一本JavaScript语法书");
				}else{
					alert("害!都还没及格,还想要奖励啊!!")
				}
			 }
			*/
			
			 
			
			/*练习二:*/
			/*var height = prompt("输入身高");
			var money = prompt("输入存款");
			var face = prompt("输入颜值度");
			if(height>=180 && money>=1000 && face>=500 ){
				alert("我一定要嫁给他");
			}else if(height>=180 || money>=1000 || face>=500 ){
				alert("我就勉强一下嫁给他吧");
			}else{
				alert("活该单身");
			}
			*/
			/*练习三:
			 编写程序,由键盘输入三个数变量num1、num2、num3
			 	输出从大到小
			 * */
			/* var num1 = prompt("请输入num1");
			 var num2 = prompt("请输入num2");
			 var num3 = prompt("请输入num3");*/
			
			 //var max=num1;
			 /*max = num1>mum2?(unm1>num3?num1:num3):(num2>num3?num2:num3);求出最大值*/
			//num1最小
			/*if (num1>num2 && num1>num3) {
				
				if (num2>num3) {
					alert("从小到大的顺序为:"+num3 +num2 +num1);
				}else{
					alert("从小到大的顺序为:"+num2 +num3 +num1);
				}
			}else if(num2>num1 && num2>num3){
				if(num1>num3){
					alert("从小到大的顺序为:"+num1 +num3 +num2);
				}else{
					alert("从小到大的顺序为:"+num3 +num1 +num2);
				}
			}else if(num3>num1 && num3>num2){
				if (num1>num2) {
					alert("从小到大的顺序为:"+num2 +num1 +num3);
				}else{
					alert("从小到大的顺序为:"+num1 +num2 +num3);
				}
				
			}*/
			
		</script>
	</head>
	<body>
	</body>
</html>

四、if语句求三个数的从小到大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		/*
		 三个数从小到大排序
		 prompt();这个函数返回的是一个字符串,所以用的时候需要注意在前面加 +prompt() 让它的返回结果变成数值
		 */
		var num1 = +prompt("输入num1的值");
		var num2 = +prompt("输入num2的值");
		var num3 = +prompt("输入num3的值");
		//num1最小
		if (num1<num2 && num1<num3) {
			if (num2<num3) {
				alert("从小到大的顺序为"+num1+"," +num2+","+num3);
			}else{
				alert("从小到大的顺序为"+num1+","+num3+","+num2);
			}
		}//num2最小
		else if(num2<num1 && num2<num3){
			if(num1<num3){
				alert("从小到大的顺序为"+num2+","+num1+","+num3);
			}else{
				alert("从小到大的顺序为"+num2+","+num3+","+num1);
			}
		}//num3最小
		else if(num3<num2 && num3<num1){
			if (num2<num1) {
				alert("从小到大的顺序为"+num3+","+num2+","+num1);
			}else{
				alert("从小到大的顺序为"+num3+","+num1+","+num2);
			}
		}
		
		//可以有多种方式:临时存放值也可以
		
		
		
		
		
		</script>
	</head>
	<body>
	</body>
</html>

五、条件分支语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 条件分支语句:
			 * switch(条件表达式){
			 * 	 case 表达式1:
			 * 		   语句...
			 * 		  break;
			 * 	 case 表达式2:
			 * 		   语句...
			 * 		  break;
			 *	 case 表达式2:
			 * 		   语句...
			 * 		  break;
			 * 		  …………
			 * 	 default:
			 * 		  语句...
			 * 		  break;
			 * }
			 * 
			 * 执行流程:
			 * 		switch...case..语句
			 * 		在执行时会依次将case后面的表达式的值和switch后的条件表达式的值进行全等的比较
			 * 			如果比较结果为true,则从当前case处开始执行代码(所以必须要break跳出)跟着brake才不会执行其他的case
			 * 			如果比较结果为false,则继续向下比较
			 * 			如果所有的case都为false,那就执行default语句
			 * 
			 * 可以相互代替
			 * switch语句和if语句的功能实际上有重复的,使用switch可以实现if的功能
			 * 		同样使用if也可以实现switch的功能,使用的时候可以根据个人喜好来解决
			 * 
			 * 
			 * 
			 * 
			 * 
			 * 
			 */
			/*var num = 1;
			if(num===1){
				alert("1");
			}else if(num==2){
				alert("2");
			}else if(num==3){
				alert("3");
			}太过于麻烦,从上到下一个一个判断*/
			/*改写成switch语句*/
			var num = 1;
				switch(num){
					case 1:
						console.log("1==壹");
						//使用break可以用来退出switch语句
						break;
					case 2:
						console.log("2==贰");
						break;
					case 3:
						console.log("3==叁");
						break;
					default:
						console.log("输入无效");
				}
			
		</script>
	</head>
	<body>
	</body>
</html>

六、switch语句练习1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 大于等于60合格,小于60不合格
			 * */
		/*	var num = +prompt("输入在0-100以内的的数字");//prompt的出string 需要转型
			switch(parseInt(num/60)){//使用parseInt()函数来将成绩除以60的结果变为整型数字
		方法一
			//switch(parseInt(num/10)):有6种情况10 9 8 7 6 default
				case 1:
				alert("合格");
				break;
				case 0:
				alert("不合格");
				break;
				default:
				alert("输入不合法,需要在0-100以内的的数字");	
			}*/

		/*方法二
			 * 更简单的*/
			/*js中的方法:
			 		利用了switch语句和case语句比较是否为真的
			 * */
			var num = +prompt("输入在0-100以内的的数字");
			switch(true){//Boolean(1)
				case num>=60:
					alert("及格");
					break;
				case num<60:
					alert("不及格");
					break;
				default:
				alert("输入不合法,需要在0-100以内的的数字");
			}
		</script>
	</head>
	<body>
	</body>
</html>

七、switch语句练习2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 1-7打印对应星期几
			 * 
			 * */
			var n = +prompt("请输入数值");
			switch (n){
				case 7:
					alert("星期天放假了");
					break;
				case 6:
					alert("星期六放假了");
					break;
				case 5:
					alert("星期五,马上放假了");
					break;
				case 4:
					alert("星期四,还有一天放假了");
					break;
				case 3:
					alert("星期三,还有两天放假了");
					break;
				case 2:
					alert("星期二,放假遥遥无期,安心上课把");
					break;	
				case 1:
					alert("星期一,刚开始你就想着上课,想屁吃呢!");
					break;	
				default:
					alert("输入的是什么鬼东西");
					break;
			}
		</script>
	</head>
	<body>
	</body>
</html>

八、循环语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 循环语句:连续输出
			 * 
			 * 
			 * 
			 * 
			 * 
			 * */
			/*document.write(1+ <br/>);//document是写入到body中的,所以需要用网页的换行<br/>
			document.write(2+ <br/>);//而\n是在控制台中换行的*/
			
			/*var n =1;
			 document.write(n++ <br/>);/
			 * */
			/*
			 循环语句:
			 * 通过循环语句可以反复的执行一段代码多次
			 * 
			 * 
			 * 
			 while循环
			 * 		- 语法:
			 * 		while循环语句(条件表达式){
			 * 			语句.....
			 * 		}
			 * - while语句执行流程:
			 * 		先对括号里面的条件表达式进行求值判断,
			 * 			如果值为true,则执行循环体
			 * 				循环体执行完毕以后,继续对表达式进行判断
			 * 				如果再为true,则继续执行循环体,以此类推
			 * 		如果判断表达式为false,那么执行循环体结束(终止循环)
			 * 			
			 * 
			 do....while循环
			 * 		- 语法:
			 * 		do{ 
			 * 			语句.....
			 * 	     }while(条件表达式)
			 * 
			 * - do... while语句执行流程:
			 * 			先执行循环体do{}
			 * 			执行循环体完毕以后,在对while后的的条件表达式进行判断
			 * 			如果结果为true,则继续执行循环体,执行完毕继续判断,依次类推
			 * 			如果结果为false,则终止循环
			 * 
			 * 
			 * 区别:while语句先判断后执行,
			 * 			而do... while先执行再判断
			 * 		do... while()可以保证至少执行一次
			 * 			而while()不能
			 * 
			 * 
			 * 
			 * 
			 * */
			/*举例*/
			/*var n = 1;
			while (true){
				alert(n++)
				break;
			}
			这种将条件表达式写死为true的循环,叫死循环
			该循环不会停止,除非浏览器关闭,死循环在开发中慎用
				可以使用break,来终止循环
			while 好像一个可以执行多次的if语句
			* */
	/*方式一	var n = 1;
			while (true){
				alert(n++);
				//判断当n是否是10的时候退出循环
				if (n==10) {
					//退出循环
					break;
				}
			}
			*/
	/*
	 方式二:
	 	创建一个循环,往往需要三个步骤
	 	1.创建初始化一个变量
	 	var i=0;
	 	
	 	2.在循环循环中设置一个条件表达式
	 	while(i < 10){
	 	
	 	3.定义一个更新表达式,每次更新初始化变量(离条件越来越近)
	 		i++;
	 	}
	 * */
	/*while举例:*/
	var i = 1;
	/*while(i <=5000){
		document.write(i++ +"<br />");
	}*/
	/*do while举例:*/
	do{
		document.write(i++ +"<br />");
	}while(i <=5000);
	
	
	
	
	
	
	
		</script>
	</head>
	<body>
	</body>
</html>

九、while循环语句练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 假如投资的年的利率为5%,试求从1000块增长到5000块,需要花费多少年
			 * 
			 * 
			 * 1000  1000*1.05
			 * 1050  1050*1.05
			 * 
			 * 
			 * */
			var n=1000;
			//定义一个计数器,默认值是0
			var i=0;
			while(n < 5000){
				/*n=parseInt(n*1.05);*/
					/*n = n*1.05;*/
					n*=1.05;
				//记录循环的次数
					i++;
			}
			//document.write("从1000块增长到5000块需要"+n+"钱")
			document.write("从1000块增长到5000块需要"+i+"年");
		</script>
	</head>
	<body>
	</body>
</html>

十、循环输入的练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			
			//将prompt放入到一个循环中,循环判断输入
			while(true){
				var score = +prompt("请输入分数0-100:");
				//判断用户输入的是否合法
				if(score >=0 && score <=100){
					//满足条件则证明用户输入合法,退出循环,还继续往下执行代码
					break;
				}
				alert("输入不合法,请点击确定/ok后再次输入");
			}
			
			//开始执行解决问题的程序
			  if(score>100||score<0 || isNaN(score))//判断是否合法 , isNaN(score)输入字母的时候
			  {
			  	alert("输入不合法");
			  
			  }else{
			 	if(score==100){
					alert("奖励一辆自行车");
				}else if(score<=99&&score>=80){
					alert("奖励一台本蝴蝶书");
				}
				else if(score<=79&&score>=60){
					alert("奖励一本JavaScript语法书");
				}else{
					alert("害!都还没及格,还想要奖励啊!!")
				}
			 }
			
		</script>
	</head>
	<body>
	</body>
</html>


总结

以上是本人js学习阶段的小例子以及自己的理解,还希望大神提意见,谢谢大家。


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值