Objetivo

Utilizar los objetos relacionados con el navegador en una aplicacin JavaScript

Lecturas propuestas Objetos propios del navegador archivo Otros objetos Recurso http://www.iesromerovargas.net/OASIS/DisenioWEB/PaginaJavaScript/ObjetosdelNav egador.htmObjetos del Navegador

Hasta ahora hemos estudiado los objetos predefinidos del lenguaje, sin embargo, no se ha hablado, apenas, acerca del control del navegador en s mismo y casi no se han mencionado los documentos web desde el punto de vista de los objetos. Los navegadores ofrecen al programador multitud de caractersticas en forma de un modelo jerrquico. Esta jerarqua es lo que se llama modelo de objetos del navegador y mediante ella se pueden controlar caractersticas propias del navegador desde qu mensaje mostrar en la barra de estado hasta la creacin de nuevas pginas con el aspecto deseado. La jerarqua de dichos objetos toma la siguiente forma:

Para los ms iniciados en la programacin orientada a objetos, conviene aclarar que en esta jerarqua, contra lo que pueda parecer, no existe herencia alguna. Los objetos se relacionan por composicin, es decir, un objeto Window se compone (entre otras cosas)

de un objeto Document, y ste a su vez se compone de diversos objetos Form, Image, etc.. El padre de esta jerarqua es el objeto Window, que representa una ventana de nuestro navegador. Dado que cada marco se considera una ventana distinta, cada uno de ellos dispone de su propio objeto Window. El objeto Document representa el documento HTML y cada uno de los objetos que lo componen se corresponden con diversas etiquetas HTML.

El objeto Window

Es el objeto principal. Define la ventana sobre la que estamos trabajando e incluye los objetos referentes a la barra de tareas, el documento o la secuencia de direcciones de la ltima sesin. An cuando el objeto se llame Window, disponemos siempre de una referencia a l llamada window (recordad que Javascript distingue entre maysculas y minsculas). Ser con esa referencia con la que trabajemos. Este hecho ser comn a todos los objetos del modelo de objetos. Por ltimo, indicar que en Javascript, se supone que todas las propiedades y mtodos que llamamos sin utilizar ninguna referencia, en realidad se hacen utilizando esa referencia window. As, por ejemplo, cuando ejecutamos el mtodo alert() en realidad lo que estamos haciendo es ejecutar el mtodo window.alert().

Veamos los mtodos ms usados del objeto Window.

[Variable=][window.]open(URL, nombre, propiedades)

Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella desde la ventana donde la creamos deberemos asignarle una variable, si no simplemente invocamos el mtodo: el navegador automticamente sabr que pertenece al objeto window. El parmetro URL es una cadena que contendr la direccin de la ventana que estamos abriendo: si est en blanco, la ventana se abrir con una pgina en blanco. El nombre ser el que queramos que se utilize como parmetro de un TARGET y las propiedades son una lista separada por comas de algunos de los siguientes elementos:

toolbar[=yes|no] location[=yes|no] directories[=yes|no] status[=yes|no] menubar[=yes|no] scrollbars[=yes|no] resizable[=yes|no] width=pixels height=pixels

Debemos tener cuidado con las propiedades que modifiquemos, es posible que algunas combinaciones de los mismos no funcionen en todos los navegadores. El Explorer 4, por ejemplo, da error ante la combinacin toolbar=no, directories=no, menubar=no. Veamos un ejemplo: function AbrirVentana() { MiVentana=open("","Ventana","toolbar=no,menubar=no,status=yes"); MiVentana.document.write("Ttulo"); MiVentana.document.write(""+ "Esto puede ser lo que tu quieras"+ ""); } ... ...

Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro navegador con JavaScript. Se llama a la funcin AbrirVentana desde el evento onClick, como ya sabemos hacer desde el primer ejemplo. Esta funcin crea la nueva ventana MiVentana y escribe en ella por medio del objeto Document (que se estudiar ms adelante) todo el cdigo HTML de la pgina.close()

Cierra la ventana actual. A no ser que hayamos acabado de abrirla nosotros mostrar al usuario una ventana de confirmacin para que decida l si quiere o no cerrarla. Esto se hace por motivos de seguridad, ya que sera demasiado fcil hacer un script de esos mal intencionados que nos cerrase la ventana del navegador.alert(mensaje)

Muestra una ventana de dilogo con el mensaje especificado.confirm(mensaje)

Muestra una ventana de dilogo con el mensaje especificado y dos botones. Si el usuario pulsa OK, el mtodo devuelve true. Si, en cambio, pulsa Cancelar, devolver false.prompt(mensaje,valor_por_defect o)

