4.1 if语句

如果……否则……  , 让程序出现分支

1        <script type="text/javascript">

2           var a = 8;

3           if(a >= 60){

4               alert("及格了");

5           }else{

6               alert("不及格");

7           }

8        </script>

语法:

1    if(测试表达式){

2        测试表达式为真执行的语句

3    }else{

4        测试表达式为假执行的语句

5    }

if英语里面的如果的意思,else就是否则的意思。else不要拼写为eles。

在语法层面有两个特例:

① 可以没有else部分

1    var a = 1;

2    if(a >= 60){

3        alert("及格了");

4    }

② 如果要执行的语句,只有一行语句,那么就是单行if,就可以省略大括号。

1           var a = 112;

2           if(a >= 60)

3               alert("及格了");

4           else

5               alert("不及格");

// 最基本的if语句
// var a = 8;
// if(a >= 60){
// alert("及格了");
// }else{
// alert("不及格");
// } // 可以省略else部分
// var a = 1;
// if(a >= 60){
// alert("及格了");
// } // 如果结构体中只有单行语句,那么可以省略大括号
// var a = 112;
// if(a >= 60)
// alert("及格了");
// else
// alert("不及格"); // 搞清楚哪些语句在结构体中,哪些不在
var a = 77;
if(a > 30){
console.log("哈哈");
console.log("嘻嘻");
console.log("呵呵");
}else{
console.log("纳尼");
console.log("呸呸")
}
console.log("么么哒"); //一定执行,因为在if结构体外面。

注意if语句是一个结构体,注意哪些语句是在结构体中,哪些语句不是结构体:

1           var a = 355;

2           if(a > 30){

3               console.log("哈哈");

4               console.log("嘻嘻");

5               console.log("呵呵");

6           }else{

7               console.log("纳尼");

8               console.log("呸呸")

9           }

10          console.log("么么哒");  /*一定会执行,在if结构体外面*/

如果a是3,不满足条件:

小练习:用户输入一个年龄,判断用户能不能考取驾照。交规说: 大于等于18,小于等于70才能考取驾照。

1           //让用户输入年龄

2           var age = parseInt(prompt("请输入年龄"));

3           //判断

4           if(age >= 18 && age <= 70){

5               alert("可以考取驾照");

6           }else{

7               alert("年龄不符合要求");

8           }

9           alert("谢谢惠顾");

//让用户输入年龄
var age = parseInt(prompt("请输入年龄"));
//判断
if(age >= 18 && age <= 70){
alert("可以考取驾照");
}else{
alert("年龄不符合要求");
}
alert("谢谢惠顾");

多分支的if

if……else if …… else if…… else if…… else ……

如果……否则如果……否则如果……否则如果……否则……

跳楼现象,用户会选择一个分支执行(跳楼),选择这个分支了,就暗含了上一个分支没有满足:

1   
       var
score = 76;

2

3   
       if(score
>= 85){

4   
           alert("优秀");   //不满足条件,所以不执行,走楼梯下楼

5   
       }else
if(score >= 70){

6   
           alert("良好");   //走到这个楼层的,一定暗含小于85。这一楼层满足,跳楼了

7   
       }else
if(score >= 60){

8   
           alert("及格");  //不执行

9   
       }else{

10  
           alert("不及格")  //不执行

11  
       }

语法:

1   
if(测试表达式1){

2   
    测试表达式1为真的时候做的事情

3   
}else if(测试表达式2){

4   
    测试表达式1为假,且测试表达式2为真的时候做的事情

5   
}else if(测试表达式3){

6   
    测试表达式1为假,测试表达式2为假,且测试表达式3为真的时候做的事情

7   
}

8   
……

// var score = 66;

        // if(score >= 85){
// alert("优秀");
// }else if(score >= 70){
// alert("良好");
// }else if(score >= 60){
// alert("及格");
// }else{
// alert("不及格")
// } //错误的写法!
// var score = 100;
// if(score >= 0){
// alert("不及格");
// }else if(score >= 60){
// alert("及格");
// }else if(score >= 75){
// alert("良好");
// }else(score >= 85){
// alert("优秀");
// } // var score = 100;
// if(score <= 60){
// alert("不及格");
// }else if(score <= 75){
// alert("及格");
// }else if(score <= 85){
// alert("良好");
// }else{
// alert("优秀");
// } //语句且"仅"会选择一条路走。
var a = 6;
if(a < 8){
a = a + 3; //a<8条件满足,所以执行,跳楼!
}else if(a == 9){
a = a + 4; //不执行
}else if(a == 13){
a = a + 5; //不执行
}else if(a == 18){
a = a + 6; //不执行
}
console.log(a); //

if语句的嵌套:

用户先输入自己的性别,比如男、女。然后输入自己的年龄。判断能否结婚。

男的22以上

女的20以上

if语句可以嵌套,如果里面再套一层如果:

1   
       //判断

2   
       if(sex == ""){

3   
           //

4   
           if(age >= 22){

5   
              alert("男同志你好,可以结婚");

6   
           }else{

7   
              alert("你还是个小正太,不能结婚!");

8   
           }

9   
       }else{

10  
           //

11  
           if(age >= 20){

12  
              alert("女同志你好,可以结婚");

13  
           }else{

14  
              alert("你还是个小萝莉,不能结婚!");

15  
           }

16  
       }

