zoukankan      html  css  js  c++  java
  • (6)javascript的程序控制结构及语句-----(1)条件判断

    程序控制结构及语句

    编程就是将现实应用,转换为程序能够读得懂的语法语句。Javascript编程中对程序流程控制主要是通过条件判断语句循环控制语句continuebreak来完成的,其中条件判断按预先设定的条件执行顺序,它包括if语句和switch语句;而循环控制语句则可以重复完成任务,它包括while语句、do...while语句及for语句。

     一、条件判断语句:

     条件判断语句就是对语句中不同条件的值进行判断,进而根据不同条件执行不同的语句。条件判断语句有“if条件语句”和“switch多分支语句”。

     (1)、if条件语句

     是条件选择语句,语法格式:

    if (条件语句表达式)
      {
      只有当条件语句表达式为 true 时执行的代码
      }
    复制代码
    例子1:
                var y;
                 y=80;
                 if(y>120) //表达式为false
    
                     alert("执行语句1信息");//if结构只能控制它下面一条语句
    
                 alert("执行语句2");   //因y>120表达式为false,故执行此语句
    
            注意:只弹出  ”语句2“ ,而 ”此只执行语句1信息“  不会弹出
    
      例子2:
    
          var y;
          y=80;
          if(y>120){  //if控制{}所有语句
    
                  alert("语句1");
    
                  alert("语句2");
    
                }
    
      注意:两条都不执行,因为y>120为false
    
     注意:所有结构都是如此,默认只能控制结构下方一条语句,想控制多条必须加在大括号{}
    复制代码

    案例:

    复制代码
    <!doctype html>
     <head>
     <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
     <meta name="keywords" content="javascript的程序控制结构与语句,javascript入门">
     <meta name="description" content="老罗江湖">
     <title> if语句的使用 </title>
     </head>
     <body>
     <p>如果时间早于21:00,会获得问候“very Good”。</p>
     <button onclick="myFunction()">单击这里</button>
     <p id="demo"></p>
     <script type="text/javascript">
    function myFunction()
    {
    var x="";
    var time=new Date().getHours();   //获取系统日期、获取此时此刻“时针数”
    if (time<22)    //22代表“时间”填写时,注意根据时间而定。
         {
           x="very Good";
         }
    document.getElementById("demo").innerHTML=x;
    }
    </script>
    <p>请注意,上面在if语句中,没有 ..else..。您已经告诉浏览器只有在指定条件为 true 时才执行代码。</p>
     </body>
    </html>
    复制代码

    效果图:

    请使用小写的 if,使用大写字母(IF)会生成 JavaScript 错误!请注意,上面在if语句中,没有 ..else..。您已经告诉浏览器只有在指定条件为 true 时才执行代码。

    2if...else 语句 

    用于需要用两个程序分支来执行的情况。 If...else语法:

    复制代码
    If(条件表达式)
    {
    当 条件表达式 成立 “为true”时执行这语句段
    }
    else{
    当 条件表达式 不成立“为false”时执行这语句段
    }

    //当条件为 true 时执行if后面的从句,当条件为 false 时执行else后面部分的从句。

     
    复制代码

    案例:

    复制代码
    <script type="text/javascript">
        var y = "Beautiful Girl";
        if( y != "Beautiful Girl")
        {
        document.write('<h3 style="text-algin:center;color:pink;">欢迎素颜美女光临</h3>');
        }
        else{
        document.write('<p style="font-size:30px;color:red;">先天问题请化妆再来</p>');
        }</script> 
    复制代码

    效果图:对变量y的值进行判断,如果y值不等于Beautiful Girl,则输出粉红色字符;否则输出红色字符。

    3If...else if...else语句

    使用 if....else if...else语句来选择多个代码块之一来执行。语法格式:

    复制代码
    if(条件1)
    {
    当条件1为true是执行的代码
    }
    else if(条件2)
    {
    当条件2为true时执行的代码
    }
    else{
    当条件1和条件2都不为true是执行的代码
    }
    复制代码

    案例:

    复制代码
     <title> if...else if...else语句的使用 </title>
     </head>
     <body>
      <p>如果时间早于21:00,会获得问候“very Good”。</p>
     <button onclick="myFunction()">单击这里</button>
     <p id="demo"></p>
     <script type="text/javascript">
        function myFunction()
        { 
        var d = new Date();      //获取系统日期
        var time=d.getHours();  //获取此时此刻“时针数”
         if (time<10)
          {
          document.write('Good morning');
          }
        else if (time<18)
          {
          document.write('Good afternoon');
          }
        else
          {
          document.write('Good evening');
          }
        }
     </script>
     </body>
    复制代码

    效果图:如果时间小于 10:00,则将发送问候 "Good morning",否则如果时间小于 18:00,则发送问候 "Good afternoon",否则发送问候 "Good evening",因此时是晚上九点钟,所以输出的结构为下图:

    4、if语句的嵌套

    If语句可以嵌套使用。当使用if语句的嵌套应用时,最好使用“{ }”来确定相互的层次关系,由于大括号“{ }”使用的位置不同,可能导致程序代码的含义完全不同,从而输出不同的结果。

    案例:

    复制代码
    <title> if语句的嵌套 </title>
     </head>
     <body>
     <script type="text/javascript">
     var x=20;y=x;             //x、y值都为20
     if(x<1)               //x为20,不满足此条件,故其下面的代码不会执行
     {
     if(y==5)
     alert("x<1&&y==5");
     else
     alert("x<1&&y!==5");
     }
     else if(x>15)         //x满足条件,继续执行下面的语句
     {
     if(y==5)     //y为20,不满足此条件,故其下面的代码不会执行(已满足的不会被执行)
     alert("x>15&&y==5");
     else                  //y满足条件,继续执行下面的语句
     alert("x>15&&y!==5")     //这里是程序输出的结果
     }
     </script>
     </body>
    复制代码

    效果图:

    5、switch语句

    switch选择语句用于将一个表达式的结果同多个值进行比较,并根据比较结果选择执行语句。语法

    复制代码
    Switch(表达式)
    {
    aase取值1:
    语句块1;break
    case取值2:
       语句块2;break;
    ...
    case取值n:
       语句块n;break;
    Default:
       语句块n+1;
    }
    复制代码

    switch必须赋初始值,值与每个case值匹配。满足执行该case后的所有语句,并用break语句来阻止运行下一个case。如所有case值都不匹配,执行default后的语句。记得在case所执行的语句后添加上一个break语句,否则就直接继续执行下面的case中的语句。

    案例:

    复制代码
    <script type="text/javascript">
    var now=new Date();
    var day=now.getDay();  //获取系统当前日期
    var week;
    switch (day){
    case 1:
        week="Monday";
    break;
    case 2: week="Tuesday"; break; case 3: week="Wednesday"; break; case 4: week="Thursday"; break; case 5: week="Friday"; break; case 6: week="Saturday"; break; default: week="Sunday"; break; } document.write("今天是"+week); //输出今天是星期几 </script>
    复制代码

    效果图:

    总结:

    结合上面介绍的内容:If语句是常用语句,switch语句是效率高语句,对于判断条件较小的可以使用if语句,但是在现实一些条件判断中,就应该使用switch语句。

    以上的内容部分来自“javascript从零开始学”和个人学习笔记,转载请注明出处!谢谢合作!

  • 相关阅读:
    ubuntu 制做samba
    《Programming WPF》翻译 第4章 前言
    《Programming WPF》翻译 第4章 3.绑定到数据列表
    《Programming WPF》翻译 第4章 4.数据源
    《Programming WPF》翻译 第5章 6.触发器
    《Programming WPF》翻译 第4章 2.数据绑定
    《Programming WPF》翻译 第4章 1.不使用数据绑定
    《Programming WPF》翻译 第5章 7.控件模板
    《Programming WPF》翻译 第5章 8.我们进行到哪里了?
    《Programming WPF》翻译 第5章 5.数据模板和样式
  • 原文地址:https://www.cnblogs.com/LiuWeiLong/p/7088145.html
Copyright © 2011-2022 走看看