Web制作の現場で使えるjQuery　UIデザイン入門 ― 第2回

jQueryのダウンロードとインストールのチュートリアル

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

前へ 1 2 3 次へ

ツイートする