HTML5 - JavaScript Functions and Objects: Serious JavaScript - Thinking about properties

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)、NOW SHOWING AT THE WEBVILLE CINEMA(No. 2524) を取り組んでみる。

NOW SHOWING AT THE WEBVILLE CINEMA(No. 2524)

コード(Emacs)

HTML5

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

<script src="sample1.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 cinema = {
    title: 'TITLE',
    genre: 'GENRE',
    rating: 5,
    showtimes: ['10:00am', '10:00pm'],
};

let output = () => {
    Object.keys(cinema).forEach((key) => {
        pre0.textContent += `${key}: ${cinema[key]}\n`;
    });
};
    

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

output();