網頁教學　測試

Mr.
6
實做網站程式系列課程
Class No. 8
2008/12/27
Mr. 6 實做網站程式系列課程
2008 年 12 月 27 日
第 1頁
今日安裝
今日安裝：
安裝：
第一步：
第一步：設定今日需要環境
設定今日需要環境
1. 請將本堂課所有檔案先下載到自己的電腦的「Mr.6」資料夾裡的新子資料夾
「class8」裡。這些檔案可至「\\pc1\Temp\mr6\class8」取得，或至
http://mr6online.com/class/class8 裡下載 class8.zip 並解壓縮即可。
2. 將下載後的「class8」裡的「class8_code」裡面所有檔案複製到
「D:\public_html\class7」。
3. 請至 Navicat，在 localhost 下面增加一個新的 database，名為「jstest」。
4. 按下螢幕左下方的「開始」
，選「執行」，然後敲入「cmd」，叫出 dos 視窗
5. 敲入「D:」然後按 enter，會轉換到「D」槽去。
6. 敲入「cd public_html/class8」
7. 在 DOS 視窗內執行下列指令
mysql –u root –p jstest < jstest.sql
8. 再到 D:\public_html\jstest 裡，設立一個新的檔案夾「uploads」
，來存放等一下使用
的檔案。
Mr. 6
2008 年 12 月 27 日
第 2頁
今日題目
今日題目：
題目：JavaScript (加
加 AJAX 與插件)
課程摘要
在前面的三堂課中，我們已經將伺服機端的程式碼的最重要的幾個骨幹依稀學會了。
我們學了 FORM，可以向使用者要求資料，並回饋一些內容。我們也學了資料庫，可
以將使用者的資料送到資料庫去儲存放好、需要時叫出。我們還學了會員系統，可以
在未來讓使用者回來，登入後即知道他是誰，處理他自己的資料。在這堂課中，我們
再學了 JavaScript，便可以將現代網站開發技術的拼圖大概的拼了完整了。
JavaScript 從 1990 年代網站剛開始，就已經是被廣為使用的程式語言，若這堂課在 1990

年代教授，則 JavaScript 這個主題並不適宜扮演這麼重要的角色，但到了今天，許多
網站強調的是愈來愈像桌上型軟體的使用者介面，加上網路上愈來愈多免費的炫麗的
API，與 JavaScript 脫不了關連，因此，在今天做網站，JavaScript 已成了不可或缺的
一門知識。
當然，要知道，想設計一個網站，就算完全不懂 JavaScript，仍然可以靠純粹的 PHP

程式就順利的設計並製作完成。JavaScript 只是另一個選擇，讓網站的 UI 給予使用者
不一樣的使用經驗。
需要環境
本堂課假設學員已經過第一堂、第二堂課、第三堂課，因此已經完成了以下設置：
PHP+APACHE 的環境
FileZilla
EditPlus 程式編輯器
2008 年 12 月 27 日
第 3頁
MySQL
Navicat
PHP PEAR
本堂課沒有新的安裝。全部跟著程式碼。
基本教學
基本教學
JavaScript 語言簡介
JavaScript 的語法類似於 Java 與 C 語言，並且一開始就有 OOP 的概念，也就是視許

多程式裡的單位為「物件」。它是一個非常簡單易學的語言。
而 JavaScript 和 PHP 不同的地方，在於 PHP 是「寫給伺服機去執行的」，當你的一個

檔案裡寫了 PHP 語法，這些 PHP 指令會在伺服機就先執行完畢，然後全部製造成
HTML 再丟回去給使用者的瀏覽器(IE、Firefox 或 Safari)，換句話說，無論你的 PHP
程式怎麼寫，它的所有指令永永遠遠不會被使用者看到。
相反過來，JavaScript 就不一樣了。當你在檔案裡寫了一行 JavaScript 語法，有使用者

來到伺服機呼叫這個檔案，整個檔案會連著 JavaScript 的指令「原封不動」的丟還給
使用者，然後由使用者的瀏覽器來處理。換句話說，JavaScript 是「寫給瀏覽器去執
行的」
，也就是說，JavaScript 的指令是利用使用者電腦的運算功能來一條一條執行，
而不是利用伺服機的電腦。
和 JavaScript 同樣也都是在使用者電腦執行的，包括 HTML 語法。所以，HTML 和

