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

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

<script type="text/javascript">
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 num = Math.random();
            message = (num < 0.25) ? 
                        "大吉" : (num < 0.55) ? 
                        "中吉" : (num < 0.85) ? 
                        "小吉" : "凶";
            message = "今日のあなたの運勢は" 
                      + message + "です";
        }
    }
        
    alert(message);
    cancelEvent(theEvent);
}
</script>
<h2>
    今日のカラー占い</h2>
<p>
    お好みの色をお選びください</p>
<form id="Form1" action="">
<p>
    <input type="radio" value="" />赤
    <input type="radio" value="" />青
    <input type="radio" value="" />黄色
    <input type="radio" value="" />白<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を活用していく計画！