Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

5. Acceso al DOM (VI)

5.6 Ventanas

Ventanas de alerta.

Las ventanas de alerta son aquellas en las que sale un mensaje en una ventana alertando al usuario sobre algún aspecto de la página. Dos de estas ventanas ya las hemos visto; son las ventanas alert() y prompt().

Hay también otra ventana de alerta, confirm(). Esta ventana muestra el texto que le pasamos dentro del paréntesis, y despues muestra dos botones con las opciones Aceptar y Cancelar, al pulsar nos devuelve el valor true si pulsamos sobre aceptar y false si pulsamos sobre Cancelar o si cerramos la ventana sin dar respuesta. El siguiente código muestra el funcionamiento de la ventana:

elige = confirm("Acepta o Cancela");
alert("el valor obtenido es " + elige);

Y podemos verlo funcionando en el siguiente párrafo:

Pulsa para ejemplo de confirm()

Historial de páginas

Mediante Javascript podemos tener acceso a las páginas visitadas anteriormente o volver a la página de origen si estamos en una página en la que hemos retrocedido desde otra, al igual que con los botones adelante y atrás del navegador. Para ello utilizaremos el método history.go(). Entre paréntesis pondremos el número de páginas que queremos avanzar o retroceder, para retroceder las pondremos en negativo (con el signo menos); así por ejemplo para retroceder a la página anterior escribiremos:

<p onclick="history.go(-1)">Ir a página visitada anteriormente</p>

Podemos verlo funcionando en el siguiente párrafo

Ir a página visitada anteriormente

Ventanas emergentes.

El método open() del objeto window permite abrir una nueva ventana con otra página en el navegador, tal como si abrieramos un enlace. Sin embargo hay varias diferencias, ya que nos permite controlar varios parámetros de la ventana, y además podemos abrirla cuando se produzca un evento, o nada más cargarse la página, según el código javascript. Puede utilizarse para crear ventanas emergentes.

Al utilizar el método o funcion open(), dentro del paréntesis debemos poner tres parámetros separados por comas, y entre comillas, que serán : URL, nombre, y propiedades:

open("URL","nombre","propiedades")

En URL escribiremos la ruta de la página que aparecerá en la nueva ventana.

En "nombre" escribiremos un nombre para identificar la nueva ventana. Este puede ser utilizado como valor de un atributo target

En "propiedades" se escribirán una serie de propiedades que puede tener la ventana. Son todas opcionales, pero son las que indican cómo va a aparecer la ventana. De no ponerlas aparecerá como una ventana normal abierta mediante un enlace. Las propiedades las pondremos dentro de las comillas, y separadas por comas. En realidad son como una especie de atributos, a los cuales se les asigna un valor mediante el signo igual ( = ), que indican cómo debe aparecer la ventana- Estos son:

• toolbar[=yes|no]: Mostrar o no la barra de herramientas.
• statusbar[=yes|no]: Mostrar o no la barra de estado.
• titlebar[=yes|no]: Mostrar o no la barra de título.
• menubar[=yes|no]: Mostrar o no la barra de menús
• scrollbars[=yes|no]: Mostrar o no las barras de desplazamiento.
• resizable[=yes|no]: Establece si se puede redimensionar el tamañó de la ventana. Sólo funciona en Internet Explorer.
• width=pixels: Ancho de la ventana en pixels
• height=pixels: Alto de la ventana en pixels
• top=pixels: Distancia en pixels desde el borde superior de la pantalla al borde superior de la ventana.
• left=pixels: Distancia en pixels desde el borde izquierdo de la pantalla al borde izquierdo de la ventana.

Los valores por defecto para las propiedades no suelen mostrar las barras de herramientas, y las dimensiones de las ventanas dependen de cada navegador.

Veamos una sencilla página de ejemplo en el que al pulsar en el texto se abren nuevas ventanas, este es su código fuente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ventanas emergentes.</title> 
</head>
<body>
<h1>Ventanas emergentes:</h1>
<h2>Haz click en el texto para que aparezca la ventana emergente.</h2>
<h3><span onclick="open('http://www.google.es','Google','toolbar=yes,statusbar=yes,width=600,height=400')">
    Abrir Google</span></h3>
<h3><span onclick="open('http://www.yahoo.es','Yahoo','titlebar=yes,resizable=no,scrollbars=yes,width=500,height=300,top=100,left=200')">
    Abrir Yahoo</span></h3> 
<h3><span onclick="open('http://es.wikipedia.org','Wikipedia','titlebar=yes,toolbar=yes,menubar=yes,status=yes,scrollbars=yes,top=150.left=200')">
    Abrir Wikipedia</span></h3>
</body>
</html>

Para ver esta página de ejemplo en tu navegador pulsa en el siguiente enlace:

Ejemplo de ventanas emergentes.

Observa cómo los parámeros que controlan el aspecto de la ventana se escriben todos dentro del tercer argumento que se le pasa a la función, se escriben seguidos y separados por comas.

