大笨鳥的私房菜

瀏覽器
版本號
  navigator.userAgent


Chrome
26.0.1410.43

 Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.31 (KHTML, like Gecko)

 Chrome/26.0.1410.43 Safari/537.31

Firefox
20.0.1
 Mozilla/5.0 (Windows NT 5.1; rv:20.0) Gecko/20100101 Firefox/20.0


Safari
5.1.7 (7534.57.2)

 Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.57.2 (KHTML, like Gecko)

 Version/5.1.7 Safari/534.57.2

Opera
12.01
 Opera/9.80 (Windows NT 5.1; U; zh-tw) Presto/2.10.289 Version/12.01


IE8
8.0.6001.18702

 Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET

 CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C)

IE7
7.00.5730.13

 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727;

 .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C)

IE6
6.00.2900.2180

 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 2.0.50727;

 .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C)

這幾天找資料時無意間看到了這個網頁
http://eligrey.com/demos/FileSaver.js/
上面除了應用了 File API 之外，另外讓我感興趣的就是按一下按鍵就能下載。
當然這功能似乎一般的超連結寫法或是交由後端 server 程式處理也能做到，但一般超連結如果遇到的是瀏覽器認識的檔案，如圖檔之類的，就會直接在瀏覽器開啟，使用者如果要下載，就必需要開啟右鍵選單來下載，而交由後端 server 程式就開發者而言就更麻煩了，因此就小小研究一下這個功能。

 
經度：

JavaScript 最常用的用法之一為操作頁面上的 DOM elemnt，而 DOM element 屬性中，同樣都是寬度，就有區分為 offsetWidth、clientWidth 與 offsetWidth 這幾種，而這之間的差別如下：
scrollWidth : 
element 的真正寬度，會依其內容而有所增加，並不一定會是設定在 style 中的 width 的值。
其值也不包含自身的邊線 (border) 寬度，但若是其內容是一個比自身還寬 element，
則在 Firefox 與 Chrome 中，會計算內容 element 的 border 寬度，而在 IE 中則不會 (請看範例)。
clientWidth :
element 不包含邊線 (border) 與捲軸 (scrollbar) 的可視寬度。
此值 border 為 0 時，IE 與 Firefox、Chrome 是一樣的，但若 border 不為 0，則此值在此兩種瀏覽器會有所不同，原因請看範例說明。
offsetWidth :
element  包含邊線 (border) 與捲軸 (scrollbar) 的可視寬度。
此值 border 為 0 時，IE 與 Firefox、Chrome 是一樣的，但若 border 不為 0，則此值在此兩種瀏覽器會有所不同，原因請看範例說明。
 

問題描述：
當頁面上有某個 Tag 被包在 A Tag 之內 (例如：<a><p>文字</p></a>)，若取得此 Tag 並使用 innerHTML 來填入字串時，Firefox 會很雞婆的在填入的字串前後自動加上 A Tag。
例如：我們要取得如下結構中的 P Tag 後，用 innerHTML 填入文字
<a id='link'><p id="text">TEXT</p></a>

(原文) arguments : A JavaScript Oddity
(翻譯) 奇異的 Arguments
 
(翻譯) Array.prototype 的泛型應用

eval 效能不彰已是公開的事實，但有時又似乎非它不可，但 eval 真的是無可取代的嗎？
小弟無意中在某中國網站上發現高手提供兩種 eval 常用方式的替代方法，現公佈在下方：

使用 eval 解析/ 轉換 JSON 字串的替代方案：
使用 eval 將 JSON 字串轉成 Object 是常用的方式，雖然目前第三方廠商提供的 Javascript 函式庫都已經包含了解析 JSON 字串的方法，但如果只是很解單的寫個程式又不想使用第三方廠商提供的函式庫時，可以用以下的寫法：
var jsonObj = (new Function('return ' + JSON 字串))();
完整的範例：

function test24(){

 var jsonStr = "{'name':'camus'}";

 var jsonObj = (new Function('return ' + jsonStr))();

 alert(jsonObj.name);

 }

 

使用 eval 執行字串形態的指令碼替代方案：
使用 eval 來執行一個字串形態的指令碼也是非常常見的使用方式，替代的方式也不難，就是先在頁面上新增一個 SCRIPT 節點，然後將字串形態的指令用 Script 節點屬性 .text 丟入即可。

function test25() {

 var script = document.createElement("SCRIPT");

 document.body.appendChild(script);

 script.text = "var a = 1; a++;";

 alert(a);

 }

 

使用以上的方法時請注意， 在 Firefox 與 Chrome 瀏覽器中，新增出來的 Script 節點只有一次使用 .text 來執行字串形態指令碼的機會，但在 IE 則無此限制，也就是以上的範例若是改成下述：

function test25() {

 var script = document.createElement("SCRIPT");

 document.body.appendChild(script);

 script.text = "var a = 1; a++;";

 alert(a);

 script.text = "var b = 100; b--;"; // 此行在 Firefox 與 Chrome 中不會被執行

 alert(b);

 }

 

