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

  • 0 Respuestas
  • 1736 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Conectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5636
  • Actividad:
    56.67%
  • Country: ar
  • Reputación 37
  • ANTRAX
  • Skype: underc0de.org
  • Twitter: @Underc0de
    • Ver Perfil
    • Underc0de
    • Email
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
  1. <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  2.  
  3.    <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  4.  
  5.       <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  6.  
  7.          P&aacute;gina con Javascript.
  8.  
  9.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  10.  
  11.       <Solo los usuarios pueden ver los links. Registrate o Ingresar language="javascript">
  12.  
  13.          <!--
  14.  
  15.         document.write ("<b>Esto es negrita.</b><br>");
  16.  
  17.         document.write ("<i>Esto es cursiva.</i><br>");
  18.  
  19.         document.write ("<u>Esto es subrayado.</u><br>");
  20.  
  21.         document.write ("<h1>Esto es grande.</h1>");
  22.  
  23.         document.write ("<h6>Esto es pequeño.</h6>");
  24.  
  25.         document.write ("Esto es cualquier texto.<br>");
  26.  
  27.         document.write ("Esto es cualquier texto.<br>");
  28.  
  29.         document.write ("Esto es cualquier texto.<br>");
  30.  
  31.         document.write ("Esto es cualquier texto.<br>");
  32.  
  33.         document.write ("Esto es cualquier texto.<br>");
  34.  
  35.         document.write ("Esto es cualquier texto.<br>");
  36.  
  37.         document.write ("Esto es cualquier texto.<br>");
  38.  
  39.         document.write ("Esto es cualquier texto.<br>");
  40.  
  41.         document.write ("Esto es cualquier texto.<br>");
  42.  
  43.         document.write ("Esto es cualquier texto.<br>");
  44.  
  45.         document.write ("Esto es cualquier texto.<br>");
  46.  
  47.         document.write ("Esto es cualquier texto.<br>");
  48.  
  49.         document.write ("Esto es cualquier texto.<br>");
  50.  
  51.         document.write ("Esto es cualquier texto.<br>");
  52.  
  53.         document.write ("Esto es cualquier texto.<br>");
  54.  
  55.         document.write ("Esto es cualquier texto.<br>");
  56.  
  57.         document.write ("Esto es cualquier texto.<br>");
  58.  
  59.         document.write ("Esto es cualquier texto.<br>");
  60.  
  61.         document.write ("Esto es cualquier texto.<br>");
  62.  
  63.         document.write ("Esto es cualquier texto.<br>");
  64.  
  65.         //-->
  66.  
  67.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  68.  
  69.    </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  70.  
  71.    <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  72.  
  73.    </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  74.  
  75. </Solo los usuarios pueden ver los links. Registrate o Ingresar>


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
  1. <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  2.  
  3.    <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  4.  
  5.       <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  6.  
  7.          P&aacute;gina con Javascript.
  8.  
  9.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  10.  
  11.       <Solo los usuarios pueden ver los links. Registrate o Ingresar language="javascript">
  12.  
  13.          <!--
  14.  
  15.         with (document)
  16.  
  17.         {
  18.  
  19.            write ("<b>Esto es negrita.</b><br>");
  20.  
  21.            write ("<i>Esto es cursiva.</i><br>");
  22.  
  23.            write ("<u>Esto es subrayado.</u><br>");
  24.  
  25.            write ("<h1>Esto es grande.</h1>");
  26.  
  27.            write ("<h6>Esto es pequeño.</h6>");
  28.  
  29.            write ("Esto es cualquier texto.<br>");
  30.  
  31.            write ("Esto es cualquier texto.<br>");
  32.  
  33.            write ("Esto es cualquier texto.<br>");
  34.  
  35.            write ("Esto es cualquier texto.<br>");
  36.  
  37.            write ("Esto es cualquier texto.<br>");
  38.  
  39.            write ("Esto es cualquier texto.<br>");
  40.  
  41.            write ("Esto es cualquier texto.<br>");
  42.  
  43.            write ("Esto es cualquier texto.<br>");
  44.  
  45.            write ("Esto es cualquier texto.<br>");
  46.  
  47.            write ("Esto es cualquier texto.<br>");
  48.  
  49.            write ("Esto es cualquier texto.<br>");
  50.  
  51.            write ("Esto es cualquier texto.<br>");
  52.  
  53.            write ("Esto es cualquier texto.<br>");
  54.  
  55.            write ("Esto es cualquier texto.<br>");
  56.  
  57.            write ("Esto es cualquier texto.<br>");
  58.  
  59.            write ("Esto es cualquier texto.<br>");
  60.  
  61.            write ("Esto es cualquier texto.<br>");
  62.  
  63.            write ("Esto es cualquier texto.<br>");
  64.  
  65.       }
  66.  
  67.         //-->
  68.  
  69.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  70.  
  71.    </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  72.  
  73.    <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  74.  
  75.    </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  76.  
  77. </Solo los usuarios pueden ver los links. Registrate o Ingresar>


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
  1. <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  2.  
  3.    <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  4.  
  5.       <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  6.  
  7.          P&aacute;gina con Javascript.
  8.  
  9.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  10.  
  11.    </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  12.  
  13.    <Solo los usuarios pueden ver los links. Registrate o Ingresar onLoad = "alert ('La página ya se ha cargado');">
  14.  
  15.       <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  16.  
  17.          Esta p&aacute;gina es muy peque&ntilde;a
  18.  
  19.          <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  20.  
  21.          Y no necesita este evento.
  22.  
  23.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  24.  
  25.    </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  26.  
  27. </Solo los usuarios pueden ver los links. Registrate o Ingresar>


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
  1. <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  2.  
  3.    <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  4.  
  5.       <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  6.  
  7.          P&aacute;gina con Javascript.
  8.  
  9.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  10.  
  11.    </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  12.  
  13.    <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  14.  
  15.       <Solo los usuarios pueden ver los links. Registrate o Ingresar onMouseOver = "alert ('El puntero se ha apoyado en el texto');">
  16.  
  17.          Este texto detecta cuándo se apoya el puntero.
  18.  
  19.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  20.  
  21.       <Solo los usuarios pueden ver los links. Registrate o Ingresar><Solo los usuarios pueden ver los links. Registrate o Ingresar><Solo los usuarios pueden ver los links. Registrate o Ingresar><Solo los usuarios pueden ver los links. Registrate o Ingresar>
  22.  
  23.       <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  24.  
  25.          En cambio, este texto no detecta nada.
  26.  
  27.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  28.  
  29.    </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  30.  
  31. </Solo los usuarios pueden ver los links. Registrate o Ingresar>


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
  1. <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  2.  
  3.    <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  4.  
  5.       <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  6.  
  7.          P&aacute;gina con Javascript.
  8.  
  9.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  10.  
  11.    </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  12.  
  13.    <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  14.  
  15.       <Solo los usuarios pueden ver los links. Registrate o Ingresar onMouseOut = "alert ('El puntero se ha quitado del texto');">
  16.  
  17.          Este texto detecta cuándo se quita el puntero.
  18.  
  19.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  20.  
  21.       <Solo los usuarios pueden ver los links. Registrate o Ingresar><Solo los usuarios pueden ver los links. Registrate o Ingresar><Solo los usuarios pueden ver los links. Registrate o Ingresar><Solo los usuarios pueden ver los links. Registrate o Ingresar>
  22.  
  23.       <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  24.  
  25.          En cambio, este texto no detecta nada.
  26.  
  27.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  28.  
  29.    </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  30.  
  31. </Solo los usuarios pueden ver los links. Registrate o Ingresar>


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
  1. <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  2.  
  3.    <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  4.  
  5.       <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  6.  
  7.          P&aacute;gina con Javascript.
  8.  
  9.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  10.  
  11.    </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  12.  
  13.    <Solo los usuarios pueden ver los links. Registrate o Ingresar onUnload = "alert ('Vuelva a visitarnos pronto.');">
  14.  
  15.       <Solo los usuarios pueden ver los links. Registrate o Ingresar>
  16.  
  17.          Cierre ahora el navegador.
  18.  
  19.       </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  20.  
  21.    </Solo los usuarios pueden ver los links. Registrate o Ingresar>
  22.  
  23. </Solo los usuarios pueden ver los links. Registrate o Ingresar>


