s9926167 羅世雄

2014年5月5日星期一

Lab 22 共同編輯文件

閱讀[新聞報導] 美國商會結合微軟二手電腦供社福團體免費用，假設這個計畫是由你發起，你要擬定一張志工排班表，以及修復場地值班人員。

請製作一張值班人員表，為了提升效率，你決定先擬好空白表格，再開放編輯權限給你的夥伴填寫，請夥伴上網登記輪值時間。
製作志工時間登記表，當志工們填寫資料，管理者可以得到一份excel清單，為了保障個人隱私，請不要將excel公開給所有人。

助教教學文件

===============================

志工值班時間表

志工值班時間及意願表

Lab 21 製作線上投影片

參閱特教學校科技輔具應用工作坊議程表，將範例投影片轉為Google投影片，可以線上觀看。

==================================

2014年4月28日星期一

Before you do this lab, you must understand what is CGI(Common Gateway Interface) and Form.
1. So please search the answer and post your opinion in your blog.
2. Hand code a HTML to edit an HTML so that the webpage can send a request to Google like http://maps.google.com/maps?q=24.9586,+121.24114 Use Form CGI that includes action, input, and submit. Try a few different coordinates. 3. If the input is not in the format of coordinates, display an error and ask the user to retry. For example, an incorrect input may look like 12.a2,21.22

===================================
CGI (Common Gateway Interface，共同閘道管制介面)不是一種語言，
而是一種象徵性的名稱。
CGI程式可以用Perl、C++或是Visual Basic寫作而成。
CGI處處可見，留言板、聊天室與搜尋引擎都是CGI程式可以寫成的。
CGI程式主要提供的是一種使用者與伺服器互動的一種管道。

Lab 20

程式碼：
<html>
<title>Lab 20</title>
<body>
<form action="http://maps.google.com/maps" method="get" name="f" onsubmit="return check()">
<input name="q" type="text" />
<input name="send" type="submit" value="search" />
</form>
</body>
<script>
function check()
{ var floatReg =/^([+-]?)[1-9]\d*(\.\d*)?,([+-]?)[1-9]\d*(\.\d*)?$/;
if(!floatReg.test(f.q.value)){

alert("Incorrect format!!!");
f.q.value="";
document.f.q.focus();
return false;
}
}
</script>
</html>

Lab 19 Lab Form and Action

Purpose of lab: Learn how to use Form to invoke a remote service through CGI.
1. Take a look at the search box of this search page, inlcuding radio buttons, text input, and submit button.
2. Open your Notepad++.
3. Open a new empty HTML file.
4. Write a form that acts like this search page.
5. In the form you write, set Action="http://google.com/search" and name of Form as "f" and method as "get" (See Hint if it does not work.)
6. Save your file on your computer.
7. Run your HTML by Chrome/Firefox. What do you get?
8. Set method as "post"
9. Run your HTML by Chrome/Firefox. What do you get? You can watch the Forms and Input in the Web Development Course at Udacity.

==============================

程式碼：
<html>
<body>
<form name="f" action="http://google.com/search" method="get">
Search by Google: <input type="text" name="q" value="">
<input type="submit" value="Search">
</form>
</body>
</html>

Lab 18 change pictures

Do Lab 16 without using function calls.

==========================

2014年4月14日星期一

Lab 17 JavaScript

產生三個文字方塊，上面各寫1, 2, 3
這三個方塊上方可以顯現照片，當滑鼠置於文字1的時候，
顯示照片A 當滑鼠置於文字2的時候，
顯示照片B 當滑鼠置於文字3的時候，顯示照片C

=================================

Pet 001 Pet 002 Pet 003

<html>
<body>
<div id="Layer" style="display: none; position: absolute; z-index: 1;">
</div>
<span onmousemove="showPic('http://www.fotobeginner.com/wp-content/uploads/0017.jpg')" onmouseout="hidePic()">Pet 001</span>
<p>
<span onmousemove="showPic('http://ext.pimg.tw/littlething/1203403642.jpg')" onmouseout="hidePic()">Pet 002</span>
<p>
<span onmousemove="showPic('http://images2.gamme.com.tw/news/2013/02/1/o5qYn52ckKOVp6c.jpg')" onmouseout="hidePic()">Pet 003</span>
<p>
</body>
<script>
function hidePic(){
document.getElementById("Layer").innerHTML = "";
document.getElementById("Layer").style.display = "none";
}
function showPic(s){
var x,y;
x = event.clientX;
y = event.clientY;
document.getElementById("Layer").style.left = x;
document.getElementById("Layer").style.top = y;
document.getElementById("Layer").innerHTML = "<img src=\""+s+"\">";
document.getElementById("Layer").style.display = "block";
}
</script>
</html>

2014年3月24日星期一

Lab 16 Change an image by moving the mouse

1. Design a webpage to display picture A initially.
2. Try to move the mouse. When the mouse is not within the area of the picture, picture A remains the same. When the mouse is within the area of the picture, display picture B in place.

You can use the photo in
http://minstral.blogspot.tw/2013/06/blog-post.html
for picture A and the photo in
http://minstral.blogspot.tw/2013/05/blog-post_30.html
for picture B.

Hint: You may find the example useful.
Hint: If you have a problem displaying a picture on the browser, you can check out the example.

===================================

2014年5月5日 星期一

2014年4月28日 星期一

2014年4月14日 星期一

2014年3月24日 星期一

2014年5月5日星期一

2014年4月28日星期一

2014年4月14日星期一

2014年3月24日星期一