則在 Firefox 與 Chrome 中，alert(b) 將會出現錯誤， 其主要原因是 script.text = "var b = 100; b--;" 這串指令碼雖然被塞入了 Script 節點中，但是卻沒有被執行。
因此要跨瀏覽器執行的方式就是每次要執行字串型態指令碼時，先新增一個 Script 節點，等執行完指令後再移除掉。等下一個新的指令碼要執行時再新增一個新的 Script 節點，一樣是執行完就移除，以下為修改後的範例：

function test25() {

 var script = document.createElement("SCRIPT");

 document.body.appendChild(script);

 script.text = "var a = 1; a++;";

 document.body.removeChild(script); // 執行完畢後移除 Script 節點

 alert(a);

 

 script = document.createElement("SCRIPT"); // 若要執行下個指令碼，則新增一個新的 Script 節點

 document.body.appendChild(script);

 script.text = "var b = 100; b--;";

 document.body.removeChild(script); // 執行完畢後移除 Script 節點

 alert(b);

 alert(a);

 }

 

不小心在網路上看來的技巧，只是還沒試過就是了~
 
『只要攔截掉 KeyCode 229，就能停用中文輸入法』
 
【資料來源】

YUI Doc 是一套 YAHOO YUI 團隊開發出來專門用來產生 Javascript API 文件的程式，經由 YUI Doc 所產生出來的 API 長得就和 YUI 官網上的 API 文件格式是一樣的。
 
YUI Doc 雖然是一個不錯用的工具，但是安裝起來有點麻煩，因此本篇文章就是要介紹如何在 Windows 環境下將 YUI Doc 一次安裝到好。步驟一：  首先電腦中要先安裝 Python 和 setuptools。
Python 使用的是 2.4.3 到 2.5 之間版本，雖然 Python 的版本已經到 3.0.1 了，但是由於 setuptools 最多只支援到 Python 2.5 版，因此 Python 最好不要超過 2.5 版。
(以下範例使用 Python 2.4.3)

1. 下載 Python
   http://www.python.org/ftp/python/2.4.3/python-2.4.3.msi
    
2. 安裝 Python。
   預設的安裝路徑為『C:\Python24』
    
3. 下載 setuptools
   http://pypi.python.org/pypi/setuptools
    
   因為在範例中安裝的是 Python 2.4.3 版，所以請下載其中的
   setuptools-0.6c9.win32-py2.4.exe
    
4. 安裝 setuptools。
    
5. 將 Python 的安裝路徑加入 Windows 的環境變數 Path。
   
   1. 在『我的電腦』上按滑鼠按鍵，並在跳出來的選單上選擇『內容』。
       
   2. 點擊『進階』，並按下『環境變數』按鈕。
       
   3. 在『系統變數』的變數列表中找出『Path』，並在其上點擊滑鼠左鍵兩次。
       
   4. 將 Python 的安裝路徑『C:\Python24』加到『變數值』欄位中。如果變數值欄位中已有值，請用分號隔開。如：
      C:\Java6.0\bin;C:\Python24。
       
   5. 一路按下『確定』鈕離開。

步驟二：  

在成功安裝完 Python 和 setuptools 之後，就可以使用 easy install 的功能了。
因此接下來要使用 easy install 功能來安裝 pygments、Cheetah 與 simplejson。

1. 進入 easy install 執行檔目錄。
   CD C:\Python24\Scripts
   (註：C:\Python24 為Python 的安裝路徑)
    
2. 安裝 pygments。請 key 入下列指令。
   easy_install pygments
    
3. 安裝 Cheetah。請 key 入下列指令。
   easy_install Cheetah
    
4. 安裝 simplejson。請 key 入下列指令。
   easy_install simplejson
    

請注意：pygments、Cheetah 與 simplejson 不需要上網 download，因為當你使用 easy_install 指令時，它會自動上網去抓取檔案下來安裝。步驟三：  下載並安裝 YUI Doc。

1. 下載 YUI Doc
   http://yuilibrary.com/downloads/yuidoc/yuidoc_1.0.0b1.zip
    
2. 解壓下載回來的 Zip 檔。
   在此範例中，將解壓到 C:\yuidoc
    
3. 安裝 _namemapper.pyd。
   將 C:\yuidoc\ext\_namemapper.pyd 複製到
   C:\Python24\Lib\site-packages\cheetah-2.0.1-py2.4.egg\Cheetah

步驟四：  修改 YUI DOC 的 example.bat

1. 打開 C:\yuidoc\bin\example.bat
    
