jQueryとはJavaScriptライブラリの一種で、今やデファクトスタンダードと言われるくらい人気です。
前回はわざとJavaScriptのプログラムの中で、jQueryの機能を呼び出していました。
何故なら、最初はできるだけ元のプログラムを変更せずに、
最小限の修正だけで動くようにしたかったからです。
でもjQueryっぽい書き方というか、
本来ならjQueryのイベントやメソッドを使った書き方があります。
そこで今回は、前のプログラムを、jQueryを主体として書き換えてみます。
早速、やってみましょう。
【1】前回に作成したsample002jq フォルダをコピーして sample002jq-2 フォルダを作成します。
【2】今回は以下のようなファイルの構成になります。
・test.js を少しだけ変更します。
・test.html とtest.css は同じものなので、ソースコードは省略します。
＊「\」はWindowsではエンマークのことです。
保存先 C:\ajax\sample002jq-2
ファイル名 test.js
var result;
$(document).ready(function(){
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-2 の「test.html」を開き、動作を確認します。
前回のsample002jqの時と同じように表示されれば成功です。
きっと同じように動作するはずです。
【解説】
前回と説明が重なりますが、jQueryを使う方法は、とても簡単です。
今回もjQueryをロードするため、WebページのHTMLのheadタグ部分に、1行加えています。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
この方法は、インターネットに接続していることが前提ですが、
今やほとんどのパソコンがネット接続されているので問題ないでしょう。
それでは前回のプログラムと比較してみましょう。
ファイル名 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);
}
違いが分かりましたか？
onload = init;
と
function init() {
の部分が、
以下のようになっているだけです。
$(document).ready(function(){
onloadはJavaScriptが元々持つ機能です。
initはユーザーが定義した関数なので、ここでは大事ではありません。
そしてここからが大事！
readyはjQueryの機能です。
jQueryはHTMLの要素に対して操作します。
だから各要素が全て読み込まれ、準備が整ってから、
プログラムを実行したいので、このように書くわけです。
これで全てがjQueryを使って書けていることになるので、
プログラムがスッキリしましたね。
jQueryを使うとプログラミングが楽になります。
また多機能なので、使いこなすと面白いですよ。
