Javascript入门阶段——else if语句
1. 课程大纲
- if-else语句的复习
- 逻辑运算符(!)
- else if语句在飞机大战中的运用
2.1 逻辑运算符!(非)
- !:代表相反的意思
- 逻辑运算符!会把本来的运算结果转变成相反的结果。
- 根据下列代码,判断结果(true / false)
2.2 回顾if-else语句
if(判断条件){A
}else{B
}
- 判断条件为真(true),执行A处的代码
- 判定条件为假(false),执行B处代码
- 如果明天不下雨,在警告框中显示去动物园,否则显示在家写作业。代码如下:
var isRain = false;
if(!isRain){alert("去动物园");
}else{alert("在家写作业");
}
代码运行结果:
- 声明变量 isRain,表示明天是否下雨。
- 使用if-else语句判断是否下雨。
- isRain为 false,那么! isRain为true,执行第一个大括号中的代码,在警告框中显示“去动物园”。
3. else-if语句
3.1 学生分数等级划分程序
- 根据学生分数划分等级:
3.2 else if语句
if(判断条件一){A
}else if(判断条件二){B
}else if(判断条件三){C
}else{D
}
- else if语句用于多重判断;
- 如果判断条件一为true,执行A处代码
- 判断条件一为 false,再执行判断条件二,如果判断条件二为true,则执行B处代码
- 同理,判断条件二为 false,再执行判断条件三,如果判断条件三为true,执行C处的代码
- 如果之前的判断条件都为 false,则执行D处的代码
- 程序执行流程如下图所示:
3.3 学生分数等级划分程序代码
代码如下
<!DOCTYPE html>
<html><title>test01</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<script>
var score = prompt("请输入考试分数:");
if(score >= 90){alert("等级A");
}else if(score >= 80){alert("等级B");
}else if(score >= 70){alert("等级C");
}else if(score >= 60){alert("等级D");
}else{alert("不及格");
}
</script>
</body>
</html>
- 如果 score>=90为true,在警告框上显示"等级A"。
- 若 score>=90为 False,再判断 score>=80.如果 score>=80为true,在警告框上显示"等级B"。
- 依次同理,若 score>=80为 false,再判断 score>=70.如果 score>=70为true,在警告框上显示"等级C"
- 依次同理,若 score>=70为 false,再判断 score>=60.如果 score>=60为true,在警告框上显示"等级D"
- 若以上所有的条件都不成立,在警告框上显示"不及格"
3.4 数字星期对应程序
- 程序执行流程图如下:
代码如下:
<!DOCTYPE html>
<html><title>test01</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<script>
var today = prompt("请输入1-7的数字:");
if(today == 1){alert("今天是星期一");
}else if(today == 2){alert("今天是星期二");
}else if(today == 3){alert("今天是星期三");
}else if(today == 4){alert("今天是星期四");
}else if(today == 5){alert("今天是星期五");
}else if(today == 6){alert("今天是星期六");
}else if(today == 7){alert("今天是星期日");
}else{alert("该数字没有星期对应!");
}
</script>
</body>
</html>
3.5 else if语句在飞机大战中的实际运用
根据型号画飞机
- 代码如下
<!DOCTYPE html>
<html><title>test01</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><canvas id="myCanvas" width="500" height="500"></canvas>
<body>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var type = prompt("请输入飞机类型:");
if(type == 1){ctx.drawImage(enemy1,100,100);
}else if(type == 2){ctx.drawImage(ememy2,200,200);
}else if(type == 3){ctx.drawImage(enemy3,300,300);
}else{ctx.font = "40px 微软雅黑";ctx.fillText("没有该类型的飞机",100,50);
}
</script>
</body>
</html>
- 提示用户,在信息提示输入框中输入飞机类型
- 输入1的时候,在画布上画出架小型敌机。
- 输入2的时候,在画布上画出一架中型敌机。
- 输入3的时候,在画布上画出一架大型敌机。
- 输入其它数字的时候,在画布上写出"没有该类型飞机”的字样,且文字的大小为40px、字体为微软雅黑。
Javascript入门阶段——else if语句相关推荐
- Javascript入门阶段——if语句
1.课程大纲 if语句的基本用法 判断真假 ==表示是否相等 2.1 if语句 if语句:用来做条件判断. if语句的语法结构,如下所示: if(①){② } if关键字后面有一对小括号,小括号后面是 ...
- JavaScript 入门(上)
目录 一.JavaScript简介 二.JavaScript的特点 1.动态改变页面内容 2.动态改变网页的外观 3.验证表单数据 4.响应事件 三.内容 1.JavaScript简介 一.JavaS ...
- JavaScript入门笔记
第一章 JavaScript语法 1.1 初识JavaScript 1.3 数据类型 1.4 string和boolean类型 1.5 算数操作符 第二章 JavaScript流程控制语句 2.1 循 ...
- (6)javascript的程序控制结构及语句-----(1)条件判断
程序控制结构及语句 编程就是将现实应用,转换为程序能够读得懂的语法语句.Javascript编程中对程序流程控制主要是通过条件判断语句.循环控制语句及continue.break来完成的,其中条件判断 ...
- 《JavaScript入门经典(第6版)》——2.7 问答
本节书摘来自异步社区<JavaScript入门经典(第6版)>一书中的第2章,第2.7节,作者: [美] Phil Ballard 译者:李 军陈冀康,更多章节内容可以访问云栖社区&quo ...
- JavaScript入门【JavaScript专题1】
JavaScript入门 从今天开始就与大家一起学习JavaScript了 在本系列教程中,您将学习如何制作 JavaScript 驱动的网页. JavaScript 入门 在这里,您将了解使用 Ja ...
- JavaScript入门(part9)--函数
学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 函数 函数的概念 函数的使用 函数的参数 函数的返回值 arguments的使用 函数的两种声明方式 Jav ...
- JavaScript入门(part7)--流程控制
学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 流程控制 流程控制概念 顺序流程控制 分支流程控制 三元表达式 switch分支流程控制 for循环 双重f ...
- javascript入门_JavaScript入门手册(2020版)
javascript入门 JavaScript is one of the most popular programming languages in the world. JavaScript是世界 ...
最新文章
- AI芯片:从历史看未来
- 我是如何利用“王宝强离婚”事件来吸粉的
- 让你明白response.sendRedirect()与request.getRequestDispatcher().forward()区别
- SourceInsight 4.0 之四 项目配置(库文件引入、配置宏添加、快捷键修改等)
- 学习历史预测未来,国防科大新模型实现未来事实预测SOTA
- Word2003和2007如何隐藏去掉回车符
- 数据库学习笔记4-隔离级别 Read Committed
- 关于扩展欧几里得算法的证明
- 将CCT色温转换成RGB
- node在Fedora 22系统下开发环境搭建
- 苹果AppStore应用商店生存之道以及市场攻略最全解析
- 新加坡政府企业架构:问题、实践和趋势(2008)
- 增加虚拟android内存,SD卡变RAM 增加虚拟内存方法
- 华为ensp联动Wmware虚拟机Openstack平台实现Vlan网络模式
- [翼灵物联网工作室例会分享]
- 精选 2021 年大厂高频 Java 面试真题集锦(含答案),面试一路开挂
- svn: OPTIONS of 'https://lym-pc/svn/CRM': Could not resolve hostname 'lym-pc'
- 利用快手抖音做小吃培训,年入100000+
- Excel使用日历控件
- Vue 32个修饰符,你不一定全知道!