プログラミング学習の記録 628.1 8章(フォームと検証)の練習問題1 『初めての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章(フォームと検証), 練習問題1を解いてみる。

8-1.

コード

<script type="text/javascript">
    catchEvent(window, "load", setupEvents);

    function catchEvent(eventObj, event, eventHandler) {
        if (eventObj.addEventListener) {
            eventObj.addEventListener(event, eventHandler, false);
        } else if (eventObje.attachEvent) {
            event = "on" + event;
            eventObj.attachEvent(
            event, eventHandler);
        }
    }

    function cancelEvent(event) {
        if (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 num = Math.random();
                message = num >= 0.7 ?
                    "大吉" :
                    num >= 0.4 ?
                    "中吉" :
                    num >= 0.1 ?
                    "小吉" : "凶";
                message = "今日のあなたの運勢は"
                            + message + "です";
            }
        }
        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>

今日のカラー占い

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

赤 青 黄色 白

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

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を活用していく計画！