2016/3/2更新

JavaScriptのダイアログを表示する方法：alert

画面から入力したデータについてエラー情報を表示したり、誤動作について警告を表示したりするときに用いられるものとしてアラートダイアログがあります。

ダイアログ画面に表示されたOKボタン、または、画面の右上にある×ボタンで閉じることができます。

このダイアログ画面が表示されている間は、プログラムは保留状態にあり、ダイアログ画面を閉じると処理が再開します。

それでは、実際にアラートダイアログ画面を表示させるためのプログラムを見てみましょう。

アラートダイアログの表示

① 固定文字列の表示

固定の文字列を表示する場合は、シングルクォーテーションで表示したい文字を囲みます。

alert('test');

1	alert('test');

上記のプログラムを実行すると次のようになります。

image7_1

② 変数の値の表示

変数の値を表示する場合は、表示したい変数名を指定します。

var i = 100;
alert(i);

1 2	var i = 100; alert(i);

image7_2

固定の文字列と変数の値を連結して表示したい場合は、以下のように記述します。

// 今日の日付情報を取得し変数dTodayに格納する
var dToday = new Date(); 
// 取得した日付情報から年・月・日・曜日を取得する
var year = dToday.getFullYear();
var month = dToday.getMonth()+1;
var day = dToday.getDate();
var week = dToday.getDay();
// 曜日データを配列に格納する
var yobi= new Array("日","月","火","水","木","金","土");
// 取得した日付情報を表示する
alert('今日は' + year + '年' + month + '月' + day + '日 ' + yobi[week] + '曜日');

// 今日の日付情報を取得し変数dTodayに格納する

var dToday = new Date();

// 取得した日付情報から年・月・日・曜日を取得する

var year = dToday.getFullYear();

var month = dToday.getMonth()+1;

var day = dToday.getDate();

var week = dToday.getDay();

// 曜日データを配列に格納する

var yobi= new Array("日","月","火","水","木","金","土");

// 取得した日付情報を表示する

alert('今日は' + year + '年' + month + '月' + day + '日 ' + yobi[week] + '曜日');

上記プログラムを実行すると次のようになります。

image7_3

固定の文字列と変数名を+で連結すれば、固定の文字列と変数の値を連結して表示することができます。

③ 改行を含む文字列の表示

長い文字列や複数の情報を見やすく表示するために改行したい場合は以次のように記述します。

// 今日の日付情報を取得し変数dTodayに格納する
var dToday = new Date(); 
// 取得した日付情報から年・月・日・曜日を取得する
var year = dToday.getFullYear();
var month = dToday.getMonth()+1;
var day = dToday.getDate();
var week = dToday.getDay();
// 曜日データを配列に格納する
var yobi= new Array("日","月","火","水","木","金","土");
//時・分・秒を取得する
var hour = dToday.getHours();
var minute = dToday.getMinutes();
var second = dToday.getSeconds();
// 取得した日付情報と現在時刻を表示する
alert('今日は' + year + '年' + month + '月' + day + '日 ' + yobi[week] + '曜日' + '\n' + hour + '時' + minute + '分' + second + '秒');

// 今日の日付情報を取得し変数dTodayに格納する

var dToday = new Date();

// 取得した日付情報から年・月・日・曜日を取得する

var year = dToday.getFullYear();

var month = dToday.getMonth()+1;

var day = dToday.getDate();

var week = dToday.getDay();

// 曜日データを配列に格納する

var yobi= new Array("日","月","火","水","木","金","土");

//時・分・秒を取得する

var hour = dToday.getHours();

var minute = dToday.getMinutes();

var second = dToday.getSeconds();

// 取得した日付情報と現在時刻を表示する

alert('今日は' + year + '年' + month + '月' + day + '日 ' + yobi[week] + '曜日' + '\n' + hour + '時' + minute + '分' + second + '秒');

上記プログラムの実行結果は、次のようになります。

image7_4

改行したい場所で\nと記述すると、複数行のデータを表示することができます。

④ インデント付きの文字列の表示

見出しと内容というように、異なる種類の情報を見やすくためにインデント（字下げ）をしたい場合があります。

そのような場合は、\tと記述すると字下げをすることができます。

var error1 = '未入力：住所';
var error2 = '文字種エラー：電話番号';
alert('入力エラー' + '\n' + '\t' + error1 + '\n' + '\t' + error2);

var error1 = '未入力：住所';

var error2 = '文字種エラー：電話番号';

alert('入力エラー' + '\n' + '\t' + error1 + '\n' + '\t' + error2);

上記プログラムを実行すると次のようになります。

image7_5

入力エラーという見出しに対し、内容部分が字下げされて表示されています。

アラートダイアログは、システム利用者に対して注意を喚起する目的ばかりでなく、プログラミングの際に変数の値を表示させてデバッグを行ったり非常に便利に使うことができます。是非覚えておきましょう。

JavaScript