初心者による初心者のためのJavaScript講座Ⅲ|ゼロからのWeb制作 Vol.18

2014.10.23

ペンギン,ジャバジャバ

ペンギン,ジャバジャバ

こんにちは、鈴木です。

今回は前回紹介したプログラムの解説をやりたいと思います。

プログラム解説

こちらが前回紹介したプログラムです。

<html>
<head>
<title>画像を前後表示</title>
<script type ="text/javascript">
<!--
var now = 0;
var im = new Array("001.jpg","002.jpg","003.jpg","004.jpg");
//番号ごとの画像のファイル名を保持する配列
function setImage(no){
if( no > 3 ) no = 3;
if( no <= 0 ) no = 0;
document.myImage.src = "photo/"+im[no];
now = no;
}
//-->
</script>
</head>
<body>
<form>
<input type="button" value="前" onClick="setImage(now - 1);">
<input type="button" value="後" onClick="setImage(now + 1);">
</form>
<img name="myImage" src="photo/001.jpg" width=320 height=240>
<hr>
<img src="photo/001.jpg" width=80 height=60 onClick="setImage(0);">
<img src="photo/002.jpg" width=80 height=60 onClick="setImage(1);">
<img src="photo/003.jpg" width=80 height=60 onClick="setImage(2);">
<img src="photo/004.jpg" width=80 height=60 onClick="setImage(3);">
</body>
</html>

<body>のタグの中は、まず<input>で「前」「後」のボタンを作ります。次に、<img>を使い、画像を貼り付けます。

特にCSSで装飾しているわけではないので、見た目は良くありませんが、JavaScripの機能を紹介するだけなので、とりあえずこれで大丈夫です。

さて、ここから、JavaScripのコードについて説明していきます。


var now = 0;-①
var im = new Array("001.jpg","002.jpg","003.jpg","004.jpg");-②

varは変数です。変数とは簡単に言うとデータを一時的に保管する「場所」です。

①は現在表示している画像の番号を保持するための変数です。

②は、番号ごとの画像の配列を保持するための変数です。

*Arrayはオブジェクトの一つであり、配列に対する要素の追加や削除などの機能があります。オブジェクトの詳しい説明はまた別の機会にしたいと思います。


function setImage(no){
if( no > 3 ) no = 3;
if( no <= 0 ) no = 0;
}

ここでは、setImageという画像の切り替えを行うプログラムをfunction(関数)で定義します。

カッコの中にあるnoは引数と呼ばれるものです。引数は関数の挙動を決めるためのパラメータです。

次にある条件が成立するかどうかで実行するプログラムを切り替えるif文を使います。

もし、noが3より大きかったら3を表示する。

もし、noが0以下だったら0を表示する。

この0や3の数字は先程指定した、画像配列Arrayの番号です。画像は4つありますが、配列Arrayでは0から数え始めます。

つまり、0は一枚目のの画像、3は四枚目の画像を表します。


<img name="myImage" src="photo/001.jpg" width=320 height=240>
<hr>
<img src="photo/001.jpg" width=80 height=60 onClick="setImage(0);">
<img src="photo/002.jpg" width=80 height=60 onClick="setImage(1);">
<img src="photo/003.jpg" width=80 height=60 onClick="setImage(2);">
<img src="photo/004.jpg" width=80 height=60 onClick="setImage(3);">

プログラムを動かすために、表示する画像の定義をします。

まず、下4つの画像はサムネイル画像になります。

このサムネイル画像を押しても先程定義したJavaScriptが起動するようにonClick=”setImage();”と定義します。

onClickはクリックしたらJavaScriptが起動します。

上の画像は下の画像よりサイズ大きくを変え、この画像上で切り替えが行われるために、nameをmyImageと定義します。


function setImage(no){
document.myImage.src = "photo/"+im[no];
now = no;
}

ここでのdocumentはスクリプトから画像の出力をします。

myImage.src にphotoファイルにあるim(画像配列)を出力することを意味します。そして、表示する画像はnoで指定した画像です。

これで、setImage()という関数が定義できました。


<form>
<input type="button" value="前" onClick="setImage(now - 1);">
<input type="button" value="後" onClick="setImage(now + 1);">
</form>

「前」「後」ボタンに「setImage(now – 1);」「setImage(now + 1);」を指定することで、前をクリックすれば現在表示している画像の前(-1)に、後をクリックすれば現在表示している画像の後(+1)に切り替わります。

これをブラウザに表示するとこちらのようになります。
資料

*画像はフリー画像です。

これで、「前」「後」をクリックすれば画像が切り替わるはずです。

次回は今回説明が足りなかった部分を補足したいと思います。