コンピュータリテラシーII
(樋口担当)
７回目②
11/１４
本日の予定
2
Webページの作成（続き）
I． JavaScript（画像関係）
II. 課題
I．JavaScript
１．JavaScriptを使用するためのお約束
4
<HEAD></HEAD>の間に
<META http-equiv=“Content-Script-Type”content=“text/javascript”>
を記入する
<HTML>
<HEAD>
<TITLE>JavaScriptを使用するためのお約束</TITLE>
<META http-equiv="Content-Script-Type" content="text/javascript">
</HEAD>
<BODY>
ここに本文を書く
</BODY>
２．スライドショー（準備）
5
（１）画像を用意する
watanabe.jpg
hoshino.jpg
miyake.jpg
yoshizawa.jpg
（２）サーバー内に画像を置くフォルダを作成する
２．スライドショー①（画像の表示）
6
画像を表示する場所のID名 この場合は photo というID名 <HTML> <HEAD> <TITLE>まずは画像の表示</TITLE> </HEAD> <BODY> <IMG id=“photo" src="photo/watanabe.jpg" width=145 height=155> </BODY> </HTML> 画像のサイズ (横145ピクセル， 縦155ピクセル) 表示する画像のファイル名 この場合は Photoフォルダの中の Watanabe.jpg２．スライドショー ②（文字の表示）
7
文字をクリックできるように 汎用的なインラインレベル要素 SPANとする タグ<SPAN></SPAN> で表示する文字を挟む <HTML> <HEAD> <TITLE>操作する文字も表示</TITLE> </HEAD> <BODY> <SPAN style="cursor:hand">前へ</SPAN> <SPAN style="cursor:hand">後へ</SPAN><BR> <IMG id=“photo" src="photo/watanabe.jpg" width=145 height=155> </BODY> </HTML> 表示する文字 文字の上にカーソルが来たら カーソルの形を手の形にする<HTML> <HEAD>
<TITLE>関数の作成</TITLE>
<META http-equiv="Content-Script-Type" content="text/javascript"> <SCRIPT type ="text/javascript">
<!--var p_no = 0; //--> </SCRIPT> </HEAD> <BODY> <SPAN style="cursor:hand">前へ</SPAN> <SPAN style="cursor:hand">後へ</SPAN><BR>
<IMG id=“photo" src="photo/watanabe.jpg" width=145 height=155> </BODY> </HTML>
２．スライドショー ③（変数の作成１）
8
JavaScriptを使用するためのお約束 (関数のみ使用する場合には無くてもOK) 変数の定義と初期化 var 変数を定義するという意味（お約束） 変数 p_no を定義（使用することの宣言） p_no を 0 で初期化（最初の値） ここからJavaScriptを書くという開始タグ JavaScriptの終了タグ HTMLとしてはコメント扱い (無くてもOK）<HTML> <HEAD>
<TITLE>関数の作成</TITLE>
<META http-equiv="Content-Script-Type" content="text/javascript"> <SCRIPT type ="text/javascript">
<!--var p_no = 0;
var im = new Array("watanabe.jpg","hoshino.jpg","miyake.jpg","yoshizawa.jpg"); //--> </SCRIPT> </HEAD>
２．スライドショー ④（変数の作成２）
9
変数 im を定義（使用すると宣言） 新しく配列（array）を作る 配列の中身 変数 im を新しく作った配列で初期化 im[0] = "watanabe.jpg " im[1] = "hoshino.jpg " im[2] = "miyake.jpg" im[3] =,"yoshizawa.jpg"配列 im の中身
<HTML> <HEAD>
<TITLE>関数の作成</TITLE>
<META http-equiv="Content-Script-Type" content="text/javascript"> <SCRIPT type ="text/javascript">
<!--var p_no = 0;
var im = new Array("watanabe.jpg","hoshino.jpg","miyake.jpg","yoshizawa.jpg"); function setPhoto(no){ p_no = no; photo.src = "photo/"+im[p_no]; } //--> </SCRIPT> </HEAD>
２．スライドショー ⑤（関数の作成１）
10
関数の定義（使用することの宣言） 関数名：setPhoto 引数：no ID名がphotoの画像のファイルを変更 ファイル名 photo/ + im[p_no](ex)p_no = 2 の場合，im[2]= "miyake.jpg“ ファイル名 photo/miyake.jpg
<HTML> <HEAD>
<TITLE>関数の作成</TITLE>
<META http-equiv="Content-Script-Type" content="text/javascript"> <SCRIPT type ="text/javascript">
<!--var p_no = 0;
var im = new Array("watanabe.jpg","hoshino.jpg","miyake.jpg","yoshizawa.jpg"); function setPhoto(no){ if( no > 3 ) no = 3; if( no < 0 ) no = 0; p_no = no; photo.src = "photo/"+im[p_no]; } //--> </SCRIPT> </HEAD>
２．スライドショー ⑥（関数の作成２）
11
p_no は３が最大なので，noが ３より大きくならないように制限 if(no>3) ：もしnoが３より大きい場合には no = 3; ：noを３にしなさい p_no は０が最小なので，noが ０より小さくならないように制限<BODY>
<SPAN style=“cursor:hand“ onclick=“setPhoto(p_no – 1);”>前へ</SPAN>
<SPAN style="cursor:hand"onclick=“setPhoto(p_no + 1);”>後へ</SPAN><BR> <IMG id=“photo" src="photo/watanabe.jpg" width=145 height=155>
</BODY> </HTML>
２．スライドショー ⑦（関数の使用）
12
文字をクリックするとsetPhoto（）関数を実行 その時の引数は現在のp_no よりも ‐1 した数値とする 文字をクリックするとsetPhoto（）関数を実行 その時の引数は現在のp_no よりも +1 した数値とする (ex) ①現在 p_no が 2の場合：photo/miyake.jpg が表示されている．②文字「前へ」がクリックされる． ③ p_no が 2 から -1 されて 1 となる． ④関数 setPhoto() が no = 1 として実行される． ⑤ no は 1 なので，0 よりも小さくないし， 3 より大きくないので， そのまま p_no に代入される．p_no は 1 となる． ⑥ no が 2 から -1 されて 1 となる．
(ex) ①現在 p_no が 2の場合：photo/miyake.jpg が表示されている． ②文字「前へ」がクリックされる． ③ p_no が 2 から -1 されて 1 となる． ④関数 setPhoto() が no = 1 として実行される． ⑤ no は 1 なので，0 よりも小さくないし， 3 より大きくないので， そのまま p_no に代入される．p_no は 1 となる． ⑥ no が 2 から -1 されて 1 となる．
⑦ im[p_no] は im[1] となり，その中身は hoshino.jpg である．
⑧ ID名が photo の画像のファイル名が photo/hosino.jpg に変更される．
２．スライドショー ⑦（関数の使用）
13
function setPhoto(no){ if( no > 3 ) no = 3; if( no < 0 ) no = 0; p_no = no; photo.src = "photo/"+im[p_no]; }３．フォームのプッシュボタンの使用①
14
<HTML> <HEAD> <TITLE>プッシュボタン</TITLE> </HEAD> <BODY><FORM action="thank.html" method="POST"> ストレス発散にどうぞ
<BUTTON type="button" name="punch"> パンチ
</BUTTON> </FROM>
</BODY>
<BUTTON type=“button” name=“データ名”>
ボタンに表示される文字
</BUTTON>
CGI等に情報を送信するわけで は無いので，この部分は不要
<HTML> <HEAD> <TITLE>プッシュボタン</TITLE> </HEAD> <BODY> <FORM > ストレス発散にどうぞ
<BUTTON type=“button” name=“punch” onclick=“処理”> パンチ </BUTTON> </FROM> </BODY> </HTML>
３．フォームのプッシュボタンの使用②
15
クリックされた場合に 何か処理をする場合は ここに処理を書く 文字の場合と同じ <BODY><SPAN style=“cursor:hand“ onclick=“setPhoto(p_no – 1);”>前へ</SPAN>
<SPAN style="cursor:hand"onclick=“setPhoto(p_no – 1);”>後へ</SPAN><BR> <IMG id=“photo" src="photo/watanabe.jpg" width=145 height=155>
