JavaScriptで何ができるかメモ

#JavaScriptで何ができるかメモ

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

参考サイト：[MDN web docs / JavaScript とは
](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript)



##1.JavaScriptとは
動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるスクリプト言語。
（例）・[GitHub](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html)でソースコードを見る
　　　・[ライブ実行](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html)で実際の動きを見る

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

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

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

##3.JavaScript を動かすと何が起きるのか
<b>(1)ブラウザのセキュリティ</b>
・それぞれのタブ内でコードは完全に分かれて実行されている。
　= タブで動いているコードは、
　　他のタブや他のWebサイトのコードに干渉できない。

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

```js

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

para.addEventListener('click', updateName);

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

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

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


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

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


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

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


##4.ページにJavaScriptを追加する方法
####(1)JavaScript をページの中に書く
▼▼index.html

```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

```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

```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のハンドラーを混ぜる
<b> 【NG】 HTMLの途中にJavaScriptのコードが書かれている例</b>
▼▼index.html

```html

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

▼▼script.js

```js

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

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


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

```js

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

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

####(4)スクリプトの読み込み方針
・`async`：依存関係なしでスクリプトを単独で実行できる。
・`defer`：ブラウザで実行する順序で、対応するscript要素を配置する。