讀此書之前，感謝淘寶技術團隊對此javascript核心的翻譯，感謝弗拉納根寫出此書。感謝你們無私的分享，僅以此筆記獻給你們的辛勤付出。
一：javascript語言核心
本章之後，我們將主要關注javascript的基礎知識。第二章我們講解javascript的注釋，分號和unicode字符集；第三章會更有意思，主要講解javascript的變量和賦值
這裡有一些實例代碼說明前兩章的重點內容。
復制代碼 代碼如下:
<script type="text/javascript">
//雙斜槓之後之後的內容都於屬於注釋
//仔細閱讀這裡的注釋，它將會對javascript代碼做解釋
// 變量是表示值的一個符號名字
// 變量是通過var關鍵字聲明
var x; //聲明一個變量x
//值可以通過符號賦值給變量
x = 0; //現在變量x的值為0
x //通過變量名獲取其值。
//javascript支持多種數據類型
x = 1; //數字
x = 0.01; //整數和實數共用一種數據類型
x = "hello world"; //由雙引號內的文本構成字符串
x = 'hello world'; //單引號同樣構成字符串。
x = true; //布爾值
x = false; //另外一個布爾值
x = null; //null是一個特殊的值。意思是空
x = undefined; //undefined和null非常類似
</script>
在javascript中，最重要的類型就是對象和數組，第六章介紹對象，第7章介紹數組。對象和數組在 javascript是如此重要。以至於在本書中到處能看到他們的身影。
復制代碼 代碼如下:
<script type="text/javascript">
//javascript中最重要的類型就是對象
//對象是名/值對的集合，或字符串值到映射值的集合。
var book = { //對象是由花括號括起來的
topic: "javascript", //屬性"topic"的值是javascript
fat: true //屬性fat的值是true
}; //右邊的花括號結束。
//通過“.”或“[]”來訪問對象屬性。
book.topic //=>"javascript"
book["fat"] //=>true另外一種獲取屬性的方式、
book.author = "ahthw"; //通過賦值創建一個新的屬性
book.content = {}; //{}是一個空對象。它沒有屬性
//javascript同樣支持數組（以數組為索引的列表）
var primes = [2, 3, 5, 7]; //擁有4個值的組合，由“[”“]”劃定邊界
primes[0] //=>2：數組的第一個對象，索引為0
primes.length //=>4,數組中元素的個數
primes[primes.length-1] //=>7:數組中最後一個元素
primes[4] =9; //通過賦值來增加新的元素
primes[4] =11;//通過賦值來改變已有的元素
var empty = [];//空數組，有0個元素
empty.length //=>:0
//數組和對象中都可以包含另一個數組或者對象。
var point =[ //具有兩個元素的數組
{x:0,y:0}, //每個元素都是一個對象
{x:1,y:1}
];
var data ={ //一個包含兩個屬性的對象
trial1:[[1,2],[3,4]], //每一個對象都是數組
trial2:[[2,3],[4,5]] //數組的元素也是數組
};
</script>
上面代碼中通過方括號定義數組元素和通過花括號定義對象屬性名和屬性值之間的映射關系的語法陳偉初始化表達式(initalizer expression),第四章有專門介紹.表達式是javascript中的一個短語，這個短語可以通過運算得出一個值，通過","和"[]"來引用對象屬性或數組元素的值構成一個表達式。
javascript中最常見的表達式寫法是像下面 代碼這樣的運算符(oprartor)
復制代碼 代碼如下:
//運算符作為操作符，生成一個新的值
//最常見的算術運算符
3+2 // =>5 加法
3-2 // =>減法
3*2 // =>乘法
3/2 // =>除法
point[1].x -point[0].x //=>復雜的運算也能照常工作
"3"+"2" // => 32.可以完成加法運算，也可以完成 字符串拼接。
//javascript定義了一些算術運算符作為簡寫形式
var count = 0; //定義一個變量
count++; //自增1
count--; //自減1
count +=2; //自增2 和 "count = count + 2;"寫法一樣
count *=3 //自乘3. 和"count = count*3; "寫法一樣
count //=> 6: 變量名本身也是一個表達式
//相等關系運算符用來判斷兩值是否相等
//不等，大於，小於運算符運算結果是true或false
var x=2,y=3; //這裡的等號是賦值的意思，不是比較相等
x == y; //=>false 相等
x ！= y; //=> true 不等
x < y; //=> true: 小於
x <= y; //true 小於等於
x > y; //false 大於
x >= y; //false 大於等於
"two"=="three"; //false 兩個字符串不相等
"two" > "three"; //true "tw"在字母表中的索引大於"th"
false == (x>y); //ture false =false;
//邏輯運算符是對布爾值的合並或求反
(x == 2)&&(y==3); //=>true兩個比較都為true.&&為"與"
(x > 3)||(y<3); //=> false 兩個比較都不是true. ||表示"或"
！(x == y); //=>true !表示求反
如果javascript中的“短語”是表達式話，那麼整個句子就稱作語句(statement)，第五章會詳細講解。
在上述代碼中，以分號結束的行均是一條語句，粗略的講，表達式僅僅計算出一個值（或者它包含的值我們並不關心）但他們改變程序運行狀態。在上文中，已經見過變量聲明語句和賦值語句。另一類語句是“控制結構”（control structure），比如條件判斷和循環，在介紹完函數後，我們給出相關示例代碼。
函數是帶有名稱和參數的javascript代碼段，可一次定義多次使用。第8章會正式詳細地講解函數。與對象和數組一樣，本書很多地方提到函數，這裡給一些簡單的示例代碼。
復制代碼 代碼如下:
//函數是一段待遇參數的javascript代碼段，可以多次調運
function plus1(x) { //定義了一個名為plus1的函數，並帶有參數x
return x + 1; //返回一個比傳入大1的值。
} //函數的代碼塊是由花括號包裹起來的部分
plus1(y) //
var square =function(x){ //函數是一種值，可以賦值給變量
return x*x; //計算函數的值
}; //分號表示了賦值語句的結束
square(plus1(y)); //在一個表達式中石油兩個函數
當將函數和對象和寫在一起時，函數就編程了“方法”（method）
復制代碼 代碼如下:
//當函數賦值給對象的屬性，我們稱為
//"方法",所有的javascript對象都包含方法
var a =[]; //創建一個空數組
a.push(1,2,3); //向push()方法向數組中添加對象
a.reverse(); //數據反轉
// document.write(a)
//我們可以定義子的方法，"this"關鍵字是對定義方法
//的對象的引用，這裡的例子是上文中提到的包含兩個點位置信息的數組。
points.dist =function(){ //定義一個方法計算兩點之間的距離
var p1 =this[0]; //通過this關鍵字獲得當前數組的引用
var p2 =this[1]; //並取得調用的數組前兩個元素
var a =p2.x- p1.y; // x坐標軸上的距離
var b =p2.y - p1.y; //y坐標軸上的距離
return Math.sqrt(a * a + "我們稱為" + b * b); //勾股定理
}; //Math.sqrt()計算平方根
points.dist() // =>求兩個點之間的距離
現在，給出一些控制語句的例子，這裡的示例函數體內包含了最常見的javascript的控制語句
復制代碼 代碼如下:
//這裡javascript語句使用該語法包含條件判斷和循環
//使用了類似java c++和其它語言的語法
function abs(x) { //求絕對值函數
if (x >= 0) { //if
return x; //如果true則執行這裡代碼
} else { //false執行
return -x;
}
}
function factprial(n) { //計算階乘
var product = 1; //給product賦值為1
while (n > 1) { //()值表達式為 true時循環執行{}內容
product *= n; //product = product * n的簡寫
n--; // n = n-1寫法
} //循環結束
return product; //返回 product
}
factprial(4) // =>24 1*4*3*2 document.write(factprial(4))
function factorial2(n) { //實現循環的另外一種寫法
var i, product = 1; //
for (i = 2; i <= n; i++) //將i從2自增到n
product *= i; //循環體，當循環體中只有一句代碼，省略{}
return product; //計算返回好的階乘
}
factorial2(5) //document.write(factorial2(5)) =>120 : 1*2*3*4*5
javascript是一種面向對象的編程語言，但和傳統的頁面對象有有很大的區別，第9章將詳細講解的javascript的面向對象，這章會有大量的示例代碼，是本書最長的一章。
這裡有一個簡單的示例，這段代碼展示了如何在javascript中定義一個類來表示2D面的幾何中的點。這個類實例化的對象擁有一個名為r()的方法，用來計算改點到原點的距離。
復制代碼 代碼如下:
//定義一個構造函數以初始化一個新的point對象
function Point(x, y) { //構造函數一般均以大寫字母開始
this.x = x; //關鍵字this指代初始化的實例
this.y = y; //將函數參數存儲為對象的屬性
}
//使用new關鍵字和構造函數來創建一個實例
var p = new Point(1, 1); //平面幾何中的點1,1,
//通過構造函數prototype對象賦值
//來給Point對象定義方法
Point.prototype.r = function() {
return Math.sqrt( //返回x平方+y平方的平方根
this.x * this.x + //this指代調運這個方法的對象
this.y * this.y);
};
//Point的實例對象p（以及所有的point實例對象）繼承了方法r()
p.r() // => 1.4142135623730951 /document.write(p.r())
第9章是第一部分的精華所在，後續的各章做了零星的延伸，將帶領我們走向對javascript探索的尾聲。
第十章主要講正則表達式進行的文本匹配模式。
第11章主要護額石膏javascript的語言核心的子集和超集。
在進入客戶端的javascript的內容之前，第12章我們只要介紹兩種在web之外的javascript運行環境。
2.客戶端javascript
javascript語言核心部分的內容知識點交叉引用比較多，且知識層次感不分明。在客戶端javascript的內容編排有了很大的改變。依照本章學習，完全可以在web浏覽器中使用javascript。（但你如果想通過閱讀本書學習javascript的話，不能只將眼光放在第二部分） 第13章是第二部分的第一章，該章介紹如何讓javascript在web浏覽器中運行起來。 第14章講解到web浏覽器腳本技術，並涵蓋客戶端javascirpt的一席重要的全局函數。
例如：
復制代碼 代碼如下:
function moveon() {
//通過對話框詢問一個問題
var answer = confirm("准備好了嗎？");
//單擊確定，浏覽器會加載一個新的頁面
if (answer) window.location = "http://www.baidu.com";
}
//在1分鐘(60000毫秒後執行這個函數)
setTimeout(moveon,300);
第十五章會講述javascript如何操縱html樣式定義內容的展示方式.第十五章的內容將更加務實，通過腳本操作html文檔內容，它將展示如何選取特定的網頁元素，如何給html元素設置屬性，如果修改元素的內容，以及如何給文檔添加新的節點
以下實例函數展示了如果查找和修改基本的文章內容
復制代碼 代碼如下:
//在document中的一個指定信息的區域樹超調試信息
//如果document上不存在這個元素，則創建一個
function debug(msg) {
//通過查看html元素的 id屬性來查找文檔的調試部分
var log = document.getElementById("debuglog");
//如果元素不存在，則創建一個
if (!log) {
log = document.createElement("div"); //創建一個新的div元素
log.id = "debuglog"; //為在各方元素的id賦值
log.innerHTML = "<h1>Debug Log</h1>"; //自定義初始內容
document.body.appendChild(log); //將其添加到文檔末尾
}
//將消息包含在<pre>中，並添加到log中
var pre = document.createElement("pre"); //創建pre元素
var text = document.createElement(msg); //將msg包含在一個文本節點上
pre.appendChild(text); //文本添加到pre
log.appendChild(pre); //pre添加到log
}
在第十六章會講到如何使用javascript操作元素，這通常會使用到元素的style和class屬性
復制代碼 代碼如下:
function hide(e, reflow) { //通過jvascript操縱元素和隱藏元素e
if (reflow) { //如果第二個參數為true
e.style.display = "none" //隱藏這個元素，其占用的空間也銷售
} else {
e.style.visibility = "hidden"; //將e隱藏，保留其占用的空間
}
}
function highlight(e) { //通過設置css來高亮顯示e
if (!e.className) e.className = "highcss";
else
e.className += "highcss";
}
可以通過javascript來控制元素的內容和css樣式，同樣也可以通過事件處理程序(event handler)來定義文檔行為，事件處理辰星是一個在浏覽器中心注冊的javascript函數，當特定的事件發生時浏覽器便可以調用這個函數。
通常我們關注的事件類型是鼠標點擊和鍵盤按鍵事件（智能手機為各種觸碰事件）。或者說當浏覽器完成文檔的加載，當用戶改變窗口的大小或當用戶向表單中輸入數據時便會觸發一個人事件。
第17章會詳細描述如何定義，注冊時間處理程序，以及在事件發生時浏覽器是如何調用他們的。
自定義事件處理程序最簡單的方法，給html的以on為前綴的屬性綁定一個回調，當寫一些簡單的程序測試時，最實用的方法就是給“onclick”處理程序綁定回調。假設以上將上文的debug()和hide()這個函數保存至debug.js和hide.js的文件中，那麼就可以簡單些一個html測試文件，來給onclick的屬性指定一個事件處理程序。如下
復制代碼 代碼如下:
<script type="text/javascript">
//在document中的一個指定信息的區域樹超調試信息
//如果document上不存在這個元素，則創建一個
function debug(msg) {
//通過查看html元素的 id屬性來查找文檔的調試部分
var log = document.getElementById("debuglog");
//如果元素不存在，則創建一個
if (!log) {
log = document.createElement("div"); //創建一個新的div元素
log.id = "debuglog"; //為在各方元素的id賦值
log.innerHTML = "<h1>Debug Log</h1>"; //自定義初始內容
document.body.appendChild(log); //將其添加到文檔末尾
}
//將消息包含在<pre>中，並添加到log中
var pre = document.createElement("pre"); //創建pre元素
var text = document.createElement(msg); //將msg包含在一個文本節點上
pre.appendChild(text); //文本添加到pre
log.appendChild(pre); //pre添加到log
}
function hide(e, reflow) { //通過jvascript操縱元素和隱藏元素e
if (reflow) { //如果第二個參數為true
e.style.display = "none" //隱藏這個元素，其占用的空間也銷售
} else {
e.style.visibility = "hidden"; //將e隱藏，保留其占用的空間
}
}
function highlight(e) { //通過設置css來高亮顯示e
if (!e.className) e.className = "highcss";
else
e.className += "highcss";
}
</script>
hello
<button onclick="hide(this,true); debug('hide buttoon 1');">hide1</button>
<button onclick="hide(this);debug('hide button 2');">hide2</butotn>
下面的這些客戶端javascript用到了事件，它給了一個很重要的事件：“load”事件注冊了一個事件處理辰星。同事也展示注冊"click"事件處理函數更高級的一種方法
復制代碼 代碼如下:
<script type="text/javascript">
//"load"事件在只有在文檔加載後才能完成觸發
//如通常需要等待load事件發生後才能執行javascript代碼
window.onload = function() {
//找到文檔中所有的img標簽
var images = document.getElementsByTagName("img");
//遍歷images，給每個節點的click事件添加處理程序
//在點擊圖片的時候將圖片隱藏
for (var i = 0; i < images.length; i++) {
var imge = images[i];
if (imge.addEventListener) //注冊時間處理程序的另外一種方法
imge.addEventListener("click", hide, false);
else //兼容ie8以前操作
imge.attachEvent("onclick", hide);
}
//這便是上面注冊事件的處理函數
function hide(evnet) {
event.target.style.visibility = "hidden";
}
};
</script>
在15-17章講述了如何使用javascript來控制網頁的內容，樣式以及行為（事件處理），這章討論api多少有些復雜，而且至今有糟糕的浏覽器兼容性，正是這個原因，很多javascript程序員選擇使用"庫"或“框架”來簡化他們的編碼工作，最流行的莫非jQuery，第19章介紹jQuery庫
復制代碼 代碼如下:
function debug(msg) {
var log = $("#debuglog");
if (log.length == 0) {
log = $("<div id='debuglog'><h1>debuglog</h1></div>");
log.appendTo(document.body);
}
document.write(log)
log.append($("<pre/>").text(msg));
};
目前我們所提到的第二個部分的4章都是圍繞網頁展開討論的，後續的4章將著眼店轉向web應用，這幾張內容不是討論如何編寫操控內容。樣式和興旺的腳本使用web浏覽器來渲染文檔；而是講解如何將web浏覽器作為應用平台。並描述了用於支持更復雜精細的客戶端web應用和現代浏覽器的api。
第18章講解如何使用javascript來發起http請求。
第20章描述數據存儲機制以及客戶端應用的會話狀態保持，第21章涵蓋基於講解html5所驅動的新一代應用api/網絡 存儲 圖形，這些都是基於哪些支持新api的浏覽器開發。浙江是你作為javascript程序員最激動人心的時刻。最後4章沒有太多的示例代碼。下面的例子使用了這些新的api.