體驗實作第一個 JSP 程式

Hello World

前置作業：先把編輯器的編碼方式調整為 UTF-8

建立專案點選（檔案 => 新建 => 專案…）選 “ Tomcat Project” 按“下一步”

建立專案專案名稱： HelloWorldTest 按”完成”

Eclipse 畫面

設定基本網站示範如何在 Eclipse 下建置一個簡單的

HTML 網站。 HTML 編輯器使用一般的文字編輯器即可，

例如： Editplus 或是 Notepad

JSP 程式碼先在計畫目錄下新增一個 JSP 檔案 Copy 下頁的程式碼至 C:\eclipse\workspace\HelloWorldTest

目錄下

<%@ page import = "java.util.Date" contentType = "text/html; charset=utf-8" %>

<html>

<head><title> 歡迎光臨 (1-01.jsp)</title>

</head>

<body>

<h2> 您好，歡迎光臨！ <p>

<%

// 取得現在日期、時間 Date x = new Date();

%>

現在時刻是： <%= x.toLocaleString() %>

</h2>

<hr>

</body>

</html>

注意：因為指定了編碼為 UTF-8 ，所以，該檔案儲存之格式也必須使用 UTF-8 格式。

同學們可以使用editplus 來檢查檔案是否為此格式。

http://download.oracle.com/javase/1.5.0/docs/api/java/util/Date.html

參考 java.util.Date API

http://www.editplus.com/

刷新計畫目錄，載入更新回到 eclipse ，在 HelloWorldTest 計畫名

稱點選滑鼠右鍵，然後選擇”重新整理”。

執行啟動 Tomcat 打開一個新的瀏覽器，然後輸入網址：

http://localhost:8080/HelloWorldTest/1-01.jsp

結果

課本中的所有程式皆可依此方式載入 Eclipse 中執行。需注意檔案目錄結構是否正確。

說明http://localhost:8080/HelloWorldTest/1-01.jsp

http://localhost:8080 ：這是網站根目錄，對應於檔案系統的 c:\eclipse\workspace\

http://localhost:8080 c:\eclipse\workspace\

所以，伺服器對於客戶端的資源 (resource) 請求皆是從這個地方開始尋找。因此，如果網頁顯示不出來，請先檢查並確認 URL 的輸入沒有錯誤。

符號說明： <%= %>

說明： <%= 欲輸出的字串 %> 僅適用於只有一行的輸出敘述 <% 與 = 不可分開重點：程式碼中，僅負責輸出會變動的部分

Out.println 敘述的簡寫

2-1-4 JSP 網頁的結構<% … // Java 程式碼%>

<html><body>…<% … // Java 程式碼%></body></html>

描述語言

描述語言

HTML

HTML

JSP 檔案由HTML 以及Java 這兩部分所組成。

執行流程當使用者要求一個 JSP 檔案時，

使用端

伺服器0. Login.jsp

Login.jsp1. 編譯

Login_jsp.java3. 執行

2. 產生 servlet

HTML

4. 產生5. 回傳 HTML

網頁指令 <%@ page %> 於 JSP 檔案開頭使用 <%@ page 屬性…

%> 作用在於設定整個網頁的屬性，各屬性之間

以空格區分。例如：設定輸出網頁的編碼格式為 utf-8 要用：

<%@ page contentType=“text/html;charset=uft-8”%>

常見的 Page 屬性屬性代表意義contentType 這個屬性設定 MIME 的型態及編碼方式

import這個屬性定義程式會用到哪些 package ，除了這個屬性可重覆設定外，其餘的屬性都只能設定一次

session可設定 true 或 false ，如果沒有設定的話，預設值是 true ，這個屬性代表這個網頁是否要使用 session

errorPage設定如果程式產生例外錯誤時，要導向到哪個網頁，例如 index.jsp 裡如果這麼設定<%@ page errorPage="err.jsp" %> ，那麼當 index.jsp 執行過程有錯誤時， TOMCAT 會將你導向到 err.jsp ，而不會讓你看到錯誤畫面。

isErrorPage可設定 true 或 false ，如果沒有設定的話，預設值是 true ，這個屬性代表這個網頁是否是處理例外事件的網頁

isThreadSafe可設定 true 或 false ，如果沒有設定的話，預設值是 true ，這個屬性代表這個網頁是否能處理超過一個以上的請求，如果是 false 的話，那這個網頁一次只能處理一個Thread( 那當然是要 true 啦，誰會想要這個網頁一次只能處理一個 request)

language 設定這個網頁的語法是用哪一種，預設是 java ，未來可能有其他語言的版本

buffer這個屬性設定輸出流是否有緩衝區，可設定成 none( 沒有緩衝區 ) 或其他數字 ( 如果設定成 10 ，代表緩衝區設定成 10K) ；如果這個屬性沒有設定的話，預設緩衝區是8K 。

（ from JSP 學習網）

2-1-6 註解 //

2-1-7 資料的輸出： out

利用隱性物件： out

還記得在一般的 Java 程式下常用的System.out.println(“ 輸出文字” );

可以把 JSP 中的 out 物件想像成 System.out 。兩者的差別在於： System.out 的輸出在螢幕，out 的輸出是在客戶端的網頁。 (問：網頁顯示什麼？ )

Escape特殊字元網頁中如果要輸出 ” ，必須在欲輸出字

串中用『 \』符號，例如：

<% out.println(“\”Hello World!\””); %>

結果：” Hello World”

2-1-8 JSP 檔的解釋說明一下 JSP被編譯之後的 java 檔案所

在的位置及內容。

在此

C:\eclipse\workspace\HelloWorldTest\work\org\apache\jsp

2-2 JSP 網頁的 debug

常見錯誤：編譯錯誤以及執行錯誤編譯錯誤： Java 語法錯誤執行錯誤：大都是邏輯錯誤，例如： 1/0

動態網頁：接受網頁輸入

helloworld2.jsp

Input.html

寫一個簡單的 HTML ，在 Body 中，編寫一個 form, 裡面有一個 text input, 以及一個提交 (submit) 按鈕。( 或 copy 下列的 form 程式碼 )

<form method="post" action="/HelloWorldTest/helloworld2.jsp"><input type="text" name="name"><br/><input type="submit" value="送出 "></form>

複製 helloworld.jsp ，名稱改為 helloworld2.jsp

提示：

// 解決 JSP 中文亂碼的問題request.setCharacterEncoding("utf-8"); String name = request.getParameter("name");

習題：撰寫一個 JSP 網頁計算機 (+,-,x,/) 小考： 0~20 分鐘完成 100 21~30 分鐘完成 80 31~40 分鐘完成 60 其餘 0 分

Documents

體驗實作第一個 JSP 程式