Javascript Extracto Tema3

Programación Web con Javascript http://www.digitallearning.es Autor: Víctor M. Rivas

Curso online

Programación Web con Javascript

Tema 3. Objeto Window y

sus propiedades

Autor: Víctor M. Rivas Santos

(EPSJ- Universidad de Jaén)

Versión 1.0

Fecha: 28/09/2012


ÍNDICE DE CONTENIDOS

Introducción y objetivos

3.1 El objeto window

3.1.1 Apertura de una ventana

3.1.2 Cerrar ventanas

3.1.3 Mensajes de alerta, confirmaciones, entradas de datos

3.1.4 Temporizadores

3.2 El objeto navigator

3.3 El objeto history

3.4 El objeto location

3.5 El objeto document


3. El objeto Window

Introducción y objetivosCada vez que se carga una página en el navegador, el intérprete de Javascript crea automáticamente una seriede objetos que pueden ser directamente usados en nuestros programas. De entre los distintos objetosgenerados automáticamente destacan los siguientes:

Window: es el objeto principal del cual "cuelgan" los demás como si fueran propiedades suyas.Se crea un objeto de este tipo para cada ventana que pueda ser lanzada desde una páginaWeb.Navigator: contiene información acerca del navegador, tal como nombre, versión, tipos MIMEsoportados por el cliente y plugs-in instalados.Location: con información acerca del URL que estemos visualizando.History: historial en el que se guardan los URL ya visitados.Document: es el contenedor de todos los objetos que se hayan insertado en la página web:enlaces, formularios, imágenes o marcos.

El siguiente cuadro muestra la jerarquía de objetos creados por el navegador al cargar una página Web:

Hemos de tener en cuenta, que el navegador va creando los objetos en el momento que los lee, y que lapágina la lee desde arriba hacia abajo. Por ello, no debemos usar objetos antes de su creación. Solo al definirfunciones en la cabecera podemos romper esta regla, ya que la definición de las funciones no implica su usoen el momento que se leen, sino que se llaman después desde el cuerpo de la página. Por tanto, en ladefinición de las funciones sí podremos hacer referencia a objetos aún no creados (que son todos los dedocument) aunque no podremos usar tales funciones hasta que dichos objetos no estén creados.

Los objetivos de este tema son:

Conocer el objeto window y alguno de los métodos y propiedades asociados al mismoUtilizar el mecanismo de generación automática de eventos de JavascriptDetectar, entre otra información, en qué navegador se está visualizando una página webmediante el objeto NavigatorModificar la URL que se está visualizando en el navegador mediante el objeto Location.Simular el funcionamiento de los botones "Atrás" y "Adelante" del navegador mediante elobjeto History.


3. El objeto Window

3.1 El objeto windowComo se ha dicho, el objeto window es el más importante. A partir de él se pueden crear nuevos objetoswindow que serán nuevas ventanas ejecutando el navegador. Tales ventanas se pueden controlar desde laventana padre. Además permite cerrar ventanas, actúa sobre los marcos, puede sacar mensajes (de error uotro tipo), confirmación y entrada de datos, y como se ha dicho, mantiene una matriz por cada tipo deelemento que puede haber en un documento, formularios, enlaces, imágenes y marcos.

3.1.1. Apertura de una ventanaHay que tener en cuenta que los actuales navegadores tienen bastante restringida la apertura de ventanasdesde Javascript por culpa de haber abusado para la publicidad mediante pop-ups, por lo que puede sernecesario tener que modificar la configuración del navegador para permitir las ventanas emergentes.

Abrir una ventana a través de Javascript es tan simple como pasar a una instrucción una dirección URL paraque la localice y la cargue:

nuevaVentana=window.open( "dirección URL");

Es muy conveniente asignar la nueva ventana a una variable (en este caso a nuevaVentana) para poder operarposteriormente sobre ella. Sin embargo ese no es el nombre como tal de la ventana, por lo que si en un enlaceponemos:

<a href="direccion.html" target="nuevaVentana">Pulsa</a>

no funcionará.

En realidad, son varios los parámetros que se pasan a una ventana al crearla:

variable=window.open("dirección URL", "nombre de la Ventana","parámetros de apertura" );

donde:

dirección URL es la página que se va a cargar en la nueva ventana.nombre de la ventana es el nombre que se podrá utilizar posteriormente en los target de losenlaces.parámetros de apertura es una cadena que contiene los valores para ciertos atributos de laventana, que son los siguientes: toolbar,location,directories,status,menubar,scrollbars,resizable.

