《JavaScript Dom程式設計藝術》讀書筆記(一)

蹦蹦跳跳的小魚人發表於2019-02-16

執行Javascript的方式

第一種方式是將JS程式碼放到 < head > 標籤中的 < script > 標籤之間:

<head>
    <script>
        ....... //JS程式碼放在這
    </script>
</head>

一種更好的方式是將JS程式碼存為一個副檔名為.js的獨立檔案。通過 < head >標籤中的 < script >標籤中的 src 屬性指向該檔案:

<head>
    <script src="text.js"></script>
</head>

但最好的做法是把 < script > 標籤放到 html 文件的最後,< /body > 標籤之前:

<body>
    <script src="text.js"></script>
</body> 

這樣能使瀏覽器更快的載入頁面。

語句

每條語句都以分號結尾,並換行(最好的寫法,容易閱讀,更容易追蹤JS指令碼的執行順序):

first statement;
second statement;

當然也可以放在一行:


first statement;second statement;

註釋

註釋能夠有效的幫助瞭解程式碼流程,必須養成良好的註釋習慣。

JS註釋的3種形式:

  1. //自我提醒,有註釋是好事

  2. /* 自我提醒
    有註釋是好事 */

  3. <!– 自我提醒,有註釋是好事

如果使用 // 作為一行的開始,這一行就會被當成一條註釋:

// 自我提醒,有註釋是好事

如果使用這種註釋方式,就必須在每個註釋行的開頭加上兩個斜線,下面這種的寫法指令碼就會出現問題:

// 自我提醒
   有註釋是好事
   

必須書寫成類似如下樣式:

// 自我提醒
// 有註釋是好事

如果打算註釋多行,可以通過 /* */ 來完成:

/* 自我提醒
   有註釋是好事 */
  

這種註釋在需要插入大段註釋時很有用,它可以調高整個指令碼的可讀性。

還可以使用 HTML 風格的註釋,但這種做法僅適用於單行註釋。其實JS直譯器對 “< ! – – ” 的處理與對 // 的處理是一樣的:

<!-- 這是JS中的註釋

如果是在HTML文件中,還需要以 ” – – > ” 來結束註釋:

<!-- 這是HTML中的註釋 -->

但JS不要求這樣做,它會把 ” – – > ” 視為註釋內容的一部分。

注意: HTML 允許上面這種註釋跨越多行,但JS要求這種註釋的每行必須開頭加上 “< ! – – “來作為標誌。

為了避免混淆,最好單行註釋使用 // , 多行註釋使用 /* */

變數

var 稱為變數,js中可以給變數賦值:

mood = "happy";
age = "13"; 

在JS中,如果在對某個變數賦值之前未宣告,賦值操作將自動宣告該變數。雖然JS沒有強制要求必須提前宣告變數,但提前宣告變數是一種良好的程式設計習慣。下面的語句中對變數 mood 和 age做出了宣告:

var mood;
var age;

不必單獨宣告每個變數,也可以用一條語句一次宣告多個變數:

var mood, age;

甚至可以一石二鳥,把宣告變數和對該變數賦值一次完成:

var mood = "happy";
var age = 33;

甚至還可以像下面這樣:

var mood = "happy", age = 33;

像上面這樣的宣告和賦值是最有效率的做法,這一條語句的效果相當於下面這些語句的總和:

var mood, age;
mood = "happy";
age = 33;

JS中,變數和其他語法元素的名字都是區分字母大小寫的。例如下面的語句,是在對兩個不同的變數進行賦值:

var mood = "happy";
Mood = "sad";

JS語法中不允許變數名中包含空格或標點符號(美元符號 ” $ ” 例外)。下面這條語句將導致語法錯誤:

var my mood = "happy";

JS變數名允許包含字母、數字、美元符號和下劃線(但第一個字元不允許是數字)。為了讓比較長的變數名更容易閱讀,可以在變數名中的適當位置插入下劃線:

var my_mood = "happy";

另一種方式是使用駝峰格式,,刪除中間的空白(下劃線),後面的每個新單詞改用大寫字母開頭:


var myMood = "happy";

通常駝峰格式是函式名、方法名和物件屬性名的首選格式。

資料型別

在宣告變數的同時還必須同時宣告變數的資料型別,這種做法稱為型別宣告。

必須明確型別宣告的語言稱為強型別語言。JS不需要進行型別宣告,因此它是一種弱型別語言,可以在任何階段改變變數的資料型別。

以下語句在強型別語言中是非法的,但在JS裡卻完全沒有問題:

var age = "thirety three";
age = 33;

JS並不在意變數age的值是一個字串還是一個數。

