2013年9月16日星期一

開始學習HTML5前的準備

編輯HTML與JavaScript的選擇，建議安裝notepad++軟體，而用瀏覽器直接線上編輯測試則可用jsfiddle。

最重要的學習資源：W3School.com

2013年9月15日星期日

最先需要認識的HTML Tags & Functions

HTML基本結構一定要懂，而要發展行動網頁與手機APP則是要用到HTML5語法。

區塊的語法

圖片的語法

超連結的語法

嵌入JavaScript的語法

JavaScript function的語法 (在介紹語法之前，或許用個自動販賣機的例子來說明為什麼需要寫成function的觀念。)

document.getElementById() : 這個函式可就常用了，配合getElementById()要先知道<div>, <span>, <p>, ...等tag都可以賦予唯一命名，而這樣就可以用getElementById()將HTML碼塞到指定的地方，這一招在還不會jQuery之前是很常用到的，這是JavaScript把HTML當作資料物件來處理的方式(稱之為DOM)，用JavaScript就能寫出動態網頁的就是靠這招取勝喔，一定要懂！

學習上述語法之階段目標，要讓本來只會做靜態網頁的人也開始瞭解怎麼做出動態的網頁內容，譬如用很簡單的程式邏輯就能設計一個相片切換瀏覽功能，雖然是個很陽春的呈現，但有很大的空間可再改進最後有機會成為類似常見的Slide Show那樣的功能啊！若能讓學生在第一堂課就想像未來自己再精進能做出什麼樣的功能，應該會更有信心與興趣學HTML5吧。

2013年9月13日星期五

Javascript同一般高階語言的學習順序

學任何一種程式語言，順序都是差不多的，從電腦五大部門來看，輸出與輸入都是最先要會的。而在JavaScript輸出方面就是先學：

alert() : 雖然這個函式只是跳出對話框顯示訊息，但設計手機App時也常用到，譬如提醒使用者網路沒開通所以無法上網。更重要的是，JavaScript的偵錯通常都要靠這招，確認程式執行到哪一行的中間執行結果顯示出來看看。

在JavaScript輸入方面，可以先學簡單的兩個函式：

confirm()、prompt() : 是跳出對話框等待使用者按任意鍵或輸入資料，這也是在設計手機App會用到的，譬如使用者要離開App前詢問其是否確定要離開。

學會了基本輸入輸出，瞭解程式可以如何呈現資料與接受資料，那就可以開始學習一些基礎語法，像是：

變數、陣列、算數運算子、比較運算子、條件判斷、函式等。再搭配前述用prompt()進行輸入，其實自己就可以練習寫寫看計算身體質量指數BMI這類的程式了。或者，也可以練習判斷閏平年而處理跨越日期的程式邏輯，而這個練習需要懂得語法有Date物件(example)、getDate() Method、getMonth() Method、getFullYear() Method等。

至於迴圈概念也與其他高階語言沒什麼差別，就是for迴圈與while迴圈語法。舉例來說，可以練習設計一般網頁常見的主選單，這樣的程式大致上就是搭配陣列的使用，以表格語法安排選項顯示位置，再以onmouseover、onmouseout事件進行選項的背景色改變，就可做出選單效果了。當然，如果還要做出下拉子選單，還得要有CSS的positioning與overlapping的概念。如此搭配迴圈與陣列來產生選單顯示之HTML語法，可以讓選單顯示內容是依據陣列項目增刪自動調整而無需改寫程式碼。

有些情況要設計重複執行的動作不能用迴圈概念來寫，因為用迴圈來寫就是讓程式在那一段迴圈程式裡面打轉，這樣就沒辦法做其他的事情。所以，有一種設計重複執行動作的概念是利用定時觸發的方式，這會用到SetTimeout、SetInterval這兩個函式設定觸發動作的時間間隔，而在這間隔還能執行其他動作。

對於初學者來說，下列顯示日曆的程式是我覺得可以逐步導引學生把程式越寫越好的一個例子：

