1.

Introduccin
Captulo siguiente: 2 - Javascript para aplicaciones cliente
El JavaScript permite crear aplicaciones especficamente orientadas a su
funcionamiento en la red Internet. Usando JavaScript, se pueden crear pginas HTM
dinmicas !ue procesen la entrada del usuario " !ue sean capaces de gestionar datos
persistentes usando o#$etos especiales, arc%ivos " #ases de datos relacionales.
&on JavaScript se pueden construir aplicaciones !ue varan desde la gesti'n de la
informaci'n corporativa interna " su pu#licaci'n en Intranets %asta la gesti'n masiva de
transacciones de comercio electr'nico.
(un!ue se trata de algo !ue se sale del alcance de este curso, es importante rese)ar !ue
Java*cript puede utili+ar una tecnologa propietaria de ,etscape, denominada
ive&onnect- con el prop'sito de !ue las aplicaciones Java*cript puedan tener acceso a
aplicaciones #asadas en o#$etos distri#uidos &./0( " Java.
En cual!uier caso, es importante se)alar !ue, pese a la similitud de nom#res, Java*cript
no es Java.
as aplicaciones cliente " servidor en Java*cript comparten el mismo n1cleo de
lengua$e. Este n1cleo se corresponde con E&M(-222, el lengua$e de scripts estndar de
la .ficina de Estndares de la Uni'n Europea, con algunos a)adidos e3tra. Aunque
Javascript de cliente y de servidor comparten el mismo conjunto base de unciones
y caractersticas! en algunos casos se utili"an de distinta orma. os componentes de
Java*cript son los siguientes4
-,1cleo de Java*cript 5&ore Java*cript6.
-Java*cript para &liente.
-Java*cript para *ervidor.
Java*cript para cliente englo#a el n1cleo del lengua$e " algunos elementos adicionales
como, por e$emplo, una serie de o#$etos predefinidos !ue s'lo son relevantes para la
e$ecuci'n de Java*cript en el conte3to de un cliente 7e#.
(s mismo, Java*cript para servidor inclu"e tam#i8n el n1cleo de lengua$e " los o#$etos
predefinidos " funciones necesarias para el correcto funcionamiento en el marco de un
servidor.
El c'digo Java*cript para cliente se integra directamente en pginas HTM " es
interpretado, en su totalidad, por el cliente 7e# en tiempo de e$ecuci'n.
9uesto !ue con frecuencia es necesario ofrecer el ma"or rendimiento posi#le, las
aplicaciones Java*cript desarrolladas para servidores se pueden compilar antes de
instalarlas en dic%os servidores.
#. Javascript para aplicaciones cliente
Captulo anterior: : - Introducci'n
Captulo siguiente: ; - Introducci'n de Javascript en documentos Html
os clientes 7e# !ue soportan Java*cript, tales como el ,etscape
,avigator<&ommunicator 5desde la versi'n 2.=6 o el Microsoft Internet E3plorer 5desde
la versi'n ;.=6 pueden interpretar sentencias Java*cript colocadas en un documento
HTM.
&uando el cliente 7e# solicita una pgina de este tipo, el servidor enva por la red al
cliente el contenido completo del documento- inclu"endo todos los c'digos HTM " las
sentencias Java*cript !ue pudieran e3istir en 8ste.
El cliente lee entonces la pgina de forma secuencial, desde el principio %asta el final,
representando visualmente los c'digos HTM " e$ecutando las sentencias Java*cript
conforme avan+a el proceso de lectura e interpretaci'n.
as sentencias Java*cript colocadas en una pgina 7e# pueden dar respuesta a eventos
de usuario, tales como la pulsaci'n de un #ot'n del rat'n 5clic6, la entrada de datos en
un formulario " la navegaci'n por una pgina.
9or e$emplo, se puede crear una funci'n Java*cript !ue permita verificar !ue la
informaci'n introducida por el usuario en un campo de entrada de datos de un
formulario 5n1mero de tel8fono, c'digo postal, n1mero de tar$eta de cr8dito, etc.6 tienen
el formato correcto.
En este caso, lo importante es !ue, sin necesidad de reali+ar ninguna transmisi'n de
datos por la red, se puede validar dic%a informaci'n, mostrando al usuario un cuadro de
dilogo en caso de !ue 8sta sea incorrecta.
$. Introduccin de Javascript en documentos %tml
Captulo anterior: 2 - Javascript para aplicaciones cliente
Captulo siguiente: > - (rc%ivos de c'digo Javascript
*e ofrece a!u un primer e$emplo en el !ue se ilustra la integraci'n directa de c'digo
Java*cript en un documento HTM4
&%'()*
&%+A,*
&'I')+*-rimer ejemplo de JavaScript&.'I')+*
&.%+A,*
&/0,1*
+sto es te2to normal de un documento %'()
&SC3I-' )A456A5+78JavaScript8* docurnent.9rite:8'e2to generado desde
JavaScript8;
&.SC3I-'*
+sto es< de nuevo< %'()
&.body*
&.%'()*
&omo se puede o#servar, este e$emplo tiene la apariencia de un documento HTM
estndar. a 1nica novedad viene dada por la presencia del fragmento correspondiente
al c'digo Java*cript4
&SC3I-' )A456A5+78JavaScript8* document.9rite:='e2to generado desde
Javascript8;
&.SC3I-'*
9ara poder ver el resultado de su e$ecuci'n, #astar con cargar dic%o documento con
cual!uiera de los clientes 7e# antes mencionados.
a salida, como se aprecia en las figuras ad$untas 5para am#os clientes 7e#6, se
compone de tres lneas de te3to4
- Esto es te3to normal de un documento HTM
- Te3to generado desde Java*cript
- ?e nuevo HTM
En realidad no se trata de un script 1til, puesto !ue todo lo !ue ofrece 5mostrar una
lnea de te3to6 se podra %a#er %ec%o en HTM directamente ", sin duda, con ma"or
comodidad. *'lo se trata de mostrar el funcionamiento del c'digo &SC3I-'*.
En efecto, cual!uier elemento !ue !uede delimitado por los c'digos &SC3I-'* y
&.SC3I-'* se considera c'digo JavaScript.
En este caso particular, se %a utili+ado document.9rite, una de las funciones ms
importantes de Java*cript, !ue permite escri#ir algo en el documento actual 5en este
caso, el documento HTM !ue contiene el e$emplo6.
>. Arc?ivos de cdigo Javascript
Captulo anterior: ; - Introducci'n de Javascript en documentos Html
Captulo siguiente: @ - Java*cript para aplicaciones del servidor
El atri#uto S3C del c'digo SC3I-' del lengua$e HTM permite especificar un arc%ivo
!ue contiene el c'digo Java*cript 5en lugar de incrustar el c'digo Java*cript en el
documento HTM6.
9or e$emplo4
&%+A,*
&SC3I-' S3C78comun.js8* ...
&.SC3I-'* &.%+A,* &/0,1* ...
Este atri#uto es especialmente 1til para compartir funciones entre numerosos
documentos HTM.
as sentencias Java*cript del interior de un c'digo &SC3I-' S3C7 ... * se ignoran a
menos !ue la inclusi'n cause un error.
*e inclu"e una sentencia !ue muestre un mensa$e de error en caso de no poder cargar el
arc%ivo de c'digo.
9or e$emplo4 &script src78?ttp:..999.mienlace.es.unciones.uncion1.js8*
os arc%ivos Java*cript e3ternos s'lo pueden tener c'digo Java*cript " ninguna
sentencia HTM.
&lientes !ue no soportan Java*cript.- Estos clientes no admiten la eti!ueta HTM
&script*. &onsideran la eti!ueta SC3I-' " todo su contenido como te3to normal, por
ello, se %ace preciso ocultar el c'digo a clientes !ue no lo soporten. 9ara evitar esto, se
utili+an los comentarios de HTM entre las eti!uetas &SC3I-'* y &.SC3I-'*:
&SC3I-' )A456A5+78JavaScript8*
&.SC3I-'*
3ecuerda que es la forma de insertar comentarios en HTM.
.tra forma de conocer si un cliente soporta Java*cript es insertar el c'digo
&40SC3I-'*...&.40SC3I-'*. ?e modo, los navegadores !ue no soporten
Java*cript e$ecutan las sentencias HTM alternativas incluidas dentro de esta eti!ueta.
@. JavaScript para aplicaciones del servidor
Captulo anterior: > - (rc%ivos de c'digo Javascript
Captulo siguiente: 2 - Aalores
En el servidor Java*cript tam#i8n est integrado en pginas HTM. as sentencias de
JS del servidor pueden reali+ar multitud de tareas4
-&onectarse a #ases de datos relacionales de varios fa#ricantes.
-&ompartir informaci'n entre usuarios de una aplicaci'n.
-(cceder a los fic%eros del servidor.
-&omunicarse con otras aplicaciones a trav8s de )IA+C044+C' y JAAA.
as aplicaciones Java*cript del servidor se compilan generando arc%ivos #inarios.
E3isten servicios especiales de Java*cript en el servidor4
-*ervicio de Besti'n de *esiones.
-*ervicio de 0ases de ?atos ive7ire.
Java*cript " Java.-
Java*cript Java
Interpretado por el cliente
&opilado 5#"tecodes6. *e descarga del servidor "
se e$ecuta en el cliente
.rientado a .#$etos 0asado en clases
El c'digo se integra e incrusta en
documentos HTM
*e utili+an (99ET*. *e accede a ellos desde
documentos
os tipos de datos de las varia#les no
se declaran
Es necesario definir los tipos de datos a las
varia#les
,o se puede escri#ir automticamente
en el disco duro
,o se puede escri#ir automticamente en el disco
duro
B. Aalores
Captulo anterior: @ - Java*cript para aplicaciones del servidor
Captulo siguiente: C - os literales
Java*cript reconoce los siguientes valores4
-Aalores num8ricos.
-Aalores l'gicos 5true, false6
-&adenas de caracteres
-Aalor null
-Aalor no definido 5undefined6
(dems de estos valores, e3isten otros elementos propios de Java*cript como los
o#$etos " las funciones.
Java*cript trata de forma dinmica los datos " se puede reali+ar la siguiente operaci'n4
var unAalor7@C
D despu8s asignar a un Aalor un valor de tipo cadena de caracteres4
unAalor78A?ora estD lloviendo8
Aaria#les.- as varia#les pueden comen+ar por un carcter o un su#ra"ado #a$o 5E6.
&uando a una varia#le no se le asigna un valor, tiene valor indefinido 5undefined6. *i se
le pone un valor, pueden ocurrir dos cosas4
-*i fue declarada sin 8var8< se produce un error en tiempo de e$ecuci'n.
-*i fue declarada con 8var8< devuelve el valor 4a4 :4ot a 4umber;.
Aeamos un e$emplo4
unction 1:;E
return yF#!
G
1:; .. +sta llamada a 1 provoca un error en tiempo de ejecucin
unction #:;E
return var yF#!
G
#:; .. devuelve el valor 4a4
9odemos utili+ar el valor FundefinedF para ponerle valor a una e3presi'n4
var miAar!
i:miAar77undeined;E
?a"unacosa:;!G
elseE
?a"otracosa:;!G
El valor FundefinedF se comporta como falso cuando se usa como tipo #ooleano.
as varia#les pueden ser4
5lobales: cuando se le asigna un valor fuera de una funci'n. El uso de FvarF es
opcional.
)ocales: *e reali+a la operaci'n de asignaci'n dentro de una funci'n. El uso de FvarF es
o#ligatorio.
9or 1ltimo, es #ueno sa#er !ue se puede acceder a una varia#le de un documento HTM
de un G/(ME desde otro4
parent.miAar
H. )os literales
Captulo anterior: 2 - Aalores
Captulo siguiente: H - Ms clases de literales
Un literal es un valor fi$o !ue se especifica en el script.
E3isten varios tipo de literales !ue e3plicaremos a continuaci'n4
FArrays
F/ooleanos
FComa Ilotante
F+nteros
F0bjetos
FCadenas
1.Arrays: con$unto de = o ms e3presiones encerradas entre corc%etes 5IJ6.
E$emplo4
coc?es7J8/(K8<8(ercedes8<8Audi8<8Aolvo8L
&oc%es es un array de > elementos.
9odemos de$ar elementos del array vacos4
ciudades7J8(adrid8<<8Aalladolid8L
ciudades7J<<8-amplona8L
ciudades7J8(adrid8<8-amplona8<<L
#.)os bolManos: tienen 2 valores #ooleanos4 true " false.
$.Coma lotante: un literal de coma flotante puede tener las siguientes partes4
6n entero decimal
6n punto decimal:8.8;
6na parte raccionaria
6n e2ponente :8e8 o 8+8;
Un literal de coma flotante de#e tener al menos un dgito " un punto decimal o una
8e8:o 8+8;.
E$emplos4
$.1>1@
FB.#$+11
.#e1C
#+F1C
N. (Ds clases de literales
Captulo anterior: C - os literales
Captulo siguiente: K - .#$etos
&ontinuamos %a#lando de los tipos de literales.
>. )os enteros: los literales enteros se pueden e3presar como4
?ecimales4 del = al K.
.ctales4 comien+an por =. ?el = al C.
He3adecimales4 comien+an por F=3F o F=LF. ?el = a K " a5o (6 a f5o G6.
@. )os objetos: con$unto de cero o ms pare$as de pare$as nom#re4 valor.
E$emplo4
avin7Emarca:8/oeing8<modelo:8H>H8<npasajeros:8>@C8G
9ara referirnos desde Java*cript a una propiedad del o#$eto avi'n4
document.Mrite5avi'n.modelo6
B.)as cadenas: el literal de cadena es una secuencia de caracteres entre los signos de
comillas simples o do#les 5N o N6.
En un literal de tipo cadena podemos utili+ar los m8todos del o#$eto String.
E3iste un con$unto de caracteres !ue comien+an por O. (lgunos de ellos son4
Ob: retroceso
O: avance de lnea
On: salto de lnea
Or: return
Ot: ta#ulaci'n
O= < O8< OO: los sm#olos =< 8 " O respectivamente.
P. 0bjetos
Captulo anterior: H - Ms clases de literales
Captulo siguiente: := - .tra forma de crear o#$etos en forma literal
?efinimos como o#$eto, una entidad con una serie de propiedades !ue definen su estado
" unos m8todos 5funciones6 !ue act1an so#re esas propiedades.
a forma de acceder a una propiedad de un o#$eto es la siguiente4
nombreobjeto.propiedad
Tam#i8n se puede referir a una propiedad de un o#$eto por su ndice en la creaci'n. os
ndices comien+an por =4
casaJCL7casa.localidad
casaJ1L7casa.supericie
casaJ#L7casa.precio
Aamos a crear un o#$eto con una serie de propiedades. a forma de crear un o#$eto es la
siguiente4
-&rear una funci'n constructora
unction casa:localidad<supericie<precio;E
t?is.localidad7localidad
t?is.supericie7supericie
t?is.precio7precio
G
Instanciar objetos con 8ne98
casa17ne9 casa:8-amplona8<PC<1@CCCCCC;
casa#7ne9 casa:8/ilbao8<11C<#$CCCCCC;
?os o#servaciones importantes4
-Bracias a ne9 creamos nuevos o#$etos con las propiedades de los "a creados.
8t?is8 %ace referencia al propio o#$eto.
-( un o#$eto se le pueden seguir a)adiendo propiedades tras ser definido, aun!ue es una
prctica !ue no se aconse$a, pues todos los o#$etos "a creados %asta entonces a)aden
tam#i8n esa propiedad con valor nulo. 9ara ello se utili+a la pala#ra protot"pe4
casa.prototype.aQo7null
casa.aQo781PNC8
1C. 0tra orma de crear objetos en orma literal
Captulo anterior: K - .#$etos
Captulo siguiente: :: - os operadores 5I6
.tra forma de crear o#$etos de forma literal es la siguiente4
nombreobjeto7Epropiedad1:valor!propiedad#:valor!.....propiedad4:valorG
Ginalmente, s'lo a)adir !ue una propiedad puede estar formada por varias
su#propiedades de modo !ue, para referenciarlas de#eremos seguir una notaci'n similar
a la anterior4
nombreobjeto.nombrepropiedad.nombreSubpropiedad
E$emplo4
casa17Elocalidad:8-amplona8<precio:1@CCCCCC<supericie:Einterior:PC<terra"a:1CGG
En este e$emplo, casa: es un o#$eto en el !ue, la propiedad FsuperficieF, est a su ve+
formada por dos su#propiedades4 interior " terra+a.
&'mo se crean m8todos.- Aeamos a%ora c'mo se crean los m8todos4
Un m8todo no es ms !ue una funci'n asociada a un tipo de o#$eto4
objeto.nombremMtodo7nombreuncin
Aeamos un e$emplo. Este m8todo sirve para mostrar las propiedades de un o#$eto casa4
unction AerCasa:;E
var mostrar78)a casa estD en 8 R t?is.localidad R 8< tiene 8 R t?is.supericie R8 m#
y cuesta 8 Rt?is.precio R8 ptas.8
return:mostrar;
G
*i en la funci'n constructora de casa a)adimos4
t?is.AerCasa7AerCasa
Da tenemos un m8todo llamado AerCasa !ue nos permite ver las propiedades de
cual!uier o#$eto de tipo casa.
Una ve+ creado un o#$eto, si lo !ue !ueremos es eliminarlo, s'lo tenemos !ue llamar al
operador 8delete8.
delete casa
Este operador es interesante, por!ue, si consigue eliminar el o#$eto, devuelve 8true8 si
se le pone valor, por lo !ue se puede sa#er cuando un o#$eto %a sido #orrado
satisfactoriamente.
11. )os operadores :I;
Captulo anterior: := - .tra forma de crear o#$etos en forma literal
Captulo siguiente: :2 - os operadores 5II6
E3isten varios tipos de operadores en Java*cript4
1.Asignacin: este tipo de operador se utili+a para asignar valores a las varia#les.
var resultado7@C
(signa a la varia#le FresultadoF el valor @=.
E3isten a#reviaturas de algunas operaciones de asignaci'n4
3 O P " 3 P 3 O "
3 - P " 3 P 3 - "
3 Q P " 3 P 3 Q "
3 R P " 3 P 3 R "
3 < P " 3 P 3 < "
#.Comparacin: en Java*cript, se pueden comparar varia#les de distinto tipo, pues es
capa+ de for+ar conversiones4
77 ?evuelve true si son iguales. Guer+a conversiones de tipo.
S7 ?evuelve true si son distintos. Guer+a conversiones de tipo.
777 ?evuelve true si son iguales " del mismo tipo.
S77 ?evuelve true si son distintos o de distinto tipo.
* ?evuelve true si la varia#le de la i+!uierda es ma"or !ue la varia#le de la derec%a
& ?evuelve true si la varia#le de la derec%a es ma"or !ue la varia#le de la i+!uierda
*7 ?evuelve true si la varia#le de la i+!uierda es ma"or o igual !ue la varia#le de la
derec%a
&7 ?evuelve true si la varia#le de la i+!uierda es menor o igual !ue la varia#le de la
derec%a
1#. )os operadores :II;
Captulo anterior: :: - os operadores 5I6
Captulo siguiente: :; - as sentencias - las condicionales
&ontinuamos %a#lando de los diferentes tipos de operadores4
$. AritmMticos: los operadores aritm8ticos, a partir de varios operandos, devuelven un
solo valor- resultado de la operaci'n reali+ada con los anteriores operandos.
En Java*cript e3iste notaci'n postfi$a " prefi$a, por lo !ue varia#leOO " OOvaria#le son
dos formas distintas de incrementar una varia#le. En primer lugar, se procesa la
varia#le, " luego se incrementa. *in em#argo, en el segundo caso, primero se
incrementa la varia#le " despu8s se procesa.
*T 0inario4 devuelve el resto de una divisi'n.
RR Unitario4 incrementa el valor de la varia#le.
FF Unitario4 disminu"e el valor de una varia#le.
F Unitario4 cam#ia el signo de una varia#le.
>.)gicos: los operadores l'gicos devuelven un valor #inario.
UU
A4,
VV
03
S
40'
Es importante sa#er !ue si en una evaluaci'n "a se conoce el resultado, no se pone valor
a los dems t8rminos4
true VV devuelve true.
alse UU devuelve alse.
1$. )as sentencias F las condicionales
Captulo anterior: :2 - os operadores 5II6
Captulo siguiente: :> - as sentencias - os #ucles
as sentencias en Java*cript se dividen en varios tipos4
1.Condicionales: las sentencias condicionales sin 8i8 " 8s9itc?8. a sinta3is de 8i8
es la siguiente4
i:condicin;E
acciones
G
elseE
acciones
G
E$emplo4
var i7@
i:i*@;E
document.9rite:8i es mayor que @8;
G
elseE
document.9rite:8i es menor o igual que @8;
G
a sentencia 8s9itc?8 toma una varia#le, " la eval1a seg1n unos posi#les valores4
s9itc?:variable;E
case valor1:
acciones1!
breaW!
case valor#:
acciones#!
breaW!
.........
.........
case valor4:
acciones4!
breaW!
deault acciones!
G
Aeamos cada una de las partes4
case valor1: en el caso de !ue la varia#le tenga el valor 8valor18< reali+ar las acciones
8acciones18.
breaW: si no se inclu"e esta sentencia despu8s de cada FcaseF, se reali+aran todos los
cases del 8s9itc?8 %asta el final. ?e este modo, s'lo se reali+arn las acciones
referentes al FcaseF concreto.
,eault: si el valor de la varia#le no concuerda con ning1n case, se reali+arn las
acciones de deault.
En la pr'3ima lecci'n le e3plicaremos el segundo tipo de sentencia4 los bucles.
1>. )as sentencias F )os bucles
Captulo anterior: :; - as sentencias - las condicionales
Captulo siguiente: :@ - as funciones
Aeamos el segundo tipo de sentencia4 los #ucles.
0ucles.- Estas sentencias se caracteri+an por!ue el flu$o puede pasar varias veces por
ellas %asta !ue se cumple una condici'n.
8or8 representa una o varias sentencias !ue se repiten un n1mero determinado de
veces4
or:inicio!inal!incremento;E
acciones
G
8do...9?ile8 es un #ucle !ue al menos se recorre una ve+, antes de anali+ar la condici'n
al final.
do:condicin;E
acciones
G9?ile:condicin;
89?ile8 es una sentencia de #ucle !ue puede !ue no se realice ninguna ve+, pues la
condici'n se eval1a al principio del #ucle.
9?ile:condicin;E
acciones
G
&on la sentencia 8breaW8< se puede salir de una sentencia de #ucle sin limitaciones.
&on la sentencia 8continue8< se termina el #ucle actual " se comien+a con el siguiente.
Manipulaci'n de .#$etos.- E3isten dos sentencias :or y 9it?; !ue permiten acceder a
las propiedades de un o#$eto de forma rpida.
a sentencia 8or8 recorre todas " cada una de las propiedades de un o#$eto con un
ndice.
or:variable en objeto;E
acciones
G
89it?8 esta#lece un o#$eto por defecto al !ue aplica un con$unto de acciones4
9it?:objeto;E
acciones
G
a forma de introducir comentarios en JavaScript es con ... *i se trata de una lnea, los
comentarios se introducirn con .X ...X.< si !ueremos tomar un #lo!ue como comentario.
1@. )as unciones
Captulo anterior: :> - as sentencias - os #ucles
Captulo siguiente: :2 - os parmetros de las funciones
Una funci'n es un elemento del programa creado con la finalidad de reali+ar una
determinada acci'n. Una funci'n puede ser llamada desde otra.
En Java*cript, las funciones se definen en la ca#ecera del documento HTM. *u
sinta3is es4
unction nombreIuncin:JparDmetrosL;E
acciones
G
Aeamos un ejemplo: el siguiente script es una funci'n !ue toma los valores de un
formulario, " devuelve en un cuadro de te3to del mismo el valor de la primera casilla
elevado a la potencia de la segunda4
&script*
unction potencia:;E
var i7C!
var resul71!
i:document.cDlculo.elevado.value77C;
document.cDlculo.resultado.value7resul!
else
E
resul7document.cDlculo.base.value!
or:i71!i&document.cDlculo.elevado.value!iRR;
resul7resulXdocument.cDlculo.base.value!
G
document.cDlculo.resultado.value7resul!
G
&.script*
Importante: las funciones siempre irn situadas en la ca#ecera del documento HTM.
*e de#e recordar c'mo se accede a los diferentes elementos de un documento %'().
9rimero, document, despu8s los nom#res de los distintos elementos !ue e3isten en ese
elemento4
FCDlculo: es el valor !ue se le %a dado al atri#uto 8name8 del formulario.
F3esultado< base< elevado: es el valor !ue se le %a dado al atri#uto 8name8 de una de
las ca$as de te3to del formulario.
Aeamos la parte %'() de este documento4
&orm name78cDlculo8*
4Ymero: &input type78te2t8 name78base8*
-otencia: &input type78te2t8 name78elevado8*
3esultado: &input type78te2t8 name78resultado8*
Sinput t"pePF#uttonF namePFpotenF AaluePF&alcular potenciaF on&licTPFpotencia56FU
&.orm*
1B. )os parDmetros de las unciones
Captulo anterior: :@ - as funciones
Captulo siguiente: :C - as ventanas
En Java*cript, los parmetros de las funciones se pasan por valor, es decir, si una
varia#le cam#ia de valor en la funci'n, fuera de ella sigue teniendo el mismo valor !ue
cuando entr' en ella.
*i una funci'n devuelve su resultado con return, la funci'n de#e ser asignada o formar
parte de una respuesta. En caso contrario, si una funci'n no devuelve un valor con
8return8< puede ser llamada sin ser asignada.
os argumentos de las funciones se gestionan con un arra" propio de cada una de ellas.
(l arra" se accede con Fnom#reGunci'n.argumentsIiJF, donde FiF es un ndice !ue
comien+a por =.
9ara conocer el n1mero de parmetros, podemos utili+ar4 8arguments.lengt?8.
E3iste un con$unto de funciones predefinidas, veamos algunas de ellas4
Iec?a:
get,ate:;: da del mes
get,ay:;: da de la semana
get(ont?:;: da del mes
get1ear:;: a)o 5con dos dgitos6
get'ime:;: milisegundos transcurridos desde :<:<:KC=
get%ours:;: %ora entre = " 2;
get(inutes:;: minutos entre = " @K
getSeconds:;: segundos entre = " @K
E3isten las mismas funciones pero con FsetF en lugar de FgetF, de modo !ue nos
permiten cam#iar el valor de esas varia#les.
1H. )as ventanas
Captulo anterior: :2 - os parmetros de las funciones
Captulo siguiente: :H - Besti'n de eventos
Tenemos tres formas de mostrar un mensa$e al usuario en una ventana de aviso4
Alert: muestra el contenido de lo !ue le pasamos en una ventana con un #ot'n de
aceptar.
alert5FEsto es una prue#aF6
Conirm: muestra un mensa$e como 8alert8< pero con dos #otones4 aceptar " cancelar.
*i se eval1a, al pulsar aceptar devuelve true " con cancelar, alse.
-rompt: muestra una ventana donde podemos escri#ir un valor, de modo !ue despu8s
pueda ser asignado a una varia#le.
prompt:8mensaje8<valor por deecto;
Matemticas.- *e trata de las propiedades de (at?4
abs:;: valor a#soluto
ma2:v1<..<vn;: valor m3imo
min:v1<..<vn;: valor mnimo
round:;: redondear
e2p:;: e3ponencial
log:;: logaritmo
po9:base<e2ponente;: potencia
sqrt:;: ra+ cuadrada
sin:;: seno
cos:;: coseno
tan:;: tangente
asin:;: arcoseno
acos:;: arcocoseno
atan:;: arcotangente
1N. 5estin de eventos
Captulo anterior: :C - as ventanas
Captulo siguiente: :K - E$emplos de eventos
Evento se considera cual!uier acci'n !ue el usuario reali+a con el sistema4 %acer clicT,
posicionarse con el rat'n en un lugar determinado, enviar un formulario, posicionarse en
un cuadro para te3to,....
9ara referirnos a un evento en HTM, el nom#re del evento ir precedido por FonF. 9or
e$emplo, el gestor de eventos de 8ClicW8 ser 8onClicW8.
a forma de llamar a un evento es la siguiente. Imaginamos !ue tenemos un #ot'n en un
formulario, " !ueremos !ue al pulsarlo realice una acci'n determinada4
&orm ....*
&input type78button8 onClicW78uncin:JparDmetrosL;8*
&.orm ....*
&on esta acci'n, asociamos al evento clicT so#re el #ot'n las acciones !ue realice la
funci'n.
Aeamos los eventos !ue conoce Java*cript4
,rag,rop: arrastrar un o#$eto a la ventana del navegador.
+rror: se produce un error en la carga de un documento.
Iocus: el usuario se posiciona en una ventana o cuadro de te3to de un formulario.
Zey,o9n: se pulsa una tecla.
Zey-ress: se pulsa o li#era una tecla
Zey6p: se li#era una tecla
)oad: se carga un documento en el navegador
(ouse,o9n: se pulsa un #ot'n del rat'n
(ouse(ove: se mueve el cursor
(ouse0ver: el puntero del rat'n se posiciona so#re un enlace
(ouse0ut: el puntero del rat'n sale de un enlace o imagen mapa
(ouse6p: se li#era un #ot'n del rat'n.
(ove: se mueve la ventana. Esta acci'n tam#i8n la puede reali+ar el script.
3eset: se pulsa so#re el #ot'n reset del formulario.
3esi"e: las dimensiones de la ventana cam#ian.
Select: se selecciona una de las opciones de un cuadro com#o del formulario.
Submit: se pulsa el #ot'n submit del formulario.
6n)oad: el usuario sale de la pgina.
/ecuerde !ue para llamar a los eventos, se de#e anteponer 8on8 al nom#re del evento.
En la pr'3ima lecci'n veremos e$emplos de eventos.
1P. +jemplos de eventos
Captulo anterior: :H - Besti'n de eventos
Captulo siguiente: 2= - a captura
Aeamos un e$emplo del evento ClicW:
&script*
unction contar:objetoSelect;E
var seleccionadas7C
or :var i7C!i & objetoSelect.options.lengt?!iRR;E
i :objetoSelect.optionsJiL.selected;
seleccionadasRR!
G
return seleccionadas!
G
&.script*
El resto de c'digo HTM es el siguiente4
&/0,1 /5C0)0378[IIIIII8*
&orm name78ormulario8*
Selecione los temas que son de su interMs
y pulse despuMs el botn
&select name78temas8 mYltiple*
&option selected*InormDtica
&option*4aturale"a
&option*(Ysica
&option*,eportes
&option*+conoma
&option*Coleccionismo
&.select*
&input type78button8 value78\CuDntos ?ay selecionados]8
onclicW78alert:=4Ymero de opciones selecionadas: = R
contar:document.ormulario.temas;;8*
&.orm*
Aamos a estudiar este e$emplo con detenimiento4
Este formulario cuenta el n1mero de opciones de un cuadro com#o.
Hemos definido un formulario llamado formulario !ue posee un cuadro com#o 5llamado
temas6 " un
#ot'n.
*i nos fi$amos en el #ot'n, veremos !ue con el evento &licT llama a la funci'n definida
previamente contar.
Esta funci'n toma como parmetro el cuadro com#o 5document.formulario.temas6 " lo
procesa, devolviendo un valor con return
.#s8rvese tam#i8n !ue el resultado no se escri#e en un cuadro de te3to, sino !ue
usamos alert para mostrar un mensa$e en otro cuadro, !ue concatena un literal " el
resultado de la funci'n contar.
#C. )a captura
Captulo anterior: :K - E$emplos de eventos
Captulo siguiente: 2: - as cooTies
Java*cript permite definir eventos " asignarlos a o#$etos por encima de los elementos
donde nacen dic%os eventos.
9ara definir estos eventos, los o#$etos 9indo9, document " layer utili+an los
siguientes m8todos4
Fcapture+vents: captura eventos del tipo !ue se especifi!ue.
Frelease+vents: ignora la captura del tipo especificado.
Froute+vent:: enva el evento capturado a un o#$eto.
(%ora vamos a ver la secuencia de captura, definici'n " activaci'n de un gestor de
eventos4
?e#emos especificar el tipo de eventos !ue !ueremos capturar4
9indo9.capture+vent:+vent.C)ICZ JV +vent.X V +vent.XL;
?e este modo, todos los eventos de tipo &I&V !ue se produ+can sern capturados.
,'tese !ue se pueden especificar varios eventos, siempre separados por V !ue significa
03.
Tras capturar dic%o5s6 evento5s6, de#eremos especificar una funci'n !ue realice las
acciones asociadas a dic%o evento4
unction evento^nombre:JparDmetrosL;E
acciones
return true o alse
a funci'n devolver true cuando la acci'n sea posi#le " alse en caso contrario.
Da tenemos el evento capturado " la funci'n asociada, s'lo !ueda asignar al evento la
funci'n especificada4
9indo9.onClicW7evento^nombre!
#1. )as cooWies
Captulo anterior: 2= - a captura
Captulo siguiente: 22 - &onfigurar " #orrar una cooTie
Una &..VIE es un pe!ue)o elemento de informaci'n !ue se almacena en el cliente
como parte del arc%ivo cooWies.t2t.
Una cooWie puede estar gestionada de tres formas4
:.&on un &BI, programa residente en la parte servidora.
2.?esde Java*cript, con document.cooWie
;.&on un o#$eto del servidor llamado client dedicado a las la#ores de mantenimiento.
a forma de acceder a una cooWie es con la propiedad cooWie de document, de modo
!ue devuelve una cadena !ue contiene todas las cooWies e3istentes en nuestro sistema.
a forma ms sencilla de enviar una cooWie con Java*cript es usando la instrucci'n4
document.cooWie7=cooWie=
as funciones.- 9ara acceder a una cooWie en concreto, podemos utili+ar las siguientes
funciones.
Esta funci'n devuelve una cadena con el valor de la cooWie o null si no la encuentra4
unction getCooWie:name;E
var cname7name R 878!
var dc7document.cooWie!
i:dc.lengt?*CE
begin7dc.inde20:cname;!
i:beginS7F1;E
beginR7cname.lengt?!
end7dc.inde20:8!8<begin;!
i:end77F1;
end7dc.lengt?!
return:dc.substring:bgin<end;;!
G
G
G
##. Conigurar y borrar una cooWie
Captulo anterior: 2: - as cooTies
Captulo siguiente: 2; - ista de *cripts
9ara configurar una cooTie podemos utili+ar la siguiente funci'n4
unction setCooWie:name<values<e2pires<pat?<domain<secure;E
document.cooWie7nameR 878 Rescape:value; R
::e2pires77null;]88:8!e2pires78Re2pires.to5('String:;;
R::pat?77null;]88:8!pat?78 R pat?;
R::domain77null;]88:8!domain78Rdomain;
R::secure77null;]88:8!secure8;!
G
9ara #orrar una cooTie usaremos una funci'n como la siguiente4
unction delCooWie:name<pat?<domain;E
i:getCooWie:name;;E
document.cooWie7nameR878
R::pat?77null;]88:8!pat?78Rpat?;
R::domain77null;]88:8!domain78Rdomain;R8!
e2pires7'?u<C1FJanFHC CC:CC:C1 5('8!
G
G
imitaciones.- as cooTies tienen unas limitaciones4
-M3imo de ;== cooTies en el arc%ivo cooWies.t2t. *i se e3cede ese lmite, se eliminan
las menos recientes.
-M3imo de > V# por cooTie. *i se e3cede el lmite, se trunca la cooTie de$ando intacto
el nom#re, siempre !ue 8ste no e3ceda los >V#.
-2= cooTies por servidor o dominio. *i se e3cede ese lmite, se eliminan las menos
recientes.
#$. )ista de Scripts
Captulo anterior: 22 - &onfigurar " #orrar una cooTie
Aeamos algunos scripts que puede reali"ar para avisar al usuario:
-(viso tras a#rir la pgina4
&script language78JavaScript8*
.. Iuncin que devuelve un aviso.
unction loadalert :;
Ealert:8%ola< este mensaje se carga al abrir la pDgina8;
G
.. )lamaremos a esta uncin en el evento 0n)oad de la pDgina< es decir< cuando la
pDgina se cargue.
&.script*
-&onfirmar el salto en un enlace4
&script*
unction rusure:;E
question 7 conirm:8/ien ?ec?o8;
i :question S78C8;E
sel.location 7 8...nuevae.?tml8
G
G
.. +sta uncin nos muestra un te2to en la pantalla< de modo que si aceptamos el
te2to
:S7C;< enla"aremos con otra pDgina
&.script*
-Enlace a otra ventana si confirma el aviso
&script*
unction 9inconirm:;E
question 7 conirm:8Aa a saltar a una ventana nueva8;
i :question S7 8C8;E
9indo9.open:8...nuevav.?tml8< 84e9Kin8<
8toolbar7yes<location7yes<directories7no<status7no<menubar7yes<scrollbars7yes<
resi"able7no<copy?istory7yes<9idt?7>$@<?eig?t7#BC8;
G
G
&.script*
*i desea sa#er ms so#re otros so#res *cripts de informaci'n al usuario
%ttp4<<MMM.unav.es<cti<manuales<TutorialJava*cript<scripts<ealert.%tml, uso del rat'n
%ttp4<<MMM.unav.es<cti<manuales<TutorialJava*cript<scripts<eraton.%tml, #otones "
formularios %ttp4<<MMM.unav.es<cti<manuales<TutorialJava*cript<scripts<e#f.%tml,
cuadros com#o
%ttp4<<MMM.unav.es<cti<manuales<TutorialJava*cript<scripts<ecom#o.%tml, sucesos
aleatorios %ttp4<<MMM.unav.es<cti<manuales<TutorialJava*cript<scripts<erandom.%tml,
relo$es " fec%as %ttp4<<MMM.unav.es<cti<manuales<TutorialJava*cript<scripts<erelo$.%tml o
referentes al usuario
%ttp4<<MMM.unav.es<cti<manuales<TutorialJava*cript<scripts<euser.%tml pulse encima de
cada una de las opciones.