mrmu軟體設計與創造思維

Javascript在十幾年前的地位，還僅只是個修飾網頁介面的工具箱，雖然它號稱是做給非程式人員用的，但這簡直就是鬼話。約十幾年前，我在學校正開始學習寫網頁時，javascript僅是用來作跑馬燈、連結選單(mouse移到選項上會彈出選單可是當時超炫的功能)、萬年曆、計算機...等等效果的語言。

最近javascript被炒紅，完全是因為Ajax(Asynchronous JavaScript And XML)的關係。那為什麼Ajax會紅，就是web 2.0被炒紅的關係，沒錯，這些事在達康泡沫後讓大家都超興奮的。Ajax會被炒紅，也跟google和yahoo推出的應用服務有相當大的關係，這兩大巨人使用Ajax技術，讓頁面靈活有彈性，帶給使用者深刻的印象，自然Ajax也紅了，相關應用也像雨後春筍一樣大量露出了。

不過Ajax不是新東西，它是由以Javascript為主配方加上DHTML + DOM + CSS + XMLHttp + XML拼湊出來的應用技巧，讓javascript不在局限在客戶端應用，硬是把javascript立即反應的效果，延伸到Server端，帶來全新的使用經驗。

網站應用的功能、架構趨於成熟，其實還不足以讓普遍的使用者喜歡上它，我們都知道關鍵在介面操作。使用者也許完全不清楚程式架構，他們根本不在乎你的程式版本、架構，他們重視的是介面操作的體驗 (當然前提是功能運作正確)。於是javascript又開始受到重視了。

Ajax走紅，讓javascript得以被重新檢視，各式各樣的javascript framework/library也陸續推出，其中比較有名的有prototype, jQuery, YUI...等。基於個人喜歡簡潔、輕量級的工具，我直覺先選擇了jQuery來學習。

那麼jQuery是用來幹嘛的呢？

從前從前，網頁的原始碼就像一盤義大利麵，那時MVC(Model, View, Control)模式架構還沒普及，HTML語法包括了結構、內容、外觀的定義，直到動態網頁問世，把內容部份取代為server page的語法，開始從外部資料來源提取內容。後來開始有人對HTML的結構不滿意，XML就出現了，接著XHTML開始普及。外觀的更新需求，則是出現了XSL、CSS等。尤其是CSS在近幾年部落格服務中被大量應用，知名度也愈來愈高。

CSS的選擇器(Selector)概念被廣泛接受，就代表會有愈來愈多人熟悉這種概念，於是這種概念就成為「好用的特性」後選人之一了。jQuery聰明的作法，就是加以利用選擇器概念，網頁設計師只要定義出視覺元素、區塊，再來要用jQuery做出什麼樣的視覺效果，就變得簡單了。

jQuery它是一個javascript的函式庫，所以可以預期的是我們只要帶上它(目前最新版1.3.2的jQuery，是一個50幾k的js檔)，就可以"簡單"的使用javascript，因為它幫我們把很多複雜的操作、判斷通通包裝成一個個簡單的函式了，有了現有的知識，jQuery就能大量簡化javascript的操作了。

閱讀全文

製作垂直的滑動選單再也不是難事了，這裡使用的是jQuery這個javascript的framework。請按此看看效果如何。以下開始介紹作法:

我們先來製作一下選單的部份，在body標籤內放上這樣的內容:

<dl>
  <dt><a href="#">Item1</a></dt>
  <dd>
    <ul>
      <li><a href="1.html">11111</a></li>
      <li><a href="2.html">22222</a></li>
    </ul>
  </dd>
  <dt><a href="#">Item2</a></dt>
  <dd>
      第二選單的內容在這裡: <br/><a href="a.html">aaaaa</a>
  </dd>
  <dt><a href="#">Item3</a></dt>
  <dd>
      <img width="180" src="http://events.jquery.com/img/jquery-logo.png">
  </dd>
</dl>

<script src="http://jquery.com/src/jquery.js"></script>
<script>
  $(document).ready(function(){ //網頁讀取完畢後
    //把所有dd標籤的內容都hide起來
    $("dd").hide();

    //按下dt元素連結
    $("dt a").click(function()
    {
      $("dd").slideUp("slow"); //子分頁
    
      //下一個主選單以下的內容要slide down
      $(this).parent().next().slideDown("slow"); 
      return false;
    });
  });
</script>
    
<style>
  dl { width: 200px; background: #fff;}
  dt { background: #775; padding: 2px; margin: 2px; }
  dd { margin: 2px; }
  dt a { color: #FFF; }
  dd a { color: #000; }
</style>

閱讀全文

做網頁設計時經常需要設計如登入頁、意見表單、留言板等等頁面，對於設計這些需要收集使用者意見的頁面，通常我們都使用Form標籤來處理，今天發現一個網站-wufoo.com，還蠻好用的。

這是免費的線上表單製作工具，可以讓你很有彈性很容易的建置表單，而且有很多類型可供選擇。右邊是其中一個範例，是約會邀請的表單，放了一個大大的地圖，還蠻炫的，總之快來試試吧。

閱讀全文

有時候寫程式都需要配合一張速查表來查詢特定的成員，少了速查表會非常麻煩，特別是找一些常常需要用到的變數或方法，偏偏它的名字又很長，很難記憶，或者也有人像我一樣就算名稱很短也根本不想去記。

這時如果有張小抄在身邊是非常快樂的事呀，今天發現有個網站 cheat-sheets.org，專門提供各種類型的程式小抄，而且大部份都儘量幫您縮小成約一張A4的大小 (也有提供其他尺寸)，臨時需要一張速查表嗎？快來試試~

閱讀全文

自
從用了Firefox，常常會忽略IE的視覺...寫自己的東西是還沒關係，但如果是接案的網站就麻煩了，尤其很多客戶還是用舊版的IE，版面會變得非常奇怪...Orz..
唉~ 救救網頁設計師吧~ 快更新不然就改用Firefox吧!!~XDD
今天發現的工具是Multiple IE，故名思義就是很多版本的IE都幫你打包好了，勾選你要的版本後，就會裝好，此時就能方便的知道IE部份的視覺如何了~

閱讀全文