JavaScript 運算子與流程控制-有解無憂

賦值運算子與算術運算子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <script>
        let a = 3, b = 5;
        console.log(a,b);
        let c = a + b;
        console.log(c);

        a = a + 5;
        console.log(a);
        a += 5;
        console.log(a);
    </script>
</body>
</html>

一元運算子的前置與后置操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <script>
        // 在不參與其他運算式的情況下，前置加和后置加沒有區別
        // let a = 1;
        // a++;
        // console.log(a);

        // let a = 1;
        // ++a;
        // console.log(a);

        // let a = 1;
        // let b = 2;
        // let c = a + ++b;
        // console.log(b,c);

        // let a = 1;
        // let b = 2;
        // let c = a + b++;
        // console.log(b,c);

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

比較運算子注意事項：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <input type="text" name="age">
    <span id="msg"></span>

    <script>
        // let a = 1;
        // let b = 2;
        // console.log(a<b);

        // let a = 1;
        // let b = '1';
        // console.log(a==b);
        // console.log(a===b);
        // console.log(typeof a);
        // console.log(typeof b);
        // console.log(a<=b);

        let span = document.querySelector('#msg');
        document.querySelector('[name=age]').addEventListener('keyup', function () {
            // let msg = '';
            // if(this.value > 90){
            //     msg = '年齡不能超過90歲~';
            // }
            // span.innerHTML = msg;
            span.innerHTML = this.value > 90 ? '年齡不能超過90歲~' : '';
        });

    </script>
</body>

</html>

邏輯運算子實體詳解：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <input type="text" name="pwd"><br>
    <input type="text" name="repwd">
    <br>
    <span name="msg"></span>

    <script>
        // let a = 1, b = 1;
        // if (a == 1 && b == 1) {
        //     console.log('都是1');
        // }
        // if (a == 1 || b == 1) {
        //     console.log('至少有1個為1');
        // }
        // if (a == 1 && b != 2) {
        //     console.log('a是1，b不是2');
        // }

        // 通過name值獲取元素的方法
        function query(name) {
            return document.querySelector(`[name=${name}]`);
        }
        // console.log(query("repwd"));

        let inputs = document.querySelectorAll('[name=pwd], [name=repwd]');
        // console.log(inputs);
        // 對陣列中的每個元素進行操作
        [...inputs].map(item => {
            item.addEventListener('keyup', function () {
                let msg = '';
                if (query("pwd").value != query("repwd").value) {
                    msg = '兩次密碼不一致~';
                }
                if (query("pwd").value.length < 5) {
                    msg = '密碼長度不得小于5位~';
                }
                query("msg").innerHTML = msg;
            })
        })
    </script>
</body>

</html>

短路運算的妙用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <script>
        // let a = 1, b = 0;
        // console.log(a == true);
        // console.log(b == true);
        // if (a) {
        //     console.log('a');
        // }
        // if (b) {
        //     console.log('b');
        // }

        // if (a || b) {
        //     console.log(111);
        // }
        // if (b || a) {
        //     console.log(111);
        // }

        // let a = 6, b = 0;
        // let c = a || b;
        // console.log(c)

        // let sex = prompt('請輸入性別');
        // if (!sex) {
        //     sex = '保密';
        // }
        // console.log(sex);

        // 不同的語言是不一樣的，js的短路運算可以回傳資料，php的會回傳布林值
        // let sex = prompt('請輸入性別') || '保密';
        // console.log(sex);

        // function star(num) {
        //     // repeat字串重復
        //     return '*'.repeat(num || 5);
        // }
        // console.log(star(3));
        // console.log(star()); // 不傳入num的話，num是undefined

        // function star(num = 6) {
        //     return '*'.repeat(num);
        // }
        // console.log(star()); 
    </script>
</body>

</html>

網站協議接受驗證：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

    <form action="#" id="form">
        用戶名：<input type="text" name="user"><br>
        <input type="checkbox" name="copyright" id="">接受協議<br>
        <button type="submit">提交</button>
    </form>

    <script>
        function query(el) {
            return document.querySelector(el);
        }
        query('#form').addEventListener('submit', function (event) {
            let user = query('[name=user]').value.trim(); // trim去除值兩邊的空白
            let copyright = query('[name=copyright]').checked;
            // console.log(user, copyright);
            if (!user || !copyright) {
                event.preventDefault();// 阻止默認事件
                alert('請填寫用戶名并接受協議~');
            }

        });
    </script>
