ITseer - 資訊知識分享 | 程式技術討論

2012年5月17日

今天在逛網站的時候無意間發現這個網站
http://bundlr.com/

這個網站下方的方格框框的背景效果十分的有FU，看起來就像是有很多資料在裡面

觀察其實作方式並非使用圖片作為背景，而是使用css的旋轉模擬出來的。

後來點擊內中的連結進入這個網站

http://bundlr.com/b/creative-photography

它的圖片Layout也相當的美觀。

UI Reference & Learning

2012年5月5日

簡介

jQuery Hotkeys 是一款讓你能夠輕鬆設定鍵盤按鍵的插件，使用它你可能很簡單的新增/移除鍵盤事件，而且它幾乎支援所有的鍵盤按鍵組合(key combination)。

2012年5月1日

一般標題

我是文章內容我是連結我是文章內容

文章內副標題

我是文章內容我是連結我是文章內容

吃橘子囉！文章輕薄短小，吸收科技新知沒負擔，一起來看看今天在 TechOrange 上最受讀者們歡迎的 TOP5 文章吧！

非數字列表

非數字列表
非數字列表

數字列表

非數字列表
非數字列表

顏色非數字列表

非數字列表
非數字列表

顏色數字列表

非數字列表
非數字列表


var code = "";

2012年4月29日

jQuery naturalWidth naturalHeight 取得原始的大小

簡介

這篇文章主要為作者碰到的一個問題，相信大家都使用過jQuery提供的width及height方法，但是這個方法所取得的大小並非原始的尺寸，那該如何取得正確的尺寸呢??

解決方式

其實jQuery並沒有提供這樣的方法，但是我們可以透過javascript的方式取得，使用方式很簡單，在javascript中每個DOMElement都有naturalWidth及naturalHeight兩個屬性，所以如果要使用jQuery取得這個值就直接使用get或[0]將jQuery物件轉回javascript物件在取得該屬性即可，程式碼如下。


    var naturalWidth = $("#my_id")[0].naturalWidth;
    var naturalHeight = $("#my_id")[0].naturalHeight;

後記

其實你喜歡的話你也可以將這個寫成jQuery的函式(jQuery.fu.yourMethod)，但這個實在是太簡單了所以作者就沒有將它而外寫成Plugin囉。

2012年4月20日

OpenCV灰階化－使用cvCvtcolor

簡介：
灰階化，是影像處理過程中不可或缺的一部分，很多時候都會用來做為前處理的一部分，那麼我們來看看，在openCV中要如何使用內建的工具來完成呢？

2012年4月15日

作者：Espen Brunborg   翻譯：雷皓漪

原文：http://uxdesign.smashingmagazine.com/2012/03/15/symptoms-of-epidemic-web-design-trends/

    自從Elliot Jay Stocks 嚴肅地告誡我們應該摒棄web2.0的外觀，我們看到了互聯網的巨大改變。互聯網上不再有那麼多水晶按鈕、斜面的邊緣、反射效果、特價徽章、著色鮮豔而粗糙的斜面、斜線的背景版式等。除了那些光滑設計狂熱愛好者，這種轉變已經被大部分人所接受。可是，如果設計和美學照這樣的非常態發展，不久後在另一個趨勢產生之前，這個網頁設計趨勢便會消失。

流行
    那麼，究竟什麼是當下的流行呢？讓我們一起來看看一些最常見的流行跡象吧。流行不難被發現，因為它們通常需要其他事物共同出現來襯托。（這也就是為什麼傳染會如何高效——當和其他物體結合之後，那些看起來獨立的症狀變得更有傳染性。）

      注意：下面的列表並沒有按特定的順序排列，也不代表影響程度，因為它們看起來都差不多。同時注意以下引用的每個例子包含不只一種流行跡象，因為要把它們嚴格分類幾乎是不可能的。