Esto ta bien facil..

By N3xtdoor
« Última modificación: Abril 18, 2014, 11:15:52 am por Expermicid »


 

[JavaScript][MEDIO] Texto que aparece palabra por palabra

Iniciado por ANTRAX

Respuestas: 0
Vistas: 2051
Último mensaje Febrero 24, 2010, 11:16:49 am
por ANTRAX
[JavaScript][MEDIO] Script ''cambia el color letra a letra''

Iniciado por ANTRAX

Respuestas: 0
Vistas: 2239
Último mensaje Febrero 24, 2010, 11:14:30 am
por ANTRAX
[JavaScript][BASICO] Resolver funciones matemáticas (Versión simple) By 2Fac3R

Iniciado por 2Fac3R

Respuestas: 0
Vistas: 2154
Último mensaje Diciembre 23, 2012, 12:55:06 am
por 2Fac3R
[JavaScript][AVANZADO] Trabajar con DOM desde Firefox e Internet Explorer

Iniciado por arthusu

Respuestas: 0
Vistas: 2562
Último mensaje Julio 16, 2011, 07:05:12 pm
por arthusu
[PDF] 1000 Libros - La guía suprema de JAVASCRIPT - NODE.JS - D3.JS - REACT

Iniciado por graphixx

Respuestas: 2
Vistas: 5247
Último mensaje Julio 21, 2019, 12:35:00 am
por graphixx