Muestra una ventana de dilogo con el mensaje especificado y un campo de texto en el que el usuario pueda teclear, cuyo valor inicial ser igual a valor_por_defecto. Si el usuario pulsa OK, el mtodo devuelve la cadena introducida en el campo de texto. Si, por el contrario, pulsa Cancelar, devolver el valor null. Dado que este valor se considera igual a false, podemos comprabarlo directamente en una condicin para ver qu ha hecho el usuario. Por ejemplo, el siguiente cdigo muestra un saludo slo si el usuario ha pulsado el botn de Aceptar:var contestacion = prompt("Cmo te llamas, criatura?",""); if (contestacion) alert("Hola, " + contestacion);

[identificador=]setTimeout("funci on",tiempo)

Llama a funcin cuando hayan pasado tiempo milisegundos. Imprescindible a la hora de realizar cualquier rutina que deba ejecutarse a cierta velocidad.clearTimeout(identificador)

Detiene el proceso anterior.scroll(x,y)

Desliza el documento contenido en la ventana hasta la posicin especificada por las coordenadas x e y que indican el grado de desplazamiento horizontal y vertical en pxels, respectivamente. Ambos argumentos estn referidos a la esquina superior izquierda de la ventana actual.

Ahora veamos las propiedades del objeto Window:

name

Sirve para averiguar o asignar el nombre de una ventana determinada.

closed

Propiedad booleana que indica si la ventana est o no cerrada.length

Informa sobre la cantidad de ventanas hijas que contiene la ventana actual (frames).self

Devuelve una referencia a la propia ventana. Suele usarse para diferenciar una ventana de un formulario si tienen el mismo nombre.parent

Devuelve una referencia a la ventana que contiene a la ventana actual.top

Devuelve una referencia a la ventana de orden superior del navegador, es decir, a la que contiene todas las dems ventanas.status

Define la cadena de caracteres que saldr en la barra de estado en un momento dado.dafaultStatus

Define la cadena de caracteres que saldr por defecto en la barra de estado. Cuando no la especificamos, defaultStatus ser igual al ltimo valor que tom status.frames[]

Uno de los problemas ms frecuentes a los que se enfrenta un programador de Javascript es el manejo de marcos. Es decir, cmo accedo yo al cdigo o a objetos como Window o Document de otros marcos? JS propone una manera bastante sencilla de hacerlo. JS considera el documento de declaracin de marcos (es decir, aquel en el que escribimos las etiquetas FRAME y FRAMESET) como un objeto Window normal y

corriente. Permite acceder a los marcos que hemos declarado en l por medio del vector frames. Es decir, si en nuestro documento estuviera la siguiente lnea:

Podramos acceder a su objeto Window por medio de la referencia window.frames["principal"]. A su vez, desde el documento "hijo", es decir, desde el documento que est encerrado en un marco, podemos acceder al padre por medio de la referencia parent. Tambin podemos acceder al documento que est arriba del todo en esta jerarqua por medio de top. Por ejemplo:window == window.top

Esta igualdad comprobar si nuestro documento est en la ventana principal o en un marco. Comprueba si la ventana en la que est (window) es igual a la ventana principal (window.top). Mediante esta sencilla comprobacin podemos crear fcilmente (toda vez que conozcamos el manejo del objeto Location), rutinas que aseguren que nuestra ventana es la principal, o que recarguen nuestra estructura de marcos si algn usuario pretende acceder a un marco especfico, etc.. Ejemplos: Ahora veremos cmo se puede definir el valor de la barra de estado cuando el ratn pasa por encima de un elemento :

Fcil, no? Bueno, ahora vamos a ver cmo se hacen scrolls. var texto=" Aqu est el mensaje que espero " + "observes y leas con suma atencin "; var longitud=texto.length; function scroll() { texto=texto.substring(1,longitud-1)+texto.charAt(0); window.status = texto; setTimeout("scroll()",150); }

Como podis ver, la cosa no es ni ms larga ni ms compleja que los ejemplos anteriores. Simplemente escribe el texto en la barra de estado y luego coge el caracter ms a la izquierda del mismo y lo pone a la derecha, para despus volver a escribirlo. La nica pega que tiene es cmo hacemos para que la funcin se llame cada cierto tiempo predeterminado para ir desplazando el texto a una velocidad constante. Y la respuesta est en el mtodo setTimeout.

El objeto Navigator

Este objeto permite obtener diversas informaciones sobre el navegador donde se est ejecutando el cdigo JS. Se suele usar para averiguar el nombre y la versin del navegador que ejecuta nuestro cdigo, de forma que se puedan tomar decisiones sobre qu tipo de cdigo ejecutar o qu tipo de pginas mostrar.

Algunas de sus propiedades, de slo lectura, son:

appName

Cadena que contiene el nombre del cliente.appVersion

Cadena que contiene informacin sobre la versin del cliente.cpuClass

Informa sobre el tipo de procesador sobre el que se est ejecutando el sistema operativo.

Y el mtodo con el que cuenta es:

javaEnabled()

