prototype.js には Ajax でよく使う機能があらかじめ用意されていて、JavaScriptのプログラムをシンプルにしてくれます。まずは prototype.js を使って既存のプログラムを書き換えた場合、どのように便利になるのか体験してみてください。
prototype.js は機能が豊富なので、最初は戸惑ってしまいます。とりあえずよく使う機能から使い方を覚えて、少しずつ活用の幅を広げていけばいいと思います。
【1】sample001 フォルダをコピーして sample002 フォルダを作成します。
【2】今回は以下のようなファイルの構成になります。
・test.html と test.js を少しだけ変更します。
・test.css は前回の sample001 と同じものなので、ソースコードは省略します。
＊「\」はWindowsではエンマークのことです。
保存先 C:\ajax\sample002
ファイル名 test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript" src="test.js"></script>
<link href="test.css" rel="stylesheet" type="text/css">
<title>test</title>
</head>
<body>
<div id="result"></div>
</body>
</html>
保存先 C:\ajax\sample002
ファイル名 test.js
onload = init;
var result;
function init() {
result = $('result');
calc();
}
function calc() {
var a = 1;
var b = 2;
var c = a + b;
result.innerHTML = "a + b = " + c;
}
＊文字コードは必ず UTF-8 で保存してください。
保存したら各Webブラウザで動作を確認してみましょう。
【3】Firefox で sample002 の「test.html」を開き、動作を確認します。
C:\ajax\sample002
【4】Internet Explorer6.0 で sample002 の「test.html」を開き、動作を確認します。
prototype.jsを使用する前と同じように動作したらOKです。
ウェブアプリケーションの開発は Firefox を使って行ないますが、利用者の多い Internet Explorer でも必ず動作確認するようにしてください。
【解説】
(1)prototype.js を使うには、test.html の head 部分に以下の1行を加えるだけです。
<script type="text/javascript" src="../lib/prototype.js"></script>
これで prototype.js に用意されている豊富な機能が使えるようになります。prototype.js は複数のサンプルから共通して利用するため、libフォルダに配置しています。
「..」は一つ上の階層を表します。つまり test.html からみて、一つ上の階層にあるlibフォルダの中にある prototype.js を読み込むということになります。
(2)prototype.js の関数を使うと、JavaScriptのプログラムがシンプルに書けます。
result = document.getElementById("result");
↓
result = $('result');
$()関数は getElementById() のショートカットです。HTMLファイルで要素に付けたid名を「'」シングルクォーテーションで囲んでいます。「"」ダブルクォーテーションで囲んでも同じです。
今回はプログラムが短いのであまりメリットを感じないかもしれませんが、プログラムが長くなるほど威力を発揮します。
【ワンポイント】
prototype.js には他にも多くの機能があり、ドキュメントが公開されています。ドキュメントは英語ですが、翻訳サイトなどを使えばある程度意味が掴めます。
この講座でも必要に応じて解説しますが、もっと詳しく知りたい方はドキュメントをご覧ください。
Prototype API Documentation
http://www.prototypejs.org/api
翻訳にはエキサイト翻訳が便利です。
http://www.excite.co.jp/world/
Webページごと翻訳する機能もあります。
