Python全棧之學習JS(2)

Posted on by

1. js對象

1.1 object對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>object對象</title>
</head>
<body>
    <script>
        // 1.定義對象方法一
        var obj = new Object();
        console.log(obj , typeof(obj))
        obj.name = "孫堅";
        obj.age = 18;
        obj.weight = "200斤";
        obj.eat = function(){
            alert("我會吃竹子");
        }
        console.log(obj.name)
        // obj.eat();
        //2.定義對象方法二
        /* 對象中的成員不要使用單引號,在特殊場景中,比如json格式字符串的轉換中會報錯; */
        var obj = {
            name:"張三",
            "age" : 20,
            sex   : "男性",
            drink : function(something){
                console.log("我會喝牛欄山",something);
            }
        }
        //調用方式一
        console.log(obj.sex)
        obj.drink("老白幹")
        //調用方式二
        console.log(obj["age"])
        obj["drink"](1)
        // 註意點
        var str = "name"
        console.log(obj.str , "<==========================>") //error
        console.log(obj.name)
        console.log(obj[str]) // obj["name"]
        // eval 可以把字符串當成代碼執行
        eval("console.log(333)")
        //3.定義對象方法三
        /* 類比python中定義類的寫法 , this等價於self */
        function Person(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.func = function(){
                console.log("我是func");
                return this.sex;
            }
        }
        var obj1 = new Person("劉一風",30,"男性");
        var obj2 = new Person("張三風",90,"女性");
        console.log(obj1.name);
        var res = obj1.func();
        console.log(res);
        console.log(obj2.name)
        var res = obj2.func();
        console.log(res);
        //4.遍歷對象 
        for(var i in obj1){
            console.log(i)
        }
        //5. with(對象) 語法可以直接獲取對象成員的值
        with(obj1){
            console.log(name);
            console.log(sex);
            console.log(age);
            res = func();
            console.log(res);
        }
        console.log("<===================================>")
        //將4和5結合,遍歷對象中的數據;
        for(var i in obj1){
            //console.log(i , typeof(i)) // name age sex func  ... string
            with(obj1){
                console.log(eval(i))
            }
        }

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

1.2 json對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>json對象</title>
</head>
<body>
    <script>
        var data = {
            'name':"文東",
            age:20,
            "sleep":function(){
                alert("文東一天睡23小時,還有一個小時上廁所.");
            }
        }
        // js對象 => json格式的字符串
        var res = JSON.stringify(data);
        console.log(res , typeof(res)); // {"name":"文東","age":20} 
        // json格式的字符串 => js對象
        res = '{"name":"東東","age":30}';  // success
        // res = "{'name':90,'age':40}"; error 引號必須是雙引號
        var res2 = JSON.parse(res);
        console.log(res2,typeof(res2));

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

2. js字符串函數