Averigua si el navegador est configurado para soportar el uso de programas escritos en Java, como los Applets. Ejemplo: function Navegador() {

alert(navigator.appName); alert(navigator.appVersion); alert(navigator.cpuClass); if (navigator.javaEnabled()) alert("S est preparado para soportar Applets de Java"); else alert("NO est preparado para soportar Applets de Java"); }

El objeto Screen

Como caba esperarse, se puede acceder a este objeto por medio de la referencia screen. Nos permitir conocer la configuracin de la pantalla del usuario. Al igual que en el anterior objeto, todos sus atributos son de slo lectura. Conviene indicar que este objeto slo est disponible desde las versiones 4.0 de los navegadores.

Propiedades.

height

Averigua la altura en pxels de la pantalla.width

Averigua la anchura en pxels de la pantalla.colorDepth

Indica el nmero de bits utilizados para proporcionar el color en la pantalla del sistema donde se ejecuta el navegador. Por ejemplo, si vale 4 es que se permite la visualizacin de 16 colores al mismo tiempo (24). As, por ejemplo, puedes comprobar la configuracin de tu pantalla con el siguiente cdigo: Ejemplo:function

Pantalla() { var texto=screen.width + "x" + screen.height + "x" + Math.pow(2,screen.colorDepth) + " colores."; alert(texto); }

El objeto Document

Este objeto representa el propio documento HTML que se est mostrando en la ventana del navegador. Se accede a l por medio de la referencia document (aunque tambin sera vlido window.document). Su mayor importancia viene por el nmero de vectores que posee, que referencian a objetos Image, Form o Link, los cuales permiten acceder a las imgenes, formularios y enlaces del documento, respectivamente.

Algunas propiedades de este objeto son:

lastModified

Contiene la fecha y hora en que se modific el documento por ltima vez y se suele usar en conjuncin con write para aadir al final del documento estas caractersticas.bgColor

Especifica el color de fondo del documento. El color deber estar en el formato usado en HTML. Es decir, puede ser "red" o "#FF0000", por ejemplo.fgColor

Especifica el color de para el texto del documento.linkColor, aLinkColor, vLinkColor

Especifican el color de los hiperenlaces del documento: iniciales, activos o ya visitados.title

Especifica el ttulo del documento.

Ejemplo: function PruebasDocumento() { alert(document.title); alert(document.lastModified); }

Matrices del objeto Document.

forms[]

Vector que contiene los formularios del documento. El primero ser el nmero 0, el segundo el 1, etc.. Se estudiar ms detenidamente en el siguiente captulo.images[]

Vector que contiene las imgenes del documento. Se ordenan igual que en el anterior caso, aunque tambin permiten ser accedidas con el nombre como ndice. Es decir, a una imagen definida como se puede acceder con document.images["miImagen"].links[]

Vector que contiene los enlaces del documento. Se ordenan igual que en los dos anteriores, aunque no se suele utilizar en el cdigo Javascript. Su razn de ser es que, al ser los enlaces objetos, permiten incluir cdigo Javascript en ellos por medio de la pseudo-URL "javascript:codigo".

Mtodos del objeto Document.

open()

Abre un nuevo documento para escribir. Un documento debe estar abierto para poder escribir en l.close()

Cierra el documento, impidiendo escribir de nuevo en l.write(cadena)

Escribe el cdigo HTML indicado en cadena en nuestro documento HTML.A la hora de escribir en un documento por medio de write hay que tener en cuenta un hecho fundamental. Para poder escribir en un documento, ste debe estar abierto y, al abrirlo, se destruye todo el cdigo que haya en l.

Un documento se abre automticamente cuando empieza a cargarse y se cierra cuando termina de hacerlo. As pues, si deseamos escribir en un documento sin sobreescribir su contenido, deberemos hacerlo antes de que ste termine de cargar. Si lo hacemos despus, sobreescribiremos su contenido. Por lo tanto://escribir.html Escribe y no sobreescribe Este es un documento que fue modificado por ltima vez el da document.write(document.lastModified);

Este ejemplo os mostrar la cadena completa, ya que se llama a write antes de cerrarse el documento. Es decir, antes de que termine de cargar. Sin embargo, el siguiente ejemplo://sobreescribir.html Sobreescribe function escribir() { document.write("Este es un documento "+ "que fue modificado por ltima vez el da"); document.write(document.lastModified); }

Hola.

Sobreescribir el documento y no podremos ver ese "Hola", al ser llamado despus de cargar el documento, es decir, despus de cerrarlo.

El objeto History

Se accede a este objeto por medio de la referencia window.history y contiene todas las direcciones que se han visitado en la sesin actual. Aunque no permite acceder a ellas, dispone de varios mtodos para sustituir el documento actual por alguno que el usuario ya haya visitado:back()

