条件分岐-if文 - Webデザインを学ぶ

if文は、条件によって処理を変えたい時に使う。
条件式が真であれば実行、偽であれば実行されない。

if(条件式){
　条件に合うときに実行する処理
} else {
条件に合わないときに実行する処理 }

f:id:hourin-g0913:20160305110254p:plain
↓10を入力した場合に出て来る表示
f:id:hourin-g0913:20160305110319p:plain

<html>
<head>
<meta charset="utf-8">
<title>偶数・奇数の判別する</title>
<script>
var x;

function oddEven(){
x= prompt('整数を入力してください',10);
x= parseInt( x );

if ( x%2 === 1 ){
 console.log('入力された数字'+x+'は奇数です。');
 document.write('入力された数字'+x+'は奇数です。');
}else{
 console.log('入力された文字は偶数です。');
 document.write('入力された数字'+x+'は偶数です。');}
}
</script>
</head>

<body>
<h1>偶数か奇数かの判別します。</h1>
<p>ボタンをクリックすると数値を入力するウィンドウが表示されます。</p>
<p><button onclick="oddEven()">判別する</button></p>
</body>
</html>

f:id:hourin-g0913:20160305110509p:plain
↓10を入力した場合に出て来る表示

↓30を入力した場合に出て来る表示

<html>
<head>
<meta charset="utf-8">
<title>10以上20未満か10以外かを判別する</title>
</head>

<body>
<script>
var x;
x= prompt('半角数字を入力してください',10);
x= parseInt( x );

if ( x>=10 && x<20){
document.write(x+'は10以上20未満です。');
}
else{
document.write(x+'は10以外です。');
}
</script>
</body>
</html>

f:id:hourin-g0913:20160305110656p:plain
↓100を入力した場合に出て来る表示
f:id:hourin-g0913:20160305110706p:plain
↓99~80を入力した場合に出て来る表示

↓79~0を入力した場合に出て来る表示

<html>
<head>
<meta charset="utf-8">
<title>点数判別</title>
<script>
var score;//点数
var refValue= 80;//基準値
var compValue=100;//満点

function point(){
  score=prompt('点数を入力してください。','半角数字で入力');
  if(score>=refValue){
     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>
<p></p></body>
</html>