search

博客列表 >12-16 js作业

12-16 js作业

世纪天城
世纪天城原创
2019年12月21日 10:59:131004浏览

javascript变量、函数的定义


实例

 //全局变量
    var num1=3;//var  声明变量的关键字  num1变量名 3变量的值
    // alert(num1);//alert 是js的 内置函数 弹窗输出

    //自定义函数alert1
    function alert1() {
        var num1 =12; //局部变量
        console.log(num1);//console.log控制台输出arr
    }
    alert1()

运行实例 »

点击 "运行实例" 按钮查看在线实例


2.javascript流程控制if else switch

if判断

实例

function a() {
        // if 的判断
        var a=10;
        var b=6;
        // if (a>b){
        //     alert('a大于b');
        // }else {
        //     alert('a小于b');
        // }
        alert(a>b?'a大于b':'a小于b');//三元运算符
    }
    // a()


    // if判断
    function b() {
        var score = 60;
        if (score>90){
            alert('优秀');
        }else if (score<=90 && score>70){
            alert('一般');
        }else if (score<=70 && score>=60){
            alert('及格');
        }else {
            alert('不及格');
        }
    }
    // b()
    //优化的if判断写法 推荐用法
    function c() {
        var score =70;
        if (score>90){
            return alert('优秀');
        }
        if (score<=90 && score>70){
            return alert('一般')
        }
        if (score<=70 && score>60){
            return alert('及格')
        }
        if (score<=60 && score>60){
            return alert('不及格')
        }
    }
    c()

运行实例 »

点击 "运行实例" 按钮查看在线实例

image.png


switch判断



实例

 //  // switch判断
   function d() {
        var score = 95;
        switch (true) {
            case score > 90:
                alert('优秀');
                break;
            case score <= 90 && score > 70:
                alert('一般');
                break;
            case score <= 70 && score > 60:
                alert('及格');
                break;//break跳出所有循环continue 为跳出本次循环进行下一次循环
        }
   }
   d()

运行实例 »

点击 "运行实例" 按钮查看在线实例

image.png


3.javascript三种循环

for循环推荐使用



实例

 // 1.for循环推荐使用
    function for1() {
        for (var i=0;i<10;i++){
            console.log('i='+i)
        }
    }
    for1()

运行实例 »

点击 "运行实例" 按钮查看在线实例

image.png




实例

//while循环
    function while1() {
        var i =10;
        while(i>0){
            i--;
            console.log('i='+i)
        }
    }
    while1()

运行实例 »

点击 "运行实例" 按钮查看在线实例

image.png


do....while

实例

function dow() {
        var i=10;
        do {
            i--;
            console.log('i='+i)
        }while (i>0)
    }
    dow()
    //基本不用

运行实例 »

点击 "运行实例" 按钮查看在线实例



用for循环来遍历数组


实例

 //遍历数组
    function bianli() {
        var arr=['汽车','火车','飞机'];
        for (var i=0;i<arr.length;i++)
            console.log(arr[i]);
    }
    // bianli()

运行实例 »

点击 "运行实例" 按钮查看在线实例

image.png


break 及continue 的用法 及作用



实例

 function d_1() {
            for (var i=0;i<10;i++){

                if (i==5){
                    // break;  //break跳出所有循环
                    continue;//continue 为跳出本次循环进行下一次循环
                }
                console.log(i);
            }
        }
        d_1();

运行实例 »

点击 "运行实例" 按钮查看在线实例

image.png



4.数据类型转换：parseInt、isNaN函数的使用和方法



实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js流程控制及循环</title>
</head>
<body>
<div class="div_1">
    <span>用户名：</span><input type="text" id="input_1" value="" placeholder="请输入用户名">
    <span>密码：</span><input type="password" id="input_2">
    <span>年龄：</span><input type="text" id="age" name=""value=""/>
    <button id="button" onclick="pareInt1()">提交</button>
</div>
<script>
  //pareInt,isNaN 数据转换
    function pareInt1() {
        var age = document.getElementById('age').value;
        age = parseInt(age);//表示将数据转化为整形
        //isNaN判断数据是否已转换为整形，
        if (isNaN(age)){
            return alert('年龄输入错误');
        }
        console.log(typeof age);
        if (age>100 || age<0){
            alert('请确认你的年龄');
            return;
        }
        alert('你的年龄为'+age);
    }


