JavaScript基礎視頻教程總結（021-030章）

時間 2019-12-14
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>021-030章總結</title>
</head>
<body>
<pre> 021. 賦值運算符
=
能夠將符號右側的值賦值給符號左側的變量
</pre>
<script type="text/javascript">
    console.log("第021");
    /*
     * =
     *  能夠將符號右側的值賦值給符號左側的變量
     * += 
     *  a += 5 等價於 a = a + 5
     * -=
     *  a -= 5 等價於 a = a - 5
     * *=
     *  a *= 5 等價於 a = a * 5
     * /=
     *  a /= 5 等價於 a = a / 5
     * %=
     *  a %= 5 等價於 a = a % 5
     *  
     */
    var a = 10;
    a %= 5;
    console.log("a = "+a); //0
</script>

<pre> 022. 關係運算符
經過關係運算符能夠比較兩個值之間的大小關係，
若是關係成立它會返回true，若是關係不成立則返回false

> 大於號
- 判斷符號左側的值是否大於右側的值
- 若是關係成立，返回true，若是關係不成立則返回false

>= 大於等於
- 判斷符號左側的值是否大於或等於右側的值

'<' 小於號
'<=' 小於等於

非數值的狀況
- 對於非數值進行比較時，會將其轉換爲數字而後在比較
- 若是符號兩側的值都是字符串時，不會將其轉換爲數字進行比較
而會分別比較字符串中字符的Unicode編碼
</pre>
<script type="text/javascript">
    console.log("第022");
    var result = 5 > 10;//false
    result = 5 > 4; //true
    result = 5 > 5; //false
    result = 5 >= 5; //true
    result = 5 >= 4; //true
    result = 5 < 4; //false
    result = 4 <= 4; //true
    console.log("result = "+result); //true
    
    console.log(1 > true); //false
    console.log(1 >= true); //true
    console.log(1 > "0"); //true
    console.log(10 > null); // null轉換爲數字爲0，結果爲true
    //任何值和NaN作任何比較都是false
    var any = 10 <= NaN ;
    console.log("NaN = " + any); //false
    console.log(10 <= "hello"); // 字符串中有非數字的內容，則轉換爲NaN, 結果爲false
    console.log(true > false); //true
    
    console.log("1" < "5"); //true
    console.log("11" < "5"); //true
    
    //比較兩個字符串時，比較的是字符串的字符編碼
    console.log("a" < "b"); //true
    //比較字符編碼時是一位一位進行比較
    //若是兩位同樣，則比較下一位，因此借用它來對英文進行排序
    console.log("abc" < "acd"); //true
    //比較中文時沒有意義
    console.log("戒" > "我"); //true
    
    //若是比較的兩個字符串型的數字，可能會獲得不可預期的結果
    //注意：在比較兩個字符串型的數字時，必定必定必定要轉型
    console.log("11123123123123123123" < +"5"); //false
    
</script>

<pre> 023. Unicode編碼表
在網頁中使用Unicode編碼
&#編碼; 這裏的編碼須要的是10進制
</pre>
<h1 style="font-size: 50px;">&#9760;</h1>
<h1 style="font-size: 50px;">&#9856;</h1>
<script type="text/javascript">
    console.log("第023");
    /*
     * 在字符串中使用轉義字符輸入Unicode編碼
     *  \u四位編碼
     */
    console.log("\u2620");
</script>

<pre> 024. 相等運算符
==
相等運算符用來比較兩個值是否相等，
若是相等會返回true，不然返回false
- 當使用==來比較兩個值時，若是值的類型不一樣，
則會自動進行類型轉換，將其轉換爲相同的類型
而後在比較
!=
不相等用來判斷兩個值是否不相等，若是不相等返回true，不然返回false
- 使用 != 來作不相等運算
- 不相等也會對變量進行自動的類型轉換，若是轉換後相等它也會返回false
===
全等
- 用來判斷兩個值是否全等，它和相等相似，不一樣的是它不會作自動的類型轉換
若是兩個值的類型不一樣，直接返回false
!==
不全等
- 用來判斷兩個值是否不全等，和不等相似，不一樣的是它不會作自動的類型轉換
若是兩個值的類型不一樣，直接返回true
</pre>
<script type="text/javascript">
    console.log("第024");
    var d11 = 1==1 ;
    console.log("'1 == 1' = " + d11); //true
    console.log(10 == 4); //false
    console.log("1" == 1); //true
    console.log(true == "1"); //true
    console.log(null == 0); //false
    
    /*
     * undefined 衍生自 null
     *  因此這兩個值作相等判斷時，會返回true
     */
    var un = undefined==null ;
    console.log("'undefined==null' = " + un); // true
    
    /*
     * NaN不和任何值相等，包括他自己
     */
    var nn = NaN==NaN;
    console.log("'NaN==NaN' = " +nn); //false
    
    var b = NaN;
    //判斷b的值是不是NaN
    console.log(b == NaN); //false
    /*
     * 能夠經過isNaN()函數來判斷一個值是不是NaN
     *  若是該值是NaN則返回true，不然返回false
     */
    console.log(isNaN(b)); //true
    
    console.log(10 != 5); //true
    console.log(10 != 10); //false
    //不相等也會對變量進行自動的類型轉換，若是轉換後相等它也會返回false
    console.log("abcd" != "abcd"); //false
    console.log("1" != 1);//false
    
    console.log("123" === 123);//false
    console.log(null === undefined);//false
    
    console.log(1 !== "1"); //true
