1 コンピュータリテラシーII ( 樋 口 担 当 ) 7 回 目 2 11/14
本 日 の 予 定 2 Webページの 作 成 ( 続 き) I. JavaScript( 画 像 関 係 ) II. 課 題
3 I.JavaScript
1.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> </HTML>
2.スライドショー( 準 備 ) 5 (1) 画 像 を 用 意 する watanabe.jpg hoshino.jpg miyake.jpg yoshizawa.jpg (2)サーバー 内 に 画 像 を 置 くフォルダを 作 成 する (3) 画 像 をサーバー 内 の 画 像 フォルダに 置 く
2.スライドショー1( 画 像 の 表 示 ) 6 <HTML> <HEAD> <TITLE>まずは 画 像 の 表 示 </TITLE> </HEAD> <BODY> 画 像 のサイズ ( 横 145ピクセル, 縦 155ピクセル) <IMG id= photo" src="photo/watanabe.jpg" width=145 height=155> </BODY> </HTML> 画 像 を 表 示 する 場 所 のID 名 この 場 合 は photo というID 名 表 示 する 画 像 のファイル 名 この 場 合 は Photoフォルダの 中 の Watanabe.jpg
2.スライドショー 2( 文 字 の 表 示 ) 7 <HTML> <HEAD> <TITLE> 操 作 する 文 字 も 表 示 </TITLE> </HEAD> <BODY> 文 字 をクリックできるように 汎 用 的 なインラインレベル 要 素 SPANとする タグ<SPAN></SPAN> で 表 示 する 文 字 を 挟 む <SPAN style="cursor:hand"> 前 へ</SPAN> <SPAN style="cursor:hand"> 後 へ</SPAN><BR> <IMG id= photo" src="photo/watanabe.jpg" width=145 height=155> </BODY> </HTML> 表 示 する 文 字 文 字 の 上 にカーソルが 来 たら カーソルの 形 を 手 の 形 にする
2.スライドショー 3( 変 数 の 作 成 1) 8 <HTML> <HEAD> ( 無 くてもOK) <TITLE> 関 数 の 作 成 </TITLE> <META http-equiv="content-script-type" content="text/javascript"> <SCRIPT type ="text/javascript"> <!-- var p_no = 0; //--> </SCRIPT> </HEAD> <BODY> HTMLとしてはコメント 扱 い JavaScriptの 終 了 タグ JavaScriptを 使 用 するためのお 約 束 ( 関 数 のみ 使 用 する 場 合 には 無 くてもOK) ここからJavaScriptを 書 くという 開 始 タグ 変 数 の 定 義 と 初 期 化 var 変 数 を 定 義 するという 意 味 (お 約 束 ) 変 数 p_no を 定 義 ( 使 用 することの 宣 言 ) p_no を 0 で 初 期 化 ( 最 初 の 値 ) <SPAN style="cursor:hand"> 前 へ</SPAN> <SPAN style="cursor:hand"> 後 へ</SPAN><BR> <IMG id= photo" src="photo/watanabe.jpg" width=145 height=155> </BODY> </HTML>
2.スライドショー 4( 変 数 の 作 成 2) 9 <HTML> <HEAD> <TITLE> 関 数 の 作 成 </TITLE> <META http-equiv="content-script-type" content="text/javascript"> <SCRIPT type ="text/javascript"> <!-- 変 数 im を 定 義 ( 使 用 すると 宣 言 ) var p_no = 0; var im = new Array("watanabe.jpg","hoshino.jpg","miyake.jpg","yoshizawa.jpg"); //--> </SCRIPT> 新 しく 配 列 (array)を 作 る 配 列 の 中 身 </HEAD> 変 数 im を 新 しく 作 った 配 列 で 初 期 化 配 列 im の 中 身 im[0] = "watanabe.jpg " im[1] = "hoshino.jpg " im[2] = "miyake.jpg" im[3] =,"yoshizawa.jpg"
2.スライドショー 5( 関 数 の 作 成 1) 10 <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> function setphoto(no){ p_no = no; photo.src = "photo/"+im[p_no]; } ID 名 がphotoの 画 像 のファイルを 変 更 ファイル 名 photo/ + im[p_no] (ex)p_no = 2 の 場 合,im[2]= "miyake.jpg ファイル 名 photo/miyake.jpg 関 数 の 定 義 ( 使 用 することの 宣 言 ) 関 数 名 :setphoto 引 数 :no 変 数 p_no に 引 数 no を 代 入
2.スライドショー 6( 関 数 の 作 成 2) 11 <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> p_no は3が 最 大 なので,noが 3より 大 きくならないように 制 限 if(no>3) :もしnoが3より 大 きい 場 合 には no = 3; :noを3にしなさい p_no は0が 最 小 なので,noが 0より 小 さくならないように 制 限
2.スライドショー 7( 関 数 の 使 用 ) 12 <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> 文 字 をクリックするとsetPhoto() 関 数 を 実 行 その 時 の 引 数 は 現 在 のp_no よりも 1 した 数 値 とする 文 字 をクリックするとsetPhoto() 関 数 を 実 行 その 時 の 引 数 は 現 在 のp_no よりも +1 した 数 値 とする (ex) 1 現 在 p_no が 2の 場 合 :photo/miyake.jpg が 表 示 されている. 2 文 字 前 へ がクリックされる. 3 p_no が 2 から -1 されて 1 となる. 4 関 数 setphoto() が no = 1 として 実 行 される. 5 no は 1 なので,0 よりも 小 さくないし, 3 より 大 きくないので, そのまま p_no に 代 入 される.p_no は 1 となる. 6 no が 2 から -1 されて 1 となる. 7im[p_no] はim[1]となり,その 中 身 はhoshino.jpg である. 8 ID 名 が photo の 画 像 のファイル 名 が photo/hosino.jpg に 変 更 される.
2.スライドショー 7( 関 数 の 使 用 ) 13 function setphoto(no){ if( no > 3 ) no = 3; if( no < 0 ) no = 0; p_no = no; photo.src = "photo/"+im[p_no]; } (ex) 1 現 在 p_no が 2の 場 合 :photo/miyake.jpg が 表 示 されている. 2 文 字 前 へ がクリックされる. 3 p_no が 2 から -1 されて 1 となる. 4 関 数 setphoto() が no = 1 として 実 行 される. 5 no は 1 なので,0 よりも 小 さくないし, 3 より 大 きくないので, そのまま p_no に 代 入 される.p_no は 1 となる. 6 no が 2 から -1 されて 1 となる. 7im[p_no] はim[1]となり,その 中 身 はhoshino.jpg である. 8 ID 名 が photo の 画 像 のファイル 名 が photo/hosino.jpg に 変 更 される.
3.フォームのプッシュボタンの 使 用 1 14 <BUTTON type= button name= データ 名 > ボタンに 表 示 される 文 字 </BUTTON> <HTML> <HEAD> <TITLE>プッシュボタン</TITLE> </HEAD> <BODY> <FORM action="thank.html" method="post"> ストレス 発 散 にどうぞ <BUTTON type="button" name="punch"> パンチ </BUTTON> </FROM> </BODY> </HTML> CGI 等 に 情 報 を 送 信 するわけで は 無 いので,この 部 分 は 不 要
3.フォームのプッシュボタンの 使 用 2 15 <HTML> <HEAD> <TITLE>プッシュボタン</TITLE> </HEAD> <BODY> <FORM > ストレス 発 散 にどうぞ <BUTTON type= button name= punch onclick= 処 理 > パンチ </BUTTON> </FROM> </BODY> </HTML> クリックされた 場 合 に 何 か 処 理 をする 場 合 は ここに 処 理 を 書 く 文 字 の 場 合 と 同 じ <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>
16 II. 課 題
1. 課 題 17 自 分 のWebページの 全 世 界 への 公 開 ( 続 き) 1 次 の 要 件 満 たす 自 分 のWebページのデータファイルの 作 成 2データファイルをWebサーバ(sstu.nit.ac.jp)にUP 提 出 方 法 : 自 分 のホームページを 見 れるようにすること 先 週 と 同 じ 要 件 先 週 までに 作 成 したページに スライドショーのページを 追 加 する
2. 要 件 の 詳 細 18 要 件 1:メニューにスライドショーのページを 追 加 する.ただし, 内 容 名 称 は 任 意 であり 評 価 に 影 響 しない.(スライドショーという 名 前 には 普 通 はしない) 要 件 2:スライドショーのページもCSSを 用 い,スタイルの 統 一 を 図 る. 要 件 3:( 低 評 価 ) サンプルをベースにして,フォームのボタンを 用 いて 画 像 を 切 替 えられるようにする. ( 高 評 価 ) 画 像 の 下 にサムネイル( 小 さい 画 像 )を 表 示 して,それをクリッ クすると 大 きな 画 像 が 表 示 されるようにする. 要 件 4: 拡 大 縮 小 のボタンを 用 意 して,それをクリックすると 画 像 を 拡 大 縮 小 できるようにする. ( 高 評 価 ) ボタンを 押 した 回 数 で 大 きさが 段 階 的 に 変 化 するようにする.
3.ヒント 19 (1)サムネイル 1サムネイル 画 像 は,<img width= 幅 height= 高 さ>タグで サイズ 指 定 した 画 像 を 埋 め 込 む. 2その 画 像 にイベントを 埋 め 込 む. 3 埋 め 込 むイベントは, その 画 像 と 同 じ 画 像 を 表 示 さ せるためのもの (2) 画 像 の 拡 大 縮 小 1 拡 大 縮 小 ボタンを 配 置 する. 2srcではなく width= と height= を 書 き 換 える 関 数 を 別 に 用 意 する.
4. 採 点 方 法 20 1スライドショーページへのリンクがある 2スライドショー( 画 像 の 切 替 )ができる 3フォームのボタンで 画 像 の 切 替 ができる あるいは サムネイルをクリックすることで 画 像 の 切 替 ができる 4 画 像 の 拡 大 縮 小 ができる. 5 数 段 階 にわたり 画 像 の 拡 大 縮 小 ができる. 6CSSを 用 い, 全 てのページのスタイルが 統 一 している. 7 先 週 までの 課 題 が 全 てできている. 締 め 切 り 基 本 的 に 演 習 時 間 中 ( 次 回 までに)