JavaScript 深入學習~~我又回來了~~

肆溪發表於2020-11-24
JavaScript

chapter1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chapter1</title>
</head>
<body>
    <input type="button" id="shuchu" value="輸出"></input>
    <input type="button" id="shuru" value="輸入"></input>
    <input type="button" id="huoqu_input" value="innerHTML獲取元素內容"></input>
    <input type="button" value="背景色設為藍色" onclick="color('blue')"></input>
    <input type="button" id="verify_password" value="驗證密碼"></input>
    
    <div id="huoqu">div盒子裡的內容</div>
    <script>
        // 輸出
        document.getElementById('shuchu').onclick = function(){
            document.write('hello');//在頁面輸出
            alert('hello');//在彈窗輸出
            console.log('hello');//在控制檯輸出
        }
        // 輸入
        document.getElementById('shuru').onclick = function(){
            var name = prompt('請輸入你的名字：');
            alert('你的名字是'+name);
            // 或者
            var name = prompt('你的名字是'+ prompt('請輸入你的名字'));
        }
        // 通過innerHTML屬性獲取元素內容
        document.getElementById('huoqu_input').onclick = function(){
            var test = document.getElementById('huoqu');
            alert(test.innerHTML);
        }

        // 建立物件
        str = stu = {};
        // 新增屬性
        stu.name = 'tom';
        stu.gender = '男';
        stu.age = 20;
        // 訪問屬性
        document.write(stu.name + '自我介紹：');
        // 新增方法
        stu.introduce = function (){
            return '我叫' + this.name + '性別為' + this.gender + ',今年' + this.age + '歲';
        };
        // 呼叫方法
        document.write(stu.introduce());
        // 通過函式設定背景色
        function color(str){
            document.body.style.backgroundColor = str;
        }

        // 驗證使用者輸入的密碼
        document.getElementById('verify_password').onclick = function(){
            var password = prompt('請輸入密碼');
            if(password == '123456') {
                alert('密碼輸入正確！');
            }else{
                alert('密碼輸入錯誤！');
            }
        }

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

相關文章