情報処理概論 第11回 12/15

Introduction to the Information Systems

前回の要約

• JavaScriptでDOM要素にアクセスしたり変更を加えたりする 方法を学んだ。
• タイマーを使って一定時間間隔で（または一定時間後に１回）
  所定の動作をさせる方法も学んだ。
• 実習として時計を作ってみた（宿題とした）

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

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

ライブラリの読み込み

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

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

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

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

  

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

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

1. 何を：
   • ライブラリは多数あるので何を使うかを選び出すことが 第一歩の難しい技術でもある
   • サーバ側のライブラリはnpmのリポジトリにまとまっているが、
     クライアント側については現在は集大成された場所がないので、 用途に応じて検索で見つけるしかないのが現状。
   • jQueryはその中で最もポピュラーなもの。ただし、 jQuery互換で機能や軽量性といった改良を行った 派生ライブラリなども存在している
     （この資料のページに読み込んでいる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(スタイルを指示するオブジェクトx) メソッドや、
  .text(文字列）メソッドを呼び出して、要素に対する操作を行っている。

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

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

• なお、サンプルでは.cssメソッドによる文字サイズ設定は一回だけ、
  SPAN内の文字列変更は定期的に、という違いがあるので別々に呼んだが、
• １つの要素に一回に複数の処理をするならば、
  以下のようにメソッドチェーンで記述することができる。
  (一行に書くこともできるが長くなるので行を分けた。

• なお、JavaScriptでは
  メソッドチェーンを複数行に分けるときはピリオドが行の頭に来てもいいが、
  CoffeeScriptの普及を見越して、
  次の時代にマッチする書き方をしている)

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

宿題

こんなプログラムを(jQueryを使って)作ってみよう。

1. 画面に四角い領域を３つほど配置する
2. それらが、（例えば）１秒おきに「点滅」する （隠れる/現れる を繰り返す）
3. hint:
   • jQueryで要素の表示/非表示 を切り替える方法は 自分で調べてみよう

   • トグル動作（on/offの往復）の定石的な方法は、

        var n=0
        // あらかじめ初期値を設定しておく
        // ...
        function ??? {
            n+=1
            if(n%2==1)　// nが奇数のとき
                 // on にする操作
            else		// 偶数
                // off にする操作
        }