<!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 string = "to be or not to be";
        //獲取字符串長度 length	
        var res = string.length
        var res = string[-1]
        console.log(res)
        //1.清除兩側的空白 trim [ python的strip ]
        var res = string.trim()
        console.log(string)
        console.log(res)
        //2.獲取首次出現的位置 indexOf   [ python的find ]
         /*找不到返回-1*/
        var string = "to be or not to be";
        var res = string.indexOf("z")
        console.log(res)
        //3/最後一次出現的位置 lastIndexOf 
        /*找不到返回-1*/
        var res = string.lastIndexOf("zzz")
        console.log(res);
        //4.連接字符串	concat	 [ python的 os.path.join  + ]
        var res = string.concat("d:\\","python32\\","day42");
        console.log(res);
        //5.截取字符串 slice
        /* string.slice(開始值,結束值) 字符串的切片  留頭舍尾  [支持逆向下標]*/
        var string = "11122233e or not to be";
        var res = string.slice(1,7);
        var res = string.slice(-5,-1);      // to b
        // var res = string.slice(-5,-10); //截取不到返回空
        console.log(res,"<==1==>")
        //6.截取字符串 substr
        /* string.substr(開始值,截取幾個) */
        var string = "11122233e or not to be";
        var res = string.substr(3,4)
        console.log(res,"<==2==>")
        //7.拆分字符串 split  [ python的 split ]
        var string = "11122233e or not to be";
        var res = string.split(" ")
        console.log(res,"<==3==>")
        //8.大小寫 toUpperCase toLowerCase
        var string = "11122233e Or noT tO be";
        res = string.toUpperCase();
        res = string.toLowerCase();
        console.log(res,"<==4==>")
        //9.search 匹配第一次找到的索引位置,找不到返回-1
        var string = "aaabbb oldaoy ccc"
        var res = string.search(/oldboy/)
        console.log(res,"<==5==>")
        //10.match 返回匹配的數據
        /* /正則表達式/修飾符 g:全局匹配 i:不區分大小寫 m:多行匹配  */
        var string = "我的電話是 : 13838384388 你的電話是: 13854381438"
        var res = string.match(/\d{11}/);  // 匹配一個
        var res = string.match(/\d{11}/g); // 匹配多個,(需要修飾符加上g)
        console.log(res)
        console.log(res[0])
        console.log(res[1])
        //11.字符串替換 replace
        /* replace默認隻替換一次 */
        var string = "to be or not to be";
        var res = string.replace("to","two")
        console.log(res,"<==6==>")       
        // 方法一:
        function myreplace(string,a,b){
            /*
                找最後一個to,如果找不到返回-1
                如果能找到就不停的進行替換,直到-1為止,循環終止;
            */
            while(string.lastIndexOf(a) != -1){
                console.log(1)
                string = string.replace(a,b);
            }
            return string;
        }     
        var string = "to be or not to be";   
        var res = myreplace(string,"to","two")
        console.log(res) // two be or not two be
        // 方法二
        var string = "to be or not to be";
        var res = string.replace(/to/g,"two");
        console.log(res)
    </script>
</body>
</html>

3. js數組相關方法

<!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.定義一個數組
        var arr = Array();
        var arr = Array(10,11,12);
        var arr = [15,16,17]
        console.log(arr , typeof(arr))
        // ### 1.增
        var arr = [];
        arr[0] = 10;
        arr[1] = 11;
        arr[2] = 12;
        // js特征:允許在一個臨時的索引值上插入數據; ok
        arr[10] = 50;
        console.log(arr)
        console.log(arr[5])

        // (1)push 從數組的最後插入元素  相當於python的append
        var arr = [];
        var res = arr.push(111);
        var res = arr.push(222);
        var res = arr.push(333);
        console.log(res,arr)
        // (2)unshift 從數組的前面插入元素 相當於python的insert
        var arr = [100,101];
        var res = arr.unshift(1);
        var res = arr.unshift(333);
        console.log(res , arr);
        // (3)concat 迭代追加數據 相當於python的extend
        var arr1 = [1,2,3]
        var arr2 = ["你好","我好","她也好"]
        var res = arr1.concat(arr2)
        console.log(res, typeof(res));
        // ###2刪
        // (1) delete 刪除
        /* 把值刪掉瞭,原位置用空來取代,返回undifined */
        var arr = [1, 2, 3, "你好", "我好", "她也好"];
        delete arr[1];
        console.log(arr);
        console.log(arr[1])
        // (2)pop  從後面刪除;
        var arr = [1, 2, 3, "你好", "我好", "她也好"];
        var res = arr.pop();
        console.log(res ,arr);
        // (3)shift 從前面刪除
        var arr = [1, 2, 3, "你好", "我好", "她也好"];
        var res = arr.shift()
        console.log(res , arr)
        // ###  特別splice  從指定位置往後進行刪除或者添加
        /* arr.splice(從第幾個位置開始,刪除幾個,[可選的是添加的元素])   */
        var arr = [1, 2, 3, "你好", "我好", "她也好"];
        // 從第二個2位置開始,刪除2個
        var res = arr.splice(2,2)
        console.log(res , arr)
        // 從第二個2位置開始,刪除0個,添加,"hello","world"
        var arr = [1, 2, 3, "你好", "我好", "她也好"];
        var res = arr.splice(2,0,"hello","world")
        console.log(res , arr)
        // ###3改查
        var arr = [1, 2, 3, "你好", "我好", "她也好"];
        //修改元素
        arr[3] = "你不好";
        //獲取元素
        console.log(arr[3]);
        console.log(arr);
        // ###4 其他方法
        // 拼接字符串  join
        /* split 和 join 是一對;*/
        var arr = ["you","can","you","up"];
        var res = arr.join("#")
        console.log(res)
        // 數組元素反轉 reverse
        var arr = [100,200,3,150];
        var res = arr.reverse();
        console.log(res);
        // 截取數組的一部分 slice 
        /* arr.slice(開始值,結束值) 數組的切片  留頭舍尾  [支持逆向下標]*/
        var arr = ["宋健","何旭彤","劉利偉","高雪峰","戈隆","王致和","馬生平"]
        var res = arr.slice(2)
        // var res = arr.slice(2,4)
        var res = arr.slice(-3,-1)
        console.log(res);
        // 排序 默認升序 sort
        var arr = [1,2,3,4,9,22,21];
        var arr = ["1","2","3","4","9","22","21"];
        var res = arr.sort()
        console.log(res)
        var arr = [100,1,2,3,4,9,22,21];
        // sorted 裡面的參數是一個函數,通過函數進行升序或者降序排序;
        /* return 1代表交換位置,如果return -1 代表不交換位置 */
        var res = arr.sort(function(a,b){
            if(a>b){
                return -1;
            }else{
                return 1;
            }               
        });
        console.log(res)
    </script>
    <!-- 
    python : 冒泡排序
        nums = [1,22,3,2,4,9,21];
    def bubble_sort(nums):
        for i in range(len(nums) - 1):  # 這個循環負責設置冒泡排序進行的次數
            for j in range(len(nums) - i - 1):  # j為列表下標
                if nums[j] > nums[j + 1]:
                    nums[j], nums[j + 1] = nums[j + 1], nums[j]
            break;
        return nums
    res = bubble_sort(nums)
    print(res) -->
