文章目录
- 1.HMLT中if/else语句的基本使用
- 2.if---else if --- else多条件的判断
- 3.三元表达式
- 4.switch / case 语句的应用
- 一.常规写法
- 二.简写switch case语句以及注意点
- 5.while循环的使用
- 一.基本用法
- 二.应用案例
- 6.do / while 循环的使用
- 7.for循环的基本应用
- 8.for循环的嵌套使用--长方体的五角星
- 9.for循环嵌套---三角形形状的五角星
- 10.for循环的嵌套使用---乘法口诀的实现
1.HMLT中if/else语句的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>if/else语句的基本使用</title>
</head>
<body>
# 将js代码放入body里面的最底部,这样方便先加载静态显示的内容,再加载js动态效果
<script type="text/javascript">
var age = parseInt(prompt("请您输入一个年龄!"))
console.log(age)
if (age > 18){
console.log("已经成年了,可以喝酒了!")
}else{
console.log("未成年人,请不要喝酒抽烟!!")
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>if/else语句的基本使用</title>
</head>
<body>
# 将js代码放入body里面的最底部,这样方便先加载静态显示的内容,再加载js动态效果
<script type="text/javascript">
var age = parseInt(prompt("请您输入一个年龄!"))
console.log(age)
if (age > 18){
console.log("已经成年了,可以喝酒了!")
}else{
console.log("未成年人,请不要喝酒抽烟!!")
}
</script>
</body>
</html>
解释:
- (1)parseInt()方法可以将str类型转Int类型
- (2)prompt()方法是可以自动弹出输入框并赋值给js代码里面的变量
- (3)console.log()这个里面打印的东西,都显示在浏览器console里面,方便developer调试程序
2.if—else if — else多条件的判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>if /else if /else</title>
</head>
<body>
<script>
/*
score 90--100 A级
80--90 B级
70--80 C级
60--70 D级
0-- 60 E级
*/
var score = Number(prompt('请输入您的成绩'))
if (!isNaN(score)){
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("您输入的数据有误,请输入数字")
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>if /else if /else</title>
</head>
<body>
<script>
/*
score 90--100 A级
80--90 B级
70--80 C级
60--70 D级
0-- 60 E级
*/
var score = Number(prompt('请输入您的成绩'))
if (!isNaN(score)){
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("您输入的数据有误,请输入数字")
}
</script>
</body>
</html>
解释:
- (1)isNaN()函数,判断是否为非数字,NaN:not a number
- (2)!isNaN(),判断是否为数字,函数里面是变量,返回True 或 False
- (3)else if 可以有多个,但if & else都只能有一个
- (4)Number()这个函数,是将字符串转数字的函数,浮点类型或整型类型都可以,而ParseInt()函数,只能转换为整型类型。
3.三元表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var age = parseInt(prompt("请输入一个年龄"));
result = age >= 18 ? "成年了":"未成年";
console.log(result);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var age = parseInt(prompt("请输入一个年龄"));
result = age >= 18 ? "成年了":"未成年";
console.log(result);
</script>
</body>
</html>
解释:
- (1)result = age >= 18 ? “成年了”:“未成年”; 将这个分为三部分来理解
- (2)result是变量
- (3)age>=18 是判断语句
- (4)“成年了”:"未成年"是最终可选的结果
- (5)如果(3)成立,那么就输出(4)选项里面的"成年了",否者输出"未成年"
4.switch / case 语句的应用
一.常规写法
/*
score 90--100 A级
80--90 B级
70--80 C级
60--70 D级
0-- 60 E级
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var score_level = prompt("请输入成绩等级");
switch (score_level) {
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;
case "E":
console.log("分数大约在0--60之间");
break;
}
</script>
</body>
</html>
/*
score 90--100 A级
80--90 B级
70--80 C级
60--70 D级
0-- 60 E级
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var score_level = prompt("请输入成绩等级");
switch (score_level) {
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;
case "E":
console.log("分数大约在0--60之间");
break;
}
</script>
</body>
</html>
解释:
- (1)switch(变量),变量是具体的一个值
- (2)case后面的变量,这个也是不同的具体的值,符合条件就执行case后面的代码,然后跳出循环break;
二.简写switch case语句以及注意点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var montch = parseInt(prompt("请输入月份"));
switch(montch){
case 1:
case 3:
case 5:
case 7:console.log("七月31天");break;
case 6:
case 8:console.log("八月30天");break;
case 2:console.log("二月28天");break;
default:
console.log("输入的数据不符合条件");break;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var montch = parseInt(prompt("请输入月份"));
switch(montch){
case 1:
case 3:
case 5:
case 7:console.log("七月31天");break;
case 6:
case 8:console.log("八月30天");break;
case 2:console.log("二月28天");break;
default:
console.log("输入的数据不符合条件");break;
}
</script>
</body>
</html>
解释:
- (1)把case分类里面,执行语句一样的分为一类,最后一个执行语句可以涵盖前面的表达式;
- (2)default后面的break可以省略
- (3)switch()函数的变量与case后面的变量,这两个变量是严格模式的比较,类型、大小都需要比较
- (4)default()语句也可以不写,用case代替即可
5.while循环的使用
一.基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var i = 0;
while (i<20){
console.log("hello world", i+1);
i++;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var i = 0;
while (i<20){
console.log("hello world", i+1);
i++;
}
</script>
</body>
</html>
二.应用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var username = prompt("请输入用户名!");
var pw = prompt("请输入密码");
while (username != "admin" || pw != "123456") {
username = prompt("请输入用户名!")
pw = prompt("请输入密码")
}
console.log("登录成功")
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var username = prompt("请输入用户名!");
var pw = prompt("请输入密码");
while (username != "admin" || pw != "123456") {
username = prompt("请输入用户名!")
pw = prompt("请输入密码")
}
console.log("登录成功")
</script>
</body>
</html>
解释:
- (1)var username = prompt(“请输入用户名!”),声明并初始化变量;
- (2)while循环里面,对username还可以再次赋值,改变变量的值
- (3)username != “admin” || pw != “123456”,只要有一个变量不是正确的,就进入循环,然后需要重新输入2个变量的值。
- (4)如果2个变量都正确,就不符合while()循环的条件,则直接执行console.log(“登录成功”)
6.do / while 循环的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
do{
var age = parseInt(prompt("请您输入年龄"));
}while(age<18);
console.log("恭喜您,您刚刚成年了!")
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
do{
var age = parseInt(prompt("请您输入年龄"));
}while(age<18);
console.log("恭喜您,您刚刚成年了!")
</script>
</body>
</html>
解释:
- (1)do()里面是具体的表达式,如果符合while()条件就执行do()里面的表达式
- (2)while()里面是判断语句,
- (3)如果不符合while()的判断条件,就执行外部的语句,console.log()
7.for循环的基本应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i%2==0){
sum += i
}
}
console.log("求和为:", sum)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i%2==0){
sum += i
}
}
console.log("求和为:", sum)
</script>
</body>
</html>
解释:
- (1)for()循环里面一般需要有3个表达式,变量,变量的范围,计数器3个
- (2)先循环,然后再判断每个数是否为偶数,偶数就添加到sum()里面
8.for循环的嵌套使用–长方体的五角星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 控制具体打印多少行
for(var l=0;l<5;l++){
// 控制每一行的具体打印情况和换行
for (var i = 1; i <= 5; i++) {
document.write("⭐️")
}
document.write("<br/>")
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 控制具体打印多少行
for(var l=0;l<5;l++){
// 控制每一行的具体打印情况和换行
for (var i = 1; i <= 5; i++) {
document.write("⭐️")
}
document.write("<br/>")
}
</script>
</body>
</html>
解释:
- (1)最外面一层for循环是控制行数,里面for是控制每一行的情况
- (2)document.write(""),这个函数里面一般填写标签组的内容,最终显示在浏览器里面,
9.for循环嵌套—三角形形状的五角星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 控制具体打印多少行
for(var l=1;l<=5;l++){
// 控制每一行的具体打印情况和换行
for (var i = 1; i <= l; i++) {
document.write("⭐️")
}
document.write("<br/>")
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 控制具体打印多少行
for(var l=1;l<=5;l++){
// 控制每一行的具体打印情况和换行
for (var i = 1; i <= l; i++) {
document.write("⭐️")
}
document.write("<br/>")
}
</script>
</body>
</html>
10.for循环的嵌套使用—乘法口诀的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 控制具体打印多少行---乘法口诀
for(var l=1;l<=9;l++){
// 控制每一行的具体打印情况和换行
for (var i = 1; i <= l; i++) {
document.write(i+"*"+l+"="+i*l,'\t')
}
document.write("<br/>")
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 控制具体打印多少行---乘法口诀
for(var l=1;l<=9;l++){
// 控制每一行的具体打印情况和换行
for (var i = 1; i <= l; i++) {
document.write(i+"*"+l+"="+i*l,'\t')
}
document.write("<br/>")
}
</script>
</body>
</html>