認識Java Applet 及Java Script

Download Report

Transcript 認識Java Applet 及Java Script 

認識 Java Applet 及 Java Script
課程目的：
淺顯的介紹，讓大家很快地瞭解如何利用網路上已
有Java Applet 及 Java Script 使網頁更好玩
課程內容
v
v
v
v
v
Java Applet 與 Java Script 是什麼?
為什麼使用Java Script?
Java Script 如何運作?
如何在網頁上應用Java Applet
如何在網頁上應用Java Script ?
Java Applet VS Java Script
Java
v
v
v
v
Sun Micro推出的程式語言
用來發展與平台無關的網際
網路應用程式(Applet)
是一種正式語言
與HTML獨立分開
Java Script
v
v
v
v
Netscape & Sun Micro共同
開發
與平台無關
內嵌於HTML
Java的小老弟，用了許多和
Java相同的程式概念
為什麼使用Java Script
v
藉由程式直接使用及控制所有網頁元素
如按鈕、圖片、文字欄的內容
v
傳達使用者產生的事件
如當滑鼠移至圖片時、當按下滑鼠時
v
容易學習，而且不需要額外的語言軟體
現今的瀏覽器大部分皆可直譯並執行Java Script，而Java
Applet 需先寫Java程式，然後再使用Java的語言軟體將其
編譯為Java Applet ，如此才能為HTML使用
Java Script 如何運作
v
v
v
v
當瀏覽器讀取與解譯HTML標籤的同時，瀏覽器也
在讀取與解譯Java Script語言
瀏覽器必須懂得如何解譯與執行 Java Script
所有的 Java Script碼都是在Client端電腦執行
Java Script與平台無關
什麼是 Java Applet ?
v
其實在支援 Java程式的瀏覽器中，Java Applet和其他媒體物
件如圖片，聲音，影像是一視同仁 ，Java 的位元程式檔案（
也稱為類別檔案class）會跟其他媒體一樣會被載入瀏覽器中
，如同圖片，Applet被顯示為整個網頁的一部份，一但Applet
被載入之後，它就會開始展現一些特殊效果，如橫幅廣告管
理員、跑馬燈……
HTTP Server
PC
IE or Netscape
HTTP
Java
Applet
How to use Java Applet
<html>
<head>
…….
</head>
<body>
……….
</body>
</html>
???.class
<applet code=“???.class”>
…….
</applet>
準備製作新網頁
v
v
v
將ccsun15.cc.nctu.edu.tw的
WWW拷貝一份至桌面
在Frontpage中開啟新的空白
網頁
選按「檔案」「存除檔案」
，將目錄設在「 桌面
/WWW/js-1 」，檔名為「
index.htm」
下載「網頁教材」
v
請使用IE連結至
http://www.cc.nctu.edu.tw/~twli
v
請至「學習 JavaScript 語言」「
下載「Java Applet」網頁素材」
v
下載「Tree.jpg」及「TETRIS.zip
」存至「桌面\WWW\js-1」中 ，
並將在「桌面\WWW\js-1」將
TETRIS.zip解壓縮
使用 IE 搜尋有趣的Java Applet
v
在瀏覽器IE輸入以下的網址
http://ccw168.net23.net/
v
於左邊的選項中選擇「程式下載
」「Java applet」
v
在 “圖片特效”中選按「水中倒影
」
v
步驟一：
 把「 Lake.class 」存至「桌面
/WWW/js-1」
編輯網頁
v
步驟二：將文字欄內的全部
內容全選，然後複製
v
移至FrontPage空白網頁中的
HTML狀態，將滑鼠移至
<body>與</body>之間的適
當位置，然後選按「貼上」
修改參數
v
v
v
v
v
v
v
v
<!------------ 插入控制碼區段開始 ------------>
<applet code="Lake.class" width="300" height="400">
<!-- 設定程式控制檔及顯示大小 -->
<param name="bgcolor" value="#d2ffd2">
<param name="image" value="java54.jpg">
<!-- 設定圖片檔 -->
Tree.jpg
</applet>
<!------------ 插入控制碼區段結束 ------------>
修改後
先將「 index.htm 」儲存，然後再以IE檢視之。
什麼是 Java Script ?
v
將Java的語言程式直接內崁於Homepage的HTML中
，讓瀏覽器執行其程式。
<html>
<head>
…….
</head>
<body>
……….
</body>
<script language="JavaScript">
……….
JAVA 語言程式
……….
</script>
Java Script基本概念
v
v
v
v
編譯 VS 直譯
像C的語法
當瀏覽器不支援 Java Script 時
Java Script 要放在哪裡
可以放在HTML文件的任何地方
同一個HTML文件內可以有一個以上的Java Script 碼
要注意瀏覽器是由上而下讀入HTML文件
v
大小寫不同
使用 IE 搜尋有趣的Java Script
v
在瀏覽器IE輸入以下的網址
http://ccw168.net23.net/
v
於左邊的選項中選擇「程式下載」「JavaScript
」
v
於下方選單中選擇「日期時間」，再選擇「萬
年曆」。
v
步驟一：
 把第一方格的內容拷貝至 index. Htm的 head 中
