JavaScript ダイアログ confirm

2014-08-30
いっす!この記事は1年以上前に投稿されたもので、情報が古いかもしれません。ご注意ください!
confirm(質問文)

確認ダイアログ(OKかキャンセルを選択)を出す。OKならtrue、キャンセルならfalseとなる。

<script>
var flg; //真偽を入れる変数の宣言
flg = confirm("背景の色を変えてもいいですか?"); //真偽の代入
if (flg == true) document.bgColor = "pink"; //真なら背景色変更
</script>

 サンプル

var flg; //真偽を入れる変数の宣言

変数flgを宣言。この変数はboolean型(真(true)か偽(false)のどちらかしか入らないもの。)にする。

flg = confirm("背景の色を変えてもいいですか?"); //真偽の代入

()内がダイアログで表示される。OKならflgにtrueが代入され、キャンセルならfalseが代入される。

if (flg == true) document.bgColor = "pink"; //真なら背景色変更

変数flgを判定する。trueであれば背景をピンクに変更する。

正誤クイズ

head内

<script>
//問題を配列に入れる。
var q = new Array(
	"1000nmは1μmです。",
	"100μmは1mmです。",
	"100mmは1cmです。",
	"100cmは1mです。",
	"1000mは1kmです。"
);
//答え(正誤)を配列に入れる。
var ans = new Array(true,false,false,true,true);

function quiz(){
	var point = 0; //点数を入れる変数
	
	//5問連続出題
	for(var i=0; i<=4; i++){
		if( confirm(q[i] ) == ans[i] ) point = point + 20;
	}
	//採点結果発表
	alert("あなたは"+ point + "点でした!");
}
</script>

body内で関数quiz()を呼び出す。

<div style="text-align:center;">
クイズに答えてください。<br>正しければ「OK」を、間違っていれば「キャンセル」をクリックしてください。<br><br>
<form>
<input type="button" name="" value="クイズ" onClick="quiz()">
</form>
</div>

解説

//問題を配列に入れる。
var q = new Array(
	"1000nmは1μmです。",
	"100μmは1mmです。",
	"100mmは1cmです。",
	"100cmは1mです。",
	"1000mは1kmです。"
);
//答え(正誤)を配列に入れる。
var ans = new Array(true,false,false,true,true);

配列qに問題を、配列ansに回答(trueかfalseか)を入れる。配列を使用するのはfor文と共に連続出題するため。

function quiz(){

関数quiz()の宣言。

var point = 0; //点数を入れる変数

点数を入れる変数の宣言。初期値0を代入。

for(var i=0; i<=4; i++){
		if( confirm(q[i] ) == ans[i] ) point = point + 20;

forを使用して5連続出題。配列を使用するのでiは0から始める。
confirm()内はq[i]を指定し、問題をダイアログで表示する。

confirmの選択結果を変数に代入せず、直接if文で真偽を判定する。判定値はans[i]となっている。配列ansは配列qの問題の答えに対応してなければならない。
正誤が一致すれば変数pointの値に20を加える。

alert("あなたは"+ point + "点でした!");

結果を出力。