2014年6月9日 星期一

Homework 06/09/2014 : 使用Google Drive 進行同步編輯

如何使用Google Drive 雲端硬碟與 微軟Word 與夥伴進行協同編輯

1. 上網下載 Google Drive 程式,在你的電腦上安裝這支雲端硬碟程式
2. 這支程式會建立一個新的目錄,稱做Google 雲端硬碟
3. 所有在這個目錄編寫的任何文件(Word/Excel/ppt) 都會自動同步到 Google 線上文件
4. 進入 Google 線上文件 設定你要和夥伴 分享的文件,可分為 只可預覽,可編輯 等多種權限,如果未設定分享,別人無法看到這些線上文件。
5. 使用 Word 繼續編輯文件,Google 會隨時同步到雲端


優點
1. 無需隨時把新版本傳給夥伴
2. 無需改變編輯工具(Word ...)
==================================

Lab 36 Google Analytics

1. Enter Google Analytics
2. Put the code provided by Google Analytics in your own blog.
3. Check the results to see the daily traffic chart, the recent visitors by locations.

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

Lab 35 匯出部落格

1. 將你的部落格匯出為 XML,請使用blogspot 已經提供的匯出工具
2. 在blogspot 新建一個空白部落格。
3. 將剛才匯出部落格匯入到新的部落格
4. 檢查匯出情況,是否有出現異常,資料遺失或被變更?

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

2014年5月26日 星期一

Lab 34 Syndication with RSS 2.0

1. 進入你的部落格,登入,選擇設計
2. 新增小工具
3. 選取
資 訊提供
將 RSS 或 Atom 資訊提供的內容加入您的網誌。
Blogger 製作

4. 撰寫或貼上所需連結(範例)
==============================


Lab 33 XML (2)

1. Register and Download Xray, an XML, XSLT editor and processor.

2. Given the
Listing 1. An XML document representing the results of a soccer tournament

Listing 2. A basic style sheet for the soccer results

use the XSLT as in the Listing 2 to transform the XML file as in the Listing 1.
(archive)

3. View the formatted HTML file.
4. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 3. A style sheet that computes team standings


compute the team standings in a table.

5. View the formatted HTML file.

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

<META http-equiv="Content-Type" content="text/html">
<title>
        Results of Group A</title></head>
<body><h1>
        Results of Group A</h1>
<h2>Brazil versus Scotland</h2>
<p>Played on 10-Jun-1998</p>
<p>Result:
            Brazil2,
            Scotland1</p>
<h2>Morocco versus Norway</h2>
<p>Played on 10-Jun-1998</p>
<p>Result:
            Morocco2,
            Norway2</p>
<h2>Scotland versus Norway</h2>
<p>Played on 16-Jun-1998</p>
<p>Result:
            Scotland1,
            Norway1</p>
<h2>Brazil versus Morocco</h2>
<p>Played on 16-Jun-1998</p>
<p>Result:
            Brazil3,
            Morocco0</p>
<h2>Brazil versus Norway</h2>
<p>Played on 23-Jun-1998</p>
<p>Result:
            Brazil1,
            Norway2</p>
<h2>Scotland versus Morocco</h2>
<p>Played on 23-Jun-1998</p>
<p>Result:
            Scotland0,
            Morocco3</p>


















==========================
<h1>Results of Group A</h1>
<table cellpadding="5">
<tr>
<td>Team</td>
<td>Played</td>
<td>Won</td>
<td>Drawn</td>
<td>Lost</td>
<td>For</td>
<td>Against</td>
</tr>
<tr>
<td>Brazil</td>
<td>3</td>
<td>2</td>
<td>0</td>
<td>1</td>
<td>6</td>
<td>3</td>
</tr>
<tr>
<td>Scotland</td>
<td>3</td>
<td>0</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>6</td>
</tr>
<tr>
<td>Morocco</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>Norway</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>0</td>
<td>5</td>
<td>4</td>
</tr>
</table>

Lab32 XML

1. Register and Download Xray, an XML, XSLT editor and processor.
(安裝X-Ray需要權限)

(助教碎碎念:若無法順利安裝再點)

