Microsoft PowerPoint - A07回目②.pptx

20 

Loading....

Loading....

Loading....

Loading....

Loading....

全文

(1)

コンピュータリテラシーII

(樋口担当)

7回目②

11/14

(2)

本日の予定

2

Webページの作成(続き)

I. JavaScript(画像関係)

II. 課題

(3)

I.JavaScript

(4)

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>

(5)

2.スライドショー(準備)

5

(1)画像を用意する

watanabe.jpg

hoshino.jpg

miyake.jpg

yoshizawa.jpg

(2)サーバー内に画像を置くフォルダを作成する

(6)

2.スライドショー①(画像の表示)

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)

2.スライドショー ②(文字の表示)

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> 表示する文字 文字の上にカーソルが来たら カーソルの形を手の形にする

(8)

<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>

2.スライドショー ③(変数の作成1)

8

JavaScriptを使用するためのお約束 (関数のみ使用する場合には無くてもOK) 変数の定義と初期化 var 変数を定義するという意味(お約束) 変数 p_no を定義(使用することの宣言) p_no を 0 で初期化(最初の値) ここからJavaScriptを書くという開始タグ JavaScriptの終了タグ HTMLとしてはコメント扱い (無くてもOK)

(9)

<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>

2.スライドショー ④(変数の作成2)

9

変数 im を定義(使用すると宣言) 新しく配列(array)を作る 配列の中身 変数 im を新しく作った配列で初期化 im[0] = "watanabe.jpg " im[1] = "hoshino.jpg " im[2] = "miyake.jpg" im[3] =,"yoshizawa.jpg"

配列 im の中身

(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"); function setPhoto(no){ p_no = no; photo.src = "photo/"+im[p_no]; } //--> </SCRIPT> </HEAD>

2.スライドショー ⑤(関数の作成1)

10

関数の定義(使用することの宣言) 関数名:setPhoto 引数:no ID名がphotoの画像のファイルを変更 ファイル名 photo/ + im[p_no]

(ex)p_no = 2 の場合,im[2]= "miyake.jpg“ ファイル名 photo/miyake.jpg

(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>

2.スライドショー ⑥(関数の作成2)

11

p_no は3が最大なので,noが 3より大きくならないように制限 if(no>3) :もしnoが3より大きい場合には no = 3; :noを3にしなさい p_no は0が最小なので,noが 0より小さくならないように制限

(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>

2.スライドショー ⑦(関数の使用)

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 となる.

(13)

(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 に変更される.

2.スライドショー ⑦(関数の使用)

13

function setPhoto(no){ if( no > 3 ) no = 3; if( no < 0 ) no = 0; p_no = no; photo.src = "photo/"+im[p_no]; }

(14)

3.フォームのプッシュボタンの使用①

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等に情報を送信するわけで は無いので,この部分は不要

(15)

<HTML> <HEAD> <TITLE>プッシュボタン</TITLE> </HEAD> <BODY> <FORM > ストレス発散にどうぞ

<BUTTON type=“button” name=“punch” onclick=“処理”> パンチ </BUTTON> </FROM> </BODY> </HTML>

3.フォームのプッシュボタンの使用②

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>

(16)

II.課題

(17)

1.課題

17

自分のWebページの全世界への公開(続き)

①次の要件満たす自分のWebページのデータファイルの作成

②データファイルをWebサーバ(sstu.nit.ac.jp)にUP

提出方法:自分のホームページを見れるようにすること

先週と同じ

先週までに作成したページに

スライドショーのページを追加する

要件

(18)

2.要件の詳細

18

要件1:メニューにスライドショーのページを追加する.ただし,内容・名

称は任意であり評価に影響しない.(スライドショーという名前

には普通はしない)

要件2:スライドショーのページもCSSを用い,スタイルの統一を図る.

要件3:(低評価)

サンプルをベースにして,フォームのボタンを用いて画像を切

替えられるようにする.

(高評価)

画像の下にサムネイル(小さい画像)を表示して,それをクリッ

クすると大きな画像が表示されるようにする.

要件4:拡大・縮小のボタンを用意して,それをクリックすると画像を拡

大・縮小できるようにする.

(高評価)

(19)

3.ヒント

19

(1)サムネイル

①サムネイル画像は,<img width=幅 height=高さ>タグで

サイズ指定した画像を埋め込む.

②その画像にイベントを埋め込む.

③埋め込むイベントは,「その」画像と同じ画像を表示さ

せるためのもの

(2)画像の拡大・縮小

①「拡大」「縮小」ボタンを配置する.

②srcではなく“width=”と“height=” を書き換える関数を別

に用意する.

(20)

4.採点方法

20

①スライドショーページへのリンクがある

②スライドショー(画像の切替)ができる

③フォームのボタンで画像の切替ができる あるいは

サムネイルをクリックすることで画像の切替ができる

④画像の拡大・縮小ができる.

⑤数段階にわたり画像の拡大・縮小ができる.

⑥CSSを用い,全てのページのスタイルが統一している.

⑦先週までの課題が全てできている.

締め切り

基本的に演習時間中(次回までに)

Updating...

参照

Updating...

関連した話題 :