2. 程式人生 > 實用技巧 >【JavaWeb】JavaScript 基礎

【JavaWeb】JavaScript 基礎

阿新 • • 發佈：2020-12-14

JavaScript 基礎

事件

事件是指輸入裝置與頁面之間進行互動的響應。

常用的事件：

  • onload 載入完成事件：頁面載入完成之後，常用於頁面 js 程式碼初始化操作；
  • onclick 單擊事件：常用於按鈕的點選響應操作；
  • onblur 失去焦點事件：常用於輸入框失去焦點後驗證其輸入內容是否合法；
  • onchange 內容發生改變事件：常用於下拉列表和輸入框內容發生改變後操作；
  • onsubmit 表單提交事件：常用於表單提交前，驗證所有表單項是否合法。

事件的註冊（繫結）：告訴瀏覽器，當事件響應後需要執行哪些操作程式碼。分為兩種型別：

  • 靜態註冊事件：通過 html 標籤的事件屬性直接賦予事件響應後的程式碼；
  • 動態註冊事件：先通過 js 程式碼得到標籤的 DOM 物件，然後再通過 物件.事件名 = funciton() {} 這種形式賦予事件響應後的程式碼。基本步驟：
    • 獲取標籤 DOM 物件
    • 物件.事件名 = funciton() {}

onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload 載入完成事件</title>
    <script type="text/javascript">
        // 靜態註冊
        function onLoadFun() {
            alert("靜態註冊 onload 事件");
        }

        // 動態註冊
        window.onload = function () {
            alert("動態註冊 onload 事件");
        }
    </script>
</head>
<!--onload 事件是瀏覽器解析完頁面之後就會自動觸發的事件-->
<body onload="onLoadFun()">

</body>
</html>

onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onclick 單擊事件</title>
    <script type="text/javascript">
        function onClickFun() {
            alert("靜態註冊 onclick 事件");
        }

        window.onload = function () {
            // 1.
            let btnObj = document.getElementById("btn02");
            // 2.
            btnObj.onclick = function () {
                alert("動態註冊 onclick 事件");
            }
        }
    </script>
</head>
<body>

    <button onclick="onClickFun()">按鈕1</button>
    <button id="btn02">按鈕2</button>

</body>
</html>

onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur 失去焦點事件</title>
    <script type="text/javascript">
        // console 是控制檯物件，是由 JavaScript 語言提供，專門用來向瀏覽器的控制器列印輸出， 用於測試使用
        function onBlurFun() {
            console.log("靜態註冊 onblur 事件");
        }

        window.onload = function () {
            let element = document.getElementById("password");
            element.onblur = function () {
                console.log("動態註冊 onblur 事件");
            }
        }
    </script>
</head>
<body>

    <table>
        <tr>
            <th>使用者名稱</th>
            <th><input type="text" onblur="onBlurFun()"></th>
        </tr>
        <tr>
            <th>密碼</th>
            <th><input type="password" id="password"></th>
        </tr>
    </table>

</body>
</html>

onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange 內容發生改變事件</title>
    <script type="text/javascript">
        function onChangeFun() {
            alert("最喜歡的程式語言已變化！")
        }

        window.onload = function () {
            let tools = document.getElementById("tools");
            tools.onchange = function () {
                alert("最喜歡的開發工具已變化！")
            }
        }

    </script>
</head>
<body>

    <label>
        請選擇你最喜歡的程式語言：
        <select onchange="onChangeFun()">
            <option>Java</option>
            <option selected="selected">Python</option>
            <option>JavaScript</option>
            <option>C++</option>
        </select>
    </label>

    <br>

    <label for="tools">請選擇你最喜歡的開發工具：</label><select id="tools">
        <option>IDEA</option>
        <option>VSCode</option>
        <option>Vim</option>
        <option>GitHub</option>
    </select>

</body>
</html>

onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit 表單提交事件</title>
    <script type="text/javascript">
        function onSubmitFun() {
            // 要驗證所有表單項是否合法，如果，有一個不合法就阻止表單提交
            alert("靜態登錄檔單提交事件 - 發現不合法");
            return false;
        }

        window.onload = function () {
            let form1 = document.getElementById("form1");
            form1.onsubmit = function () {
                alert("靜態登錄檔單提交事件 - 發現合法");
                return true;
            }

        }
    </script>
</head>
<body>

    <!--return false 可以阻止 表單提交 -->
    <form action="http://localhost:8080" method="get" onsubmit="return onSubmitFun()">
        <input type="submit" name="submit" value="靜態註冊">
    </form>
    <form action="http://localhost:8080" method="post" id="form1">
        <input type="submit" name="submit" value="動態註冊">
    </form>

</body>
</html>

DOM

DOM（Document Object Model），即文件物件模型。它把 HTML 文件中的標籤，屬性，文字等轉換成物件來管理。

Document 物件：

對 Document 物件的理解：

  • Document 它管理了所有的 HTML 文件內容；
  • Document 是一種樹結構的文件，有層級關係；
  • Document 把所有的標籤都物件化。
