javascript(以下JS)を覚えるにはどうしたらいいですか?というコメントをいただいたので、自分なりの練習方法など。
趣味の範囲で、サイト作りやFC2ブログのカスタムを通しHTML・CSSを勉強してきた人なら、JS(ここにあるようなHTMLを編集する種のもの)を覚えるのもそれほど難しくないと思います。効率的で、結果的に早道な方法は基礎から勉強すること独学でやらないことですが、HTMLやCSSをいじっていて「どうして思った通りにならないのだろう?」という(推測や、検索して調べる)部分をも楽しめる人なら、いきなり書き始めてかまわないと思います。思い立ったが吉日。
とはいっても、0から作れるものでもないですから、最初は例文のコピーから始めるのがお勧め。
自分がお手本にしたサイトです。”JavaScriptをはじめましょ”ではメーリングリストのバックナンバーに、”DOM Samples /Core”ではプロパティ・メソッド名ごとに簡単なサンプルコードが掲載されています。ローカル(自分のPC内)にHTMLファイルをつくり、例文をコピー&ペーストして、記述法の基本とそれぞれがどういう仕組なのかを覚えていくとよいです。
JSのコードの中に知らない単語があれば検索します。自分なりに編集して動かなくなったら、ひとつアンドゥして表示してみる、このあたりもCSSの作成・編集の仕方と同じです。とりあえず何からやればいいのかわからないという人は、上記の練習とともにCSSで行うことをJSに置き換えてみると概念が理解しやすいです。
要素のIDがblog_titleなら文字を赤くする。
#blog_title { color: #f00; }document.getElementById("blog_title").style.color="#f00";すべてのA要素の中でclass名がentry_titleのものに枠線をつける。
a.entry_title { border: 1px solid; }var i, a;
for(i=0;a=document.getElementsByTagName("a")[i];i++)
if(a.className=="entry_title") a.style.border="1px solid";DOMのプロパティやメソッドの多くはCSSのセレクタに似た働きをします。要素を特定しstyle属性に値を代入する部分も似ています。CSSは要素のスタイルを定めることに特化した言語なので、簡略化されていて覚えやすいといえるでしょう。ですが、セレクタとプロパティを日本語に訳してみると、それはJSの構文と同じになります。
HTMLを読み、適用するCSSを書くことは、javascript、主にDOMの使い方の基本に繋がると思います。
< The 2006 Photobloggies (Nomination) | 僕らを乗せてどこへゆく > | 表紙へ戻る |
何かを覚えるって作業は、マネることなんです。例文を書き写すのもCSSの効果をJSで代用してみるのも、そのバリエーションです。
そのうちに、どうやればとか、何ができるのか、がわかってきます。
数学の応用問題を解くために基本問題をやる、みたいなものです。
本当に難しいのは、それを何故やるのか?の部分なんだと自分は思いますね。
>CSSで可能なことをJavaScriptでやる意味
というわけで、作ってみました。基本的にはエントリに書いた続きで、少しだけ工夫してます。
隣接セレクタ(効果)のテスト
→ http://blog2.fc2.com/s/sug/file/adjacent_selector.htm
テンプレに、隣接セレクタってあまり使われないと感じるんですが、最たる原因は○名高きIEで効果をだせないから、と勘ぐっている管理人です。-16日22時