HTML学习10 逻辑运算符 if语句 for循环语句 函数

8 篇文章 0 订阅

逻辑运算符

逻辑运算符有三个:
&& 与(且)
||	或
!	非

参与逻辑运算的,都是布尔值。也就是说,只有true、false才能参与逻辑运算,得到的答案,仍然是布尔值。

1// &&表示“且”的意思,都真才真
2console.log(true && true);		//true
3console.log(true && false);		//false
4console.log(false && true);		//false
5console.log(false && false);	    //false


或者的意思:
1console.log(true || true);			//true
2console.log(true || false);			//true
3console.log(false || true);			//true
4console.log(false || false);		//false

逻辑运算符参考资料:https://www.cnblogs.com/yuanxinghuo/p/7881366.html
JS中的逻辑运算符&&、||,位运算符|,&
1、JS中的||符号:

运算方法:

	 只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。

	 只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。

总结:真前假后

2、JS中的&&符号:

运算方法:

	 只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;

	 只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;

总结:假前真后

弄懂了以上说的还应该知道:

	  js的6个蛋蛋:在js逻辑运算中,0、”“、null、false、undefined、NaN都会判为false,其他都为true。



!表示“非”,没啥好说的,(相反意思)
1console.log(!true);
2console.log(!false);



1.4 连比的写法
比如,我们想看看2这个数字,是不是在3和15之间:
1console.log(3 < 2 < 15);//false   //true
console.log(false < 15);

错误的写法。
这是因为,计算机会先计算3<2,得到的答案就是false。然后false<15,false会被隐式转换为0,所以0<15是true。

应该拆开,中间用一个&&连接。 也就是说:
“3小于2” 且 “2小于15”。
			false		true
1console.log(3 < 2 && 2 < 15);//关系运算符优先级比逻辑运算符高


判断一个人是否能够考驾照,交通法规定18~65岁能够考驾照。

1//得到用户年龄
2var age = parseInt(prompt("请输入年龄"));
3//显示结果
4alert(age >= 18 && age <= 65);

if语句

2.1 if语句初步
如果……那么……否则……
if就是英语“如果”的意思,else就是“否则”。
举个例子:
 js的6个蛋蛋:在js逻辑运算中,0、”“、null、false、undefined、NaN都会判为false,其他都为true。
1if(明天不下雨){
2	我就出去玩;
3}else{
4	我就在家写作业;
5}


公式:
1if(条件表达式){
2	条件为真的时候做的事情
3}else{
4	条件为假的时候做的事情
5}
称为if语句结构体。

一个程序:
1	<script type="text/javascript">
2		var a = 10;	//设置变量
3		if(a > 5){
4			console.log("哈哈");
5		}else{
6			console.log("嘻嘻");
7		}
8	</script>


if语句也成为“选择语句”、“条件判断语句”
	
条件表达式,要么是true、要么是false。绝对在计算机中,不可能出现模棱两可的情况。所以,if语句让程序有了“选择”,可以在两条路中选择一条。

小题目:
用户输入自己的考试成绩,提示用户是否及格。如果及格了,弹出警告框“恭喜,你及格了”、“不要骄傲啊”。如果没有及格,那么弹出警告框“很遗憾,你没有及格”、“请继续努力啊”。 然后都弹出“么么哒”。
答案:
1	<script type="text/javascript">
2		//第一步,让用户输入自己的成绩。
3		var score = parseFloat(prompt("请输入你的成绩"));
4		//第二步,判断
5		if(score >= 60){
6			alert("恭喜,你及格了!");
7			alert("不过不要骄傲啊!");
8		}else{
9			alert("很遗憾,你没有及格!");
10			alert("请继续加油啊!!");
11		}
12		alert("么么哒");
13	</script>


小题目:		 
用户输入自己的年龄,判断用户是否在18~70岁,如果在,那么弹出框框“恭喜,可以考驾照”,“加油啊”;
否则弹出“年龄不符合要求”。  最后,都要弹出“么么哒”。
	
1	<script type="text/javascript">
2		//第一步,得到用户输入的年龄
3		var age = parseInt(prompt("请输入年龄"));
4		//第二步,判断。if的结构体
5		if(age >= 18 && age <= 70){
6			alert("恭喜,可以考驾照");
7			alert("加油啊");
8		}else{
9			alert("年龄不符合要求");
10		}
11		alert("么么哒");
12	</script>

小题目:					==转换成相同的类型再进行比较
							===不会转换类型,直接比较
判断用户输入的密码是否正确,如果是123,那么就弹出正确;如果不是,就弹出错误。

