【JavaScript】ポップアップで警告メッセージを表示する方法

こんにちは朱夏です。

今回はJavaScriptを使って警告メッセージを表示させる方法を解説したいと思います。

朱夏

警告メッセージをポップアップで表示させる方法を知りたい。

JavaScriptで何か機能を実装しようとすると、何行もコードを書く必要があり大変なイメージがありますが、警告メッセージを表示させる程度なら数行で簡単に実装する事が出来ます。

それではいってみましょう。

サンプルの紹介

最初にサンプルの紹介をしたいと思います。

【サンプル１】
ボタンを押すと警告メッセージが表示されるサンプルです。

See the Pen
rNOzzME by 朱夏 (@syunatsu1)
on CodePen.

【サンプル２】
こちらはリンクをクリックで警告メッセージが表示されるサンプルです。

See the Pen
pojrrLB by 朱夏 (@syunatsu1)
on CodePen.

クリックする要素のタイプで2つのサンプルを用意してみました。
解説は次の項でやっていきます。

書き方の解説

それでは、書き方を解説していきたいと思います。

先ずはHTML側から。

HTMLの書き方について、それぞれサンプルのコードを見てみましょう。

ボタンタイプのサンプルは、inputタグで汎用ボタンを作成、リンクタイプはaタグでハイパーリンクを作成しています。

見た目を別々で実装していますが、中の仕組みは同じになっています。

onclickの部分を見てください。
onclick=”sample()”で関数を呼び出しています。

ここでsample()というJavaScriptの関数を呼び出しています。

次にJavaScriptのコードを見てみます。
JavaScriptのコードは共通して以下の様なコードになっています。

今回のポイントとなるポップアップの警告メッセージを表示させているのは、”alert()“の部分になります。

このメソッドと呼ばれる部分を書くことで、ポップアップを表示する機能を使うことが出来ます。

ポップアップを表示する機能を持つメソッドは複数あります。
今回使用した”alert()“は、OKボタンのみのシンプルなポップアップを表示させるメソッドです。

他にもポップアップを表示するメソッドはいくつか存在しているので、興味がある人は、こちらのリファレンスから確認してみてください。

あとがき

というわけで、JavaScriptでポップアップの警告文を表示させる方法を解説してみました。

今回のまとめはこちら。

• HTMLから”onclick“で呼び出す
• JavaScriptではメソッドを呼び出すだけ
• メソッドの種類は複数ある

ポップアップはモーダルやダイアログなどと呼ばれることもあります。
細かく言えば別々の意味を持っているのですが、ほぼ同じととらえて差し支えないと思います。

別のメソッドも試したりして、色々な使い方を出来るようになると良いと思います。

今回は以上です。
次回もよろしくお願いします。