6.21
一、fuction的四種方法
// 1, 方法調用模式
// 當一個函數被保存為對象的一個屬性時，我們稱之它為該對象的一個方法，那麽this被綁定到該對象上
var myObject={
name : "myObject" ,
value : 0 ,
increment : function(num){
this.value += typeof(num) === ‘number‘ ? num : 0;
return this;
} ,
toString : function(){
return ‘[Object:‘ + this.name + ‘ {value:‘ + this.value + ‘}]‘;
}
}
alert(myObject.increment(10).increment(20).toString()); // [Object:myObject {value:30}]
// 2, 函數調用模式
// 當一個函數並非一個對象的函數時，那麽它被當作一個函數來調用，this被綁定到全局對象上。這是語言設計的一個錯誤。倘若語言設計正確，當內部函數調用時，this應該仍然綁定到外部函數的this變量上
var myObject={
name : "myObject" ,
value : 0 ,
increment : function(num){
this.value += typeof(num) === ‘number‘ ? num : 0;
return this;
} ,
toString : function(){
return ‘[Object:‘ + this.name + ‘ {value:‘ + this.value + ‘}]‘;
},
getInfo: function(){
var self=this;
return (function(){
//return this.toString(); // 內部匿名函數中this指向了全局對象window， 輸出 [object Window]
return self.toString(); // 定義一個變量selft並給它賦值為this，那麽內部函數通過該變量訪問到指向該對象的this
})();
}
}
alert(myObject.increment(10).increment(20).toString()); // [Object:myObject {value:30}]
// 3, 構造器調用模式
// JavaScript是一門基於原型繼承的語言, 這意味著對象可以直接從其他對象繼承屬性, 該語言是無類別的。
// 如果一個函數前面帶上new來調用，那麽將創建一個隱藏連接到該函數的prototype成員的新對象，同時this將會被綁定到構造函數的實例上。
function MyObject(name){
this.name = name || ‘MyObject‘;
this.value=0;
this.increment = function(num){
this.value += typeof(num) === ‘number‘ ? num : 0;
};
this.toString = function(){
return ‘[Object:‘ + this.name + ‘ {value:‘ + this.value + ‘}]‘;
}
this.target = this;
}
MyObject.prototype.getInfo = function(){
return this.toString();
}
// 同時創建一個MyObject.prototype對象，myObject繼承了MyObject.prototype的所有的屬性， this綁定到了MyObject的實例上
var myObject = new MyObject();
myObject.increment(10);
alert(myObject.value); //10
var otherObject = new MyObject();
otherObject.increment(20);
alert(otherObject.value); //20
alert(myObject.target===myObject); // ture
alert(myObject.target.getInfo()); // [Object:MyObject {value:10}]
// 4, Apply 調用模式
// JavaScript是一門函數式的面向對象編程語言，所以函數可以擁有方法。 函數的apply方法，如同該對象擁有此方法,此時this指向該對象。
// apply接收兩個參數，第一個是要綁定的對象（this指向的對象）,第二個是參數數組.
function MyObject(name){
this.name = name || ‘MyObject‘;
this.value = 0;
this.increment = function(num){
this.value += typeof(num) === ‘number‘ ? num : 0;
};
this.toString=function(){
return ‘[Object:‘+this.name+‘ {value:‘+this.value+‘}]‘;
}
this.target=this;
}
function getInfo(){
return this.toString();
}
var myObj = new MyObject();
alert(getInfo.apply(myObj)); //[Object:MyObject {value:0}], this指向myObj
alert(getInfo.apply(window)); //[object Window], this指向window
二、JSX
JSX就是Javascript和XML結合的一種格式。React發明了JSX，利用HTML語法來創建虛擬DOM。當遇到<，JSX就當HTML解析，遇到{就當JavaScript解析。
如下(JS寫法)
var child1 = React.createElement(‘li‘, null, ‘First Text Content‘);
var child2 = React.createElement(‘li‘, null, ‘Second Text Content‘);
var root = React.createElement(‘ul‘, { className: ‘my-list‘ }, child1, child2);
等價於(JSX寫法)
var root =(
<ul className="my-list">
<li>First Text Content</li>
<li>Second Text Content</li>
</ul>
);
JSX 文件中的功能由 Web Service 進行 XML 映射時調用。WebLogic Workshop 擴展了 ECMAScript 語言，支持將 XML 作為本機類型，從而可以在腳本中直接處理 XML。
三、eval的使用方法
eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。
語法：eval(string)
| 參數 | 描述 |
|---|---|
| string | 必需。要計算的字符串，其中含有要計算的 JavaScript 表達式或要執行的語句。 |
例如：<script type="text/javascript">
eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
var x=10
document.write(eval(x+17))
</script>
四、AJAX
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。 AJAX = 異步 JavaScript和XML（標準通用標記語言的子集）。 AJAX 是一種用於創建快速動態網頁的技術。 通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。 傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。
ajax() 方法通過 HTTP 請求加載遠程數據。
該方法是 jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的靈活性。
最簡單的情況下，$.ajax() 可以不帶任何參數直接使用。
註意：所有的選項都可以通過 $.ajaxSetup() 函數來全局設置。
語法:
jQuery.ajax([settings])
| 參數 | 描述 |
|---|---|
| settings |
可選。用於配置 Ajax 請求的鍵值對集合。 可以通過 $.ajaxSetup() 設置任何選項的默認值。 |
步驟：
step1. 創建XMLHttpRequest對象，也就是創建一個異步調用對象；
step2. 創建一個新的HTTP請求，並指定改HTTP請求的方法、URL以及驗證信息；
step3. 設置響應HTTP狀態變化的函數；
step4. 發送HTTP請求；
step5. 獲取異步調用返回的數據；
step6. 使用javascript和DOM實現局部刷新；
五、http Request
http Request為傳輸請求
httpRequest對象常用的方法：
1. 獲得客戶機信息 getRequestURL方法返回客戶端發出請求時的完整URL。 getRequestURI方法返回請求行中的資源名部分。 getQueryString 方法返回請求行中的參數部分。 getRemoteAddr方法返回發出請求的客戶機的IP地址 getRemoteHost方法返回發出請求的客戶機的完整主機名 getRemotePort方法返回客戶機所使用的網絡端口號 getLocalAddr方法返回WEB服務器的IP地址。 getLocalName方法返回WEB服務器的主機名 getMethod得到客戶機請求方式
2.獲得客戶機請求頭
getHeader(string name)方法 getHeaders(String name)方法 getHeaderNames方法
3. 獲得客戶機請求參數(客戶端提交的數據) getParameter(name)方法 getParameterValues（String name）方法 getParameterNames方法 getParameterMap方法
六、什麽是事件
事件是可以被控件識別的操作，如按下確定按鈕，選擇某個單選按鈕或者復選框。每一種控件有自己可以識別的事件，如窗體的加載、單擊、雙擊等事件，編輯框（文本框）的文本改變事件，等等。
七、WINDOW
Window 對象表示瀏覽器中打開的窗口。
如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創建一個 window 對象，並為每個框架創建一個額外的 window 對象。
註釋：沒有應用於 window 對象的公開標準，不過所有瀏覽器都支持該對象。
Window 對象集合
| 集合 | 描述 |
|---|---|
| frames[] |
返回窗口中所有命名的框架。 該集合是 Window 對象的數組，每個 Window 對象在窗口中含有一個框架或 <iframe>。屬性 frames.length 存放數組 frames[] 中含有的元素個數。註意，frames[] 數組中引用的框架可能還包括框架，它們自己也具有 frames[] 數組。 |
Window 對象屬性
| 屬性 | 描述 |
|---|---|
| closed | 返回窗口是否已被關閉。 |
| defaultStatus | 設置或返回窗口狀態欄中的默認文本。 |
| document | 對 Document 對象的只讀引用。請參閱 Document 對象。 |
| history | 對 History 對象的只讀引用。請參數 History 對象。 |
| innerheight | 返回窗口的文檔顯示區的高度。 |
| innerwidth | 返回窗口的文檔顯示區的寬度。 |
| length | 設置或返回窗口中的框架數量。 |
| location | 用於窗口或框架的 Location 對象。請參閱 Location 對象。 |
| name | 設置或返回窗口的名稱。 |
| Navigator | 對 Navigator 對象的只讀引用。請參數 Navigator 對象。 |
| opener | 返回對創建此窗口的窗口的引用。 |
| outerheight | 返回窗口的外部高度。 |
| outerwidth | 返回窗口的外部寬度。 |
| pageXOffset | 設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。 |
| pageYOffset | 設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| Screen | 對 Screen 對象的只讀引用。請參數 Screen 對象。 |
| self | 返回對當前窗口的引用。等價於 Window 屬性。 |
| status | 設置窗口狀態欄的文本。 |
| top | 返回最頂層的先輩窗口。 |
| window | window 屬性等價於 self 屬性，它包含了對窗口自身的引用。 |
|
只讀整數。聲明了窗口的左上角在屏幕上的的 x 坐標和 y 坐標。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。 |
Window 對象方法
| 方法 | 描述 |
|---|---|
| alert() | 顯示帶有一段消息和一個確認按鈕的警告框。 |
| blur() | 把鍵盤焦點從頂層窗口移開。 |
| clearInterval() | 取消由 setInterval() 設置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法設置的 timeout。 |
| close() | 關閉瀏覽器窗口。 |
| confirm() | 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 |
| createPopup() | 創建一個 pop-up 窗口。 |
| focus() | 把鍵盤焦點給予一個窗口。 |
| moveBy() | 可相對窗口的當前坐標把它移動指定的像素。 |
| moveTo() | 把窗口的左上角移動到一個指定的坐標。 |
| open() | 打開一個新的瀏覽器窗口或查找一個已命名的窗口。 |
| print() | 打印當前窗口的內容。 |
| prompt() | 顯示可提示用戶輸入的對話框。 |
| resizeBy() | 按照指定的像素調整窗口的大小。 |
| resizeTo() | 把窗口的大小調整到指定的寬度和高度。 |
| scrollBy() | 按照指定的像素值來滾動內容。 |
| scrollTo() | 把內容滾動到指定的坐標。 |
| setInterval() | 按照指定的周期（以毫秒計）來調用函數或計算表達式。 |
| setTimeout() | 在指定的毫秒數後調用函數或計算表達式。 |
Window 對象描述
Window 對象表示一個瀏覽器窗口或一個框架。在客戶端 JavaScript 中，Window 對象是全局對象，所有的表達式都在當前的環境中計算。也就是說，要引用當前窗口根本不需要特殊的語法，可以把那個窗口的屬性作為全局變量來使用。例如，可以只寫 document，而不必寫 window.document。
同樣，可以把當前窗口對象的方法當作函數來使用，如只寫 alert()，而不必寫 Window.alert()。
除了上面列出的屬性和方法，Window 對象還實現了核心 JavaScript 所定義的所有全局屬性和方法。
Window 對象的 window 屬性和 self 屬性引用的都是它自己。當你想明確地引用當前窗口，而不僅僅是隱式地引用它時，可以使用這兩個屬性。除了這兩個屬性之外，parent 屬性、top 屬性以及 frame[] 數組都引用了與當前 Window 對象相關的其他 Window 對象。
要引用窗口中的一個框架，可以使用如下語法：
frame[i] //當前窗口的框架 self.frame[i] //當前窗口的框架 w.frame[i] //窗口 w 的框架
要引用一個框架的父窗口（或父框架），可以使用下面的語法：
parent //當前窗口的父窗口 self.parent //當前窗口的父窗口 w.parent //窗口 w 的父窗口
要從頂層窗口含有的任何一個框架中引用它，可以使用如下語法：
top //當前框架的頂層窗口 self.top //當前框架的頂層窗口 f.top //框架 f 的頂層窗口
新的頂層瀏覽器窗口由方法 Window.open() 創建。當調用該方法時，應把 open() 調用的返回值存儲在一個變量中，然後使用那個變量來引用新窗口。新窗口的 opener 屬性反過來引用了打開它的那個窗口。
一般來說，Window 對象的方法都是對瀏覽器窗口或框架進行某種操作。而 alert() 方法、confirm() 方法和 prompt 方法則不同，它們通過簡單的對話框與用戶進行交互。
八、DOM
什麽是 DOM？
通過 JavaScript，您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。
要改變頁面的某個東西，JavaScript 就需要對 HTML 文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。
在 1998 年，W3C 發布了第一級的 DOM 規範。這個規範允許訪問和操作 HTML 頁面中的每一個單獨的元素。
所有的瀏覽器都執行了這個標準，因此，DOM 的兼容性問題也幾乎難覓蹤影了。
DOM 被分為不同的部分（核心、XML及HTML）和級別（DOM Level 1/2/3）：
Core DOM
定義了一套標準的針對任何結構化文檔的對象
XML DOM
定義了一套標準的針對 XML 文檔的對象
HTML DOM
定義了一套標準的針對 HTML 文檔的對象。
6.21