Webデータ管理
JavaScript (1) (4章)
2011/12/7(水)
講義で使うフォルダ
演習室のPCのハードディスクには演習で作成したデータは
保管できません。
各PCの「ネットワーク接続」ショートカットからメディア情報セ
ンターのサーバーにアクセスしてください(Zドライブとして使
用できます)。
演習名
使用するフォルダ
演習1
Z:¥Webデータ管理¥20111207¥演習1¥
演習2
Z:¥Webデータ管理¥20111207¥演習2¥
演習3
Z:¥Webデータ管理¥20111207¥演習3¥
演習4
Z:¥Webデータ管理¥20111207¥演習4¥
演習5
Z:¥Webデータ管理¥20111207¥演習5¥
演習6
Z:¥Webデータ管理¥20111207¥演習6¥
JavaScriptとは
Netscape Communications社が開発したスクリプト
言語で、Webブラウザ上で動作する
HTMLテキスト内に<script>タグを用いて書き込ん
だスクリプトが、ブラウザ上で直接実行される。
(1)JavaScriptはHTML中に埋め込むスクリプトなの
で実行環境に応じてコンパイルする必要はない
(2)JavaScriptはクライアントサイトで動作可能なた
めサーバ側の計算負荷や通信負荷がかからない
(3)サーバサイドプログラムの実行を禁止している
サーバ上でも動作可能
(演習1)初めてのJavaScriptプログラム
「hinagata.html」の内容を修正し「jstest10-1.html」で保存してください
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>演習10-1(JavaScript) </title>
</head> <body> <p> <script type="text/javascript"> <!--document.write("はじめてのJavaScript"); //--> </script> </p> </body> </html>
修正・追加する行
document.write
概要：ドキュメント出力用のストリームに文字列を出力
要約：scriptでの処理結果の出力
詳細：
オブジェクト：document
メソッド：write(他メソッドとして、open,close等がある。)
<html> <head><title>はじめてのJavaScript</title></head> <body> HTMLに <script language="JavaScript"> <!--document.write(“はじめてのJavaScript”)； //--> </script> </body> </html>(演習2)JavaScriptにおける変数
「jstest10-1.html」の内容を修正し「jstest10-2.html」で保存してください
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>演習10-2(JavaScript) </title> </head> <body> <p> <script type="text/javascript"> <!— var aaa; aaa = “はじめてのJavaScript”; document.write(aaa); //--> </script> </p> </body> </html>
修正・追加する行
JavaScriptの記述ルール
a=10
;
b=5
;
a=10
;
b=5
;
大文字、小文字は区別する
プログラムの記述は半角英数
JavaScript → javascript/JAVASCRIPTはダメ
文末は「；」全ての文末に入れる
空白スペースと改行
(1)トークンを区切る空白、タブ、改行コードの無視→タブなど
を用いて、プログラムを見やすく工夫する
(2)トークン：キーワード、変数名、数値、関数名等の文字列
JavaScriptの変数
変数の宣言
var 変数名;
変数とデータ型
(1)数値型
100, 0.5, 10e3など
(2)文字列型
“Happy”, “Tsujido”, ‘Hironobu ABE’など
※「“」または「‘」で囲む
(3)論理値型
“True”または”False”
(4)null型
(演習3)イベントハンドラ(1) onClick
「hinagata.html」の内容を修正し「jstest10-3.html」で保存して
ください
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>演習10-3(JavaScript) </title> </head>
<body> <p>
<img src="tsujido.jpg" onClick="alert('辻堂の写真です!')">
</p> </body> </html>
(演習3)結果
(演習4)イベントハンドラ(2) onMouseOver
「hinagata.html」の内容を修正し「jstest10-4.html」で保存して
ください
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>演習10-4(JavaScript) </title> </head>
<body> <p>
<img src="tsujido.jpg" onMouseOver="alert('辻堂の写真です!')">
</p> </body> </html>
(演習4)結果
マウスポインタ
を移動
(演習5)イベントハンドラ(3) onLoad
「hinagata.html」の内容を修正し「jstest10-5.html」で保存して
ください
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>演習10-5(JavaScript) </title> </head>
<body onLoad= "alert('辻堂の写真です!')">
<p> <img src="tsujido.jpg"> </p> </body> </html>
修正・追加する行
(演習5)結果
イベントハンドラ解説
onClick：マウスクリックでJavaScript実行
onMouseOver：マウスの移動でJavaScript実行
onLoad：ページのロード時にJavaScript実行
onBlur：フォーカスが外れた時にJavaScript実行
onChange：フォームの内容が変更した際に
JavaScript実行
onFocus：フォーカスされた時にJavaScript実行
onUnload：別ページに移動する時にJavaScript実行
(演習6)関数の定義
「jstest10-3.html」の内容を修正し「jstest10-6.html」で保存してください
前略
<title>演習10-6(JavaScript) </title>
<script type="text/javascript"> <!--function showphotoinfo() { alert('辻堂の写真です!'); } //--> </script> </head> <body> <p>
<img src="tsujido.jpg" onClick=“showphotoinfo() ">
</p> </body> </html>
