JavaScript - Building an app - Bringing it All Together(array, index, object)

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 8.(Building an app - Bringing it All Together)の SHARPEN YOUR PENCIL(No. 5074)を取り組んでみる。

SHARPEN YOUR PENCIL(No. 5074)

コード(Emacs)

HTML5

<link rel="stylesheet" href="sample2.css">
<div id="board">
  <div id="messageArea"></div>
  <table>
    <tr>
      <td id="00"></td><td id="01"></td><td id="02"></td><td id="03"></td><td id="04"></td><td id="05"></td><td id="06"></td>
    </tr>
    <tr>
      <td id="10"></td><td id="11"></td><td id="12"></td><td id="13"></td><td id="14"></td><td id="15"></td><td id="16"></td>
    </tr>
    <tr>
      <td id="20"></td><td id="21"></td><td id="22"></td><td id="23"></td><td id="24"></td><td id="25"></td><td id="26"></td>
    </tr>
    <tr>
      <td id="30"></td><td id="31"></td><td id="32"></td><td id="33"></td><td id="34"></td><td id="35"></td><td id="36"></td>
    </tr>
    <tr>
      <td id="40"></td><td id="41"></td><td id="42"></td><td id="43"></td><td id="44"></td><td id="45"></td><td id="46"></td>
    </tr>
    <tr>
      <td id="50"></td><td id="51"></td><td id="52"></td><td id="53"></td><td id="54"></td><td id="55"></td><td id="56"></td>
    </tr>
    <tr>
      <td id="60"></td><td id="61"></td><td id="62"></td><td id="63"></td><td id="64"></td><td id="65"></td><td id="66"></td>
    </tr>
  </table>
  <div id="form0">
    <input id="input0" type="text" id="guessInput0" placeholder="A0">
    <button id="fireButton">Fire!</button>
  </div>
</div>

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

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

CSS

<link rel="stylesheet" href="sample2.css">
<div id="board">
  <div id="messageArea"></div>
  <table>
    <tr>
      <td id="00"></td><td id="01"></td><td id="02"></td><td id="03"></td><td id="04"></td><td id="05"></td><td id="06"></td>
    </tr>
    <tr>
      <td id="10"></td><td id="11"></td><td id="12"></td><td id="13"></td><td id="14"></td><td id="15"></td><td id="16"></td>
    </tr>
    <tr>
      <td id="20"></td><td id="21"></td><td id="22"></td><td id="23"></td><td id="24"></td><td id="25"></td><td id="26"></td>
    </tr>
    <tr>
      <td id="30"></td><td id="31"></td><td id="32"></td><td id="33"></td><td id="34"></td><td id="35"></td><td id="36"></td>
    </tr>
    <tr>
      <td id="40"></td><td id="41"></td><td id="42"></td><td id="43"></td><td id="44"></td><td id="45"></td><td id="46"></td>
    </tr>
    <tr>
      <td id="50"></td><td id="51"></td><td id="52"></td><td id="53"></td><td id="54"></td><td id="55"></td><td id="56"></td>
    </tr>
    <tr>
      <td id="60"></td><td id="61"></td><td id="62"></td><td id="63"></td><td id="64"></td><td id="65"></td><td id="66"></td>
    </tr>
  </table>
  <div id="form0">
    <input id="input0" type="text" id="guessInput0" placeholder="A0">
    <button id="fireButton">Fire!</button>
  </div>
</div>

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

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

JavaScript

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

let view = {
    displayMessage : (msg) => {
        let messageArea = document.querySelector('#messageArea0');
        messageArea.textContent = msg;
    },
    displayHit: (loc) => {
        let cell = document.getElementById(loc);
        cell.setAttribute('class', 'hit');
    },
    displayMiss: (loc) => {
        let cell = document.getElementById(loc);
        cell.setAttribute('class', 'miss');
    }
};

let an = {A:0, B:1, C:2, D:3, E:4, F:5, G:6};

let ships = [{locations: ['31', '41', '51'], hits: ['', '', '']},
             {locations: ['14', '24', '34'], hits: ['', 'hit', '']},
             {locations: ['00', '01', '02'], hits: ['hit', '', '']}];

let output = () => {
    let ship2 = ships[1],
        locations = ship2.locations;

    p(`Location is ${locations[1]}`)

    let ship3 = ships[2],
        hits = ship3.hits;

    if (hits[0] === 'hit') {
        p('Ouch, hit on third ship at location one');
    }

    let ship1 = ships[0];

    hits = ship1.hits;
    hits[2] = 'hit';

    ships.forEach((ship) => {
        let locations = ship.locations,
            hits = ship.hits;
        locations.forEach((loc, i) => {
            if (hits[i] === 'hit') {
                view.displayHit(loc);
            } else {
                view.displayMiss(loc);
            }
        });
    });
};

let clear = () => {
    pre0.textContent = '';
    ships.forEach((ship) => {
        let locations = ship.locations,
            hits = ship.hits;
        locations.forEach((loc, i) => {
            let cell = document.getElementById(loc);
            cell.removeAttribute('class');
        });
    });
};

btn0.onclick = output;
btn1.onclick = clear;

output();