Index > はじめての prototype.js ... GoogleのAJAX Libraries API 経由で prototype.js を使う(javascript,prototype.js)
Fri, January 2, 2009

はじめての prototype.js ... GoogleのAJAX Libraries API 経由で prototype.js を使う(javascript,prototype.js)

prototype.js の配置の手間を減らす

GoogleのAJAX Libraries API を使えば、prototype.jsをダウンロードして開発中の作業ディレクトリに配置する手間が省けます。

ポイント1

Googleのjsapiを含める

<script src="http://www.google.com/jsapi"></script>

ポイント2

    <script>
    google.load("prototype", "1.6.0.3");

    google.setOnLoadCallback(function() {
        // ここに prototype.jsを使うJavaScriptを記述
    });
    </script>

サンプルコード

Google経由で prototype.jsを使うサンプルです。 テキストボックス(inputエレメント)にテキストを入力すると、 1秒おきに変更をチェックして、変更内容を alert() します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.0.3");

google.setOnLoadCallback(function() {
    function CallbackFunc()
    {
            var v = w.getValue();
            alert(v);
    }
    var w = new Form.Element.Observer("input_text", 1, CallbackFunc);
});

</script>
</head>
<body>

<div>
<form >
<input type="text" id="input_text"></input>
</form>
</div>


</body>
</html>

サンプルのテスト

1stStep.html

 Twitter
follow me on Twitter
 Categories