martes, julio 17, 2012

Tutorial de desarrollo web, Parte XLI: Llamada a elementos HTML (I)

Bien, como hoy he estado enfermo no he tenido tiempo de escribir mucho, pero al menos voy a intentar dejaros algo nuevo que ir mirando.
Recordaréis que, cuando vimos los identificadores de HTML, dije que serían muy útiles para distintas cosas. Además de haberlos podido referenciar mediante los enlaces de HTML y las instrucciones de CSS, en JavaScript también nos van a ser muy útiles estos identificadores, y eso es gracias a la función getElementById.
Esta función, como su nombre indica, nos llama a un elemento HTML en concreto, aprovechando que las "id" son únicas, y de esta forma podemos trabajar con dicho elemento. Por ejemplo, imaginemos que tenemos la siguiente etiqueta HTML.

<input type="text" id="username" />
<button>Mostrar nombre</button>

Bien, estaría bastante bien que, al pulsar en el botón que hemos creado, apareciera un "alert" con el contenido del "input". Sin embargo, eso, de momento, no sabemos hacerlo. Pero hoy aprenderemos. Para lograrlo vamos a crear la siguiente función:

function mostrarNombre()
{
alert(document.getElementById("username").value);
}

"¿Qué has hecho ahí?" me preguntaréis. Bueno, vamos por partes, antes que nada, incluyamos en el "button" el siguiiente atributo de evento:

<button onclick="mostrarNombre()">

Y, de momento, podemos ir comprobando que funciona. Pero, ¿cómo funciona?
Esto es bastante simple. Supongo que el crear una función nueva o el "alert" no será nada extraño para nadie a estas alturas, así que nos concentraremos en el contenido del "alert":
  • En primer lugar llamamos al objeto "document", ¿lo recordáis? Sí, era al que llamábamos a la hora de mostrar algún texto en pantalla (document.write("Hola mundo");). Lo cierto es que el objeto "document" (ya hablaremos más adelante de lo que son exactamente los "objetos") representa al archivo HTML entero, así que contiene todo tipo de funciones referentes al documento, la ya tan manida "write" es sólo un ejemplo, y en este tema estamos viendo otra.
  • Esta es la parte más importante, la función "getElementById". Como veis, es una función de "document" que nos devolverá un elemento HTML en concreto, aquel que tenga la "id" que se mencione (o el primero que encuentre, en caso de que haya más de una, aunque si hay más de una significa que vuestro código HTML es incorrecto). Entre los paréntesis tenemos que incluirle la String del nombre del identificador.
  • El "getElementById" en realidad nos devuelve el elemento en cuestión completo, por lo que, si lo que queremos mostrar es el valor dado al "input" en este caso, podemos llamar al atributo "value". Sólo aquellos elementos HTML que tengan atributo "value" lo tendrán también en JavaScript, y eso mismo ocurre con cualquiera de los otros atributos HTML (o la mayoría, no los he comprobado todos).
De este modo, mediante esa función le estamos pidiendo que nos muestre en un "alert" el valor del elemento con identificador "username".
Si hemos incluido lo antes escrito en un "form" nos daremos cuenta de que la página se recarga tras pulsar el botón. Existen formas de prevenir esto, pero de momento les recomiendo quitar el "form" para que no les recargue la página, ya que para evitar eso deberíamos trabajar con el evento "onsubmit" (una pista, normalmente si el evento "onsubmit" recibe un valor booleano "false", no recarga la página... pero ya lo veremos más detenidamente otro día).
Como les digo, lo lamento mucho por el post corto de esta semana, pero, en serio, estoy febril hoy y no me concentro muy bien, así que poco les puedo explicar, pero algo tenía que dejarles, así que, de paso, les dejo un ejercicio bastante sencillo.

EJERCICIO

Esta semana el ejercicio consistirá en crear dos cuadros de texto y un botón, y hacer que, al pulsar en el botón, el texto de ambos cuadros de texto se intercambie. Este es, en realidad, otro ejercicio clásico, que es un poco (muy poco) más difícil de lo que parece a simple vista.

Y eso, lamentándolo una vez más, me despido por hoy. ¡Hasta la semana que viene (los que sólo sigáis este cursillo)!

No hay comentarios: