動的Webサイト開発学習記06：JSP技術

記事ディレクトリ

1.JSP
- 初めての JSP を作成する
2. JSPの基本構文

1.JSP

初めての JSP を作成する

目標: JSP ファイルの作成をマスターする

1. Webプロジェクトを作成する

Java Enterpriseを作成し、Webアプリケーションを追加し、画像の説明を追加してください
プロジェクト名と保存場所を設定し、
[完了]ボタンをクリックします。

2. アーティファクト名を変更し、プロジェクトを再デプロイします

プロジェクト構造画面でアーティファクト名を変更し、画像の説明を追加してください
サービス期間設定画面でプロジェクトを再デプロイし
、[サーバー]タブに切り替えてデフォルトブラウザを設定します。

3. ウェルカム JSP ページを作成する

Web ディレクトリに welcome.jsp を作成します。
画像の説明を追加してください

注: welcome.jsp ページから、新しく作成された JSP ファイルが従来の HTML ファイルとほぼ同じであることがわかります。唯一の違いは、デフォルトで作成されるときに、ページコードの先頭にページ命令があり、ファイルのサフィックスは html ではなく jsp です。
welcome.jsp を変更する画像の説明を追加してください

4. サーバーを起動し、結果を表示します。

サーバーを起動し、http://localhost:8080/JSPDemo/welcome.jsp にアクセスします。画像の説明を追加してください
注: welcome.jsp タグに追加されたコンテンツが表示され、HTML 要素が JSP コンテナーによって解析できることがわかります。実際、JSP は元の HTML ファイルに Java の特性を備えたコードを追加するだけであり、これらは JSP 構文要素と呼ばれます。
クラス演習: 以下に示すようにホームページを変更します。画像の説明を追加してください

2. JSPの基本構文

JSPページの基本構造

目標: JSP ページの基本構造を理解する

1. JSPページの構成

JSP ファイルは作成されましたが、JSP ファイルのページ構造については詳しく説明されていません。JSP ページには、命令タグ、HTML コード、JavaScript コード、埋め込み Java コード、コメント、JSP アクションタグなどのコンテンツを含めることができます。

2. ケースデモンストレーション - システムの現在時刻を表示します。

time_info.jsp ページを作成する
画像の説明を追加してください

<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSP页面 - 显示系统当前时间</title>
    </head>
    <body>
        <!--JSP脚本元素-->
        <%
            Date date = new Date();
            // year, month, day, hour, minute, second
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");  
            String currentTime = sdf.format(date);
        %>
        <!--JSP表达式元素-->
        <h3 style="text-align: center">系统当前时间：<%= currentTime%></h3>
    </body>
</html>

ページ構成説明図
画像の説明を追加してください
サーバーを起動し、http://localhost:8080/JSPDemo/time_info.jsp にアクセスします。

JSPスクリプト要素

1、JSPスクリプトレット

事例紹介

デモ01.jspページを作成する
画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSP Scriptlets</title>
    </head>
    <body>
        <%
            int a = 100, b = 150; // 定义两个整型变量
            int sum = a + b; // 计算两个整数之后
            // 利用JSP隐式对象`out`输出结果
            out.print(a + " + " + b + " = " + sum);
        %>
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo01.jsp にアクセスします。画像の説明を追加してください

事例デモ
demo02.jspページの作成

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSP声明标识</title>
    </head>
    <body>
        <%!
            // 定义阶乘函数
            public long factorial(int n) {
                long jc = 1;
                for (int i = 1; i <= n; i++) {
                    jc = jc * i;
                }
                return jc;
            }
        %>
        <%
            // 输出10的阶乘值
            out.println("10! = " + factorial(10));
        %>
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo02.jsp にアクセスします。画像の説明を追加してください

事例紹介

デモ03.jspページを作成する画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSP表达式</title>
    </head>
    <body>
        <%!
            int a = 100, b = 150; // 声明两个整型变量
        %>
        sum = <%= a + b%> <!--JSP表达式-->
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo03.jsp にアクセスします。画像の説明を追加してください

事例紹介

