Ｗｅｂデザイン論

Size: px

Start display at page:

Download "Ｗｅｂデザイン論"

さいぞうこけい
5 years ago
Views:

1 2008 年度松山大学経営学部開講科目情報コース特殊講義 Web デザイン論檀裕也

2 前回の課題 Web デザイン論の期末試験まで何日残っているか表示する Web ページを JavaScript で制作し公開せよ宛先 : dan@cc.matsuyama-u.ac.jp 件名 : Web デザイン #23_ 課題本文 : 公開 URL 授業の感想など 2008 年 7 月 7 日 Web デザイン論 2

3 表示例ヒント期末試験の実施日は 2008 年 8 月 4 日である Date クラスを用いて日数を計算せよ JavaScript の実行日によって計算処理が変わる 7 月と 8 月の場合に処理を分けて計算せよ 2008 年 7 月 7 日 Web デザイン論 3

4 解答例 countdown.html <html> <head> <title> 課題 #23: 期末試験まであと何日?</title> <meta http-equiv="content-script-type" content="text/javascript"> </head> <body> <h1> 期末試験まであと何日?</h1> <p> Webデザイン論の期末試験まであと <script type="text/javascript">  </script> 日です </p> </body> </html> 2008 年 7 月 7 日 Webデザイン論 4

