「Javascript課題集」の版間の差分
ナビゲーションに移動
検索に移動
編集の要約なし |
編集の要約なし |
||
| 57行目: | 57行目: | ||
</dl> | </dl> | ||
</div> | |||
<h2>Level2</h2> | |||
<div class="section"> | |||
<p>難易度2。DynamicHTML的なjavascriptの使い方の応用編。</p> | |||
</div> | |||
<div class="section"> | |||
<dl> | |||
<dt>1.マウスオーバーボタン×３+切り替え画像１</dt> | |||
<dd></dd> | |||
</dl> | |||
<dl> | |||
<dt>2.時間でランダム</dt> | |||
<dd>3秒毎</dd> | |||
</dl> | |||
<dl> | |||
<dt>3.クリックで開閉するエリア</dt> | |||
<dd></dd> | |||
</dl> | |||
<dl> | |||
<dt>4.擬似タブ</dt> | |||
<dd></dd> | |||
</dl> | |||
</div> | </div> | ||
2007年7月17日 (火) 23:29時点における版
Level1
難易度1。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
難易度2。DynamicHTML的なjavascriptの使い方の応用編。
- 1.マウスオーバーボタン×３+切り替え画像１
- 2.時間でランダム
- 3秒毎
- 3.クリックで開閉するエリア
- 4.擬似タブ
参考サイト