[JavaScript] 9 clase: El DOM del Javascript. Y( Eventos.)

ANTRAX · Febrero 24, 2010, 11:07:48 AM

En la clase anterior establecimos las bases del POO.

1.1 Que significa el DOM?

Dom significa Document Object Model (Modelo de Objetos de Documentos).
Vamos a establecer las bases del Dom de JavaScript .

2.1 Jerarquia de Objetos

Los objetos de Javascript estan organizados de manera que , a primera vista puede parecer un poco compleja, pero es sumamente eficiente. El aspecto del que vamos a ocuparnos por ahora es la jerarquia de dicha organizacion. En efecto, existen objetos de mayor nivel que otros, en funcion de su ambito. El objeto de mas alto nivel jerarquico que vamos a manejar en JavaScript es window. Este objeto representa a la ventana en la que esta abierto el navegador y cargada una pagina. Es el objeto mas importante que contiene a todos los demas. En efecto el objeto document representa como ya sabemos al documento activo (la paina que se este ejecutando en cada momento).Tecnicamente se dice que el objeto document es propiedad del objeto window. Como es tan alto el nivel, tecleen window.document.bgColor sera igual q document.bgColor.
No se preocupen si no entienden esto muy bien, ya se iran familiarizando.

3.1 Abreviando Codigos. (Funcion with()).

Cuando tenemos varias lineas que se refieren a un mismo objeto, podemos usar la funcion with para facilitarnos el trabajo.

Por ejemplo:

Código: html5

<html>

   <head>

      <title>

         P&aacute;gina con Javascript.

      </title>

      <script language="javascript">

         <!--

         document.write ("<b>Esto es negrita.</b><br>");

         document.write ("<i>Esto es cursiva.</i><br>");

         document.write ("<u>Esto es subrayado.</u><br>");

         document.write ("<h1>Esto es grande.</h1>");

         document.write ("<h6>Esto es pequeño.</h6>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         document.write ("Esto es cualquier texto.<br>");

         //-->

      </script>

   </head>

   <body>

   </body>

</html>

Tecnicamente no tiene ningun secreto, tan solo hemos incluido una serie de instrucciones que se refieren al objeto document. Cuando tenemos varias lineas de Codigo que se refieren a propiedades o metodos de un mismo objeto, podemos evitar escribir cada vez el nombre de dicho objeto usanto en su lugar la funcion with(), con el nombre del objeto entre el parentersis.

Miren este script, resumiendo lo anterior, con la funcion with:

Código: html5

<html>

   <head>

      <title>

         P&aacute;gina con Javascript.

      </title>

      <script language="javascript">

         <!--

         with (document)

         {

            write ("<b>Esto es negrita.</b><br>");

            write ("<i>Esto es cursiva.</i><br>");

            write ("<u>Esto es subrayado.</u><br>");

            write ("<h1>Esto es grande.</h1>");

            write ("<h6>Esto es pequeño.</h6>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

            write ("Esto es cualquier texto.<br>");

       }

         //-->

      </script>

   </head>

   <body>

   </body>

</html>

Ambos codigos hacen lo mismo y funcionan igualito. Sin embargo el 1 ocupa 1,64kb y el otro 1,54 no es grandiferencia pero a la hora de hacer un script masomenos grandesito nos pesa mucho menos y se nos tarda menos la pagina en cargar.

4.1 Eventos Fundamentales de JavaScript

El Evento onLoad

Este es un evento q se dispara cuando la pagin se ha cargado totalmente en el navegador del cliente.

ejemplo:

Código: html5

<html>

   <head>

      <title>

         P&aacute;gina con Javascript.

      </title>

   </head>

   <body onLoad = "alert ('La página ya se ha cargado');">

      <h1>

         Esta p&aacute;gina es muy peque&ntilde;a

         <br>

         Y no necesita este evento.

      </h1>

   </body>

</html>

Vea que se carga todo el contenido en este caso solo un par de lineas de textoy luego sale un cuadro de aviso, observe que asociamos el evento onLoad, al objeto document (el tag body para entendernos).
Este evento no tiene mucho uso para las paginas q pesan poco, pero para las paginas q pesan mucho, si.Porque tardarian mucho en cargarse..y estaria bien q el usuario supiera cuando se ha terminado de cargar la pagina.

El Evento onMouseOver

Este evento permite detectar cuando se apoya el puntero del raton sobre un objeto determinado de la pagina(texto, imagen...).

Código: html5

<html>

   <head>

      <title>

         P&aacute;gina con Javascript.

      </title>

   </head>

   <body>

      <h1 onMouseOver = "alert ('El puntero se ha apoyado en el texto');">

         Este texto detecta cuándo se apoya el puntero.

      </h1>

      <br><br><br><br>

      <h1>

         En cambio, este texto no detecta nada.

      </h1>

   </body>

</html>

Si apoya el puntero en la parte inferior, o en cualquiero otra parte de la pagina no sucede nada en especial, pero si apora sobre la linea de texto superior, se le muestra un cuadro de aviso.
Bien creo q esto quedo clarissa.

El evento onMouseOut

Este evento actua al contrario que el anterior detectanto cuando el puntero se separa del objeto al que esta asociado.

Exampl3:

Código: html5

<html>

   <head>

      <title>

         P&aacute;gina con Javascript.

      </title>

   </head>

   <body>

      <h1 onMouseOut = "alert ('El puntero se ha quitado del texto');">

         Este texto detecta cuándo se quita el puntero.

      </h1>

      <br><br><br><br>

      <h1>

         En cambio, este texto no detecta nada.

      </h1>

   </body>

</html>

El evento onUnload

Este evento se dispara cuando el usuario abandona la pagina que esta cargada en ese momento, tanto si va a otra pagina como si cierra el navegador. Se puede emplear, mm por ejemplo, un saludo diciendonos vuelve a visitarnos.

Código: html5

<html>

   <head>

      <title>

         P&aacute;gina con Javascript.

      </title>

   </head>

   <body onUnload = "alert ('Vuelva a visitarnos pronto.');">

      <h1>

         Cierre ahora el navegador.

      </h1>

   </body>

</html>

Esto ta bien facil..

By N3xtdoor

[JavaScript] 9 clase: El DOM del Javascript. Y( Eventos.)

ANTRAX

Febrero 24, 2010, 11:07:48 AM Ultima modificación: Abril 18, 2014, 11:15:52 AM por Expermicid