2012年12月5日 星期三

在 IE 上某些 element 的 innerHTML property 是唯讀



The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

Reference:
http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

JavaScript: addEventListener 設定 event handler 要同時傳遞參數時寫法

##
var someVar; 
someVar = some_other_function();
alert(someVar);
someObj.addEventListener("click",
                         function(){
                          some_function(someVar);
                         },
                         false);

##

Reference:
http://stackoverflow.com/a/256763

2012年11月28日 星期三

Event Object 在不同瀏覽器上相容性的問題

在 IE 上是一個由一個 Global 的 Object 來儲存。
在 IE 以外的瀏覽器上 (W3C 定義) 則是 Event 發生的當下傳遞 Event Object (event) 給 Event Handler。

##
You can access the event object differently in different browsers:
  • The window.event property is supported by Internet Explorer, Opera, Google Chrome and Safari. It returns a reference to an event object that is filled based on the current event.
    In Internet Explorer, the event object always has the same members, regardless of the event, but only a part of them is filled based on the current event.
    In Opera, Google Chrome and Safari, the type of the event object depends on the event.
  • In Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, when an event occurs, an event object is initialized and passed to the event handlers as the first parameter. The type of the event object depends on the current event.
    In Internet Explorer before version 9, an event object is passed to an event handler only if it is registered with the attachEvent method. If an event listener is registered with the attachEvent method, the passed event object is a copy of the window.event object in all Internet Explorer versions.

##

Reference:
http://dev.opera.com/articles/view/handling-events-with-javascript/#eventobjectreferences
http://help.dottoro.com/ljogqtqm.php

2012年11月27日 星期二

Event Handler 的寫法

##
function foo(evt) {
  // the evt parameter is automatically assigned the event object
  alert(evt);
}
table_el.onclick = foo;
 ##

Reference:
DOM_Event_interface

2012年11月9日 星期五

CSS:opacity 的相容性


以這段程式碼為例:

function gradient(id, level)
{
    var box = document.getElementById(id);
    box.style.opacity = level;
    box.style.MozOpacity = level;
    box.style.KhtmlOpacity = level;
    box.style.filter = "alpha(opacity=" + level * 100 + ")";
    box.style.display="block";
    return;
}

box.style.opacity = level; //相容於 Firefox、Safari、Opera、IE8 and previous
box.style.MozOpacity = level; //Firefox 0.9
box.style.KhtmlOpacity = level; //Safari 1.2
box.style.filter = "alpha(opacity=" + level * 100 + ")"; //IE9.0 and above

Reference:
https://developer.mozilla.org/en-US/docs/CSS/opacity

HTML: div 和 span 的差異

div 和 span 都可以利用 id 或 class 的宣告經由 CSS 來定義 style。

兩這間的差異主要在於,
div 是一次定義一整個區塊,

而 span 則是定義區塊內部的其中一部分,
所以div 當中可以夾帶一個以上的 span ,
span 中定義的內容不會受到外部 div 的定義影響,
讓區塊中的 style 變化更加豐富。


Reference:
The SPAN and DIV HTML Elements

2012年8月15日 星期三

2012年8月14日 星期二

Difference between parameter and argument

Parameter:
Parameter 指的是函數的原型 (Prototype) 與定義 (Definition) 中規定必須接到的參數 (Parameter) 資料格式 (Format)。

Argument:
Argument 指的是函數呼叫中 (Function call) 所傳遞的引數 (Argument)

Reference:
http://job.achi.idv.tw/2010/03/31/argument-vs-parameter-%E7%9A%84%E7%BF%BB%E8%AD%AF/
http://www.tru64unix.compaq.com/docs/base_doc/DOCUMENTATION/V40F_HTML/AQTLTBTE/DOCU_056.HTM
http://en.wikipedia.org/wiki/Parameter_%28computer_programming%29

2012年8月13日 星期一

C 指標整理

A.     比較三種宣告之間的差異
 int p1;
p1 為一個整數變數,變數內容為一個整數
 int *p2;
p2 為一個指標變數,變數內容為一個指標,指向一個儲存整數的空間
 int **p3;
p3 為一個指標變數,變數內容為一個指標,指向另一個儲存指標的空間。另一個指標指向儲存整數的空間。
 int *p4( );
p4 為一個函數指標,指向一個函數


