Download presentation
Presentation is loading. Please wait.
1
Hello World 體驗實作第一個JSP程式
2
前置作業： 先把編輯器的編碼方式 調整為UTF-8
3
建立專案 點選（檔案 =>新建 => 專案…） 選 “Tomcat Project” 按“下一步”
4
建立專案 專案名稱：HelloWorldTest 按”完成”
5
Eclipse 畫面
6
設定基本網站 示範如何在Eclipse下建置一個簡單的HTML網站。
HTML編輯器使用一般的文字編輯器即可，例如：Editplus或是Notepad
7
JSP程式碼 先在計畫目錄下新增一個JSP檔案 Copy 下頁的程式碼
至 C:\eclipse\workspace\HelloWorldTest目錄下
8
注意：因為指定了編碼為UTF-8，所以，該檔案儲存之格式也必須使用UTF-8格式。
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來檢查檔案是否為此格式。 參考 java.util.Date API
9
刷新計畫目錄，載入更新 回到eclipse，在HelloWorldTest計畫名稱點選滑鼠右鍵，然後選擇”重新整理”。
10
執行 啟動 Tomcat 打開一個新的瀏覽器，然後輸入網址：
11
結果 課本中的所有程式皆可依此方式載入Eclipse中執行。 需注意檔案目錄結構是否正確。
12
說明 http://localhost:8080/HelloWorldTest/1-01.jsp
：這是網站根目錄，對應於檔案系統的 c:\eclipse\workspace\ c:\eclipse\workspace\ 所以，伺服器對於客戶端的資源(resource)請求皆是從這個地方開始尋找。因此，如果網頁顯示不出來，請先檢查並確認URL的輸入沒有錯誤。
13
符號說明：<%= %> 說明： <%= 欲輸出的字串 %> 僅適用於只有一行的輸出敘述 <% 與 = 不可分開
符號說明：<%= %> 說明： <%= 欲輸出的字串 %> 僅適用於只有一行的輸出敘述 <% 與 = 不可分開 重點：程式碼中，僅負責輸出會變動的部分 Out.println敘述的簡寫
14
2-1-4 JSP網頁的結構 JSP檔案由HTML以及Java這兩部分所組成。 描述語言 HTML 描述語言 HTML
<% … // Java 程式碼 %> <html> <body> … </body> </html> JSP檔案由HTML以及Java這兩部分所組成。 HTML 描述語言 HTML
15
執行流程 當使用者要求一個JSP檔案時， 1. 編譯 2. 產生servlet 3.執行 4.產生 5.回傳HTML 伺服器
Login.jsp 1. 編譯 使用端 伺服器 0. Login.jsp 2. 產生servlet Login_jsp.java 3.執行 HTML 4.產生 5.回傳HTML
16
網頁指令 <%@ page %> 於JSP檔案開頭使用<%@ page 屬性…%>
作用在於設定整個網頁的屬性，各屬性之間以空格區分。 例如：設定輸出網頁的編碼格式為utf-8要用： page contentType=“text/html;charset=uft-8”%>
17
常見的Page 屬性 （from JSP學習網） 屬性 代表意義 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學習網）
18
2-1-6 註解 //
19
2-1-7 資料的輸出：out 利用隱性物件：out 還記得在一般的Java程式下常用的
System.out.println(“輸出文字”); 可以把JSP中的out物件想像成 System.out。兩者的差別在於：System.out的輸出在螢幕，out 的輸出是在客戶端的網頁。(問：網頁顯示什麼？)
20
<% out.println(“\”Hello World!\””); %>
Escape特殊字元 網頁中如果要輸出 ” ，必須在欲輸出字串中用『\』符號，例如： <% out.println(“\”Hello World!\””); %> 結果：”Hello World”
21
2-1-8 JSP檔的解釋 說明一下JSP被編譯之後的java檔案所在的位置及內容。 在此
C:\eclipse\workspace\HelloWorldTest\work\org\apache\jsp
22
2-2 JSP網頁的debug 常見錯誤：編譯錯誤以及執行錯誤 編譯錯誤：Java語法錯誤 執行錯誤：大都是邏輯錯誤，例如：1/0
23
動態網頁：接受網頁輸入 Input.html helloworld2.jsp
24
寫一個簡單的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>
25
複製 helloworld.jsp，名稱改為 helloworld2.jsp
提示： // 解決JSP中文亂碼的問題 request.setCharacterEncoding("utf-8"); String name = request.getParameter("name");
26
習題：撰寫一個JSP網頁計算機(+,-,x,/)
小考： 0~20分鐘完成100 21~30分鐘完成80 31~40分鐘完成60 其餘0分
Similar presentations
