Animaciones - UDB El Salvador › udb › archivo › guia › informatica-ingenieria ›...

Facultad: Ingeniería Escuela: Computación Asignatura: Lenguajes interpretados en el cliente

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;

}


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 100 ´.


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>


4

<html>

<head>

<title>Reloj</title>


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>


<h1>Reloj analogo usando JavaScript's y el control de canvas</h1>


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.


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


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>


function init() {

var paragraph_object =

document.getElementById('paragraph');

message = " Note que el titulo de pagina es: '" + document.title + "'.";

paragraph_object.innerHTML = message;

}

</script>

</head>


<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.


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.


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.


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:


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

Animaciones - UDB El Salvador › udb › archivo › guia › informatica-ingenieria ›...

Documents

Transcript of Animaciones - UDB El Salvador › udb › archivo › guia › informatica-ingenieria ›...