Javascript Ciclo

JavaScript
Lengua|es de naroas
y sistenas de gestin
de la infornaoin
lenquojes Je morcos y sistemos Je qestin Je
lenquojes Je morcos y sistemos Je qestin Je lo informocin: }ovoScript
2
3
Indice
1. IAVASCkI1 .......................................................................................................................................... S
ln18CuuCClCn.......................................................................................................................................... S
ALCCuL PlS1C8lA...................................................................................................................................... S
LL LLnCuA!L !AvASC8l1........................................................................................................................... 7
u8lCA8 L1lCuL1AS..................................................................................................................................... 8
CCuL1A8 SC8l1S LnnAvLCAuC8LS An1lCuCS ...................................................................................... 9
CAM8l0S LnxP1ML.................................................................................................................................. 10
2. LL LLNGUAIL....................................................................................................................................... 13
Sln1AxlS ................................................................................................................................................... 13
vA8lA8LLS ................................................................................................................................................ 14
M8l1CuL LAS vA8lA8LLS ...................................................................................................................... 1S
CuL CuLMCS CuA8uA8 LnvA8lA8LLS?............................................................................................. 18
1lCS uL uA1CS ....................................................................................................................................... 19
CL8AuC8LS............................................................................................................................................ 21
3. LS1kUC1UkAS DL CCN1kCL .............................................................................................................. 28
ln18CuuCClCn........................................................................................................................................ 28
LS18uC1u8A ll ......................................................................................................................................... 29
LS18uC1u8A SWl1CP ................................................................................................................................. 33
8uCLL lC8 ................................................................................................................................................. 34
8uCLLS WPlLL ? uC ...WPlLL......................................................................................................................... 36
88LAk ? CCn1lnuL .................................................................................................................................. 38
8uCLLS AnluAuCS ................................................................................................................................... 39
4. IUNCICNLS......................................................................................................................................... 41
ln18CuuCClCn........................................................................................................................................ 41
uCnuL CCLCCAMCS LAS lunClCnLS?.................................................................................................. 43
A8ML18CS uL LAS lunClCnLS............................................................................................................ 44
vALC8LS uL 8L1C8nC............................................................................................................................. 46
S. AkkAS .............................................................................................................................................. 48
ln18CuuCClCn........................................................................................................................................ 48
LCnCl1uuuL LCS A88A?S ....................................................................................................................... S0
A88A?S MuL1lulMLnSlCnALLS............................................................................................................... S1
18A1AMlLn1CuL L88C8LS ..................................................................................................................... S3
6. IUNCICNLS IN1LkNAS....................................................................................................................... S6
Ll88L8lA uL lunClCnLS........................................................................................................................... S6
L!LMLCS uL lunClCnLS ........................................................................................................................ S7
7. C8IL1CS ............................................................................................................................................. S9
ln18CuuCClCn........................................................................................................................................ S9
C8!L1CS lnCC8C8AuCS ........................................................................................................................ 60
CLASL S18lnC ........................................................................................................................................... 62
L!LMLCS uL LA CLASL S18lnC................................................................................................................ 63
CLASL uA1L............................................................................................................................................... 64
L!LMLCuL LA CLASL uA1L ..................................................................................................................... 66
CLASL MA1P............................................................................................................................................. 67
L!LMLCuL LA CLASL MA1P.................................................................................................................... 68
CLASL 8CCLLAn ....................................................................................................................................... 68
MCuLLCuL C8!L1CS uLL nAvLCAuC8 (uCM)....................................................................................... 69
C8!L1CWlnuCW..................................................................................................................................... 72
L!LMLCS uLL C8!L1CWlnuCW............................................................................................................. 7S
4
C8!L1CuCCuMLn1................................................................................................................................. 81
L!LMLCS uLL C8!L1CuCCuMLn1......................................................................................................... 82
C8!L1CLCCA1lCn.................................................................................................................................... 83
C8!L1CnAvlCA1C8................................................................................................................................. 8S
C8!L1CSC8LLn........................................................................................................................................ 86
8. ICkMULAkICS ....................................................................................................................................88
18A8A!CCCnlC8MuLA8lCS .................................................................................................................. 88
CALCuLAuC8A SLnClLLA.......................................................................................................................... 89
C8!L1ClC8M........................................................................................................................................... 91
CCn18CL uL CAMCS uL 1Lx1C.............................................................................................................. 92
CCn18CL uL CPLCk8Cx........................................................................................................................... 94
CCn18CL uL 8C1CnLS uL 8AulC ............................................................................................................ 96
CCn18CL uL CAMCS SLLLC1.................................................................................................................. 99
CCn18CL uL 1Lx1A8LA.......................................................................................................................... 101
9. LVLN1CS ...........................................................................................................................................104
ln18CuuCClCn...................................................................................................................................... 104
1lCS uL LvLn1CS.................................................................................................................................. 10S
L!LMLCuLL LvLn1CCn8Lu8.............................................................................................................. 107
L!LMLCvALluAClCnuL unlC8MuLA8lC.......................................................................................... 110
L!LMLCLvLn1CCnunLCAu............................................................................................................... 111
L!LMLCLvLn1CCnLCAu.................................................................................................................... 112
L!LMLCLvLn1CCnCPAnCL ............................................................................................................... 113
L!LMLCLvLn1CCnkL?uCWn............................................................................................................ 116
L!LMLC8CLLCvL8 ............................................................................................................................... 118
L!LMLC8LLC!....................................................................................................................................... 119
L!LMLC8LLC! CCnAuSA................................................................................................................... 120
10. LAS CCCkILS...................................................................................................................................121
CuL SCn LAS CCCklLS.................................................................................................................................. 121
uCnuL SL LSCCnuLn................................................................................................................................... 121
CCCklLS .................................................................................................................................................... 123
11. LILkCICICS ......................................................................................................................................12S
5
1avascript
INTR0B0CCI0N
JavaScript es un lenguaje de programacin que se utiliza principalmente para crear
pginas web dinmicas.
Una pgina web dinmica es aquella que incorpora efectos como texto que aparece y
desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con
mensajes de aviso al usuario.
Tcnicamente, JavaScript es un lenguaje de programacin interpretado, por lo que
no es necesario compilar los programas para ejecutarlos. En otras palabras, los
programas escritos con JavaScript se pueden probar directamente en cualquier
navegador sin necesidad de procesos intermedios.
A pesar de su nombre, JavaScript no guarda ninguna relacin directa con el lenguaje
de programacin Java. Legalmente, JavaScript es una marca registrada de la
empresa Sun Microsystems, como se puede comprobar en la siguiente direccion
http://www.sun.com/suntrademarks/.
ALu0 BE BIST0RIA
A principios de los aos 90, la mayora de usuarios que se conectaban a Internet lo
hacan con mdems a una velocidad mxima de 28.8 kbps. En esa poca,
empezaban a desarrollarse las primeras aplicaciones web y por tanto, las pginas
web comenzaban a incluir formularios complejos.
Con unas aplicaciones web cada vez ms complejas y una velocidad de navegacin
tan lenta, surgi la necesidad de un lenguaje de programacin que se ejecutara en el
navegador del usuario. De esta forma, si el usuario no rellenaba correctamente un
formulario, no se le haca esperar mucho tiempo hasta que el servidor volviera a
mostrar el formulario indicando los errores existentes.
Brendan Eich, un programador que trabajaba en Netscape, pens que podra
solucionar este problema adaptando otras tecnologas existentes (como ScriptEase)
al navegador Netscape Navigator 2.0, que iba a lanzarse en 1995. Inicialmente, Eich
denomin a su lenguaje LiveScript.
Posteriormente, Netscape firm una alianza con Sun Microsystems para el desarrollo
del nuevo lenguaje de programacin. Adems, justo antes del lanzamiento Netscape
decidi cambiar el nombre por el de JavaScript. La razn del cambio de nombre fue
6
exclusivamente por marketing, ya que Java era la palabra de moda en el mundo
informtico y de Internet de la poca.
La primera versin de JavaScript fue un completo xito y Netscape Navigator 3.0 ya
incorporaba la siguiente versin del lenguaje, la versin 1.1. Al mismo tiempo,
Microsoft lanz JScript con su navegador Internet Explorer 3. JScript era una copia de
JavaScript al que le cambiaron el nombre para evitar problemas legales.
Para evitar una guerra de tecnologas, Netscape decidi que lo mejor sera
estandarizar el lenguaje JavaScript. De esta forma, en 1997 se envi la especificacin
JavaScript 1.1 al organismo ECMA (European Computer Manufacturers Association).
ECMA cre el comit TC39 con el objetivo de "estandarizar de un lenguaje de script
multiplataforma e independiente de cualquier empresa". El primer estndar que cre
el comit TC39 se denomin ECMA-262, en el que se defini por primera vez el
lenguaje ECMAScript.
Por este motivo, algunos programadores prefieren la denominacin ECMAScript para
referirse al lenguaje JavaScript. De hecho, JavaScript no es ms que la
implementacin que realiz la empresa Netscape del estndar ECMAScript.
La organizacin internacional para la estandarizacin (ISO) adopt el estndar ECMA-
262 a travs de su comisin IEC, dando lugar al estndar ISO/IEC-16262.
7
EL LENu0A}E }AvASCRIPT
Qu necesitas.
Para programar en Javascript necesitamos bsicamente lo mismo que para
programar pginas web con HTML. Un editor de textos y un navegador compatible
con Javascript. Un usuario de Windows posee de salida todo lo necesario para poder
programar en Javascript, puesto que dispone dentro de su instalacin tpica de
sistema operativo, de un editor de textos, el Bloc de notas, y de un navegador:
Internet Explorer.
Bonue esciibii.
Lo ms importante y bsico que podemos destacar en este momento es que la
programacin de Javascript se realiza dentro del propio documento HTML. Esto
quiere decir que en la pgina se mezclan los dos lenguajes de programacin, y para
que estos dos lenguajes se puedan mezclar sin problemas se han de incluir unos
delimitadores que separan las etiquetas HTML de las instrucciones Javascript. Estos
delimitadores son las etiquetas <SCRIPT> y </SCRIPT>. Todo el cdigo Javascript
que pongamos en la pgina ha de ser introducido entre estas dos etiquetas.
En una misma pgina podemos introducir varios scripts, cada uno que podra
introducirse dentro de unas etiquetas <SCRIPT></SCRIPT>. La colocacin de estos
scripts suele ser antes de la etiqueta </HEAD>.
Tambin se puede escribir Javascript dentro de un fichero externo y hacer referencia
a dicho fichero desde nuestra pgina a travs del atributo SRC de la etiqueta
<SCRIPT>.
Los ficheros externos de Javascript tienen un formato muy sencillo, Bsicamente son
ficheros de texto que contienen cdigo Javascript. No se necesitan etiquetas
<SCRIPT></SCRIPT> dentro de los ficheros externos.
No existen reglas concretas sobre qu mtodo emplear, pero el consenso general
desaconseja incluir grandes cantidades de Javascript en lnea por distintos motivos:
Seguridad: Cualquiera puede ver el cdigo con tan slo examinar el cdigo
fuente de la pgina. Recordemos que Javascript se ejecuta en el cliente.
Mantenimiento del cdigo: Si el cdigo Javascript se distribuye en varias
pginas su mantenimiento se hace complicado.
Almacenamiento en cach: Los navegadores almacenan en cach todos los
archivos de Javascript vinculados, de forma que si dos pginas utilizan el
mismo archivo, slo se carga una vez, lo que supone tiempos de carga ms
rpidos. La inclusin del mismo cdigo en varias pginas no slo es una
prdida de tiempo, sino que tambin aumenta el tamao de la pgina y el
tiempo de descarga del servidor.
8
0BICAR ETIQ0ETAS
Por lo general, suele ser habitual incluir todo el cdigo y las definiciones de funciones
en la metiqueta <HEAD> de una pgina HTML para que el cdigo se cargue y se
pueda utilizar al representar el cuerpo de la misma. El nico cdigo que debe
aparecer en la etiqueta <BODY> es el que invoca a funciones definidas previamente.
Al incluir la etiqueta <SCRIPT> dentro de la etiqueta <BODY>, la secuencia de
comandos se ejecuta al descargar esa parte de la pgina en el navegador. De esta
forma se puede ejecutar cdigo Javascript antes de que se abra la totalidad de la
pgina.
<html>
<head>
<title></title>
<script language=Javascript>
Function hola()
{
Alert("hola);
}
</script>
</head>
<body>
hola();
</script>
</body>
</html>
9
Tambin podemos invocar a Javascript desde un evento. Por ejemplo:
0C0LTAR SCRIPTS EN NAvEuAB0RES
ANTIu00S
Ya hemos visto que Javascript se implement a partir de Netscape 2.0 e Internet
Explorer 3.0, incluso hay navegadores que funcionan en sistemas donde slo se
puede visualizar texto y por lo tanto determinadas tecnologas, como este lenguaje,
estn fuera de su alcance. As pues, no todos los navegadores del web comprenden
Javascript. En los casos en los que no se interpretan los scripts, los navegadores
asumen que el cdigo de stos es texto de la propia pgina web y como
consecuencia, presentan los scripts en la pgina web como si de texto normal se
tratara. Para evitar que el texto de los scripts se escriba en la pgina cuando los
navegadores no los entienden se tienen que ocultar los con comentarios HTML (). Veamos con un ejemplo cmo se han de ocultar los scripts.
Vemos que el inicio del comentario HTML es idntico a cmo lo conocemos en el
HTML, pero el cierre del comentario presenta una particularidad, que empieza por
doble barra inclinada. Esto es debido a que el final del comentario contiene varios
caracteres que Javascript reconoce como operadores y al tratar de analizarlos lanza
un mensaje de error de sintaxis. Para que Javascript no lance un mensaje de error se
coloca antes del comentario HTML esa doble barra, que no es ms que un comentario
Javascript, que conoceremos ms adelante cuando hablemos de sintaxis.
<script>

</script>
<html>
<head>
<title></title>
Function hola()
{
Alert("hola);
}
</script>
</head>
<body>
<input type=button value=Llamar funcion onclick=hola()/>
</body>
</html>
10
El inicio del comentario HTML no es necesario comentarlo con la doble barra, dado
que Javascript entiende bien que simplemente se pretende ocultar el cdigo. Una
aclaracin a este punto: si pusiesemos las dos barras en esta lnea, se veran en
navegadores antiguos por estar fuera de los comentarios HTML. Las etiquetas
<SCRIPT> no las entienden los navegadores antiguos, por lo tanto no las
interpretan, tal como hacen con cualquier etiqueta que desconocen.
Existe la posibilidad de indicar un texto alternativo para los navegadores que no
entienden Javascript, para informarles de que en ese lugar debera ejecutarse un
script y que la pgina no est funcionando al 100% de sus capacidades. Tambin
podemos sugerir a los visitantes que actualicen su navegador a una versin
compatible con el lenguaje. Para ello utilizamos la etiqueta <NOSCRIPT> y entre esta
etiqueta y su correspondiente de cierre podemos colocar el texto alternativo al script.
CANBIuS EN XBTNL
Con la aparicin del estndar XHTML (HTML extensible), la etiqueta <SCRIPT> ha
sufrido ciertos cambios. En lugar del atributo language, espera un atributo type para
indicar el tipo de contenido. El valor de este atributo es "text/javascript.
Aunque muchos navegadores no admiten XHTML de forma completa, la mayora de
programadores utilizan el atributo type en lugar de language. La omisin del atributo
language no genera ningn error, ya que todos los navegadores aceptan Javascript
de forma predeterminada.
El segundo cambio de XHTML es el uso de las secciones CDATA. Estas secciones se
utilizan en XML (y, por tanto, en XHTML) para indicar qu texto no debe analizarse
como etiquetas, lo que permite el uso de caracteres especiales como los smbolos <,
>, & y " sin utilizar sus entidades de caracteres. Veamos un ejemplo:
<script>
//cdigo javascript
</script>
<noscript>
Este navegador no comprende los scripts que se estn ejecutando, debes
actualizar tu versin de navegador a una ms reciente.
<b />
<br />
<a href=http://netscape.com>Netscape</a>.<br>
<a href=http://microsoft.com>Microsoft</a>.
</noscript>
11
El cdigo de la funcin anterior para XHTML no es vlido ya que utiliza tres
caracteres especiales: menor que, mayor que y las comillas dobles. Para solucionarlo
es necesario sustituir estos caractres por sus entidades XML: <, > y ".
El utilizar dichas entidades presenta dos problemas. Por un lado, los programadores
no estn acostumbrados a disear cdigo con entidades XML, ya que dificulta la
legibilidad del cdigo. Por otra parte, se considera un error sintctico en Javascript,
ya que el intrprete desconoce el significado de las entidades XML. Al utilizar una
seccin CDATA, se puede escribir cdigo de Javascript en una sintxis normal y
legible. La forma de incluir una seccin CDATA es:
<script type=text/javascript>
function comparar()
{
if (a < b)
{
alert("A es menor que B");
}
else if (a > b)
{
alert("A es mayor que B");
}
else
{
alert("A es igual a B");
}
}
</script>
function comparar()
{
if (a<b)
{
alert("A es menor que B);
}
else if (a>b)
{
alert("A es mayor que B);
}
else
{
alert("A es igual a B);
}
}
</script>
12
/*<![CDATA[*/
function comparar()
{
if (a < b)
{
alert("A es menor que B");
}
else if (a > b)
{
alert("A es mayor que B");
}
else
{
alert("A es igual a B");
}
}
/*]]>*/
</script>
13
El Lenguaje
SINTAXIS
El lenguaje Javascript tiene una sintaxis muy parecida a la de Java por estar
basado en l. Tambin es muy parecida a la del lenguaje C, de modo que si el lector
conoce alguno de estos dos lenguajes se podr manejar con facilidad con el cdigo.
De todos modos, en los siguientes captulos vamos a describir toda la sintaxis con
detenimiento, por lo que los novatos no tendrn ningn problema con ella.
Comentaiios
Un comentario es una parte de cdigo que no es interpretada por el navegador y
cuya utilidad radica en facilitar la lectura al programador. El programador, a medida
que desarrolla el script, va dejando frases o palabras sueltas, llamadas comentarios,
que le ayudan a l o a cualquier otro a leer mas fcilmente el script a la hora de
modificarlo o depurarlo.
Ya se vio anteriormente algn comentario Javascript, pero ahora vamos a contarlos
de nuevo. Existen dos tipos de comentarios en el lenguaje. Uno de ellos, la doble
barra, sirve para comentar una lnea de cdigo. El otro comentario lo podemos
utilizar para comentar varias lneas y se indica con los signos /* para empezar el
comentario y */ para terminarlo. Veamos unos ejemplos.
Naysculas y minsculas
En javascript se han de respetar las maysculas y las minsculas. Si nos
equivocamos al utilizarlas el navegador responder con un mensaje de error de
sintaxis.
<script type="text/javascript>
//Este es un comentario de una lnea
/* Este comentario se puede extender
por varias lneas.....
.............................Las que quieras */
</script>
14
Sepaiacion ue instiucciones
Las distintas instrucciones que contienen nuestros scripts se han de separar
convenientemente para que el navegador no indique los correspondientes errores de
sintaxis. Javascript tiene dos maneras de separar instrucciones. La primera es a
travs del carcter punto y coma (;) y la segunda es a travs de un salto de lnea.
Por esta razn Las sentencias Javascript no necesitan acabar en punto y coma a no
ser que coloquemos dos instrucciones en la misma lnea.
No es una mala idea, de todos modos, acostumbrarse a utilizar el punto y coma
despus de cada instruccin pues otros lenguajes como Java o C obligan a utilizarlas
y nos estaremos acostumbrando a realizar una sintaxis ms parecida a la habitual en
entornos de programacin avanzados.
vARIABLES
Una variable es un espacio en memoria donde se almacena un dato, un
espacio donde podemos guardar cualquier tipo de informacin que necesitemos para
realizar las acciones de nuestros programas. Por ejemplo, si nuestro programa
realiza sumas, ser muy normal que guardemos en variables los distintos sumandos
que participan en la operacin y el resultado de la suma. El efecto sera algo parecido
a esto.
sumondo1 = 2l
sumondo2 = ll
sumo = sumondo1 + sumondo2
En este ejemplo tenemos tres variables, sumando1, sumando2 y suma, donde
guardamos el resultado. Vemos que su uso para nosotros es como si tuvisemos un
apartado donde guardar un dato y que se pueden acceder a ellos con slo poner su
nombre.
Los nombres de las variables han de construirse con caracteres alfanumricos y el
carcter subrayado (_). Aparte de esta, hay una serie de reglas adicionales para
construir nombres para variables. La ms importante es que tienen que comenzar
por un carcter alfabtico o el subrayado. No podemos utilizar caracteres raros como
el signo +, un espacio o un $. Nombres admitidos para las variables podran ser:
edod
poisueNocimiento
_nombre
Tambin hay que evitar utilizar nombres reservados como variables, por ejemplo no
podremos llamar a nuestra variable palabras como return o for, que ya veremos que
son utilizadas para estructuras del propio lenguaje. Veamos ahora algunos nombres
de variables que no estn permitidos utilizar.
12meses
tu nombre
15
return
peXpe
Beclaiacion ue vaiiables
Declarar variables consiste en definir y de paso informar al sistema de que vas a
utilizar una variable. Es una costumbre habitual en los lenguajes de programacin el
definir las variables que se van a usar en los programas y para ello, se siguen unas
reglas estrictas. Pero javascript se salta muchas reglas por ser un lenguaje un tanto
libre a la hora de programar y uno de los casos en los que otorga un poco de libertad
es a la hora de declarar las variables, ya que no estamos obligados a hacerlo, al
contrario de lo que pasa en la mayora de los lenguajes de programacin.
De todos modos, es aconsejable declarar las variables, adems de una buena
costumbre y para ello Javascript cuenta con la palabra var. Como es lgico, se utiliza
esa palabra para definir la variable antes de utilizarla.
vor operondo1,
vor operondo2 ,
Tambin se puede asignar un valor a la variable cuando se est declarando
vor operondo1 = 2l,
vor operondo2 = ll,
Tambin se permite declarar varias variables en la misma lnea, siempre que se
separen por comas.
vor operondo1,operondo2,
ANBIT0 BE LAS vARIABLES
Se le llama mbito de las variables al lugar donde estas estn disponibles.
Por lo general, cuando declaramos una variable hacemos que est disponible en el
lugar donde se ha declarado, esto ocurre en todos los lenguajes de programacin y
como javascript se define dentro de una pgina web, las variables que
declaremos en la pgina estarn accesibles dentro de ella. De este modo, no
podremos acceder a variables que hayan sido definidas en otra pgina. Este es el
mbito ms habitual de una variable y le llamaremos a este tipo de variables
globales a la pgina, aunque no ser el nico, ya que tambin podremos declarar
variables en lugares ms acotados.
vaiiables globales
Como hemos dicho, las variables globales son las que estn declaradas en el mbito
ms amplio posible, que en Javascript es una pgina web. Para declarar una variable
global a la pgina simplemente lo haremos en un script, con la palabra var.
16
Las variables globales son accesibles desde cualquier lugar de la pgina, es decir,
desde el script donde se han declarado y todos los dems scripts de la pgina,
incluidos los manejadores de eventos, como el onclick, que ya vimos que se poda
incluir dentro de determinadas etiquetas HTML.
vaiiables locales
Tambin podremos declarar variables en lugares ms acotados, como por ejemplo
una funcin. A estas variables les llamaremos locales. Cuando se declaren variables
locales slo podremos acceder a ellas dentro del lugar donde se ha declarado, es
decir, si la habamos declarado en una funcin solo podremos acceder a ella cuando
estemos en esa funcin.
Las variables pueden ser locales a una funcin, pero tambin pueden ser locales a
otros mbitos, como por ejemplo un bucle. En general, son mbitos locales cualquier
lugar acotado por llaves.
En el script anterior hemos declarado una variable dentro de una funcin, por lo que
esa variable slo tendr validez dentro de la funcin. Se pueden ver cmo se utilizan
las llaves para acotar el lugar donde est definida esa funcin o su mbito.
No hay problema en declarar una variable local con el mismo nombre que una global,
en este caso la variable global ser visible desde toda la pgina, excepto en el mbito
donde est declarada la variable local ya que en este sitio ese nombre de variable
est ocupado por la local y es ella quien tiene validez.
function miFuncion ()
{
var variableLocal;
}
</script>
var variableGlobal;
</script>
17
Un consejo para los principiantes podra ser no declarar variables con los mismos
nombres, para que nunca haya lugar a confusin sobre qu variable es la que tiene
validez en cada momento.
Bifeiencias entie utilizai vai o no
Como hemos dicho, en Javascript tenemos libertad para declarar o no las variables
con la palabra var, pero los efectos que conseguiremos en cada caso sern distintas.
En concreto, cuando utilizamos var estamos haciendo que la varible que estamos
declarando sea local al mbito donde se declara. Por otro lado, si no utilizamos la
palabra var para declarar una variable, sta ser global a toda la pgina, sea cual
sea el mbito en el que haya sido declarada.
En el caso de una variable declarada en la pagina web, Iuera de una Iuncion o cualquier
otro ambito mas reducido, nos es indiIerente si se declara o no con var, desde un punto de
vista Iuncional. Esto es debido a que cualquier variable declarada Iuera de un ambito es
global a toda la pagina. La diIerencia se puede apreciar en una Iuncion por ejemplo, ya
que si utilizamos var la variable sera local a la Iuncion y si no lo utilizamos, la variable
sera global a la pagina. Esta diIerencia es Iundamental a la hora de controlar
correctamente el uso de las variables en la pagina, ya que si no lo hacemos en una Iuncion
podriamos sobreescribir el valor de una variable, perdiendo el dato que pudiera contener
previamente.
var numero = 2;
{
numero = 19;
document.write(numero); //imprime 19
}
//llamamos a la funcin
miFuncion();
</script>
var numero = 2;
{
var numero = 19;
}
</script>
18
En este ejemplo, tenemos una variable global a la pgina llamada numero, que
contiene un 2. Tambin tenemos una funcin que utiliza la variable numero sin
haberla declarado con var, por lo que la variable numero de la funcion ser la misma
variable global numero declarada fuera de la funcin. En una situacin como esta, al
ejecutar la funcin se sobreescribir la variable numero y el dato que haba antes de
ejecutar la funcin se perder.
Q0E P0BEN0S u0ARBAR EN
vARIABLES.
En una variable podemos introducir varios tipos de informacin, por ejemplo texto,
nmeros enteros o reales, etc. A estas distintas clases de informacin se les conoce
como tipos de datos. Cada uno tiene caractersticas y usos distintos, veamos cules
son los tipos de datos de Javascript.
Nmeros
Para empezar tenemos el tipo numrico, para guardar nmeros como 9 o 23.6
Cadenas
El tipo cadena de carcter guarda un texto. Siempre que escribamos una cadena de
caracteres debemos utilizar las comillas (").
Boleanos
Tambin contamos con el tipo boleano, que guarda una informacin que puede valer
si (true) o no (false).
Por ltimo sera relevante sealar aqu que nuestras variables pueden contener cosas
ms complicadas, como podra ser un objeto, una funcin, o vaco (null) pero ya lo
veremos ms adelante.
En realidad nuestras variables no estn forzadas a guardar un tipo de datos en
concreto y por lo tanto no especificamos ningn tipo de datos para una variable
cuando la estamos declarando. Podemos introducir cualquier informacin en una
variable de cualquier tipo, incluso podemos ir cambiando el contenido de una variable
de un tipo a otro sin ningn problema. Vamos a ver esto con un ejemplo.
vor nombre_ciudod = "vo/encio",
vor revisodo = true,
nombre_ciudod = l2,
revisodo = "no",
Esta ligereza a la hora de asignar tipos a las variables puede ser una ventaja en un
principio, sobretodo para personas inexpertas, pero a la larga puede ser fuente de
errores ya que dependiendo del tipo que son las variables se comportarn de un
modo u otro y si no controlamos con exactitud el tipo de las variables podemos
encontrarnos sumando un texto a un nmero. Javascript operar perfectamente, y
devolver un dato, pero en algunos casos puede que no sea lo que estbamos
esperando. As pues, aunque tenemos libertad con los tipos, esta misma libertad nos
19
hace estar ms atentos a posibles desajustes difciles de detectar a lo largo de los
programas. Veamos lo que ocurrira en caso de sumar letras y nmeros.
vor sumondo1 = 2l,
vor sumondo2 = "ll",
vor sumo = sumondo1 + sumondo2,
document.write{sumo),
Este script nos mostrara en la pgina el texto 2333, que no se corresponde con la
suma de los dos nmeros, sino con su concatenacin, uno detrs del otro.
TIP0S BE BAT0S
En nuestros scripts vamos a manejar variables diversas clases de informacin, como
textos o nmeros. Cada una de estas clases de informacin son los tipos de datos.
Javascipt distingue entre tres tipos de datos y todas las informaciones que se puedan
guardar en variables van a estar encajadas en uno de estos tipos de datos. Veamos
detenidamente cules son estos tres tipos de datos.
Tipo ue uatos numiico (Numbei}
En este lenguaje slo existe un tipo de datos numrico, al contrario que ocurre en la
mayora de los lenguajes ms conocidos. Todos los nmeros son por tanto del tipo
numrico, independientemente de la precisin que tengan o si son nmeros reales o
enteros. Los nmeros enteros son nmeros que no tienen coma, como 3 o 339. Los
nmeros reales son nmeros fraccionarios, como 2.69 o 0.25, que tambin se
pueden escribir en notacin cientfica, por ejemplo 2.482e12.
Con Javascript tambin podemos escribir nmeros en otras bases, como la
hexadecimal. Las bases son sistemas de numeracin que utilizan ms o menos
dgitos para escribir los nmeros. Existen tres bases con las que podemos trabajar
Base 10, es el sistema que utilizamos habitualmente, el sistema decimal.
Cualquier nmero, por defecto, se entiende que est escrito en base 10.
Base 8, tambin llamado sistema octal, que utiliza dgitos del 0 al 7. Para
escribir un nmero en octal basta con escribir ese nmero precedido de un 0,
por ejemplo 045.
Base 16 o sistema hexadecimal, es el sistema de numeracin que utiliza 16
dgitos, los comprendidos entre el 0 y el 9 y las letras de la A a la F, para los
dgitos que faltan. Para escribir un nmero en hexadecimal debemos escribirlo
precedido de un cero y una equis, por ejemplo 0x3EF.
vor i=5, // 8ose 10
vor j=070, // 8ose 8. quivo/e o 57 en decimo/
vor h=0x1f // 8ose hexodecimo/, quivo/e o l1
Para definir un valor de coma flotante, es necesario incluir una coima decimal y un
dgito despus de la coma. Por ejemplo:
vor precio=12,25
20
Tipo boleano (Boolean}
El tipo bolean, boolean en ingls, sirve para guardar un si o un no o dicho de otro
modo, un verdadero o un falso. Se utiliza para realizar operaciones lgicas,
generalmente para realizar acciones si el contenido de una variable es verdadero o
falso.
Si una variable es verdadero entonces Ejecuto unas instrucciones Si no Ejecuto otras.
Los dos valores que pueden tener las variables boleanas son true o false.
mi8o/eono = true
mi8o/eono = fo/se
Tipo cauena ue caiacteies (Stiing}
El ltimo tipo de datos es el que sirve para guardar un texto. Javascript slo tiene un
tipo de datos para guardar texto y en el se pueden introducir cualquier nmero de
caracteres. Un texto puede estar compuesto de nmeros, letras y cualquier otro tipo
de caracteres y signos. Los textos se escriben entre comillas, dobles o simples.
mi1exto = "Pepe se vo o pescor"
mi1exto = '2lXX5 Letros & *--*'
Todo lo que se coloca entre comillas, como en los ejemplos anteriores es tratado
como una cadena de caracteres independientemente de lo que coloquemos en el
interior de las comillas. Por ejemplo, en una variable de texto podemos guardar
nmeros y en ese caso tenemos que tener en cuenta que las variables de tipo texto y
las numricas no son la misma cosa y mientras que las de numricas nos sirven para
hacer clculos matemticos las de texto no.
Caiacteies ue escape en cauenas ue texto.
Hay una serie de caracteres especiales que sirven para expresar en una cadena de
texto determinados controles como puede ser un salto de lnea o un tabulador. Estos
son los caracteres de escape y se escriben con una notacin especial que comienza
por una contra barra (una barra inclinada al revs de la normal '\') y luego se coloca
el cdigo del carcter a mostrar.
Un carcter muy comn es el salto de lnea, que se consigue escribiendo \n. Otro
carcter muy habitual es colocar unas comillas, pues si colocamos unas comillas sin
su carcter especial nos cerraran las comillas que colocamos para iniciar la cadena
de caracteres. Las comillas las tenemos que introducir entonces con \" o \' (comillas
dobles o simples). Existen otros caracteres de escape, que veremos en la tabla de
abajo ms resumidos, aunque tambin hay que destacar como carcter habitual el
que se utiliza para escribir una contrabarra, para no confundirla con el inicio de un
carcter de escape, que es la doble contrabarra \\.
21
Tabla con todos los caracteres de escape
Salto de lnea \n
Comilla simple \'
Comilla doble \"
Tabulador \t
Contrabarra \\
Algunos de estos caracteres probablemente no los llegars a utilizar nunca, pues su
funcin es un poco rara y a veces poco clara.
Tipo Inuefiniuo (0nuefineu}
Tiene un nico valor:undefined. Se genera cuando se define una variable y no se
inicializa (no se le asigna un determinado valor). Por ejemplo:
El opeiauoi typeof
Indica el tipo de una variable. Para ello acepta un parmetro: la variable o valor a
comprobar. Por ejemlo:
La instruccin typeof devuelve uno de los siguientes valores:
undefined: si la variable es de tipo undefined.
boolean: si la variable es de tipo boolean.
number: si la variable es de tipo numrico.
string: si la variable es de tipo cadena.
object: si la variable es de tipo objeto.
0PERAB0RES
Al desarrollar programas en cualquier lenguaje se utilizan los operadores. stos
sirven para hacer los clculos y operaciones necesarios para llevar a cabo sus
objetivos. Un programa que no realiza operaciones solo se puede limitar a hacer
var a;
alert(typeof a);
</script>
22
siempre lo mismo, es el resultado de estas operaciones lo que hace que un programa
vare su comportamiento segn los datos que obtenga. Existen operaciones ms
sencillas o complejas, que se pueden realizar con operandos de distintos tipos de
datos, como nmeros o textos, veremos en este captulo de manera detallada todos
estos operadores.
Ejemplos ue uso ue opeiauoies
Antes de entrar a enumerar los distintos tipos de operadores vamos a ver un par de
ejemplos de stos para que nos ayuden a hacernos una idea ms exacta de lo que
son. En el primer ejemplo vamos a realizar una suma utilizando el operador suma.
l + 5
Esta es una expresin muy bsica que no tiene mucho sentido ella sola. Hace la
suma entre los dos operandos nmero 3 y 5, pero no sirve de mucho porque no se
hace nada con el resultado. Normalmente se combinan ms de un operador para
crear expresiones ms tiles. La expresin siguiente es una combinacin entre dos
operadores, uno realiza una operacin matemtica y el otro sirve para guardar el
resultado.
mivoriob/e = 2l * 5
En el ejemplo anterior, el operador * se utiliza para realizar una multiplicacin y el
operador = se utiliza para asignar el resultado en una variable, de modo que
guardemos el valor para su posterior uso.
Los operadores se pueden clasificar segn el tipo de acciones que realizan. A
continuacin vamos a ver cada uno de estos grupos de operadores y describiremos la
funcin de cada uno.
0peiauoies aiitmticos
Son los utilizados para la realizacin de operaciones matemticas simples como la
suma, resta o multiplicacin. En javascript son los siguientes:
+ Suma de dos valores
- Resta de dos valores, tambin puede utilizarse para cambiar el signo de un
nmero si lo utilizamos con un solo operando -23
* Multiplicacin de dos valores
/ Divisin de dos valores
% El resto de la divisin de dos nmeros (3%2 devolvera 1, el resto de
dividir 3 entre 2)
++ Incremento en una unidad, se utiliza con un solo operando. Se puede
utilizar como prefijo o sufijo.
-- Decremento en una unidad, utilizado con un solo operando. Se puede
utilizar como prefijo y sufijo.
23
precio = 128,
unidodes = 10,
focturo = precio * unidodes,
resto = focturo X l,
precio++,
o=55,
c=++o,
En este caso primero se incrementa el valor de a y despus se asigna a c. la variable
c valdra 56.
c=o++,
En este caso primero se asigna a c el valor de a y a continuacin se incremente el
valor de a. La variable c valdra 55.
0peiauoies ue asignacion
Sirven para asignar valores a las variables, ya hemos utilizado en ejemplos nteriores
el operador de asignacin =, pero hay otros operadores de este tipo, que provienen
del lenguaje C y que muchos de los lectores ya conocern.
= Asignacin. Asigna la parte de la derecha del igual a la parte de la
izquierda. A al derecha se colocan los valores finales y a la izquierda
generalmente se coloca una variable donde queremos guardar el dato.
+= Asignacin con suma. Realiza la suma de la parte de la derecha con la de
la izquierda y guarda el resultado en la parte de la izquierda.
-= Asignacin con resta
*= Asignacin de la multiplicacin
/= Asignacin de la divisin
%= Se obtiene el resto y se asigna
ohorros = 7000,
ohorros += l500,
ohorros /= 2,
0peiauoies ue cauenas
Las cadenas de caracteres, o variables de texto, tambin tienen sus propios
operadores para realizar acciones tpicas sobre cadenas. Aunque javascript slo tiene
un operador para cadenas se pueden realizar otras acciones con una serie de
funciones predefinidas en el lenguaje que veremos ms adelante.
+ Concatena dos cadenas, pega la segunda cadena a continuacin de la
primera.
24
codeno1 = "ho/o",
codeno2 = "mundo",
codenoconcotenodo = codeno1 + codeno2,
Un detalle importante que se puede ver en este caso es que el operador + sirve para
dos usos distintos, si sus operandos son nmeros los suma, pero si se trata de
cadenas las concatena. Esto pasa en general con todos los operadores que se repiten
en el lenguaje, javascript es suficientemente listo para entender que tipo de
operacin realizar mediante una comprobacin de los tipos que estn implicados en
lla.
Un caso que resultara confuso es el uso del operador + cuando se realiza la
operacin con operadores texto y numricos entremezclados. En este caso javascript
asume que se desea realizar una concatenacin y trata a los dos operandos como si
de cadenas de caracteres se trataran, incluso si la cadena de texto que tenemos
fuese un nmero. Esto lo veremos ms fcilmente con el siguiente ejemplo.
miNumero = 2l,
micodeno1 = "pepe",
micodeno2 = "45",
resu/todo1 = miNumero + micodeno1
resu/todo2 = miNumero + micodeno2
micodeno2 += miNumero
Como hemos podido ver, tambin en el caso del operador +=, si estamos tratando
con cadenas de texto y nmeros entremezclados, tratar a los dos operadores como
si fuesen cadenas.
0peiauoies logicos
Estos operadores sirven para realizar operaciones lgicas, que son aquellas que dan
como resultado un verdadero o un falso, y se utilizan para tomar decisiones en
nuestros scripts. En vez de trabajar con nmeros, para realizar este tipo de
operaciones se utilizan operandos boleanos, que conocimos anteriormente, que son
el verdadero (true) y el falso (false). Los operadores lgicos relacionan los operandos
boleanos para dar como resultado otro operando boleano, tal como podemos ver en
el siguiente ejemplo.
Si tengo hambre y tengo comida entonces me pongo a comer. Nuestro programa javascript
utilizara en este ejemplo un operando boleano para tomar una decisin. Primero
mirar si tengo hambre, si es cierto (true) mirar si dispongo de comida. Si son los
dos ciertos, se puede poner a comer. En caso de que no tenga comida o que no
tenga hambre no comera, al igual que si no tengo hambre ni comida. El operando en
cuestin es el operando Y, que valdr verdadero (true) en caso de que los dos
operandos valgan verdadero.
! Operador NO o negacin. Si era true pasa a false y viceversa.
&& Operador Y, si son los dos verdaderos vale verdadero, en caso contrario
es falso.
|| Operador O, vale verdadero si por lo menos uno de ellos es verdadero.
mi8o/eono = true,
25
mi8o/eono = ! mi8o/eono, //mi8o/eono ohoro vo/e fo/se
tenqonombre = true,
tenqocomido = true,
comocomido = tenqonombre && tenqocomido,
0peiauoies ielacionales
Sirven para realizar expresiones condicionales todo lo complejas que deseemos.
Estas expresiones se utilizan para tomar decisiones en funcin de la comparacin de
varios elementos, por ejemplo si un numero es mayor que otro o si son iguales. Los
operadores condicionales se utilizan en las expresiones condicionales para tomas de
decisiones. Como estas expresiones condicionales sern objeto de estudio ms
adelante ser mejor describir los operadores condicionales ms adelante. De todos
modos aqu podemos ver la tabla de operadores condicionales.
== Comprueba si dos nmeros son iguales
!= Comprueba si dos nmeros son distintos
> Mayor que, devuelve true si el primer operador es mayor que el segundo
< Menor que, es true cuando el elemento de la izquierda es menor que el de
la derecha
>= Mayor igual.
<= Menor igual
Sin embargo, al usar el operador relacional con dos cadenas, se produce un
comportamiento distinto. Muchos usuarios creen que menos significa a|fabt|camente
anter|or y que mayor significa a|fabt|camente poster|or, pero no es cierto. En el caso
de las cadenas, cada uno de los cdigos de caracteres de la primera cadena se
compara con los cdigos de caracteres de la misma posicin de la segunda cadena.
El problema aparece porque los cdigos de caracteres de las letras maysculas son
inferiores a los cdigos de los caracteres de las letras minsculas.
vor=codeno1="8orco",
vor=codeno2="o/to",
En el ejemplo anterior, cadena1 se considera inferior a cadena2, ya que la letra
tiene el cdigo y la letra a el 97. Para conseguir un resultado alfabtico, es
necesario convertir ambas variables al mismo formato /maysculas o minsculas).
Otra situacin extraa se produce cuando se comparan nmeros que son cadenas,
como por ejemplo:
vor numero1="2l",
vor numero2="l",
En este caso numero1 es menor que numero2 ya que al ser ambas variables
cadenas, se comparan mediante el cdigo de caracteres y no mediante su valor
numrico.
26
Cuando se utiliza el operador de ==, si un operador es una cadena y otro es un
nmero, intanta convertir la cadena a nmero y despus realiza la comparacin. Por
ejemplo:
Existe una variante de los operadores igual (==) y distinto (!=). Idnticamente igual
(===) y no idnticamente igual (!==). En estos casos no hay conversin. Por
ejemplo:
Pieceuencia ue los opeiauoies
La evaluacin de una sentencia de las que hemos visto en los ejemplos anteriores es
bastante sencilla y fcil de interpretar, pero cuando en una sentencia entran en juego
multitud de operadores distintos puede haber una confusin a la hora de interpretarla
y dilucidar qu operadores son los que se ejecutan antes que otros. Para marcar
unas pautas en la evaluacin de las sentencias y que estas se ejecuten siempre igual
y con sentido comn existe la precedencia de operadores, que no es ms que el
orden por el que se irn ejecutando las operaciones que ellos representan. En un
principio todos los operadores se evalan de izquierda a derecha, pero existen unas
normas adicionales, por las que determinados operadores se evalan antes que
otros. Muchas de estas reglas de precedencia estn sacadas de las matemticas y
son comunes a otros lenguajes, las podemos ver a continuacin.
() [] Parntesis, corchetes y el operador punto que sirve para los objetos
! - ++ -- Negacin, negativo e incrementos
* / % Multiplicacin divisin y mdulo
+- Suma y resta
<< >> >>> Cambios a nivel de bit
< <= > >= Operadores condicionales
== != Operadores condicionales de igualdad y desigualdad
& ^ | Lgicos a nivel de bit
&& || Lgicos boleanos
= += -= *= /= %= <<= >>= >>>= &= ^= != Asignacin
var a= "55";
var b=55;
alert(a===b);
</script>
var a= "55";
var b=55;
alert(a==b);
</script>
27
En los siguientes ejemplos podemos ver cmo las expresiones podran llegar a ser
confusas, pero con la tabla de precedencia de operadores podremos entender sin
errores cul es el orden por el que se ejecutan.
12 * l + 4 - 8 / 2 X l
En este caso primero se ejecutan los operadores * / y %, de izquierda a derecha, con
lo que se realizaran estas operaciones. Primero la multiplicacin y luego la divisin
por estar ms a la izquierda del mdulo.
12 * 3 + 4 - 8 / 2 % 3
36 + 4 - 4 % 3
36 + 4 - 1
40 - 1
39
De todos modos, es importante darse cuenta que el uso de los parntesis puede
ahorrarnos muchos quebraderos de cabeza y sobretodo la necesidad de sabernos de
memoria la tabla de precedencia de los operadores. Cuando veamos poco claro el
orden con el que se ejecutarn las sentencias podemos utilizarlos y as forzar que se
evale antes el trozo de expresin que se encuentra dentro de los parntesis
28
Estructuras de Control
INTR0B0CCI0N
Los scripts vistos hasta ahora han sido tremendamente sencillos y lineales: se iban
ejecutando las sentencias simples una detrs de la otra desde el principio hasta el
fin. Sin embargo, esto no tiene porque ser siempre as, en los programas
generalmente necesitaremos hacer cosas distintas dependiendo del estado de
nuestras variables o realizar un mismo proceso muchas veces sin escribir la misma
lnea de cdigo una y otra vez.
Para realizar cosas ms complejas en nuestros scripts se utilizan las estructuras de
control. Utilizndolas podemos realizar tomas de decisiones y bucles. En los
siguientes captulos vamos a conocer las distintas estructuras de control que existen
en Javascript.
Toma ue uecisiones
Nos sirven para realizar unas acciones u otras en funcin del estado de las variables.
Es decir, tomar decisiones para ejecutar unas instrucciones u otras dependiendo de
lo que est ocurriendo en ese instante en nuestros programas.
Por ejemplo, dependiendo si el usuario que entra en nuestra pgina es mayor de
edad o no lo es, podemos permitirle o no ver los contenidos de nuestra pgina.
Si edad es mayor que 18 entonces
Te dejo ver el contenido para adultos
Si no
Te mando fuera de la pgina
En javascript podemos tomar decisiones utilizando dos enunciados distintos.
if
switch
Bucles
Los bucles se utilizan para realizar ciertas acciones repetidamente. Son muy
utilizados a todos los niveles en la programacin. Con un bucle podemos por ejemplo
imprimir en una pgina los nmeros del 1 al 100 sin necesidad de escribir cien veces
el la instruccin imprimir.
29
Desde el 1 hasta el 100
mprimir el nmero actual
En javascript existen varios tipos de bucles, cada uno est indicado para un tipo de
iteracin distinto y son los siguientes:
for
while
do ... while
Como hemos sealado ya, las estructuras de control son muy importantes en
Javascript y en cualquier lenguaje de programacin. Es por ello que en los siguientes
captulos veremos cada una de estas estructuras detenidamente, describiendo su uso
y ofreciendo algunos ejemplos.
ESTR0CT0RA if
if es una estructura de control utilizada para tomar decisiones. Es un condicional que
realiza unas u otras operaciones en funcin de una expresin. Funciona de la
siguiente manera, primero se evala una expresin, si da resultado positivo se
realizan las acciones relacionadas con el caso positivo.
La sintaxis de la estructura if es la siguiente.
if {expresin)
(
occiones o reo/itor en coso positivo
...
}
Opcionalmente se pueden indicar acciones a realizar en caso de que la evaluacin de
la sentencia de resultados negativos.
if {expresin)
(
occiones o reo/itor en coso positivo
...
}
e/se
(
occiones o reo/itor en coso neqotivo
...
}
Fijmonos en varias cosas. Para empezar vemos como con unas llaves engloban las
acciones que queremos realizar en caso de que se cumplan o no las expresiones.
30
Estas llaves han de colocarse siempre, excepto en el caso de que slo haya una
instruccin como acciones a realizar, que son opcionales.
Otro detalle que salta a la vista es el sangrado (margen) que hemos colocado en
cada uno de los bloques de instrucciones a ejecutar en los casos positivos y
negativos. Este sangrado es totalmente opcional, slo lo hemos hecho as para que la
estructura if se comprenda de una manera ms visual. Los saltos de lnea tampoco
son necesarios y se han colocado tambin para que se vea mejor la estructura.
Perfectamente podramos colocar toda la instruccin if en la misma lnea de cdigo,
pero eso no ayudar a que las cosas estn claras. Nosotros, y cualquier
programador, te aconsejamos que utilices los sangrados y saltos de lnea necesarios
para que las instrucciones se puedan entender mejor, hoy y dentro de un mes,
cuando te acuerdes menos de lo que hiciste en tus scripts.
Veamos algn ejemplo de condicionales if.
if {dio == "/unes")
document.write {"ue tenqos un fe/it comiento de semono"),
Si es lunes nos desear una feliz semana. No har nada en caso contrario. Como en
este ejemplo slo indicamos una instruccin para el caso positivo, no har falta
utilizar las llaves. Fjate tambin en el operador condicional que consta de dos signos
igual.
Vamos a ver ahora otro ejemplo, un poco ms largo.
if {credito >= precio)
(
document.write{"hos comprodo e/ orticu/o " + nuevo4rticu/o) //enseo compro
corrito += nuevo4rticu/o //introdutco e/ orticu/o en e/ corrito de /o compro
credito -= precio //disminuyo e/ crdito seqn e/ precio de/ orticu/o
}
e/se
(
document.write{"se te ho ocobodo e/ crdito") //informo que te fo/to dinero
window./ocotion = "corritode/ocompro.htm/" //voy o /o pqino de/ corrito
}
Este ejemplo es un poco ms complejo, y tambin un poco ficticio. Lo que hago es
comprobar si tengo crdito para realizar una supuesta compra. Para ello miro si el
crdito es mayor o igual que el precio del artculo, si es as informo de la compra,
introduzco el artculo en el carrito y resto el precio al crdito acumulado. Si el precio
del artculo es superior al dinero disponible informo de la situacin y mando al
navegador a la pgina donde se muestra su carrito de la compra. 0
Expiesiones conuicionales
La expresin a evaluar se coloca siempre entre parntesis y est compuesta por
variables que se combinan entre si mediante operadores condicionales. Recordamos
que los operadores condicionales relacionaban dos variables y devolvan siempre un
resultado boleano. Por ejemplo un operador condicional es el operador "es igual"
(==), que devuelve true en caso de que los dos operandos sean iguales o false en
caso de que sean distintos.
31
if {edod > 18)
document.write{"puedes ver esto pqino poro odu/tos"),
En este ejemplo utilizamos en operador condicional "es mayor" (>). En este caso,
devuelve true si la variable edad es mayor que 18, con lo que se ejecutara la lnea
siguiente que nos informa de que se puede ver el contenido para adultos.
Las expresiones condicionales se pueden combinar con las expresiones lgicas para
crear expresiones ms complejas. Recordamos que las expresiones lgicas son las
que tienen como operandos a los boleanos y que devuelvan otro valor boleano. Son
los operadores negacin lgica, Y lgico y O lgico.
if {boterio == 0 && red/ectrico == 0)
document.write{"tu ordenodor portoti/ se vo o opoqor en sequndos"),
Lo que hacemos es comprobar si la batera de nuestro supuesto ordenador est a
cero (acabada) y tambin comprobamos si el ordenador no tiene red elctrica (est
desenchufado). Luego, el operador lgico los relaciona con un Y, de modo que si est
sin batera Y sin red elctrica, informo que el ordenador se va a apagar.
La lista de operadores que se pueden utilizar con las estructuras if se puede ver en el
captulo de operadores condicionales y operadores lgicos.
Sentencias if aniuauas
Para hacer estructuras condicionales ms complejas podemos anidar sentencias if, es
decir, colocar estructuras if dentro de otras estructuras if. Con un solo if podemos
evaluar y realizar una accin u otra segn dos posibilidades, pero si tenemos ms
posibilidades que evaluar debemos anidar Ifs para crear el flujo de cdigo necesario
para decidir correctamente.
Por ejemplo, si deseo comprobar si un nmero es mayor menor o igual que otro,
tengo que evaluar tres posibilidades distintas. Primero puedo comprobar si los dos
nmeros son iguales, si lo son, ya he resuelto el problema, pero si no son iguales
todava tendr que ver cul de los dos es mayor. Veamos este ejemplo en cdigo
Javascript.
vor numero1=2l
vor numero2=l
if {numero1 == numero2)
(
document.write{"Los dos nmeros son iquo/es")
}
e/se
(
if {numero1 > numero2)
(
document.write{"/ primer nmero es moyor que e/ sequndo")
}
e/se
(
document.write{"/ primer nmero es menor que e/ sequndo")
}
}
32
O tambin se podra haber encadenado de la siguiente forma:
vor numero1=2l
vor numero2=l
if {numero1 == numero2)
(
document.write{"Los dos nmeros son iquo/es")
}
e/se if {numero1 > numero2)
(
document.write{"/ primer nmero es moyor que e/ sequndo")
}
e/se
(
document.write{"/ primer nmero es menor que e/ sequndo")
}
El flujo del programa es como comentbamos antes, primero se evala si los dos
nmeros son iguales. En caso positivo se muestra un mensaje informndolo. En caso
contrario ya sabemos que son distintos, pero aun debemos averiguar cul de los dos
en mayor. Para eso se hace otra comparacin para saber si el primero es mayor que
el segundo. Si esta comparacin da resultados positivos mostramos un mensaje
diciendo que el primero es mayor que el segundo, en caso contrario indicaremos que
el primero es menor que el segundo.
Volvemos a remarcar que las llaves son en este caso opcionales, pues slo se ejecuta
una sentencia para cada caso. Adems, los saltos de lnea y los sangrados tambin
opcionales en todo caso y nos sirven slo para ver el cdigo de una manera ms
ordenada. Mantener el cdigo bien estructurado y escrito de una manera
comprensible es muy importante, ya que nos har la vida ms agradable a la hora de
programar y ms adelante cuando tengamos que revisar los programas. En este
manual utilizar una notacin como la que has podido ver en las lneas anteriores, y
vers en adelante, adems mantendr esa notacin en todo momento. Esto sin lugar
a dudas har que los cdigos con ejemplos sean comprensibles ms rpidamente, si
no lo hiciramos as sera un verdadero incordio leerlos. Esta misma receta es
aplicable a los cdigos que has de crear t y el principal beneficiado sers t mismo y
los compaeros que lleguen a leer tu cdigo.
0peiauoi if
Hay un operador que no hemos visto todava y es una forma ms esquemtica de
realizar algunos if sencillos. Proviene del lenguaje C, donde se escriben muy pocas
lneas de cdigo que resulta muy elegante. Este operador es un claro ejemplo de
ahorro de lneas y caracteres al escribir los scripts. Lo veremos rpidamente, pues la
nica razn por la que lo incluyo es para que sepas que existe y si lo encuentras en
alguna ocasin por ah sepas identificarlo y cmo funciona.
Un ejemplo de uso del operador if se puede ver a continuacin.
voriob/e = {condicin) ? vo/or1 : vo/or2
33
Este ejemplo no slo realiza una comparacin de valores, adems asigna un valor a
una variable. Lo que hace es evaluar la condicin (colocada entre parntesis) y si es
positiva asigna el valor1 a la variable y en caso contrario le asigna el valor2.
Veamos un ejemplo:
momento = {horo_octuo/ < 12) ? "4ntes de/ mediodio" : "uespus de/ mediodio"
Este ejemplo mira si la hora actual es mayor que 12. Si es as, es que ahora es antes
del medioda, as que asigna "Antes del medioda" a la variable momento. Si la hora
es mayo o igual a 12 es que ya es despus de medioda, con lo que se asigna el texto
"Despus del medioda" a la variable momento.
ESTR0CT0RA switcl
Es la otra expresin disponible en Javascript para tomar decisiones en funcin de
distintos estados de las variables. Esta expresin se utiliza cuando tenemos mltiples
posibilidades como resultado de la evaluacin de una sentencia.
La estructura SWITCH se incorpor a partir de la versin 1.2 de Javascript (Netscape
4 e Internet Explorer 4). Su sintaxis es la siguiente.
switch {expersin)
(
cose vo/or1:
5entencios o ejecutor si /o expresin tiene como vo/or o vo/or1
breok
cose vo/or2:
5entencios o ejecutor si /o expresin tiene como vo/or o vo/or2
breok
cose vo/orl:
5entencios o ejecutor si /o expresin tiene como vo/or o vo/orl
breok
defou/t:
5entencios o ejecutor si e/ vo/or no es ninquno de /os onteriores
}
La expresin se evala, si vale valor1 se ejecutan las sentencias relacionadas con ese
caso. Si la expresin vale valor2 se ejecutan las instrucciones relacionadas con ese
valor y as sucesivamente, por tantas opciones como deseemos. Finalmente, para
todos los casos no contemplados anteriormente se ejecuta el caso por defecto.
La palabra break es opcional, pero si no la ponemos a partir de que se encuentre
coincidencia con un valor se ejecutarn todas las sentencias relacionadas con este y
todas las siguientes. Es decir, si en nuestro esquema anterior no hubiese ningn
break y la expresin valiese valor1, se ejecutaran las sentencias relacionadas con
valor1 y tambin las relacionadas con valor2, valor3 y default.
Tambin es opcional la opcin default u opcin por defecto.
Veamos un ejemplo de uso de esta estructura. Supongamos que queremos indicar
que da de la semana es. Si el da es 1 (lunes) sacar un mensaje indicndolo, si el da
es 2 (martes) debemos sacar un mensaje distinto y as sucesivamente para cada da
34
de la semana, menos en el 6 (sbado) y 7 (domingo) que queremos mostrar el
mensaje "es fin de semana". Para das mayores que 7 indicaremos que ese da no
existe.
5witch {dio_de_/o_semono)
(
cose 1:
document.write{"s Lunes"),
breok,
cose 2:
document.write{"s Mortes"),
breok,
cose l:
document.write{"s Mirco/es"),
breok ,
cose 4:
document.write{"s lueves"),
breok,
cose 5:
document.write{"s viernes"),
breok,
cose :
cose 7:
document.write{"s fin de semono"),
breok,
defou/t:
document.write{"se dio no existe"),
}
El ejemplo es relativamente sencillo, solamente puede tener una pequea dificultad,
consistente en interpretar lo que pasa en el caso 6 y 7, que habamos dicho que
tenamos que mostrar el mismo mensaje. En el caso 6 en realidad no indicamos
ninguna instruccin, pero como tampoco colocamos un break se ejecutar la
sentencia o sentencias del caso siguiente, que corresponden con la sentencia
indicada en el caso 7 que es el mensaje que informa que es fin de semana. Si el caso
es 7 simplemente se indica que es fin de semana, tal como se pretenda.
B0CLE foi
El bucle for se utiliza para repetir mas instrucciones un determinado nmero de
veces. De entre todos los bucles, el for se suele utilizar cuando sabemos seguro el
nmero de veces que queremos que se ejecute la sentencia. La sintaxis del bucle se
muestra a continuacin.
for {inicio/itocin,condicin,octuo/itocin)
(
sentencios o ejecutor en codo iterocin
}
El bucle for tiene tres partes incluidas entre los parntesis. La primera es la
inicializacin, que se ejecuta solamente al comenzar la primera iteracin del bucle.
35
En esta parte se suele colocar la variable que utilizaremos para llevar la cuenta de las
veces que se ejecuta el bucle.
La segunda parte es la condicin, que se evaluar cada vez que comience la iteracin
del bucle. Contiene una expresin para comprobar cundo se ha de detener el bucle,
o mejor dicho, la condicin que se debe cumplir para que contine la ejecucin del
bucle.
Por ltimo tenemos la actualizacin, que sirve para indicar los cambios que queramos
ejecutar en las variables cada vez que termina la iteracin del bucle, antes de
comprobar si se debe seguir ejecutando.
Despus del for se colocan las sentencias que queremos que se ejecuten en cada
iteracin, acotadas entre llaves.
Un ejemplo de utilizacin de este bucle lo podemos ver a continuacin, donde se
imprimirn los nmeros del 0 al 10.
vor i
for {i=0,i<=10,i++)
(
document.write{i),
}
En este caso se inicializa la variable i a 0. Como condicin para realizar una iteracin,
se tiene que cumplir que la variable i sea menor o igual que 10. Como actualizacin
se incremetar en 1 la variable i.
Como se puede comprobar, este bucle es muy potente, ya que en una sola lnea
podemos indicar muchas cosas distintas y muy variadas.
Por ejemplo si queremos escribir los nmero del 1 al 1.000 de dos en dos se escribir
el siguiente bucle.
for {i=1,i<=1000,i+=2)
document.write{i),
Si nos fijamos, en cada iteracin actualizamos el valor de i incrementndolo en 2
unidades.
Otro detalle, no utilizamos las llaves englobando las instrucciones del bucle for
porque slo tiene una sentencia y en este caso no es obligado, tal como pasaba con
las instrucciones del if.
Si queremos contar descendentemente del 343 al 10 utilizaramos este bucle.
for {i=l4l,i>=10,i--)
document.write{i),
}
En este caso decrementamos en una unidad la variable i en cada iteracin.
Ejemplo
Vamos a hacer una pausa para asimilar el bucle for con un ejercicio que no encierra
ninguna dificultad si hemos entendido el funcionamiento del bucle.
Se trata de hacer un bucle que escriba en una pgina web los encabezamientos
desde <H1> hasta <H6> con un texto que ponga "Encabezado de nivel x".
36
Lo que deseamos escribir en una pgina web mediante Javascript es lo siguiente:
<n1>ncobetodo de nive/ 1</n1>
<nl>ncobetodo de nive/ l</nl>
<n>ncobetodo de nive/ </n>
Para ello tenemos que hacer un bucle que empiece en 1 y termine en 6 y en cada
iteracin escribiremos el encabezado que toca.
for {i=1,i<=,i++)
(
document.write{"<n" + i + ">ncobetodo de nive/ " + i + "</n" + i + ">"),
}
B0CLES wlile Y uo ...wlile
Veamos ahora los dos tipos de bucles while que podemos utilizar en Javascript y los
usos de cada uno.
Bucle wlile
Estos bucles se utilizan cuando queremos repetir la ejecucin de unas sentencias un
nmero indefinido de veces, siempre que se cumpla una condicin. Se ms sencillo
de comprender que el bucle for, pues no incorpora en la misma lnea la inicializacin
de las variables su condicin para seguir ejecutndose y su actualizacin. Slo se
indica, como veremos a continuacin, la condicin que se tiene que cumplir para que
se realice una iteracin.
whi/e {condicin)
(
sentencios o ejecutor
}
Un ejemplo de cdigo donde se utiliza este bucle se puede ver a continuacin.
vor co/or = ""
whi/e {co/or != "rojo")
(
co/or = dome un co/or
}
Este es un ejemplo de lo ms sencillo que se puede hacer con un bucle while. Lo que
hace es pedir que el usuario introduzca un color mientras que el color no sea rojo.
Para ejecutar un bucle como este primero tenemos que inicializar la variable que
vamos utilizar en la condicin de iteracin del bucle. Con la variable inicializada
podemos escribir el bucle, que comprobar para ejecutarse que el la variable color
sea distinto de "rojo". En cada iteracin del bucle se pide un nuevo color al usuario
para actualizar la variable color y se termina la iteracin, con lo que retornamos al
37
principio del bucle, donde tenemos que volver a evaluar si lo que hay en la variable
color es "rojo" y as sucesivamente mientras que no se haya introducido como color
el texto "rojo". Obviamente la expresin dame un color no es Javascript, pero como
no sabemos todava cmo escribir eso en Javascript es mejor verlo ms adelante.
Bucle uo...wlile
Es el ltimo de los bucles que hay en Javascript. Se utiliza generalmente cuando no
sabemos cuantas veces se habr de ejecutar el bucle, igual que el bucle while, con la
diferencia de que sabemos seguro que el bucle por lo menos se ejecutar una vez.
Este tipo de bucle se introdujo en Javascript 1.2, por lo que no todos los navegadores
los soportan, slo los de versin 4 o superior. En cualquiuer caso, cualquier cdigo
que quieras escribir con do...while se puede escribir tambin utilizando un bucle
while, con lo que en navegadores antiguos debers traducir tu bucle do...while por
un bucle while.
La sintaxis es la siguiente.
do
(
sentencios de/ buc/e
}
whi/e {condicin)
El bucle se ejecuta siempre una vez y al final se evala la condicin para decir si se
ejecuta otra vez el bucle o se termina su ejecucin.
Veamos el ejemplo que escribimos para un bucle while en este otro tipo de bucle.
vor co/or
do
(
co/or = dome un co/or
}
whi/e {co/or != "rojo")
Este ejemplo funciona exactamente igual que el anterior, excepto que no tuvimos
que inicializar la variable color antes de introducirnos en el bucle. Pide un color
mientras que el color introducido es distinto que "rojo".
Ejemplo
Vamos a ver a continuacin un ejemplo ms prctico sobre cmo trabajar con un
bucle while. Como resulta muy dificil hacer ejemplos prcticos con lo poco que
sabemos sobre Javascript, vamos a adelantar una instruccin que aun no conocemos.
En este ejemplo vamos a declarar una variable e inicializarla a 0. Luego iremos
sumando a esa variable un nmero aleatorio del 1 al 100 hasta que sumemos 1.000
o ms, imprimiendo el valor de la variable suma despus de cada operacin. Ser
necesario utilizar el bucle while porque no sabemos exactamente el nmero de
iteraciones que tendremos que realizar.
var suma = 0;
while (suma < 1000)
{
suma += parsent(Math.random() * 100);
document.write (suma + "<br>");
}
38
Suponemos que por lo que respecta al bucle while no habr problemas, pero donde si
que puede haberlos es en la sentencia utilizada para tomar un nmero aleatorio. Sin
embargo, no es necesario explicar aqu la sentencia porque lo tenemos planeado
hacer ms adelante.
BREAK Y C0NTIN0E
De manera adicional al uso de las distintas estructuras de bucle se pueden utilizar
dos instrucciones para
Detener la ejecucin de un bucle y salirse de l
Detener la iteracin actual y volver al principio del bucle.
Son las instrucciones break y continue.
bieak
Se detiene un bucle utilizando la palabra break. Detener un bucle significa salirse de
l y dejarlo todo como est para continuar con el flujo del programa inmediatamente
despus del bucle.
for {i=0,i<10,i++)
(
document.write {i),
escribe = dime si contino,
if {escribe == "no")
breok,
}
Este ejemplo escribe los nmeros del 0 al 9 y en cada iteracin del bucle pregunta al
usuario si desea continuar. Si el usuario dice cualquier cosa continua excepto cuando
dice "no" que entonces se sale del bucle y deja la cuenta por donde se haba
quedado.
continue
Sirve para volver al principio del bucle en cualquier momento, sin ejecutar las lneas
que haya por debajo de la palabra continue.
vor i=0,
whi/e {i<7)
(
incrementor = dime si incremento,
if {incrementor == "no")
continue,
i++
}
39
Este ejemplo, en condiciones normales contara hasta desde i=0 hasta i=7, pero cada
vez que se ejecuta el bucle pregunta al usuario si desea incrementar la variable o no.
Si introduce "no" se ejecuta la sentencia continue, con lo que se vuelve al principio
del bucle sin llegar a incrementar en 1 la variable i, ya que se ignoran las sentencia
que hayan por debajo del continue.
Ejemplo
Un ejemplo ms prctico sobre estas instrucciones se puede ver a continuacin. Se
trata de un bucle for planeado para llegar hasta 1.000 pero que lo vamos a parar con
break cuando lleguemos a 333.
for {i=0,i<=1000,i++)
(
document.write{i + "<br>"),
if {i==lll)
breok,
}
B0CLES ANIBAB0S
Anidar un bucle consiste en meter ese bucle dentro de otro. La anidacin de bucles
es necesaria para hacer determinados procesamientos un poco ms complejos que
los que hemos visto en los ejemplos anteriores y seguro que en vuestra experiencia
como programadores los habris utilizado ya o los utilizareis en un futuro.
Un bucle anidado tiene una estructura como la que sigue. Vamos a tratar de
explicarlo a la vista de estas lneas:
for {i=0,i<10,i++)
(
for {j=0,j<10,j++)
(
document.write{i + "-" + j),
}
}
La ejecucin funcionar de la siguiente manera. Para empezar se inicializa el primer
bucle, con lo que la variable i valdr 0 y a continuacin se inicializa el segundo bucle,
con lo que la variable j valdr tambin 0. En cada iteracin se imprime el valor de la
variable i, un guin ("-") y el valor de la variable j, como las dos variables valen 0, se
imprimir el texto "0-0" en la pgina web.
El bucle que est anidado (ms hacia dentro) es el que ms veces se ejecuta, en este
ejemplo, para cada iteracin del bucle ms externo el bucle anidado se ejecutar por
completo una vez, es decir, har sus 10 iteraciones. En la pgina web se escribiran
estos valores, en la primera iteracin del bucle externo y desde el principio:
0-0
0-1
0-2
0-l
0-4 0-5
40
0-
0-7
0-8
0-9
Para cada iteracin del bucle externo se ejecutarn las 10 iteraciones del bucle
interno o anidado. Hemos visto la primera iteracin, ahora vamos a ver las siguientes
iteraciones del bucle externo. En cada una acumula una unidad en la variable i, con
lo que saldran estos valores:
1-0
1-1
1-2
1-l
1-4
1-5
1-
1-7
1-8
1-9
Y luego estos:
2-0
2-1
2-2
2-l
2-4
2-5
2-
2-7
2-8
2-9
As hasta que se terminen los dos bucles, que sera cuando se alcanzase el valor 9-9.
Veamos un ejemplo muy parecido al anterior, aunque un poco ms til. Se trata de
imprimir en la pgina las todas las tablas de multiplicar. Del 1 al 9, es decir, la tabla
del 1, la del 2, del 3...
for {i=1,i<10,i++)
(
document.write{"<br><b>Lo tob/o de/ " + i + ":</b><br>"),
for {j=1,j<10,j++)
(
document.write{i + " x " + j + ": "),
document.write{i*j),
document.write{"<br>"),
}
}
Con el primer bucle controlamos la tabla actual y con el segundo bucle la
desarrollamos. En el primer bucle escribimos una cabecera, en negrita, indicando la
tabla que estamos escribiendo, primero la del 1 y luego las dems en orden
ascendente hasta el 9. Con el segundo bucle escribo cada uno de los valores de cada
tabla.
41
Funciones
INTR0B0CCI0N
Ahora vamos a ver un tema muy importante, sobretodo para los que no han
programado nunca y con Javascript estn dando sus primeros pasos en el mundo de
la programacin ya que veremos un concepto nuevo, el de funcin, y los usos que
tiene. Para los que ya conozcan el concepto de funcin tambin ser un captulo util,
pues tambin veremos la sintaxis y funcionamiento de las funciones en Javascript.
Qu es una funcion
A la hora de hacer un programa ligeramente grande existen determinados procesos
que se pueden concebir de forma independiente, y que son ms sencillos de resolver
que el problema entero. Adems, estos suelen ser realizados repetidas veces a lo
largo de la ejecucin del programa. Estos procesos se pueden agrupar en una
funcin, definida para que no tengamos que repetir una y otra vez ese cdigo en
nuestros scripts, sino que simplemente llamamos a la funcin y ella se encarga de
hacer todo lo que debe.
As que podemos ver una funcin como una serie de instrucciones que englobamos
dentro de un mismo proceso. Este proceso se podr luego ejecutar desde cualquier
otro sitio con solo llamarlo. Por ejemplo, en una pgina web puede haber una funcin
para cambiar el color del fondo y desde cualquier punto de la pgina podramos
llamarla para que nos cambie el color cuando lo deseemos.
Las funciones se utilizan constantemente, no slo las que escribes tu, sino tambin
las que ya estn definidas en el sistema, pues todos los lenguajes de programacin
tienen un montn de funciones para realizar procesos habituales como por ejemplo
obtener la hora, imprimir un mensaje en la pantalla o convertir variables de un tipo a
otro. Ya hemos visto alguna funcin en nuestros sencillos ejemplos anteriores cuando
hacamos un document.write() en realidad estabamos llamando a la funcin write()
asociada al documento de la pgina que escribe un texto en la pgina. En los
captulos de funciones vamos primero a ver cmo realizar nuestras propias funciones
y cmo llamarlas luego. A lo largo del libro veremos muchas de las funciones
definidas en Javascript que debemos utilizar para realizar distintos tipos de acciones
habituales.
42
Como se esciibe una funcion
Una funcin se debe definir con una sintaxis especial que vamos a conocer a
continuacin.
function nombrefuncion {)
(
instrucciones de /o funcin
...
}
Primero se escribe la palabra function, reservada para este uso. Seguidamente se
escribe el nombre de la funcin, que como los nombres de variables puede tener
nmeros, letras y algn carcter adicional como en guin bajo. A continuacin se
colocan entre llaves las distintas instrucciones de la funcin. Las llaves en el caso de
las funciones no son opcionales, adems es til colocarlas siempre como se ve en el
ejemplo, para que se vea fcilmente la estructura de instrucciones que engloba la
funcin.
Veamos un ejemplo de funcin para escribir en la pgina un mensaje de bienvenida
dentro de etiquetas <H1> para que quede ms resaltado.
function escribir8ienvenido{)
(
document.write{"<n1>no/o o todos</n1>"),
}
Simplemente escribe en la pgina un texto, es una funcin tan sencilla que el
ejemplo no expresa suficientemente el concepto de funcin, pero ya veremos otras
ms complejas. Las etiquetas H1 no se escriben en la pgina, sino que son
interpretadas como el significado de la misma, en este caso que escribimos un
encabezado de nivel 1. Como estamos escribiendo en una pgina web, al poner
etiquetas HTML se interpretan como lo que son.
Como llamai a una funcion
Cuando se llaman a las funciones Para ejecutar una funcin la tenemos que llamar en
cualquier parte de la pgina, con eso conseguiremos que se ejecuten todas las
instrucciones que tiene la funcin entre las dos llaves. Para ejecutar la funcin
utilizamos su nombre seguido de los parntesis.
NombreueLoluncion{)
43
B0NBE C0L0CAN0S LAS
F0NCI0NES.
En principio, podemos colocar las funciones en cualquier parte de la pgina, siempre
entre etiquetas <SCRIPT>, claro est. No obstante existe una limitacin a la hora de
colocarla con relacin a los lugares desde donde se la llame. Lo ms normal es
colocar la funcin antes de cualquier llamada a la misma y as seguro que nunca nos
equivocaremos.
En concreto, la funcin se debe definir en el bloque <SCRIPT> donde est la llamada
a la funcin, aunque es indiferente si la llamada se encuentra antes o despus la
funcin, dentro del mismo bloque <SCRIPT>.
Este ejemplo funciona correctamente porque la funcin est declarada en el mismo
bloque que su llamada.
Tambin es vlido que la funcin se encuentre en un bloque <SCRIPT> anterior al
bloque donde est la llamada.
Vemos un cdigo completo sobre cmo podra ser una pgina web donde las
funciones estn en la cabecera. Un lugar muy bueno donde colocarlas, porque se
<html>
<head>
<title>M PGNA</title>
function miFuncion()
{
//hago algo...
document.write("Esto va bien");
}
</script>
</head>
<bod>
miFuncion();
</script>
</body>
</htnl>
miFuncion()
{
//hago algo...
document.write("Esto va bien")
}
</script>
44
supone que en la cabecera no se van a utilizar todava y siempre podremos disfrutar
de ellas en el cuerpo porque ya han sido declaradas seguro.
Esto ltimo en cambio sera un error.
Lo que ser un error es una llamada a una funcin que se encuentra declarada en un
bloque <SCRIPT> posterior.
PARANETR0S BE LAS F0NCI0NES
Las estructuras que hemos visto anteriormente sobre funciones no son las nicas que
debemos aprender para manejarlas en toda su potencia. Las funciones tambin
tienen una entrada y una salida, que se pueden utilizar para recibir y devolver datos.
Paimetios
Los parmetros se usan para mandar valores a la funcin, con los que ella trabajar
para realizar las acciones. Son los valores de entrada que recibe una funcin. Por
ejemplo, una funcin que realizase una suma de dos nmeros tendra como
parmetros a esos dos nmeros. Los dos nmeros son la entrada, as como la salida
sera el resultado, pero eso lo veremos ms tarde.
Veamos un ejemplo anterior en el que crebamos una funcin para mostrar un
mensaje de bienvenida en la pgina web, pero al que ahora le vamos a pasar un
parmetro que contendr el nombre de la persona a la que hay que saludar.
function escribir8ienvenido{nombre)
(
document.write{"<n1>no/o " + nombre + "</n1>"),
}
Como podemos ver en el ejemplo, para definir en la funcin un parmetro tenemos
que poner el nombre de la variable que va a almacenar el dato que le pasemos. Esa
variable, que en este caso se llama nombre, tendr como valor el dato que le
pasemos a la funcin cuando la llamemos, adems, la variable tendr vida durante la
ejecucin de la funcin y dejar de existir cuando la funcin termine su ejecucin.
miFuncion();
</script>
{
//hago algo...
document.write("Esto va bien");
}
</script>
45
Para llamar a una funcin que tiene parmetros se coloca entre parntesis el valor
del parmetro. Para llamar a la funcin del ejemplo habra que escribir:
escribir8ienvenido{"4/berto 6orcio")
Al llamar a la funcin as, el parmetro nombre toma como valor "Alberto Garca" y al
escribir el saludo por pantalla escribir "Hola Alberto Garca" entre etiquetas <H1>.
Los parmetros pueden recibir cualquier tipo de datos, numrico, textual, boleano o
un objeto. Realmente no especificamos el tipo del parmetro, por eso debemos tener
un cuidado especial al definir las acciones que realizamos dentro de la funcin y al
pasarle valores a la funcin para asegurarnos que todo es consecuente con los tipos
de nuestras variables o parmetros.
Nltiples paimetios
Una funcin puede recibir tantos parmetros como queramos y para expresarlo se
colocan los parmetros separados por comas dentro de los parntesis. Veamos
rpidamente la sintaxis para que la funcin de antes reciba dos parmetros, el
primero el nombre al que saludar y el segundo el color del texto.
function escribir8ienvenido{nombre,co/or1exto)
(
document.write{"<lON1 co/or=" + co/or1exto + ">),
document.write{"<n1>no/o " + nombre + "</n1>"),
document.write{"</lON1>"),
}
Llamaramos a la funcin con esta sintaxis. Entre los parntesis colocaremos los
valores de los parmetros.
vor miNombre = "Pepe",
vor mico/or = "red",
escribir8ienvenido{miNombre,mico/or),
He colocado entre los parntesis dos variables en lugar de dos textos
entrecomillados. Cuando colocamos variables entre los parmetros en realidad lo que
estamos pasando a la funcin son los valores que contienen las variables y no las
mismas variables.
Paimetios poi valoi
Al hilo del uso de parmetros en nuestros programas Javascript tenemos que indicar
que los parmetros de las funciones se pasan por valor. Esto quiere decir que aunque
modifiquemos un parmetro en una funcin la variable original que habamos pasado
no cambiar su valor. Se puede ver fcilmente con un ejemplo.
function posoPorvo/or{miPorometro)
(
miPorometro = l2,
46
document.write{"he combiodo e/ vo/or o l2"),
}
vor mivoriob/e = 5,
posoPorvo/or{mivoriob/e),
document.write {"e/ vo/or de /o voriob/e es: " + mivoriob/e),
En el ejemplo tenemos una funcin que recibe un parmetro y que modifica el valor
del parmetro asignndole el valor 32. Tambin tenemos una variable, que
inicializamos a 5 y posteriormente llamamos a la funcin pasndole esta variable
como parmetro. Como dentro de la funcin modificamos el valor del parmetro
podra pasar que la variable original cambiase de valor, pero como los parmetros no
modifican el valor original de las variables esta no cambia de valor. De este modo, al
imprimir en pantalla el valor de miVariable se imprimir el nmero 5, que es el valor
original de la variable, en lugar de 32 que era el valor col el que habamos
actualizado el parmetro.
En javascript slo se pueden pasar las variables por valor.
vAL0RES BE RET0RN0
Las funciones tambin pueden retornar valores, de modo que al ejecutar la funcin
se podr realizar acciones y dar un valor como salida. Por ejemplo, una funcin que
calcula el cuadrado de un nmero tendr como entrada -tal como vimos- a ese
nmero y como salida tendr el valor resultante de hallar el cuadrado de ese
nmero. Una funcin que devuelva el da de la semana tendra como salida en da de
la semana.
Veamos un ejemplo de funcin que calcula la media de dos nmeros. La funcin
recibir los dos nmeros y retornar el valor de la media.
function medio{vo/or1,vo/or2)
(
vor resu/todo,
resu/todo = {vo/or1 + vo/or2) / 2,
return resu/todo,
}
Para especificar el valor que retornar la funcin se utiliza la palabra return seguida
del valor que se desea devolver. En este caso se devuelve el contenido de la variable
resultado, que contiene la media de los dos nmeros.
Para recibir los valores que devuelve una funcin se coloca el operador de asignacin
=. Para ilustrar esto se puede ver este ejemplo, que llamar a la funcin media() y
guardar el resultado de la media en una variable para luego imprimirla en la pgina.
vor miMedio,
miMedio = medio{12,8),
document.write {miMedio),
Nltiples ietuin
En una misma funcin podemos colocar ms de un return. Lgicamente slo vamos a
poder retornar una cosa, pero dependiendo de lo que haya sucedido en la funcin
podr ser de un tipo u otro, con unos datos u otros.
47
En esta funcin podemos ver un ejemplo de utilizacin de mltiples return. Se trata
de una funcin que devuelve un 0 si el parmetro recibido era par y el valor del
parmetro si este era impar.
function mu/tip/eketurn{numero)
(
vor resto = numero X 2,
if {resto == 0)
return 0,
e/se
return numero,
}
Para averiguar si un nmero es par hallamos el resto de la divisin al dividirlo entre
2. Si el resto es cero es que era par y devolvemos un 0, en caso contrario -el nmero
es impar- devolvemos el parmetro recibido.
Ambito ue las vaiiables en funciones
Dentro de las funciones podemos declarar variables, incluso los parmetros son como
variables que se declaran en la cabecera de la funcin y que se inicializan al llamar a
la funcin. Todas las variables declaradas en una funcin son locales a esa funcin,
es decir, solo tendrn validez durante la ejecucin de la funcin.
Podemos declarar variables en funciones que tengan el mismo nombre que una
variable global a la pgina. Entonces, dentro de la funcin la variable que tendr
validez es la variable local y fuera de la funcin tendr validez la variable global a la
pgina.
En cambio, si no declaramos las variables en las funciones se entender por
javascript que estamos haciendo referencia a una variable global a la pgina, de
modo que si no est creada la variable la crea, pero siempre global a la pgina en
lugar de local a la funcin.
48
Arrays
INTR0B0CCI0N
En los lenguajes de programacin existen estructuras de datos especiales que nos
sirven para guardar informacin ms compleja que simples variables. Una estructura
tpica en todos los lenguajes es el Array, que es como una variable donde podemos
introducir varios valores, en lugar de solamente uno como ocurre con las variables
normales.
Los arrays nos permiten guardar varias variables y acceder a ellas de manera
independiente, es como tener una variable con distintos compartimentos donde
podemos introducir datos distintos. Para ello utilizamos un ndice que nos permite
especificar el compartimiento o posicin a la que nos estamos refiriendo.
Los arrays se introdujeron en versiones Javascript 1.1 o superiores, es decir, solo los
podemos utilizar a partir de los navegadores 3.0. Para navegadores antiguos se
puede simular el array utilizando sintaxis de programacin orientada a objetos, pero
dada la complejidad de esta tarea, por lo menos en el momento en que nos
encontramos y las pocas ocasiones que los deberemos utilizar vamos a ver cmo
utilizar el autntico array de Javascript.
Cieacion ue aiiays
El primer paso para utilizar un array es crearlo. Para ello utilizamos un objeto
Javascript ya implementado en el navegador. Veremos en adelante un tema para
explicar lo que es la orientacin a objetos, aunque no ser necesario para poder
entender el uso de los arrays. Esta es la sentencia para crear un objeto array:
vor mi4rroy = new 4rroy{):
Esto crea un array en la pgina que esta ejecutndose. El array se crea sin ningn
contenido, es decir, no tendr ninguna casilla o compartimiento creado. Tambin
podemos crear el array especificando el nmero de compartimentos que va a tener.
vor mi4rroy = new 4rroy{10),
En este caso indicamos que el array va a tener 10 posiciones, es decir, 10 casillas
donde guardar datos.
Es importante que nos fijemos que la palabra Array en cdigo Javascript se escribe
con la primera letra en mayscula. Como en Javascript las maysculas y minsculas
si que importan, si lo escribimos en minscula no funcionar.
Tanto se indique o no el nmero de casillas del array, podemos introducir en el array
cualquier dato. Si la casilla est creada se introduce simplemente y si la casilla no
estaba creada se crea y luego se introduce el dato, con lo que el resultado final es el
mismo. Esta creacin de casillas es dinmica y se produce al mismo tiempo que los
49
scripts se ejecutan. Veamos a continuacin cmo introducir valores en nuestros
arrays.
mi4rroy[0] = 290,
mi4rroy[1] = 97,
mi4rroy[2] = 127,
Se introducen indicando entre corchetes el ndice de la posicin donde queramos
guardar el dato. En este caso introducimos 290 en la posicin 0, 97 en la posicin 1 y
127 en la 2. Los arrays empiezan siempre en la posicin 0, as que un array que
tenga por ejemplo 10 posiciones, tendr casillas de la 0 a la 9. Para recoger datos de
un array lo hacemos igual: poniendo entre corchetes el ndice de la posicin a la que
queremos acceder. Veamos cmo se imprimira en la pantalla el contenido de un
array.
vor mi4rroy = new 4rroy{l),
mi4rroy[0] = 155,
mi4rroy[1] = 4,
mi4rroy[2] = 499,
for {i=0,i<l,i++)
(
document.write{"Posicin " + i + " de/ orroy: " + mi4rroy[i]),
}
Hemos creado un array con tres posiciones, luego hemos introducido un valor en
cada una de las posiciones del array y finalmente las hemos impreso. En general, el
recorrido por arrays para imprimir sus posiciones o cualquier otra cosa se hace
utilizando bucles. En este caso utilizamos un bucle for que va desde el 0 hasta el 2.
Tipos ue uatos en los aiiays
En las casillas de los arrays podemos guardar datos de cualquier tipo. Podemos ver
un array donde introducimos datos de tipo caracter.
mi4rroy[0] = "no/o",
mi4rroy[1] = "o",
mi4rroy[2] = "todos",
Incluso, en Javascript podemos guardar distintos tipos de datos en las casillas de un
mismo array. Es decir, podemos introducir nmeros en unas casillas, textos en otras,
boleanos o cualquier otra cosa que deseemos.
mi4rroy[0] = "M4L464.54l4.uu",
mi4rroy[1] = 1275,
mi4rroy[1] = 0.78,
mi4rroy[2] = true,
50
L0NuIT0B BE L0S ARRAYS
Todos los arrays en javascript, aparte de almacenar el valor de cada una de sus
posiciones tambin almacenan el nmero de posiciones que tienen. Para ello utilizan
una propiedad del objeto array, la propiedad length. Ya veremos en objetos qu es
una propiedad, pero para nuestro caso podemos imaginarnos que es como una
variable, adicional a las posiciones, que almacena un nmero igual al nmero de
casillas del array.
Para acceder a una propiedad de un objeto se ha de utilizar el operador punto. Se
escribe el nombre del array que queremos acceder al nmero de posiciones que
tiene, sin corchetes ni parntesis, seguido de un punto y la palabra length.
vor mi4rroy = new 4rroy{),
mi4rroy[0] = 155,
mi4rroy[1] = 499,
mi4rroy[2] = 5,
document.write{"Lonqitud de/ orroy: " + mi4rroy./enqth),
Este cdigo imprimira en pantalla el nmero de posiciones del array, que en este
caso es 3. Recordamos que un array con 3 posiciones abarca desde la posicin 0 a la
2.
Es muy habitual que se utilice la propiedad length para poder recorrer un array por
todas sus posiciones. Para ilustrarlo vamos a ver un ejemplo de recorrido por este
array para mostrar sus valores.
for {i=0,i<mi4rroy./enqth,i++)
(
document.write{mi4rroy[i]):
}
Hay que fijarse que el bucle for se ejecuta siempre que i valga menos que la longitud
del array, extrada de su propiedad length.
El siguiente ejemplo nos servir para conocer mejor los recorridos por los arrays, el
funcionamiento de la propiedad length y la creacin dinmica de nuevas posiciones.
Vamos a crear un array con 2 posiciones y rellenar su valor. Posteriormente
introduciremos un valor en la posicin 5 del array. Finalmente imprimiremos todas
las posiciones del array para ver lo que pasa.
vor mi4rroy = new 4rroy{2),
mi4rroy[0] = "co/ombio",
mi4rroy[1] = "stodos unidos",
mi4rroy[5] = "8rosi/",
for {i=0,i<mi4rroy./enqth,i++)
(
document.write{"Posicin " + i + " de/ orroy: " + mi4rroy[i]),
}
El ejemplo es sencillo. Se puede apreciar que hacemos un recorrido por el array
desde 0 hasta el nmero de posiciones del array (indicado por la propiedad length).
En el recorrido vamos imprimiendo el nmero de la posicin seguido del contenido
del array en esa posicin. Pero podemos tener una duda al preguntarnos cul ser el
51
nmero de elementos de este array, ya que lo habamos declarado con 2 y luego le
hemos introducido un tercero en la posicin 5. Al ver la salida del programa
podremos contestar nuestras preguntas. Ser algo parecido a esto:
Posicin 0 de/ orroy: co/ombio
Posicin 1 de/ orroy: stodos unidos
Posicin 2 de/ orroy: nu//
Posicin l de/ orroy: nu//
Posicin 4 de/ orroy: nu//
Posicin 5 de/ orroy: 8rosi/
Se puede ver claramente que el nmero de posiciones es 6, de la 0 a la 5. Lo que ha
ocurrido es que al introducir un dato en la posicin 5, todas las casillas que no
estaban creadas hasta la quinta se crean tambin.
Las posiciones de la 2 a la 4 estn sin inicializar. En este caso nuestro navegador ha
escrito la palabra null para expresar esto, pero otros navegadores podrn utilizar la
palabra undefined. Ya veremos ms adelante qu es este null y dnde lo podemos
utilizar, lo importante ahora es que comprendas cmo trabajan los arrays y los
utilices correctamente.
ARRAYS N0LTIBINENSI0NALES
Los arrays multidimensionales son unas estructuras de datos que almacenan los
valores en ms de una dimensin. Los arrays que hemos visto hasta ahora
almacenan valores en una dimensin, por eso para acceder a las posiciones
utilizamos tan solo un ndice. Los arrays de 2 dimensiones guardan sus valores, por
decirlo de alguna manera, en filas y columnas y por ello necesitaremos dos ndices
para acceder a cada una de sus posiciones.
Dicho de otro modo, un array multidimensional es como un contenedor que guardara
ms valores para cada posicin, es decir, como si los elementos del array fueran a su
vez otros arrays.
En Javascript no existe un autntico objeto array-multidimensinal. Para utilizar estas
estructuras podremos definir arrays que donde en cada una de sus posiciones habr
otro array. En nuestros programas podremos utilizar arrays de cualquier dimensin,
veremos a continuacin cmo trabajar con arrays de dos dimensiones, que sern los
ms comunes.
En este ejemplo vamos a crear un array de dos dimensiones donde tendremos por un
lado ciudades y por el otro la temperatura media que hace en cada una durante de
los meses de invierno.
vor temperoturos_medios_ciudod0 = new 4rroy{l),
temperoturos_medios_ciudod0[0] = 12,
vor temperoturos_medios_ciudod1 = new 4rroy {l),
vor temperoturos_medios_ciudod2 = new 4rroy {l),
52
Con las anteriores lneas hemos creado tres arrays de 1 dimensin y tres elementos,
como los que ya conocamos. Ahora crearemos un nuevo array de tres elementos e
introduciremos dentro de cada una de sus casillas los arrays creados anteriormente,
con lo que tendremos un array de arrays, es decir, un array de 2 dimensiones.
vor temperoturos_ciudodes = new 4rroy {l),
temperoturos_ciudodes[0] = temperoturos_medios_ciudod0,
Vemos que para introducir el array entero hacemos referencia al mismo sin
parntesis ni corchetes, sino slo con su nombre. El array temperaturas_cuidades es
nuestro array bidimensinal.
Tambin es interesante ver cmo se realiza un recorrido por un array de dos
dimensiones. Para ello tenemos que hacer un recorrido por cada una de las casillas
del array bidimensional y dentro de estas hacer un nuevo recorrido para cada una de
sus casillas internas. Es decir, un recorrido por un array dentro de otro.
document.write{"<tob/e width=200 border=1 ce//poddinq=1 ce//spocinq=1>"),
for {i=0,i<temperoturos_cuidodes./enqth,i++)
(
document.write{"<tr>"):
document.write{"<td><b>ciudod " + i + "</b></td>"),
for {j=0,j<temperoturos_cuidodes[i]./enqth,j++)
(
document.write{"<td>" + temperoturos_cuidodes[i][j] + "</td>"),
}
document.write{"</tr>"),
}
document.write{"</tob/e>"),
Este script resulta un poco ms complejo que los vistos anteriormente. La primera
accin consiste en escribir la cabecera de la tabla, es decir, la etiqueta <TABLE>
junto con sus atributos. Con el primer bucle realizamos un recorrido a la primera
dimensin del array y utilizamos la variable i para llevar la cuenta de la posicin
actual. Por cada iteracin de este bucle escribimos una fila y para empezar la fila
abrimos la etiqueta <TR>. Adems, escribimos en una casilla el numero de la ciudad
que estamos recorriendo en ese momento. Posteriormente ponemos otro bucle que
va recorriendo cada una de las casillas del array en su segunda dimensin y
escribimos la temperatura de la ciudad actual en cada uno de los meses, dentro de
su etiqueta <TD>. Una vez que acaba el segundo bucle se han impreso las tres
temperaturas y por lo tanto la fila est terminada. El primer bucle contina
repitindose hasta que todas las ciudades estn impresas y una vez terminado
cerramos la tabla.
Inicializacion ue aiiays
Para terminar con el tema de los arrays vamos a ver una manera de inicializar sus
valores a la vez que lo declaramos, as podemos realizar de una manera ms rpida
el proceso de introducir valores en cada una de las posiciones del array.
53
El mtodo normal de crear un array vimos que era a travs del objeto Array,
poniendo entre parntesis el nmero de casillas del array o no poniendo nada, de
modo que el array se crea sin ninguna posicin. Para introducir valores a un array se
hace igual, pero poniendo entre los parntesis los valores con los que deseamos
rellenar las casillas separados por coma. Vemoslo con un ejemplo que crea un array
con los nombres de los das de la semana.
vor dios5emono = new 4rroy{"Lunes","Mortes","Mirco/es,","lueves","viernes","5bodo","uominqo")
El array se crea con 7 casillas, de la 0 a la 6 y en cada casilla se escribe el dia de la
semana correspondiente (Entre comillas porque es un texto).
Ahora vamos a ver algo ms complicado, se trata de declarar el array bidimensional
que utilizamos antes para las temperaturas de las ciudades en los meses en una sola
lnea, introduciendo los valores a la vez.
vor temperoturos_cuidodes = new 4rroy{new 4rroy {12,10,11), new 4rroy{5,0,2),new 4rroy{10,8,10)),
En el ejemplo introducimos en cada casilla del array otro array que tiene como
valores las temperaturas de una ciudad en cada mes.
TRATANIENT0 BE ERR0RES
Eiioies comunes
Cuando ejecutamos los scripts pueden ocurrir dos tipos de errores de sintaxis o de
ejecucin, los vemos a continuacin.
Errores de sintaxis ocurren por escribir de manera errnea las lneas de cdigo,
equivocarse a la hora de escribir el nombre de una estructura, utilizar
incorrectamente las llaves o los parntesis o cualquier cosa similar. Estos errores los
indica javascript a medida que est cargando los scripts en memoria, lo que hace
siempre antes de ejecutarlos, como se indic en los primeros captulos. Cuando el
analizador sintctico de javascript detecta un error de estos se presenta el mensaje
de error (si est activada la opcin oportuna en el navegador).
Errores de ejecucin ocurren cuando se estn ejecutando los scripts. Por ejemplo
pueden ocurrir cuando llamamos a una funcin que no ha sido definida. Javascript no
indica estos errores hasta que no se realiza la llamada a la funcin.
La manera que tiene javascript de mostrar un error puede variar de un navegador a
otro. En versiones antiguas se mostraba una ventanita con el error y un botn de
aceptar, tanto en Internet Explorer como en Netscape. En la actualidad los errores de
javascript permanecen un poco ms ocultos al usuario. Esto viene bien, porque si
nuestras pginas tienen algn error en alguna plataforma no ser muy molesto para
el usuario que en muchas ocasiones ni se dar cuenta. Sin embargo para el
programador puede ser un poco ms molesto de revisar y se necesitar conocer la
manera de que se muestren los errores para que puedan ser reparados.
Los navegadores nos ofrecen varias herramientas de depurar JavaScript. En Internet
Explorer 7, debemos hacer clic en herramientas>opciones de internet y
seleccionar la pestaa opciones avanzadas donde podrs marcar el cuadro de
seleccin Mostrar una notificacin sobre cada error de script. Si algo fuese mal
en una pgina que contiene JavaScript, aparecer un tringulo amarillo con un signo
54
de admiracin en la parte inferior izquierda de la ventana, al hacer doble clic en ella,
obtendremos un cuadro de dilogo que nos indicar los errores que hay.
Mozilla Firefox tiene una consola de errores muy buena que muestra mucha
informacin de los errores JavaScript. Para acceder a dicha consola, haz clic en
Herramientas>Consola de errores.
El navegador Opera 9 ofrece una consola de errores a la que podemos acceder
mediante el men herramientas|avanzado|consola de errores.
Tambin podemos cometer fallos en la programacin que hagan que los scripts no
funcionen tal y como desebamos y que javascript no detecta como errores y por lo
tanto no muestra ningn mensaje de error.
Por dejarlo claro vamos a ver un ejemplo en el que nuestro programa puede no
funcionar como deseamos sin que javascript ofrezca ningn mensaje de error. En
este ejemplo trataramos de sumar dos cifras pero si una de las variables es de tipo
texto podramos encontrarnos con un error.
vor numero1 = 2l,
vor numero2 = "42",
vor sumo = numero1 + numero2,
Cunto vale la variable suma? Como muchos ya sabis, la variable suma vale
"2342" porque al intentar sumar una variable numrica y otra textual, se tratan a las
dos como si fueran de tipo texto y por lo tanto, el operador + se aplica como una
concatenacin de cadenas de caracteres. Si no estamos al tanto de esta cuestin
podramos tener un error en nuestro script ya que el resultado no es el esperado y
adems el tipo de la variable suma no es numrico sino cadena de caracteres.
Evitai eiioies comunes
Vamos a ver ahora una lista de los errores tpicos cometidos por inexpertos en la
programacin en general y en javascript en particular, y por no tan inexpertos.
Utilizar = en expresiones condicionales en lugar de == es un error difcil de detectar
cuando se comete, si utilizamos un solo igual lo que estamos haciendo es una
asignacin y no una comparacin para ver si dos valores son iguales.
No conocerse la precedencia de operadores y no utilizar parntesis para agrupar las
operaciones que se desea realizar. En este caso nuestras operaciones pueden dar
resultados no deseados.
Usar comillas dobles y simples errneamente. Recuerda que se pueden utilizar
comillas dobles o simples indistintamente, con la norma siguiente: dentro de comillas
dobles se deben utilizar comillas simples y viceversa.
Olvidarse de cerrar una llave o cerrar una llave de ms.
Colocar varias sentencias en la misma lnea sin separarlas de punto y coma. Esto
suele ocurrir en los manejadores de eventos, como onclick, que veremos ms
adelante.
Utilizar una variable antes de inicializarla o no declarar las variables con var antes de
utilizarlas tambin son errores comunes. Recuerda que si no la declaras puedes estar
haciendo referencia a una variable global en lugar de una local.
55
Contar las posiciones de los arrays a partir de 1. Recuerda que los arrays empiezan
por la posicin 0.
Bepuiai eiioies javasciipt
Cualquier programa es susceptible de contener errores. javascript nos informar de
muchos de los errores de la pgina: los que tienen relacin con la sintaxis y los que
tienen lugar en el momento de la ejecucin de los scripts a causa de equivocarnos al
escribir el nombre de una funcin o una variable. Sin embargo, no son los nicos
errores que nos podemos encontrar, tambin estn los errores que ocurren sin que
javascript muestre el correspondiente mensaje de error, como vimos anteriormente,
pero que hacen que los programas no funcionen como esperbamos.
Para todo tipo de errores, unos ms fciles de detectar que otros, debemos utilizar
alguna tcnica de depuracin que nos ayude a encontrarlos. Lenguajes de
programacin ms potentes que el que tratamos ahora incluyen importantes
herramientas de depuracin, pero en javascript debemos contentarnos con una
rudimentaria tcnica. Se trata de utilizar una funcin predefinida, la funcin alert()
que recibe entre parntesis un texto y lo muestra en una pequea ventana que tiene
un botn de aceptar.
Con la funcin alert() podemos mostrar en cualquier momento el contenido de las
variables que estamos utilizando en nuestros scripts. Para ello ponemos entre
parntesis la variable que deseamos ver su contenido. Cuando se muestra el
contenido de la variable el navegador espera a que apretemos el botn de aceptar y
cuando lo hacemos contina con las siguientes instrucciones del script.
Este es un sencillo ejemplo sobre cmo se puede utilizar la funcin alert() para
mostrar el contenido de las variables.
vor n_octuo/ = 0,
vor sumo = 0,
whi/e {sumo<l00)
(
n_octuo/ ++,
sumo += sumo + n_octuo/,
o/ert{"n_octuo/ vo/e " + n_octuo/ + " y sumo vo/e " + sumo),
}
Con la funcin alert() se muestra el contenido de las dos variables que utilizamos en
el script. Algo similar a esto es lo que tendremos que hacer para mostrar el contenido
de las variables y saber cmo estn funcionando nuestros scripts, si todo va bien o
hay algn error.
Conclusion
Hasta aqu hemos conocido la sintaxis javascript en profundidad. Aunque aun nos
quedan cosas importantes de sintaxis, la visin que has podido tener del lenguaje
ser suficiente para enfrentarte a los problemas ms fundamentales. En adelante
presentaremos otros reportajes para aprender a utilizar los recursos con los que
contamos a la hora de hacer efectos en pginas web.
Veremos la jerarqua de objetos del navegador, cmo construir nuestros propios
objetos, las funciones predefinidas de javascript, caractersticas del HTML Dinmico,
trabajo con formularios y otras cosas importantes para dominar todas las
posibilidades del lenguaje.
56
Funciones Internas
LIBRERA BE F0NCI0NES
En todos los lenguajes de programacin existen libreras de funciones que sirven
para hacer cosas diversas y muy repetitivas a la hora de programar. Las libreras de
los lenguajes de programacin ahorran la tarea de escribir las funciones comunes
que por lo general pueden necesitar los programadores. Un lenguaje de
programacin bien desarrollado tendr una buena cantidad de ellas. En ocasiones es
ms complicado conocer bien todas las libreras que aprender a programar en el
lenguaje.
Javascript contiene una buena cantidad de funciones en sus libreras. Como se trata
de un lenguaje que trabaja con objetos muchas de las libreras se implementan a
travs de objetos. Por ejemplo, las funciones matemticas o las de manejo de strings
se implementan mediante los objetos Math y String. Sin embargo, existen algunas
funciones que no estn asociadas a ningn objeto y son las que veremos en este
captulo, ya que todava no conocemos los objetos y no los necesitaremos para
estudiarlas.
Estas son las funciones que Javascript pone a disposicin de los programadores.
parseInt(cadena,base)
Recibe una cadena y una base. Devuelve un valor
numrico resultante de convertir la cadena en un nmero
en la base indicada.
parseFloat(cadena)
Convierte la cadena en un nmero y lo devuelve.
isNaN(nmero)
Devuelve un boleano dependiendo de lo que recibe por
parmetro. Si no es un nmero devuelve un true, si es
un numero devuelve false.
Las libreras que se implementan mediante objetos y las del manejo del explorador,
que tambin se manejan con objetos, las veremos ms adelante.
Vamos a ver algn ejemplo con las funciones ms importantes de esta lista.
57
E}ENPL0S BE F0NCI0NES
Ahora podemos ver varios ejemplos de utilizacin de funciones de la librera que
proporciona Javascript
Funcion paiseInt
Esta funcin recibe un nmero, escrito como una cadena de caracteres, y un nmero
que indica una base. En realidad puede recibir otros tipos de variables, dado que las
variables no tienen tipo en Javascript, pero se suele utilizar pasndole un string para
convertir la variable de texto en un nmero.
Las distintas bases que puede recibir la funcin son 2, 8, 10 y 16. Si no le pasamos
ningn valor como base la funcin interpreta que la base es decimal. El valor que
devuelve la funcin siempre tiene base 10, de modo que si la base no es 10 convierte
el nmero a esa base antes de devolverlo.
Veamos una serie de llamadas a la funcin parseInt para ver lo que devuelve y
entender un poco ms la funcin.
document.write {porselnt{"l4")),
uevue/ve e/ numero l4
document.write {porselnt{"101011",2)),
uevue/ve e/ numero 4l
document.write {porselnt{"l4",8)),
uevue/ve e/ numero 28
document.write {porselnt{"ll",1)),
uevue/ve e/ numero l
document.write {porselnt{"12l4otu/")),
uevue/ve e/ numero 12l4
Esta funcin se utiliza en la prctica para un montn de cosas distintas en el manejo
con nmeros, por ejemplo obtener la parte entera de un decimal.
document.write {porselnt{"l.l8")),
uevue/ve e/ numero l
Tambin es muy habitual su uso para saber si una variable es numrica, pues si le
pasamos un texto a la funcin que no sea numrico nos devolver NaN (Not a
Number) lo que quiere decir que No es un Nmero.
document.write {porselnt{"desorro//oweb.com")),
uevue/ve e/ numero NoN
Este mismo ejemplo es interesante con una modificacin, pues si le pasamos una
combinacin de letras y nmeros nos dar lo siguiente.
document.write {porselnt{"1xxlu")),
uevue/ve e/ numero 1,
document.write {porselnt{"1645")),
uevue/ve e/ numero NoN
58
Como se puede ver, la funcin intenta convertir el string en nmero y si no puede
devuelve NaN.
Funcion paiseFloat
La funcin parseFloat() busca todos los caracteres numricos, empezando desde la
posicin 0, hasta encontrar un carcter no vlido. Para esta funcin el separador
decimal si es un carcter vlido. SI encuentra dos separadores decimales, el segundo
separador no lo considera vlido y convierte la cadena hasta esa posicin.
4=porsel/oot{"22.45.l"),
uevue/ve e/ nmero 22.45
4=porsel/oot{"12l4otu/"),
uevue/ve e/ nmero 12l4.0
Funcion isNaN
Esta funcin devuelve un boleano dependiendo de si lo que recibe es un nmero o
no. Lo nico que puede recibir es un nmero o la expresin NaN. Si recibe un NaN
devuelve true y si recibe un nmero devuelve false. Es una funcin muy sencilla de
entender y de utilizar.
La funcin suele trabajar en combinacin con la funcin parseInt o parseFloat, para
saber si lo que devuelven estas dos funciones es un nmero o no.
milnteqer = porselnt{"4l."),
isNoN{milnteqer),
En la primera lnea asignamos a la variable miInteger el resultado de intentar
convertir a entero el texto A3.6. Como este texto no se puede convertir a nmero la
funcin parseInt devuelve NaN. La segunda lnea comprueba si la variable anterior es
NaN y como si que lo es devuelve un true.
mil/oot = porsel/oot{"4.7"),
isNoN{mil/oot),
En este ejemplo convertimos un texto a nmero con decimales. El texto se convierte
perfectamente porque corresponde con un nmero. Al recibir un nmero la funcin
isNaN devuelve un false.
59
Objetos
INTR0B0CCI0N
Vamos a introducirnos en un tema muy importante de Javascript como son los
objetos. Es un tema que aun no hemos visto y sobre el que en adelante vamos a
tratar constantemente pues todas las cosas en Javascript, incluso las ms sencillas,
las vamos a realizar a travs del manejo de objetos. De hecho, en los ejemplos
realizados hasta ahora hemos hecho grandes esfuerzos para no utilizar objetos y aun
as los hemos utilizado en alguna ocasin, pues es muy difcil encontrar ejemplos en
Javascript que, aunque sean simples, no hagan uso de ellos.
La programacin orientada a objetos representa una nueva manera de pensar a la
hora de hacer un programa. Javascript no es un lenguaje de programacin orientado
a objetos, aunque los utiliza en muchas ocasiones: podemos crear nuevos objetos y
utilizar muchos que estn creados desde un principio. Sin embargo la manera de
programar no va a cambiar mucho y lo que hemos visto hasta aqu relativo a
sintaxis, funciones, etc. puede ser utilizado igual que se ha indicado. Solo vamos a
aprender una especie de estructura nueva.
Como instanciai objetos
Instanciar un objeto es la accin de crear un ejemplar de una clase para poder
trabajar con l luego. Recordamos que un objeto se crea a partir de una clase y la
clase es la definicin de las caractersticas y funcionalidades de un objeto. Con las
clases no se trabaja, estas slo son definiciones, para trabajar con una clase
debemos tener un objeto instanciado de esa clase.
Una clase se podra definir como una plantilla donde se definen todas las
caractersticas que podr utilizar el objeto. En una clase se van a definir las
propiedades y mtodos.
En javascript para crear un objeto a partir de una clase se utiliza la instruccin new,
de esta manera.
vor miObjeto = new mic/ose{),
En una variable que llamamos miObjeto asigno un nuevo (new) ejemplar de la clase
miClase. Los parntesis se rellenan con los datos que necesite la clase para inicializar
el objeto, si no hay que meter ningn parmetro los parntesis se colocan vacos. En
realidad lo que se hace cuando se crea un objeto es llamar al constructor de esa
clase y el constructor es el encargado de crearlo e inicializarlo. Hablaremos sobre
esto ms adelante.
60
Como acceuei a piopieuaues y mtouos ue los objetos
En Javascript podemos acceder a las propiedades y mtodos de objetos de forma
similar a como se hace en otros lenguajes de programacin, con el operador punto
(".").
Las propiedades se acceden colocando el nombre del objeto seguido de un punto y el
nombre de la propiedad que se desea acceder. De esta manera:
miObjeto.miPropiedod
Para llamar a los mtodos utilizamos una sintaxis similar pero poniendo al final entre
parntesis los parmetros que pasamos a los mtodos. Del siguiente modo:
miObjeto.miMetodo{porometro1,porometro2)
Si el mtodo no recibe parmetros colocamos los parntesis tambin, pero sin nada
dentro.
miObjeto.miMetodo{)
0B}ET0S INC0RP0RAB0S
Sabiendo ya lo que es la programacin orientada a objetos vamos a introducirnos en
el manejo de objetos en Javascript y para ello vamos a empezar con el estudio de las
clases predefinidas que implementan las libreras para el trabajo con stings,
matemticas, fechas etc. Las clases que vamos a ver a continuacin son las
siguientes:
String, para el trabajo con cadenas de caracteres.
Date, para el trabajo con fechas.
Math, para realizar funciones matemticas.
Number, para realizar algunas cosas con nmeros
Boolean, trabajo con boleanos.
Nota: Las clases se escriben con la primera letra en maysculas. Tiene que
quedar claro que una clase es una especie de "declaracin de caractersticas y
funcionalidades" de los objetos. Dicho de otro modo, las clases son descripciones de
la forma y funcionamiento de los objetos. Con las clases generalmente no se realiza
ningn trabajo, sino que se hace con los objetos, que creamos a partir de las clases.
Una vez comprendida la diferencia entre objetos y clases, cabe sealar que String es
una clase, lo mismo que Date. Si queremos trabajar con cadenas de caracteres o
fechas necesitamos crear objetos de las clases String y Date respectivamente. Como
61
sabemos, Javascript es un lenguaje sensible a las maysculas y las minsculas y en
este caso, las clases, por convencin, siempre se escriben con la primera
letra en mayscula y tambin la primera letra de las siguientes palabras, si
es que el nombre de la clase est compuesto de varias palabras. Por ejemplo si
tuvieramos la clase de "Alumnos universitarios" se escribira con la -A- de alumnos y
la -U- de universitarios en mayscula. AlumnosUniversitarios sera el nombre de
nuestra supuesta clase.
Hay otros que pertenecen a este mismo conjunto, los enumeramos aqu para que
quede constancia de ellos, pero no los vamos a tocar en captulos siguientes.
Array, ya los hemos visto en captulos correspondientes al primer manual de
Javascript.
Tambin la clase Function, lo hemos visto parcialmente al estudiar las
funciones.
Hay otra clase RegExp que sirve para construir patrones de bsqueda.
Nota: Uso de maysculas y minsculas. Ya que nos hemos parado
anteriormente a hablar sobre el uso de maysculas en ciertas letras de los nombre
de las clases, vamos a terminar de explicar la convencin que se lleva a cabo en
Javascript para nombrar a los elementos.
Para empezar, cualquier variable se suele escribir en minsculas, aunque si este
nombre de variable se compone de varias palabras, se suele escribir en mayscula la
primera letra de las siguientes palabras a la primera. Esto se hace as en cualquier
tipo de variable o nombre menos en los nombres de las clases, donde se escribe
tambin en mayscula el primer caracter de la primera palabra.
Number, que es una clase se escribe con la primera en mayscula.
RegExp, que es el nombre de otra clase compuesto por dos palabras, tiene la
primera letras de las dos palabras en mayscula.
miCadena, que supongamos que es un objeto de la clase String, se escribe con la
primera letra en minscula y la primera letra de la segunda palabra en mayscula.
fecha, que supongamos que es un objeto de la clase Date, se escribe en
minsculas por ser un objeto.
miFuncin(), que es una funcin definida por nosotros, se acostumbra a
escribir con minscula la primera.
Como decimos, esta es la norma general para dar nombres a las variables,
clases, objetos, funciones, etc. en Javascript. Si la seguimos as, no
tendremos problemas a la hora de saber si un nombre en Javascript tiene o
no alguna mayscula y adems todo nuestro trabajo ser ms claro y fcil
de seguir por otros programadores o nosotros mismos en caso de retomar
un cdigo una vez pasado un tiempo.
62
CLASE STRINu
En javascript las variables de tipo texto son objetos de la clase String. Esto quiere
decir que cada una de las variables que creamos de tipo texto tienen una serie de
propiedades y mtodos. Recordamos que las propiedades son las caractersticas,
como por ejemplo longitud en caracteres del string y los mtodos son
funcionalidades, como pueden ser extraer un substring o poner el texto en
maysculas.
Para crear un objeto de la clase String lo nico que hay que hacer es asignar un
texto a una variable. El texto va entre comillas, como ya hemos visto en los captulos
de sintaxis. Tambin se puede crear un objeto string con el operador new, que
veremos ms adelante. La nica diferencia es que en versiones de Javascript 1.0 no
funcionar new para crear los Strings.
Cuando hemos creado una variable de tipo cadena de la siguiente forma:
vor miNombre="Pob/o",
Internamente se est utilizando la clase string de la siguiente forma:
vor miNombre= new 5trinq{"Pob/o"),
Piopieuaues ue Stiing
length
La clase String slo tiene una propiedad: length, que guarda el nmero de
caracteres del String.
Ntouos ue Stiing
Los objetos de la clase String tienen una buena cantidad de mtodos para realizar
muchas cosas interesantes. Primero vamos a ver una lista de los mtodos ms
interesantes y luego vamos a ver otra lista de mtodos menos tiles.
charAt(indice)
Devuelve el carcter que hay en la posicin
indicada como ndice. Las posiciones de un
string empiezan en 0.
charCodeAt(indice)
Devuvelve el cdgio del carcter especificado
por el ndice.
indexOf(carcter,desde)
Devuelve la posicin de la primera vez que
aparece el carcter indicado. Si no encuentra el
carcter en el string devuelve -1. El segundo
parmetro es opcional y sirve para indicar a
partir de que posicin se desea que empiece la
bsqueda.
lastIndexOf(carcter,desde)
Busca la posicin de un carcter exctamente
igual a como lo hace la funcin indexOf pero
desde el final en lugar del principio. El segundo
parmetro indica el nmero de caracteres desde
donde se busca, igual que en indexOf.
63
split(separador)
Este mtodo slo es compatible con javascript
1.1 en adelante. Sirve para crear un vector a
partir de un String en el que cada elemento es la
parte del String que est separada por el
separador indicado por parmetro.
substring(inicio,fin)
Devuelve una subcadena de la cadena sobre la
que acta. El primer parmetro es la posicin en
la que comienza la captura de la subcadena; el
segundo parmetro, si se utiliza, es la posicion
anterior al punto en el que se detiene la captura.
Si se omite el segundo argumento, se asume
que la posicin final es la longitud de la cadena.
Si intercambiamos los parmetros de inicio y fin
tambin funciona. Simplemente nos da el
substring que hay entre el carcter menor y el
mayor.
toLowerCase()
Pone todas los caracteres de un string en
minsculas.
toUpperCase()
Pone todas los caracteres de un string en
maysculas.
toString()
Este mtodo lo tienen todos los objetos y se usa
para convertirlos en cadenas.
E}ENPL0S BE LA CLASE STRINu
Ahora vamos a ver unos ejemplos sobre cmo se utilizan los mtodos y propiedades
del objeto String.
Ejemplo ue stiings 1
Vamos a escribir el contenido de un string con un carcter separador ("-") entre cada
uno de los caracteres del string.
vor mi5trinq = "no/o 4miqos"
vor resu/t = ""
for {i=0,i<mi5trinq./enqth-1,i++) (
resu/t += mi5trinq.chor4t{i)
resu/t += "-"
}
resu/t += mi5trinq.chor4t{mi5trinq./enqth - 1)
document.write{resu/t)
Primero creamos dos variables, una con el string a recorrer y otra con un string
vaco, donde guardaremos el resultado. Luego hacemos un bucle que recorre desde
el primer hasta el penltimo carcter del string -utilzamos la propiedad length para
conocer el nmero de caracteres del string- y en cada iteracin colocamos un
carcter del string seguido de un carcter separador "-". Como aun nos queda el
ltimo carcter por colocar lo ponemos en la siguiente lnea despus del bucle.
Utilizamos la funcin charAt para acceder a las posiciones del string. Finalmente
imprimimos en la pgina el resultado.
64
Ejemplo ue stiings 2
Vamos a hacer un script que rompa un string en dos mitades y las imprima por
pantalla. Las mitades sern iguales, siempre que el string tenga un nmero de
caracteres par. En caso de que el nmero de caracteres sea impar no se podr hacer
la mitad exacta, pero partiremos el string lo ms aproximado a la mitad.
vor mi5trinq = "012l45789",
vor mitod1,mitod2 ,posicin_mitod,
posicion_mitod = mi5trinq./enqth / 2,
mitod1 = mi5trinq.substrinq{0,posicion_mitod),
mitod2 = mi5trinq.substrinq{posicion_mitod,mi5trinq./enqth),
document.write{mitod1 + "<br>" + mitod2),
Las dos primeras lneas sirven para declarar las variables que vamos a utilizar e
inicializar el string a partir. En la siguiente lnea hallamos la posicin de la mitad del
string.
En las dos siguientes lneas es donde realizamos el trabajo de poner en una variable
la primera mitad del string y en la otra la segunda. Para ello utilizamos el mtodo
substring pasndole como inicio y fin en el primer caso desde 0 hasta la mitad y en el
segundo desde la mitad hasta el final. Para finalizar imprimimos las dos mitades con
un salto de lnea entre ellas.
CLASE BATE
Sobre este objeto recae todo el trabajo con fechas en Javascript, como obtener una
fecha, el da la hora y otras cosas. Para trabajar con fechas necesitamos instanciar
un objeto de la clase Date y con l ya podemos realizar las operaciones que
necesitemos.
Un objeto de la clase Date se puede crear de dos maneras distintas. Por un lado
podemos crear el objeto con el da y hora actuales y por otro podemos crearlo con un
da y hora distintos a los actuales. Esto depende de los parmetros que pasemos al
construir los objetos.
Para crear un objeto fecha con el da y hora actuales colocamos los parntesis vacos
al llamar al constructor de la clase Date.
milecho = new uote{),
Para crear un objeto fecha con un da y hora distintos de los actuales tenemos que
indicar entre parntesis el momento con que inicializar el objeto. Hay varias maneras
de expresar un da y hora vlidas, por eso podemos construir una fecha guindonos
por varios esquemas. Estos son dos de ellos, suficientes para crear todo tipo de
fechas y horas.
milecho = new uote{oo,mes,dio,horo,minutos,sequndos),
milecho = new uote{oo,mes,dio),
65
Los valores que debe recibir el constructor son siempre numricos. Un detalle, el mes
comienza por 0, es decir, enero es el mes 0. Si no indicamos la hora, el objeto fecha
se crea con hora 00:00:00.
Los objetos de la clase Date no tienen propiedades pero si un montn de mtodos,
vamos a verlos ahora.
Ntouos
getDate()
Devuelve el da del mes.
getDay()
Devuelve el da de la semana en nmero, (0-6), siendo el primer
da el domingo.
getHours()
Retorna la hora.
getMinutes()
Devuelve los minutos.
getMonth()
Devuelve el mes en nmero (atencin al mes que empieza por
0).
getSeconds()
Devuelve los segundos.
getTime()
Devuelve los milisegundos transcurridos entre el da 1 de enero
de 1970 y la fecha correspondiente al objeto al que se le pasa el
mensaje.
getFullYear()
Retorna el ao con todos los dgitos. Usar este mtodo para
estar seguros de que funcionar todo bien en fechas posteriores
al ao 2000.
setDate()
Actualiza el da del mes.
setHours()
Actualiza la hora.
setMinutes()
Cambia los minutos.
setMonth()
Cambia el mes (atencin al mes que empieza por 0).
setSeconds()
Cambia los segundos.
setTime()
Actualiza la fecha completa. Recibe un nmero de milisegundos
desde el 1 de enero de 1970.
setYear()
Cambia el ao recibe un nmero, al que le suma 1900 antes de
colocarlo como ao de la fecha. Por ejemplo, si recibe 95
colocar el ao 1995. Este mtodo est obsoleto a partir de
Javascript 1.3 en Netscape. Ahora se utiliza setFullYear(),
indicando el ao con todos los dgitos.
setFullYear()
Cambia el ao de la fecha al nmero que recibe por parmetro.
El nmero se indica completo ej: 2005 o 1995. Utilizar este
mtodo para estar seguros que todo funciona para fechas
posteriores a 2000.
Como habris podido apreciar, hay algn mtodo obsoleto por cuestiones relativas al
ao 2000: setYear() y getYear(). Estos mtodos se comportan bien en Internet
Explorer y no nos dar ningn problema el utilizarlos. Sin embrago, no funcionarn
correctamente en Netscape, por lo que es interesante que utilicemos en su lugar los
mtodos getFullYear() y setFullYear(), que funcionan bien en Netscape e Internet
Explorer.
66
E}ENPL0 BE LA CLASE BATE
En este ejemplo vamos a crear dos fechas, una con el instante actual y otra con
fecha del pasado. Luego las imprimiremos las dos y extraeremos su ao para
imprimirlo tambin. Luego actualizaremos el ao de una de las fechas y la
volveremos a escribir con un formato ms legible.
//en estos /ineos creomos /os fechos
milecho4ctuo/ = new uote{),
milechoPosodo = new uote{1998,4,2l),
//en estos /ineos imprimimos /os fechos.
document.write {milecho4ctuo/),
document.write {"<br>"),
document.write {milechoPosodo),
//extroemos e/ oo de /os dos fechos
ono4ctuo/ = milecho4ctuo/.qetlu//Yeor{),
onoPosodo = milechoPosodo.qetlu//Yeor{),
//scribimos en oo en /o pqino
document.write{"<br>/ oo octuo/ es: " + ono4ctuo/),
document.write{"<br>/ oo posodo es: " + onoPosodo),
//combiomos e/ oo en /o fecho octuo/
milecho4ctuo/.setlu//Yeor{2005),
//extroemos e/ dio mes y oo
dio = milecho4ctuo/.qetuote{),
mes = porselnt{milecho4ctuo/.qetMonth{)) + 1,
ono = milecho4ctuo/.qetlu//Yeor{),
//escribimos /o fecho en un formoto /eqib/e
document.write {dio + "/" + mes + "/" + ono),
Hay que destacar un detalle antes de acabar y es que el nmero del mes puede
empezar desde 0. Por lo menos en el Netscape con el que realizamos las pruebas
empezaba en 0 el mes. Por esta razn sumamos uno al mes que devuelve el mtodo
getMonth.
Hay ms detalles a destacar, pues resulta que en Netscape el mtodo getFullYear()
devuelve los aos trascurridos desde 1900, con lo que al obtener el ao de una fecha
de, por ejemplo, 2005, indica que es el ao 105. Para obtener el ao completo
tenemos a nuestra disposicin el mtodo getFullYear() que devolvera 2005 del
mismo modo en Netscape e Internet Explorer.
Mucha atencin, pues, al trabajo con fechas en distintas plataformas, puesto que
podra ser problemtico el hecho de que nos ofrezcan distintas salidas los mtodos de
manejo de fechas, com siempre dependiendo de la marca y versin de nuestro
navegador.
67
CLASE NATB
La clase Math proporciona los mecanismos para realizar operaciones matemticas en
Javascript. Algunas operaciones se resuelven rpidamente con los operadores
aritmticos que ya conocemos, como la multiplicacin o la suma, pero hay una serie
de operaciones matemticas adicionales que se tienen que realizar usando la clase
Math como pueden ser calcular un seno o hacer una raiz cuadrada.
De modo que para cualquier clculo matemtico complejo utilizaremos la clase Math,
con una particularidad. Hasta ahora cada vez que queramos hacer algo con una
clase debamos instanciar un objeto de esa clase y trabajar con el objeto y en el caso
de la clase Math se trabaja directamente con la clase. Esto se permite por que las
propiedades y mtodos de la clase Math son lo que se llama propiedades y mtodos
de clase y para utilizarlos se opera a travs de la clase en lugar de los objetos. Dicho
de otra forma, para trabajar con la clase Math no deberemos utilizar la instruccin
new y utilizaremos el nombre de la clase para acceder a sus propiedades y mtodos.
Piopieuaues
Las propiedades guardan valores que probablemente necesitemos en algn momento
si estamos haciendo clculos matemticos. Es probable que estas propiedades
resulten un poco raras a las personas que desconocen las matemticas avanzadas,
pero los que las conozcan sabrn de su utilidad.
E
Nmero E o constante de Euler, la base de los logaritmos neperianos.
LN2
Logaritmo neperiano de 2.
LN10
Logaritmo neperiano de 10.
LOG2E
Logaritmo en base 2 de E.
LOG10E
Logaritmo en base 10 de E.
PI
Conocido nmero para clculo con crculos.
SQRT1_2
Raiz cuadrada de un medio.
SQRT2
Raiz cuadrada de 2.
Ntouos
As mismo, tenemos una serie de mtodos para realizar operaciones matemticas
tpicas, aunque un poco complejas. Todos los que conozcan las matemticas a un
buen nivel conocern el significado de estas operaciones.
abs()
Devuelve el valor absoluto de un nmero. El valor despus de quitarle
el signo.
acos()
Devuelve el arcocoseno de un nmero en radianes.
asin()
Devuelve el arcoseno de un numero en radianes.
atan()
Devuelve un arcotangente de un numero.
ceil()
Devuelve el entero igual o inmediatamente siguiente de un nmero.
68
Por ejemplo, ceil(3) vale 3, ceil(3.4) es 4.
cos()
Retorna el coseno de un nmero.
exp()
Retorna el resultado de elevar el nmero E por un nmero.
floor()
Lo contrario de ceil(), pues devuelve un nmero igual o
inmediatamente inferior.
log()
Devuelve el logaritmo neperiano de un nmero.
max()
Retorna el mayor de 2 nmeros.
min()
Retorna el menor de 2 nmeros.
pow()
Recibe dos nmeros como parmetros y devuelve el primer nmero
elevado al segundo nmero.
random()
Devuelve un nmero aleatorio entre 0 y 1. Mtodo creado a partir de
Javascript 1.1.
round()
Redondea al entero ms prximo.
sin()
Devuelve el seno de un nmero con un ngulo en radianes.
sqrt()
Retorna la raiz cuadrada de un nmero.
tan()
Calcula y devuelve la tangente de un nmero en radianes.
E}ENPL0 BE LA CLASE NATB
Vamos a ver un sencillo ejemplo sobre cmo utilizar mtodos y propiedaes de la
clase Math para calcular el seno y el coseno de 2 PI radianes (una vuelta completa).
Como algunos de vosotros sabris, el coseno de 2 PI radianes debe dar como
resultado 1 y el seno 0.
document.write {Moth.cos{2 * Moth.Pl)),
document.write {Moth.sin{2 * Moth.Pl)),
2 PI radianes es el resultado de multiplicar 2 por el nmero PI. Ese resultado es lo
que recibe el mtodo cos, y da como resultado 1. En el caso del seno el resultado no
es exactamente 0 pero est aproximado con una exactitud de ms de una
millonsima de fraccin. Se escriben los el seno y coseno con un salto de lnea en
medio para que quede ms claro.
CLASE B00LEAN
Esta clase nos sirve para crear valores boleanos. Fue aadido en la versin 1.1 de
Javascript (con Netscape Navigator 3). Una de sus posibles utilidades es la de
conseguir valores boleanos a partir de datos de cualquier otro tipo.
Dependiendo de lo que reciba el constructor de la clase Bolean el valor del objeto
boleano que se crea ser verdadero o falso, de la siguiente manera:
- Se inicializa a false cuando no pasas ningn valor al constructor, o si pasas
una cadena vaca, el nmero 0 o la palabra false sin comillas.
69
- Se inicializa a true cuando recibe cualquier valor entrecomillado o cualquier
nmero distinto de 0.
Se puede comprender el funcionamiento de este objeto fcilmente si examinamos
unos ejemplos.
vor b1 = new 8oo/eon{),
document.write{b1 + "<br>"),
//muestro fo/se
vor b2 = new 8oo/eon{""),
//muestro fo/se
vor b25 = new 8oo/eon{fo/se),
//muestro fo/se
vor bl = new 8oo/eon{0),
document.write{bl + "<br>"),
//muestro fo/se
vor bl5 = new 8oo/eon{"0"),
document.write{bl5 + "<br>"),
//muestro true
vor b4 = new 8oo/eon{l),
//muestro true
vor b5 = new 8oo/eon{"no/o")
document.write{b5 + "<br>")
//muestro true
N0BEL0 BE 0B}ET0S BEL
NAvEuAB0R (B0N}
Llegamos al tema ms importante para aprender a manejar Javascript con toda su
potencia, el tema en el que aprenderemos a controlar al navegador y los distintos
elementos de la pgina.
Sin duda, este tema le va a dar mucha vida a nuestros ejemplos, ya que hasta ahora
no tenan mucho carcter prctico porque no trabajaban con el navegador y las
pginas, que es realmente para lo que est echo Javascript. De modo que esperamos
que a partir de aqu el manual sea ms entretenido para todos, porque va a cubrir los
aspectos ms prcticos.
Cuando se carga una pgina, el navegador crea una jerarqua de objetos en memoria
que sirven para controlar los distintos elementos de dicha pgina. Con Javascript y la
nomenclatura de objetos que hemos aprendido, podemos trabajar con esa jerarqua
de objetos, acceder a sus propiedades e invocar sus mtodos.
Cualquier elemento de la pgina se puede controlar de una manera u otra accediendo
a esa jerarqua. Es crucial conocerla bien para poder controlar perfectamente las
pginas web con Javascript o cualquier otro lenguaje de programacin del lado del
cliente. Vamos a ver ahora como est compuesta esta jerarqua. Los objetos que
forman parte de ella estn representados en el grfico siguiente.
70
Como se puede apreciar, todos los objetos comienzan en un objeto que se llama
window. Este objeto ofrece una serie de mtodos y propiedades para controlar la
ventana del navegador. Con ellos podemos controlar el aspecto de la ventana, la
barra de estado, abrir ventanas secundarias y otras cosas que veremos ms adelante
cuando expliquemos con detalle el objeto.
Adems de ofrecer control, el objeto window da acceso a otros objetos como el
documento (La pgina web que se est visualizando), el historial de pginas visitadas
o los distintos frames de la ventana. De modo que para acceder a cualquier otro
objeto de la jerarqua deberamos empezar por el objeto window. Tanto es as que
javascript entiende perfectamente que la jerarqua empieza en window aunque no lo
sealemos.
Las propiedades de un objeto pueden ser a su vez otros objetos.
Muchas de las propiedades del objeto window son a su vez otros objetos. Es el caso
de objetos como el historial de pginas web o el objeto documento, que tienen a su
vez otras propiedades y mtodos.
Entre ellos destaca el objeto document, que contiene todas las propiedades y
mtodos necesarios para controlar muchos aspectos de la pgina. Ya hemos visto
alguna propiedad como bgColor, pero tiene muchas otras como el ttulo de la pgina,
las imgenes que hay incluidas, los formularios, etc. Muchas propiedades de este
objeto son a su vez otros objetos, como los formularios. Los veremos todos cuando
tratemos cada uno de los objetos por separado. Adems, el objeto document tiene
mtodos para escribir en la pgina web y para manejar eventos de la pgina.
window document
Irames
history
location
navigator
screen
anchors
Iorms
images
links
location
objeto
Coleccion
LEYENDA
71
Navegacion a tiavs ue la jeiaiquia
El objetivo de este captulo sobre la jerarqua de objetos es aprender a navegar por
ella para acceder a cualquier elemento de la pgina. Esta no es una tarea difcil , pero
puede haber algn caso especial en el que acceder a los elementos de la pgina se
haga de una manera que aun no hemos comentado.
Como ya dijimos, toda la jeraqua empieza en el objeto window, aunque no era
necesario hacer referencia a window para acceder a cualquier objeto de la jerarqua.
Luego en importancia est el objeto document, donde podemos encontrar alguna
propiedad especial que merece la pena comentar por separado, porque su acceso es
un poco diferente. Se trata de las propiedades que son arrays (colecciones), por
ejemplo la propiedad images es un array con todas las imgenes de la pgina web.
Tambin encontramos arrays para guardar los enlaces de la pgina, los applets, los
formularios y las anclas.
Cuando una pgina se carga, el navegador construye en memoria la jerarqua de
objetos. De manera adicional, construye tambin estos arrays de objetos. Por
ejemplo, en el caso de las imgenes, va creando el array colocando en la posicin 0
la primera imagen, en la posicin 1 la segunda imagen y as hasta que las introduce
todas. Vamos a ver un bucle que recorre todas las imgenes de la pgina e imprime
su propiedad src, que contiene la URL donde est situada la imagen.
for {i=0,i<window.document.imoqes./enqth,i++)
(
document.write{document.imoqes[i].src),
}
Utilizamos la propiedad length del array images para limitar el nmero de iteraciones
del bucle. Luego utilizamos el mtodo write() del objeto document pasndole el valor
de cada una de las propiedades src de cada imagen.
Ahora vamos a ver el uso de otro array de objetos. En este caso vamos a acceder un
poco ms dentro de la jerarqua para llegar a la matriz elements de los objetos
formulario, que contiene cada uno de los elementos que componen el formulario.
Para ello tendremos que acceder a un formulario de la pgina, al que podremos
acceder por el array de formularios, y dentro de l a la propiedad elements, que es
otro array de objetos. Para cada elemento del formulario vamos a escribir su
propiedad value, que corresponde con la propiedad value que colocamos en HTML.
for {i=0,i<document.forms[0].e/ements./enqth,i++)
(
document.write{document. forms[0].e/ements[i].vo/ue),
}
Es un bucle muy parecido al que tenamos para recorrer las imgenes, con la
diferencia que ahora recorremos el vector de elements, al que accedemos por la
jerarqua de objetos pasando por el array de formularios en su posicin 0, que
corresponde con el primer formulario de la pgina.
Con esto hemos aprendido a movernos por la jerarqua de objetos, con lo que
podremos acceder a cualquier elemento del navegador o la pgina. En adelante
conoceremos con detalle cada uno de los objetos de la jerarqua, empezando por el
objeto window y bajando por la jerarqua hasta verlos todos
72
0B}ET0 WINB0W
Es el objeto principal en la jerarqua y contiene las propiedades y mtodos para
controlar la ventana del navegador. De l dependen todos los dems objetos de la
jerarqua. Vamos a ver la lista de sus propiedades y mtodos.
Piopieuaues
A continuacin podemos ver las propiedades del objeto window. Hay algunas muy
tiles y otras que lo son menos.
closed
Indica la posibilidad de que se haya cerrado la ventana.
(Javascript 1.1)
defaultStatus
Texto que se escribe por defecto en la barra de estado del
navegador.
document
Objeto que contiene la pgina web que se est mostrando.
frames
La coleccin que contiene todos los frames de la pgina. Se
accede por su ndice a partir de 0, o por su nombre.
history
Objeto historial de pginas visitadas.
length
Numero de frames de la ventana.
location
La URL del documento que se est visualizando. Podemos
cambiar el valor de esta propiedad para movernos a otra pgina.
Ver tambin la propiedad location del objeto document.
locationbar
Objeto barra de direcciones de la ventana. (Javascript 1.2)
menubar
Objeto barra de mens de la ventana. (Javascript 1.2)
name
Nombre de la ventana. Lo asignamos cuando abrimos una nueva
ventana.
opener
Hace referencia a la ventana de navegador que abri la ventana
donde estamos trabajando. Se ver con detenimiento en el
tratamiento de ventanas con Javascript
outherHeight
Tamao en pixels del espacio de toda la ventana, en vertical.
Esto incluye las barras de desplazamiento, botones, etc.
(Javascript 1.2)
outherWidth
Tamao en pixels del espacio de toda la ventana, en horizontal.
Esto incluye las barras de desplazamiento. (Javascript 1.2)
parent
Hace referencia a la ventana donde est situada el frame donde
estamos trabajando. La veremos con detenimiento al estudiar el
control de frames con Javascript.
self
Ventana o frame actual.
scrollbars
Objeto de las barras de desplazamiento de la ventana.
status
Texto de la barra de estado.
statusbar
Objeto barra de estado del navegador. (Javascript 1.2)
toolbar
Objeto barra de herramientas. (Javascript 1.2)
top
Hace referencia a la ventana donde est situada el frame donde
estamos trabajando. Como la propiedad parent.
window
Hace referencia a la ventana actual, igual que la propiedad self.
Vamos a ver un ejemplo de cmo acceder a los frames de una pgina. Supongamos
el siguiente ejemplo:
73
anotherframe.htm
<html>
<head>
<title>leftFrame</title>
</head>
<body>
<h1>leftFrame</h1>
</body>
</html>
frame.htm
<html>
<head>
<title>topFrame</title>
</head>
<body>
<h1>topFrame</h1>
<script>window.document.write(window.parent.document.frames.length);</script>
</body>
</html>
Frameset.htm
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="100,*">
<frame src="frame.htm" name="topFrame" />
<frameset cols="50%,50%">
<frame src="anotherframe.htm" name="leftFrame" />
<frame src="yetanotherframe.htm" name="rightFrame" />
</frameset>
</frameset>
</html>
74
Vamos a ver ahora los distintos mtodos que tiene el objeto window. Muchos de
estos mtodos habr que verlos por separado porque son muy tiles y aun no los
hemos utilizado, ahora vamos a listarlos y ya veremos algunos ejemplos.
Ntouos
alert(texto)
Presenta una ventana de alerta donde se puede leer
el texto que recibe por parmetro
back()
Ir una pgina atrs en el historial de pginas
visitadas. Funciona como el botn de volver de la
barra de herramientas. (Javascript 1.2)
clearInterval()
Elimina la ejecucin de sentencias asociadas a un
intervalo indicadas con el mtodo setInterval().
(Javascript 1.2)
clearTimeout()
Elimina la ejecucin de sentencias asociadas a un
tiempo de espera indicadas con el mtodo
setTimeout().
close()
Cierra la ventana. (Javascript 1.1)
confirm(texto)
Muestra una ventana de confirmacin y permite
aceptar o rechazar.
forward()
Ir una pgina adelante en el historial de pginas
visitadas. Como si pulssemos el botn de adelante
del navegador. (Javascript 1.2)
home()
Ir a la pgina de inicio que haya configurada en el
explorador. (Javascript 1.2)
moveBy(pixelsX, pixelsY)
Mueve la ventana del navegador los pixels que se
indican por parmetro hacia la derecha y abajo.
(Javascript 1.2)
MoveTo(pixelsX, pixelsY)
Mueve la ventana del navegador a la posicin
indicada en las coordenadas que recibe por
parmetro. (Javascript 1.2)
open()
Abre una ventana secundaria del navegador.
print()
Como si pulssemos el botn de imprimir del
navegador. (Javascript 1.2)
prompt(pregunta,inicializ
acion_de_la_respuesta)
Muestra una caja de dilogo para pedir un dato.
Devuelve el dato que se ha escrito.
resizeBy(pixelsAncho,pixe
lsAlto)
Redimensiona el tamao de la ventana, aadiendo a
su tamao actual los valores indicados en los
yetanotherframe.htm
<html>
<head>
<title>rightFrame</title>
</head>
<body>
<h1>rightFrame</h1>
</body>
</html>
75
parmetros. El primero para la altura y el segundo
para la anchura. Admite valores negativos si se
desea reducir la ventana. (Javascript 1.2)
resizeTo(pixelsAncho,pixe
lsAlto)
Redimensiona la ventana del navegador para que
ocupe el espacio en pixels que se indica por
parmetro (Javascript 1.2)
setInterval()
Define un script para que sea ejecutado
indefinidamente en cada intervalo de tiempo.
(Javascript 1.2)
setTimeout(sentencia,mili
segundos)
Define un script para que sea ejecutado una vez
despus de un tiempo de espera determinado.
stop()
Como pulsar el botn de stop de la ventana del
navegador. (Javascript 1.2)
<form>
<br>
<input type="button" vo/ue="Mover /o ventono 10 derecho,10 obojo" onc/ick="move8y{10, 10)">
<br>
<br>
<input type="button" vo/ue="Mover /o ventono o/ punto {100,10)" onc/ick="move1o{100, 10)">
<br>
<br>
<input type="button" vo/ue="lmprimir esto pqino" onc/ick="print{)">
<br>
<br>
<input type="button" vo/ue="4umento /o ventono 10 oncho,10 /orqo" onc/ick="resite8y{10, 10)">
<br>
<br>
<input type="button" vo/ue="lijo e/ tomoo de /o ventono en 400 x 200" onc/ick="resite1o{400, 200)">
<br>
</form>
Estos ejemplos son muy simples, aunque poco prcticos. nicamente se trata de una
serie de botones que, al pulsarlos, llaman a otros tantos mtodos del objeto window.
En el atributo onclick de la etiqueta del botn se indican las sentencias Javascript que
queremos que se ejecuten cuando se pulsa sobre dicho botn.
En el captulo siguiente veremos otros ejemplos realizados con mtodos del objeto
window de Javascript, un poco ms detallados.
E}ENPL0S BEL 0B}ET0 WINB0W
Ahora vamos a realizar algn ejemplo de utilizacin de los mtodos y propiedades de
la ventana. Nos vamos a centrar en los ejemplos que sirven para sacar cajas de
dilogo, que son muy tiles.
Caja ue aleita
Para sacar un texto en una ventanita con un botn de aceptar. Recibe el texto por
parmetro.
window.o/ert{"ste es e/ texto que so/e"),
76
Como el objeto window se sobreentiende podemos escribirlo as.
o/ert{"ste es e/ texto que so/e"),
Caja ue confiimacion
Muestra una ventana con un texto indicado por parmetro y un botn de aceptar y
otro de rechazar. Dependiendo del botn que se pulsa devuelve un true (si se pulsa
aceptar) o un false (si se pulsa rechazar).
<script type="text/jovoscript">
vor respuesto = confirm{"4ceptome o rechotome"),
o/ert {"nos pu/sodo: " + respuesto),
</script>
Este script muestra una caja de dilogo confirm y luego muestra en otra caja de
dilogo alert el contenido de la variable que devolvi la caja de dilogo.
Caja ue intiouuccion ue un uato
Muestra una caja de dilogo donde se formula una pregunta y hay un campo de texto
para escribir una respuesta. El campo de texto aparece relleno con lo que se escriba
en el segundo parmetro del mtodo. Tambin hay un botn de aceptar y otro de
cancelar. En caso de pulsar aceptar, el mtodo devuelve el texto que se haya escrito.
Si se puls cancelar devuelve null.
El ejemplo siguiente sirve para pedir el nombre de la persona que est visitando la
pgina y luego mostrar en la pgina un saludo personalizado. Utiliza un bucle para
repetir la toma de datos siempre que el nombre de la persona sea null (porque puls
el botn de cancelar) o sea un string vaco (porque no escribi nada).
nombre = nu//,
whi/e {nombre == nu// ]] nombre == "")
(
nombre = prompt{"uime tu nombre:",""),
}
document.write{"<h1>no/o " + nombre + "</h1>"),
</script>
Si nos fijamos en la caja prompt veremos que recibe dos parmetros. El segundo era
el texto por defecto que sale en la caja como respuesta. Lo hemos dejado como un
string vaco para que no salga nada como texto por defecto.
Hasta aqu los ejemplos de los mtodos del objeto window. De todos modos, en el
resto del manual tendremos ocasin de ver cmo trabajar con muchas propiedades y
mtodos de este objeto.
77
Abiii nuevas ventanas
Por medio de Javascript podemos abrir nuevas ventanas del navegador a travs del
mtodo w|ndow.open(}. Este mtodo acepta cuatro parmetros: la URL de la pgina a
abrir en la nueva ventana, el nombre de la nueva ventana, una cadena con
caractersticas de la ventana y un valor Booleano para indicar si la pgina abierta
debe ocupar todo el lugar de la ventana actual.
Si se invoca window.open() con el nombre de un frame existente como segundo
argumento, la nueva ventana se carga en el marco de dicho nombre. Para abrir una
pgina en el marco superior.
window.open{"http://www.qooq/e.es","superior"),
Tambin podemos utilizar los nombres especiales de marco: _self, _parent, _top y
_blank.
Al utilizarse el tercer parmetro, se asume que debe abrirse una nueva ventana. La
cadena de caractersticas, que es una lista de parmetros separados por comas,
define determinados aspectos de la nueva ventana. En la siguiente tabla se muestran
los distintos parmetros:
Parametro Valores Descripcion
left Numrico Indica la coordenada izquierda de la nueva ventana.
top Numrico Indica la coordenada superior de la nueva ventana.
height Numrico Define la altura de la nueva ventana. No puede ser un
valor inferior a 100.
width Numrico Define la anchura de la nueva ventana. No puede ser un
valor inferior a 100.
resizeable yes/no Determina si se puede cambiar el tamao de la nueva
ventana arrastrando el borde.
scrollable yes/no Determina si se permite el desplazamiento en caso de
que el contenido no quepa en la ventana activa.
toolbar yes/no Determina si la nueva ventana muestra la barra de
herramientas.
statusbar yes/no Determina si la nueva ventana muestra la barra de
estado.
location yes/no Determina si la nueva ventana muestra la barra de
direccin.
Como se ha dicho anteriormente, la cadena de caractersticas est separada por
comas y, por ello, no debe incluir espacios antes o despus de las comas o el signo
de igualdad.
El mtodo w|ndow.open(} devuelve un objeto window como valor de funcin que
tambin es el objeto window de la nueva ventana. Por medio de este objeto podemos
manipular la nueva ventana:
vor venton,
ventono=window.open{"http:/mo/oqo.sofo.edu","sofo","heiqht=150,width=200,top=10,/eft=10,resitob/
e=yes"),
78
ventono.move1o{100,100),
ventono.resite1o{200,200),
</script>
La baiia ue estauo
La barra de estado es la zona del borde inferior en la que se muestra informacin al
usuario. Por lo general, la barra de estado indica al usuario cuando se abre la pgina
y cundo termina de abrirse; sin embargo, se puede establecer su valor a travs de
dos propiedades del objeto window: status (cambia momentneamente el texto de la
barra de estado) y defau|t8tatus (lo cambia miesntras el usuario se encuentre en la
pgina).
window.defou/t5totus="sts en mi pqino....",
<p onmouseover="window.stotus=lnformocin sobre....">jhkhkjh kjhkjh</p>
Inteivalos y tiempos ue espeia
Javascript admite tiempos de espera e intervalos, que indican al navegador cuando
ejecutar un cdigo concreto. Los tiempos de espera ejecutan el cdigo tras un
nmero especificado de milisegundos y los intervalos lo hacen repetidamente, con
una espera de un nmero determinado de milisegundos.
Para definir un tiempo de espera se utiliza el mtodo w|ndow.setT|meout(}, mtodo
que acepta dos parmetros: el cdigo que va a ejecutar y el nmero de milisegundos
que esperar antes de la ejecucin. Por ejemplo:
Evidentemente, podemos hacer referencia a una funcin definida previamente.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
window.setTimeout("alert('Hola mundo')",1000);
</script>
</body>
</html>
79
Al invocar w|ndow.setT|meout(} se crea un ID numrico de tiempo de espera. Este ID
de tiempo de espera nos va a permitir cancelar la ejecucin del cdigo. Para ello
utilizaremos el mtodo w|ndow.c|earT|meout(}, al cual le pasamos el ID del tiempo de
espera:
vor tiempo= window.set1imeout{"o/ert{'no/o mundo')",1000),
// ms cdiqo..
window.c/eorlmeout{tiempo),
Los intervalos funcionan de forma similar con la excepcin de que repiten el cdigo
indefinidamente a intervalos de tiempo concretos. Para definir un intervalo de
tiempo, deberemos utilizar el mtodo w|ndow.set|nterva|(} con el mismo tipo de
argumentos que hemos empleado con w|ndow.setT|meout(}: el cdigo a ejecutar y el
nmero de milisegundos que esperar entre ejecuciones.
Al igual que suceda con w|ndow.setT|meout(}, con el mtodo w|ndow.set|nterva|(}
tambn se crea un ID de tiempo de intervalo que podemos utilizarlo para cancelar la
ejecucin. Utilizamos el mtodo w|ndow.c|ear|nterva|(}, al cual le pasamos el ID.
<head>
<title></title>
</head>
function saludo()
{
alert('Hola mundo');
}
</script>
<body onload="javascript:window.setnterval('saludo()',3000);">
</body>
</html>
<head>
<title></title>
</head>
function saludo()
{
}
</script>
<body onload="window.setTimeout('saludo()',1000);">
</body>
</html>
80
Bistoiial
El historial es una lista de visitas del usuario. Por motivos de seguridad, nicamente
podemos desplazarnos por el historial; no podemos obtener los URL de las pginas
incluidas en el misno.
Para desplazarnos por el historial, utilizamos la propiedad w|ndow.h|story y sus
mtodos.
El mtodo w|ndow.h|story.go(} acepta un parmetros, que es el nmero de pginas as
retroceder o a avanzar. Si el nmero es negativo, retrocedemos por el historial del
navegador, si es positivo, avanzamos.
window.history.qo{-1),
window.history.qo{1),
Tambin podemos utilizar los mtodos especficos para avanzar y retrocedes
w|ndow.h|story.forward(} y w|ndow.h|story.back(}.
En ocasiones podemos utilizar un enlacde que nos permita avanzar y retroceder
pginas:
<o href='jovoscript:window.history.bock{)'>4tros</o>
<head>
<title></title>
</head>
var intervalo=null;
var veces=0;
function saludo()
{
if (veces==3)
window.clearnterval(intervalo);
else
{
veces++;
}
}
</script>
<body onload="javascript:intervalo=window.setnterval('saludo()',3000);">
</body>
</html>
81
Tambin podemos saber en cuanquier momento el nmero de pginas que contiene
el historial. Para ello utilizamos la propiedad w|ndow.h|story.|ength.
0B}ET0 B0C0NENT
Con el objeto document se controla la pgina web y todos los elementos que
contiene. El objeto document es la pgina actual que se est visualizando en ese
momento. Depende del objeto window, pero tambin puede depender del objeto
frame en caso de que la pgina se est mostrando en un frame.
Piopieuaues
Veamos una lista de las propiedades del objeto document y luego veremos algn
ejemplo.
alinkColor
Color de los enlaces activos
bgColor
El color de fondo del documento.
fgColor
El color del texto. Para ver los cambios hay que reescribir la
pgina.
forms
Un array con todos los formularios de la pgina.
images
Cada una de las imgenes de la pgina introducidas en un
array.
lastModified
La fecha de ltima modificacin del documento.
linkColor
El color de los enlaces.
links
Un array con cada uno de los enlaces de la pgina.
location
La URL del documento que se est visualizando.
referrer
La pgina de la que viene el usuario.
title
El titulo de la pgina.
URL
Lo mismo que location, pero es aconsejable utilizar location ya
que URL no existe en todos los navegadores.
vlinkColor
El color de los enlaces visitados.
Al igual que ocurre con las colecciones de window, todas las colecciones de document
se indexan por nmero y por nombre.
<head>
<title></title>
</head>
<body>
alert("El historial tiene "+window.history.length+" pgina(s),");
</script>
</body>
</html>
82
Para acceder a un imagen: w|ndow.document.|mages[0j o
w|ndow.document.|mages["m||magen"j
Para acceder a un formulario: w|ndow.document.forms[0j o
w|ndow.document.forms["m|formu|ar|o"j
Ntouos
close()
Cierra el flujo del documento. (Se ver ms adelante en este
manual un artculo sobre el flujo del documento)
open()
Abre el flujo del documento.
write()
Escribe dentro de la pgina web. Podemos escribir etiquetas HTML
y texto normal.
writeln()
Escribe igual que el mtodo write(), aunque coloca un salto de
lnea al final.
Los eventos de document sirven principalmente para controlar dos cosas. Un grupo
nos ofrece una serie de funciones para el control de los documentos, como escribir,
abrirlos y cerrarlos. Los veremos en el captulo siguiente que habla sobre el control
del flujo de escritura del documento. El otro grupo ofrece herramientas para el
control de los eventos en el documento y lo veremos ms adelante cuando tratemos
con detenimiento el tema de eventos.
E}ENPL0S BEL 0B}ET0 B0C0NENT
Despus de estudiar las propiedades del objeto document, vamos a ver algn
ejemplo para ilustrar el modo de acceso y utilizacin de las mismas.
Ejemplo con la piopieuau bgColoi
Vamos a utilizar el evento onclick para colocar tres botones en la pgina que al
pulsarlos nos cambie el color del fondo de la pgina.
function combioco/or{co/orin)
(
document.bqco/or = co/orin ,
}
</script>
<form>
<input type="8utton" vo/ue="kojo" onc/ick="combioco/or{'ff0000')">
<input type="8utton" vo/ue="verde" onc/ick="combioco/or{'00ff00')">
<input type="8utton" vo/ue="4tu/" onc/ick="combioco/or{'0000ff')">
</form>
83
Primero definimos una funcin que ser la encargada de cambiar el color y luego tres
botones que llamarn a la funcin cuando sean pulsados pasndole el color como
parmetro.
Ejemplo ue la piopieuau title
La propiedad title guarda la cadena que conforma el ttulo de nuestra pgina web. Si
accedemos a dicha propiedad obtendremos el ttulo y si la cambiamos, cambiar el
ttulo de la pgina web.
Nota: recordamos que el ttulo se puede ver en la barra de arriba del todo de la ventana del
navegador.
Vamos a mostrar e ttulo de la pgina en una caja de alerta.
o/ert {document.tit/e),
Ahora vamos a hacer una funcin que modifica el ttulo de la pgina , asignndole el
texto que le llegue por parmetro.
function combio1itu/o{texto)
(
document.tit/e = texto,
}
Como en el ejemplo anterior, vamos a crear varios botones que llamen a la Iuncion
pasandole distintos textos, que se colocaran en el titulo de la pagina.
<form>
<input type="8utton" vo/ue="1itu/o = no/o o todos" onc/ick="combio1itu/o{'no/o o todos')">
<input type="8utton" vo/ue="1itu/o = 8ienvenidos o mi pqino web"
onc/ick="combio1itu/o{'8ienvenidos o mi pqino web')">
<input type="8utton" vo/ue="1itu/o = Ms dios que /onqonitos" onc/ick="combio1itu/o{'Ms dios que
/onqonitos')">
</form>
0B}ET0 L0CATI0N
Uno de los objetos ms tiles es este objeto, que es una propiedad tanto de window
como de document. Representa el URL abierto en la ventana y, como ventaja
adicional, tambin analiza el URL en distintos segmentos.
hash: Si el URL tiene el signo #, devuelve el contenido que aparece detrs del
mismo (por ejemplo: http:||www.m|pag|na.com#secc|on1). Devuelve seccion1.
host: devuelve el nombre del servidor. (www.m|pag|na.com)
84
hostname: suele ser igual que host y en ocasiones elimina la parte www.
href: el URL completo de la pgina abierta.
pathname: todo lo que aparece por detrs del host en el URL
http:||www.m|pag|na.com||magenes||ndex.htm, devuelve /imgenes/index.htm.
port: el puerto de la solicitud si se especifica en el URL. De forma
predeterminada, la mayora de URL no incluye el puerto como parte del URL,
por lo que esta propiedad se deja en blanco. Si se utiliza un URL como
http:||www.m|pag|na.com:8080||ndex.htm, el puerto sera 8080.
protocol: el protocolo usado en el URL. Es todo lo que aparece por delante de
las dos barras inclinadas (//) en el URL.
La propiedad |ocat|on.href suele utilizarse para obtener o establecer el URL de la
ventana. Podemos desplazarnos hasta una nueva pgina con tan solo cambiar su
valor.
/ocotion.href="http://www.sofo.edu",
Al desplazarnos de esta forma, la nueva ubicacin se aade al historial por detrs de
la pgina anterior y, al pulsar sobre el botn Atrs, se accede a la pgina que ha
realizado la invocacin. Por medio del mtodo |ocat|on.ass|gn(} podemos realizar la
misma operacin.
Locotion.ossiqn{"http://www.sofo.edu"),
Si no deseamos que se pueda acceder desde el historial a la pgina que contiene la
secuencia de comandos, podemos utilizar el mtodo |ocat|on.rep|ace(}. Tiene el mismo
funcionamiento que |ocat|on.ass|gn(}, pero elimina del historial la pgina que contiene
la secuencia de comandos, hacindola inaccesible por medio de los botones Atrs y
Adelante.
Ejemplo con location.replace()
<html>
<head>
<title>Rescatar lo seleccionado</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
setTimeout("window.location.href='http://www.safa.edu'");
/*]]>*/
</script>
</body>
</html>
85
0B}ET0 NAvIuAT0R
Es uno de los primeros objetos implementados y apareci con Netscape Navigator
2.0 e Internet Explorer 3.0. Contiene gran cantidad de informacin sobre el
navegador WEB. Tambin es una propiedad del objeto window.
Como en otros casos, la falta de estndares se evidencia en el objeto navigator ya
que cada navegador decide que propiedades y mtodos admitir. En la siguiente tabla
se enumeran las propiedades y mtodos ms habituales, y tambin cual de los cuatro
navegadores ms utilizados (Internet Explorer, Mozilla, Opera y Safari) los admiten.
Propiedad/mtodo Descripcin IE Moz Op Saf
appName Cadena que representa el nombre oficial
del navegador
X X X
appMinorVersion Cadena que representa informacin
adicional sobre la versin
X - - -
appVersion Cadena que representa la versin del
navegador
X X X X
browserLanguaje Cadena que representa el idioma del
navegador o del sistema operativo
X - X -
cookieEnabled Valor booleano que indica si las coockies
estn activadas
X X X -
cpuClass Cadena que representa la clase de CPU X - -
javaEnabled Valor booleano que indica si Java est
habilitado
X X X X
onLine Valor booleano que indica si el navegador
est conectado a internet.
X - - -
platform Cadena que representa la plataforma
informtica en la que se ejecuta el
navegador.
X X X
userAgent Cadena de agente de usuario para
identificar el navegador en Internet.
X X X X
vendor Cadena que representa el nombre de - X - X
<html>
<head>
</head>
<body>
/*<![CDATA[*/
setTimeout("window.location.replace('http://www.safa.edu')");
/*]]>*/
</script>
</body>
</html>
86
marca del navegador
0B}ET0 SCREEN
Aunque la mayor parte de la informacin sobre el sistema del usuario se encuentra
oculta por motivos de seguridad, se puede conseguir determinados datos sobre el
monitor con ayuda del objeto screen.
El objeto suele contar con las siguientes propiedades, aunque muchos navegdores
aaden las suyas propias:
availHeight: la altula de la pantalla, en pixeles, que pueden utilizar las
ventanas. Se tiene en cuenta el espacio necesario para elementos del sistema
operativo como la barra de tareas de windows.
availWidth: la ancura de la pantalla, en pixeles, disponible para utilizar con las
ventanas.
<html>
<head>
/*<![CDATA[*/
function datos()
{
var nombre=window.navigator.appName;
var version=window.navigator.appVersion;
var cpu=window.navigator.cpuClass
var mensaje="Nombre del navegador: "+nombre+"\nVersin:
"+version+"\nCPU: "+cpu;
alert(mensaje);
}
/*]]>*/
</script>
</head>
<body>
/*<![CDATA[*/
datos();
/*]]>*/
</script>
</body>
</html>
87
colorDepth: el nmero de bits utilizado para representar colores. En la
mayora de los sistemas suele ser 32.
height: la altura de la pantalla en pixeles.
width: la anchura de la pantalla en pixeles.
<html>
<head>
/*<![CDATA[*/
function datos()
{
var alturapantalla=window.screen.availHeight;
var anchurapantalla=window.screen.availWidth;
var color=window.screen.colorDepth;
var altura=window.screen.height;
var anchura=window.screen.width;
var mensaje="Altura ventana: "+alturapantalla+"\nAnchura ventana:
"+anchurapantalla+"\nColor: "+color+"\nAltura pantalla: "+altura+"\nAnchra pantalla:
"+anchura;
alert(mensaje);
}
/*]]>*/
</script>
</head>
<body>
/*<![CDATA[*/
datos();
/*]]>*/
</script>
</body>
</html>
88
Formularios
TRABA}0 C0N F0RN0LARI0S
Para continuar vamos a ver una serie de captulos enfocados a aprender a trabajar
con los formularios, acceder a sus elementos para controlar sus valores y
actualizarlos.
El objeto form depende en la jerarqua de objetos del objeto document. En un objeto
form podemos encontrar algunos mtodos y propiedades, pero lo ms destacado que
podremos encontrar son cada uno de los elementos del formulario. Es decir, de un
formulario dependen todos los elementos que hay dentro, como pueden ser campos
de texto, cajas de seleccin, reas de texto, botones de radio, etc.
Para acceder a un formulario desde el objeto document podemos hacerlo de dos
formas.
1. A partir de su nombre, asignado con el atributo NAME de HTML.
2. Mediante la matriz de formularios del objeto document, con el ndice del
formulario al que queremos acceder.
Para este formulario
<form nome="f1">
<input type=text nome=compo1>
<input type=text nome=compo2>
</form>
Podremos acceder con su nombre de esta manera.
document.f1
O con su ndice o nombre, si suponemos que es el primero de la pgina.
document.forms[f1]
document.forms[0]
De similar manera accedemos a los elementos de un formulario, que dependen del
objeto form.
1. A partir del nombre del objeto asignado con el atributo NAME de HTML.
2. Mediante la matriz de elementos del objeto form, con el ndice del elemento al
que queremos acceder.
Podramos acceder al campo 1 del anterior formulario de dos maneras. Con su
nombre lo haramos as.
89
document.f1.compo1
o a partir del array de elementos.
document.f1.e/ements[0] (utilizamos el ndice 0 porque es el primer elemento y en
Javascript los arrays empiezan por 0.)
Si deseamos acceder al segundo campo del formulario escribiramos una de estas dos
cosas:
document.f1.compo2
document.f1.e/ements[1]
recordamos que tambin podemos acceder a un fomulario por el array de forms,
indicando el ndice del formulario al que acceder. De este modo, el acceso al campo2
sera el siguiente:
document.forms[0].compo2
document.forms[0].e/ements[1]
En estos casos hemos supuesto que este formulario es el primero que hay escrito en
el cdigo HTML, por eso accedemos a l con el ndice 0.
Esperamos que haya quedado claro el acceso a formularios y sus campos. Pasaremos
entonces, sin ms, a un ejemplo para practicar todo esto.
CALC0LAB0RA SENCILLA
Para ilustrar un poco el trabajo con formularios, vamos a realizar un ejemplo
prctico. Puede que algunas cosas que vamos a tratar queden un poco en el aire
porque no se hayan explicado con detenimiento antes, pero seguro que nos sirve
para enterarnos de cmo se trabaja con formularios y las posibilidadedes que
tenemos.
En este ejemplo vamos a construir una calculadora, aunque bastante sencilla, que
permita realizar las operaciones bsicas. Para hacer la calculadora vamos a realizar
un formulario en el que vamos a colocar tres campos de texto, los dos primeros para
los operandos y un tercero para el resultado. Adems habrn unos botones para
hacer las operaciones bsicas.
El formulario de la calculadora se puede ver aqu.
<form nome="co/c">
<input type="1ext" nome="operondo1" vo/ue="0" site="12">
<br>
<input type="1ext" nome="operondo2" vo/ue="0" site="12">
<br>
<input type="8utton" nome="" vo/ue=" + " onc/ick="co/cu/o{'+')">
<input type="8utton" nome="" vo/ue=" - " onc/ick="co/cu/o{'-')">
<input type="8utton" nome="" vo/ue=" x " onc/ick="co/cu/o{'*')">
90
<input type="8utton" nome="" vo/ue=" / " onc/ick="co/cu/o{'/')">
<br>
<input type="1ext" nome="resu/todo" vo/ue="0" site="12">
</form>
Mediante una funcin vamos a acceder a los campos del formulario para recoger los
operandos en dos variables. Los campos de texto tienen una propiedad llamada value
que es donde podemos obtener lo que tienen escrito en ese momento. Mas tarde nos
ayudaremos de la funcin eval() para realizar la operacin. Pondremos por ltimo el
resultado en el campo de texto creado en tercer lugar, utilizando tambin la
propiedad value del campo de texto.
A la funcin que realiza el clculo (que podemos ver a continuacin) la llamamos
apretando los botones de cada una de las operaciones. Dichos botones se pueden ver
en el formulario y contienen un atributo onclick que sirve para especificar las
sentencias Javascript que deseamos que se ejecuten cuando el usuario pulse sobre
l. En este caso, la sentencia a ejecutar es una llamada a la funcin calcula()
pasando como parmetro el smbolo u operador de la operacin que deseamos
realizar.
El script con la funcin calcula()
function co/cu/o{operocion)
(
vor operondo1 = document.co/c.operondo1.vo/ue,
vor operondo2 = document.co/c.operondo2.vo/ue,
vor resu/t = evo/{operondo1 + operocion + operondo2),
document.co/c.resu/todo.vo/ue = resu/t
}
</script>
La funcin eval() recibe un string y lo ejecutaba como una sentencia Javascript. En
este caso va a recibir un nmero que concatenado a una operacin y otro nmero
ser siempre una expresin aritmtica que eval() solucionar perfectamente.
El acceso a otros elementos de los formularios se hace de manera parecida en cuanto
respecta a la jerarqua de objetos, aunque como cada elemento tiene sus
particularidades las cosas que podremos hacer con ellos diferirn un poco. Lo
veremos un poco ms adelante.
91
0B}ET0 F0RN
Propiedades
Tiene unas cuantas propiedades para ajustar sus atributos mediante Javascript.
action
Es la accin que queremos realizar cuando se envia un formulario.
Se coloca generalmente una direccin de correo o la URL a la que le
mandaremos los datos. Corresponde con el atributo ACTION del
formulario.
elements
La matriz de elementos contiene cada uno de los campos del
formulario.
length
El nmero de campos del formulario.
method
El mtodo por el que mandamos la informacin. Corresponde con el
atributo METHOD del formulario.
name
El nombre del formulario, que corresponde con el atributo NAME del
formulario.
target
La ventana o frame en la que est dirigido el formulario. Cuando se
submita se actualizar la ventana o frame indicado. Corresponde
con el atributo target del formulario.
Ejemplos
Con estas propiedades podemos cambiar dinmicamente con Javascript los valores
de los atributos del formulario para hacer con l lo que se desee dependiendo de las
exigencias del momento.
Por ejemplo podramos cambiar la URL que recibira la informacin del formulario con
la instruccin.
document.milormu/orio.oction = "miPqino.osp"
O cambiar el target para submitir un formulario en una posible ventana secundaria
llamada mi_ventana.
document.milormu/orio.torqet = "mi_ventono"
Ntouos
Estos son los mtodos que podemos invocar con un formulario.
submit()
Para hacer que el formulario se submita, aunque no se haya
pulsado el botn de submit.
reset()
Para reinicializar todos los campos del formulario, como si se
hubiese pulsado el botn de reset. (Javascript 1.1)
92
Ejemplos
Vamos a ver un ejemplo muy sencillo sobre cmo validar un formulario para
submitirlo en caso de que est relleno. Para ello vamos a utilizar el mtodo submit()
del formulario.
El mecanismo es el siguiente: en vez de colocar un botn de submit colocamos un
botn normal (<INPUT type="button">) y hacemos que al pulsar ese botn se llame
a una funcin que es la encargada de validar el formulario y, en caso de que est
correcto, submitirlo.
El formulario quedara as.
<form nome="milormu/orio" oction="moi/to:promocionQquiorte.com" enctype="text/p/oin">
<input type="1ext" nome="compo1" vo/ue="" site="12">
<input type="button" vo/ue="nvior" onc/ick="vo/ido5ubmite{)">
</form>
Nos fijamos en que no hay botn de submit, sino un botn normal con una llamada a
una funcin que podemos ver a continuacin.
function vo/ido5ubmite{)
(
if {document.milormu/orio.compo1.vo/ue == "")
o/ert{"uebe re//enor e/ formu/orio"),
e/se
document.milormu/orio.submit{),
}
En la funcin se comprueba si lo que hay escrito en el formulario es un string vaco.
Si es as se muestra un mensaje de alerta que informa que se debe rellenar el
formulario. En caso de haya algo en el campo de texto submite el formulario
utilizando el mtodo submit del objeto form.
C0NTR0L BE CANP0S BE TEXT0
Vamos a ver ahora los campos donde podemos guardar cadenas de texto, es decir,
los campos de texto, password y hidden. Hay otro campo relacionado con la escritura
de texto, el campo TextArea, que veremos ms adelante.
Campo Text
Es el campo que resulta de escribir la etiqueta <INPUT type="text">. Lo hemos
utilizado hasta el momento en varios ejemplos, pero vamos a parar un momento en
l para describir sus propuedades y mtodos.
93
Propiedades
Vemos la lista de propiedades de estos tipos de campo.
defaultValue
Es el valor por defecto que tiene un campo. Lo que contiene el
atributo VALUE de la etiqueta <INPUT>.
form
Hace referencia al formulario.
name
Contiene el nombre de este campo de formulario
type
Contiene el tipo de campo de formulario que es.
value
El texto que hay escrito en el campo.
Vamos a ver un ejemplo sobre lo que puede hacer la propiedad defaultValue. En este
ejemplo tenemos un formulario y un botn de reset. Si pulsamos el botn de reset el
campo de texto se vaca porque su value de HTML era un string vaco. Pero si
pulsamos el botn siguiente llamamos a una funcin que cambia el valor por defecto
de ese campo de texto, de modo que al pulsar el botn de reset mostrar el nuevo
valor por defecto.
Este es el cdigo de la pgina completa.
Mtodos
Se pueden invocar los siguientes mtodos sobre los objetos tipo Text.
blur()
Retira el foco de la aplicacin del campo de texto.
focus()
Pone el foco de la aplicacin en el campo de texto.
select()
Selecciona el texto del campo.
<html>
<head>
<title>Cambiar el valor por defecto</title>
function cambiaDefecto()
{
document.miFormulario.campo1.defaultValue = "Hola!!";
}
</script>
</head>
<body>
<form name="miFormulario" action="mailto:promocion@guiarte.com"
enctype="text/plain">
<input type="Text" name="campo1" value="" size="12">
<input type="Reset">
<br>
<br>
<input type="button" value="Cambia valor por defecto"
onclick="cambiaDefecto()">
</form>
</body>
</html>
94
Como ejemplo vamos a mostrar una funcin que selecciona el texto de un campo de
texto de un formulario como el de la pgina del ejemplo anterior. Para hacerlo hemos
utilizado dos mtodos, el primero para pasar el foco de la aplicacin al campo de
texto y el segundo para seleccionar el texto.
function se/eccionoloco{)
(
document.milormu/orio.compo1.focus{),
document.milormu/orio.compo1.se/ect{),
}
Campo Passwoiu
Estos Iuncionan igual que los hidden, con la peculiaridad que el contenido del campo no
puede verse escrito en el campo, por lo que salen asteriscos en lugar del texto.
Campo Biuuen
Los campos hidden son como campos de texto que estn ocultos para el usuario, es
decir, que no se ven en la pgina. Son muy tiles en el desarrollo de webs para pasar
variables en los formularios a las que no debe tener acceso el usuario.
Se colocan en con HTML con la etiqueta <INPUT type=hidden> y se rellenan de datos
con su atributo value. Mas tarde podremos cambiar el dato que figura en el campo
accediendo a la propiedad value del campo de texto igual que lo hemos hecho antes.
document.milormu/orio.componidden.vo/ue = "nuevo texto",
El campo hidden slo tiene algunas de las propiedades de los campos de texto. En
concreto tiene la propiedad value y las propiedades que son comunes de todos los
campos de formulario: name, from y type, que ya se describieron para los campos de
texto.
C0NTR0L BE CBECKB0X
Los checkbox son las unas cajas que permiten marcarlas o no para verificar alguna
cosa en un formulario. Podemos ver una caja checkbok a continuacin.
Los checkbox se consiguen con la etiqueta <INPUT type=checkbox>. Con el atributo
NAME de la etiqueta <INPUT> le podemos dar un nombre para luego acceder a ella
con javascript. Con el atributo CHECKED indicamos que el campo debe aparecer
chequeado por defecto.
Con Javascript, a partir de la jerarqua de objetos del navegador, tenemos acceso al
checkbox, que depende del objeto form del formulario donde est incluido.
95
Piopieuaues
Las propiedades que tiene un checkbox son las siguientes.
checked
Informa sobre el estado del checkbox. Puede ser true o false.
defaultChecked
Si est chequeada por defecto o no.
value
El valor actual del checkbox.
Tambien tiene las propiedades Iorm, name, type como cualquier otro elemento de
Iormulario.
Ntouos
Veamos la lista de los mtodos de un checkbox.
click()
Es como si hicisemos un click sobre el checkbox, es decir, cambia
el estado del checkbox.
blur()
Retira el foco de la aplicacin del checkbox.
focus()
Coloca el foco de la aplicacin en el checkbox.
Para ilustrar el funcionamiento de las checkbox vamos a ver una pgina que tiene un
checkbox y tres botones. Los dos primeros para mostrar las propiedades checked y
value y el tercero para invocar a su mtodo click() con objetivo de simular un click
sobre el checkbox.
96
C0NTR0L BE B0T0NES BE RABI0
El botn de radio (o radio button en ingls) es un elemento de formulario que
permite seleccionar una opcin y slo una, sobre un conjunto de posibilidades. Se
puede ver a continuacin.
Nota: En la parte de arriba podemos ver tres radio buttons en lugar de uno solo. Se
colocan tres botones porque as podemos examinar su funcionamiento al formar
parte de un grupo. Veamos que al seleccionar una opcin se deselecciona la opcin
que estuviera marcada antes.
Se consiguen con la etiqueta <INPUT type=radio>. Con el atributo NAME de la
etiqueta <INPUT> les damos un nombre para agrupar los radio button y que slo se
<html>
<head>
<title>Ejemplo Checkbox</title>
function alertaChecked()
{
alert(document.miFormulario.miCheck.checked);
}
function alertaValue()
{
alert(document.miFormulario.miCheck.value);
}
function metodoClick()
{
document.miFormulario.miCheck.click()
}
</script>
</head>
<body>
<form name="miFormulario" action="mailto:promocion@guiarte.com"
enctype="text/plain">
<input type="checkbox" name="miCheck">
<br>
<input type="button" value="informa de su propiedad checked"
onclick="alertaChecked()">
<input type="button" value="informa de su propiedad value"
onclick="alertaValue()">
<br>
<input type="button" value="Simula un click" onclick="metodoClick()">
</form>
</body>
</html>
97
pueda elegir una opcin entre varias. Con el atributo value indicamos el valor de
cada uno de los radio buttons. El atributo checked nos sirve para indicar cul de los
radio butons tiene que estar seleccionado por defecto.
Cuando en una pgina tenemos un conjunto de botones de radio se crea un objeto
radio por cada uno de los botones. Los objetos radio dependen del formulario y se
puede acceder a ellos por el array de elements, sin embargo tambin se crea un
array con los botones de radio. Este array depende del formulario y tiene el mismo
nombre que los botones de radio.
Piopieuaues
Veamos una lista de las propiedades de este elemento.
checked
Indica si est chekeado o no un botn de radio.
defaultChecked
Su estado por defecto.
value
El valor del campo de radio, asignado por la propiedad value del
radio.
Length
El nmero de botones de radio que forman parte en el grupo.
Accesible en el vector de radios.
Ntouos
Son los mismos que los que tena el objeto checkbox.
Ejemplos
Veamos con un ejemplo el mtodo de trabajo con los radio buttons en el que vamos
a colocar un montn de ellos y cada uno tendr asociado un color. Tambin habr un
botn y al pulsarlo cambiaremos el color de fondo de la pantalla al color que est
seleccionado en el conjunto de botones de radio.
98
Primero podemos fijarnos en el formulario y en la lista de botones de radio. Todos se
llaman "colorin", as que estn asociados en un mismo grupo. Adems vemos que el
atributo value de cada botn cambia. Tambin vemos un botn abajo del todo.
Con esta estructura de formulario tendremos un array de elements de 9 elementos,
los 8 botones de radio y el botn de abajo.
Adems tendremos un array de botones de radio que se llamar colorn y depende
del formulario, accesible de esta manera.
document.form.co/orin
Este array tiene en cada posicin uno de los botones de radio. As en la posicin 0
<html>
<head>
<title>Ejemplo Radio Button</title>
function cambiaColor()
{
var i
for (i=0;i<document.fcolores.colorin.length;i++)
{
if (document.fcolores.colorin[i].checked)
break;
}
document.bgColor = document.fcolores.colorin[i].value
}
</script>
</head>
<body>
<form name=fcolores>
<input type="Radio" name="colorin" value="ffffff" checked> Blanco
<br>
<input type="Radio" name="colorin" value="ff0000"> Rojo
<br>
<input type="Radio" name="colorin" value="00ff00"> Verde
<br>
<input type="Radio" name="colorin" value="0000ff"> Azul
<br>
<input type="Radio" name="colorin" value="ffff00"> Amarillo
<br>
<input type="Radio" name="colorin" value="00ff00"> Turquesa
<br>
<input type="Radio" name="colorin" value="ff00ff"> Morado
<br>
<input type="Radio" name="colorin" value="000000"> Negro
<br>
<br>
<input type="Button" name="" value="Cambia Color" onclick="cambiaColor()">
</form>
</body>
</html>
99
est el botn del color blanco, en la posicin 1 el del color rojo... Para acceder a esos
botones de radio lo hacemos con su ndice.
document.fco/ores.co/orin[0]
Si queremos acceder por ejemplo a la propiedad value del ltimo botn de radio
escribimos lo siguiente.
document.fco/ores.co/orin[7].vo/ue
La propiedad length del array de radios nos indica el nmero de botones de radio que
forman parte del grupo.
document.fco/ores.co/orin./enqth
En este caso la propiedad length valdr 8.
Con estas notas podremos entender ms o menos bien la funcin que se encarga de
encontrar el radio button seleccionado y cambiar el color de fondo de la pgina.
Se define una variable en la que introduciremos el ndice del radio button que
tenemos seleccionado. Para ello vamos recorriendo el array de botones de radio
hasta que encontramos el que tiene su propiedad checked a true. En ese momento
salimos del bucle, con lo que la variable i almacena el ndice del botn de radio
seleccionado. En la ltima lnea cambiamos el color de fondo a lo que hay en el
atributo value del radio button seleccionado.
C0NTR0L BE CANP0S SELECT
El objeto select de un formulario es una de esas listas desplegables que nos permiten
seleccionar un elemento. Se despliegan apretando sobre una flecha, a continuacin
se puede escoger un elemento y para acabar se vuelven a plegar. Se puede ver un
elemento select de un formulario a continuacin.
Uno de estos elementos se puede obtener utilizando la etiqueta <SELECT> dentro de
un formulario. A la etiqueta le podemos aadir un atributo para darle el nombre,
NAME, para luego acceder a ese campo mediante Javascript. Para expresar cada una
de las posibles opciones del campo select utilizamos una etiqueta <OPTION> a la que
le introducimos un atributo VALUE para expresar su valor. El texto que colocamos
despus de la etiqueta <OPTION> sirve como etiqueta de esa opcin, es el texto que
ve el usuario asociado a esa opcin.
Piopieuaues
Vamos a ver una lista de las propiedades de este elemento de formulario.
length
Guarda la cantidad de opciones del campo select. Cantidad de
etiquetas <OPTION>
option
Hace referencia a cada una de sus opciones. Son por si mismas
objetos.
options
Un array con cada una de las opciones del select.
100
selectedIndex
Es el ndice de la opcin que se encuentra seleccionada.
Aparte de las conocidas propiedades comunes a todos los elementos de formulario:
form y name y type.
Ntouos
Los mtodos son solamente 2 y ya conocemos su significado.
blur()
Para retirar el foco de la aplicacin de ese elemento de formulario.
focus()
Para poner el foco de la aplicacin.
0bjeto option
Tenemos que pararnos a ver tambin este objeto para entender bien el campo select.
Recordamos que las option son las distintas opciones que tiene un select, expresadas
con la etiqueta <OPTION>.
Propiedades
Estos objetos slo tienen propiedades, no tienen mtodos. Vamos a verlas.
defaultSelected
Indica con un true o un false si esa opcin es la opcin por
defecto. La opcin por defecto se consigue con HTML
colocando el atributo selected a un option.
index
El ndice de esa opcin dentro del select.
selected
Indica si esa opcin se encuentra seleccionada o no.
text
Es el texto de la opcin. Lo que puede ver el usuario en el
select, que se escribe despus de la etiqueta <OPTION>.
value
Indica el valor de la opcin, que se introduce con el atributo
VALUE de la etiqueta <OPTION>.
Ejemplo
Vamos a ver un ejemplo sobre cmo se accede a un select con Javascript, como
podemos acceder a sus distintas propiedades y a la opcin seleccionada.
Vamos a empezar viendo el formulario que tiene el select con el que vamos a
trabajar. Es un select que sirve para valorar el web que estamos visitando.
<form nome="formu/">
vo/orocin sobre este web:
<se/ect nome="mi5e/ect">
<option vo/ue="10">Muy bien
<option vo/ue="5" se/ected>kequ/or
<option vo/ue="0">Muy mo/
</se/ect>
<br>
101
<br>
<input type=button vo/ue="uime propiedodes" onc/ick="dimePropiedodes{)">
</form>
Ahora vamos a ver una funcin que recoge las propiedades ms significativas del
campo select y las presenta en una caja alert.
function dimePropiedodes{)
(
vor texto,
texto = "/ numero de opciones de/ se/ect: " + document.formu/.mi5e/ect./enqth,
vor indice = document.formu/.mi5e/ect.se/ectedlndex,
texto += "\nlndice de /o opcion escoqido: " + indice,
vor vo/or = document.formu/.mi5e/ect.options[indice].vo/ue,
texto += "\nvo/or de /o opcion escoqido: " + vo/or,
vor textoscoqido = document.formu/.mi5e/ect.options[indice].text,
texto += "\n1exto de /o opcion escoqido: " + textoscoqido,
o/ert{texto)
}
Esta funcin crea una variable de texto donde va introduciendo cada una de las
propiedades del select. La primera contiene el valor de la propiedad length del select,
la segunda el ndice de la opcin seleccionada y las dos siguientes contienen el valor
y el texto de la opcin seleccionada. Para acceder a la opcin seleccionada utilizamos
el array options con el ndice recogido en las segunda variable.
Propiedad value de un objeto select
Para acceder al valor seleccionado de un campo select podemos utilizar la propiedad
value del campo select en lugar de acceder a partir del vector de options.
Para el anterior formulario sera algo parecido a esto.
formu/.mi5e/ect.vo/ue
Sin embargo, esta propiedad slo est presente en navegadores Internet Explorer,
por lo que es recomendable acceder utilizando el vector de options con el ndice de la
posicin seleccionada si deseamos que la pgina sea compatible con todos los
navegadores. Hemos querido aadir este punto para que, si alguna vez utilizamos o
vemos utilizar este mtodo de acceso, sepamos su pega y porque es mejor utilizar el
vector de options.
C0NTR0L BE TEXTAREA
Para acabar de describir todos los elementos de formularios vamos a ver el objeto
textarea que es un elemento que presenta un lugar para escribir texto, igual que los
campos text, pero con la particularidad que podemos escribir varias lneas a la vez.
102
El campo textarea se puede ver a continuacin.
En los Textarea
Podemos colocar el texto
en varias lneas
Un campo textarea se consigue con la etiqueta <TEXTAREA>. Con el atributo name
le podemos dar un nombre para acceder al campo textarea mediante Javascript.
Otros atributos interesantes son cols y rows que sirven para indicar la anchura y
altura del campo textarea en caracteres, cols indica el nmero de columnas y rows el
de filas. aunque no se puede acceder a ellos con Javascript. El valor por defecto de
un campo textarea se coloca entre las etiquteta <TEXTAREA> y su correspondiente
cierre.
Piopieuaues
Se puede ver una lista de las propiedades disponibles en un textarea a continuacin,
que son los mismos que un campo de texto.
defaultValue
Que contiene el valor por defecto del textarea.
value
Que contiene el texto que hay escrito en el textarea.
Adems tiene las conocidas propiedades de elementos de formulario form, name y
type.
Ntouos
Veamos una lista de los mtodos, que son los mismos que en un campo de texto.
blur()
Para quitar el foco de la aplicacin del textarea.
focus()
Para poner el foco de la aplicacin en el textarea.
select()
Selecciona el texto del textarea.
Vamos a ver un ejemplo a continuacin que presenta un formulario que tiene un
textarea y un botn. Al apretar el botn se cuenta el nmero de caracteres y se
coloca en un campo de texto.
Para acceder al nmero de caracteres lo hacemos a partir del la propiedad value del
objeto textarea. Como value contiene un string podemos acceder a la propiedad
length que tienen todos los strings para averiguar su longitud.
El cdigo de la pgina se puede ver aqu.
103
<html>
<head>
<title>Ejemplo textarea</title>
function cuenta(){
numCaracteres = document.formul.textito.value.length
document.formul.numCaracteres.value = numCaracteres
}
</script>
</head>
<body>
<form name="formul">
<textarea name=textito cols=40 rows=3>
Este es el texto por defecto
</textarea>
<br>
<br>
Nmero de caracteres <input type="Text" name="numCaracteres"
size="4">
<br>
<br>
<input type=button value="Cuenta caracteres" onclick="cuenta()">
</form>
</body>
</html>
104
Eventos
INTR0B0CCI0N
Los eventos son la manera que tenemos en Javascript de controlar las acciones de
los visitantes y definir un comportamiento de la pgina cuando se produzcan. Cuando
un usuario visita una pgina web e interacta con ella se producen los eventos y con
Javascript podemos definir qu queremos que ocurra cuando se produzcan.
Con javascript podemos definir qu es lo que pasa cuando se produce un evento
como podra ser que un usuario pulse sobre un botn, edite un campo de texto o
abandone la pgina. El manejo de eventos es el caballo de batalla para hacer pginas
interactivas, porque con ellos podemos responder a las acciones de los usuarios.
Hasta ahora en este manual hemos podido ver muchos ejemplos de manejo de uno
de los eventos de Javascript, el evento onclick, que se produce al pulsar un elemento
de la pgina. Hasta ahora siempre hemos aplicado el evento a un botn, pero
podramos aplicarlo a otros elementos de la pgina.
Como se uefine un evento
Para definir las acciones que queremos realizar al producirse un evento utilizamos los
manejadores de eventos. Existen muchos tipos de manejadores de eventos, para
muchos tipos de acciones del usuario. El maneador de eventos se coloca en la
etiqueta HTML del elemento de la pgina que queremos que responda a las acciones
del usuario.
Por ejemplo tenemos el manejador de eventos onclick, que sirve para describir
acciones que queremos que se ejecuten cuando se hace un click. Si queremos que al
hacer click sobre un botn pase alguna cosa, escribimos el manejador onclick en la
etiqueta <INPUT type=button> de ese botn. Algo parecido a esto.
<input type=button vo/ue="pu/some" onc/ick="sentencios_jovoscript...">
Se coloca un atributo nuevo en la etiqueta que tiene el mismo nombre que el evento,
en este caso onclick. El atributo se iguala a las sentencias Javascript que queremos
que se ejecuten al producirse el evento.
Cada elemento de la pgina tiene su propia lista de eventos soportados, vamos a ver
otro ejemplo de manejo de eventos, esta vez sobre un men desplegable, en el que
definimos un comportamiento cuando cambiamos el valor seleccionado.
<se/ect onchonqe="window.o/ert{'combioste /o se/eccin')">
<option vo/ue="opcion1">Opcion 1
<option vo/ue="opcion2">Opcion 2
105
</se/ect1>
Dentro de los manejadores de eventos podemos colocar tantas instrucciones como
deseemos, pero siempre separadas por punto y coma. Lo habitual es colocar una sola
instruccin, y si se desean colocar ms de una se suele crear una funcin con todas
las instrucciones y dentro del manejador se coloca una sola instruccin que es la
llamada a la funcin.
Vamos a ver cmo se colocaran en un manejador varias instrucciones.
<input type=button vo/ue=Pu/some onc/ick="x=l0, window.o/ert{x), window.document.bqco/or =
'red'">
Son instrucciones muy simples como asignar a x el valor 30, hacer una ventana de
alerta con el valor de x y cambiar el color del fondo a rojo.
Sin embargo, tantas instrucciones puestas en un manejador quedan un poco
confusas, habra sido mejor crear una funcin as.
function ejecutoventoOnc/ick{)
(
x = l0
window.o/ert{x)
window.document.bqco/or = 'red'
}
</script>
<form>
<input type=button vo/ue=Pu/some onc/ick="ejecutoventoOnc/ick{)">
</form>
Ahora utilizamos ms texto para hacer lo mismo, pero seguro que a la mayora les
parece ms claro este segundo ejemplo.
TIP0S BE EvENT0S
Ahora vamos a ver una lista de los manejadores de eventos que hay disponibles en
Javascript, ofreciendo una pequea descripcin de cada uno.
Nota: Estos manejadores de eventos son los ms comunes, presentes en Javascript
1.2 de Netscape Navigator. Existen otros manejadores que tambin son muy
interesantes y veremos ms adelante en captulos de temas avanzados de eventos.
La lista de manejadores de eventos contiene el nombre del manejador en negrita, su
descripcin y finalmente la versin de Javascript que incorpor dicho manejador.
onblur Se desata un evento onblur cuando un elemento pierde el foco de
la aplicacin. El foco de la aplicacin es el lugar donde est
situado el cursor, por ejemplo puede estar situado sobre un
campo de texto, una pgina, un botn o cualquier otro elemento.
onchange Se desata este evento cuando cambia el estado de un elemento
de formulario, como por ejemplo, cuando se cambia el valor de un
106
cuadro de texto, cuando se elige un elemento de un select. En
ocasiones no se produce hasta que el usuario retira el foco de la
aplicacin del elemento.
onclick Se produce cuando se da una pulsacin o clic al botn del ratn
sobre un elemento de la pgina, generalmente un botn o un
enlace. El click no termina hasta que no se suelte el botn del
ratn.
onfocus El evento onfocus es lo contrario de onblur. Se produce cuando un
elemento de la pgina o la ventana ganan el foco de la aplicacin.
onkeydown Este evento se produce en el instante que un usuario presiona
una tecla, independientemente que la suelte o no. Se produce en
el momento de la pulsacin.
onkeypress Ocurre un evento onkeypress cuando el usuario deja pulsada una
tecla un tiempo determinado y la suelta. Antes de este evento se
produce un onkeydown en el momento que se pulsa la tecla. El
navegador no puede detectar la tecla que se ha pulsado.
onkeyup Se produce cuando el usuario deja de apretar una tecla. Se
produce en el momento que se libera la tecla.
onload Este evento se desata cuando la pgina o alguna imagen ha
terminado de cargarse.
onmousedown Se produce el evento onmousedown cuando el usuario pulsa sobre
un elemento de la pgina. onmousedown se produce en el
momento de pulsar el botn, se suelte o no.
onmousemove Se produce cuando el ratn se mueve por un determinado
elemento de la pgina.
onmouseout Se desata un evento onmuoseout cuando el puntero del ratn sale
del rea ocupada por un elemento de la pgina.
onmouseover Este evento se desata cuando el puntero del ratn entra en el
rea ocupada por un elemento de la pgina.
onmouseup Este evento se produce en el momento que el usuario suelta el
botn del ratn, que previamente haba pulsado.
onmove Evento que se ejecuta cuando se mueve la ventana del
navegador, o un frame.
onresize Evento que se produce cuando se redimensiona la ventana del
navegador, o el frame, en caso de que la pgina los tenga.
onreset Este evento est asociado a los formularios y se desata en el
momento que un usuario hace clic en el botn de reset de un
formulario.
onscroll Se genera cuando el visitante desplaza la pgina hacia arriba o
hacia abajo.
onselect Se ejecuta cuando un usuario realiza una seleccin de texto
dentro de un cuadro de texto.
onsubmit Ocurre cuando el visitante apreta sobre el botn de enviar el
formulario. Se ejecuta antes del envo propiamente dicho.
onunload Al abandonar una pgina, ya sea porque se pulse sobre un enlace
que nos lleve a otra pgina o porque se cierre la ventana del
navegador, se ejecuta el evento onunload.
107
E}ENPL0 BEL EvENT0 0NBL0R
Onblur se activa cuando el usuario retira el foco de la aplicacin de un elemento de la
pgina. El foco de la aplicacin es el lugar donde est el cursor.
Si por ejemplo, estamos situados en un campo de texto y nos vamos de dicho
campo, ya sea porque pulsamos con el ratn en otro campo del formulario o en un
rea vaca, ya sea porque el usuario a apretado el botn tabulador (Tab) que mueve
el foco hasta el siguiente elemento de la pgina.
Si yo deseo que, al situarse fuera de un campo de texto, se compruebe que el valor
introducido es correcto puedo utilizar onblur y llamar a una funcin que compruebe si
el dato es correcto. Si no es correcto puedo obligar al foco de la aplicacin a situarse
nuevamente sobre el campo de texto y avisar al usuario para que cambie dicho valor.
Puede ser una manera interesante de asegurarnos que en un campo de texto se
encuentra un valor vlido. Aunque tiene alguna pega, como veremos ms adelante.
Vamos a empezar por un caso sencillo, en el que solamente deseamos comprobar un
campo de texto para asegurarnos que es un nmero entero.
108
Al salirse del campo de texto (onblur) se ejecuta compruebaValidoEntero(), que
utiliza la funcin validarEntero, explicada en un taller de Javascript. Si el valor
devuelto por la funcin no es el de un entero, en este caso se recibira una cadena
vaca, muestra un mensaje en una caja alert, selecciona el texto escrito en la caja y
<html>
<head>
<title>Evento onblur</title>
function validarEntero(valor)
{
//intento convertir a entero.
//si era un entero no le afecta, si no lo era lo intenta convertir
valor = parsent(valor)
//Compruebo si es un valor numrico
if (isNaN(valor))
{
//entonces (no es numero) devuelvo el valor cadena vacia
return ""
}
else
{
//En caso contrario (Si era un nmero) devuelvo el valor
return valor
}
}
function compruebaValidoEntero()
{
enteroValidado = validarEntero(document.f1.numero.value)
if (enteroValidado == "")
{
//si era la cadena vaca es que no era vlido. Lo aviso
alert ("Debe escribir un entero!")
//selecciono el texto
document.f1.numero.select()
//coloco otra vez el foco
document.f1.numero.focus()
}
else
document.f1.numero.value = enteroValidado
}
</script>
</head>
<body>
<form name=f1>
Escriba un nmero entero: <input type=text name=numero size=8 value=""
onblur="compruebaValidoEntero()">
</form>
</body>
</html>
109
coloca el foco de la aplicacin en la caja de texto, para que el usuario coloque otro
valor.
Hasta que el visitante no escriba un nmero entero en el campo de texto el foco de la
aplicacin permanecer en el campo y continuar recibiendo mensajes de error.
110
E}ENPL0 vALIBACI0N BE 0N
F0RN0LARI0
El script inspecciona todos los campos de un formulario para determinar si todos han
sido rellenados, sino es as nos indica los campos que faltan por rellenar.
<html>
<head>
<title>XLWebmasters.com</title>
<script language="javascript">
function form_Validator(form)
{
if (form.first_name.value == "")
{
alert("Por favor, escribe tu nombre.");
form.first_name.focus();
return (false);
}
if (form.last_name.value == "")
{
alert("Por favor, escribe tu apellido.");
form.last_name.focus();
return (false);
}
return (true);
}
//-->
</script>
</head>
<body>
<form name="form" method="post" action="test.html" onSubmit="return
form_Validator(this)">
<div align="left">
Nombre
<input name="first_name" type="text" id="first_name">
Apellido
<input name="last_name" type="text" id="last_name">
<input type="submit" name="Submit" value="Submit">
</div>
</form>
</body>
</html>
111
E}ENPL0 EvENT0 0N0NL0AB
Veamos un ejemplo del evento onunload, que, recordamos, se activa cuando el
usuario ha abandona la pgina web. Por tanto, onunload sirve para ejecutar una
accin cuando el usuario se marcha de la pgina, ya sea porque pulsa un enlace que
le lleva fuera de la pgina o porque cierra la ventana del navegador.
El ejemplo que deseamos mostrar sirve para abrir una pgina web en otra ventana
cuando el usuario abandona la pgina. De este modo actan muchos de los molestos
popups de las pginas web, abrindose justo cuando abandonamos el sitio que
estbamos visitando.
El ejemplo es tan sencillo que casi sobran las explicaciones. Simplemente creamos
una funcin que abre una ventana secundaria y la asociamos con el evento onunload,
que se coloca en la etiqueta <body>.
<html>
<head>
<title>Abre al salir</title>
function abreventana()
{
window.open("http://www.google.es","venta","")
}
</script>
</head>
<body onunload="abreventana()">
<a href="http://www.desarrolloweb.com">DW!!</a>
</body>
</html>
112
E}ENPL0 EvENT0 0NL0AB
El evento onload de Javascript se activa cuando se termina de cargar la pgina. Se
ha de colocar en la etiqueta <body>, aunque en versiones modernas de Javascript,
tambin lo aceptan otros elementos como las imgenes.
Con el evento onload podemos ejecutar acciones justo cuando se han terminado de
cargar todos los elementos de la pgina. Es un evento bastante utilizado pues es
muy habitual que se deseen llevar a cabo acciones en ese preciso instante. En
nuestro ejemplo vamos a ver cmo podramos hacer un script para motivar a
nuestros visitantes a que nos voten en un ranking cualquiera de pginas web.
La idea es que la pgina se cargue entera y, una vez est cargada, aparezca una
ventana de Javascript donde se proponga al visitante votar a la pgina. Es
interesante esperar a que termine de cargar la pgina entera para que el visitante
pueda ver la web que se propone votar, antes de que realmente le pidamos su voto.
El cdigo sera el siguiente:
Nos fijamos que en la etiqueta <body> tenemos el evento onload="pedirVoto()".
Es decir, que cuando se cargue la pgina se llamar a una funcin llamada
pedirVoto(), que hemos definido en el bloque de script que tenemos en la cabecera.
La funcin pedirVoto() utiliza una caja confirm para saber si realmente el usuario
desea votarnos. La funcin confirm() muestra una caja con un texto y dos botones,
para aceptar o cancelar. El texto es lo que se recibe por parmetro. Dependiendo de
<html>
<head>
<title>Votame!!</title>
<script language="JavaScript">
function pedirVoto()
{
if (confirm("Esta pgina est genial (ya la puedes ver). Me das tu voto?"))
{
window.open("http://www.loquesea.com/votar.php?idvoto=12111","","")
}
}
</script>
</head>
<body onload="pedirVoto()">
<h1>Pgina SuperChula</h1>
<br>
Esta pgina est muy bonita. Soy su autor y te puedo asegurar que no hay muchas
pginas con tanta calidad en nternet
<br>
<br>
<a href="#">Entrar</a>
</body>
</html>
113
lo que se pulse en los botones, la funcin confirm() devolver un true, si se apret el
botn aceptar, o un false, en caso de que se pulsase sobre cancelar.
La funcin confirm() est a su vez metida dentro de un bloque condicional if, de
modo que, dependiendo de lo que se puls en la caja confirm, el if se evaluar como
positivo o negativo. En este caso slo se realizan acciones si se puls sobre aceptar.
Para acceder a la pgina donde se contabiliza nuestro voto tenemos el mtodo
window.open(), que sirve para abrir ventanas secundarias o popups. Mostramos la
pgina donde se vota en una ventana secundaria para que el visitante no se marche
de nuestra web, ya que acaba de entrar y no deseamos que se vaya ya.
Con esto queda ms o menos ilustrado cmo hacer uso del evento onload. Seguro
que en vuestras creaciones habr muchos ms casos donde utilizarlo.
E}ENPL0 EvENT0 0NCBANuE
Vamos a conocer uno de los trucos ms solicitados de Javascript, que tiene mucha
relacin con el tema de formularios y donde se utiliza el evento onchange de
Javascript. Es un ejemplo sobre cmo realizar una pgina con un par de selects
donde, segn el valor escogido en uno de ellos, cambien las opciones posibles del
otro select.
Lo mejor para ver lo que vamos a hacer es ver una pgina web donde se muestra en
funcionamiento el script. Para ver su funcionamiento debemos cambiar la seleccin
del primer select y comprobaremos como las opciones del segundo select cambian
automticamente.
El ejemplo que hemos ilustrado utiliza provincias y pases. Al escoger en el primer
select un pas, en el segundo debe mostrarnos las provincias de ese pas para que
escojamos una provincia, pero slo una que tenga que est en el pas seleccionado
en primer trmino.
Conocer el objeto select y los option
Es importante conocer los objetos de formulario select y los option. Los select
corresponden con las cajas de seleccin desplegables y los option con cada una de
las opciones de la caja desplegable.
En concreto nos interesa hacer varias cosas que tienen que ver con extraer el valor
de un select en cualquier momento, fijar su nmero de opciones y, para cada opcin,
colocar su valor y su texto asociado. Todo esto aprenderemos a hacerlo en este
ejemplo.
Modo de llevar a cabo el problema
Para empezar, vamos a utilizar un formulario con dos selects, uno para el pas y otro
para la provincia.
<form nome="f1">
<se/ect nome=pois onchonqe="combio_provincio{)">
<option vo/ue="0" se/ected>5e/eccione...
<option vo/ue="1">spoo
<option vo/ue="2">4rqentino
114
<option vo/ue="l">co/ombio
<option vo/ue="4">lroncio
</se/ect>
<se/ect nome=provincio>
<option vo/ue="-">-
</se/ect>
</form>
Nos fijamos en el select asociado al pas de este formulario que, cuando se cambia la
opcin de pas, se debe llamar a la funcin cambia_provincia(). Veremos ms
adelante esta funcin, ahora es importante fijarse que est asociada al evento
onchange que se activa cuando cambia la opcin en el select.
Todo lo dems ser cdigo Javascript. Empezamos definiendo un montn de arrays
con las provincias de cada pas. En este caso tenemos slo 4 pases, entonces
necesitar 4 arrays. En cada array tengo la lista de provincias de cada pas, colocada
en cada uno de los elementos del array. Adems, dejar una primera casilla con un
valor "-" que indica que no se ha seleccionado ninguna provincia.
vor provincios_1=new 4rroy{"-","4ndo/ucio","4sturios","8o/eores","conorios","costi//o y
Len","costi//o-Lo Moncho","...")
vor provincios_2=new 4rroy{"-","5o/to","5on luon","5on Luis","Lo kiojo","Lo Pompo","...")
vor provincios_l=new 4rroy{"-","co/i","5ontomorto","Mede//in","cortoqeno","...")
vor provincios_4=new 4rroy{"-","4isne","creuse","uordoqne","ssonne","6ironde ","...")
Hay que fijarse que los ndices del array de cada pas se corresponden con los del
select del pas. Por ejemplo, la opcin Espaa, tiene el valor asociado 1 y el array con
las provincias de Espaa se llama provincias_1.
El script se completa con una funcin que realiza la carga de las provincias en el
segundo select. El mecanismo realiza bsicamente estas acciones:
Detecto el pas que se ha seleccionado
Si el valor del pas no es 0 (el valor 0 es cuando no se ha seleccionado pas)
Tomo el array de provincias adecuado, utilizando el ndice del pas.
Marco el nmero de opciones que debe tener el select de provincias
Para cada opcion del select, coloco su valor y texto asociado, que se
hace corresponder con lo indicado en el array de provincias.
SI NO (El valor de pas es 0, no se ha seleccionado pas)
Coloco en el select de provincia un nico option con el valor "-", que
significaba que no haba provincia.
Coloco la opcin primera del select de provincia como la seleccionada.
La funcin tiene el siguiente cdigo. Est comentado para que se pueda entender
mejor.
function combio_provincio{)(
//tomo e/ vo/or de/ se/ect de/ pois e/eqido
vor pois
pois = document.f1.pois[document.f1.pois.se/ectedlndex].vo/ue
//miro o ver si e/ pois est definido
if {pois != 0) (
//si estobo definido, entonces co/oco /os opciones de /o provincio correspondiente.
//se/ecciono e/ orroy de provincio odecuodo
mis_provincios=evo/{"provincios_" + pois)
115
//co/cu/o e/ numero de provincios
num_provincios = mis_provincios./enqth
//morco e/ nmero de provincios en e/ se/ect
document.f1.provincio./enqth = num_provincios
//poro codo provincio de/ orroy, /o introdutco en e/ se/ect
for{i=0,i<num_provincios,i++)(
document.f1.provincio.options[i].vo/ue=mis_provincios[i]
document.f1.provincio.options[i].text=mis_provincios[i]
}
}e/se(
//si no hobio provincio se/eccionodo, e/imino /os provincios de/ se/ect
document.f1.provincio./enqth = 1
//co/oco un quin en /o nico opcin que he dejodo
document.f1.provincio.options[0].vo/ue = "-"
document.f1.provincio.options[0].text = "-"
}
//morco como se/eccionodo /o opcin primero de provincio
document.f1.provincio.options[0].se/ected = true
}
116
E}ENPL0 EvENT0 0NKEYB0WN
Script en Javascript que realiza la cuenta de los caracteres que se han escrito en un
campo de formulario textarea, al mismo tiempo que se estn escribiendo.
Tambien podemos pasar el propio control Textarea a la funcin cuenta a travs del
valor this.
<html>
<head>
<title></title>
function cuenta(){
document.forms[0].caracteres.value=document.forms[0].texto.value.length
}
</script>
</head>
<body>
<form action="#" method="post">
<table>
<tr>
<td>Texto:</td>
<td><textarea cols="40" rows="5" name="texto" onKeyDown="cuenta()"
onKeyUp="cuenta()"></textarea></td>
</tr>
<tr>
<td>Caracteres:</td>
<td><input type="text" name=caracteres size=4></td>
</tr>
</table>
</form>
</body>
</html>
117
<html>
<head>
<title></title>
function cuenta(Texto)
{
document.forms[0].caracteres.value=Texto.value.length
}
</script>
</head>
<body>
<form action="#" method="post">
<table>
<tr>
<td>Texto:</td>
<td><textarea cols="40" rows="5" name="texto" onKeyDown="cuenta(this)"
onKeyUp="cuenta(this)"></textarea></td>
</tr>
<tr>
<td>Caracteres:</td>
<td><input type="text" name=caracteres size=4></td>
</tr>
</table>
</form>
</body>
</html>
118
E}ENPL0 R0LL0vER
En este ejemplo vamos a ver como crear un enlace a travs de una imagen, de tal
forma que al situar el puntero del ratn sobre la imagen, esta cabia, lo mismo
suceder cuando salgamos de la imagen.
Utilizamos una funcin en Javascript que recibe cuatro parmetros (nombre de la
image, fichero de la imagen, alto y ancho).
<head>
<title></title>
</head>
<body>
<a href="http://www.google.es" target="_blank">
<img src="1.jpg" width="32" height="32" name="uno" border="1"
onmouseover="this.src=2.jpg onmouseout="this.src=1.jpg />
</a>
</body>
</html>
119
E}ENPL0 REL0}
Vamos a ver como, podemos mostrar en nuestra pgina un reloj digital. Para ello
haremos uso del mtodo w|ndow.set|nterva|(}.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
/*<![CDATA[*/
function reloj()
{
var hoy=new Date();
var horas=hoy.getHours();
var minutos=hoy.getMinutes();
var segundos=hoy.getSeconds();
var cadena;
cadena=horas+":"+minutos+":"+segundos;
window.document.forms[0].camporeloj.value=cadena;
}
window.setnterval(reloj,1000);
/*]]>*/
</script>
<body onload="reloj()">
<form name="frmreloj">
<input type="text" name="camporeloj" readonly="readonly" />
</form>
</body>
</html>
120
E}ENPL0 REL0} C0N PA0SA
Este ejemplo se base en el anterior, pero aadimos dos botones, uno que permite
parar el reloj y otro que permite reanudarlo.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
/*<![CDATA[*/
var dentificador;
function reloj()
{
var hoy=new Date();
var horas=hoy.getHours();
var minutos=hoy.getMinutes();
var segundos=hoy.getSeconds();
var cadena;
cadena=horas+":"+minutos+":"+segundos;
window.document.forms[0].camporeloj.value=cadena;
}
function parar()
{
window.clearnterval(dentificador);
}
function continuar()
{
dentificador=window.setnterval(reloj,1000);
}
dentificador=window.setnterval(reloj,1000);
/*]]>*/
</script>
</head>
<body onload="reloj()">
<form name="frmreloj">
<input type="text" name="camporeloj" readonly="readonly" />
<input type="button" name="bparar" value="Parar" onclick="parar()" />
<input type="button" name="bcontinuar" value="Continuar"
onclick="continuar()" />
</form>
</body>
</html>
121
Las Cookies
Que son las cookies
Las cookies constituyen una potente herramienta empleada por los servidores Web
para almacenar y recuperar informacin acerca de sus visitantes. Dado que el
Protocolo de Transferencia de HiperTexto (HTTP) es un protocolo sin estados (no
almacena el estado de la sesin entre peticiones sucesivas), las cookies proporcionan
una manera de conservar informacin entre peticiones del cliente, extendiendo
significativamente las capacidades de las aplicaciones cliente/servidor basadas en la
Web. Mediante el uso de cookies se permite al servidor Web recordar algunos datos
concernientes al usuario, como sus preferencias para la visualizacin de las pginas
de ese servidor, nombre y contrasea, productos que ms le interesan, etc.
Una cookie no es ms que un fichero de texto que algunos servidores piden a nuestro
navegador que escriba en nuestro disco duro, con informacin acerca de lo que
hemos estado haciendo por sus pginas.
Entre las mayores ventajas de las cookies se cuenta el hecho de ser almacenadas en
el disco duro del usuario, liberando as al servidor de una importante sobrecarga. Es
el propio cliente el que almacena la informacin y quien se la devolver
posteriormente al servidor cuando ste la solicite. Adems, las cookies poseen una
fecha de caducidad, que puede oscilar desde el tiempo que dure la sesin hasta una
fecha futura especificada, a partir de la cual dejan de ser operativas.
Las cookies no las escribe el servidor, sino que es el propio navegador del cliente
quien almacena la cookie en su disco duro.
Bonue se esconuen
Quieres saber exactamente dnde se esconde la caja con las cookies? Bien, veamos
varias instrucciones para distintos sistemas operativos que nos permitirn rastrearlo:
Pulsa Inicio, selecciona Buscar y luego Archivos o carpetas., escribe cookies
Ah tienes dnde se almacena la graciosa cookie con Netscape. Si todava usas
Microsoft Internet Explorer (cundo piensas disfrutar en serio de la red?), busca en
el directorio Win95 o WinNT, y encontrars un directorio llamado Cookies. Ah se
esconden las pcaras. Vers que a diferencia del Netscape, existe un fichero por cada
cookie, con el siguiente aspecto: <identificador de usuario>@<dominio.txt>, donde
dominio es la direccin de la mquina o bien el directorio (si es que no es el raz)
desde donde se envi la cookie. Bueno, otra filosofa de implementacin, que no
tiene mayor importancia.
122
Para ver qu se cuece dentro de la caja de las cookies no tienes ms que editarlas
con cualquier editor de texto. Sin embargo, debido a que las cookies se almacenan
en memoria hasta que sales del navegador, momento en que se escriben en el disco,
no es posible ver qu cookies has aceptado en tu fichero cookies.txt hasta que sales.
Pero si escribes el siguiente comando JavaScript en la barra de direcciones mientras
ests conectado al sitio sospechoso, aparecer un cuadro informndote de las
cookies que te han colocado.
lovo5cript:o/ert{document.cookie),
Sin embargo, lo que s funcionar es lo siguiente. Pulsa en el botn de enviar cookie
y recibirs una cookie. A continuacin pulsa el botn de leer cookie, y la vers (junto
con todas las que hayas recibido de esa misma mquina).
Cada cookie representa una pequea porcin de informacin con una fecha de
caducidad opcional, que se aade al fichero o directorio de cookies con el siguiente
formato:
nombre = vo/or,
expires = fechocoducidod,
Donde nombre es el nombre del dato almacenado, y "valor representa su valor. La
fecha de caducidad es un parmetro opcional que indica el tiempo que se conservar
la cookie. Si no se especifica el valor de "expires, la cookie caduca cuando el usuario
sale de la sesin en curso con el navegador. Por consiguiente, el navegador
conservar y recuperar la cookie slo si su fecha de caducidad an no ha expirado.
No obstante, si editamos el fichero de cookies, veremos que aparecen muchos ms
datos, algunos bastante crpticos. Bien, vamos a analizarlos uno por uno.
Un dominio
Se trata de un nombre de dominio parcial o completo para el cual ser vlida
la cookie. El navegador devolver la cookie a todo host que encaje con el
nombre de dominio parcial. Por ejemplo, si especificas un nombre de dominio
de la forma ".ehu.es, entonces el navegador devolver la cookie a servidores
Web alojados en cualquiera de las mquinas "www.bi.ehu.es,
"bidx01.bi.ehu.es, "www.lg.ehu.es, etc. Los nombres de dominio deben
incluir al menos dos puntos para evitar intentos fraudulentos de encajar
dominios de alto nivel como ".es. Si no se especifica ningn dominio,
entonces el navegador slo devolver la cookie a la mquina que la origin.
Adems, este atributo viene acompaado de un flag que indica si todas las
mquinas dentro del dominio especificado pueden acceder a la variable.
Un camino
Cuando se suministra el atributo de camino para la cookie, el navegador lo
contrastar con el URL de tu script antes de devolver la cookie. Por ejemplo,
si especificas el camino "/cgi-bin, entonces la cookie ser devuelta a scripts
de la forma "/cgi-bin/pedido.pl, "/cgi-bin/datos.pl y "/cgi-
bin/ficha_cliente/credito.pl, pero no al script "/cgi-
administrador/webmaster.pl. Por defecto, el camino se establece al camino
del documento HTML o guin CGI que emiti la cookie, lo que hace que la
cookie se enve a cualquier guin en CGI o documento HTML que cuelgue de
ese directorio.
Secure
Este atributo indica que la cookie slo ser transmitida a travs de un canal
seguro con SSL.
123
El fichero cookies.txt se lee al abrir el navegador. A partir de ese momento el uso de
cookies se gestiona en memoria y al cerrar el navegador se almacenarn en el
fichero aquellas cookies que no hayan caducado (las que no especifican fecha de
caducidad caducan al terminar la sesin).
Cookies
Las cookies son fcilmente accesibles a travs de la propiedad cookie del objeto
document, tanto para leerlas como para escribirlas. document.cookie devuelve una
cadena conteniendo los cookies existentes en nuestra pgina. Manipulando esta
cadena con las funciones de manejo de Strings disponibles es posible localizar la
informacin a extraer, en caso de lectura, o a escribir, en caso de enviar una cookie.
La forma ms sencilla de enviar una cookie es mediante la siguiente instruccin en
JavaScript:
document.cookie='ejemp/o=cookie'
Como ya hemos explicado, la forma de visualizar esta propiedad es mediante un
sencillo mensaje de alerta:
lovo5cript : o/ert{document.cookie),
Funciones bsicas
Esta es la funcin que usa para recuperar una cookie, donde name es el nombre de
la cookie deseada. Devuelve un string conteniendo el valor de la cookie especificada
o null si la cookie no existe
function qetcookie{nome)(
vor cnome = nome + "=",
vor dc = document.cookie,
if {dc./enqth > 0) (
beqin = dc.indexOf{cnome),
if {beqin != -1) (
beqin += cnome./enqth,
end = dc.indexOf{",", beqin),
if {end == -1) end = dc./enqth,
return unescope{dc.substrinq{beqin, end)),
}
}
return nu//,
}
Esta es una adaptacin de la funcin de funcin para colar una cookie, donde:
name: nombre de la cookie
value: valor de la cookie
expires: fecha de caducidad de la cookie (por defecto, el final de la sesin)
124
path: camino para el cual la cookie es vlida (por defecto, el camino del
documento que hace la llamada)
domain: dominio para el cual la cookie es vlida (por defecto, el dominio del
documento que hace la llamada)
secure: valor booleano que indica si la trasnmisin de la cookie requiere una
transmisin segura
Al especificar el valor null, el argumento tomar su valor por defecto
function setcookie{nome, vo/ue, expires, poth, domoin, secure) (
document.cookie = nome + "=" + escope{vo/ue) +
{{expires == nu//) ? "" : ", expires=" + expires.to6M15trinq{)) +
{{poth == nu//) ? "" : ", poth=" + poth) +
{{domoin == nu//) ? "" : ", domoin=" + domoin) +
{{secure == nu//) ? "" : ", secure"),
}
Esta es una funcin para borrar una cookie:
name: nombre de la cookie
path: camino de la cookie (debe ser el mismo camino que el especificado al
crear la cookie)
domain: dominio de la cookie (debe ser el mismo dominio que el especificado
al crear la cookie)
Se considera el camino y dominio por defecto si se especifica null o no se
proporcionan argumentos
function de/cookie {nome,poth,domoin) (
if {qetcookie{nome)) (
document.cookie = nome + "=" +
{{poth == nu//) ? "" : ", poth=" + poth) +
{{domoin == nu//) ? "" : ", domoin=" + domoin) +
", expires=1hu, 01-lon-70 00:00:01 6M1",
}
}
125
Ejercicios
1.- Indicar el resultado de las siguientes expresiones:
o ((3+1)*2/1)-(4+2/1)
o (5==4) || ((7>=5) && 3+1==4)
2.- Crear el siguiente formulario que permita leer dos nmeros y muestre en la
pantalla el resultado de la resta y de la multiplicacin
Principio del formulario
Introduzca un nmero:
Introduzca un nmero:
Calcular
Nuevo
Final del formulario
3.- Crear el siguiente formulario que permite leer la temperatura en grados Celsius y
la transforme en grados Fahrenheit. Para ello se dispone de la siguiente frmula:
F=(9/5)*C+32
4.- Crear el siguiente formulario que permita leer el sueldo bruto de un trabajador y
calcule el sueldo neto despus de descontar un 18% en concepto de IRPF. Se deber
mostrar el sueldo bruto, el irpf y el sueldo neto.
5.- Crear el siguiente formulario que permita leer un nmero y muestre en pantalla
un mensaje indicando si dicho nmero es par o impar.
126
6.- Crear el siguiente formulario que permita leer tres nmeros y muestre en pantalla
el mayor de los tres.
7.- Calcular el precio del billete de ida y vuelta en ferrocarril conociendo la distancia
la recorrer, de tal manera que si dicha distancia es superior a 80Km, el billete tiene
un descuento del 30%. Se sabe que cada Km cuesta 0,2 C. Se debe mostrar el
importe del billete, el descuento y el importe real del billete.
8.- Una empresa para a sus empleados semanalmente, de forma que las primeras 40
horas se pagan a razn de 6 euros la hora y las siguientes, en el caso de existir, a
razn de 10 euros la hora. Se ha de leer el nombre y horas trabajadas del
trabajador y mostrar en la pantalla el nombre y el sueldo que le corresponde
9.- Calcular le letra del DNI, para ello se sigue los siguientes pasos:
o Se coge el resto de dividir el DNI entre 23
o Se coge una letra de las siguientes segn el valor del resto
(TRWAGMYFPDXBNJZSQVHLCKET)
10.- Una empresa ha decidido gratificar a sus empleados en funcin a las horas
extras realizadas menos los 2/3 de horas de absentismo segn la siguiente tabla:
Horas extras - 2/3 horas absentismo Grafiticacin
Superior a 40 horas 300 C
Entre 30 y 40 horas 240 C
Inferior a 20 horas 80 C
127
Se debe leer el nombre del empleado, las horas extras y las horas de absentismo y
se ha de calcular la gratificacin.
11.- En un comercio se realiza un descuento en las compras en funcin del importe
total de dichas compras. Se debe calcular el importe a cobrar al cliente segn las
siguientes premisas:
Importe Descuento
Inferior a 180 C 0
Entre 180 y 300 10%
Superior a 300 15%
Se lee el importe y se ha de mostrar en pantalla el importe, el descuento y el importe
a cobrar.
12.- Escribir los nmeros pares que hay entre 0 y 50 utilizando un ciclo while.
13.- Mostrar los nmeros primos que hay entre 1 y 100. Un nmero primo es aquel
que solo es divisible por si mismo y por la unidad.
14.- Leer dos nmeros y realizar su producto mediante sumas sucesivas.
15.- Leer dos nmeros y realizar la suma, la resta, la multiplicacin, la divisin y el
resto comprobando si realmente se ha introducido dos nmeros.
16.- Sumar los primeros 1000 nmeros impares utilizando un ciclo while.
128
17.- Leer un nmero y crear la siguiente estructura. Por ejemplo, si se introduce el 5,
deber mostrar el siguiente tringulo:
54321
4321
321
21
1
18.- Leer dos nmeros, donde el primer nmero es el nmero de filas y el segundo el
nmero de columnas. Por ejemplo, si introducimos 5 y 7 deber crear la siguiente
estructura.
0123456
7890123
4567890
1234567
8901234
19.- Calcular el factorial de un nmero utilizando una funcin que devuelva el
resultado.
20.- Leer un nmero y calcule la suma nmeros enteros positivos menores que l. El
nmero debe ser positivo. Se ha de utilizar una funcin que devuelva el resultado de
la suma.
21.- Hacer una funcin que calcule la potencia de un nmero Be, mediante
multiplicaciones sucesivas., teniendo en cuenta las siguientes consideraciones:
1. Si e es igual a cero la potencia es uno
2. Si e es superior a cero la potencia es B*B*B*B......*B (e-veces)
3. Si e es negativo la potencia es 1/(B*B*B*B......*B) (e-veces)
Se deber utilizar una funcin para realizar el clculo.
129
Se debe mostrar el resultado de la siguiente forma. Be=R con formato <H1>
22.- Hacer una funcin que calcule el valor del nmero Pi con n trminos. Para su
clculo se utiliza la siguiente frmula:
pi=4*(1/1-1/3+1/5-1/7+1/9..........) hasta n trminos
23.- Tenemos dos vectores de 10 elementos cada uno. El contenido de cada vector
son los nmeros del 0 al 9. Para realizar cada una de las dos primeras opciones
utilizaremos una funcin que devuelva la suma. Para las dos ltimas no se crean
funciones nuevas.
24.- Crear una matriz de 3x3 que tenga unos en la diagonal principal y en el resto
ceros. Una vez creada se ha de imprimir.
25.- Leer una palabra correspondiente el infinitivo de un verbo y se deber escribir
en pantalla a que conjugacin pertenece, o error, si no es infinitivo.
26.- Leer una palabra y ponerla en tipo ttulo. El primer carcter de la palabra se
transforma en maysculas y el resto de caracteres en minsculas.
130
27.- Leer una palabra y ponerla en tipo inverso. El primer carcter de la palabra se
transforma en minsculas y el resto de caracteres en maysculas.
28.- Leer una palabra y ponerla en orden inverso.
29.- Leer una frase e indicar el nmero de palabras que tiene. Se supone que entre
una palabra y otra slo hay un espacio en blanco.
30.- Leer una fecha en formato dd-mm-aaaa, e indicar si ese da es festivo o no. Si
es sbado o domingo es festivo, en caso contrario no
31.- Calcular la edad de una persona. Para ello se lee la fecha de nacimiento
(ddmmaaaa).
131
32.- Leer un nmero (N) y evaluar las siguientes expresiones N2, N3, 2N y 3N.
33.- Calcular el rea de un crculo cuya frmula es A=Pi*R2. Se lee el radio.
34.- Calcular los dos dgitos de control de una cuenta bancaria. Para ello se lee los
cuatro dgitos del banco, los cuatro dgitos de la oficina y los diez dgitos del nmero
de cuenta. Para su clculo se utiliza el mdulo 11 que se encuentra descrito en el
apndice. Se deber utilizar una funcin.
35.- Calcular las races de una ecuacin de segundo grado. Se lee por pantalla los
tres coeficientes(a,b,c):
x1=(-b +\b2-4ac)/2a
x2=(-b -\b2-4ac)/2a
36.- Leer una palabra utilizando el mtodo prompt y comprobar si es polindroma. Se
lee igual de izquierda a derecha que de derecha a izquierda.
132
37.- Calcular la media de un conjunto de nmeros. Se termina de introducir nmeros
cuando se lee un cero.
38.- Leer 10 nmeros (obligatoriamente) y calcular la siguiente estadstica:
39.- Leer un vector de 10 nmeros y mostrarlo ordenado de mayor a menor.
40.- Seleccionar el da de la semana y el mes. Mostrar el da y el mes en letra.
41.-Tenemos el siguiente formulario donde podemos seleccionar el nmero de filas,
si queremos rellenar de ceros o de unos la diagonal y si queremos la diagonal
derecha o izquierda. Deberemos crear una de las siguientes estructuras. Para ello
utilizaremos una funcin. (4 filas de unos en la diagonal derecha)
0001
0010
0100
1000
133
42.- Leer una frase y realizar la operacin seleccionada.
43- Crear la siguiente pagina de manera que permita guardar tres cookies de tal manera
que si se introduce el nombre de usuario creado debera mostrar en un cuado de alerta el
nombre, apellidos y correo.

Javascript Ciclo

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript Ciclo

Uploaded by

Copyright:

Available Formats

JavaScript

You might also like