スポンサーリンク

JavaScriptでダイアログを表示する方法まとめ

ダイアログ JavaScript
ダイアログ

はい、ぺんしるです!

今日は、JavaScriptのダイアログを表示する方法をまとめたので、ご参考ください(^^)/

JavaScriptでダイアログを表示するためのメソッドは3つしかないので、よく覚えてくださいね。

スポンサーリンク

confirm メソッド

confirmメソッドは、「OK」「キャンセル」を選択させる場合に使用するメソッドです。

window.confirm('メッセージ内容');

上記のコードを実行すると、以下のダイアログが表示されます。

Chrome/EdgeとIEでは、表示のされ方が異なることが分かるかと思います。

chromeやEdgeの場合
IEの場合

alert メソッド

alertメソッドは、「OK」のみを選択させる場合に使用するメソッドです。

alert('アラートの内容');

上記のコードを実行すると、以下のダイアログが表示されます。

Chrome/EdgeとIEでは、表示のされ方が異なることが分かるかと思います。

chromeやEdgeの場合
IEの場合

prompt メソッド

promptメソッドは、ユーザからの入力を受け付けるためのメソッドです。

戻り値(以下のコードだと変数ret)には、入力した文字列が格納されます。

var ret = prompt('何か入力してください。');

上記のコードを実行すると、以下のダイアログが表示されます。

Chrome/EdgeとIEでは、表示のされ方が異なることが分かるかと思います。

chromeやEdgeの場合
IEの場合

IEの場合、入力欄に「undefined」と初期値が入力されていることが分かると思います。

実は、入力欄には以下のコードように初期値を設定することができます。

2つ目のパラメータで’ぺんしるブログ’と指定していますが、これが初期値になります。

var ret = prompt('何か入力してください。','ぺんしるブログ');

上記のコードを実行すると、以下のダイアログが表示されます。

chromeやEdgeの場合
IEの場合

大事なこと

一点大事なことですが、JavaScriptのダイアログでできることは上記のみです。

上記以外の「ちょっと複雑な」ことを実現したい場合は、独自に画面を作成する必要があることを覚えておいてくださいね。

最後に

いかがでしたか?

不明点があれば、遠慮なくこちら、またはこちら(匿名での質問ができます)からご質問くださいね。


ではまた!!

タイトルとURLをコピーしました