JavaScript

La lista de tareas

Llegados a este punto del libro, hemos abordado dos lenguajes. El primero, HTML, permite estructurar la representación, y el segundo, CSS, permite entre otros mejorar el aspecto visual de la página. Esto nos habrá permitido darnos cuenta de que hay pocas cosas en común entre ambos lenguajes.

El último lenguaje, JavaScript, es también completamente diferente a los dos anteriores. Por el contrario, muchos lenguajes de programación, como C, C++, C# o incluso Java, PHP o VBScript (y existen muchos otros), se parecen bastante a JavaScript.

Los lenguajes como JavaScript saben realizar bien, necesariamente, tres cosas concretas: memorizar una información, comparar valores y repetir una acción. Por ejemplo, serán capaces de comparar si un valor determinado es mayor o menor que otro, y reaccionar en función del resultado de la comparación, o bien repetir una acción una cierta cantidad de veces hasta que ocurra algo.

Todo esto es bastante sencillo, de hecho, y basta con aprender a descomponer lo que debería hacer el programa en pequeñas etapas, e incluso descomponer estas etapas en otras más pequeñas.

Para establecer una analogía con la programación en JavaScript, tomemos como ejemplo una receta de cocina y veamos cómo cocinar huevos al plato.

Para preparar huevos al plato, en primer lugar tenemos que romper los huevos sobre...

Variables y asignaciones

Las variables son pequeños espacios de la memoria del ordenador que almacenan información concreta. Esta información puede ser un valor numérico, o una lista completa de habitantes de una gran ciudad que contenga sus nombres, sus números de teléfono, sus edades… Dicho de otro modo, es posible almacenar en una variable elementos simples o complejos.

Poco importa lo que se almacene, la sintaxis en JavaScript para utilizar una nueva variable es algo así:

var numeroDeHuevos = 0;  
var nombreDelComprador = 'Pepe'; 

La instrucción empieza por la palabra clave var escrita en minúsculas.

Esta palabra indica a JavaScript que a partir de esta línea de programa se va a incluir una nueva variable, llamada numeroDeHuevos, cuyo valor es, de momento, igual a 0. A continuación, el programa prosigue y encuentra otra variable, nombreDelComprador, que se crea y contiene un texto que se almacena en el espacio de memoria.

Si estos elementos de programación se denominan variables es porque su contenido puede cambiar con el tiempo, puede variar.

Los tipos de variables

var numeroDeHuevos = 12; 

var precioDeUnHuevo = 0.2; 

var precioDeLosHuevos = numeroDeHuevos * precioDeUnHuevo; 

var nombre = 'Moisés' ;  
var inicial = "M" ; 

var nombre =  "Moisés" ;  
var cliente = nombre ; 

alert("Hola " + nombre) ; 

Los operadores

Un operador en JavaScript tiene como objetivo combinar elementos, bien mediante simples fórmulas matemáticas, tales como la suma o la resta, o bien mediante otros métodos más complejos que nos permiten recuperar las cifras pares o comparar información.

Tomemos como ejemplo un programa en JavaScript que contenga una variable resultado que tenga el valor 12 y una variable calculo que no tenga ningún valor inicial.

var resultado = 12;  
var calculo; 

Con los operadores, podemos realizar una suma:

var calculo = resultado + 5; 

Tras la ejecución de esta línea, calculo tendrá un valor igual a 12 + 5, es decir 17.

Ocurrirá lo mismo con una resta, una multiplicación o una división.

calculo  = resultado - 2; // calculo tendrá el valor 10.  
calculo  = resultado * 3; // calculo tendrá el valor 36.  
calculo  = resultado / 4; // calculo tendrá el valor 3. 

módulo

Otro operador que permite realizar un cálculo es el operador módulo. Su símbolo es el porcentaje (%). Devuelve el resto de la división entera.

var resultado = 13 ;  
var calculo  = resultado % 4 ; 

Si dividimos 13 entre 4, el resultado entero es 3, y el resto es 1. Con el operador %, tendremos que 13%4 (que se lee "trece módulo cuatro") realiza la división entre 4 y devuelve el resto, es decir 1.

Veamos un caso práctico de cómo utilizar el operador módulo.

