HTML5 - JavaScript Functions and Objects: Serious JavaScript - create object(function)

Head First HTML5 Programming

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• Safari(Web browser)

Head First HTML5 Programming (Elisabeth Robson (著)、Eric Freeman (著)、O'Reilly Media)の Chapter 4.(JavaScript Functions and Objects: Serious JavaScript)、CODE MAGNETS(No. 2661) を取り組んでみる。

CODE MAGNETS(No. 2661)

コード(Emacs)

HTML5

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

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

JavaScript

let btn0 = document.querySelector('#run0'),
    btn1 = document.querySelector('#clear0'),
    pre0 = document.querySelector('#output0');

let logAlert = (msg) => {
    pre0.textContent += msg + '\n';
    alert(msg);
};
let logPrompt = (msg) => {
    pre0.textContent += msg + '\n';
    return prompt(msg);
};

let getTimeFromString = (timeString) => {
    let theTime = new Date(),
        time = timeString.match(/(\d+)(?::(\d\d))?\s*(p?)/);

    
    theTime.setHours(parseInt(time[1], 10) + (time[3] ? 12 : 0));
    theTime.setMinutes(parseInt(time[2], 10) || 0);
    
    return theTime.getTime();
};

let Woof = (title, genre, rating, showtimes) => {
    let that = {};

    that.title = title;
    that.genre = genre;
    that.rating = rating;
    that.showtimes = showtimes;
    that.getNextShowing = () => {
        let now = new Date().getTime();

        for (let i = 0; i < showtimes.length; i += 1) {
            let t = getTimeFromString(showtimes[i]);
            if ((t - now) > 0) {
                return `Next showing of ${title} is ${showtimes[i]}`;
            }
        }
    };
    return that;
};

let output = () => {
    let movie1 = Woof('Plan 9 from Outer Space',
                      'Cult Classic',
                      5,
                      ['3:00pm', '7:00pm', '11:00pm']);
    Object.keys(movie1).forEach((key) => {
        pre0.textContent += movie1[key] + '\n';
    });
    pre0.textContent += movie1.getNextShowing() + '\n';
};


btn0.onclick = output;

btn1.onclick = () => {
    pre0.textContent = '';
};

output();