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