このページの本文へ

jQueryのダウンロードとインストールのチュートリアル (2/3)

2009年07月22日 14時54分更新

文●西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

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で作成するのがよいでしょう。

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています