JavaScript講座｜第1回「ボタンを押すとランダムに画像が表示させる」

皆さん、こんにちは。 
しょうとく(@syoucha0107)と申します。

第1回目では「ボタンを押すとランダムに画像が表示させる」をテーマにその作り方をご紹介します。

まずは動画をご覧下さい。

動画で使用したソースコードはこちらになります。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="target"></div>
    <input type="button" value="動物のイラストを変える" id="bt"/>
    <script language="javascript" type="text/javascript">
    var target = document.getElementById( 'target' );
    var bt = document.getElementById( 'bt' );
    bt.addEventListener( 'click', function( e ) {
        var imglist = [
    "images/cow.png",
    "images/chick.png",
    "images/duck.png",
    "images/monkey.png",
    "images/pig.png",
    "images/penguin.png"
    ];
    var selectnum = Math.floor(Math.random() * imglist.length);
    var element = '<img src="' + imglist[ selectnum ] + '" alt="" />';
    target.innerHTML = element;
     }, false );
    </script>
</body>
</html>

一連のソースコードを見ただけで分かる方は、使える箇所だけコピーしていただくとして、どういう流れで書かれたものなのか解説が欲しいという方は以下の文章をお読みいただければと思います。

ボタンと画像の位置を決める

<!-- ボタンを表示 id="bt"でタグ付け-->
<!-- 後にボタンが押されたらという命令を与えるのにタグが必要-->
<input type="button" value="動物のイラストを変える" id="bt"/>choose a code language

<!-- ボタンの上にイラストを配置させる -->
<div id="target"></div>

JavaScriptタグを用意

<!-- javascriptはscriptタグ内に書く -->
<script language="javascript" type="text/javascript">
 
</script>

ボタンと画像のidタグを入れる変数を用意

<!-- 画像のタグ id=target 変数target に代入-->
var target = document.getElementById( 'target' );
<!-- ボタンのタグ id=bt 変数targetに代入-->
var bt = document.getElementById( 'bt' );

ボタンをクリックした後の動作を記述するメソッドを用意

<!-- ボタン(タグ id=bt)をクリックした後の動きを書く -->
bt.addEventListener( 'click', function( e ) {


 }, false );

用意した全ての画像を変数に代入

var imglist = [
    "images/cow.png",
    "images/chick.png",
    "images/duck.png",
    "images/monkey.png",
    "images/pig.png",
    "images/penguin.png"
    ];

ランダムな整数を発生させて画像を選ばせ、変数に代入

<!-- ランダムに選ばれたイラスト画像を変数selectnum に入れる -->
var selectnum = Math.floor(Math.random() * imglist.length);

imgタグにして、さらに変数に代入

<!-- ランダムに選ばれたイラスト画像を-->
<!-- imgタグにして、変数elementに代入-->
var element = '<img src="' + imglist[ selectnum ] + '" alt="" />';

div id=”target”がimgタグに置き換わるようにする

<!-- id="target"のdivタグに-->
<!-- imgタグの入った変数elementの値を入れる-->
target.innerHTML = element;

はい、いかかでしたでしょうか。
動画と合わせて学んで下さいね。
それではまたごきげんよう〜。

おひとりさまプログラミング

無料で学べるブログラミング学習サイト