JavaScript の出力

JavaScriptには印刷や出力機能がありません。

データを表示するJavaScript

JavaScriptはさまざまな方法でデータを出力できます:

window.alert()を使用してアラートボックスをポップアップします。

document.write() メソッドを使用して、コンテンツを HTML ドキュメントに書き込みます。

innerHTML を使用して HTML 要素に書き込みます。

console.log() を使用してブラウザのコンソールに書き込みます。

window.alert()を使用します

アラートボックスをポップアップしてデータを表示できます:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网（php.cn)</title>
</head>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
    window.alert('你好吗');
</script>
</body>
</html>

プログラムを実行して試してください

HTML要素を操作

JavaScript からの HTML 要素、 document.getElementById(id) メソッドを使用できます。

HTML 要素を識別するには「id」属性を使用し、要素のコンテンツを取得または挿入するには innerHTML を使用してください:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网（php.cn）</title>
</head>
<body>
<h1>PHP中文网</h1>
<p id="demo">我的第一个段落。</p>
<script>
    document.getElementById("demo").innerHTML="段落已修改。";
</script>
</body>
</html>

プログラムを実行して試してください

上記の JavaScript ステートメント (<script> タグ内) は次のようになります。 Web ブラウザで実行:

document.getElementById("demo") は、id 属性を使用して HTML 要素を検索する JavaScript コードです。

innerHTML = "段落が変更されました。" は、要素の HTML コンテンツ (innerHTML) を変更するために使用される JavaScript コードです。

HTML ドキュメントに書き込みます

HTML ドキュメントに JavaScript を直接書くことができます:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网（php.cn）</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
    document.write(Date());
</script>
</body>
</html>

プログラムを実行して試してください

注: コンテンツをドキュメント出力に書き込む場合のみ document.write() を使用してください。。ドキュメントの読み込みが完了した後に document.write が実行されると、HTML ページ全体が上書きされます。以下のように

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>PHP中文网(php.cn)</title> 
</head>
<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> <head> <meta charset="utf-8"> <title>PHP中文网（php.cn)</title> </head> <body> <h1>我的第一个页面</h1> <p>我的第一个段落。</p> <script> window.alert('你好吗'); </script> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear