JavaScript入門3

はじめに（資料紹介）

別の授業でもこの周辺の話はしているので参考にして下さい。

また、リファレンス的なページ（代表的なもの）も紹介しておく

以下，クリックに対する応答を題材にサンプル提示する。これをを読み解きながら基本を学びましょう

サンプル1 （ネイティブ版）

<!doctype html>
<span></span>
<span></span>
<span></span>
<style>
span {
	background-color:yellow;
	display: inline-block;
	width: 30px; height: 30px;
	margin: 10px;
}
.on {background-color: red; width: 100px;}
}
</style>
<script>
document.querySelectorAll('span').forEach((x)=>{
	x.addEventListener('click',(ev)=>{
		document.querySelectorAll('span').forEach((x)=>x.classList.remove('on'))
		ev.target.classList.add('on')
	})
})
</script>

解説１（タグとCSSについて）

空の領域を作るときに DIV SPAN　といったタグが使われる。
- 使い分けについては、検索してみること
- 元来、HTMLは文書（右図のように流れる）のレイアウトのために作られた（言語を継承している）ことを意識しておくと理解しやすいだろう。
  - SPANはその中に納まるもの（改行を含まない）
  - DIVは複数行にまたがるもの（改行を含むこともある）
SPANに対する width指定が意味を持つためには、 display: inline-block; が指定されている必要がある。
- 配置にかかわる（注目すべき）CSS属性は右図の２つ。

解説２（スクリプトについて）

class名 ‘on’ をつけたりはずしたりすることで、外見の変化を生み出している。
前回の getElement系ネイティブ関数以外に、 querySelector系の関数の使用例でもある。
- 後述の jQueryの $関数のような指定方法をネイティブで使えるよう後から追加された関数
- CSSと同じ記法でセレクタを指定できる。
- 最初に見つかった要素を返す関数と、要素をすべて（配列で）返す関数がある。
JavaScriptでは、C,Javaと同様の
```
  for(i=0 ; i<n ; i++)
```
のようなループも（従来から）あるが、
```
  [1,2,3].forEach(n=>console.log(n))
```
というループが今後主流になるだろう。
- なお、上の例の　[1,2,3] は、配列（データの集合体の一種）
- forEach を高階関数と呼び、
  括弧の中（矢印を使う式）をラムダ式、無名関数などと呼ぶ。
- 無名関数の書き方として、上の例では、アロー => を使った記法（アロー記法ラムダ式などと呼ぶ）を使っているが、
- キーワード function を使った（従来の）書き方もある。
```
[1,2,3].forEach(function(n){console.log(n)})
```
また、ここでは、addEventListener関数で、特定の要素に、特定のイベントが発生した際の処理を登録しておく書き方を使っている。
- HTMLタグの onClick属性として（前回例示した）指定する方法では応答処理を文字列（JavaScriptの断片式）で示したが、
  この関数で指定する方法だと、プログラムとして意味のある値（関数名や無名関数）を渡すぶん、安全性が高い。
- また、複数のイベントリスナーを登録できるなど、汎用性も高い。
要素に対してクラス名を追加したり削除する（ネイティブの）方法はを理解するために、F12（開発ツール/コンソール）で、
```
  document.body.classList
```
で表示されるものを確認されたし。
- これは classListで、
- add, remove などのメソッドを持つ。
- なお、要素のid（値は１つだけ）は、id属性で表示および変更（代入すればいい）が可能。
画面でいずれかの要素をクリックした結果、　　その要素に（データとして）いくつかの変化が生じていることを、開発ツール/DOMエクスプローラ（またはElements）で確認しておくこと。
（ブラウザの表示画面で要素を右クリックして「検証」を選ぶと表示される）
- 当該要素にクラス名が不可されていること
- CSS属性（背景色など）のいくつかが、新たに有効になり、
- またその指定により上書きされて無効になっている（打消し線で表示される）こと
上記例でいくつか、関数の引数として無名関数やラムダ式を渡す例があったが、これらの代わりに、予め名前つきで定義しておいた関数の、関数名を渡すという使い方もできる。
```
  function ccc() {
      //... 内容省略
  }
  //...
  document.body.addEventListener('click', ccc)
```
- 実際には（この例では）関数cccは、引数を１つとることができ、
  呼び出されるとEventオブジェクトが渡される
  （最初の例でのラムダ式はそれを使っている）。
- 前述のサンプル１（かなり入れ子構造が複雑）を、この方針に沿って書き換えた版も確認ください。
アロー記法で、引数を囲む丸括弧や、処理内容を囲むブレース（右図では青で書いた）は、その中身が１つだけの時には省略できることにも注意。

サンプル2 （jQuery版）

上半分はサンプル１と同じで、Script部だけ変更した。（ソース）