v
步驟二：
 把第一方格的內容拷貝至 index. Htm的body 中
v
步驟三：
 將「 onload="thisMonth()" 」複製至 <body> 標籤
內
插入 Java Script
v
v
v
回到FrontPage中「index.htm」的HTML原始檔
於<body>之後，貼上剛剛拷貝的JAVA 語言程式
先將「 index.htm 」儲存，然後再以IE檢視之。
JavaScript 網路應用的例子
v
事件導向(Event Driven)
當使用者作了某種操作時（如滑鼠滑過時圖片會改變、當
滑鼠按下去時出現警示訊號等）, JavaScript會根據此操作
做出反應
v
處理資訊 -- 運算子（數學運算）
最常看見的化學應用即是單位轉換、化學平衡計算
v
流程控制（邏輯運算式，如 if ）
最常看見的應用即是網路上測試題目的檢驗、計分及其解
答
事件導向的例子
v
Schoolscience
http://www.schoolscience.co.uk/c
ontent/index.asp
選按「RESOURCES」「
Chemistry」「11 to 14」
選按 “Materials” 中旁邊的「i
」符號，然後會產生新視窗
選按「What are they made of? 」
v
化學元素週期表
http://www.phy.ntnu.edu.tw/de
molab/JavaScript/s_pertab.html
隨便讓滑鼠移至任何元素上，
週期表上方即可顯示該元素的
基本性質
數學運算的例子
v
Molecular Weight or
Conversion Tables
http://chemmac1.usc.edu/Bruno
/java/javaap.html
往下找“Javacript…”
選按「exercices 」、「
molecular weights」或「
Conversion tables 」
v
Water Chemistry
Calculator
http://www.bossbeer.org/tips/w
atercalc_js.htm
計算溶在水裡金屬離子的濃度
流程控制的例子（if ）
v
Acid and Base pH Tutor
http://www.chem.ubc.ca/course
ware/pH/index.html
選按「Quiz on Section 1 」「
Question 1 」即可開始測試
一次一題，立即解答。
v
English Quiz
ESL students (The Internet
TESL Journal )
u http://a4esl.org/q/j/
BBC：
u http://www.bbc.co.uk/world
service/index.shtml
u 選按「Learning English 」
「Quizzes 」「 Quiznet 」
即可開始測試
u 一次六題，做完才解答。
也有計時作答的挑戰。
Javascript Homework 1-1
v
請在BB寫出你的個人網址並請助教檢查
，如 http://s-web.nctu.edu.tw/~u97250???
v
Java Applet：
 除了原有的「水中倒影」（10％）
 請再加上「桌面\WWW\js-1」目錄下
的簡易俄羅斯方塊Applet「
Tetris_Game.class」（10％）
u
安裝的方式請參考「桌面
\WWW\js-1\TETRIS 」目錄下的
「Tetris.htm」
Javascript Homework 1-2
 JavaScript:
u
除了原有的「萬年曆」(10%)
 試試看把下列網址中的JavaScript
動畫的特效及Gif動畫，放入剛剛
練習的網頁
http://www.afn.org/~afn02809/
#TOPIC%20INDEX (10%)
 將今天的上課所做表單網頁完成
，將「js-1」整個目錄上傳至
WWW，並在目錄框架中為其增
加新的超連結如「JS Homework 1
」(10%)
作業繳交方式
v
v
請在今天（11月18日）請在BB寫出你的個人網址並
請助教檢查，如 http://s-web.nctu.edu.tw/~u98250???
並且告訴助教何者超連結是「FrontPage Homework 2
」作業，何者超連結是「Javascript Homework 1」作
業
11月18日午夜十二點以前繳交滿分100分
11月25日午夜十二點以前繳交滿分80分
11月25日午夜十二點以後就不需要繳交，以0分計算