1

Size: px

Start display at page:

Download "1"

まとももちやま
4 years ago
Views:

1 1

2 2

3 3

4 4

5 確認しよう今回のサンプルプログラムにアクセスしてみましょう 1. デスクトップ上のフォルダをクリックし /var/www/html に example1.html と example2.php ファイルがあることを確認します 2. ブラウザを起動し次の URL にアクセスします 3. 自分の手を選択してじゃんけんぽんボタンを押し動作を確認します 5

6 6

7 演習 1 1. /var/www/html フォルダの exer2.php をダブルクリックしエディタを起動します 2. 演習 1 の部分をテキストに従って編集します <h2> コンピュータ </h2>  $filename = "janken.png" ; echo "<img border= "0 " src= "$filename ">";  <?php と?> を追加 $COM に 0 から 2 の乱数を代入 $filename に正しいファイル名が設定されるように変更 3. ファイルを上書き保存し以下の URL にアクセスします再読み込みを行うとコンピュータの手が変わります 7

8 演習にアクセスしボタンを押しても次ページに行かないことを確認します 2. exer1.html の演習 2-1 の部分をテキストに従って編集します  <form method="get" action="">  action に exer2.php を指定 3. 演習 2-2 の部分をテキストに従って編集します  <td align="center"><input type="radio" name="" value="0"></td> <td align="center"><input type="radio" name="" value="1"></td> <td align="center"><input type="radio" name="" value="2"></td>  すべての input タグの name 属性に you を指定 4. にアクセスしボタンを押して次ページに行くことと送信先の URL に?you=X が付与されていることを確認します 8

9 演習 3 1. exer2.php の演習 3 の部分をテキストに従って編集します  $filename = "janken.png" ; echo "<img border= "0 " src= "$filename ">"  <?php と?> を追加 $YOU に GET で送信されてくる you のデータを代入する $filename に正しいファイル名が設定されるように変更 2. ファイルを上書き保存し以下の URL にアクセスしますラジオボタンで自分の手を選んで送信ボタンを押すと次ページでコンピュータと自分の手が表示されます 9

10 10

11 11

12 演習 4 1. exer2.php の演習 4 の部分をテキストに従って編集します  if($com == 0){ switch ($YOU) { case 0: echo " あいこ "; break; case 1: echo " まけ!"; break; case 2: echo " かち!"; break; } }  <?php と?> を追加 if 文全体をコピー & ペーストし elseif および else 部分にする $COM==1 および 2 の場合に応じたメッセージに変更する 2. ファイルを上書き保存し以下の URL にアクセスしますラジオボタンで自分の手を選んで送信ボタンを押すと次ページでコンピュータと自分の手が表示され勝敗も表示されます 12

13 13

14 14

15 example1.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> じゃんけんゲーム </title> </head> <body> <h1> じゃんけんゲーム </h1> <h2> コンピュータ </h2> <img border="0" src="hatena1.png"> <h2> あなた </h2> <form method="get" action="example2.php"> <table border="0"> <tr> <td><img border="0" src="janken0.png"></td> <td><img border="0" src="janken1.png"></td> <td><img border="0" src="janken2.png"></td> </tr> <tr> <td align="center"><input type="radio" name="you" value="0"></td> <td align="center"><input type="radio" name="you" value="1"></td> <td align="center"><input type="radio" name="you" value="2"></td> </tr> </table> <input type="submit" value=" じゃんけんぽん "> </form> </body> </html> 15

16 example2.php <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> じゃんけんゲーム </title> </head> <body> <h1> じゃんけんゲーム </h1> <h2> コンピュータ </h2> <?php $COM = rand(0,2) ; $filename = "janken". $COM. ".png" ; echo "<img border= "0 " src= "$filename ">";?> <h2> あなた </h2> <?php $YOU = $_GET['you']; $filename = "janken". $YOU. ".png" ; echo "<img border= "0 " src= "$filename ">";?> <h1> <?php if($com == 0){ switch ($YOU) { case 0: echo " あいこ "; break; case 1: echo " まけ!"; break; case 2: echo " かち!"; break; } }else if($com == 1){ switch ($YOU) { case 0: echo " かち!"; break; case 1: echo " あいこ "; break; case 2: echo " まけ!"; break; } }else{ switch ($YOU) { case 0: echo " まけ!"; break; case 1: echo " かち!"; break; case 2: echo " あいこ "; break; } }?> </h1> <a href="example1.html"> 戻る </a> </body> </html> 16

17 exer1.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> じゃんけんゲーム </title> </head> <body> <h1> じゃんけんゲーム </h1> <h2> コンピュータ </h2> <img border="0" src="hatena1.png"> <h2> あなた </h2>  <form method="get" action="">  <table border="0"> <tr> <td><img border="0" src="janken0.png"></td> <td><img border="0" src="janken1.png"></td> <td><img border="0" src="janken2.png"></td> </tr> <tr>  <td align="center"><input type="radio" name="" value="0"></td> <td align="center"><input type="radio" name="" value="1"></td> <td align="center"><input type="radio" name="" value="2"></td>  </tr> </table> <input type="submit" value=" じゃんけんぽん "> </form> </body> </html> 17

18 exer2.php <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> じゃんけんゲーム </title> </head> <body> <h1> じゃんけんゲーム </h1> <h2> コンピュータ </h2>  $filename = "janken.png" ; echo "<img border= "0 " src= "$filename ">";  <h2> あなた </h2>  $filename = "janken.png" ; echo "<img border= "0 " src= "$filename ">"  <h1>  if($com == 0){ switch ($YOU) { case 0: echo " あいこ "; break; case 1: echo " まけ!"; break; case 2: echo " かち!"; break; } }  </h1> <a href="example1.html"> 戻る </a> </body> </html> 18

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 1/18 演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名使用するフォルダ演習 1 Z: Web データ管理 20111221