「Javascript課題集」を編集中

<div id="manual">
<h2>Level.1</h2>

<div class="section">
<p>難易度☆。DynamicHTML的なjavascriptの使い方の基本形。</p>
<p>同じ効果を持つサンプルスクリプト等を参考にしていいです。ただしその際、<em>利用したサンプルスクリプトが何を行なっているかをよく考えること</em>。</p>
<p>タカシマヤ等のスクリプトは、同じ効果でも一般的なサンプルスクリプトより複雑な処理をしているものが多いため、Level4以上をクリアーするまでは参考にしないように。</p>
<p>解答時に、「ここの処理は何を行なっていて、それにはどんな意味があるのか」を質問します。</p>
<p>IE5.x以上、firefox、safari、MacIE5.xで動作すること。</p>
</div>

<div class="section">

<dl>
<dt>1.マウスオーバー</dt>
<dd>
<p>画像にマウスカーソルが当たった場合に画像を切り替え、マウスアウト時に元の画像に戻してください。</p>
<ul>
<li><strong>イベント発生条件</strong>：mouseover、mouseout</li>
<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>

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

</dl>
</div>

<h2>Level.2</h2>

<div class="section">
<p>難易度☆☆。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>


<h2>Level.3</h2>

<div class="section">
<p>難易度☆☆☆。DynamicHTML的なjavascriptの使い方の上級編。</p>
</div>

<div class="section">

<dl>
<dt>1.開閉サブメニュー（例：通販サブメニュー）</dt>
<dd></dd>
</dl>

<dl>
<dt>2.ランダムエリア</dt>
<dd></dd>
</dl>

<dl>
<dt>3.ページに埋め込まれている変数によって表示するエリアを切り替え</dt>
<dd></dd>
</dl>

<dl>
<dt>4.ショーウィンドウ</dt>
<dd></dd>
</dl>

</div>


<h2>Level.4</h2>

<div class="section">
<p>難易度☆☆～☆☆☆☆。DOM初級編。</p>
</div>

<div class="section">

<dl>
<dt>1.DOMでマウスオーバー</dt>
<dd>
<p>1-1と同じ処理をDOMを利用して行なってください。</p>
<ul>
<li><strong>イベント発生条件</strong>：mouseover、mouseout</li>
<li><strong>アクション内容</strong>：画像が切り替わる</li>
<li><strong>条件</strong>：HTMLソース内にイベントハンドラの記述をしない</li>
</ul>
<p>[http://192.168.200.60:16080/kds_tko/exercise/level4/level1_01.zip 素材画像]</p>
</dd>
</dl>

<dl>
<dt>2.DOMで開閉処理</dt>
<dd>
<p>2-3の多階層版をDOMを利用して行なってください。</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/level4/level4_02.zip 素材HTML]</p>
</dd>
</dl>

<dl>
<dt>3.DOMでID検索→ハイライト</dt>
<dd>
<p>4-3の処理に、IDで検索</p>
<ul>
<li><strong>イベント発生条件</strong>：検索ボタンをクリック</li>
<li><strong>アクション内容</strong>：検索</li>
<li><strong>条件</strong>：検索に入力されたカテゴリIDに該当するカテゴリがあった場合、自動で開閉を行い該当カテゴリにスクロールする。さらに該当のカテゴリのカテゴリ名をboldにする。</li>
</ul>
<p>4-2の素材と同じものを使ってください。</p>
</dd>
</dl>

</div>

<h2>Level.5</h2>
<div class="section">
<p>難易度☆☆☆☆☆。DOM中級編。</p>
</div>

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


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


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

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

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

<h2>参考サイト</h2>

<div class="section">
<ul>
<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>
</div>


</div>