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!

Desentrañando... la Visión

Ultron, un robot creado por el superhéroe Chaqueta Amarilla que se rebeló contra él convirtiéndose en un temible enemigo de los Vengadores, en uno de sus intentos de acabar con su creador, fabricó lo que llamaba un "sintetizoide", usando los restos del androide conocido como la Antorcha Humana original e introduciéndole los patrones cerebrales del héroe Wonder Man. Sin embargo, esto último sería el error del robot, ya que su sintetizoide, que adoptó el nombre de la Visión, decidió unirse a los Vengadores, mimetizando a su creador al rebelarse también contra él. Sin embargo, esto no ha evitado que en ocasiones, Ultron haya conseguido controlar a su creación.

Miembro bastante importante del equipo de los Héroes Más Poderosos del Mundo, la Visión comenzó una relación sentimental con la Bruja Escarlata e incluso llegaron a tener dos hijos, Thomas y William, gracias a los poderes de la mutante. Desgraciadamente, ambos niños eran realmente fragmentos del demonio Mefisto, y después de que los niños fueran absorbidos de nuevo por el demonio, la hija de Magneto enloqueció, llegando incluso a asesinar en su locura a compañeros de su equipo.

En distintas ocasiones, además, la Visión ha sido destruida y, al ser reconstruida, ha perdido sus patrones cerebrales, y un resurrecto Wonder Man se ha negado a que sus patrones fueran usados de nuevo en su reconstrucción, de modo que en ocasiones, la Visión ha sido un androide frío y sin sentimientos, o ha tenido otros patrones cerebrales. Sin embargo, siempre, de algún modo, los patrones de Wonder Man resurgen de su interior, volviendo a ser el mismo.

The CubesPaper, Numero XXX (27/05/2012)

¡Hola a todos! Esta semana sí he revisado muchas más noticias, pero desgraciadamente, poco que valga la pena he encontrado. De todos modos, ahí va lo que he podido rescatar:

Shigeru Miyamoto gana un premio Príncipe de Asturias
El creador de Super Mario ha sido galardonado con dicho prestigioso premio.

Más información: Alt1040


Llegan  los "primeros X-Men"
A partir de agosto se publicará una miniserie de 5 números con dicha temática.
Más información: ComicBookResources

Actores confirmados para "Iron Man 3"
Jon Favreau regresa, al menos como actor, y también se le unen Ashley Hamilton y Wiliam Sadler.
Más información: ComicsAlliance


Serie de televisión de "El Exorcista"
Constará de 10 episodios y servirá como precuela de la película.
Más información: Alt1040

Un Cubo en Alemania, Semana VII

¡Hola en esta séptima entrega de "Un Cubo en Alemania"! Otra semana más vengo a contarles cómo me va por estas tierras germanas y así darles un poco de envidia (y si eso, animarles a que se vengan).
Últimamente, entre semana estoy haciendo bastante poco, la verdad. El hecho de que tarde una hora para ir y otra para volver del trabajo hace que llegue un poco cansado, y sobre todo ahora que se han estropeado los railes de una de las líneas que suelo coger, por lo que he tenido que estar haciendo un recorrido bastante más largo durante toda la semana. Curiosamente, eso me sirvió para ver sitios bastante curiosos de la ciudad en lo que trataba de encontrar el camino. Eso sí, ¡no me pregunten por dónde era!
Asi que esta semana, turismo bastante poco, sin embargo, puedo hablarles de los dos nuevos locales a los que he ido: el "Green Mango" y el "K17". El primero, al que fuí el sábado pasado tal como anuncié, es un karaoke en el que la verdad me divertí bastante, entre otras cosas porque soy aficionado de esta clase de locales. El otro, del que había leído bastantes veces pero hasta anoche no me había animado a ir, es un curioso complejo formado por dos edificios y dos terrazas, estas últimas con unas barbacoas. En uno de los edificios se celebran conciertos y el otro consta de 4 salas cada una en un piso (aunque la tercera y cuarta están en el mismo) con distintos ambientes de música rock, metal y electrónica (que además, varían depende de día). Bastante interesante.
Y, además, desde ayer hasta el lunes se celebra en Berlín el "Carnaval de las Culturas", un evento bastante lejos a lo que conocemos como "Carnaval" en España, sino que se trata de una serie de espectáculos mostrando distintos tipos de culturas de distintas partes del mundo (algo parecido al W.O.M.A.D. del que hablé hace unos meses por aquí). Ayer, por el cansancio, no pude asistir, pero hoy, que estoy escribiendo esta entrada por la mañana, después de comer iré a verlo, así que la semana que viene les contaré qué tal.
Y esta noche, de vuelta al "Green Mango". A seguir torturando los oídos de los alemanes.

