JavaScript

特性

 ① 解釋型語言，JavaScript是一種解釋型的腳本語言，JavaScript是在程式的運行程序中逐行進行解釋，不需要被編譯為機器碼再執行，

 ② 面向物件，JavaScript是一種面向物件的腳本語言，它不僅可以創建物件，也能使用現有的物件，

 ③ 類C和Java的語法，JavaScript的語法結構與C和Java很像，像for、if、while等陳述句和Java的基本上是一模一樣的，

 ④ 簡單，JavaScript語言中采用的是弱型別的變數型別，對使用的資料型別未做出嚴格的要求，是基于Java基本陳述句和控制的腳本語言，

 ⑤ 動態性，所謂的動態性，可以暫時理解為在語言中的一切內容都是不確定的，比如一個變數，這一刻是個整數，下一刻可能會變成字串了，

 ⑥ 跨平臺性，JavaScript腳本語言不依賴于作業系統（Java依賴于JVM），僅需要瀏覽器的支持，

 ⑦ 安全性，JavaScript是不允許直接訪問本地硬碟的，

 構成

• ECMAScript：ECMAScript是一個標準，而這需要由各廠商去實作，

• DOM：JS 中通過 DOM來對 HTML 檔案進行操作，只要理解了DOM就可以隨心所欲的操作 WEB 頁面，

• BOM：要想在瀏覽器中使用 JavaScript，必須使用BOM(瀏覽器物件模型)，BOM提供了很多物件，通過修改這些物件的屬性，呼叫他們的方法，用于控制瀏覽器的各種行為，

基本語法

撰寫位置

JavaScript需要包括在<script>標簽中，這個標簽可以出現在頁面的任何位置，

方式一：撰寫到HTML中<script>標簽中，宣告在head標簽或者body標簽中，一般宣告在head標簽

<script type="text/javascript">
        alert("如果還能重來？");
</script>

方式二：寫在外部的.js檔案中，然后通過script標簽的src屬性引入，

<script type="text/javascript" src="https://www.cnblogs.com/Open-ing/p/script.js"></script>

說明：type屬性 ：默認值 text/javascript可以不寫，不寫也是這個值，

src屬性：使用該屬性指向檔案的地址，可以是相對路徑，也可以是絕對路徑，

特別注意：方式一和方式二不要同時使用，一旦同時使用，會默認執行方式二中js檔案中的js代碼，

識別符號的命名規則

• 由26個英文字母大小寫，0-9，_或 $ 組成，

• 數字不可以開頭，

• 不可以使用關鍵字和保留字，但能包含關鍵字和保留字，

• JavaScript中嚴格區分大小寫，

• 識別符號不能包含空格，

關鍵字

保留字

資料型別

• 基本資料型別（5種）

  • 數值型別：number

  • 字串型別：string

  • 布爾型別：boolean

  • null型：null

  • undefined型（Undefined）

• 物件型別：

  • 函式物件：Function

  • 陣列物件：Array

    • 使用typeof 判斷，結果是Object

  • 一般物件：Object

常量值

• undefined：表示未定義，Undefined型別只有一個值，即特殊的 undefined ，所有的js中的變數在未初始化的時候默認值都是undefined，

  • typeof(undefined)結果是undefined，

• null：表示空值，Null型別只有一個值，即為null，

  • 從語意上看 null表示的是一個空物件，所以使用 typeof檢查 null會回傳一個Object，

  • undefined是由null值衍生出來的，所以undefined和null是否相等，會回傳true，

• NaN：not a number(非數值)，在數學運算中對數值進行計算時，沒有結果回傳，則回傳NaN

• boolean型別：只能取值真(true)或假(false)，

變數的宣告

• 使用var定義即可，比如：var num = 65; var name = "馬大云"；

• 變數宣告時不需要指定型別，可以接受所有的資料型別，

變數的賦值

• 變數在賦值程序中可以接受不同型別的值，比如：var x = 123; x = "atguigu.com";

• 沒有賦值的變數，默認為undefined

• 使用typeof(變數名)，判斷變數的型別

• JS中每一條陳述句以分號(;)結尾，如果不寫分號，瀏覽器會自動添加，但是會消耗一些系統資源，

注釋

• //表示單行注釋

• /* */表示多行注釋

算術運算子

賦值運算子

• 符號：=

• 擴展賦值運算子： +=, -=, *=, /=, %=

關系運算子

• <, >, <=, >=, !=, ==, ===（全等）, !==（不全等）

邏輯運算子

• 邏輯運算子，結果回傳一個布林值，

