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

開発環境

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

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

8-2.

コード(Microsoft Visual Web Developer 2010 Express Editionのエディタ)

<script type="text/javascript">
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", validatePasswd);
    catchEvent(
        document.getElementById("someForm"), 
        "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 validatePasswd(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("someForm")
        .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);
}
</script>
<form id="Form1" action="">
<p>
お名前:
<input type="text" id="Text1" /><br />
郵便番号:
<input type="text" id="Text2" /><br />
ご住所:
<input type="text" id="Text3" size="60" />
<br />
パスワード:
<input type="password" id="Password1" />
<br />
<input type="hidden" value="秘密のテキスト" />
<textarea id="textarea1" cols="50" rows="10">
テキストエリア</textarea><br />
<input type="submit" value="送信" />
</p>
</form>

お名前:
郵便番号:
ご住所:
パスワード:
テキストエリア

合わせて読んでいる書籍。

1. 14章でPHPとJavaScriptを組み合わせたWebアプリケーションが登場したので『初めてのPHP & MySQL 第2版』(Micbele E. Davis、Jon A. Phillips 著、西沢 直木 訳、オライリー・ジャパン、2008年、ISBN978-4-87311-365-4)
2. JavaScriptのライブラリーを活用できるようになるために『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87311-468-2)
3. JavaScript、APIを使って遊ぶために『Google Maps Hacks 第2版 ―地図検索サービスをもっと活用するテクニック』(Rich Gibson, Schuyler Erle 著、武舎 広幸、福地 太郎、武舎 るみ 訳、オライリー・ジャパン、2007年、ISBN978-4-87311-341-8)
4. HTML5について学習するために『入門 HTML5』(Mark Pilgrim 著、矢倉 眞隆 監訳、水原 文 訳、オライリー・ジャパン、2011年、ISBN978-4-87311-482-8)

前の周では少しずつjQueryを使ってみたけど、今回はもっとjQueryを活用していく計画！