第 8 回の内容クライアントサイド処理 JavaScript の基礎

クライアントサイド処理

クライアントサイド / サーバサイドクライアントサイドサーバサイド Web ブラウザ Web サーバ

動的な Web ページ Web ブラウザ Web サーバ Web ブラウザ Web サーバリソース生成描画描画リソース生成再描画描画再描画描画リソース生成再描画

動的な Web ページとページ遷移 Web ブラウザ描画 Web サーバリソース生成サーバサイドで実現描画リソース生成新しい URI に遷移描画リソース生成

動的な Web ページとページ遷移クライアントサイドで実現 Web ブラウザ Web サーバ描画 URI は変わらない再描画再描画再描画

以前のオンライン地図 y 0 1 2 3 4 x 0 1 2 3 4

以前のオンライン地図 /map?x=2&y=2 y 0 1 2 3 4 x 0 1 2 3 4

以前のオンライン地図 /map?x=2&y=2 /map?x=1&y=2 y 0 1 2 3 4 x 0 1 2 3 4

以前のオンライン地図 /map?x=2&y=2 /map?x=1&y=1 x y 0 1 2 3 4 0 1 2 3 4

以前のオンライン地図 /map?x=2&y=2 /map?x=3&y=1 /map?x=1&y=1 /map?x=3&y=2 x /map?x=2&y=1 /map?x=1&y=2 /map?x=2&y=3 y 0 1 2 3 4 0 1 2 3 4 /map?x=1&y=3 /map?x=3&y=3

以前のオンライン地図 /map?x=2&y=2 /map?x=3&y=2 x y 0 1 2 3 4 0 1 2 3 4

以前のオンライン地図 /map?x=3&y=2 /map?x=4&y=1 /map?x=2&y=1 /map?x=4&y=2 x /map?x=3&y=1 /map?x=2&y=2 /map?x=3&y=3 y 0 1 2 3 4 0 1 2 3 4 /map?x=2&y=3 /map?x=4&y=3

/map 近年のオンライン地図

ページ遷移を伴わない Web システムデスクトップアプリケーションのような操作性ブックマークが難しい

プラグイン Web ブラウザの機能を拡張 Flash Javaアプレット PDF 文書映像音声

Flash Player Flash 画像音声映像を組み合わせたアニメーションマウスやキーボードでのコンテンツ制御ネットワーク通信

Flash Player の呼び出し <object data="./sample.swf" type="application/x-shockwave-flash" width="400" height="300"> </object>

Flash を使ったビデオ再生の例第 8 回クライアントサイドの技術 Web サーバ Flash Player の領域放送大学 Flash で作られたビデオプレイヤーストリーミングサーバ

ヘルパーアプリケーション Web ブラウザが対応していないスキームやメディアタイプを扱う独立したアプリケーション mailto スキーム電子メールソフト tel スキーム電話アプリケーション

ヘルパーアプリケーション Web ブラウザが対応していないスキームやメディアタイプを扱う独立したアプリケーション mailtoスキーム電子メールソフト telスキーム電話アプリケーション audio/mp4 メディアプレイヤー application/rtf ワープロソフト

JavaScript Web ブラウザ上で動作するプログラムを記述 Web ブラウザが直接実行

サーバサイドとクライアントサイド Web ページを表示した時刻によってメッセージを変える時刻 6~10 時 11~16 時それ以外メッセージおはようございますこんにちはこんばんは

サーバサイドで実現 Web ブラウザ Web サーバ計算 HTML 生成こんにちは描画 <html> <p> こんにちは </p> </html>

