|
Master
en Artes Digitales (IUA-UPF) |
Objetos
del Browser HTML en JavaScript
Estructura del Browser: browser->window | Jerarquía de objetos de Browser | Acceso a objetos HTML desde JS | Ejercicios
Estructura del Browser: browser->window
Todo browser tiene definida una estructura de objetos. Esta estructura se basa en la idea que un tipo de objetos es padre de otras que están en un segundo plano. Así pues, esta estructura forma una jerarquía que veremos más abajo. Esta jerarquía se basa principalmente en un objeto padre que es la ventana (window) del browser. Esta ventana no sólo debe entenderse como el área donde aparecen los documentos HTML, sino que engloba un grupo de propiedades las cuales pueden ser modificadas, una serie de funcionalidades o métodos para poder modificar las propiedades, y una serie de subobjetos que nos permitirán gestionar los documentos que contenga la ventana y los elementos de los documentos.
Jerarquía de objetos de Browser
Aunque no es del todo correcto llamarle la jerarquía de objetos de JavaScript, por que esta jerarquía pertenece al browser, debido a que la estaremos accediendo desde JS continuaremos llamándole así (que de hecho es una costumbre muy extendida).
Esta jerarquía mostrada en la ilustración, abarca todos los tipos de objetos que están asociados a un browser de HTML con capacidades de JavaScript. No obstante, nosotros, por el enfoque del curso y el tiempo disponible, tan solo veremos los que están resaltados.
Tal y como hemos introducido en la sección anterior, el objeto window es el objeto principal del browser. Este objeto nos sirve para poder acceder a los documentos que contenga, pero también para acceder a una serie de opciones y funcionalidades muy útiles por lo que respecta a la programación en JS de documentos HTML interactivos.
Event handlers:
El objeto window, creado por el browser, está asociado al tag body del código HTML. Esto hace que los event handlers (EH) de window se definan y capturen a través de este tag. Por ejemplo, el EH onLoad visto en la sesión anterior y que vimos que se definía en el tag body, pertenece, en realidad al objeto window.
Otros EH interesantes y que también se definen dentro del tag body son:
| onFocus
|
Este EH nos permite saber cuando esa ventana en concreto pasa a ser la ventana activa de entre todas las ventanas que tenemos abiertas. Esto puede ser útil, por ejemplo, para poder realizar una acción al detectar que se ha seleccionado nuestra ventana. |
| onBlur
|
Este EH nos permite saber cuando esa ventana en concreto deja de ser la ventana activa. |
| onMove
|
Este EH nos permite saber cuando esa ventana en concreto ha sido desplazada dentro del desktop a una nueva posición. |
| onResize
|
Este EH nos permite saber cuando esa ventana en concreto ha sufrido un cambio de tamaño por la acción del usuario. |
| onUnload | Este EH nos permite detectar el momento en que se descarga un documento de la ventana; por ejemplo, cuando un usuario clica en un hiperlink y se llama a un nuevo documento para cargarlo. |
(Nota: estos no son todos los EH que tiene window)
Tal y como lo hacemos con el onLoad, estos EH se utilizan de la siguiente forma:
... ... ... <body onFocus="miFuncionParaFocus()"> ... ... ...
Metodos:
Los siguientes son algunos de los métodos de window y los que consideramos de más utilidad para el nivel del presente curso:
| alert(string) |
Este método, que ya vimos en la sesión anterior, nos permite mostrar un mensaje de aviso, pasándole un mensaje en formato string como parámetro. |
| close() |
Este método nos permite cerrar la ventana actual. |
| confirm(string) |
Este método nos mostrar una pequeña ventana, con un mensaje en forma de pregunta al usuario. La ventana también contiene un botón de OK y uno de Cancel. Con esto podemos detectar qué opción ha escogido el usuario, ya que si pulsa OK, el método nos devolverá true y si pulsa Cancel nos devolverá false. |
| moveTo(hor, ver) | Este método
nos permite mover la ventana a una cierta posición de la pantalla
definida por el punto cuya distancia horizontal (en pixels)
del borde izquierdo de la pantalla es hor,
y cuya distancia vertical del borde superior de la pantalla
es ver. Por
razones de seguridad, los browsers no permiten esconder una ventana y por
esta razón, no se puede mover una ventana más allá
de los límites de la pantalla. Nota: este método no funciona en todos los sistemas operativos y por lo tanto debe utilizarse con precaución. |
| open(URL, windowName, windowFeatures) |
Este método nos permite abrir una nueva ventana con las características que deseemos. Este método tiene tres parámetros, siendo los dos primeros obligatorios y el tercero opcional: URL: La dirección del documento que queremos que se cargue en la nueva ventana. windowName: Un nombre cualquiera para el nuevo objeto window creado. Funciona de forma parecida al nombre que se le da a los frames para poder accederlos como target de algún hiperlink. (Este nombre no puede contener espacios). windowFeatures: Son las características de la ventana. Si se omite este parámetro, la nueva ventana tendrá todas las características estándard de una ventana de browser. Las características possibles son:
La forma en que se define windowFeatures es poniendo todas las características que queremos que tenga nuestra nueva ventana en un único string y separando las características con comas. Por ejemplo, una ventana que queremos que solo tenga barra de menú y barra de status y que sea de 500x600pixels externos, se haria con un windowFeatures: 'menubar,status,outerWidht=500,outerHeight=600' Las opciones que no aparecen se dan por negativas pero, si se omiten todas las opciones, la ventana nueva tendrá TODAS las opciones estándar y el mismo tamaño que la ventana que ha provocado la apertura de la nueva. |
La forma en que se utilizan estos métodos es a través del objeto window, tal y como se puede ver en los siguientes ejemplos.
|
Ejemplos de métodos de window Ejemplo 1 : Definir un documento HTML que cierre la ventana actual (es decir, se cierre a si mismo) al pulsar sobre el texto "Cerrar ventana". Ejemplo 2 : Definir un documento HTML que haga que su ventana se mueva a una cierta posición al pulsar sobre los siguientes textos: "Pos: 0,0", "Pos: 300,0", "Pos: 0,300", "Pos: 300,300". Ejemplo 3 : Definir un documento HTML que al pulsar sobre un botón, abra una ventanilla de confirmación que pregunte si se desea cerrar la ventana principal. Ejemplo 4 : Definir un documento HTML que al pulsar sobre un botón, abra una ventana nueva con la web del IUA y con las siguientes características: de tamaño exterior fijo 600x400, con barra de menús y sin barras de scroll. |
Ejemplo 1 :
<html> <head> <title>Ejemplo 1</title> </head> <body> <p><a href="javascript:window.close()">Cerrar ventana</a></p> </body> </html>
Ejemplo 2:
<html> <head> <title>Ejemplo 2</title> </head> <body> <p><a href="javascript:window.moveTo(0,0)">Pos: 0,0</a></p> <p><a href="javascript:window.moveTo(300,0)">Pos: 300,0</a></p> <p><a href="javascript:window.moveTo(0,300)">Pos: 0,300</a></p> <p><a href="javascript:window.moveTo(300,300)">Pos: 300,300</a></p> </body> </html>
Ejemplo 3 :
<html>
<head>
<title>Ejemplo 3</title>
<script language="javascript">
<!--
function quieresCerrar(){
if(window.confirm("Desea cerrar la ventana principal?")){
window.close()
}
}
//-->
</script>
</head>
<body>
<form>
<input type="button" name="Cerrar" value="Cerrar" onClick="quieresCerrar()">
</form>
</body>
</html>
Ejemplo 4:
<html>
<head>
<title>Ejemplo 4</title>
</head>
<body>
<form>
<input type="button" name="Abrir" value="Abrir"
onClick="window.open('http://www.iua.upf.es/','miVentana','outerWidth=600,outerHeight=400,menubar')">
</form>
</body>
</html>
Como vemos en los ejemplos, para acceder a los métodos, formalmente, debemos utilizar el nombre del objeto (window) y el nombre del método (por ejemplo: close()), uniéndolos por un punto: window.close().
No obstante, tal y como ya vimos con alert(), no es necesario, en la mayoría de browsers, utilizar window.
Propiedades:
Las única propiedad del objeto window que nos ocupa en este curso es:
| status | A través de esta propiedad podemos acceder al contenido de la barra de status del browser, es decir la barra inferior, en la que aparecen mensajes. |
También se encuentran las propiedades que dan acceso a objetos "hijo" de window:
| location | Da acceso al objeto Location |
| document | Da acceso al objeto Document |
| self | Da acceso a si mismo, para autoreferenciarse |
Estas las veremos en más detalle más abajo.
|
Ejemplos de propiedades de window Ejemplo 1 : Definir un documento HTML que presente un mensaje en el status a partir del momento en que se cargue el documento. Ejemplo 2 : Añadir al documento anterior una imagen la cual haga cambiar el mensaje del status cuando el cursor se ponga encima y restaure el mensaje inicial cuando el cursor salga de encima. |
Ejemplo 1 :
<html>
<head>
<title>Ejemplo 1</title>
<script language="javascript">
<!--
function ponerMensaje(mns){
self.status = mns // También podíamos haber hecho: window.status = mns
return true // pero se considera más claro utilizar el self
}
//-->
</script>
</head>
<body onLoad="ponerMensaje('Bienvenido a este documento!')">
<p>No hay nada remarcable en este documento más que en el status. Mirar abajo!</p>
</body>
</html>
NOTA: Es importante poner el return true para que no se bloquée la llamada.
Ejemplo 2 :
<html>
<head>
<title>Ejemplo 2</title>
<script language="javascript">
<!--
function ponerMensaje(mns){
self.status = mns
return true
}
//-->
</script>
</head>
<body onLoad="ponerMensaje('Bienvenido a este documento!')">
<p><a href="#" onMouseOver="ponerMensaje('Estas sobre la imagen')"
onMouseOut="ponerMensaje('Bienvenido a este documento!')">
<img src="imagen.jpg"></a>
</p>
</body>
</html>
Acceso a objetos HTML desde JS
A continuación veremos el acceso a dos importantes objetos HTML desde JS.
Este objeto de la jerarquía es hijo del objeto window visto antes. Location nos dice el URL completo de donde ha salido el documento actual. Se accede a él desde el objeto window, a través de la propiedad de window llamada location.
Lo que nos interesa de este objeto, en este curso, es la posibilidad de utilizarlo para poder cambiar el documento de la ventana actual desde programa. Esto se realiza mediante la siguiente propiedad:
| href | Permite dar un nuevo URL para la ventana actual, o bien consultar el URL del documento actual. |
|
Ejemplos de location Ejemplo 1 : Definir un documento HTML que al pulsar sobre un botón llame una función la cual cambie el documento actual por la web del IUA. Ejemplo 2 : Definir un documento HTML que al pulsar sobre un botón, abra una ventana nueva con la web del IUA y con las siguientes características: de tamaño exterior fijo 600x400, con barra de menús y sin barras de scroll. Este documento deberá tener, también, un segundo botón con el que se cambiará el URL de la ventana nueva para que se muestre el URL de la UPF, y a la vez, cambie el URL del documentoactual y muestre la siguiente dirección: http://www.iua.upf.es/~npares |
Ejemplo 1 :
<html>
<head>
<title>Ejemplo 1</title>
<script language="javascript">
<!--
function cambiarURL(){
window.location.href = "http://www.iua.upf.es/"
}
//-->
</script>
</head>
<body>
<form>
<input type="button" name="Cambiar" value="Cambiar" onClick="cambiarURL()">
</form>
</body>
</html>
Ejemplo 2 :
<html>
<head>
<title>Ejemplo 2</title>
<script language="javascript">
<!--
nuevaVentana = null // donde guardaremos la nueva ventana para poder referenciarla después
function abrir(){
nuevaVentana = window.open("http://www.iua.upf.es/","miVentana","outerWidth=600,outerHeight=400,menubar")
}
function cambiarURL(){
nuevaVentana.location.href = "http://www.upf.es/"
window.location.href = "http://www.iua.upf.es/~npares"
}
//-->
</script>
</head>
<body>
<form>
<input type="button" name="Abrir" value="Abrir" onClick="abrir()">
<input type="button" name="Cambiar" value="Cambiar" onClick="cambiarURL()">
</form>
</body>
</html>
Asi vemos como se puede, de un solo click, modificar más de un documento a la vez. Cabe destacar el hecho de que tenemos que utilizar una variable global que nos guarde la referencia de la ventana nueva que hemos creado, para así después poder acceder a su propiedad location y a su vez a la propiedad href de location.
Este objeto de la jerarquía es también hijo del objeto window visto antes. Document nos permite acceder a los elementos que puede contener un documento, como imágenes y formularios, nos permite conocer propiedades del documento, etc. Se accede a él desde el objeto window, a través de la propiedad de window llamada document. Este objeto se crea a raiz del tag body de HTML.
Propiedades:
Las propiedades del objeto Document que nos ocupan en este curso son:
| bgColor | A través de esta propiedad podemos cambiar el color del fondo del documento. Esto se hace asignándole un string con la codificación del color que deseamos (ver NOTA abajo). |
| fgColor | A través de esta propiedad podemos cambiar el color del texto del documento. Esto se hace asignándole un string con la codificación del color que deseamos (ver NOTA abajo). |
| linkColor | A través de esta propiedad podemos cambiar el color de los links no visitados del documento. Esto se hace asignándole un string con la codificación del color que deseamos (ver NOTA abajo). |
| vlinkColor | A través de esta propiedad podemos cambiar el color de los links ya visitados del documento. Esto se hace asignándole un string con la codificación del color que deseamos (ver NOTA abajo). |
NOTA:
Los colores en HTML se codifican en RGB (Red, Green, Blue). Esta codificación
se hace en hexadecimal desde 00 hasta FF (en decimal sería de 0 a 255).
Ejemplos
de codificaciones de colores:
los colores básicos serían: Rojo "FF0000", Verde "00FF00",
Azul "0000FF"
los complementarios serían: Amarillo "FFFF00", Cian "00FFFF",
Magenta "FF00FF"
el Blanco "FFFFFF", el Negro "000000", un Gris medio "888888".
También se encuentran las propiedades que dan acceso a objetos "hijo" de document:
| forms | Da acceso a los objetos Form que hay en el documento. Esto lo hace a través de un array de forms. |
| images | Da acceso a los objetos Image que hay en el documento. Esto lo hace a través de un array de images. |
Estas las veremos en más detalle en las siguientes sesiones.
|
Ejemplos de document Ejemplo 1 : Definir un documento HTML que al pulsar sobre un botón llame una función la cual cambie el color de forndo 100 veces pasando de blanco a negro, de forma que se de un efecto de intermitencia o relampagueo. Ejemplo 2 : Definir un documento HTML que al pulsar sobre un botón llame una función la cual cambie los colores del documento de la siguiente forma:
|
Ejemplo 1 :
<html>
<head>
<title>Ejemplo 1</title>
<script language="javascript">
<!--
function relampago(){
for(i=0;i<100;i++){
window.document.bgColor = "000000"
window.document.bgColor = "FFFFFF"
}
}
//-->
</script>
</head>
<body>
<form>
<input type="button" name="Relampago" value="Relampago" onClick="relampago()">
</form>
</body>
</html>
Ejemplo 2:
<html>
<head>
<title>Ejemplo 2</title>
<script language="javascript">
<!--
function invierte(){
temp = window.document.bgColor
window.document.bgColor = window.document.fgColor
window.document.fgColor = temp
}
//-->
</script>
</head>
<body>
<form>
<input type="button" name="Invierte" value="Invierte" onClick="invierte()">
</form>
</body>
</html>