ウェブページの仕組みあなた 1 URL を入力力する 1 講 HTML サーバーリクエスト 2 リクエストを解析 + 処理理 3 HTML を解釈してウェブページとして表示ブラウザ HTML や画像を返却 4 講 HTML Java MySQL の連動 2 講 Java 3 講 MyS

(1)

1

０からのプログラミング講座

第

2 講

© HEART QUAKE

(2)

ウェブページの仕組み

URL

を⼊入⼒力力する

あなた

1 リクエスト

サーバー

ブラウザ

2 リクエストを解析

＋処理理

HTML

や画像を返却

HTMLを解釈して

ウェブページとして表⽰示

3

4 講

HTML

、

Java

、

MySQL

の連動

1 _講

HTML

3 講

MySQL

2 講

Java

(3)

3

第2章 JSP①

多くのウェブサービスでは、ユーザの登録した情報、投稿したコンテ

ンツ、そのほかユーザが起こしたアクションによって、サイトの内容

が変化していきます。ユーザからのリクエストを受け付け、Javaに

よって処理理し、その結果をHTMLとして⽣生成するテクノロジー、それ

がJSPです。

(4)

ゴールイメージ

l

 

「JSP①」の完了了条件

-

 

_{以下のような⾦金金額計算システムが作成できること}

⼊入⼒力力画⾯面

完了了画⾯面

個数によって⾦金金額が

正しく計算される！

(5)

5

プログラムとは

l

 

プログラムとは…

-

 

_{コンピュータに対する指⽰示命令令書}

ü

 

「コンピュータで計算する」ではなく「計算させる」

l

 

プログラミング⾔言語とは…

-

 

_{コンピュータに指⽰示するために使⽤用される⾔言語}

l

 

プログラム⾔言語にはたくさんの種類があります

A / A+ / ABAP / ABC / ABCL / ActionScript / ActiveBasic / Ada / Ada 95 / Agena / AHDL / ALGOL / Alice / APL / AppleScript / as / ash / AutoIt / AWK / B / Bash / BASIC / BCPL / Befunge / BLISS / Boo / BrainCrash / Brainfuck / C / C# / C++ / C@ / Caml / CAP-X / CASL / Cecil / CFScript / Cg / Chef / CHILL / Clipper / Clojure / CLU / COBOL / ColdFusion / Common Lisp / Component Pascal / Concurrent Clean / Concurrent Prolog / Constraint Handling Rules / CPL / csh / Curl / Curry / Cω / D / Delphi / DMDScript / Dylan / ECMAScript / Eiffel / Enterprise Generation Language / Erlang / Escapade / Esterel / Euclid / Euphoria / F# / False / Fantom / Ferite / Ficl / Flavors / Forth / FORTRAN / Fortress / Gas / GLSL / Go / Groovy / Guarded Horn Clauses / Haskell / HLASM / HLSL / HOLON / HSP / HQ9+ / HQ9F+ / HyperTalk / Icon / IDL (interactive data language) / Inform / InScript / INTERCAL / Io / IPL / ISWIM / J / Java / JavaScript / JavaFX Script / JHDL / JScript .NET / KL1 / KEMURI / KRC / ksh / LabVIEW / Lazy K / Light Game Programming / Limbo / Linda / Linden Scripting Language (LSL) / Lingo / Lisaac / LISP / LOGO / Lola / LotusScript / Lua / Lucid / Lush / Lustre / Malbolge / Mana / MASM / Mathematica / Mercury / Mind / Miranda / Misa / MixJuice / ML / Modula-2 / Modula-3 / MONAmona / Mops / MSIL / M 言語 / NASM / Nemerle / Noop / Oberon / Oberon-2 / Object Pascal / Object REXX / Object Tcl (OTcl) / Objective-C / Objective Caml (OCaml) / Occam / Ook! / OpenOffice.org Basic / OPS / Oz / Pacbase / PARLOG / Pascal / PBASIC / Pd (pure data) / PCN (program composition notation) / Perl / PHP / Pic / Piet / Pike / PL/0 / PL/I / Planner / pnuts / PostScript / Processing / Prolog / Pxem / Python / QtScript / R / REALbasic / REBOL / REXX / roff / RPG / Ruby / SAL / SASL / Sather / Scala / Scheme / Self / SFL / sh / Shakespeare / Simula / Simulink / SISAL / SKILL / Smalltalk / SNOBOL / Squeak / Squirrel / superC / SystemC / SystemVerilog / t3x / TAL / Telescript / TeX / Tcl / tcsh / Tenems / TL/I / Tonyu System / TTS / TTSeno / Turing / Unlambda / UnrealScript / VBScript / Visual Basic .NET / Whitespace / Verilog HDL / VHDL / WICS / Whirl / Windows PowerShell / WMLScript / XQuery / XSLT …

