Python全棧之學習JS(1)

1. js的數據類型

1.1 js引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的引入方式</title>
</head>
<body>
    <!-- js的第一種引入方式 -->
    <!-- <script>
        alert("js的第一種引入方式")
    </script> -->
    <!-- js的第二種引入方式 -->
    <!-- <script src="myjs.js"></script> -->
    <!-- js的第三種引入方式 -->
    <!-- onclick單擊事件 -->
    <div onclick="alert(11)" >點我1</div>
    <!-- js的第四種引入方式 -->
    <a href="javascript:alert('你點我瞭麼?')">點我2</a>
</body>
</html>

小提示:

js三大對象
1. 本地對象:js語法
2. bom對象:瀏覽器相關的成員(針對於瀏覽器的控制)brower object model
3. dom文檔對象:關於html文件節點相關的數據、相關的值(針對於html的控制) document object model
js是單線程的異步程序
定時器是單線程的異步程序(例子)

1.2 註釋變量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>註釋/變量</title>
</head>
<body>
    <script>
        // ###1 註釋分為兩類: (1) 單行註釋 (2) 多行註釋
        // 我是單行註釋
        /* 我是多行註釋 */
        // ###2 變量
        /* var的用作是劃分當前變量的作用域 不寫var,默認聲明全局的變量 */
        var a = 1;
        var a=1,b=2,c=3
        console.log(a);
        console.log(b,c)
        // ###3 變量的命名
        var $ = "特殊的變量名";
        var $abc = 111;
        console.log($);
        console.log($abc);
    </script>
</body>
</html>

1.3 數據類型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>數據類型</title>
</head>
<body>
    <script>
        /*
            數據類型: 分為兩大類 (基本數據類型 + 引用數據類型)
            基本數據類型: Boolean , Number , String , undefined , null
            引用數據類型: Object(Array , function , Date ... )
        */
        // ###1. Boolean 佈爾類型
        var a1 = true;
        var a1 = false;
        console.log( a1 , typeof(a1) )
        // ###2. Number 數字類型
        var num = 0b101;
        var num = 0o127;
        var num = 0xff;
        var num = 1000;
        var num = 3.13;
        var num = 3.13e2;
        // Infinity  無窮大
        var num = 3.13e999999999999999999999999999999999999;
        // -Infinity 負無窮大
        var num = -3.13e999999999999999999999999999999999999;
        console.log(num , typeof(num) )
        // NaN =>  not a number 不是一個數字
        /*
            1.NaN和任何數字計算都是NaN
            2.與NaN做比較,除瞭NaN!=NaN為真,剩下都是false
        */
        var num = 10 - "abc";
        var num = NaN + 1
        var num = NaN == NaN
        var num = NaN != NaN; // true 
        var num = NaN > 100;  // false
        var num = isNaN(NaN); // true
        console.log(num , typeof(num))
        // ###3.String 字符串類型
        // 單引號''
        var string = 'I love js';
        // 雙引號""
        var string = "i love python very much";
        // 在轉義字符前面加\,防止轉義原型化輸出
        var string = "我愛你,\\n 中國"
        console.log(string)
        // 反引號`` 1.支持跨行 2.解析變量
        // 1.支持跨行
        var string = `
        <ul>
            <li>111</li>
        </ul>
        `
        // 2.解析變量 ${變量名}
        var name = "趙沈陽";
        var string = `${name}`;
        console.log(string , typeof(string))
        // ###4.Object 對象類型
        // 1.定義一個空對象
        var obj = new Object()
        var obj = {}        
        console.log(obj,typeof(obj))
        // 2.js對象(字典格式)
        var obj = {"a":1,"b":2}
        console.log(obj , typeof(obj))
        // 3.js對象,可以在類外添加成員
        obj.name = "張三";
        console.log(obj , typeof(obj));
        // 4.js對象(數組格式)
        var arr = new Array();
        var arr = [];
        arr[0] = 10;
        arr[1] = 11;
        arr[2] = 12;
        var arr = [10,11,12,13];
        console.log(arr , typeof(obj));
        // ###5 function 函數類型(歸屬於object)
        function func(){
            console.log("我是函數");
        }
        func()
        console.log(func,typeof(func))
        // ###6 undefined 未定義類型
        var a;
        console.log(a , typeof(a))
        // 註意: null 可以理解成關鍵字 (等價於python中None)
        var a = null
        console.log(a , typeof(a))
    </script>
