函数

(1)变量和函数预解析
变量预解析
alert(a);//只把变量a的声明提前，赋值不提前，所以弹出undefined，表示它的值未定义
alert(c);报错，c没有声明，这是真正的未定义

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量和函数预解析</title>
<script type="text/javascript">
    var a = 123;
    /*函数预解析*/
    myalert();//弹出hello!
    function myalert(){
        alert('hello!');
    }
</script>
</head>
<body>
</body>
</html>

(2)匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
<title>匿名函数</title>
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        /*有名字的函数*/
        // oDiv.onclick = myalert;
        // function myalert(){
        //  alert('hello');
        // }
        /*匿名函数*/
        oDiv.onclick = function(){
            alert('hello');
        }
    }
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>

(3)函数传参

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数传参</title>
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        changeStyle('color', 'gold');
        changeStyle('background', 'red');
        changeStyle('width', '300px');
        changeStyle('height', '300px');
        changeStyle('fontSize', '30px');
        function changeStyle(styl, val){
            oDiv.style[styl] = val;
        }
    }
</script>
</head>
  <body>
  <div id="div1">这是一个div元素</div>
</body>
  </html>

(4)函数return关键字

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数return关键字</title>
<script type="text/javascript">
    window.onload = function(){
        var oInput01 = document.getElementById('input01');
        var oInput02 = document.getElementById('input02');
        var oBtn = document.getElementById('btn');
        //写入值
        // oInput01.value = 10;
        // oInput02.value = 5;
        oBtn.onclick = function(){
            var val01 = oInput01.value;
            var val02 = oInput02.value;
            var rs = add(val01, val02);
            alert(rs);
        }
        function add(a, b){
            var c = parseInt(a) + parseInt(b);
            // alert('计算完成');//执行
            return c;//返回函数设定的值，同时结束函数的运行
            // return;//不返回值，仅结束函数的运行
            // alert('计算完成');//不执行
        }
    }
</script>
  </head>
  <body>
<input id="input01" type="text" name="">
<input id="input02" type="text" name="">
<input id="btn" type="button" name="" value="相加">
</body>
</html>

(5)流程控制语句
流程控制语句

  • JS中的程序是从上到下一行一行执行的

  • 通过流程控制语句可以控制程序执行流程，
    使程序可以根据一定的条件来选择执行

  • 语句的分类：
    1.条件判断语句
    2.条件分支语句
    3.循环语句

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制语句</title>
<script type="text/javascript">
  console.log('你好');
  alert('hello');
</script>
  </head>
  <body>
  
  </body>
  </html>

    (6)条件判断语句
    条件判断语句：

  • 使用条件判断语句可以在执行某个语句之前进行判断，
    如果条件成立才会执行语句，条件不成立则语句不执行。

  • if语句

  • 语法一：
    if(条件表达式){
    语句...

          if语句在执行时，会先对条件表达式进行求值判断，
      如果条件表达式的值为true，则执行if后的语句，
      如果条件表达式的值为false，则不会执行if后的语句。
          if语句只能控制紧随其后的那个语句,
              如果希望if语句可以控制多条语句，
              可以将这些语句统一放到代码块中
          if语句后的代码块（即{}）不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句
      - 语法二:
          if(条件表达式){
              语句...
          }else{
              语句...
          }
  
      if...else...语句
          当该语句执行时，会先对if后的条件表达式进行求值判断，
              如果该值为true，则执行if后的语句
              如果该值为false，则执行else后的语句

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件判断语句</title>
<style type="text/css">
  .box{
      width: 300px;
      height: 300px;
      background-color: gold;
  }
</style>
<script type="text/javascript">
  window.onload = function(){
      var oBtn = document.getElementById('btn');
      var oDiv = document.getElementById('box');
      /*oBtn.onclick = function(){
          if(oDiv.style.display == 'none'){
              oDiv.style.display = 'block';
          }else{
              oDiv.style.display = 'none';
          }
      }*/
      
      // alert(oDiv.style.display);//弹出空白提示框，因为div没设置过style属性
      oBtn.onclick = function(){
          if(oDiv.style.display == 'block' || oDiv.style.display == ''){
              oDiv.style.display = 'none';
          }else{
              oDiv.style.display = 'block';
          }
      }
  }
</script>
</head>
<body>
<input type="button" value="切换" id="btn">
<br>
<div class="box" id="box"></div>
</body>
</html>

(7)多重条件判断语句
if语句
语法三：
if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else{
语句...
}

        if...else if...else
            当该语句执行时，会从上到下依次对条件表达式进行求值判断
            如果值为true，则执行当前语句。
            如果值为false，则继续向下判断。
            如果所有的条件都不满足，则执行最后一个else后的语句
            该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句

条件分支语句也叫switch语句
    语法：
        switch(条件表达式){
            case 表达式:
                语句...
                break;
        case 表达式:
                语句...
                break;
            default:
                语句...
                break;
        }

    执行流程：
        switch...case..语句
        在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，
            如果比较结果为true，则从当前case处开始执行代码。
                当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字，
                这样可以确保只会执行当前case后的语句，而不会执行其他的case
            如果比较结果为false，则继续向下比较
            如果所有的比较结果都为false，则只执行default后的语句

    switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择。
<!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>多重条件判断语句</title>
<script type="text/javascript">
    var today = 4;
    // 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{
    //  alert('不补习');
    // }
    switch(today){
        case 1:
            alert('语文');
            break;//结束整个switch语句
        case 2:
            alert('数学');
            break;
        case 3:
            alert('英语');
            break;
        case 4:
            alert('美术');
            break;
        case 5:
            alert('舞蹈');
            break;
        default:
            alert('不补习');
            break;//最后一个default可以不写break，但建议写上
    }
</script>
  </head>
  <body>

</body>
</html>

(8)数组

  <!DOCTYPE html>
   <html lang="en">
  <head>
<meta charset="UTF-8">
<title>数组</title>
<script type="text/javascript">
    //面向对象的方式创建
    var aRr01 = new Array(1,2,3,'abc');
    //直接创建
    var aRr02 = [1,2,3,'def'];//推荐使用，性能更高
    //获取数组的成员数量（长度）
    // alert(aRr02.length);//弹出4
    // alert(aRr02[3]);//弹出cdf
    var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]];
    // alert(aRr03.length);//弹出3
    // alert(aRr03[1].length);//弹出3
    alert(aRr03[1][2]);//弹出c
</script>
</head>
<body>

</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 28,485评论 1赞 45
  • 函数传参、返回、条件语句、数组
    (1)变量和函数预解析变量预解析alert(a);//只把变量a的声明提前，赋值不提前，所以弹出undefined...
    HDhandi阅读 1,522评论 0赞 0
  • 三目运算符,函数,声明提前
    一：运算符和表达式 1.三目运算符（三元运算符） += -= *= /= %= 表达式1？：表达式2：表达式3...
    闫梓璇阅读 4,574评论 0赞 0
  • 匿名函数与闭包
    闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的常见的方式，就是在一个函数内部创建另一个函数，通过另一个...
    碧玉含香阅读 1,837评论 0赞 0
  • 天晴了，真好
    树叶纷飞的昨日 渐行渐远了 狂风大作 原来是为了迎接 今日的风和日丽 秋阳 就这样安静的俯瞰着大地 温情脉脉的 睡...
    深深浅浅间阅读 2,944评论 0赞 0

友情链接更多精彩内容