javascript基础（三）

最新推荐文章于 2024-07-18 10:24:18 发布

直条纹先生

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量57

点赞数

分类专栏： web前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45936141/article/details/125209351

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

21.运算符的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">



        /*
        使用,运算符
        可以分割多个语句，一般可以在声明多个变量时使用
        
        
        使用,运算符可以同时声明多个变量
        var a,b,c;

        */

        // var a;
        // var b;
        // var c;

        // var a = 1,b = 2,c = 3;//可以同时声明多个变量并赋值
        // alert(b);

        /*
        就和数学中的一样，在js中运算符也有优先级
        比如先乘除后加减

        在js中有一个运算符优先级的表
        在表中越靠上优先级越高，优先级越高越优先计算
        如果优先级一样，则从左往右计算
        但是这个表我们不需要记忆，如果遇到优先级不清楚可以使用（）来改变优先级关系
        */


        var result = 1 || 2 && 3;

        console.log("result = "+result);


        var result =  1 + 2 * 3;
        alert(result);//7




        /*
        如果||的优先级高，或者两个一样高，则应该返回3
        如果与的优先级高，则应该返回1
        */




    </script>
</head>
<body>
    

</body>
</html>

22.代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">

        /*
        我们的程序是由一条语句构成的
        语句是按照从上到下一条一条执行的
        在js中可以使用大括号{}来为语句分组

        */
        alert("hello");
    </script>
</head>
<body>
    
</body>
</html>

23.流程控制语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">


        /*

        流程控制语句
        Js中的程序是由上到下一行一行执行

        --通过流程控制语句可以控制程序执行流程
        使程序可以根据一定的条件来选择执行
        --语句的分类
        1.条件判断语句
        2.条件分支语句
        3.循环语句



        条件判断语句

        使用条件判断语句可以在执行某个语句之前进行判断
        如果条件成立才会执行语句，条件不成立则语句不执行
---if语句
        语法一：
        if（条件表达式）
        语句
        if语句在执行时，会先对条件表达式进行求值判断， 如果条件表达式的值为true，则执行if后的语句
        如果条件表达式的值为false，则执行if后的语句


        */


        var age = 50;
        if(age>=60){

            alert("你已经退休了！");

        }else{
            alert("你还没退休！");
        }


    </script>
</head>
<body>
    
</body>
</html>

24.js基础练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">

/*
    从键盘输入小明考试成绩
        当成绩为100时，奖励一台BMW
        当成绩80-90时，奖励一台iphone
        当成绩60-80时，奖励一本参考书
        其他时，什么奖励也没有

        prompt()可以弹出一个提示框，该提示框中会带有一个文本框
        用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数
        该字符串会作为提示框的文字

        prompt()函数返回类型是String


        用户输入的内容可以作为函数的返回值接收


        =一个等号表示赋值
        ==两个等号表示相等（如果类型不同会自动类型转换！）
        ===三个等号表示全等判断（包括值和类型的判断，===不会类型转换！）

*/
    var score =  prompt("请输入小明的期末成绩！");

        if(score == 100){
alert("给你一台BMW！");
        }else if( 80 <= score && score <= 90 ){
alert("给你一台iphone！");
        }else if(60 <= score && score <= 80){
alert("给你一本参考书！");
        }else{
            alert("什么都没有！");
        }

 

    </script>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">


        var height = prompt("请输入你的身高(CM)：");
        var money = prompt("请输入你的财富(万)：");
        var face = prompt("请输入你的颜值(PX)：");


        if(height > 180 && money >500 && face > 100 ){

            alert("我一定嫁给他！");

        }else if(height > 180 || money >500 || face > 100){

            alert("嫁吧！比上不足，比下有余！");
        }else{

            alert("不嫁！");
        }

        // alert(height +","+money + ","+face);
    </script>
</head>
<body>
    

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        /*
        输入三个数，并比较他们的大小
        
                var num1 = + prompt("请输入第一个数：");
                prompt()函数前面加 + 表示转换成number类型

        */


        var num1 = + prompt("请输入第一个数：");
        var num2 = + prompt("请输入第二个数：");
        var num3 = + prompt("请输入第三个数：");


        // alert(typeof num1);
        //找到三个数中最小的那个数

        if(num1<num2&&num1<num3){

            if(num2>num3){
                alert("num2 > num3 > num1")
            }else{
                alert("num3 > num2 > num1")
            }

        }else if(num2<num3&&num2<num1){

            if(num3>num1){

                alert("num3 > num1 >num2");
            }else{
                alert("num1 > num3 >num2");
            }

        }else if(num3<num1&&num3<num2){

            if(num1>num2){

                alert("num1 > num2 >num3");
            }else{

                alert("num2 > num1 >num3");
            }


        }




    </script>