(Reseña de juego) Theme Hospital

Después del éxito obtenido con su popular juego Theme Park, Bullfrog se animó a crear una serie de juegos de simulación empresarial en la misma línea que el anterior, siendo, sin duda, su mayor éxito el popular Theme Hospital, en el que el jugador debía de ponerse al frente de la gerencia de un hospital (o más bien, varios hospitales, aunque sólo uno cada vez).

Al comenzar cada nivel nos encontramos con un edificio vacío que tenemos que equipar con consultas de varios tipos y servicios para pacientes y médicos. De esta forma tendremos que colocar lavabos, asientos, calefacción, máquinas dispensadoras, etcétera. Todo para que nuestros pacientes y trabajadores se encuentren más cómodos (salvo por la recepcionista, que no se moverá en la vida de su puesto).

Ante nosotros se abrirá toda una gama de enfermedades de lo más absurdo, desde la Invisibilitis o la Lengua Caída, pasando por el Síndrome del Rey o el Peludismo, algunas de las cuales tienen una cura aún más absurda que la propia enfermedad, haciendo que nos despierte más de una sonrisa cuando las vamos encontrando.

En los primeros niveles, el juego es bastante básico: crear el hospital con aquellas instalaciones que nos permiten en un comienzo y mantenerlo financieramente estable. A medida que van avanzando los niveles, nuevas posibilidades se van abriendo ante nosotros gracias a las salas de investigación o de formación de médicos. Además, nuevos retos como la llegada de emergencias o terremotos que sacudan el hospital nos van poniendo cada vez más a prueba.

Por suerte, el juego va progresando y sumando nuevas opciones a un ritmo bastante bueno para ir adaptándonos poco a poco. Desgraciadamente, como suele ocurrir con la mayoría de los juegos de este tipo, hay puntos muy muertos en los que no sabemos qué hacer ya que tenemos que esperar a que nuestra economía mejore o a que nuestro departamento de investigación haga un descubrimiento. Pero, por lo general, mantiene mucha diversión.

Definitivamente, un juego que marcó época porque se lo merecía, divertido pero con bastantes retos para mantenernos pegados durante unas cuantas horas intentando sacar a flote nuestro hospital.

(Reseña de cine) El Mundo Perdido: Parque Jurásico II

Tras el éxito que supuso la adaptación al cine de la novela Jurassic Park, Michael Crichton se animó a escribir una secuela, la cual además adaptaba la popular novela The Lost World de Arthur Conan Doyle al universo de ciencia-ficción de la primera novela, por lo cual Crichton tomó prestado el nombre de la obra antes mencionada. Steven Spielberg, director de la primera película y uno de los principales culpables de que se escribiera esta secuela, dirigió también esta segunda parte.

Ian Malcolm es convocado por John Hammond una vez más, esta vez para que le ayude a preservar a los animales que aún sobreviven en isla Sorna, la Zona-B de Jurassic Park, ante la tentativa de su sobrino, Peter Ludlow, de explotarlos una vez más. Aunque en un principio Malcolm es reacio a volver a poner los pies en una isla en la que hayan dinosaurios, el saber que su actual novia, Sarah Harding, ya ha partido para allá, le hace cambiar de parecer, pero al llegar se encuentra con que Ludlow ya ha puesto en marcha sus ideas.

Esta segunda película es bastante más floja que la primera, como suele ocurrir con muchas secuelas. De por sí, el guión es mucho más libre que en la primera película, donde a pesar de cambiar algunos segmentos e ignorar alguna de las tramas, seguía el mismo concepto. Sin embargo, en este caso no, y curiosamente, en esta película toman un par de elementos de la primera novela que no se incluyeron (de por sí, la escena inicial es sacada directamente de la primera novela). Los diálogos no son especialmente brillantes, la película es bastante atropellada y, llegado a un punto, se convierte en una sucesión de ataques de dinosaurios que no parece dejar un respiro a los protagonistas y que en muchos casos no aporta nada al desarrollo de la trama más que la muerte de algún personaje secundario. Lejos están esas escenas de calma sobre las copas de los árboles viendo comer a los braquiosaurios que te relajaban antes de la siguiente escena de acción, o esas conversaciones en el centro de visitantes preguntándose qué pueden hacer a continuación, esa película es simple y llanamente acción seguida de acción. Hasta los estegosaurios son violentos.

