JavaScript - A trip to Objectville - Understanding Objects(properties, functions(arrow functions))

Head First JavaScript Programming

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Safari(Web browser)

Head First JavaScript Programming (Eric T. Freeman (著)、Elisabeth Robson (著)、O'Reilly Media)の Chapter 5.(A trip to Objectville - Understanding Objects)、の BE THE BROWSER(No. No. 3288)を取り組んでみる。

BE THE BROWSER(No. No. 3288)

コード(Emacs)

HTML5

<pre id="output0"></pre>
<button id="run0">run</button>
<button id="clear0">clear</button>

<script src="sample5.js"></script>

JavaScript

let btn0 = document.querySelector('#run0'),
    btn1 = document.querySelector('#clear0'),
    pre0 = document.querySelector('#output0'),
    p = (x) => pre0.textContent += x + '\n';

let makeSong = (spec) => {
    let that = {},
        name = 'Walk This Way',
        artist = 'Run-D.M.C.',
        minutes = 4,
        seconds = 3,
        genre = '80s',
        playing = false,
        play = () => {
            if (!playing) {
                playing = true;
                p(`Playing ${name} by ${artist}`);
            }
        },
        pause = () => {
            if (playing) {
                playing = false;
            }
        };

    that.play = play;
    that.pause = pause;

    return that;
};

let output = () => {
    let song = makeSong();

    song.play();
    song.pause();
};

btn0.onclick = output;
btn1.onclick = () => pre0.textContent = '';

output();