• 如果進行邏輯運算時，運算元不是布爾型別，則會將其轉換為布爾型別再進行計算，

• && ：與運算

  • 情況一：當運算式全為真的時候，回傳最后一個運算式的值

  • 情況二：當運算式中有一個為假的時候，回傳第一個為假的運算式的值

• ||：或運算
  • 情況一：當運算式全為假時，回傳最后一個運算式的值
  • 情況二：只要有一個運算式為真，就會回傳第一個為真的運算式的值

三元運算子

流程控制

if結構

switch-case

while

for

do-while

break和continue

• break只能用于switch陳述句和回圈陳述句中，

• continue 只能用于回圈陳述句中，

• 二者功能類似，但continue是終止本次回圈，break是終止本層回圈，

• break、continue之后不能有其他的陳述句，因為程式永遠不會執行其后的陳述句

陣列

• 定義一個空陣列：var arr = [] 或 var arr = new Array();

• 定義一個非空陣列：var arr1 = ["Tom","atguigu.com",true];

• 陣列的角標是從0開始的，直接通過角標進行呼叫，比如： alert(arr[0]);

• 通過呼叫陣列的屬性length獲取陣列的長度

• 在JavaScript的陣列中，只要我們通過元素的下標給陣列賦值，js就可以根據賦值的最大下標自動給陣列擴容

函式

• 使用function關鍵字

• 不需要指定回傳值，如果函式有回傳值，只需要在函式體內直接使用return陳述句回傳需要的值即可，

• 不需要指定形參型別（因為js所有型別都使用var來宣告）

• 函式在js中也是一種物件，可以將函式的參考賦值給變數

方式一：

function 函式名(形參串列){
    函式體
}

方式二：匿名函式

var 變數名 = function(形參串列){
    函式體;
}

函式的多載問題

• 注意1：呼叫JavaScript函式時系統不檢查傳入引數的個數和型別，所以js中沒有多載一說

• 注意2：一旦定義了同名不同引數個數的函式以后，后定義的函式會覆寫先前定義的同名的所有函式

隱形引數：arguments

• arguments跟java中的可變形參非常類似，可以傳遞不確定個數的實參到函式中

• 操作arguments和操作陣列一致，也是用來接收傳遞的引數值，

• 可以通過角標獲取指定的引數，遍歷arguments.

• 可以通過arguments的length屬性獲取呼叫函式時傳入的實參的個數，

物件

創建一：

var 變數名 = new Object();//創建一個空的物件實體
變數名.屬性名 = 值;//給創建的物件添加一個屬性
變數名.函式名 = function(){}; //給創建的物件添加一個函式

創建二：

var 變數名 = {          //定義一個空物件
    屬性名1：值1，    //宣告屬性1
    屬性名2：值2，    //宣告屬性2
    函式名:function(){} //宣告函式
};

訪問方式形同

變數名.屬性;
變數名.函式名();

函式也是物件，函式也作為一種資料型別存在，而且是參考資料型別

在JavaScript函式中，this關鍵字指向的是呼叫當前函式的物件，

• JavaScript內置物件

  • Array 、Date、Math、……

• 瀏覽器物件

  • window、location 　　location.href="https://www.cnblogs.com/Open-ing/p/路徑"

• dom物件

  • document、body、button……

事件

• 系統事件：由系統觸發的事件，例如檔案加載完成，

• 用戶事件：用戶操作，例如單擊、滑鼠移入、滑鼠移出等，

常見事件

事件的注冊

 先通過js代碼查找到標簽物件，然后通過 標簽物件.事件名=function(){} 這種形式

window.onload = function(){        //頁面加載完成之后
    //1、查找標簽物件
       var btn= document.getElementById("btn");
    //2、通過標簽物件.事件名 = function(){}
       btn.onclick = function(){}
}

回應函式

 事件觸發后我們要執行的函式稱為回應函式，如何將回應函式與事件關聯起來？我們常使用為事件賦值函式的方式，

步驟一：從檔案物件模型中獲取控制元件物件 [借助DOM API實作]

步驟二：宣告一個事件回應函式

步驟三：將事件回應函式的參考賦值給控制元件物件的事件屬性

取消控制元件默認行為

• 默認行為：某些事件觸發后，系統會有默認的回應處理，如：

  • 超鏈接點擊后會自動跳轉

  • 表單提交點擊后會發送請求

• 取消默認行為的方式：return false; 即在事件回應函式內return false;

JavaScript嵌入方式

瀏覽器加載順序

• 按從上到下的順序加載

