「Javascript課題集」の版間の差分
ナビゲーションに移動
検索に移動
編集の要約なし |
編集の要約なし |
||
| 1行目: | 1行目: | ||
<div id="manual"> | <div id="manual"> | ||
<h2> | <h2>Level.1</h2> | ||
<div class="section"> | <div class="section"> | ||
| 59行目: | 59行目: | ||
</div> | </div> | ||
<h2> | <h2>Level.2</h2> | ||
<div class="section"> | <div class="section"> | ||
| 90行目: | 90行目: | ||
<h2> | <h2>Level.3</h2> | ||
<div class="section"> | <div class="section"> | ||
| 121行目: | 121行目: | ||
<h2> | <h2>Level.4</h2> | ||
<div class="section"> | <div class="section"> | ||
| 170行目: | 170行目: | ||
</div> | </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> | <h2>参考サイト</h2> | ||
| 176行目: | 207行目: | ||
<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日 (火) 11:48時点における版
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つ下のカテゴリしか開かない。
- 3.DOMでID検索→ハイライト
-
4-3の処理に、IDで検索
- イベント発生条件：検索ボタンをクリック
- アクション内容：検索
- 条件：検索に入力されたカテゴリIDに該当するカテゴリがあった場合、自動で開閉を行い該当カテゴリにスクロールする。さらに該当のカテゴリのカテゴリ名をboldにする。
4-2の素材と同じものを使ってください。
Level.5
難易度☆☆☆☆☆。DOM中級編。
Level.6
難易度☆☆☆☆☆☆～☆☆☆☆☆☆☆。javascript中～上級編。
Level.7
難易度☆☆☆☆☆☆☆☆。今までの課題全てを活用した応用編。
Level.EX1
難易度☆☆☆。prototype.jsの使い方。
Level.EX2
難易度☆☆☆☆。AJAX基礎。
Level.EX3
難易度☆☆☆☆☆。prototypeチェーンの理解、クラスの活用。
参考サイト