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 を使う

うさタブ
うさタブ

上手くできたッピか?

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

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

タイトルとURLをコピーしました