《JavaScript Dom編程藝術》讀書筆記（一）

時間 2019-12-13

標籤 javascript dom 編程藝術讀書筆記欄目 JavaScript 简体版

原文原文鏈接

執行Javascript的方式

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

<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腳本的執行順序）：app

first statement;
second statement;

固然也能夠放在一行：函數

first statement;second statement;

註釋

註釋可以有效的幫助瞭解代碼流程，必須養成良好的註釋習慣。code

JS註釋的3種形式：orm

//自我提醒，有註釋是好事htm
/* 自我提醒
有註釋是好事 */對象
<!-- 自我提醒，有註釋是好事

若是使用 // 做爲一行的開始，這一行就會被當成一條註釋：

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

若是使用這種註釋方式，就必須在每一個註釋行的開頭加上兩個斜線，下面這種的寫法腳本就會出現問題：

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

必須書寫成相似以下樣式：

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

若是打算註釋多行，能夠經過 /* */ 來完成：

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

這種註釋在須要插入大段註釋時頗有用，它能夠調高整個腳本的可讀性。

還可使用 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對象。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。