Python Day 50 前端、JS運算符、JS流程控制、JS函數、JS四種變量類型、JS數據類型、JS選擇器、JS頁面交互

時間 2019-11-22

標籤 python day 前端運算符流程控制函數四種變量類型數據選擇器頁面交互欄目 Python 简体版

原文原文鏈接

　　##內容回顧css

#一、隱藏
    display: none;
    opacity: 0;
#二、陰影：
    box-shadow: x軸偏移 y軸偏移 虛化 陰影寬度 red;
#三、過渡:
    transition: 0.2s

#四、定位：
    position：relative | absolute | fixed
    1）四個定位方位打開
    2）盒子四邊參考參考系四邊佈局
    3）上下取上，左右取左
    4）參考系：原有位置 | 最近的定位父級(父相子絕) | 頁面窗口
    5）z-index決定上下顯示層次
    
    注：calc(100%)
    
#五、js：
    定義：運行在瀏覽器上的前端腳本編程語言
    做用：處理前端數據、渲染頁面、修改樣式、完成交互、先後臺數據通訊
    三種引入：
    基本數據類型：數字、布爾、字符串、未定義、數組(list)、對象(dict)、函數、null
    若語言：根據當前實際的運行環境，自動絕對存儲數據的類型

　　##JS運算符html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
<h1>運算符</h1>
</body>
<script>
    let n1 = 5;
    let n2 = 2;
    let res =  n1 / n2;
    console.log(res);
    //向下取整
    res = parseInt(res);
    console.log(res);

    console.log(parseInt('12abc'));
    console.log(parseInt('12.5abc'));
    console.log(parseFloat('12.5.1abc888'));

    // 自增自減
    console.log(n1);

    // ++在前優先級最高，++在後優先級最低(比賦值符=還低)
    // res = n1++;  // 先將n1的值賦值給res，本身再自增1
    // res = ++n1;  // 先本身自增1, 再將n1的值賦值給res
    console.log(res, n1);


    // 邏輯運算符
    let x = 10;
    res = 0 && ++x;
    console.log(res, x);
    res = 100 || ++x;
    console.log(res, x);
    console.log(!!x);


    // 三元運算符
    // 條件 ? 結果1 : 結果2
    res = 10 == '10' ?  '相等' : '不等';
    console.log(res);

</script>

</html>

　　##JS流程控制前端

#一、if分支結構
if (表達式1) {
    
} else if (表達式2) {
    
} 
...
else if (表達式2) {
    
} else {
    
}

#案例
 // 隨機數 [0, 1) => [m, n]  推導思路
    // [0, 1) * 11 => [0, 11) parseInt() => [0, 10] + 5 => [5, 15]
    // [0, 1) * (n - m + 1)  => [0, n - m + 1) parseInt() => [0, n - m] + m => [m, n]
    // 公式：parseInt(Math.random() * (max - min + 1)) + min
    let num = parseInt(Math.random() * (40 - 10 + 1)) + 10;
    console.log(num);

    if (num >= 30) {
        console.log('數字超過30');
    } else if (num >= 20) {
        console.log('數字超過20');
    } else {
        console.log('數字超過10');
    }

#二、while循環
// 循環
    `
    while (條件) {
        循環體
    }
    `;
    let count = 1;
    while (count <= 100) {
        if (count % 7 == 0) {
            console.log(count)
        }
        count++
    };

#三、for循環
for (循環變量①; 條件表達式②; 循環變量增量③) {
    代碼塊④;
}
// for循環執行的順序：① ②④③ ... ②④③ ②，入口爲①，出口爲②，②④③就是循環過程

// 案例：
for (var i = 0; i < 5; i++) {
    console.log(i);
}

// 結果：
0
1
2
3
4

#四、do while循環

do {

    } while (條件);
#案例
count = 0;
    do {
        console.log('循環體必定會執行');
        count++;
    } while (count < 3);

#五、for…in迭代器
var arr = [1, 2, 3, 4, 5]
for (num in arr) {
    console.log(num);
}

// 結果爲索引：
0
1
2
3
4

　　##JS函數css3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
<h1 id="hhh">函數</h1>
</body>
<script>


(function () {


    `函數的定義
    function 函數名(參數列表) {
        函數體;
        return 返回值
    }

    function：定義函數的關鍵字
    函數名：使用函數的依據，就是一個變量，能夠賦值給其餘變量，也能夠存儲在容器中，也能夠做爲函數的參數與返回值
    參數列表：都是按位置傳，形參與實參個數不須要統一，可是必定是按位賦值 (你傳你的，我收個人)
    函數體：完成功能的主體代碼
    返回值：只能返回一個值
    `;

    function fn() {
        console.log('fn run');
        return [1, 2]
    }
    let res = fn();
    console.log(res);
    let func = fn;
    func();

    function my_fn(a, b) {
        console.log('參數', a, b)
    }
    my_fn();  // 你收我不傳
    my_fn(10);  // 你收我傳不夠
    my_fn(10, 20, 30);  // 你收我傳多


    `匿名函數
    function () {
        // 沒有名字的函數就是匿名函數
    }
    `;
    // 需求須要一個函數地址，就能夠傳入一個匿名函數
    function fn100(fn) {
        fn()
    }
    fn100( function () { console.log('傳進去的匿名函數') } );

    // 用變量接收匿名函數：第二種聲明函數的方式
    let f = function (a, b) {
        console.log('ffffffffff')
    };
    f();

    // 爲事件提供方法體
    hhh.onclick = function () {
        console.log('hhh 被點擊了')
    };

    // 匿名函數自調用：一次性使用 產生一個局部做用域
    (function (a, b) {
        console.log('匿名函數自調用:', a, b)
    })(10, 20, 30);

    let abc = 10;

    hhh.onclick = function () {
        console.log(abc);
    };

})()
</script>
<script>
    abc = 20
