Академический Документы
Профессиональный Документы
Культура Документы
S.E.I.T.
D.G.I.T.
INSTITUTO TECNOLGICO
Del Istmo.
MATERIA:
PROGRAMACION WEB
TEMA:
Browser Object Model (BOM)
TITULAR:
Ing. Jos Antonio Lpez Posada
PRESENTA:
Castillejos Gallegos Griselda
Martnez Endolay Karina
Santos Cuevas Lizbeth
Melndez Tern Otniel
ESPECIALIDAD:
Lic. Informtica
Heroica ciudad de Juchitn de Zaragoza, Oaxaca, Marzo 2010.
Como todos los dems objetos heredan directa o indirectamente del objeto
window, no es necesario indicarlo de forma explcita en el cdigo JavaScript.
En otras palabras:
window.frames[0] == frames[0]
window.document == document
BOM define cuatro mtodos para manipular el tamao y la posicin de la
ventana:
moveBy(x, y) desplaza la posicin de la ventana x pxel hacia la derecha y y
pxel hacia abajo. Se permiten desplazamientos negativos para mover la
ventana hacia la izquierda o hacia arriba.
moveTo(x, y) desplaza la ventana del navegador hasta que la esquina
superior izquierda se encuentre en la posicin (x, y) de la pantalla del usuario.
Se permiten desplazamientos negativos, aunque ello suponga que parte de la
ventana no se visualiza en la pantalla.
resizeBy(x, y) redimensiona la ventana del navegador de forma que su nueva
anchura sea igual a (anchura_anterior + x) y su nueva altura sea igual a
(altura_anterior + y). Se pueden emplear valores negativos para reducir la
anchura y/o altura de la ventana.
resizeTo(x, y) redimensiona la ventana del navegador hasta que su anchura
sea igual a x y su altura sea igual a y. No se permiten valores negativos.
Los navegadores son cada vez menos permisivos con la modificacin mediante
JavaScript de las propiedades de sus ventanas. De hecho, la mayora de
navegadores permite a los usuarios bloquear el uso de JavaScript para realizar
cambios de este tipo. De esta forma, una aplicacin nunca debe suponer que
este tipo de funciones estn disponibles y funcionan de forma correta.
A continuacin se muestran algunos ejemplos de uso de estas funciones:
// Mover la ventana 20 pxel hacia la derecha y 30 pxel hacia abajo
window.moveBy(20, 30);
// Redimensionar la ventana hasta un tamao de 250 x 250
window.resizeTo(250, 250);
// Agrandar la altura de la ventana en 50 pxel
window.resizeBy(0, 50);
// Colocar la ventana en la esquina izquierda superior de la ventana
window.moveTo(0, 0);
Propiedad
Descripcin
lastModified
referrer
title
URL
Las propiedades title y URL son de lectura y escritura, por lo que adems de
obtener su valor, se puede establecer de forma directa:
Array
Descripcin
anchors
enlaces
de
tipo
<a
name="nombre_ancla"></a>)
applets
embeds
forms
images
Links
elementos
de
tipo
<a
="enlace.html"></a>)
Los elementos de cada array del objeto document se pueden acceder mediante
su ndice
numrico o mediante el nombre del elemento en la pgina HTML. Si se
considera por ejemplo la siguiente pgina HTML:
href
Primero TITLE
<html>
<head>
<title>Ejemplo de TITLE</title>
<script type="text/javascript">
document.title = "con el document. title....";
</script>
</head>
<body>
</body>
</html>
Segundo URL
<html>
<head>
<title>Ejemplo de url</title>
<script type="text/javascript">
document.URL = "http://www.google.com";
</script>
</head>
<body>
</body>
</html>
El objeto location es uno de los objetos ms tiles del BOM. Debido a la falta
de estandarizacin, location es una propiedad tanto del objeto window como
del objeto document.
Propiedad
Descripcin
hash
host
hostname
href
pathname
port
search
// Mtodo assign()
location.assign("http://www.ejemplo.com");
// Equivalente a location.href = http://www.ejemplo.com
// Mtodo replace()
location.replace("http://www.ejemplo.com");
// Similar a assign(), salvo que se borra la pgina actual del array history del
navegador
// Mtodo reload()
location.reload(true);
Primero assign
<html>
<head>
<title>Ejemplo de Operadores logios</title>
<script type="text/javascript">
location.assign("http://www.google.com");
</script>
</head>
<body>
</body>
</html>
Segundo replace
<html>
<head>
<title>Ejemplo replace</title>
<script type="text/javascript">
location.replace("http://www.hotmail.com");
</script>
</head>
<body>
</body>
</html>
Tercero reload
<html>
<head>
<title>Ejemplo de reload</title>
<script type="text/javascript">
location.reload(false);
</script>
</head>
<body>
</body>
</html>
navigator.propiedad
Veamos a continuacin sus propiedades:
appCodeName Devuelve el nombre codificado dado al navegador.
Ejemplo:
<-html->
<-head->
<-title->LEjemplo del objeto navigator<-/title->
<-/head->
<-body->
<-script language="JavaScript"->
Msg=("Navegador;"
+navigator.appName
"\n"
"Codigo:"
navigator.appCodeName);
msg1= ("\n" + "Version:" + navigator.appVersion + "\n" + "Idioma:" +
navigator.browserLanguage);
msg2=
("\n"
"Sistema:"
navigator.cpuClass);
Alert (msg+msg1+msg2+msg3);
<-/script->
<-body->
<-/body->
<-/html->;
navigator.platform
"\n"
"CPU:"
Las propiedades del objeto screen se utilizan por ejemplo para determinar
cmo y cuanto se puede redimensionar una ventana y para colocar una
ventana centrada en la pantalla del usuario.
<html>
<head>
<title>Abriendo y cerrando ventanas con Javascript</title>
<script>
<!-var nuevaVentana;
function doble( x ) {
return 2*x;
}
function nueva() {
nuevaVentana=nuevaVentana=window.open("", "segundaPag",
"toolbar=yes,location=no,menubar=yes,resizable=yes,"+
"width=30,height=30" );
/*nuevaVentana.window.moveTo(0, 0);
nuevaVentana.window.resizeTo(screen.availWidth,
screen.availHeight); */
nuevaVentana.document.write("<html><head><title>"+
"Ventana creada con el objeto Window</title></head>\n");
nuevaVentana.document.write("<body><form>\n");
nuevaVentana.document.write("<input type='button' "+
"value='Cerrar' onClick='window.close();'>\n");
nuevaVentana.document.write("</form>\n");
nuevaVentana.document.write("</body></html>\n");
nuevaVentana.document.close();
}
// -->
</script>
<body>
<form>
<input type="button" value="Abrir" onClick="nueva();"><br>
</form>
</body>
</html>