JavaScriptの出力

ある場合、JavaScriptコードから出力を生成する必要があるかもしれません。例えば、変数の値を確認したり、ブラウザのコントロールタブにメッセージを書き込んで、実行中のJavaScriptコード内の問題をデバッグするのに役立ちますなど。

このチュートリアルでは、JavaScriptで出力を生成する方法を学びます。

JavaScriptの生成出力メソッド

JavaScriptはデータを表示するさまざまな方法があります：

• HTML要素に書き込むために innerHTML

• ドキュメントの流れに書き込むために document.write()

• 警告ボックスを弹出するために window.alert()

• ブラウザのコントロールタブに書き込むために console.log()

innerHTMLを使用して

要素のinnerHTML属性を使用してHTML要素内に書き込んだり挿入したりします。

まず出力を書き込む前に、以下のようなを使用する必要があります。getElementById()などのメソッドを使用して要素を選択します。

<p　id="msg"></p>
<p　id="output"></p>
<script>
document.getElementById("msg").innerHTML　=　"Hello　World";
document.getElementById("output").innerHTML　=　20　+　30;
</script>

innerHTMLを使用して要素のHTML内容を変更することは、HTMLでデータを表示する一般的な方法です。

document.write()を使用して

あなたは以下を使用できますdocument.write()内容を現在のドキュメントに解析する方法です。

<script>
document.write("Hello world<br>");
document.write(20　+　30);
</script>

もしdocument.write()ページが読み込まれた後にこのメソッドを使用し、ドキュメント内のすべての既存内容をオーバーライドします。

<script>
function　myFunc()　{
　　　document.write("<p>test　document.write().</p>");
}
</script>

window.alert()を使用して

ユーザーにメッセージやデータを出力するために警告ダイアログを使用できます。

次のように使用できますalert()メソッドは警告ダイアログを生成します。

<button　onclick="alert('Hello　world');">alert</button>

console.log()を使用して

次のように使用できますconsole.log()メッセージを出力したりデータをブラウザのコンソールに書き込むための方法が簡単です。

このコンソールはテストやデバッグのために使用できます。

<script>
console.log("Hello　world");
console.log(20　+　30);
</script>

Webブラウザのコンソールにアクセスするには、まず押してからF12開発者ツールを開くためにキーボードのキーを押し、コンソールタブをクリックします。

このチュートリアルの後半でデバッグに関する詳細な情報を学びます。