プレゼンテーションシナリオ: スライド22、23

スライド22と23を続けます。

innerHTML / innerText - HTMLコンテンツの更新

基本構文:

document.getElementById("id").innerHTML = newContent;

以下の例があります:

<p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML = "New Content!";
</script>

ここでは:

  • document → Webページ全体を表すオブジェクト。
  • .getElementById("demo") → idが"demo"のHTML要素を検索します。
  • .innerHTML → その要素内のコンテンツにアクセスまたは変更するためのプロパティ。
  • = → 新しい値を代入します。
  • newContent → 表示される新しいコンテンツ(文字列、数値、HTMLタグ、変数など)。

結果: idが"demo"の<p>タグには:New Content! が表示されます。

window.alert() / alert() - ポップアップ通知の表示

基本構文:

alert(message);

ここでは:

  • alert → JavaScriptに組み込まれている関数(function)。
  • message → ダイアログボックスに表示されるコンテンツ(文字列、数値、変数、計算式など)。

例:alert("Hello World!"); は Hello World! というポップアップを表示します。

document.write() - Webページに直接コンテンツを書き込む

基本構文:

document.write(text);

ここでは:

  • text → 書き込むコンテンツ(文字列、変数、計算式など)。

例:document.write("Hello JavaScript!"); は Hello JavaScript! という文字列を画面に書き込みます。

重要な注意事項:

  • document.write()簡単なテストにのみ使用すべきです。
  • ページの読み込みが完了した後に呼び出すと → 古いコンテンツがすべて削除され、新しいコンテンツのみが書き込まれます。

以上で、JavaScriptのデータ出力メソッドについての説明を終わります。