體驗實作第一個 JSP 程式

Hello World 體驗實作第一個JSP程式

前置作業： 先把編輯器的編碼方式調整為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://www.editplus.com/ 參考 java.util.Date API http://download.oracle.com/javase/1.5.0/docs/api/java/util/Date.html

刷新計畫目錄，載入更新 • 回到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:8080c:\eclipse\workspace\ 所以，伺服器對於客戶端的資源(resource)請求皆是從這個地方開始尋找。因此，如果網頁顯示不出來，請先檢查並確認URL的輸入沒有錯誤。

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

2-1-4 JSP網頁的結構 描述語言 <% … // Java 程式碼 %> <html> <body> … <% … // Java 程式碼 %> </body> </html> JSP檔案由HTML以及Java這兩部分所組成。 HTML 描述語言 HTML

執行流程 • 當使用者要求一個JSP檔案時， Login.jsp 1. 編譯使用端伺服器 0. Login.jsp 2. 產生servlet Login_jsp.java 3.執行 HTML 4.產生 5.回傳HTML

網頁指令 <%@ page %> • 於JSP檔案開頭使用<%@ page 屬性…%> • 作用在於設定整個網頁的屬性，各屬性之間以空格區分。例如：設定輸出網頁的編碼格式為utf-8要用： <%@ page contentType=“text/html;charset=uft-8”%>

常見的Page 屬性 （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

動態網頁：接受網頁輸入 Input.html helloworld2.jsp

寫一個簡單的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分

體驗實作第一個 JSP 程式

體驗實作第一個 JSP 程式

Presentation Transcript