フォローアップ web/js.part9 「ドラ○エ風メニューバーを作る」

お久しぶりです、muroiです。
ディノでは、毎週木曜日にフォローアップ講習というものを行っており、今回はその内容「web/js ドラ○エ風メニューバー」を作るという事で、講習を受けての感想を書きました。

前回のおさらいから

今回は、先輩が作ったコードを参考に写経していき、理解を深めた上で何もない状態で書くという作業でした。
実際に最初はただのHTMLが用意されており、そこにヘッダー部分を隠すためのJS、クリックしたらメニューが表示されるようにまたHTMLが出力されるようなJSを書く。

そしてクリックした位置を取得してそこにHTMLを出力させる・・・といように段階を追って作成し、わからないところがあれば質問、そしてその段階ごとに解説をもらえたのでだいぶ理解しやすくできました。

ただ隠すだけでも色々ある事を知る

実際にJSを書いていて感動したのが、ただ表示するだけでも、パッと出現させたり、ゆっくりと出現させたり・・・方法は様々ありました。同じく隠すためでも様々あり、見た目もだいぶ異なるのでだいぶおもしろくかけるなと思いました。
JSは書いたコードがすぐに見た目の動作として見れるので、書いていてなかなかおもしろいです!
様々な書き方、使い方を学んでいきこんな時にも使えそうだな!と考えるのもすごくおもしろいですね!

もっともっと様々な書き方を勉強していって仕事でも活かしていかねば。

[参考サイト]
jQuery
Visual jQuery

ちなみに今回の実装では上記Visual jQueryに載っている、fafeIn()やfadeOut()関数、ボタンのクリック位置取得にはdocument.click等を利用してみました。
まだまだ他の関数等もあり、書き方も様々なので、上記サイトを参考にどんどん勉強していきたいです!

コメントをどうぞ

名前: (Required)

eMail: (Required)

Website:

Comment:

Spam Protection by WP-SpamFree