XML Technology Research Lab

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">
    
    <title>Bootstrap 101 Template</title>

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

    
    
    
</head>
<body>
    <h1>Hello, world!</h1>

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    
    <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 的第一個範例中，我們用過

$(xml).find("areas")：其中 $(xml) 中的 xml 代表 callback 執行後的結果，而這個回傳的結果代表一個 XML 文件，而 find("areas") 這個功能就是從該 XML 文件找出名稱為 areas 的節點。
$(xml).find("areas").find("area")：$(xml).find("areas") 的結果是一棵樹的根結點，而 find("area") 就是從這個根節點找出所有名稱為 area 的子結點。
$(xml).find("areas").find("area").each(function...)：當找出所有的 area 子節點之後，each() 這個功能就是針對每一個節點進行處理，而處理的功能定義在 function() 內。
$(this).text()：$(this) 中的 this 代表目前的 context node，而 text() 功能就是回傳這個節點的文字內容。

2015年4月23日星期四

AJAX 入門：第五個範例

The following examples had been tested on Mozilla's Firefox and Microsoft's IE. The document is provided as is. You are welcomed to use it for non-commercial purpose.
Written by: 國立中興大學資管系呂瑞麟

請勿轉貼

看其他教材

這個範例跟第四個範例非常類似，主要不同的地方在於這次我們增加了一個使用 XMLHttpRequest 的地方，也就是選擇了 XML 檔案後，AJAX 會要求 server 將解析之後的結果回傳；最後，AJAX 網頁將回傳的內容放置於如網頁中綠色的方塊中（這效果是採用 CSS 的結果）。請參考 demo 網站。

範例說明：

在這個範例中，我們在"範例說明："之後，加了一段 div 區塊，其內容如下，這個區塊也就是右邊綠色的方塊，該方塊的 id 為 rssBox：

<div id="rssBox" class="on">
</div>

而 rssBox 的 CSS 設定內容下：（可以參考 CSS 簡介）

#rssBox {
  width:350px;
  margin:5px;
  float:right;
  height:220px;
  border:1px dotted #317082;
  padding:3px;
  font-size:0.8em;
  background-color:#99FF99;
  overflow-x: scroll;
  overflow-y: scroll;
}

AJAX 入門：第四個範例

請勿轉貼

看其他教材

在這個範例中，我們需要寫一個網頁來讀取 XML 檔案；使用者有兩種方式來決定 XML 檔案的名稱，一種是讓使用者輸入該 XML 檔案的 URL，另一種是讀取伺服器端的 XML 檔。如果使用者選擇 URL，則網頁出現一個文字欄位讓使用者輸入 URL；若使用者選擇讀取伺服器端的 XML 檔，則網頁出現下拉式選單顯示伺服器端所有的 XML 檔的檔名（須能自動產生）；最後，當使用者按確定後，則出現 XML 檔案的內容。

請至 demo 網頁。（由於 Tomcat 對於網路的存取要求變高，在不開放的權限的情形下，是不能利用輸入 URL 的方式來執行 servlet。目前已知有些 XML 檔案攻擊的手法，在沒改寫程式前，頃向不開放。）

範例說明：

設計 HTML 元件，其內容如下：

<form name="myform" method="GET" action="/jlu/servlet/DOMServ">
請選擇：
<input type="radio" name="xml" value="url"
       onClick="display();">自行輸入網址</input>
<input type="radio" name="xml" value="xml"
       onClick="callServer();">選擇現有的 XML 檔</input>
<br/>
<div id="label" class="on">
</div>
</form>

2015年3月26日星期四

第二個範例：AJAX 網頁與伺服器端程式（以 servlet 為例）

AJAX 入門：第二個範例

請勿轉貼

看其他教材

在第一個範例中，為了簡化起見，我們只是將遠端的檔案下載下來，再經由 Javascript 的 DOM 功能來剖析 XML 文件。可是絕大多數的 AJAX 網頁都是跟伺服器端的程式來做互動的，因此在第二個範例中，我們延續第一個範例，差別只是在於這次我們呼叫的對象是伺服器端的程式，其他不變。仔細檢查第一個範例的程式碼，我們發現在 HTML 元件的第一個 div 區塊，我們利用 onclick="makeRequest('taichung.xml') 來啟動呼叫，而 taichung.xml 就變成了 makeRequest() 中的 url，而這個 url 變數的值就代表了伺服器的資源或者程式。我們可不可以使用之前非 AJAX 網頁中所寫的 servlet 呢？嗯，試試看！

2015年5月1日 星期五

jQuery + Bootstrap：Bootstrap 的安裝

2015年4月28日 星期二

jQuery 常用語法的整理

2015年4月23日 星期四

AJAX 入門：第五個範例

AJAX 入門：第五個範例

AJAX 入門：第四個範例

AJAX 入門：第四個範例

2015年3月26日 星期四

第二個範例：AJAX 網頁與伺服器端程式（以 servlet 為例）

AJAX 入門：第二個範例

2015年5月1日星期五

2015年4月28日星期二

2015年4月23日星期四

2015年3月26日星期四