Cada uno de estos atributos puede tomar los valores YES o NO, o bien, 1 ó 0, respectivamente.

Además, podemos darle la anchura y altura en pixels mediante los atributos : width,height.

Para ponerlos todos en la misma cadena se pone el atributo seguido del signo de igual y el valor que tiene. Losatributos se separan entre sí mediante comas. Por ejemplo:

"toolbar=0,location=1,directories=0,resizable=0,width=200,height=100"

Hay que tener cuidado de ponerlos en ese orden y de no dejar espacios entre ellos.

Por ejemplo, abramos una ventana con barra de herramientas, sin posibilidad de escribir una dirección y queno sea redimensionable. En ella vamos a cargar la página "geneura.ugr.es" y la vamos a llamar "segundaPag";la altura será de 200 pixeles.

nuevaVentana=window.open("http://www.digitallearning.es", "segundaPag", "toolbar=yes,location=no,resizable=no,height=200" );

3. El objeto Window


3.1.2. Cerrar ventanasPara cerrar una ventana se utiliza el método close() de las mismas:

variable_de_ventana.close()

Si la ventana a cerrar es la propia, entonces tendremos que usar:

window.close()

He aquí un pequeño ejemplo que pemite abrir una ventana y escribir en ella.

Ejemplo 5.1

<HTML>

<HEAD>

<TITLE>Abriendo y cerrando ventanas con Javascript</TITLE>

<SCRIPT>



</SCRIPT>

<BODY>

<FORM>

<INPUT TYPE="button" VALUE="Abrir" onClick="nueva();"><br>

</FORM>

</BODY>

</HTML>


3. El objeto Window


3.1.3. Mensajes de alerta, confirmaciones y entradasde datos.Aunque para cada una de estas tareas se utiliza un método distinto, las veremos juntas ya que son muysimilares.

Los mensajes de alerta aparecen con el método :

alert( mensaje )

El parámetro mensaje es la cadena que queremos que se visualice. Se puede usar para sacar mensajes deerror, de ayuda, alertar sobre ciertos eventos, etc.

Ejemplo 3.2

<HTML>

<HEAD>

<TITLE>Ejemplo de uso de alert</TITLE>

<SCRIPT>

alert("Bienvenido a mi página web!");

</SCRIPT>

</HEAD>

<BODY>

Soy una página web

</BODY>

</HTML>

Ilustración Ejemplo 5.2

Para obtener una confirmación sobre alguna acción a realizar por el usurario podemos utilizar el método :

confirm( mensaje );

Este método devuelve un valor lógico true o false por lo que puede usarse en una sentencia de asignación otambién en una expresión lógica.

Ejemplo 3.3

<HTML>

<HEAD>

<TITLE>Ejemplo de uso de confirm</TITLE>

<SCRIPT>

if ( confirm("Pulsa OK si eres mayor de edad")) {

alert( "Ya tienes edad para poder conducir un coche!" );

} else {


} else {

alert("Aún tendrás que conformarte con conducir tu motocicleta!" );

}

</SCRIPT>

</HEAD>

<BODY>

Hola

</BODY>

</HTML>

Por último, la adquisición de datos desde teclado se hace a través del método

prompt( mensaje, valor_por_defecto)

El parámetro mensaje es obligatorio, y aunque el valor_por_defecto es opcional es recomendable ponerlosiempre, aunque sea como la cadena vacía. He aquí un ejemplo de página que pide el nombre al usuario:

Ejemplo 5.4

<HTML>

<HEAD>

<TITLE>Ejemplo de uso de prompt</TITLE>

<SCRIPT>

var cadena=prompt( "Por favor, escribe tu nombre", "" );

document.write ("Esta pagina está optimizada para "+cadena );

</SCRIPT>

</HEAD>

<BODY>

Hola,

<SCRIPT>

document.write(cadena+"<p>");

</SCRIPT>

</BODY>

</HTML>



3. El objeto Window


3.1.4. Temporizadores.Los temporizadores son sin duda uno de los elementos a los que más juego podemos sacer. Su uso seconsigue gracias a dos métodos: setTimeout y clearTimeout

// Para lanzar el temporizador:

var v_temporizador = setTimeout( instrucciones, tiempo, parametros );

// Para detenerlo en caso de que sea necesario

clearTimeout( v_temporizador );

Ambos métodos, setTimeout y clearTimeout, pertenecen al objeto window.

En realidad, el encargado de lanzar el temporizador y ejecutar alguna acción es setTimeout, por lo que usandosólo este ya podremos generar eventos automáticos. No obstante, si antes de que termine el temporizador (ypor tanto salte el evento) deseamos anularlo podremos hacerlo con clearTimeout