</body>
</html>

2. js類型轉換_運算符

2.1 強制轉換_Number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>強制轉換 - Number</title>
</head>
<body>
    <script>
        // 1. parseInt 強制轉換成整型 
        /* 要求: 必須數字開頭; */
        var num = 1.934567; //1
        var num = "abc";    //NaN
        var num = "123";    //123
        var num = "123abc"; //123
        var num = "abc123"; //NaN
        var num = "1.34abc" //1
        var num = []        //NaN 
        var num = false        //NaN 
        var res = parseInt(num); 
        console.log(res ,typeof(res))
        // 2.parseFloat 強制轉換成浮點型
        /* 要求: 必須數字開頭; */
        var num = 100; //1
        var num = "abc";    //NaN
        var num = "123";    //123
        var num = "123abc"; //123
        var num = "abc123"; //NaN
        var num = "1.34abc"; //1.34
        var num = {};        //NaN 
        var num = true;
        var res = parseFloat(num); 
        console.log(res ,typeof(res))
        // 3.Number類型強轉
        /* 要求:必須是存純數字或者佈爾類型*/
        var a = false
        var a = "123.456"; //123
        var res = Number(a)
        console.log(res ,typeof(res))
    </script>
</body>
</html>

2.2 強制轉換_String

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>強制轉換 - String</title>
</head>
<body>
    <script>
        /*
            字符串的強轉是在原有類型的兩邊套上引號,表達字符串類型;
        */
        var a = 100;
        var a = 4.89;
        var a = "abc";
        var a = [];
        var a = undefined;
        var a = null;
        var a = NaN;
        var res = String(a);
        console.log(res , typeof(res))
    </script>
</body>
</html>

2.3 強制轉換_Boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>強制轉換 - Boolean</title>
</head>
<body>
    <script>
        /*
            //佈爾類型為假的七中情況:
            0 0.0 '' NaN undefined null false 
        */
        var a = false;
        var a = null;
        var a = 0;
        var a = 0.0;
        var a = '';
        var a = NaN;
        var a = undefined;
        // 註意點 空數組 空對象都是true
        var a = []; // true
        var a = {}; // true
        var res = Boolean(a);
        console.log(res , typeof(res));
    </script>
</body>
</html>

2.4 自動類型轉換_Number_Boolean_String三者之間轉換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自動類型轉換 Number Boolean String 三者之間的轉換</title>
</head>
<body>
    <script>
        // 1.Number+Boolean
        var res = 10 + true;
        var res = 3.4 + true;
        var res = 10 + 3.1;
        console.log(res ,typeof(res))
        // 2.Number+Boolean+String (對於字符串來說 +號意味著拼接)
        var res = true + "100";
        var res = 100 + "101" + 100;
        console.log(res,typeof(res))
        // 3.除瞭+號,剩下的都可以做運算(必須是數值)
        var res = 100 - "101";
        var res = 100 - "99abc";
        console.log(res,typeof(res))
    </script>
</body>
</html>

