Tutorial JavaScript

Introducción al manejo de ventanas

El modelo de objetos: ventanas y marcos

Hasta ahora hemos aprendido:
Como agregar JavaScript a sus páginas HTML
Cómo usar cajas de dialogo y variables para almacenar y utilizar los ingresos por parte del usuario
Como escribir HTML a una página Web usando JavaScript
Permitir que JavaScript tome decisiones usando la sentencia if-then-else
Como hacer que sus páginas Web reaccionen a las acciones de los usuarios usando eventos de encadenamiento
Como hacer un intercambio básico de imágenes.

 

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.

<<<Anterior - Siguiente>>>


¡Visita también estos sitios interesantes!

Sitio alojado en Yaia.com