- プロンプト ボックスをポップアップ表示するには、alert() 関数を使用します。
- ダイアログ ボックスをポップアップするには、confirm() 関数を使用します。
- document.write() メソッドを使用して、コンテンツを HTML ドキュメントに書き込みます。
- innerHTML を使用してコンテンツを HTML タグに書き込みます。
- 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>
実行結果を次の図に示します。

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>
実行結果を次の図に示します。

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>
実行結果を次の図に示します。

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>
実行結果を次の図に示します。


前の関数とは異なり、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>
実行結果を次の図に示します。