1	<script type="text/javascript">
2		//第一步,得到用户输入的密码
3		var password = prompt("请输入密码");
4
5		//第二步,判断
6		if(password == 123){
7			alert("正确");
8		}else{
9			alert("错误");
10		}
11	</script>


2.2 多分支的if语句和跳楼现象
用户输入成绩,
如果成绩大于等于85,那么提示优秀;
否则如果成绩大于等于70,那么提示良好;
否则如果成绩60~69,那么提示及格;
否则,不及格

答案:
1	<script type="text/javascript">
2		//第一步,得到用户输入的成绩
3		var score = parseFloat(prompt("请输入成绩"));
4
5		//第二步,判断
6		if(score >= 85){
7			alert("优秀");
8		}else if(score >= 70){
9			alert("良好");
10		}else if(score >= 60){
11			alert("及格");
12		}else{
13			alert("不及格");
14		}
15	</script>

语法:
1if(条件表达式1){
2	条件1为真的时候做的时候
3}else if(条件表达式2){
4	条件1不满足,条件2满足的时候做的事情
5}else if(条件表达式3){
6	条件1、2不满足,条件3满足的时候做的事情
7}else{
8	全都不满足的时候做的事情
9}

跳楼现象,揭示多分支if语句的本质,就是下一个楼层已经暗含之上的楼层都不满足。



小题目: 面试题,读下面的程序,试问控制台输出什么?
明天的考试,一定有类似的题目:
1	<script type="text/javascript">
2		var a = 10;
3
4		if(a > 5){
5			a = a + 3;
6		}else if(a == 13){
7			a = a + 4;
8		}else if(a == 17){
9			a = a + 5;
10		}else{
11			a = a + 6;
12		}
13
14		console.log(a);
15	</script>

小练习:【分组探究作业】根据BMI(身体质量指数)显示一个人的体型。
BMI指数,就是体重、身高的一个计算公式。公式是:
BMI =体重÷身高的平方

比如,老师的体重是81.6公斤,身高是1.71米。
那么老师的BMI就是  81.6 ÷ 1.71^2     等于 27.906022365856163

过轻:低于18.5
正常:18.5-24.99999999
过重:25-27.9999999
肥胖:28-32
非常肥胖, 高于32

用JavaScript开发一个程序,让用户先输入自己的体重,然后输入自己的身高(弹出两次prompt框)。
计算它的BMI,根据上表,弹出用户的身体情况。比如“过轻” 、 “正常” 、“过重” 、 “肥胖” 、“非常肥胖”。
在程序开发中,充分考虑跳楼现象,不允许出现多余的东西。


方法1:
1	<script type="text/javascript">
2		//第一步,输入身高和体重
3		var height = parseFloat(prompt("请输入身高,单位是米"));
4		var weight = parseFloat(prompt("请输入体重,单位是公斤"));
5
6		//第二步,计算BMI指数
7		var BMI = weight / Math.pow(height,2);
8
9		//第三步,if语句来判断。注意跳楼现象
10		if(BMI < 18.5){
11			alert("过轻,嘻嘻嘻,你不怕被风吹走啊??多吃点吧!");
12		}else if(BMI < 25){
13			alert("正常,真好!!");
14		}else if(BMI < 28){
15			alert("过重!还好啊!");
16		}else if(BMI <= 32){
17			alert("肥胖,注意减肥啊!");
18		}else{
19			alert("非常肥胖!");
20		}
21	</script>

方法2:
1	<script type="text/javascript">
2		//第一步,输入身高和体重
3		var height = parseFloat(prompt("请输入身高,单位是米"));
4		var weight = parseFloat(prompt("请输入体重,单位是公斤"));
5
6		//第二步,计算BMI指数
7		var BMI = weight / Math.pow(height,2);
8
9		//第三步,if语句来判断。注意跳楼现象
10		if(BMI > 32){
11			alert("非常肥胖");
12		}else if(BMI >= 28){
13			alert("肥胖");
14		}else if(BMI >= 25){
15			alert("过重");
16		}else if(BMI >= 18.5){
17			alert("正常")
18		}else{
19			alert("偏瘦");
20		}
21	</script>

2.3 if语句的嵌套
小例子:
一个加油站为了鼓励车主多加油,所以加的多有优惠。
92号汽油,每升6元;如果大于等于20升,那么每升5.9;
97号汽油,每升7元;如果大于等于30升,那么每升6.95
编写JS程序,用户输入自己的汽油编号,然后输入自己加多少升,弹出价格。