(6)

JSP

とは(1/2)

l

 

JSP

とは

-

 

JavaServer Pages

の略略

-

 

_{⼊入⼒力力された情報によって表⽰示内容を変える等、インタラク}

ティブ（対話的）なウェブページを実現することを主な⽬目

的としたJavaを利利⽤用したテクノロジー

ü

 

つまり、「WEBのためにつくられた⾔言語」！

普通の

HTML

で作成されたホームページ

PHPで作られたインタラクティブなホームページ

Web

サーバ

AP

サーバ

データを

保存

会社情報のページを⾒見見たい

はい

、

この

HTML

です

はい

、

この

HTML

です

求⼈人情報のページを⾒見見たい

会員登録

登録しました

認証しました

情報変更更

JSP

処理理

(7)

7

JSP

とは (2/2)

l

 

まずは「Hello World」

-

 

JSP

はHTMLを書くように、bodyに下記のように⼊入⼒力力しま

す。

-

 

_{「JSP File」を選択（例例　hello.jsp）}

-

 

_{「サーバーから実⾏行行」してみましょう。}

ü

 

画⾯面にHello Worldが表⽰示されていればOK！

<%

out.println(”Hello World”);

%>

5min

時間制限

(8)

Java(1/3)

l

 

JSP(JavaServer Pages)

の基となるJava

-

 

1995

年年にサン・マイクロシステムズで開発

されたオブジェクト指向プログラミング⾔言語。

ü

 

※オブジェクト指向については後に解説

-

 

OS

等の環境に依存せず、どのような

　プラットフォームでも動作することが特徴。

-

 

Android

アプリの開発にはJavaが

　⽤用いられることが多い。

(9)

9

Java(2/3)

l

 

広義のJavaと狭義のJava

-

 

_{狭義のJavaとはプログラミング⾔言語としてのJavaのこと。}

-

 

_{広義のJavaとはプログラミング⾔言語Javaの}

プログラムの実⾏行行環境および開発環境のことを指す。

-

 

Java

はOSやハードウェアに依存しないバイトコードに

変換（コンパイル）され、各環境にJava仮想マシン(JVM) 　

をすることで全ての環境で同⼀一に動く。

-

 

_{広義のJavaとはこうした実⾏行行・開発環境のことである。}

プログラム

バイトコード

Java VM

(10)

Java(3/3)

l

 

もしも、Javaが無かったら

-

 

iPhone

にあって、Androidにないアプリが存在する。

-

 

_{これは、それぞれを開発するためのプログラミング⾔言語が異異}

なるから。

-

 

_{これと同じ状態がその昔、PC（サーバー）でも発⽣生してい}

た。

-

 

_{つまり、OSごとに異異なる⾔言語で開発しなければならなかっ}

た。

-

 

Java

ができたことで、１つ⾔言語で複数のOSで動くプログラ

ムが作れるようになった。

(11)

11

開始タグと終了了タグ

l

 

開始タグと終了了タグ

-

 

JSP

は

<%

という開始タグと

%>

という終了了タグの内側に

記述します。

l

 

