JavaScript入門講座|画像表示と変更ついて学ぼう

JavaScript
うさタブ
うさタブ

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

ユウキ
ユウキ

画像表示?

うさタブ
うさタブ

そうッピ!

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

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

この記事で学べること
  • 画像の表示
  • 画像の変更
  • 時間で画像を変更する

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

画像の準備

うさタブ
うさタブ

まずは画像を保存して、

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

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

JS画像表示1
うさタブ
うさタブ

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

元になるコード

<!-- 見えない部分 -->
<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(“”);

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

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

うさタブ
うさタブ

次からはこの 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>
js_画像変更
うさタブ
うさタブ

こんな感じに画像と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~?

うさタブ
うさタブ

jQueryJavaScriptプログラムをもっと簡単に書ける、便利なプログラムセットッピ!

<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 の中身が1なら){
number変数numberを  = 0;0にしてください}
elseそれ以外は {number ++; numberに1を足して}

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

という意味ッピ~!

ユウキ
ユウキ

1000で1秒後なんだな~

うさタブ
うさタブ

その通りッピ!

1000ミリ秒だから、1000=1秒になるッピよ~!

学習のまとめ
  • document.write(“”);で画像を表示する
  • document.write(“”);はHTML5で非推奨なのでできれば他の書き方をする
  • .createElement と .body.appendChild で画像を追加する
  • .getElementById と .insertAdjacentHTML画像を表示する
  • document.getElementById(“場所”).src= “画像名”;で画像を変更する
  • jqueryで画像変更する
  • setTimeoutを使って時間で画像を切替える

うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJSゲームテクニックプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました