jQueryは、Ajaxプログラミングのデファクトスタンダードとなっているほど人気があります。
参考になる書籍やインターネット上の情報も豊富です。
これまでのプログラミングでは、軽量タイプのフレームワークであるprototype.jsを使っていましたが、
今回はそのプログラムをjQueryで書き換えてみましょう。
jQueryを入手する方法は、とても簡単です。
prototype.jsと同じように、ダウンロードしてサーバーに配置してもよいのですが、
もっと簡単に利用できる方法があります。
それは使いたいWebページのHTMLのheadタグ部分に、1行加えるだけです。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
たったこれだけで、jQueryをロードすることができるのです！
凄い、便利ですよねー
ただしこの方法は、インターネットに接続していることが前提です。
jQueryをロードする必要があるからです。
それでは早速、使ってみましょう。
本来ならjQueryのイベントやメソッドに適した書き方がありますが、
今回はできるだけ元のプログラムを変更せずに、
最小限の修正だけで動くようにしてみましょう。
そこで最もシンプルなsample002を使います。
【1】以前に作成したsample002 フォルダをコピーして sample002jq フォルダを作成します。
【2】今回は以下のようなファイルの構成になります。
・test.html と test.js を少しだけ変更します。
・test.css は同じものなので、ソースコードは省略します。
＊「\」はWindowsではエンマークのことです。
保存先 C:\ajax\sample002jq
ファイル名 test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="test.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<title>test</title>
</head>
<body>
<div id="result"></div>
</body>
</html>
保存先 C:\ajax\sample002jq
ファイル名 test.js
onload = init;
var result;
function init() {
result = $('#result');
calc();
}
function calc() {
var a = 1;
var b = 2;
var c = a + b;
result.text("a + b = " + c);
}
＊文字コードは必ず UTF-8 で保存してください。
保存したら各Webブラウザで動作を確認してみましょう。
【3】sample002jq の「test.html」を開き、動作を確認します。
sample002の時と同じように表示されれば成功です。
本来のjQueryっぽい書き方ではありませんでしたが、
とりあえずは動作できましたね。
【解説】
(1)test.htmlのheadタグでは、念のためCSS、jQuery、jsファイルの順で読み込むようにしています。
準備が整ってから、プログラムを実行したいからです。
(2)jQueryでセレクタ(要素)を取得し、変数に代入している部分です。
result = $('#result');
jQueryでは、id要素は先頭に#(シャープ)を付ける決まりがあります。
ちなみにclass要素は先頭に.(ピリオド)を付けます。
(3)要素にjQueryのメソッドで、テキストをセットしている部分です。
result.text("a + b = " + c);
これと同じ意味。
$('#result').text("a + b = " + c);
どうでしたか？
意外と簡単にjQueryが使えましたね。
一番初歩的なjQueryの使い方を紹介しましたが、
実に高機能なJavaScriptライブラリなので、
興味がある方は詳しく調べてみると良いでしょう。
Webページに、様々な効果を加えることができますよ。
