Web基礎瞭解版02-JavaScript

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="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="路徑"

• dom對象

  • document、body、button……

事件

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

• 用戶事件：用戶操做，例如單擊、鼠標移入、鼠標移出等。

常見事件

 

函數名	說明
onload	加載完成事件，經常使用於頁面加載完成以後作的一些功能
onclick	單擊事件，經常使用於用戶點擊視圖的時候觸發功能
onblur	失去焦點事件，經常使用於失去焦點的時候觸發功能
onchange	內容發生改變事件，經常使用於下拉列表和文本輸入框內容發生改變時
onsubmit	表單提交事件，經常使用於表單提交事件的時候作一些表單驗證的工做

 

事件的註冊

 先經過js代碼查找到標籤對象。而後經過 標籤對象.事件名=function(){} 這種形式

window.onload = function(){        //頁面加載完成以後
    //一、查找標籤對象
       var btn= document.getElementById("btn");
    //二、經過標籤對象.事件名 = 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節點

功能	API	返回值
根據id值	document.getElementById(「id值」)	一個具體的元素節點
根據標籤名	document.getElementsByTagName(「標籤名」)	元素節點數組
根據name屬性值	document.getElementsByName(「name值」)	元素節點數組
根據class屬性值	document.getElementsByClassName("class值")	元素節點數組

經過節點關係獲取都是.屬性

 

功能	API	返回值
查找指定元素節點的父節點	element.parentNode	節點對象

功能	API	返回值
查找前一個兄弟節點	node.previousSibling【W3C考慮換行，IE≤8不考慮】	節點對象
查找後一個兄弟節點	node.nextSibling【W3C考慮換行，IE≤8不考慮】	節點對象

功能	API	返回值
查找所有子節點	element.childNodes【W3C考慮換行，IE≤8不考慮】	節點數組
查找第一個子節點	element.firstChild【W3C考慮換行，IE≤8不考慮】	節點對象
查找最後一個子節點	element.lastChild【W3C考慮換行，IE≤8不考慮】	節點對象
查找指定標籤名的子節點	element.getElementsByTagName(「標籤名」)	元素節點數組

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

API	功能
document.createElement(「標籤名」)	建立元素節點並返回，但不會自動添加到文檔中
document.createTextNode(「文本值」)	建立文本節點並返回，但不會自動添加到文檔中
element.appendChild(ele)	將ele添加到element全部子節點後面
parentEle.insertBefore(newEle,targetEle)	將newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle)	用新節點替換原有的舊子節點
parentEle.removeChild(childNode)	刪除指定的子節點
element.innerHTML	讀寫起始標籤和結束標籤中的內容
element.innerText	讀寫起始標籤和結束標籤中的文本

innerHTML

• 返回對象的起始位置到終止位置的所有內容，包括HTML標籤。

• 讀取元素內部HTML代碼

  • 元素對象.innerHTML

• 修改元素內部HTML代碼

  • 元素對象.innerHTML=HTML代碼