getmonth() + 1; if( month >= 8 ){ if( month > 8 ( month == 8 && date > 4 ) ){ document.

5 別解 <p> Web デザイン論の期末試験 <script type="text/javascript">  </script> </p> 2008 年 7 月 7 日 Web デザイン論 5

6 今回の内容 JavaScript(3) 実用 Tips フィードバック効果コンテンツの展開と隠ぺいフェードイン 2008 年 7 月 7 日 Webデザイン論 6

7 フィードバック効果ユーザの操作に応じて画面上の表示を変えるユーザは自然な感覚で Web ページを操作できる現実のボタンなどの動作に似せると分かりやすい通常の表示ロールオーバークリックオブジェクトの上にマウスカーソルがある状態マウスをクリックした状態 2008 年 7 月 7 日 Web デザイン論 7

jp/"> <img src="./mu01.gif" alt=" 松山大学 " onmouseover="this.src='./mu02.gif'" onmouseout="this.src='./mu01.gif'" onmousedown="this.

8 例題 1 <html> <head> <title> 例題 #24: フィードバック効果 </title> <meta http-equiv="content-script-type" content="text/javascript"> <style type="text/css"> img{ border: none; </style> </head> <body> <h1> フィードバック効果 </h1> <a href=" <img src="./mu01.gif" alt=" 松山大学 " onmouseover="this.src='./mu02.gif'" onmouseout="this.src='./mu01.gif'" onmousedown="this.src='./mu03.gif'" onmouseup="this.src='./mu02.gif'" /></a> </body> 2008 年 7 月 7 日 Web デザイン論 8 </html> feedback.html 画像を用意せよ mu01.gif mu02.gif mu03.gif

9 解説画像の表示 <img src="./mu01.gif"... /> イベントハンドラマウスの操作に応じて JavaScript のコードを実行 onmouseover="this.src='./mu02.gif'" 上にある onmouseout="this.src='./mu01.gif'" 離れる onmousedown="this.src='./mu03.gif'" ボタンを押す onmouseup="this.src='./mu02.gif'" ボタンを離す 2008 年 7 月 7 日 Web デザイン論 9

10 例題 2(1/2) <html> expansion.html <head> <title> 例題 #24: コンテンツの展開と隠ぺい </title> <meta http-equiv="content-script-type" content="text/javascript"> <style type="text/css"> ul{ display: none; </style> </head> <body> <h1> コンテンツの展開と隠ぺい </h1> <h2 onmousedown="faculty.style.display='block'"> 松山大学 </h2> <ul id="faculty"> <li> 経済学部 </li> <li> 経営学部 </li> 2008 年 7 月 7 日 Web デザイン論 10

11 例題 2(2/2) <li onmousedown=" if( humanities.style.display=='block' ){ humanities.style.display='none'; else{ humanities.style.display='block'; "> 人文学部 </li> <ul id="humanities"> <li> 英語英米文学科 </li> <li> 社会学科 </li> </ul> <li> 法学部 </li> <li> 薬学部 </li> </ul> </body> </html> 2008 年 7 月 7 日 Web デザイン論 11

12 表示例松山大学と人文学部の文字をクリック! 2008 年 7 月 7 日 Web デザイン論 12

13 解説 display プロパティ各要素の表示に関する CSS のプロパティ値に block/inline/none などを設定するブロック要素とインライン要素 JavaScript で CSS を操作するとき id.style.property を使って値の参照と設定ができる id に this キーワードを指定するとその参照元要素に対する CSS を操作する 2008 年 7 月 7 日 Web デザイン論 13

14 例題 3(1/2) <html> fade-in.html <head> <title> 例題 #24: フェードイン </title> <meta http-equiv="content-script-type" content="text/javascript"> <script type="text/javascript">  </script> 2008 年 7 月 7 日 Web デザイン論 14

15 <style type="text/css"> body{ filter: alpha( opacity = 0 ); </style> </head> <body> <h1> フェードイン </h1> </body> </html> 例題 3(2/2) 2008 年 7 月 7 日 Web デザイン論 15

16 表示例 JavaScript でフェード効果を実現するただし Internet Explorer のみ対応 2008 年 7 月 7 日 Web デザイン論 16

17 関数ひとまとまりの処理を関数として定義し必要に応じて呼び出して使用する function キーワードで関数を定義する関数の名前 ( ここでは f) は自由につけてよい function f(){ 処理内容 2008 年 7 月 7 日 Web デザイン論 17

18 解説不透明度 document.body.filters.alpha.opacity 0( 透明 )~100( 不透明 ) の値を取る関数の定期的な呼び出し setinterval( ' 関数名 ', 時間 ); 時間はミリ秒で指定する (1000ミリ秒 =1 秒 ) 2008 年 7 月 7 日 Web デザイン論 18

19 提出物リアルタイムに現在時刻を表示する Web ページを JavaScript で制作し公開せよ宛先 : dan@cc.matsuyama-u.ac.jp 件名 : Web デザイン #24_ 課題本文 : 公開 URL 授業の感想など 2008 年 7 月 7 日 Web デザイン論 19

20 表示例秒刻みで現在時刻を表示する Date クラスを用いて現在時刻を取得せよ例題 3 に従って setinterval と関数を活用せよ 2008 年 7 月 7 日 Web デザイン論 20

ヒント <html> <head> <title> 課題 #24: 現在時刻 </title> <meta http-equiv="content-script-type" content="text/javascript"> <script type="text/javascript"> <! var now = new Date(); Hour = now.

21 ヒント <html> <head> <title> 課題 #24: 現在時刻 </title> <meta http-equiv="content-script-type" content="text/javascript"> <script type="text/javascript"> <! var now = new Date(); Hour = now.gethours(); Minute = now.getminutes(); Second = now.getseconds(); document.time.clock.value = Hour + " 時 " + Minute + " 分 " + Second + " 秒 "; //--> </script> <style type="text/css"> </style> </head> 2008 年 7 月 7 日 Web デザイン論 21

22 ヒント <body> <h1> 現在時刻 </h1> <form name="time"> <input name="clock" /> </form> </body> </html> 2008 年 7 月 7 日 Web デザイン論 22

23 次回の予定第 25 回 JavaScript(4) 実用 Tips 2008 年 7 月 9 日 ( 水 ) 5 時限目 870 教室 2008 年 7 月 7 日 Web デザイン論 23

24 前期末のスケジュール 2008 年度前期末 7 月 28 日 ( 月 ) 3 時限授業 7 月 30 日 ( 水 ) 授業なし 8 月 4 日 ( 月 ) 3 時限期末試験 2008 年 7 月 7 日 Web デザイン論 24

Ｗｅｂデザイン論

Ｗｅｂデザイン論 2008 年度松山大学経営学部開講科目情報コース特殊講義 Web デザイン論檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 出席確認受講管理システム AMUSE を使って本日の出席登録をせよ学籍番号とパスワードを入力するだけでよい : http://davinci.cc.matsuyama-u.ac.jp/~dan/amuse/