1 / 26

體驗實作第一個 JSP 程式

Hello World. 體驗實作第一個 JSP 程式. 前置作業： 先把編輯器的編碼方式 調整為 UTF-8. 建立專案. 點選（ 檔案 => 新建 => 專案 … ） 選 “ Tomcat Project ” 按“ 下一步 ”. 建立專案. 專案名稱： HelloWorldTest 按” 完成 ”. Eclipse 畫面. 設定基本網站. 示範如何在 Eclipse 下建置一個簡單的 HTML 網站。 HTML 編輯器使用一般的文字編輯器即可，例如： Editplus 或是 Notepad. JSP 程式碼.

oleg-bowers
Télécharger la présentation

體驗實作第一個 JSP 程式

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. <%@ 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

  9. 刷新計畫目錄，載入更新 • 回到eclipse，在HelloWorldTest計畫名稱點選滑鼠右鍵，然後選擇”重新整理”。

  10. 執行 • 啟動 Tomcat • 打開一個新的瀏覽器，然後輸入網址： http://localhost:8080/HelloWorldTest/1-01.jsp

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

  12. 說明 http://localhost:8080/HelloWorldTest/1-01.jsp http://localhost:8080：這是網站根目錄，對應於檔案系統的 c:\eclipse\workspace\ http://localhost:8080c:\eclipse\workspace\ 所以，伺服器對於客戶端的資源(resource)請求皆是從這個地方開始尋找。因此，如果網頁顯示不出來，請先檢查並確認URL的輸入沒有錯誤。

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

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

  15. 執行流程 • 當使用者要求一個JSP檔案時， 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學習網）

  18. 2-1-6 註解 • //

  19. 2-1-7 資料的輸出：out • 利用隱性物件：out 還記得在一般的Java程式下常用的 System.out.println(“輸出文字”); 可以把JSP中的out物件想像成 System.out。兩者的差別在於：System.out的輸出在螢幕，out 的輸出是在客戶端的網頁。(問：網頁顯示什麼？)

  20. 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分

More Related