HTML 學習筆記 JavaScript（簡介）

時間 2019-12-20

標籤 html 學習筆記 javascript 簡介欄目 HTML 简体版

原文原文鏈接

JavaScript 是世界上最流行的編程語言。web

這門語言可用於HTML和web 更可普遍用於服務器、PC、筆記本電腦、平板電腦和智能手機等設備。編程

JavaScript是腳本語言瀏覽器

JavaScript是一種輕量級的編程語言服務器

JavaScript是可插入 HTML頁面的編程代碼編程語言

JavaScript 插入HTML頁面後可由全部的現代瀏覽器執行函數

JavaScript 輸出：測試

<script>
    document.write("<h1>這是標題</h1>");
    document.write("哈哈哈哈哈");
</script>

提示：你只能在HTML輸出中使用document.write() 若是你在文檔加載後使用該方法，會覆蓋整個文檔。ui

JavaScript 對事件做出反應:spa

<body>
        <button id="btn">點我哦</button>
        <script>
//            document.getElementById("btn").addEventListener("click",function(){
//                alert("點擊btn觸發我哦");
//            });
            //添加事件的另外一種方式
            document.getElementById("btn").onclick = function() {
                alert("點解我");
            };
        </script>
</body>

alert()函數在JavaScript中並非很經常使用可是它對於代碼的測試很是方便設計

JavaScript 改變HTML的內容:

<body>
    <p id="fristP">我是第一段文字</p>
    <button id="btn">點我哦</button>
    <script>
        //獲取文檔元素
        var fristP = document.getElementById("fristP");
                document.getElementById("btn").addEventListener("click",function(){
                if (fristP.innerHTML == "我是第一段文字") {
                    fristP.innerHTML = "改變了哦";
                } else{
                    fristP.innerHTML = "我是第一段文字";
                }
            });
            
    </script>
</body>

JavaScript 改變HTML圖像

<body>
        
    <img id="img1" src="img/HBuilder.png" />
    <br />
    <button id="btn">點我哦</button>
    <script>
        //獲取文檔元素
        var ele = document.getElementById("img1");
            document.getElementById("btn").addEventListener("click",changeImage);
            
        function changeImage() {
            ele.src = "img/PHP.png"
        }
            
    </script>
</body>

JavaScript 驗證輸入

    <body>
        
        請輸入數字<input type="text" id="input1" />
        <br />
        <button id="btn">點我哦</button>
        <script>
            
            document.getElementById("btn").addEventListener("click",checkValue);
            
            function checkValue() {
                //獲取文檔元素
                var ele = document.getElementById("input1").value;
                if (ele == "" || isNaN(ele)) {
                    alert("Not Numberic");
                }
            }
            
        </script>
    </body>

提示：JavaScript 與 Java 是兩種徹底不一樣的語言，不管在概念仍是設計上。Java（由 Sun 發明）是更復雜的編程語言。ECMA-262 是 JavaScript 標準的官方名稱。JavaScript 由 Brendan Eich 發明。它於 1995 年出如今 Netscape 中（該瀏覽器已中止更新），並於 1997 年被 ECMA（一個標準協會）採納。