Código fuente Ya.

Puede ejecutar la o las páginas para probar el concepto inmediatamente.

 

Concepto:Api de Google para traducciones a diferentes idiomas

El concepto trata sobre:js,dhtml,ajax
Autor:

Retornar

Nombre del archivo:menu.html

Comentarios
El objetivo es conocer las funciones que nos provee Google para traducir párrafos de texto entre
distintos idiomas (Google AJAX Language API)

El primer ejemplo nos muestra como traducir al inglés un párrafo escrito en castellano. El segundo
ejemplo podemos seleccionar el lenguaje de origen y el lenguaje de destino.
Nombre del archivo:pagina1.html


Comentarios
Debemos primero importar los archivos que provee Google para utilizar los servicios de traducción:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

En este problema codificamos las funciones propia en el archivo pagina1.js:
<script type="text/javascript" src="pagina1.js"></script>

Creamos un control de tipo textarea y un botón:
<textarea name="castellano" id="castellano" rows="10" cols="40">Ingrese un texto en castellano.</textarea>
<br>
<input type="button" name="boton1" value="Traducir al Ingles" onClick="traducir()">

Cuando se presiona el botón se llama la función : traducir()

Por último definimos un div donde insertaremos la traducción:
<div id="traduccion"></div>
Nombre del archivo:pagina1.js

Comentarios
Para cargar las Apis debemos llamar al método load con estos dos parámetros:
google.load("language", "1");    

La función traducir se ejecuta cuando se presiona el botón de la página HTML. En esta función lo
primero que hacemos es extraer el párrafo cargado del control TextArea y seguidamente llamar al
método translate provistas por el Api. Este método debe recibir como primer parámetro el texto a 
traducir, como segundo parámetro el idioma original, como tercer parámetro el idioma a traducir y
por último la función que debe ejecutarse cuando el servidor de Google nos avise que la traducción fué
finalizada:
function traducir() 
{
  var text = document.getElementById("castellano").value;    
  google.language.translate(text, "es", "en",resultadoTraduccion);    
}    

La función resultadoTraduccion se ejecuta cuando la traducción fué finalizada y recibe como parámetro el
texto traducido.
Obtenemos la referencia del div donde mostraremos el resultado. Verificamos que la traducción fué efectuada
con exito mediante un if. Asignamos por último el texto traducido al div respectivo.
function resultadoTraduccion(result) 
{            
  var divtraduccion = document.getElementById("traduccion");            
  if (result.translation) 
    divtraduccion.innerHTML = result.translation;            
}        
Nombre del archivo:pagina2.html


Comentarios
Debemos primero importar los archivos que provee Google para utilizar los servicios de traducción:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

En este problema codificamos las funciones propia en el archivo pagina2.js:
<script type="text/javascript" src="pagina2.js"></script>

Creamos un control de tipo textarea donde ingresamos un párrafo en alguno de los lenguajes que
soporta el API de Google:
<textarea name="origen" id="origen" rows="10" cols="40"></textarea>

Disponemos un control select con todas las combinaciones de traducciones de lenguajes que soporta
Google:
  <select name="direccion" id="direccion" onChange="limpiar()">
    <option value="es|en">Español a Inglés</option>
    <option value="en|es">Inglés a Español</option>
    <option value="en|ar">Inglés a Arabic</option>
    <option value="en|zh-CN">Inglés a Chinese(Simplified)</option>
    <option value="en|zh-TW">Inglés a Chinese(Traditional)</option>
    <option value="en|nl">Inglés a Holandés</option>
    <option value="en|fr">Inglés a Francés</option>
    <option value="en|de">Inglés a Alemán</option>
    <option value="en|it">Inglés a Italiano</option>
    <option value="en|ja">Inglés a Japonés</option>
    <option value="en|ko">Inglés a Koreano</option>
    <option value="en|pt-PT">Inglés a Portugués</option>
    <option value="en|ru">Inglés a Ruso</option>
    <option value="ar|en">Arabe to Inglés</option>
    <option value="zh|en">Chino to Inglés</option>
    <option value="zh-CN|zh-TW">Chino(Simplificado a tradicional)</option>
    <option value="zh-TW|zh-CN">Chino (Tradicional a simplificado)</option>
    <option value="nl|en">Holandés a Inglés</option>
    <option value="fr|en">French to English</option>
    <option value="fr|de">Francés a alemán</option>
    <option value="de|en">Alemán a Inglés</option>
    <option value="de|fr">Alemán a Francés</option>
    <option value="it|en">Italiano a Inglés</option>
    <option value="ja|en">Japonés a Inglés</option>
    <option value="ko|en">Koreano a Inglés</option>
    <option value="pt|en">Portugués a Inglés</option>
    <option value="ru|en">Russian to English</option>
  </select>

Por último disponemos un botón para llamar a la función de JavaScript que hace la
comunicación asincrónica con el servidor (AJAX) para optener la traducción:
<input type="button" name="boton1" value="Traducir" onClick="traducir()">
Nombre del archivo:pagina2.js

Comentarios
Para cargar las Apis debemos llamar al método load con estos dos parámetros:
google.load("language", "1");    

La función traducir se ejecuta cuando se presiona el botón de la página HTML. En esta función lo
primero que hacemos es extraer el párrafo cargado del control TextArea.
Luego extraemos del control select el valor de idioma de origen y destino.
Como dicho valor es un String que tiene el caracter '|' separando la referencia del idioma origen y
el idioma destino, debemos dividirlo en dos empleando el método split de la clase String.
Ahora tienemos un vector con dos elementos que representan el lenguaje origen y el lenguaje destino
de traducción.
Llamamos por último al método translate de la propiedad languaje del objeto google, pasándo como datos
el texto a traducir, el lenguaje origen, el lenguaje destino y la función a ejecutarse cuando el 
servidor avise que la traducción fué realizada.
function traducir() 
{
  var text = document.getElementById("origen").value;    
  var direccion = document.getElementById('direccion');
  var seleccionado=direccion.options[direccion.selectedIndex].value;
  var vec = seleccionado.split('|');
  var fuente = vec[0];
  var destino = vec[1];
  google.language.translate(text, fuente, destino, resultadoTraduccion);
}    

La función resultadoTraduccion se ejecuta cuando la traducción fué finalizada y recibe como parámetro el
texto traducido.
Obtenemos la referencia del div donde mostraremos el resultado. Verificamos que la traducción fué efectuada
con exito mediante un if. Asignamos por último el texto traducido al div respectivo.
function resultadoTraduccion(result) 
{            
  var divdestino = document.getElementById("destino");            
  if (result.translation) 
    divdestino.innerHTML = result.translation;            
}        

La función limpiar solo tiene por objetivo que cada vez que cambiamos el item seleccionado del control select
borre la última traducción efectuada:
function limpiar()
{
  var divdestino = document.getElementById("destino");            
  divdestino.innerHTML = '';            
}

Retornar



Código Fuente Ya - 2015