參考資料
零、引言
一、客戶端 JavaScript1. 全局對象
|
| 傳統操作系統 | Web瀏覽器 |
|---|---|
| 允許組織桌面和文件夾裡的圖標 | 允許在工具欄和文件夾裡組織書籤 |
| 可以在一個窗口裡運行多個應用 | 可以在一個標籤裡顯示多個文檔 |
| 定義了很多頂層API，提供繪圖，保存文件等功能 | 定義了底層網絡API，保存數據和繪製圖像 |
----html----
<input type="submit" value="submit" />
----js----
var obj = document.getElementByTagName("input");
// 註冊事件處理程序
obj.onclick = function() {
alert("Please check out the info you fill in");
}Window 對象後續文章跟進）Array 對象 對數組的內置支持
new Array();
new Array(size); // size設置數組的長度
new Array(element0, element1, element2...); // element0, element1 位數組中的參數列表var a = [1, true, 'abc'];
var b = [a[0], a[0]*2, f(x)];Object 對象 包含所有JavaScript對象的特性的超類
new Object();
new Object(value); // 這個可選的參數指定一個原始的JavaScript值——一個數字、布爾值或字符串，這些值將分別轉換為一個Number、Boolean或String對象。var a = {
type : "fruit",
name : "apple",
number : 1,
isPicked : true,
// 空對象
}// 常用的兩個方法, 引用以上定義的a對象舉例
if (a.hasOwnProperty('type')) { // 本地定義的屬性，而不是繼承而來。Object對象的所有方法和行為都被其他對象繼承，因此可通過此方法進行區分
console.log("true"); // => true
console.log(Object.getOwnPropertyNames(a)); // 返回一個包含指定對象的所有非繼承屬性名的數組
}String 對象 字符串支持
new String(s); // 構造函數
function String(s); // 轉換函數// 常用方法舉例
var str = "i have an apple";
console.log(str.charAt(3)); // => a
console.log(str.concat(" ,too")); // => i have an apple ,too
console.log(str.includes("o")); // => false
console.log(str.endsWith("e")); // => true,對應有startsWidth()
console.log(str.indexOf("a")); // => 3,第一個索引值
console.log(str.lastIndexOf("a")); // => 10，最後一個索引值
console.log(str.slice(2,6)); // => have
console.log(str.substr(2,5)); // => have
console.log(str.substr(2,5).toLocaleUpperCase()); // HAVE
console.log(str.split(" ")); // ["i","have","an","apple"]，分割成數組形式可參考 MDN String
Math 對象 數學函數和常量
Math.E // 自然對數的底數
Math.PI // 常量π
Math.SQRT2 // 2的平方根Math.abs() // 計算絕對值
Math.ceil() // 對一個數字向上取整
Math.floor() // 對一個數字向下取整
Math.exp() // 計算e的乘方
Math.log() // 計算自然對數
Math.max() // 返回兩個數中較大的那個
Math.min() // 返回兩個數中較小的那個
Math.random() // 計算一個隨機數 [0,1]Math 不是對象的類（不像Date ，String），沒有 Math() 構造函數，類似於 Math.sin() 這樣的函數只是簡單的函數，而不是對某個對象進行操作的方法。Date 對象 操作日期和時間
// 四種不同格式，參數意義查看MDN文檔，後邊的實例比較直觀易懂
new Date();
new Date(value);
new Date(dateString);
new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);console.log(new Date()); // 根據當前日期和時間創建一個Date對象
console.log(new Date(1000)); // 需要的時間與1970年1月1日午夜（UTC）之間的毫秒數
var myDate = new Date("Aug 9, 1995"); // 一個以字符串形式定義的日期
console.log(myDate.getDate()); // 獲取本地日期 => 9
console.log(myDate.getUTCDate()); // 獲取世界日期 => 8更多可參考 MDN Date 。
<script> 元素裡的代碼，腳本通常會按照 <script> 在文檔裡的出現順序執行，所有腳本裡的JavaScript代碼都是從上往下，按照它在條件、循環以及其他控制語句中的出現順序執行。// 使用jquery語法設置<a>的字體顏色為紅色
<script>
$("a").css("color","red");
</script>
// 引入jquery庫
<script src="jquery.js"></script>
// 通過分析<script>標籤的位置可知，在第一階段加載過程中，jquery庫未引入，便執行使用jquery語法書寫的代碼，則該代碼會報錯----html----
<input type="submit" value="submit" />
----js---- 在第一階段加載完代碼後註冊HTML事件處理程序
var obj = document.getElementByTagName("input");
// 註冊事件處理程序
obj.onclick = function() {
alert("Please check out the info you fill in");
}
----當用戶點擊submit按鈕時，響應事件----<script> 元素時，它默認必須先執行腳本（腳本中的代碼可能操作DOM等），然後再恢覆文檔的解析和渲染。這對於內聯腳本沒什麼問題，但如果腳本源代碼是一個由 src 屬性指定的外部文件，這意味著腳本後面的文檔部分在下載和執行腳本之前，不會被瀏覽器引擎解析為DOM樹，JavaScript代碼會「阻塞」頁面UI的渲染。<head>
<script src="demo.js"></script> // 假設這個文件很大，則body部分很久之後才渲染
</head>
<body>
...
</body><script defer src="deferred.js"></script> // 非阻塞
<script async src="async.js"></script> // 異步
// 當<script>標籤同時擁有這兩個屬性，支持兩個屬性的瀏覽器會遵從async並忽略deferclick 、change 、load 等，指示發生事件的通用類型。事件還有目標，它是一個對象，並且事件就是在這之上發生的，比如 readystatechange 事件發生在 XMLHttpRequest 對象上。事件的響應程序叫做 「事件處理程序」、「事件監聽器」 或 「回調」 ，然後註冊這個函數，當事件發生時調用它。addEventListener()、attachEvent() （IE8及以下）。操作系統相關概念補充
Window 對象）只屬於自己。在Web瀏覽器中，一個窗口即一個進程。同個瀏覽器不同窗口即有多個進程。進程間的運行關係由瀏覽器內核控制。Web瀏覽器是單線程執行的（編程簡單，避免不同線程之間衝突 如一個線程刪除DOM節點，另一個線程增加DOM節點，這兩個節點是一樣的，那麼哪個先執行呢）。Web瀏覽器有JavaScript引擎線程、渲染引擎線程、瀏覽器事件線程、http請求線程。當其中一個線程執行時，其他的線程就會處於 「停滯」 狀態，例如 JavaScript 引擎線程執行時，渲染引擎線程就不會同時執行，即前面所說的 DOM 渲染延遲。
Document 對象，並且開始解析 Web 頁面，解析 HTML 元素和它們的文本內容後添加到 Elemenr 對象和 Text 節點到文檔中。（readystate 屬性為 loading）async 屬性的腳本document.readyState 屬性變成 interactive defer 屬性的腳本Document 對象上觸發 DOMContentLoaded 事件，這標誌著程序執行從同步腳本執行階段轉換到了異步事件驅動階段document.readyState 屬性改變為 complete ， Web瀏覽器觸發 window 對象上的 load 事件alert("something"); 不是JavaScript語言核心的輸出語句，為什麼在瀏覽器運行能達到輸出效果？<script> 標籤的先後順序，以及放在 <head></head> 跟 <body></body> 的不同？|
|
