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:
<html>
<head>
<title>
Pá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:
<html>
<head>
<title>
Pá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:
<html>
<head>
<title>
Página con Javascript.
</title>
</head>
<body onLoad = "alert ('La página ya se ha cargado');">
<h1>
Esta página es muy pequeñ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...).
<html>
<head>
<title>
Pá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:
<html>
<head>
<title>
Pá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.
<html>
<head>
<title>
Pá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