「Javascript課題集」の版間の差分

← 古い編集

2007年11月20日 (火) 17:53時点における最新版

Level.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でその他パラメーターは自由。

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チェーンの理解、クラスの活用。

@@ 299行目: / 299行目: @@
 <dt>条件</dt>
 <dd>prototype.js使用可。<br>
+新規カテゴリの登録のできるカテゴリは中カテのみ。<br>
 登録先が存在しないor小カテだった場合はアラートを出して中断。
 </dd>
 <dt>素材</dt>
 <dd>[http://192.168.200.60:16080/kds_tko/exercise/level5/level5_02.zip 素材HTML]</dd>
+</dl>
+</div>
+<div class="section">
+===2.ノードの作成3===
+<p>全ての中カテゴリを対象とした新規カテゴリの登録を行なう（☆☆☆☆☆）</p>
+<dl>
+<dt>イベント発生条件</dt>
+<dd>作成ボタンをクリック</dd>
+<dt>アクション内容</dt>
+<dd>カテゴリが追加される</dd>
+<dt>条件</dt>
+<dd>
+<ul>
+<li>prototype.js使用可。</li>
+<li>新規カテゴリの登録のできるカテゴリは中カテのみ。</li>
+<li>親カテゴリIDに数値が入力された場合、そのカテゴリが存在するか検索し、存在すれば『親カテゴリ名』にそのカテゴリ名を出力し、存在しなければ「存在しないカテゴリです」と出力する。</li>
+<li>親カテゴリIDに正しい数値が入力されていた場合のみ登録ボタンを押せるようにする。</li>
+<li>新規に登録されるカテゴリの番号は、存在するカテゴリの中で最も大きい数値+１の値を自動で振る。</li>
+</ul>
+</dd>
+<dt>素材</dt>
+<dd>[http://192.168.200.60:16080/kds_tko/exercise/level5/level5_03.zip 素材HTML]</dd>
 </dl>
 </div>