cubeLabo PHP,Javascript,Web標準などWeb制作覚書 Javascriptライブラリの使い方

Javascriptライブラリの使い方

Javascript/Ajaxライブラリは便利な機能を手軽に実現できます。ライブラリの利用は高度な知識が必要になるイメージがありますが，利用した感想として思っていたよりとても簡単に実現できるものもあります。

Javascript/Ajaxライブラリの大まかな利用の流れをまとめています。

(1).ライブラリのダウンロード
(2)ライブラリの配備
(3)スクリプトの読み込み(HTMLファイル内に記述)
(4)スクリプトの呼び出し(HTMLファイル内に記述)

ライブラリのダウンロード

多くのライブラリは圧縮して配布されているので，解凍ソフトで展開します。

公開フォルダへ配備

HTMLファイルからサーバ上でパスの通るフォルダ(公開フォルダ)にライブラリ(Javascriptファイル)を配備します。ライブラリによっては別のライブラリを利用しているのでそれらのファイルも適宜ダウンロードして配備します。有名なライブラリでは必要になるライブラリはダウンロードファイルに同封されていることが多いようです。

ライブラリにはJavascriptファイルだけでなくCSSや画像などが同封されていることもあります。

スクリプト等の読み込み

HTMLファイルにライブラリの読み込みを記述します。一般にhead部でscriptタグを使って読み込みます。

(記述例)
<html>
<head>
...................
<script src="ライブラリファイルのパス" type="text/javascript"></script>
</head>
<body>
...................
</body>
</html>

読み込むJavascriptファイルの文字コードがHTMLファイルと異なる場合はJavascriptの文字コードを指定するのが無難だと思います。
(JavascriptファイルがUTF-8の場合の記述例)
<script src="ライブラリファイルのパス" type="text/javascript" charset="utf-8"></script>

CSSが必要な場合はCSSも読み込みます。
(記述例)
(記述例)
<html>
<head>
...................
<link rel="stylesheet" href="CSSファイルのパス" type="text/css" media="all" />
<script src="ライブラリファイルのパス" type="text/javascript"></script>
</head>
<body>
...................
</body>
</html>