開発環境
- 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章(フォームと検証)練習問第8-1を解いてみる。
その他参考書籍
- JavaScript 第6版
- JavaScriptリファレンス 第6版
- 『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87311-468-2)
8-1.
コード(TextWrangler)
<script> 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.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 = "どれかひとつ、色を選んでください。"; var r = Math.random(); for(var i = 0; i < colorOpts.length; i++){ if(colorOpts[i].checked){ message = r > 0.75 ? "大吉" : r > 0.5 ? "小吉" : r > 0.25 ? "中吉": "凶"; message = "今日のあなたの運勢は" + message + "です。"; break; } } $('#p0').text(message); cancelEvent(theEvent); } </script> <h2>今日のカラー占い</h2> <p> お好みの色をお選びください。 </p> <form id="someForm" 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> <p id="p0"></p>
今日のカラー占い
お好みの色をお選びください。
0 コメント:
コメントを投稿