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

Size: px

Start display at page:

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

あいねにばし
5 years ago
Views:

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

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

3 jstest11-5.html の内容を修正し jstest12-1.html で保存してください前略 <title> 演習 12-1(JavaScript)</title> <style type="text/css">  </style> </head> <body> <h1> 日本の風景 </h1> <table> <tr><td> <img src="m_nature01.jpg" onmouseover="this.src='nature01.jpg'" onmouseout="this.src='m_nature01.jpg'"> </td><td> <img src="m_nature02.jpg" onmouseover="this.src='nature02.jpg'" onmouseout="this.src='m_nature02.jpg'"> </td><td> ( 演習 1)Image オブジェクト (1) <img src="m_nature03.jpg" onmouseover="this.src='nature03.jpg'" onmouseout="this.src='m_nature03.jpg'"> </td> </tr><tr><td> <img src="m_nature04.jpg" onmouseover="this.src='nature04.jpg'" onmouseout="this.src='m_nature04.jpg'"> </td><td> <img src="m_nature05.jpg" onmouseover="this.src='nature05.jpg'" onmouseout="this.src='m_nature05.jpg'"> </td><td> <img src="m_nature06.jpg" onmouseover="this.src='nature06.jpg'" onmouseout="this.src='m_nature06.jpg'"> </td></tr> </table> </body> </html> 3/18

4 画像上にマウスを移動するとカラー表示する ( 演習 1) 結果 4/18

5 Image オブジェクトのプロパティプロパティ値内容 src 文字列画像ファイル名 (URL) width 数値画像の幅 ( ピクセル ) height 数値画像の高さ ( ピクセル ) border 数値画像の枠線 ( ピクセル ) name 文字列画像の名前 this( 自分自身 ) の利用 <img src= aaa.jpg onclick= this.width=500 > クリックされると自分自身 (Image) の幅を変更イベントハンドラ onmouseover, onmouseout Image オブジェクト : 解説 5/18

6 jstest12-1.html の内容を修正し jstest12-2.html で保存してください前略 <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title> 演習 12-2(JavaScript)</title> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> ( 演習 2)Image オブジェクト (2) <body> <h1> 日本の風景 </h1> <button onclick="resize(120)"> サイズ小 </button> <button onclick="resize(180)"> サイズ中 </button> <button onclick="resize(240)"> サイズ大 </button> <table> <tr><td> <img src="m_nature01.jpg" onmouseover="this.src='nature01.jpg'" onmouseout="this.src='m_nature01.jpg'"> </td><td> <img src="m_nature02.jpg" onmouseover="this.src='nature02.jpg'" onmouseout="this.src='m_nature02.jpg'"> </td><td> 後略 6/18

7 サイズ小ボタンを押すと画像サイズを小さくする ( 演習 2) 結果 7/18

8 jstest12-2.html の内容を修正し jstest12-3.html で保存してください前略 <style type="text/css">  </style> <script type="text/javascript">  </script> </head> 中略 </td> </tr> </table> <button onclick="colorhyouji()"> 全画像をカラーで表示 </button> <button onclick="monohyouji()"> 全画像をモノクロで表示 </button> </body> </html> ( 演習 3)Image オブジェクト (3) 8/18

9 全画像をカラーで表示ボタンを押すと画像をカラーで表示 ( 演習 3) 結果 9/18

10 Imageオブジェクトの指定 document.images[i] imgタグが登場した順にi = 0,1,2,3 で指定演習 2 解説 document.images[i].width = 120, 180, 240 ボタンクリックにより幅を変更演習 3 解説 document.images[i].src = nature0 + (i+1) +.jpg ; カラー m_nature0 + (i+1) +.jpg ; 白黒 Image オブジェクト : 解説 (2) 10/18

11 jstest12-3.html の内容を修正し jstest12-4.html で保存してください前略 <img src="m_nature06.jpg" onmouseover="this.src='nature06.jpg'" onmouseout="this.src='m_nature06.jpg'"> </td> </tr> </table> <button onclick="colorhyouji()"> 全画像をカラーで表示 </button> <button onclick="monohyouji()"> 全画像をモノクロで表示 </button> <br> 背景色を変更します <br> <button onclick="document.bgcolor = '#ff0000'"> あか </button> <button onclick="document.bgcolor = '#00ff00'"> みどり </button> <button onclick="document.bgcolor = '#0000ff'"> あお </button> <button onclick="document.bgcolor = '#ffa500'"> オレンジ </button> <button onclick="document.bgcolor = '#000000'"> くろ </button> <button onclick="document.bgcolor = '#ffffff'"> しろ </button> </body> </html> ( 演習 4)document オブジェクト 11/18

12 あかみどりあおオレンジくろしろ ( 演習 4) 結果 12/18

13 document オブジェクトのプロパティプロパティ bgcolor fgcolor linkcolor vlinkcolor alinkcolor title lastmodified URL 内容ホームページの背景色文字色リンク文字色訪問済みのリンク文字色リンクをクリックしたときの色タイトル文字ファイルの最終更新日時ホームページのURL document. プロパティ名 = 値 document.bgcolor = ff0000 背景色を赤色に document オブジェクト : 解説 13/18

14 jstest11-5.html の内容を修正し jstest12-5.html で保存してください前略 <script type="text/javascript">  </script> </head> 次ページへ ( 演習 5)window オブジェクト (1/2) 14/18

15 jstest11-5.html の内容を修正し jstest12-5.html で保存してください <body> <h3> 湘南工科大学リンク集 </h3> <table border="1 ><tr> <th> 情報工学科 </th> <td><button onclick="hiraku(0)"> 開く </button></td> <td><button onclick="tojiru(0)"> 閉じる </button></td> </tr><tr> <th> 電気電子工学科 </th> <td><button onclick="hiraku(1)"> 開く </button></td> <td><button onclick="tojiru(1)"> 閉じる </button></td> </tr><tr> <th> コンピュータ応用学科 </th> <td><button onclick="hiraku(2)"> 開く </button></td> <td><button onclick="tojiru(2)"> 閉じる </button></td> </tr></table> </body> </html> ( 演習 5)window オブジェクト (2/2) 15/18

16 ( 演習 5) 結果 IE8/9 はセキュリティの仕様からローカル環境では close() は正常動作しない 16/18

17 新しいウィンドウを開く window.open() window.open( URL, ウィンドウ名, 属性 ); ウィンドウを閉じる window.close() window.close(); オブジェクト変数新しいウィンドウをオブジェクト変数 sub に代入 var sub = window.open(url); オブジェクト変数 sub を閉じる sub.close(); window オブジェクト : 解説 17/18

18 本日の演習内容について復習してください演習内容作成ファイル演習 1 Imageオブジェクト (1) jstest12-1.html 演習 2 Imageオブジェクト (2) jstest12-2.html 演習 3 Imageオブジェクト (3) jstest12-3.html 演習 4 documentオブジェクト jstest12-4.html 演習 5 windowオブジェクト jstest12-5.html JavaScript(3) まとめ 18/18

Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/

Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/8 ( 水 ) HTML+CSS (3) (2 章 ) 5/15 ( 水 ) HTML+CSS (4)