Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

última modificación: 13-07-2018.

Visitas este mes: 20

Visitas el mes pasado: 72

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF


Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




5. Acceso al DOM (VI)

5.6 Ventanas

javascript

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:

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:

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.



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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