martes, abril 10, 2012

Tutorial de desarrollo web, Parte XXVII: Alert y Prompt. Variables

Bien, aquí estamos en la segunda entrega del curso de JavaScript, parte del tutorial de desarrollo web. Esta semana tenemos algo más interesante que estas dos semanas pasadas, y por fin empezaremos a ver la diferencia entre este lenguaje y los que hemos visto anteriormente. Pero antes que nada, los ejercicios de la semana pasada (sí, ¡han vuelto!).
Bien, de momento el lector no habrá encontrado demasiada utilidad a JavaScript, ya que todo lo que vimos la semana pasada podemos hacerlo sin ningún problema con HTML a secas. Sin embargo, los lenguajes de programación permiten crear unas páginas mucho más dinámicas de lo que eran hasta ahora, como veremos a partir de este número. Pero antes de empezar, quiero hablar de un par de procedimientos de JavaScript que nos serán muy útiles (y que habremos visto usados en muchas páginas).
En primer lugar es el procedimiento alert(). Este procedimiento, que al igual que el write() que vimos la semana pasada debe contener una cadena, creará una pequeña ventana (llamado "cuadro de diálogo") para darle un mensaje al usuario de forma que tenga que verlo sí o sí para seguir navegando. Para probar los "alerts" vamos a crear un nuevo documento en el que introduciremos una estructura básica de HTML y luego, en su "body" crearemos una etiqueta "script" que contendrá lo siguiente:

alert('¡Bienvenido, usuario!');

Si guardamos y abrimos la página nos encontraremos con algo como esto:

Como ya nos habrá pasado en muchas páginas, hasta que no pulsemos "Aceptar" no podremos seguir navegando. Y sólo tenemos que introducir entre comillas el texto que queremos que se muestre. ¿A que mola?
Bien, pero si os he enseñado el "alert" es para enseñaros ahora otro procedimiento muy parecido: el prompt(). Este procedimiento genera una ventana de diálogo muy parecida a la del "alert", sólo que en este caso, además de también contar con un botón "Cancelar", pedirá al usuario un valor. Por ejemplo, vamos a introducir el siguiente código (en sustituicón del "alert"):

prompt('Introduzca su nombre:');

No os preocupéis por el "checkbox" que aparece en la imagen, si no os aparece es porque no usáis Google Chrome. Sólo es una medida de seguridad de este navegador (no sé si otros navegadores la tendrán ya). El caso es que vemos como, usando un "prompt", podemos pedirle al usuario que introduzca un dato, pero, ¿qué pasa con ese dato una vez el usuario lo ha introducido? ¿Podemos acceder a él o se pierde en el limbo? Hasta ahora, se pierde en el limbo, pero para evitarlo va a entrar en juego el primero de los elementos más indispensables de la programación: las variables.
Una variable es un hueco de memoria que reservamos para guardar un dato que, en principio, no conocemos, pero que, a medida que se ejecuta nuestra aplicación, se decidirá. Aunque en JavaScript, el uso de las variables es bastante simple y permite mucha (demasiada) libertad, en vistas a posibles futuros lenguajes que usemos, estará bien que nos acostumbremos a usarlas teniendo en cuenta una serie de pasos. De este modo, para empezar a usar variables vamos a, antes de la línea del "prompt" (esto es de suma importancia, ahora veremos por qué) declarar nuestra primera variable. Vamos allá:

var nombreUsuario;

Y así de simple se declara una variable en JavaScript. La palabra reservada var indica que vamos a declarar una variable, y luego le introducimos el que será el nombre de la variable (en nuestro ejemplo, "nombreUsuario"), que puede ser cualquier cosa que queramos, sólo cumpliendo unas pocas condiciones: no puede contener espacios ni símbolos aparte del guión (-) o la barra baja (_), debe comenzar por una letra (el resto sí pueden ser números o los símbolos antes especificados) y no puede coincidir exactamente con ninguna de las palabras reservadas del lenguaje (aunque puede contenerla... por ejemplo, podemos llamar a una variable "variable", aunque contenga la palabra reservada "var").
Bien, con esto hemos creado una variable llamada "nombreUsuario" en la cual, como su nombre indica, esperamos guardar el valor del nombre del usuario que nos está introduciendo por el "prompt". Para eso, aprovechando que antes del "prompt" hemos declarado la variable, ahora podremos usarla. De este modo, modificando la línea del "prompt", deberíamos tener el siguiente código dentro de la etiqueta "script":

var nombreUsuario;
nombreUsuario = prompt('Introduzca su nombre:');

