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

2014.10.22

ペンギン,ジャバジャバ

ペンギン,ジャバジャバ
こんにちは、鈴木です。

前回に引き続き、今回もJavaScriptについて書いていこうと思います。

画像の前後表示をできるようにする

今回はJavaScriptを用いて、画像の前後表示をできるように設定します。

ホームページにサンプルの画像を何枚か貼り、「前」「後」のフォームボタンを作り、それをクリックすることで画像が前後表示できるようします。

まず、プログラムを書いていくにあたり、JavaScriptのいくつかルールを説明したいと思います。

目次

  1. 構文のルール
  2. 今回のプログラムコード

1.構文のルール

文の最後にセミコロンをつける

例えば、

document.myImage.src = "photo/"+im[no];

の構文があります。

ここでも、文の最後にはセミコロンがついています。

セミコロンを省略して書いてもプログラムは実行されますが、文の構造としては正しくないので、省略しないでセミコロンをつけたほうがいいでしょう。

文の途中で空白や改行をすることが可能

JavaScriptでは文字の間に空白や改行を入れることができます。

これは、プログラムが複雑になるにつれ、書いていくコードも長くなります。構文を分かりやすくするために空白や改行は、無視されます。

大文字、小文字が厳密に区別される

JavaScriptは空白や改行など柔軟に対応してくれますが、大文字、小文字には注意しなければなりません。例えば、「setImage」「setimage」のように、スペルが同じでも違う命令と判断されてしまいます。

補足:コメントを入れる

先程も述べたようにプログラムが複雑になるにつれ、書いていくコードも長くなります。後で見た時に、ここが何を表しているのかすぐに分かるようにコメントを入れておきましょう。

//comment 単一行コメント
/*comment*/ 複数行コメント

他にもいろいろルールはありますが、それはまた後に書いていきます。

2.今回のプログラムコード

今回のプログラムコードがこちらになります。

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

自分の作った上記のhtmlファイルと同じディレクトリに「photo」という名前の画像を保存するためのファイルを作り、画像を入れ、画像名を統一させます。

そうすれば、画像の前後表示のJavaScriptは正常に動くはずです。

このコードの説明は次回にやりたいと思います。