jQueryの読み込みと記述場所
ダウンロードしたjQueryは、利用したいWebサーバーにアップロードし、Webページ(HTML/XHTML)の中にscript要素を書いて読み込みます。
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
script要素はページ内のどこに記述してもかまいませんが、一般的にはhead要素の内部に記述します。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>jQueryの読み込み</title>
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
</head>
ただし最近では、body要素を閉じる直前にscript要素を記述するケースも増えています。JavaScriptの読み込みを後回しにし、HTMLやCSSの描画を優先してページの表示を高速化するためです。このあたりは、あらかじめ自社のポリシーを決めておくといいでしょう。
<body>
(中略)
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
</body>
jQueryの命令は、jQueryのライブラリー本体を読み込んだscript要素の後に、再びscript要素で記述していきます。
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//jQueryの命令をここに記述
</script>
script要素は、src属性がある場合はsrc属性に記述されている外部ファイルを、src属性がない場合はscript要素内に記述されているコードをJavaScriptの命令として評価します。jQueryを使ったプログラムを書く場合にも、script要素の中に直接記述するか、「script.js」などの外部ファイルを作成して記述する方法が選べます。
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
ただし、実務上は外部ファイルに記述したほうがよいでしょう。多くのブラウザーは一度読み込んだJSファイルの内容をキャッシュするため、外部化しておけば2回目以降のページの表示を高速化できます。一度作ったプログラムを後々使い回すことを考えても、JavaScriptは外部化しておいたほうが便利です。
作成するJSファイルは、埋め込む(X)HTMLと同じ文字コードで保存してください。基本的に文字コードは何でも構いませんが、Ajaxを利用してサーバーと通信する際にはUTF-8以外だと文字化けを起こす可能性があります。特別な理由がなければ、(X)HTMLファイル、JavaScriptファイルともにUTF-8で作成するのがよいでしょう。
ソーシャルリアクション
この連載の記事
一覧へWebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。