ホーム プログラミング言語 Web関連 javascript JS出力文まとめ(5種類)

JS出力文まとめ(5種類)


 
 
場合によっては、プログラムの実行結果をブラウザに出力する必要がある場合があります。JavaScript には、コンテンツをブラウザに出力するためのさまざまな出力ステートメントが用意されています。

 

  1. プロンプト ボックスをポップアップ表示するには、alert() 関数を使用します。
  2. ダイアログ ボックスをポップアップするには、confirm() 関数を使用します。
  3. document.write() メソッドを使用して、コンテンツを HTML ドキュメントに書き込みます。
  4. innerHTML を使用してコンテンツを HTML タグに書き込みます。
  5. console.log() を使用して、コンテンツをブラウザのコンソールに出力します。

次に、これら 5 つの異なる出力ステートメントを個別に紹介します。

1.alert()関数

JSalert() 関数を使用して、ブラウザにプロンプ​​ト ボックスをポップアップ表示します。プロンプト ボックスで、出力するコンテンツを定義できます。構文形式は次のとおりです。

alert(メッセージ);

このうちメッセージはプロンプトボックスに出力される内容であり、alert()ではテキスト内容のみ出力できることに注意してください。

alert() 関数は window オブジェクトの下にある関数であるため、より厳密なコードを作成するには、 window.alert() の形式でalert() 関数を呼び出すことができます。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var a = 11,
            b = 5;
        window.alert("a * b = " + a * b);
    </script>
</body>
</html> 

実行結果を次の図に示します。

図:alert() 関数のデモ
図:alert() 関数のデモ

2.confirm()関数

JS のconfirm() 関数は、alert() 関数に似ています。どちらも window オブジェクトの下にある関数です。ブラウザ ウィンドウにプロンプ​​ト ボックスをポップアップ表示することもできます。違いは、プロンプト ボックスがconfirm( ) 関数には、「OK」ボタンに加えて、「キャンセル」ボタンもあります。 「OK」ボタンをクリックすると、confirm() 関数はブール値 true を返し、「キャンセル」ボタンをクリックすると、confirm() 関数はブール値 false を返します。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var res = window.confirm("ここで表示される内容です");
        if(res == true){
            alert("「OK」をクリックしました。");
        }else{
            alert("「キャンセル」をクリックしました。");
        }
    </script>
</body>
</html> 

実行結果を次の図に示します。

図: confirm() 関数のデモ
図: confirm() 関数のデモ

3. console.log()

JS の console.log() を使用して、ブラウザのコンソールに情報を出力します。通常、プログラムのデバッグには console.log() を使用します。構文形式は次のとおりです。

console.log(メッセージ);

このうちメッセージは出力する内容であり、文字列またはオブジェクト型になります。 window.alert() と window.confirm() はそれぞれalert() とconfirm() と省略できますが、console.log() は省略できません。

console.log() の出力を確認するには、まずブラウザのコンソールを開く必要があります。 Chrome ブラウザを例に挙げると、コンソールを開くには、ブラウザ ウィンドウで F12 ショートカット キーを押すか、マウスの右ボタンをクリックして、ポップアップ メニューの [検査] オプションを選択するだけです。最後に、以下の画像に示すように、開いたコンソールで「コンソール」オプションを選択します。

図: コンソールを開く

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var myArr = ["Chrome","Firefox","Edge","Safari","Opera"];
        console.log(myArr);
    </script>
</body>
</html> 

実行結果を次の図に示します。

図: console.log() デモ
図: console.log() デモ

4. document.write()

JS document.write() を使用して、HTML または JavaScript コードを HTML ドキュメントに書き込みます。構文形式は次のとおりです。

document.write(exp1, exp2, exp3, …);

このうち、exp1、exp2、exp3 はドキュメントに書き込まれるコンテンツであり、document.write() は複数のパラメーターを受け取ることができます。つまり、複数のコンテンツを一度にドキュメントに書き込むことができ、コンテンツは分離されています。カンマで区切ります。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        document.write("<p>現在の時間は:</p>");
        document.write(Date());
    </script>
</body>
</html> 

実行結果を次の図に示します。

図: document.write() デモ
図: document.write() デモ

 

5. インナーHTML

前の関数とは異なり、innerHTML は関数ではなく属性であり、これを使用して、指定した HTML タグ内のコンテンツを設定または取得できます。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <div id="demo">JavaScript 出力</div>
    <script type="text/javascript">
        var demo = document.getElementById("demo");
        console.log(demo.innerHTML);
        demo.innerHTML = "<h2>innerHTML</h2>"
    </script>
</body>
</html> 

実行結果を次の図に示します。

図: innerHTML デモ
図: innerHTML デモ
 

「JS出力文まとめ(5種類)」についてわかりやすく解説!絶対に観るべきベスト2動画

「Chrome デベロッパー ツール」JavaScript デバッガーの使い方!【プログラミング入門】
4-1 if文(JavaScriptの条件分岐)