Re:Creator’s Kansai

こんにちわ。to-Rの西畑です。

前回のアンケートの結果、PHP1票、JavaScript1票でしたので、独断と偏見でJavaScriptについて書いていこうと思います。

理由はJavaScriptのほうが、web上ですぐに確認できるので見ている人も楽しいかなというのが理由です。

プログラミングに挫折した人向けに、 jQueryを利用したJavaScript入門にしたいと思います。

いきなりJavaScriptを覚えようとすると、覚えなくてはいけないことがいっぱいあるのですが、jQueryを利用すればちょっと覚えれば色々なことが出来るようになります。
参考：本気にonclick

jQueryでJavaScriptの楽しさを学んでから、JavaScriptを深く学んでいってもらえたらなぁと思っています。

jQueryを利用すればどれぐらい簡単に書けるかというと、まず以下のサンプルを見てください。

サンプル

最近よく見かけるアコーディオンのUIになります。

ソースコードを見ていただいたらわかるようにJavaScriptの記述はたった8行です。(そのうち3行は括弧だけ！)

$(function(){
	$("dl dt").click(function(){
		if($("+dd",this).css("display")=="none"){
			$(this).siblings("dd").slideUp("slow");
			$("+dd",this).slideDown("slow");
		}
	});
})

色々覚えるのは大変だけど5行の意味を理解しただけで、このようなUIが自分の手で作成できるようになったらすばらしいと思いません?

これをJavaScriptで書こうと思ったら気が遠くなる行数になります。

jQueryを利用し、よりリッチなUIでWebサイトを作成できるような講座にしていけたらなと思っています。

ちゃんと付いてこれる様ゆっくり進めていきますので、疑問などがある場合はお気軽にコメントください。

補足

アコーディオンだけなら以下のライブラリを利用しても簡単に利用できますよ。

アコーディオン形式で内容を表示できるAccordion v2.0
【Adobe Spry TIPS】 アコーディオン

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中