第一個版本，就只是基本日曆樣式的顯示。
第二版將變數宣告為整體變數，加上兩個超連結可以切換顯示前一天或後一天。
第三版利用mod運算子來正確計算出星期幾。
第四版利用陣列來顯示中文的星期日、一、二、三、四、五、六。
第五版就要解決跨月的問題囉，但是先解決後一天(+1)的跨月吧。這裡要特別把大部分學生以一月、二月、三月...逐步判斷下去的例子先拿出來說明為何效率不佳，然後才能欣賞這個版本的漂亮之處。
第六版就再解決前一天(-1)的跨月吧。(留做學生練習，但會發現若依第五版的條件判斷概念不容易寫出簡潔俐落的程式碼。)
第七版再用一個陣列來做跨月處理的最佳化。
第八版套用style與css囉

2013年9月11日星期三

從jQuery Mobile開始練習做Mobile HTML

找個模仿的對象吧，我們做個類似GOMAJI的行動網頁，如何？

先從jQuery Mobile Quick Start Guide認識最基本的語法框架(Mobile page structure)，把"Create a basic page template"與"Make a listview"兩個範本的HTML碼複製起來，用個自己習慣的編輯器來寫第一個jQuery Mobile頁面吧(來看看用線上JSFIDDLE編輯內容與結果)。

要變成有縮圖的ViewList，簡單的很，就是像這樣的例子，然後把原始碼裡面的相關的部分改變一下如這個編輯內容與結果。

想要加上NavBar，試試看這個編輯內容與結果。

來做第二、三...頁的內容吧，然後讓ViewList與NavBar超連結到這些內容頁面。

更進一步，試著將ViewList以陣列方式產生，呈現出一樣的內容頁面，但這下一步要利用資料庫產生內容的概念喔。

接下來就靠你們自己去學囉，提供下列教學影片參考，大概只要認真投入學習一個月吧，相信大家就能做個有規模的行動網頁或App了。

2013年9月9日星期一

思考如何以jQuery Mobile設計行動網頁功能與介面

假設要幫系上老師設計行動版網頁，提供一些方向給大家參考：

[首頁]

如果你有找到老師的半身照片，而且老師有一些座右銘之類的，或許可參考這個風格。其實只要上面一個 div 放照片，下面的座右銘用這種 listview 。
如果你有找到老師的生活照，或許可參考這個風格。也是上面一個 div 放照片，下面用這種 listview，而且選項大概就是“教學”、“服務”、“研究”三大類。
如果你要放老師實驗室logo或照片當首頁，或許可參考這個風格。也是上面一個 div 放照片，下面用三個獨立的 button，選項也是“教學”、“服務”、“研究”三大類。

[研究]
老師的研究大概就是先做 publication lists，原則上就以陣列呈現 listview為主。不過...

但如果又要分不同年份或出版類別呈現，可能要做兩層 listsview，第一層是年份或出版類別，第二層才是一個年份或類別的發表清單，就像這樣。
另一種可能的做法是用可收闔的清單方式來呈現每個年份或類別裡面的清單。
而如果你像做頁面上方有頁籤分類的方式，那就可以用 Navbars來做頁籤，而頁籤點選後要跳到那一個page就要注意相關語法。

無論以上何種方式, 在設計時要記要用 “陣列” 的概念來呈現喔!

[教學] 或 [服務]
如果老師有在YouTube上面放一些教學應片或演講影片，那就可以參考課堂例子，在教學或服務頁面有一個可呈現YouTube影片的方式。
進入教學或服務頁面後，若有需要用一個九宮格這樣呈現該類選項，要搭配Grid語法讓icon可平均擺放整齊。

為了設計出專業的行動版網站或手機APP，在畫面上適當安插夠水準的圖示可加分不少，所以大家一定要在設計頁面時善用一些專業圖庫來豐富畫面質感，像是 www.iconpng.com、www.taopic.com 。

一定要動手做!

2013年9月8日星期日

利用jQuery Mobile的Listview製作YouTube選單(JavaScript版)

