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

提供：Wiki@KDS
ナビゲーションに移動 検索に移動
← 古い編集新しい編集 →
編集の要約なし
編集の要約なし
1行目: 1行目:
<div id="manual">
<div id="problem">
<h2>Level.1</h2>
==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>
<dl>
<dt>1.マウスオーバー</dt>
<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>
<dt>イベント発生条件</dt>
<dd>onload（ページ読み込み完了時）</dd>
<dt>アクション内容</dt>
<dd>画像がランダムで表示される</dd>
<dt>条件</dt>
<dd>
<dd>
<p>画像にマウスカーソルが当たった場合に画像を切り替え、マウスアウト時に元の画像に戻してください。</p>
表示するimgタグは1つ。<br>
<ul>
ランダムで表示される画像は3種類。<br>
<li><strong>イベント発生条件</strong>：mouseover、mouseout</li>
それぞれ同じサイズで、ページ読み込み完了時にdocument.writeする。<br>
<li><strong>アクション内容</strong>：画像が切り替わる</li>
<li><strong>条件</strong>：ボタンは2つ</li>
</ul>
<p>[http://192.168.200.60:16080/kds_tko/exercise/level1/level1_01.zip 素材画像]</p>
</dd>
</dd>
<dt>素材</dt>
<dd>[http://192.168.200.60:16080/kds_tko/exercise/level1/level1_03.zip 素材画像]</dd>
</dl>
</div>


<dt>2.画像切り替え</dt>
<dd>
<p>画像をクリックすると別の画像に変わるようにしてください。</p>
<ul>
<li><strong>イベント発生条件</strong>：onclick</li>
<li><strong>アクション内容</strong>：画像が切り替わる</li>
<li><strong>条件</strong>：画像は1つ</li>
</ul>
<p>[http://192.168.200.60:16080/kds_tko/exercise/level1/level1_02.zip 素材画像]</p>
</dd>


<dt>3.ランダム</dt>
<dd>
<p>ページを読み込む度に違う画像を表示するようにしてください。</p>
<ul>
<li><strong>イベント発生条件</strong>：onload（ページ読み込み完了時）</li>
<li><strong>アクション内容</strong>：画像がランダムで表示される</li>
<li><strong>条件</strong>：表示するimgタグは1つ。ランダムで表示される画像は3種類。それぞれ同じサイズで、ページ読み込み完了時にdocument.writeする。</li>
</ul>
<p>[http://192.168.200.60:16080/kds_tko/exercise/level1/level1_03.zip 素材画像]</p>
</dd>


<dt>4.ポップアップ</dt>
<div class="section">
<dd>
===4.ポップアップ===
<p>アンカーをクリックすると、ポップアップウィンドウが開くようにしてください。</p>
<p>アンカーをクリックすると、ポップアップウィンドウが開くようにしてください。</p>
<ul>
 
<li><strong>イベント発生条件</strong>：onclick（又はhref内）</li>
<dl>
<li><strong>アクション内容</strong>：ポップアップウィンドウを開く</li>
<dt>イベント発生条件</dt>
<li><strong>条件</strong>：リンクは2つ。開くウィンドウのサイズは400×600でその他パラメーターは自由。</li>
<dd>onclick（又はhref内）</dd>
</ul>
<dt>アクション内容</dt>
<dd>ポップアップウィンドウを開く</dd>
<dt>条件</dt>
<dd>リンクは2つ。<br>
開くウィンドウのサイズは400×600でその他パラメーターは自由。
</dd>
</dd>
</dl>
</dl>
</div>
</div>


<h2>Level.2</h2>
 
 
==Level.2==


<div class="section">
<div class="section">
66行目: 90行目:


<div class="section">
<div class="section">
 
===1.マウスオーバーボタン×３+切り替え画像１===
<dl>
<dl>
<dt>1.マウスオーバーボタン×３+切り替え画像１</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>2.時間でランダム</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>3.クリックで開閉するエリア</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>4.擬似タブ</dt>
<dt>イベント発生条件</dt>
<dd></dd>
<dt>アクション内容</dt>
<dd></dd>
<dt>条件</dt>
<dd></dd>
<dt>素材</dt>
<dd></dd>
<dd></dd>
</dl>
</dl>
</div>
</div>




<h2>Level.3</h2>
==Level.3==


<div class="section">
<div class="section">
97行目: 153行目:


<div class="section">
<div class="section">
 
===1.開閉サブメニュー（例：通販サブメニュー）===
<dl>
<dl>
<dt>1.開閉サブメニュー（例：通販サブメニュー）</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>2.ランダムエリア</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>3.ページに埋め込まれている変数によって表示するエリアを切り替え</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>4.ショーウィンドウ</dt>
<dt>イベント発生条件</dt>
<dd></dd>
<dt>アクション内容</dt>
<dd></dd>
<dt>条件</dt>
<dd></dd>
<dt>素材</dt>
<dd></dd>
<dd></dd>
</dl>
</dl>
</div>
</div>




<h2>Level.4</h2>
==Level.4==


<div class="section">
<div class="section">
128行目: 216行目:


<div class="section">
<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 class="section">
===2.DOMで開閉処理===
<p>2-3の多階層版をDOMを利用して行なってください。（☆☆☆☆）</p>
<dl>
<dl>
<dt>1.DOMでマウスオーバー</dt>
<dt>イベント発生条件</dt>
<dd>
<dd>onclick</dd>
<p>1-1と同じ処理をDOMを利用して行なってください。</p>
<dt>アクション内容</dt>
<ul>
<dd>クリックでカテゴリリストが開閉する</dd>
<li><strong>イベント発生条件</strong>：mouseover、mouseout</li>
<dt>条件</dt>
<li><strong>アクション内容</strong>：画像が切り替わる</li>
<dd>クリックしたカテゴリの1つ下のカテゴリしか開かない。</dd>
<li><strong>条件</strong>：HTMLソース内にイベントハンドラの記述をしない</li>
<dt>素材</dt>
</ul>
<dd>[http://192.168.200.60:16080/kds_tko/exercise/level4/level4_02.zip 素材HTML]</dd>
<p>[http://192.168.200.60:16080/kds_tko/exercise/level4/level1_01.zip 素材画像]</p>
</dd>
</dl>
</dl>
</div>


<div class="section">
===3.DOMでID検索→ハイライト===
<p>4-3の処理に、IDで検索（☆☆☆）</p>
<dl>
<dl>
<dt>2.DOMで開閉処理</dt>
<dt>イベント発生条件</dt>
<dd>
<dd>検索ボタンをクリック</dd>
<p>2-3の多階層版をDOMを利用して行なってください。</p>
<dt>アクション内容</dt>
<ul>
<dd>検索</dd>
<li><strong>イベント発生条件</strong>：onclick</li>
<dt>条件</dt>
<li><strong>アクション内容</strong>：クリックでカテゴリリストが開閉する</li>
<dd>検索に入力されたカテゴリIDに該当するカテゴリがあった場合、自動で開閉を行い該当カテゴリにスクロールする。<br>
<li><strong>条件</strong>：クリックしたカテゴリの1つ下のカテゴリしか開かない。</li>
さらに該当のカテゴリのカテゴリ名をboldにする。</dd>
</ul>
<dt>素材</dt>
<p>[http://192.168.200.60:16080/kds_tko/exercise/level4/level4_02.zip 素材HTML]</p>
<dd>4-2の素材と同じものを使ってください。</dd>
</dd>
</dl>
</dl>
</div>
==Level.5==
<div class="section">
<p>難易度☆☆☆～☆☆☆☆☆。DOM中級編。</p>
</div>


<div class="section">
===1.ノードの作成===
<p>コスメ・美容に新規カテゴリの登録を行なう（☆☆☆）</p>
<dl>
<dl>
<dt>3.DOMでID検索→ハイライト</dt>
<dt>イベント発生条件</dt>
<dd>
<dd>作成ボタンをクリック</dd>
<p>4-3の処理に、IDで検索</p>
<dt>アクション内容</dt>
<ul>
<dd>カテゴリが追加される</dd>
<li><strong>イベント発生条件</strong>：検索ボタンをクリック</li>
<dt>条件</dt>
<li><strong>アクション内容</strong>：検索</li>
<dd>prototype.jsの使用禁止。<br>
<li><strong>条件</strong>：検索に入力されたカテゴリIDに該当するカテゴリがあった場合、自動で開閉を行い該当カテゴリにスクロールする。さらに該当のカテゴリのカテゴリ名をboldにする。</li>
innerHTML属性は使わない。<br>
</ul>
既に存在するIDが指定された場合はアラートを出して中断。
<p>4-2の素材と同じものを使ってください。</p>
</dd>
</dd>
<dt>素材</dt>
<dd>[http://192.168.200.60:16080/kds_tko/exercise/level5/level5_01.zip 素材HTML]</dd>
</dl>
</dl>
</div>


</div>


<h2>Level.5</h2>
<div class="section">
<div class="section">
<p>難易度☆☆☆☆☆。DOM中級編。</p>
===2.ノードの作成2===
<p>全ての中カテゴリを対象とした新規カテゴリの登録を行なう（☆☆☆☆）</p>
<dl>
<dt>イベント発生条件</dt>
<dd>作成ボタンをクリック</dd>
<dt>アクション内容</dt>
<dd>カテゴリが追加される</dd>
<dt>条件</dt>
<dd>prototype.js使用可。<br>
登録先が存在しないor小カテだった場合はアラートを出して中断。
</dd>
<dt>素材</dt>
<dd>[http://192.168.200.60:16080/kds_tko/exercise/level5/level5_02.zip 素材HTML]</dd>
</dl>
</div>
</div>


<h2>Level.6</h2>
==Level.6==
<div class="section">
<div class="section">
<p>難易度☆☆☆☆☆☆～☆☆☆☆☆☆☆。javascript中～上級編。</p>
<p>難易度☆☆☆☆☆☆～☆☆☆☆☆☆☆。javascript中～上級編。</p>
181行目: 312行目:




<h2>Level.7</h2>
==Level.7==
<div class="section">
<div class="section">
<p>難易度☆☆☆☆☆☆☆☆。今までの課題全てを活用した応用編。</p>
<p>難易度☆☆☆☆☆☆☆☆。今までの課題全てを活用した応用編。</p>
187行目: 318行目:




<h2>Level.EX1</h2>
==Level.EX1==
<div class="section">
<div class="section">
<p>難易度☆☆☆。prototype.jsの使い方。</p>
<p>難易度☆☆☆。prototype.jsの使い方。</p>
</div>
</div>


<h2>Level.EX2</h2>
==Level.EX2==
<div class="section">
<div class="section">
<p>難易度☆☆☆☆。AJAX基礎。</p>
<p>難易度☆☆☆☆。AJAX基礎。</p>
</div>
</div>


<h2>Level.EX3</h2>
==Level.EX3==
<div class="section">
<div class="section">
<p>難易度☆☆☆☆☆。prototypeチェーンの理解、クラスの活用。</p>
<p>難易度☆☆☆☆☆。prototypeチェーンの理解、クラスの活用。</p>

2007年11月20日 (火) 12:47時点における版

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

Level.6

難易度☆☆☆☆☆☆～☆☆☆☆☆☆☆。javascript中～上級編。


Level.7

難易度☆☆☆☆☆☆☆☆。今までの課題全てを活用した応用編。


Level.EX1

難易度☆☆☆。prototype.jsの使い方。

Level.EX2

難易度☆☆☆☆。AJAX基礎。

Level.EX3

難易度☆☆☆☆☆。prototypeチェーンの理解、クラスの活用。

参考サイト


「https://wiki.kohga.tokyo/index.php?title=Javascript課題集&oldid=1876」から取得