</script>

<pre> 025. 條件運算符
條件運算符也叫三元運算符
語法：
條件表達式?語句1:語句2;
- 執行的流程：
條件運算符在執行時，首先對條件表達式進行求值，
若是該值爲true，則執行語句1，並返回執行結果
若是該值爲false，則執行語句2，並返回執行結果
若是條件的表達式的求值結果是一個非布爾值，
會將其轉換爲布爾值而後在運算
</pre>
<script type="text/javascript">
    console.log("第025");
    
    true ? console.log("語句1"):console.log("語句2"); //語句1
    false ? console.log("語句1"):console.log("語句2"); //語句2

    var a = 300;
    var b = 143;
    var c = 50;
    
    a > b ? console.log("a大"):console.log("b大"); //a大
    
    //獲取a和b中的最大值
    var max = a > b ? a : b;
    //獲取a b c 中的大值
    max = max > c ? max : c;
    console.log(max); // 300
    //這種寫法不推薦使用，不方便閱讀
    var max = a > b ? (a > c ? a :c) : (b > c ? b : c);
    
    //console.log("max = "+max);
    
    "hello"?console.log("語句1"):console.log("語句2"); // "hello"轉換爲boolean值爲true，結果爲：語句1
    
</script>

<pre> 026. 運算符的優先級
就和數學中同樣，在JS中運算符也有優先級，
好比：先乘除 後加減
在JS中有一個運算符優先級的表，
在表中越靠上優先級越高，優先級越高越優先計算，
若是優先級同樣，則從左往右計算。
可是這個表咱們並不須要記憶，若是遇到優先級不清楚
可使用()來改變優先級
</pre>
<script type="text/javascript">
    console.log("第026");
    /*
     * , 運算符
     *  使用,能夠分割多個語句，通常能夠在聲明多個變量時使用,
     */
    //使用,運算符同時聲明多個變量
    //var a , b , c;
    //能夠同時聲明多個變量並賦值
    //var a=1 , b=2 , c=3;
    //alert(b);
    
    //var result = 1 + 2 * 3;
    
    /*
     * 若是||的優先級高，或者兩個同樣高，則應該返回3
     * 若是&&的優先級高，則應該返回1
     */
    var result = 1 || 2 && 3;
    
    console.log("result = "+result); // 1 說明&&優先級高
    
</script>

<pre> 027. 代碼塊
咱們的程序是由一條一條語句構成的
語句是按照自上向下的順序一條一條執行的
在JS中可使用{}來爲語句進行分組,
同一個{}中的語句咱們稱爲是一組語句，
它們要麼都執行，要麼都不執行，
一個{}中的語句咱們也稱爲叫一個代碼塊
在代碼塊的後邊就不用再編寫;了

JS中的代碼塊，只具備分組的的做用，沒有其餘的用途
代碼塊內容的內容，在外部是徹底可見的
</pre>
<script type="text/javascript">
    console.log("第027");
    {
        var a = 10; 
        console.log("hello");
        console.log("你好");
    }
    console.log("a = "+a);
</script>

