本筆記基於2020-02-26 尚硅谷最新版JavaWeb全套教程

https://www.bilibili.com/video/BV1Y7411K7zz

Web前端三劍客

HTML(超文本標記語言):負責網頁的結構
CSS(層疊樣式表):負責網頁的樣式(比如顏色/字體/邊框等屬性設置)
JavaScript(腳本語言):負責網頁的行為(點擊/輸入輸出/滾動等等)

他前端的課程幾乎都是過眼了解的程度而已，我也就沒做詳盡的筆記了

HTML

用標籤表示語法，有幾點特性:
- 標籤無視大小寫
- 標籤要正確閉合
- 標籤不可嵌套使用
- 標籤中的屬性必須有值，屬性值必須加引號

<!-- 註釋 -->
<標籤名>封裝的數據</標籤名>

<!--屬性必須有值，屬性值必須加引號 -->
正確：<font color="blue">Hello world</font>

<!--標籤的演示
div 標籤 預設獨佔一行
span 標籤 它的長度是封裝資料的長度
p 段落標籤 預設會在段落的上方或下方各空出一行來（如果已有就不再空）
-->
<div>div 標籤 1</div>
<div>div 標籤 2</div>
<span>span 標籤 1</span>
<span>span 標籤 2</span>
<p>p 段落標籤 1</p>
<p>p 段落標籤 2</p>

<!-- 圖片 -->
<img src="1.jpg" width="200" height="260" border="1" alt="無法顯示圖片時顯示的文字"/>

<!-- 超連結 -->
<a href="http://localhost:8080">超連結</a>
<a href="http://localhost:8080" target="_blank">新開超連結</a><br/>

<!-- 表單與表格
	<tr>是橫的一行
		<td>是一行中有幾個項目
-->
<form action="http://localhost:8080" method="post">
    <input type="hidden" name="action" value="login" />
    <h1 align="center">用戶註冊</h1>
    <table align="center">
        <tr>
            <td> 用戶名稱：</td>
            <td>
                <input type="text" name="username" value="預設值"/>
            </td>
        </tr>
        <tr>
            <td> 使用者密碼：</td>
            <td><input type="password" name="password" value="abc"/></td>
        </tr>
        <tr>
            <td>性別：</td>
            <td>
                <input type="radio" name="sex" value="boy"/>男
                <input type="radio" name="sex" checked="checked" value="girl" />女
            </td>
        </tr>
        <tr>
            <td> 興趣愛好：</td>
            <td>
                <input name="hobby" type="checkbox" checked="checked" value="java"/>Java
                <input name="hobby" type="checkbox" value="js"/>JavaScript
                <input name="hobby" type="checkbox" value="cpp"/>C++
            </td>
        </tr>
        <tr>
            <td>國籍：</td>
            <td>
                <select name="country">
                    <option value="none">--請選擇國籍--</option>
                    <option value="cn" selected="selected">中國</option>
                    <option value="usa">美國</option>
                    <option value="jp">日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我評價：</td>
            <td><textarea name="desc" rows="10" cols="20">我才是預設值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>

CSS

引用

引用css的方法有3種如下:

<!-- 可以直接插在html中某標籤塊使用，不建議 -->
<div style="border: 1px solid red;">div 1</div>

<!-- 在html的head中宣告這份html的css樣式，不建議 -->
<style type="text/css">
div{
border: 1px solid red;
}
</style>

<!-- 在html的head中宣告要引用的css檔案與路徑，建議用法 -->
<head>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
    ...

選擇器

就是決定誰要被這個css修飾

<!-- 選擇器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 選擇器</title>
    <style type="text/css">
        div{
            /* 標籤選擇器，套用到所有該類標籤 */
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }

        #id002{
            /* id選擇器，比如下面<body>區塊有
            對應的<div id="id002">div 標籤 2</div>
            指定去修飾它，一個id只能對應一個
            */
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }

        .class01{
            /* 類選擇器，同理需存在某類，例如
            <span class="class01">span 標籤class01</span>
            指定修飾這些類
             */
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }

        .class02 , #id01{
            /* 組合選擇器，可以讓多個選擇器共用某種css款式 */
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }

    </style>
</head>
<body>
<span class="class01">span 標籤class01</span>
<div id="id002">div 標籤 2</div>
<span class="class02">span 標籤class02</span>
<div id="id01">div 標籤 </div>
</body>

javascript

javascript跟java的關係，大概是蝸牛與牛的關係，簡單說就是沒關係

本來叫LiveScript，後來說看上去像Java所以改名，但我覺得根本是蹭熱度
javascript是弱類型(有大量隱式轉換的規則，讓錯誤不容易發生)、動態(檢查在運行時)語言，寫起來很鬆散奔放，坑也很多

引用

一樣可以直接寫在html中或是引用外部連結

<!DOCTYPE html>
<html lang="en">
<head>
    <title>js</title>
</head>
<body>
<script type="text/javascript">
    // alert 是 JavaScript 語言提供的一個警告框函數。
    // 它可以接收任意類型的參數，這個參數就是警告框的提示資訊
    alert("hello javaScript!");
</script>

<script type="text/javascript" src="abc.js"></script>
</body>

