首页 > 编程语言 > 详细

谷哥的小弟学前端(11)——JavaScript基础知识(2)

时间:2017-01-28 11:29:21      阅读:292      评论:0      收藏:0      [点我收藏+]

探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制


Android多分辨率适配框架(1)— 核心基础
Android多分辨率适配框架(2)— 原理剖析
Android多分辨率适配框架(3)— 使用指南


自定义View系列教程00–推翻自己和过往,重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理


版权声明


在本篇博客里,我们将介绍JavaScript中的条件判断语句。

if else

if else是JavaScript中非常基础和重要的条件判断结构,如下:

if(条件表达式){
     如果该表达的结果true,那么程序执行该处代码语句
}else{
     如果该表达的结果false,那么程序执行该处代码语句
}

我们来看一个非常简单的例子:
技术分享

技术分享

嗯哼,在这个示例中,我们需要根据用户的输入的年纪而做出不同的响应,这个该怎么做呢?请看如下代码:

<!DOCTYPE html>
<!-- 本文作者:谷哥的小弟 -->
<!-- 博客地址:http://blog.csdn.net/lfdfhl -->
<html lang="en">

    <head>
      <meta charset="utf-8">
        <title>if else</title>
    </head>

    <body>

    </body>

</html>

<script type="text/javascript">
   var age=prompt("请输入您的年纪");
       age=parseInt(age);
    if (age>=18) {
      document.write("您好,欢迎您的光临");
    }else{
      document.write("未满十八岁勿入!本站或许含有成人内容,请注意规避!");
    }
</script>

在该示例中,我们获取到用户输入的年纪,再依据年纪值是否小于18而显示不同的内容。

if else的嵌套

有时简单的if else不能满足实际的需要,这时可嵌套使用if else,其结构如下:

if(条件表达式){
        如果条件表达式结果为true则执行该处代码,后面的代码不再执行
  }else if(条件表达式){
        如果条件表达式结果为true则执行该处代码,后面的代码不再执行
  }else if(条件表达式){
        如果条件表达式结果为true则执行该处代码,后面的代码不再执行
  }else{
        如果以上条件均不满足则执行该处代码
}

请看如下示例:

<script type="text/javascript">
   var number=prompt("请问你有几个女朋友?");
       number=parseInt(number);
    if (number<0) {
      document.write("严肃点,我们这搞社会调查呢");
    }else if(number==0){
      document.write("单身狗,不要哭;妹子会有的");
    }else if(number>0&&number<2){
      document.write("祝福你和你的女朋友");
    }else{
      document.write("哥们,你不止一个女朋友啊;分我一个呗!");
    }
</script>

在此利用if else语句的嵌套依据用户输入值的不同做出相应的响应

三元运算符

三元运算符很像之前介绍的if else,其结构如下:

表达式 ? 如果表达式结果为true执行此处的代码 : 如果表达式结果为false执行此处的代码;

请看如下示例:

<!DOCTYPE html>
<!-- 本文作者:谷哥的小弟 -->
<!-- 博客地址:http://blog.csdn.net/lfdfhl -->
<html lang="en">

    <head>
      <meta charset="utf-8">
        <title>三元运算符</title>
    </head>

    <body>

    </body>

</html>

<script type="text/javascript">
   var number=prompt("请问你有几个女朋友?");
       number=parseInt(number);
       number>0?alert("不错喔"):alert("单身狗,不哭");
</script>

在该示例中如果number>0则执行alert(“不错喔”)否则执行alert(“单身狗,不哭”)

switch语句

switch语句用于基于不同的条件来执行不同的动作。

switch语句结构如下:

switch(m){
    case n1:
      执行代码块 n1
      break;
    case n2:
      执行代码块 n2
      break;
    default:
      m与case n1和case n2都不同时执行的代码块
}

请注意:
switch语句后的变量数据类型必须和case后的数据类型保持一致。

请看如下示例:

<!DOCTYPE html>
<!-- 本文作者:谷哥的小弟 -->
<!-- 博客地址:http://blog.csdn.net/lfdfhl -->
<html lang="en">

    <head>
      <meta charset="utf-8">
        <title>switch</title>
    </head>

    <body>

    </body>

</html>