</body>

</html>

使用if else 判斷密碼強度：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <input type="password" name="pwd">
    <span id="msg"></span>

    <script>

        // 只有一行陳述句的話，花括號可以省略
        // if (true) {
        //     console.log(1);
        // }

        // if (true) console.log(2);

        // if (false) console.log(1);
        // console.log(2);

        // let a = 2;
        // if (a == 1) {
        //     console.log(1);
        // } else {
        //     console.log('==');
        // }

        let span = document.querySelector('#msg');
        document.querySelector('[name=pwd]').addEventListener('keyup', function () {
            let msg = '', length = this.value.length;
            if (length > 10) {
                msg = '密碼無敵安全~';
            } else if (length > 6) {
                msg = '密碼強度中等~';
            } else {
                msg = '密碼強度太弱啦';
            }
            span.innerHTML = msg;
        });
    </script>
</body>

</html>

三元運算式真的好可愛：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

    <script>
        // 三元運算子的嵌套
        // let a = 2 ? (5 ? 'haha' : 'jj') : 3;
        // console.log(a);

        function div(options = {}) {
            let div = document.createElement('div');
            div.style.width = options.width ? options.width : '100px';
            div.style.height = options.height ? options.height : '100px';
            div.style.backgroundColor = options.bgcolor ? options.bgcolor : 'pink';
            document.body.appendChild(div);
        }
        div();
        div({ width: '50px', height: '50px', bgcolor: '#abcdef' });
    </script>
</body>

</html>

switch使用注意事項：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

    <script>
        // let name = 'cyy';
        // switch (name) {
        //     case 'cc':
        //         console.log('cc');
        //         break;
        //     case 'dd':
        //         console.log('dd');
        //         break;
        //     default:
        //         console.log('cyy');
        // }

        // 多個case存在相同的操作
        // let name = 'ee';
        // switch (name) {
        //     case 'cc':
        //     case 'dd':
        //         console.log('cc');
        //         break;
        //     case 'ee':
        //     default:
        //         console.log('cyy');
        // }

        // switch 和 case里可以填寫條件運算式
        function age(age) {
            switch (true) {
                case age > 60:
                    console.log('老年');
                    break;
                case age > 40:
                    console.log('中年');
                    break;
                case age > 20:
                    console.log('青年');
                    break;
                default:
                    console.log('少年');
                    break;
            }
        }
        age(18);
    </script>
</body>

</html>

while回圈控制：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

    <script>
        // document.write(`<table border="1" width="100%">`);

        // let tr = 5;
        // while (tr-- != 0) {
        //     document.write(`<tr>`);

        //     let td = 3;
        //     while (td-- != 0) {
        //         document.write(`<td>${td}</td>`);
        //     }

        //     document.write(`</tr>`);
        // }

        // document.write('</table>');



        function tables(options = { tr: 5, td: 3 }) {
            document.write(`<table border="1" width="100%">`);

            let tr = options.tr;
            while (tr-- != 0) {
                document.write(`<tr>`);

                let td = options.td;
                while (td-- != 0) {
                    document.write(`<td>${td}</td>`);
                }

                document.write(`</tr>`);
            }

            document.write('</table>');
        }
        tables();
        document.write('<hr/>');
        tables({ tr: 10, td: 5 });
    </script>
</body>

</html>

do while回圈實體操作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

    <script>
        // while 條件成立則執行，條件不成立則不執行
        // while(false){
        //     console.log(11);
        // }

        // do while先執行一次，再判斷條件是否成立；成立則繼續，不成立則停止
        // do {
        //     console.log(1);
        // } while (false);

        // let start = 0;
        // do {
        //     let n = 0;
        //     do {
        //         document.write('*');
        //     } while (++n <= start);
        //     document.write('<br/>');
        // } while (++start <= 5);


        function star(row = 3) {
            let start = 0;
            do {
                let n = 0;
                do {
                    document.write('*');
                } while (++n <= start);
                document.write('<br/>');
            } while (++start <= row);
        }
        star();
        document.write('<hr/>');
        star(10);
    </script>
</body>