Volver a la pgina anterior. Es muy sencillo de utilizar, slo tienes que pulsar aqu, cuya etiqueta se ha declarado como:

forward()

Ir a la pgina siguiente.go(donde)

Ir a donde se indique, siendo donde un nmero tal que go(1) significa lo mismo que forward() y go(-1) es equivalente a back().

El objeto Location

Se accede a este objeto por medio de la referencia window.location y contiene informacin sobre la direccin de la pgina actual en varias propiedades.href

Permite el acceso a la direccin de la pgina actual. Si lo cambiamos cambiaremos de pgina.

protocol

Protocolo de la pgina actual. Habitualmente http.host

Mquina donde se alberga la pgina actual.pathname

Camino de la pgina actual.hash

Si hemos accedido a una pgina por medio de un ancla, contiene una almohadilla seguida de ese ancla. Ejemplo: function Localizacion() { alert("URL: "+window.location.href); }

http://www.iesromerovargas.net/OASIS/DisenioWEB/PaginaJavaScript/

Otros objetos

El objeto linkUn objeto link es un objeto que enlaza a otro URL mediante hipertexto. Cada enlace presente en un documento corresponde a un objeto que se coloca en la matriz links. As, se acceder al primer enlace mediante document.links[0], al segundo mediante document. links[1], y as sucesivamente.

El objeto link carece de mtodos pero no de propiedades.

Propiedades

length. Tamao del objeto link. target. Es una cadena que tiene el nombre de la ventana o del frame especificado en el parmetro TARGET. hash. Es una cadena con el nombre del enlace, dentro de la URL. host. Es una cadena con el nombre del servidor y nmero de puerto, dentro de la URL. hostname. Es una cadena con el nombre de dominio del servidor (o la direccin IP) dentro de la URL. href. Es una cadena con la URL completa. pathname. Es una cadena con el camino al recurso, dentro de la URL. port. Es una cadena con el nmero de puerto, dentro de la URL. protocol. Es una cadena con el protocolo usado, incluyendo los : (los dos puntos), dentro de la URL. search. Es una cadena que tiene la informacin pasada en una llamada a un script, dentro de la URL.

Ejemplo objeto link Yahoo!! Google! var i; for (i=0;i tamanoX/2) { posicionHorizontal = "derecha"; } else { posicionHorizontal = "izquierda"; } if(coordenadaY > tamanoY/2) { posicionVertical = "abajo"; }

else { posicionVertical = "arriba"; } muestraInformacion(['Posicion', posicionHorizontal, posicionVertical]); } function muestraInformacion(mensaje) { document.getElementById("info").innerHTML = ''+mensaje[0]+''; for(var i=1; i tamanoX/2) { posicionHorizontal = "derecha"; } else { posicionHorizontal = "izquierda"; } if(coordenadaY > tamanoY/2) { posicionVertical = "abajo"; } else { posicionVertical = "arriba"; } muestraInformacion(['Posicion', posicionHorizontal, posicionVertical]); }

function muestraInformacion(mensaje) { document.getElementById("info").innerHTML = ''+mensaje[0]+''; for(var i=1; iMayor de 60 aos
Ver valores

7. Objeto hiddenGracias a este objeto se puede almacenar informacin extra en el formulario de forma completamente invisible para el usuario, pues no se ver en ningn momento que se tienen estos campos en el documento. Es parecido a un campo de texto (objeto text) salvo que no tiene valor por defecto (no tiene sentido pues el usuario no va a modificarlo), y que no se puede editar.

7.1 Propiedades

name: Es una cadena que contiene el valor del parmetro NAME.

value: Es una cadena que contiene el valor del parmetro VALUE. [7].

[1]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript FORM[En lnea]. [citado en 10 de dicimebre de 2010] [2]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript text[En lnea]. [citado en 10 de dicimebre de 2010] [3]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript button[En lnea]. [citado en 10 de dicimebre de 2010] [4]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript checkbox[En lnea]. [citado en 10 de dicimebre de 2010] [5]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript radio[En lnea]. [citado en 10 de dicimebre de 2010] [6]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript select[En lnea]. [citado en 10 de dicimebre de 2010] [7]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript hidden[En lnea]. [citado en 10 de dicimebre de 2010]

FormulariosRealizar una pgina que muestre una imagen de fondo y que contenga por lo menos dos radio button. Dependiendo de cual radio button se escoja mostrar un formulario con varios campos, los cuales al dar clic sobre un botn se deben validar.

Objetivo Crear un juego en el que se aplique la mayor cantidad de conceptos vistos durante el curso, y que haga uso de funciones objetos. ENTREGA: Martes 5 de Abril de 2011.

Ejemplos de pginas con JavaScriptHe aque algunos ejemplos de paginas con "scripts" escritos en JavaScript (java interpretado). http://www.uv.es/~jac/guia/jscript/javascr.htm