Webデータ管理
JavaScript (3) (4章)
講義で使うフォルダ
演習室の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¥
(演習1)Imageオブジェクト(1)
「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> <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>(演習1)結果
画像上にマウスを移動
するとカラー表示する
Imageオブジェクト：解説
Imageオブジェクトのプロパティ
this(自分自身)の利用
<img src=“aaa.jpg” onClick=“this.width=500”>
⇒ クリックされると自分自身(Image)の幅を変更
イベントハンドラ
onMouseOver, onMouseOut
プロパティ 値
内容
src
文字列
画像ファイル名 (URL)
width
数値
画像の幅 (ピクセル)
height
数値
画像の高さ (ピクセル)
border
数値
画像の枠線 (ピクセル)
name
文字列
画像の名前
(演習2)Imageオブジェクト(2)
「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> <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> 後略
(演習2)結果
「サイズ小」ボタンを押す
と画像サイズを小さくする
(演習3)Imageオブジェクト(3)
「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オブジェクト：解説(2)
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”;
⇒白黒
(演習4)documentオブジェクト
「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オブジェクト：解説
documentオブジェクトのプロパティ
document.プロパティ名 = “値”
document.bgColor = ‘ff0000’ ⇒ 背景色を赤色に
プロパティ
内容
bgColor ホームページの背景色 fgColor 文字色 linkColor リンク文字色 vlinkColor 訪問済みのリンク文字色 alinkColor リンクをクリックしたときの色 title タイトル文字 lastModified ファイルの最終更新日時 URL ホームページのURL(演習5)windowオブジェクト(1/2)
「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> 次ページへ