命令令ごとにセミコロン（;）で区切切る

-

 

1 つの命令令を終えるごとに「;」セミコロンで区切切ります。

-

 

_{⽇日本語で⾔言えば「。」英語では「.」と同じ扱いです。}

<%

out.println(”Hello World”);

out.println(1

⾏行行につき、書ける命令令は原則ひとつです

”);

%>

(12)

変数 (1/3)

l

 

変数

-

 

_{名前のついた段ボール箱のこと}

ü

 

正式には「値」を格納しておくためのメモリ上の領領域

-

 

_{変数のなかには、あらかじめ定義された数値、⽂文字列列や配}

列列

（後述）

、その他Javaで扱う型のデータを格納することがで

きます。

int box1 =

5 ;

String box2= ”

千葉葉順

”;

box2

千葉葉順

段ボールに数値をいれる場合は

int (Integer = 整数)

(13)

13

変数 (2/3)

l

 

変数の使い⽅方

-

 

_{変数を使うことで、数値や⽂文字を⼀一回保存し、}

　あとから使うことができるようになります。

<%

String box1

=

”

千葉葉順”;

int box2

=

100;

out.println(box2);

//[100]

と表⽰示される

out.println(box1);

//[

千葉葉順]と表⽰示される

%>

ブラウザ

box1

千葉葉順

(14)

変数(3/3)

l

 

データ型の種類

-

 

_{最も基本的なデータ型の種類は以下のとおりです。}

int

整数型

-2147483648

_{までの数値を取り扱う}

〜～2147483647

double

浮動⼩小数点型

64 ビット倍精度度浮動⼩小数点数

⼩小数点を含めて巨⼤大な値から

極めて⼩小さな値まで扱うことが

できます。

String

⽂文字列列型

⽂文字列列を取り扱う

(15)

15

演算⼦子

l

 

算術演算⼦子 (1/2) 　

-

 

_{算術演算⼦子は、}

プログラム内で計算の

結果を求めるために

使⽤用します。

-

 

_{⼀一般的な計算式と}

同様に記述が可能です。

<%

int box1 = 1 + 2;

out.println(box1);

int box2 = 5 – 3;

out.println(box2);

//

変数を使って計算することもできる

int box3 = box1 * (box2 + 2);

out.println(box3);

int box4 = box3 % 4;

out.println(box4);

%>

(16)

演算⼦子

l

 

算術演算⼦子 (2/2)

-

 

_{最も基本的で簡単な⾜足し算や引き算、掛け算、割り算を⾏行行}

う演算⼦子です。

+

加算

7 + 5 = 12

２つ以上の値の⾜足し算を⾏行行う

-

減算

7 – 5 = 2

２つ以上の値の引き算を⾏行行う

*

乗算

7 * 5 = 35

２つ以上の値の掛け算を⾏行行う

/

除算

7 / 5 = 1.4

２つ以上の値の割り算を⾏行行う

%

剰余

7 % 5 = 2

割り算したときの余りを求める

(17)

17

JSP

での改⾏行行

l

 

改⾏行行を⼊入れる　

-

 

JSP

で表⽰示の改⾏行行を⾏行行

う場合は

-

 

HTML

同様<br>タグを

-

 

_{画⾯面に表⽰示するように}

命令令します。

<%

int box1 = 1 + 2;

out.println(box1);

out.println(”<br>”);

int box2 = 5 – 3;

out.println(box2);

out.println(”<br>”);

//

変数を使って計算することもできる

int box3 = box1 * (box2 + 2);

out.println(box3);

%>

(18)

はじめてのウェブアプリケーション(1/8)

l

 

はじめてのウェブアプリケーション

-

 

_{以下のような⾦金金額計算システムが作成できるような}

アプリケーションを作ってみましょう。

⼊入⼒力力画⾯面

完了了画⾯面

個数によって⾦金金額が

正しく計算される！

(19)

19

はじめてのウェブアプリケーション(2/8)

l

 

HTML

とJSPの２つのファイルで作成する

