動的なコンテンツ（ボタンを押したら表示される内容が変わるなど）というものを見たことがあると思います．

これは多くの場合，JavaScriptによって実装されています．

JavaScript

よく間違えられるのですが，JavaとJavaScirpt は別物でインドとインドネシアぐらい違うので，情報を集めるときには注意が必要です．

JavaScript は script タグで囲われた場所に書くことができます．初日の例に書き加えます．

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    <h1>HTMLの勉強</h1>
    <p>
      HTMLはHyper Text Markup Languageといってハイパーリンクと呼ばれる
      <a href="https://google.com/">リンク</a> を張ることができます．
    </p>
    <script>
     alert("これがJavaScriptです");
    </script>
  </body>
</html>

f:id:Polyomino:20190125172918p:plain

for文やif文などの基本構文はc言語やJavaと似ています．

なので，JavaScript 特有の書き方を紹介します．

定数

定数の宣言は，const と書きます．

const hello = "こんにちは";

変数

変数の宣言は，let と書きます．

let hello = "こんにちは";
hello = "여보세요"

const とは違い，再代入が可能です．

古いレファレンスなどで，var という変数宣言が用いられている場合がありますが，スコープが直感的などバグの原因となりやすいので使うのを控えましょう．

関数

JavaScriptには複数の関数の書き方があります．

const hello = () => {
    console.log("Hello World");
};

function hello() {
    console.log("Hello world");
}

const hello = function() {
    console.log("Hello world");
}

どれも，helloという関数を作ることができ，hello() で実行することができます．

現在の主流は，一番上の書き方なので抑えておきましょう．

developer.mozilla.org

比較演算子

JavaScript の比較演算子は少し特殊です．以下の例を見てください．

'1'  ==  1         // true
1    == '1'        // true
0    == false      // true

左右で型が違った場合，自動で型を変換して比較を行うので，すべてtrueになります．なので，===を使います．

'1'  ===  1         // false
1    === '1'        // false
0    === false      // false

その他の構文

if 文や for 文はおおよそ他の言語と同じです．　出てきたタイミングで確認すればすぐにわかります．

DevTools

昨日 css の確認をするときに用いたDevToolsですが，JavaScriptの動作の確認にも使うことができます．

一番上の例の alert("これがJavaScriptです"); を console.log("これがJavaScriptです"); に書き換えてみてください．そして DevTools を Console タブに切り替えると，以下のようになります．

console.log

consoleには，エラーやデバッグのメッセージを出すことに使うことができます．

余力があれば，ブレークポイントなどの使い方も勉強すると良いと思います． developers.google.com

fizzbuzz

プログラミングの練習問題としてfizzbuzzというものがあります．

プレイヤーは円状に座る。最初のプレイヤーは「1」と数字を発言する。次のプレイヤーは直前のプレイヤーの次の数字を発言していく。ただし、3で割り切れる場合は「Fizz」、5で割り切れる場合は「Buzz」、両者で割り切れる場合（すなわち15で割り切れる場合）は「Fizz Buzz」を数の代わりに発言しなければならない。発言を間違えた者や、ためらった者は脱落となる。Fizz Buzz - Wikipedia

すなわち，

3の倍数のときは Fizz
5の倍数のときはBuzz
15の倍数のときは FizzBuzz

と出力するという問題です．JavaScriptでFizzBuzzを書くとこのようになります．

for (let i = 1; i <= 30; i++) {
  if (i % 5 === 0 && i % 3 === 0) {
    console.log("FizzBuzz");
  } else if (i % 5 === 0) {
    console.log("Fizz");
  } else if (i % 3 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

CやJavaをしていれば，容易に理解することができると思います．

まとめ

ブラウザで動く言語はJavaではなくJavaScript

DevToolsのコンソールで確認．

基本的構文

定数（const）
変数（let）
関数（アロー関数）
比較演算子（===）

undefined

課外活動３

JavaScript

定数

変数

関数

比較演算子

その他の構文

DevTools

fizzbuzz

まとめ