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

(1)

第8回の内容

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

• JavaScriptの基礎

(2)

(3)

クライアントサイド / サーバサイド

サーバサイド

クライアントサイド

(4)

動的なWebページ

Webブラウザ

Webサーバ

リソース生成リソース生成リソース生成描画描画描画

Webブラウザ

Webサーバ

描画再描画再描画再描画

(5)

動的なWebページとページ遷移

Webブラウザ

Webサーバ

リソース生成リソース生成リソース生成描画描画描画

新しいURIに遷移

サーバサイドで実現

(6)

動的なWebページとページ遷移

Webブラウザ

Webサーバ

描画再描画再描画再描画

URIは変わらない

クライアントサイドで実現

(7)

以前のオンライン地図

𝑥

𝑦

0 1 2 3 4

0

1

2

3

4

(8)

以前のオンライン地図

𝑥

𝑦

/map?x=2&y=2

0 1

2 3 4

0

1

2

3

4

(9)

以前のオンライン地図

𝑥

𝑦

0

1 2 3 4

0

1

2

3

4

/map?x=1&y=2 /map?x=2&y=2

(10)

以前のオンライン地図

𝑥

𝑦

/map?x=2&y=2

0

1 2 3 4

0

1

2

3

4

/map?x=1&y=1

(11)

以前のオンライン地図

𝑥

𝑦

/map?x=2&y=2

0 1 2 3 4

0

1

2

3

4

/map?x=1&y=1 /map?x=1&y=2 /map?x=1&y=3 /map?x=2&y=1 /map?x=2&y=3 /map?x=3&y=1 /map?x=3&y=2 /map?x=3&y=3

(12)

以前のオンライン地図

𝑥

𝑦

/map?x=2&y=2

0 1 2 3 4

0

1

2

3

4

/map?x=3&y=2

(13)

以前のオンライン地図

𝑥

𝑦

/map?x=3&y=2

0 1 2 3 4

0

1

2

3

4

/map?x=2&y=1 /map?x=2&y=2 /map?x=2&y=3 /map?x=3&y=1 /map?x=3&y=3 /map?x=4&y=1 /map?x=4&y=2 /map?x=4&y=3

(14)

近年のオンライン地図

(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を使ったビデオ再生の例

Webサーバ

ストリーミング

サーバ

第8回クライアントサイドの技術放送大学 Flashで作られたビデオプレイヤー Flash Playerの領域

(20)

ヘルパーアプリケーション

• Webブラウザが対応していないスキームやメディア

タイプを扱う独立したアプリケーション

mailtoスキーム

 電子メールソフト

(21)

ヘルパーアプリケーション

• Webブラウザが対応していないスキームやメディア

タイプを扱う独立したアプリケーション

mailtoスキーム

 電子メールソフト

telスキーム

 電話アプリケーション

audio/mp4

 メディアプレイヤー

application/rtf  ワープロソフト

(22)

JavaScript

• Webブラウザ上で動作するプログラムを記述

• Webブラウザが直接実行

(23)

サーバサイドとクライアントサイド

時刻

メッセージ

6～10時

おはようございます

11～16時こんにちは

それ以外

こんばんは

Webページを表示した時刻に

よってメッセージを変える

(24)

サーバサイドで実現

Webブラウザ

Webサーバ

<html>

⋮

<p>こんにちは</p>

⋮

</html>

描画計算・HTML生成こんにちは ⋮ ⋮

(25)

クライアントサイドで実現

Webブラウザ

Webサーバ

<html> ⋮ <script src="./greeting.js"> </script> ⋮ </html> HTML文書 window.addEventListener( "load", function() { ⋮ h = new Date().getHours(); ⋮ e.textContent = "こんにちは"; ⋮ JavaScript 計算・描画こんにちは ⋮ ⋮

(26)

クライアントサイドの技術

• 高度な機能

• 高度なユーザインタフェース

• Webブラウザに依存

(27)

(28)

要素型

_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

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

if (h >= 6 && h <= 10) alert("おはようございます"); else if (h >= 11 && h <= 16) alert("こんにちは"); else alert("こんばんは"); ./greeting.js

(30)

要素型

_script

<html> <head> ⋮ </head> <body> ⋮ <script src="./greeting.js"></script> ⋮ </body> </html> var h = new Date().getHours();

if (h >= 6 && h <= 10) alert("おはようございます"); else if (h >= 11 && h <= 16) alert("こんにちは"); else alert("こんばんは"); ./greeting.js

(31)

(32)

HTML文書の読み込み時の動作

• HTMLを先頭から解釈

• script要素にたどり着くと、HTMLの解釈を一時中断して、

JavaScriptを実行

(33)

JavaScriptの実行タイミングの確認

⋮

<p><code>script</code>要素の前の段落</p>

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>

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("文書を読み込みました");

}, false);

(39)

イベントリスナーの登録

window

.addEventListener("

load

", function() {

alert("文書を読み込みました");

}, false);

