2017年4月8日土曜日

開発環境

Head First HTML5 Programming (Elisabeth Robson (著)、Eric Freeman (著)、O'Reilly Media)の Chapter 3.(Events, Handlers and All that Jazz: A Little Interaction)、Getting the song name の SHARPEN YOUR PENCIL(No. 1948) を取り組んでみる。

SHARPEN YOUR PENCIL(No. 1948)

コード(Emacs)

HTML5

<input id="songTextInput0" value="Blue Suede Strings, by Elvis Pagely">

<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 handleButtonClick = () => {
    let textInput = document.querySelector('#songTextInput0'),
        songName = textInput.value;

    logAlert(`Adding ${songName}`);
};
btn0.onclick = () => {
    handleButtonClick();
};

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











						

0 コメント:

コメントを投稿

Comments on Google+: