Codificación aprenderaprogramar.com: CU01174E
MÉTODOS DE WINDOW
Hemos visto distintas propiedades del objeto window, que a su vez se constituyen en objetos que disponen de sus propias propiedades y métodos. Ya conocemos muchas de las propiedades y métodos del objeto window, pero vamos ahora a repasar algunas y estudiar otras nuevas.
Un objeto window representa una ventana cuya organización interna es conforme al DOM (document object model). En un navegador donde tengamos abiertas varias pestañas, cada pestaña equivale a un objeto window que tiene su propia propiedad document y con el que podemos trabajar por separado. Desde esta perspectiva, cada pestaña es un objeto window. No obstante, hay algunos métodos que sólo se pueden aplicar sobre ventanas abiertas mediante JavaScript y no a la ventana principal de navegación del usuario.
No tiene interés conocer de memoria cuáles son todos los métodos de los objetos window, pero sí al menos tener una idea o referencia que nos permita buscar información cuando nos resulte necesario.
Vamos a citar aquí algunos de los métodos de los objetos window. Cuando hablamos de dimensiones, posicionamiento y coordenadas, pueden obtenerse resultados extraños si se trabaja con más de una pantalla (por ejemplo un portátil y una pantalla auxiliar).
MÉTODO |
UTILIDAD |
EJEMPLOS aprenderaprogramar.com |
alert (mensaje) |
Muestra una ventana de diálogo con la cadena especificada o con la conversión a string del objeto pasado como parámetro y un botón “Aceptar” |
alert('hola usuario'); |
confirm (mensaje) |
Abre un cuadro de diálogo con un mensaje y dos botones, Aceptar y Cancelar. Devuelve un valor booleano: true si se pulsa aceptar o false si se pulsa cancelar. |
if (window.confirm("Va a salir de la aplicación ¿Desea salir realmente?")) { window.alert('Gracias por visitarnos'); } // Si usuario pulsa aceptar se cumple la condición |
clearInterval (referenciaTimer) |
Ya estudiado. Ver entregas anteriores. |
Ya estudiado. Ver entregas anteriores. |
clearTimeout (referenciaTimer) |
Ya estudiado. Ver entregas anteriores. |
Ya estudiado. Ver entregas anteriores. |
open (opURL, opName) |
Uso habitual var nuevaVentana = window.open (…) donde nuevaVentana es una referencia al objeto window que se crea. opURL es un parámetro opcional, url a cargar en una nueva pestaña. opName nombre opcional que puede usarse para fijar atributo target en un link. |
var nuevaVentana = window.open ('http://aprendeaprogramar.es', 'miNombre'); //Si no se especifica url de destino, se abre una pestaña en blanco |
open (opURL, opName, opParametros) |
Uso habitual var nuevaVentana = window.open (…) donde nuevaVentana es una referencia al objeto window que se crea. opURL es un parámetro opcional, url a cargar en la nueva ventana. opName: nombre, opcional, puede usarse para fijar atributo target en un link. opParametros es una lista de parámetros como left ó top para posición, height o width para dimensiones, outerHeight, outerWidth, innerHeight, innerWidth, menubar, toolbar, location, resizable, scrollbars, status, titlebar… |
var nuevaVentana = window.open ('http://aprendeaprogramar.es', 'miNombre', ', , resizable=true, menubar=yes'); // Puede haber diferencias entre navegadores en la respuesta a algunos de los parámetros |
close() |
Cierra una ventana. Sólo se pueden cerrar ventanas que hayan sido abiertas por un script. No es posible cerrar la ventana principal del navegador por no abrirse por un script. |
nuevaVentana.close(); //Cierra la ventana |
moveBy (valorX, valorY) |
Desplaza el objeto window una distancia valorX en horizontal y valorY en vertical, en píxeles, respecto de su posición inicial (movimiento relativo). No se pueden desplazar ventanas no creadas con scripts. |
nuevaVentana.moveBy(200, 200); nuevaVentana.focus(); // Si no usamos focus() la ventana puede perder el foco y no ser visible. Si la ventana contiene una url que no pertenece al mismo directorio-dominio que la ventana madre podemos obtener un error de tipo Error: Permission denied to access property 'moveBy' |
focus() |
Pone el foco en una ventana que lo ha perdido |
nuevaVentana.focus(); |
moveTo(coordX, coordY) |
Coloca el objeto window en una posición valorX en horizontal y valorY en vertical, en píxeles, respecto de la esquina superior izquierda de la pantalla. No se pueden desplazar ventanas no creadas con scripts. |
nuevaVentana.moveTo(0, 0); nuevaVentana.focus(); // Si no usamos focus() la ventana puede perder el foco y no ser visible. |
print() |
Abre el cuadro de diálogo para imprimir por impresora el contenido de la ventana |
window.print(); |
prompt(msg, opValorDefecto) |
Muestra un cuadro de diálogo pidiendo una entrada al usuario y, opcionalmente, un valor de defecto. Devuelve un objeto String con el contenido introducido por el usuario, o null si se pulsa la tecla cancelar. Si se pulsa aceptar sin introducir nada retorna una cadena vacía. |
var persona = prompt("¿Cuál es tu nombre?", "Barack Obama"); if (persona != null) {alert("Hola " + persona);} //Por ejemplo <<Hola Pedro>> |
resizeBy (varX, varY) |
Modifica el tamaño de la ventana agrandándola o empequeñeciéndola en la cantidad de pixels indicada por varX para la dimensión horizontal o varY para la dimensión vertical. No se pueden redimensionar ventanas no creadas con scripts. |
nuevaVentana.resizeBy(250, 250); nuevaVentana.focus(); // Si no usamos focus() la ventana puede perder el foco y no ser visible. |
resizeTo(ancho, alto) |
Modifica el tamaño de la ventana y lo establece a los valores de ancho y alto especificados. No se pueden redimensionar ventanas no creadas con scripts. |
nuevaVentana.resizeTo(100, 100); nuevaVentana.focus(); // Si no usamos focus() la ventana puede perder el foco y no ser visible. |
scrollBy(varX, varY) |
Hace scroll en la ventana en la cantidad de pixels indicada por varX para la dimensión horizontal o varY para la dimensión vertical. |
window.scrollBy(0, 400); //Desplaza el scroll 400 píxeles hacia abajo |
scrollTo(posX, posY) |
Hace scroll hasta dejar como la esquina superior izquierda a posX pixeles del origen en horizontal y posY píxeles en vertical. |
window.scrollTo(0, 400); //Coloca el scroll 400 píxeles por debajo del origen |
scrollByLines(numLin) |
Hace scroll hacia arriba o abajo en el número de líneas especificado. Una línea se corresponde con un párrafo <p>. |
window.scrollByLines(20); |
setInterval(…) |
Ya estudiado. Ver entregas anteriores. |
Ya estudiado. Ver entregas anteriores. |
setTimeout |
Ya estudiado. Ver entregas anteriores. |
Ya estudiado. Ver entregas anteriores. |
stop() |
Detiene la carga de los contenidos de la ventana de la misma manera que si el usuario pulsara el botón para detener la carga en el navegador. |
window.stop(); |
Otros |
blur() quita el foco, btoa('cadena') codifica en base-64 una cadena y atob(referencia) decodifica una referencia codificada en base-64, fullScreen() indica si la ventana está a pantalla completa o no, find('cadena') para buscar una cadena en la ventana, minimize() para minimizar la ventana |
Algunos de estos métodos no son soportados por todos los navegadores. No vamos a ver ejemplos de ellos. |
EJEMPLO Y EJERCICIO
El siguiente código nos sirve al mismo tiempo de ejemplo y de ejercicio. Ejecuta el código y comprueba sus resultados. Luego responde las preguntas y cuestiones que se plantean más abajo.
Nota: si estás trabajando con una sola pantalla, el resultado esperado es que aparezca una nueva ventana que se va moviendo de izquierda a derecha y de arriba abajo con un movimiento sinusoidal (como una onda que sube y baja). Si estás trabajando con varias pantallas, es posible que el único movimiento que veas sea en horizontal. ¿Por qué? Porque habrá un monitor principal y un monitor secundario. Con moveTo el navegador puede tratar de realizar el posicionamiento en un monitor que no es el que tú estés usando y en consecuencia no visualizarse lo esperado.
Nota: para comprender los detalles de este ejercicio hace falta tener conocimientos básicos de trigonometría (seno de un ángulo, cálculos usando radianes). Si no tienes estos conocimientos no te preocupes: sigue avanzando.
<!DOCTYPE html> <html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8"> <script type="text/javascript"> var start = 0; var positionY = window.innerHeight/2-125; var nuevaVentana; var controlSinusoidal=0; window.onload = function () { var ejemplo = document.getElementById('ejemplo'); ejemplo.addEventListener("click", ejecutarEjemplo); }
function ejecutarEjemplo () { nuevaVentana = window.open ('', 'miNombre', 'width=250, height=250, resizable=true, menubar=yes'); nuevaVentana.document.write('<h1>Aprenda a programar ahora. Aproveche la oportunidad</h1>'); nuevaVentana.focus(); nuevaVentana.moveTo(0,positionY); nuevaVentana.setInterval( sine, 1000/30 ); }
function sine(){ controlSinusoidal = controlSinusoidal + Math.PI/256; positionY = 100*Math.sin(controlSinusoidal); start += 2; nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY); }
</script> </head> <body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div> <div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div> </body> </html> |
Preguntas y cuestiones a desarrollar:
a) ¿Qué representa la variable start? ¿Qué significado tiene que su valor inicial sea cero?
b) ¿Qué representa la variable positionY? ¿Qué significado tiene que su valor inicial sea window.innerHeight/2-125 ?
c) ¿Con qué frecuencia (cada cuánto tiempo) se produce el refresco o redibujado de la pantalla?
d) ¿Cuántos píxeles se desplaza hacia la derecha la ventana en cada refresco de pantalla que realiza el navegador?
e) La base matemática del movimiento que describe la ventana es el movimiento ondulatorio. ¿Por qué la ventana sube y baja?
f) Modifica el código para que cuando la ventana llegue al lateral derecho de la pantalla se detenga su movimiento y aparezca un mensaje (alert) con el texto ¡Se terminó!
g) Modifica el código para que cuando la ventana llegue al lateral derecho de la pantalla haga un efecto de “rebote” y empiece a moverse en sentido opuesto al que venía (es decir, subiendo y bajando pero ahora de derecha a izquierda), hasta llegar al lateral izquierdo y volver a rebotar, y así indefinidamente….
Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.