Aunque no hay mal que por bien no venga, ya que la acción por general es muy buena, y ver las escenas de acción por separado (verlas seguidas acaba saturando) es una experiencia genial. Sobre todo la escena de la caravana, en mi opinión una de las mejores escenas de la saga (aunque la primera escena del T-Rex y la de los raptores en la cocina de la primera película no se quedan muy atrás).

Y por esta escena recuerdo una muerte en particular que ocurre en esta escena, probablemente la muerte que más pena me ha dado en toda la saga, y he de mencionar que es realmente el único personaje "importante" que muere en esta película. Todos los demás son carne de cañón, incluso el último personaje en morir, que sí es importante, muere en la escena final, cuando ya no quedan ni cinco minutos de película.

Los efectos especiales, sorprendentemente, son peores que los de la primera película. El ordenador canta bastante más, en algún momento se nota el fondo verde, e incluso en un momento se nota perfectamente que un triceratops es sólo un ariete.

Respecto a las actuaciones, los únicos destacables son de nuevo Jeff Goldblum como Malcolm, Vince Vaugh como Nick Van Owen y Richard Schiff como Eddie Carr, y tal vez podamos salvar a Pete Postlethwaite como Roland Tembo o incluso a Arliss Howard como Peter Ludlow (aunque su papel es patético). Por el resto, ni Julianne More interpretando a Sarah Harding se salva de tener unas actuaciones entre mediocres y pobres.

Finalmente, hay que mencionar, por descontado, el fragmento final de la película. Sólo se me ocurre una palabra: ¿qué? O sea, sí, es un concepto muy divertido y todo lo que quieras, pero es un momento que básicamente ni siquiera sabes cómo enfocarlo. Al mismo tiempo es cómico y dramático, y no termina de convencer de ninguna de las dos maneras. Aunque, curiosamente, hay que reconocer que "adapta" una parte de la novela de Conan Doyle que Crichton no adaptó en su novela (aunque Conan Doyle usó un pterodáctilo, no un T-Rex...).

Concluyendo, una película entretenida, con muy buena acción pero que falla en muchos otros aspectos, por lo que queda muy lejos de su predecesora.

(Reseña de cómic) The Ultimates, Vol.2

Tras el exitoso primer volumen de la serie The Ultimates, que mostraba una nueva versión de los Vengadores de Marvel, Mark Millar y Bryan Hitch siguieron trabajando juntos durante trece números más para traernos el volumen 2 de la misma serie desde 2005 a 2007.

Ha pasado un año desde que los Ultimates acabaran con la invasión Chitauri y están empezando a realizar misiones de seguridad nacional como liberar a presos políticos en el extranjero y similares, lo que provoca que Thor, en esta nueva versión muy anti-imperialista, abandone el equipo y empiece una campaña en contra de lo que hacen los héroes. Poco a poco, todos los miembros del equipo empiezan a ser sacados de escena de distintas maneras, y Thor intenta avisar de que es su hermanastro Loki, que se ha liberado de la Habitación Sin Puertas, pero nadie cree en los "desvaríos" del supuesto dios nórdico...

Este segundo volumen es, muy posiblemente, mejor que el primero. A diferencia del anterior, tiene un sólo arco argumental bastante largo, pero que no llega a ser aburrido aunque es cierto que se podría haber acortado y que algunas cosas sobran un poco (la versión Ultimate de los Defensores, sobre todo...). Pero en general, la  historia es muy buena y hay una buena cantidad de sorpresas y de giros de argumentos interesantes, además de dejar bastante a la imaginación del lector cuestiones sobre los personajes, muchas de ellas sin responderlas al final para que podamos hacernos nuestra propia opinión sobre cada uno (sobre todo respecto a Hank Pym y la forma de actuar a lo largo de los trece números en distintas ocasiones).

Bryan Hitch sigue en su misma línea de dibujo aunque se nota que para este segundo volumen le metieron más prisa, de modo que se le notan más errores, pero realmente no puedo decir nada nuevo sobre lo espectacular que es este autor y lo compatible que es con el guionista que comparte. Anque, por uspuesto, hay que destacar la viñeta a ocho páginas del número trece en el que podemos ver a la mayoría de los héroes junto a los héroes de Asgard luchando contra los ejércitos de Loki.

Una historia estupenda que nos dejó un muy buen sabor de boca a la partida de estos dos autores. Lástima que cuando regresaran ninguno de los dos nos pudiera mostrar algo tan grande como estos dos volúmenes.