http://www0.info.kanagawa-u.ac.jp/~kaiya/wa/ dotcampus ショートコード 147637 ウエブアプリケーション 2014 第7回 JavaScript その4 2014/11/6 海谷治彦 1 目次 • 前回演習について (dotcampusソース参照) • JQuery (前回の積み残し) • Ajax • Bootstrap • まとめ • 演習 • 来週までの演習 (JavaScript編の感想) 2 jQuery • JavaScript(JS)のライブラリ • 素のJavaScriptで書くより記述が簡素になるはず． • JSだけでも同じことはできるはず．沢山かかなきゃだけど． • JSの文法的な拡張が行われているわけではない． • クロスブラウザ問題を吸収してくれるので，ブラウザの違いを気にせずJSを書ける． • 事実上の標準となっているので，知らないとまずい． • バージョンについて • 1.x系古いブラウザにもなるだけ対応してる • 2.x系 IE 6, 7, 8 をサポートしてないが，サイズがこぶり．機能は同じらしい．この授業では 2.x 系を利用． 3 使い方 • 配布元のURLを直接参照して利用する．(以下の例) • もしくは，ダウンロードして手元のファイルを読み込む． • 配布先は，公式の他に google や MS からも行われている． <head> <meta charset="utf-8"><title>how2load jquery</title>  <script src="http://code.jquery.com/jquery-2.1.1.min.js"> </script>  </head> 4 できること • JSの解説で行ったことはあらかたできるし，記述が相対的に簡素(なはず) • • • • • DOM要素の指定要素の変更，属性等を含む． DOMへの要素の追加削除．イベント処理． Ajax (無論，素のJSでも可能) • $というのが良く出てくるが，実は特別なものではなく，単なる変数である． 5 要素の選択 • 素のJSよりかなり簡素 • $(“anID”) で指定， • 素のJSでは document.getElementById(“anID”) とかく． • 以下，比較．素のJS JQuery body document.body $(document.body) tag getElementsByTagName $(“tag”) id getElementById $(“#id”) class getElementsByClassName $(“.class”) 6 要素の操作選択した要素について以下の操作ができます． • 属性の追加，設定，削除 • name=“jindai” 等に対するもの • サンプル jqAttr.html • プロパティの追加，削除 • checked や disabled 等，値の無い属性のこと • サンプル jqProp.html • CSSプロパティの追加，設定，削除 • フォント種類やサイズ，色等． • サンプル jqCssProp.html • 要素内容の取得，更新 • <div>内容</div>等の内容に相当． • サンプル jqText.html 7 DOMへの追加・削除 • 要素の追加 • • • • 親要素.append 親要素.prepend 兄弟要素.before 兄弟要素.after • 削除 • remove • サンプル jqAddDel.html 8 イベント処理 • 以下に代表的なイベントを示す． • マウス click, dblclick, mouseenter, mouseleave, mousedown, mouseup, hover (enterとleaveをあわせたっぽいもの) • キーボード keypress, keydown, keyup • 文書(document) ready, resize, scroll • イベント設定は，基本， $(なんとか).イベント(関数定義) • と書く．要は要素に対してコールバックを仕込む． • onなんとか属性に直に関数を代入するよりもエレガント(だと思う) • 詳細はサンプル jqEvent.html にて． 9 Ajax • Asynchronous JavaScript and XML • もとは名前通りの機能だったが，今は，JSを使った同期・非同期の通信機能という感じ． • ページ遷移を伴わずサーバー等からクライアントがデータを授受できるので便利． • 無論，JQuery にもAjaxのための機能がある． • ある意味，プログラム言語としては当たり前の機能． • CやJava等のプログラム言語は任意の通信をする機能があるのだから． 10 非同期通信 Asynchronous Comm. • HTTPのリクエストとレスポンスのように，基本，通信では，送付側(例えばブラウザ)は，返信側(例えばウエブサーバー)の返事を待つ．⇒ 同期通信 • 非同期通信は，この返事を待たず，次の処理にいってしまう手順の通信をさす． • 非同期での返事の受け取り方 • 返事が来た場合に呼び出されるCallbackを仕込んでおいて，返事を受け取る． • 返事を保存する場所(通常，Queue 待行列)を準備し，定期的に返事を確認するという手もある．polling と呼ばれる． • マルチスレッドな言語なら返事を監視するスレッドを走らせるという手もある． 11 ページ遷移で何が悪い？ • Ajaxが無いと，HTTPリクエストをクライアントが行い，別のページに遷移する必要がある． • 画面の一部を変更するだけでも，この遷移が起こり，通信の無駄だし，挙動が遅くなる． • ページが保持する状態(JSの変数の値やフォームのセレクション)が遷移すると原則チャラになってしまう． • さらに，素のHTTPでは遷移したページ間に原則連続性は無いため，セッション等の仕組が必要． • よって，ウエブサーバー等と通信を行いデータを部分的にもってくるAjaxはそれなりに便利な機能である． 12 Ajaxのサンプル • ajaxSync.html ajaxAsync.html • 同期と非同期の違いを際だたせている． • 通信相手のページが意図的に5秒停止してから動作するように作ってある． • syncのほうは5秒動作がとまってしまう． • asyncのほうは相手の停止に関係なく動作が進む． • 若干，古い書き方．いまどきはjQueryで書くほうがよい． • JQuery版 jqAjaxSync.html jqAjaxAsync.html 13 Bootstrap • 簡単にウエブページレイアウトを行うためのフレームワーク． • 基本，HTMLの要素に予め定められたクラスを設定するだけで，結構，綺麗な見栄えになる． • 自身で全部CSSを全部書いて綺麗な見栄えにするのは超大変． • Responsive Design に対応 • スマホ等，小さい画面の場合等，画面のサイズに合わせて，自動的にレイアウトを変えてくれる． • HTML5, CSS3, JavaScriptからできている． • まぁ，同様のフレームワークは色々あるようだ． • Foundation, UIKit, Pure, Kube, HTML Kickstart 14 フレームワークとは？ • 枠組み orz • ライブラリの逆 • ライブラリは全体(main関数的なものを含む)は自身で作り，部分は他人の作ったものを流用する． • C言語の数値計算ライブラリ lm • Javaの各種API • フレームワークは全体は他人が作ったものを使い，部分を自分でカスタマイズする． • これから話す Bootstrap • 後段に出てくるサーバーサイドのアプリケーションフレームワーク．(spring や cakePHP等) 15 使い方 1/2 • 本家サイトからzipをDLして展開 http://getbootstrap.com/ • distフォルダにある css, font, js を使う． • もしくは，ネットに公開してあるもの使う．  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"> </script> 16 使い方 2/2 • ゼロからページを作るのはシンドいので，公式ページにあるテンプレートを改造してゆく． http://getbootstrap.com/getting-started/#examples • JQuery の利用は必須．Bootstrapの内部で使っているため． • どうも，JQ2.xではうまく動かない感じ． • Bootstrapのルールに従い，HTML要素にクラスを設定してゆくだけで，基本，綺麗なレイアウトになる． • ルールを調べたり，覚えたりするのがしんどい．コレはフレームワーク利用全般に言える問題点． 17 Starter • 私が手をいれたのであれば bsStarter.html 参照． • なんか沢山かいてあるけどカスタマイズ部分は以下 • 32-38行メニューのリンク先とかを設定 • 47, 48行本文 • カスタマイズ部分の周辺に設定されたクラスに従い，Bootstrapが綺麗にレイアウトしてくれる(スタイルファイルを設定してくれる．) • ちなみに，画面を小さくすると(スマホ等を想定して)，見えが変わる． 18 Grid Layout • 旧来の tableタグを使ったレイアウト，HTML5の float指定(桑原先生編，覚えてますか？)より格段に楽でブラウザ非依存なレイアウト法． • グリッドすなわち碁盤の目状の領域でレイアウトを設定． • 具体的には横位置を12分割して，その比率で箱を配置できる．5,4,3等の等比でないものもOK. • bsGrid1.html bsGrid2.html 19 Dropdown Menu • formのセレクションを使わないでもdropdown menu を書ける． • まぁ，見た目はかっこいい． • bsDropdwon.html 参照 20 タブのナビゲーション • いわゆるタブっぽいUIを簡単に作ることができる． • bsTabs.html 21 Bootstrapの利用に向けて • 授業にて全カスタマイズ手法を紹介するのは無理． • 自身で公式サイト http://getbootstrap.com/ 等を見て，手軽に綺麗なレイアウトを作成しよう． • フレームワークを使うという体験は非常に重要なので，是非，チャレンジしてみてください． • 例えば，情報科学実験での利用とか． 22 JavaScript編エピローグ • とりあえず，クライアントサイドの技術を学んでみました． • なんか覚えることがやたら多い・・・orz • JSに限らず，現代的なプログラミングは「考案する」というより「調べる」というのがメインです． • 新しいアルゴリズムとかクリエイティブに考えたい方々には不満も多いかもしれません． • その意味では，現代的プログラミングってのは文系っぽいのかもね． 23 本日の演習 • dotcampusに出してください． • 問題もdotcampusのほうを参照． 24 来週までの演習 • dotcampusに出してください． • 問題もdotcampusのほうを参照． • 問題はJavaScript編の感想文です． • わからなかったところ • おもしろろかったところ • 本日は以上 25