Javascript 語法教學、技巧 (筆記)

Javascript 教學

◎ JavaScript 處理 W3C DOM 教學：「KingKong Bruce記事── JavaScript - W3C DOM簡介」

◎ JavaScript 進階概念、整理、教學：「KingKong Bruce記事── JavaScript 標籤」

◎ 寫 javascript 的良好習慣：「Javascript 編程風格」

◎ 優化 javasript 代碼：「木草人──如何優化你的JS代碼」

◎ 存取物件屬性的方式：「網站製作學習誌──[JavaScript] 存取物件屬性的方式」

◎ 匿名函數詳解：「隨網之舞──Javascript的匿名函數」、「討論串１、２、３、４」

◎ javascript 速查表：「KingKong Bruce記事──JAVASCRIPT屬性及方法速查表」

◎ Javascript 設計模式：「WFU BLOG──Javascript 設計模式(筆記)」

◎ Javascript 糟糕與不良的部分：「WFU BLOG──Javascript 優良部分(筆記)__糟糕與不良的部分」

Javascript 語法技巧

1. 圖片：

◎ 預先讀取圖片，節省時間：「魚蛋村──預先讀取圖片」

◎ 圖片不存在時顯示預設圖：「demoshop──利用onerror()處理圖片失連時替換顯示圖」



2. 文字、符號：

◎ 符號切換：「Swapping Content」

◎ 切換 顯示／隱藏：「Toggle Visibility - Show/Hide Anything」

◎ 文字隱藏開關：「魚蛋村──文字隱藏開關」

◎ 判斷全形或半形字：「怎麼利用 JavaScript 來判斷全形或半形」
完整解在五樓

◎ 標準判斷是否為中文字：「Greens Box──使用 Unicode 標準判斷是否為中文字」

◎ 傳送網址有中文字元：必須將字串用 encodeURI() 編碼，否則在 IE 下必當。

◎ 取得所有文字節點：「Find all text nodes in HTML page」


3. 正規表示式：

◎ 線上自動產生器：「JavaScript Regex Generator (beta)」、「這個線上工具的使用教學」

◎ 正規表示式圖解：「Regular Expressions for client-side JavaScript」

◎ 網址轉超連結語法：「Regular expression for detecting hyperlinks」
最後一樓語法有效。


4. 事件：

◎ 禁止滑鼠拖曳：「一个禁止右键、选择、拖曳、清空剪切板、禁止网页另存为的实用JavaScript脚本」

◎ 相容IE和Firefox的按鍵捕捉：「event.keyCode - 寫出相容IE和Firefox的按鍵捕捉及識別代碼」

◎ 讓 DIV 能監控事件 onfocus ：「Is it possible to focus on a div using javascript focus() function?」重點為，該 div 要設定像 tabindex="0" 這樣的參數即可。

◎ 偵測 iframe 被點擊：「Detect Click into Iframe using JavaScript」

◎ onchange 在 IE 的問題：把 javascript 寫在 onchange="" 的敘述裡面，IE 下可能無法執行，必須用呼叫 function 的方式才行，例如 onchange="abc()"。

◎ 傳遞參數到迴圈中的事件：「Passing parameters on event listeners with loops」

◎ javascript 寫在 href 與寫在 onclick 的差別：「JavaScript Function in HREF vs OnClick()」


5. HTML 相關：

◎ IE 下使用自定義標籤的技巧：「Getting HTML 5 styles in IE 7+」

◎ 文字區塊(textarea)自動變大的方法：「卜維丰──文字區塊的自動增大術」

◎ 取得 style 屬性的值：「javascript getComputedStyle,getPropertyValue,CurrentStyle說明」

◎ innerHTML vs appendChild 何者比較快：「JavaScript AppendChild 引發的思考」

◎ IE 下 innerHTML.replace() 出問題的原因：innerHTML.replace() 在每個瀏覽器都可正常執行，但 IE 對 innerHTML 做了諸多限制，請參考「微軟的官方說明」，innerHTML 在以下物件是唯讀的屬性：col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, tr ，所以此時 replace() 就無效了；以此延伸，想要用 replace() 改 innerHTML 裡面標籤的 style 屬性也是無效，以上情形都是在 IE 下要注意的。

◎ javascript 獲取 select 的當前值：「xxx──[原創] javascript獲取select的當前值（相容IE6、IE7、Firefox2.0）」
為何要這麼麻煩，寫這麼一長串的程式碼？兇手又是那個「爛瀏覽器」，別的瀏覽器都吃 document.getElementById("select").value，就是IE 不吃，所以非得用這篇文章的語法...


6. 函數、方法：

◎ parseInt('08')：「卜維丰──傳說中 JavaScript 的 parseInt('08')」

◎ 剔除陣列中重複的值：「Eliminating Duplicates」


7. 同步、非同步處理：

◎ 讓 js 能同步載入：「CodeNote──用readyStae狀態實現頁面中的js實現同步載入」

◎ 四種動態載入外部 js 的方法(三個非同步、一個同步)：「4 ways to dynamically load external JavaScript(with source)」

◎ Ajax 頁面保有連結記錄：先安裝jQuery──

$("要添加ajax點擊的class").live("click",function(){
if(!(history.pushState)){return;}
history.pushState(null, document.title, this.href);
return false;
});

8. 其他：

◎ javascript不同寫法對效能影響的實測數據：「小殘的程式光廊──JavaScript效能測試與最佳化」

◎ 跳到指定錨點-1：「用javascript來控制頁面跳到指定錨點」
無法用這個方法跳到動態產生的錨點。

◎ 跳到指定錨點-2：「用scrollIntoView跳到指定錨點」

◎ 判斷瀏覽器：「利用js來判斷流覽器類型」

◎ 判斷訪客 IP：「Get Client IP using just Javascript?」

◎ IE 陣列無法用 indexOf 的解法：「Array.indexOf does not work in Internet Explorer...So make it!」

◎ 在 IE 下最後一個物件不能用 "," 結尾，否則必當。

◎ 根據上面那一點，衍伸出一個判斷是否為 IE 瀏覽器的簡單語法技巧：

var ie = !-[1,]
如果是 IE 瀏覽器，那麼 ie 的值為 true；如果非 IE 瀏覽器，那麼 ie 的值為 false。

Javascript 註記方式

◎ 不解析特殊字符：
//<![CDATA[
javascript 程式碼 可包含 < > & " 等符號
//]]>

◎ 單行註解：
// 註解內容

◎ 多行註解：
/*
註解內容
*/

◎ CSS 的註解：
/* 註解內容 */

◎ HTML 的註解：
<!--
註解內容
-->

◎ 避免不支援 javascript 的瀏覽器產生錯誤的寫法：
<!--
JavaScript 程式碼
//-->

以及加上 <noscript>您的瀏覽器不支援JavaScript，請更換支援 JavaScript 的瀏覽器。</noscript>

Javascript 混淆、壓縮

◎ 線上混淆工具：「Encrypt Text Using Javascript」

◎ 線上壓縮工具：「Online JavaScript/CSS Compression Using YUI Compressor」

Javascript 相關筆記：