HTML5 - Introducing JavaScript and the DOM: A Little Code(Getting Expressive)

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 2.(Introducing JavaScript and the DOM: A Little Code)、Getting Expressive の EXERCISE(No. 1351) を取り組んでみる。

EXERCISE(No. 1351)

コード(Emacs)

HTML5

<button id="run0">run</button>
<div id="output0"></div>

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

JavaScript

let div = document.querySelector('#output0'),
    btn = document.querySelector('#run0'),
    res1 = (9 / 5) * 10 + 32,
    res2 = 'Number' + ' ' + '2',
    res3 = 5 >= 5,
    res4 = 'blue' !== 'pink',
    res5 = 2 * Math.PI * 3;

btn.onclick = () => {
    div.innerHTML = `${res1}: ${res1 === 50}<br>` +
        `${res2}: ${res2 === 'Number 2'}<br>` +
        `${res3}: ${res3 === true}<br>` +
        `${res4}: ${res4 === true}<br>` +
        `${res5}: ${res5 === 18.84955592153876}<br>`;
};