ウエブアプリケーション JavaScript 3ノート PCのLinuxをチェックしといて • 7回目以降，各自にサーバー運用をしてもらいます． • 本授業ではサーバーはLinuxで運用したいと思い

ウエブアプリケーションJavaScript その3

2019/11/7海谷治彦

1

ノートPCのLinuxをチェックしといて

• 7回目以降，各自にサーバー運用をしてもらいます．

• 本授業ではサーバーはLinuxで運用したいと思います．

• 各自のノートPCにおけるLinuxがちゃんと動くか確認しといてください．

• おそらく，CentOS 7.xかと思います．

• Linuxをいれてない人はVMで結構ですので，いれといてください．

• 支援が必要が学生は教員にコンタクトしてください．

• 授業，固有の設定は第7回にやります．

2

仮想マシン(VM)でLinuxをいれる場合

• VMwareやVirtual BoxにCentOS7をいれてください．

• CentOS6や8はやめてください．

• 詳細はググってほしいですが，最小構成で結構です．

• ディスクに余裕があればフルでいれてもよいけど．

• ネットの設定は host only network ではなく，bridge adapter にしてください．

3

目次

• 演習2,4の解答例

• Web Storage• JQuery3• Ajax• Bootstrap• まとめ

• 演習

• 来週までの演習 (JavaScript編の感想)

4

演習2,4の解答例

現物を見ながら

5

サーバーとも対話

• HTTPリクエスト/レスポンスは複数回行われる．• 無論，JSも使えるが．

• サーバー側のデータが使えるので，例えば，端末を変えても処理が継続できる．

• 途中まで大学でやって，あとは家のPCでやるとか．

6

ブラウザ

JSプログラム

・・・・・

入力画面準備

選択肢を送る

結果が返ってくる

サーバー側のデータ

サーバープログラムweb

storage等

Web Storage• クライアント側にデータを保存するhtml5と同時期にできた仕組み．

• 5M程度のデータを保存可能 (cookieは5K程度)• 以下の二種類がある

• sessionStorage• ページ毎に保持しているデータ．ページを閉じると消える．

• localStorage• ページを閉じても消えない．• プロトコル，ドメイン，ポート番号が共通のページ間で共有できる．• 上記が同じなら異なるページでもデータは共有可能．

• 異なるブラウザ間ではデータ共有はされない模様．

• 無論，クライアントが異なればデータは共有できない．

• サンプル webStorage.html

7

jQuery3• JavaScript(JS)のライブラリ

• 素のJavaScriptで書くより記述が簡素になるはず．• JSだけでも同じことはできるはず．沢山かかなきゃだけど．

• JSの文法的な拡張が行われているわけではない．

• クロスブラウザ問題を吸収してくれるので，ブラウザの違いを気にせずJSを書ける．

• 事実上の標準となっているので，知らないとまずい．

• バージョンについて• 1.x系古いブラウザにもなるだけ対応してる

• 2.x系 IE 6, 7, 8 をサポートしてないが，サイズがこぶり．

• 今は3のみ保守されている．

この授業では 3.x 系を利用．

8

使い方

• 配布元のURLを直接参照して利用する．(以下の例)• もしくは，ダウンロードして手元のファイルを読み込む．

• 配布先は，公式の他に google や MS からも行われている．

9

<head><meta charset="utf-8"><title>how2load jquery</title><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script></head>

できること

• JSの解説で行ったことはあらかたできるし，記述が相対的に簡素(なはず)

• DOM要素の指定

• 要素の変更，属性等を含む．

• DOMへの要素の追加削除．

• イベント処理．

• Ajax (無論，素のJSでも可能)

• $というのが良く出てくるが，実は特別なものではなく，単なる変数である．

10

要素の選択

• 素のJSよりかなり簡素• $(“anID”) で指定，

• 素のJSでは document.getElementById(“anID”) とかく．

• 以下，比較．

11