針線效果
    針線手法的出現，通常是因為設計師太多地注重邊框和線，特別是點狀物的多樣性。從點到破折線的微小轉變就表現了一個完整的針型，加上陰影和其他效果使它又有了3D的效果。
      在網頁設計中使用針形的確切目的只可意會不可言傳，但它在一些特定材質的環境下經常得到使用。比較典型的是在織物皮革材質，或是為了營造真實的顆粒感的情況下。我們很難說出針形效果的靈感是從哪裡來的，但是科學家們相信它的產生是過度使用「Skeuomorphism」的結果。

從左上順時針排列分別為: The Journal of Min Tran; Dribbble shot by Mason Yarnell; Dribbble shot by Liam McCabe.
`本文單純分享，摘錄視覺中國網站，如果要更詳細的文章請觀看原文章 http://c.chinavisual.com/2012/04/09/c81551/index.shtml`

簡介

因該不少剛學JavaScript初學者常常會碰到這個問題，那就是我的if判斷甚麼時候會是true甚麼時候會是false，或著常常看到別人寫的if裡面沒有放置特別的判斷直接if(obj)這到底是甚麼意思呀，看到這些寫法真的會讓初學的人傻傻分不清楚啊!!

本篇就以這些問題為開始，帶領各位了解if判斷背後的秘辛，廢話不多說我們開始今天的旅程吧。

小技巧

在開始旅程之前，先介紹一個小技巧可以把任何值轉換成true或false，這個方法背後等同於if()裡面的轉換，相信大家都用過!這個符號來反轉true/false，例如if(!a == 520)，那大家試過兩個!符號嗎?有人說兩個符號不就等於甚麼都沒做!???

先賣個關子，在這邊你只需要知道!!(物件)會回傳true或false，最簡單應用就是可以把物件轉換的true/false值存到自訂變數中，如下


var value =!!null;   // value = false

實例

以下幾個例子你認為誰會是true誰會是false呢?


var q1 = undefined;
var q2 = null;
var q3 = [];
var q4 = {};
var q5 = 0;
var q6 = 1;
var q7 = 999;
var q8 = "";
var q9 = "hello";
var q10 = false;
var q11 = true;
var q12 = new Boolean("true");
var q13 = new Boolean("false");
var q14 = new Number(0);
var q15 = new Number(1);


var a1 = !!q1;
var a2 = !!q2;
var a3 = !!q3;
var a4 = !!q4;
var a5 = !!q5;
var a6 = !!q6;
var a7 = !!q7;
var a8 = !!q8;
var a9 = !!q9;
var a10 = !!q10;
var a11 = !!q11;
var a12 = !!q12;
var a13 = !!q13;
var a14 = !!q14;
var a15 = !!q15;

思考一下，並把答案寫在紙上
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

答案是


a1 = false
a2 = false
a3 = true
a4 = true
a5 = false
a6 = true
a7 = true
a8 = false
a9 = true
a10 = false
a11 = true
a12 = true
a13 = true
a14 = true
a15 = true

你答對了幾題呢!?

答對12題以上的朋友相信你對本篇文章要探討的已經相當了解，接下來要探討的可能你已經了解但你可以繼續閱讀下去，答對8題以下的朋友，接下來的文章你一定要繼續閱讀下去，好的不繼續廢話了，開始解釋囉

在JavaScript中，會等於false的值只會有undefined, null, false, 0, ""這五種，物件類永遠為true，為什麼?別問我規定就是人家訂好的嘛!!
ECMA官方規格說明

注意我剛剛說得，就只有上面幾種值會是false，那我們再一次掃描每一題題目吧
q1 = undefined; 屬五大false類,為false
q2 = null; 屬五大false類,為false
q3 = []; []是一個空陣列，陣列是物件永遠為true
q4 = {}; {}空的物件還是物件，true
q5 = 0; 屬五大false類,為false
q6 = 1; 不屬五大false類,為true
q7 = 990; 同上
q8 = ""; 空字串屬五大false類,為false
q9 = "hello"; 不屬五大false類,為true
q10 = false; 廢話請別懷疑這題送分題
q11 = true; 廢話請別懷疑這題送分題
q12 = new Boolean("true"); 連下一題一起看
q13 = new Boolean("false"); Boolean為object永遠為true
q14 = new Number(0);
q15 = new Number(1); Number類同屬object永遠為true

