Capitulo 2 mootools y el DOM

December 26th, 2009

Tal vez este debio ser el primer capitulo de la referencia que estoy escribiendo pero bueno, el tema que manejo ahora tal vez resulte en extremo basico para aquellos grandes programadores de js, pero ni siquiero yo lo sabia hace algunos dias y tuve que aprenderlo de la forma mala.

Bueno resulta, que cuando mi navegador recibe una pagina del servidor, la carga del codigo de la pagina se carga de manera secuencial y por consiguiente todos los elementos de mi pagina como los textarea, buttons y demas tambien se cargan en memoria de forma secuencial.

Veamos este ejemplo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
	<title>Untitled</title>
 
	<!--hojas de estilo-->
	<!--scripts js-->
</head>
 
<body>
 
	<!--Elementos de mi pagina como divs,p,a ..etc -->
 
</body>
</html>

En el ejemplo anterior tendriamos que lo primero que procesa mi navegador es el doctype, despues vendria todo el contenido del sitio empezando por las hojas de estilo, el javascript, y al final la carnita de la pagina.

El orden si importa

Es por eso que el orden en que acomodo todos los elementos anteriores si importa y veamos algunos ejemplos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
<head>
	<title>Untitled</title>
         <!--Libreria mootools -->
	<script src="mootools.js" type="text/javascript">
        </script>
	<script>
		alert( $('miTexto').get('value') );
	</script>
</head>
<body>
	<input type="Text" value="hola" id="miTexto">
</body>
</html>

Y tambien es por eso que si yo pongo el codigo anterior en una pagina, NO FUNCIONA, aunque el sentido comun me diga que esta correcto, no es asi simplemente porque cuando se ejecuta el codigo Js resulta que el tag input aun no ha sido cargado en memoria pues se encuentra mas abajo dentro del codigo, el error que sucede es que no puedo referenciar un elemento del DOM que aun no se encuentra cargado en memoria.

Si modifco el codigo de la manera siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
	<title>Untitled</title>
         <!--Libreria mootools -->
	<script src="mootools.js" type="text/javascript">
        </script>
</head>
<body>
	<input type="Text" value="hola" id="miTexto">
</body>
</html>
 
<script>
	alert( $('miTexto').get('value') );
</script>

lo unico que hize fue mover el codigo js al final del documento y asi si funciona, el unico inconveniente es que este tipo de cosas resultan ser una mala practica de programacion js. Anteriormente la solucion consistia en definir el evento onload del body con una funcion de js asi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head>
	<title>Untitled</title>
         <!--Libreria mootools -->
	<script src="mootools.js" type="text/javascript">
        </script>
	<script>
		function miFuncion(){
			alert( $('miTexto').get('value'));
		}
	</script>	
</head>
<body onload="miFuncion()">
	<input type="Text" value="hola" id="miTexto">
</body>
</html>

El inconveniente de lo anterior es lo siguiente: es que el evento onload del body se ejecuta cuando todos los elementos del body han sido cargados incluyendo todas las imagenes, y tal vez yo no quisiera que mi codigo js se ejecutara solamente cuando se hayan cargado todas las imagenes.

Lo que yo quiero es que mi codigo js se ejecute lo mas pronto posible y lo mas importante que cuando se ejecute todos los elementos del DOM a los que hace referencia este disponibles. Afortunadamente mootools me provee de un evento que solo esta disponible para el objeto window.

1
2
3
4
5
6
7
8
9
10
11

window.addEvent ( 'domready', function(){
   //aqui va todo el codigo que necesito que se 
   //ejecute tan pronto  se cargue el DOM 
});
 
//una notacion alternativa es
 
function miFuncion(){
    //codigo a ejecutar
}		
window.addEvent( 'domready', miFuncion);

El evento domready del objeto window se dispara cuando los elementos del DOM estan cargados y listos en memoria para ser utilizados por mi codigo js, a diferencia del evento onload del body este evento no espera a que se complete la carga de las imagenes u otros elementos secundarios del sitio.

Y haciendolo de la forma anterior me aseguro de que todo el codigo que escriba dentro del evento domready esta utilizando de forma correcta los elementos del DOM. Tal vez lo anterior pueda parecer sencillo o inclusive trivial, en lo personal el conocimiento anterior me ha servido de mucho y para cualquiera que escriba mootools es indispensable el uso de evento domready.

Posted by admin Filed in mootools
10 Comments »

Leave a Reply