Curso de JAVASCRIPT 2 / 3

Autor:
Luis Marco Gimnez
Agencia Tributaria
Bibliografa:
JavaScript. The Definitive Guide 2 OReilly.
Diseo de pginas web interactivas con
JavaScript 2 Ed. 2 Ra-Ma
Professional JavaScript 2 Wrox

Dpto. de Informtica Tributaria de Madrid

Ao 2003

Colaboradores:
Javier lvarez
Eloy Garca
Instituto de Salud Carlos III de Madrid

Dilogos de ventana
l

Existen, en JS, tres tipos de ventanas:

l
l
l

l
l
l

Alertas
Confirmaciones
Entradas de usuario

Las dos ltimas son funciones que devuelven un

valor.
Los tres tipos son mtodos del objeto window.
Son ventanas modales (excepto en Netscape bajo
plataformas UNIX !!).

Alertas: alert()
l

Visualiza un mensaje al usuario.

El nico botn disponible es el de aceptar.

Sintaxis: alert (cadena-mensaje);

El mensaje en texto plano. Se admiten espacios,

saltos de lnea (\n, \r), algunos caracteres
escapados y caracteres de puntuacin.

Ejemplo alert()

Confirmaciones: confirm()
l
l

Similar a las ventanas alert(), excepto que

proporcionan dos botones: Aceptar y Cancelar.
El dilogo devolver true si se pulsa en Aceptar y
false en caso contrario.
Sintaxis:
valor = confirm (cadena-mensaje);

Ejemplo confirm()

Devuelve true

(I)

Devuelve
false

Ejemplo de confirm (II)