</body>
</html>

4. js數學對象相關方法

<!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>
        //四舍五入round
        var res = Math.round(3.5)
        var res = Math.round(2.5)
        var res = Math.round(2.31)
        console.log(res)
        //最大值 max        
        var res = Math.max(1,2,3,4,34343);
        //最小值 min
        var res = Math.min(1,2,3,4,34343);
        //絕對值 abs
        var res = Math.abs(-90);
        console.log(res)
        //向下取整 floor 地板
        var res = Math.floor(3.001)
        //向上取整 ceil 天花板
        var res = Math.ceil(3.990)
        //冪運算 pow
        var res = Math.pow(2,3)
        //開方運算 sqrt             
        var res = Math.sqrt(9)
        console.log(res)
        // ### 隨機值推導公式
        //獲取從0到1隨機值   0<x<1
        var res = Math.random()
        console.log(res)
        //獲取1~10的隨機值 1 <= x <= 10
        var res = Math.ceil(Math.random() * 10 )
        console.log(res)
        // 1.獲取從 m 到 n 的隨機值   5,14  m=5 , n=14
        // 1 <= x <= 10  =>  1+4 <= x <= 10+4 < 5 <= x <= 14
        var res = Math.ceil(Math.random() * 10 ) + 4
        //  m = 5 , n = 14
        // 2.拆解數字,把對應的m和n進行替換;
        var res = Math.ceil(Math.random() * (14-5+1) ) + (5 - 1)
        // 3.推出最後結果
        var res = Math.ceil(Math.random() * (n-m+1) ) + (m - 1)
        // 4.封裝函數:終極版:隨機值;
        function randrange(m,n){
            return Math.ceil(Math.random() * (n-m+1) ) + (m - 1);
        }

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

5. BOM對象

