0からのプログラミング講座1 0からのプログラミング講座第2講 © heart quake...

1

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

© HEART QUAKE

本⽂文書のいかなる部分をも、事前の許可なく複写したり転送したりすることはできません。

2

Copyright (c) 2012-2013 HEART QUAKE All rights reserved .

ウェブページの仕組み

URLを⼊入⼒力力する

あなた 1

リクエスト

サーバー

ブラウザ

2

リクエストを解析＋処理理

HTMLや画像を返却HTMLを解釈してウェブページとして表⽰示

3

4講 HTML、Java、MySQLの連動

1講 HTML

3講 MySQL

2講 Java

3


第2章 JSP①

多くのウェブサービスでは、ユーザの登録した情報、投稿したコンテンツ、そのほかユーザが起こしたアクションによって、サイトの内容が変化していきます。ユーザからのリクエストを受け付け、Javaによって処理理し、その結果をHTMLとして⽣生成するテクノロジー、それがJSPです。

4


ゴールイメージ

l  「JSP①」の完了了条件 -  以下のような⾦金金額計算システムが作成できること

⼊入⼒力力画⾯面完了了画⾯面

個数によって⾦金金額が正しく計算される！

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です求⼈人情報のページを⾒見見たい

はい、このHTMLです

会員登録

登録しました

ログイン

認証しました

情報変更更

保存しました

JSP

処理理

7


JSPとは (2/2)

l  まずは「Hello World」-  JSPはHTMLを書くように、bodyに下記のように⼊入⼒力力します。

-  「JSP File」を選択（例例　hello.jsp） -  「サーバーから実⾏行行」してみましょう。

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

5min時間制限

8


Java(1/3)

l  JSP(JavaServer Pages)の基となるJava

-  1995年年にサン・マイクロシステムズで開発されたオブジェクト指向プログラミング⾔言語。 ü ※オブジェクト指向については後に解説

-  OS等の環境に依存せず、どのような　プラットフォームでも動作することが特徴。 -  Androidアプリの開発にはJavaが　⽤用いられることが多い。

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


開始タグと終了了タグ

l  開始タグと終了了タグ-  JSPはという終了了タグの内側に記述します。

l  命令令ごとにセミコロン（;）で区切切る-  1つの命令令を終えるごとに「;」セミコロンで区切切ります。 -  ⽇日本語で⾔言えば「。」英語では「.」と同じ扱いです。

12


変数 (1/3)

l  変数 -  名前のついた段ボール箱のこと

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

-  変数のなかには、あらかじめ定義された数値、⽂文字列列や配列列（後述）、その他Javaで扱う型のデータを格納することができます。

int box1 = 5; String box2= ”千葉葉順”;

box2千葉葉順

段ボールに数値をいれる場合はint (Integer = 整数)

13


変数 (2/3)

l  変数の使い⽅方

-  変数を使うことで、数値や⽂文字を⼀一回保存し、　あとから使うことができるようになります。

ブラウザ

box1

千葉葉順

14


変数(3/3)

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

int 整数型 -2147483648〜～2147483647 までの数値を取り扱う

double 浮動⼩小数点型64ビット倍精度度浮動⼩小数点数⼩小数点を含めて巨⼤大な値から極めて⼩小さな値まで扱うことができます。

String ⽂文字列列型⽂文字列列を取り扱う

boolean 真偽型 true(1)またはfalse(0) のデータを取り扱う

15


演算⼦子

l  算術演算⼦子 (1/2) 　 -  算術演算⼦子は、プログラム内で計算の結果を求めるために使⽤用します。

-  ⼀一般的な計算式と同様に記述が可能です。

16


演算⼦子

l  算術演算⼦子 (2/2)-  最も基本的で簡単な⾜足し算や引き算、掛け算、割り算を⾏行行う演算⼦子です。

+ 加算 7 + 5 = 12 ２つ以上の値の⾜足し算を⾏行行う

- 減算 7 – 5 = 2 ２つ以上の値の引き算を⾏行行う

* 乗算 7 * 5 = 35 ２つ以上の値の掛け算を⾏行行う

/ 除算 7 / 5 = 1.4 ２つ以上の値の割り算を⾏行行う

% 剰余 7 % 5 = 2 割り算したときの余りを求める

17


JSPでの改⾏行行

l  改⾏行行を⼊入れる　 -  JSPで表⽰示の改⾏行行を⾏行行う場合は

-  HTML同様
タグを -  画⾯面に表⽰示するように命令令します。

補⾜足

18


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

l  はじめてのウェブアプリケーション -  以下のような⾦金金額計算システムが作成できるような　　　アプリケーションを作ってみましょう。

⼊入⼒力力画⾯面完了了画⾯面

個数によって⾦金金額が正しく計算される！

19



l  HTMLとJSPの２つのファイルで作成する -  ユーザーに情報⼊入⼒力力を促すHTMLと、 -  ⼊入⼒力力された情報を受け取って、計算し、　　　　　　　　　結果を表⽰示するJSPの

-  ２つのファイルを作成します。

HTML JSP

①情報の⼊入⼒力力を促す ③情報を受け取り、計算し、

結果を表⽰示する

②⼊入⼒力力された情報をHTMLからJSPに渡す

20



