Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21

Size: px

Start display at page:

Download "Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21"

さなえみねむら
5 years ago
Views:

1 Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 1/21

2 演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名使用するフォルダ演習 1 Z: Web データ管理演習 1 演習 2 Z: Web データ管理演習 2 演習 3 Z: Web データ管理演習 3 演習 4 Z: Web データ管理演習 4 演習 5 Z: Web データ管理演習 5 演習 6 Z: Web データ管理演習 6 講義で使うフォルダ 2/21

3 Netscape Communications 社が開発したスクリプト言語で Web ブラウザ上で動作する HTML テキスト内に <script> タグを用いて書き込んだスクリプトがブラウザ上で直接実行される (1)JavaScript は HTML 中に埋め込むスクリプトなので実行環境に応じてコンパイルする必要はない (2)JavaScript はクライアントサイトで動作可能なためサーバ側の計算負荷や通信負荷がかからない (3) サーバサイドプログラムの実行を禁止しているサーバ上でも動作可能 JavaScript とは 3/21

4 hinagata.html の内容を修正し jstest10-1.html で保存してください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <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">  </script> </p> </body> </html> 修正追加する行 ( 演習 1) 初めての JavaScript プログラム 4/21

5 ( 演習 1) 結果 5/21

6 概要 : ドキュメント出力用のストリームに文字列を出力要約 :script での処理結果の出力詳細 : オブジェクト :document メソッド :write( 他メソッドとして open,close 等がある ) <html> <head><title> はじめての JavaScript</title></head> <body> HTML に <script language="javascript">  </script> </body> </html> document.write 6/21

7 jstest10-1.html の内容を修正し jstest10-2.html で保存してください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <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

8 ( 演習 2) 結果 8/21

9 大文字小文字は区別するプログラムの記述は半角英数 JavaScript javascript/javascript はダメ文末は ; 全ての文末に入れる a=10; b=5; a=10; b=5; 空白スペースと改行 (1) トークンを区切る空白タブ改行コードの無視タブなどを用いてプログラムを見やすく工夫する (2) トークン : キーワード変数名数値関数名等の文字列 JavaScript の記述ルール 9/21

10 変数の宣言 var 変数名 ; 変数とデータ型 (1) 数値型 100, 0.5, 10e3 など (2) 文字列型 Happy, Tsujido, Hironobu ABE などまたはで囲む (3) 論理値型 True または False (4)null 型何もない状態未定義の変数を参照した時 JavaScript の変数 10/21

11 hinagata.html の内容を修正し jstest10-3.html で保存してください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <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

12 クリック ( 演習 3) 結果 12/21

13 hinagata.html の内容を修正し jstest10-4.html で保存してください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <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

14 マウスポインタを移動 ( 演習 4) 結果 14/21

15 hinagata.html の内容を修正し jstest10-5.html で保存してください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <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

16 クリック ( 演習 5) 結果 16/21

17 onclick: マウスクリックで JavaScript 実行 onmouseover: マウスの移動で JavaScript 実行 onload: ページのロード時に JavaScript 実行 onblur: フォーカスが外れた時に JavaScript 実行 onchange: フォームの内容が変更した際に JavaScript 実行 onfocus: フォーカスされた時に JavaScript 実行 onunload: 別ページに移動する時に JavaScript 実行イベントハンドラ解説 17/21

18 jstest10-3.html の内容を修正し jstest10-6.html で保存してください前略 <title> 演習 10-6(JavaScript) </title> <script type="text/javascript">  </script> </head> <body> <p> <img src="tsujido.jpg" onclick= showphotoinfo() "> </p> </body> </html> ( 演習 6) 関数の定義修正追加する行 18/21

19 クリック演習 3 と同じ結果 ( 演習 6) 結果 19/21

20 関数の定義 <script type="text/javascript">  </script> 予約語は指定できない関数名の最初の 1 文字はアルファベット全角文字は使用できないイベントハンドラから関数名 () で呼び出す関数の定義 : 解説 20/21

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

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 1/18 演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名使用するフォルダ演習 1 Z: Web データ管理 20111221