變量

const:常量，必須顯示宣告並賦值，用在識別值(identifier)，不會被重新指定的值，例如const PI = 3.14159
let:用在變數(variable)可能會被重新指定值，例如在迴圈(for loop)中。也可以說較常使用在函式(function)自行定義的區塊(block)中，而不會存在並使用於整個函式(function)中
- 白話:出了{}就沒用
var:在ES6推出let宣告方法後，最弱的變數宣告，人人都能搞它

類型

數值型別:number
字串類型:string
對象類型:object
布林類型:boolean
函數類型:function

無值

undefined:未定義，所有 js變量未賦於初始值的時候，預設值都是 undefined
null:空值
NaN:全稱是Not a Number。非數字、非數值

var a = 12;
var b = "abc";
alert( a * b ); // 結果=NaN

比較

前面說過由於隱式轉換，js在比較方面很多坑要注意

等於:==等於是簡單的做字面值的比較
全等於: ===除了做字面值的比較之外，還會比較兩個變數的資料類型

函數

想返回啥直接寫在return
js中函數可以重載，後定義的覆蓋掉之前的，總之只能有一個有實際功能

function sum(num1, num2) {
    var result = num1 + num2;
    return result;
}

// 調用
alert( sum(100,50) );

// 另一種格式
var fun3 = function (num1, num2) {
    return num1 + num2;
}

alert(fun3(100, 200));

事件

由某種條件觸發後的響應稱為事件

常用事件

onload 載入完成事件:頁面載入完成之後，常用於做頁面 js 代碼初始化操作
onclick 按一下事件:于按鈕的點擊回應操作
onblur 失去焦點事件:用於輸入框失去焦點後驗證其輸入內容是否合法
onchange 內容發生改變事件:用於下拉清單和輸入框內容發生改變後操作
onsubmit 表單提交事件:表單提交前，驗證所有表單項是否合法

註冊

靜態註冊事件:通過 html 標籤的事件屬性直接賦於事件響應後的代碼，這種方式我們叫靜態註冊。
動態註冊事件:是指先通過 js 代碼得到標籤的 dom 物件
- 然後再通過 dom 物件.事件名 = function(){} 這種形式賦於事件回應後的代碼，叫動態註冊
動態註冊基本步驟: 1、獲取標籤物件 2、標籤物件.事件名 = fucntion(){}

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

        // 動態註冊 onclick 事件
        window.onload = function () {
// 1 獲取標籤對象
            /*
            * document 是 JavaScript 語言提供的一個物件（文檔）<br/>
            * get 獲取
            * Element 元素（就是標籤）
            * By 通過。。 由。。經。。。
            * Id id 屬性
            *
            * getElementById 通過 id 屬性獲取標籤物件
            **/
            var btnObj = document.getElementById("btn01");
// alert( btnObj );
// 2 通過標籤對象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("動態註冊的 onclick 事件");
            }
        }


    </script>
</head>
<body>
<!--靜態註冊 onClick 事件-->
<button onclick="onclickFun();">按鈕 1</button>
<button id="btn01">按鈕 2</button>
</body>
</html>

DOM模型

DOM 全稱是 Document Object Model 文檔物件模型
就是把文檔中的標籤，屬性，文本，轉換成為物件來管理

方法

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>Title</title>
    <script type="text/javascript">
        /*
        * 需求：當使用者點擊了檢查按鈕，要獲取輸出框中的內容。然後驗證其是否合法。
        * 驗證的規則是：必須由字母，數位。底線組成。並且長度是 5 到 12 位。
        * 然後根據結果顯示提示文字
        * */
        function onclickFun() {
            // 1 當我們要操作一個標籤的時候，一定要先獲取這個標籤物件。
            var usernameObj = document.getElementById("username");
            // 獲取物件後可以用.value查看值
            var usernameText = usernameObj.value;

            // 如何 驗證 字串，符合某個規則 ，需要使用規則運算式技術
            var patt = /^\w{5,12}$/;
            /*
            * test()方法用於測試某個字串，是不是匹配我的規則 ，
            * 匹配就返回 true。不匹配就返回 false.
            * */

            // 接著要在usernameSpan這個標籤輸出結果，將他看成一個dom物件，寫入
            var usernameSpanObj = document.getElementById("usernameSpan");
            // innerHTML 表示起始標籤和結束標籤中的內容
            // innerHTML 這個屬性可讀，可寫

            if (patt.test(usernameText)) {
            usernameSpanObj.innerHTML = "用戶名合法！";
            } else {
            usernameSpanObj.innerHTML = "用戶名不合法！";
            }
        }
    </script>
</head>
<body>
用戶名：<input type="text" id="username" value="wzg"/>
<span id="usernameSpan" style="color:red;">
</span>
<button onclick="onclickFun()">檢查</button>
</body>
</html>

節點

一個節點就是一個標籤物件

childNodes:獲取當前節點的所有子節點
parentNode:獲取當前節點的父節點
className用於獲取或設置標籤的 class 屬性值
innerHTML:表示獲取/設置起始標籤和結束標籤中的內容
innerText:表示獲取/設置起始標籤和結束標籤中的文本

上次修改於 2022-01-01