martes, junio 05, 2012

Tutorial de desarrollo web, Parte XXXV: Arrays (II)

¡Hola a todos! Estamos otra semana más aquí escribiendo desde la capital germana y esta semana nos toca seguir trabajando con esos pequeños extraños que conocimos la semana pasada: los arrays.
La semana pasada vimos cómo en un array podíamos almacenar múltiples valores en una sola variable, a diferencia de lo que ocurría con las variables anteriores, en las cuales sólo podíamos tener un valor por variable. Por supuesto, los valores de un array pueden sumarse, restarse, concatenarse, compararse... Todas las operaciones que conocíamos para cada uno de los tipos de variables también valen para los valores de un array, de modo que si escribimos, por ejemplo:

var vector = new Array();
vector[0] = 1;
vector[1] = 3;
vector[2] = vector[0] + vector[1];
document.write(vector[2]);

Por pantalla veríamos aparecer un bonito 4, ya que en la posición 2 de la variable "vector" hemos guardado la suma de los valores de la posición 0 (1) y la posición 1 (3), y luego le hemos pedido que escriba dicho valor.
Claro, todas estas operaciones son las operaciones que ya conocíamos y la estamos aplicando a los tipos de variables que ya conocíamos, ya que, al fin y al cabo, aunque "vector" sea un array, "vector[0]" es un entero (un entero almacenado dentro de un array, pero un entero al fin y al cabo), y por ello podemos hacer estas operaciones. Pero, ¿existen operaciones específicas para arrays? ¡Por supuesto que sí!
Al igual que ocurría con las Strings, las operaciones de arrays son funciones, al ser ambos variables complejas. Siendo un poco más precisos, sus operaciones son llamadas "métodos", pero de eso hablaremos cuando entremos a aprender exactamente lo que son los objetos. Lo que es cierto es que a partir de ahora las operaciones no serán tan simples como sumar con un "+" o comparar con un "==", sino que nos encontraremos funciones como la de la substring (string.substring(4, 7);) o el charAt (string.charAt(9);). Veamos las funciones más útiles que tienen los arrays.
  • La primera función que vamos a aprender es el "push", una operación que incluye un nuevo elemento en un array, algo muy útil si no sabemos cuántos elementos tiene nuestro array y no queremos que se ponga en una posición cualquiera, sino en la siguiente posición disponible. Para ello, entre los paréntesis de la función le incluiremos el valor que queremos que se introduzca a continuación. Por ejemplo:
  • vector.push(5)
  • Añadiendo este código al anterior, ahora la variable "vector" tendría una posición 3 con valor "5". Pero no es lo único que push puede hacer por nosotros ya que si hubiéramos incluido esto:
  • tamanyoVector = vector.push(5);
  • Ahora en "tamanyoVector" tenemos el número "4", que es la cantidad de posiciones que tiene el vector, lo que viene siendo lo mismo que la propiedad length que ya vimos la semana pasada (y, anteriormente, cuando vimos los strings). Recordarles que el length siempre será uno mayor que el número de posiciones, ya que las posiciones empiezan en el número 0 y, por lo tanto, un array de length 4 tendrá posiciones desde la 0 hasta la 3.
  • Por otro lado, la función "unshift" funciona exactamente del mismo modo, pero introduciendo los elementos al comienzo del array en lugar de al final.
  • El length no es la única característica de los strings que también poseen los arrays. De hecho, las dos funciones "indexOf" y "lastIndexOf" también existen para arrays, y, de hecho, funcionan del mismo modo, así que recomendaría repasarse los apuntes de strings.
  • Una de las funciones que más nos encontraremos en la mayoría de los tipos de datos complejos es la "toString", la cual siempre devolverá una string con los datos de la variable que tengamos, formateado de algún modo predefinido. Así que, por ejemplo, el array anterior:
  • document.write(vector.toString());
  • Provocaría el siguiente resultado:
  • 1,3,4,5
  • Sí, podemos incluir cosas en un array, pero resulta que yo quiero borrar algo, ¿puedo? Sí, aunque es algo complejo en JavaScript. Pero las funciones "shift" y "pop" nos permitirán deshacernos del primer y último elemento de un array respectivamente. Y no sólo eso, sino que nos entregan dicho elemento para poder trabajar con él. Por ejemplo:
  • var ultimoElemento = vector.pop()
    Ahora la variable "vector" no tendrá el 5 final, pero ese 5 estará almacenado en "ultimoElemento". La función shift funciona del mismo modo, pero con el primer elemento.
  • La última función que vamos a ver esta semana es la función "reverse", que, como podrán imaginarse, devuelve el mismo array, pero al revés. De este modo, el siguiente código:
  • var vectorInverso = vector.reverse();
  • document.write(vectorInverso.toString());
  • Dará el siguiente resultado por pantalla:
  • 4,3,1
Y, por esta semana, eso es todo. Existen algunas funciones más de arrays, pero enseñarlas todas del golpe es demasiado, y aquí tenéis material de sobra para ir trabajando. La semana que viene acabaremos con ellas (mi última semana en Alemania de momento, todo sea dicho). Así que ahora, ¡pasemos al ejercicio!

EJERCICIO 1

Esta semana vamos a crear un pequeño juego en el que el usuario debe ir, a través de prompt, adivinando una serie de números pre-establecidos. Cada vez que falle se le dará una pista de si el número a adivinar es mayor o menor que el introducido y, una vez lo adivine, saltará al siguiente número, ya que el actual se eliminará. Intentar usar la mayor cantidad de funciones posible.

EJERCICIO 2

Una posible variante es tener un array de palabras y retar al usuario a intentar descubrir, tras decirle una palabra, descubrir en qué posición del array está.

Y, por ahora, esto es todo. La semana que viene terminamos de explicar las funciones de los arrays y, para la siguiente, ya estaré de vuelta a España y empezaré a poder dejarles correcciones de ejercicios. ¡Hasta entonces!

No hay comentarios: