JavaScript - ページの部品をかき集める(CSSとDOMによるスタイルの変更(className属性))

Head First JavaScript
頭とからだで覚えるJavaScriptの基本
(オライリージャパン)
Michael Morrison (著) 豊福 剛 (翻訳)

開発環境

• OS X Mavericks - Apple(OS)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc. (GUI) (Text Editor)
• Safari、Firefox + Firebug (Webプラウザ、プラグイン)
• JavaScript (プログラミング言語)
• jQuery (JavaScript Library)

Head First JavaScript ―頭とからだで覚えるJavaScriptの基本( Michael Morrison (著), 豊福 剛 (翻訳)、オライリージャパン)の8章(ページの部品をかき集める)、自分で考えてみよう(p.373)を解いてみる。

その他参考書籍

• JavaScript 第6版
• JavaScriptリファレンス 第6版
• JavaScriptクックブック
• jQueryクックブック

自分で考えてみよう(p.373)

コード(BBEdit)

sample.js

var scenetext = $('#scenetext'),
    decision1 = $('#decision1'),
    decision2 = $('#decision2'),
    decisions = [decision1, decision2],
    replaceNodeText = function (id, new_text) {
        var node = document.getElementById(id),
            text_node = document.createTextNode(new_text);
        while (node.firstChild) {
            node.removeChild(node.firstChild);
        }
        node.appendChild(text_node);
    },
    i = 0,
    j = 0,
    k = 0,
    n,
    max;
for (n = 0, max = decisions.length; n < max; n += 1) {
    (function () {
        var decision = decisions[n],
            id = 'decision' + (n + 1);
        decision.mouseover(function (event) {
            document.getElementById(id).className = 'decisionhover';
        });
        decision.mouseout(function (event) {
            document.getElementById(id).className = 'decision';
        });
    })();
}

decision1.click(function () {
    replaceNodeText('scenetext', 'シーン説明: ' + (function () {
        i += 1;
        return i;
    })());
    replaceNodeText('decision1', '決定1: ' + (function () {
        j += 1;
        return j;
    })());
});
decision2.click(function () {
    replaceNodeText('scenetext', 'シーン説明: ' + (function () {
        i += 1;
        return i;
    })());
    replaceNodeText('decision2', '決定2: ' + (function () {
        k += 1;
        return k;
    })());
});

シーン説明

決定1 決定2