Javascript課題集

提供:Wiki@KDS
2007年7月13日 (金) 12:23時点における192.168.200.244 (トーク)による版
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
ナビゲーションに移動 検索に移動

Level1

難易度1。DynamicHTML的なjavascriptの使い方の基本形。

同じ効果を持つサンプルスクリプト等を参考にしていいです。ただしその際、利用したサンプルスクリプトが何を行なっているかをよく考えること

タカシマヤ等のスクリプトは、同じ効果でも一般的なサンプルスクリプトより複雑な処理をしているものが多いため、Level4以上をクリアーするまでは参考にしないように。

解答時に、「ここの処理は何を行なっていて、それにはどんな意味があるのか」を質問します。

1.マウスオーバー

画像にマウスカーソルが当たった場合に画像を切り替え、マウスアウト時に元の画像に戻してください。

  • イベント発生条件:mouseover、mouseout
  • アクション内容:画像が切り替わる
2.画像切り替え

画像をクリックすると別の画像に変わるようにしてください。

  • イベント発生条件:onclick
  • アクション内容:画像が切り替わる
3.ランダム

ページを読み込む度に違う画像を表示するようにしてください。

  • イベント発生条件:onload
  • アクション内容:画像がランダムで表示される。
4.ポップアップ

アンカーをクリックすると、ポップアップウィンドウが開くようにしてください。

  • イベント発生条件:onclick(又はhref内)
  • アクション内容:ポップアップウィンドウを開く

参考サイト