Ingeniería Systems: Inteligencia en la interfaz de usuario

Regresar al índice

¿Qué es Javascript?

Es un lenguaje de programación que los browser directamente leen e interpretan en el momento en que cargamos nuestra página web.
Se usa principalmente del lado del cliente, o sea, en nuestra computadora, implementado como parte de un navegador web y nos permite hacer mejoras en la interfaz de usuario y páginas web dinámicas.
Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web, como Internet Explorer, Firefox o Chrome.

Librerías en Javascript

Qué significa que la gente haga programas abiertos para reutilizar? Grupos de programadores en todo el mundo han ido desarrollando lo que se llaman librerías, que no son mas que un conjunto de funcionalidades en un lenguaje determinado, en este caso javascript, para hacer determinadas tareas.
Qué tareas? Con algunas librerías podemos por ejemplo corroborar que los campos en un formulario se hayan cargado correctamente o que no estén vacíos. O podemos crear animaciones con imágenes, o simplemente mostrar un calendario para que un usuario elija una fecha. Son cosas que parecieran sencillas, y realmente lo son si utilizamos las librerías que tenemos a disposición.

Eventos

Para usar las librerías vamos a tener que entender algunas cosas. Y siempre que trabajemos con Javascriptdel lado del cliente tendremos que manejar lo que son Eventos.
Los eventos son todas las acciones que el usuario inicia: dar clic sobre un botón, presionar las teclas del teclado, etc. Cada vez que se produce un evento, se crea un objeto.
Cada lenguaje de programación tiene su propio modelo de eventos.
Javascriptregistra las fuentes de eventos (teclado, ratón, etc). La aplicación se queda escuchando y en el caso de que ocurra un evento utilizamos la información recibida para realizar las acciones adecuadas.

Programación del lado del cliente

Comencemos por el principio. En desarrollo web, existen una categorización que define dos tipos de tecnologías: del lado del cliente y del lado del servidor.
Las tecnologías del lado del servidor guardan información y modelos de datos en el server y luego envían el código de la página web al navegador del usuario cuando este lo requiere. Las tecnologías del lado del cliente directamente se interpretan y ejecutan directamente en el navegador del usuario.
En general, ambas tecnologías interactúan para crear un sitio web completo.
Javascriptes una tecnología del lado del cliente que puede ser utilizada para una variedad de cosas, como ser:

Validación de formularios
Crear efectos
Cambiar estilos dinámicamente
Hacer cálculos complejos
Etc.

Javascriptse ha convertido en una tecnología sumamente importante porque el procesamiento del lado del cliente es mas eficiente que del lado del servidor y es orientado a eventos (que veremos luego), que son las interacciones del usuario con la interfaz.

Un primer ejemplo en JS

Para realizar nuestro primer programa en Javascript, tomemos el HTML que hicimos en el capítulo anterior, nuestro Hola Mundo
Y saquemos lo que hay en el tagh1 y cambiemos nuestro titlea Mi primer programa en Javascripty agregamos en el bodyuna función para escribir información

<!DOCTYPE html>
<html>
<head>
<title>Mi primer programa en Javascript</title>
</head>
<body>
<script language=”javascript” type=”text/javascript”>
document.write(“<h1>Hola Mundo desde Javascript</h1>”);
document.write(“<br/>Este es mi primer programa en Javascript!”);
</script>
</body>
</html>

Corriendo nuestro ejemplo

Clickeenen el archivo HTML para abrirlo y verán el resultado. Lo que hace el tagscript es decir que allí en el HTML se insertará un programa, y defino el lenguaje en el que estará el mismo, en este caso Javascript. Luego dentro de mi código JS estoy escribiendo el documento HTML lo que se encuentra entre comillas, que no es mas ni menos que código HTML para que el navegador lo interprete y muestre lo correspondiente.
Pero la potencia de Javascript, viene de lo que llamamos Eventos, que veremos en la sección 3, pero que de manera simple, son todas las interacciones que hace un usuario con la interfaz. De esa manera cada vez que ocurre un evento podemos activar lo que se llaman “funciones de JS” que realizarán algún tipo de procesamiento y acción.

