JavaScript入門講座|document.writeの代わついて学ぼう

JavaScript
アイキャッチ
うさタブ
うさタブ

今回はJavaScriptでのについて学ぶッピよ~!

ユウキ
ユウキ

画像表示?

うさタブ
うさタブ

そうッピ!

今まで勉強のためにdocument.write();を使っていたッピが、

誤作動が多いからdocument.write();はあまり使うことをオススメされてないッピ!

今回はdocument.write();の変わりの方法を教えるッピよ~

この記事で学べること
  • .createElement と .body.appendChild で要素を追加する
  • .getElementById と .insertAdjacentHTML要素を表示する
  • windws.onload を使う

document.write(“”);の代わついて学ぼう

サンプルコードの準備

うさタブ
うさタブ

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

元になるコード

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


</head>

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



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

document.write(“”);で文字を表示する

うさタブ
うさタブ

まずはそのままdocument.write(“”);で文字を表示するッピ!

<script>
 document.write("Hello world");
</script>

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

うさタブ
うさタブ

これは、

<scriptjavascriptをはじめます>
document.write書き出してください(“Hello word);
</scriptスクリプトを終わります >

という意味ッピ!

うさタブ
うさタブ

できたらブラウザで確認するッピよ~!

ユウキ
ユウキ

できたああああ!

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

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

<script>
 document.write("Hello world");
</script>

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

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

うさタブ
うさタブ

ただ、document.write(“”);

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

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

うさタブ
うさタブ

次からはこの

document.write(“”);代わりになるプログラム

の書き方を紹介するッピ!

.createElement と .body.appendChild で要素を追加する

うさタブ
うさタブ

ちょっと難しいッピが

<script>
let moji = document.createElement('p');
	moji.innerHTML = 'Hello world';
	document.body.appendChild(moji);
</script>

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

うさタブ
うさタブ

これは

let moji変数を作ります = document.createElement要素(タグ)を作ります(‘p’作るのは<p>要素です);
moji.innerHTML<p>のHTML部分を以下のように書き換えてください = “Hello world”;
document.body.appendChild<body></body>の中に(mojimoji(<p>)をくわえて下さい);

っていう意味ッピね~

サンプルコード
<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね!↓ -->
<script>

</script>
</head>

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

<script>
let moji = document.createElement('p');
	moji.innerHTML = 'Hello world';
	document.body.appendChild(moji);
</script>

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

.getElementById と .insertAdjacentHTML要素を表示する

うさタブ
うさタブ

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

<p id="moji">
<script>
      let moji = document.getElementById('moji');
	  moji.insertAdjacentHTML('afterend', 'Hello world');
</script>
</p>

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

うさタブ
うさタブ

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

let moji変数を作ります = document.プログラムを書き換えてgetElementById(‘moji‘);id=”moji”という場所で
moji.insertmojiを中心としてAdjacent書き換えてくださいHTML(‘afterendmojiの後ろに‘, ‘ Hello word‘);

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

意味はこんな感じッピ~!

うさタブ
うさタブ

ちなみに

.insertAdjacentHTML('afterend', 'Hello world');

‘afterend’

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

と変更できるッピ!

サンプルコード
<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね!↓ -->
<script>

</script>
</head>

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

<p id="moji">
<script>
      let moji = document.getElementById('moji');
	  moji.insertAdjacentHTML('afterend', 'Hello world');
</script>
</p>

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

window.onloadで画像を表示する

うさタブ
うさタブ

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

うさタブ
うさタブ

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

window.onload = function(){
	let moji = "";
	    moji += '<p>Hello world</p>';
	    document.getElementById("moji").innerHTML = moji;
}

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

<div id="moji"></div>

うさタブ
うさタブ

これは

window.このページをonload 読み込んだら = function()以下のプログラムを実行して{
let moji = “”;変数mojiの空箱を作ります
moji +=mojiに加えます<p>段落を作ってHello world</p>段落を終わります;
document.プログラムを動かしてgetElementById(“moji“).id=”moji”という場所でinnerHTML  HTMLを書き換えて= moji;変数mojiの内容に
}

という意味ッピね~!

ユウキ
ユウキ

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