</html>

使用for回圈列印楊輝三角：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <style>
        span {
            color: white;
        }
    </style>
    <script>
        // for (let i = 0; i < 10; i++) {
        //     console.log(i);
        // }

        // for (let i = 0; i < 10; i++) {
        //     for (j = 0; j < i; j++) {
        //         document.write('*');
        //     }
        //     document.write('<br/>');
        // }


        // for (let i = 0; i < 5; i++) {
        //     for (let j = 5 - i; j > 0; j--) {
        //         document.write('<span>*</span>');
        //     }
        //     for (let m = 2 * i - 1; m > 0; m--) {
        //         document.write('*');
        //     }
        //     document.write('<br/>');
        // }

        function hd(row = 5) {
            for (let i = 0; i < row; i++) {
                for (let j = row - i; j > 0; j--) {
                    document.write('<span>*</span>');
                }
                for (let m = 2 * i - 1; m > 0; m--) {
                    document.write('*');
                }
                document.write('<br/>');
            }
        }
        hd(10);
    </script>
</body>

</html>

beark continue與label標簽的使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <script>
        // for (let i = 1; i <= 10; i++) {
        //     if (i % 2) continue; // 奇數，跳出本次回圈，不列印
        //     console.log(i);
        // }

        // for (let i = 1; i <= 10; i++) {
        //     if (i % 2) break;
        //     console.log(i);
        // }

        // 列印3個奇數
        // let count = 0;
        // for (let i = 1; i <= 10; i++) {
        //     if (i % 2) {
        //         if (count++ == 3) {
        //             break;
        //         }
        //         console.log(i);
        //     }

        // }

        // cyy: for (let i = 1; i <= 10; i++) {
        //     if (i % 2) continue cyy;
        //     console.log(i);
        // }

        // cyy1: for (let i = 0; i < 10; i++) {
        //     cyy2: for (let j = 0; j < 10; j++) {
        //         if (j % 2) {
        //             console.log(i, j);
        //         }


        //         if (i + j >= 5) {
        //             break; // 默認跳出當前回圈，外層回圈還會繼續
        //         }
        //     }
        // }

        // cyy1: for (let i = 0; i < 10; i++) {
        //     cyy2: for (let j = 0; j < 10; j++) {
        //         if (j % 2) {
        //             console.log(i, j);
        //         }


        //         if (i + j >= 5) {
        //             break cyy1; // 跳出兩層回圈
        //         }
        //     }
        // }


    </script>
</body>

</html>

for-in與for-of使用方法：

for-of主要用于迭代物件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
    ul {
        list-style: none;
    }

    li {
        width: 200px;
        height: 50px;
        border: 1px solid #ddd;
    }
</style>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        let news = [
            { title: 'title1', id: 1 },
            { title: 'title2', id: 2 },
            { title: 'title3', id: 3 }
        ];

        document.write(`
            <table border="1" width="100%">
                <thead>
                    <tr><th>課程名</th><th>課程編號</th></tr>
                    </thead>
        `);

        // for (let k in news) {
        //     document.write(`
        //         <tr>
        //             <td>${news[k].title}</td>
        //             <td>${news[k].id}</td>
        //         </tr>
        //     `);
        // }
        for (let i of news) {
            document.write(`
                <tr>
                    <td>${i.title}</td>
                    <td>${i.id}</td>
                </tr>
            `);
        }

        document.write(`</table>`);


        // let arr = ['a', 'b', 'c'];
        // for (let k in arr) {
        //     console.log(arr[k]);
        // }

        // let arr = ['a', 'b', 'c'];
        // for (let i of arr) {
        //     console.log(i);
        // }

        // for (let k in window) {
        //     console.log(window[k]);
        // }

        // for (let i of window) {
        //     console.log(i);
        // }

        // 字串也有迭代物件
        // for (let i of 'cyy') {
        //     console.log(i);
        // }

        let lis = document.querySelectorAll('li');
        // console.log(lis.length);
        for (const li of lis) {
            console.log(li);
            li.addEventListener('click', function () {
                this.style.backgroundColor = "red";
            });
        }
    </script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/215648.html

標籤：JavaScript

上一篇：Python Flask Paginate資料分頁插件(bootstrap4支持)

下一篇：JavaScript執行模型筆記