JavaScript 入門講座

JavaScript 第５回 / 全６回

JavaScript 入門講座 第５回

BOM(Browser Object Model)

  • ブラウザの情報に関するオブジェクトモデル
  • ブラウザの情報を取得、操作する枠組み
JavaScript 入門講座 第５回

やってみよう１！(BOM)

<html>
    <body>
        <div>Hello!</div>
    </body>
    <script type="text/javascript">
        console.log(location.href);
    </script>
</html>
JavaScript 入門講座 第５回

やってみよう２！(BOM)

５秒後に別のページへジャンプ。

<html>
    <body>
        <div>Hello!</div>
    </body>
    <script type="text/javascript">
        function jump() {
            location.href = "http://www.google.co.jp/";
        }

        setTimeout(jump, 5000);
    </script>
</html>
JavaScript 入門講座 第５回

イベント１

  • あるイベントが発生したときに、 JavaScript プログラムを起動させることが出来ます。
  • これをイベントの登録などと表現し、プログラムが起動することを発火などと表現します。
<html>
<body>
<input type="button" value="button" onclick="buttonClick()">
</body>
<script type="text/javascript">
    function buttonClick(){
        alert('Click');
    }
</script>
</html>
JavaScript 入門講座 第５回

イベント２

HTML と JavaScript ファイルは、別ファイルに分けておきたい。

<html>
<body>
<input type="button" value="button" id="myid">
</body>
</html>

function buttonClick(){
    alert('Click');
}

const button = document.getElementById('myid');
button.addEventListener('click', buttonClick);

こうすることで、 HTML作成者（デザイナーさん）と JavaScript作成者（プログラマー）で分担作業がしやすくなります。

JavaScript 入門講座 第５回

課題

  1. 「Hello World」が表示される画面を作り、ボタンを押すと、その文字が「Good Evening」に変わる画面を作ってみましょう。
  2. 余力があれば、ボタンを押すごとに、「Hello World」と「Good Evening」が交互に入れ替わるようにしてみましょう。
JavaScript 入門講座 第５回

課題発表

  1. 下記のような画面を作ってください。
  2. 各「Add」ボタンを押すと、押した回数分金額を加算し、その値を Total Price に表示してください。

JavaScript 入門講座 第５回

ヒント１

まずは HTML を作成しましょう。

<p><span style="color: #ff0000;"><strong>購入する品をクリックしてください</strong></span></p>
<h3>ドライバー 1,000円<button id="btn1">Add</button></h3>
<br />
<h3>Total Price</h3>
<h3 id="price">0円</h3>

※この HTML は配布します。

JavaScript 入門講座 第５回

ヒント２

ボタンを押したら合計金額を計算して見ましょう。

let price = 0;

function btn1Click() {
    price += 1000;
    console.log(price);
}

const elem1 = document.getElementById('btn1');
elem1.addEventListener('click', btn1Click);
JavaScript 入門講座 第５回

ヒント３

計算できたら、それを画面上に表示してみましょう。

function display() {
    const elemPrice = document.getElementById('price');
    elemPrice.innerText = price + '円';
}
JavaScript 入門講座 第５回

ヒント４

１品目で計算できたら、品目数を増やして計算できるようにしましょう。

JavaScript 入門講座 第５回

発展課題

余力があれば、以下のことにも挑戦してみましょう。

  1. 消費税を一律 10% で計算する。
  2. 品物を減らせるようにする。
  3. カートに入っている以上には減らせないようにする。
JavaScript 入門講座 第５回

$theme: gaia template: invert