2.5 js運算符

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>js中的運算符</title></head><body>    <script>        // (1) ++ -- 遞增,遞減        // num++ 先賦值在自增        var num = 100;        var res = num++;        console.log(res , typeof(res));        var res = num++;        console.log(res , typeof(res));        // num++ 先自增在賦值        var num = 100;        var res = ++num;        var res = ++num;        console.log(res , typeof(res));        // (2) === !== (全等於,不全等於)比較兩樣東西1.比較值的大小 2.比較值的類型        var res = "1" == 1;        console.log(res , typeof(res));        var res = "1" === 1;        var res = "1" !== 1;        console.log(res , typeof(res));        // (3) && => and  ,  || => or   ,  ! => not        var num = 8        if(num > 5 && num <10){            console.log("ok1~");        }        if(num>10 || num < 3){            console.log("ok2~");        }        var num = 0        if(!num){            console.log("ok3~");        }        // (4) 三元(目)運算符 [ js: 表達式?真值:假值 ]    [ python :res = 正確 if 條件表達式 else 錯誤 ]        var age = 18;        var res = age >= 18 ? "成年人":"兒童";        console.log(res)    </script></body></html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js中的運算符</title>
</head>
<body>
    <script>
        // (1) ++ -- 遞增,遞減
        // num++ 先賦值在自增
        var num = 100;
        var res = num++;
        console.log(res , typeof(res));
        var res = num++;
        console.log(res , typeof(res));
        // num++ 先自增在賦值
        var num = 100;
        var res = ++num;
        var res = ++num;
        console.log(res , typeof(res));
        // (2) === !== (全等於,不全等於)比較兩樣東西1.比較值的大小 2.比較值的類型
        var res = "1" == 1;
        console.log(res , typeof(res));
        var res = "1" === 1;
        var res = "1" !== 1;
        console.log(res , typeof(res));
        // (3) && => and  ,  || => or   ,  ! => not
        var num = 8
        if(num > 5 && num <10){
            console.log("ok1~");
        }
        if(num>10 || num < 3){
            console.log("ok2~");
        }
        var num = 0
        if(!num){
            console.log("ok3~");
        }
        // (4) 三元(目)運算符 [ js: 表達式?真值:假值 ]    [ python :res = 正確 if 條件表達式 else 錯誤 ]
        var age = 18;
        var res = age >= 18 ? "成年人":"兒童";
        console.log(res)
    </script>
</body>
</html>

3. js流程控制

3.1 分支結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流程控制 -> 分支結構 </title>
</head>
<body>
    <script>
        var mashengni = "美女";
        //1.單項分支
        // if(mashengni == "美女"){
        //     alert("給他買好吃的~");
        // }
        //2.雙項分支
        // if(mashengni == "野獸"){
        //     alert("給他一榔頭~");
        // }else{
        //     alert("跳起來給他一榔頭~");
        // }
        //3.多項分支
        // 不推薦判斷條件連續比較,有可能失效;
        var salary = 1000;
        if(10000 < salary && salary < 12000){
            console.log("正常薪資范圍~");
        }else if(12000 <= salary && salary < 15000){
            console.log("超過一般水平~");
        }else if(15000 <= salary && salary <18000){
            console.log("大神級畢業生~");
        }else if(salary >= 18000){
            console.log("王牌畢業生~");
        }else{
            console.log("回爐重生~")
        }
        //4.巢狀分支
        var youqian = true;
        var youfang = true;
        if(youqian){
            if(youfang){
                console.log("老子要嫁給你~!");
            }
        }
    </script>
</body>
</html>

3.2 分支結構_switch_case

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分支結構 : switch case </title>
</head>
<body>
    <script>
        var date = new Date();
        console.log(date);
        // 獲取星期 getDay
        var week = date.getDay();
        console.log(week)
        week = "1"
        // 註意點: switch case中的判斷(全等於): (1) 值的比較(2)類型的比較 全部符合才能滿足條件;
        switch (week){
            case 1:
                console.log('星期一');
                break;
            case 2:
                console.log('星期二');
                break;
            case 3:
                console.log('星期三');
                break;
            case 4:
                console.log('星期四');
                break;
            case 5:
                console.log('星期五');
                break;
            case 6:
                console.log('星期六');
                break;
            default:
                console.log("星期日!");
                break;
        }

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