5.1 定時器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>BOM對象 </title></head><body>    <script>        /*### BOMjs BOM對象  : 針對於瀏覽器的控制   browser object model js 中最大的對象 window 整個瀏覽器窗口出現的所有內容行為都是window對象中的成員;        */        console.log(window)        // 1.彈出警告框        // window.alert('你好')        // 2.確認彈窗        // var res = window.confirm("確認彈窗")        // console.log(res); // true / false        // 3.等待輸入彈窗        // var res = window.prompt("請輸入您的銀行密碼:")        // console.log(res);        // 4.關閉瀏覽器窗口        // window.close();        // innerHeight innerWidth 獲取瀏覽器窗口內部的寬和高        console.log(`瀏覽器窗口內部的寬度${window.innerWidth}`)        console.log(`瀏覽器窗口內部的高度${window.innerHeight}`)        // window.open("http://www.baidu.com","_self"); // 在當前頁面跳轉        // window.open("http://www.baidu.com","_blank","width=500,height=500");   // 在新窗口頁面跳轉        // ###定時器        /*            # 定時器種類(兩種):基於單線程的異步並發程序;            window.setInterval(函數名,間隔時間(毫秒))   // 定時執行多次任務            window.setTimeout(函數名,間隔時間(毫秒))    // 定時執行一次任務            window.clearInterval(id號)  // 清除定時器 setInterval            window.clearTimeout(id號)   // 清除定時器 setTimeout        */        var num = 1        function func(){            console.log(`我執行瞭${num}`);            num++;        }        var id1 = window.setInterval(func,1000);        var id2 = window.setTimeout(func,2000);        console.log(id1,"id1")        console.log(id2,"id2")        console.log("我執行完瞭....")        window.clearInterval(id1)    </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>BOM對象 </title>
</head>
<body>
    <script>
        /*
			### BOM
			js BOM對象  : 針對於瀏覽器的控制   browser object model 
			js 中最大的對象 window 整個瀏覽器窗口出現的所有內容行為都是window對象中的成員;
        */
        console.log(window)
        // 1.彈出警告框
        // window.alert('你好')
        // 2.確認彈窗
        // var res = window.confirm("確認彈窗")
        // console.log(res); // true / false
        // 3.等待輸入彈窗
        // var res = window.prompt("請輸入您的銀行密碼:")
        // console.log(res);
        // 4.關閉瀏覽器窗口
        // window.close();
        // innerHeight innerWidth 獲取瀏覽器窗口內部的寬和高
        console.log(`瀏覽器窗口內部的寬度${window.innerWidth}`)
        console.log(`瀏覽器窗口內部的高度${window.innerHeight}`)
        // window.open("http://www.baidu.com","_self"); // 在當前頁面跳轉
        // window.open("http://www.baidu.com","_blank","width=500,height=500");   // 在新窗口頁面跳轉
        // ###定時器
        /*
            # 定時器種類(兩種):基於單線程的異步並發程序;
            window.setInterval(函數名,間隔時間(毫秒))   // 定時執行多次任務
            window.setTimeout(函數名,間隔時間(毫秒))    // 定時執行一次任務
            window.clearInterval(id號)  // 清除定時器 setInterval
            window.clearTimeout(id號)   // 清除定時器 setTimeout
        */
        var num = 1
        function func(){
            console.log(`我執行瞭${num}`);
            num++;
        }
        var id1 = window.setInterval(func,1000);
        var id2 = window.setTimeout(func,2000);
        console.log(id1,"id1")
        console.log(id2,"id2")
        console.log("我執行完瞭....")
        window.clearInterval(id1)
    </script>
</body>
</html>

5.2 獲取年月日時分秒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>獲取年月日時分秒</title>
    <style>
        #clock
        {
            width:500px;
            height:50px;
            border:solid 1px red;
            border-radius: 25px;
            text-align: center;
            line-height: 50px;
            background-color: chartreuse;
            color:red;
        }
    </style>
</head>
<body>
    <div id="clock"> </div>
    <script>
        var obj = document.getElementById("clock");
        console.log(obj)
        function func(){
            var d = new Date();
            console.log(d);
            // 獲取年份
            var year = d.getFullYear()
            // 獲取月份 月份范圍 0 ~ 11 0代表1月份
            var month = d.getMonth()
            // 獲取日期
            var date = d.getDate()
            // 獲取小時
            var hour = d.getHours()
            // 獲取分鐘
            var minutes = d.getMinutes()
            // 獲取秒數
            var seconds = d.getSeconds()
            strvar= `現在的時間是: ${year}年-${month+1}月-${date}日  ${hour}:${minutes}:${seconds}`;
            console.log(strvar);
            obj.innerHTML = strvar
            console.log(minutes, typeof(minutes));
            // 清除定時器的效果
            if(minutes == 8){
                clearInterval(id);
            }
        }
        var id = window.setInterval(func,1000)

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

5.3 Navigator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM模型中 Navigator 對象 </title>
</head>
<body>
    <script>
        console.log(navigator);
        console.log(navigator.platform)  // 判斷是pc端還是移動端
        console.log(navigator.userAgent) // 在爬蟲程序中,可以偽造成瀏覽器進行數據爬取,繞開服務端的反爬機制;
    </script>
</body>
</html>

