（クライアント側）JavaScriptの活用

３ ライブラリ（jQuery）を使った書き方

• JavaScriptライブラリとして多数のものが作られ公開されている。大別すると、以下の２つがある。
  • クライアント用（ブラウザの中で動作することを前提とする）
  • サーバ（または独立動作するプログラム）用 (その多くは、node.js という処理系を対象としたもので、 npm というパッケージマネージャで管理される。)
• JavaScriptライブラリの代表格である jQuery （クライアント用）については、
  • 様々な入門的ページと、
  • 日本語リファレンスを参照のこと。

scriptタグ

ライブラリの読み込み

• 開発元などからダウンロードしてHTMLファイルと同じ場所に置いておくのが一般的だが、 以下の例のように、CDNを参照するという方法もある。

• ライブラリはScriptタグの書き方（図）のうち下の外部ファイル指定による方法で読み込む。

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  

    script src="https://code.jquery.com/jquery-3.2.1.min.js"
  

  アドレスをコピー

• 上記の例はバージョン番号が古い可能性もあるので、そのまま写さず、チェックしてからにすること。
• Google Microsoft などの著名企業もCDNを提供しているので利用できる。
• いずれの場合も、ダウンロードサイト等のページ内で、リンク先のアドレスをコピー（右図はIE画面での例）して、HTMLやSLIMに貼り付けるといい。

補足 何をどこから読み込むか

1. 何を：
   • ライブラリは多数あるので何を使うかを選び出すことが 第一歩の難しい技術でもある
   • サーバ側のライブラリはnpmのリポジトリにまとまっているが、
     クライアント側については現在は集大成された場所がないので、 用途に応じて検索で見つけるしかないのが現状。
   • jQueryはその中で最もポピュラーなもの。ただし、 jQuery互換で機能や軽量性といった改良を行った 派生ライブラリなども存在している
     （この資料のページに読み込んでいるZepto もその１つ）。
     • 注）昨年頃 Zeptoというランサムウェアが話題になったことがあるがそれとは無関係。
       
2. どこに置く：
   • ダウンロードして、HTMLと同じフォルダ（か、そこから 辿れることができるフォルダ；例えば ./js ./lib の ようなサブフォルダ）に置く。
     と、src属性として、ファイル名や相対パス名を与えることになる。
   • src属性として url（http://　などから始まる）を与えて、 ネットの向こうにあるものを随時（ページを表示する際に） 転送して使わせることもできる。
     開発元の資源を使ってもいいが、CDNを使うのが （使う側の速度の点でも、開発元サイトの負荷軽減の点でも）ベターだろう。
3. どのバージョン？
   • 古くから使っているとか、古いIEも対象にしたいという事情 がなければ、最新版でいい。
     • jQuery2以降は対象とするブラウザを「モダンブラウザ」に限定している。

   ４種類の版

   • jQuery３には右図下のようにCOREの機能のうち一部をそぎ落とした「slim ビルド」もあり、 当面の入門的使用にはこれで十分。
   • 殆どのJavaScriptライブラリは、以下のように（同じ内容で）２種類の組み方のものが公開されているが、 （動作させるだけなら）後者（___.min.js のような名前であることが多い）を使ってればいいだろう。
     • 人間が読める（実行もできる）、整形された版 （uncompressed, pretty, beautified などと形容される）
     • スペース、改行、字下げ、コメントを削除してコンパクトにした版（compressed, minified, uglified などと形容される）

ネイティブ関数

セレクタの活用

• jQueryでは、関数 jQuery() または その略記型である関数 $() を活用して 多くのことができる。
• 以下の例では $(）に CSSセレクタを文字列で渡すことで要素の選択を行っている。
• getElements…で始まるようなネイティブ関数は使わないでいい

CSSセレクタ

• 選択する要素が１つであっても複数であっても呼び出し方は（それ以降の使い方も）変わりがない。
  

要素に対する処理

• 以下の例では、要素に対して、.css(スタイルを指示するオブジェクトx) メソッドや、
  .text(文字列）メソッドを呼び出して、要素に対する操作を行っている。

    $('#clock').css({'font-size':'100px'});
    $('#clock').text(new Date().toLocaleString());
  

  （=>ここまでのサンプルのソース）

• なお、サンプルでは.cssメソッドによる文字サイズ設定は一回だけ、
  SPAN内の文字列変更は定期的に、という違いがあるので別々に呼んだが、

• １つの要素に一回に複数の処理をするならば、
  以下のようにメソッドチェーンで記述することができる。
  (一行に書くこともできるが長くなるので行を分けた。

    $('#clock').
        css({'font-size':'100px'}).
        text(new Date().toLocaleString());