Codificación de animaciones Trabajo con imágenes, figuras y otros tipos de gráficos Gestión de datos usando LocalStorage

Transcripción

1 Tema. JavaScript: gráficos y acceso a datos Objetivos. Codificación de animaciones Trabajo con imágenes, figuras y otros tipos de gráficos Gestión de datos usando LocalStorage Material a utilizar. Editor de texto para el código HTML. Navegador Web. Introducción. HTML y CSS tienen varias funciones para la animación rápida de efectos comunes. Sin embargo, JavaScript es mucho más flexible y puede producir resultados notables. Animaciones La animación es la visualización de una secuencia de imágenes estáticas a una velocidad lo suficientemente rápida para crear la ilusión de movimiento. Con respecto a la interfaz de usuario, la animación tiene que ver con el cambio de una pantalla para que sea dinámica, no solo un cambio de una sola vez, sino también uno continuo. JavaScript es lo suficientemente flexible como para producir efectos de animación espectaculares, en las manos adecuadas. La recursividad es una parte clave de la animación. La recursión es una técnica de programación en la cual una función se llama a sí misma. Una técnica común en la animación de JavaScript es usar settimeout recursivamente, es decir, hacer que invoque otra ejecución de la misma función desde la que se llamó a settimeout (). Esta es generalmente la forma más efectiva de introducir un "elemento de tiempo" en JavaScript. Este es un ejemplo de cómo se puede hacer una animación de un texto <!doctype html> <html> <head> <title>animacion con JavaScript</title> <script type = "text/javascript"> function moverparrafo() { next = current + "px"; current += 1; if (current > 300) { current = 0; 1

2 paragraph.style.left = next; // Pausa por 18 millisegundos antes de mover. var rate = 18; settimeout(moverparrafo, rate); function init() { paragraph = document.getelementbyid("original"); paragraph.style.position = "absolute"; current = 0; moverparrafo(); </script> </head> <body onload = "init();"> <h1>animacion usando JS</h1> <p id = "original">este es el mensaje que se mueve </p> </body> </html> Imágenes, figuras y otras graficas Se pude usar JavaScript para mostrar una imagen cuando se hace clic en un botón o se produce algún otro evento. El método createelement funciona bien para este uso JavaScript puede mostrar diferentes tipos de gráficos, desde archivos JPG y PNG hasta formas como cuadros y círculos. Un método es usar el método createelement (). Este método crea una función reutilizable para mostrar una imagen: function show_image(src, width, height, alt) { var img = document.createelement("img"); img.src = src; img.width = width; img.height = height; img.alt = alt; // Adicionar esto al tag <body> con document.body.appendchild(img); Y para mostrarlo: <button onclick="show_image ('path/filename', 276,110, 'Logo');"> Mostrar </button> Procedimiento. Para el primer código que se ha presentado sobre la animación, se pide hacer los cambios necesarios para que el usuario pueda introducir la velocidad con la que desea que se mueva el texto. Puede ser una GUI de la siguiente manera, usando un objeto del tipo: number y con un mínimo de 5 y un máximo de

3 El elemento canvas de HTML5 es un área de dibujo bajo control programático. Los únicos elementos gráficos comunes en HTML anterior eran estáticos, como PNG y JPG. Los efectos dinámicos y especialmente interactivos fueron difíciles. El Canvas cambia todo eso. Como aprendió en elecciones anteriores, el elemento lienzo crea un contenedor para gráficos y usa JavaScript para dibujar los gráficos dinámicamente. Con JavaScript, también puede animar objetos haciéndolos mover, cambiar la escala, etc. Para dibujar un objeto canvas, las construcciones primarias que utiliza son la función getelementbyid () para encontrar el elemento canvas y canvas.getcontext (a veces abreviado como c.getcontext) para crear el objeto canvas. Luego puede usar una variedad de métodos para dibujar formas, incluir imágenes, etc. Para ello, se va realizar la siguiente codificación: <!doctype html> 3

4 <html> <head> <title>reloj</title> <script type = "text/javascript"> function draw_leg(fraction) { dctx.lineto(center_x + length * Math.sin(2 * Math.PI * fraction), center_y - length * Math.cos(2 * Math.PI * fraction)); function init() { var canvas = document.getelementbyid("clockface"); dctx = canvas.getcontext('2d'); dctx.fillstyle = "black"; center_x = 100; center_y = 100; length = 100; show_hands(); function show_hand(fraction, width) { dctx.beginpath(); dctx.moveto(center_x, center_y); draw_leg(fraction - width); draw_leg(fraction + width); dctx.fill(); function show_hands() { dctx.clearrect(0, 0, 200, 200); var now = new Date(); seconds = now.getseconds(); minutes = now.getminutes() + seconds / 60; hours = now.gethours() + minutes / 60; show_hand(seconds / 60, 0.002); show_hand(minutes / 60, 0.005); show_hand(hours / 12, 0.01); var rate = 1000; settimeout(show_hands, rate); </script> </head> <body onload = "init();"> <h1>reloj analogo usando JavaScript's y el control de canvas</h1> 4

5 <canvas id = "clockface" width = "200" height = "200"></canvas> </body> </html> Para realizar figuras animadas ahora vamos a realizar el siguiente código y lo que se realizá es una página "para jugar", aunque simplemente coloca bloques de color en la pantalla con un poco de aleatorización, para lograr efectos visuales levemente interesantes. La recurrsividad se usa de dos maneras distintas a continuación: place_blocks () llama a draw_spiral () y draw_spiral () llama a place_blocks () o draw_spiral (), dependiendo de cuántas espirales se ha extraído recientemente. 5

6 6

7 Acceso a datos Parte del poder de las aplicaciones informáticas modernas es su capacidad de coordinar información de muchas fuentes en una pantalla. JavaScript puede reunir bases de datos del lado del servidor y del lado del cliente, memoria local para el escritorio o laptop como los productos seleccionados en una compra actual, los contenidos de la página actual, y actualizaciones remotas de precios o detalles meteorológicos para comparación y cálculo. Crear programas de JavaScript que envían y reciben datos es un desafío, no porque los conceptos sean difíciles, sino porque la aplicación de JavaScript tiene una estructura diferente a la de los demás. Las transacciones de datos de JavaScript a menudo se presentan como conceptualmente difíciles y que solo están disponibles para aquellos que dominan AJAX, XML, JSON. Aunque esto es una 7

8 buena práctica si se comprende las funciones: las funciones son pequeñas cajas especiales que le proporcionan cero o más argumentos, y luego la caja hace algo y tal vez le devuelva un resultado, no es difícil hacerlo con JS Una de las técnicas más esenciales para la transferencia de datos es la API XMLHttpRequest (a veces abreviada como XHR). XMLHttpRequest le permite usar JavaScript para pasar datos en forma de cadenas de texto entre un cliente y un servidor. La sintaxis general puede parecerse a la siguiente function load(url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.onload = function() { callback(xhr.responsetext); xhr.send(data); Un ejemplo muy sencillo sobre el acceso a datos <!doctype html> <html> <head> <title>javascript: acceso a datos</title> <script type = "text/javascript"> function init() { var paragraph_object = document.getelementbyid('paragraph'); message = " Note que el titulo de pagina es: '" + document.title + "'."; paragraph_object.innerhtml = message; </script> </head> <body onload = "init();"> <h1>acceso a datos</h1> <p id = "paragraph"></p> </body> </html> En la programación del mundo real, JavaScript puede manejar operaciones altamente complicadas. Uno podría, por ejemplo, recibir un informe involucrado sobre los precios de la gasolina en una larga lista de puntos de venta al por menor y necesita la capacidad de aislar solo una de esas cifras. El Parsing es un término usado para describir el análisis de información compleja en partes. 8

9 Cargar y guardar archivos locales Muchas aplicaciones web o móviles incluyen una función para cargar un archivo. Esto ha sido durante mucho tiempo una debilidad del HTML, en el sentido de que no hay una manera efectiva de especificar, por ejemplo, "solo permitir la carga de imágenes, a diferencia de los documentos, y solo si las imágenes ocupan menos de 1.1 megabytes". Sin esta capacidad, con demasiada frecuencia sucede que los usuarios accidentalmente intentan cargar algo diferente de lo que pretendían o que la aplicación admite, y los retrasos de la red hacen que la corrección del error sea un proceso que consume mucho tiempo. La capacidad de HTML5 para acceder a los archivos locales significa que una imagen destinada a cargarse se puede publicitar como una miniatura y validarse antes de la carga. Las acciones inmediatas de JavaScript ayudan a que la carga sea un proceso más interactivo y libre de errores. 9

10 <!doctype html> <html> <head> <title>acceso a archivos locales</title> <script type="text/javascript"> function acknowledge(file_handle) { var size = file_handle.size; var fname = file_handle.name; var message = "Se ha seleccionado el archivo: '" + fname + "'. parece ser un imagen reconocible " + size + " bytes en su tamaño."; alert(message); function complain(fname) { var message = "El archvio llamado: '" + fname + "' no aparenta tener una extención aceptada."; alert(message); function handle_file_selection(item) { var f = item.files[0]; var fname = f.name; var last_index = fname.lastindexof('.'); if (last_index == -1) { complain(fname); return; var ext = fname.substr(last_index + 1); if (ext.tolowercase() in { 'gif': '', 'jpg': '', 'png': '', 'tif': '' ) { acknowledge(f); else { complain(fname); </script> </head> <body> <h1>acceso a archivos locales usando JavaScript</h1> <input type='file' onchange='handle_file_selection(this);' /> </body> </html> Validación de datos En las primeras guías se aprendió acerca de la entrada y validación de formularios HTML. Con JavaScript, los formularios pueden hacer mucho. 10

11 Supongamos, por ejemplo, que un usuario final necesita ingresar un número de serie del formulario XXX-XXXXX-X, donde cada X es un dígito. En los primeros días de la aplicación web, los usuarios finales escribieron esto de la mejor manera posible y luego "enviaron" un formulario completo. El servidor verificó los errores y los informó de la mejor manera posible. Con JavaScript, la validación de la entrada del lado del cliente en forma de retroalimentación y corrección es instantánea. <!doctype html> <html> <head> <title>gestion de validacion</title> <script type="text/javascript"> function correct() { var input_object = document.getelementbyid("serial"); var value = input_object.value; var current_length = value.length; if (current_length) { var last_character = value.substring(current_length - 1); switch (current_length) { case 4: case 8: case 11: if (last_character!= '-') { value = value.substring(0, current_length - 1); break; default: if (!/\d/.test(last_character)) { value = value.substring(0, current_length - 1); if (current_length > 12) { value = value.substring(0, current_length- 1); current_length = value.length; switch (current_length) { case 3: case 7: case 10: value += "-"; input_object.value = value; </script> </head> <body> <h1>validar campos</h1> <form> Digite un numero de serie con el formato: XXX-XXX-XX-X, donde cada X es un valor 1-9: 11

12 <input id="serial" type='text' size='12' onkeyup="correct();">. </form> </body> </html> 1. Diseñe dos formularios, uno donde se pida la información general de una persona (nombre, apellido, fecha de nacimiento, número de hijos, sexo, dirección, teléfono). 2. Valide los campos de la información requerida, antes de enviar los datos entre los diferentes formularios. 3. Agregar un botón para guardar el archivo (investigar esto: guardar en un archivo.txt). 4. Agregar otro botón que le permita visualizar el archivo que se ha guardado. Investigación complementaria. Investigar el uso de cookies en JS, ejemplos y definiciones. Investigar el uso de Local Storage, ejemplos y definiciones. Referencias. GAUCHAT, J. (2013). El gran libro de HTML5, CSS3 y Javascript. Marcombo, S.A. 2ª Edición Microsoft (2013). HTML5 Application Development Fundamentals, Adison Wesley 12