Chapter 9 Conclusions and Future Work
9.2 Future work recommendations
El objeto global window provee varios métodos y otras propiedades para manipular el navegador, ventanas, direcciones, el historial y similares.
5.6.2.1 Temporizadores y animaciones
El método window.setTimeout(code, delay) ejecuta el código JavaScript enviado en el parámetro code, delay milisegundos después de que se hace la invocación. Retorna un identificador opaco que necesitará el programador si desea cancelar dicho temporizador con el método window.clearTimeout(). El código es invocado sólo una vez. Si se quiere que ocurra
repetitivamente, el código en code debe volver a establecer un setTimeout() o bien usar el método timer =
window.setInterval(code, period), el cual ejecuta el código code repetitivamente en intervalos de period milisegundos, hasta que se invoque window.clearInterval(timer). Esto es muy útil para realizar animaciones, como el siguiente reloj digital.
<html xmlns="http://www.w3.org/1999/xhtml">
1.
<head>
2.
<title>Digital clock</title>
3.
<style type="text/css">
4.
body { background: black; margin: 4cm 0; text-align: center; }
5.
#clock { font-size: 6em; color: #151520; text-shadow: 2px 2px 7px lightgray; }
6. </style> 7. </head> 8. 9. <body> 10.
<div id="clock">HH:MM:SS</div>
11.
<script type="text/javascript">
12.
window.setInterval( 'updateClock()', 1000 );
13.
function updateClock()
14.
{
15.
var date = new Date();
16.
document.getElementById('clock').innerHTML = date.toLocaleTimeString();
17. } 18. </script> 19. </body> 20. </html> 21.
Un reloj digital animado con JavaScript. Correr este ejemplo.
En el documento anterior, el elemento con identificador clock de la línea 11 será utilizado para desplegar la hora local del navegador. Cuando el navegador carga el cuerpo de este documento, mostrará el div como de costumbre, aplicándole los estilos que se declararon en la parte superior. Luego encontrará un elemento script y lo ejecutará como es sabido. La invocación a setInterval() en la línea 13 le indica al navegador que debe ejecutar el código updateClock() dentro de 1 segundo, cada segundo. Al ser invocada, la función updateClock() debe cambiar el contenido del <div id="clock">...</div> con el valor actual de la hora. JavaScript requiere una referencia al objeto div que tiene el identificador clock, y la consigue invocando el método document.getElementById() que se estudiará luego. Una vez obtenida la referencia al elemento div, se cambia su contenido con la hora actual en el navegador obtenida en forma de string.
El siguiente ejemplo muestra un texto moverse de izquierda a derecha, en un ancho de 320 pixeles. Esta vez no se modifica el contenido de un elemento particular, sino su posición, lo cual es responsabilidad de la presentación, por lo que el código JavaScript debe modificar el estilo CSS del elemento con identificador text dinámicamente. El estilo de un elemento se accede en JavaScript a través de su propiedad style, la cual es un objeto cuyas propiedades tienen el mismo nombre que las propiedades CSS en notación "camelCase" (margin, marginTop, etc.), y sus valores son siempre un string -esto se estudiará con más detalle luego-. En este ejemplo, cada vez que se invoca, animateText() calcula en la variable global textLeft la nueva posición del texto (líneas 18 y 19); y en la línea 21 asigna el resultado de este cálculo a la propiedad style.left, cuyo efecto es el mismo a haber escrito #text { left: textLeft; } en CSS. Para que esto funcione, el elemento #text debe "flotar" sobre el documento, lo cual se hizo en la línea 6 indicando que su posición es absoluta.
<html xmlns="http://www.w3.org/1999/xhtml">
1.
<head>
2.
<title>Texto animado</title>
3.
<style type="text/css">
4.
body { margin: 0; background: #ccc; color: #C8C8C8; font-size: 3em; }
5.
#text { position: absolute; top: 2em; text-shadow: 1px 1px white, -1px -1px #444; }
6. </style> 7. </head> 8. 9. <body> 10.
<div id="text">Su nombre aquí</div>
11.
<script type="text/javascript">
12.
<!--
13.
window.setInterval( 'animateText()', 50 );
14. var textLeft = 0; 15. function animateText() 16. { 17. textLeft += 5; 18. if ( textLeft > 320 ) textLeft = -320; 19.
var element = document.getElementById('text');
20.
element.style.left = Math.abs(textLeft) + 'px';
21. } 22. --> 23. </script> 24. </body> 25.
Un texto animado con JavaScript para desplazarse en vaivén de izquierda a derecha. Correr este ejemplo.
5.6.2.2 Información del navegador, la ventana y la pantalla
El objeto global window tiene varias propiedades de sólo lectura que informan el tamaño de la ventana, el tamaño del documento y la posición del navegador en el escritorio:
Propiedades para obtener la geometría del navegador
Propiedad Descripción
window.outerWidth,
window.outerHeight Ancho y alto de la ventana del navegador. window.screenX,
window.screenY Posición del navegador en el escritorio del usuario. window.innerWidth,
window.innerHeight
Tamaño del área donde el documento se despliega (también llamada área cliente o viewport. Equivale al tamaño de la ventana del navegador sin las barras de menú, herramientas, scrollbars, etc.
window.pageXOffset, window.pageYOffset
El segmento del documento actualmente desplegado en la ventana del navegador, expresado como la posición de las barras de desplazamiento (scrollbars).
El objeto window.screen provee información sobre la pantalla del usuario, por ejemplo: las dimensiones en pixeles del escritorio (screen.width y screen.height), la profundidad de color en bits por píxel (screen.pixelDepth), el área usable del escritorio sin incluir la barra de tareas (screen.availWidth y screen.availHeight). Con estas propiedades el programador puede escoger qué imágenes presentar, centrar una venana en el escritorio o tareas similares.
El objeto window.navigator contiene información sobre el navegador mismo, como su nombre (navigator.appName), versión (navigator.appVersion), el nombre codificado (navigator.appCodeName, el sistema operativo para el que se compiló el
navegador (navigator.platform), si tiene habilitados los cookies (navigator.cookieEnabled), y la identificación que el browser envía en sus encabezados HTTP (navigator.userAgent). No es recomendable utilizar esta información para escribir funcionalidad dependiente del navegador, sino para propósitos de estadísticas o bitácoras.
5.6.2.3 Abrir y manipular ventanas
JavaScript permite al autor crear nuevas ventanas de navegador en las que puede cargar documentos existentes de su servidor web o generar un nuevo documento dinámicamente. Sin embargo, el abuso que ha cometido la publicidad y otros fines, ha obligado a los fabricantes de navegadores a restringir esta funcionalidad de acuerdo a la política de seguridad, por ejemplo, a permitir abrir ventanas sólo en respuesta a un evento del usuario.
Una invocación al método window.open(url, name, features, repHistory) crea y retorna una referencia hacia una nueva ventana, y por ende, un nuevo objeto window con toda su descendencia de objetos. La nueva ventana cargará un documento si se especifica un url, de lo contrario, tendrá un documento vacío. El parámetro name le da un nombre a la ventana, si ya existe una con ese nombre simplemente se reutiliza, y en tal caso, si repHistory es true el historial de navegación en esa ventana es reemplazado; si es false o se omite, el nuevo documento es simplemente agregado al historial. El siguiente ejemplo crea una pequeña ventana emergente de ayuda cuando se presiona el botón, y la cierra cuando se vuelve a presionar con el método window.close() que cierra gráficamente la ventana pero no destruye el objeto window.
<button id="helpButton" onclick="toggleHelp()">Ayuda</button> <script type="text/javascript">
var helpWindow; function toggleHelp() { if ( helpWindow ) { helpWindow.close(); helpWindow = undefined;
document.getElementById('helpButton').innerHTML = 'Ayuda'; }
else
{
helpWindow = window.open('help.html', 'help_window', 'width=400,height=350,status=yes,resizable=yes');
document.getElementById('helpButton').innerHTML = 'Cerrar ayuda'; }
}
</script>
Abrir una ventana en JavaScript. Correr este ejemplo.
El parámetro features permite especificar el tamaño de la nueva ventana y otras decoraciones gráficas. Si se omite, se le dará tamaño estándar y todas las decoraciones existentes (barra de menú, barra de estado, ...). Algunas combinaciones son restringidas por razones de seguridad, por ejemplo, una ventana muy pequeña o situada en una zona no visible.
El objeto retornado por window.open() se puede manipular como cualquier otro objeto window. El siguiente ejemplo, genera un documento dinámicamente en una nueva ventana.
var subwindow = window.open(); // Create a new window with no content
var subdoc = subwindow.document; // Get its Document object
subdoc.open(); // Start a new document (optional)
subdoc.write("<h1>Hello world!</h1>"); // Output document content
subdoc.close(); // End the document
Nótese que tanto document como window tinen métodos open() y close(). El document.open(url) carga un documento a partir del url o genera uno vacío si se omite url. Invocar a document.write() es seguro en una ventana nueva ya que el
documento se está cargando (parsing). El método document.close() indica al navegador que el documento ha terminado de cargarse (parsing), el cual responde deteniendo la animación de carga. Sino nunca se llama a document.close(), el navegador creerá que está ante un documento incompleto.
El objeto window tiene métodos para mover y redimensionar la ventana, lo cual es una pobre práctica, ya que esto debe ser un privilegio del usuario. Son los siguientes: window.moveTo(x, y) mueve la esquina superior izquierda a las coordenadas dadas; window.moveBy(despX, despY) mueve la ventana tantos pixeles relativos a la posición actual;
El método window.focus() hace que la ventana sea la activa, y window.blur() hace que renuncie a serlo. Es común llamar a focus() después de hacer un window.open(), ya que las ventanas recién creadas no lo tienen por defecto.
Es común querer abrir un documento existente en una nueva ventana y luego hacer que ésta se desplace a diferentes fragmentos del documento dinámicamente. Si los fragmentos están identificados con el atributo id (como en <div
id="frag1">...</div>) o con anclas (<a name="frag2">...</a>), se puede cambiar la ubicación del documento con un una de las siguientes instrucciones:
var subwindow = window.open('help.html', 'help_window');
subwindow.location.hash = "#frag1"; // crea una entrada en el History de subwindow
subwindow.location.replace("#frag1"); // no crea una entrada en el History de subwindow
5.6.2.4 Ubicación del documento
La propiedad window.location de una ventana representa el URL del documento que está desplegado en dicha ventana. Es un objeto que tiene las siguientes propiedades:
Propiedades del objeto window.location
Propiedad Descripción
href Es un string con el texto completo del URL. protocol, host,
pathname, search Representan partes individuales del URL.
reload() Recarga la página como si el usuario lo hiciera en el navegador. replace(url)
Reemplaza el documento actual en la ventana por uno nuevo cuyo URL es dado por parámetro. No genera una entrada en el historial de la ventana, de modo que el usuario no tiene forma de regresar al documento previo.
Al objeto mismo window.location se le puede asignar un string, de la forma window.location = url, que causa el mismo efecto que llamar su método window.location.replace(url), con la diferencia de que se agrega una entrada al historial de navegación de la ventana, de tal forma que el usuario puede retornar al documento previo.
5.6.2.5 Cuadros de diálogo
El objeto window provee tres métodos para desplegar cuadros de diálogo. window.alert(msg) despliega un mensaje y espera que el usuario lo acepte. window.confirm(msg) presenta un mensaje y solicita al usuario que decida si lo acepta o cancela, lo cual se retorna como un boolean. window.prompt(msg, defaultValue) presenta el mensaje msg y espera que el usuario ingrese un string el cual es retornado o null si cancela. Obligatoriamente.
Deben usarse con moderación, o mejor aún, nunca. La mayoría de usuarios se sentirá molesta al experimentarlos y recuerde que ellos tienen el poder de cerrar el navegador. Así que estos métodos son de ligera utilidad para el programador durante el proceso de desarrollo. Hace varios años, el navegador reportaba errores de JavaScript utilizando diálogos, lo cual era impertinente: le reclamaba al usuario errores que no eran de él. Los navegadores han cambiado a ocultar los errores y el programador debe buscarlos en alguna bitácora o similar.