ICT関連の学習備忘録

ICTの学習をアウトプットするワークブックサイト

ICT関連の学習備忘録

2019/10/03：Eclipseでプロジェクト作成

EclipseによるJSP作成手順

EclipseによるJSP作成手順
・Serversプロジェクトの作成
・動的Webプロジェクトの作成
・JSPの作成
・Tomcatへのプロジェクト搭載＆起動

Eclipseでプロジェクト作成準備

パースペクティブを開く→Java EEを追加。

サーバーの作成
ファイル→新規→その他→サーバー・次へ→Tomcat8・次へ

プロジェクトの作成
ファイル→新規→新規動的 Web プロジェクト→ターゲット・ランタイム「Tomcat8」
→動的 web モジュールバージョン「3.1」→構成「Tomcat8デフォルト構成」
→次へ→次へ→Web モジュール「web.xmlデプロイメント記述子の生成」チェック→完了

サーバ起動
サーバウィンドウで対象サーバ（ローカルホストの・・・）で右クリック→追加及び除去
→使用するプロジェクトを構成済みへ追加→完了→実行でサーバ起動
※追加及び除去をする事でserver.xml内にコンテキストが追加される。
※サーバーの設定ファイルはサーバの作成で作成したプロジェクト内に設置されている。

JSP・スクリプトを構成する要素

JSPの構成要素
・HTMLタグ
・コメント
・スクリプト（暗黙オブジェクト）
・ディレクティブ
・アクションタグ
・EL式（Expression Language）
・JSTL（JSP Standard TagLibrary）

スクリプトの主な要素
・コメント
　<%--　--%>
　.jsp内でコメントを記述する時に使用
・スクリプト宣言
　<%!　%>
　フィールドの宣言やメソッドを記述する時に使用
・スクリプトレット
　<%　%>
　メソッドを呼び出すときやフィールドに値を設定したい時に使用
　※_jspServiceメソッド内に配置される
・スクリプト式
　<%=　%>
　フィールドの値やメソッドの戻り値を表示したい時に使用
　※out.print(値)に配置される。

JSP実行の流れ

JSP実行の流れ
JSPファイルのJavaソースコード変換
　今回実習環境ではjavax.servlet.http.HttpServletクラスを継承した
　org.apache.jasper.runtime.HttpJspBaseクラスに変換
　スクリプト宣言<%! %>は、クラスのメンバーとして配置
　スクリプレット<% %>、スクリプト式<%= %>ならびにHTMLタグは、
　__jspServiceメソッド内に配置
Javaソースコードのコンパイル
クラスロード
Servletインスタンス生成
　コンストラクタの実行
_jspInitメソッドの実行
　スクリプト式は、out.print("スクリプト式内の情報");に変換
　HTMLタグは、out.write("タグ")に変換
　print/write各メソッドはブラウザにタグ等の文字列を送信する。
JSP作成の手順で作成したJSPファイルはJavaコードの確認が出来ます。
　C:\pleiades\tomact\8\work\Catalina\localhost\testapp\org\apache\jsp
class Rei03_jsp
{
    /***スクリプト宣言内の記述　<%!  %> ***/
    public void main(String[] args)
    {
        /***スクリプットレット内の記述　<%  %> ***/;
        System.out.print(/***スクリプト式内の記述　<%  %> ***/);
        System.out.print("/***スクリプト以外（文字列出力等***/");
    }
}

実行演習

rei03.jsp 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
private int x = 0;
private int y = 0;

public void setDate(int x, int y) {
	this.x = x;
	this.y = y;
}

public int tashi(){
	return this.x + this.y;
}

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>rei03.jsp</title>
</head>
<body>
<% setDate(10,20); %>
<%= "x=" + this.x  %><br>
<%= "y=" + this.y  %><br>
<%= "x+y=" + this.tashi() %>
</body>
</html>
ブラウザで実行時のソースコード
http://localhost:8080/toi01/jsp/toi01.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>rei03.jsp</title>
</head>
<body>

x=10<br>
y=20<br>
x+y=30
</body>
</html>

toi02.jsp 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
//ループ回数の指定
private int counter = 100;
public int roop(int num)
{
	int sum = 0;
	for(int i = 0 ; i<=num ; i++){
		sum += i;
	}
	return sum;
}
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>問2.jsp</title>
</head>
<body>
問02のJSPからの出力です<br>
0から<%= counter %>までの合計は・・・<br>
<%= this.roop(counter) %><br>
です。

</body>
</html>
ブラウザで実行時のソースコード
http://localhost:8080/toi01/jsp/toi01.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>問2.jsp</title>
</head>
<body>
問02のJSPからの出力です<br>
0から100までの合計は・・・<br>
5050<br>
です。

</body>
</html>



前のページへ戻る