クライアントサイドで実現 Web ブラウザ Web サーバこんにちは計算描画 HTML 文書 <html> <script src="./greeting.js"> </script> </html> JavaScript window.addeventlistener( "load", function() { h = new Date().getHours(); e.textcontent = " こんにちは ";

クライアントサイドの技術高度な機能高度なユーザインタフェース Web ブラウザに依存

JavaScript の基礎

要素型 script <html> <head> </head> <body> <script> var h = new Date().getHours(); if (h >= 6 && h <= 10) alert(" おはようございます "); else if (h >= 11 && h <= 16) alert(" こんにちは "); else alert(" こんばんは "); </script> </body> </html>

要素型 script./greeting.js var h = new Date().getHours(); if (h >= 6 && h <= 10) alert(" おはようございます "); else if (h >= 11 && h <= 16) alert(" こんにちは "); else alert(" こんばんは "); <html> <head> </head> <body> <script> var h = new Date().getHours(); if (h >= 6 && h <= 10) alert(" おはようございます "); else if (h >= 11 && h <= 16) alert(" こんにちは "); else alert(" こんばんは "); </script> </body> </html>

動作例

HTML 文書の読み込み時の動作 HTML を先頭から解釈 script 要素にたどり着くと HTML の解釈を一時中断して JavaScript を実行 JavaScript の実行が終わると HTML の解釈を再開

JavaScript の実行タイミングの確認 <p><code>script</code> 要素の前の段落 </p> <script> var h = new Date().getHours(); if (h >= 6 && h <= 10) alert(" おはようございます "); else if (h >= 11 && h <= 16) alert(" こんにちは "); else alert(" こんばんは "); </script> <p><code>script</code> 要素の後ろの段落 </p>

動作例 <p><code>script</code> 要素の前の段落 </p> <script> var h = new Date().getHours(); if (h >= 6 && h <= 10) alert(" おはようございます "); else if (h >= 11 && h <= 16) alert(" こんにちは "); else alert(" こんばんは "); </script> <p><code>script</code> 要素の後ろの段落 </p> 解釈済み実行中未解釈

イベントドリブンユーザーの操作や状態の変化に応じて処理を呼び出す処理を呼び出す契機となるものイベントイベントに応じて呼び出される処理イベントリスナーイベントハンドライベントドリブン ( イベント駆動 ) 方式

イベントリスナーの登録 1 2 3 何に対してどのイベントが発生するとどのイベントリスナーを呼び出すか

イベントリスナーの登録 window.addeventlistener("load", function() { alert(" 文書を読み込みました ");

イベントリスナーの登録対象 window.addeventlistener("load", function() { alert(" 文書を読み込みました ");

イベントリスナーの登録対象イベントの種類 window.addeventlistener("load", function() { alert(" 文書を読み込みました ");

イベントリスナーの登録対象イベントの種類 window.addeventlistener("load", function() { alert(" 文書を読み込みました "); イベントリスナー

イベントリスナーの登録 1 2 3 何に対してどのイベントが発生するとどのイベントリスナーを呼び出すか 1 2 3 Web ブラウザのウィンドウ (window) 文書の読み込みが完了した (load) 文書を読み込みましたというメッセージを表示する関数

イベントリスナーの登録対象イベントの種類 window.addeventlistener("load", function() { alert(" 文書を読み込みました "); イベントリスナー

HTML 文書の読み込み時の動作 HTML を先頭から解釈 script 要素にたどり着くと HTML の解釈を一時中断して JavaScript を実行 JavaScript の実行が終わると HTML の解釈を再開第一段階読み込み時の処理第二段階イベントの待機

イベントリスナーの登録 window.addeventlistener("load", function() { var e1 = var e2 = e1.addeventlistener("click", function() { // 処理 e2.addeventlistener("mouseover", function() { // 処理

イベントリスナーの登録 window.addeventlistener("load", function() { var e1 = var e2 = e1.addeventlistener("click", function() { // 処理ある要素がクリックされたときのイベントリスナーを登録 e2.addeventlistener("mouseover", function() { // 処理

文書の操作要素の属性の取得変更要素の内容の取得変更要素のスタイルの取得変更

要素の選択 JavaScriptのコード document.getelementbyid("i1") document.getelementsbyname("n1") document.getelementsbytagname("img") 意味 id 属性値が i1 の要素 name 属性値が n1 の要素すべて HTML 文書内の img 要素すべて

文書の操作 HTML <a href="http://www.mext.go.jp/" id="a1"> 文部科学省 </a> <button type="button" id="b1"> アンカーの変更 </button> JavaScript window.addeventlistener("load", function() { document.getelementbyid("b1").addeventlistener("click", function() { var a = document.getelementbyid("a1"); a.setattribute("href", "http://www.ouj.ac.jp/"); a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

文書の操作 <a href="http://www.mext.go.jp/" id="a1"> 文部科学省 </a> <button type="button" id="b1"> アンカーの変更 </button>

文書の操作 HTML <a href="http://www.mext.go.jp/" id="a1"> 文部科学省 </a> <button type="button" id="b1"> アンカーの変更 </button> アンカーの変更ボタンを取得 JavaScript window.addeventlistener("load", function() { document.getelementbyid("b1").addeventlistener("click", function() { var a = document.getelementbyid("a1"); a.setattribute("href", "http://www.ouj.ac.jp/"); a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

文書の操作

第 8 回の内容クライアントサイド処理 JavaScript の基礎

第 8 回の内容 クライアントサイド処理 JavaScript の基礎

第 8 回の内容クライアントサイド処理 JavaScript の基礎