這個例子是在頁面上方內嵌YouTube Player的語法，而點選Listview項目就將要播放的YouTube影片替換掉。這是一個純粹使用getElementById()的JavaScript的版本。

更進一步，練習看看再把每個影片的序號與標題都存放在陣列裡，然後也是以JavaScript來產生影片清單的HTML語法，這個版本使用的招式以後會常用到喔，以後總會需要從資料庫讀取資料，再產生要顯示的HTML碼，大概就跟這個例子的陣列版本招式差不多。

2013年9月6日星期五

利用jQuery Mobile的Listview製作YouTube選單(jQuery版)

這個例子的內嵌YouTube Player之HTML碼只有一份喔，裡面也沒有條件判斷來代入不同的影片網址，那是怎麼辦到的呢？這就要歸功於jQuery Selector的作用囉！在CSS中，有所謂Selector的概念，jQuery Selector很重要的精神便在於企圖在JavaScript裡實踐CSS3 Selector的效果，簡化了選取要處理的HTML元素之過程。簡言之，在這個版本就是用jQuery Selector語法找出內嵌YouTube Player之HTML碼裡面的影片網址之處，然後將之替換掉，就可以播放不同影片了。

2013年9月4日星期三

jQuery可以"寫得少、做得多"

到底什麼是jQuery呢？可以這麼定義：「jQuery is a lightweight, "write less, do more", JavaScript library.」

還記得我們常用JavaScript的document.getElementById()來找出DOM裡面的區塊並加以存取，這招一次只能對一個區塊處理，可是jQuery的Selector卻能一次處理多個區塊喔，試試看下列的例子：

Web SQL資料庫

在支援HTML5的瀏覽器上，已經可以撰寫出給使用者端存取的小型資料庫了，這方面可應用像是建立使用者的最愛收藏、記事功能，讓我們設計的行動版網站或手機APP可以記錄各種需要長期儲存在使用者端的資料。這方面的資料庫技術，有三種主要規格，而基於一些理由，大家都是選擇採用Web SQL。

在開始學習Web SQL之前，還要瞭解一個工具，在Chrome瀏覽器的[工具]>[開發人員工具]所開啟的分割視窗中，[Resources]之下就可以查看[Web SQL]內容。我們在練習Web SQL程式時需要利用這個工具做觀察，才能知道是否有正確建立存取資料。(這裡有一個例子可以先開啟練習如何觀察Web SQL資料庫)

好的，來練習個中規中矩的例子吧，假設要用Web SQL讓使用者建立自己的聯絡人資料庫，重要語法就下列這三招：

openDatabase( ) : This method creates the database object either using existing database or creating new one.
transaction( ) : This method give us the ability to control a transaction and performing either commit or rollback based on the situation.
executeSql( ) : This method is used to execute actual SQL query.

Opening Database:

The openDatabase method takes care of opening a database if it already exists, this method will create it if it already does not exist.

To create and open a database, use the following code:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

Above method took following five paramters:

Database name
Version number
Text description
Size of database
Creation callback

The last and 5th argument, creation callback will be called if the database is being created. Without this feature, however, the databases are still being created on the fly and correctly versioned.

Executing queries:

To execute a query you use the database.transaction() function. This function needs a single argument, which is a function that takes care of actually executing the query as follows:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

The above query will create a table called LOGS in 'mydb' database.

INERT Operation:

To create enteries into the table we add simple SQL query in the above example as follows:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});

We can pass dynamic values while creating entering as follows:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS 
                        (id,log) VALUES (?, ?'), [e_id, e_log];
});

Here e_id and e_log are external variables, and executeSql maps each item in the array argument to the "?"s.

READ Operation:

To read already existing records we use a callback to capture the results as follows:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});
db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
   var len = results.rows.length, i;
   msg = "<p>Found rows: " + len + "</p>";
   document.querySelector('#status').innerHTML +=  msg;
   for (i = 0; i < len; i++){
      alert(results.rows.item(i).log );
   }
 }, null);
});

Final Example:

