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

Size: px

Start display at page:

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

こうざぶろうあくや
5 years ago
Views:

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

2 クライアントサイド処理

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

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

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

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

7 以前のオンライン地図 y x

8 以前のオンライン地図 /map?x=2&y=2 y x

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

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

11 以前のオンライン地図 /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 /map?x=1&y=3 /map?x=3&y=3

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

13 以前のオンライン地図 /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 /map?x=2&y=3 /map?x=4&y=3

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

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

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

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

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

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

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

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

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

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

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

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

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

27 JavaScript の基礎

28 要素型 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>

29 要素型 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>

30 要素型 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 src="./greeting.js"></script> </body> </html>

31 動作例

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

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

34 動作例 <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> 解釈済み実行中未解釈

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

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

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

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

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

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

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

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

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

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

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

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

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

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

49 イベントリスナーの登録 window.addeventlistener("load", function() { var e1 = var e2 = e1.addeventlistener("click", function() { // 処理 e2.addeventlistener("mouseover", function() { // 処理ある要素の上にマウスが移動したときのイベントリスナーを登録

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

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

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

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

54 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

55 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

56 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

57 文書の操作 <a href=" id="a1"> 文部科学省 </a> <button type="button" id="b1"> アンカーの変更 </button>

58 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

59 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

60 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

61 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

62 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%"; クリック

63 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%"; クリックイベントリスナー

64 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

65 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

66 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

67 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

68 文書の操作 HTML <a href=" 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", " a.innerhtml = " 放送大学 "; a.style.fontsize = "200%";

69 文書の操作

70 文書の操作

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

SmartBrowser_document_build30_update.pptx

SmartBrowser_document_build30_update.pptx SmartBrowser Update for ios / Version 1.3.1 build30 2017 年 8 月株式会社ブルーテック更新内容 - 概要 ios Version 1.3.1 build28 の更新内容について 1. 設定をQRから読み込み更新する機能 2.URLをQRから読み込み画面遷移する機能 3.WEBページのローカルファイル保存と外部インテントからの起動 4.JQuery-LoadImageライブラリの組み込み

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

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