webページのつくり方 | 学びの道

webページのつくり方、web制作、web作成、学びの道を歩み中!フェリカテクニカルアカデミー「東京・池袋」にてWeb作成を勉強中です。学んだ事をメモしていきます。

JavaScript if(もし、だったら)

本日は、JavaScript if(もし、だったら) を勉強して参りました。

 

【いままでの復習】

  • 指定したウィンドウに文字ダイアログを表示する。 → prompt 

   記載例)prompt("ダイアログに表示される文字列","入力欄の初期値")

f:id:kaoru01-05:20140325172129g:plain

  • xをyで除算した余りを求める。 →  %

   記載例)x%y ちなみにただの除算は x / y です。

  • ドキュメントに文字列を書き出す。 → document.write

   記載例)document.write(num+'は奇数です。');

 

                                      

【演習】

 ボタンをクリックすると、ウィンドウが出て、入力した点数に応じてコメントが出る様にしたい。

100点 「百点満点、よくがんばりました」

80点以上「合格です、よくがんばりました」

79点以下「不合格です もう少しがんばりましょう」

 

                                      

 

実際に入力していきます。

 

 <!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>if文のテスト ボタンを押したら表示</title>
<script>
var score; //点数 前半で変数宣言
var refVlaiue =80;//基準値 前半で変数宣言
var compValue=100;//満点 前半で変数宣言

function point() { //functionはこのような動きをするように設定しますの意//
  score=prompt('点数を入力してください。','半角数字で入力');

if(score>=refVlaiue) {

 if(score==compValue){//中盤でで命令
 document.write('<h1>百点満点</h1>');
 document.write('<p>よくがんばりました</p>');
}else {//中盤でで命令
  document.write('<h1>合格です</h1>');
  document.write('<p>よくがんばりました</p>');
}
}else {//中盤でで命令
  document.write('<h1>不合格です</h1>');
  document.write('<p>もう少しがんばりましょう</p>');
}
}
</script>
</head>
<body>
<h1>基準値を元に評価します</h1>
<p>ボタンをクリックすると数値を入力するウィンドウが表示されます</p>
<p><button onclick="point()">基準値を元に評価する</button></p>
</body>
</html>

 

 

f:id:kaoru01-05:20140325173731j:plain