以下について説明します。
AJAX Libraries API
このAPIを使用すると、現在人気のあるJavaScriptライブラリ(jQuery、Prototype、MooTools、Dojo、Ext Coreなど)をWebアプリケーションに接続できます。 また、AJAX Libraries APIは、apiに必要なライブラリをロードします。これについては、以下で説明します。
AJAX Libraries APIの使用例:
// api
<script src= "http://www.google.com/jsapi" ></script>
<script>
// . jquery 1.3.2
google.load( "jquery" , "1.3.2" );
// Callback-
google.setOnLoadCallback( function () {
alert($.browser.version);
});
</script>
* This source code was highlighted with Source Code Highlighter .
// api
<script src= "http://www.google.com/jsapi" ></script>
<script>
// . jquery 1.3.2
google.load( "jquery" , "1.3.2" );
// Callback-
google.setOnLoadCallback( function () {
alert($.browser.version);
});
</script>
* This source code was highlighted with Source Code Highlighter .
// api
<script src= "http://www.google.com/jsapi" ></script>
<script>
// . jquery 1.3.2
google.load( "jquery" , "1.3.2" );
// Callback-
google.setOnLoadCallback( function () {
alert($.browser.version);
});
</script>
* This source code was highlighted with Source Code Highlighter .
APIドキュメントはこちら
AJAX言語API
言語のAJAX APIを使用すると、javaScriptのみを使用して、テキストを翻訳したり、テキストを記述する言語を決定したりできます。
<html>
<head>
<script type= "text/javascript" src= "http://www.google.com/jsapi" >
</script>
<script type= "text/javascript" >
// language
google.load( "language" , "1" );
google.setOnLoadCallback( function () {
var text = document .getElementById( "text" ).innerHTML;
//
google.language.detect(text, function (result) {
if (!result.error && result.language) {
// ,
google.language.translate(text, result.language, "ru" ,
function (result) {
var translated = document .getElementById( "translation" );
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
});
});
</script>
</head>
<body>
<div id= "text" >Hello world</div>
<div id= "translation" ></div>
</body>
</html>
* This source code was highlighted with Source Code Highlighter .
<html>
<head>
<script type= "text/javascript" src= "http://www.google.com/jsapi" >
</script>
<script type= "text/javascript" >
// language
google.load( "language" , "1" );
google.setOnLoadCallback( function () {
var text = document .getElementById( "text" ).innerHTML;
//
google.language.detect(text, function (result) {
if (!result.error && result.language) {
// ,
google.language.translate(text, result.language, "ru" ,
function (result) {
var translated = document .getElementById( "translation" );
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
});
});
</script>
</head>
<body>
<div id= "text" >Hello world</div>
<div id= "translation" ></div>
</body>
</html>
* This source code was highlighted with Source Code Highlighter .
<html>
<head>
<script type= "text/javascript" src= "http://www.google.com/jsapi" >
</script>
<script type= "text/javascript" >
// language
google.load( "language" , "1" );
google.setOnLoadCallback( function () {
var text = document .getElementById( "text" ).innerHTML;
//
google.language.detect(text, function (result) {
if (!result.error && result.language) {
// ,
google.language.translate(text, result.language, "ru" ,
function (result) {
var translated = document .getElementById( "translation" );
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
});
});
</script>
</head>
<body>
<div id= "text" >Hello world</div>
<div id= "translation" ></div>
</body>
</html>
* This source code was highlighted with Source Code Highlighter .
APIドキュメントはこちら
コード遊び場
JavaScriptを実行できるアプリケーション。 しかし、Code Playgroundの魅力はこれではありません(個人的には)。 多くの便利な例をここに示します。 たとえば、ここからYouTube APIの使用方法を学びました(また、YouTubeからプレーヤーのスキンを作成する方法の質問に答えました)。
他のすべてのGoogleライブラリについては、 こちらをご覧ください。