JavaScript的第3天-CSDN博客

本文链接：https://blog.csdn.net/qq_46426476/article/details/122004063

非布尔值的与或非的运算.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>
        /*
            &&  || 非布尔值的情况
               --对于非布尔值进行与或运算时，
                    会先将其转换为布尔值，然后再运算，并且返回原值
               --与运算:
                    --如果第一个值为true，则必然返回第二个值
                    var a=5&&6;   //6
                    alert(a); 

                    --如果第一个值为false，则直接返回第一个值
                    var a=0&&45;    //0
                    alert(a);

                    --如果两个值为true，则直接返回后一个值
                    var a=" "&&45;    //45   " "空串转换为boolean为true
                    alert(a);
               --或运算
                    --如果第一个值为true，则必然返回第一个值
                    var a=5 || 6;   // 5   
                    alert(a);

                    --如果第一个值为false，则直接返回第一个值
                    var a=0||6;   //6
                    alert(a);  
        */
        var a=0||6;   //6
        alert(a);      
    </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>
        /*
            =:
                可以把符号右侧的值赋值给符号左边的值
            +=:
                a+=5等价于 a=a+5
                var a=10;  //15
                alert(a+=5)

            -=:
                a-=5等价于 a=a-5
                var a=10;  //5
                alert(a-=5)
       
            *=:
                a*=5等价于 a=a*5
                var a=10;  //50
                alert(a*=5)

            /=:
                a/=5等价于 a=a/5 
            var a=10;  //2
            alert(a/=5)   
        */
       var a=10;  //2
       alert(a/=5)
    </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>
        /*
            通过关系运算符可以比较两个值之间的大小关系，
                如果关系成立它会返回true，如果关系不成立则返回false
            
            >  大于号
                --判断符号左侧的值是否大于右侧的
                --如果关系成立，返回true，如果关系不成立则返回false
                var a="12";   //true
                alert(a>2)
            
            >=  大于等于
                --判断符号左侧的值是否大于或等于右侧的值
            var a="12";   //true
            alert(a>=2)

            <  小于号
            var a="12";   //false
            alert(a<2)

            <= 小于等于
            var a="12";   //false
            alert(a<=2)

            非数值的情况
                --对于非数值进行比较时，会将其转换为数字然后再进行比较
                    var a="a">12;   //false    两边都为字符串时才会转换为unicode编码进行比较
                    var b="23"<12;   //false
                    alert(a);
                    alert(b);

                --如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，
                    而会分别比较字符串中字符的Unicode编码,
                    即如果比较两个字符串类型的数字时，如果不想比较其Unicode编码，一定要转型
                    var b="a"<"b";   //true   
                    alert(b);

                    var b="bdhn"<"b";   //false  当前首位一样，比较下一位字母   d>b
                    alert(b);
        */
       var b="bdhn"<"b";   //false
       alert(b);
    </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>
        /*
            在字符串中使用转义字符输入Unicode编码
            \u四位编码(十六进制)
        */
       alert("\u2620");   //☠
    </script>
</head>
<body>
    <!-- 在网页中使用Unicode编码
            &#编码;(使用的编码为十进制)
    -->
    <h1>&#9760</h1> <!-- ☠ --> 
</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>
        /*
            相等运算用来比较两个值是否相等
                如果相等会返回true，否则返回false
                var a=10;
                var b=20;
                alert(a==b);  //false
            
            使用 == 来做相等运算
                --当使用==来比较两个值时，如果值的类型不同，
                    则会自动进行类型转换，将其转换为相同的类型
                    然后再比较
                    alert("1"==1);   //true   说明 "1"已进行类型转换成数字1后进行比较

            !=
                不相等
                --不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false
                --使用!=来做不相等运算
                var a=10;
                var b=20;
                alert(a!=b);   //true 

                --不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
                var a=10;
                var b="20";
                alert(a!=b);   //true 
            
            ===
                全等
                ---用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换
                    如果两个值的类型不同，直接返回false
                    var a=null;
                    var b=undefined;
                    alert(a===b);   //false
        
            !==
                不全等
                ---用来判断两个值是否不全等，它和不相等类似，不同的是它不会做自动的类型转换
                    如果两个值的类型不同，直接返回true
                    var a=null;
                    var b=undefined;
                    alert(a!==b);   //true
        
        可以通过isNaN()函数来进行判断一个值是否是一个NaN
                    var a=null;
                    var b=NaN;
                    alert(isNaN(a));   //false
                    alert(isNaN(b));   //true
                    
        */

        var a=null;
        var b=NaN;
        alert(isNaN(a));   //false
        alert(isNaN(b));   //true
    </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>
        /*
            三元运算符也叫条件运算符,
                语法:
                    条件表达式?语句1:语句2;
                --执行的流程:
                    条件运算符在执行的时候,首先对条件表达式进行求值，
                        如果该值为true，则执行语句1，并返回执行结果
                        如果该值为false，则执行语句2，并返回执行结果
                    10>20?alert("10大于20"):alert("10小于20");   //10小于20
                    30>20?alert("30大于20"):alert("30小于20");   //30大于20
        */
    //    求最大值
        var a=10;
        var b=20;
        var c=4;
        var max=a>b?a:b;  //先把a和b比较的值赋值给一个变量
        alert(max>c?max:c); //输出
    </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>
        /*
            , 运算符
                使用,可以分割多个语句，一般可以在声明多个变量时使用，

                使用,运算符可以同时声明多个变量
                var a,b,c;
                alert(a);  //undefined

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

        /*
            运算符的优先级
                在js中运算符也有优先级，
                    比如:先乘除  后加减
                在js中有一个运算符优先级的表，
                    在表中越靠前的优先级越高，优先级越高越优先计算，
                    如果优先级一样，则从左往右计算。
                    但是这个表不需要记忆，如果遇到优先级不清楚，可以使用()来改变优先级

                练习:
                // 如果||的优先级高，则输出3，
                //如果&&的优先级比较高，则输出1
                var a=1||2 && 3;
                alert(a);   //1  说明&&的优先级比较高

        */
        
        // 如果||的优先级高，则输出3，
        //如果&&的优先级比较高，则输出1
        var a=1||2 && 3;
        alert(a);   //1  说明&&的优先级比较高
    </script>
