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を使って時間で画像を切替える

うさタブ
うさタブ

上手くできたッピか?

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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