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.

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)

DOM (Document Object Model)

操作以下這個網頁
web personalization 網頁個人化
你會不會覺得有點神奇, 它是如何做到的?
關鍵就在 DOM.

With the DOM scripting methods you can:

- Create new elements on the fly.
- Grab all the tags of the document, or grab the text without grabbing the tag text.
- Insert new text, and change or remove text from any element.
- Move whole parts of the document around, or remove parts as fragments and work with them.
- And the best part: all of these new methods should work in any DOM compliant browser. No more browser sniffing. No need to build different versions of the same page for different browsers.

Reference:
Scripting For The 6.0 Browsers, By Scott Andrew LePera

createElement() allows you to create a new tag.

myImg = document.createElement("IMG")

Give definition.

In the above example, our newly born tag has no ID, no SRC and no home in the document yet. So let's give it some definition:

myImg.setAttribute("id","imageOne")
myImg.setAttribute("src","jabberwocky.gif")

Append it within the document "tree".

Now all we need to do is append it to the document body. And to do that, we use the DOM node method appendChild():

docBody = document.getElementsByTagName("body").item(0)
docBody.appendChild(myImg)

Homework 5-18-2007

1. 根據FIND網路脈動 ，企業於Web2.0的使用上，仍緩步前進，這份報告已歸納哪些原因？你認為應該還有哪些原因？
2. 閱讀兩篇有關網站行銷效益評估的論文，撰寫500字到1000字心得。
3. Read the introduction of DOM.

CGI

CGI, Common Gateway Interface
(page 188~193 of Text)

URL that sends a request by CGI

http://maps.google.com/maps?q=24.9586,+121.2411

Lab Form and Action, Part II

Hand code a 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.

Lab Form and Action

"logic will get you from A to B - imagination will take you anywhere"

How to use Form to invoke a remote service through CGI.

1. Copy the search box of this search page,
inlcuding radio buttons, text input, and submit button.
2. Open your Nvu HTML editor.
3. Open a new empty HTML file.
4. Paste the search box into this new file.

5. Use Nvu to add a Form to this search box. Do not hand code the HTML. Just fill the blank in the Form dialog.

6. In the form dialog, set Action="http://google.com/search" and name of Form as "f" and method as "get"
(See Hint if it does not work.)
7. Run your HTML by Firefox. What do you get?

8. Set method as "post"
9. Run your HTML by Firefox. What do you get?

Homework 5-11-2007: XSLT Part II

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.

聯電暑期工讀計畫

聯電響應本系所提出之產業實習課程
擬提供1-3名的名額於本系所大學部與研究生，並已規劃好實習期間安排的學習課程。(請參閱附件)

實習期間為7/2~8/31約兩個月時間，學生需自行安排住宿。實習期間亦有優渥薪資給付。如有任何問題，請與我聯繫。謝謝！

中原大學實習生工作計劃-2007
實習生課程-2007

Lab 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.

Homework 5-4-2007

Due 5/11/2006 at 13:00

1. Do
Lab: Webpage Accessibility, Part II

2. Reading Assignments:
XML (Page 187-188 on the Textbook)

3. Do
Lab: Valiadating PageRank

Introduction to XML

Take a look at islandwide temperatures of Taiwan.

What happens if you just want Taoyuan's temperature?

If you want to include Taoyuan's temperature in your Theme
Park homepage, is there any solution?

XML examples:

• atom of Blog,

• RSS of Yam News

• Zip Code Web Service

• News Syndication

the need of XML

Separation of data from data processor

Seperation of data from presentation

• HTML for machine-human interaction

• XML can be formatted to HTML according to formartting rules called XSLT. To see it, do Lab XSLT.

Automation of data flow across various business systems

• XML for machine-machine interaction

• Without human involvement, automation of business systems can be accelerated.

What kind of language is XSLT?

• An XSLT style sheet is an XML document.
• The basic processing paradigm is pattern matching.

Operation of an XSLT Processor

Lab: Valiadating PageRank

參考2004年地方機關觀光網站優勝或入圍者，對照地方政府觀光網站PageRank研究
兩者是否呈現正相關，還是彼此並無顯著關聯?

Lab: Webpage Accessibility, Part II

6. Take a second look at the HTML 標籤, HTML 原始碼
Look for the differences you have made after doing Step 4 & Step 5.

7. Save your editings again and preview your webpage using Firefox

8. Download web accessibility validator Freego

9. Use Freego to examine whether your webpage is accessible.
須通過第一級機器檢測

Lab Webpage Accessibility

Use Nvu to edit the following homepage
at http://maplepoem.blogspot.com/2005/03/blog-post_111070085865304732.html

1. You can copy and paste the content to your Nvu.

2. Take a look at the HTML 標籤, HTML 原始碼

3. Save your editings and preview your webpage using Firefox

4. Create a clickable link at the term 中原大學 so that
this link goes to http://www.cycu.edu.tw

5. Make the webpage accessible by
(1) adding ALT text to the images and
(2) adding a title to the URL link at Step 4.