Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[JavaScript]④関数の基礎とSwitch~case文

JavaScript
  • 関数とは
  • ボタンから関数呼び出し
  • switch~case文
  • 例題:県名を当てるゲーム

関数とは

  • ひとまとまりの処理を関数名で呼び出せる
  • メソッドと同じように引数を処理して値を返す

ボタンから関数を呼び出し

  • head部分に関数を記述する
  • 関数内の変数はその関数内だけで動作する
  • ボタンに設定された.onclickをイベントハンドラという
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>関数</title>
<script>
function calc(){
 document.write('2');    
}
</script>
</head>
<body>
<h1>1+1の答えは？</h1>
<button onclick="calc()">計算</button>
</body>
</html>

swith~case文

  • if文と同様に分岐処理
  • if文を簡略化
  • ある変数の中身が一致するか判断する
  • breakを設定しないと、値が一致したcaseキーワード以降の処理をすべて実行する
  • breakは処理を停止しループから離脱する
  • continueは処理を停止するがループに戻る
  • defaultはif文のelseのように、caseのいずれの値にも一致しないとき行う処理
switch(変数){
  case 値1:
    変数の中身が値1に一致した時の処理;
    break;//ブロック文から抜ける
  case 値2:
    変数の中身が値2に一致した時の処理;
    break;
  case 値3:
  case 値4:
    変数の中身が値3または値4に一致した時の処理;
    break;
  default:
    どのcase文の値にも一致しない時の処理;
}

switch~caseを組み込んだ繰り返し処理

日本でもっとも面積が大きい県を入力させるクイズ。 * 3回までミス可能、ミス時つづけて入力 * １回目のミスでヒント「北海道は県ではありません」 * ２回めのミスでヒント「東北地方の県です」 * ３回めのミスで正解表示「答えは岩手県」 * ミスに応じた文章表示と繰り返し処理をswitch~caseで管理

<script>
var count = 0;
function question(){
  var ans='岩手県';
  var user = prompt('県名を入力してください','滋賀県');
 
  if(user === ans){
     alert('正解!');    
     count = 0;
  }else{
     switch(count){
     case 0:
     alert('ヒント：北海道は県ではありません');
     count++;
     break;
     case 1:
     alert('ヒント：東北地方の県です');
     count++;
     break;
     case 2:
     alert('正解は"岩手県"');
     count = 0;
     break;

     }
  }
}
</script>
</head>
<body>
<h1>日本でもっとも面積が大きい県は何県でしょうか？</h1>
<p>2回までミス可能</p>
<p><button onclick="question()">解答する</button></p>
</body>
</html>
  • 変数を関数外部に書き初期化を回避。

d.hatena.ne.jp