Funciones

En general, el tagde Javascriptpara funciones se suele poner en el tagHead, y luego definimos una función utilizando la palabra function:

<script language=”javascript” type=”text/javascript”>
functiondecirHola()
{
document.write(“Hola Mundo”);
}
</script>

Y luego lo que haremos, en el body, será llamar a la función:

<script language=”javascript” type=”text/javascript”>
decirHola();
</script>

Librerías

La otra manera de incluir funcionalidades en JS en nuestros programas, reutilizando código ya escrito, es llamando a librerías externas. Esto lo podemos hacer poniendo una línea como la siguiente:

<script language=”javascript” type=”text/javascript” src=”attached.js”></script>

De esta manera, es que podremos utilizar librerías como jQuery, que veremos en la próxima sección, solamente incluyendo el llamado a la misma insertando la siguiente línea en el head:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>

Lo que haremos entonces será simplemente, esperar la ocurrencia de un evento y cuando ello ocurra, llamar alguna función de Javascriptpara que realice algún tipo de acción
Para mas información: http://www.w3schools.com/js/default.asp

jQuery

jQueryes una librería de JavaScript que funciona de manera rápida, es liviana y rica en funcionalidad. jQuerypermite manipular el HTML para modificarlo dinámicamente, nos permite un mejor manejo de eventos, animación y Ajax (que veremos luego), de manera mucho más simple que funciona en prácticamente todos los navegadores.
JQueryse puede descargar e incluirlo en nuestro proyecto directamente, o se puede utilizar desde un servidor remoto, como vimos anteriormente.

Instrucciones de jQuery

La manera de escribir código para jQueryes muy sencilla, y tiene cierta forma similar con CSS y con Javascript. La sintaxis está hecha a medida para la selección de los elementos HTML y realizar alguna acción sobre el elemento.

$(selector).acción()

Por ejemplo:

$(this).hide() –oculta el elemento donde se está haciendo foco
$("p").hide() –oculta todos los elementos <p>.
$(".test").hide() –oculta todos los elementos con class="test".
$("#test").hide() –oculta el elemento id="test".

Entre las animaciones y efectos que podemos agregar a nuestra página utilizando jQuery, se encuentran:

Hide/Show
Fade
Slide
Animate
Stop
Callback
Chaining

Y para manipular el HTML de nuestra página podremos utilizar funcionalidades como:

Get
Set
Add
Remove

Para mas información ingresar en:http://jquery.com/

Eventos en profundidad

Nada de lo que vimos tiene sentido si no entendemos en profundidad lo que significa un evento. Mucha de la programación de hoy día se maneja mediante eventos, ya sea en una web o un dispositivo móvil.
La definición corta es que un evento es una acción o acontecimiento detectado por el programa que puede ser manejado por el mismo. Típicamente, el programa tiene uno o más lugares dedicados a manejar los eventos. La fuente mas usual de eventos es el usuario (que pulsa una tecla en el teclado, mediante el clickde un mouse, el tapen una pantalla táctil, etc). Otra fuente podría ser un dispositivo de hardware, como un temporizador o reloj. Cualquier programa también puede generar su propio conjunto de eventos, por ejemplo, para comunicar la finalización de una tarea.

Programación orientada a eventos

Los programas se basan en los eventos para modificar su comportamiento en respuesta a los mismos, a menudo con el objetivo de ser interactivo. De esta manera es que se programan sistemas que son orientados a eventos.
En la programación web y en la programación de aplicaciones para dispositivos móviles, los eventos existentes son muchos y variados. Simplemente para activarlos debemos agregar programación que realice algo cuando ese evento ocurre. Si no existe ese código no significa que el evento no esté ocurriendo sino simplemente que no haremos nada con el mismo

Algunos eventos comunes