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にはいくつかの標準メソッドが備わっており、
上記のような記法で使用することができます。

おすすめリンク・書籍

jQuery入門道場

semooh.jp

www.slideshare.net

www.amazon.co.jp