デモ04.jspページを作成する
画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>带有JSP表达式的注释</title>
    </head>
    <body>
        <%!
            /**
             * @param a
             * @param b
             * @return a + b
             */
            public int sum(int a, int b) {
                /*
                 * a, b都是形式参数
                 */
                return a + b; // 返回两个整数之和
            }
        %>
        <%
            int a = 100, b = 150; // 定义两个整型变量
            int sum = sum(a, b); // 调用求和函数计算两个整数之和，此处a，b是实际参数
            out.print("sum = " + sum); // 输出求和结果
        %>
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo04.jsp にアクセスします。画像の説明を追加してください

)ケースデモンストレーション

デモ05.jspページを作成する
画像の説明を追加してください

<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSP注释</title>
    </head>
    <body>
        <h1>学习JSP元素</h1> <!--HTML注释：一级标题显示-->
        <%= new Date()%> <%--JSP注释：用JSP表达式元素显示当前日期--%>
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo05.jsp にアクセスし、画像の説明を追加してください
開いたページでマウスを右クリックし、ポップアップメニューで [Web ページのソースコードの表示] オプションを選択します。

事例紹介

デモ06.jspページを作成する

<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>动态注释</title>
    </head>
    <body>
        随机数：<%= Math.random() %> <!-- 求随机数，当前日期：<%=new Date()%> -->
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo06.jsp にアクセスし、画像の説明を追加してください
開いたページでマウスを右クリックし、ポップアップメニューで [Web ページのソースコードの表示] オプションを選択します。

事例紹介

ページディレクティブの共通属性のうち、import 属性を除く他の属性は 1 回のみ出現できます。出現しない場合、コンパイルは失敗します。
エラーの後にジャンプするページを作成します error.jsp 画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" isErrorPage="true" %>
<html>
    <head>
        <title>错误页面</title>
    </head>
    <body>
        <h3 style="text-align: center">错误信息：<%= exception.getMessage() %></h3>
    </body>
</html>

デモ07.jspページを作成する画像の説明を追加してください

<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSP页面 - 显示系统时间</title>
    </head>
    <body>
        <!--JSP脚本元素-->
        <%
            Date date = new Date();
            // year, month, day, hour, minute, second
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");
            String currentTime = sdf.format(date);
        %>
        <!--JSP表达式元素-->
        <h3 style="text-align: center">系统当前时间：<%= currentTime%></h3>
    </body>
</html>

ページディレクティブを表示します。画像の説明を追加してください
上の赤いボックス内のコードは、ページディレクティブの language、contentType、pageEncoding、および import 属性を使用します。ページディレクティブはどこに記述されたかに関係なくページ全体に対して有効ですが、ページディレクティブは JSP ページの先頭に記述するのが一般的であることに注意してください。

サービス期間を開始します。http://localhost:8080/JSPDemo/demo07.jsp にアクセスして、
画像の説明を追加してください
demo07.jsp ページを変更します。意図的に Java コードエラーを作成して
サービス期間を開始します。http://localhost:8080/JSPDemo/demo07 にアクセスします。.jsp 、システムのデフォルトのエラーページを表示し画像の説明を追加してください
ます
。

事例紹介

デモ08.jspページを作成する画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>欢迎页面</title>
    </head>
    <body>
        <h1 style="color: blue; text-align: center">欢迎访问JSP世界~</h1>
        <%@ include file="time_info.jsp"%>
    </body>
</html>

サーバーを起動して http://localhost:8080/JSPDemo/demo08.jsp にアクセスします。画像の説明を追加してください

サーバーを起動して http://localhost:8080/JSPDemo/demo08.jsp にアクセスします。含まれているページのコンテンツも表示できます。

事例紹介

WEB-INF に lib ディレクトリを作成し、jar パッケージを 2 つ画像の説明を追加してください
追加プロジェクトにライブラリを追加
[ライブラリとして追加…]をクリックし
、[OK]ボタンをクリックして
、demo09.jsp ページを作成します。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>JSTL核心库演示</title>
    </head>
    <body>
        <c:set var="message" value="欢迎访问JSP世界~"/>
        <h1 style="text-align: center"><c:out value="${message}"/></h1>
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo09.jsp にアクセスします。JSTL 画像の説明を追加してください
コアタグライブラリを使用しない場合は、JSP コードを使用して同じ機能を実現します。
サーバーを起動し、http://localhost にアクセスします。 8080/JSPDemo/demo09.jsp

、ケースデモンストレーション

デモ10.jspページの作成画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>被包含的页面</title>
    </head>
    <body style="text-align: center">
        <%
            Thread.sleep(5000); // 线程休眠5秒
        %>
        红豆生南国<br>
        春来发几枝<br>
        愿君多采撷<br>
        此物最相思<br>
    </body>