5.4 歷史對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="func1()">查看歷史對象</button>
    <button onclick="func2()">跳轉到上一頁</button>
    <button onclick="func3()">跳轉到下一頁</button>
    <button onclick="func4()">當前頁面刷新</button>
    <script>
        function func1(){
            console.log(history);
        }
        function func2(){
            history.go(-1);
        }
        function func3(){
            // history.go(1);
            history.go(2);
        }
        function func4(){
            history.go(0);
        }
    </script>
</body>
</html>

6. BOM對象location

location作用： 負責刷新頁面，跳轉頁面用的，可以獲取地址欄上面的參數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM對象 location</title>
</head>
<body>
    <button onclick="func1()">查看location對象</button>
    <button onclick="func2()">跳轉其他頁面</button>
    <button onclick="func3()">刷新頁面</button>
    <button onclick="func4()">過一秒在刷新頁面</button>
    <script>
        function func1(){
            /* 鏈接地址:  http://ip + 端口號 + 路徑 + 參數 + 錨點 */
            console.log(location);
            console.log(`協議:${location.protocol}`);
            console.log(`ip端口號:${location.host}`);
            console.log(`端口號:${location.port}`);
            console.log(`路徑:${location.pathname}`);
            console.log(`獲取錨點:${location.hash}`);
            console.log(`獲取地址欄參數:${location.search}`);
            console.log(`完全地址:${location.href}`)
        }
        //跳轉頁面
        function func2(){
            // location.href = "http://www.baidu.com";方法一
            location.assign("http://www.jd.com");
        }
        //刷新頁面
        function func3(){
            location.reload();
        }
        // 過一秒在刷新頁面
        function func4(){
            setTimeout(func3,1000);
            console.log("我執行瞭...")
        }
        // 每過一秒刷新一下頁面
        /* 等待所有頁面圖片文字全部加載完畢之後,再去執行對應的代碼 */
        window.onload = function(){
            func4()
        }
    </script>
</body>
</html>

7. 小提示

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

ceshi.html：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{margin:0;
 padding:0;
 list-style:none;}
 .wrap{height:170px;
 width:490px;
 margin:60px auto;
 overflow: hidden;
 position: relative;
 margin:100px auto;}
 .wrap ul{position:absolute;} 
 .wrap ul li{height:170px;}
 .wrap ol{position:absolute;
 right:5px;
 bottom:10px;}
 .wrap ol li{height:20px; width: 20px;
 background:#ccc;
 border:solid 1px #666;
 margin-left:5px;
 color:#000;
 float:left;
 line-height:center;
 text-align:center;
 cursor:pointer;}
 .wrap ol .on{background:#E97305;
 color:#fff;}
 </style>
 <script type="text/javascript">
 window.onload=function(){
 var wrap=document.getElementById('wrap'),
 pic=document.getElementById('pic').getElementsByTagName("li"),
 list=document.getElementById('list').getElementsByTagName('li'),
 index=0,
 timer=null;
 // 定義並調用自動播放函數
 timer = setInterval(autoPlay, 2000);
 // 鼠標劃過整個容器時停止自動播放
 wrap.onmouseover = function () {
 clearInterval(timer);
 }
 // 鼠標離開整個容器時繼續播放至下一張
 wrap.onmouseout = function () {
 timer = setInterval(autoPlay, 2000);
 }
 // 遍歷所有數字導航實現劃過切換至對應的圖片
 for (var i = 0; i < list.length; i++) {
 list[i].onmouseover = function () {
 clearInterval(timer);
 index = this.innerText - 1;
 changePic(index);
 };
 };
 function autoPlay () {
 if (++index >= pic.length) index = 0;
 changePic(index);
 }
 // 定義圖片切換函數
 function changePic (curIndex) {
 for (var i = 0; i < pic.length; ++i) {
 pic[i].style.display = "none";
 list[i].className = "";
 }
 pic[curIndex].style.display = "block";
 list[curIndex].className = "on";
 }
 };
 </script> 
</head>
<body>
 <div class="wrap" id='wrap'>
 <ul id="pic">
 <li><img src="../image/img1.png" alt=""></li>
 <li><img src="../image/img2.png" alt=""></li>
 <li><img src="../image/img3.png" alt=""></li>
 </ul>
 <ol id="list">
 <li class="on">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ol>
 </div>
</body>
</html>

總結

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

推薦閱讀：