So finally, let us keep this example in full fledged HTML5 document as follows and try to run it with Safari browser.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
  msg = '<p>Log message created and row inserted.</p>';
  document.querySelector('#status').innerHTML =  msg;
});

db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
   var len = results.rows.length, i;
   msg = "<p>Found rows: " + len + "</p>";
   document.querySelector('#status').innerHTML +=  msg;
   for (i = 0; i < len; i++){
     msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
     document.querySelector('#status').innerHTML +=  msg;
   }
 }, null);
});
</script>
</head>
<body>
<div id="status" name="status">Status Message</div>
</body>
</html>

This would produce following result with latest version of either Safari or Opera:

Log message created and row inserted.

Found rows: 2

foobar

logmsg

To learn above concept - Do Online Practice using latest version of either Safari or Opera.

更多說明可看Using the JavaScript Database，只要你對SQL有概念就應該很容易瞭解。但是，如果完全沒有SQL的概念，建議先從w3schools的SQL教學範例開始學習，也可以參考W3C Working Group Note - Web SQL Database。

2013年9月2日星期一

Web SQL要注意非同步的問題

HTML5的Web SQL是很重要的，未來在開發行動網頁或手機APP一定會用到的。不過，使用Web SQL要注意非同步的問題：Html5 WebSql transaction behaves strangely with alert，這個問題與Javascrit程式可以非同步執行的情況差不多、解決方案也一樣就是善用(jQuery) Callback Function：JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors.To prevent this, you can create a callback function.A callback function is executed after the current effect is finished. 而Web SQL的Callbak寫法最簡單的例子就像這個：WebSQL and Javascript Order of Operation

db.transaction(
        function (transaction) {
        transaction.executeSql(
        'SELECT * FROM contacts WHERE id = ?;',
        [id],
        function (transaction, result) {
           alert("1");
           if (result.rows.length != 0) {
            user = result.rows.item(0).name;
           } else {}
        },
        errorHandler);
    });

alert("2");

message = id + '%1E' + name;

瞭解上述的Web SQL程式設計概念之後，更進一步就可以自己再練習做出通訊錄或便利貼的功能囉，可以參考下列的教學範例：

2013年9月1日星期日

有興趣則還要繼續投入學習的方向...

要存取開放資料碼？那就要會解析XML與JSON:

要加入更多服務功能嗎？一定要去研究Google API:

訂閱：文章 (Atom)

Pages

EUCL 6th Speech Tips

2013年9月16日星期一

開始學習HTML5前的準備

2013年9月15日星期日

最先需要認識的HTML Tags & Functions

2013年9月13日星期五

Javascript同一般高階語言的學習順序

2013年9月11日星期三

從jQuery Mobile開始練習做Mobile HTML

2013年9月9日星期一

思考如何以jQuery Mobile設計行動網頁功能與介面

2013年9月8日星期日

利用jQuery Mobile的Listview製作YouTube選單(JavaScript版)

2013年9月6日星期五

利用jQuery Mobile的Listview製作YouTube選單(jQuery版)

2013年9月4日星期三

jQuery可以"寫得少、做得多"

Web SQL資料庫

Executing queries:

INERT Operation:

READ Operation:

Final Example:

2013年9月2日星期一

Web SQL要注意非同步的問題

2013年9月1日星期日

有興趣則還要繼續投入學習的方向...

Outlines

Visitors

追蹤者

Pages

EUCL 6th Speech Tips

2013年9月16日 星期一

2013年9月15日 星期日

2013年9月13日 星期五

2013年9月11日 星期三

2013年9月9日 星期一

2013年9月8日 星期日

2013年9月6日 星期五

2013年9月4日 星期三

Executing queries:

INERT Operation:

READ Operation:

Final Example:

2013年9月2日 星期一

2013年9月1日 星期日

Outlines

Visitors

追蹤者

2013年9月16日星期一

2013年9月15日星期日

2013年9月13日星期五

2013年9月11日星期三

2013年9月9日星期一

2013年9月8日星期日

2013年9月6日星期五

2013年9月4日星期三

2013年9月2日星期一

2013年9月1日星期日