</html>

デモ11.jspページを作成し、demo10.jspページを導入します。インポートされたファイルであるdemo10.jspは、内容を出力する前に5秒間の一時停止が許可されているため、jsp:include要素のflush属性をテストするのに便利です。画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>引入被包含的页面</title>
    </head>
    <body>
        <h3 style="text-align: center">相思</h3>
        <jsp:include page="demo10.jsp" flush="true"/>
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo11.jsp にアクセスします。ブラウザは最初に、demo11.jsp ページの出力コンテンツを表示します。5 秒待つと、demo10 の出力コンテンツが表示されます。 .jsp ページが表示されます説明現在の JSP ページがコンテンツを出力した後に、参照されるリソースデモ 10.jsp が呼び出されます。
画像の説明を追加してください
demo11.jsp ページの最終的な表示効果

、ケースデモンストレーション

デモ12.jspページの作成
画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>演示请求转发元素</title>
    </head>
    <body>
        <h1 style="text-align: center">演示请求转发元素</h1>
        <%
            Thread.sleep(5000); // 线程休眠5秒
        %>
        <jsp:forward page="welcome.jsp"/> <!--转发到欢迎页面-->
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo12.jsp にアクセスします。ブラウザは、demo12.jsp ページの出力コンテンツを表示しないことがわかります。ブラウザは、demo12.jsp ページの出力コンテンツを表示するまで 5 秒待機します。 welcome.jsp ページ。画像の説明を追加してください
最終的に、demo12.jsp ページに効果が表示されます。リクエストは welcome.jsp ページに転送されますが、アドレスバーは demo12.jsp のままです。

事例紹介

デモ13.jspページの作成画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>演示out对象的用法</title>
    </head>
    <body>
        <%
            out.println("第1行：Web开发很有意思~<br />");
            response.getWriter().println("第2行：我们来学Web开发~<br />");
        %>
    </body>
</html>

サーバーを起動して http://localhost:8080/JSPDemo/demo13.jsp にアクセスします。画像の説明を追加してください

サーバーを起動して http://localhost:8080/JSPDemo/demo13.jsp にアクセスします。

事例紹介

デモ14.jspページの作成画像の説明を追加してください

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>演示pageContext对象</title>
    </head>
    <body>
        <%
            // 获取out对象
            JspWriter myOut = pageContext.getOut();
            // 设置page范围内属性
            pageContext.setAttribute("message", "学习Java基础编程", pageContext.PAGE_SCOPE);
            // 设置request范围内属性
            request.setAttribute("message", "学习Java Web开发");
            // 设置session范围内属性
            session.setAttribute("message", "学习Spring Boot框架");
            // 设置application范围内属性
            application.setAttribute("message", "学习大数据实时处理");
            // 获取page范围属性
            String pageMessage = (String)pageContext.getAttribute("message", pageContext.PAGE_SCOPE);
            // 获取request范围属性
            String requestMessage = (String)pageContext.getAttribute("message", pageContext.REQUEST_SCOPE);
            // 获取session范围属性
            String sessionMessage = (String)pageContext.getAttribute("message", pageContext.SESSION_SCOPE);
            // 获取application范围属性
            String applicationMessage = (String)pageContext.getAttribute("message", pageContext.APPLICATION_SCOPE);
        %>
        <%
            myOut.println("page范围消息：" + pageMessage + "<br />");
            myOut.println("request范围消息：" + requestMessage + "<br />");
            myOut.println("session范围消息：" + sessionMessage + "<br />");
            myOut.println("application范围消息：" + applicationMessage + "<br />");
        %>
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo14.jsp にアクセスします。画像の説明を追加してください

事例紹介

前に作成した error.jsp ページを表示し
画像の説明を追加してください
、demo15.jsp ページを作成します。

<%@ page contentType="text/html;charset=UTF-8" language="java"
    pageEncoding="UTF-8" errorPage="error.jsp" %>
<html>
    <head>
        <title>演示页面异常</title>÷
    </head>
    <body>
        <%
            int a = 10;
            int b = 0;
        %>
        <%
            out.print(a + " ÷ " + b + " = " + (a / b));  // 产生异常
        %>
    </body>
</html>

サーバーを起動し、http://localhost:8080/JSPDemo/demo15.jsp にアクセスします。画像の説明を追加してください