响应式网页设计之运算符及判断语句

最新推荐文章于 2023-10-24 10:41:42 发布

PRINT！

最新推荐文章于 2023-10-24 10:41:42 发布

阅读量690

点赞数 3

分类专栏：响应式网页学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_48592827/article/details/114600265

版权

响应式网页学习笔记专栏收录该内容

20 篇文章 3 订阅

订阅专栏

JavaScript语法基础（二）

一、运算符号
- 1.运算符的使用
二、判断语句
- 1.if 语句
- 2.switch语句
三、网页小案例
- 1.题目要求
- 2.原码奉上

提示：这是上一篇（响应式网页设计之变量及数据类型）文章的补充，原因是上一篇内容真的太长了~~~[些许苦涩]

一、运算符号

在这里插入图片描述

1.运算符的使用

这里我选取了部分典型的运算符进行讲解

使用==时，只比较值是否相等
这里的a、b两个变量的数据类型不同，但是值相同。

var a = 1, b = "1";  
a==b; //true  
a===b; //false

使用+或+=时，当其中一个值为字符串时，会把另一个值转换为字符串再进行拼接（字符串是强类型）

var a = 1, b = "abc";  
console.log(a + b); //输出字符串1abc

当相加的两个值为数字、布尔值、null时，会把布尔值和null转换为数字再相加；false 就是 0，true 就是 1

var a = null, b = true;  
console.log(a + b); //输出数字1

二、判断语句

1.if 语句

if … else语句
如果明天下雨，我就呆在家，反之则是不下雨，我就去逛街。
if(是否下雨){
我呆在家 //是下雨
}else{
我去逛街 //不下雨
}

//执行语句用花括号{ }括起来，当执行语句只有一条时，可以省略花括号，但是不推荐这样做。
if (条件表达式) {  
    //条件为真的情况下执行 
} else {  
    //条件为假的情况下执行  
}

在这里插入图片描述
如下代码，判断是否成年，成年的条件就是年龄是否大于等于18

//判断是否成年
var age = 20;  
if (age >= 18) {  
    console.log("已成年");  
} else {  
    console.log("未成年");  
}

三元表达式
(条件表达式) ? (语句1) : (语句2)，当条件表达式为true时，执行语句1，反之执行语句2

var age = 20;  
age > 18 ? console.log("已成年") : console.log("未成年");

嵌套if语句
什么时候会用到嵌套if语句呢？
题目：用户输入一个0 ~ 100的数，1.判断输入是否是数字，2.判断是否是0 ~ 100，3.判断是否大于60，60及以上输出及格，60及以下输出不及格；

       从题目中可以得到的信息是：
       ① 需要先判断输入的是否是数字，
       ② 如果是数字就继续判断是否在0~100以内，
       ③ 同时满足以上两个条件才可以判断是否及格

var num = Number(prompt("请输入0～100的数："));
if(isNaN(num)||num==''){
	alert('您输入的不是数字！');
}else{
	if(num<0||num>100){
		alert('您输入的数不在规定范围');
	}else{
		if(num>=60){
			alert('及格');
		}else{
			alert('不及格');
		}
	}
}

在这里插入图片描述

2.switch语句

switch语句也是用来做选择的，通常用于分支很多的情况下，比如一年有十二个月，要求输入月份得到该月份的天数，写12个if未免有些麻烦了，这个时候建议采用switch

switch(表达式){  
    case 值1:  
    //执行语句1  
    break;  
    case 值2:  
    //执行语句2  
    break;  
    default:  
    //执行语句3  
    break;  
}

补充：这里的break不是必须要存在的；如果没有break，程序就会一直执行，直到跳出switch。当case都不满足的时候，执行default语句。

小题目：成绩等级评定
当成绩在100 ~ 90评为优秀，90 ~ 80评为良好，80 ~ 70评为中等，70 ~ 60评为及格，60以下为不及格；要求用switch语句完成此题。

三、网页小案例

1.题目要求

本次题目的结合了if语句和switch语句，从题目要求中可以得知本次输入必须是数字，所以首先判断输入是否为数字，然后要判断输入的年份是否为闰年(如果是闰年，2月有29天；反之平年2月有28天)，在下图中给出了满足闰年的条件。最后需要判断输入的月份是否在1~12月。
在这里插入图片描述

2.原码奉上

建议先尝试着写一下，自己完成更有成就感喔！
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>输出天数</title>
	</head>
	<body>
		<script type="text/javascript">
			while(true) {
				var year = Number(prompt('请输入年份：'));
				if(isNaN(year)) {
					alert('请输入数字！');
					break;
				}
				var month = Number(prompt('请输入月份：'));
				if(isNaN(month)) {
					alert('请输入数字！！');
					break;
				} else {
					if(month < 0 || month > 12) {
						alert('月份超出范围');
						break;
					}
				}
				switch(month) {
					case 1:
					case 3:
					case 5:
					case 7:
					case 8:
					case 10:
					case 12:
						alert('该月有31天');
						break;
					case 2:
						if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
							alert('该月有29天');
						} else {
							alert('该月有28天');
						}
						break;
					case 4:
					case 6:
					case 9:
					case 11:
						alert('该月有30天');
				}
				break;
			}
		</script>
	</body>
</html>

您如果对文章有其他的见解，欢迎指正~ 在这里插入图片描述

PRINT！

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
响应式网页设计之运算符及判断语句

JavaScript语法基础（二）一、运算符号1.运算符的使用二、判断语句1.if 语句2.switch语句三、网页小案例1.题目要求2.原码奉上一、运算符号1.运算符的使用这里我选取了部分典型的运算符进行讲解使用==时，只比较值是否相等这里的a、b两个变量的数据类型不同，但是值相同。var a = 1, b = "1"; a==b; //true a===b; //false 使用+或+=时，当其中一个值为字符串时，会把另一个值转换为字符串再进行拼接（字符串是强类型）
复制链接

扫一扫