l  HTMLとJSPの役割分担 -  HTMLは情報を受け取るポストの役割 -  JSPは⼿手紙を配達する配達⼈人の役割 -  役割分担をしています。

HTML JSP

①情報を⼊入⼒力力してもらう③情報を受け取り、処理理を実⾏行行する


21



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

・・・

金額を計算します

購入する個数を入力してください：

・・・

これがボタン押した時のリンク先

keisan.html

今回は get を使う

postと書くのもOK

22



l  リンク先へ⼊入⼒力力した情報を渡す -  ボタン押した後のURLを⾒見見てみましょう

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

URL

23



l  情報の渡し⽅方の法則 -  name + ⼊入⼒力力(or 選択)されたデータ

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

購入する個数を入力してください：：

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

URL

24



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

keisan.jsp

購入する・・・・・・

keisan.html

25



l  情報の受け取り⽅方の法則 -  String 変数名 = request.getParameter(”name”) ;

完了了画⾯面(keisan.jsp)

count20

URL

26


HTMLとJSP連携の３つのポイント

27


HTMLとJSPの連携

l  ポイントその１ -  HTMLとJSPの２つのファイルを作成する

⼊入⼒力力画⾯面⇒これはHTMLファイル完了了画⾯面⇒これはJSPファイル

①情報の⼊入⼒力力してもらう③情報を受け取り、

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


28


HTMLとJSPの連携

l  ポイントその２ -  HTMLファイルの action=“XXX”のXXXが -  JSPファイル名と⼀一致しなければならない

keisan.jsp

金額を計算します

keisan.html ここが⼀一致！

29


HTMLとJSPの連携

l  ポイントその３ -  HTMLファイルの name=“YYY”のYYYが -  JSPのgetParameter (“YYY”)と⼀一致しなければならない

ここが⼀一致！

keisan.jsp

購入する・・・

・・・

keisan.html

30


変数応⽤用

l  変数の型変換 -  整数(int)⽤用の箱に⼊入った数値を⽂文字列列(String)⽤用の箱に移し替える、もしくはその逆の移し替えを⾏行行うとき、　　　　型変換(キャスト)が必要となります。

int box1 = 5;

String box2= ”2”;

//整数型を⽂文字列列型に移し替える String box3 = String.valueOf(box1);

//⽂文字列列型を整数型に移し替える int box4 = Integer.parseInt(box2);

応⽤用

31


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

配布したサンプルプログラム(sample1.html,sample1.jsp) を実⾏行行したら下記のようなエラーが発⽣生した。エラーの原因を特定し、修正して下さい。

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

5min時間制限

エラー！！

32


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

配布したサンプルプログラム(sample2.html,sample2.jsp) を実⾏行行したら下記のようなエラーが発⽣生した。エラーの原因を特定し、修正して下さい。

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

5min時間制限

エラーメッセージ

33


消費税率率率の変更更

応⽤用課題

Try it yourself

将来、消費税率率率が変更更されることを受けて、現状、5%と決めて計算されている部分を変更更し、

⼊入⼒力力画⾯面側で⼊入⼒力力された消費税率率率で計算された税込⾦金金額を表⽰示するようにしなさい。

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

34


if⽂文とは？

性別？

「◯◯くん、こんにちは」　　　と表⽰示

「◯◯さん、こんにちは」　と表⽰示

男性だったら

⼥女女性だったら

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）

ポイントは「必ず上から順に条件に合うかどうかの判断をする」ことです。上から順に判断し、最初に条件に合ったところの処理理だけを実⾏行行するので、他のelse if に条件が合致してもその処理理は⾏行行われません。

37


制御構造

l  条件分岐 (3/3)

START

suji_box == 1

Hello World！と表⽰示

yes

suji_box == 2no no

Good night！と表⽰示

yesOh my god！と表⽰示

END

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

38


if⽂文を使ったプログラム

Try it yourself

先ほどの消費税のプログラムに対して合計⾦金金額が5000円を超えた場合に

500円の値引きをした⾦金金額を表⽰示するプログラムに変更更しなさい

15min時間制限

39


String name = ”abcdefg”;

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

}else{

}

⽂文字列列との⽐比較

l  ⽂文字との⽐比較は「equals」を利利⽤用する-  数値との⽐比較は「==」でしたが、⽂文字列列との⽐比較には「equals」を利利⽤用します。

箱nameに⼊入ってる⽂文字と abcが⼀一致したら、の意味

40


パスワードチェック

Try it yourself

パスワードを2回⼊入⼒力力させるフォームを作成し、 2つのパスワードが⼀一致していれば「認証成功」

⼀一致していなければ「パスワードが間違っています」と表⽰示するプログラムを作成しなさい

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

なっていること。

15min時間制限

41


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

l  変数と呼ばれる名前のついた段ボール箱の扱い⽅方を　　　　学びました。

l  JSPで四則演算を⾏行行う⽅方法を学びました。 l  ⼊入⼒力力フォームで⼊入⼒力力されたデータをJSPで受け取る⽅方法を学びました。

l  if⽂文という構⽂文を学びました。

42


お疲れ様でした！！

0からのプログラミング講座1 0からのプログラミング講座 第2講 © heart quake...

Documents

0からのプログラミング講座1 0からのプログラミング講座第2講 © heart quake...