No debemos abusar de las ventanas emergentes haciendo que se abran sin avisar, pues pueden resultar molestas y dar la sensación al usuario de que no controla la página.

Otras propiedades de la página

Hay otras propiedades que puede tener la página que permiten ver o modificar algunas partes de la misma. algunas de ellos son bastante raras y no los vamos a tratar. trataremos aquellas que pueden ser más utilizadas para el manejo de páginas dinámicas.

Algunas de ellas dependen directamente del objeto window, otras dependen de otros objetos dependientes de window como pueden ser document, screen, navigator. Veamos cuales son:

• document.bgColor: acceso o modificación del color de fondo de la página. Éste puede anotarse en notación de nombres o en hexadecimal.
• document.fgColor: acceso o modificación del color del texto de la página. Éste puede anotarse en notación de nombres o en hexadecimal.
• location: accede a la URL o dirección de la página. Como depende directamente del objeto window, se escribe simplemente así. Más sobre este método en la página 8.3 Funciones eval y location de este mismo manual.
• document.title: Acceso o modificación del título de la página (el que aparece en la pestaña del navegador).
• document.lastModified: Acceso a la fecha de la última modificación de la página.
• navigator.userAgent: Acceso a la información sobre el navegador y el sistema operativo que se está usando.
• screen.width: Acceso al ancho de resolución de pantalla que se está usando.
• screen.height: Acceso al alto de resolución de pantalla que se está usando.

Vemos a continuación una página de ejemplo en la que se usan estas propiedades, y puede verse el efecto que pueden producir. Este es su código fuente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Propiedades de la página</title> 
<style type="text/css">
#caja1  { width: 400px; height: 200px; border: 1px black solid; float: right;  }
p  { font-size: 1em; font-family: arial;  }
</style>
<script type="text/javascript">
function amarillo() { //cambiar color de fondo
         document.bgColor = "yellow"; 
         }
function blanco() { //restablecer color de fondo
         document.bgColor = "white"; 
         }
function azul() { //cambiar color de texto
         document.fgColor = "blue"; 
         }
function negro() { //restablecer color de texto
         document.fgColor = "black"; 
         }
function dominio(){ //ver dominio o URL
         var nombre = location;
         var texto = document.getElementById("caja1");
         texto.innerHTML = nombre;		 
         }
function titulo(){ //ver el título 
         var nombre = document.title
         var texto = document.getElementById("caja1");
         texto.innerHTML = nombre		 
         }
function cambiaTitulo() { //cambiar el título
         var nombre = "Otras propiedades de las páginas";
         document.title = nombre;
         var texto = document.getElementById("caja1");
         texto.innerHTML = "Nuevo título de la página = " + nombre;
         }
function fecha(){ //ver fecha última modificación
         var nombre = document.lastModified;
         var texto = document.getElementById("caja1")
         texto.innerHTML = nombre;	 
         }
function navegador(){ //ver navegador y S.O.
         var nombre = navigator.userAgent;
         var texto = document.getElementById("caja1");
         texto.innerHTML = nombre; 
         }
function pantalla(){ //ver resolución de pantalla
         var ancho = screen.width;
         var alto = screen.height;
         var texto = document.getElementById("caja1");
         texto.innerHTML = ancho + " x " +  alto + " px.";
         }
</script>
</head>
<body>
<h1>Propiedades de la página. entre guiones va escrita la propiedad usada. Pulsa para: </h1>
<div id="caja1"></div>
   <p onclick="amarillo()">Color de fondo amarillo  - document.bgColor -</p>
   <p onclick="blanco()">Volver a color de fondo blanco - document.bgColor -</p>
   <p onclick="azul()">Color de texto azul - document.fgColor - </p>
   <p onclick="negro()">Volver a color de texto negro - document.fgColor - </p>
   <p onclick="dominio()">Ver el dominio de la página - location -</p>
   <p onclick="titulo()">Ver el título de la página - document.title -</p>
   <p onclick="cambiaTitulo()">Cambiar el título de la página - document.title - </p>
   <p onclick="fecha()">Fecha de la última modificación - document.lastModified</p>
   <p onclick="navegador()">Navegador - navigator.userAgent - </p>
   <p onclick="pantalla()">Resolución -screen.width - screen.height -</p>
</body>
</html>

Para ver esta página de ejemplo en tu navegador pulsa en el siguiente enlace:

Ejemplo de otras propiedades de la página.

Metodos y propiedades de window

Para ver cuales son los métodos y propiedades del objeto windows nos remitimos al manual de DOM, en su página 2 El objeto window. Ahí vemos una lista de los principales métodos y propiedades.

Hasta aquí las formas de acceder a los diferentes elementos de la página. Nos falta por ver los formularios, los cuales veremos más adelante. En el próximo tema veremos cómo interactuar con el usuario por medio de los eventos

Eventos.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com