-

 

_{ユーザーに情報⼊入⼒力力を促すHTMLと、}

-

 

_{⼊入⼒力力された情報を受け取って、計算し、}

結果を表⽰示するJSPの

-

 

_{２つのファイルを作成}

_します。

HTML

JSP

①情報の⼊入⼒力力を促す

③情報を受け取り、

計算し、

結果を表⽰示する

②⼊入⼒力力された情報を

HTMLからJSPに渡す

(20)

はじめてのウェブアプリケーション(3/8)

l

 

HTML

とJSPの役割分担

-

 

HTML

は情報を受け取るポストの役割

-

 

JSP

は⼿手紙を配達する配達⼈人の役割

-

 

_{役割分担をしています。}

HTML

JSP

③情報を受け取り、

②⼊入⼒力力された情報を

HTMLからJSPに渡す

(21)

21

はじめてのウェブアプリケーション(4/8)

l

 

⼊入⼒力力画⾯面でリンク先を書いておく

<html>

・・・

<body>

<h1>金額を計算します</h1>

<form action=”

keisan.jsp

” method=”get”>

購入する個数を入力してください：<input type=”text” name=”

count

”>

<input type=”submit” value=”計算”>

</form>

・・・

これがボタン押した時の

リンク先

keisan.html

今回は get を使う

postと書くのもOK

(22)

はじめてのウェブアプリケーション(5/8)

l

 

リンク先へ⼊入⼒力力した情報を渡す

-

 

_{ボタン押した後のURLを⾒見見てみましょう}

URL

に⼊入⼒力力情報が書いてある！

(23)

23

はじめてのウェブアプリケーション(6/8)

l

 

情報の渡し⽅方の法則

-

 

name +

⼊入⼒力力

(or

選択

)

されたデータ

⼊入⼒力力画⾯面( keisan,html)

<form action=”keisan.jsp” method=”get”>

購入する個数を入力してください：：<input type=”text” name=”

count

”>

<input type=”submit” value=”

計算

_”>

</form>

count=⼊入⼒力力された⽂文字

となる

(24)

はじめてのウェブアプリケーション(7/8)

l

 

リンク先でURLからデータを受け取る

keisan.jsp

<form action=”

keisan.jsp

” method=”get”>

購入する・・・

<input type=”text” name=”

count

”>

・・・

keisan.html

<%

(25)

25

はじめてのウェブアプリケーション(8/8)

l

 

情報の受け取り⽅方の法則

-

 

String

変数名

= request.getParameter(”name”) ;

完了了画⾯面(keisan.jsp)

<%

String count =

request.getParameter(”

count

”);

int kosuu = Integer.parseInt(count);

kosuu = kosuu * 105;

out.println(kosuu);

%>

count

20 URL

(26)

HTML

とJSP連携の

３つのポイント

(27)

27

HTML

とJSPの連携

l

 

ポイントその１

-

 

HTML

とJSPの２つのファイルを作成する

⼊入⼒力力画⾯面

⇒

これはHTMLファイル

完了了画⾯面

⇒

これはJSPファイル

①情報の⼊入⼒力力してもらう

処理理を実⾏行行、結果を表⽰示

③情報を受け取り、

②⼊入⼒力力された情報を

HTMLからJSPに渡す

(28)

HTML

とJSPの連携

l

 

ポイントその２

-

 

HTML

ファイルの action=“XXX”のXXXが

-

 

JSP

ファイル名と⼀一致しなければならない

keisan.jsp

<%

String count =

request.getParameter(”

coun

t

”);

<h1>金額を計算します</h1>

<form action=”

keisan.jsp

” method=”get”>

keisan.html

ここが

(29)

29

HTML

とJSPの連携

l

 

ポイントその３

-

 

HTML

ファイルの name=“YYY”のYYYが

-

 

JSP

のgetParameter (“YYY”)と⼀一致しなければなら

ない

ここが

⼀一致！

keisan.jsp