注意q12~q15，你不是說0跟false是false嗎，怎麼q13,q15答案為true，那是因為使用new方式創建出來的Boolean, Number它們都是Object子類，使用typeof判斷都是"object"，而0, false使用typeof得到的結果分別是"number", "boolean"。


typeof 0; // "number"
typeof false; // "number"
typeof new Boolean("false"); // "object"
typeof new Number(0); // "object"

總結

歸納上面說明的，整理出這個表格

Input Type	Result
Undefined	false
Null	false
Boolean	The result equals the input argument (no conversion).
Number	The result is false if the argument is +0, -0, or NaN; otherwise the result is true.
String	The result is false if the argument is the empty string (its length is zero); otherwise the result is true.
Object	true

本篇文章就探討到這邊，如果有任何的問題歡迎留言討論。

jQuery prevUntil nextUntil parentUntil 使用方法

jQuery prevUntil nextUntil parentsUntil
使用方法

簡介

jQuery提供許多用來遍歷DOM元素的方法，其中用來找尋兄弟元素及父親元素，今天要介紹的是nextUntil,prevUntil,parentsUntil這幾個較不常用(誤><)的方法。

jQuery.fn.nextUntil

要使用這個方法首先你必須懂得使用next方法，這個方法是next的加強版，怎麼說呢，next方法只能取得目前節點後的一個元素，而nextUntil則是取得一組元素，這組元素大小取決於你給予的終止點。
簡單的說nextUntil讓你可以取得元素之後一直到終止點路上的所有的元素。

趕快來看個例子吧


<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

</body>
</html>

執行nextUntil()


    $("#term-2").nextUntil().css("background-color", "#ff3333");

當nextUntil方法不放任何參數，我們會得到目標節點之後的所有元素。

執行nextUntil("selector")


    $("#term-2").nextUntil("#term-3").css("background-color", "#ff3333");

nextUntil方法的selector用來設定終止點，因此會取得一直到終止點路徑上的所有元素。

執行nextUntil(element)


    $("#term-2").nextUntil().css("background-color", "#ff3333");

在jQuery1.6版更新中，nextUntil也提供直接使用DOM Element元素當作終止點的方法，我們可以看到它的效果與selector
相似。

jQuery.fn.prevUntil

使用prevUntil的方式與nextUntil一模一樣，只是prevUntil是用來取得該節點之前一直到終止點路徑的所有元素，在這邊就不多做說明。

jQuery.fn.parentsUntil

使用parent()方法會取得該元素的父親節點，那如果要同時取得父親、祖父、曾祖父甚至曾....曾祖父時要怎麼實作呢?jQuery提供一個方法讓我們能夠輕鬆地做到這個功能，那就是parentsUntil，這邊要注意是parents不是parnet歐。

趕快來看這個範例吧


<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

</body>
</html>

執行parentsUntil()


    $("#term-1").parentsUntil().css("border", '1px solid #ff6633')

執行parentsUntil("selector")


     $("#term-1").parentsUntil("body").css("border", '1px solid #ff6633')

今天介紹的這幾個方法筆者不知道甚麼請況使用最巧妙，如果你有好的idea請不吝告知。

參考資料

http://api.jquery.com/parentsUntil/
http://api.jquery.com/nextUntil/
http://api.jquery.com/prevUntil/

2012年4月10日

Why slowly when access the HTMLCollection Object?

Why slowly when access the HTMLCollection Object?

什麼是HTMLCollection?

