「Javascript課題集」の版間の差分
ナビゲーションに移動
検索に移動
編集の要約なし |
編集の要約なし |
||
| (2人の利用者による、間の3版が非表示) | |||
| 1行目: | 1行目: | ||
<div id=" | <div id="problem"> | ||
==Level.1== | |||
<div class="section"> | <div class="section"> | ||
| 11行目: | 11行目: | ||
<div class="section"> | <div class="section"> | ||
===1.マウスオーバー=== | |||
<p>画像にマウスカーソルが当たった場合に画像を切り替え、マウスアウト時に元の画像に戻してください。</p> | |||
<dl> | |||
<dt>イベント発生条件</dt> | |||
<dd>mouseover、mouseout</dd> | |||
<dt>アクション内容</dt> | |||
<dd>画像が切り替わる</dd> | |||
<dt>条件</dt> | |||
<dd>ボタンは2つ</dd> | |||
<dt>素材</dt> | |||
<dd>[http://192.168.200.60:16080/kds_tko/exercise/level1/level1_01.zip 素材画像]</dd> | |||
</dl> | |||
</div> | |||
<div class="section"> | |||
===2.画像切り替え=== | |||
<p>画像をクリックすると別の画像に変わるようにしてください。</p> | |||
<dl> | |||
<dt>イベント発生条件</dt> | |||
<dd>onclick</dd> | |||
<dt>アクション内容</dt> | |||
<dd>画像が切り替わる</dd> | |||
<dt>条件</dt> | |||
<dd>画像は1つ</dd> | |||
<dt>素材</dt> | |||
<dd>[http://192.168.200.60:16080/kds_tko/exercise/level1/level1_02.zip 素材画像]</dd> | |||
</dl> | |||
</div> | |||
<div class="section"> | |||
===3.ランダム=== | |||
<p>ページを読み込む度に違う画像を表示するようにしてください。</p> | |||
<dl> | <dl> | ||
<dt> | <dt>イベント発生条件</dt> | ||
<dd>onload（ページ読み込み完了時）</dd> | |||
<dt>アクション内容</dt> | |||
<dd>画像がランダムで表示される</dd> | |||
<dt>条件</dt> | |||
<dd> | <dd> | ||
< | 表示するimgタグは1つ。<br> | ||
< | ランダムで表示される画像は3種類。<br> | ||
それぞれ同じサイズで、ページ読み込み完了時にdocument.writeする。<br> | |||
</dd> | </dd> | ||
<dt>素材</dt> | |||
<dd>[http://192.168.200.60:16080/kds_tko/exercise/level1/level1_03.zip 素材画像]</dd> | |||
</dl> | |||
</div> | |||
< | <div class="section"> | ||
===4.ポップアップ=== | |||
<p>アンカーをクリックすると、ポップアップウィンドウが開くようにしてください。</p> | <p>アンカーをクリックすると、ポップアップウィンドウが開くようにしてください。</p> | ||
< | |||
< | <dl> | ||
< | <dt>イベント発生条件</dt> | ||
< | <dd>onclick（又はhref内）</dd> | ||
< | <dt>アクション内容</dt> | ||
<dd>ポップアップウィンドウを開く</dd> | |||
<dt>条件</dt> | |||
<dd>リンクは2つ。<br> | |||
開くウィンドウのサイズは400×600でその他パラメーターは自由。 | |||
</dd> | </dd> | ||
</dl> | </dl> | ||
</div> | </div> | ||
==Level.2== | |||
<div class="section"> | <div class="section"> | ||
| 66行目: | 90行目: | ||
<div class="section"> | <div class="section"> | ||
===1.マウスオーバーボタン×３+切り替え画像１=== | |||
<dl> | <dl> | ||
<dt> | <dt>イベント発生条件</dt> | ||
<dd></dd> | |||
<dt>アクション内容</dt> | |||
<dd></dd> | |||
<dt>条件</dt> | |||
<dd></dd> | |||
<dt>素材</dt> | |||
<dd></dd> | <dd></dd> | ||
</dl> | </dl> | ||
</div> | |||
<div class="section"> | |||
===2.時間でランダム=== | |||
<dl> | <dl> | ||
<dt> | <dt>イベント発生条件</dt> | ||
<dd></dd> | |||
<dt>アクション内容</dt> | |||
<dd></dd> | |||
<dt>条件</dt> | |||
<dd>3秒毎</dd> | <dd>3秒毎</dd> | ||
<dt>素材</dt> | |||
<dd></dd> | |||
</dl> | </dl> | ||
</div> | |||
<div class="section"> | |||
===3.クリックで開閉するエリア=== | |||
<dl> | <dl> | ||
<dt> | <dt>イベント発生条件</dt> | ||
<dd></dd> | |||
<dt>アクション内容</dt> | |||
<dd></dd> | |||
<dt>条件</dt> | |||
<dd></dd> | |||
<dt>素材</dt> | |||
<dd></dd> | <dd></dd> | ||
</dl> | </dl> | ||
</div> | |||
<div class="section"> | |||
===4.擬似タブ=== | |||
<dl> | <dl> | ||
<dt> | <dt>イベント発生条件</dt> | ||
<dd></dd> | |||
<dt>アクション内容</dt> | |||
<dd></dd> | |||
<dt>条件</dt> | |||
<dd></dd> | |||
<dt>素材</dt> | |||
<dd></dd> | <dd></dd> | ||
</dl> | </dl> | ||
</div> | </div> | ||
==Level.3== | |||
<div class="section"> | <div class="section"> | ||
| 97行目: | 153行目: | ||
<div class="section"> | <div class="section"> | ||
===1.開閉サブメニュー（例：通販サブメニュー）=== | |||
<dl> | <dl> | ||
<dt> | <dt>イベント発生条件</dt> | ||
<dd></dd> | |||
<dt>アクション内容</dt> | |||
<dd></dd> | |||
<dt>条件</dt> | |||
<dd></dd> | |||
<dt>素材</dt> | |||
<dd></dd> | <dd></dd> | ||
</dl> | </dl> | ||
</div> | |||
<div class="section"> | |||
===2.ランダムエリア=== | |||
<dl> | <dl> | ||
<dt> | <dt>イベント発生条件</dt> | ||
<dd></dd> | |||
<dt>アクション内容</dt> | |||
<dd></dd> | |||
<dt>条件</dt> | |||
<dd></dd> | |||
<dt>素材</dt> | |||
<dd></dd> | <dd></dd> | ||
</dl> | </dl> | ||
</div> | |||
<div class="section"> | |||
===3.ページに埋め込まれている変数によって表示するエリアを切り替え=== | |||
<dl> | <dl> | ||
<dt> | <dt>イベント発生条件</dt> | ||
<dd></dd> | |||
<dt>アクション内容</dt> | |||
<dd></dd> | |||
<dt>条件</dt> | |||
<dd></dd> | |||
<dt>素材</dt> | |||
<dd></dd> | <dd></dd> | ||
</dl> | </dl> | ||
</div> | |||
<div class="section"> | |||
===4.ショーウィンドウ=== | |||
<dl> | <dl> | ||
<dt> | <dt>イベント発生条件</dt> | ||
<dd></dd> | |||
<dt>アクション内容</dt> | |||
<dd></dd> | |||
<dt>条件</dt> | |||
<dd></dd> | |||
<dt>素材</dt> | |||
<dd></dd> | <dd></dd> | ||
</dl> | </dl> | ||
</div> | |||
==Level.4== | |||
<div class="section"> | |||
<p>難易度☆☆～☆☆☆☆。DOM初級編。</p> | |||
</div> | |||
<div class="section"> | |||
===1.DOMでマウスオーバー=== | |||
<p>1-1と同じ処理をDOMを利用して行なってください。（☆☆）</p> | |||
<dl> | |||
<dt>イベント発生条件</dt> | |||
<dd>mouseover、mouseout</dd> | |||
<dt>アクション内容</dt> | |||
<dd>画像が切り替わる</dd> | |||
<dt>条件</dt> | |||
<dd>HTMLソース内にイベントハンドラの記述をしない</dd> | |||
<dt>素材</dt> | |||
<dd>[http://192.168.200.60:16080/kds_tko/exercise/level4/level1_01.zip 素材画像]</dd> | |||
</dl> | |||
</div> | </div> | ||
< | <div class="section"> | ||
===2.DOMで開閉処理=== | |||
<p>2-3の多階層版をDOMを利用して行なってください。（☆☆☆☆）</p> | |||
<dl> | |||
<dt>イベント発生条件</dt> | |||
<dd>onclick</dd> | |||
<dt>アクション内容</dt> | |||
<dd>クリックでカテゴリリストが開閉する</dd> | |||
<dt>条件</dt> | |||
<dd>クリックしたカテゴリの1つ下のカテゴリしか開かない。</dd> | |||
<dt>素材</dt> | |||
<dd>[http://192.168.200.60:16080/kds_tko/exercise/level4/level4_02.zip 素材HTML]</dd> | |||
</dl> | |||
</div> | |||
<div class="section"> | <div class="section"> | ||
<p> | ===3.DOMでID検索→ハイライト=== | ||
<p>4-3の処理に、IDで検索（☆☆☆）</p> | |||
<dl> | |||
<dt>イベント発生条件</dt> | |||
<dd>検索ボタンをクリック</dd> | |||
<dt>アクション内容</dt> | |||
<dd>検索</dd> | |||
<dt>条件</dt> | |||
<dd>検索に入力されたカテゴリIDに該当するカテゴリがあった場合、自動で開閉を行い該当カテゴリにスクロールする。<br> | |||
さらに該当のカテゴリのカテゴリ名をboldにする。</dd> | |||
<dt>素材</dt> | |||
<dd>4-2の素材と同じものを使ってください。</dd> | |||
</dl> | |||
</div> | </div> | ||
==Level.5== | |||
<div class="section"> | <div class="section"> | ||
<p>難易度☆☆☆～☆☆☆☆☆。DOM中級編。</p> | |||
</div> | |||
<div class="section"> | |||
===1.ノードの作成=== | |||
<p>コスメ・美容に新規カテゴリの登録を行なう（☆☆☆）</p> | |||
<dl> | <dl> | ||
<dt> | <dt>イベント発生条件</dt> | ||
<dd> | <dd>作成ボタンをクリック</dd> | ||
<dt>アクション内容</dt> | |||
< | <dd>カテゴリが追加される</dd> | ||
<dt>条件</dt> | |||
< | <dd>prototype.jsの使用禁止。<br> | ||
< | innerHTML属性は使わない。<br> | ||
< | 既に存在するIDが指定された場合はアラートを出して中断。 | ||
< | |||
</dd> | </dd> | ||
<dt>素材</dt> | |||
<dd>[http://192.168.200.60:16080/kds_tko/exercise/level5/level5_01.zip 素材HTML]</dd> | |||
</dl> | </dl> | ||
</div> | |||
<div class="section"> | |||
===2.ノードの作成2=== | |||
<p>全ての中カテゴリを対象とした新規カテゴリの登録を行なう（☆☆☆☆）</p> | |||
<dl> | <dl> | ||
<dt> | <dt>イベント発生条件</dt> | ||
<dd> | <dd>作成ボタンをクリック</dd> | ||
<dt>アクション内容</dt> | |||
< | <dd>カテゴリが追加される</dd> | ||
<dt>条件</dt> | |||
< | <dd>prototype.js使用可。<br> | ||
< | 新規カテゴリの登録のできるカテゴリは中カテのみ。<br> | ||
< | 登録先が存在しないor小カテだった場合はアラートを出して中断。 | ||
< | |||
</dd> | </dd> | ||
<dt>素材</dt> | |||
<dd>[http://192.168.200.60:16080/kds_tko/exercise/level5/level5_02.zip 素材HTML]</dd> | |||
</dl> | </dl> | ||
</div> | |||
<div class="section"> | |||
===2.ノードの作成3=== | |||
<p>全ての中カテゴリを対象とした新規カテゴリの登録を行なう（☆☆☆☆☆）</p> | |||
<dl> | <dl> | ||
<dt> | <dt>イベント発生条件</dt> | ||
<dd>作成ボタンをクリック</dd> | |||
<dt>アクション内容</dt> | |||
<dd>カテゴリが追加される</dd> | |||
<dt>条件</dt> | |||
<dd> | <dd> | ||
<ul> | <ul> | ||
<li>< | <li>prototype.js使用可。</li> | ||
<li>< | <li>新規カテゴリの登録のできるカテゴリは中カテのみ。</li> | ||
<li> | <li>親カテゴリIDに数値が入力された場合、そのカテゴリが存在するか検索し、存在すれば『親カテゴリ名』にそのカテゴリ名を出力し、存在しなければ「存在しないカテゴリです」と出力する。</li> | ||
<li>親カテゴリIDに正しい数値が入力されていた場合のみ登録ボタンを押せるようにする。</li> | |||
<li>新規に登録されるカテゴリの番号は、存在するカテゴリの中で最も大きい数値+１の値を自動で振る。</li> | |||
</ul> | </ul> | ||
</dd> | </dd> | ||
<dt>素材</dt> | |||
<dd>[http://192.168.200.60:16080/kds_tko/exercise/level5/level5_03.zip 素材HTML]</dd> | |||
</dl> | </dl> | ||
</div> | |||
==Level.6== | |||
<div class="section"> | |||
<p>難易度☆☆☆☆☆☆～☆☆☆☆☆☆☆。javascript中～上級編。</p> | |||
</div> | |||
==Level.7== | |||
<div class="section"> | |||
<p>難易度☆☆☆☆☆☆☆☆。今までの課題全てを活用した応用編。</p> | |||
</div> | |||
==Level.EX1== | |||
<div class="section"> | |||
<p>難易度☆☆☆。prototype.jsの使い方。</p> | |||
</div> | |||
==Level.EX2== | |||
<div class="section"> | |||
<p>難易度☆☆☆☆。AJAX基礎。</p> | |||
</div> | </div> | ||
==Level.EX3== | |||
<div class="section"> | |||
<p>難易度☆☆☆☆☆。prototypeチェーンの理解、クラスの活用。</p> | |||
</div> | |||
<h2>参考サイト</h2> | <h2>参考サイト</h2> | ||
| 176行目: | 363行目: | ||
<ul> | <ul> | ||
<li>[http://www.tohoho-web.com/js/index.htm とほほのJavaScriptリファレンス]</li> | <li>[http://www.tohoho-web.com/js/index.htm とほほのJavaScriptリファレンス]</li> | ||
<li>[http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html prototype.js v1.5.0 の使い方]</li> | |||
<li>[http://javascriptist.net/docs/samples_prototype.html prototype.js逆引きサンプル集]</li> | |||
<li>[http://www.morijp.com/masarl/homepage3.nifty.com/masarl/article/js-oop.html JavaScriptによるオブジェクト指向プログラミング]</li> | |||
<li>[http://www.graviness.com/virgo/javascript/object.html Virgo - JavaScript - ユーザ定義オブジェクト]</li> | |||
<li>[http://wiki.paulownia.jp/javascript javascript［Paulownia.jp］]</li> | |||
<li>[http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ Under Translation of ECMA-262 3rd Edition【仕様書の和訳】]</li> | |||
<li>[http://members.jcom.home.ne.jp/jintrick/Personal/documentFragment.html DocumentFragmentの考察 - Personnel]</li> | |||
</ul> | </ul> | ||
</div> | </div> | ||
2007年11月20日 (火) 17:53時点における最新版
Level.1
難易度☆。DynamicHTML的なjavascriptの使い方の基本形。
同じ効果を持つサンプルスクリプト等を参考にしていいです。ただしその際、利用したサンプルスクリプトが何を行なっているかをよく考えること。
タカシマヤ等のスクリプトは、同じ効果でも一般的なサンプルスクリプトより複雑な処理をしているものが多いため、Level4以上をクリアーするまでは参考にしないように。
解答時に、「ここの処理は何を行なっていて、それにはどんな意味があるのか」を質問します。
IE5.x以上、firefox、safari、MacIE5.xで動作すること。
1.マウスオーバー
画像にマウスカーソルが当たった場合に画像を切り替え、マウスアウト時に元の画像に戻してください。
- イベント発生条件
- mouseover、mouseout
- アクション内容
- 画像が切り替わる
- 条件
- ボタンは2つ
- 素材
- 素材画像
3.ランダム
ページを読み込む度に違う画像を表示するようにしてください。
- イベント発生条件
- onload（ページ読み込み完了時）
- アクション内容
- 画像がランダムで表示される
- 条件
-
表示するimgタグは1つ。
ランダムで表示される画像は3種類。
それぞれ同じサイズで、ページ読み込み完了時にdocument.writeする。
- 素材
- 素材画像
4.ポップアップ
アンカーをクリックすると、ポップアップウィンドウが開くようにしてください。
- イベント発生条件
- onclick（又はhref内）
- アクション内容
- ポップアップウィンドウを開く
- 条件
- リンクは2つ。
開くウィンドウのサイズは400×600でその他パラメーターは自由。
Level.2
難易度☆☆。DynamicHTML的なjavascriptの使い方の応用編。
1.マウスオーバーボタン×３+切り替え画像１
- イベント発生条件
- アクション内容
- 条件
- 素材
2.時間でランダム
- イベント発生条件
- アクション内容
- 条件
- 3秒毎
- 素材
3.クリックで開閉するエリア
- イベント発生条件
- アクション内容
- 条件
- 素材
4.擬似タブ
- イベント発生条件
- アクション内容
- 条件
- 素材
Level.3
難易度☆☆☆。DynamicHTML的なjavascriptの使い方の上級編。
1.開閉サブメニュー（例：通販サブメニュー）
- イベント発生条件
- アクション内容
- 条件
- 素材
2.ランダムエリア
- イベント発生条件
- アクション内容
- 条件
- 素材
3.ページに埋め込まれている変数によって表示するエリアを切り替え
- イベント発生条件
- アクション内容
- 条件
- 素材
4.ショーウィンドウ
- イベント発生条件
- アクション内容
- 条件
- 素材
Level.4
難易度☆☆～☆☆☆☆。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の素材と同じものを使ってください。
Level.5
難易度☆☆☆～☆☆☆☆☆。DOM中級編。
1.ノードの作成
コスメ・美容に新規カテゴリの登録を行なう（☆☆☆）
- イベント発生条件
- 作成ボタンをクリック
- アクション内容
- カテゴリが追加される
- 条件
- prototype.jsの使用禁止。
innerHTML属性は使わない。
既に存在するIDが指定された場合はアラートを出して中断。 - 素材
- 素材HTML
2.ノードの作成2
全ての中カテゴリを対象とした新規カテゴリの登録を行なう（☆☆☆☆）
- イベント発生条件
- 作成ボタンをクリック
- アクション内容
- カテゴリが追加される
- 条件
- prototype.js使用可。
新規カテゴリの登録のできるカテゴリは中カテのみ。
登録先が存在しないor小カテだった場合はアラートを出して中断。 - 素材
- 素材HTML
2.ノードの作成3
全ての中カテゴリを対象とした新規カテゴリの登録を行なう（☆☆☆☆☆）
- イベント発生条件
- 作成ボタンをクリック
- アクション内容
- カテゴリが追加される
- 条件
-
- prototype.js使用可。
- 新規カテゴリの登録のできるカテゴリは中カテのみ。
- 親カテゴリIDに数値が入力された場合、そのカテゴリが存在するか検索し、存在すれば『親カテゴリ名』にそのカテゴリ名を出力し、存在しなければ「存在しないカテゴリです」と出力する。
- 親カテゴリIDに正しい数値が入力されていた場合のみ登録ボタンを押せるようにする。
- 新規に登録されるカテゴリの番号は、存在するカテゴリの中で最も大きい数値+１の値を自動で振る。
- 素材
- 素材HTML
Level.6
難易度☆☆☆☆☆☆～☆☆☆☆☆☆☆。javascript中～上級編。
Level.7
難易度☆☆☆☆☆☆☆☆。今までの課題全てを活用した応用編。
Level.EX1
難易度☆☆☆。prototype.jsの使い方。
Level.EX2
難易度☆☆☆☆。AJAX基礎。
Level.EX3
難易度☆☆☆☆☆。prototypeチェーンの理解、クラスの活用。
参考サイト