</head>
<body>
    
</body>
</html>

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>
        /*
            我们的程序是由他、一条一条语句构成的
                语句是按照自上而下的顺序一条一条执行的
                在js中可以使用{}来为语句分组，
                    同一个{}中的语句我们称为是一组语句，
                    它们要么都执行，要么都不执行，
                    一个{}中的语句我们也称为一个代码块
                    在代码块的后边就不用再编写;了

            js中的代码块，只具有分组的作用，没有其他的用途
                代码块里面的内容，在外部是完全可以访问到的，即在访问权限这方面，代码块写了和没写一样
        */
       {
           alert("hello");
           alert("daw");
       }
       alert("dadaw");
    </script>
</head>
<body>
    
</body>
</html>

if语句1

<!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>
        /*
            流程控制语句
                --js中程序是从上到下一行一行执行的
                --通过流程控制语句可以控制程序执行流程，
                    使程序可以根据一定的条件来选择执行
                --语句的分类:
                    1,条件判断语句
                    2，条件分支语句
                    3，循环语句


            条件判断语句:
                --使用条件判断语句可以在执行某个语句之前进行判断，
                    如果条件成立才会执行语句，条件不成立则语句不执行。
                --if语句
                --语法一:
                    if(条件表达式){
                        语句
                    }
                    
                    if(true) {
                    alert("你猜我出来不");  //你猜我出来不
                    }
                    if(false) {
                        alert("你猜我出来不");
                    }

                    if语句在执行时，会先对条件表达式进行求值判断，
                    如果条件表达式的值为true，则执行if后的语句，
                    如果条件表达式的值为fasle，则不会执行if后的语句
                    if(true) alert("你猜我出来不");  //你猜我出来不
                    if(false) alert("你猜我出来不");

                    if语句只能控制紧随其后的那个语句，如果希望if语句可以控制多条语句，
                    可以将这些语句统一放到代码块中
                    if语句后的代码块不是必须的，但是在开发中尽量写
        */

        if(true) {
        alert("你猜我出来不");  //你猜我出来不
        }
        if(false) {
            alert("你猜我出来不");
        }
    </script>
</head>
<body>
    
</body>
</html>

if语句2

<!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>
        /*
            if语句
                语法二:
                    if(条件表达式){
                        语句...
                    }else{
                        语句...
                    }

                    var age=10;
                    if(age>10){
                        alert("大于");
                    }else{
                        alert("小于");
                    }


            if...else...语句
                    当该语句执行时，会先对if后的条件表达式进行求值判断，
                        如果该值为true，则执行if语句
                        如果该值为false，则执行else后的语句


                语法三:
                    if(条件表达式){
                        语句...
                    }else if(条件表达式){
                        语句...
                    }else if(条件表达式){
                        语句...
                    }else{
                        语句...
                    }

                    var age=10;
                    if(age>100){
                        alert("大于");
                    }else if(age>80){
                        alert("小于80");
                    }else if(age>5){
                        alert("大于5");
                    }

                    if...else if...else
                        当该语句执行时，会从上到下依次对条件表达式进行判断
                        如果值为true，则执行当前语句
                        如果值为false，则继续向下判断
                        如果所有的条件都不满足，则执行最后一个else后的语句

                    该语句中，只会有一个代码块被执行，一旦代码块执行，则直接结束语句
        */
        var age=10;
        if(age>100){
            alert("大于");
        }else if(age>80){
            alert("小于80");
        }else if(age>5){
            alert("大于5");
        }
    </script>
</head>
<body>
    
</body>
</html>