Hemos
visto muchas cosas, pero no nos hemos detenido a describir porque
funcionan. En la última lección, por ejemplo,
les mostré que window.document.monkey_image.src=
"happy_mono.gif" intercambiará happy_mono.gif
dentro de una imagen llamada monkey_image. Pero, ¿qué
es esto de window.document?. Y, ¿de
donde viene .src?. Similarmente, ha visto document.writeln("mono").
Pero, ¿porqué es document.writeln y no simplemente
writeln()?. La respuesta a las preguntas de arriba se pueden
encontrar en el Modelo de Objeto del Documento JavaScript. El
DOM es el modo que JavaScript describe las páginas Web
y es el corazón de toda la programación JavaScript.
Esta lección le enseñará sobre el DOM y
en la siguiente lección le ensañaré el
resto de la programación básica. Al final de las
dos lecciones, conocerá las principales ideas alrededor
de JavaScript. Todo el resto es aprender detalles, trucos y
otras cosas.
Lección 3
Introducción
al manejo de ventanas
Antes
de aprender como abrir una ventana en JavaScript, debería
conococer como abrir una usando HTML. En la mayoría de
los navegadores recientes, puede abrir una nueva ventana usando
una sentencia href. Este es el código:
<a
href="nueva_ventana.html" target="nueva_ventana">encadenamiento</a>
Abrirá
una nueva ventana cuyo nombre será nueva_ventana. La
cosa importante a saber sobre ventanas abiertas por "targeted
links" es que la ventana de arriba ahora tiene el nombre
"nueva_ventana" asociada con ella. Si tiene otro href
que use "nueva_ventana" como destino (target) y aún
no ha cerrado la ventana "nueva_ventana", cualquier
URL que ponga se abrirá en la misma ventana.
Para
el propósito de esta lección, voy a llamar a la
ventana abierta a través de "target"
nueva_ventana.
Ejecute el ejemplo 20 y analice sus distintos componentes.
Manejo
de ventanas en JavaScript
Abrir
ventanas en HTML es muy sencillo, pero también es limitado;
el navegador controla la apariencia de la ventana. No tiene
control sobre el tamaño o su apariencia. Felizmente,
JavaScript le da estos controles, así es como:
window.open("URL","nambre","rasgos");
Esta
sentencia abre una ventana con la URL que se encuentra como
primer parámetro, una llamada común es http://www.sitio.com.ar/indice/
o simplemente "ayuda.php".
El
segundo parámetro de la llamada al método es el
nombre de la ventana. Esto es como el nombre
que hemos visto anteriormente. Si abre una ventana y ya hay
una ventana abierta con el mismo nombre su URL se enviará
a dicha ventana.
El
tercer parámetro, rasgos, es
una lista de los diferentes componentes que puede tener una
ventana. Es un parámetro opcional, veamos algunos ejemplos
con los primeros dos parámetros antes de entrar a los
rasgos.
Ejecute el ejemplo 21
Veamos
como se hace esto. Esta es la línea:
<a
href="#" onClick="window.open('ejemplo21_1.html','javascript_1');
return false;">Esta es una ventana llamada javascript_1</a>.
Cuando
presiona sobre este enlace se abre una nueva ventana llamada
javascript_1 y la página HTML pagina ejemplo21_1.html
se pone en dicha página. Debido a que los rasgos son
opcionales, puede no ponerlos, tal cual lo hemos hecho acá.
Por lo tanto la ventana será una por defecto.
Note
que la llamada para abrir la ventana se pone en la sentencia
onClick. No es obligación poner la llamada a window.open()
dentro de onClick, fue conveniente hacerlo así en este
ejemplo. Pronto veremos ejemplos de window.open() dentro del
rótulo <script>. El segundo enlace es igual que
el primero, sólo abre una ventana con un nombre diferente
y carga una página HTML diferente:
<a
href="#" onClick="window.open('ejemplo21_2.html','javascript_2');
return false;">
Esta
es una ventana llamada javascript_2</a>.
El
tercer enlace abre una página HTML dentro de la primer
ventana. Esto funciona porque el tercer enlace abre una ventana
con el mismo nombre de la primer ventana.
<a href="#" onClick="window.open('javascript_window_3.html','javascript_1');
return false;">
Esta
es otra página HTML, pero sobre javascript_1</a>.
Ahora
comienza la diversión. Podemos jugar con los rasgos para
que la apariencia de nuestra ventana cambie.