两层:
1		//第一步,输入
2		var bianhao = parseInt(prompt("你想加什么油?填写92或者97"));
3		var sheng = parseFloat(prompt("你想加多少升?"));
4
5		//第二步,判断
6		if(bianhao == 92){
7			//编号是92的时候做的事情
8			if(sheng >= 20){
9				var price = sheng * 5.9;
10			}else{
11				var price = sheng * 6;
12			}
13		}else if(bianhao == 97){
14			//编号是97的时候做的事情
15			if(sheng >= 30){
16				var price = sheng * 6.95;
17			}else{
18				var price = sheng * 7;
19			}
20		}else{
21			alert("对不起,没有这个编号的汽油!");
22		}
23
24		alert("价格是" + price);

小例子:
某个公司要给员工发年终奖,为了奖励老员工,所以工作时间越长,发的越多,规则如下:
工作满0年		            发月薪的1倍月薪年终奖,如果月薪大于8000,那么就是发1.2倍
工作满1年		            发月薪的1.5倍月薪年终奖,如果月薪大于10000,那么就是发1.7倍
工作满2年,甚至更多		发月薪的3倍月薪年终奖,如果月薪大于12000,那么就是发3.2倍

用JS编写程序,让用户输入工作了几年,可以输入0,然后输入月薪。然后算年终奖。

答案见案例

2.4 if语句的小知识点
else部分可以省略。
1	<script type="text/javascript">
2		var a = 10;
3		if(a > 20){
4			alert("这个数字大于20");
5		}
6	</script>
没有else部分,就是说没有“否则”,如果条件表达式不满足了,那么就什么都不做。

如果要做的事情,只有一句话,那么可以省略大括号(初学者尽量不要这么玩儿,一定要把大括号写完整):
1	<script type="text/javascript">
2		var a = 2;
3		if(a > 5) alert("这个数字大于5");
4		alert("哈哈哈哈");
5	</script>
这个程序,a>5不满足,所以不能弹出“这个数字大于5” 。这是单行if语句,省略了大括号,
等价于:
1	<script type="text/javascript">
2		var a = 2;
3		if(a > 5){
4			alert("这个数字大于5");
5		}
6		alert("哈哈哈哈");
7	</script>
所以“哈哈哈哈”是能够弹出的。

for循环语句

4.1 认识for循环
在控制台输出1~100
100行语句:
1console.log(1);
2console.log(2);
3console.log(3);
4console.log(4);
5console.log(5);
6console.log(6);
7console.log(7);
8console.log(8);
9……
10console.log(100);

循环语句,就是执行一些类似的代码,让这些代码的编写变得简化。
程序:
1for(var i = 1 ; i <= 100 ; i++){
2	console.log(i);
3}
for(int i = 0 ;i<10 ;i++){

}

补充一个知识点,就是
1i++
等价于
1i = i + 1;
i自增1

也就是说
1		for(var i = 1 ; i <= 100 ; i++){
2			console.log(i);
3		}
等价于:
1		for(var i = 1 ; i <= 100 ; i = i + 1){
2			console.log(i);
3		}

4.2 准确遍历for循环
人,要去分析程序的运行,走向。
1	<script type="text/javascript">
2		for(var i = 1 ; i < 13 ; i = i + 4){
3			console.log(i);
4		}
5	</script>

遍历上面的代码:
程序一运行,将执行var i = 1;这条语句, 所以i的值是1。 然后程序会验证一下i < 13是否满足,1<13是真,所以执行一次循环体(就是大括号里面的语句)。执行完循环体之后,会执行i=i+4这条语句,所以i的值,是5。
程序会会验证一下i < 13是否满足,5<13是真,所以执行一次循环体(就是大括号里面的语句)。执行完循环体之后,会执行i=i+4这条语句,所以i的值,是9。
程序会会验证一下i < 13是否满足,9<13是真,所以执行一次循环体(就是大括号里面的语句)。执行完循环体之后,会执行i=i+4这条语句,所以i的值,是13。
程序会会验证一下i < 13是否满足,13<13是假,所以不执行循环体了,将退出循环。


小练习:
1for(var i = 50 ; i < 40 ; i++){
2	console.log(i);
3}
 什么也不输出。 因为程序一开始,i=50,然后会check一下i<40,为假。不执行


1for(var i = 1 ; i < 10 ; i = i + 3){
2	i = i + 1;
3	console.log(i);
4}
 
程序一开始i=1,所以进入循环体,i变为2,输出2。
然后执行i=i+3,所以i等于5了,满足i<10,所以进入循环体了,i变为6,输出6
然后执行i=i+3,所以i等于9了,满足i<10,所以进入循环体了, i变为10,输出10
然后执行i=i+3,所以i等于13了,不满足i<10,所以不执行循环体。

1for(var i = 1 ; i <= 10 ; i++){
2
3}
4console.log(i);