<body>
    <div id="div01">div01</div>
</body>

以上的 html 標籤物件化，相當於：

class DOM {
    private String id;  // id 屬性
    private String tagNmae; // 標籤名
    private DOM parentNode; // 父節點
    private List<DOM> childrens;    // 孩子節點
    private String innerHTML;   // 起始標籤和結束標籤中間的內容
}

Document 物件的常用方法：

  • document.getElementById(elementId) 通過標籤的 id 屬性查詢標籤的 DOM 物件引用，elementId 是標籤的 id 屬性值；
  • document.getElementsByname(elementName) 通過標籤的 name 屬性查詢標籤的 DOM 物件集合，elementName 是標籤的 name 屬性值；
  • document.getElementsByTagName(tagName) 通過標籤名查詢標籤 DOM 物件集合，tagName 是標籤名；
  • document.createElement(tagName) 通過給定的標籤名，建立一個標籤物件，tagName 是要建立的標籤名。

注意：Document 物件的三個查詢方法，如果有 id 屬性，優先使用 getElementById 方法來進行查詢。如果沒有 id 屬性，則優先使用 getElementsByName 方法來進行查詢。如果 id 屬性和 name 屬性都沒有最後再按標籤名來進行查詢 getElementsByTagName。而且，一定要在頁面載入完成之後執行，才能查詢到標籤物件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById 方法示例</title>
    <style type="text/css">
        img {
            width: 18px;
            height: 18px;
        }
    </style>
    <script type="text/javascript">
        // 當用戶點選了較驗按鈕，要獲取輸出框中的內容。然後驗證其是否合法。
        // 驗證的規則是：必須由字母，數字。下劃線組成。並且長度是 5 到 12 位。
        function onClickFun() {
            let username = document.getElementById("username");
            let usernameText = username.value;

            // 正則表示式
            let pattern = /^\w{5,12}$/;

            let usernameSpan = document.getElementById("usernameSpan");
            usernameSpan.innerHTML = "Hello World!";

            if (pattern.test(usernameText)) {
                // usernameSpan.innerHTML = "使用者名稱合法！";
                usernameSpan.innerHTML = "<img src=\"../img/right.png\" alt=\"資源不存在\">";

            } else {
                // usernameSpan.innerHTML = "使用者名稱不合法！";
                usernameSpan.innerHTML = "<img src=\"../img/wrong.png\" alt=\"資源不存在\">";
            }
        }
    </script>
</head>
<body>

    <label for="username">使用者名稱：</label><input type="text" id="username" value="xxx"/>
    <button onclick="onClickFun()">校驗</button>
    <span id="usernameSpan" style="color: red">

    </span>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByName 方法示例</title>
    <script type="text/javascript">
        // 實現 全選 全不選 反選
        // document.getElementsByName() 是根據 指定的 name 屬性查詢返回多個標籤物件集合
        // 這個集合的操作跟陣列一樣，集合中每個元素都是 dom 物件
        let lang = document.getElementsByName("lang");

        function checkAll() {
            for (let i = 0; i < lang.length; i++) {
                lang[i].checked = true;
            }
        }

        function checkNo() {
            for (let i = 0; i < lang.length; i++) {
                lang[i].checked = false;
            }
        }

        function checkReverse() {
            for (let i = 0; i < lang.length; i++) {
                lang[i].checked = !lang[i].checked;
            }
        }
    </script>
</head>
<body>

    喜歡的程式語言：
    <label>
        <input type="checkbox" name="lang" value="java" checked="checked">
    </label>Java
    <label>
        <input type="checkbox" name="lang" value="cpp">
    </label>C++
    <label>
        <input type="checkbox" name="lang" value="python">
        Python
    </label>
    <label>
        <input type="checkbox" name="lang" value="js">
        JavaScript
    </label>

    <br>

    <button onclick="checkAll()">全選</button>
    <button onclick="checkNo()">全不選</button>
    <button onclick="checkReverse()">反選</button>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName 方法示例</title>
    <script type="text/javascript">
        let lang = document.getElementsByTagName("input");

        function checkAll() {
            for (let i = 0; i < lang.length; i++) {
                lang[i].checked = true;
            }
        }

        function checkNo() {
            for (let i = 0; i < lang.length; i++) {
                lang[i].checked = false;
            }
        }

        function checkReverse() {
            for (let i = 0; i < lang.length; i++) {
                lang[i].checked = !lang[i].checked;
            }
        }
    </script>
</head>
<body>

喜歡的程式語言：
<label>
    <input type="checkbox" name="lang" value="java" checked="checked">
</label>Java
<label>
    <input type="checkbox" name="lang" value="cpp">
</label>C++
<label>
    <input type="checkbox" name="lang" value="python">
    Python
</label>
<label>
    <input type="checkbox" name="lang" value="js">
    JavaScript
</label>

<br>