字串

字串由零個或多個字元構成。字元包括(但不限於)字母、數字、標點符號和空格。字串必須包在引號裡,單引號或雙引號都可以。下面兩條語句含義完全相同:

var mood = "happy";
var mood = `happy`;

JS中可以隨意選用引號,但最好根據字串包含的字元來選擇。如果字串包含雙引號,就把整個字串放在單引號裡;如果字串包含單引號,就把整個字串放在雙引號裡:

var mood = "don`t ask";

如果想再上門這條語句中使用單引號,就必須保證字元 “n” 和 “t” 之間的單引號能被當成這個字串的一部分。這種情況下這個單引號需要被看做一個普通字元,而不是這個字串的結束標誌。這種情況需要對這個字元進行轉義。在JS中用反斜線對字元進行轉義:

var mood = `don`t ask`;

類似地,如果想用雙引號來包住一個本身就包含雙引號的字串,就必須用反斜線對字串中的雙引號進行轉義:

var height = "about 5`10" tall";

實際上這些反斜線並不是字串的一部分。

需要養成一個良好的程式設計習慣,不管選擇用雙引號還是單引號,在整個指令碼中最好保持一致。如果在同一個指令碼中一會兒使用雙引號,一會兒又使用單引號,程式碼很快就會變得難以閱讀和理解。

數值

給變數賦一個數值,不用限定數值必須為一個整數。JS允許使用帶小數點的數值,並且允許任意位小數,這樣的數稱為浮點數:

var age = 33.25;

也可以使用負數。在有關數值的前面加上一個減號( – )表示它是一個負數:

var temperature = -20;

JS也支援負數浮點數:

var temperature = -20.3333333;

布林值

布林資料只有兩個可選值—— ture 或 false。假設需要這樣一個變數:如果我正在睡覺,這個變數將儲存一個值;如果我沒在睡覺,這個變數將儲存另一個值。可以用字串資料型別把變數賦值為 “sleeping” 或 “not sleeping”。但使用布林資料型別是更好的選擇:

var sleeping = ture;

布林值不是字串,千萬不要把布林值用引號括起來。布林值 false 與 “false”是兩碼事!

下面這條語句將變數設定為布林值ture:

var married = true;

下面這條語句將變數設定為字串“ture”:

var married = "true";

陣列

字串、數值和布林值都是標量。如果某個變數是標量,它在任意時刻就只能有一個值。如果想用一個變數來儲存一組值,就需使用陣列。

陣列是指用一個變數表示一個值的集合,集合中的每個值都是這個陣列的一個元素 (element)。

JS中,陣列可以用關鍵字Array宣告,宣告陣列的同時還可以指定陣列初始元素的個數,也就是這個陣列的長度。例如用名位 beatles 的變數來儲存 Beatles 樂隊全體四位成員的姓名:

var beatles = Array(4);

有時無法預知某個陣列有多少個元素。JS根本不要求在宣告陣列時必須給出元素個數,我們完全可以在宣告陣列時不給出元素個數:

var beatles = Array();

向陣列中新增元素的操作稱為填充。在填充陣列時,不僅需要給新元素的值,還需要給出新元素在陣列中的存放位置,這個位置就是這個元素的下標。陣列裡一個元素配有一個下標。下標必須用方括號括起來:

array[index] = element;

按照 Beatles 樂隊成員的傳統順序(即 John、Paul、George 和 Ringo)進行填充。第一個:

beatles[0] = "John";

用 0 而不是 1 作為第一個下標是JS裡的一條規則。

宣告和填充 beatles 陣列的全過程:

var beatles = Array(4);
beatles[0] = "John";
beatles[1] = "Paul";
beatles[2] = "George";
beatles[3] = "Ringo";

現在可以通過 下標值 “2” ( beatles[2] ) 來獲取元素 “George”。

特別注意, beatles 陣列的長度是 4,但是陣列最後一個元素的下標卻是 3,因為陣列是從 0 開始計數的。

有一種相對簡單的填充方式:在宣告陣列的同時對它進行填充。這種方式要求用逗號把各個元素隔開:

var beatles = array( "John", "Paul", "George", "Ringo" );

上面這條語句會為每個元素自動分配一個下標:第一個下標是 0 ,第二個是 1,依次類推。因此,beatles[2] 仍將對應於取值為 “George” 的元素。

甚至用不著明確地表明我們是在建立陣列。事實上,只需要用一對方括號把各個元素的初始值括起來就可以了:

var beatles = [ "John", "Paul", "George", "Ringo" ];

