martes, mayo 29, 2012

Tutorial de desarrollo web, Parte XXXIV: Arrays (I)

¡Segunda semana escribiendo el tutorial desde Alemania! Sé que en estos días no estoy respetando el formato habitual ni poniendo las soluciones ni nada, pero si miráis el resto de los posts, tampoco lo estoy haciendo, todo debido a las limitaciones del ordenador que tengo aquí. Pero prometo que, desde que vuelva a tener un ordenador decente (probablemente a partir del día 16 que estoy de nuevo en España hasta nuevo aviso, y tendré el ordenador que solía usar antes), editaré estos posts y los corregiré. Pero ahora, pasemos al curso.
¿Recordáis que, hace unos cuantos números, os enseñé los "tipos de datos básicos" (también conocidos como "tipos de datos simples"? Ya sabéis: enteros, reales, booleanos y caracteres. Además, desde el comienzo hemos hablado de las ristras o strings, y ya les he comentado que es un tipo de dato no básico, aunque su uso es tan habitual que muchos programadores lo consideran así. Además, es un tipo de datos bastante simple de entender, ya que por lo general forma palabras, frases o textos, algo a lo que estamos habituados (técnicamente para el navegador, todo este post es una string, pero ustedes lo leéis como un simple texto). Ahora bien, no todos los tipos de datos complejos son tan sencillos de entender (como su nombre bien indica), así que hoy vamos a empezar a trabajar con un tipo de datos complejo usado muy frecuentemente: los llamados vectores o arrays.
Hasta ahora las variables que hemos visto contenían sólo un valor cada una. Con esto quiero decir, por ejemplo:

var entero = 1;

La variable "entero" en este código, sólo tiene el valor "1". Si a posteriori incluyéramos otra línea...

var entero = 1;
entero = entero + 3;

En la segunda línea hemos modificado el valor de "entero", o sea, que ha pasado de valer 1 a valer 4, perdiéndose tanto el 1 como el 3. Si quisiéramos haber mantenido todos los valores, deberíamos haber creado otras variables, por ejemplo:

var entero = 1;
var segundoEntero = 3;
var resultado = entero + segundoEntero;
Ahora todos, el 1, el 3 y el 4, están almacenados, pero cada uno en una variable distinta.
Sin embargo, cuando hablábamos de caracteres, encontrábamos que podíamos guardar más de un caracter en una misma variable, así:

var caracter = "a";
var caracter = caracter + "b";

Con este código, ahora en caracter tenemos guardado el valor "ab" con lo que tenemos tanto la "a" como la "b". Sin embargo, ahora la variable "caracter" ya no es de tipo char sino de tipo string. Pero recordaremos que gracias a las distintas funciones de las strings (como las substrings) podemos acceder a cada uno de los caracteres.
Por esto es que el string es considerado un tipo de dato complejo, porque en su interior no contiene uno, sino varios valores (para el ordenador, cada uno de los caracteres es un valor individual, y la string lo que hace es agruparlos). Sin embargo, debido a lo frecuente de su uso, los lenguajes de programación han dotado a este tipo de datos de un modo de tratamiento bastante simple, de modo que su uso es casi igual al de un tipo de dato básico.
Pero, ¿cómo podemos tener una variable que almacene muchos enteros, reales o booleanos? No hace falta ser muy espabilado para pensar que podríamos guardarlas en una string como si fueran caracteres, aunque, evidentemente, no es el sistema más óptimo, sobre todo cuando los enteros y reales tengan más de una cifra, con lo que podría ser bastante confuso. Aunque existirían maneras de que eso funcionara de algún modo, ¡no se estresen! Eso no hace falta, para ello tenemos los arrays, variables que pueden contener en su interior varios valores, sea cual sea su tipo.
Vamos a poner un ejemplo entre comillas realista: tenemos un juego en nuestra web en la que, a lo largo del juego, el usuario va viendo su puntuación, la cual se va almacenando en una variable "score". Al terminar la partida, el usuario puede elegir jugar otra vez (tendremos un bucle que el usuario podrá interrumpir cuando decida no jugar más) y su última puntuación debe aparecer en pantalla para que el usuario intente superarla, al tiempo que va viendo su nueva puntuación (que empezará desde 0 nuevamente). Esto simplemente se puede hacer así:

do
{
   // Instrucciones del juego

   if(nueva_partida)
   {
      var puntuacion = score;
      var score = 0;
   }
   else
   {
      break;
   }
}
while(true)

Sencillo, ¿no? Bueno, imaginemos que el usuario juega una tercera partida. En esta versión, el usuario sólo vería la puntuación de la segunda partida, mientras que perdería la puntuación de la primera. Si nos interesa que sólo se guarde la puntuación más alta, simplemente habría que usar otro if para determinar si la última puntuación es más alta que la guardada. Pero, ¿en caso de que queramos guardarlas todas? Para eso, señores y señoras, existen los arrays. De este modo, antes del do deberíamos declarar un array, de esta manera:

var puntuaciones = new Array();

Bien, ese es uno de los métodos de declarar un array en JavaScript. Hasta ahora ninguno de los tipos de datos que habíamos aprendido necesitaba ser "declarado". Como mucho declarábamos la variable, pero no necesitábamos especificarle el tipo. Ahora, con los tipos de datos complejos (exceptuando el string que, como ya he dicho, se comporta como un tipo de dato simple), necesitamos especificar qué tipo de dato será. En realidad, no se trata de una declaración, sino de una inicialización, aunque de eso hablaremos más cuando expliquemos lo que son los objetos (a pesar de que los estamos usando, es un poco complejo explicarlo aún).
Ahora JavaScript sabe que tenemos una variable llamada "puntuaciones" en la cual hay almacenado un array. Sin embargo, el array puntuaciones, de momento, está vacío. Existen varios modos de introducir datos en un array. De momento, dentro del if interno, sustituiremos las dos líneas de código por estas siguientes:

puntuaciones[puntuaciones.length] = score;
score = 0;

¿Eh? ¿Qué ha ocurrido ahí? ¿Qué es eso? ¡Tranquilos, que no cunda el pánico! Es bastante más fácil de lo que parece.
Tal vez me he adelantado al colocar la propiedad length tan pronto. Vamos primero a saber simplemente cómo incluir datos en un array, saliéndonos fuera del ejemplo que teníamos hasta el momento. Veamos aquí este pequeño código:

var vector = new Array();
vector[0] = 3;
vector[1] = 5.2;
vector[2] = "casa";
vector[3] = 7;
vector[4] = true;

Sí, sé que sigue siendo bastante confuso, pero es algo más sencillo que lo anterior. ¿Podéis deducir lo que ha ocurrido aquí? ¿No? Bueno, tranquilos, para eso estamos aquí, yo para enseñar y ustedes para aprender, así que vamos a ver lo que es.
Como vimos antes, en la primera línea he especificado a JavaScript que en la variable "vector" se almacenará un nuevo array. Tal como explicamos antes, el nuevo array está ahora vacío hasta nuevo aviso, así que luego nos disponemos a llenarlo. Los arrays se componen de posiciones y estas posiciones se pueden llamar incluyendo un número entre corchetes justo después del nombre de la variable. De este modo, vector[0] es la primera posición del array "vector" (al igual que ocurría con los strings, la primera posición de un array es siempre la posición 0).
De este modo, en este código hemos asignado a cada una de las primeras 5 posiciones un valor, alternando entre enteros, reales, strings, booleanos... Realmente podemos incluir cualquier tipo de dato en una de las posiciones de un array, y el hecho de que el JavaScript sea un lenguaje no tipado permite incluso que en un mismo array hayan datos de distintos tipos (como es el caso de este array).
De todos modos, recomiendo en cada array sólo incluir siempre datos de un mismo tipo, no por riesgo de error sino por orden y facilidad a la hora de trabajar con nuestro propio código. En el futuro veremos maneras de usar tipos de datos complejos que almacenen datos de distintos tipos sin riesgo de darnos problemas.
Antes de continuar con nuestro ejemplo anterior, quiero enseñarles otros dos modos de crear un array, esta vez inicializándolo e introduciéndole datos en una misma línea.

var vector = new Array(3, 5.2, "casa", 7, true);

Como véis, esta manera de crear un array se parece a la que hicimos anteriormente, lo que al mismo tiempo que indicamos al navegador que "vector" va a ser un array, introducimos en el array los 5 datos separados por comas.

var vector = [3, 5.2, "casa", 7, true];

Esta peculiar manera es una pequeña ventaja que JavaScript da a los arrays debido a su frecuente uso, igual que ocurría con los strings. De este modo, como vemos, no tenemos que especificar que "vector" es un array, sino que con el dato que se le introduce, el lenguaje ya sabe que será un array. Por el resto, funciona exactamente igual que la anterior manera. Y, personalmente, no suelo usarla, no por ningun problema sino porque, como iremos viendo, no se parece a ninguna otra de las sintaxis del lenguaje, y se suele quedar en el olvido. Pero por mencionarla que no sea.
Bien, ahora que empezamos a ver de qué va esto de los arrays, volvamos a la línea de antes.

 puntuaciones[puntuaciones.length] = score;

Si recordáis los strings, recordaréis una propiedad de estos llamada length, que indicaba el número de caracteres que tenía el string. Pues los arrays tienen una propiedad casi idéntica, que devuelve el número de posiciones que tiene el array. Y, al igual que ocurría con los strings, al ser el primer índice (o posición) del array el número 0, la última posición del array se descubre con un puntuaciones.length - 1. Por eso, si en lugar de un número, entre los corchetes introducimos puntuaciones.length, se referirá a una nueva posición en el array. ¿Cómo funciona esto? Veámoslo un poco más gráfico:

Cuando el array esté recién creado, su length será 0 (no tiene ninguna posición). De este modo:
puntuaciones[puntuaciones.length] = score;
Sería lo mismo que escribir:
puntuaciones[0] = score;
Y tal como hemos visto, la posición 0 es la primera posición del array.

Ahora el array tiene un dato en su interior (en el índice 0). Así que:
puntuaciones[puntuaciones.length] = score;
Es lo mismo que:
puntuaciones[1] = score;
Y, como en ese índice no hay nada almacenado (ya que la única posición del array con un valor es la posición 0), se crearía un nuevo índice, por lo que el length del array será ahora de 2.

Y así sucesivamente.

Y, por hoy, eso es todo. La semana que viene veremos otras operaciones con arrays que nos podrán ser útiles. Pero ahora, ¡el ejercicio de la semana!

EJERCICIO

Esta semana crearemos una aplicación que vaya pidiendo al usuario una serie de números y los vaya almacenando en un array hasta que el usuario escriba "0". En este momento, la aplicación debe parar y mostrar por pantalla todos los números introducidos seguidos de un salto de línea.

El ejercicio es bastante simple, aunque cierta parte va a necesitar que uséis un poco la cabeza. ¡Suerte con ello y hasta la semana que viene!

1 comentario:

Federico Fassio dijo...

Muy buen aporte. Los diseñadores web poseen muchas posibilidades de trabajo actualmente por lo que capacitarse en esta área puede ser de mucha utilidad.