2016年7月9日 星期六

研究生須知?

我也不確定是不是須知,但是說了幾年要學長姐交接,可是很神奇的,每年都要我重複的、每一個的再說一次。很明顯的,"交接"出了問題,所以只好想到什麼,就整理什麼,一條、一條寫下來(這是不是所謂的 SOP?)。

每個學期必做:
1. 適時去借下一個學期用的研討室。

論文寫作:
1. references 的順序是根據論文作者的 last name 為排列標準的。
2. cite 作者的文獻時,只有一個作者,就只寫該作者的 last name;若有兩個作者,就是兩個作者的 lastname1 and lastname2;若有三個以上個作者,則以第一個作者的 lastname 等人。



2015年5月14日 星期四

jQuery + Boostrap:第二個範例

在第一個範例中,我們利用傳統的 client-server 的呼叫方式,輸入必須的資料後,在遠端程式執行完後,把結果顯示在一個新的網頁上。在第二個範例,我們把第一個範例進行更改,並在使用者輸入資料後,直接把結果顯示在同一個網頁上,有興趣的讀者可以先到 demo 網頁 先試用一下,代碼可以輸入 111111 或者 999999 看看執行結果。

由於在這個範例,我們利用 jQuery 來呼叫遠端程式,所以我需要把 form 中的 method 和 action 移除,移除後的 form如下:

<form class="form-horizontal" role="form">


2015年5月13日 星期三

jQuery + Bootstrap: 第一個範例

我自己幫自己在學校的網站上維護一個網頁,其中包含一個間單的學生成績查詢的功能。最近由於行動設備的興起,我也想把這個網頁重新設計成符合 Responsive Web Design 的風格,以便於寫一次,各種設備都能用;況且這個網頁的設計,已經是二十幾年前的概念的,找時間慢慢修改或許也不錯,因此我們的範例就是這個簡單的成績查詢功能。

由於 Boostrap 主要是介面,而 jQuery 是動作,第一個動作當然是設計一個畫面。我實在對於美工設計不怎麼樣,假設我要設計的畫面如下:


2015年5月1日 星期五

jQuery + Bootstrap:Bootstrap 的安裝

在行動裝置(如手機、平板等)盛行的一開始,我首先注意到的是 jQuery Mobile 的解決方式,但是同時“它”也讓我猶豫是否要全力投入,猶豫的原因就是系統開發人員必須要開法兩套以上的介面以符合多種設備,這真是痛苦到了極點。

在學習 jQuery Mobile 的同時也注意到了一種新概念的興起,那就是 Responsive Web Design,這個概念基本上就是我前一段所說的,設計得好,寫一套程式就可以符合多種常見設備的介面。既然這個概念這麼好,馬上就有許多開發者投入並設計出相關的 framework(或者把它想成程式庫也可以)。Google 了一下,推薦的名單中出現了 Bootstrap,查了一下相關文件以及討論,看起來資料不少,那麼就開始試試看了。

Bootstrap 的安裝,其實是不需要安裝的。雖然我們可以把檔案下載下來,但是也可以直接使用放在網路上的版本,由於我們只是練習,所以就不安裝了。在這裡,所謂的安裝,指的是把一個支援 Boostrap 的網頁給建構出來,而這個 template 如下所示:

<!DOCTYPE html>
<html lang="Big5">
  <head>
    <meta charset="Big5">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

2015年4月28日 星期二

jQuery 常用語法的整理

jQuery 既然是 Javascript 的 framework,他在決定(或者存取)特定的 element 或者 form 中的元素值自然要比較簡潔有力。在這一篇文章中,我試圖盡量利用範例來介紹 jQuery 的語法。

jQuery 語法的設計理念是選擇一個特定的 element 並在該 element 上執行某個特定的功能,因此它的基本語法就是 $(selector).action(),其中 selector 的概念跟 CSS 類似,而 action() 即代表執行的功能。例如,在jQuery 的第一個範例中,我們用過
  1. $(xml).find("areas"):其中 $(xml) 中的 xml 代表 callback 執行後的結果,而這個回傳的結果代表一個 XML 文件,而 find("areas") 這個功能就是從該 XML 文件找出名稱為 areas 的節點。
  2. $(xml).find("areas").find("area"):$(xml).find("areas") 的結果是一棵樹的根結點,而 find("area") 就是從這個根節點找出所有名稱為 area 的子結點。
  3. $(xml).find("areas").find("area").each(function...):當找出所有的 area 子節點之後,each() 這個功能就是針對每一個節點進行處理,而處理的功能定義在 function() 內。
  4. $(this).text():$(this) 中的 this 代表目前的 context node,而 text() 功能就是回傳這個節點的文字內容。