Este artículo intenta marcar un antes y un después en el blog tuarroba. Espero poder pasar a contenidos más didactidos, prácticos y de opinión; en lugar de todo noticias como hasta ahora.

He pensado en estranarlo con un pequeño tutorial de javascript, y tan pequeño que es. Con códigos como este, además de otros, horas de práctica y búsqueda por google es como he creado scripts como el Color Nick, Formularios+ e Imágenes+ de miarroba.

Lo más básico es el document.getElementById
Prácticamente cualquier elemento, tag, etiqueta o como queráis llamarlo, admite insertar el atributo id="algo". Con ese atributo, podremos identificar fácilmente. Una vez identificado el objeto podremos mostrar sus propiedades o incluso modificarlas.

Yo, para el ejemplo, voy a usar una imagen.

En primer lugar, en nuestra página tenemos el código de una imagen, como esta:
<img src="neodiario.png" width="16" height="16" id="i_text" border="0" />

Fijaros en que he marcado el id="i_text".
Después tendremos un código en javascript que seleccionará ese elemento:

<script type="text/javascript">
elemento = document.getElementById("i_text");
</script>

Con eso tenemos ya seleccionado el objeto, pero, ¿cómo podemos mostrar su información?

Es sencillo, exite un método sencillo y un método, para mi gusto, más correcto. El sencillo, por ejemplo sería para coger el atributo width elemento.width . Mientras que con el complejo nos quedaría elemento.getAttribute("width"); . Como veis es más largo, pero mucho mejor.


Paso a poner un código de ejemplo:

<script type="text/javascript">
elemento = document.getElementById("i_text");
width = elemento.getAttribute("width");
height= elemento.getAttribute("height");
border= elemento.getAttribute("border");

document.write("Ancho: "+width+"<br />Alto: "+height+"<br />Borde: "+border);
</script>

Si os fijáis todo tiene esta estructura:
variable = elemento.getAttribute("nombre");
Con esto definimos que la variable, con el nombre que le pongamos, valga el valor del elemento que hemos seleccionado (getElementById) para el atributo "nombre". Por ejemplo, en el primer caso la variable width valdrá 16. Ya que en el código de la imagen el atributo width es 16.


Es todo por ahora, otro día os enseñaré a manipular los elementos cambiando los atributos o similares. Si hacéis pruebas podéis comentar los resultados aquí o preguntar algunas dudas, estaré encantado de responder.


Para acabar os dejo un enlace con algunas funciones del estilo, bastante interesantes. http://getelementsby.com/
Ahí tendréis algunas opciones extra además del getElementById que os he mostrado.


Si te ha parecido interesante, no olvides compartirlo.
¿Qué te ha parecido? ¿Te ha servido de algo? - Comenta el artículo y danos tu opinión.