JavaScript 出力
JavaScript は通常、HTML 要素を操作するために使用されます。
データを表示するJavaScript
JavaScriptはさまざまな方法でデータを出力できます:
window.alert()を使用してアラートボックスをポップアップします。 document.write() メソッドを使用して、コンテンツを HTML ドキュメントに書き込みます。 innerHTML を使用して HTML 要素に書き込みます。 console.log() を使用してブラウザのコンソールに書き込みます。
HTML 要素を操作する
JavaScript から HTML 要素にアクセスするには、document.getElementById(id) メソッドを使用できます。
HTML 要素を識別するには「id」属性を使用してください:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>document.getElementById("demo").innerHTML="My First JavaScript";</script>
</body>
</html>
上記の JavaScript ステートメント (<script> タグ内) は Web ブラウザーで実行できます:
document.getElementById( "demo ") は、id 属性を使用して HTML 要素を検索する JavaScript コードです。
innerHTML = "段落が変更されました。" は、要素の HTML コンテンツ (innerHTML) を変更するために使用される JavaScript コードです。
window.alert()を使用すると
、アラートボックスをポップアップ表示してデータを表示できます:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert('Hello Word!');
</script>
</body>
</html>このチュートリアルでは
ほとんどの場合、このチュートリアルでは、次のメソッドを使用します。上で説明したように出力します:
次の例では、id="demo" を持つ <p> 要素を HTML ドキュメント出力に直接書き込みます:
HTML ドキュメントに書き込みます
テスト目的で、HTML ドキュメントに JavaScript を直接記述することができます:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>
ドキュメントにコンテンツを書き込む場合のみ document.write() を使用してください。
ドキュメントの読み込みが完了した後に document.write を実行すると、HTML ページ全体が上書きされます。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
</body>
</html>
コンソールに書き込む
ブラウザがデバッグをサポートしている場合は、console.log() メソッドを使用してブラウザに JavaScript 値を表示できます。
ブラウザでF12を使用してデバッグモードを有効にし、デバッグウィンドウの「コンソール」メニューをクリックします。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
プログラムのデバッグは、バグ (エラー) をテストし、発見し、減らすプロセスです。
次のセクション