</script>

</html>

　　##JS四種變量類型編程

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<h1>四種變量</h1>
</body>
<script>

    // if (true) {  // 塊級做用域
    //     let a = 10;
    //     const b = 20;
    //     var c = 30;
    //     d = 40;
    // }
    {
        let a = 10;
        const b = 20;
        var c = 30;
        d = 40;
    }
    // console.log(a);  // 有{}就不能被外界訪問
    // console.log(b);  // let和const有塊級做用域，不容許重複定義
    // console.log(c);  // var沒有塊級做用域, 但有局部做用域，能夠重複定義
    // console.log(d);  // 沒有關鍵字聲明的變量是全局變量，在函數內部聲明的外部也能夠用

    (function () {
        let aa = 100;
        const bb = 200;
        var cc = 300;
        dd = 400;
    })();
    console.log(dd);



</script>

</html>

　　##JS數據類型數組

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1>數據類型的運用</h1>
</body>
<script>
    // 字符串
    // 1）定義：
    let ss = '123abc呵呵';
    let res;
    console.log(ss);
    // 2）索引
    res = ss[0];
    console.log(res);
    // 3）切片
    res = ss.slice(3, 6);
    console.log(res);
    // 4）替換
    res = ss.replace('abc', 'ABC');
    console.log(res);
    // 5）拆分: string => array
    res = ss.split('');
    console.log(res);
    // 6) 拼接
    res = ss + ss;
    console.log(res);
    // 7) 迭代
    // of:取值
    // in：索引
    for (s of ss) {
        console.log(s);
    }

    // 數組
    // array => string
    let arr = [3, 1, 2, 4, 5];
    res = arr.join('');  // 默認,  |  ''  |  '自定義符合'
    console.log(res);
    // 迭代
    for (a of arr) {
        console.log(a);
    }
    // 排序
    // arr.sort();
    // arr.reverse();
    // console.log(arr);

    // 增刪改查
    console.log(arr[4]);
    arr[4] = 555;
    console.log(arr[4]);

    arr.push(100);  // 尾增
    arr.unshift(200);  // 頭增
    console.log(arr);

    arr.pop();  // 尾刪
    arr.shift();  // 頭增
    console.log(arr);

    // 重點：增刪改
    console.log(arr);
    // 開始操做的索引 操做的長度 操做後的結果(不定長0~n個)
    arr.splice(2, 1, 222, 333, 444);
    console.log(arr);

    // 不定長參數
    function f(...a) {
        console.log(a)
    }
    f(1, 2, 3, 4, 5, 6)


    // 字典
    // 增刪改查
    dic = {};
    // 增
    dic['name'] = 'owen';
    dic.age = 18;
    // 改
    dic.age = 20;
    // 對象的刪除
    delete dic.age;
    console.log(dic);
    // 查
    console.log(dic.name);

    // 字典的迭代用 for in
    for (k in dic) {
        console.log(k);
    }



</script>
</html>

　　##JS選擇器瀏覽器

#一、getElement系列
// 1.經過id名獲取惟一知足條件的頁面元素
document.getElementById('id名');
// 該方法只能由document調用

// 二、經過class名獲取全部知足條件的頁面元素
document.getElementsByClassName('class名');
// 該方法能夠由document及任意頁面元素對象調用
// 返回值爲HTMLCollection (一個類數組結果的對象，使用方式同數組)
// 沒有匹配到任何結果返回空HTMLCollection對象 ([])

// 3.經過tag名獲取全部知足條件的頁面元素
document.getElementsByTagName('tag名');
// 該方法能夠由document及任意頁面元素對象調用
// 返回值爲HTMLCollection (一個類數組結果的對象，使用方式同數組)
// 沒有匹配到任何結果返回空HTMLCollection對象 ([])

#二、querySelect系列（用這個選擇其居多**************）
// 1.獲取第一個匹配到的頁面元素
document.querySelector('css3語法選擇器');
// 該方法能夠由document及任意頁面對象調用

// 2.獲取全部匹配到的頁面元素
document.querySelectorAll('css3語法選擇器');
// 該方法能夠由document及任意頁面對象調用
// 返回值爲NodeList (一個類數組結果的對象，使用方式同數組)
// 沒有匹配到任何結果返回空NodeList對象 ([])

　　##js頁面交互dom

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js頁面交互</title>
    <style>
        h1 {
            background-color: orange;
        }
    </style>
