今天一口氣講解了三個章節的內容，主要是因為先前基礎的練習夠多了，所以老師覺得書本的內容就是實作練習的程度，不需要花太多時間再去講解基礎的東西，今天講解的是明信片/邀請卡及書籍封面的製作，大多數都是文字輸入和物件的編排，不會太難，只是花時間而己。

明信片製作

邀請卡封面製作

書籍封面製作及上光檔案

這是前端網頁技術的作業，要求我們把水平的輪播圖片改成垂直的，然後要換上自己找的圖片做為素材，因為是直接套用的，所以作業本身並不難。

原本的範例內容是橫向的圖片輪播

根據老師的要求改成直向的圖片輪播，並且用自己的素材

老師提供的輪播程式，採用的方式是把所有的圖片排成一個長條然後整塊區塊根據長度或寬度來計算位移的數值，有個小問題就是輪播到最後一張要回到第一張時，會有個很大的拉回動作，我自己修改了一個版本，改成無限輪播不會拉回，原理是把播過的圖片移到圖片列的最後面，然後移動的位置改成固定的，這樣就可以了。
不過這個版本暫時不提供按鈕的功能，因為圖片改成動態拚接之後，按鈕選圖片的動作變得複雜，等有空再來改。

今天開始上參考書的內容，因為先前己經把大多數的工具都講解過了，再加上一堆動物及名片製作的練習，參考書的內容現在看起來就一點都不難了，只是美感這件事還是有待加強就是了。

雜誌封面文字輸入練習

日曆製作

下午老師講解完日曆的製作後，要大家找一張自己的相片，然後參考市面上的雜誌做一張封面當練習，為此，老師特別去拿相機來幫同學拍相片，這練習後來就當成作業給大家帶回家完成。

雜誌封面作業練習

今天是快樂的周四課程，因為已經知道今天要講解第五題，所以昨天晚上已經先看過一次題目的內容了，一上課就開始自己做，其中比較花時間的大概就是做標題的GIF圖檔的部份而已，其它就都是簡單的操作即可完成，我幾乎都是在原始碼視窗下完成的，只有影象地圖的部份需要到DW中去操作，然後大概十一點左右就做完了。

首頁

相簿頁，這裏要求點下面的小圖會在上面出現大圖

左邊的按鈕要有滑入變色的效果

老師在講解這題時用了ifram來製作中間的主頁內容，所以一共需要三個html檔，我自己做則是都放在同一頁中，只以<div>來包內容，然後寫了幾個JS來控制選單，圖片及區塊的顯示，所以一個html檔內解決全部的事情

單頁解決這一題

做完這題想要提前更新一下網誌，結果byethost竟然在我編輯中給我凍結帳號，整個網誌無法使用，也無法備份，一怒之下，去買了sugaerhost的三年shared pro方案加一個網域租用花了五千多元。

相較於前兩天利用jQuery來和php互動，今天的課程比較偏向前端的視覺部份，老師是照著線上教程的部份來解釋，基礎的部份剛好可以彌補前兩天沒提到的部份。

JQuery 的CDN匯入

線上教學範例

實作

jQuery是Javascript的函式庫，在使用上雖然大大的簡化了javascript的語法，但很多時候還是得靠Javascript來輔助，所以不能偏廢。

下午時請假去回診，老師講解了動畫的應用，同時出了一個作業要大家練習，內容是把一個水平輪播的效果改成垂直的，然後上傳到虛擬主機。

(因為在wordpress上放程式碼太麻煩，決定改成截圖為主，比較短的程式碼片段再以HTML的方式放上來)

今天老師講解了php的json解碼及編碼方式，這是新版的php加入的函式，先前在上java手機班時，那時老師說他是自己寫一支程式來做解碼及編碼的工作。

JSON解碼及編碼的函式

接著老師要大家以先前做的圖片資料庫為基礎，做一個新頁面，但副檔名是html，然後用jQuery把之前用來顯示圖片用的PHP檔的html內容併入到html檔中，這樣可以做到不跳頁就執行PHP並取回成果，算是ajax的一種應用。

