JavaScript確認テスト(4) - イチから学ぶWeb制作

Q1
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<title>JS確認テストQ1</title>
</head>
<body>
<script>
  var x ='ABC';
  if(x != 'ABC'){
    console.log('OK');
  }else{
    console.log('NG');
  }
</script>
</body>
</html>

結果↓

メモ
・[!=]は左辺と右辺が等しくない時にOKになる。
　今回は等しいのでNGになった。

Q2
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<title>JS確認テストQ2</title>
</head>
<body>
<script>
  var x = 10;
  if(x === '10'){
    console.log('OK');
  }else{
    console.log('NG');
  }
</script>
</body>
</html>

結果↓

メモ
・[===]は左辺と右辺が等しくかつデータ型も等しい場合OKになる。
今回は左辺と右辺は等しいが、データ型が左辺が整数で右辺が文字の扱いになるのでNGになった。

Q3
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<title>JS確認テストQ3</title>
</head>
<body>
<script>
  var x = 10;
  var y = 20;
  if (y = 10 && x > y){
    console.log('OK');
  }else{
    console.log('NG');
  }
</script>
</body>
</html>

結果↓

メモ
・[&&]は左辺の計算式と右辺の計算式がどちらもtrueの時にOKになる。
今回はどちらの計算式も正しくないのでNGになった。

Q4
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<title>JS確認テストQ4</title>
</head>
<body>
<script>
  var x = 'C';
  switch(x){
    case'A':
      console.log('A');
    case'B':
      console.log('B');
    case'C':
      console.log('C');
    case'D':
      console.log('D');
    default:
      console.log('E');
  }
</script>
</body>
</html>

結果↓

メモ
・[switch]は()内の値が対応する[case]文にジャンプし処理する。
　[switch]の特徴は一致した値から下の部分も処理される。
今回は[switch]内の値が[C]なのでcase'C'までジャンプし処理され、そこから下の'D''E'も処理された。

Q5
Q:
switch文において、if文のelseと同じ役割を果たすキーワードはなんですか？

A:
default
・elseは条件に満たさない場合にされる処理
defaultはどの値にも一致しない場合される処理なので

Q6
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<title>JS確認テストQ6</title>
</head>
<body>
<script>
  var x = 'Z';
  switch(x) {
    case 'A':
      console.log('A');
    case 'B':
      console.log('B');
    case 'C':
      console.log('C');
    case 'D':
      console.log('D');
    default:
      console.log('E');
  }
</script>
</body>
</html>

結果↓

メモ
・switchの値がZなので一致するcase文がなかった。
一致しない場合処理されるdefault文のEになった。

Q7
HTML
※結果がわかるように12行目にconsole.logを追加しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>JS確認テストQ7</title>

</head>
<body>
<script>
  var a = 0;
  while(a < 3) {
    a++;
  console.log(a);
  }
</script>
</body>
</html>

結果↓
A:3回

メモ
・while文は()内の条件に対してtrueの場合は繰り返し処理を行い、条件に当てはまらなくなると終了する。
・()内には条件式のみで変数の変更などは別に命令する。
・[++](インクリメント演算子)は変数の値に1を足す。(変数の前か後ろにつけるかで演算を行うタイミングが変わる)
・今回は条件式はaが3未満の場合trueなので3になったら終了になる、
　aは元々0、++により1ずつ足されるので3回繰り返される。

Q8
HTML
※結果がわかるように12行目と14行目にconsole.logを追加しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>JS確認テストQ8</title>
</head>
<body>
<script>
  var a = 3;
  while(a < 3) {
    a++;
  console.log(a);
  }
  console.log('終了');
</script>
</body>
</html>

結果↓
A:0回

メモ
・今回はwhile文の条件が3未満、
　aが元々3なので条件式に当てはまらず繰り返しがなく処理された。

Q9
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<title>JS確認テストQ9</title>
</head>
<body>
<script>
  for(var i = 5; i > 0 ; i--){
    console.log(i);
  }
</script>
</body>
</html>

結果↓
A:5回

メモ
・for文は指定した回数だけ処理を繰り返す
・for ( 変数の初期値；繰り返し条件；変数の変更 ) {
　　実行される処理}
今回の式に当てはめてみると↓
　var i=5(変数の初期値)→初期化式(最初の1回だけ実行される)
　i > 0(繰り返し条件)→継続条件式(１回分の繰り返し処理の最初に毎回実行される)
　i--(変数の変更)→増減式(１回分の繰り返し処理の最後に毎回実行される)
・[--](デクリメント演算子)変数の値を1減らす。

Q10
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<title>JS確認テストQ4</title>
</head>
<body>
<script>
  var fruits = ['りんご','みかん','パイナップル','ぶどう','バナナ'];
  for(var i = 0; i < 5; i++){
    console.log(fruits[i]);
  }
</script>
</body>
</html>

結果↓
A→0
B→5

メモ
・javascriptの場合0から数えるので初期値は0
・0→りんご、1→みかん、2→パイナップル、3→ぶどう、4→バナナになるので5未満で終わるようにする。