Pro JavaScript Techniques學習筆記

全域變數是Window對象屬性的一部分，例子： 複製代碼 代碼如下:var test = 'test';
alert(window.test);

瀏覽器渲染和操作HTML的大致順序：

HTML解析完畢
外部指令碼和樣式表載入完畢
指令碼在文檔內解析並執行
HTML DOM完全構造起來
圖片和外部內容載入
網頁完成載入
所有的主流瀏覽器都實現了innerHTML 屬性，但是因為沒有統一標準，所以或多或少會有一些怪異的bug。

基於Mozilla的瀏覽器在innerHTML聲明中並不回會返回<style>元素；
IE返回的元素字元都是大寫的；
innerHTML作為一個只能用在HTML DOM文檔的元素中的屬性，若在XML DOM文檔中使用的話只會返回null值。
檢查元素是否有用一個指定的屬性：

複製代碼 代碼如下:function hasAttribute(elem, name) {
return elem.getAttribute(name) != null;
};

JavaScript事件在兩個階段中執行：捕獲和冒泡。

GET請求不應具有破壞性的副作用(比如刪除一條訊息)。

點擊、滑鼠移至上方和滑鼠離開事件的任何場合下，都要考慮提供非滑鼠綁定的可選事件。 複製代碼 代碼如下:onmouseout –> onblur
onmousedown –> onkeydown
onmouseup –> onkeyup
onclick –> onkeypress
onmouseover –> onfocus

eg.

複製代碼 代碼如下:var ax = document.getElementsByTagName('a');
for (var i = 0; i < ax.length; i++) {
ax[i].onmouseover = ax[i].onfocus = function(){
this.style.backgroundColor = 'blue';
};
ax[i].onmouseout = ax[i].onblur = function(){
this.style.backgroundColor = 'white';
};
};

靜態定位：這是元素定位的預設，它簡單地遵循文檔的普通流動(flow)。當元素是靜態定位時，top和left屬性無效。

position:static;top:0px;left:0px;
相對定位：這種定位形式與靜態定位非常相似，因為元素會繼續遵循文檔的普通流動，除非受到其他指定的影響。但是，設定top或者left屬性會引起元素相對於它的原始(靜態)位置進行位移。

position:relative;top:-50px;left:50px;
絕對位置：絕對位置的元素完全跳出頁面配置的普通流動，它會相對於它的第一個非靜態定位的祖先元素而展示。如果沒有這樣的祖先元素，則相對於整個文檔。

position:absolute;top:20px;left:0px;
固定定位：固定定位把元素相對於瀏覽器視窗而定位。設定元素的top和left為0會使它顯示在瀏覽器左上方，它完全忽略瀏覽器捲軸的拖動，一直會出現在使用者的視野。

position:fixed;top:20px;left:0px;
開發預留退路(degrading gracefully)：為頁面增加任何形式的動態互動都有疏遠某部分使用者的潛在可能。應該時刻在意的是，當JavaScript或者CSS禁用的時候，Web應用程式應該具備基最基本可用性。