</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


  

所有代码笔记

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>js流程控制及循环</title>
</head>
<body>
<div class="div_1">
   <span>用户名：</span><input type="text" id="input_1" value="" placeholder="请输入用户名">
   <span>密码：</span><input type="password" id="input_2">
   <span>年龄：</span><input type="text" id="age" name=""value=""/>
   <button id="button" onclick="pareInt1()">提交</button>
</div>
<script>
   //全局变量
   var num1=3;//var  声明变量的关键字  num1变量名 3变量的值
   // alert(num1);//alert 是js的 内置函数 弹窗输出

   //自定义函数alert1
   function alert1() {
       var num1 =12; //局部变量
       console.log(num1);//console.log控制台输出arr
   }
   // alert1()
   // 定义函数传参
      function alert3(abb) {
       console.log(abb);
   }
   // alert('www.jiumeiseo.com');



   //注意： 在函数外定义的变量为全局变量
   //       在函数内定义的变量为局部变量
   //       访问到未定义的变量的数据类型为undefined

   function alert2() {
       var num2 = 10;//局部变量
   }
   // alert('num2');//这里是访问不到num2的 因为num2为局部变量无法在函数外访问
   // alert(num1);//判断数据的类型 这里为未定义变量数据类型undefined
   // var num2=10;
   // if (typeof (num2)=='undefined'){
   //     alert('num2未定义');
   // }else {
   //     alert('num2'+ num2);
   // }

   function a() {
       // if 的判断
       var a=10;
       var b=6;
       // if (a>b){
       //     alert('a大于b');
       // }else {
       //     alert('a小于b');
       // }
       alert(a>b?'a大于b':'a小于b');//三元运算符
   }
   // a()


   // if判断
   function b() {
       var score = 60;
       if (score>90){
           alert('优秀');
       }else if (score<=90 && score>70){
           alert('一般');
       }else if (score<=70 && score>=60){
           alert('及格');
       }else {
           alert('不及格');
       }
   }
   // b()
   //优化的if判断写法
   function c() {
       var score =70;
       if (score>90){
           return alert('优秀');
       }
       if (score<=90 && score>70){
           return alert('一般')
       }
       if (score<=70 && score>60){
           return alert('及格')
       }
       if (score<=60 && score>60){
           return alert('不及格')
       }
   }
   // c()

  //  // switch判断
  function d() {
       var score = 95;
       switch (true) {
           case score > 90:
               alert('优秀');
               break;
           case score <= 90 && score > 70:
               alert('一般');
               break;
           case score <= 70 && score > 60:
               alert('及格');
               break;//break跳出所有循环continue 为跳出本次循环进行下一次循环
       }
  }
  // d()
       function d_1() {
           for (var i=0;i<10;i++){

               if (i==5){
                   // break;  //break跳出所有循环
                   continue;//continue 为跳出本次循环进行下一次循环
               }
               console.log(i);
           }
       }
       // d_1();

   ///////////////////////////////////
   // 循环

   // 1.for循环推荐使用
   function for1() {
       for (var i=0;i<10;i++){
           console.log('i='+i)
       }
   }
   // for1()

   //while循环
   function while1() {
       var i =10;
       while(i>0){
           i--;
           console.log('i='+i)
       }
   }
   // while1()

   function dow() {
       var i=10;
       do {
           i--;
           console.log('i='+i)
       }while (i>0)
   }
   // dow()//基本不用

   //遍历数组
   function bianli() {
       var arr=['汽车','火车','飞机'];
       for (var i=0;i<arr.length;i++)
           console.log(arr[i]);
   }
   // bianli()



   //pareInt,isNaN 数据转换
   function pareInt1() {
       var age = document.getElementById('age').value;
       age = parseInt(age);//表示将数据转化为整形
       //isNaN判断数据是否已转换为整形，
       if (isNaN(age)){
           return alert('年龄输入错误');
       }
       console.log(typeof age);
       if (age>100 || age<0){
           alert('请确认你的年龄');
           return;
       }
       alert('你的年龄为'+age);
   }


</script>

</body>
</html>



总结 ：

总的来说相对php简单好多  但第一次写有点记不住  出现了好多次错误 ；




上一条：12月7日-迷你MVC框架-***线上九期班下一条：1216作业js变量函数流程控制类型转换-PHP培训第九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多