JavaScript と jQuery の基本
JavaScriptとは
1. ブラウザ上で動くプログラミング言語
Webブラウザにて解釈・実行されることがJavaScript(以下、js)の特徴の1つです。
そのため、基本的にjsはHTMLファイルの中に書かれています。
(ここで「基本的に」と書いたのは、jsを外部ファイルとして定義して、HTML内で指定のjsファイルを呼び出す場合もあるからです。)
HTMLに加えてjsを記述することで、以下の機能が実現できます。
- イベント発火
マウスの位置やクリックなどに応じて、任意の動作を起こすような仕掛けを作る - DOM操作
DOMオブジェクト(HTMLの各要素がオブジェクト化したイメージのもの)を操作し、レイアウトを変更する
つまり、
HTMLだけでは静的な画面しか実装できないところが、
動的な画面を作ることができるようになる、ということです。
2. プロトタイプベースのプログラミング言語
jsはC++やjavaと同じくオブジェクト指向言語です。
大きく異なるのは、C++やjavaはクラスベースの言語であるのに対し、
jsはプロトタイプベースの言語である点です。
クラスベースの言語では、静的なクラスを定義した後に変数を定義しますが、
プロトタイプベースの言語ではクラスは事前に定義しません。
後半の「JavaScriptの基本文法」を見てもらえるとわかりますが、
クラス宣言とインスタンス化を同時に行うような書き方をします。
(「型」のようなものを使いまわすこともできますが、難易度が高いです。)
jQueryとは
JavaScriptのライブラリ
jQueryはジョン=レシグという人が作った、jsを使いやすくするライブラリです。
具体的にどう使いやすくなるかというと、
- ブラウザの差分を吸収するため、ブラウザ毎の書き分けが不要に!
- DOM操作が容易に!
なります。
また数多くのプラグインが用意されているうえ、
bootstrapなど様々なフレームワークやライブラリにも使われています。
このようにjQueryにはjsを扱う上での便利かつ基本的な機能が用意されており、
もはやjQueryとjsは一心同体であると言っても過言ではないかもしれません。
JavaScriptの基本文法
- 変数
var x = 10;
- 配列
var array = [1, 2, 3];
- オブジェクト
var obj = {"name":"Tanaka", "age":20}; alert(obj.age) => 20 obj.age = 25 alert(obj.age) => 25
function f(x) { ... } f(x); //または var g = function(x) { ... }; g(x);
- ハマりどころ "this"
予約語thisは使う場面によって意味が異なるため、
慣れないうちは使わない方が無難。
(もちろん使いこなせれば利用価値はあります。)
jQueryの基本文法
- jQueryオブジェクトの生成
var $obj = $("CSSセレクタ");
変数名の頭の"$"に特別な機能はなく、あくまで文字列の一部とみなされます。
ただ慣習的にjQueryオブジェクトの変数名の先頭には"$"をつけるようです。
- jQueryオブジェクトの操作
$("CSSセレクタ").method1().mehtod2();
- ユーティリティー関数
$.each(...)
jQueryにはいくつかの標準メソッドが備わっており、
上記のような記法で使用することができます。
おすすめリンク・書籍
www.slideshare.net