JavaScript入門 | 概要 | JavaScriptの出力

Tags:

JavaScriptの出力

JavaScriptは、さまざまな方法で結果をHTMLページに出力できる。JavaScriptで使用できる出力方法は次のとおりである。

  1. window.alert()メソッド
  2. HTML DOM要素を利用したinnerHTMLプロパティ
  3. document.write()メソッド
  4. console.log()メソッド

window.alert()メソッド

JavaScriptで最も簡単にデータを出力する方法は、window.alert()メソッドを利用することである。window.alert()メソッドは、ブラウザーとは別のダイアログボックスを表示し、ユーザーにデータを伝える。

<script>
    function alertDialogBox() {
        alert("OKを押すまで、ほかの作業はできません。");
    }
</script>

windowオブジェクトのすべてのメソッドやプロパティを使用するときは、windowという接頭辞を省略できる。

HTML DOM要素を利用したinnerHTMLプロパティ

実際のJavaScriptコードで出力のために最もよく使用される方法は、HTML DOM要素を利用したinnerHTMLプロパティを使う方法である。

まずdocumentオブジェクトのgetElementByID()やgetElementsByTagName()などのメソッドを使用してHTML要素を選択する。その後、innerHTMLプロパティを利用すると、選択されたHTML要素の内容(content)や属性(attribute)値などを簡単に変更できる。

<script>
    var str = document.getElementById("text");
    str.innerHTML = "この文に変わりました。";
</script>

document.write()メソッド

document.write()メソッドは、Webページの読み込み時に実行されると、Webページに最初にデータを出力する。したがって、document.write()メソッドは主にテストやデバッグのために使用される。

<script>
    document.write(4 * 5);
</script>

しかし、Webページのすべての内容が読み込まれた後にdocument.write()メソッドが実行されると、Webページ内に先に読み込まれたすべてのデータを消し、自分のデータを出力する。したがって、document.write()メソッドをテスト以外の用途で使用するときは、十分注意して使用しなければならない。

<button onclick="document.write(4 * 5)">ボタンを押してみてください。</button>

console.log()メソッド

console.log()メソッドは、Webブラウザーのコンソールを通じてデータを出力する。

ほとんどの主要Webブラウザーでは、F12を押した後、メニューでコンソールをクリックするとコンソール画面を使用できる。このようなコンソール画面を通じたデータの出力は、より詳しい情報まで出力されるため、デバッグに大いに役立つ。

<p>F12を押してコンソール画面を開くと、結果を確認できる。</p>
<script>
    console.log(4 * 5);
</script>