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

開発環境

• 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

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 = "どれかひとつ、色を選んでください。"; for (var i = 0; i < colorOpts.length; i++) { if (colorOpts[i].checked) { var color = colorOpts[i].value; var x = Math.random(); if (x < 0.1) { message = "大吉"; } else if (x < 0.3) { message = "小吉"; } else if (x < 0.9) { message = "中吉"; } else if (x < 1) { message = "凶"; } message = "今日のあなたの運勢は" + message + "です。"; break; } } alert(message); cancelEvent(theEvent); }

ブログ上だと上手く機能しなかったのでレンタルサーバーに保管。

保管場所

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

 

8-2

catchEvent(window, "load", setupEventsAndFocus); 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 setupEventsAndFocus(event) { catchEvent(document.getElementById("name"), "blur", checkRequired); catchEvent(document.getElementById("zip"), "change", validateField); catchEvent(document.getElementById("address"), "change", validateAddress); catchEvent(document.getElementById("passwd"), "change", validatePassword); catchEvent(document.getElementById("someForm1"), "submit", validateForm); document.getElementById("name").focus(); } function checkRequired(event) { var theEvent = event ? event : window.event; var target = theEvent.target ? theEvent.target : theEvent.srcElement; var txtInput = target.value; if (txtInput == null || txtInput == "") { alert("お名前をご記入ください"); } } function validateField(event) { var theEvent = event ? event : window.event; var target = theEvent.target ? theEvent.target : theEvent.srcElement; var rgEx = /^\d{3}[-]?\d{4}$/; var OK = rgEx.exec(target.value); if (!OK) { alert("郵便番号の形式が違っています"); } } function validateAddress(event) { var theEvent = event ? event : window.event; var target = theEvent.target ? theEvent.target : theEvent.srcElement; // 正規表現がまだ分からないのでここは解答を参考にしました var rgEx = /^[^0-9]+$/; var OK = rgEx.exec(target.value); if (!OK) { alert("住所欄に半角数字が含まれています"); } } function validatePassword(event) { var theEvent = event ? event : window.event; var target = theEvent.target ? theEvent.target : theEvent.srcElement; var rgEx = /^.{8,}$/; var OK = rgEx.exec(target.value); if (!OK) { alert("パスワードは8文字以上にしてください"); } } function validateForm(event) { var theEvent = event ? event : window.event; var strResults = ""; var textInputs = document.getElementById("someForm1").getElementsByTagName("input"); for (var i = 0; i < textInputs.length; i++) { if (textInputs[i].type != "submit") { strResults += textInputs[i].value + "\n"; } } document.getElementById("textarea").value = strResults; cancelEvent(theEvent); // 結果を消してしまわないようにキャンセル }

ブログ上だと上手く機能しなかったのでレンタルサーバーに保管。

保管場所

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