8.1 Javascriptを触ってみよう

# ■JavaScript とは

クライアント側（Web ブラウザ側）で実行されるプログラミング言語です。  
動的に Web ページの内容を書き換えたり、入力値をチェックなどを行うことが出来ます。  
HTML だけでは動く Web ページはできませんが、JavaScript を使うと Web ページにさまざまな動きを入れることができるようになります。

# ■ブラウザのシェア

ブラウザによるJavaScriptの挙動の違いは、把握してませんし、ここでは説明しませんが、
一応、シェアくらいは確認しておきましょう。
[2021年10月webブラウザシェア](https://shiftasia.com/ja/column/2021%E5%B9%B410%E6%9C%88web%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%B7%E3%82%A7%E3%82%A2/)

# ■Web で JavaScript を試す

ウェブサイトで JavaScript を簡単に試すことができる環境があります。
たくさんあります。  
まずは、[Codepen](https://codepen.io/)をさわってみてください。

# ■JavaScript を書く場所

CSS を記載する時と似ていますが、

- head タグ内(又は body タグ内)に書く
- 別ファイルに書く

というやり方があります。

# ■JavaScript を書く場所(body タグ内記載)

まずは、簡単なサンプル(コンソールにログを出力する例)を見てみましょう。
`<script`から始まり`</script>`で終わっている部分です。

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>コンソールログ出力</h1>
    <!-- ここから -->
    <script type="text/javascript">
      console.log("test");
    </script>
    <!-- ここまで -->
  </body>
</html>
```

# ■JavaScript を書く場所(別ファイルに書く)

先程の例の`ここから`から`ここまで`部分を以下のように書き換えます。
script.js 内に`console.log("test");`を記述すれば、
先程の例と同じように動作します。

```html
<script src="script.js"></script>
```

# ■JavaScript のサンプル１

JavaScript の構文基礎を学ぶ前に少し進んでサンプルを見てみましょう。  
ブラウザで表示してみてください。

処理の流れを説明します。

1. test という id を持つ要素を取得します。
1. 1.で取得した要素のテキストを alert として表示します。

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 id="test">あいうえお<h1>
  <script type="text/javascript">
    let element = document.getElementById('test');
    alert(element.textContent);
  </script>
</body>
</html>
```

さらに上の例を変更します。  
ボタンを追加します。

処理の流れを説明します。

1. ボタンをクリックすると`henkou`という関数が呼ばれます。
1. `henkou`という関数内で、test という id を持つ要素を取得します。
1. 2.で取得した要素のテキストを書き換えます。

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 id="test">あいうえお<h1>
  <button onClick=henkou()>クリックして！</button>
  <script type="text/javascript">
    function henkou() {
      let element = document.getElementById('test');
      element.textContent = 'かきくけこ';
    }
  </script>
</body>
</html>
```

さらに上の例を変更します。  
テキストを追加します。

処理の流れを説明します。

1. ボタンをクリックすると`henkou`という関数が呼ばれます。
1. `henkou`という関数内で、test という id を持つ要素を取得します。また text1 という id をもつ要素を取得します。
1. 2.で取得した test 要素のテキストを text1 に入力した内容で書き換えます。

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 id="test">あいうえお<h1>
  <button onClick=henkou()>クリックして！</button>
  <input type="text" value="" id="text1" />
  <script type="text/javascript">
    function henkou() {
      let element = document.getElementById('test');
      let txt = document.getElementById('text1');
      console.log(txt.value);
      element.textContent = txt.value;
    }
  </script>
</body>
</html>
```

# ■JavaScript のサンプル２

style を変更する JavaScript を見てみましょう。

処理の流れを説明します。

1. ボタンをクリックすると`henkou`という関数が呼ばれます。
1. `henkou`という関数内で、test という id を持つ要素を取得します。
1. 2.で取得した要素の`background-color`に何が指定されているか取得します。
1. 3.で取得した値が red の場合は設定なしに変更し、設定なしの場合は red に変更しています。

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 id="test">あいうえお<h1>
    <button onClick=henkou()>背景を変えます。</button>
  <script type="text/javascript">
    function henkou() {
      let element = document.getElementById('test');
      let color = element.style.getPropertyValue("background-color");
      if (color === 'red') {
        element.style.setProperty("background-color", "");
      } else {
        element.style.setProperty("background-color", "red");
      }
    }
  </script>
</body>
</html>
```

# ■scriptタグを書く場所

前半にscriptタグをbodyタグ内に記載する例を説明しました。
headタグ内にも記載できます。

どちらが良いのかということを調べてみると、bodyタグの最後に記載するのが
良いという意見が多いようです。
理由は、処理順序によるもので`HTMLは上から下へ処理されるから`というものです。

以下のサンプルコードはエラーになります。
なぜだか分かりますか。

```html
<html lang="ja">
 <head>
   <meta charset="UTF-8">
   <script>
     let hello = document.getElementById('show');
     hello.textContent = 'ハロー！';
   </script>
 </head>
 <body>
   <p id="show"></p>
 </body>
 </html>
```

scriptタグでid=showの要素にアクセスしていますが、その要素はまだ読み込まれていないので
エラーになるものです。

書き換えると、以下のようになり、エラーとならないはずです。

```html
<html lang="ja">
 <head>
   <meta charset="UTF-8">
 </head>
 <body>
   <p id="show"></p>
   <script>
     let hello = document.getElementById('show');
     hello.textContent = 'ハロー！';
   </script>
 </body>
 </html>
```

ちなみに、HTML内にJavascriptを書かず、dferを付けると全て読込後に
実行されるように調整できるようですね。

```
 <script src="sample.js" defer></script>
```

https://codeaid.jp/js-load/