讓你的網頁也JAVA~JAVA

學習專題

讓你的網頁也JAVA~JAVA~
靜態的網頁已經吸引不了網路使用者的目光，有互動性以及動態的網頁才能留住網路使用者的腳步。因此一些能夠讓網頁產生動感以及互動性的技術，就流行了起來。其中JAVA語法就是方便又具有跨平台性的熱門技術。這次就讓我們學習如何在網頁中插入一些JAVA物件，讓我們的網頁效果更豐富。

目前最常見的有JAVA SCRIPT和JAVA APPLET，JAVA SCRIPT是內嵌於Hmtl文件之中的，程式碼可以在Html文件中看到，而JAVA APPLET是獨立於Html文件之外的，只有參數可以在Html文件中看到，執行完畢後才將結果顯示為整個網頁的一部份。所以使用JAVA SCRIPT語言時只要複製整段語言然後貼入Html文件中就可以看到效果，而使用JAVA APPLET時，還要同時上傳類別檔案。以下我們就介紹如何利用現成的網路JAVA SCRIPT和JAVA APPLET來為你的網頁增加生動的一面。

@先前準備

首先你要有一個已經建立好的html文件，以讓你加入JAVA SCRIPT語法，如果你已經具備寫網頁的基本知識，並且已經有自己的網頁，就可以直接跳到使用下面的JAVA SCRIPT範例部分。如果你是新手，而且還沒有自己的網頁，就依照以下步驟建立一個空白的新網頁以供測試學習。

1.啟動任何一種文書編輯器（例如Windows內的記事本）。

2.在文件中輸入以下內容：
<html>
<head>
<title>
</title>
</head>
<body>
<body>
</html>

3.儲存時將副檔名存成「txt」純文字格式。

這樣你就已經完成一個空白網頁的製作，很奇怪那裡有網頁可以看？其實這個txt檔就是你的網頁的原始檔，當你要把他變成瀏覽器可以看的html網頁格式，只要把這個txt副檔名直接改成html之後，他就化身成一個網頁了。

雙擊該html檔案就會直接用你的瀏覽器來開啟，開啟後你會發現內容都是空白的，因為我們還沒有輸入任何文字。

如果你想要繼續編輯這個網頁，只要再把原先的html副檔名改成txt，就又可以直接在文書編輯器中編輯了。這樣把副檔名改來改去是有點麻煩，其實只要在瀏覽器中瀏覽該網頁時，直接在畫面中按滑鼠右鍵點選「檢視原始檔」，就可以馬上跳出記事本供你編輯原始檔，編輯完之後按下儲存，再按下瀏覽器的「重新整理」就會看到新修改的網頁內容。至於要在網頁中輸入任何文字，只要在原始碼純文字檔案中跟間輸入文字就可以呈現。

@使用JAVA SCRIPT範例

有了已經建立好的網頁之後，你就可以開始找JAVA SCRIPT的程式範例檔，目前提供JAVA SCRIPT程式範例檔下載的網站非常多，有的網站會直接公開其程式碼讓你直接選取複製，有的則是需要你先檢視網頁的原始碼並自行複製程式碼貼到你自己的Html原始檔中。例如在以下網頁中有一個簡單的月曆JAVA SCRIPT程式範例，所以我們就先連結到 http://nii.org/calendar-with-greeting.html，你就會看到一個用Java Script寫的月曆在畫面中。依步驟把這個月曆加入到自己的網頁中：

1.在網頁中按滑鼠右鍵點選「檢視原始檔」。

2.在跳出的記事本中會呈現這個網頁的原始檔。把從 <script language="javascript">一直到</script>之間的語法全部選取並按下「編輯」「複製」。

3.開啟你剛做好的網頁原始檔(txt檔)，將滑鼠游標移到在和<body>和</body>標籤之間按下「編輯」「貼上」。

4.到「檔案」「存檔」。

這樣就完成了JAVA SCRIPT程式碼的轉移，將原始檔(txt檔)副檔名改成html之後，就可以雙擊用瀏覽器檢視成果了，你現在應該已經可以看到一個月曆呈現在你的網頁中。JAVA SCRIPT程式語言的起頭就是 <script language="javascript">，結尾就是</script>，所以一定要完整的拷貝從起頭到結尾之間的文字，不然就會有程式執行錯誤的可能，而整個JAVA SCRIPT程式碼一定要在跟標籤之間。

@使用JAVA APPLET範例

JAVA APPLET範例使用上跟JAVA SCRIPT比起來就比較麻煩一點，除了要在原始檔中貼入一些設定參數之外，還要下載該範例本身的JAVA APPLET檔案。我們以要使用一個同心圓文字的特校為例，先連結到 http://www.netvigator.com.tw/~jeremys/animcer.htm，你就可以看到一個同心圓文字的效果，再依以下步驟就可以把該範例檔使用在自己的網頁中：

1.按下「下載這個JavaApplet」的超連結以下載animcer.zip這個檔案裡面包含這個範例所需要的class檔案。

2.選取從<applet code="AnimCercles.class" width="350" height="150"開始到</script>之間所有的文字，在選取區上按滑鼠右鍵點選「複製」。

3.在自己剛剛建立好的網頁原始檔(txt檔)中<body>跟</body>標籤之間按滑鼠右鍵選「貼上」。

4.到「檔案」「存檔」。

5.用解縮軟體例如Winzip把animcer.zip解開，將其中的AnimCercles.class檔案放在跟你網頁檔案同一個路徑下，比如說你的網頁檔案是在桌面上，你就要把這個AnimCercles.class也放在桌面上，這樣才可以執行。

如果你是要把網頁上傳到網頁主機中了，記得一定要把這個AnimCercles.class也一起上傳到同一路徑下，才有辦法正常執行程式。要是下載的壓縮檔中有另一個html檔案，通常是這個JAVA APPLET的說明以及參數設定，這個檔案是供使用者參考，不需要一起上傳到主機中，除了這個html檔案之外，如果壓縮檔中包含其他檔案如圖檔，都要一起上傳到同一路徑下，這樣當你雙擊你的網頁檔案，應該就可以在瀏覽器中看到執行後所出現的同心圓文字效果。

如果你要修改這個同心圓的展現效果，只要再度開啟開網頁的原始碼txt檔案，然後依照下載網頁中的說明，修改參數，就可以有不同的效果，例如你想要修改顯示的文字內容，只要把<param name="text" value="Right Now!">其中的「Right NOW!」改成你想要的文字就可以了。

網路上有很多像這樣提供JAVA範例下載的網站，你現在就可以開始大試身手把你的網頁裝點的更加生動，不過要提醒的是，JAVA語言是在瀏覽者這端電腦執行的語言，所以如果你同時在一個網頁中插入太多的JAVA效果，不但是大量消耗瀏覽者的系統資源，也會減慢瀏覽速度，所以一定要注意適量。還有JAVA範例也是有著作權的，如果你下載的網頁有特別說明不准任意複製或是要經過作者同意，就要特別注意以免違反著作權。本學習專題中範例來源：

真實人生 http://nii.org/

世紀末網頁教室 http://www.netvigator.com.tw/~jeremys/

詳全文: http://drj.ithome.com.tw/7_index.html