打開這本書，進入到javascript的世界。以前都是看各種視頻，感覺什麼收穫也沒有，反而弄得腦袋混亂，希望能夠按照這本書的節奏掌握javascript這門語言，為我的前端學習打下基礎。
學習前準備：web瀏覽器（F12用來喚醒和關閉firebug界面，ctrl+shift+j用來喚醒錯誤工作台，console.log()調試輔助）
本書分為4個部分：Javascript語言核心；客户端Javascript；Javascript核心參考；客户端Javascript參考。今天主要學了第一部分。主要收穫簡述:
前言
1： javascript語言核心 和 客户端javascript的簡述
和以往相比，這本書在最開始向我介紹了：
（1）註釋方法 ： //所有在雙斜槓後面的內容都屬於註釋
（2）變量：var x=0;//變量是表示值的一個符號名字，用var關鍵字表示，通過等號賦值
（3）數據類型：number bool object undefined null 等
（4）對象：鍵值對（名==值）有屬性，通過“.”或者“[]”來訪問，就像各種檢索目錄一樣，一級級的往下尋找。例如:
1 var book={//等於號莫忘記
2 author:"fanfan",
3 name:"javascript",//不同屬性之間用“,”分隔
4 buy:false
5 };
6 console.log(book.author);//獲取book的author屬性=》fanfan
7 console.log(book["name"]);//中括號裏面的屬性名稱要加雙引號
8 book.topic="study";//若book屬性原本沒有topic屬性，這時候相當於添加了一個topic屬性，並且值為study。
9 console.log(book.topic);
10 book.content={};//設置一個空的屬性
11 console.log(book.content);（5）函數：是帶有名稱和參數的javascript代碼段，可以多次調用
1 var square=function(x){
2 return x*x;
3 };
4 square(4);（6）方法：當函數和對象合在一起的時候，就變成了方法。即當函數賦值給對象的屬性，即為方法，所有的javascript對象都含有方法。
1 var a=[];
2 a.push(1,2,3);//數組賦值push方法
3 a.reverse();//數組倒序
4 //我們也可以定義自己的方法，this關鍵字就是對定義方法的對象的引用
5 var points=[
6 {x:0,y:0},
7 {x:1,y:1}];
8 points.dist=function(){
9 var p1=this[0];
10 var p2=this[1];
11 var a=p2.x-p1.x;
12 var b=p2.y-p1.y;
13 return Math.sqrt(a*a+b*b);
14 }
15 points.dist();(7)控制語句：條件判斷和循環
(8)面向對象：構造--》實例化--》附加方法--》繼承
//構造函數，無return，初始化一個新的Point
function Point(x,y){
this.x=x;
this.y=y;
}
//new一個Point點實例
var p=new Point(1,1);
//給Point附上一個r方法
Point.prototype.r=function(){
return Math.sqrt(this.x*this.x+this.y*this.y);
};
//調用p的r方法，繼承
p.r();（9）客户端的javascript。主要是操作dom等。
示例：基於javascript的貸款計算器。
- 如何在文檔中查找元素 var amount=document.getElementById("amount");
- 如何通過表單input元素來獲取用户的輸入數據 var principal = parseFloat(amount.value);
- 如何通過文檔元素來設置html內容 payment.innerHTML = monthly.toFixed(2);
- 如何將數據存儲在瀏覽器中
1 save(amount.value, apr.value, years.value, zipcode.value);
2 function save(amount, apr, years, zipcode) {
3 if (window.localStorage) { // Only do this if the browser supports it
4 localStorage.loan_amount = amount;
5 localStorage.loan_apr = apr;
6 localStorage.loan_years = years;
7 localStorage.loan_zipcode = zipcode;
8 }
9 }- 如何使用腳本發送http請求
1 function getLenders(amount, apr, years, zipcode) {
2 // If the browser does not support the XMLHttpRequest object, do nothing
3 if (!window.XMLHttpRequest) return;
4
5 // Find the element to display the list of lenders in
6 var ad = document.getElementById("lenders");
7 if (!ad) return; // Quit if no spot for output
8
9 // Encode the user's input as query parameters in a URL
10 var url = "getLenders.php" + // Service url plus
11 "?amt=" + encodeURIComponent(amount) + // user data in query string
12 "&apr=" + encodeURIComponent(apr) +
13 "&yrs=" + encodeURIComponent(years) +
14 "&zip=" + encodeURIComponent(zipcode);
15
16 // Fetch the contents of that URL using the XMLHttpRequest object
17 var req = new XMLHttpRequest(); // Begin a new request
18 req.open("GET", url); // An HTTP GET request for the url
19 req.send(null); // Send the request with no body
20
21 // Before returning, register an event handler function that will be called
22 // at some later time when the HTTP server's response arrives. This kind of
23 // asynchronous programming is very common in client-side JavaScript.
24 req.onreadystatechange = function() {
25 if (req.readyState == 4 && req.status == 200) {
26 // If we get here, we got a complete valid HTTP response
27 var response = req.responseText; // HTTP response as a string
28 var lenders = JSON.parse(response); // Parse it to a JS array
29
30 // Convert the array of lender objects to a string of HTML
31 var list = "";
32 for (var i = 0; i < lenders.length; i++) {
33 list += "<li><a href='" + lenders[i].url + "'>" +
34 lenders[i].name + "</a>";
35 }
36
37 // Display the HTML in the element from above.
38 ad.innerHTML = "<ul>" + list + "</ul>";
39 }
40 }
41 }- 如何利用<canvas>元素繪圖
1 var g = graph.getContext("2d");
2 g.moveTo(paymentToX(0), amountToY(0)); // Start at lower left
3 g.lineTo(paymentToX(payments), // Draw to upper right
4 amountToY(monthly * payments));
5 g.lineTo(paymentToX(payments), amountToY(0)); // Down to lower right
6 g.closePath(); // And back to start
7 g.fillStyle = "#f88"; // Light red
8 g.fill(); // Fill the triangle
9 g.font = "bold 12px sans-serif"; // Define a font
10 g.fillText("Total Interest Payments", 20, 20);總結：要清楚的明白對象、函數、方法三者之間的關係。客户端的例子基本能看懂，但是自己寫不出來。主要是localStorage和http請求無法自己獨立完成。以後會回來複習默寫的。
本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。