<script type="text/javascript">
   var name=prompt("请输入你最喜欢的电影明星");
   switch(name){
        case "范冰冰":
        document.write("范冰冰很漂亮喔"+"<br>");
        break;
        case "杨幂":
        document.write("杨幂是个白富美"+"<br>");
        break;
        case "柳岩":
        document.write("柳岩性感十足!"+"<br>");
        break;
        case "武藤兰":
        document.write("敬爱的人民教育家"+"<br>");
        break;
        default:
        document.write("请您输入其他明星"+"<br>");
        break;
   }

</script>

自增和自减

在编程中常用到变量的自增和自减,比如i++和++i以及i- -和- -i
在此以i++和++i为例,分情况对其进行详细介绍;i- -和- -i与此类似,不再赘述。

第一种情况:
如果变量i没有直接参与运算中,i++和++i表示的含义是:在变量原来的基础上加1

请看如下两个小示例:

<script type="text/javascript">
    var number=9527;
    number++;
    document.write("number="+number+"<br>");      
</script>

结果为:

number=9528

<script type="text/javascript">
    var number=9527;
    ++number;
    document.write("number="+number+"<br>");      
</script>

结果为:

number=9528

第二种情况:
如果i++或者++i参与到运算中,那么i++表示先将i的值赋值给其他变量然后再自加1;++i表示先将i的值加1然后再赋值给其他变量

请看如下两个小示例:

<script type="text/javascript">
    var number=9527;
    var score=number++;
    document.write("score="+score+"<br>");
    document.write("number="+number+"<br>");      
</script>

结果为:

score=9527
number=9528

<script type="text/javascript">
    var number=9527;
    var score=++number;
    document.write("score="+score+"<br>");
    document.write("number="+number+"<br>");      
</script>

结果为:

score=9528
number=9528

while循环

while语句常用于执行循环操作,其结构如下:

while(条件表达式){
  当条件表达式结果为true就一直执行while循环体内的代码。
  当条件表达式的结果为false时while循环不再执行。
}

请看如下示例

<script type="text/javascript">
    var i=1;
    while(i<5){
      document.write("i="+i+"<br>");
      i++;
    }      
</script>

结果为:

i=1
i=2
i=3
i=4

在该示例中只要i的值小于5就一直执行while中的操作,当i不再小于5时则跳出循环

do while循环

do while语句常用于执行循环操作,其结构如下:

do{
  循环代码;
}
wile(条件表达式)

do wile的基本原理和while基本一致,但是它保证循环体至少被执行一次。因为它是先执行代码然后再判断条件。

请看如下示例:

<script type="text/javascript">
    var i=1;
    do{
        document.write("i="+i+"<br>");
        i++;
    }
    while(i!=3)
</script>

结果为:

i=1
i=2

在该示例中首先会去执行do中的语句,然后再判断是否满足while条件;如果满足则继续执行do中的语句,如果不满足则跳出循环。

for循环

for语句常用于执行循环操作,其结构如下:

for (初始化;条件;增量){
    循环执行的代码;
}

请看如下示例:

<script type="text/javascript">
    for(var i=0;i<5;i++){
        document.write("i="+i+"<br>");
    }
</script>

结果为:

i=0
i=1
i=2
i=3
i=4

从这个例子我们可以看到for循环的执行顺序:

  • 首先进行变量初始化并进行循环条件判断
  • 若判断结果为true则执行循环体内的代码然后执行i++
  • 继续判断循环条件,若为true则继续执行循环体内代码,否则跳出循环

break语句

break用于结束当前循环然后执行循环体之后的代码。
请看如下示例:

<script type="text/javascript">
    for(var i=0;i<5;i++){
        document.write("i="+i+"<br>");
        if (i==2) {
            break;
        };
    }
    document.write("for循环已经中止"+"<br>");
</script>

结果为:

i=0
i=1
i=2
for循环已经中止

continue语句

continue表示跳出本次循环,该continue语句后面的代码不再执行;但是整个循环体继续执行

请看如下示例:

<script type="text/javascript">
    for(var i=0;i<5;i++){
        if (i==2) {
            continue;
        };
        document.write("i="+i+"<br>");
    }
    document.write("for循环执行完毕"+"<br>");
</script>

结果为:

i=0
i=1
i=3
i=4
for循环执行完毕


至此,关于JavaScript中常用的条件判断语句就已介绍完了。

谷哥的小弟学前端(11)——JavaScript基础知识(2)

原文:http://blog.csdn.net/lfdfhl/article/details/54755569

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!