イベントの種類

対象

(40)

イベントリスナーの登録

イベントリスナー

window

.addEventListener("

load

",

function() {

alert("文書を読み込みました");

}

, false);

イベントの種類

対象

(41)

イベントリスナーの登録

① 何に対して、

② どのイベントが発生すると、

③ どのイベントリスナーを呼び出すか

① Webブラウザのウィンドウ(

_window)

② 文書の読み込みが完了した(

_load)

③ 「文書を読み込みました」というメッセージを表示する関数

(42)

イベントリスナーの登録

イベントリスナー

window

.addEventListener("

load

",

function() {

alert("文書を読み込みました");

}

, false);

イベントの種類

対象

(43)

HTML文書の読み込み時の動作

• HTMLを先頭から解釈

• script要素にたどり着くと、HTMLの解釈を一時中断して、

JavaScriptを実行

• JavaScriptの実行が終わると、HTMLの解釈を再開

【第一段階】

読み込み時の処理

【第二段階】

イベントの待機

(44)

イベントリスナーの登録

(45)

イベントリスナーの登録

(46)

イベントリスナーの登録

(47)

イベントリスナーの登録

(48)

イベントリスナーの登録

window.addEventListener("load", function() { var e1 = ⋯

var e2 = ⋯

e1.addEventListener("click", function() { // 処理 ⋯ }, false); e2.addEventListener("mouseover", function() { // 処理 ⋯ }, false); }, false); ある要素がクリックされたときのイベントリスナーを登録

(49)

イベントリスナーの登録

window.addEventListener("load", function() { var e1 = ⋯ var e2 = ⋯ e1.addEventListener("click", function() { // 処理 ⋯ }, false);

e2.addEventListener("mouseover", function() { // 処理 ⋯

}, false);

ある要素の上にマウスが移動したときのイベントリスナーを登録

(50)

イベントリスナーの登録

(51)

HTML文書の読み込み時の動作

• HTMLを先頭から解釈

• script要素にたどり着くと、HTMLの解釈を一時中断して、

JavaScriptを実行

• JavaScriptの実行が終わると、HTMLの解釈を再開

【第一段階】

読み込み時の処理

【第二段階】

イベントの待機

(52)

文書の操作

• 要素の属性の取得・変更

• 要素の内容の取得・変更

(53)

要素の選択

JavaScriptのコード

意味

document.getElementById("i1")

id属性値が「i1」の

_要素

document.getElementsByName("n1")

name属性値が「n1」

_{の要素すべて}

document.getElementsByTagName("img")

HTML文書内の

_{要素すべて}

img

(54)

文書の操作

<a href="http://www.mext.go.jp/" id="a1">文部科学省</a> <button type="button" id="b1">アンカーの変更</button> HTML 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%"; }, false); }, false); JavaScript

(55)

文書の操作

<a href="http://www.mext.go.jp/" id="a1">文部科学省</a>

<button type="button" id="b1">アンカーの変更</button>

HTML 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%"; }, false); }, false); JavaScript

(56)

文書の操作

<button type="button" id="b1">アンカーの変更</button> HTML 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%"; }, false); }, false); JavaScript

(57)

文書の操作

<button type="button" id="b1">アンカーの変更</button>

<a href="http://www.mext.go.jp/" id="a1">文部科学省</a>

(58)

文書の操作

<a href="http://www.mext.go.jp/" id="a1">文部科学省</a> <button type="button" id="b1">アンカーの変更</button> HTML 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%"; }, false); }, false); JavaScript

(59)

文書の操作

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

HTML

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%"; }, false); }, false); JavaScript

(60)

文書の操作

(61)

文書の操作

HTML

「アンカーの変更」ボタンを取得

(62)

文書の操作

HTML

クリック

「アンカーの変更」ボタンを取得

(63)

文書の操作

HTML

クリック

「アンカーの変更」ボタンを取得

イベントリスナー

(64)

文書の操作

(65)

文書の操作

(66)

文書の操作

HTML

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%"; }, false);

}, false);

(67)

文書の操作

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

HTML 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%"; }, false); }, false); JavaScript

(68)

文書の操作

(69)

(70)

(71)

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