陣列元素不必非得是字串。可以把一些布林值存入一個陣列,還可以把一組數值存入一個陣列:

var years = [ 1940, 1941, 1942, 1943 ];

甚至可以把這 3 種資料型別混在一起存入一個陣列:

var lennon = [ "John", 1940, false ];

陣列元素還可以是變數:

var name = "John";
beatles[0] = name;

這將把 beatles 陣列的第一個元素賦值為 “John”。

陣列元素的值還可以是另一個陣列的元素。下面兩條語句將把 beatles 陣列的第二個元素賦值為 “Paul”:

var names = [ "Ringo", "John", "Paul", "George" ];
beatles[1] = names[3];

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

var lennon = [ "John", 1940, false ];
var beatles = [];
beatles[0] = lennon;

現在 beatles 陣列的第一個元素的值就是另一個陣列。想要獲取那個陣列裡的某個元素的值,需要使用更多的方括號。 beatles0的值是“John”, beatles0的值是 1940, beatles0的值是 false。

關聯陣列

如果在填充陣列時只給出了元素的值,這個陣列就將使一個傳統陣列,它的各個元素的下標將會自動建立和重新整理。

可以通過在填充陣列時為每個新元素明確地給出下標來改變這種預設的行為。在為新元素給出下標時,不比侷限於使用整數數字。可以使用字串:

var lennon = Array();
lennon["name"] = "John";
lennon["year"] = 1940;
lennon["living"] = false;

這樣的陣列叫做關聯陣列。由於可以使用字串來代替數字值,使程式碼更具有可讀性。這種做法並不是一個好習慣,不推薦使用。理想情況下,不應該修改Array物件的屬性,二應該使用通用的物件( Object )。

物件

物件是自包含的資料集合,包含在物件裡的資料可以通過屬性和方法兩種形式訪問。

  • 屬性是隸屬於某個特定物件的變數

  • 方法是隻有某個特定物件才能呼叫的函式

物件是由一些屬性和方法組合在一起而構成的一個資料實體。

在JS離,屬性和方法都使用 “點” 語法來訪問:

Object.property     //屬性
Object.method()     //方法

假如物件的名字是Person,需要使用物件的屬性必須使用如下記號:

Person.mood
Person.age

假如 Person 物件還關聯著一些諸如 walk() 和 sleep() 之類的函式,這些函式就是這個物件的犯法,需要使用如下記號來訪問:

Person,walk()
Person.sleep()

為了使用 Person 物件來描述一個特定的人,需要建立一個 Person 物件的例項。例項是物件的具體個體。例如你和我都是人,都可以用 Person 物件來描述;但你和我是兩個不同的個體,很可能有著不同的屬性(例如,年齡可能不一樣)。因此,你和我對應這兩個不同的 Person 物件,雖然它們都是 Person 物件,但它們是兩個不同的例項。

為給定物件建立一個新例項需要使用 new 關鍵字:

var jeremy = new Person;

這條語句將建立出 Person 物件的一個新例項 jeremy。之後可以像下面這樣利用 Person 物件的屬性來檢索關於 jeremy 的資訊:

jeremy.age
jeremy.mood

內建物件

資料就是一種內建物件。當使用new關鍵字去初始化一個陣列時,其實是在建立一個Array物件的新例項:


var beatles = new Array();

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


beatles.lenggth;

Array物件知識諸多JavaScript內建物件中的一種。其他例子包括Math物件和Date物件,它們分別提供了許多非常有用的方法供人們處理數值和日期值。例如,Math物件的round方法可以把十進位制數值舍入為一個與之最接近的整數:


var num = 7.561;
var num = Math.round(num);
alert(num);

Date物件可以用來儲存和檢索與特定日期和時間有關的資訊。在建立Date物件的新例項時,JavaScript直譯器將自動地使用當前日期和時間對它進行初始化:


var current_date = new Date();

Date物件提供了getDay()、getHours()、getMonth()等一系列方法,以供人們用來檢索與特定日期有關的各種資訊。例如,getDay()方法可以告訴我們給定日期是星期幾:


var today = current_date.getDay)_;

宿主物件

除了內建物件,還可以在JavaScript指令碼里使用一些已經預先定義好的其他物件。這些物件不是由JavaScript語言本身而是由它的執行壞境提供的。具體到Web應用,這個壞境就是瀏覽器。由瀏覽器提供的預定義物件被稱為宿主物件。

宿主物件包括Form、Image和Element等。可以通過這些物件獲得關於網頁上表單、影像和各種表單元素等資訊。還有一個宿主物件也能用來獲得網頁上的任何一個元素的資訊,它就是document物件。

相關文章