JavaScriptの「document.write」の正体&「alert」などダイアログやブラウザー操作の基本JavaScript標準ライブラリの使い方超入門(7)(2/5 ページ)

» 2016年11月08日 05時00分 公開
[金城俊哉]

確認メッセージは3種類もあれば十分

 Windowオブジェクトには、おなじみのアラート(警告)ダイアログのほかに、キャンセルボタンが表示される確認ダイアログ、さらには文字列の入力ができる入力ダイアログを表示するためのメソッドがあります。

警告ダイアログ(alert()メソッド)

theme

アラートダイアログを使用してメッセージを表示する。


Navigator

「アラートダイアログは、警告を表示するダイアログです」


Driver

「これまでプログラムの実行結果を表示する用途で何度も使用してきましたよね」


Navigator

「そこで今回は、表示するテキストを途中で改行させてみましょう。メッセージには、テキストのほかにエスケープシーケンスを含めることができますので、『\n』を含めることで、表示するテキストの途中で改行することができます」


Driver

「じゃ、やってみますね」


アラートダイアログを表示するコードをbody要素の内部に記述(alert.html)
実行結果

確認ダイアログ(confirm()メソッド)

theme

確認ダイアログを表示する。ただし、[OK]ボタン、[キャンセル]ボタンがクリックされたときの処理を振り分けること。


Navigator

「確認ダイアログはconfirm()メソッドで表示します。[OK]ボタンに加えて[キャンセル]ボタンが表示されるので、ユーザーに対して処理の実行の有無を求める場合などに使用できるのですね」


confirm()メソッドの戻り値
Driver

「confirm()メソッドの戻り値を利用することで、クリックされたボタンごとに異なる処理を行うことができるってわけですね。それでは、confirm()メソッドの戻り値を引数に格納しておいて、この引数の値で処理を振り分けてみます」


確認ダイアログで処理を振り分ける
実行結果

入力ダイアログ(prompt()メソッド)

theme

入力ダイアログを表示する。ただし、入力されたテキストに対して何らかのメッセージを表示すること。


Navigator

「入力ダイアログは、prompt()メソッドで表示します」


prompt()メソッド
構文 result = window.prompt( text, value );
パラメーター text メッセージとして表示するテキストを指定する。
value 入力フィールド内にデフォルトで表示するテキストを指定する。この引数は、オプションだが、省略した場合は入力フィールドに「undefined」と表示される。
戻り値 文字列を入力して[OK]ボタンをクリックした場合は、入力された文字列を返す。[キャンセル]ボタンをクリックした場合は、nullを返す。
Navigator

「prompt()メソッドの第2引数を省略すると、入力ダイアログを表示したときに、入力フィールドに『undefined』と表示されてしまいます。なので、入力フィールドに何も表示されない状態にするには、あらかじめ『''』と空文字を指定しておくようにしてください


Driver

「では、入力ダイアログの[OK]ボタンがクリックされた場合にのみメッセージを表示するようにしてみますね」


入力ダイアログを表示(prompt.html)
実行結果

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。