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

開発環境

• Microsoft Windows 7 Home Premium (OS)
• Internet Explorer 9 Beta(プラウザ)
• Microsoft Visual Web Developer 2010 Express Edition (IDE)
• Script言語:JavaScript

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

8-1.

コード

<script type="text/javascript"> //<![CDATA[ catchEvent(window, "load", setupEvents); function catchEvent(eventObj, event, eventHandler) { if (eventObj.addEventListener) { eventObj.addEventListener(event, eventHandler, false); } else if (eventObj.attachEvent) { event = "on" + event; eventObj.attachEvent(event, eventHandler); } } function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); event.stopPropagation(); } else { event.returnBValue = 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 n = Math.random() if (n > 0.8) { message = "大吉"; } else if (n > 0.45) { message = "中吉"; } else if (n > 0.1) { message = "小吉"; } else { message = "凶"; } message = "今日のあなたの運勢は" + message + "です。"; break; } } alert(message); cancelEvent(theEvent); } //]]> </script> <h2> 今日のカラー占い</h2> <p> お好みの色をお選びください。</p> <form id="Form1" action=""> <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>

今日のカラー占い

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

赤 青 黄色 白

(Mathオブジェクトのrandom()メソッドを利用してランダムに大吉、中吉、小吉、凶を割り当てて結果を表示しているだけです。選択した色は結果に影響していません。)

 

本書と合わせてjQueryクックブック、Google Maps Hacks 第2版 ―地図検索サービスをもっと活用するテクニックを読む。