JavaScript入門講座｜画像表示と変更について学ぼう | 学んで遊んでジャンケンポン！

うさタブ

今回はJavaScriptでの画像表示と変更について学ぶッピよ～！

ユウキ

画像表示？

うさタブ

そうッピ！

javaScriptのプログラム内で画像を表示したり変更したりできるッピ！

これからのプログラムに役に立つッピよ～

この記事で学べること

画像の表示
画像の変更
時間で画像を変更する

画像表示と変更ついて学ぼう
1. 画像の準備
  1. 元になるコード
画像を表示する
画像を『変更』する

画像表示と変更ついて学ぼう

画像の準備

うさタブ

まずは画像を保存して、

学習のためのHTMLファイルと一緒にするッピよ～

参考画像（この画像を右クリックで保存してください）

うさタブ

次は学習のためのサンプルコードをコピーするッピ！

元になるコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->


</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->



<!-- ここまで！ -->
</body>
</html>

画像を表示する

document.write(“”);で画像を表示する

うさタブ

まずはdocument.write(“”);で画像を表示するッピ！

<script>
 document.write("<img src='usatab.png' />");
</script>

と<head></head>の中に入力するッピ！

うさタブ

これは、

<scriptjavascriptをはじめます>
document.write書き出してください(“<img画像を src=’usatabu.png’usatab.pngファイルです />“);
</scriptスクリプトを終わります >

という意味ッピ！

うさタブ

できたらブラウザで確認するッピよ～！

ユウキ

できたああああ！

ここまでのコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>
 document.write("<img src='usatabu.png' />");
</script>
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->



<!-- ここまで！ -->
</body>
</html>

document.write(“”);はHTML5では非推奨

うさタブ

ただ、document.write(“”);

というプログラムの書き方はもう使えないッピ～！

HTML５という新しいバージョンになってから、誤作動が多いこのやり方はあまりオススメできなくなったッピ・・・

うさタブ

次からはこの document.write(“”);の代わりになるプログラムの書き方を紹介するッピ！

.createElement と .body.appendChild で画像を追加する

うさタブ

ちょっと難しいッピが

<script>
let A = document.createElement('p');
	A.innerHTML = '<img src="usatab.png" />';
	document.body.appendChild(A);
</script>

このやり方でもできるッピ！

うさタブ

これは

let A変数を作ります = document.createElement要素（タグ）を作ります(‘p’作るのは<p>要素です);
A.innerHTMLAのHTML部分を以下のように書き換えてください = ‘ <img src=”usatab.png” / >画像を表示して　ファイルusatab.pngを‘;
document.body.appendChild<body></body>の中に(A);

っていう意味ッピね～

サンプルコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>

</script>
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->

<script>
let A = document.createElement('p');
	A.innerHTML = '<img src="usatab.png" />';
	document.body.appendChild(A);
</script>

<!-- ここまで！ -->
</body>
</html>

.getElementById と .insertAdjacentHTML画像を表示する

うさタブ

次はHTMLタグとJavascriptを組み合わせたやり方ッピ！

<p id="A">
<script>
      let A = document.getElementById('A');
	  A.insertAdjacentHTML('afterend', '<img src="usatab.png" />');
</script>
</p>

これで画像を挿入することもできるッピよ～

うさタブ

<p id=”A”>p の住所はAです
<scriptjavascriptを開始します>

let A変数を作ります = document.プログラムを書き換えてgetElementById(‘A’);id=”A”という場所で
A.insertAを中心としてAdjacent書き換えてくださいHTML(‘afterendAの後ろに‘, ‘ <img src=”usatab.png” />usatab.pngを表示してください‘);

</sctipt>javascriptを終了します
</p>pを終わります

意味はこんな感じッピ～！

うさタブ

ちなみに

.insertAdjacentHTML('afterend', '<img src="usatab.png" />');

の‘afterend’は

beforebegin //指定した要素の《直前》に挿入
afterbegin //指定した要素の『内部』の【最初】の子要素の前に挿入
beforeend //指定した要素『内部』の【最後】の子要素の後に挿入
afterend //指定した要素の《直後》に挿入

に変更できるッピ！

サンプルコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>

</script>
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->

<p id="A">
<script>
      let A = document.getElementById('A');
	  A.insertAdjacentHTML('afterend', '<img src="usatab.png" />');
</script>
</p>

<!-- ここまで！ -->
</body>
</html>

window.onloadで画像を表示する

うさタブ

次は window.onload で画像を表示するやり方ッピ！

うさタブ

<head></head> の <script></script> にこのコードを入力するッピ！

window.onload = function(){
	let A = "";
	    A += '<p><img src="usatab.png" /></p>';
	    document.getElementById("B").innerHTML = A;
}

<body></body>にはこのタグを入力するッピよ～！

<div id="B"></div>

うさタブ

これは

window.このページをonload　読み込んだら = function()以下のプログラムを実行して{
let A = “”;変数Aの空箱を作ります
A +=Aに加えます ‘<p>段落を作って<img src画像を表示して=”usatab.pngusatab.pngファイルを” /></p>’段落を終わります;
document.プログラムを動かしてgetElementById(“B”).id=”B”という場所でinnerHTML 　HTMLを書き換えて= A;変数Aの内容に
}

という意味ッピね～！

ユウキ

いろんな方法があるんだな～

サンプルコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>

window.onload = function(){
	let A = "";
	    A += '<p><img src="usatab.png" /></p>';
	    document.getElementById("B").innerHTML = A;
}

</script>
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->

<div id="B"></div>

<!-- ここまで！ -->
</body>
</html>

画像を『変更』する

うさタブ

次は画像の変更について学ぶッピよ～

