JavaScript DOM 程式設計藝術 學習筆記01

KeWen-Du發表於2018-05-12
JavaScript程式設計筆記

JavaScript DOM 程式設計藝術 01

網站查了JavaScript的學習書籍，最終選擇了這本JavaScript DOM 程式設計藝術（第二版），沒辦法，三水校區的圖書館只能借到第二版的。 大概看了四分之一吧，我大概把我學習過程中的一些個人認為比較關鍵的資訊記錄下來，畢竟很多語法和以前學過的語言相同，這部分就不再多說

弱型別語言

JavaScript是一種弱型別語言，無需宣告變數型別，我目前接觸過的弱型別語言有JavaScript和Python，強型別語言有C，Java

陣列宣告

var beatles = new Array(length);
var beatles = new Array();  //不要求一定要宣告元素個數
array[index] = element;  //賦值語句

複製程式碼

陣列可以包含其他陣列，陣列中的任何一個元素都可以把一個陣列作為它的值

var lennon = new Array("John",1940,false);
var beatles = new Array();
beatles[0] = lennon;
複製程式碼

現在，beatles陣列的第一個元素的值就是另一個陣列，此時想獲得lennon陣列的值我們可以通過使用更多的中括號，beatles[0][0]的值就是"John"。

關聯陣列

當我們不得不去記住陣列的每個下標數字代表的含義的時候，JavaScript給出了一種更好的方式可以讓我們去以更可讀的方式去填充陣列。 我們通過在填充陣列時為每一個新元素明確地給出下標的方式來改變這種預設的行為，在為新元素給出下標的時候，不必侷限於整形數字，陣列下標可以是字串：

var lennon = new Array();
lennon["name"] = "John";
lennon["year"] = 1940;
lennon["living"] = false;
複製程式碼

變數拼接

var year = 2005;
var message = "The year is "+year;
複製程式碼

如果把字串和數值拼接在一起，結果將是一個更長的字串。數值將會自動轉換為字串。

建立函式無需宣告函式型別，一致用function宣告

function name(arguments){
    statements;
}
複製程式碼

變數的作用域

變數既可以是全域性的，也可以是區域性的，在討論全域性變數和區域性變數之間的區別時，我們其實是在討論變數的作用於（scope）。

全域性變數VS區域性變數， 區別在於變數宣告是否使用關鍵字var

var tatal=num*num;  //區域性變數
tatal = num*num;  //全域性變數
複製程式碼

物件與例項

例項的建立：

var ben = new Preson;
複製程式碼

物件包括有使用者定義物件，內建物件（JavaScript提供），宿主物件。 使用者定義物件暫時還沒有講到。 內建物件是JavaScript預先定義好的一系列物件。陣列就是一種JS內建物件。當我們用new關鍵字去初始化一個陣列的時候，其實就是在建立一個Array物件的新例項。

var beatles = new Array();
複製程式碼

當需要了解某個陣列有多少個元素的時候，我們利用Array物件的length屬性來獲得這一資訊。

beatles.length;
複製程式碼

JS內建物件其他包括Math物件和Date物件，它們分別提供了很多非常有用的方法供人們與數值和日期打交道。例如，Math物件的round方法可以吧十進位制數值舍入為一個與之最接近的整數。

var num = 7.561;
var num = Math.round(num);
alert(num);
複製程式碼

宿主物件不是由JS語言本身而是由它的執行環境提供的。具體到web應用，這個環境就是各種瀏覽器。由web瀏覽器提供的預定義物件被成為宿主物件。 宿主物件主要包括Form、Image和Element。我們可以通過這些物件獲得關於某給定網頁上的表單、影像和各種表單元素的資訊。

DOM

DOM是document object model（文件物件模型）的首字母縮寫

把網頁中的元素表示為一顆節點樹

JavaScript DOM 程式設計藝術 學習筆記01

節點

文件也是由節點構成的集合

JavaScript DOM 程式設計藝術 學習筆記01

元素節點

DOM的原子是元素節點
元素可以包含其他的元素。事實上，唯一沒有被包含在其他元素裡的唯一元素是<html>元素，它是我們節點樹的根元素。

屬性節點

元素都或多或少地有一些屬性，屬性的作用是對元素做出更具體的描述。例如，幾乎所有的元素都有一個title屬性，而我們可以利用這個屬性對包含在元素裡的東西做出準確的描述：

<p title="a gentle reminder">Don't forget to buy this stuff. </p>
複製程式碼

在DOM中title="a gentle reminder"是一個屬性節點，因為屬性總是被放在起始標籤裡，所以屬性節點總是被包含在元素節點中。 並非所有的元素都包含這屬性，但所有的屬性都會被包含在元素裡。

文字節點

<p>元素包含著文字"Don't forget to buy this stuff."

getElementById()和getElementsByTagName()和getAttribute()

getElementById()這個方法將返回一個與那個有著給定id屬性值的元素節點相對應的物件 getElementsByTagName()方法將返回一個物件陣列，注意是陣列，

document.getElementsByTagName("li")
複製程式碼

這個呼叫將返回一個物件陣列，每個物件分別對應著document物件中的一個列表項（li）元素。 getAttribute()方法不能通過document物件呼叫，我們只能通過一個元素節點物件去呼叫它。
例如，你可以把它與getElementsByTagName()方法結合起來，去查詢每個<p>元素的title屬性：

var paras = document.getElementsByTagName("p")；
for(var i=0;i<paras.length;i++)
    alert()paras[i].getAttribute("title");
複製程式碼

相關文章