</head>
<body>
    
</body>
</html>

25.条件分支语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">


        /*
        条件分支语句也叫switch()语句
        语法：
        switch(条件表达式){

         case:表达式
            语句..
            break;
         case:表达式
            语句..
            break;
         case:表达式
            语句..
            break;
         default;
           case..
           break;   


           执行流程：
           switch...case...语句
           在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较
           如果比较结果为true，则从当前case处开始执行代码
           如果比较结果为false，则继续向下比较
           如果所有的比较结果都为false，则只执行default后的语句


           switch语句和if语句的功能实际上是有重复的，使用switch可以实现if的功能，
           同样使用if也可以实现switch的功能，所以在使用根据实际情况使用


        }
        
        */

        var num = 1;
        switch(num){

            case 1:
                  console.log("壹");
                  break;//使用break可以跳出switch语句
                  //我们可以在case后面加一个break关键字，这样可以确保只会执行当前case后的语句，而不会执行其他的case
            case 2:
                  console.log("贰");
                  
            case 3:
                  console.log("叁");

        }

    </script>
</head>
<body>
    
</body>
</html>

26.switch练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">

        /*
        对于成绩大于60输出“合格”
        对于成绩低于60输出“不合格”
        */

        // var score = 95;
        // switch(parseInt(score/10)){
        //     case 6:
        //     case 7:
        //     case 8:
        //     case 9:
        //     case 10:    
        //         console.log("成绩合格！");
        //         break;
        //     default:
        //         console.log("成绩不合格！");    
        // }



        var score = 50;
        switch(true){

            case score >= 60:
                console.log("合格");
                break;
            default:    
                console.log("不合格");
                break;

        }


    </script>
</head>
<body>
    
</body>
</html>

27.循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        /*
        向页面输出连续的数字
        */

    //     var n = 1;

    //    document.write(n++ +"<br/>");
    //    document.write(n++ +"<br/>");
    //    document.write(n++ +"<br/>");
    //    document.write(n++ +"<br/>");
    //    document.write(n++ +"<br/>");
    //    document.write(n++ +"<br/>");
    //    document.write(n++ +"<br/>");
    //    document.write(n++ +"<br/>");
    //    document.write(n++ +"<br/>");
    //    document.write(n++ +"<br/>");
    //    document.write(n++ +"<br/>");
    //    document.write(n++ +"<br/>");


    //循环语句
    //通过循环语句可以反复的执行一段代码多次
    /*
    while循环
        语法：
        while（条件表达式）{

            语句...
        }
    while语句在执行时，
    先对条件语句进行求值判断
    如果值为true则执行循环体
    循环体执行完毕以后，继续对表达式进行判断
    如果为true,则继续执行循环体，以此类推。。。

    do...while语句在执行时，会先执行循环体，循环体执行完毕后，再对while后的条件表达式进行判断
    如果结果为true，则继续执行循环体，执行完毕继续判断以此类推。
    如果为false，则终止循环
    


    实际上这两个语句功能类似，不同的是while先判断后执行
    而do。。。while是先执行后判断
    do{}while()至少可以保证执行一次循环，而while()不能
    */


    // var n = 1;
    // //像这种条件表达式为true的循环为死循环
    // //该循环不会停止，除非浏览器关闭，死循环在开发中慎用
    // //可以使用break来终止循环


    // while(true){
    //     alert(n++);
    //      //判断n是否是10
    //      if(n==10){
    //          //break退出循环
    //     break;
    //      }

    // }

    /*
    创建一个循环，往往需要三个步骤
    1、创建初始化变量
    var i =0;

    2、在循环中设置一个条件表达式
    while(i<10){

    3、定义一个更新表达式，每次更新初始化变量

    i++;
        alert(1);
    }
    */

    // var i = 0;
    // while(i <br 100 ){
    //     // alert(i);
    //     // console.log(i);
    //     document.write(i++ +"</br>");
    // }

    var i =11;
    do{

        document.write(i++ +"</br>")
    } while(i <= 10);
   


    </script>
</head>
<body>
    
</body>
</html>