素のJS JQuerybody document.body $(document.body)tag getElementsByTagName $(“tag”)id getElementById $(“#id”)class getElementsByClassName $(“.class”)

要素の操作

選択した要素について以下の操作ができます．

• 属性の追加，設定，削除• name=“jindai” 等に対するもの• サンプル jqAttr.html

• プロパティの追加，削除• checked や disabled 等，値の無い属性のこと• サンプル jqProp.html

• CSSプロパティの追加，設定，削除• フォント種類やサイズ，色等．• サンプル jqCssProp.html

• 要素内容の取得，更新• <div>内容</div>等の内容に相当．• サンプル jqText.html

12

DOMへの追加・削除

• 要素の追加• 親要素.append• 親要素.prepend• 兄弟要素.before• 兄弟要素.after

• 削除• remove

• サンプル jqAddDel.html

13

イベント処理

• 以下に代表的なイベントを示す．• マウス click, dblclick, mouseenter, mouseleave,

mousedown, mouseup, hover (enterとleaveをあわせたっぽいもの)

• キーボード keypress, keydown, keyup• 文書(document) ready, resize, scroll

• イベント設定は，基本，$(なんとか).イベント(関数定義)

と書く．要は要素に対してコールバックを仕込む．

• onなんとか属性に直に関数を代入するよりもエレガント(だと思う)

• 詳細はサンプル jqEvent.html にて．14

Ajax• Asynchronous JavaScript and XML• もとは名前通りの機能だったが，今は，JSを使った同期・非同期の通信機能という感じ．

• ページ遷移を伴わずサーバー等からクライアントがデータを授受できるので便利．

• 無論，JQuery にもAjaxのための機能がある．

• ある意味，プログラム言語としては当たり前の機能．

• CやJava等のプログラム言語は任意の通信をする機能があるのだから．

15

非同期通信 Asynchronous Comm.• HTTPのリクエストとレスポンスのように，基本，通信では，送付側(例えばブラウザ)は，返信側(例えばウエブサーバー)の返事を待つ．⇒ 同期通信

• 非同期通信は，この返事を待たず，次の処理にいってしまう手順の通信をさす．

• 非同期での返事の受け取り方• 返事が来た場合に呼び出されるCallbackを仕込んでおいて，返事を受け取る．

• 返事を保存する場所(通常，Queue 待行列)を準備し，定期的に返事を確認するという手もある．polling と呼ばれる．

• マルチスレッドな言語なら返事を監視するスレッドを走らせるという手もある．

16

ページ遷移で何が悪い？

• Ajaxが無いと，HTTPリクエストをクライアントが行い，別のページに遷移する必要がある．

• 画面の一部を変更するだけでも，この遷移が起こり，通信の無駄だし，挙動が遅くなる．

• ページが保持する状態(JSの変数の値やフォームのセレクション)が遷移すると原則無くなってしまう．

• さらに，素のHTTPでは遷移したページ間に原則連続性は無いため，セッション等の仕組が必要．

• よって，ウエブサーバー等と通信を行いデータを部分的にもってくるAjaxはそれなりに便利な機能である．

17

Ajaxのサンプル

• ajaxSync.html ajaxAsync.html

• 同期と非同期の違いを際だたせている．• 通信相手のページが意図的に5秒停止してから動作するように作ってある．

• syncのほうは10秒動作がとまってしまう．

• asyncのほうは相手の停止に関係なく動作が進む．

• 若干，古い書き方．いまどきはjQueryで書くほうがよい．

• JQuery版 jqAjaxSync.html jqAjaxAsync.html

18

Bootstrap• 簡単にウエブページレイアウトを行うためのフレームワーク．

• 基本，HTMLの要素に予め定められたクラスを設定するだけで，結構，綺麗な見栄えになる．

• 自身で全部CSSを全部書いて綺麗な見栄えにするのは超大変．

• Responsive Design に対応• スマホ等，小さい画面の場合等，画面のサイズに合わせて，自動的にレイアウトを変えてくれる．

• HTML5, CSS3, JavaScriptからできている．

• まぁ，同様のフレームワークは色々あるようだ．• Foundation, UIKit, Pure, Kube, HTML Kickstart

19

フレームワークとは？

• 枠組み (日本語にしても意味わからん)• ライブラリの逆 (どう逆なんだ？)

• ライブラリは全体(main関数的なものを含む)は自身で作り，部分は他人の作ったものを流用する．

• C言語の数値計算ライブラリ lm • Javaの各種API

• フレームワークは全体は他人が作ったものを使い，部分を自分でカスタマイズする．

• これから話す Bootstrap• 後段に出てくるサーバーサイドのアプリケーションフレームワーク．(spring や cakePHP等)

20

使い方 1/2• 本家サイトからzipをDLして展開

http://getbootstrap.com/• distフォルダにある css, font, js を使う．

• もしくは，ネットに公開してあるもの使う．

21

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

使い方 2/2• ゼロからページを作るのはシンドいので，公式ページにあるテンプレートを改造してゆく．

http://getbootstrap.com/getting-started/#examples• JQuery の利用は必須．Bootstrapの内部で使っているため．

• どうも，JQ2.xではうまく動かない感じ．

• Bootstrapのルールに従い，HTML要素にクラスを設定してゆくだけで，基本，綺麗なレイアウトになる．

• ルールを調べたり，覚えたりするのがしんどい．コレはフレームワーク利用全般に言える問題点．

22

Starter• 私が手をいれたのであれば bsStarter.html 参照．

• なんか沢山かいてあるけどカスタマイズ部分は以下

• 32-38行メニューのリンク先とかを設定

• 47, 48行本文

• カスタマイズ部分の周辺に設定されたクラスに従い，Bootstrapが綺麗にレイアウトしてくれる(スタイルファイルを設定してくれる．)

• ちなみに，画面を小さくすると(スマホ等を想定して)，見えが変わる．

23

Grid Layout• 旧来の tableタグを使ったレイアウト，HTML5の

float指定(桑原先生編，覚えてますか？)より格段に楽でブラウザ非依存なレイアウト法．

• グリッドすなわち碁盤の目状の領域でレイアウトを設定．

• 具体的には横位置を12分割して，その比率で箱を配置できる．5,4,3等の等比でないものもOK.

• bsGrid1.html bsGrid2.html

24

Dropdown Menu• formのセレクションを使わないでもdropdown menuを書ける．

• まぁ，見た目はかっこいい．

• bsDropdwon.html 参照

25

タブのナビゲーション

• いわゆるタブっぽいUIを簡単に作ることができる．

• bsTabs.html

26

Bootstrapの利用に向けて

• 授業にて全カスタマイズ手法を紹介するのは無理．

• 自身で公式サイト http://getbootstrap.com/ 等を見て，手軽に綺麗なレイアウトを作成しよう．

• フレームワークを使うという体験は非常に重要なので，是非，チャレンジしてみてください．

• 例えば，情報科学実験での利用とか．

27

JavaScript編エピローグ

• とりあえず，クライアントサイドの技術を学んでみました．

• なんか覚えることがやたら多い・・・

• JSに限らず，現代的なプログラミングは「考案する」というより「調べる」というのがメインです．

• 新しいアルゴリズムとかクリエイティブに考えたい方々には不満も多いかもしれません．

• その意味では，現代的プログラミングってのは文系っぽいのかもね．

28

土曜日までの演習5• dotcampusに出してください．

• 問題もdotcampusのほうを参照．• 問題はJavaScript編の感想文です．

• わからなかったところ

• おもしろかったところ

• 以上

29

本日のメインの演習 (演習6)• 次項で指定するJavaScriptのプログラムを作成してください．

• 複数ファイルになってもかまいません．

• 締切は11/20まで．

• 〆切後も提出可能な状態にはなっていますが，遅提出の扱いとなります．

• 提出しないよりはマシです．

• 提出先は dotcampusです．

• JavaScriptを呼び出すファイルの名は ex06.html としてください．

30

演習6 問題• dotcampusにアップしてある wa06ex.html のHTML文書中

に以下の機能をJavascriptで追加せよ．

1. ページが表示されると，liタグの個数を数え，文書中の

“X days a week” のXを数えた個数に置き換える機能．

2. 画面をクリックすると，文字列を入力するフォームが表示

され，入力した文字列を箇条書きの末に追加する機能．

3. 箇条書きの項目が上記の2で追加されると， “X days a week” のXが更新される機能．

• 尚，文書に新しいタグや属性は追加してもよい．

• 文書の内容は変更しないでね．例えば X を 7 に書き換えるとか．

31

Documents

ウエブアプリケーション JavaScript 3ノート PCのLinuxをチェックしといて • 7回目以降，各自にサーバー運用をしてもらいます． • 本授業ではサーバーはLinuxで運用したいと思い