App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
___________________________
162.- Insertar códigos de JavaScript en App inventor. Cálculo del número mayor.
p162_javascript_mayor.aia
- Vamos a enviar una serie de número a un código JavaScript y nos devolverá el valor mayor.
- Utilizaremos...
window.AppInventor.getWebViewString() para obtener los datos.
window.AppInventor.setWebViewString() para devolver el resultado.
También devolverá el resultado con esta otra línea...
document.write("Número mayor: <br />" + mayor);
_________________
- Diseño.
- El Diseño y los Bloques son como los de la aplicación del tutorial anterior, solo se ha de subir el archivo mayor.htm
- Podemos poner el VisorWeb visible o no visible según queramos que se muestre en él la respuesta, además de en la Etiqueta1.
- Archivo mayor.htm
mayor.htm |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head><body>
<script>
var lista = eval('[' + window.AppInventor.getWebViewString() + ']');
mayor = Math.max.apply(Math, lista);
window.AppInventor.setWebViewString("Mayor = " + mayor) // La respuesta se envía directamente al Bloque CadenaDeWebView.
document.write("Número mayor: <br />" + mayor); // Otra forma de enviar la respuesta.
</script>
</body></html>
|
- Otras funciones matemáticas en JavaScript:
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math
- Mediante estas funciones matemáticas podemos hacer aplicaciones más potentes.
_________________
- Bloques.
- Mientras estamos depurando el programa con App inventor dejamos la dirección que está puesta. Cuando lo vayamos a Generar para obtener el archivo de instalación .apk, previamente cambiamo la dirección del archivo a file:///android_asset/mayor.htm
_________________
- Comentarios.
- En esta ocasión se enviará los datos mediante VisorWeb.CadenaDeWebViewer.
- El código JavaScript tomará esos datos mediante: window.AppInventor.getWebViewString()
- Realizará la función de "mayor = Math.max.apply(Math, lista);" y devolverá el número mayor de esa lista mediante:
document.write("Número mayor: <br />" + mayor);
- El resultado de esta orden irá directamente a la página web.
- Además el código JavaScript también devolverá la lista ordenada mediante:
window.AppInventor.setWebViewString("Mayor = " + mayor)
- Esta última información la tomárá el código de App inventor mediante el Bloque: VisorWeb.CadenaDeWebViewer y la pondrá en la Etiqueta1.
- La línea anterior también la puedes poner de esta manera para que solo salga el número.
window.AppInventor.setWebViewString("" + mayor)
_________________
2.- Otro código para ordenar y obtener el valor máximo o mínimo.
p162_javascript_mayor.aia
- Otra manera de obtener máximo, mínimo y ordenar:
https://www.w3schools.com/js/js_array_sort.asp
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Math
- En este ejemplo he utizado la extensión para generar números aleatorios sin repetición.
- He configurado para obtener 9 números aleatorios de 50 elegibles.
- Los números obtenimos forman una cadena separados por coma: 4,26,7,12,42,8,37,4,19
- Si tuvieras una lista y tuvieras que convertir los números a cadena separado por coma, tendrás que utilizar el bloque:
join items using separator ,
Con este bloque puedes convertir una lista en cadena separado por coma.
_________________
- Diseño.
_________________
- Bloques.
window.AppInventor.setWebViewString("
gobal random
".split(",").sort(function(a,b) { return b - a; }).toString());
-----------------------------------------------------------
window.AppInventor.setWebViewString(Math.max.apply(Math,[
gobal random
]).toString());
__________________________________
|