JavaScript - フォームと検証(Math.random()でおみくじ)

開発環境

• OS X Lion - Apple(OS)
• Safari (Webプラウザ)
• TextWrangler(Text Editor) (BBEditの無料、light版)
• Script言語:JavaScript
• JavaScript Library: jQuery

『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5) の8章(フォームと検証)練習問題1解いてみる。

その他参考書籍

• JavaScript 第5版 David Flanagan (著), 村上 列 (翻訳)
• JavaScriptクイックリファレンス David Flanagan (著), 木下 哲也 (翻訳), 福龍興業 (翻訳)
• 『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87311-468-2)

1.

コード(TextWrangler)

<script>
  catchEvent(window,"load",setUpEvents);
  
  function catchEvent(eventObj,event,eventHandler){
    if(eventObj.addEventListener){
      eventObj.addEventListener(event,eventHandler,false);
    } else if(eventObj.attachEvent){
      eventObj.attachEvent(event,eventHandler);
    }
  }
  
  function cancelEvent(event){
    if(event.preventDefault){
      event.preventDefault();
      event.stopPropagation();
    } else {
      event.returnValue = false;
      event.cancelBubble = true;
    }
  }
  
  function setUpEvents(event){
    catchEvent(document.getElementById("someForm"),"submit",checkColors);
  }
  
  function checkColors(event){
    var theEvent = event?event:window.event;
    var colorOpts =
      document.getElementById("someForm").getElementsByTagName("input");
    var message = "どれかひとつ、色を選んでください。";
    for(var i = 0 ; i < colorOpts.length; i++){
      if(colorOpts[i].checked){
        var r = Math.random();
        message = r >= 0.7 ? "大吉" :
                  r >= 0.4 ? "中吉" :
                  r >= 0.1 ? "小吉" :　"凶";
        message = "凶のあなたの運勢は" + message + "です。";
        break;
      }
    }
    alert(message);
    cancelEvent(theEvent);
  }
</script>
<h2>今日のカラー占い</h2>
<p>お好みの色をお選びください。</p>
<form id="someForm" action="">
<input type="radio" value="赤" name="radiogroup"/>赤
<input type="radio" value="青" name="radiogroup"/>青
<input type="radio" value="黄色" name="radiogroup"/>黄色
<input type="radio" value="白" name="radiogroup"/>白
<br />
<input type="submit" value="送信"/>
</form>

今日のカラー占い

お好みの色をお選びください。

赤 青 白 黄色