Ahora, como vemos, podemos llamar a la variable sólo por su nombre, sin poner la palabra "var" delante. De las operaciones que podemos hacer con variables, una de ellas es guardar un dato en su interior (de hecho, para eso existen las variables) y eso se hace usando el símbolo "igual".
Cabe destacar que esta operación se denomina "asignación" y que consiste en, a la variable que está antes del símbolo "igual", introducirle el valor que se encuentre después del símbolo (sea un valor definido, el valor de otra variable o el resultado de una función, como es este caso). Si lo destaco es por el hecho de que es fácil confundir esta operación con la "igualdad", ya que en muchos casos nos recordarán a ecuaciones, pero la operación de "igualdad", que también se le puede aplicar a las variables, es bastante distinta en realidad. Por eso debemos recordar: esto es una asignación, la variable de la izquierda guardará el valor de la derecha. Espero que quede claro.
Ahora con esto ya en mente, vamos a hacer uso de ese valor que hemos guardado en nombreUsuario. Como estamos viendo, JavaScript (como cualquier lenguaje) debe ir ordenado, y es por ello que primero declaramos la variable y luego le asignamos un valor. Sin embargo, entre la línea de declaración y la línea de asignación, la variable no tenía ningún valor, por lo que si entre ambas líneas intentamos acceder al valor de la variable nos encontraremos con que tiene un valor nulo. Por supuesto, si intentáramos acceder a su valor antes de que se declarara nuestro programa fallaría, ya que la variable aún no existiría. Esto es algo falso en JavaScript (como digo, este programa da demasiada libertad con respecto a la variable) pero creo que es importante que aprendamos a trabajar de este modo.
Por estos motivos, si queremos acceder al valor de la variable, hemos de intentar accederlo después de que se lo hayamos asignado (o sea, después de haber hecho el prompt). Por ejemplo, y usando la función write() que vimos la semana pasada, vamos a tener el siguiente código:


var nombreUsuario;
nombreUsuario = prompt('Introduzca su nombre:');

document.write('Bienvenido, ' + nombreUsuario);

Bien, en la primera línea declaramos la variable, en la segunda hacemos un "prompt" cuyo resultado guardamos en la variable creada previamente y, finalmente, escribimos en pantalla el texto "Bienvenido, " seguido de algo nuevo. Esta operación, de nombre "concatenación", la veremos más detenidamente cuando estudiemos las Strings, pero básicamente consiste en unir ristras de caracteres para formar una mayor (la ristra "Bienvenido, " la concatenamos a la ristra que el usuario habrá introducido en el prompt y que se habrá guardado en "nombreUsuario") y se representa por el símbolo "más" (+).
Bien, si ejecutamos este código nos encontraremos con lo siguiente:


Podemos ver cómo, al ejecutar la página, en primer lugar declara la variable "nombreUsuario" (algo que no vemos ya que no es una operación que se muestre de alguna manera por pantalla), en segundo lugar nos muestra el "prompt" pidiendo nuestro nombre. En la captura ya he introducido mi nombre, así que acepto. El programa, al aceptar, guarda lo que introduje en el "prompt" en la variable nombreUsuario así que cuando llamo a la función "write", el programa concatena las dos ristras "Bienvenido, " y el contenido de la variable "nombreUsuario" para luego mostrarlo por pantalla como una única ristra. ¿No me dirán que no es sencillo?
De esta manera empezamos a ver la auténtica magia de la programación. Hasta ahora, todas nuestras páginas habían sido completamente estáticas, mostrándose exactamente igual para cualquier usuario que se conectara en cualquier momento desde cualquier lugar. Ahora, gracias al JavaScript, podemos lograr que las páginas no sólo sean distintas depende del usuario, sino que incluso un mismo usuario puede obtener distintos resultados cada vez que entre.
A todo esto avisarles de que el "prompt" tal vez no sea la mejor herramienta de JavaScript, sobre todo porque si intentamos introducir código HTML, él lo leerá y lo ejecutará. Por ejemplo, imaginad que yo hago esto:

Como podéis ver en la foto si clickais sobre ella, estoy introduciendo el código HTML para un hiperenlace. Vimos la semana pasada que a través de la función "write" podemos introducir sin ningún tipo de problema código HTML. Entonces, si dentro de la variable "nombreUsuario" he introducido este código HTML y luego le hago un "write" a la variable, ¿qué ocurrirá? Con que pulse en aceptar lo comprobaremos:


En efecto, si expandís la imagen podréis comprobar que me ha incluido un hiperenlace. Esto significa que, a pesar de que no pueden hacer ningún daño real a la página (JavaScript es lo que se conoce un lenguaje "de cliente", o sea, que se ejecuta en el propio ordenador del usuario en vez de en el servidor, por lo que no habrá problemas de seguridad con él), si que ante un usuario inexperto que haya escrito tal vez unos símbolos < ó > por algún motivo podría ver cómo la página se descolocara completamente, y creer dicho usuario que somos nosotros quienes hemos hecho un diseño malo. Una de las leyes de la programación es que hay que estar preparado para todo lo que el usuario pueda llegar a hacer, por muy descabellado que pueda sonar. Por eso, el "prompt" lo desaconsejo completamente, pero para estos ejemplos iniciales es perfectamente válido.

Y con esto termina esta entrega del tutorial, dando el primer paso para convertirnos en programadores al conocer la herramienta más básica pero al mismo tiempo más importante de la programación (sí, hablo de las variables). Y ahora, el ejercicio de la semana:

EJERCICIO


Esta semana crearemos una pequeña aplicación web la cual, al entrar, primero nos dé la bienvenida con un cuadro de diálogo simple, para luego comenzar a pedirnos una serie de datos (nombre, edad, país de residencia, etc.) para luego mostrárnoslo en una tabla de un modo similar al siguiente:
Como consejo: podemos introducir tantas etiquetas JavaScript como queramos y en los sitios que queramos. Lo digo porque existen varias maneras de hacer esta pantalla final: os reto a hacer más de una.

Bueno, y hasta aquí acaba esta semana. Como sabéis, a partir de la semana que viene tendré todo esto menos controlado, ya que estaré en Alemania, pero tranquilos, los posts y los ejercicios están ya escritos y se irán publicando automáticamente sus correspondientes días. ¡Así que no tenéis excusa para abandonarlo!

No hay comentarios: