Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 1/21
演習室の 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 講義で使うフォルダ 2/21
Netscape Communications 社が開発したスクリプト言語で Web ブラウザ上で動作する HTML テキスト内に <script> タグを用いて書き込んだスクリプトが ブラウザ上で直接実行される (1)JavaScript は HTML 中に埋め込むスクリプトなので実行環境に応じてコンパイルする必要はない (2)JavaScript はクライアントサイトで動作可能なためサーバ側の計算負荷や通信負荷がかからない (3) サーバサイドプログラムの実行を禁止しているサーバ上でも動作可能 JavaScript とは 3/21
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> 修正 追加する行 ( 演習 1) 初めての JavaScript プログラム 4/21
( 演習 1) 結果 5/21
概要 : ドキュメント出力用のストリームに文字列を出力要約 :script での処理結果の出力詳細 : オブジェクト :document メソッド :write( 他メソッドとして open,close 等がある ) <html> <head><title> はじめての JavaScript</title></head> <body> HTML に <script language="javascript"> <!-- document.write( はじめての JavaScript ); //--> </script> </body> </html> document.write 6/21
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> ( 演習 2)JavaScript における変数 修正 追加する行 7/21
( 演習 2) 結果 8/21
大文字 小文字は区別する プログラムの記述は半角英数 JavaScript javascript/javascript はダメ 文末は ; 全ての文末に入れる a=10; b=5; a=10; b=5; 空白スペースと改行 (1) トークンを区切る空白 タブ 改行コードの無視 タブなどを用いて プログラムを見やすく工夫する (2) トークン : キーワード 変数名 数値 関数名等の文字列 JavaScript の記述ルール 9/21
変数の宣言 var 変数名 ; 変数とデータ型 (1) 数値型 100, 0.5, 10e3 など (2) 文字列型 Happy, Tsujido, Hironobu ABE など または で囲む (3) 論理値型 True または False (4)null 型何もない状態 未定義の変数を参照した時 JavaScript の変数 10/21
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) イベントハンドラ (1) onclick 11/21
クリック ( 演習 3) 結果 12/21
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) イベントハンドラ (2) onmouseover 13/21
マウスポインタを移動 ( 演習 4) 結果 14/21
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) イベントハンドラ (3) onload 15/21
クリック ( 演習 5) 結果 16/21
onclick: マウスクリックで JavaScript 実行 onmouseover: マウスの移動で JavaScript 実行 onload: ページのロード時に JavaScript 実行 onblur: フォーカスが外れた時に JavaScript 実行 onchange: フォームの内容が変更した際に JavaScript 実行 onfocus: フォーカスされた時に JavaScript 実行 onunload: 別ページに移動する時に JavaScript 実行 イベントハンドラ解説 17/21
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> ( 演習 6) 関数の定義 修正 追加する行 18/21
クリック 演習 3 と同じ結果 ( 演習 6) 結果 19/21
関数の定義 <script type="text/javascript"> <!-- function 関数名 () { 関数の処理内容 ; } //--> </script> 予約語は指定できない 関数名の最初の 1 文字はアルファベット 全角文字は使用できない イベントハンドラから 関数名 () で呼び出す 関数の定義 : 解説 20/21
本日の演習内容について復習してください 演習 内容 作成ファイル 演習 1 初めてのJavaScriptプログラム jstest10-1.html 演習 2 JavaScriptにおける変数 jstest10-2.html 演習 3 イベントハンドラ (1) onclick jstest10-3.html 演習 4 イベントハンドラ (2) onmouseover jstest10-4.html 演習 5 イベントハンドラ (3) onload jstest10-5.html 演習 6 関数の定義 jstest10-6.html JavaScript(1) まとめ 21/21