var
varr=(confirm("Pulsa
r=(confirm("Pulsaloloque
quequieras!!!"))
quieras!!!"))??"Bien,
"Bien,has
haspulsado
pulsadoAceptar
Aceptar::
"Oooops,
"Oooops,has
haspulsado
pulsadoCancelar;
Cancelar;
alert(r);
alert(r);

Entradas: prompt()
l
l

l
l
l

Permiten la entrada, por teclado, de datos de

usuario.
Sintaxis:
valor=prompt(mensaje, valorInicial);
Proporciona dos botones: Aceptar y Cancelar.
Pulsando Aceptar se devolver el valor introducido.
Pulsando Cancelar se devolver null,
independientemente del valor tecleado.

Ejemplo prompt()

Entrada de datos
usuario
Valor inicial

Devolver null

Devolver la entrada de
datos

Anidamiento de funciones
l

En JS 1.2 las funciones pueden anidarse.

El mbito de las funciones anidadas es el de su
definicin, no el de ejecucin.

Ejemplo:

function hipotenusa (a, b) {

function cuadrado (x) { return x*x; }
return Math.sqrt(cuadrado(a) + cuadrado(b));
}

Argumentos de una funcin

l

Una funcin define, internamente, un objeto call.

Este objeto define una propiedad llamada

arguments, la cual es un array que contiene los
argumentos pasados en la invocacin a la funcin.

Como array que es, se puede verificar su longitud

con la propiedad length.

Ejemplo de arguments
function max() {
var m=Number.NEGATIVE_INFINITY;
for (var i=0; i<arguments.length; i++)
if (arguments[i]>m) m=arguments[i];
return m;
//El mayor.
}

Arrays
l
l
l
l

Array (o vector): Tipo de datos que almacena piezas

de informacin.
Cada elemento del array es nombrado por su ndice
o apuntador.
Como JS es un lenguaje no tipado, los elementos de
un array puede ser de cualquier tipo.
Incluso un mismo array puede contener distintos
tipos de datos, incluso arrays.

Creacin de Arrays
l
l

En JS un array es un objeto.
Como tal se declaran con el operador new seguido
del constructor Array().
Sintaxis:
var a = new Array( [tamao | elementos] );

Constructor Array()
l

Existen tres formas de invocar al constructor Array():

l
l
l

1. Sin parmetro alguno: Define un array vaco.

2. Con un nico parmetro entero: Define su tamao.
3. Con una lista de parmetros: Lo inicializa.

La longitud de un array puede obtenerse con la

propiedad length, teniendo en cuenta que sus
elementos empiezan en el ndice 0.

Inicializaciones de un Array
l
l
l

var miArray = new Array();

Define un array vaco.
var miArray = new Array(5);
Define un array con 5 elementos, desde 0 hasta 4.
var miArray = new Array(5, 4, 3);
Define un array de 3 elementos con:
miArray[0]=5;
miArray[1]=4;
miArray[2]=3;

Acceso a elementos

El acceso a los elementos individuales de un array

se efecta con el operador [ ].
Sintaxis: variable-array[ndice];

Ejemplos:

valor = a[0];
a[1] *= 3.14;
a[++i]="Hola";
a[a[i]] = a[0];
a[MODELO]="130";

Agregar elementos a un array

l

Los arrays en JS son dinmicos.

En tiempo de ejecucin se puede aumentar el

nmero de elementos, simplemente definiendo para
el array el nuevo elemento.

JS asigna la memoria dinmicamente slo para los

elementos definidos.

Arrays multidimensionales
l

JS no soporta verdaderos arrays

multidimensionales.

La aproximacin que se permite en JS es definir

arrays cuyos elementos sean a su vez arrays.

El acceso a los elementos particulares se realizara

como matriz[x][y].

Creacin multidimensional
l

Ejemplo:
var matriz = new Array([1, 2], [4, 5], [6, 7]);

Longitud total del array:

matriz.length; Devuelve 3.

Acceso a los elementos:

matriz[0]; Devuelve 1,2.
matriz[0][1] Devuelve 2.

Mtodos del objeto Array

join()

split()

sort()

concat()

slice()

splice()

push()

pop()

unshift()

shift()

toString()

toSource()

Aplicados
Aplicadosalalobjeto
objetoarray:
array:
variable-array.metodo();
variable-array.metodo();
Navigator 4 y MSIE 5.5+
JavaScript 1.3 - Navigator

Mtodo join()
l
l

Convierte y devuelve los elementos de un array a un

string concatenados mediante el separador coma.
Se puede especificar un parmetro opcional, de tipo
string, que servir de separador de elementos del
nuevo string.
Ejemplo:
var a = new Array(1, 2, 3);
var s = a.join(); s==1, 2, 3
var s = a.join(..., ); s==1..., 2..., 3

Mtodo split()
l

Devuelve un array a partir de una cadena de

literales separados por comas, o por el delimitador
que se indique como parmetro.
Ejemplo:
var a=Lunes|Martes|Mircoles;
var s=a.split(|);
s[0]==Lunes
s[1]==Martes
s[2]==Mircoles

Mtodo sort()
l

Ordena un Array en forma ascendente.

Ejemplo:
var a = new Array(A, F, B);
a.sort() { A, B, F }

Mtodo reverse()
l

Funciona de forma anloga a sort() pero ordena el

array en forma descendente.

Ejemplo:
var a = new Array(A, F, B);
a.reverse() { F, B, A }

Mtodo concat()
l

Crea y devuelve un array conteniendo el array

original ms el que se desea concatenar.

Ejemplo:
var a = new Array (1, 2, 3);
var b=a.concat(new Array(4, 5))
b== { 1, 2, 3, 4, 5}

Mtodo slice()
l

Devuelve un subarray.

Ejemplo:
var a = new Array(1, 2, 3, 4, 5);
a.slice(0, 3) Devuelve { 1, 2, 3 }
a.slice(3) Devuelve { 4, 5 }

Mtodo splice()
l
l
l

Elimina elementos de un array.

Modifica el array y devuelve los elementos
eliminados.
Ejemplo:
var a = new Array(1, 2, 3, 4, 5,6, 7, 8)
a.splice(4)
Devuelve { 5, 6, 7, 8 }
a=={ 1, 2, 3, 4}

Mtodos push()/pop()
l

Son dos mtodos que implementan el

comportamiento tpico de una pila.

push(valor) introduce, dentro de un array, un

elemento en la cima de la pila (ltimo elemento del
array).
pop() extrae un elemento desde la cima de la pila
(ltimo elemento del array).

Mtodos unshift/shift()
l
l
l
l

Funcionan de forma similar a push() / pop().

unshift(valor) aade elementos al principio del
array, desplazando los existentes.
shift() elimina y devuelve el primer elemento del
array.
Ejemplo:
var a = new Array();
a.unshift(1); a=={1}
a.unshift(22); a=={22, 1}
a.shift();
Devuelve 22.

Mtodos toString()/toSource()
l

toString() aplicado a un array, convierte cada uno

de sus elementos a un string, separado por comas.
Es idntico a join().
Excepcin en Nav. 4:
Cuando <script language=JavaScript1.2> la cadena
aparece encerrada entre corchetes [1, 2, 3].

Solucin en JavaScript1.3 toSource().

Prctica 4

Modos de incluir JS en html

l
l
l

<script> ... </script>

<script src=".../../comun.js"></script>
<script archive="util.jar"
src="comun.js"></script>

En URLs: <a href="javascript:cdigo-JS;"> ... </a>

Como manejadores de eventos.

Consideraciones .js
l

1. Un fichero .js es cdigo puro JavaScript, sin las

etiquetas <script> </script> o cualquier otra etiqueta
html.
2. Un fichero .js debe de ser exportado al servidor
web donde va a ser alojado con el tipo MIME
application/x-javascript, y debe ser soportado por el
servidor.
3. Entre las etiquetas <script src=..> y </script> no
debe de ir cdigo alguno. Si existiera, se ignora.

El atributo ARCHIVE Netscape

l
l

Este atributo especifica archivos .jar (Java Archives).

Los ficheros .jar son ficheros comprimidos. En
ocasiones, contienen otros ficheros auxiliares como
firmas digitales.
Utilidad: Si se desarrollan varios ficheros .js, podra
resultar til guardarlos juntos en un archivo
comprimido, y usar slo el que interese en cada
momento (nombrado por el src=...).

JavaScript en URLs
l

Ejemplos URL:
<a href="javascript: alert('Hola Mundo');"> Saludo </a>
<a href="javascript: calculaTotal();"> Calcular el Total</a>

Ejemplos en manejadores de eventos:

<input type=button name=miBoton value=Calcular
onclick=calculaTotal();>

Ejecucin de programas JS
l

Si ubicamos cdigo JS en la seccin <head>, p.ej.,

ste no podr acceder a elementos de la seccin
<body> hasta que no se hayan definidos, ya que el
flujo de ejecucin es secuencial.

Si el cdigo intenta acceder a elementos todava no

definidos se producir un error (undefined).

Eventos onLoad() y onUnload()

l

Ambos eventos se definen en la etiqueta HTML

<body>, <frame> o <frameset>.

El evento onLoad() se disparar cuando la pgina

se descargue y se escriba completamente.

El evento onUnload() cuando el navegador

abandone la pgina.

El entorno del lado cliente JS

l

El desarrollo de JS del lado cliente (client-side

JavaScript) realiza un uso intensivo de tres
caractersticas del entorno del navegador:
l
l
l

1. El objeto global Window.

2. La jerarqua de objetos del lado cliente.
2. El modelo de programacin guiado por eventos.

El objeto Window
l

El objeto Window representa la ventana (o frame)

que visualiza el documento.

Define propiedades y mtodos que permiten

manipular las ventanas del navegador.

Referencias al objeto Window: window o self.

Jerarqua de objetos

Window
Window

self,
self, window,
window,
parent,
parent, top
top

plugins
plugins [[ ]]

navigator
navigator

mimeTypes
mimeTypes [[ ]]

frames
frames [[ ]]

forms
forms [[ ]]
anchors
anchors [[ ]]

location
location
links
links [[ ]]
history
history

document
document

images
images [[ ]]
applets
applets [[ ]]
embeds
embeds [[ ]]

Netscape
Navigator

elements
elements[ [] ]
array
arrayde
deobjetos
objetosde
de
Formulario
Formulario(Form):
(Form):
Button
Button
Checkbox
Checkbox
1.1
FileUpload
FileUpload
Hidden
Hidden
Password
Password
Radio
Radio
Select
Select
Submit
Submit
Text
Text
TextArea
TextArea

options
options [[ ]]
array
array de
de objetos
objetos
options
options

Objetos plugins y mimeTypes

document.write("<b>plugins
document.write("<b>pluginsinstalados:
instalados:"+navigator.plugins.length+"</b><br>");
"+navigator.plugins.length+"</b><br>");
for
for(var
(vari=0;
i=0;i<navigator.plugins.length;
i<navigator.plugins.length;i++)
i++)
document.write(navigator.plugins[i].name+"<br>");
document.write(navigator.plugins[i].name+"<br>");
document.write("<hr>");
document.write("<hr>");
document.write("<b>mimeTypes
document.write("<b>mimeTypessoportados:
soportados:"+navigator.mimeTypes.length+"</b><br>");
"+navigator.mimeTypes.length+"</b><br>");
for
for(var
(vari=0;
i=0;i<navigator.mimeTypes.length;
i<navigator.mimeTypes.length;i++)
i++)
document.write(navigator.mimeTypes[i].type+"<br>");
document.write(navigator.mimeTypes[i].type+"<br>");

Ejemplo plugins[] en Netscape

plugins
pluginsinstalados:
instalados:16
16
Microsoft
Windows
Microsoft WindowsMedia
MediaServices
Services
Shockwave
Flash
Shockwave Flash
Adobe
AdobeSVG
SVGViewer
ViewerPlugin
Plugin
NPSnpy
Dynamic
Link
NPSnpy Dynamic LinkLibrary
Library
RealPlayer(tm)
G2
LiveConnect-Enabled
RealPlayer(tm) G2 LiveConnect-EnabledPlug-In
Plug-In(32-bit)
(32-bit)
Adobe
Acrobat
Adobe Acrobat
Netscape
NetscapeDefault
DefaultPlug-in
Plug-in
Java
Plug-in
Java Plug-in
Java
JavaPlug-in
Plug-in
Java
Plug-in
Java Plug-in
Java
JavaPlug-in
Plug-in
Microsoft
MicrosoftReader
Reader
Windows
Media
Windows MediaPlayer
PlayerPlug-in
Plug-inDynamic
DynamicLink
LinkLibrary
Library
Beatnik
Player
V2.0.5.2
Beatnik Player V2.0.5.2
NPAVI32
NPAVI32Dynamic
DynamicLink
LinkLibrary
Library
LiveAudio
LiveAudio

Ejemplo mimeTypes en Netscape

mimeTypes soportados: 523
mimeTypes soportados: 523
application/x-drm
application/x-drm
image/svg-xml
image/svg-xml
image/svg
image/svg
application/x-npsnpy-plugin
application/x-npsnpy-plugin
*
*
application/x-java-bean;version=1.2.1
application/x-java-bean;version=1.2.1
application/x-java-applet;version=1.2.1
application/x-java-applet;version=1.2.1
application/x-java-bean;version=1.2.2
application/x-java-bean;version=1.2.2
application/x-java-applet;version=1.2.2
application/x-java-applet;version=1.2.2
application/x-java-bean;version=1.3
application/x-java-bean;version=1.3
application/x-java-applet;version=1.3
application/x-java-applet;version=1.3
application/x-java-bean;jpi-version=1.3.1
application/x-java-bean;jpi-version=1.3.1
application/x-java-applet;jpi-version=1.3.1
application/x-java-applet;jpi-version=1.3.1
application/x-java-bean;version=1.1.2
application/x-java-bean;version=1.1.2
application/x-java-applet;version=1.1.2
application/x-java-applet;version=1.1.2
application/x-java-bean;version=1.1.3
application/x-java-bean;version=1.1.3
application/x-java-applet;version=1.1.3
application/x-java-applet;version=1.1.3
application/x-java-bean;version=1.2
application/x-java-bean;version=1.2

application/x-java-applet;version=1.2
application/x-java-applet;version=1.2
application/x-java-bean
application/x-java-bean
application/x-java-applet
application/x-java-applet
application/x-java-bean;version=1.1
application/x-java-bean;version=1.1
application/x-java-applet;version=1.1
application/x-java-applet;version=1.1
application/x-java-bean;version=1.1.1
application/x-java-bean;version=1.1.1
application/x-java-applet;version=1.1.1
application/x-java-applet;version=1.1.1
application/x-npebshp
application/x-npebshp
application/asx
application/asx
audio/x-rmf
audio/x-rmf
audio/rmf
audio/rmf
audio/nspaudio
audio/nspaudio
audio/x-nspaudio
audio/x-nspaudio
......
......
......
......
......

Nombrar objetos
l

El objeto window se asume por defecto, por lo que

no es necesario nombrarlo.

Ejemplo:
self.document.forms[0] document.forms[0]

Programacin por eventos

l

En programacin web, las pginas, una vez escritas

e interpretadas por el navegador, quedan estticas
esperando que se produzcan eventos asncronos.
Estos eventos responden a la interaccin por parte
del cliente, tales como pulsacin de un botn, de
una tecla, etc...
Ejemplo:
<input type=button name=miBoton value="Calcular"
onclick="calcula();">

Propiedades del objeto Window

Propiedad
closed
defaultStatus,
status

Significado
true si la ventana ha sido cerrada. false en caso contrario.
Texto que aparecer en la lnea de estado del navegador. Por defecto y
explcitamente.

document

Referencia al documento (objeto document) HTML mostrado en la ventana.

frames [ ]

Array de ventanas marcos (objetos window).

history

Referencia al historial del navegador (objeto history).

location

Referencia a la entrada de direcciones del navegador (objeto location).

name

Nombre de la ventana. Usado, habitualmente, como TARGET de <a> o <form>.

opener

Referencia al objeto ventana que ha abierto la actual. null si fue abierta por el
usuario.

parent

Si la ventana es un frame, referencia a la ventana que lo contiene.

self

Referencia al actual objeto ventana. Sinnimo de window.

top

Si la ventana es un frame, referencia a la ventana del nivel ms alto que la contiene.

window

Referencia al actual objeto ventana. Sinnimo de self.

Mtodos del objeto Window

Mtodo

Significado

alert(),
confirm(),
prompt()

Caja de dilogo informativa.

Dilogo con aceptacin (devuelve true) o cancelacin (devuelve false).
Dilogo con entrada de usuario. (Aceptar: devuelve el valor introducido Cancelar: null).

moveBy,
moveTo()

Mueve la ventana valores relativos.

Mueve la ventana a posiciones absolutas.

resizeBy(),
resizeTo()

Redimensiona la ventana valores relativos.

Redimensiona la ventana valores absolutos.

scrollBy(),
scrollTo()

Realiza un scroll relativo (desplazamiento) en el documento de la ventana.

Scroll absoluto.

setInterval(),
clearInterval()

Planifica la ejecucin repetida de la funcin indicada.

Cancela la planificacin.

setTimeout(),
clearTimeout()

Invoca a la funcin especificada transcurrido cierto intervalo de tiempo. No peridica.

Cancela el intervalo de tiempo especificado, antes de la ejecucin.

open(),
close()

Abre una nueva instancia del navegador (nueva ventana).

Cierra una ventana.

Mtodo open()
l

(I)

Sintaxis:
var w = window.open ("pagina.html", "nombre", "propiedadesventana", valor-booleano);

Todos los argumentos son opcionales.

Mtodo open()
l

(II)

Propiedades de ventana:
"width=nnn,heigth=mmm,status=yes,resizable=yes, ".
Propiedad

Accin

height

Especifica el alto de la ventana en pxeles.

width

Especifica el ancho de la ventana en pxeles.

location

Si =yes, se habilita la barra de direcciones (url).

menubar

Si =yes, se habilita la barra de men.

resizable

Si =yes, se permite el redimensionado de la vetnana.

status

Si =yes, se habilita la lnea de estado

toolbar

Si =yes, se habilita la barra de herramientas

Ejemplo: var w = window.open (pag1.html", "miVentana", "width=300,heigth=200,

menubar=yes,toolbar=yes,status=no,resizable=yes", true);

Mtodo open()
l

(III)

El ltimo argumento, true indica que la URL de la

nueva ventana reemplazar a la entrada actual del
historial del navegador, o de lo contrario, false (por
defecto), se crear una nueva entrada en el historial.

Mtodo close()
l
l
l

Sintaxis: window.close(); objeto-window.close();

Se podrn cerrar ventanas cuyo cdigo JS haya
creado (por seguridad).
Si se desean cerrar otras ventanas, el navegador
informar al usuario con una ventana de
confirmacin (por motivos de seguridad).
El objeto window contina, an habiendo sido
cerradas todas las ventanas. En esta situacin no se
podr acceder a ninguna de sus propiedades. La
nica propiedad disponible en esta situacin es
closed: true o false.

La lnea de estado del browser

l
l

Situada en la parte inferior del navegador.

Lugar de informacin del navegador al usuario.

Con la propiedad status podemos establecer

informacin deseada.

Con defaultStatus establecemos la informacin a

mostrar por defecto.

Intervalos: setTimeout()
l

Establece una llamada temporizada que se

ejecutar transcurrido el intervalo de tiempo
especificado en milisegundos.
Sintaxis:
var identificador=setTimeout ("nom-funcin", tiempo-ms);

Para cancelar una temporizacin, antes de su

ejecucin:
clearTimeout (identificador); No devuelve nada !!.

Intervalos: setInterval()
l
l

Establece una llamada peridica, cada intervalo

especificado como parmetro en milisegundos.
Sintaxis:
var identificador=setInterval ("nom-funcin", tiempo-ms);

Para cancelar la ejecucin peridica:

clearInterval(identificador) No devuelve nada !!.

Prctica 5

El objeto navigator
l
l

La propiedad window.navigator se refiere al objeto

navigator.
Propiedades que contienen informacin acerca del
browser: (entre otras),
Propiedad

Significado

appName

Nombre del navegador web.

appVersion

Nmero de la versin y otra informacin asociada.

userAgent

Cadena que el navegador enva en su cabecera USER-AGENT HTTP.

appCodeName

Nombre interno del cdigo del navegador. Ej.: "Mozilla.

platform

Plataforma software en el que se ejecuta el navegador. Ej.: "Win32".

Ejemplo propiedades navigator

MSIE
MSIEversin
versin6.0
6.0
navigator.appName:
navigator.appName:Microsoft
MicrosoftInternet
InternetExplorer
Explorer
navigator.appVersion:
4.0
(compatible;
MSIE
navigator.appVersion: 4.0 (compatible; MSIE6.0;
6.0;Windows
WindowsNT
NT5.0;
5.0;yif1000)
yif1000)
navigator.userAgent:
Mozilla/4.0
(compatible;
MSIE
6.0;
Windows
NT
navigator.userAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT5.0;
5.0;yif1000)
yif1000)
navigator.appCodeName:
Mozilla
navigator.appCodeName: Mozilla
navigator.platform:
navigator.platform:Win32
Win32

NETSCAPE
NETSCAPENavigator
Navigator4.76
4.76
navigator.appName:
navigator.appName:Netscape
Netscape
navigator.appVersion:
navigator.appVersion:4.76
4.76[en]
[en](Windows
(WindowsNT
NT5.0;
5.0;U)
U)
navigator.userAgent:
Mozilla/4.76
[en]
(Windows
NT
navigator.userAgent: Mozilla/4.76 [en] (Windows NT5.0;
5.0;U)
U)
navigator.appCodeName:
Mozilla
navigator.appCodeName: Mozilla
navigator.platform:
navigator.platform:Win32
Win32

Examinar propiedades navigator

var browser="INFORMACIN DEL BROWSER:\n";
for (var propiedad in navigator) {
browser += propiedad + ": " +
navigator[propiedad] + <br>";
}
document.write ("Resultado:<br>" + browser);
Arrays
Arraysasociativos
asociativos

Mtodos de navigator
l

Mtodo javaEnabled(): Proporciona informacin

acerca del soporte de Java. Devuelve true si es
soportado, false en caso contrario.

Mtodo preference(): Permite a los scripts firmados

digitalmente consultar y establecer preferencias de
usuario. Slo en Navigator 4+.

El objeto screen
l
l

La propiedad screen del objeto window, se refiere al

objeto Screen.
Este objeto proporciona propiedades tales como el
tamao de la ventana de visualizacin del browser:
propiedades width, height, availWidth y
availHeight (en pxeles).
Otras propiedades: colorDepth, proporciona el
nmero de colores en logaritmo de base 2 (n bits).

Relacin entre ventanas (I)

l

Podemos establecer referencias entre ventanas:

l 1.

Una ventana crea a otra: El mtodo open()

devuelve una referencia al nuevo objeto
ventana.
l 2. La nueva ventana puede referirse a la
ventana padre a travs de la propiedad opener
del objeto window.

Relacin entre ventanas (II)

La
La ventana
ventana AA crea
crea aa
BB con
con var
var B=open();
B=open();

Referencia
Referencia aa travs
travs
de
de la
la variable
variable B.
B.

B
La
La ventana
ventana BB puede
puede
referirse
referirse aa la
la AA aa travs
travs
de
de la
la propiedad
propiedad opener.
opener.

Relacin entre frames (I)

l

l
l

De forma similar pueden relacionarse los frames. Un

frame puede referirse a otros frames a travs de las
propiedades frames [ ], parent y top.
Cada ventana tiene la propiedad frames [ ]. Si no
tiene frames que dependan de ella, este array estar
vaco: la propiedad frames.length ser cero.
Una ventana que contenga frames, se referir al
primero como frame[0], y as sucesivamente.
Pueden anidarse referencias a frames a varios
niveles: frames[1].frames[2]...

Relacin entre frames (II)

Relacin entre frames (III)

l

Un frame puede referirse a otros frames para

acceder a variables JS, elementos de HTML o para
llamar a funciones definidas en ese otro frame.

Ejemplo:
var precio= parent.frames[0].pvpCamisa;
var precioEuro=parent.frames[2].convierteEuro(precio);

Si los frames tienen nombre asignado, pueden

referirse tambin a travs de l (conveniente).

Paso de informacin entre pginas

HTML

Peticin (1) http://...

Documento html

Peticin (2) http://...

Documento html

...

B
t1

t2

Soluciones
l

Bsicamente, existen 4 mtodos para el intercambio

de informacin entre pginas HTML:
l
l
l
l

1. A travs de cookies.
2. A travs de applets Java / controles ActiveX.
3. A travs de variables de frames/frameset.
4. A travs de la URL.

Cambio de pginas html

l
l

Podemos cambiar de documento html mediante la

propiedad URL del objeto document.
Tambin podemos avanzar o retroceder a pginas
ya visitadas (del historial) mediante
window.history.back() o window.history.forward();

Ejemplo:
if (condicion) document.URL=pagina2.html;
else document.URL=pagina3.html;

Prctica 6