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