JavaScript學習筆記

JavaScript學習筆記

在head标簽中，或者body标簽中，使用script标簽來書寫JavaScript代碼

使用script标簽引入單獨的JavaScript代碼檔案

注意：script标簽可以用來定義js代碼，也可以用來引用js檔案，但是兩個功能隻能二選一，不能同時使用兩個功能

JavaScript的變量類型

數值類型：number

字元串類型：string

對象類型：object

布爾類型：boolean

函數類型：function

JavaScript裡特殊的值：

undefined：未定義，所有JavaScript變量未賦予初始值的适合，預設值都是undefined

null：空值

NAN：全稱是 Not a Number，非數字，非數值。

JavaScript中定義變量的格式：

var 變量名；

var 變量名 = 值；

等于：== 等于是簡單的做字面值的比較

全等于：=== 除了做字面值的比較之外，還會比較兩個變量的資料類型

且運算：&&

或運算：||

取反運算：！

在JavaScript語言中，所有的變量，都也可作為一個boolean類型的變量去使用。

0，unll，undefined，""(空串) 都認為是false

與Java不太相同的地方：

&&運算：有兩種情況

第一種：當表達式全為真的時候，傳回最後一個表達式的值

第二種：當表達式中，有一個為假的時候，傳回第一個為假的表達式的值

||運算：有兩種情況

第一種：當表達式全為假時，傳回最後一個表達式的值

第二種：隻要有一個表達式為真，就會傳回第一個為真的表達式的值

JavaScript中數組的定義：

格式：const 數組名 = []; //空數組

​ const 數組名 = [1, 'abc', true]; //定義數組同時指派元素

在JavaScript語言中，若要定義帶有傳回值的函數，隻需要在函數體内直接使用return語句傳回值即可

JavaScript不允許函數重載。相同的函數名，最後一次的定義會覆寫掉之前所有的同名定義

即在function函數中不需要定義，但卻可以直接用來擷取所有參數的變量。我們管它叫做隐形參數，隐形參數特别像Java基礎的可變長參數一樣。

<code>public void fun(Objevt...args)；</code>可變長參數其實是一個數組

那麼JavaScript中的隐形參數也跟Java的可變長參數一樣，操作類似數組

對象的定義：

對象的通路：

​ <code>變量名.屬性名/函數名();</code>

注意：對象内的成員的定義用逗号隔開，最後一個成員不用加逗号，和sql語句類似

​ <code>變量名.屬性/函數名();</code>

電腦輸入裝置與頁面進行互動的響應，我們稱之為事件

常用的事件：

​ onload 加載完成事件：頁面加載完成之後，常用于做頁面js代碼初始化操作

​ onclick 單擊事件：常用于按鈕的點選響應操作

​ onblur 失去焦點事件：常用于輸入框失去焦點後驗證其輸入内容是否合法

​ onchange 内容發生改變事件：常用于下拉清單和輸入框内容發生改變後操作

​ onsubmit 表單送出事件：常用于表單送出前，驗證所有表單項是否合法

事件的注冊又分為靜态注冊和動态注冊兩種：

​ 事件的注冊（綁定）：告訴浏覽器，當事件響應後要執行哪些操作代碼

靜态注冊事件：通過html标簽事件屬性直接賦予事件響應後的代碼，這種方式我們叫靜态注冊

動态注冊事件：先通過js代碼得到标簽的dom對象，然後再通過 <code>dom對象.事件名 = function(){}</code>這種形式賦予事件響應後的代碼，這種方式我們叫動态注冊。

​ 動态注冊基本步驟：

DOM全稱是Document Object Model 文檔對象模型

通俗來說，就是把文檔中的标簽，屬性，文本轉換為對象來管理

Document對象的了解：

Document它管理了所有的HTML文檔内容

document它是一種樹結構的文檔，有層級關系

它讓我們把所有的标簽都對象化

我們可以通過document通路所有的标簽對象

舉例說明html标簽對象化

document.getElementById(elementId)

通過标簽的id屬性查找dom對象，elementId是标簽的id屬性值

document.getElementsByName(elementName)

根據指定的name屬性查詢傳回多個标簽對象集合，集合中都是dom對象，集合中的元素順序是他們在html頁面中從上到下的順序，elementName是标簽的name屬性值

document.getElementsByTagName(tagName)

按照指定标簽名查詢并傳回集合，集合的操作和數組一樣，集合中都是dom對象，集合中的元素順序是他們在html頁面中從上到下的順序，tagName是标簽名

document.createElement(tagName)

通過給定的标簽名，建立一個标簽對象，tagName是要建立的标簽名

注意：document對象的三個查詢方法，如果有id屬性，優先使用getElementById方法進行查詢；如果沒有id屬性，則優先使用getElementsByName方法進行查詢；如果既沒有id屬性，也沒有name屬性，s則使用getElementsByTagName方法進行查詢。以上三個方法，一定要在頁面加載完成之後執行，才能查詢到标簽對象

簡單來說，節點就是标簽對象（不嚴謹，但是夠用了）

方法：

getElementsByTagName()：通過具體的元素節點調用， 擷取目前節點的指定标簽名孩子節點

appendChild(oChildNode)：可以添加一個子節點，oChildNode是要添加的孩子節點

屬性：

childNodes：擷取目前節點的所有子節點

firstChild：擷取目前節點的第一個子節點

lastChild：擷取目前節點的最後一個子節點

parentNode：擷取目前節點的父節點

nextSibling：擷取目前節點的下一個節點

previousSibling：擷取目前節點的上一個節點

className：用于擷取或設定标簽的class屬性值

innerHTML：表示擷取/設定其實标簽和結束标簽中的内容

innerText：表示擷取/設定起始标簽和結束标簽中的文本