まずは↓の画像を保存するッピ！

参考画像

この画像を右クリックで保存してください

サンプルコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>
 document.write("<img src='usatabu.png' />");
</script>
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->



<!-- ここまで！ -->
</body>
</html>

うさタブ

こんな感じに画像とHTMLファイルを一緒にするッピよ～

変更ボタンを設置する

うさタブ

今度は画像変更を学ぶッピ！

ただ画像を表示するだけでなく、使いみちにあわせて画像を変えることができるッピ！

うさタブ

画像を変更するために、

プログラムを呼び出すボタンを作るッピよ～

ユウキ

ボタン？

うさタブ

WEBサイトで見かけるこういうモノッピよ～

↑　押してみてね

ユウキ

これか～前にも見たよ！

うさタブ

このボタンを使って、画像を新しく差し替えるプログラムを作るッピ～

ボタンを押して画像を変更する

うさタブ

<head></head> の <script></script>に

function Click() {
   document.getElementById("img").src= "ramp.png";
   }
</script>

と入力するッピ！

うさタブ

<body></body>の間に

<p><img id="img" src="usatab.png" /></p>
<button onclick="Click();">　画像を変更する　</button>

と入力するッピよ～！

ここまでのコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>
function Click() {
   document.getElementById("img").src= "ramp.png";
   }
</script>
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->

<p><img id="img" src="usatab.png" /></p>
<button onclick="Click();">　画像を変更する　</button>

<!-- ここまで！ -->
</body>
</html>

ユウキ

お！　ボタンを押すと画像が変わったぞ！

うさタブ

これは

functionプログラムセット Click() {
document.プログラムを動かしてgetElementById(“img”)id=”img”という場所で.src=画像をかえて “ramp.pngramp.pngに“;
}

という意味ッピね～！

うさタブ

そして次は、<body></body>のタグッピ！

<p>段落を作って<img画像を表示 id=”img”　場所はimgです src=”　表示する画像はusatab.png” /></p>段落を終わります
<buttonボタンを作って onclick=　クリックしたら“Click();”Clickというプログラムを動かして>　画像を変更する　</button>ボタンを終わります

という意味になるッピ！

jQueryで画像を変更する

うさタブ

次はjQueryで画像を変更するやり方ッピ！

ユウキ

jQuery～？

うさタブ

jQueryはJavaScriptプログラムをもっと簡単に書ける、便利なプログラムセットッピ！

<script src="http://code.jquery.com/jquery.min.js"></script>

を<head></head>の中に入れるだけで色々なことができるッピよ～

サンプルコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->


</script>
<!-- ここまで！ -->
</body>
</html>

うさタブ

次はこのコードを元に画像変更のやり方を学ぶッピ！

うさタブ

今回は<body></body>に

<div class="img">
    <img src="usatab.png">
</div>
<button>画像を変更する</button>

<script>
$('button').on('click', function(){
    $('.img').children('img').attr('src', 'ramp.png');
});
</script>

と入力するッピよ～

うさタブ

これは

<divグループを作ります classクラスは=“img”imgです>
<img src表示する画像は=”usatab.png”>
</div>グループを終わります
<button>ボタンを作ります画像を変更する</button> ボタンを終わります
<script>プログラムを実行してください
$(‘button’).ボタンをon(‘click’　押されたら　, function()実行してください{
$(‘.img’).クラスimgのchildren(‘img’)　画像表示タグ<img>.attrその中の(‘src’,画像を ‘ramp.png’ramp.pngに書き換えて); });
</script> プログラムを終了してください

という意味っピね！

ユウキ

ほんとに沢山やり方があるんだな～

サンプルコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓ここにjQueryを入力します↓ -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>

</script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->
<div class="img">
    <img src="usatab.png">
</div>
<button>画像を変更する</button>

<script>
$('button').on('click', function(){
    $('.img').children('img').attr('src', 'ramp.png');
});
</script>
<!-- ここまで！ -->
</body>
</html>

時間で画像を変更する方法

うさタブ

最後は時間で画像を変更する方法ッピ！

うさタブ

<body></body>の中に

<img id="gazou" src="usatab.png">
<script>
            let img_src = ["ramp.png","usatab.png"];
            let number = 0;

            timer();

            function timer(){
                if (number == 1){
                    number = 0;
                } 
                else {
                    number ++;
                }

                document.getElementById("gazou").src = img_src[number];
                setTimeout("timer()",1000); 
            }
</script>

と入力するッピ！

全体のコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->
 <img id="gazou" src="usatab.png">
            <script>
            let img_src = ["ramp.png","usatab.png"];
            let number = 0;

            timer();

            function timer(){
                if (number == 1){
                    number = 0;
                } 
                else {
                    number ++;
                }

                document.getElementById("gazou").src = img_src[number];
                setTimeout("timer()",1000); 
            }
            </script>

<!-- ここまで！ -->
</body>
</html>

ユウキ

すげえ！　画像が自動でかわった！

うさタブ

これがプログラミングの力ッピ！

うさタブ

これは

let img_srcリストimg_srcを作ります = [　中身は“ramp.png”,”usatab.png”];
let numbe変数numberを作りますr = 0;

timer()timer()を実行してください;
functionプログラムセット timer(){　timerを作ります
ifもしも (numbernumberという変数 == 1　の中身が１なら){
number変数numberを　 = 0;0にしてください}
elseそれ以外は {number ++;　numberに１を足して}

document.プログラムを動かしてgetElement指定するById(“gazou”).場所はid=”gazou”src　画像ファイルです = img_srcimg_srcリストの中の[number　number番目の画像を];
setTimeout指定した時間の後に(“timer()”　timer()を動かして,1000　1秒後に);