HTMLCollection是一個介面，用來表示HTML元素的集合，它提供尋訪元素的方法和屬性。但HTMLCollection與一般陣列是不同的，HTMLCollection是活的，這是甚麼意思呢?這句話的意思是當畫面上的HTML改變時，HTMLCollection會自動的觸發改變，看看下面的例子吧!


// anit-pattern
// infinite loop
var divs = document.getElementsByTagName('div');
for(var i = -; i < divs.length; i++){
    var div = doucument.createElement('div');
    document,body.appendChild(div);
}

首先請你不要把這段程式碼實際的執行!!
這個範例透過document提供的函數取得畫面上所有的div元素，並將這組元素存在Local變數上，然後使用一個迴圈加入新的div元素到該組變數上，這樣會產生甚麼問題呢?

就剛剛所說的，HTMLCollection是活的，每次回圈都加入一個新的元素在該數組上，因此divs.length是動態的在改變，所以造成了無窮迴圈。下面是改版過後的程式碼 :


var divs = document.getElementsByTagName('div');
var length = divs.length;
for(var i = -; i < length; i++){
    var div = doucument.createElement('div');
    document,body.appendChild(div);
}

我們將divs.length緩存到Local變數上，在迴圈中存取這個變數，這樣就可以解決動態改變length大小的問題。

好像還沒談到為何會慢的問題?

我好像還沒談到為什麼會慢的問題!?其實眼尖的人因該已經看出來上面程式碼的一個問題了，我們每次在取得HTMLCollection的資料時，它都是重新query(re-run)的，也就是每次取得length屬行時，它在後面都會重新執行計算個數的方法，再回傳length給我們，在這裡我們把HTMLCollection.length與Array.length屬性作的性能上的比較，如下範例

其結果使用HTMLCollection存取length屬性
firefox慢了15倍
chrome慢了53倍
ie上更慢了68倍之多。

解決辦法

1. 把length屬性緩存到Local變數中
2. 把HtmlCollection轉換成Array在處理

在這邊提供一個與native code一樣效果的方法


    var arr = Array.prototype.slice.call( htmlCollection );

本文就探討到這邊，如果有任何的問題可以在下面留言討論。

jQuery $.fn.data 與 $.data 效能比較

$.fn.data 與 $.data效率比較

簡介

我們之前在jQuery.data()這篇文章有提到data這個方法的使用方式，jQuery提供了兩種data方法，分別是$.fn.data()及$.data()，在本篇文章中，我們將要探討這兩種方法之間的差異以及效率議題。

jQuery.fn.data()

這個方法讓我們能夠使用selector選取一群節點並對其綁定資料，如


    $("div").data('key', 'value');

來解釋一下上面這行程式碼，首先jQuery selector會將所有的div元素選取，並且創建(create)一個jQuery物件，再來呼叫data()方法時，jQuery會先對該節點的data(可能有原先的資料)進行解析(parse)，最後將對應key的值放入該節點中。上述步驟依序列出為
Step1. select and create jQuery object
Step2. parse the data
Step3. put the value in the key property

jQuery.data()

這個方法並沒有提供selector的方式進行資料的綁定，我們必須指定一個元素(element)給這個方法使用，如


    $.data(document.body, 'key', 'value');

因此這個方法所指定的對象只能有一個，因此我們可以定義這個方法市使用在一個已經存在且定義好的元素上。因此它的執行步驟為
Step1. put the value in the element's key property

說了這麼多我要表達甚麼呢!?

如果你要綁定資料到一個已經定義且存在的節點，那麼使用第二個方法($.data)是最恰當的，如果你還問為什麼那請你看看下面的效能比較結果吧!! (分數越高越好)

你也可以自己測試 : http://jsperf.com/jquery-data-vs-jqueryselection-data/11

這篇文章就探討到這邊，使用data方法時不妨先思考效能的問題，Maybe會是個好習慣。

訂閱：文章 (Atom)