Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 20
Visitas el mes pasado: 72
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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()
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
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.
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.
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
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