Lab Google Presentation

1. Upload a sample Powerpoint to Google docs.
2. Publish this slide presentation so that it is viewable by the general public.
3. Start your presentation.
4. Invite the person sitting next to you to join your presentation.
5. You are supposed to take the control of the presentation. When you change the slides, your audience should be able to see the slide changed at the same time.
導盲系統

(1)

















(2)

Lab Drag-and-Drop by AJAX

1. Go to Laszlo and enter (Laszlo in 10 minutes).
2. Study and play around the "drag-and-drop" example.
3. Use this method to control movie playing as in the previous lab.
4. If you drag and drop the photo to the "play" area, the movie plays.
5. If you drap and drop the photo to the "pause" area, the movie pauses.

期末報告

題目:
從 Laszlo (Laszlo in 10 minutes)，挑選一個範例進行個人研究，說明你為什麼挑選這個範例，這個範例讓你學到什麼概念，請你製作一個講義說明這個範例。

這次我挑了Constraints的範例做研究，因為範例有連續性，所以這個比較後面的範例，讓我有機會連前面的範例一起都讀過。

1.Basic
2.Proportions
3.Applying Constraints
心得:
這個範例讓我學到inheritance, attribute, events, window 等概念。

Attribute

Inheritance

Applying Constraints

reference:
Inheritance.
Attribute.

1.Play and enjoy it!!

















2.發現怎麼玩


















3.探討原因(一)

















4.探討原因(二)











5.探討原因(三)

Constraints-Proportions

1.Proportions 比例?? 跟這個程式有什麼關係呢? Just play it.

















2.發現(一)

















3.發現(二)

















4.研究心得-程式說明(一)

















5.研究心得-程式說明(二)

















6.研究心得-程式說明(三)

















7.喔~~我的天阿，原來如此。

















8.

Constraints-Basics

1.這個程式在做什麼呢? "Just play it"

















2.喔~~原來點選〝按鈕〞就會跑出一個〝小視窗〞。酷喔!! 接下來，我們看看它是怎麼辦到的。

















3.就先從〝按鈕〞說起囉。

















4.再來討論比較複雜的〝視窗〞。

















5.如果你懷疑"${cbox.value}" 回傳的值是否為 true 和 false 以下為證明。

新詐騙手法

竊個資再詐騙，8購物網站全被駭。

提到ATM轉帳就要留意。

「資料拼圖」又稱「懶人密碼」。

12/14(五) 那晚我也差點成為受害者。

千騙、萬騙，不離ATM。

Lab Movie Player by AJAX

1. Go to Laszlo and enter (Laszlo in 10 minutes).
2. Study and play around the "scripting" and "video" examples.
3. Use this script to control movie playing.
4. If you push the "pause" button, the movie pauses.
5. If you push the "resume" button, the movie resumes.


下圖為一個撥放mp3的程式。我們可以看到有一個 為play 的屬性，另外有一個true的值。
利用此特性，來改寫程式。

















(影片暫停)
[button onclick="video.setAttribute('play',false)"]pause[/button]

(影片繼續)
[button x="120" onclick="video.setAttribute('play',true)"]resume[/button]

Homework 12-10-2007

1. List three ways of creating interactive webpages.(1).JavaScript
JavaScript 是一種類似Java的網頁程式設計語言。它可以不用透過任何編譯軟體來撰寫，只要開啟Notepad再以.htm或.html存檔，最後藉由瀏覽器開啟即可。

[script language = "javascript"]


javascript

的

程式內容


[/script]

Example:
Lab Create Img using DOM
Lab DOM and JavaScript
Lab 17 Form and Action, Part II

(2).Nvu
Nvu是一個可以很方便地設計網頁的軟體。

Example:
Lab 15 Webpage Accessibility

(3).Xray
Xray可以將 XML標籤的文件，轉換成使用者自訂的HTML排版格式。

Example:
Lab XML&XSLT
Lab 19 XSLT Part II
Lab 20 XSLT Part III


2. Lab DOM and Javascript.

DOM and Javascript

3. Reading Assignments: AJAX by Jeremy Keith

Lab DOM and JavaScript

1. Open NVu

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.
1. Source Code



















2. 開啟瀏覽器

Lab Create Img using DOM

1. Open Nvu
2. Hand code a javascript that loads an image from Internet based on
the DOM model.
3. Use window.onload to load the image.
4. Use a button to load the image. Try how onclick works.

Hint: The javascript code should be enclosed by script tags.
Reference: DOM (Document Object Model)

1. Source code




















2.開啟瀏覽器




















3. 點選按鈕(click)




















4. 再多按幾次

lab 19: XSLT Part II

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.

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.


















Xray軟體不接受 邏輯符號 "<"，但可以接受 ">"。

lab 20: XSLT Part III

1. Given the RSS of Yam News, write an XSLT file
and use Xray to generate an HTML that contains the titles of items in the RSS.

2. View the formatted HTML file.

reference: Lab XML & XSLT

Lab XML & XSLT

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

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.

Step1. 開啟新檔


















Step2.打入XML資料


















Step3.和 Step1. 相同打上XSLT程式



















Step4.


















Step5.轉換


















Step6.


















Step7.顯示結果