<!doctype html>
<span></span>
<span></span>
<span></span>
<style>
span {
	background-color:yellow;
	display: inline-block;
	width: 30px; height: 30px;
	margin: 10px;
}
.on {background-color: red; width: 100px;}
}
</style>
<script src="http://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script>
function c(ev){
	$('span').removeClass('on')
	$(ev.currentTarget).addClass('on')
}
$(()=>{
	$('span').click(c)
})
</script>

JavaScriptライブラリの代表格である jQueryを使った。
最初の Scriptタグの srcパラメータに、外部ファイルを指定し別途読み込むよう指示した。
外部ファイルは、以下のような場所（のいずれか）を想定して使う。
- HTMLと同じ場所（別フォルダである場合を含む）
- 開発元のWebサイト（のダウンロードページ等から辿る）
- [CDN]（//ja.wikipedia.org/wiki/コンテンツデリバリネットワーク)（この例では「jquery　CDN」で検索して見つけた引用元）
サイトにあるJSファイルのどれを選んだ読み込むか、については、とりあえずは「最新版、slim、compressed(minified) 」を選んでおくといいだろう（右図) 。

jQueryの典型的使い方

$() の中に関数を書く（上記例では最後の３行）。
- ページの読み込みが終了し用意が整ったタイミングでその関数を実行せよ、という意味（初期設定など）。
- 上の例ではイベントハンドラーの設定を行っている。
$() の中に文字列を書く。
- DOMノードの取得を行う関数として動作する。
- １つまたは複数の要素（ノード）をデータとして保持する「jQueryオブジェクト」が値として返される。
- 引数として渡す文字列はCSSセレクタと同じ表記のもの。
- この jQueryオブジェクトに対するメソッド呼出で、様々な操作（値の取得、設定など）ができる。
  - 上の例では addClass, removeClass, click がそれに相当する。
    （click は右図のように bindによる呼び出しを簡略にしたもの）
- 対象となる要素が１つでも複数でも区別なく同じ呼び方ができる。
- また、多くの（特に設定系の）メソッドは、そのjQueryオブジェクトをそのまま値として返すので、連続でメソッドを呼び出す（メソッドチェーン）ことが可能。
$() の中に要素。
- 上の例では、ev.currentTargetの部分がそれに相当する。
- 要素１つからなるjQueryオブジェクトを生成して返す。

jQueryの勘所

要約すると以下のようになる。

取得したDOM要素が単数でも複数でも処理が同じ
- DOM要素をjQueryオブジェクトに包み込み、
- そのjQueryオブジェクトに対する処理としてあらゆることを記述するので。
多くの処理メソッド（値を取得するメソッドは当然除かれる）が、レシーバ（処理の対象）となったjQueryオブジェクトを値として返す。
- 何種類もの処理を（１つのjQueryオブジェクトに対して）行うときに、
  メソッドチェーンとして記述できて、記述が楽になる。

なお、jQueryを使ってもJavaScriptの関数の使い方の原理は変わらない。
たとえば jQueryオブジェクトに対して clickを呼び出す（イベントハンドラを登録する）とき、
右図の３つの書き方が可能。
（詳しくは jQueryのリファレンスに書いてあるが）イベントハンドラが呼び出される際に、 Eventオブジェクトが引数として渡される。
- イベント処理関数を書くときに、引数の括弧内にそれを受け取る仮引数（変数のようなもの）の名前を書いておくといい。
  （使わないなら省略してもエラーにはならないが）
- 上記の例では ev という名前で受け取っていて、
- ev.currentTarget という式で、イベントが発生した DOM要素を取得している（それを即座に $() で囲んで jQueryオブジェクトに変換している）。
- $(ev.currentTarget) は、 $(this) で代用できることも多いが、アローによる記法を使ったときに this の値が予想外のものになることもあるので、上記の記法を推奨しておく。

付録プログラムを使わないアプローチ

‘click’ の代わりに ‘mouseOver’/’mouseOut’ などの　イベントを使う方法もある。
- jQueryでの解説がいくつかある。
ただし、それと同じ機能は、以下のように（ソース）CSSだけで実現できることも知っておくといいだろう。

<!doctype html>
<span></span>
<span></span>
<span></span>
<style>
span {
	background-color:yellow;
	display: inline-block;
	width: 30px; height: 30px;
	margin: 10px;
}
span:hover {background-color: red; width: 100px;}
}
</style>

今日の課題

今日学んだことを活用して
各自、何かかっこいいページを
作ってみる。

JavaScript入門3

はじめに（資料紹介）

サンプル1 （ネイティブ版）

解説１（タグとCSSについて）

解説２（スクリプトについて）

サンプル2 （jQuery版）

jQueryの典型的使い方

jQueryの勘所

付録 プログラムを使わないアプローチ

今日の課題

付録プログラムを使わないアプローチ