確認ダイアログ(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プログラミング入門(「いちばんやさしい教本」シリーズ) |