「Javascript課題集」の版間の差分
ナビゲーションに移動
検索に移動
編集の要約なし |
編集の要約なし |
||
| 7行目: | 7行目: | ||
<p>タカシマヤ等のスクリプトは、同じ効果でも一般的なサンプルスクリプトより複雑な処理をしているものが多いため、Level4以上をクリアーするまでは参考にしないように。</p> | <p>タカシマヤ等のスクリプトは、同じ効果でも一般的なサンプルスクリプトより複雑な処理をしているものが多いため、Level4以上をクリアーするまでは参考にしないように。</p> | ||
<p>解答時に、「ここの処理は何を行なっていて、それにはどんな意味があるのか」を質問します。</p> | <p>解答時に、「ここの処理は何を行なっていて、それにはどんな意味があるのか」を質問します。</p> | ||
<p>IE5.x以上、firefox、safari、MacIE5.xで動作すること。</p> | |||
</div> | </div> | ||
| 16行目: | 17行目: | ||
<p>画像にマウスカーソルが当たった場合に画像を切り替え、マウスアウト時に元の画像に戻してください。</p> | <p>画像にマウスカーソルが当たった場合に画像を切り替え、マウスアウト時に元の画像に戻してください。</p> | ||
<ul> | <ul> | ||
<li> | <li><strong>イベント発生条件</strong>：mouseover、mouseout</li> | ||
<li> | <li><strong>アクション内容</strong>：画像が切り替わる</li> | ||
<li><strong>条件</strong>：ボタンは2つ</li> | |||
</ul> | </ul> | ||
<p>[http://192.168.200.60:16080/kds_tko/exercise/level1/level1_01.zip 素材画像]</p> | |||
</dd> | </dd> | ||
| 25行目: | 28行目: | ||
<p>画像をクリックすると別の画像に変わるようにしてください。</p> | <p>画像をクリックすると別の画像に変わるようにしてください。</p> | ||
<ul> | <ul> | ||
<li> | <li><strong>イベント発生条件</strong>：onclick</li> | ||
<li> | <li><strong>アクション内容</strong>：画像が切り替わる</li> | ||
<li><strong>条件</strong>：画像は1つ</li> | |||
</ul> | </ul> | ||
<p>[http://192.168.200.60:16080/kds_tko/exercise/level1/level1_02.zip 素材画像]</p> | |||
</dd> | </dd> | ||
| 34行目: | 39行目: | ||
<p>ページを読み込む度に違う画像を表示するようにしてください。</p> | <p>ページを読み込む度に違う画像を表示するようにしてください。</p> | ||
<ul> | <ul> | ||
<li> | <li><strong>イベント発生条件</strong>：onload（ページ読み込み完了時）</li> | ||
<li> | <li><strong>アクション内容</strong>：画像がランダムで表示される</li> | ||
<li><strong>条件</strong>：表示するimgタグは1つ。ランダムで表示される画像は3種類。それぞれ同じサイズで、ページ読み込み完了時にdocument.writeする。</li> | |||
</ul> | </ul> | ||
<p>[http://192.168.200.60:16080/kds_tko/exercise/level1/level1_03.zip 素材画像]</p> | |||
</dd> | </dd> | ||
| 43行目: | 50行目: | ||
<p>アンカーをクリックすると、ポップアップウィンドウが開くようにしてください。</p> | <p>アンカーをクリックすると、ポップアップウィンドウが開くようにしてください。</p> | ||
<ul> | <ul> | ||
<li> | <li><strong>イベント発生条件</strong>：onclick（又はhref内）</li> | ||
<li> | <li><strong>アクション内容</strong>：ポップアップウィンドウを開く</li> | ||
<li><strong>条件</strong>：リンクは2つ。開くウィンドウのサイズは400×600でその他パラメーターは自由。</li> | |||
</ul> | </ul> | ||
</dd> | </dd> | ||
2007年7月13日 (金) 13:04時点における版
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でその他パラメーターは自由。
参考サイト