プログラミング学習の記録 629.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.

コード

<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);
        $('#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" 
        name="text1" 
        id="Text1" />
    <br />
    郵便番号:
    <input type="text" 
        name="text2" 
        id="Text2" />
    <br />
    ご住所:
    <input type="text" 
        name="text3" 
        id="Text3" 
        size="60" />
        <br />
    パスワード;
    <input type="password" 
        name="text4" 
        id="Password1" />
        <br />
    <input type="hidden" 
        name="text5"
         value="秘密のテキスト" />
    <textarea name="text4" 
        id="textarea1" 
        cols="50" 
        rows="10">
        テキストエリア
        </textarea>
        <br />
    <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)

PHPの学習が止まったまま(というかほとんど進んでいない)だけど、そろそろ再開しようか検討中。

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