<pre> 028. if語句1 </pre>
<script type="text/javascript">
    console.log("第028");
    /*
     * 流程控制語句
     *  - JS中的程序是從上到下一行一行執行的
     *  - 經過流程控制語句能夠控制程序執行流程，
     *      使程序能夠根據必定的條件來選擇執行
     *  - 語句的分類：
     *      1.條件判斷語句
     *      2.條件分支語句
     *      3.循環語句
     * 
     * 
     * 條件判斷語句：
     *  - 使用條件判斷語句能夠在執行某個語句以前進行判斷，
     *      若是條件成立纔會執行語句，條件不成立則語句不執行。
     *  - if語句
     *  - 語法一：
     *      if(條件表達式){
     *          語句...
     *      }
     *          
     *      if語句在執行時，會先對條件表達式進行求值判斷，
     *      若是條件表達式的值爲true，則執行if後的語句，
     *      若是條件表達式的值爲false，則不會執行if後的語句。
     *          if語句只能控制緊隨其後的那個語句,
     *              若是但願if語句能夠控制多條語句，
     *              能夠將這些語句統一放到代碼塊中
     *          if語句後的代碼塊不是必須的，可是在開發中儘可能寫上代碼塊，即便if後只有一條語句
     *          
     */
    var a = 15;
    if(a > 10 && a <= 20){
        console.log("a大於10，而且 a小於等於20");
    }   
</script>

<pre> 029. if語句2 </pre>
<script type="text/javascript">
    console.log("第029");
    /*
     * if語句
     *  語法二:
     *      if(條件表達式){
     *          語句;
     *      }else{
     *          語句;
     *      }
     * 
     *  if...else...語句
     *      當該語句執行時，會先對if後的條件表達式進行求值判斷，
     *          若是該值爲true，則執行if後的語句
     *          若是該值爲false，則執行else後的語句
     * 
     *  語法三：
     *      if(條件表達式){
     *          語句;
     *      }else if(條件表達式){
     *          語句;
     *      }else if(條件表達式){
     *          語句;
     *      }else{
     *          語句;
     *      }
     * 
     *      if...else if...else
     *          當該語句執行時，會從上到下依次對條件表達式進行求值判斷
     *          若是值爲true，則執行當前語句。
     *          若是值爲false，則繼續向下判斷。
     *          若是全部的條件都不知足，則執行最後一個else後的語句。
     *          該語句中，只會有一個代碼塊被執行，一旦代碼塊執行了，則直接結束語句。
     */
    
    var age = 50;
    if(age >= 60){
        console.log("你已經退休了~~");
    }else{
        console.log("你還沒退休~~~");
    }
    
    // 從大到小判斷
    age = 55;
    if(age > 100){
        console.log("活着挺沒意思的~~");
    }else if(age > 80){
        console.log("你也老大不小的了~~");
    }else if(age > 60){
        console.log("你也退休了~~");
    }else if(age > 30){
        console.log("你已經中年了~~");
    }else if(age > 17){
        console.log("你已經成年了");
    }else{
        console.log("你仍是個小孩子~~");
    }
    
    age = 9;
    if(age > 0 && age <= 17){
        console.log("你仍是個小孩子");
    }else if(age > 17 && age <= 30){
        console.log("你已經成年了");
    }else if(age > 30 && age <= 60){
        console.log("你已經中年了");
    }else if(age > 60 && age <= 80){
        console.log("你已經退休了");
    }else{
        console.log("你歲數挺大的了~~");
    }
</script>

<pre> 030. if練習1 </pre>
<script type="text/javascript">
    console.log("第030");
    /*
     *  從鍵盤輸入小明的期末成績:
     *  當成績爲100時，'獎勵一輛BMW'
     *  當成績爲[80-99]時，'獎勵一臺iphone15s'
     *  當成績爲[60-80]時，'獎勵一本參考書'
     *  其餘時，什麼獎勵也沒有
     */
    
    /*
     * prompt()能夠彈出一個提示框，該提示框中會帶有一個文本框，
     *  用戶能夠在文本框中輸入一段內容，該函數須要一個字符串做爲參數，
     *  該字符串將會做爲提示框的提示文字
     * 
     * 用戶輸入的內容將會做爲函數的返回值返回，能夠定義一個變量來接收該內容
     */
    //score就是小明的期末成績
    
    //var score = prompt("輸入考試成績（0-100）");
    
    while(true){
        var score = prompt("輸入考試成績（0-100）");
        if(score >= 0 && score <=100){
            break;
        }
        alert("請輸入合法的成績~~");
    }
    
    //判斷值是否合法
    if ( score < 0 || score >100 || isNaN(score)) {
        console.log("輸入的值不合法!!!");
    } else{
        if(score == 100){
            console.log("獎勵一輛BMW");
        }else if( score >= 80 ){
            console.log("獎勵一臺iphone15s");
        }else if( score >= 60 ){
            console.log("獎勵一本參考書");
        }else {
            console.log("棍子一根~~");
        }
    }
</script>
</body>
</html>