2. 修改以下的參數
   REM 此為 YUI DOC 的目錄，在此範例中為 C:\yuidoc
   SET yuidoc_home="c:\yuidoc"
    
   REM 要生成 API 的 js 路徑。
   REM 如果有多個路徑，用空白隔開，例如：
   REM     SET parser_in="c:\myJS\js c:\Event.dev\src"
   SET parser_in="C:\testyuidoc\jsdata"
    
   REM YUI DOC 會把解析的 js 提取出來放置在此路徑上
   SET parser_out="C:\testyuidoc\parser"
    
   REM YUI DOC 產生出來的 API 文件會放置在此路徑上
   SET generator_out="C:\testyuidoc\jsdatadoc"
    
3. 存檔

一般來說，只要執行到步驟四之後，就能執行 example.bat 來解析 js 檔並產生出 API 文件，但是若你的 js 檔內的註解(/** ... */)包含了中文，則會丟出『TypeError: writelines() argument must be a sequence of strings』的錯誤。這個問題的原因是 YUI DOC 不支援中文！那該如何解決呢？請參照下面的步驟五。
 步驟五：  修改 YUI DOC 程式以支援中文註解。

1. 打開 C:\yuidoc\bin\yuidoc_highlight.py
    
2. 找到『out.writelines(highlighted)』(約在第 57 行)
    
3. 將『out.writelines(highlighted)』改成
   『out.writelines(highlighted.encode('UTF-8'))』
    
4. 存檔。

再執行一次 example.bat，你會發現已經能夠成功的產生出中文註解的 API 了。
 後記：  如果 js 註解中缺少了『@module』與『@class』是無法成功產生 API 的。
少了『@module』雖然只會產生 API 的 index 文件，但卻無法產出該 js 檔的 API 文件。
而少了『@class』則會在執行 example.bat 時，直接丟出錯誤。
 後續補充： 

1. 產生的 API 文件中，Modules 和 Files 無法吻合。
   有二個 js 檔，放置的路徑分別為：
   C:\js\BaseJS\event\EventUtils.js (module 設為 event) 與 C:\js\BaseJS\form\FormUtils.js (module 設為 form)，
   但 example.bat parser_in="C:\js\BaseJS"
    
   此時產生出來的 API 文件中，選擇 module event 時，其對應到的 Files 除了 EventUtils.js 之外，竟然還有 FormUtils.js。而選擇 module form 時，竟然沒有 Files 欄位，表示 module form 沒有對應到任何 js。
   此問題應該是 parser_in 指到這兩個 js 共有的父欄位，造成了 YUI DOC 將這兩個獨立的 js 當成是互有關聯(同一個實體 module？)來看待，因此解決之法是將這兩個 js 路徑在 parser_in 中分開寫，如下：
   parser_in=C:\js\BaseJS\event C:\js\BaseJS\form
   
   由以上得知，最好不同的 module 不要放在同一個目錄下，以免 YUI DOC 發生誤判。
    
2. 同一個 js 檔有兩個 module
   YUI DOC 可以解析出同一個 js 檔有兩個 module 的情況，但是在產生出來的 API 文件中，第二個 module 就不會對到任何一個 js 檔 (即沒有 Files 欄位)，因此建議若一個 js 檔有兩個 module 的清況，最好還是分開成兩個 js 檔比較好。
    
3. @namespace 具有向下延展性，甚至會跨到同一個 module 下的不同 js 檔。
   當我們在某一個類別註解 @class 上多加上一行 @namespace 時，在此類別之後的所有類別都會自動被加上 namespace。
   例如：
   有一個類別上的註解為
   /**
      * @namespace YAHOO.util
      * @class FormUtils
      */
    
   則此 class 最後呈現在 API 文件上的 class 名稱為 YAHOO.util.FOrmUtils。
   接著，在此類別之後我們又寫一個類別註解
   /**
      * @class EventUtils
      */
   
   這個類別我們並沒有給他任何的 namespace，但在 API 文件中呈現出來的卻是 YAHOO.util.EventUtils。由此我們可以看到在某個類別被設定了 namespace 之後，這個 namespace 將會一直存在於描述於此類別之後的任何一個類別，就算之後的類別是寫在別的 js 檔，但只要是同一個 module，namespace 仍會一直延續下去。
   要解決這個問題，我們只能在加了 namespace 類別的下一個類別中加上一個空的 namespace。如下：
   /**
      * 這是加了 namespace 的類別
      * @namespace YAHOO.util
      * @class FormUtils
      */
   /**
      * 在加了 namespace 類別的下一個類別中
      * 加上一個空的 namespace
      * @namespace
      * @class EventUtils
      */
   
    如此就能解決 namespace 向下延續的問題。
    

參考文件：

• YUI DOC 官網
• 隨網起舞
• Python 教學文件 - 3.1.3 Unicode 字串

當我們想要從被 event 觸發的 function 中取得 event 物件時，如果 function 並沒有 event 這個參數時該如何取得 event 物件呢？
 一般而言，我們在撰寫這種 function 時都會在 function 的傳入參數放上 event 這個參數，讓  javascript engine 自動將 event 物件傳入，比方說：
 
    function handler (theEvent) { .....}
   
    document.getElementById('test').onclick = handler;