</head>
<body>
<h1 id="hhh" style="font-size: 30px" owen="Owen">
    <i>js頁面交互</i>
</h1>
<h2 class="hh2">副標題1</h2>
<h2 class="hh2">副標題2</h2>

<img src="" alt="">

<input type="text" value="12345">


</body>




<!--
<script>
    // 1、js選擇器：js如何與html標籤創建起聯繫
    // 1)
    let h1 = document.getElementById('hhh');
    console.log(h1);
    console.log(hhh);  // id是標籤的惟一標識，因此js經過id名能夠直接拿到標籤
    // let h2s = document.getElementsByClassName('hh2');
    let h2s = document.getElementsByTagName('h2');
    console.log(h2s);
    console.log(h2s[0]);

    // 2) 同css3選擇器
    // querySelector就是獲取一個
    // h1 = document.querySelector('#hhh');
    h1 = document.querySelector('body h1#hhh');
    console.log(h1);
    h21 = document.querySelector('#hhh ~ .hh2');
    console.log(h21);
    // querySelectorAll就是獲取多個
    h2s = document.querySelectorAll('#hhh ~ .hh2');
    console.log(h2s);
    // 優點：經過id、class或標籤，均可以快速定位到某一個或某幾個
    h22 = document.querySelector('.hh2:nth-of-type(2)');
    console.log(h22);

</script>
-->
<!--
<script>
    //二
    // 1）找目標標籤
    let h1 = document.querySelector('h1');

    // 2）獲取樣式、內容、屬性
    let fontSize = h1.style.fontSize;
    console.log(fontSize);
    // 標籤.style.屬性名 只能獲取行間式
    // getComputedStyle(ele_name, 僞類選擇器一般用null填充) 能獲取全部方式的樣式(內聯與外聯叫計算後樣式)
    let bgColor = getComputedStyle(h1, null).backgroundColor;
    console.log(bgColor);

    console.log(h1.innerText);
    console.log(h1.innerHTML);

    console.log(h1.getAttribute('id'));
    console.log(h1.getAttribute('owen'));


    // 3）修改樣式、內容、屬性
    h1.style.color = 'red';  // js能夠直接修改樣式 - 修改的是行間式
    h1.style.borderRadius = '50%';  // css的 - 連接語法對應 js的 小駝峯命名法

    h1.innerText = '修改事後的內容';
    h1.innerHTML = '<i>修改事後的內容</i>';

    h1.setAttribute('owen', 'oooooooooooooooo');

    let img = document.querySelector('img');

    if (Math.random() > 0.5) {
        img.setAttribute('src', 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=255676174,1347478056&fm=26&gp=0.jpg')
    } else {
        img.setAttribute('src', 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3706411226,1037337437&fm=26&gp=0.jpg')
    }

</script>
-->
<!--
<script>
    // 3、表單內容
    let inp = document.querySelector('input');
    console.log(inp.value);
    inp.value = 67890;

    // console.log(inp.getAttribute('value'));
    // inp.setAttribute('value', '0000000000000');

</script>
-->
<script>
    // 4、鼠標事件
    let h1 = document.querySelector('h1');
    // onclick、ondblclick、onmouseover、onmouseleave、onmousemove、onmousedown、onmouseup
    h1.onclick = function (ev) {
        console.log(ev);  // 包含着鼠標的相關信息
        // 鼠標點擊點
        console.log(ev.clientX, ev.clientY);
        // 特殊按鍵
        console.log(ev.altKey, ev.ctrlKey, ev.shiftKey);
    };

    h2 = document.querySelector('h2');
    h2.onmouseover = function () {
        h1.innerText = 'h2被懸浮了';
        h1.style.color = 'green';
    };
    h2.onmouseleave = function () {
        h1.innerText = 'h2被放開了';
        h1.style.color = 'red';
    };
    let count = 1;
    h2.onmousemove = function () {
        ++count;
        h1.innerText = '鼠標在h2身上游走' + count + '下';
        this.innerText = '鼠標在h2身上游走' + count + '下';
    };
    // 爲某個標籤綁定事件，去控制頁面中任何一個標籤（綁定事件中的this就表明自身）

    // 鍵盤事件
    // 只要在窗口下，點擊鼠標就能夠觸發
    // onkeydown、onkeyup、onkeypress
    /*
    document.onkeydown = function (ev) {
        console.log(ev.keyCode);
        if (ev.keyCode == 37) {
            console.log('你按了左鍵');
        } else  if (ev.keyCode == 38) {
            console.log('你按了上鍵');
        }
        console.log(ev.altKey);
        if (ev.ctrlKey && ev.keyCode == 13) {
            console.log('留言');
        }
    }
    */
    // let inp = document.querySelector('input');
    // inp.onkeydown = function (ev) {
    //     console.log(ev.keyCode)
    // }


    // 表單事件
    let inp = document.querySelector('input');
    let h22 = document.querySelector('h2:nth-of-type(2)');
    // onchange當input失去焦點纔會觸發  oninput 內容改變時觸發
    inp.oninput = function () {
        h22.innerText = this.value;
    };


</script>
</html>