1、JavaScript · 陸陸續續記錄

# http://exploringjs.com/ ## 3、js和php中盡量使用單引號。js中單雙引號，都是一樣的，但是php中還是有區別的！ ## 4、DOM與JavaScript的區別 * DOM(文檔對象模型)是與平臺和語言無關的一種接口,它允許程序和腳本動態的訪問和更新文檔內容,結構甚至是樣式,并允許把處理的結果返回到所指定的頁面中。 * DOM是面向HTML,XML文檔的`API`(應用編程接口),為文檔提供了結構化的表示,并定義了如何通過腳本(如JavaScript)來訪問文檔結構。 * 而JavaScript則是用于處理和訪問DOM的腳本語言。如果沒有DOM,JavaScript就不會有Web頁面構成元素的概念.Web頁面中的元素如表單,超鏈接,圖像和層都是DOM的一部分,這就為JavaScript訪問這些元素的屬性和方法提供了可能性。 ## 5、XMLHttpRequest對象創建（原生JavaScript） ~~~ var xmlHttp=createXMLHttpRequest(); function createXMLHttpRequest(){ var xmlHttp=false; //定義一個用與存儲XMLHttpRequest對象的引用 try{ //try程序段將適應除了IE6及其更早版本外的所有瀏覽器(包括IE7,IE8) xmlHttp=new XMLHttpRequest(); if(xmlHttp.overrideMimeType){ xmlHttp.overrideMimeType("text/xml"); } } catch(e){ //假設是IE6或其更早版本 var XmlHttpVersions=new Array('Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'Microsoft.XMLHTTP', 'MSXML2.XMLHTTP', 'MSXML.XMLHTTP'); //順序嘗試創建每個版本,直到有一個創建成功 for(var i=0; i<XmlHttpVersions.length && !xmlHttp; i++){ try{ //嘗試創建XMLHttpRequest對象 xmlHttp=new ActiveXObject(XmlHttpVersions[i]); } catch(e){} //忽略產生的錯誤 } } //返回創建的對象或顯示錯誤信息 if (!xmlHttp){ alert("Error creating the XMLHttpRequest object."); }else{ return xmlHttp; } } ~~~ 實例：兩個文件： **index.php：** ~~~ <input type='button' value='click' id='btnclick' onclick='getValue()'> <script> var xmlHttp; function createXMLHttpRequest(){ if(window.XMLHttpRequest){ var xmlHttp=new XMLHttpRequest(); if(xmlHttp.overrideMimeType){ xmlHttp.overrideMimeType("text/xml"); } }else{ try{ xmlHttp = new XMLHttpRequest(); }catch(e){ var XmlHttpVersions = new Array('MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'); for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++){ try{ xmlHttp = new ActiveXObject(XmlHttpVersions[i]); } catch (e) { } } } } if (!xmlHttp){ alert("Error creating the XMLHttpRequest object."); }else{ return xmlHttp; } } function getValue(){ var url="./test.php" xmlHttp=createXMLHttpRequest(); xmlHttp.open("POST", url, true); xmlHttp.onreadystatechange =function(){ if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { document.getElementById('btnclick').value=xmlHttp.responseText; } }} xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send("value=Test"); } </script> ~~~ **test.php** ~~~ <?php if($_POST['value']=='Test'){ echo $_POST['value']; } ?> ~~~ 獲得test.php文件的內容，內容是什么，你自己寫，要怎么改, 改這里就行`document.getElementById('btnclick').value=xmlHttp.responseText;` ##6、對象字面量語法、JSON: A: `{name:"dd",age:"16"}` B: `{"name":"dd","age":"16"}` 前者是Javascript的對象字面量語法，后者是JSON，后者是前者的一個子集如果就是寫JS代碼，那么只要風格統一，加不加都OK。我個人是傾向于不加的，因為表達數據的場景比較少，構建對象，聲明方法的場景比較多，作為方法名來說不加引號比較有sense。 ##7、 javascript:void (expression) 由來已久：Internet Explorer 4.0、Netscape Navigator 3.0 以后版本可以把JavaScript代碼寫在本來應該是url的地方。 `<a href="javascript:alert('Hello')">Click Me</a>` ----- `<a href="javascript:doTest2();void(0);">here</a>` 但這兒的void(0)究竟是何含義呢？ Javascript中void是一個操作符，該操作符指定要計算一個表達式但是不返回值。 void 操作符用法格式如下： ~~~ 1. javascript:void (expression) 2. javascript:void expression ~~~ expression 是一個要計算的 Javascript 標準的表達式。表達式外側的圓括號是選的，但是寫上去是一個好習慣。 (實現版本 Navigator 3.0 ) 你以使用 void 操作符指定超級鏈接。表達式會被計算但是不會當前文檔處裝入任何內容。下面的代碼創建了一個超級鏈接，當用戶以后不會發生任何事。當用戶鏈接時，void(0) 計算為 0，但 Javascript 上沒有任何效果。 > [疑問：為什么要使用href=”javascript:void(0);”？](http://www.zhangxinxu.com/wordpress/2013/01/why-use-href-javascript-void0/) ###8、JavaScript與DHTML的關系 **DHTML**(Dynamic HTML,動態HTML)是從 Internet Explorer 4.0 和 Netscape Communicator 4.0 開始支持的。它其實并不是一門新的語言，它只是HTML、CSS和客戶端腳本的一種集成，即一個頁面中包括html+css+javascript(或其它客戶端腳本)，其中css和客戶端腳本是直接在頁面上寫而不是鏈接上相關文件。DHTML不是一種技術、標準或規范，只是一種將目前已有的網頁技術、語言標準整合運用，制作出能在下載后仍然能實時變換頁面元素效果的網頁設計概念。JavaScript是DHTML中的核心技術，請牢牢掌握。 ###9、<=IE8瀏覽器判斷 if(!window.screenX){alert("IE8及以下瀏覽器不支持該屬性！")}