自習内容

この自習内容は下記の講師のブログを参考に授業で入力してないかなと思う内容のものを自習しただけですので、総合的な内容は講師の方のブログを参考にされた方が良いと思います。

d.hatena.ne.jp

f:id:paris1204:20160306230307p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if分の利用</title>



</head>

<body>
<script>
var color='青';

if(color==='青'){console.log('進む');}
else{console.log('止まる');}

</script>
</body>
</html>

f:id:paris1204:20160306231017p:plain
nobuo-create.net

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if else文</title>



</head>

<body>
<script>
 //if else文
  var n = prompt('数値を1つ入力してください');
  n = Number(n);//Number関数を使うことにより、型の一致まで判別する「===」を利用できます
  if (n === 3) {
    alert('入力した数値は3ですね');
  } else {
    alert('入力したのは3以外ですね');
  }
</script>
</body>
</html>


f:id:paris1204:20160306233602p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>複雑な条件式</title>



</head>

<body>
<script>
var color='blue';

if(color==='blue' || color==='green'){document.write('進め');}//||はor関数と同じ機能
else{document.write('止まれ');}
</script>
</body>
</html>



f:id:paris1204:20160306234557p:plain
f:id:paris1204:20160306234822p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>!演算子の利用</title>



</head>

<body>
<script>
var a;

if(!a){document.write('aは空です。');}//変数の前に!を入力すると変数自体に値がない時という意味になる。

</script>
</body>
</html>

f:id:paris1204:20160307000215p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if ellse if else文</title>



</head>

<body>
<script>
 var n=2;
 
 if(n===3){document.write('数値は3です。');}
else if(n>3){document.write('数値は3より大きいです。');}
else{document.write('数値は3よりも小さいです。');}
</script>
</body>
</html>

f:id:paris1204:20160307001426p:plain

f:id:paris1204:20160307001249p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if文による多方向分岐</title>



</head>

<body>
<script>
 var color='pink';
 
 if(color==='blue' || color==='green'){document.write('渡ってください。');}
 else if(color==='yellow'){console.log('気をつけて渡ってください。');}
 else if(color==='red'){alert('青になるまでお待ち下さい');}
 else{document.write('信号機の故障です。警察に連絡してください。');}
</script>
</body>
</html>

f:id:paris1204:20160307004450p:plain
f:id:paris1204:20160307004457p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if文else if && </title>



</head>

<body>
<script>
 var n;
 function input(){
	 n=prompt('0 から1000までの整数を半角数字で入力してください');
	 
	 document.write(n + 'は');//この文章が下の条件にあった内容と繋がれて表示される
	 
	 
	 if(n>=0 && n<=9){document.write('1桁の数値です。');}
	 else if(n>=10 && n<=99){document.write('2桁の数値です。');}
	 else if(n>=100 && n<=999){document.write('3桁の数値です。');}
	 else{document.write('4桁の数値です。');}
	 
	 
	 
	 
	 
	 
	 }//functionの閉め
 
</script>
<h1>10000までの数値を入力すると、桁数を判別できます。</h1>
<p>1から10000までの好きな数値を半角英数の整数で入力してください。</p>
<p><button onclick="input()">判別する</button></p><!--html内の入力なのでダブルクォーテーションでfunction名を囲むこと!!-->
</body>
</html>