El parámetro instrucciones con que se llama al método setTimeout indica la(s) acción(es) que se ha(n) deejecutar cuando se cumpla el tiempo prefijado. La segunda es dicho tiempo expresado en milisegundos. Encaso de que dichas acciones a realizar sean la llamada a una función, en el tercer parámetro se le puede pasarel conjunto de argumentos que necesitará (en forma de cadena). No obstante, los argumentos se pueden pasardirectamente en la propia llamada a la función, por lo que solo son obligatorios al llamar a setTimeout los dosprimeros parámetros.

Ha de tenerse en cuenta que el temporizador sólo se ejecuta una vez, salvo que una de las sentencias aejecutar sea otro setTimeout. Es decir, para provocar un evento periódicamente hemos de hacer una llamada asetTimeout de forma periódica o bien utilizar dos métodos muy similares a los vistos:

var v_temporizador = setInterval( instrucciones, tiempo, parametros );

clearInterval( v_temporizador );

Mientras setTimeout genera un único evento, setInterval genera un evento cada tiempo milisegundos sinnecesidad de poner otro setInterval dentro de las instrucciones a ejecutar.

A fin de cuentas, se puede conseguir hacer lo mismo con setTimeout que con setInterval, sólo que el primeroes más trabajoso aunque va a funcionar con navegadores antiguos (3.x y anteriores), mientras que setIntervales más cómodo pero sólo funciona con los navegadores 4.x en adelante.

He aquí dos ejemplos del uso de setTimeout; en ellos la única diferencia es la llamada al temporizador dentrode la propia función de respuesta al evento creado por el temporizador. En el primer caso sólo se saca unmensaje de alerta, en el segundo se saca un mensaje cada 5 segundos (hasta 3 como máximo porque si nosería imposible parar la cadena de mensajes).

Ejemplo 3.5

<HTML>

<HEAD>

<TITLE>Primer ejemplo de uso de temporizadores</TITLE>

<SCRIPT>

function mensaje() {

setTimeout("alert('Este mensaje ha salido a los 5 segundos');",5000);

}

</SCRIPT>

</HEAD>

<BODY onLoad="mensaje();">

Hola

</BODY>

</HTML>


He aquí el segundo ejemplo:

Ejemplo 5.6

<HTML>

<HEAD>

<TITLE>Segundo ejemplo de uso de temporizadores</TITLE>

<SCRIPT>

var numMensaje=0;

function mensaje() {

if( numMensaje<3 ) {

setTimeout("alert('mensaje numero '+numMensaje);mensaje();",5000);

numMensaje++;

}

}

</SCRIPT>

</HEAD>

<BODY onLoad="mensaje();">

Hola

</BODY>

</HTML>

Así pues, cada temporizador que se establezca con setTimeout se ejecuta una sola vez.

Como ya se ha indicado, existe una forma de parar la cuenta atrás de un temporizador, esto es, de anularlo.Esta forma consiste en usar el método clearTimeout (o bien clearInterval si el temporizador se lanzó sonsetInterval). A este método ha de pasársele un identificador conteniendo la variable en la que se almacenótemporizador al lanzarlo el temporizador.

De esta forma podríamos poner:

...

var tempor;

function activa() {

...

tempor=setTimeout("alert('Hola');",1000);

...

}

...

...

function desactiva() {

...

clearTimeout( Tempor );

...

}

...

Como se ve, si estos métodos son usados en la misma ventana en los que se van a visualizar los resultados,no es necesario poner que pertenecen al objeto window.

El siguiente ejemplo muestra cómo se puede mostrar la hora del sistema actualizada con los métodossetTimeout y clearTimeout:

Ejemplo 5.7

<HTML>

<HEAD>

<SCRIPT>

// La función hora toma la hora del sistema. Es actualizada cada segundo

function hora() {

var h=new Date();

document.f1.hora.value=((h.getHours()<10)?"0":"")+h.getHours()+":";

document.f1.hora.value+=((h.getMinutes()<10)?"0":"")+h.getMinutes()+":";

document.f1.hora.value+=((h.getSeconds()<10)?"0":"")+h.getSeconds();

setTimeout( "hora();", 1000 );

}


</SCRIPT>

</HEAD>

<BODY>

<FORM name="f1">

Hora: <INPUT TYPE="text" NAME="hora" SIZE="8"><BR>

</FORM>

<SCRIPT>hora()</SCRIPT>

</BODY>

</HTML>


Javascript Extracto Tema3

Documents

Transcript of Javascript Extracto Tema3