<form action=”

keisan.jsp

” method=”get”>

購入する・・・

<input type=”text” name=”

count

”>

・・・

keisan.html

<%

String count = request.getParameter(”

count

”);

・・・

(30)

変数応⽤用

l

 

変数の型変換

-

 

_{整数(int)⽤用の箱に⼊入った数値を⽂文字列列(String)⽤用の箱に移し}

替える、もしくはその逆の移し替えを⾏行行うとき、　　　　

型変換

(

キャスト

)

が必要となります。

int box1 = 5;

String box2= ”2”;

//

整数型を⽂文字列列型に移し替える

String box3 =

String.valueOf

(box1);

//

⽂文字列列型を整数型に移し替える

int box4 =

Integer.parseInt

(box2);

(31)

31

トラブルシューティング演習(1/2)

配布したサンプルプログラム(sample1.html,sample1.jsp)

を実⾏行行したら下記のようなエラーが発⽣生した。エラーの原因を特定し、修正して下さい。

なお、サンプルプログラムは⼊入⼒力力された名前を

画⾯面に表⽰示するプログラムである。

5min

時間制限

エラー！！

(32)

トラブルシューティング演習(2/2)

配布したサンプルプログラム(sample2.html,sample2.jsp)

を実⾏行行したら下記のようなエラーが発⽣生した。エラーの原因を特定し、修正して下さい。

なお、サンプルプログラムは⼊入⼒力力された数値を画⾯面に表⽰示するプログラムである。

5min

時間制限

エラーメッセージ

(33)

33

消費税率率率の変更更

応⽤用課題

Try it yourself

将来

、

消費税率率率が変更更されることを受けて

、

現状

、

5%

と決めて計算されている部分を変更更し

、

⼊入⼒力力画⾯面側で⼊入⼒力力された消費税率率率で

計算された税込⾦金金額を表⽰示するようにしなさい

。

例例:

税率入力欄に

8 と⼊入⼒力力されたら消費税率率率8%で計算する

(34)

if

⽂文とは？

性別？

「◯◯くん、

こんにちは」　　　

と表⽰示

「◯◯さん、

こんにちは」　

と表⽰示

男性

だったら

⼥女女性

(35)

35

int suji_box = 1;

if

(

suji_box

==

1 ) {

out.println

(”Hello World!”)

;

}

else

{

out.println

(”Oh my god!”)

;

}

制御構造

l

 

条件分岐 (1/3)

-

 

JSP

では条件によって処理理を変えることができます。

-

 

if / else

ü

 

if

は、英語のifの意味の通り「もし…だったら…する」

という構⽂文を作ります。

ここでは最もよく利利⽤用する「

if

」をご紹介します

。

もし

suji_box

==

1 の条件にあえば

そうでなければ（else）

(36)

制御構造

l

 

条件分岐 (2/3)

-

 

else if

ü

 

else if

は、上位の if に対して「そうでなくて、もし…

だったら…する」という構⽂文を作ります。

if

(

suji_box

==

1 ) {

out.println

(”Hello World!”)

;

}

else if

(

suji_box

==

2 ) {

out.println

(”Good night!” )

;

}

else

{

out.println

(”Oh my god!” )

;

}

もし

suji_box

==

1 の条件にあえば

そうではなく（else）

もし

suji_box

==

2 の条件にあえば

そうでもなければ（else）

ポイントは

「必ず上から順に条件に合うかどうかの判断をする」

ことです

。

(37)

37

制御構造

l

 

条件分岐 (3/3)

START

suji_box == 1

Hello World

！

と表⽰示

yes

suji_box == 2

no

Good night

！

と表⽰示

yes

Oh my god

！

と表⽰示

END

フローチャートによるイメージ

(38)

if

⽂文を使ったプログラム

Try it yourself

先ほどの消費税のプログラムに対して

合計⾦金金額が5000円を超えた場合に

500 円の値引きをした⾦金金額を

表⽰示するプログラムに変更更しなさい

