JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの変数の値をアラートボックスに表示する方法

JavaScriptで変数の値をアラートボックスに表示したい場合は、alert()メソッドを使用します。alert()メソッドは、引数として渡された文字列や変数の内容をダイアログボックスに表示し、ユーザーが「OK」ボタンをクリックするまでスクリプトの処理を一時停止させるシンプルな仕組みです。

基本的な使い方

alert()メソッドには、文字列をそのまま渡すことも、変数を渡すこともできます。複数の変数を組み合わせて表示したい場合は、+ 演算子を使って文字列を連結します。

サンプルコード

以下のコードでは、ボタンをクリックすると、2つの変数の値を連結した文字列がアラートボックスに表示されます。

<html>
   <head>
      <script>
         function display() {
            var a = "Simple";
            var b = "Learning";
            alert(a +" Easy "+ b);
         }
      </script>
   </head>
   <body>
      <input type="button" value="Click me!" onClick="display();">
   </body>
</html>

コードの解説

このコードの動作は以下のとおりです。

  • display()関数の中で、変数 a に「Simple」、変数 b に「Learning」という文字列をそれぞれ代入しています。
  • alert()メソッドの引数で「a + " Easy " + b」と記述することで、3つの文字列が連結され、「Simple Easy Learning」という結果がアラートボックスに表示されます。
  • body要素内のボタンには onClick 属性が設定されており、クリックされると display() 関数が呼び出される仕組みになっています。

テンプレートリテラルを使った書き方

ES6（ECMAScript 2015）以降では、テンプレートリテラル（バッククォート）を利用すると、+ 演算子による連結よりも読みやすく変数を埋め込めます。

function display() {
   var a = "Simple";
   var b = "Learning";
   alert(`${a} Easy ${b}`);
}

まとめ

変数の値をアラートボックスに表示するには、alert()メソッドの引数に変数を指定するだけです。文字列の連結には + 演算子かテンプレートリテラルを使い分けるとよいでしょう。なお、alert()は手軽な確認手段として便利ですが、本格的なデバッグを行う場合は console.log() を使うのが一般的です。

  1. JavaScriptのアラートボックス（alert）のタイトルは変更できる？カスタムモーダルで実現する方法

    結論から言うと、セキュリティ上の制約により、JavaScriptの標準的なalert()メソッドで表示されるアラートボックスのタイトルを編集することはできません。なぜタイトルが変更できないのかブラウザ標準のアラートボックスは、悪意あるサイトがOSやブラウザ自体のダイアログに偽装してユーザーを騙すことを防ぐため、ブラウザ側で厳しく管理されています。そのため、タイトル部分には自動的にドメイン名や「このページから」といった情報が表示され、開発者が自由に書き換えることはできない仕組みになっています。解決策：カスタムモーダルダイアログを使うすべてのWebブラウザで一貫した見た目のアラートボックスを実現し

  2. JavaScriptでテキストボックスの入力値を取得して表示する方法

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">