確認ダイアログ(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 + "点でした!");
結果を出力。
![]() |
いちばんやさしいJavaScriptの教本 人気講師が教えるWebプログラミング入門(「いちばんやさしい教本」シリーズ) |
![]() |