サンプルコードでは、JavaScript でデータを出力するさまざまな方法を詳しく説明します。

著者：Eve Cole 更新時間：2022-08-05 09:45:26

この記事では、JavaScript に関する関連知識を紹介します。JavaScript では、Java などの言語とは異なり、データを出力するために 4 つのメソッドが使用されます。詳細に説明しますので、皆様のお役に立てれば幸いです。

はじめ

に JavaScript では、Java などの言語とは異なり、印刷や出力メソッドを持たず、データを出力するために通常次の 4 つのメソッドが使用されます。

window.alert()を使用して、警告ボックスを表示します。
ドキュメントdocument.write()
HTML 要素に書き込みinnerHTML
console.log()使用して、ブラウザーのコンソールに書き込みます。

以下にそれらを使用してみましょう。

window.alert() は

新しい HTML ファイルを作成し、VSCode を使用して次のコードを記述します。

<!DOCTYPE html>
<html>
    <頭>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width、initial-scale=1">
        <title>window.alert()</title>
    </head>
    <本文>
        <p>ポップアップウィンドウの表示</p>
        <script type="text/javascript">
            window.alert("これはポップアップ テストです!");
        </script>

    </body>
</html>

次に、上記ファイルをブラウザで開きます。開くと以下のポップアップウィンドウが表示されます。「OK」をクリックするとポップアップウィンドウが閉じ、Webページに内容が表示されます。

document.write()

<!DOCTYPE html>
<html>
    <頭>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width、initial-scale=1">
        <title>document.write()</title>
    </head>
    <本文>
        <p>HTML ドキュメントを作成する</p>
        <script type="text/javascript">
            document.write(Date());
        </script>

    </body>
</html>

新しい HTML ファイルを作成し、上記の内容を書き込むと、ブラウザが開き、次の内容がページに表示されます。 document.write()使用して現在時刻を書き込むことが成功したことがわかります。ただし、他のコンテンツと同時に、コンテンツのロード前にdocument.write()ロードすると、他のコンテンツと合わせて表示できることに注意してください。ただし、ページコンテンツがロードされた後にdocument.write()が実行されると、以前にロードされたすべてのコンテンツは書き込まれたコンテンツによって上書きされます。

同時表示

<!DOCTYPE html>
<html>
    <頭>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width、initial-scale=1">
        <title>document.write()</title>
    </head>
    <本文>
        <p>HTML ドキュメントを作成する</p>
        <button onclick="showDate()">上映時間</button>
        <script type="text/javascript">
            関数 showDate() {
                document.write(Date());
            }
        </script>
    </body>
以下

は、ページのロード後にdocument.write()を実行する前後の比較です。これは、ページのロード後にdocument.write()を呼び出すと、前のページのコンテンツが上書きされることを示しています。

前後

画像-20220228153609330

innerHTML

JavaScript 特定の HTML 要素にアクセスする場合は、 document.getElementById(id)メソッドを使用し、 innerHTML使用して要素のコンテンツを取得または挿入できます。

<!DOCTYPE html>
<html>
    <頭>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width、initial-scale=1">
        <title>innerHTML</title>
    </head>
    <本文>
        <p id="inner">HTML 要素を操作する</p>
        <button onclick="changeContext()">クリックして上記の内容を変更します</button>

        <script type="text/javascript">
            関数changeContext() {
                document.getElementById("inner").innerHTML = "変更されたコンテンツ";
            }
        </script>

    </body>
</html>

変更前変更後

console.log()

console.log()メソッドを使用するには、通常、ブラウザがデバッグをサポートしている必要があります。次に、 F12ショートカットキーを使用してデバッグモードを開き、デバッグウィンドウのConsoleメニューに切り替えます。ここではEdge使用しているため、コンソールが表示されます。このブラウザの選択は主にユーザーの好みに基づいて行われますが、一般的には Chrome が推奨されます。

<!DOCTYPE html>
<html>
    <頭>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width、initial-scale=1">
        <title>コンソール.ログ</title>
    </head>
    <本文>
        <p>ブラウザのデバッグ モードで表示する</p>
        <script type="text/javascript">
            var num1 = 11;
            var num2 = 10;
            console.log(num1 + num2);
        </script>
    </body>
</html>

要約すると

、上記は JavaScript での出力に関するものです。Java のような印刷および出力のためのSystem.out.println()メソッドはありませんが、上記の 4 つのメソッドは基本的に日常の開発のニーズを満たすことができます。

サンプル コードでは、JavaScript でデータを出力するさまざまな方法を詳しく説明します。