サンプルコード
<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね!↓ -->
<script>
window.onload = function(){
	let moji = "";
	    moji += '<p>Hello world</p>';
	    document.getElementById("moji").innerHTML = moji;
}
</script>
</head>

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

<div id="moji"></div>

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

学習のまとめ
  • document.write(“”);はHTML5で非推奨なのでできれば他の書き方をする
  • .createElement と .body.appendChild で要素を追加する
  • .getElementById と .insertAdjacentHTML要素を表示する
  • windws.onload を使う

うさタブ
うさタブ

上手くできたッピか?

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

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、近所の教室とかでも良いッピけど

小学生~中学生の子は、

子供向けのオンライン・プログラミングスクールがオススメッピ!

うさタブ
うさタブ

有名なのはTech Kids Online Coachingッピね!

自主学習的な教材のProgateやpaizaよりもお値段が張るッピが、

ゲームのように楽しく学べる・魅力的なキャラクターがたくさん登場する・先生に直接聞けるのが最高ッピ~!

ユウキ
ユウキ

へ~

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
なにより、Tech Kids Online Coachingは、
アメーバブログやアベマTVをプロディースしているサイバーエージェント」のグループ会社で、実績があるッピ!
教室名 対象 学習言語 指導料 教室場所 無料体験・カウンセリング
Tech Kids Online Coaching 小学1年生〜中学3年生 Scratch
C#
Unity等
12,000/月(オンライン学習)
※その他PCレンタル・教材費
オンライン教室
関東/沖縄など
無料体験◯
【DMM WEBCAMP】 未経験からエンジニア転職を目指す方 HTML/CSS
JavaScript
Ruby
24,882~/月(※DMM WEBCAMP PRO 税込) オンライン教室
東京/大阪
無料カウンセリング◯

うさタブ
うさタブ

パパやママ

お兄ちゃん・お姉ちゃんがちっちゃい子に教えたり

就活や転職に役立てるなら、【DMM WEBCAMP】がオススメッピ!

うさタブ
うさタブ

DMMはゲームや英会話スクールでも有名ッピ!
アカウントを持っている人も多いだろうから、気軽にはじめられるッピよ~!

うさタブ
うさタブ

自分以外の誰かと一緒に勉強することで、すぐに聞ける環境をつくる他に

おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

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

ユウキ
ユウキ

おお! プロみたいなゲーム作れるのかな!?
だとしたらサイコーだなっ

アイカ
アイカ

チェックしてみるね♪

スポンサーリンク

独学に限界を感じたら

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、近所の教室とかでも良いッピけど

小学生~中学生の子は、子供向けのオンライン・プログラミングスクールがオススメッピ!

うさタブ
うさタブ

有名なのは、Tech Kids Online Coachingッピね~

自主学習的な教材のProgateやpaizaよりもお値段が張るッピが、

ゲームのように楽しく学べる・魅力的なキャラクターがたくさん登場する・先生に直接聞けるのが最高なんだッピ~!

ユウキ
ユウキ

へ~

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
なにより、Tech Kids Online Coachingは、
アメーバブログやアベマTVをプロディースしているサイバーエージェント」のグループ会社で、確かな実績があるッピ!
教室名 対象 学習言語 無料体験・カウンセリング
Tech Kids Online Coaching 小学1年生〜中学3年生 Scratch
Unity
C#など
無料体験◯
【DMM WEBCAMP】 未経験からエンジニア転職を目指す方 HTML/CSS
JavaScript
Ruby
無料カウンセリング◯

うさタブ
うさタブ

パパやママ

お兄ちゃん・お姉ちゃんがちっちゃい子に教えたり

就活や転職に役立てるなら、【DMM WEBCAMP】がオススメッピ!

うさタブ
うさタブ

DMMはゲームや英会話スクールでも有名ッピ!
アカウントを持っている人も多いだろうから、気軽にはじめられるッピよ~!

うさタブ
うさタブ

自分以外の誰かと一緒に勉強することで、すぐに聞ける環境をつくる他に

おサボりを防ぐことができるッピ!

さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

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

ユウキ
ユウキ

おお! プロみたいなゲーム作れるのかな!?
だとしたらサイコーだなっ

アイカ
アイカ

チェックしてみるね♪

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