3.3 循環結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分支結構 : 循環結構 </title>
</head>
<body>
    <script>
        // ### 1.for循環
        /*
            語法特征:
                1號    2號     3號
                for(初始值;判斷條件;自增自減的值){
                    code1
                    code2..
                }
                先執行1,2滿足後執行代碼體
                然後執行3,2滿足後在執行代碼體
                以此類推...
                直到不滿足條件終止循環;
        */
        // 打印 1~100
        for(var i = 1;i<=100;i++){
            console.log(i);
        }
        // 打印1~100 遇到50,自動跳過;
        for(var i = 1;i<=100;i++){
            if(i == 50){
                continue;
            }
            console.log(i);
        }
        // ### 2.while 循環
        //遇到5,終止循環
        i = 0
        while(i<10){
            if( i == 5){
                break;
            }
            console.log(i);
            i++;            
        }         
        console.log("<===============第一組===================>")
        // ### 3.for( var i in Iterable )  獲取的是數組中的索引號;
        var arr = ["孟浩然","趙子龍","康乃馨","張飛","汪精衛"];
        for(var i in arr ){
            console.log(i);
            console.log(arr[i]);
        }
        console.log("<===============第二組===================>")
        // 獲取的是js對象中的鍵
        var dic = {"a":"王同培","b":"馬村你","c":"張宇"};
        for(var i in dic){
            console.log(i)       
            console.log(dic[i]) ;    
        }
        console.log("<===============第三組===================>")
        // ### 4.for( var i of Iterable ) 獲取的是數組中的值; [等價於python中 for i in Iterable:]
        for(var i of arr){
            console.log(i);
        }
        console.log("<===============第四組===================>")
        // 註意點: for(var i of dic) 不能遍歷js對象[字典] error
        /*
        var dic = {"a":"王同培","b":"馬村你","c":"張宇"};
        for(var i of dic){
            console.log(i)     
        }
        */
        // 字符串的遍歷:
        for(var i of "abcdefg"){
            console.log(i)
        }
    </script>
</body>
</html>

4. js函數

4.1 函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函數</title>
</head>
<body>
    <script>
        func1()
        // ###1 函數
        // 方式一 普通函數 (存在預加載機制,提前把函數加載到內存中,然後代碼整體在執行)
        func1()
        function func1(){
            console.log(111);
        }
        // 方式二 匿名函數(匿名函數沒有預加載價值,必須先定義在調用)
        // func2() error
        var func2 = function(){
            console.log('我是func2~');
        }
        func2();
        // 方式三 不推薦 (瞭解)
        // var func3 = new Function("alert('我是func3~');alert('woshi3333');");
        // console.log(func3,typeof(func3));
        // func3();
        // var func4 = new Function("x","y","alert(x+y)");
        // func4(5,6);
        // 方式四 閉包函數
        function func5(){
            var a = 100;
            function func6(){
                console.log(a,"<===>");
                return "我是閉包函數";
            }
            return func6;
        }
        func = func5();
        res = func();
        console.log(res);
        // 方式五 箭頭函數
        function mysum(x,y){
            return x+y;
        }
        res = mysum(5,6)
        console.log(res,"<=======11122233=======>");
        var mysum = (x,y)  =>  {return x+y;}        
        var res = mysum(5,6);
        console.log(res,"========3334444=========");
        // ###2 函數參數 (普通位置參數,默認參數)
        // js中的形參實參不匹配不會報錯
        function func7(a,b,c=3){
            console.log(a,b,c);
        }
        func7(10,11);
        func7(10,11,12);
        func7(10,11,12,13);
        console.log("<==============================>")
        // arguments 自動收集所有的實參
        // 計算任意個數值的累加和;
        function func8() {
            // console.log(a,b)
            // console.log(arguments)
            var total = 0;
            for(var i of arguments){
                total += i;
                console.log(i);
            }
            return total;
        }
        res = func8(1,100,2,3,4,5,56,6);
        console.log(res);
    </script>
</body>
</html>

4.2 函數的調用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函數的調用</title>
</head>
<body>
    <script>
        function func(){
            console.log("函數正在執行 ... ");
        }
        // 1.正常調用
        func();
        // 2.函數的立即執行
        (function func2(){
            console.log("函數正在執行2 ... ")
        })();
        // 3.匿名函數的立即執行
        (function(){
            console.log("匿名函數正在執行3 ... ")
        })();
        // 4.其他立即執行的方法;
        !function(){
            console.log("我在執行4 ... ");
        }();
        ~function(){
            console.log("我在執行5 ... ");
        }();

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

總結

本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀: