JavaScriptで何ができるかメモ

JavaScriptについてわかった気になり、
かなり痛い目を見たのでメモします。

1.JavaScriptとは

動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるスクリプト言語。
（例）・GitHubでソースコードを見る
　　　・ライブ実行で実際の動きを見る

2.実際に何ができるのか

(1)JavaScriptでできること

・値を変数に格納する。
・文字列を操作する。
・Webページの動きを作る。など
-> これらはJavaScriptからすぐに使えるように、作られている
　　（ = Application Programming Interface (API) と呼ばれている）

(2)API（大まかに２種類）

1.ブラウザ API
・Webブラウザに組み込まれている。
・コンピュータを取り巻く環境からデータを取り出したりする。
　(例)DOM (Document Object Model) API,Geolocation API,Canvas,
　　　WebGL,HTMLMediaElementなど

2.サードパーティ API
・ブラウザには組み込まれていない。
・Web上からコードと情報を探さなければならない。
　(例)Twitter API,Google マップ APIなど

3.JavaScript を動かすと何が起きるのか

(1)ブラウザのセキュリティ
・それぞれのタブ内でコードは完全に分かれて実行されている。
　= タブで動いているコードは、
　　他のタブや他のWebサイトのコードに干渉できない。

(2)JavaScript の実行順序
・たいていは先頭から最後に向かって順番に実行されるが、
　どの順番で実行されるかということに気を付ける必要がある。
(例)


var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('名前を入力して下さい');
  para.textContent = 'Player 1: ' + name;
}

(3)インタープリタとコンパイルコード
【インタープリタ言語】
・JavaScriptはインタープリタ言語。
・コードが上から下に実行されてコードの実行結果がすぐに返ってくる。
・ブラウザが実行する前にコードを何らかの形に変換する必要はない。

【コンパイル言語】
・コンピュータで実行する前に他の形式に変換 (コンパイル) しなければならない。

(4)サーバーサイドコードとクライアントサイドコード
【サーバーサイドコード】
・サーバー上で実行され、結果がブラウザにダウンロードされて表示される。
・PHP、Python、Ruby、ASP.NET、そしてJavaScriptなど。

【クライアントサイドコード】
・ユーザのコンピュータ上で実行されるコード。
・Webページを見ているとき、ページのクライアントサイドコードがダウンロードされて、ブラウザで実行されて表示される。
・このJavaScriptモジュールのことを、クライアントサイドJavaScriptと言う。

(5)動的コードと静的コード
【動的】
・①クライアントサイドのJavaScript と、②サーバーサイドの言語。
①クライアント上のブラウザでHTMLのテーブルを生成したり、
　そのテーブルにサーバーから指示を受けデータを追加したり、
　Webページ上でユーザにテーブルを表示したりするなどして、動的にコンテンツを生成する。
②データベースからデータを取得して、動的にコンテンツを生成する。

【静的】
・動的に更新されるコンテンツを含まないWebページ。
・常に同じコンテンツを表示するページ。

4.ページにJavaScriptを追加する方法

(1)JavaScript をページの中に書く

▼▼index.html



<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Apply JavaScript example</title>
  </head>
  <body>
    <button>Click me</button>
    <script>
        function createParagraph() {
          var para = document.createElement('p');
          para.textContent = 'ボタンが押されました！';
          document.body.appendChild(para);
        }

        var buttons = document.querySelectorAll('button');

        for (var i = 0; i < buttons.length ; i++) {
          buttons[i].addEventListener('click', createParagraph);
        }
    </script>
  </body>
</html>

(2)JavaScript をページの外に書く

▼▼index.html


<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Apply JavaScript example</title>
  </head>
  <body>
    <button>Click me</button>
    <script src="script.js"></script>
  </body>
</html>

▼▼script.js


function createParagraph() {
  var para = document.createElement('p');
  para.textContent = 'ボタンが押されました！';
  document.body.appendChild(para);
}

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

(3) 【NG】 HTMLにJavaScriptのハンドラーを混ぜる

【NG】 HTMLの途中にJavaScriptのコードが書かれている例
▼▼index.html


<button onclick="createParagraph()">押してください</button>

▼▼script.js


function createParagraph() {
  var para = document.createElement('p');
  para.textContent = 'ボタンが押されました！';
  document.body.appendChild(para);
}

->なぜだめか
・HTMLをJavaScriptで汚している。
・onclick="createParagraph()"という属性を、
　JavaScript を適用したいボタン全てに書かなければならず、非効率。

【OK】純粋なJavaScriptでかくとこんな感じ
▼▼script.js


var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

(4)スクリプトの読み込み方針

・async：依存関係なしでスクリプトを単独で実行できる。
・defer：ブラウザで実行する順序で、対応するscript要素を配置する。