B.     比較六種宣告之間的差異
char p1;
p1 為一個字元型態的變數,變數內容為一個字元
char *p2;
p2 為一個指標變數,指標指向一個儲存字元的空間
char **p3;
p3 為一個指標變數,變數內容為一個指標,指向另一個儲存指標的空間。另一個指標指向儲存字元的空間
(char *)p4[20];
p4 是一個陣列儲存 20 個字元型態的指標
char (*p5)[20];
p5 是一個指標變數,指向一個 20 個字元大小的空間
char (*p6)[20][40];
p6 是一個指標變數,指向一個 20*40 字元大小的空間


C.     比較三種宣告之間的差異
char const *p1;
const char *p2;
char * const p3; 

1. char (Type) const (Qualifier) 為等價關係,順序不影響宣告代表的意義,
所以 char const const char 的意義是相同的。
2. 閱讀的的技巧:先將 Type 部分省略
const *p1
p1為一個指標變數,指標變數的內容 (指標) 所指向的值不可修改
const *p2
p2 為一個指標變數,指標變數的內容 (指標) 所指向的值不可修改
* const p3
p3 為一個指標變數,指標變數的內容 (指標) 不可修改

2012年8月3日 星期五

解析 Javascript 物件

以 document.location.href.match 為例:

document 為整個物件的基底,match 則是 string type 的 method。
所以我們應該先了解 document.location.href 的 data type,
再進一步了解 document.location.href 這種 date type 下有哪些 method 可以使用。


2012年7月26日 星期四

Basic CSS Concept

Three ways to insert CSS:

1. External style sheet
2. Internal style sheet
3. Inline style


Multiple style sheets:

If some properties have been set for the same selector in different style sheets,
the values will be inherited from the more specific style sheet.

Cascading order:

1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)

Reference: http://www.w3schools.com/css/css_howto.asp

2012年7月19日 星期四

URI / URN / URL

http://en.wikipedia.org/wiki/Uniform_resource_identifier

URI (Uniform Resource Identifier):
如圖所示 URI 包含了 URN (Uniform Resource Name) 和 URL (Uniform Resource Locator)


2012年7月17日 星期二

五項針對跑者核心肌群的訓練動作(train your core like a runner)


http://www.unclesam.cc/blog/train-your-core-like-a-runner/

好文 - 閱讀他人的程式碼

閱讀他人的程式碼(1)─讀懂程式碼,使心法皆為我所用

1. 讀懂別人寫的程式碼,讓你收穫滿滿。
2. 先了解系統架構與行為模式,再細讀。
3. 接觸他人的程式碼,大致上可以分為三種程度:
a. 了解
b. 修改、擴充
c. 抽取、提煉

4. 閱讀程式碼的重點,不在於讀完每一行程式碼,而是在於有效率地透過探索及閱讀,從而了解系統的架構及行為模式。以便在你需要了解任何片段的細節實作時,能夠很快在腦上對映到具體的程式碼位置,直到那一刻,才是細讀的時機。

5.  熟悉溝通語言與慣例用語。
6. 掌握程式碼撰寫者的心態與習慣。


閱讀他人的程式碼(2) 摸清架構,便可輕鬆掌握全貌

1. 閱讀程式碼的目的,在於了解全貌而非細節

2. 從個別的類別行為著手,是由下至上(Bottom-Up)的方法;在閱讀程式碼時,卻應該先採由上至下(Top-Down)的方式。對程式碼的閱讀來說,由上至下意謂著,你得先了解整個系統架構。

3. 探索架構的第一件事:找出系統如何初始化

4. 在試著探索一個系統的長相時,我們應該找出來幾個答案,了解在它所用的架構下,下列這件事是如何被完成的:
a. 系統如何初始化
b. 與這個系統相接的其他系統(或使用者)有那些,而相接的介面又是什麼
c. 系統如何反應各種事件
d. 系統如何處理各種異常及錯誤


 閱讀他人的程式碼 (3) 優質工具在手,讀懂程式非難事

1. 因為在閱讀程式碼時,最常做的事,就是隨著程式中的某個控制流,將閱讀的重心,從某個函式移至它所呼叫的另一個函式。

2. grep
3. gtags
4. htags


閱讀他人的程式碼 (4)望文生義,進而推敲組件的作用

1. 好的說明文件難求,拼湊故事的能力很重要
2. 探索架構的第一步──找到程式的入口
3. 系統多會採用相同的架構處理
4. 隨著實務經驗,歸納常見的架構模式


閱讀他人的程式碼(5)找到程式入口,再由上而下抽絲剝繭

1. 適度忽略不需要了解的細節─這是一個很重要的態度。因為你不會一次就需要所有的細節。
2. 找到入口點後,多半採取由上而下(Top-Down)的方式,由最外層的結構,一層一層逐漸探索越來越多的細節。
3. 展開的同時,隨手記錄樹狀結構
4. 根據需要了解的粒度(Granularity),決定展開的層數


