javaScript・jQuery - AxiZ沖縄ブログ

javaScript・jQueryの講義の補足&まとめです。

javaScriptの講義は、プログラミング言語としての細かい言語仕様などは解説せず、
どんなことができるのかを知識として知っておくことを目的としているため、
ここでも細かい解説はせず、概要のみお伝えします。

javaScriptの注意事項

まずはjavaScriptの注意事項からです。
javaScriptは、「Java」と似ていますが、
全く別物だということを認識しておきましょう。
どちらもプログラミング言語という点では同じですが、
使用される場面や、言語の特徴などは全く別です。
なので、混同しないようにしましょう。

よくネットで見かけるたとえとしては

浜松と浜松町くらい違う
インドとインドネシアくらい違う
オーストラリアとオーストリアくらい違う
ハムとハムスターくらい違う
メロンとメロンパンくらい違う

などなど。
要するに、似ているのは名前だけで、それ以外は全く別物だと言うこと。

javaScriptのことを略してJavaと呼んでしまわないように注意しましょう。
javaScriptは拡張子が「.js」なので、jsファイルなどと呼ばれることもあります。

javaScriptの用途

javaScriptは、近年は様々な環境で使用されるようになりましたが、
最も使用頻度が高いのは、ブラウザ上で動作する処理を行う場合です。

ここでは一例をあげます。

ブラウザ上に「動き」を与える場合

一定時間毎に表示されている画像を変更したり、タイマーをつけたり、など。
HTMLとCSSだけでは表現できないアニメーション的な動きをつけたい時にjavaScriptが使用されます。
動的にHTMLやCSSを作成する場合

javaScriptでは、HTML要素を追加・削除や、
属性の追加、CSSを適用させる、などの処理が可能です。
ボタンを押したときに動的にレイアウトを変更したり、
条件によってHTML要素やレイアウトを変更したい時にもjavaScriptを使うと柔軟な対応ができます。
入力チェックを行う場合

メールアドレスの入力欄に、英数字以外の文字が入っていないかどうか、
電話番号や郵便番号の入力欄に数字以外が入っていないかどうか、など、
テキストボックスなどに入力された値に本来入力されるべきでない値が入っていないかどうかをチェックする場合にも javaScriptがよく使用されます。
ボタンを押したときなど、イベント時に処理を行う場合

ボタンを押したとき、どこかをクリックしたとき、
ダブルクリックしたとき、など。
ブラウザ上での何かしらのイベント発生時に処理を行いたい場合にも、
javaScriptが使用されます。

javaScriptの記述場所

javaScriptのソースは、htmlファイルのscriptタグの中に書きます。
その場合にdead要素内に書く方法と、body要素の最後に書く場合があります。

どちらの方がいいかというと、ケースバイケースです。
ソースコードの可読性で考えると、head要素に書いた方が読みやすいと感じる人が多いと思います。
しかし、処理内容によってはbody要素でないといけない場合もあります。

body内の要素を読み込む場合

HTMLは、基本的にソースコードの上から順に読み込まれていきます。
javaScriptのソースをhead要素内に記述した場合、
javaScriptの処理が読み込まれ、
そのあとにbody要素が読み込まれる形になります。
そのため、javaScriptの処理の中でbody内の要素を読み込む処理がある場合、
head要素にソースを書いてもうまく動作しません。
この場合はbody要素の最後にjavaScriptを記述する必要があります。
ソースコードの量が膨大な場合

上で説明したように、HTMLは上から順に読み込まれていきます。
head要素内に厖大なjavaScriptのソースコードが書かれていると、
読み込みに時間がかかるため、
ブラウザにHTMLのbody要素が表示されるまでに時間がかかるというデメリットがあります。
body内の要素を読み込む処理がなければ、
処理内容に影響はありませんが、
ユーザーにページを快適に見せるためには、
body要素に書いた方が良いでしょう。

jQuery

jQueryは、javaScriptのライブラリです。
と言われてもピンとこないかもしれません。
簡単に言うと、javaScriptであらかじめ便利なプログラムを作っておいて、それをまとめたものです。
jQueryをうまく活用すれば、javaScriptだけで書くと面倒なプログラムも、少ない記述で書くことが可能です。

例えば、javaScriptだけで書くと100行必要な処理が、
jQueryを使うことで30行で納めることができる。
という感じです。
つまり、jQueryでできることは、javaScriptだけでも実現できるけれど、
jQueryを使うと簡潔になる。
と認識しておけば良いでしょう。