楼层中else只能有一个。 else if可以有多个。

//用户先输入自己的性别,比如男、女。然后输入自己的年龄。判断能否结婚
//先输入性别
var sex = prompt("请输入性别","男");
var age = parseInt(prompt("请输入年龄")); // //判断
if(sex == "男"){
//男
if(age >= 22){
alert("男同志你好,可以结婚");
}else{
alert("你还是个小正太,不能结婚!");
}
}else if(sex == "女"){
//女
if(age >= 20){
alert("女同志你好,可以结婚");
}else{
alert("你还是个小萝莉,不能结婚!");
}
}else{
alert("你输入的不是正确的性别!!");
} //方法2:
// if(sex == "男" && age >= 22){
// alert("男同志你好,可以结婚");
// }else if(sex == "男" && age < 22){
// alert("你还是个小正太,不能结婚!");
// }else if(sex == "女" && age >= 20){
// alert("女同志你好,可以结婚");
// }else if(sex == "女" && age < 20){
// alert("你还是个小萝莉,不能结婚!");
// }

前端——JavaScript之if语句的更多相关文章

  1. python学习之路前端-JavaScript

    JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...

  2. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  3. JavaScript中if语句优化和部分语法糖小技巧推荐

    前言 在前端日常开发过程中,if else判断语句使用的次数应该是比较频繁的了,一些较为复杂的场景,可能会用到很多判断,在某个代码块使用很多if else时,代码会显得较为冗余,阅读起来不够清晰. 除 ...

  4. JavaScript If...Else 语句

    JavaScript If...Else 语句 JavaScript的开头和结束标签: <script type="text/javascript"></scri ...

  5. 前端JavaScript规范

    前端JavaScript规范 http://www.imooc.com/article/1402 http://greengerong.com/blog/2015/05/09/qian-duan-ja ...

  6. 实例演示 kino.razor (前端 Javascript 模板工具,Razor 风格)的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  7. 在C#后端处理一些结果然传给前端Javascript或是jQuery

    在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...

  8. JavaScript的循环语句

    JavaScript的循环语句 1.JavaScript的循环语句 (1)for循环语句 - 循环代码块一定的次数: (2)for/in循环语句 - 循环遍历对象的属性: (3)while循环语句 - ...

  9. JavaScript的条件语句

    JavaScript的条件语句 1.JavaScript的条件语句包括以下几个 (1)if - 只有当指定条件为true时,使用该语句来执行代码: (2)if...else - 当指定条件为true时 ...

随机推荐

  1. Android作业

    一.设置跑马灯功能   使用滚动字幕显示标题“请选择你喜欢哪种花” <?xml version="1.0" encoding="utf-8"?>&l ...

  2. 从输入URL按下回车到页面展现,中间发生了什么?

    从输入URL按下回车到页面展现,总的来说发生了一下几个过程: DNS 解析:将域名解析成 IP 地址 TCP 连接:TCP 三次握手 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器 ...

  3. nginx和resin一二三

    最近听我们这边的开发讲解了一小下nginx和resin,现在Mark一下,可能不专业,但是对于我来说通俗易懂就好哈哈哈. 首先说服务器,服务器这个东西吧它是干啥的呢,你写的页面只能在你自己的电脑上打开 ...

  4. Proxy代理模式(结构型)

    一:描述: 为其他对象提供一种代理,来控制对这个对象的访问.如当操作某个对象很复杂时,我们可以建个代理来操作复杂对象,并开放一些简单的接口/方法来让我们比较简单的间接操作,也可在代理层实现一些自己的业 ...

  5. Tecplot: Legend显示与否

    有时候不想显示多个数据中的某些数据的legend,只需要在Mapping style中的definition最后一列,show in legend 改为never就好了.

  6. Spring MVC 上下文(ApplicationContext)初始化入口

    Spring 常用上下文容器有哪些 ApplicationContext ClassPathXmlApplicationContext ApplicationContext context = new ...

  7. Dapp的PVP发模式--magic-maze-2d游戏解读

    前言: 未来基于Dapp的游戏可能会多起来吧, 尤其是博彩类游戏, 由于区块链匿名特性, 加之数字货币不受国家监控, 几乎成了一个法外之地. 大量游戏团队都往之涌入. 今天讲讲当前Dapp的一种游戏模 ...

  8. 大数据学习-2 认识Hadoop

    一.什么是Hadoop? Hadoop可以简单的理解为一个数据存储和数据分析分布式系统.随着互联网的普及产生的数据是非常的庞大的,那么我们怎么去处理这么大量的数据呢?传统的单一计算机肯定是完成不了的, ...

  9. ubuntu18.04LTS配置apache虚拟目录(基于端口)

    假设在用户目录下要新建两个虚拟目录web1,web2,分别对应端口8081,8082 $ cd ~ #切换到用户目录 $ mkdir www #新建www文件夹,以后新建的虚拟目录都放在该文件夹下 $ ...

  10. css之line-height及图片文字垂直居中

    css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...