閱讀他人的程式碼(6)閱讀的樂趣:透過程式碼認識作者

1. 好的名稱能夠摘要性地點出實體的作用
2. 轉換立場,理解作者的思考方式
3. 從程式碼著手認識作者獨有的風格,進而見賢思齊

2012年7月10日 星期二

函示呼叫使用結構參數或指標參數的比較



結構參數
指標參數
效率
速度較慢:需要複製完整的資料來產生複本
速度較快:只需複製指標
空間
佔用空間較多:每次呼叫都需要產生複本,每個複本都需要使用完整的結構所需的空間,且結構中的成員未必都被使用到
佔用空間較少:只需產生指標的複本
相容性
較低:因為舊版的編譯器不一定支援結構參數的呼叫
較高:舊版編譯器即支援指標參數的呼叫
資料保護
較高:因為會產生資料複本,所以不會直接存取到原始資料
較低:會直接存取到原始資料,但可以用 const 的方式避免非必要的修改

2012年7月6日 星期五

GCC option -E and -S

  -E                       Preprocess only; do not compile, assemble or link 
  -S                       Compile only; do not assemble or link



"-S" 可以讓我們看到 code 編譯成組語的結果,我們也可以透過這種檢視方式來判斷執行的效率

2012年7月3日 星期二

FreeRADIUS 官方對各種 EAP Method 的說明

http://wiki.freeradius.org/EAP

MD5: 對 EAP 中傳送的帳號密碼加密
TLS: Server/Client 雙方靠憑證來認證
TTLS: 將 EAP 封裝加密
PEAP: 將 EAP 封裝加密

2012年6月13日 星期三

心不難,事就不難

今天聽到最有感覺的一句話 (其實我很怕麻煩也怕難)

2012年5月29日 星期二

PHP 與 MySQL 溝通的資料編碼問題

PHP 和 MySQL 雙方傳遞資料的編碼要正確才能避免亂碼的問題。

要避免亂碼的問題以下兩個條件必須使用一致的編碼:
1. 網頁在瀏覽器所使用的編碼
2. MySQL Client 設定使用的編碼

針對 PHP 和 MySQL 間溝通所使用的編碼,
我們可以使用 mysql_client_encoding 來確認目前 MySQL Client 所使用的編碼,
並用 mysql_set_charset 來做設定的動作。

Reference:
mysql_client_encoding
mysql_set_charset

2012年4月3日 星期二

RFC2544

Throughput:
    a. Specific rate
    b. Specific frame size
    c. Binary Search ( Fail = Reduce the rate)
    d. Result = Maximum rate ( frames/second or bits/second)

Latency:
    a. Maximum rate (Result of throughput testing)
    b. Specific corresponded frame size
    c. Option:
        c-1 Store and Forward (LIFO)
        c-2 Bit Forwarding (FIFO)
        c-3 Cut Through (LILO)
    d. Result =>time interval
       
Frame Loss Rate:
    a. Specific maximum rate (100% Utilization)
    b. Specific frame size
    c. Binary Search (Fail = Reduce the maximum rate (10% interval))
    d. Result: Frame loss rate (%)

Back-to-Back:
    a. Minimum inter-frame gap
    b. Send a specific number of frames
    c. Binary Search (Reduce the length of burst)
    d. Result: Frame count

2012年3月26日 星期一

Windows 7 遠端桌面設定

1. 控制台→系統→遠端設定 (務必選取使用者,即使已顯示有權限)
2. 檢查使用者是否已加入 Remote Desktop Users 群組
3. 檢查防火牆
4. 更新到最新的 patch

2012年3月9日 星期五

職場心得分享

剛跟老婆去吃中華附近最近開的一家簡餐店,
老闆夫婦都曾在 TSMC 擔任主管。

聽老闆娘分享以前在職場的經驗:

賺人生經驗比賺很多錢重要,
保護好自己的立場比保護好利益重要,
有度量、不計較、盡本分、正向思考、多運動,
活得久才賺得多,賺得多也要用得到。

2012年1月31日 星期二

可能的職涯規劃

QA -> Senior QA -> QA Leader -> Management
QA -> FAE
QA -> Marketing
QA -> Pre-sales
QA -> Software RD -> Senior Software RD

OA Value:
1. Study new feature
2. Study Client application
3. Management

RD Value:
1. Plan software architecture
2. Plan software SPEC.
3. Management