15min

時間制限

(39)

39

String name = ”abcdefg”;

if(name.equals(”abc”)){

}else{

}

⽂文字列列との⽐比較

l

 

⽂文字との⽐比較は「equals」を利利⽤用する

-

 

_{数値との⽐比較は「==」でしたが、⽂文字列列との⽐比較には}

「equals」を利利⽤用します。

箱nameに⼊入ってる⽂文字と

abc

が⼀一致したら

、

の意味

(40)

パスワードチェック

Try it yourself

パスワードを2回⼊入⼒力力させるフォームを作成し

、

2 つのパスワードが⼀一致していれば「認証成功」

⼀一致していなければ「パスワードが間違っています」

と表⽰示するプログラムを作成しなさい

ただし

、

⼊入⼒力力するパスワードは「＊」などで⾒見見えないように

なっていること

。

15min

時間制限

(41)

41

まとめ　第2講で学んだこと

l

 

変数と呼ばれる名前のついた段ボール箱の扱い⽅方を　　　　

学びました。

l

 

JSP

で四則演算を⾏行行う⽅方法を学びました。

l

 

⼊入⼒力力フォームで⼊入⼒力力されたデータをJSPで受け取る⽅方法を学

ウェブページの仕組み あなた 1 URL を 入 力力する 1 講 HTML サーバー リクエスト 2 リクエストを解析 + 処理理 3 HTML を解釈して ウェブページとして表 示 ブラウザ HTML や画像を返却 4 講 HTML Java MySQL の連動 2 講 Java 3 講 MyS

０からのプログラミング講座

第

2

講

© HEART QUAKE

ウェブページの仕組み

URL

を⼊入⼒力力する

あなた

1

リクエスト

サーバー

ブラウザ

2

リクエストを解析

＋処理理

HTML

や画像を返却

HTMLを解釈して

ウェブページとして表⽰示

3

4

講

HTML

、

Java

、

MySQL

の連動

1

講

HTML

3

講

MySQL

2

講

Java

第2章 JSP①

多くのウェブサービスでは、ユーザの登録した情報、投稿したコンテ

ンツ、そのほかユーザが起こしたアクションによって、サイトの内容

が変化していきます。ユーザからのリクエストを受け付け、Javaに

よって処理理し、その結果をHTMLとして⽣生成するテクノロジー、それ

がJSPです。

ゴールイメージ

l

「JSP①」の完了了条件

-

以下のような⾦金金額計算システムが作成できること

⼊入⼒力力画⾯面

完了了画⾯面

個数によって⾦金金額が

正しく計算される！

プログラムとは

l

プログラムとは…

-

コンピュータに対する指⽰示命令令書

ü

「コンピュータで計算する」 ではなく「計算させる」

l

プログラミング⾔言語とは…

-

コンピュータに指⽰示するために使⽤用される⾔言語

l

プログラム⾔言語にはたくさんの種類があります

JSP

とは(1/2)

l

JSP

とは

-

JavaServer Pages

の略略

-

⼊入⼒力力された情報によって表⽰示内容を変える等、インタラク

ティブ（対話的）なウェブページを実現することを主な⽬目

的としたJavaを利利⽤用したテクノロジー

ü

ウェブページの仕組みあなた 1 URL を入力力する 1 講 HTML サーバーリクエスト 2 リクエストを解析 + 処理理 3 HTML を解釈してウェブページとして表示ブラウザ HTML や画像を返却 4 講 HTML Java MySQL の連動 2 講 Java 3 講 MyS

_講

_{以下のような⾦金金額計算システムが作成できること}

_{コンピュータに対する指⽰示命令令書}

「コンピュータで計算する」ではなく「計算させる」

_{コンピュータに指⽰示するために使⽤用される⾔言語}

_{⼊入⼒力力された情報によって表⽰示内容を変える等、インタラク}

_{「JSP File」を選択（例例　hello.jsp）}

_{「サーバーから実⾏行行」してみましょう。}