程序一开始,i等于1,满足i<=10,进入循环体,但是循环体没有语句,不会输出。
i++执行。 所以,程序一直当i为10的时候,又执行了一次i++,所以i等于11。不满足i<=10了,退出循环,输出11.


1for(var i = 1 ; i < 7 ; i = i + 3){
2
3}
4console.log(i);



1		for(var i = 1 ; i < 10 ; i = i + 1){
2			if(i % 2 == 0){
3				i = i * 2;
4			}
5			console.log(i);
6		}


1for(var i = 1 ; i > 0 ; i++){
2	console.log(i);
3}
死循环。 循环永远停不下来

for循环灵活:
1var i = 3;
2for(;i < 10 ; i++){
3	console.log(i);
4}


1		for(var i = 3 ; i < 20 ; i = i + 2){
2			if(i % 3 == 2){
3				i = i + 1;
4			}else{
5				i = i + 2;
6			}
7			console.log(i);
8		}



用for in的方遍历数组
js的for in 迭代, 返回的index 内容是数组的下标
for(var index in array) {  
	console.log(index,array[index]);  
};  

java的foreach循环,返回的i内容是集合的每一项的内容
for(int i:list){
}

函数

3.1 初步认识函数

	1	<script type="text/javascript">
	2		console.log("你好");//有括号的是方法,没括号的是属性
	3		sayHello();		//调用函数
	4
	5		//定义函数:
	6		function sayHello(){
	7			console.log("欢迎");
	8			console.log("welcome");
	9		}
	10	</script>
	11</body>
函数,是一种封装。就是将一些语句,封装到函数里面。通过调用的形式,执行这些语句。
函数的使用,是两个步骤,第一步,函数的定义:
语法:
1function 函数名字(){
2	
3}
function就是英语“函数”、“功能”的意思。顾名思义,将一些功能封装到函数里面。
function是一个关键字,和var、typeof一样,都是关键字,后面要加空格。
函数名字的命名规定,和变量的命名规定一样。只能是字母、数字、下划线、美元符号,不能以数字开头。
后面有一对儿空的小括号,里面是放参数用的,下午介绍。大括号里面,是这个函数的语句。
常见错误:
不能小括号包裹大括号:
1function sayHello({
2	
3})
不能忘了小括号对儿:
1function sayHello{
2	
3}


第二步,函数的调用。
函数如果不调用,等于白写。
调用一个函数,太简单了,就是这个函数的名字后面加小括号对儿。
语法:
1函数名字();

定义函数,可以在调用的后面:这是JS的语法特性,函数声明头的提升。知道就行了。
1		console.log("你好");
2		sayHello();		//调用函数
3
4		//定义函数:
5		function sayHello(){
6			console.log("欢迎");
7			console.log("welcome");
8		}

函数的功能、好处:
1) 将会被大量重复的语句写在函数里面,这样以后需要这些语句的时候,直接调用函数,不用重写那些语句。
2) 简化编程,让编程变的模块化。






3.2 函数的参数

实际参数和形式参数的个数,要相同。


1		qiuhe(3,4);
2		qiuhe("3",4);
3		qiuhe("我爱你","中国");
4		
5		function qiuhe(a,b){
6			console.log(a + b);
7		}


3.3 函数的返回值
1	<script type="text/javascript">
2		console.log(qiuhe(3,4));
3
4		function qiuhe(a,b){
5			return a + b;
6		}
7	</script>
return就是英语“返回”的意思,那么就表示此时这个“函数调用的表达式”,值就是这个a+b。

● 函数里面可以没有return,如果有,只能有一个。不能有多个return;
● 函数里面,return后面不允许书写程序了,也就是说写在后面的程序无效;

test.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>

	<script type="text/javascript">
		//js的6个蛋蛋:在js逻辑运算中,0、”“、null、false、undefined、NaN都会判为false,其他都为true。/*  */
		//&&假前真后    ||真前假后
		//&&优先于 ||
		console.log((1 && 3 || 0) && 4); //4
		console.log(1 && 3 || 0 && 4); //3
		console.log(0 && 3 || 1 && 4); //4
		
		var array = ["1","2","3"];
		for(var index in array){
			console.log(array[index]);
		}
		
		
		//调用函数
		aabbc();
		
		//函数中需要传参,可是你也可以不传参,函数中拿不到参数可能会报错
		aabb("aa");
		
		//自定义函数:函数定义之后不会执行,调用之后才能执行。
		function aabbc(){
			console.log("我是第一个函数");
		}
		
		function aabb(aa){
			console.log(aa);
		}
		
		
		var r = aaa(999);
		console.log(r);
		function aaa(a){
			return a;
		}
	</script>
</html>

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值