2016/3/7更新

JavaScriptでダイアログを表示：alert(), confirm(), prompt

Webページ上で警告を出したいときがあると思います。

その際ブラウザの機能として提供されているダイアログを表示して警告を出したいと思うでしょう。

今回はJavaScriptでのダイアログの出し方表示します。

通常の警告表示をするalert関数

通常文字列で警告を出したい場合は、alert関数を用います。

alert関数は以下のように使用して文字列を表示します。

window.alert('hogehoge');

//windowを省略することもできます
alert('hogehoge');

window.alert('hogehoge');

//windowを省略することもできます

alert('hogehoge');

スクリーンショット 2016-02-27 21.57.14

このアラート関数は、ただ単に文字列を表示するだけで、OKボタンを押したら処理を続行します。

処理を続行するかどうかを選ばせたい場合は次で紹介するconfirm関数を使用します。

次の処理を続行するかどうかを選ばせるには、confirm関数を使用します。

// result変数に「はい」を選んだらtrue「いいえ」を選んだらfalseが入る
var result = confirm('次の処理を続けますか？');

if(result) {
  //はいを選んだときの処理
} else {
 //いいえを選んだときの処理
}

// result変数に「はい」を選んだらtrue「いいえ」を選んだらfalseが入る

var result = confirm('次の処理を続けますか？');

if(result) {

//はいを選んだときの処理

} else {

//いいえを選んだときの処理

}

スクリーンショット 2016-02-27 21.59.07

選んだ結果をresult変数に入れる為、後で処理の分岐をif文等で行うことができます。

ダイアログで文字列の入力を促すことができます。

//resultに入力された文字列が入る。第二引数は初期値
var result = prompt('文字列を入力してください', 'テスト');

if(result){
  //入力した場合
} else {
  //キャンセルを押した場合
}

//resultに入力された文字列が入る。第二引数は初期値

var result = prompt('文字列を入力してください', 'テスト');

if(result){

//入力した場合

} else {

//キャンセルを押した場合

}

スクリーンショット 2016-02-27 21.59.53

ユーザが入力した文字列を活用したい場合は、次の条件分岐で処理を継続させると良いでしょう。

JavaScript