JavaScript 如同兄弟一般，彼此之間可以互動。若我們善用 JavaScript，我們可以在使
用者的瀏覽器上面隨意改動上面的 HTML，不必再回到伺服機。這樣一來，使用者可
以感受到如同在桌上的 Word、Excel 軟體那般的順暢快速。
2008 年 12 月 27 日
第 4頁
JavaScript 基礎語
基礎語法
以下示範一段簡單的 JavaScript 程式。JavaScript 程式碼在 HTML 之間，不能直接寫

上去，而必須以<script>包起來：
<html>
<script language="JavaScript">
var name = “電腦仔”;
alert("大家好，這是我的第一個 JS 程式！我的名字是" + name);
var new_name = prompt("你的名字呢?”, name);
name = new_name;
document.writeln("<b>你的名字是：</b>");
document.writeln(name);
</script>
</html>
在以上的程式中，看到幾個東西：JavaScript 就和所有程式語言一樣，大量的使用變
數，你可以為任何的資料設定變數「variable」來暫時儲存資料，留待等一下計算的時
候運用。在這個範例裡，我們使用了 name 和 new_name 兩個變數。這兩個變數裡面
裝的東西都是「字串」。
我們也示範了如何處理字串的「組合」。字串的組合是用「+」符號，當執行 a+b，而
a 與 b 都不是數字而是字串時，最後 a+b 會變成兩個字串連在一起，a 在前面，b 在後
面。
我們也示範了 JavaScript 幾個好用的內建函數。譬如「alert」會自動跳出一個 Windows

標準警告視窗，告訴使用者一個訊息，而 prompt 則會跳出一個詢問框，問使用者一
個問題，使用者可以自己填入答案。
2008 年 12 月 27 日
第 5頁
然後，在 JavaScript 裡，也有類似 PHP 的「echo」功能，也就是可以直接寫一段字串

到螢幕上面給使用者看。這一串字將會出現在 HTML 裡，所以也可以用 HTML 的方
式來呈現，如範例中就以<b>來裝綴。
接下來我們繼續介紹幾個 JavaScript 的語法：
if ((age < 21) && (buying_alcohol == "yes"))

{
document.writeln("你不能買酒");
if ((my_last_name == "黃") || (my_last_name == "王"))

{
document.writeln("請再確定一下是否有聽錯，是姓王還是黃？”);
}
以上介紹的是 If 的語法，也就是只有在 if 後面那句話是「正確」的時候才會執行 if

肚子裡的那段指令。通常常用的連結詞有兩種，一種是 AND，一種是 OR。以上的語
法用中文可以這樣來翻譯：
如果你的年齡是小於二十一歲，而且
而且你正打算喝酒的話，那就請在螢幕上顯示：
而且「你
不能買酒！」
如果你的姓氏是「黃」，或你的姓氏是「王」
，那就請在螢幕上顯示：「請再確定一下
是否有聽錯，是姓王還是黃？」
接下來我們想示範的是「迴圈」的語法，也就是讓你可以執行同一個指令很多次，一
次又一次再一次的：
var s = ‘開始：’;
while (s.length < 30)
{
s = s + ‘哈’ ;
}
document.writeln(s);
2008 年 12 月 27 日
第 6頁
var s = ‘開始：’;
for(i=0; i<30; i++)
{
s = s + ‘,’ + i ;
}
document.writeln(s);
以上兩段分別以 while 和 for 兩種方式來寫「迴圈」，第一種方式 while 就是在說：當

s 的長度(length 為 JavaScript 內建功能)仍然小於 30 時，請執行肚子裡的程式，執行之
後再回到 while 那一行，看看 s 長度是否仍然小於 30，若仍是，則再一次的執行肚子
裡的程式，以此類推……。
第二段則形容以 for 的方式來寫「迴圈」，for 的指令行有三個部份，分別代表「開始」、

「測試」、和「每一圈之後執行」，這句話是在說，我們現在設一個新的變數叫做 i，
一開始 i 是等於 0，先看看 i 是不是小於 30?若是的話，就請執行肚子裡的程式碼。執
行結束後，將 i 強迫加一 (i++就是 i = i + 1 的縮寫)，然後再看看 i 是不是小於 30？若
是的話，就請再一次的執行肚子裡的程式碼，然後再將 i 強迫加一，再看看 i 是不是
小於 30……以此繼續下去。
JavaScript 與 FORM 互動語法
JavaScript 有一個很重要的功能，那就是它可以在使用者做完一件事情，不必回到伺
服機去操煩 PHP 程式，JavaScript 可以直接被「叫醒」
，在瀏覽器上面就直接執行。這
部份的功能稱為「「event handling」
」。：
<html>
<a href="#" onClick="alert('耶，成功了！');">按我一下！</a>
<a href="#" onMouseOver="alert('讚啦！');">不必按我，只要滑鼠掃過我！</a>
<img src="a.gif" name="the_image">
<a href="#" onClick="document.the_image.src='b.gif';">換照片！</a>
<a href="#" onClick=’window.open
("http://google.com",window_name","location,menubar");’>按我就可以開一個新視窗！</a>
Mr. 6
2008 年 12 月 27 日
第 7頁
<a href="#" onClick=’ window.open ("http://google.com","window_name","

height=100,width=100, location=no, status=no ");’>按我就可以開一個比較小的新視窗！</a>
<a href="#" onClick=’ window.status = "處理中，請稍後…";
’>按我可以改視窗下方的訊息！</a>
接下來，示範一下「陣列」(array)的功能。陣列是一種特別的變數，裡面可以一次存
好幾筆的資料，然後以一個數字(稱為 index)來存取：
var colors = new Array("紅色","藍色","綠色");

var the_element = colors[0];
colors[0] = "黃色";
for (i=0; i<3; i++) {
document.write(‘第’ + i + ‘個顏色是:’ + colors[i]);
}
我們也來示範一下自定函數。在 JavaScript，可以自己定義自己的函數，這樣一來，
可以重覆的使用這些功能。
<head>
function announceTime(message)
{
//get the date, the hour, minutes, and seconds
var the_date = new Date();
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();
// put together the string and alert with it

var the_time = the_hour + ":" + the_minute + ":" + the_second;
alert(message + the_time);
}
</head>
<body>
<a href="#" onClick="announceTime(‘現在的時間是:’);">查看現在時間</a>
</body>
Mr. 6
2008 年 12 月 27 日
第 8頁
</html>
簡易教學
AJAX簡易教學
如上圖所示，AJAX 並不是一個新的語言，而是原本就有的 JavaScript 語法，經過一

些加強後，被包裝成不一樣的 framework，讓我們在網頁上面可以輕鬆的呼叫，就可
以在不必重新 load 整個頁面的情況下即可和伺服機做雙向的溝通。
這個溝通的過程中，如圖所示，分為四個階段：
2008 年 12 月 27 日
第 9頁
一、啟動
啟動：
啟動：首先，在 HTML 中，一定有一個地方讓使用者可以「啟動」整個 AJAX
的事件。當然，有的是定時固定啟動的。以以下案例來看，當使用者按下「刪除」
的超連結，即呼叫一個「sendDeleteRequest( )」的 JavaScript 函數。
<a href="#" onclick="sendDeleteRequest('<?= $post_id ?>');">刪除</a>
二、送出
送出：
送出：當使用者按下去後，sendDeleteRequest 即會被呼叫，該函數的定義在「head」
區中：
function sendDeleteRequest(id) {
new Ajax.Request("index.php",
{
method: 'post',
postBody: 'post_id=' + id + '&delete_post=1',
onComplete: showResponse
});
}
這個函數使用了 Prototype 的 Ajax.Request 的呼叫法，在這個呼叫法中，我們設定

了它將呼叫「index.php」
，並且使「post」，而傳過去的變數包括 post_id 與 delete_post
兩個變數。此外，我們還設定了當遠端伺服機完成之後，傳送回來的資料要被送
到一個叫「showResponse」的 JavaScript 函數中。
這個「showResponse」函數即為程式人熟悉的「call back function」

，或稱為「event
handler」的做法，也就是我們預設一個當事件發生時會自動呼叫的地方，在 AJAX
裡，我們需要一個函數來「收聽」送出去的 AJAX call 的「回應」，在這個 case
裡，我們呼叫的是「showResponse」。
三、收到
收到：
收到：當伺服機真的完成了，並傳回來之後，它會自動呼叫 showResponse，這個
函數的定義如下：
function showResponse(req){
2008 年 12 月 27 日
第10頁
var post_id = req.responseText;

javascript:Effect.toggle("box-" + post_id, "appear");
}
遠端的 PHP 所 echo 的所有字串，都會存在「req.responseText」變數裡，我們只

要從這個變數就可以取得遠端 PHP 所要告訴我們的資訊。
四、改變外觀
改變外觀：
改變外觀：取得這個資訊後，我們可以繼續跑 JavaScript，讓現在這個 HTML 頁
面出現一些反應，在以上的範例碼中，我們使用 Effect.toggle( )來讓其中一個 DIV
變不見。另一個常用的語法則是「innerHTML」，若和「getElementById」一起使
用，可以將任何一個 HTML 的 tag 裡面的文字給換掉，換成另一個東西，這樣一
來，我們可以輕鬆的改變 HTML 頁面裡的外觀。
譬如，以下程式碼可將「天氣到底如何」，瞬間換成「天氣晴」。
document.getElementById('boldStuff').innerHTML = '天氣晴!’;
<b id='boldStuff'>天氣到底如何？</b>
如果這個「天氣到底如何」不是字串，而是 HTML 碼，則這個頁面就會產生比

較明顯的大變化。創業家可以視創意來運用這些 AJAX。
「插件」
插件」(widgets)簡易教學
簡易教學
所謂「插件」
，即為一段簡單的程式碼，可以讓使用者「貼」在他們自己的網站裡，
譬如貼在部落格的邊欄，然後每次使用者 load 這一頁，它會自動到你的伺服機，去抓
取需要的資訊，拿過來顯示在使用者的網站頁面。
前言：
前言：其他插件的比較
以這樣的定義來看，如果我們在一個叫「index.html」這樣寫，也算是插件：
<img src=’http://mr6.cc/logo.jpg’>
2008 年 12 月 27 日
第11頁
因為這個 logo.jpg 並非在使用者的伺服機裡，而是必須到另一台「別人家的機器」

(mr6.cc)，去找來這個 logo.jpg 檔案，然後顯示在自己網頁內。不過，這樣的「圖片插
件」會被瀏覽器當作圖片來處理，因此裡面難以擺放任何的文字或複雜的 HTML，這
樣的插件太過單調，幾乎什麼也不能做（不過，也因為如此，大部份的網站都不會阻
擋你嵌入一個<img>，但是會阻擋其他的插件）。
另外，還有幾種插件可行，其中一種就是「iframe」插件，這樣的插件其實很容易，
就是請使用者在他的頁面裡置入一個「iframe」，如下：
<iframe width=280 height=300
src=’http://blackwhiteweb.com/cover.php?id=2334&name=hello’>
這樣的一個語法，就會在頁面中安排出一個長 300、寬 280 的框框，這一塊框框裡面

的內容會到另一台電腦去索取，然後陳列在裡面。這樣的插件不算是完整的插件，其
重要原因是插件裡面和插件外面形同為兩個世界，視覺上面無法兩者合一，那個框框
會非常明顯，當裡面的內容太長，亦不能照著變長，而會出現煩人的「拉 bars」(scroll
bar)。此外，插件裡面也無法去控制到外面的東西，cookie 無法共用。
另外，我們常看到用 Flash(SWF)來做的插件，則是讓使用者以類似以下的語法，貼在
網站上面：
<object width="300" height="250"><param name="movie"

value="http://www.flyfishingcommunity.com/newsite/widgets/pictures/pictures_w
idget_fly_fishing.swf"><embed
src="http://www.flyfishingcommunity.com/newsite/widgets/pictures/pictures_wid
get_fly_fishing.swf" width="300" height="250"></embed></object>
Flash 插件的好處是相當強大，且不會受瀏覽器影響太大，但缺點是插件本身必須以
Flash 寫成，許多插件本身是某個網站的延伸，順便做個插件，若試著以 Flash 插件的
方式來提供原本在網站上的服務，則幾乎所有程式都得重寫，有的工程師不會寫 flash
的，更是為了一個小插件而必須再請來一個人，不合效益。
2008 年 12 月 27 日
第12頁
JavaScript 插件
因此，目前業界認為最好用，且最乾淨、最有彈性的插件的寫法。JavaScript 插件在
美觀上面尤其佔優勢，可以完全的融入對方的網站之中，使用它所預設的字體等等（當
然若想自訂 CSS 依然可以），不會有 scroll bar 的干擾。不過，JavaScript 也有一個缺
點，那就是使用者頁面會等到你的 JavaScript 整個 load 完才會繼續畫出頁面其他的部
份，若你的 JavaScript 出現 bug，或者伺服機當掉，那所有嵌了你的插件的使用者的
頁面也都會全部悉數掛掉！之前發生 Sitemeter 當機，以致於全美國許多大部落格都
紛紛當機一整天，就是因為大家都嵌 Sitemeter 的 JavaScript 插件的緣故。不過，這樣
的情形並不多見，且 JavaScript 插件的好處實在太多，因此建議以後可盡量學習以
JavaScript 來製作插件。
到底「插件」是怎麼做的呢？一個 JavaScript 插件的基本原理讓我們來看看。首先，

我們提供給使用者的「embed code」(嵌入碼)，通常是這樣寫的：
<style type="text/css">
.customCSSclass a{text-decoration:none;}
</style>
<script type="text/javascript" src="server.php"></script>
主要「插入」的程式碼，是藏在「server.php」裡面。換句話說，我們利用 JavaScript
的<script>語法，這個語法平常若指示「src」，應該是要到遠端去抓一個「.js」檔案過
來（譬如我們這堂課有抓「prototype.js」等檔案），然後這個「.js」檔案裡面寫的就是
平常的 JavaScript 碼，只是包成一個「.js」檔案比較好抓下來而已。但在 JavaScript
插件裡，我們將這個「.js」檔換成一個「.php」的程式擋，也就是去呼叫遠端的 PHP
程式，讓它「生成」一堆 JavaScript 語法。
這些 JavaScript 語法，就是插件主要要呈現在頁面上的內容。這個語法大部份都是重
覆著 :
document.write(‘<h1>這是插件生成的新內容</h1>);
2008 年 12 月 27 日
13頁
第
這樣的動作，也就是用 document.write( )，一點一滴的把插件的內容，動態的「寫」

在使用者的網站上面。這個 document.write( )裡面當然是什麼都可以放，要放什麼
HTML，還是要放其他的 JavaScript 都可以。
因此，一個 server.php 的寫法，可能如以下。這和一般 PHP 的先抓使用者 input 傳入

的變數，再找資料庫的東西，然後把結果記到「var」變數，再由 document.write( )將
它印出來在使用者的頁面上。這樣，一個插件就完成了它的工作了。
<?php
$data = $_GET[‘name’];
$result = mysql_query("select * from posts where name = $data”);
if (!$result) {
die($message);
}
$row = mysql_fetch_assoc($result));
$phone = $row[‘phone’];
$address = $row[‘address’];
$var = "<p class=customCSSclass> 這個人的住址是: $address</p>";

$var .= “這個人的電話則是: $phone “;
?>
document.write( '<?=$var ?>');
五個常常用得上的JavaScript小工具
個常常用得上的小工具
1. 文字編輯器:
文字編輯器 FCKedtor
一般我們若碰到需要文字編輯的狀況，通常就是使用「Textarea」，讓使用者填入一些
文句，然後我們再做處理。問題是使用者這樣就只能輸入純文字，無法做一些色彩、
字型、大小方面的變化，因此漸漸有人透過 JavaScript 來做出更好用的文字編輯器，
其中 FCKEditor 為業界公認非常好用的一個選擇。
2008 年 12 月 27 日
第 14頁
使用 FCKeditor 很容易，並且已經有 PHP 的範例，在 PHP 程式中甚至不必加入任何

JavaScript，只要加入一個 PHP 檔案，裡面就會幫我們把 JavaScript 處理好了：
include("fckeditor/fckeditor.php") ;
然後，我們只要在欲置放那個長方型框框處置放以下語法：
$sBasePath = '/teach/class8/fckeditor/';
$oFCKeditor = new FCKeditor('FCKeditor1','100%', '700') ;
$oFCKeditor->BasePath = $sBasePath ;
$oFCKeditor->Value = $content ;
$oFCKeditor->Create() ;
即可順利秀出 FCKeditor 的美麗的編輯畫面。在使用者按下 submit 後，這個編輯器裡

面的東西會被轉成 HTML 格式，放在「FCKeditor1」的 POST 欄位中，以以下的語法
取得：
$content = $_POST['FCKeditor1'];
2. 頭頂的瀏覽選單(navigational
頭頂的瀏覽選單 menu)
一個網站最重要的東西之一就是「選單」，我們使用 Windows 習慣，選單通常是在視
窗頂上的部份，按下一個選項，會有一個框框應聲滑下來，上面還有其他的子選項，
若看到有些子選項有一個小箭頭，還可以拉出更次級的小框框，選其他的子選單……
以此類推。這樣的選單，在以往的網站中是不可能達成的，但現在透過 JavaScript，
已經有許多熱心的工程師幫我們寫了一些範例。
我們這邊找來「Pro Dropdown 2」
，簡單好用，只要在程式「head」區裡加入兩行：
<link rel="stylesheet" type="text/css" href=" pro_dropdown_2.css" />

<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>
再參考 Mr.6 範例中的 header.php 檔案中註解有「dropdown」的區塊，就可以將這個

2008 年 12 月 27 日
第 15頁
方便的選單呈現出來了。至於使用者選擇一個選項後，只要<a>裡頭加入正確的 URL，
使用者即會被帶到那個地方去。
3. 複製網址
在現今的網站設計中，我們常常看到尤其是社群網站，都會在頁面上特別註解「此頁
面的 URL」，讓使用者不必麻煩到網址欄去複製目前網址。這個設計通常會是兩個控
制項所組成，一個是文字框(textbox)，裡面已經預先填好這個網頁的 URL，右手邊則
是一個按鈕，上面寫著「copy」，或「複製網址」。這個複製網址不易製作，因為 IE
與 Firefox 兩者並沒有完全支援，因此這裡找到一個特殊寫法，透過 Flash 的方式來成
功複製網址（在 Firefox 裡），只要先在「head」區先定義 JavaScript 函數:
function clipboardcopy(inElement)
// 詳細程式請見 Mr.6 這次範例的 header.php
然後請記得，有一個「_clipboard.swf」檔案，務必被置於和這個 PHP 檔案同一個資料

夾中。再於 HTML 檔案中適當的地方，寫下以下的語法，使用者就會看到一個文字
框和一個按鈕：
<form style='margin-left:30px;' name=sticker>

<input type=text name=sticker_code id=sticker_code value='http://aaa.com' >
<input type="button" onclick='clipboardcopy(sticker.sticker_code);';
value="複製網址" />
</form>
然後，當使用者過來，按下「複製網址」鍵，就會將「'http://aaa.com」給複製下來，
等一下按下「ctrl-V」即可貼在他想要的地方。
4. 整個區塊文字漸漸消失的設計
整個區塊文字漸漸消失的設計
現今的網站程式中，當使用者按下「刪除」，若還要回到伺服機，將整頁都 reload 一
遍，已經是過時的做法了。因此為了炫麗原則，按下刪除後，網頁會送一個 AJAX call
2008 年 12 月 27 日
第16頁
到遠端的 PHP 程式去，在收到了遠端 PHP 程式的「成功刪除」的回應後，不需要整

頁重 load，即可透過 DIV 的設定，將這個 DIV 區塊整個設成「不見」
，對使用者來說
就產生了視覺上「被刪除」的效果。只是直接刪除的話，看起來還不夠炫，因此現在
頗為流行的是「漸漸消失」或「漸漸出現」的設計。
這樣「fade-in」
、「fade-out」的效果有好幾種做法，我們這次所使用的是「Scriptaculous」
所附的「Effect」的效果。只要在「刪除」的處理的 JavaScript 過程中加上一句：
javascript:Effect.toggle(“box-2’, "appear");
就可以將原本還在的 DIV 慢慢的消失不見。反之，當它再被呼叫一次，原本已消失的

DIV 又會慢慢出現。注意，「box-2」為該 DIV 的 ID，通常「2」就是那筆資料的 ID，
這樣一來，當我們送出「delete」的 AJAX 指令到遠端伺服機的 PHP，PHP 做好刪除
動作回覆時，只要再將剛剛刪除的資料的 ID 傳回來，我們這邊就知道應該讓哪個 DIV
「變不見」了。
5. 選顏色
我們常常需要請使用者選一個他們喜歡的顏色。在網站的世界裡，我們習慣以 HEX
來詮釋一個區塊、一個字體的顏色，但這種 RRGGBB 形容方式，一般使用者不會記
得，不容易選擇他們真正喜歡的顏色，我們若可以呈現出某個調色盤，就好像在 Word
裡選顏色一樣，對使用者來說就是一大福音。
這裡使用的是「ColorPicker」的 JavaScript 程式碼，只要在「head」區加入以下的兩

行：
<link rel="stylesheet" type="text/css" href="colorPicker.css" />

<script src="js/colorPicker.js" type="text/javascript"></script>
然後再於適當的版面位置置放以下的程式碼，即可呈現出一個可讓使用者選擇顏色，
並在使用者送出他的選擇後立刻陳列顏色 HEX 碼的文字框：
2008 年 12 月 27 日
第17頁
<input type=button style="" id="colorbox4" value=請選顏色 class="colorbox">

<input type="text" name=color id="colorfield4" ><br>
然後，還必須在程式中加入以下程式碼。注意，為避免 IE6 當機，我們將這段原本應

該置於程式中央的程式碼，改為在 load( )自定函數中再執行，但我們必須在<body>標
籤中指示「onload」
：
<body onload='load();'>
然後在「head」區中寫入以下程式：
function load() {
new Control.ColorPicker("colorfield4", { "swatch" : "colorbox4" });
}
2008 年 12 月 27 日
第18頁
今日流程
今天的流程大致如下：
1. 先教授 JavaScript 基本語法。
2. 當場實作 JavaScript 頁面及基本的 HTML。
3. 進入「我的私房部落格」的範例網站，先解釋整個四個頁面的架構。
4. 進入 edit_post.php，解釋選單(menu)。
5. 解釋 edit_post.php 的圖片上載。
6. 解釋 FCKEditor、ColorPicker 及其它在頁面上的 JavaScript 工具。
7. 回到 index.php，解釋 Clipboard 及其他在頁面上的 JavaScript 工具。
8. 解釋 AJAX 原理（輔以講義），以及「漸漸不見」。
9. 解釋插件原理（輔以講義）
。
10. 試用其他的套件（若時間許可）。

網頁教學 測 試

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

網頁教學 測 試

Uploaded by

Copyright:

Available Formats

Mr.

3. 請至 Navicat，在 localhost 下面增加一個新的 database，名為「jstest」。

mysql –u root –p jstest < jstest.sql

JavaScript 從 1990 年代網站剛開始，就已經是被廣為使用的程式語言，若這堂課在 1990

當然，要知道，想設計一個網站，就算完全不懂 JavaScript，仍然可以靠純粹的 PHP

JavaScript 的語法類似於 Java 與 C 語言，並且一開始就有 OOP 的概念，也就是視許

而 JavaScript 和 PHP 不同的地方，在於 PHP 是「寫給伺服機去執行的」，當你的一個

相反過來，JavaScript 就不一樣了。當你在檔案裡寫了一行 JavaScript 語法，有使用者

和 JavaScript 同樣也都是在使用者電腦執行的，包括 HTML 語法。所以，HTML 和

以下示範一段簡單的 JavaScript 程式。JavaScript 程式碼在 HTML 之間，不能直接寫

我們也示範了 JavaScript 幾個好用的內建函數。譬如「alert」會自動跳出一個 Windows

然後，在 JavaScript 裡，也有類似 PHP 的「echo」功能，也就是可以直接寫一段字串

接下來我們繼續介紹幾個 JavaScript 的語法：

if ((age < 21) && (buying_alcohol == "yes"))

if ((my_last_name == "黃") || (my_last_name == "王"))

以上介紹的是 If 的語法，也就是只有在 if 後面那句話是「正確」的時候才會執行 if

以上兩段分別以 while 和 for 兩種方式來寫「迴圈」，第一種方式 while 就是在說：當

第二段則形容以 for 的方式來寫「迴圈」 ，for 的指令行有三個部份，分別代表「開始」、

JavaScript 與 FORM 互動語法

<a href="#" onClick=’ window.open ("http://google.com","window_name","

var colors = new Array("紅色","藍色","綠色");

// put together the string and alert with it

<a href="#" onClick="announceTime(‘現在的時間是:’);">查看現在時間</a>

如上圖所示，AJAX 並不是一個新的語言，而是原本就有的 JavaScript 語法，經過一

<a href="#" onclick="sendDeleteRequest('<?= $post_id ?>');">刪除</a>

這個函數使用了 Prototype 的 Ajax.Request 的呼叫法，在這個呼叫法中，我們設定

這個「showResponse」函數即為程式人熟悉的「call back function」

var post_id = req.responseText;

遠端的 PHP 所 echo 的所有字串，都會存在「req.responseText」變數裡，我們只

如果這個「天氣到底如何」不是字串，而是 HTML 碼，則這個頁面就會產生比

因為這個 logo.jpg 並非在使用者的伺服機裡，而是必須到另一台「別人家的機器」

這樣的一個語法，就會在頁面中安排出一個長 300、寬 280 的框框，這一塊框框裡面

<object width="300" height="250"><param name="movie"

到底「插件」是怎麼做的呢？一個 JavaScript 插件的基本原理讓我們來看看。首先，

這樣的動作，也就是用 document.write( )，一點一滴的把插件的內容，動態的「寫」

因此，一個 server.php 的寫法，可能如以下。這和一般 PHP 的先抓使用者 input 傳入

$var = "<p class=customCSSclass> 這個人的住址是: $address</p>";

使用 FCKeditor 很容易，並且已經有 PHP 的範例，在 PHP 程式中甚至不必加入任何

即可順利秀出 FCKeditor 的美麗的編輯畫面。在使用者按下 submit 後，這個編輯器裡

<link rel="stylesheet" type="text/css" href=" pro_dropdown_2.css" />

再參考 Mr.6 範例中的 header.php 檔案中註解有「dropdown」的區塊，就可以將這個

// 詳細程式請見 Mr.6 這次範例的 header.php

然後請記得，有一個「_clipboard.swf」檔案，務必被置於和這個 PHP 檔案同一個資料

<form style='margin-left:30px;' name=sticker>

到遠端的 PHP 程式去，在收到了遠端 PHP 程式的「成功刪除」的回應後，不需要整

就可以將原本還在的 DIV 慢慢的消失不見。反之，當它再被呼叫一次，原本已消失的

這裡使用的是「ColorPicker」的 JavaScript 程式碼，只要在「head」區加入以下的兩

<link rel="stylesheet" type="text/css" href="colorPicker.css" />

<input type=button style="" id="colorbox4" value=請選顏色 class="colorbox">

然後，還必須在程式中加入以下程式碼。注意，為避免 IE6 當機，我們將這段原本應

new Control.ColorPicker("colorfield4", { "swatch" : "colorbox4" });

1. 先教授 JavaScript 基本語法。

2. 當場實作 JavaScript 頁面及基本的 HTML。

6. 解釋 FCKEditor、ColorPicker 及其它在頁面上的 JavaScript 工具。

7. 回到 index.php，解釋 Clipboard 及其他在頁面上的 JavaScript 工具。

You might also like

網頁教學　測試

網頁教學　測試

第二段則形容以 for 的方式來寫「迴圈」，for 的指令行有三個部份，分別代表「開始」、