Situemos elementos, diez en total, en tres columnas. Nuestra página...

Las condiciones

Las condiciones son comprobaciones que pueden pedirse al ordenador para comparar elementos. Es uno de los aspectos esenciales de la programación.

var a=5, b=10;   
if (a > b) {  
    alert("a es mayor que b") ;  
} else {  
    alert("a es menor que b") ;  
} 

if (a > b) {  
   alert("a es mayor...

Iteraciones

La informática, término derivado de las palabras "información automática", es una idea interesante vista desde este ángulo, pero de momento, con lo que hemos visto hasta ahora en el libro, si queremos que una variable evolucione y se incremente de 1 en 1 hasta alcanzar el valor 1000 tendremos que escribir unas cuantas líneas de código.

En todos los lenguajes similares a JavaScript existe el concepto de bucle, es decir, un código que se va a repetir durante cierto tiempo o un número determinado de veces hasta que ocurra algo particular. Esto puede resultar útil para desplazar un objeto por la pantalla, realizar una cuenta atrás, recorrer un array, etc.

for (Inicialización; Condición; Incremento){  
     Acción;   
} 

for (var contador = 1; Condición; Incremento){  
     Acción;  
} 

for (var contador = 1; contador <= 12; Incremento){   
     Acción;   
} 

for (var contador = 1; contador <= 12; contador++){  
    Acción;   
}...

Depurar un programa

Un último punto que veremos relativo a las herramientas que nos proporcionan los navegadores actualmente es la depuración paso a paso, es decir, el hecho de poder ejecutar nuestro script pero pidiendo al navegador que se detenga en una línea concreta y esperar. El navegador ejecutará la línea solamente cuando se lo pidamos. Esta técnica se utiliza muy a menudo en la depuración y resulta muy práctica para darse cuenta de lo que realiza, realmente, el programa.

Esto no funciona con el CSS ni con el código HTML. Solo JavaScript puede ejecutarse paso a paso.

Para poder parar el script en un lugar preciso, debemos ir a la pestaña Sources de la ventana de ayuda al desarrollo.

Es posible, como se muestra en la captura de pantalla, que haya un icono en la barra de pestañas. Este icono es un botón que permite abrir un panel que dará acceso a los distintos archivos.

Abriremos este panel y haremos clic sobre el archivo que queramos examinar. En nuestro caso, se trata del archivo 1_2_4_base3lenguajes.html. Aparecen el código HTML y la parte de script. Podemos ver números y líneas.

Si queremos detener el programa en la línea 12, basta con hacer clic en la línea 12. Aparece un pequeño marcador resaltando esta línea, como se muestra a continuación:

Si pulsamos ahora, en el teclado, [Ctrl] R (o [Cmd] R en Mac)...

Las funciones

Una función es un conjunto de líneas de código agrupadas bajo un nombre concreto, por ejemplo mostrarElMenu(). Puede escribirse en un archivo con otras funciones y puede utilizarse en cualquier momento siempre que se haya cargado en el navegador, naturalmente.

Cuando el desarrollador desea mostrar el menú, en lugar de escribir o volver a escribir las líneas de código que muestran el menú, le basta con invocar a la función mostrarElMenu().

function mostrarElMenu() {  
    // código que permite mostrar el menú.  
} 

function mostrarElMenu(mostrarUOcultar) {  
    if (mostrarUOcultar === true) {  
        // código que permite mostrar el menú.  
    } else {  
        // código que permite ocultar el menú.  
    }  
} 

Las cookies

Las cookies contienen información, algo así como variables, pero se almacenan en el navegador del lado del cliente. Tienen la peculiaridad de que se almacenan durante un periodo determinado de tiempo. Las cookies pueden resultar útiles para memorizar las opciones del usuario, que no tendrá que definirlas cuando vuelva a visitar el sitio.

function cookiesFx() {  
    var dateNum = new Date();  
    dateNum.setFullYear(dateNum.getFullYear() + 1);  
    var exp = "expires=" + dateNum.toGMTString();  
  
    document.cookie = "nbShow=" + escape(nbShow) + "; " + exp;  
    document.cookie = "bg=" + escape(bg) + "; " + exp;  
} 

Para utilizar cookies, deben tenerse en cuenta dos etapas. La primera, que acabamos de mostrar, es la creación o actualización de las cookies.

Mediante la palabra clave expires se podrá definir la duración de la cookie, una especie de fecha de caducidad. La variable dateNum, en su creación, recupera la fecha actual. La llamada a la función setFullYear va a permitir cambiar el año, que aumentará en 1. Los valores almacenados en la cookie estarán accesibles durante un año.

La variable exp contiene la concatenación de la palabra clave...

El drag and drop

El drag and drop es la acción de tomar un elemento manteniendo el clic del ratón sobre él, desplazarlo y soltar el clic para terminar sobre otro elemento. Es lo que hacemos cuando desplazamos un archivo seleccionándolo y moviéndolo con el ratón de una carpeta a otra.

Puede encontrar el siguiente ejemplo en el archivo: 5_11_DragAndDrop.html.

<div id="salida"></div>  
  
<p>Desplace/Suelte los navegadores en una zona<br />  
    <img src="../img/logos/chrome1.png"  
        id="chrome_ico"   
        ondragstart="dragNav(this, event)"   
        alt="Logo Chrome">  
    <img src="../img/logos/firefox1.png"  
        id="firefox_ico"  
        ondragstart="dragNav(this, event)"  
        alt="Logo Firefox">  
    <img src="../img/logos/ie1.png"   
        id="internetExplorer_ico"  
        ondragstart="dragNav(this, event)"   
        alt="Logo IE">  ...

Mostrar el sitio HTML en pantalla completa

En la mayoría de navegadores, salvo puede que Internet Explorer, es posible pasar un objeto a pantalla completa. La idea consiste en construir un sitio en el interior de este elemento, de modo que se muestre en pantalla completa. En el archivo 5_12_FullScreen.html se muestra un ejemplo práctico.

Es preciso, naturalmente, prever la visualización utilizando valores en porcentaje o bien asociar algunos estilos que permitan una visualización agradable en pantalla completa.

En HTML tendremos, por ejemplo:

<div id="fullScreen">  
    <input type="button" onclick="pantallaCompleta();" 
value="Pantalla completa" />  
    <h1>Una página que se muestra en pantalla completa.</h1>  
</div> 

A continuación, un evento u otro sobre el botón permitirán invocar al script siguiente para alternar el paso a pantalla completa o el retorno a pantalla normal. 

function pantallaCompleta() {  
var elem = document.getElementById('fullscreen');  
    // Salir de la pantalla completa  
    if (document.FullscreenElement) {  
        document.CancelFullScreen();  
    } else if (document.webkitFullscreenElement) {  ...

Interacciones entre JavaScript, HTML y CSS

HTML y CSS son dos lenguajes que podrían calificarse de estáticos. Es decir, que si el estilo del texto de un párrafo utiliza el color gris, ese párrafo siempre estará escrito en gris y no será posible pedirle al CSS que cambie el color, salvo cuando se pasa el puntero del ratón por encima. Si una regla de estilo es estática, será la misma cada vez que se utilice. Un texto gris será siempre un texto gris en CSS. Y ahí es donde JavaScript resulta muy interesante porque puede modificar el estilo por una u otra razón: hacer desaparecer un elemento, desplazarlo por la pantalla, etc.

Supongamos que el código HTML tiene la etiqueta siguiente:

<div id='toto'> 
<p>Toto va a la playa</p> 
</div> 

En primer lugar, es posible seleccionar la etiqueta <div> y, por tanto, su contenido, o bien la etiqueta <p>, en el interior de la etiqueta <div>. A continuación, se pueden efectuar modificaciones en el código HTML seleccionado o en el estilo aplicado a esas etiquetas.

var elDiv = document.querySelector("#toto"); 
var elParrafo = document.querySelector("#toto p"); 

En este ejemplo, la variable elDiv es el equivalente JavaScript de la etiqueta <div id=’toto’> y la variable elParrafo es el equivalente del párrafo (etiqueta <p>).

Habría...

Las bases de datos locales

Es posible crear una base de datos del lado cliente. Esta base de datos, una vez creada, puede utilizarse de manera indefinida. El hecho de cerrar el navegador o incluso de apagar el ordenador no le afectará.

Puede consultar en el archivo 5_14_DB_SQLite.html un ejemplo que presenta las principales posibilidades, es decir crear una base de datos, crear tablas, escribir en las tablas y leer las filas.

var db = window.openDatabase("miBase", "1.0", "descripción", 5 * 
1024 * 1024); //5MB 

tx.executeSql("CREATE TABLE IF NOT EXISTS test (id INTEGER   
PRIMARY KEY, nombre...

Generar PNG en JavaScript

En la carpeta lib de la carpeta js se ha agregado una librería que permite crear imágenes en formato PNG. El archivo 5_16_PNG.html detalla el siguiente ejemplo:

El código permite crear fácilmente cinco formas, que son: \, /, ||, = y X.

Dado que solo existen cinco formas, podría ser interesante tener iconos diferentes, con un color de fondo distinto en cada caso. Vamos a ver cómo crear los distintos colores y, a continuación, cómo crear las imágenes.

La primera etapa consiste en completar un array de objetos, que contendrá los colores, o mejor dicho las componentes roja, verde y azul del color de fondo, y una cuarta información correspondiente al color del primer plano.

var frecuencia = .2;  
var RFrecuencia = Math.PI / 9;  
var VFrecuencia = Math.PI / 17;  
var AFrecuencia = Math.PI / 4; 

for (var i = 0; i < 20; ++i)  
{  
    var r = Math.round(Math.sin(RFrecuencia * i) * 70 + 180);  
    var g = Math.round(Math.sin(VFrecuencia * i) * 70 + 180);  
    var b = Math.round(Math.sin(AFrecuencia * i) * 70 + 180);  
    var txt = 255;  
    if ((r + g + b) > 100) {  
        txt = 0;  
    }  
    pattTernColor[i] = {};  
    pattTernColor[i].r = r;  
    pattTernColor[i].g = g;  
    pattTernColor[i].b = b;  
    pattTernColor[i].t = txt;  
} 

La técnica que se utiliza aquí es un clásico para crear un arcoíris de colores.

La idea consiste en modificar los valores de rojo, verde y azul en base a una función sinusoide, haciéndolo de manera que si una aumenta, la otra disminuye, siendo la tercera diferente. La palabra correcta es "desfase", es decir, los valores aumentarán hasta alcanzar un valor máximo y disminuirán, a continuación, siguiendo una curva sinusoidal. Para que no todas tengan el mismo valor, cuando una arranca, la otra ya se encuentra algo avanzada, y la tercera viene con retraso. Son los tres valores de las frecuencias...

Ajax

Ajax significa Asynchronous JavaScript and XML. Esto quiere decir que va a ser posible recuperar información del servidor de manera asíncrona. Dicho de otro modo, JavaScript va a pedir alguna información al servidor y, más tarde, el servidor responderá, aunque durante todo este tiempo el programa JavaScript no estará bloqueado esperando la respuesta. Podrá ejecutar otros programas, y cuando el servidor responda, se advertirá a JavaScript, y podrá consultar lo que ha enviado el servidor. En sus inicios, Ajax estaba diseñado para funcionar con XML, pero en la práctica es posible hacer circular cualquier tipo de información, siempre y cuando se trate de una cadena de caracteres.

En el archivo 5_16_Ajax.html se encuentra un ejemplo que utiliza Ajax.

El interés de Ajax es poder actualizar una página HTML sin tener que cargar la página entera, sino recargando simplemente aquella información que se encuentre dentro de un div, por ejemplo, lo cual resulta mucho más rápido que recargar la página completa.

La función que permite utilizar Ajax es XMLHttpRequest. Esta función permite a JavaScript comunicarse con el servidor.

Contiene la palabra http, lo que significa que el código no funcionará salvo si se ejecuta en un servidor. De momento, todo lo que se ha codificado en el libro se almacena en el equipo cliente, y el principio de una URL en el navegador es file:// o c:// pero no http. Dicho de otro modo, hace falta http para ejecutar Ajax.

Lo más sencillo sería almacenar el ejemplo en un servidor remoto, el de su proveedor de hosting, o bien transformar su equipo en un servidor.

Para realizar la segunda solución, puede descargar WAMP (Windows Apache...