Introduction to google api
In this article I would like to give an overview of the api that google provides. I will not consider all api and give detailed instructions on their use, but I will tell only about those that I consider most useful, and give examples of codes with comments (examples are taken from the documentation for api).
I'll tell you about:
With the help of this api we can connect popular JavaScript libraries to our web applications (jQuery, Prototype, MooTools, Dojo, Ext Core and others). Also, the AJAX Libraries API will load the libraries necessary for api, which will be presented below.
An example of using the AJAX Libraries API:
Api documentation here
')
The AJAX API of languages gives us the opportunity to translate text, as well as determine the language in which the text is written, using only javaScript.
Api documentation here
An application with which we can execute our javascript. But the charm of the Code Playground is not in this (for me personally). Here are many useful examples. For example, it was from here that I learned how to use the YouTube API (and answered the question of how to make my own skin for a player from YouTube).
You can read about all the other google libraries here.
I'll tell you about:
AJAX Libraries API
With the help of this api we can connect popular JavaScript libraries to our web applications (jQuery, Prototype, MooTools, Dojo, Ext Core and others). Also, the AJAX Libraries API will load the libraries necessary for api, which will be presented below.
An example of using the 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 documentation here
')
AJAX API languages
The AJAX API of languages gives us the opportunity to translate text, as well as determine the language in which the text is written, using only 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 documentation here
Code playground
An application with which we can execute our javascript. But the charm of the Code Playground is not in this (for me personally). Here are many useful examples. For example, it was from here that I learned how to use the YouTube API (and answered the question of how to make my own skin for a player from YouTube).
You can read about all the other google libraries here.
Source: https://habr.com/ru/post/64515/
All Articles