• 遇到script標簽先執行腳本程式，執行完成后再繼續加載

window.onload = function(){}

• window物件：代表當前瀏覽器視窗

• onload事件：當整個檔案加載完成后觸發

即在script內先宣告此函式，等頁面檔案全部加載完畢之后在觸發此函式內的回應事件

DOM

Document Object Model：（檔案物件模型）定義了訪問和處理 HTML 檔案的標準方法，目的其實就是為了能讓js操作html元素而制定的一個規范，

HTML DOM 將 HTML 檔案視作樹結構，這種結構被稱為節點樹，

HTML加載完畢，渲染引擎會在記憶體中把HTML檔案，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點，然后操作的時候修改的是該元素的屬性

DOM可以做什么

找物件（元素節點）

設定元素的屬性值

設定元素的樣式

動態創建和洗掉元素

事件的觸發回應：事件源、事件、事件的驅動程式

document物件

• document物件是window物件的一個屬性，代表當前HTML檔案，將這個檔案抽象成了document物件，

• document物件管理了所有的HTML檔案內容，

• 它是包含了整個檔案的樹形結構，有層級關系，

• 它讓我們把所有的標簽都物件化，

• 我們可以通過document訪問所有的標簽物件，

• 獲取document物件的本質方法是：window.document，而“window.”可以省略，

在HTML當中，一切都是節點，所有的節點都是Object，

• 檔案節點(Document)：DOM標準將整個HTML檔案的相關資訊封裝后得到的物件，

• 元素節點(Element)：DOM標準將HTML標簽的相關資訊封裝后得到的物件，

• 屬性節點(Attribute)：DOM標準將HTML標簽屬性的相關資訊封裝后得到的物件，

• 文本節點(Text)：DOM標準將HTML文本的相關資訊封裝后得到的物件，

節點的屬性

• nodeName: 代表當前節點的名字，只讀屬性，如果給定節點是一個文本節點，nodeName 屬性將回傳內容為 #text 的字串，

• nodeType：回傳一個整數, 這個數值代表著給定節點的型別，只讀屬性， 1 -- 元素節點 2 -- 屬性節點 3 -- 文本節點

• nodeValue：回傳給定節點的當前值(字串)，可讀寫的屬性，

• 元素節點：回傳值是 null

• 屬性節點： 回傳值是這個屬性的值

• 文本節點： 回傳值是這個文本節點的內容

節點之間的關系指元素節點、和文本節點再加換行節點之間的父子或兄弟關系（標簽內的屬性可通過元素節點操作）

標簽內的屬性直接通過元素節點物件來get、set方法獲取、設定值就可以了，其標簽內的文本值可通過再次獲取其元素節點物件的子節點物件來取值或賦值=

文本節點的父節點是包含它的標簽就是他的父節點

當然W3C考慮換行也是一個節點，多個換行為一個節點

元素節點

獲取DOM節點

通過節點關系獲取都是.屬性

children：非標準屬性，回傳的是指定元素的子元素節點的集合，（用的最多）

• 它只回傳HTML節點，甚至不回傳文本節點，
• 在IE6/7/8中包含注釋節點（在IE678中，注釋節點不要寫在里面），

雖然不是標準的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支持，

子節點陣列 = 父節點.children;   //獲取所有節點，用的最多，

節點操作

上一段的內容：節點的訪問關系都是屬性，

節點的操作都是函式（方法）

屬性節點篇

• 讀取屬性值：元素物件.屬性名

• 修改屬性值：元素物件.屬性名=新的屬性值

  元素節點.getAttribute("屬性名稱");
  元素節點.setAttribute(屬性名, 新的屬性值);
  

  元素節點.removeAttribute(屬性名);【洗掉節點】

文本節點篇

• 獲取文本值三步曲：

  • 獲取文本節點的父節點

  • 獲取父節點的第一個子節點： parentEle.firstChild

  • 獲取文本節點的節點值：parentEle.firstChild.nodeValue

• 常見操作：

  • 讀取文本值：element.firstChild.nodeValue

  • 修改文本值：element.firstChild.nodeValue=新文本值

DOM增刪改API

innerHTML

• 回傳物件的起始位置到終止位置的全部內容，包括HTML標簽，

• 讀取元素內部HTML代碼

  • 元素物件.innerHTML

• 修改元素內部HTML代碼

  • 元素物件.innerHTML=HTML代碼

標籤：JavaScript

上一篇：JavaScript判斷字串中出現次數最多的字符，并統計其次數

下一篇：滾輪滾動事件