JavaScript - フォームと検証(ラジオボタンとチェックボックス)

初めてのJavaScript 第2版
Shelley Powers (著)
武舎 広幸、武舎 るみ (訳)

開発環境

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

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

その他参考書籍

• JavaScript 第6版
• JavaScriptリファレンス 第6版
• 『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87312-268-2)

8-1.

赤 青 黄色 白

コード(TextWrangler)

<script>
catch_event(window, "load", setup_events);

function catch_event(event_obj, event, event_handler){
  if(event_obj.addEventListener){
    event_obj.addEventListener(event, event_handler, false);
  } else if (event_obj.attachEvent){
    event_obj.attachEvent(event, event_handler);
  }
}

function cancel_event(event){
  if(event.preventDefault){
    event.preventDefault();
    event.stopPropagation();
  } else {
    event.returnValue = false;
    event.cancelBubble = true;
  }
}

function setup_events(event){
  catch_event(document.getElementById("some_form"), "submit", check_colors);
}

function check_colors(event){
  var event = event ? event : window.event;
  var color_opts = document.getElementById('some_form').getElementsByTagName('input');
  var msg = "どれかひとつ色を選んでください";
  for(var i = 0; i < color_opts.length; i++){
    if(color_opts[i].checked){
      var r = Math.random();
      if(r > 0.75){
        msg = "大吉";
      } else if (r > 0.5){
        msg = "小吉";
      } else if (r > 0.25){
        msg = "中吉";
      } else {
        msg = "凶";
      }
      msg = "今日のあなたの運勢は" + msg + "です";
      break;
    }
  }
  $('#h0').text(msg);
  cancel_event(event);
}
</script>
<form id = "some_form" >
  <p>
    <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="送信" />
  </p>
</form>
<h1 id="h0"></h1>

ちなみにPython3kの場合。

コード(TextWrangler)

sample.py

どれか一つの色(赤、青、黄色、白)を入力してください。
aka 
入力を確認してください。
赤
今日のあなたの運勢は中吉です。
kamimuras-MacBook-Pro:javascript kamimura$ cat *.py
#!/usr/bin/env python3.3
#-*- coding: utf-8 -*-

colors = ['赤', '青', '黄色', '白']
print("どれか一つの色({0})を入力してください。".format("、".join(colors)))
msg = "入力を確認してください。"
while True:
    color = input()
    if color in colors:break
    print(msg)

import random
r = random.randint(1,4)
cases = {1:'大吉', 2:"小吉", 3:'中吉', 4:'凶'}
msg = '今日のあなたの運勢は{0}です。'.format(cases[r])
print(msg)

入出力結果(Terminal)

$ ./sample.py
どれか一つの色(赤、青、黄色、白)を入力してください。
赤
今日のあなたの運勢は大吉です。
$ ./sample.py
どれか一つの色(赤、青、黄色、白)を入力してください。
青  
今日のあなたの運勢は凶です。
$ ./sample.py
どれか一つの色(赤、青、黄色、白)を入力してください。
黄色  
今日のあなたの運勢は中吉です。
$ ./sample.py
どれか一つの色(赤、青、黄色、白)を入力してください。
siro 
入力を確認してください。
白
今日のあなたの運勢は凶です。
$