html頁面只有一個用來放成果的區塊

畫面

PHP檔案的內容

PHP檔案的內容後來加入了搜尋的功能，在html那輸入關鍵字後，由jQuery傳遞參數過來，執行完畢後的頁面會再回傳給jQuery，最後再由jQuery把結果放到區塊中。

下午時間老師要大家做一個練習，利用先前做過的會員登入及會員管理頁面，同樣的做一個HTML檔，分別執行會員管理的新增/修改/刪除作業，但是過程中不跳頁，都在html檔案中完成。

這個練習有同學是重新寫一個php檔來做所有的事，只是結果由jQuery來接收回html，我則是真的拿之前的php檔來練習先前的php檔分成三個不同的php檔案做三件不同的事，因此我需要把三個不同的檔案都併入html檔，然後再寫幾支js程式來分別處理新增/修改/刪除的作業。

老師要求在設定密碼時需要檢查密碼的正確性，密碼正確才出現按鈕

html檔的重點在jQuery的應用，所以寫了一堆js函式來因應

會員列表的php頁面，在這裏需要加上呼叫jQuery的函式來處理相關的作業

在html頁面呼叫會員管理的php頁面

修改會員的php檔內容

這邊有個觀念就是jQuery併入html檔的內容就成為了html檔案本身的一部份，因此要當成是在html本頁的內容來進行相關的操作，許多同學在這裏會卡住，把js的函式寫在php檔案裏，這樣會造成錯誤或沒有效果，

課程最後老師給了大家一串很長的json字串做解碼的練習。

因為接下來估計會花一個半月的時間講解乙級術科的題目，所以老師說要利用兩三天的時間快速的帶過Jquery及Ajax，然後再看術科講解的狀況來決定要不要多講一些其它的技術內容。

今天先是教大家如何下載Jquery及匯入到網頁中，接著是講解JSON這個資料傳格式；

基本格式為 – {var1:value,var2:value};

陣列格式為 – {var1:[value1,value2,value3,value4,……]};

可以混合使用 – {var1:value,var2:value,var3:[value1,value2,value3,value4,……]};

如果外部變數己經被指定某值時,可以只放變數 :

var a=111;

var b=”john”;

此時json格式可以只放變數即可 – {a,b};

eval(“str”) – 用來”執行”字串中的運算式，在老師的範例中是拿來解析JSON格式，把json變成陣列來使用

比如 open_json={a01:1111,b02:’aaaa’};

open_json_1=eval(“(“+open_json+”)”);

open_json_1.a01 => 1111;

再來是講解Jquery的傳值方式，這部份就有點神奇了，我想大家多少都卡了一下，需要點時間消化；

$.post(傳送對象,傳送內容,回傳值);

其中，回傳值通常會是傳送對象處理完的結果，而傳送對像通常會是一個PHP之類的檔案，可以用來接收及處理傳送內容，具體的範例程式如下：

$.post("ajax_test.php" , {name,password} , function(ajax_result){
document.getElementById('block').innerHTML=ajax_result;
});

第三個參數通常使用匿名函式來處理，也有人叫”閉包”，這個做法是為了可以在取得回傳值後，針對回傳值再做處理。

中午時間班導請大家吃PIZZA，同時辦了一個０元交換禮物趴。

聖誔PIZZA及交換禮物趴

下午老師先要大家利用以前的一個games資料表來複習一下sql及php，先把資料都顯示在網頁上，但是不加上<form></form>

利用舊資料表把資料顯示出來

接著是增加一個onchange時要執行函式pizza() (因為剛吃完pizza)，這是用來當任何一個欄位的內容有改變時要進行的動作，這裏老師花了不少時間帶大家利用alert()來確認函式的執行；

接著是在每個<input>欄位裏加上onchange事件及函式，這裏會需要帶入PHP語法把資料庫select出來的資料流水號當成參數帶入pizza函式中；

