JavaScript入門を果たすために知るべき、たった３つの重要ポイント
ホームページ制作のために、JavaScript勉強をし始めたけど、なかなか思い通りのアニメーションが作れるようにならない・・・。そんなお悩みはありませんか？実際Javascriptは、入門レベルでも思ったより複雑な点が多く、仕組みも理解したはずなのになぜか動かないことがとても多いです。
でも実は、あるコツを掴めば、誰でも入門レベルのJavascriptを簡単に使いこなして便利なアニメーションが作れるようになっちゃうんです！一見難しそうに見えるJavascriptですが、これを機にちゃちゃっとマスターしちゃいましょう！
目次
基本はこれだけ！まずは「セレクタ」の使い方を覚えよう！
まず、セレクタ以前の話として、ホームページ作成にjavascriptを使うときは必ず初心者のかたは「jQuery」を使いましょう。圧倒的に作業が簡単になります。
jQuery最初の難関は、「セレクタ」の使い方を覚えることです。「セレクタ」とは、id=”button” や class=”container” のようなものです。これらを使い、アニメーションの対象になる要素を決めます。
例えば、
<div id="topbar"></div>
というdivに対してアニメーションを設定したい場合は、
<script>
$(function(){
$("div#topbar").click(function(){
~~~設定したいアニメーション~~~
});
});
</script>
このように書きます。.click(function(){ }); というのは、「その対象のdivをクリックしたら動作を開始する」という意味の処理です。また、#(シャープ)はidを意味し、.(ピリオド）はclassを意味します。
今回は「topbarというidがついたdiv」を指定する場合は、”div#id”という設定方法になります。これが、jQueryの基本です。
「click,mouseover,fadeIn」定番処理を覚えよう！
上述にもありましたが、「click」はクリックというアクションに対して機能を設定するためのコードです。jQueryでは実際に使われるようなコードは決まっているので、まずはそれを頭に入れることでかなり開発が楽になります。
▼定番の３つのコード
・click：クリックに対して機能を設定する
・mouseover：マウスが上に乗っかった時の機能を設定する（mouseleaveでマウスが外れた時の設定ができます。）
・fadeIn：非表示設定(display: none;)になっていた要素を表示する（fadeOutで逆に非表示の設定ができます。）
この３つさえ覚えていれば基本的な処理はできると思うので是非お試しください！
「setTimeout,setInterval」を使えば時間設定も簡単！
さらに、例えば、「10秒後に処理を実行したい」と思った時には、「setTimeout」が使えます。
setTimeout(function(){
alert(‘test’);
},10000);
例えばこのコードを使えば、ページを開いて１０秒後（10000ミリ秒）後に「test」というアラートを表示することが出来ます。
もう一つ、「１０秒毎に同じ処理を繰り返したい」なんてこともあります。そういった時は、
setInterval(function(){
alert(‘test’);
},10000);
このように書くことで、「test」というアラートを１０秒毎に表示することが出来ます。
これも頭に入れておくと、とてもホームページ作成が簡単になるので覚えておいてください！
お決まりフォーマットを知ろう！「this」を使えば超簡単！
<script>
$(function(){ //まずとりあえずこれを書く
$("div#topbar").click(function(){ //id="topbar"をクリックして動作開始
$(this).fadeIn(); //id="topbar"をdisplay: block;(表示）にする
});
}); //最後は閉じるのを忘れない
</script>
もうこれは「お決まり」として覚えましょう。だいたいのjQueryのコードはこの形に当てはめることでどうにかなります。
「this」とは、直前に指定されたセレクタを指します。これを使うことで、コードを簡潔に保つことが出来ます。
車輪の再発明を避けよう！凝った機能もぐぐれば見つかる！
jQueryを完全にマスターするには、一見膨大な量の知識が必要なように思われてしまいます。でも、実際レベルの高い人ほど「暗記」していることは少ないです。
インターネットには大量にjQueryに関する記事やコードの実例が存在しています。例えば、「jQuery スライドショー」のように調べれば、スライドショーの作り方がたくさん見つかります！
是非皆さんもJavascriptのコツを掴んで、便利なホームページを作ってみてください！
