2012年4月18日

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

A+

(Pic from: bestfreeicons.com, Jeremybennett Sticky Note Pad And Pencil clip art)

Javascript 教學

 JavaScript 基礎教學:JavaScript 教學

 JavaScript 處理 W3C DOM 教學:KingKong Bruce記事── JavaScript - W3C DOM簡介

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

 一些 JavaScript 技巧:那些相見恨晚的 JavaScript 技巧

 寫 javascript 的良好習慣:Javascript 編程風格

 讓 javaScript 執行有效率的寫法:高效 JavaScript

 優化 javasript 代碼:木草人──如何優化你的JS代碼

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

 匿名函數詳解:隨網之舞──Javascript的匿名函數」、「討論串1

 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 標準判斷是否為中文字

◎ 使用中文排序:目前單靠 javascript 是不可能做到的事

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

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


3. 正規表示式:

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

◎ 正規表示式及線上驗證工具:石頭閒語──Regular Expression (RegExp) in JavaScript

◎ 常用正規表示式範例:阿維實驗室──常用的正規表示式(Regular Expression)

◎ 正規表示式圖解:Regular Expressions for client-side JavaScript

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


4. 事件:

◎ 破解網頁鎖滑鼠右鍵:Crazy X Lab.──破解網頁鎖滑鼠右鍵 Hack right click

◎ 禁止滑鼠拖曳:一个禁止右键、选择、拖曳、清空剪切板、禁止网页另存为的实用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. 函數、方法:

◎ 隨機函數應用:飛度──幾個不錯的JavaScript亂數函數,隨機整數函數,random()

◎ 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效能測試與最佳化

◎ 開啟置中小視窗:伊沙熊的學習筆記本──【練習】開啟置中小視窗(AS3+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 相關筆記:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。