Javascript課題集

Level1

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

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

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

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

IE5.x以上、firefox、safari、MacIE5.xで動作すること。

1.マウスオーバー

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

• イベント発生条件：mouseover、mouseout
• アクション内容：画像が切り替わる
• 条件：ボタンは2つ

素材画像

2.画像切り替え

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

• イベント発生条件：onclick
• アクション内容：画像が切り替わる
• 条件：画像は1つ

素材画像

3.ランダム

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

• イベント発生条件：onload（ページ読み込み完了時）
• アクション内容：画像がランダムで表示される
• 条件：表示するimgタグは1つ。ランダムで表示される画像は3種類。それぞれ同じサイズで、ページ読み込み完了時にdocument.writeする。

素材画像

4.ポップアップ

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

• イベント発生条件：onclick（又はhref内）
• アクション内容：ポップアップウィンドウを開く
• 条件：リンクは2つ。開くウィンドウのサイズは400×600でその他パラメーターは自由。

Level2

難易度☆☆。DynamicHTML的なjavascriptの使い方の応用編。

1.マウスオーバーボタン×３+切り替え画像１

2.時間でランダム

3秒毎

3.クリックで開閉するエリア

4.擬似タブ

Level3

難易度☆☆☆。DynamicHTML的なjavascriptの使い方の上級編。

1.開閉サブメニュー（例：通販サブメニュー）

2.ランダムエリア

3.ページに埋め込まれている変数によって表示するエリアを切り替え

4.ショーウィンドウ

Level4

難易度☆☆～☆☆☆☆。DOM初級編。

1.DOMでマウスオーバー

1-1と同じ処理をDOMを利用して行なってください。

• イベント発生条件：mouseover、mouseout
• アクション内容：画像が切り替わる
• 条件：HTMLソース内にイベントハンドラの記述をしない

素材画像

2.DOMで開閉処理

2-3の多階層版をDOMを利用して行なってください。

• イベント発生条件：onclick
• アクション内容：クリックでカテゴリリストが開閉する
• 条件：クリックしたカテゴリの1つ下のカテゴリしか開かない。

素材HTML

3.DOMでID検索→ハイライト

4-3の処理に、IDで検索

• イベント発生条件：検索ボタンをクリック
• アクション内容：検索
• 条件：検索に入力されたカテゴリIDに該当するカテゴリがあった場合、自動で開閉を行い該当カテゴリにスクロールする。さらに該当のカテゴリのカテゴリ名をboldにする。

4-2の素材と同じものを使ってください。

参考サイト

• とほほのJavaScriptリファレンス