Web 制作のノウハウ JavaScript

【Javascript】文字列を表示する

今回は、Javascriptで、文字列を表示してみます。

まず、Javascriptを動かすための環境整備ですが、特に特別なソフトウェアやライブラリーなどは必要ありません。
マークアップ言語(HTML)ファイルと同様に、テキストエディタとブラウザがあれば、Javascriptを使用することができます。

こちらのサイトで、Javascriptの基本的な説明に関して記載しております。併せて読んで頂けると幸いです。

alert

「alert」で、メッセージ文字列をダイアログとして表示できます。以下のようなHTMLファイルで実現できるかと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テスト</title>
</head>
<body>
    <script> ← Javascriptの記述箇所
        alert("test");
    </script>
 ← ここまで
</body>
</html>

このような感じで、表示されます。 ↓

innerHTML

以下例では、innerHTML を使用して、id="str1"で指定した箇所にメッセージが表示できます。

<body>
  <div id="str1"></div>
  <script>
    document.getElementById("str1").innerHTML = "test";
  </script>

</body>
※<head>部分は省略しています

↓ こちらの記述も同じような処理ができます。

document.write('test");

ブラウザ上に「test」と表示されるかと思います。

console.log

デバッグ用でJavascriptコンソールにメッセージを表示する場合に使用します。

Windowsの場合は、F12キーを押して、[Console]または[コンソール]タブを開きます。(Chrome)

<script>
    console.log("test");
  </script>

※<body>内に記載、<head>部分は省略しています

このような感じで、表示されます。 ↓

今回は、Javascriptで、文字列を表示する方法について解説しました。

-Web 制作のノウハウ, JavaScript