2. Given the the XML file and XSLT file ,
use Xray to do the transformation of the XML into HTML.
You have to replace [ with <.

3. View the formatted HTML file.

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

2014年5月19日 星期一

Lab 31 Making images accessible

1. Study what an ALT tag is.
2. Use Notepad++ to edit the following homepage
at http://bloggercamp.blogspot.com/2007/01/2007.html

You can copy and paste the content to your Notepad++.

3. Save your editings and preview your webpage.

4. Make the webpage accessible by
adding ALT text to the images.

5. Check whether you can see the ALT text for the images by moving the mouse over the image.

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


Lab 30 視障者使用網頁的需求

參考視障者瀏覽網頁的需求,請至少針對五類需求(例如:選定你的語言),每類舉出一個網頁實例(台灣或國外皆可),並列出該網頁關鍵HTML片段,證明該網頁的確符合視障者需求。

相關新聞報導 爭資訊與文化平權 上千身障者上街(自由時報12.1.2013)

==========================
1.不要開出新視窗:
Language Translation | Translate Free Online
http://ft.folk-dance.idv.tw/
關鍵HTML片段: 網頁原始碼找不到 <a target="_blank">

2.提供能取代圖片的文字:
Google首頁 https://www.google.com.tw/
關鍵HTML片段:<img id=gbi4i width=24 height=24 onerror="window.gbar&&gbar.pge?gbar.pge():this.loadError=1;" src="//lh3.googleusercontent.com/-SEMjByYxK4Q/AAAAAAAAAAI/AAAAAAAAAAA/7rWJZPJe8-I/s24-c/photo.jpg" alt="羅世雄">

3.定義快速鍵:
新竹市消防局 http://www.hcfd.gov.tw/access.asp#
關鍵HTML片段:<a href="#" AccessKey="L" title="左方主選單區" class="key-L">:::</a>

4.:在連結上加入標題
中國廣播公司 http://www.bcc.com.tw/
關鍵HTML片段:<a href='adv2_count.asp?nid=1' target="_blank" title="幸福好時光">幸福好時光</a>

5.有意義的網路標題:
維基百科 http://zh.wikipedia.org/wiki/Microsoft_FrontPage
關鍵HTML片段:<span class="toctext">簡介</span>

Lab 29 Using PageRank

在Chrome上安裝 PageRank , 然後使用 PageRank 量測以下網站的 PageRank (0~10分)

紐約時報 http://www.nytimes.com
CNN http://www.cnn.com/
台灣雅虎 http://tw.yahoo.com
蕃薯藤 http://www.yam.com
PCHome 購物 http://shopping.pchome.com.tw/

接著,以PageRank量測你常用的三個網站,
並留下至少八張有做此LAB的紀錄。

參考資料:
PageRank-Google 決定搜尋排名的關鍵技術
PageRank 的論文

========================================
1.紐約時報 http://www.nytimes.com
PageRank:9

2.CNN http://www.cnn.com/
PageRank:9

3.台灣雅虎 http://tw.yahoo.com
PageRank:8

4.蕃薯藤 http://www.yam.com
PageRank:6

5.PCHome 購物 http://shopping.pchome.com.tw/
PageRank:5

[我常用的三個網站]:
1.巴哈姆特電玩資訊站 http://www.gamer.com.tw/
PageRank:6

2.卡提諾論壇 http://ck101.com/
PageRank:4

3.Facebook https://www.facebook.com/
PageRank:9

2014年5月12日 星期一

Lab 28 Design your business card

1. Refer to the div example Try it yourself
2. Design your business card. You can choose your colors, fonts, styles.

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

<!DOCTYPE html>
<html>
<body>

<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #AAF72A;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#FFF007"></div>

<h3>9926167 電子四甲 羅世雄</h3>

<div style="letter-spacing:15px;">TV電玩遊戲熱愛者</div>

<div style="color:#40B3DF;">專長興趣
<span style="background-color:#B4009E;color:#ffffff;">打電動交友</span>
</div>

<div style="color:#DD0077;">Facebook: shongle lo</div>

</div>

</body>
</html>

Lab 27 More on HTML

Tables
1. Open Notepad++.
2. Copy and paste theTables example athttp://www.w3schools.com/html/html_tables.asp
3. Open browser for the result.

Lists
1. Open Notepad++.
2. Copy and paste the Lists example athttp://www.w3schools.com/html/html_lists.asp
3. Open browser for the result.
========================================
Tables:
Jill Smith 50
Eve Jackson 94
John Doe 80

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td
{
border:1px solid black;
padding:5px;
}
table
{
border-spacing:10px;
}
</style>
</head>
<body>

<table style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>80</td>
</tr>
</table>

</body>
</html>

===============================
Lists:

An Unordered List:

  • Coffee
  • Tea
  • Milk
  • Water

An Ordered List:

  1. Coffee
  2. Tea
  3. Milk
  4. Water

<!DOCTYPE html>
<html>
<body>

<h4>An Unordered List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
</ul>

<h4>An Ordered List:</h4>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
</ol>
</body>
</html>


Lab 26 HTML

HTML
Tutorial

Preparation

1. Using Notepad++, Copy and paste the HTML example at Introduction to HTML
2. Save the file as myfile.html
3. Open the file using Browser. (請將3.輸出結果拍一張圖)
4. Repeat the work for

HTML Elements
HTML Headings
HTML Paragraphs
HTML Links
HTML Images

(請將7.輸出結果拍一張圖,共五張)
===========================================






2014年5月5日 星期一

Lab 23 Google Docs

1. Go to Google Docs. Google Docs lets you write Word documents through an online web service.

2. Start writing.

3. Publish the Word document. Make sure your friends can view your document.

4. What's the URL of your document.

5. Save your document as .doc and .pdf, the two common formats for documents.

Hint: This is a sample Word document.

News coverage:

Google “Docs & Spreadsheets” Launches ,Oct 2006
=================================================

Lab 24 Google Maps II

Write a form to send a query to Google maps. If the input is not in the format of coordinates, display an error, clear the input, and ask the user to retry. For example, an incorrect input may look like 12.a2,21.22

1. You should define a function check() to check the query input.
2. You can call the function check as follows:form action="http://maps.google.com/maps" method="get" name="f" onsubmit="return check()"

==============================
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 22 共同編輯文件


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

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


助教教學文件

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

Lab 21 製作線上投影片

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

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

2014年4月28日 星期一

Lab 20 Hand code a form

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.

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

Search by Google:

程式碼:
<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.

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


<html>
<body>
<img onmouseover="this.src='http://i19.photobucket.com/albums/b158/shongle/CUTE%20PET/pipi08a.jpg'" onmouseout="this.src='http://www.modern-senior.com/wp-content/uploads/2013/12/number-1-sign.jpg'"
src="http://www.modern-senior.com/wp-content/uploads/2013/12/number-1-sign.jpg" width="304" height="228">
<script>
</script>
</body>
</html>

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 15 九九乘法表


1. Open notepad++
2. Based on the code as in
http://www.scottandrew.com/weblog/articles/dom_4 ,

write a code to generate the table of 9*9 products. (九九乘法表)
Hint: The javascript code should be enclosed by script tags.

============================================
Lab 15 The 99 Product Table will show below.
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"http-equiv="content-type">
<title>Lab 15</title>
<p><b>The 99 Product Table will show below.</b></p>
<tab><input type="button" value="99 ProductTable" onclick="buildTable()"></tab>
<script>
function buildTable(){
  docBody = document.getElementsByTagName("tab").item(0)
  myTable = document.createElement("TABLE")
  myTable.id ="TableOne"
  myTable.border = 1
  myTableBody = document.createElement("TBODY")
  for (i = 1; i <= 9; i++){
    row = document.createElement("TR")
    for (j = 1; j <= 9; j++){
      cell = document.createElement("TD")
      cell.setAttribute("WIDTH","50")
      cell.setAttribute("HEIGHT","50")
      textVal = i+"*"+j+"="+i*j
      textNode = document.createTextNode(textVal)
      cell.appendChild(textNode)
      row.appendChild(cell)
    }
  myTableBody.appendChild(row)
  }
  myTable.appendChild(myTableBody)
  docBody.appendChild(myTable)
}
</script>
</head>
<body id="body">
</body>
</html>

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.

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


<html>
<body>

<img onmouseover="this.src='http://i19.photobucket.com/albums/b158/shongle/CUTE%20PET/pipi08a.jpg'" onmouseout="this.src='http://www.modern-senior.com/wp-content/uploads/2013/12/number-1-sign.jpg'"
src="http://www.modern-senior.com/wp-content/uploads/2013/12/number-1-sign.jpg" width="304" height="228">

<script>
</script>

</body>
</html> 

Lab 14 Create Image using DOM

1. Open notepad++
2. Hand code a javascript that loads an image from Internet based on
the DOM model.
3. Take a look at the sample code that shows how window.onload to load the image.
4. Use a button to load the image. Try how onclick works.

=============================
lab14 The image will show on bottom of this web page.



<html>
<head>
<title>lab14</title>
<p><b>The image will show on bottom of this web page.</b></p>
<form action="javascript:void(0);" id="exampleForm">
<button onclick="build()">I am image button</button>
<br />
</form>

<script>
function build()
   {
myImg=document.createElement("IMG")
myImg.setAttribute("id","imageOne")

myImg.setAttribute

("src","http://i19.photobucket.com/albums/b158/shongle/CUTE%20PET/pipi08a.jpg")

docBody = document.getElementsByTagName("body").item(0)
var body = document.getElementById("exampleForm");
body.appendChild(myImg)
}
</script>
</head>
<body>
<br />
</body>
</html>

2014年3月17日 星期一

Lab 12 Regular expression in action

題目:Write a form to send a query to Google maps. 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

===============================
<html>
<head>
</head>
<body id="body">
<form action="https://maps.google.com/" id="exampleForm" method="get" name="q" onsubmit="return check()">
<input id="examplePass" name="q" type="text" />
<input type="submit" value="submit" />
</form>
</body>
<script>

document.getElementById("exampleForm").onsubmit = function(){
var passwordRegex =/^([+-]?)(180|(1[0-7][0-9](\.)?(\d)?(\d)?(\d)?(\d)?(\d)?(\d)?)|([0-9]?[0-9](\.)?(\d)?(\d)?(\d)?(\d)?(\d)?(\d)?)),([+-]?)(90|(([0-8]?[0-9])|([0-8]?[0-9](\.)(\d)(\d)?(\d)?(\d)?(\d)?(\d)?)))$/;

if(!passwordRegex.test(document.getElementById("examplePass").value)){
console.log("Regex didn't match");
return false;
var notify = document.getElementById("notify");
if(notify === null){
notify = document.createElement("p");
notify.textContent = "ERROR";
alert("錯誤!Incorrect format");
notify.id ="notify";
var body =document.getElementById("body");
body.appendChild(notify);
}
}
};
</script>
</html>


Lab 13 Regular expression in action II

題目:

撰寫一個網頁能夠自動檢查輸入的字串是否為網址(例如
163.17.9.5
www.cycu.edu.tw
是合法網址

123.222.2
999.999.999.999
www.cycu
不是合法網址)

==========================
<html>
<head>
</head>
<body id="body">
<form action="javascript:void(0);" id="exampleForm">
<input id="examplePass" />
<input type="submit" />
</form>
</body>
<script>

document.getElementById("exampleForm").onsubmit = function(){
var passwordRegex =/^([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])(\.)([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])(\.)([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])(\.)([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])$/;

var passwordRegex1 =/^www(\.)(.+)(\.)(.+)$/;

if(!passwordRegex.test(document.getElementById("examplePass").value)&&!passwordRegex1.test(document.getElementById("examplePass").value)){
console.log("Regex didn't match");
var notify = document.getElementById("notify");
if (notify===null){
notify = document.createElement("p");
notify.textContent ="Invalid"
notify.id="notify";
var body = document.getElementById("body");
body.appendChild(notify);
}
}
};

</script>
</html>

Lab 10 Regular expression I

所求:
撰寫一個網頁能夠自動檢查輸入的字串是否為整數或小數(例如 12.34, -1.2, +0.02, .30)。

---------------------

<html>
<head>
</head>
<body id="body">
<form action="javascript:void(0);" id="exampleForm">
<input type="text" id="examplePass" />
<input type="submit" />
</form>
</body>
<script>

document.getElementById("exampleForm").onsubmit =function() {
var passwordRegex = /^[+-]?\d*(\.\d*)?$/;

if(!passwordRegex.test(document.getElementById("examplePass").value)){
console.log("Regex didn't match");
var notify = document.getElementById("notify");
if (notify === null){
notify = document.createElement("p");
notify.textContent = "輸入的字串必須為有意義的整數或小數!"
notify.id = "notify";

var body = document.getElementById("body");
body.appendChild(notify);
}
}
};

</script>
</html>
-------------------------------------------------
下圖為輸入正確示意圖


Lab 11 Regular Expression II

所求:
撰寫一個網頁能夠自動檢查輸入的字串是否為"整數或小數,逗號,整數或小數"格式(例如 24.9586,121.24114)

-------------------------------------------
<html>
 <head>
 </head>
 <body id="body">
  <form action="javascript:void(0);" id="exampleForm">
   <input type="text" id="examplePass" />
   <input type="submit" />
  </form>
 </body>
 <script>

 document.getElementById("exampleForm").onsubmit =function() {
  var passwordRegex = /^[+-]?\d*(\.\d*)?,[+-]?\d*(\.\d*)?$/;

  if(!passwordRegex.test(document.getElementById("examplePass").value)){
  console.log("Regex didn't match");
   var notify = document.getElementById("notify");
   if (notify === null){
   notify = document.createElement("p");
   notify.textContent = "輸入的字串必須為有意義的"整數或小數,逗號,整數或小數"格式!"
   notify.id = "notify";
 
   var body = document.getElementById("body");
   body.appendChild(notify);
   }
  }
 };

  </script>
</html>
-------------------------------------------------
下圖為輸入正確示意圖


2014年3月16日 星期日

Homework 3/10/2014: Lab 8 Using browsers for programming II

要求:撰寫一個網頁能夠自動檢查輸入的密碼,長度必須至少六個字元,且必須至少包含一個數字以及一個非英文字母的字元。
---------------------

<html>
<head>
</head>
<body id="body">
<form action="javascript:void(0);" id="exampleForm">
<input type="password" id="examplePass" />
<input type="submit" />
</form>
</body>
<script>

document.getElementById("exampleForm").onsubmit =function() {
var passwordRegex = /^(?=.*\d)(?=.*[\W_]).{6,}$/;

if(!passwordRegex.test(document.getElementById("examplePass").value)){
console.log("Regex didn't match");
var notify = document.getElementById("notify");
if (notify === null){
notify = document.createElement("p");
notify.textContent = "長度必須至少六個字元,且必須至少包含一個數字以及一個非英文字母字元(無輸入順序)。"
notify.id = "notify";

var body = document.getElementById("body");
body.appendChild(notify);
}
}
};

</script>
</html>
-----------------
下圖為"未達要求"時示意圖



2014年3月10日 星期一

Lab 9 使用Google Docs 下OX 棋



題目:

1. 兩人一組

2. 其中一人開啟 Google Docs

3. Create 一個新文件,然後把權限分享給夥伴

4. 開始下棋 (共同編輯)


結果:

我(羅世雄)跟王偉兆

Lab 8 Using browsers for programming II

要求:撰寫一個網頁能夠自動檢查輸入的密碼,長度必須至少六個字元,且必須至少包含一個數字以及一個非英文字母的字元。
---------------------

<html>
<head>
</head>
<body id="body">
<form action="javascript:void(0);" id="exampleForm">
<input type="password" id="examplePass" />
<input type="submit" />
</form>
</body>
<script>

document.getElementById("exampleForm").onsubmit =function() {
var passwordRegex = /^(?=.*\d)(?=.*[\W_]).{6,}$/;

if(!passwordRegex.test(document.getElementById("examplePass").value)){
console.log("Regex didn't match");
var notify = document.getElementById("notify");
if (notify === null){
notify = document.createElement("p");
notify.textContent = "長度必須至少六個字元,且必須至少包含一個數字以及一個非英文字母字元(無輸入順序)。"
notify.id = "notify";

var body = document.getElementById("body");
body.appendChild(notify);
}
}
};

</script>
</html>
-----------------
下圖為"未達要求"時示意圖


Lab 7 Using browsers for programming

題目要求:撰寫一個網頁能夠自動檢查輸入的密碼,長度必須至少六個大寫或小寫字元或數字。




2014年3月9日 星期日

Homework 3/3/2014 Amy Cuddy: Your body language shapes who you are

  我看的是Amy Cuddy的"你的姿勢決定你是誰",看完覺得真是很實用又非常有助益的一場好演說阿!講師提到"人的生理會影響心理,心理會影響行為,行為會影響結果。"並建議大家從行為上調整來讓自己邁向成功之路,也就是"小調整會造成大改變",令我感到有如當頭棒喝一般,驚覺到也許過去自己的部份失敗經驗,很可能就是導因於"當下的姿勢"給他人的觀感不佳所致。而且此講座內容很類似我以前看過的一本書《人性的弱點》--書中教導人們如何從觀察對方身體的小動作,來判斷對方的心理狀態並預測其接下來會做的決定和行為。我個人認為很實用,恰好自己個性也是喜歡"觀察周遭"的人,已經很習慣藉由觀察他人身體動作來分析如何應對的方法,所以對此講座主題的結論老實說並不感到意外(笑)。

  不過此講座仍有讓我頗感興趣的部份,尤其是經過2分鐘實驗後的High-Power姿勢和Low-Power姿勢的人們,居然在測量唾液中的睪固酮(支配性荷爾蒙)腎上腺皮質醇(壓力荷爾蒙),會有這麼明顯的差距!?強勢者睪固酮會升高而腎上腺皮質醇下降,弱勢者則相反,真是很有趣的實驗結果。但是與其稱為強勢者和弱勢者,不如改成"有自信的人"和"沒自信的人"吧!有自信的人給他人觀感較好也容易成功,沒自信的人則相反。另外後半段講師提到自己年輕時的經驗,"即使自己當下感覺不配,但先假裝自己是成功的,最終也將會成功!"的故事也帶給我很大啟發,感覺就像是將錯就錯而因禍得福,甚至像是"自我催眠"的理論一樣。如果未來能模仿此方法去逼迫自己成功,就算起初會有點心虛、沒自信,但我相信最終若有好結果的話也是非常值得的。
  
  從此講座我學到了人若想要變得有自信而邁向成功,平時就該訓練自己從改變行為上做起。尤其在面對巨大壓力前先在有隱私的地方,花幾分鐘模仿具有高度自信的姿勢,讓自己由生理影響心理,久而久之就能逐漸成為一個有自信而不怕壓力的人。當然基本實力的累積也很重要,因此平時仍要多充實自己能力,畢竟機會是留給有準備的人!

2014年3月3日 星期一

Lab 5:Using Labels

標籤設置試做,新增"標籤label"和"網路大學"和"網路耗時元件"等等...於右側標籤欄位

Lab 6:Using Chrome

最耗時的三個元件:

CYCU:
1.runinfo.jsp

2.im13.jpg

3.newsbox.jsp

Youtube:
1.www.youtube.com

2.http://pagead2.googlesyndication.com/activeview?id=lidar2&v=104&adk=1&p=100…1280,1024&tt=1105&pt=1&deb=1-1-1-3-4-6&url=http%3A%2F%2Fwww.youtube.com%2F

3.http://csi.gstatic.com/csi?v=2&s=youtube&action=gli&pt=239&yt_spf=0&yt_li=1&e=935501,910207,923302,914062,916612,940316,937417,937416,913434,936910,936913,902907,3300062,3300101,3300130,3300137,3300161,3310366,3310628,3310649&yt_lt=cold&ei=lH4UU_bNEKrnmAWnnYHYDg&srt=169&rt=ce.172,cl.174,bf.1926,hr.2321,je.2599,jl.2604,ol.2695,aft.2695,fpt.2313&it=st.1622,req_.65,rcv_.1863


Udacity:
1.https://www.udacity.com/media/js/udacity/udacity.min.js?4353f3facd4c92187fd07d419bddaca6

2.partner-nvidia.png

3.https://www.udacity.com/media/js/external/libs.min.js?4353f3facd4c92187fd07d419bddaca6

Lab 4:破解網路大學排名DIY

1.網頁數(Size) 
中原 : Google約有 1,290,000 項結果
 台大 : Google約有 817,000 項結果
 中正 : Google約有 1,430,000 項結果
 元智 : Google約有 277,000 項結果

2.連結度(能見度 Visibility) 
中原 : Google約有 2513 項結果
 台大 : Google約有 19539 項結果
中正 : Google約有 2562 項結果
元智 : Google約有 5363 項結果

 3.檔案數(Rich files) 
中原 : Google約有 16,400 項結果
 台大 : Google約有 429,000 項結果
 中正 : Google約有 23,500 項結果
 元智 : Google約有 14,100 項結果

 4.Google Scholar 論文索引
中原 : Google約有 11,400 項結果
 台大 : Google約有 266,000 項結果
 中正 : Google約有 9,530 項結果
 元智 : Google約有 2,210 項結果