2014年9月19日金曜日

開発環境

Head First JavaScript Programming (Eric T. Freeman (著)、 Elisabeth Robson (著)、 O'Reilly Media )のChapter 11(Serious functions: Anonymous Functions, Scope and Closures)、SHARPEN YOUR PENCIL(p.478)を解いてみる。

SHARPEN YOUR PENCIL(p.478)

HTML5 (BBEdit, Emacs)

baking_cookies.html

<!DOCTYPE html>
<head>
 <meta charset="utf-8" />
 <title>Baking cookies!</title>
 <script src="baking_cookies.js"></script>
</head>
<body>

<button id="bake">bake</button>
<pre id="output"></pre>

</body>
</html>

コード (BBEdit, Emacs)

baking_cookies.js

var cookies = {
        instructions: 'Preheat oven to 350...',
        bake: function (time) {
            print("Baking the cookies.");
            setTimeout(function() {
                alert("Cookies are ready, take them out to cool.");
                print("Cooling the cookies.");
                setTimeout(function () {
                    alert("Cookies are cool, time to eat!");
                }, 5000);
            }, time);
        }
    },
    print;

window.onload = function () {
    var button = document.getElementById('bake'),
        output = document.getElementById('output');
        print = function (text) {
            if (output.textContent !== undefined) {
                output.textContent += text + '\n';
            } else {
                output.innerText += text + '\n';
            }
        };
    
    button.onclick = function () {
        if (output.textContent !== undefined) {
            output.textContent = '';
         } else {
            output.innerText = '';
        }
        print("Time to bake the cookies.");
        cookies.bake(10000);
    };
};

0 コメント:

コメントを投稿