<button onclick="checkAll()">全選</button>
<button onclick="checkNo()">全不選</button>
<button onclick="checkReverse()">反選</button>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createElement 方法示例</title>
    <script type="text/javascript">
        window.onload = function () {
            // 使用 js 建立 html 標籤，並顯示在頁面上
            // 標籤內容為 <div> Hello World </div>
            let divObj = document.createElement("div");
            let textNodeObj = document.createTextNode("Hello World");
            divObj.appendChild(textNodeObj);
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

節點的常用屬性和方法：

  • 節點就是標籤物件；
  • getElementsByTagName() 獲取當前節點的指定標籤名孩子節點
  • appendChild( oChildNode) 可以新增一個子節點，oChildNode 是要新增的孩子節點
  • childNodes 獲取當前節點的所有子節點
  • firstChild 獲取當前節點的第一個子節點
  • lastChild 獲取當前節點的最後一個子節點
  • parentNode 獲取當前節點的父節點
  • nextSibling 獲取當前節點的下一個節點
  • previousSibling 獲取當前節點的上一個節點
  • className 用於獲取或設定標籤的 class 屬性值
  • innerHTML 表示獲取/設定起始標籤和結束標籤中的內容
  • innerText 表示獲取/設定起始標籤和結束標籤中的文字

練習和總結

相關推薦

【JavaWeb】JavaScript 基礎

JavaScript 基礎 事件 事件是指輸入裝置與頁面之間進行互動的響應。 常用的事件：

【JavaWeb】jQuery 基礎

jQuery 基礎 介紹 顧名思義，它是 JavaScript 和 查詢，是輔助 JavaScript 開發的類庫。

【JavaWeb】現代 JavaScript 教程

js_model_tutorial !!待更新 前言 現代 JavaScript 教程的學習筆記，它是一份不錯的學習資源，感謝開源。

【JavaWeb】HTML&CSS 基礎

HTML&CSS 基礎 HTML 基礎 HTML 標籤 HTML標題：HTML 標題（Heading）是通過 h1 - h6 等標籤進行定義的。

【DOM】JavaScript DOM-事件基礎-節點操作-屬性操作-建立元素-增刪改查

技術標籤：JavaScript高階javascriptjs 文章目錄 1. DOM1.1 DOM簡介1.2 DOM樹 2. 獲取元素2.1 經典2.1.1 getElementById2.1.2 getElementsByTagName

【JavaWeb】【JSP】【Bean】JavaBean基礎使用方法與操作步驟

【JavaWeb】【JSP】【Bean】JavaBean基礎使用方法與操作步驟 學習JavaBean JavaBean基礎使用方法與操作步驟

【JS】JavaScript語句和宣告之let,const

let 語句宣告一個「塊級作用域」的本地變數，且可選地將其初始化為一個值。

【TypeScript】01 基礎入門

前提：使用TypeScript你需要安裝NodeJS支援 然後安裝TypeScript： npm intsall -g typescript

【C++】類-基礎知識

類-基礎知識 目錄類-基礎知識1. 語法定義2. 類的實現3. 三個基本的函式3.1 建構函式功能形式呼叫時機預設建構函式3.2 複製建構函式功能形式呼叫時機3.3 解構函式4. 類組合概念設計例項：線段類

【轉】JavaScript ArrayBuffer淺析

時隔一年半，再次來到部落格園。回首剛接觸前端時所寫的兩篇隨筆，無法直視啊~

【工具】LaTex 基礎

LaTex 基礎 LaTeX 簡介 高德納為了讓他的鉅著《計算機程式設計藝術》排版更精美髮明瞭 TeX，與 Markdown 類似，有程式語言的味道。

【工具】Markdown 基礎

Markdown 基礎 標題 在 Markdown 中，共有六級標題。# 一級標題，每增加一個#號，標題字號降低一級。

【工具】Git 基礎

Git 基礎 Git 簡介 Git 是一個開源的分散式版本控制系統，用於高效地管理任何或小或大的專案。

個人部落格 Django 評論模組開發總結【四】JavaScript邏輯，請求渲染校驗資料

JavaScript邏輯，請求渲染校驗資料 個人網站開通評論了 https://www.charmcode.cn/article/2020-07-09_Comment

【面試】Java基礎03

【面試】Java基礎03 針對網上提出的常見的Java基礎面試題，在此做下學習筆記，方便後續複習檢視：

【HTML5】HTML5基礎

HTML HTML –pre、font、特殊字元、列表、color屬性、width/meta/target屬性 文字相關：

【CSS3】CSS3基礎

CSS3 CSS3 –行內樣式、內聯樣式、外聯樣式、選擇器型別 C(cascade)SS(StyleSheet) 級聯樣式表

【Servlet】Servlet基礎、實戰

Servlet 1).TomCat伺服器 常見軟體伺服器產品: tomcatapache提供,java程式碼編寫.(執行以來jvm環境);

【面試】Java基礎04

【面試】Java基礎04 針對網上提出的常見的Java基礎面試題，在此做下學習筆記，方便後續複習檢視：

【面試】Java基礎05

【面試】Java基礎05 針對網上提出的常見的Java基礎面試題，在此做下學習筆記，方便後續複習檢視：