比如：onchange=”pizza(1,<?php echo $row[‘g_no’] ;?>)”

然後是把欄位的ID格式做修改，以欄位代號加上資料序號來組成一個獨有的ID，以利後續程式取用；

比如：id=”g_1_<?php echo $row[‘g_no’] ;?>”

最後是JS函式的本體，這裏需要先確認有在檔案中匯入Jquery函式庫，然後在函式中帶入Jquery語法:

HTML及PHP的部份如下：

重頭戲在ajtest.php這個檔案，當我們在任何一個欄位進行修改後，pizza()函式會取得欄位的代碼,欄位的id及欄位被修改後的值,並將這個三個值以POST的方式傳送給ajtest.php這個檔案，
所以接下來就是要在ajtest.php中接收值，並處理，我們要處理的事情就把變動後的值UPDATE進資料庫中，這樣就完成了即時的資料更新，同時又不需要重新載入一次原本的頁面。

在課堂中，後來發現input 中的value值在取得後都是字串型態，這部份在驗證上要另外處理，我後來找到了ctype_digit()這個函式來處理，其它的處理方式可以使用正規表示式，或是把字串當成陣列，一個字元一個字元檢測，只要偵測到不是數字的，就顯示不符合，提供參考程式片段如下：

今天上午先是班會時間，然後就上四樓去聽兩性平等的講習。

下午開始進行LOGO的設計報告，同學們準備多時的成果拿出來一看也都不錯。

最後半小時做了教室的打掃，結束今天，課程也過了一半，完成了四百小時的訓練了。

今天早上去長庚做抽血及超音波檢查，上課的內容是請大家複習上周的內容然後截圖交作業，做完的人就自習或做其它的作業，

我中午進教室，因為LOGO設計還沒完成，所以下午時間都在弄logo，其他同學也差不多，少數同學則是在複習之前的程式內容，

反正周四就是比較輕鬆的一天。

今天在研究老師的範例時發現的問題，目前老師有教到用getElementById(‘id’).style.width來設定元素的樣式值，但是我發現這個做法只能取得行內樣式的值，這樣我有點麻煩，其它的屬性可以改用offsetWidth之類的來取值但是象z-index之類的屬性似乎沒有對應的方法可以取值，好險，在國外的論壇最後找到了，然後再用關鍵字也在國內的幾篇部落格找到相關的討論，對於非行內樣式但己經套用到元素中的CSS，需要使用getComputedStyle()這個方法來取值，完整的使用語法如下：

　
window.getComputedStyle(elmnt,null).getPropertyValue('z-index')

or

document.defaultView.getComputedStyle(elmnt,null).getPropertyValue('z-index')
　

不過要額外注意的是這個方法只能拿來取值，無法設值，所以設值還是要用原本的.style去設

這個作業是要自訂一個彈出視窗然後模擬alert的功能可以輸入文字可以取消，老師先前示範的作法是動態的在Div中寫入所需的標籤內容，再以Javascript的語法去抓取需要的內容，麻煩的地方在於內容是動態的，所以需要有一個全域變數來儲存會用到的內容再傳遞給後面的畫面去使用，這邊我只放出javascript的片段程式碼，HTML和CSS的部就先略過了

輸入訊息視窗

顯示訊息

輸出訊息到主視窗

取消輸入視窗

今天繼續上選單的部份，有些項目是手機上會用到的，不過我上午都在研究乙級的第一題，官方提供的版型檔案有點麻煩，我自己計畫早點開始準備乙級的試題。

下午繼續選單的部份，不過上午最後提到的可拖動選單滿有趣的，所以我一整個下午都在研究怎麼改成可以動態改變z-index的方式，最後發現js無法取得css外部樣式的z-index值，得要在行內樣式的才能取得，不過我最後的做法其實不需要取得z-index的值，所以我等於是白花了一個下午的時間了，真不懂自己。