Portada
CONTENIDOS
HTML
- Tutorial
de HTML
- Artículos de HTML
- Enlaces relacionados
- Software para HTML
CSS
- Introducción
a las Hojas de Estilo - CSS
- Artículos de CSS
JAVASCRIPT
- Tutorial
de JavaScript
- Artículos de JavaScript
DISEÑO
Y ESTILO
- Artículos
de diseño, estilo, usabilidad y accesibilidad.
- Efectos con Paint
Shop Pro
PROMOCION
WEB
- Artículos
relacionados con la promoción de páginas web
ENTREVISTAS
- Emilio
Márquez
- Joaquín Gracia M.
- Adrian Hall
NOTICIAS
para Webmasters
FOROS
(en obras)
|
JAVASCRIPT
> TUTORIAL DE JAVASCRIPT
JERARQUIA
DE OBJETOS EN JAVASCRIPT - OBJETO WINDOW
El
objeto WINDOW representa una ventana o marco del navegador.
Es el elemento raíz de la estructura de objetos de cada página
HTML.
Tiene
definidos los eventos: onBlur, onDragDrop,
onError, onFocus, onLoad,
onMove, onResize, onUnload.
Propiedades
del objeto WINDOW:
| Arrays
de elementos contenidos en la ventana actual |
| frames |
Array
de marcos (frames) de la ventana actual |
| Otros
atributos |
| closed |
Vale
true si esa ventana ha sido cerrada |
| defaultStatus |
Mensaje
por defecto que se muestra en la barra de estado de esa ventana |
| document |
Objeto
document asociado a la ventana |
| history |
Historial
de URLs visitadas |
| innerHeight |
Altura
del área de contenido de la ventana (en pixels) |
| innerWidth |
Ancho
del área de contenido de la ventana (en pixels) |
| length |
número
de marcos en la ventana (equivalente a frames.length) |
| location |
Objeto
location asociado a la ventana. Contiene información sobre
el URL actual. |
| locationbar |
Barra
de dirección (URL) del navegador. Contiene a su vez la propiedad
'visible' que indica si se muestra o no la barra en la ventana actual. |
| menubar |
Barra
de menú del navegador. Contiene la propiedad 'visible' que
indica si se muestra o no la barra en la ventana actual. |
| name |
Nombre
de la ventana |
| opener |
Ventana
que abrió la ventana actual a través del método
open(). Por ejemplo, para saber el nombre de dicha ventana: nombre=window.opener.name; |
| outerHeight |
Altura
de la ventana en pixels |
| outerWidth |
Ancho
de la ventana en pixels |
| pageXOffset |
Posición
horizontal (en pixels) de la página con respecto a la ventana |
| pageYOffset |
Posición
vertical (en pixels) de la página con respecto a la ventana |
| parent |
Representa
el nombre de la ventana o marco que contiene a la ventana actual |
| personalbar |
Barra
de directorios del navegador |
| scrollbars |
Barras
de desplazamiento del navegador |
| self |
Representa
la ventana actual |
| status |
Mensaje
de la barra de estado |
| statusbar |
Barra
de estado de la ventana |
| top |
Representa
la ventana de nivel superior (raíz) en una estructura de marcos |
| window |
Representa
la ventana actual (como self) |
Resumen
de métodos del objeto WINDOW:
| Métodos |
| alert |
Muestra
una ventana de mensajes. Ejemplo:
if
(numero>10) alert ("Fuera de rango"); |
| back |
Carga
la URL anterior de la lista del objeto HISTORY correspondiente a
la ventana de nivel superior:
window.back(); |
| clearInterval |
Cancela
un temporizador iniciado con setInterval |
| clearTimeout |
Cancela
un temporizador iniciado con setTimeout |
| close |
Cierra
la ventana especificada (dependiendo de la seguridad implementada
en cada navegador puede que sólo funcione con ventanas abiertas
con el método open):
otraventana
= window.open("")
otraventana.close () |
| find |
Busca
una cadena de texto en el contenido de la ventana especificada:
find
(cadena, mayusculas, siguiente)
Si
'mayusculas' es true, se lleva a cabo una búsqueda que tiene
en cuenta mayúsculas y minúsculas. Si 'siguiente'
es true, se busca la siguiente coincidencia.
Si
no se especifica 'cadena', el navegador lanza la ventana de búsqueda.
La función devuelve true si se encontró la cadena. |
| confirm |
Muestra
una ventana de confirmación con los botones OK y CANCEL. Devuelve
'true' si el usuario pulsa OK y 'false' en caso contrario. |
| focus |
Asigna
el foco a un objeto |
| forward |
Carga
la siguiente URL de la lista del objeto HISTORY |
| handleEvent |
Llama
a la función encargada de manejar el evento especificado |
| home |
Carga
la URL definida como 'HOME' en el navegador |
| moveTo |
Mueve
la ventana a las coordenadas especificadas:
window.moveTo(25,10); |
| open |
Abre
una nueva ventana del navegador [*] |
| print |
Imprime
el contenido de la ventana |
| resizeBy |
Redimensiona
la ventana moviendo la esquina inferior derecha a las coordenadas
especificadas:
window.moveTo
(100,100);
// redimensionar a 400x400 pixels
window.resizeBy (500, 500); |
| resizeTo |
Redimensiona
la ventana a los nuevos valores de ancho y alto:
//
redimensionar a 400x400 pixels
window.resizeTo (400, 400); |
| scrollBy |
Desplaza
el contenido de la ventana la cantidad indicada |
| scrollTo |
Desplaza
el contenido de la ventana |
| setInterval |
Establece
un temporizador cíclico que se encarga de evaluar una expresión
regularmente [*] |
| setTimeout |
Establece
un temporizador que evalúa una expresión una vez transcurrido
el tiempo asignado [*] |
| stop |
Detiene
el proceso de carga de la página actual |
El
método open se utiliza para abrir nuevas ventanas
del navegador. Los parámetros son:
open
( URL, nombre_de_la_ventana, opciones);
Las
opciones se especifican mediante una secuencia de pares 'parametro=valor'
separados por comas (sin espacios en medio):
| Algunas
opciones del método open() |
| dependent |
Crea
una ventana hija de la ventana actual. Esta ventana se cerrará
automáticamente cuando lo haga su ventana padre. |
| height |
Altura
de la ventana (en pixels) |
| location |
Si
es 'yes', crea una entrada para las direcciones (URLs) en la nueva
ventana. |
| menubar |
Si
es 'yes', crea una barra de menú en la nueva ventana. |
| resizable |
Si
es 'yes', el usuario podrá redimensionar la ventana. |
| scrollbars |
Si
es 'yes', aparecerán barras de desplazamiento en la nueva ventana
(cuando el documento supere las dimensiones de la misma). |
| status |
Si
es 'yes', la nueva ventana tendrá barra de estado. |
| titlebar |
Si
es 'yes', aparecerá la barra de título en la nueva ventana. |
| toolbar |
Si
es 'yes', la ventana tendrá barra de herramientas. |
| width |
Ancho
de la ventana (en pixels) |
Por
ejemplo, para abrir una página en una nueva ventana:
window.open
("pagina2.html", "ventana2" );
Una
nueva ventana con barra de menu, pero sin barra de estado, ni entrada
para direcciones:
window.open
("pagina2.html", "ventana2", "status=no, location=no,
menubar=yes");
Si
no se especifica URL, la ventana se abre sin cargar ninguna página.
Si la ventana ya existe, no se borra la página que está
cargada en ese momento.
El
siguiente ejemplo abre una nueva ventana y construye su contenido de
forma dinámica (on-the-fly):
<html>
<head>
<script language="JavaScript">
<!--
function abreNuevaVentana(nombreVentana)
{
// abrir una nueva ventana con el nombre pasado
como parámetro
// no se especifica una URL
miVentana= open("", nombreVentana,"width=500, height=400,
status=yes, toolbar=yes ,menubar=yes");
// Abre la corriente de datos del documento para
escribir
miVentana.document.open();
// Crea el documento
miVentana.document.write("<html><head><title>On-the-fly");
miVentana.document.write("</title></head><body>");
miVentana.document.write("<h1>Creando documentos al vuelo</h1>");
miVentana.document.write("<p> </p>");
miVentana.document.write("<p>El contenido es dinámico</p>");
miVentana.document.write("</body></html>");
//
cierra la corriente de datos del documento
miVentana.document.close();
}
// -->
</script>
</head>
<body>
<form><input type=button value="On-the-fly" onClick="abreNuevaVentana("nueva")"></form>
</body>
</html>
Los métodos setInterval y setTimeout
permiten establecer temporizadores en la ventana. Por
ejemplo, el siguiente código muestra un mensaje transcurridos
10 segundos utilizando el método setTimeout:
<html>
<head>
<script language="javascript">
function temporizador()
{
window.setTimeout ("alert('Mensaje')", 10000);
}
</script>
</head>
<body
bgcolor="#FFFFFF">
<form method="post" action="">
Muestra un mensaje dentro de 10 segundos
<input type="button" name="Button" value="ok"
onClick="temporizador();">
</form>
</body>
</html>
Para establecer temporizadores cíclicos se utiliza
el método setInterval. Por ejemplo, para establecer un aviso
cada 5 segundos:
window.setInterval
("alert ('Han pasado 5 segundos')", 5000);
[
Siguiente capítulo: Jerarquía
de objetos en JavaScript - Objeto DOCUMENT ]
| CONTENIDOS
DEL TUTORIAL DE JAVASCRIPT |
| |
Fuente
original: (C) Epsilon
Eridani
|
|