Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 1/18
演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111221 演習 1 演習 2 Z: Web データ管理 20111221 演習 2 演習 3 Z: Web データ管理 20111221 演習 3 演習 4 Z: Web データ管理 20111221 演習 4 演習 5 Z: Web データ管理 20111221 演習 5 講義で使うフォルダ 2/18
jstest11-5.html の内容を修正し jstest12-1.html で保存してください 前略 <title> 演習 12-1(JavaScript)</title> <style type="text/css"> <!-- td{padding:10px; --> </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
画像上にマウスを移動するとカラー表示する ( 演習 1) 結果 4/18
Image オブジェクトのプロパティ プロパティ値内容 src 文字列画像ファイル名 (URL) width 数値画像の幅 ( ピクセル ) height 数値画像の高さ ( ピクセル ) border 数値画像の枠線 ( ピクセル ) name 文字列画像の名前 this( 自分自身 ) の利用 <img src= aaa.jpg onclick= this.width=500 > クリックされると自分自身 (Image) の幅を変更 イベントハンドラ onmouseover, onmouseout Image オブジェクト : 解説 5/18
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"> <!-- td{padding:10px; --> </style> <script type="text/javascript"> <!-- function resize(s){ for (i=0 ; i<=5 ; i++){ document.images[i].width = s; //--> </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
サイズ小 ボタンを押すと画像サイズを小さくする ( 演習 2) 結果 7/18
jstest12-2.html の内容を修正し jstest12-3.html で保存してください 前略 <style type="text/css"> <!-- td{padding:10px; --> </style> <script type="text/javascript"> <!-- function resize(s){ for (i=0 ; i<=5 ; i++){ document.images[i].width = s; function ColorHyouji(){ for (i=0 ; i<=5 ; i++){ document.images[i].src = "nature0" + (i+1) + ".jpg"; function MonoHyouji(){ for (i=0 ; i<=5 ; i++){ document.images[i].src = "m_nature0" + (i+1) + ".jpg"; //--> </script> </head> 中略 </td> </tr> </table> <button onclick="colorhyouji()"> 全画像をカラーで表示 </button> <button onclick="monohyouji()"> 全画像をモノクロで表示 </button> </body> </html> ( 演習 3)Image オブジェクト (3) 8/18
全画像をカラーで表示 ボタンを押すと画像をカラーで表示 ( 演習 3) 結果 9/18
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
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
あかみどりあお オレンジくろしろ ( 演習 4) 結果 12/18
document オブジェクトのプロパティ プロパティ bgcolor fgcolor linkcolor vlinkcolor alinkcolor title lastmodified URL 内容 ホームページの背景色文字色リンク文字色訪問済みのリンク文字色リンクをクリックしたときの色タイトル文字ファイルの最終更新日時ホームページのURL document. プロパティ名 = 値 document.bgcolor = ff0000 背景色を赤色に document オブジェクト : 解説 13/18
jstest11-5.html の内容を修正し jstest12-5.html で保存してください 前略 <script type="text/javascript"> <!-- var url = new Array(3); url[0] = "http://www.shonan-it.ac.jp/contents/faculties/technology/information/index.html"; url[1] = "http://www.shonan-it.ac.jp/contents/faculties/technology/electronic/index.html"; url[2] = "http://www.shonan-it.ac.jp/contents/faculties/technology/computer/index.html"; var sub = new Array(3); function hiraku(x) { sub[x] = window.open(url[x]); function tojiru(y) { sub[y].close(); //--> </script> </head> 次ページへ ( 演習 5)window オブジェクト (1/2) 14/18
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
( 演習 5) 結果 IE8/9 は セキュリティの仕様からローカル環境では close() は正常動作しない 16/18
新しいウィンドウを開く window.open() window.open( URL, ウィンドウ名, 属性 ); ウィンドウを閉じる window.close() window.close(); オブジェクト変数新しいウィンドウをオブジェクト変数 sub に代入 var sub = window.open(url); オブジェクト変数 sub を閉じる sub.close(); window オブジェクト : 解説 17/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