Curso de Javascript by Priale

Curso de Javascript
Manual del alumno

Profesor: Cdric Simon Versin 1.1

S
o
l
u
c
i
o
n
J
a
v
a
.
c
o
m

I
n
g
.

C
e
d
r
i
c

S
i
m
o
n

T
e
l
:

2
2
6
8

0
9
7
4

C
e
l
:

8
8
8
8

2
3
8
7

E
m
a
i
l
:

c
e
d
r
i
c
@
s
o
l
u
c
i
o
n
j
a
v
a
.
c
o
m

W
e
b
:

w
w
w
.
s
o
l
u
c
i
o
n
j
a
v
a
.
c
o
m
Curso de Javascript Pagina 2 de 37
ndice
ndice .................................................................................................................................................................................... 2
1 Introduccin al curso ......................................................................................................................................................... 4
1.1 Objetivo de este curso ................................................................................................................................................ 4
1.2 Manual del alumno ..................................................................................................................................................... 4
1.3 Ejercicios prcticos .................................................................................................................................................... 4
1.4 Requisitos para atender a este curso ........................................................................................................................ 4
2 Introduccin ....................................................................................................................................................................... 5
2.1 Qu es !avascript" .................................................................................................................................................... #
2.3 $rimeros pasos ............................................................................................................................................................ #
3 Elementos bsicos .............................................................................................................................................................. 7
3.1 %omentarios ................................................................................................................................................................ &
3.2 'iterales ....................................................................................................................................................................... &
3.3 (entencias ) bloques ................................................................................................................................................... &
4 Tipos de datos ..................................................................................................................................................................... 8
4.1 *ariables ..................................................................................................................................................................... +
4.2 Re,erencias .................................................................................................................................................................. +
4.3 *ectores ) matrices .................................................................................................................................................... +
5 Operadores .........................................................................................................................................................................
#.1 Operadores aritmticos .............................................................................................................................................. -
#.2 Operadores de comparaci.n ..................................................................................................................................... -
#.3 Operadores l./icos ..................................................................................................................................................... -
#.4 Operadores de asi/naci.n ........................................................................................................................................ 10
#.# Operadores especiales .............................................................................................................................................. 10
! Estructuras de control ...................................................................................................................................................... 11
1.1 2i,urcaciones condicionales ..................................................................................................................................... 11
1.2 2ucles ......................................................................................................................................................................... 11
1.3 Estructuras de manejo de objetos ........................................................................................................................... 12
7 "unciones ......................................................................................................................................................................... 13
&.1 3unciones prede,inidas ............................................................................................................................................ 13
8 Ob#etos .............................................................................................................................................................................. 15
+.1 $ropiedades ) mtodos ............................................................................................................................................. 1#
+.2 %reaci.n mediante constructores ........................................................................................................................... 1#
+.3 4erencia .................................................................................................................................................................... 11
Ob#etos prede$inidos ......................................................................................................................................................... 17
-.1 Objeto 5rra) ............................................................................................................................................................. 1&
-.2 Objeto 6ate ............................................................................................................................................................... 1&
Versin 1.1 Reproduccin prohibida
-.3 Objeto Mat7 .............................................................................................................................................................. 1+
-.4 Objeto 8umber ......................................................................................................................................................... 1+
-.# Objeto (trin/ ............................................................................................................................................................ 1-
-.1 Objeto 2oolean ......................................................................................................................................................... 1-
1% E&entos ........................................................................................................................................................................... 2%
10.1 'ista de eventos ....................................................................................................................................................... 20
10.2 6e,inici.n mediante c.di/o ................................................................................................................................... 21
11 'odelo de ob#etos del documento .................................................................................................................................. 22
12 Ob#eto (indo) ............................................................................................................................................................... 23
12.1 'a barra de estado .................................................................................................................................................. 24
12.2 Marcos 9o ,rames: ................................................................................................................................................... 2#
13 Ob#eto *ocument ........................................................................................................................................................... 2!
13.1 %.mo escribir en el documento ............................................................................................................................. 21
14 +oo,ies ........................................................................................................................................................................... 28
14.1 3unciones bsicas ................................................................................................................................................... 2+
14.2 ;n ejemplo< el contador individuali=ado ............................................................................................................. 2+
15 Ob#eto Ima-e .................................................................................................................................................................. 3%
1#.1 >ratamiento de im/enes ....................................................................................................................................... 30
1! Ob#eto "orm ................................................................................................................................................................... 32
11.1 Objetos >e?t ............................................................................................................................................................ 32
11.2 Objetos %7ec@bo? ) Radio .................................................................................................................................... 33
11.3 Objetos (elect ) Option .......................................................................................................................................... 34
17 Otros ob#etos ................................................................................................................................................................... 3!
1&.1 Objeto 4istor) ........................................................................................................................................................ 31
1&.2 Objeto 'ocation ...................................................................................................................................................... 31
1&.3 Objeto 8avi/ator .................................................................................................................................................... 31
1&.4 Objeto (creen .......................................................................................................................................................... 3&
18 "ic.eros .#s ..................................................................................................................................................................... 38
1 Introduccin al curso
1.1 Objetivo de este curso
En este curso vamos a descubrir el lenguaje el Javascript. Se va a ver principalmente la parte del
Javascript que nos permite validar formularios, y hacer unos cambios dinamicos a nivel del cliente
(cambio de color de fondo, ...) con el objetivo de tener una mejor calidad de datos, y un sitio mas
atractivo.
No se va a ver en este curso partes mas adelantadas de Javascript como el AJAX y el uso de framworks,
que necesitan estar muy comodo con el Javascript de base para poder entenderlo y usarlo de maner
eficiente.
1.2 Manual del alumno
Este manual del alumno es una ayuda para el alumno, para tenga un recuerdo del curso. Este manual
contiene un resumen de las materias que se van a estudiar durante el curso, pero el alumno debera de
tomar notas personales para completas este manual.
1.3 Ejercicios prcticos
Para captar mejor la teora, se harn muchos ejercicios con los alumnos, para probar la teora y verificar
la integracin de la materia.

Tambin, el alumno podr copiar sus cdigos en un disquete al fin del curso para llevarse, con fin de
seguir la prctica en su hogar.
1.4 Requisitos para atender a este curso
El conocimiento bsico del lenguaje HTML es requerido para poder atender a este curso. Tambin, un
conocimiento del lenguaje Java ayudara a entender y explotar el lenguaje Javascript.
Si el alumno tiene dificultades en un u otro capitulo, el debe sentirse libre de pedir explicaciones
adicionales al profesor.
2 Introduccin
2.1 Qu es Javascript?
JavaScript, al igual que Java, es una de las mltiples maneras que han surgido para extender las
capacidades del lenguaje HTML. Al ser la ms sencilla, es por el momento la ms extendida. Antes que nada
conviene aclarar un par de cosas!
1. JavaScript no es un lenguaje de programacin propiamente dicho. Es un lenguaje script u
orientado a documento, como pueden ser los lenguajes de macros que tienen muchos
procesadores de texto. Nunca podrs hacer un programa con JavaScript, tan slo podrs mejorar
tu pgina Web con algunas cosas sencillas revisin de !ormularios, e!ectos en la barra de estado,
etc..." #, ahora, no tan sencillas animaciones usando $%&' dinmico, por ejemplo".
(. JavaScript # Java son dos cosas distintas. )rincipalmente porque Java s* que es un lenguaje de
programacin completo. 'o +nico que comparten es la misma sintaxis.
2.2 Portabilidad del Javascript
JavaScript se quiere ser un lenguaje portable, es decir que pueda correr bajo diferentes sistemas
operativo, y bajo varios navegadores.
En la realidad, si el Javascript no depende del sistema operativo, el si tiene una dependencia del
navegador. Si el codigo Javascript tiene su estandares, ningun navegador lo implementa al 100. !or
eso, un codigo Javascript tiene "0 de suerte de funccionar bajo cualquier navegador, pero
especialmente para funciones nuevas y#o adelantadas, $ay que probarlo en cada navegador, y a
veces escribir codigo de manera especifica para cada navegador %se puede detectar el navegador en
Javascript&.
2.3 Primeros pasos
"amos a reali#ar nuestro primer $programa$ en JavaScript. Haremos surgir una ventana que nos muestre el
%a &amoso mensaje $hola, mundo$. As' podremos ver los elementos principales del lenguaje. (l siguiente
c)digo es una pgina *e+ completa con un +ot)n que, al pulsarlo, muestra el mensaje.
HolaMundo.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function HolaMundo() {
alert("Hola, mundo!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()">
</FORM>
</BODY>
</HTML>
, aqu' est nuestro ejemplo &uncionando!
Ahora vamos a ver, paso por paso, que signi&ica cada uno de los elementos extra-os que tiene la pgina
anterior!
</SCRIPT>
.entro de estos elementos ser donde se puedan poner &unciones en JavaScript. /uedes poner cuantos
quieras a lo largo del documento % en el lugar que ms te guste. ,o he elegido la ca+ecera para hacer ms
legi+le la parte HTML de la pgina. Si un navegador no acepta JavaScript no leer lo que ha% entre medias
de estos elementos.
(sta es nuestra primera &unci)n en JavaScript. Aunque JavaScript est0 orientado a o+jetos no es de ningn
modo tan estricto como Java, donde nada est &uera de un o+jeto. /ara las cosas que se van a hacer en este
tutorial, no vamos a crear ninguno, pero usaremos los que vienen en la descripci)n del lenguaje. (n el c)digo
de la &unci)n vemos una llamada al m0todo alert 1que pertenece al o+jeto window2 que es la que se
encarga de mostrar el mensaje en pantalla.
.entro del elemento que usamos para mostrar un +ot)n vemos una cosa nueva! onClick. (s un controlador
de evento. 3uando el usuario pulsa el +ot)n, el evento clic4 se dispara % ejecuta el c)digo que tenga entre
comillas el controlador de evento onClick, en este caso la llamada a la &unci)n HolaMundo(), que tendremos
que ha+er de&inido con anterioridad. (xisten muchos ms eventos que iremos descu+riendo segn
avancemos en el tutorial. (n el cuarto cpitulo ha% un resumen de todos ellos.
(n realidad, podr'amos ha+er escrito lo siguiente!
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="alert('¡Hola,Mundo!')">
</FORM>
% nos ha+r'amos ahorrado el tener que escri+ir la &unci)n % todo lo que le acompa-a, adems de conseguir
que nos recono#ca el carcter especial . Sin em+argo me pareci) conveniente hacerlo de esa otra manera
para mostrar ms elementos del lenguaje en el ejemplo.
3 Elementos bsicos
3.1 Comentarios
Lo primero 1por ser lo ms &cil2 es indicar c)mo se ponen los comentarios. 5n comentario es una parte de
nuestro programa que el ordenador ignora % que, por tanto, no reali#a ninguna tarea. Se utili#an
generalmente para poner en lenguaje humano lo que estamos haciendo en el lenguaje de programaci)n %
as' hacer que el c)digo sea ms comprensi+le.
(n JavaScript existen dos tipos de comentarios. (l primero nos permite que el resto de la l'nea sea un
comentario. /ara ello se utili#an dos +arras inclinadas!
var i = 1; // Aqui esta el comentario
Sin em+argo, tam+i0n permite un tipo de comentario que puede tener las l'neas que queramos. (stos
comentario comien#an con /* % terminan por */. /or ejemplo!
/* Aqui comienza nuestro maravilloso comentario
que sigue por aqu
e indefinidamente hasta que le indiquemos el final */
3.2 Literales
Se llama as' a los valores que puede tomar una varia+le o una constante. Aparte de los distintos tipos de
nmeros % valores +ooleanos!
"Soy una cadena"
3434
3.43
true, false
Tam+i0n podemos especi&icar vectores!
vacaciones = ["Navidad", "Semana Santa", "Verano"];
alert(vacaciones[0]);
.entro de las cadenas podemos indicar varios caracteres especiales, con signi&icados especiales. (stos son
los ms usados!
Carcter Significado
,n Nueva l*nea
,t %abulador
,- .omilla simple
,/ .omilla doble
,, 0arra invertida
,111 El n+mero 2S.33 seg+n la codi!icacin 'atin45" del carcter en hexadecimal
.e este modo, el siguiente literal!
"El curso de Javascript (\xA9 1997-99 Daniel Rodrguez) es \"co..\"."
se corresponde con la cadena!
El curso de Javascript ( 1997-99 Daniel Rodrguez) es "co..".
3.3 Sentencias y bloques
(n Javascript las sentencias se separan con un punto % coma, % se agrupan mediante llaves 1{ % }2.
4 Tipos de datos
4.1 Variables
Las varia+les son nom+res que ponemos a los lugares donde almacenamos la in&ormaci)n. (n Javascript,
de+en comen#ar por una letra o un su+ra%ado 1_2, pudiendo ha+er adems d'gitos entre los dems
caracteres. 'o es necesario declarar una variable, pero cuando se hace es por medio de la pala+ra
reservada var. 5na varia+le, cuando no es declarada, tiene siempre m+ito glo+al, mientras que en caso
contrario ser de m+ito glo+al si est de&inida &uera de una &unci)n, % local si est de&inida dentro!
var x; // Accesible fuera y dentro de pruebas
y = 2; // Accesible fuera y dentro de pruebas
function pruebas() {
var z; // Accesible slo dentro de pruebas
w = 1; // Accesible fuera y dentro de pruebas}
Se pueden declarar varias varia+les en una misma sentencia separndolos por comas!
var x, y, z;
(l tipo de datos de la varia+le ser aquel que tenga el valor que asignemos a la misma, a no ser que le
asignemos un o+jeto por medio del operador new. /or ejemplo, si escri+imos
b = 200;
(s de esperar que la varia+le b tenga tipo num0rico.
4.2 Referencias
Los punteros se pueden usar para apuntar a otras varia+les, es decir, un puntero puede ser como un nuevo
nom+re de una varia+le dada. A esto se le suele llamar re&erencia. (n JavaScript se pueden usar re&erencias
a o+jetos % a &unciones. Su ma%or utilidad est en el uso de distinto c)digo para distintos navegadores de
&orma transparente. /or ejemplo, supongamos que tenemos una &unci)n que s)lo &unciona en 6nternet
(xplorer 7, % tenemos una varia+le llamada IE4 que hemos puesto previamente a true 1verdedero2 s)lo si el
explorador del usuario es ese.
function funcionIE4() {...}
function funcionNormal() {...}
var funcion = (IE4) ? funcionIE4 : funcionNormal;
// Si IE4 es verdadero, funcion es una referencia de funcionIE4
// Si no, funcion es una referencia de funcionNormal
funcion();
// La llamada que haremos realmente depende de la
// lnea anterior
(n este c)digo, cuando llamemos &inalmente a funcion al &inal en realidad llamaremos a la &unci)n a la que
en la l'nea anterior hemos decidido que se re&iera.
4.3 Vectores y matrices
(stos tipos de datos complejos son un conjunto ordenado de elementos, cada uno de los cuales es en s'
mismo una varia+le distinta. En Javascript, los vectores y las matrices son objetos. 3omo veremos que
hacen todos los o+jetos, se declaran utili#ando el operador new!
miEstupendoVector = new Array(20)
(l vector tendr inicialmente 89 elementos 1desde el 9 hasta el :;2. Si queremos ampliarlo no tenemos ms
que asignar un valor a un elemento que est0 &uera de los l'mites del vector!
miEstupendoVector[25] = "Algo"
.e hecho, podemos utili#ar de 'ndices cualquier expresi)n que deseemos utili#ar. <i siquiera necesitamos
especi&icar la longitud inicial del vector si no queremos!
vectorRaro = new Array();
vectorRaro["A colocar en los bookmark"] = "HTML en castellano";
Hacer una matri# +idimensional es ms complicado, %a que tenemos que hacer un +ucle que cree un vector
nuevo en cada elemento del vector original.
5 Operadores
5.1 Operadores aritmticos
JavaScript dispone de los operadores aritm0ticos clsicos % algn que otro ms!
Descripcin Smbolo Expresin de ejemplo esultado del ejemplo
&ultiplicacin 6 (67 8
9ivisin : ;:( (.;
<esto de una divisin entera = ; = ( 5
Suma > (>( 7
<esta 4 ?4( ;
3ncremento >> >>( @
9ecremento 44 44( 5
&enos unario 4 4(>7" 4A
Los operadores de incremento % decremento merecen una explicaci)n auxiliar. Se pueden colocar tanto
antes como despu0s de la expresi)n que deseemos modi&icar pero s)lo devuelven el valor modi&icado si
estn delante. Me explico.
a = 1;
b = ++a;
(n este primer caso, a valdr 8 % b 8 tam+i0n. Sin em+argo!
a = 1;
b = a++;
Ahora, a sigue valiendo 8, pero b es ahora :. (s decir, estos operadores modi&ican siempre a su operando,
pero si se colocan detrs del mismo se ejecutan despu0s de todas las dems operaciones.
5.2 Operadores de comparacin
/odemos usar los siguientes!
3gualdad BB ( BB -(- Cerdadero
9esigualdad DB ( DB ( Ealso
3gualdad estricta BBB ( BBB -(- Ealso
9esigualdad estricta DBB ( DBB ( Ealso
&enor que F ( F ( Ealso
&a#or que G @ G ( Cerdadero
&enor o igual que FB ( FB ( Cerdadero
&a#or o igual que GB 5 GB ( Ealso
5.3 Operadores lgicos
(stos operadores permiten reali#ar expresiones l)gicas complejas!
Negacin D D( B (" Ealso
H II ( B (" II ( GB J" Cerdadero
K LL ( B (" LL ( FG (" Cerdadero
5.4 Operadores de asignacin
<ormalmente los lenguajes tienen un nico operador de asignaci)n, que en JavaScript es el s'm+olo =. /ero
en este lenguaje, dicho operador se puede com+inar con operadores aritm0ticos % l)gicos para dar los
siguientes!
!perador Significado !perador Significado
x >B # x B x > # x 4B # x B x 4 #
x :B # x B x : # x 6B # x B x 6 #
x = # x B x = #
5.5 Operadores especiales
"amos a incluir en este apartado operadores que no ha%an sido incluidos en los anteriores. La
concatenaci)n de cadenas, por ejemplo, se reali#a con el s'm+olo +. (l operador condicional tiene esta
estructura!
condicion ? valor1 : valor2
Si la condici)n se cumple devuelve el primer valor %, en caso contrario, el segundo. (l siguiente ejemplo
asignar'a a la varia+le a un 8!
a = 2 > 3 ? 1 : 2
3omo pod0is ver no resulta mu% legi+le. Huid de este operador como de la peste. (vitad la tentaci)n.
/rocurad no usarlo. ,o he tenido que desci&rar c)digo escrito por m' un par de meses antes que ten'a esta
clase de operadores, a veces incluso anidados. Todav'a tengo escalo&r'os al recordarlo.
/ara tratar con o+jetos disponemos de tres operadores!
.rear un objeto neM a B neM 2rra#" a es ahora un vector
0orrar un objeto delete delete a Elimina el vector anteriormente creado
<e!erencia al objeto actual this
this se suele utili#ar en el c)digo de los m0todos de un o+jeto para re&erirse a otros m0todos o a
propiedades de su mismo o+jeto.
6 Estructuras de control
6.1 Bifurcaciones condicionales
(na bifurcaci)n condicional en una estructura que reali*a una tarea u otra dependiendo del resultado
de evaluar una condici)n. La primera que vamos a estudiar es la estructura if...else. (sta estructura es
la ms sencilla % antigua 1es posi+le que se utili#ara con los +acos % todo...2 de todas!
if (bso.compositor == "Manuel Balboa")
alert(Hombre, una banda sonora espaola!');
else
alert('Seguro que es una americanada');
Ha% que indicar que el else es opcional..
La siguiente estructura +i&urca segn los distintos valores que pueda tomar una varia+le espec'&ica. (s la
sentencia switch!
switch(directorPreferido) {
case "John Ford":
alert('Eso es tener buen gusto, s seor');
break;
case "Joel Coen":
alert('Parece que te gustan las cosas raras');
break;
default:
alert('Y ese quien es?');
}
6.2 Bucles
(n bucle es una estructura que permite repetir una tarea un n+mero de veces, determinado por una
condici)n. /ara hacer +ucles podemos utili#ar las estructuras while % do...while. (stos +ucle iteran
inde&inidamente mientras se cumpla una condici)n. La di&erencia entre ellas es que la primera comprue+a
dicha condici)n antes de reali#ar cada iteraci)n % la segunda lo hace despu0s!
var numero=0;
while (numero==1) {
alert('Soy un while');
}
do {
alert('Soy un do...while');
} while (numero==1);
(n Javascript, el +ucle for es singularmente potente. <o se reduce a casos num0ricos como en muchos
otros lenguajes sino que nos da mucha ms li+ertad. Tiene la siguiente estructura!
for (inicio; condicin; incremento)
cdigo
(l c)digo contenido en el +ucle se ejecutar mientras la condicin se cumpla. Antes de comen#ar la
primera iteraci)n del +ucle se ejecutar la sentencia inicio % en cada iteraci)n lo har incremento. La
manera ms ha+itual de usar estas posi+ilidades es, claro est, la num0rica!
var numero = 4;
for (n = 2, factorial = 1; n <= numero; n++)
factorial *= n;
/or ltimo, ha% que decir que la ejecuci)n de la sentencia break dentro de cualquier parte del +ucle provoca
la salida inmediata del mismo. Aunque a veces no ha% ms remedio que utili#arlo, es mejor evitarlo para
mejorar la legi+ilidad % elegancia del c)digo 1toma %a, la &rase que me ha salido2.
6.3 Estructuras de manejo de objetos
JavaScript dispone de dos +ien distintas. La primera es el +ucle for...in, que nos permitir recorrer todas
las propiedades de un o+jeto. Se usa principalmente con vectores. /or ejemplo!
var vector = [1, 2, 2, 5];
for (i in vector)
vector[i] += 2;
(ste ejemplo sumar'a dos a todos los elementos del vector. Sin em+argo, conviene tener cuidado %a que, de
los navegadores de Microso&t, s)lo la versi)n = lo soporta.
La otra estructura es with, que nos permitir una ma%or comodidad cuando tengamos que tratar con mu%as
propiedades de un mismo o+jeto. (n lugar de tener que re&erirnos a todas ellas con un objeto.propiedad
podemos hacer!
with (objeto) {
propiedad1 = ...
propiedad2 = ...
...
}
>ue resulta ms c)modo 1tenemos que teclar menos2 % legi+le.
7 Funciones
6ncluso los programas ms sencillos tienen la necesidad de dividirse. Las &unciones son los nicos tipos de
su+programas que acepta JavaScript. Tienen la siguiente estructura!
function nombre(argumento1, argumento2,..., argumento n) {
cdigo de la funcion
}
Los parmetros se pasan por valor. (so signi&ica que si cam+iamos el valor de un argumento dentro de una
&unci)n, este cam+io no se ver &uera!
function sumarUno(num) {
num++;
}
var a = 1:
sumarUno(a);
(n este ejemplo, a seguir valiendo : despu0s de llamar a la &unci)n. (sto tiene una excepci)n, que son las
re&erencias. 3uando se cam+ia el valor de una re&erencia dentro de una &unci)n tam+i0n se cam+ia &uera.
/ara devolver un valor de retorno desde la &unci)n se utili#a la pala+ra reservada return!
function cuadrado(num) {
return num * num;
}
a = cuadrado(2);
(n este ejemplo, a valdr 7.
Se pueden de&inir &unciones con un nmero varia+le de argumentos. /ara poder luego acceder a dichos
parmetros dentro de la &unci)n se utili#a el vector arguments. (ste ejemplo sumar'a el valor de todos los
parmetros!
function sumarArgumentos() {
resultado = 0;
for (i=0; i<arguments.length; i++)
resultado += arguments[i];
return resultado;}
7.1 Funciones predefinidas
JavaScript dispone de las siguientes &unciones prede&inidas!
e"al#cadena$
(jecuta la expresi)n o sentencia contenida en la cadena que reci+e como parmetro.
mensaje = 'Hola';
eval("alert('" + mensaje + "');");
(ste ejemplo nos muestra una ventana con un saludo.
parse%nt#cadena &' base($
3onvierte en un nmero entero la cadena que reci+e, asumiendo que est en la +ase indicada. Si
este parmetro &alta, se asume que est en +ase :9. Si &racasa en la conversi)n devolver el valor
NaN.
parseInt("3453");
.evuelve el nmero ?7=?.
parse)loat#cadena$
3onvierte en un nmero real la cadena que reci+e, devolviendo NaN si &racasa en el intento.
parseFloat("3.12.3");
(ste ejemplo devuelve NaN %a que la cadena no contiene un nmero real vlido.
is*a*#"alor$
.evuelve true s)lo si el argumento es NaN.
is)inite#numero$
.evuelve true si el nmero es un nmero vlido % no es in&inito.
*umber#referencia$
String#referencia$
3onvierten a nmero 1o re&erencia2 el o+jeto que se les pase como argumento.
8 Objetos
(n objeto es una estructura que contiene tanto variables %llamadas propiedades& como las funciones
que manipulan dic$as variables %llamadas m,todos&. A partir de esta estructura se ha creado un nuevo
modelo de programaci)n 1la programaci)n orientada a o+jetos2 que atri+u%e a los mismos propiedades como
herencia o polimor&ismo. 3omo veremos, JavaScript simpli&ica en algo este modelo.
(l modelo de la programaci)n orientada a o+jetos normal % corriente separa los mismos en dos! clases e
instancias. Las primeras son entes ms a+stractos que de&inen un conjunto determinado de o+jetos. Las
segundas son miem+ros de una clase, pose%endo las mismas propiedades que la clase a la que pertenecen.
(n Javascript esta distinci)n se di&umina. S)lo tenemos o+jetos.
8.1 Propiedades y mtodos
/or si acaso %a lo hemos olvidado, recordemos ahora c)mo se accede a los m0todos % propiedades de un
o+jeto!
objeto.propiedad
objeto.metodo(parametros)
@ueno, vale, este apartado es un poco tonto. /ero no os preocup0is que los dos siguientes tienen mucho
ms contenido.
8.2 Creacin mediante constructores
"amos a aprender a hacer nuestros propios o+jetos. ,a ha+'amos visto como hacerlo por medio de literales,
pero dado que es una soluci)n +astante propietaria % poco &lexi+le, estudiaremos el m0todo normal de
lograrlo mediante constructores.
(n constructor es una funci)n que iniciali*a un objeto. 3uando creamos un o+jeto nuevo del tipo que
sea, lo que hacemos en realidad es llamar al constructor pasndole argumentos. /or ejemplo, si creamos un
o+jeto Array de esta manera!
vector = new Array(9);
(n realidad, estamos llamando a un constructor llamado Array que admite un parmetro. Ser'a algo as'!
function Array(longitud) {
...
}
"amos a crear nuestro primero o+jeto. Supongamos que queremos codi&icar en Javascript una aplicaci)n
que lleve nuestra +i+lioteca de li+ros t0cnicos, de esos de 6n&ormtica. /ara lograrlo, crearemos un o+jeto
Libro que guarde toda la in&ormaci)n de cada li+ro. (ste ser'a el constructor!
function Libro(titulo, autor, tema) {
this.titulo = titulo;
this.autor = autor;
this.tema = tema;}
3omo vemos, accederemos a las propiedades % m0todos de nuestros o+jetos por medio de la re&erencia
this. Ahora podemos crear % acceder a nuestros o+jetos tipo Libro!
miLibro = new Libro("JavaScript Bible", "Danny Goodman", "JavaScript");
alert(miLibro.autor);
Sencillo, AnoB Sin em+argo, para dis&rutar de toda la &uncionalidad de los o+jetos nos &alta algo. (se algo son
los m0todos. "amos a incluir uno que nos saque una ventana con el contenido de las propiedades escrito!
function escribirLibro() {
alert("El libro " + this.titulo + " de " + this.autor +
" trata sobre " + this.tema);
}
/ara incluirlo en nuestro o+jeto a-adimos la siguiente l'nea a nuestra &unci)n constructora!
this.escribir = escribirLibro;
, podremos acceder al mismo de la manera normal!
miLibro.escribir();
8.3 Herencia
5na de las capacidades ms empleadas de la programaci)n orientada a o+jetos es la herencia. -a $erencia
supone crear objetos nuevos y distintos que, aparte de los suyas propios, disponen de las
propiedades y m,todos de otro objeto, al que llamaremos padre.
"amos a ver en nuestro ejemplo c)mo se puede aplicar. (n la actualidad, en muchos li+ros de in&ormtica,
se inclu%e un 3.CDEM con ejemplos % a veces aplicaciones relacionadas con el tema del li+ro. Si
quisieramos tener tam+i0n esa in&ormaci)n nos ser'a di&'cil, %a que algunos li+ros tienen 3. % otros no.
/odr'amos tener otro o+jeto, pero tendr'amos que reproducir el c)digo 1al menos del constructor2 % si
cam+iramos algo del mismo en el o+jeto Libro tam+i0n tendr'amos que hacerlo en el nuevo. Lo mejor ser
crear un o+jeto que herede las caracter'sticas de Libro % a-ada otras nuevas.
function LibroConCD (titulo, autor, tema, ejemplos, aplicaciones) {
this.base = Libro
this.base(titulo, autor, tema);
this.tieneEjemplos = ejemplos;
this.tieneAplicaciones = aplicaciones;
}
(l pro+lema es que, ahora, para acceder a las propiedades de Libro tenemos que hacerlo con
intermediarios!
miLibro = new LibroConCD("JavaScript Bible", "Danny Goodman",
"JavaScript", true, true);
alert('El libro Javascript Bible de Danny Goodman trata sobre Javascript');
/ara poder tener ms transparencia % llamar a las propiedades de Libro como si &ueran de LibroConCD,
tenemos que incluir, &uera del constructor, la siguiente asignaci)n!
LibroConCD.prototype = new Libro;
, %a podremos. prototype es una propiedad que viene por de&ecto en todos los o+jetos que creemos. S)lo
admite un valor, as' que los a&icionados a la herencia mltiple se quedarn con las ganas.
9 Objetos predefinidos
JavaScript dispone de varios o+jetos prede&inidos para acceder a muchas de las &unciones normales de
cualquier lenguaje, como puede ser el manejo de vectores o el de &echas. (n algunos casos estaremos
tratando con o+jetos aunque no nos demos cuenta, %a que los usos ms ha+ituales de los mismos disponen
de a+reviaturas que esconden el hecho de que sean o+jetos.
9.1 Objeto Array
3omo dijimos antes, este o+jeto permite crear vectores. Se iniciali#a de cualquiera de las siguientes
maneras!
vector = new Array(longitud);
vector = new Array(elemento1, elemento2, ..., elementoN);
(n el primer caso crearemos un vector con el nmero especi&icado de elementos, mientras que en el
segundo tendremos un vector que contiene los elementos indicados % de longitud <. /ara acceder al mismo
de+emos recordar que el primero elemento es el nmero cero.
(l o+jeto Array tiene, entre otros, los siguientes m0todos % propiedades!
length
/ropiedad que contiene el nmero de elementos del vector.
concat#"ector+$
A-ade los elementos de vector2 al &inal de los del vector que invoca el m0todo, devolviendo el
resultado. <o &unciona en (xplorer ? % no &orma parte del estndar (3MA.
sort#funcionComparacion$
Erdena los elementos del vector al&a+0ticamente. Si se a-ade una &unci)n de comparaci)n como
parmetro los ordenar utili#ando 0sta. .icha &unci)n de+e aceptar dos parmetros % devolver 9 si
son iguales, menor que cero si el primer parmetro es menor que el segundo % ma%or que cero si es
al rev0s.
function compararEnteros(a,b) {
return a<b ? -1 : (a==b ? 0 : 1);
}
5sando esta &unci)n ordenar'a num0ricamente 1% de menor a ma%or2 los elementos del vector.
9.2 Objeto Date
(ste o+jeto nos permitir manejar &echas % horas. Se invoca as'!
fecha = new Date();
fecha = new Date(ao, mes, dia);
fecha = new Date(ao, mes, dia, hora, minuto, segundo);
Si no utili#amos parmetros, el o+jeto &echa contendr la &echa % hora actuales, o+tenidas del reloj del
sistema. (n caso contrario ha% que tener en cuenta que los meses comien#an por cero. As', por ejemplo!
navidad99 = new Date(1999, 11, 25)
(l o+jeto Date dispone, entre otros, de los siguientes m0todos!
get,ime#$
set,ime#milisegundos$
E+tienen % ponen, respectivamente, la &echa % la hora tomados como milisegundos transcurridos
desde el : de enero de :;F9.
get-ear#$
set-ear#a.o$
E+tienen % poner, respectivamente, el a-o de la &echa. Gste se devuelven como nmeros de 7
d'gitos excepto en el caso en que est0n entre :;99 % :;;;, en cu%o caso se devolvern las dos
ltimas ci&ras. Ha% que tener cuidado, %a que la implementaci)n de 0stos m0todos puede variar en
las ltimas versiones de <etscape.
get)ull-ear#$
set)ull-ear#a.o$
Deali#an la misma &unci)n que los anteriores, pero sin tantos l'os, %a que siempre devuelven
nmeros con todos sus d'gitos. Hunciona en (xplorer 7 % <etscape 7.9I % superiores.
getMonth#$
setMonth#mes$
getDate#$
setDate#dia$
getHours#$
setHours#horas$
getMinutes#$
setMinutes#minutos$
getSeconds#$
setSeconds#segundos$
E+tienen % ponen, respectivamente, el mes, d'a, hora, minuto % segundo de la &echa, tam+i0n
respectivamente, respectivamente ha+lando.
getDa/#$
.evuelve el d'a de la semana de la &echa en &orma de nmero que va del 9 1domingo2 al I 1s+ado2.
9.3 Objeto Math
(ste o+jeto no est construido para que tengamos nuestras varia+les Math, sino como un contenedor donde
meter diversas constantes 1como Math.E % Math.PI2 % los siguientes m0todos matemticos!
M0todo Descripcin
Expresin de
ejemplo
esultado del
ejemplo
abs Calor absoluto &ath.abs4(" (
sin, cos, tan
Eunciones trigonomNtricas, reciben el argumento en
radianes
&ath.cos&ath.)3" 45
asin, acos,
atan
Eunciones trigonomNtricas inversas &ath.asin5" 5.;?
exp, log Exponenciacin # logaritmo, base E &ath.log&ath.E" 5
ceil
9evuelve el entero ms pequeOo ma#or o igual al
argumento
&ath.ceil4(.?" 4(
!loor
9evuelve el entero ms grande menor o igual al
argumento
&ath.!loor4(.?" 4@
round
9evuelve el entero ms cercano o igual al
argumento
&ath.round4(.?" 4@
min, max
9evuelve el menor o ma#or" de sus dos
argumentos
&ath.min(,7" (
poM
Exponenciacin, siendo el primer argumento la
base # el segundo el exponente
&ath.poM(,7" 5A
sqrt <a*P cuadrada &ath.sqrt7" (
(
9.4 Objeto Number
Al igual que en el caso anterior, no se pueden crear o+jetos de tipo Number, sino que de+emos re&erirnos al
gen0rico. (ste o+jeto contiene como propiedades los siguientes valores num0ricos
1ropiedad Descripcin
NaN Calor que signi!ica /no es un n+mero/
&2QRC2'SE # &3NRC2'SE &ximo # m*nimo n+mero representable
NET2%3CER3NE3N3%3CE #
)US3%3CER3NE3N3%3CE
3n!inito negativo # positivo, se utiliPan cuando ha# desbordamiento al
realiPar alguna operacin matemtica
9.5 Objeto String
(ste es un o+jeto que se puede con&undir con los datos normales de tipo cadena. 3onviene utili#ar estos
ltimos, %a que los o+jetos String tienen un comportamiento extra-o cuando se utili#an como cadenas
normales. Adems, al crear una cadena estamos creando a la ve# un o+jeto String asociado. Su utilidad
est en sus m0todos, entre los que ca+e destacar!
char2t#pos$
charCode2t#pos$
.evuelven el caracter o el c)digo num0rico del carcter que est en la posici)n indicada de la
cadena. (l ltimo no &unciona en (xplorer ?.
index!f#subcadena$
.evuelven la posici)n de la su+cadena dentro de la cadena, o C: en caso de no estar.
split#separador$
.evuelven un vector con su+cadenas o+tenidas separando la cadena por el carcter separador. <o
&unciona en (xplorer ?.
cadena = "Navidad,Semana Santa,Verano";
vector = cadena.split(",");
(n el ejemplo, el vector tendr tres elementos con cada una de las vacaciones de un escolar espa-ol
normal.
concat#cadena+$
.evuelve el resultado de concatenar cadena2 al &inal de la cadena. <o &unciona en (xplorer ? % no
&orma parte del estndar (3MA.
substr#indice' longitud$
substring#indice3' indice+$
.evuelven una su+cadena de la cadena, %a sea cogiendo un nmero de caracteres a partir de un
'ndice o pillando todos los caracteres entre dos 'ndices.
to4o5erCase#$
to6pperCase#$
Trans&orman la cadena a minsculas % ma%sculas, respectivamente.
9.6 Objeto Boolean
E+jeto creado para crear con&usiones a los programadores. Se supone que sirve para meter en un o+jeto los
valores l)gicos de verdadero % &also pero resulta que no se pueden utili#ar en condiciones de la manera
ha+itual.
10 Eventos
5n evento, como su mismo nom+re indica, es algo que ocurre. /ara que una rutina nuestra se ejecute s)lo
cuando suceda algo extra-o de+eremos llamarla desde un controlador de eventos. (stos controladores se
asocian a un elemento HTML % se inclu%en as'!
<A HREF="http://home.netscape.com" onMouseOver="MiFuncion()">
10.1 Lista de eventos
Aqu' tienes una peque-a gu'a de eventos de&inidos en JavaScript. /ara ms in&ormaci)n, lee la gu'a de
<etscape.
E"ento Descripcin Elementos 7ue lo admiten
on'oad %erminar de cargarse una pgina
F0U9H...G
FE<2&ESE%...G
onSn'oad Salir de una pgina descargarla" F0U9H...GFE<2&ESE%...G
on&ouseUver )asar el ratn por encima
F2 $<EE..G
F2<E2...G
on&ouseUut Vue el ratn deje de estar encima
F2 $<EE..G
F2<E2...G
onSubmit Enviar un !ormulario FEU<&...G
on.licW )ulsar un elemento F3N)S% %H)EB/button, checWbox, linW, radio/...G
on0lur )erder el cursor
F3N)S% %H)EB/text/...G
F%EQ%2<E2...G
on.hange .ambiar de contenido o perder el cursor
F%EQ%2<E2...G
onEocus .onseguir el cursor
F%EQ%2<E2...G
onSelect Seleccionar texto
F%EQ%2<E2...G
3omo ejemplo, vamos a hacer que una ventana apare#ca automticamente en cuanto pasemos un cursor
por encima de un elemento <A> 1e impidiendo, de paso, que quien est0 viendo la pgina pueda hacer uso del
mismo2.
e"entos.html
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<A HREF="eventos.html" onMouseOver="Alarma()">
Pasa por aqu encima
</A>
</BODY>
</HTML>
10.2 Definicin mediante cdigo
Hemos visto como declarar un controlador de eventos desde etiquetas HTML. Sin em+argo, % desde las
versiones ? de <etscape % 7 de (xplorer, existe otro modo de hacerlo mediante c)digo.
Muchos o+jetos cu%as etiquetas HTML correspondientes permiten atri+utos que de&inen controladores de
evento, permiten el acceso a dichos controladores por medio de propiedades con el mismo nom+re. /or
ejemplo, la pgina!
load3.html
<HTML>
<HEAD>
function Alarma() {
alert("Hola");
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="Saludo()">
...
</BODY>
</HTML>
Se puede reescri+ir como!
load+.html
<HTML>
<HEAD>
function Saludo() {
alert("Hola");
}
window.onload = Saludo;
// -->
</SCRIPT>
</HEAD>
<BODY>
...
</BODY>
</HTML>
11 Modelo de objetos del documento
3uando &unciona en un navegador, el lenguaje JavaScript dispone de una serie de o+jetos que se re&ieren a
cosas como la ventana actual, el documento so+re el que tra+ajamos, o el navegador que estamos
utili#ando. (n los pr)ximos cap'tulos vamos a hacer un peque-o repaso de algunos de ellos con los m0todos
% propiedades ms usados 1los que tenga ganas de contaros, vamos2.
La jerarqu'a de dichos o+jetos toma la siguiente &orma!
/ara los ms iniciados en la programaci)n orientada a o+jetos, conviene aclarar que en esta jerarqu'a, contra
lo que pueda parecer, no existe herencia alguna. Los o+jetos se relacionan por composici)n, es decir, un
o+jeto *indoJ se compone 1entre otras cosas2 de un o+jeto .ocument, % 0ste a su ve# se compone de
diversos o+jetos Horm, 6mage, etc..
(l padre de esta jerarqu'a es el o+jeto *indoJ, que representa una ventana de nuestro navegador. .ado
que cada marco se considera una ventana distinta, cada uno de ellos dispone de su propio o+jeto *indoJ. (l
o+jeto .ocument representa el documento HTML % cada uno de los o+jetos que lo componen se
corresponden con diversas etiquetas HTML.
12 Objeto Window
(s el o+jeto principal. .e&ine la ventana so+re la que estamos tra+ajando e inclu%e los o+jetos re&erentes a la
+arra de tareas, el documento o la secuencia de direcciones de la ltima sesi)n. (n este cap'tulo veremos
los m0todos % propiedades ms utili#adas, al menos por m', dejando el estudio de dichos o+jetos para sus
cap'tulos correspondientes.
An cuando el o+jeto se llame Window, disponemos siempre de una re&erencia a 0l llamada window 1recordad
que Javascript distingue entre ma%sculas % minsculas2. Ser con esa re&erencia con la que tra+ajemos.
(ste hecho ser comn a todos los o+jetos del .EM.
/or ltimo, indicar que en Javascript, se supone que todas las propiedades % m0todos que llamamos sin
utili#ar ninguna re&erencia, en realidad se hacen utili#ando utili#ando esa re&erencia window. As', por ejemplo,
cuando ejecutamos el m0todo alert en realidad lo que estamos haciendo es ejecutar el m0todo
window.alert.
&8ariable9(&5indo5.(open#64' nombre' propiedades$
/ermite crear 1% a+rir2 una nueva ventana. Si queremos tener acceso a ella desde la ventana donde
la creamos de+eremos asignarle una varia+le, si no simplemente invocamos el m0todo! el navegador
automticamente sa+r que pertenece al o+jeto window. (l parmetro URL es una cadena que
contendr la direcci)n de la ventana que estamos a+riendo! si est en +lanco, la ventana se a+rir
con una pgina en +lanco. (l nombre ser el que queramos que se utili#e como parmetro de un
TARGET % las propiedades son una lista separada por comas de algunos de los siguientes
elementos!
toolbarXB#esLnoY
locationXB#esLnoY
directoriesXB#esLnoY
statusXB#esLnoY
menubarXB#esLnoY
scrollbarsXB#esLnoY
resiPableXB#esLnoY
MidthBpixels
heightBpixels
.e+emos tener cuidado con las propiedades que modi&iquemos, es posi+le que algunas
com+inaciones de los mismos no &uncionen en todos los navegadores. (l (xplorer 7, por ejemplo, da
error ante la com+inaci)n toolbar=no, directories=no, menubar=no. "eamos un ejemplo!
"entanas.html
<HTML>
<HEAD>
function AbrirVentana() {
MiVentana=open("","MiPropiaVentana",
"toolbar=no,directories=no,menubar=no,status=yes");
MiVentana.document.write(
"<HEAD><TITLE>Una nueva ventana</TITLE></HEAD>");
MiVentana.document.write("<CENTER><H1><B>" +
"Esto puede ser lo que tu quieras</B></H1></CENTER>");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton1" VALUE="Abreme, Ssamo"
onClick="AbrirVentana()">
</FORM>
</BODY>
</HTML>
(ste ejemplo muestra la posi+ilidad de a+rir nuevas ventanas de nuestro navegador con JavaScript.
Se llama a la &unci)n AbrirVentana desde el evento onClick, como %a sa+emos hacer desde el
primer ejemplo. (sta &unci)n crea la nueva ventana MiVentana % escri+e en ella por medio del o+jeto
Document 1tranquilos, en el pr)ximo cap'tulo se estudiar este o+jeto2 todo el c)digo HTML de la
pgina. Aqu' de+ajo pod0is pro+arlo.
close#$
3ierra la ventana. A no ser que ha%amos aca+ado de a+rirla nosotros mostrar al usuario una
ventana de con&irmaci)n para que decida 0l si quiere o no cerrarla. (sto se hace por motivos de
seguridad, %a que ser'a demasiado &cil hacer un script de esos mal intencionados que nos cerrase
la ventana del navegador, con lo que &astidia eso.
alert#mensaje$
Muestra una ventana de dilogo con el mensaje especi&icado.
confirm#mensaje$
Muestra una ventana de dilogo con el mensaje especi&icado % dos +otones. Si el usuario pulsa EK,
el m0todo devuelve true. Si, en cam+io, pulsa 3ancelar, devolver false.
prompt#mensaje' sugerencia$
Muestra una ventana de dilogo con el mensaje especi&icado % un campo de texto en el que el
usuario pueda teclear, cu%o valor inicial ser igual a sugerencia. Si el usuario pulsa EK, el m0todo
devuelve la cadena introducida en el campo de texto. Si, por el contrario, pulsa 3ancelar, devolver
el valor null. .ado que este valor se considera igual a false, podemos compra+arlo directamente
en una condici)n para ver que ha hecho el usuario.
/or ejemplo, el siguiente c)digo muestra un saludo s)lo si el usuario ha pulsado el +ot)n de Aceptar!
var contestacion = prompt("Cmo te llamas, criatura?", "");
if (contestacion)
alert("Hola, " + contestacion);
status
.e&ine la cadena de caracteres que saldr en la +arra de estado en un momento dado.
defaultStatus
.e&ine la cadena de caracteres que saldr por de&ecto en la +arra de estado. 3uando no la
especi&icamos, defaultStatus ser igual al ltimo valor que tom) status.
set,imeout#:funcin:'tiempo$
Llama a funcin cuando ha%an pasado tiempo milisegundos. 6mprescindi+le a la hora de reali#ar
cualquier rutina que de+a ejecutarse a cierta velocidad.
12.1 La barra de estado
(n muchas pginas Je+ se puede o+servar c)mo sus creadores controlan por completo la +arra de estado
del navegador. >ui# tam+i0n ha%as visto esos scrolls tan +onitos, % que tan rpido cansan. Ahora vo% a
explicar c)mo se hacen am+as cosas, utili#ando los que %a hemos visto del o+jeto *indoJ.
/ara empe#ar vamos con lo ms sencillito! escri+ir mensajes diversos en la +arra de estado. (n el cap'tulo
en que ha+l+amos so+re los o+jetos prede&inidos aparec'a el o+jeto window. (n este o+jeto se de&in'an dos
atri+utos! status % defaultStatus. /ara poner un mensaje en la +arra de estado nada ms cargar el
documento % que se mantenga ah' mientras no ha%a otro ms importante 1un sustituto del &amoso Document:
Done del <etscape, vamos2 haremos!
<BODY onLoad=
"window.defaultStatus='El documento ya se ha ledo';return true">
(l c)digo lo nico que hace es modi&icar defaultStatus % devolver true como resultado del controlador de
eventos. /or alguna misteriosa ra#)n es o+ligatorio hacer esto cuando modi&icas algo de la +arra de estado.
<o me pregunt0is por qu0, al parecer no es ms que una convenci)n.
Ahora veremos c)mo se puede de&inir el valor de la +arra de estado cuando el rat)n pasa por encima de un
elemento <A>!
<A HREF="MiPagina.html" onMouseOver=
"window.status='Vente a mi psgina';return true">
AHcil, noB @ueno, ahora vamos a ver c)mo se hacen scrolls, que es mas chulo todav'a.
scrolls.html
<HTML>
<HEAD>
<TITLE>Ejemplo</TITLE>
var texto=" Aqu est el mensaje que espero " +
"observes y leas con suma atencin ";
var longitud=texto.length;
function scroll() {
texto=texto.substring(1,longitud-1)+texto.charAt(0);
window.status = texto;
setTimeout("scroll()",150);
}
</SCRIPT>
</HEAD>
<BODY onLoad="scroll();return true;">
Esta es la mejor psgina del mundo conocido.
</BODY>
</HTML>
3omo pod0is ver, la cosa no es ni ms larga ni ms compleja que los ejemplos anteriores. Simplemente
escri+e el texto en la +arra de estado % luego coge el caracter ms a la i#quierda del mismo % lo pone a la
derecha, para despu0s volver a escri+irlo. La nica pega que tiene es c)mo demonios hago para que la
&unci)n se llame cada cierto tiempo predeterminado para ir despla#ando el texto a una velocidad constante.
, la respuesta esta en el m0todo setTimeout.
12.2 Marcos (o frames)
5no de los pro+lemas ms &recuentes a los que se en&renta un programador de Javascript es el manejo de
marcos. (s decir, Ac)mo accedo %o al c)digo o a o+jetos como Window o Document de otros marcosB
Javascript propone una manera +astante sencilla de hacerlo.
Javascript considera el documento de declaraci)n de marcos 1es decir, aquel en el que escri+imos las
etiquetas FRAME % FRAMESET2 como un o+jeto Window normal % corriente. /ermite acceder a los marcos que
hemos declarado en 0l por medio del vector frames. (s decir, si en nuestro documento estuviera la siguiente
l'nea!
<FRAME NAME="principal" SRC="MiPagina.html">
/odr'amos acceder a su o+jeto Window por medio de la re&erencia window.frames["principal"].
A su ve#, desde el documento $hijo$, es decir, desde el documento que est encerrado en un marco,
podemos acceder al padre por medio de la re&erencia parent. Tam+i0n podemos acceder al documento que
est0 arri+a del todo en esta jerarqu'a por medio de top. /or ejemplo!
window == window.top
(sta igualdad compro+ar si nuestro documento est en la ventana principal o en un marco. 3omprue+a si la
ventana en la que est 1window2 es igual a la ventana principal 1window.top2. Mediante esta sencilla
compro+aci)n podemos crear &cilmente 1toda ve# que cono#camos el manejo del o+jeto Location2, rutinas
que aseguren que nuestra ventana es la principal, o que recarguen nuestra estructura de marcos si algn
usuario pretende acceder a un marco espec'&ico, etc..
13 Objeto Document
(ste o+jeto representa el documento HTML en el que estamos. Se accede a 0l por medio de la re&erencia
document. Su ma%or importancia viene por el nmero de vectores que posee, que re&erencian a o+jetos
Image, Form o Link, los cuales permiten acceder a las imgenes, &ormularios % enlaces del documento,
respectivamente.
Tam+i0n dispone de varios m0todos para tra+ajar con coo4ies, pero eso lo veremos en otro cap'tulo.
lastModified
3ontiene la &echa % hora en que se modi&ic) el documento por ltima ve# % se suele usar en
conjunci)n con write para a-adir al &inal del documento estas caracter'sticas.
bgColor
Modi&ica el color de &ondo del documento. (l color de+er estar en el &ormato usado en HTML. (s
decir, puede ser red o FF0000.
forms&(
"ector que contiene los &ormularios del documento. (l primero ser el nmero 9, el segundo el :,
etc..
images&(
"ector que contiene las imgenes del documento. Se ordenan igual que en el anterior caso, aunque
tam+i0n permiten ser accedidas con el nom+re como 'ndice. (s decir, a una imagen de&inida como
<IMG SRC=".." NAME="miImagen"> se puede acceder con document.inages["miImagen"].
lin;s&(
"ector que contiene los enlaces del documento. Se ordenan igual que en los dos anterioers, aunque
no se suele utili#ar en el c)digo Javascript. Su ra#)n de ser es que, al ser los enlaces o+jetos,
permiten incluir c)digo Javascript en ellos por medio de la pseudoC5DL javascript:codigo.
5rite#cadena$
5riteln#cadena$
(scri+e el c)digo HTML indicado en cadena en nuestro documento HTML. writeln hace lo mismo,
pero inclu%endo al &inal un retorno de carro.
open#$
A+re un nuevo documento para escri+ir. 5n documento de+e estar a+ierto para poder escri+ir en 0l.
Sin em+argo, no se utili#a mucho %a que los dos m0todos anteriores a+ren automticamente el
documento si no lo est %a.
close#$
3ierra el documento, impidiendo escri+ir de nuevo en 0l.
13.1 Cmo escribir en el documento
A la hora de escri+ir en un documento por medio de write o writeln ha% que tener en cuenta un hecho
&undamental. /ara poder escri+ir en un documento, 0ste de+e estar a+ierto %, al abrirlo, se destruye todo el
c)digo que $aya en ,l.
5n documento se a+re automticamente cuando empie#a a cargarse % se cierra cuando termina de hacerlo.
As' pues, si deseamos escri+ir en un documento si so+reescri+ir su contenido, de+eremos hacerlo antes de
que 0ste termine de cargar. Si lo hacemos despu0s, so+reescri+iremos su contenido. /or lo tanto!
escribir.html
<HTML>
<HEAD>
<TITLE>Escribe y no sobreescribe</TITLE>
</HEAD>
<BODY>
Este es un documento muy interesante y que fue modificado por ltima vez el da
document.write(document.lastModified);
</SCRIPT>
</BODY>
</HTML>
(ste ejemplo os mostrar la cadena completa, %a que se llama a write antes de cerrarse el documento. (s
decir, antes de que termine de cargar. Sin em+argo, el siguiente ejemplo!
sobreescribir.html
<HTML>
<HEAD>
<TITLE>Sobreescribe</TITLE>
function escribir() {
document.write("Este es un documento muy interesante y " +
"que fue modificado por ltima vez el da");
document.write(document.lastModified);
}
</SCRIPT>
</HEAD>
<BODY onLoad="escribir()">
Hola.
</BODY>
</HTML>
So+reescri+ir el documento % no podremos ver ese $Hola$, al ser llamado despu0s de cargar el documento,
es decir, despu0s de cerrarlo.
14 Cookies
/arece ms que necesario de&inir algo que lleva el a+surdo nom+re de coo4ie 1literalmente! galletita2. Al
parecer, en (stados 5nidos 1ignoro si tam+i0n en Lran @reta-a2 reci+en ese nom+re las &ichas que dan en
los guardarropas a modo de resguardo. , es un s'mil +astante acertado de lo que son en realidad las coo4ies
cuando ha+lamos de 6nternet.
5na coo4ie es un elemento de una lista que se guarda en el ordenador del visitante. 3ada elemento de esa
lista tiene dos campos o+ligatorios! el nom+re % su valorM % uno opcional! la &echa de caducidad. (ste ltimo
campo sirve para esta+lecer la &echa en la que se +orrar la galleta. Tiene este &ormato!
nombre=valor;[expires=caducidad;]
S)lo el servidor que ha enviado al usuario una determinada coo4ie puede consultarla. 3ada una tiene un
tama-o mximo de 7 K+ % puede ha+er un mximo de ?99 coo4ies en el disco duro. 3ada servidor podr
almacenar como mucho 89 galletas en el &ichero cookies.txt 1en el caso de usar <etscape2 o en el
directorio cookies 1si utili#amos (xplorer2 del usuario. Si no especi&icamos la &echa de caducidad la $galleta$
se +orrar del disco duro del usuario en cuanto 0ste cierre el navegador.
14.1 Funciones bsicas
/ara poder hacer algo con coo4ies de+eremos programar dos &unciones! una que se encargue de mandar
una coo4ie al usuario % otra que consulte su contenido.
function mandarGalleta(nombre, valor, caducidad) {
document.cookie = nombre + "=" + escape(valor)
+ ((caducidad == null) ? "" : ("; expires=" + caducidad.toGMTString()))
}
3on esta &unci)n mandamos una galleta. "emos que el valor es codi&icado por medio de la &unci)n escape %
que la caducidad 1en caso de decidir ponerla2 de+e ser convertida a &ormato LMT. (sto se hace mediante el
metodo toGMTString() del o+jeto Date.
function consultarGalleta(nombre) {
var buscamos = nombre + "=";
if (document.cookie.length > 0) {
i = document.cookie.indexOf(buscamos);
if (i != -1) {
i += buscamos.length;
j = document.cookie.indexOf(";", i);
if (j == -1)
j = document.cookie.length;
return unescape(document.cookie.substring(i,j));
}
}
}
.eclaramos la varia+le +uscamos que contiene el nom+re de la coo4ie que queremos +uscar ms el igual
que se escri+e justo despu0s de cada nom+re, para que as' no encontremos por error un valor o una
su+cadena de otro nom+re que sea igual al nom+re de la coo4ie que +uscamos. 5na ve# encontrada
extraemos la su+cadena que ha% entre el igual que separa el nom+re % el valor % el punto % coma con que
termina dicho valor.
14.2 Un ejemplo: el contador individualizado
"amos a ver un ejemplo. 5tili#aremos una galleta llamada VisitasAlCursoDeJavaScript para guardar el
nmero de veces que has visitado este curso!
coo;ies.txt
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
Por lo que veo,

</SCRIPT>
</BODY>
</HTML>
La &unci)n consulta el valor de la coo4ie incrementandolo %, si no existe, lo pone a uno. Luego escri+e en el
documento el nmero de veces que has visitado el curso.
15Objeto Image
(ste o+jeto representa a una imagen. Se puede acceder a las diversas imgenes del documento por medio
del vector de re&erencias document.images[]. (ste o+jeto est disponi+le desde el <etscape ? % el (xplorer
7. Sus propiedades ms importantes son!
src
3ontiene el archivo de la imagen.
lo5src
Los navegadores admiten incluir un nom+re de imagen que se cargue antes que la imagen &inal. (s
til para poner una imagen que ocupe poco mientras esperamos que se cargue la imagen &inal, que
puede ocupar una cantidad insultante de espacio. (sta propiedad permite accede al archivo de esa
primera imagen peque-a.
complete
"alor l)gico que ser true si la imagen ha terminado %a de cargarse.
Tam+i0n dispone de diversas propiedades de s)lo lectura que se corresponden con los atri+utos de la
etiqueta <IMG> como, por ejemplo, width o border.
15.1 Tratamiento de imgenes
Lo que vamos a lograr con este truco es un peque-o cam+io de imgenes. (n muchas pginas, al pasar el
rat)n por encima de una imagen puedes o+servar que el gr&ico cam+ia. /ara hacer esto de+eremos crear
dos gr&icos distintos! el que se ver normalmente % el que nicamente podr verse cuando el rat)n pase por
encima. Si llamamos al primero, por ejemplo, apagado.gif % al segundo encendido.gif el c)digo necesario
para que el truco &uncione es!
imagenes.html
<HTML>
<HEAD>
<TITLE>Ejemplo de imagenes</TITLE>
if (document.images) {
var activado=new Image();
activado.src="encendido.gif";
var desactivado= new Image();
desactivado.src="apagado.gif";
}
function activar(nombreImagen) {
document[nombreImagen].src=activado.src; }
}
function desactivar(nombreImagen) {
document[nombreImagen].src=desactivado.src; }
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="mipagina.html" onMouseOver="activar('prueba');"
onMouseOut="desactivar('prueba');">
<IMG NAME="prueba" SRC="apagado.gif" BORDER=0>
</A>
</BODY>
</HTML>
Lo primero que ha% que indicar es que para que &uncione el invento la imagen de+e ser un enlace. A/or qu0B
/orque los eventos que controlan si el rat)n pasa o no por encima no son admitidos por la etiqueta <IMG>.
Tam+i0n de+eremos $+auti#ar$ nuestra imagen usando el atri+uto NAME="como-se-llame" para permitir al
c)digo su identi&icaci)n posterior.
(l ejemplo &unciona de la siguiente manera! en principio la imagen que vemos es la desactivada, que es la
que indica la etiqueta <IMG>. Al pasar el raton por encima de ella el evento onMouseOver llamar a la &unci)n
activar llevando como parmetro el nom+re de la imagen. (sta &unci)n sustituir en el o+jeto document el
nom+re del &ichero donde se guarda la imagen por encendido.gif, que es el gr&ico activado. 3uando
apartemos el rat)n de la imagen, ser el evento onMouseOut el que se active, llamando a desactivar. (sta
&unci)n sustituir el gr&ico de nuevo, esta ve# por apagado.gif.
Le%endo esta explicaci)n parece que una parte del c)digo so+ra. A/ara qu0 sirve declarar dos o+jetos Image
para al+ergar los gr&icosB A<o +astar'a con cam+iar directamente el nom+re de la imagen escri+iendo
document[nombreImagen].src = 'encendido.gif';B /ues no del todo. (&ectivamente &uncionar'a, pero
cada ve# que cam+isemos el nom+re, el navegador se traer'a la imagen del remoto lugar donde se
encontrara. (s decir, cada ve# que passemos el rat)n por encima de la imagen o nos alejaramos de ella
tendr'amos que cargar 1aunque %a lo hu+i0semos hecho antes2 el gr&ico correspondiente. (s cierto que con
la cach0 del navegador este e&ecto quedar'a algo mitigado, pero siempre es mejor precargar las imgenes
usando el o+jeto Image, %a que as' el navegador comen#ar a leer el gr&ico en cuanto ejecute el c)digo en
ve# de esperar a que el usuario pase por encima de la imagen con el rat)n. (l o+jeto Image tiene como
atri+utos los distintos parmetros que puede tener la etiqueta <IMG>.
/or ltimo, ha% que estudiar que signi&ica eso de if (document.images). Los navegadores en que no exista
el o+jeto Image darn un mensaje de error si se lo encuentran por ah'. La soluci)n a este pro+lema consiste
en detectar la capacidad del navegador para manipular gr&icos preguntandole por la existencia del vector
document.images. As' podremos no crear las varia+les que guardan los gr&icos ni ejecutar el c)digo de las
&unciones para activar % desactivar en el caso de que el navegador no soporte este vector.
16 Objeto Form
Los &ormularios siempre han sido la mejor manera de &acilitar la comunicaci)n entre los usuarios % los
creadores de una Je+. Sin em+argo, la implementaci)n de los mismos en el lenguaje HTML ha provocado
ciertos pro+lemas de+ido a sus carencias. (stos pro+lemas han intentado solventarse con scripts, situados
tanto en el servidor como en el navegador.
Los programas al+ergados en el servidor suelen ser scripts 3L6 %, por supuesto, no vamos a investigarlos en
un curso de JavaScript. Solamente decir que existen in&inidad de ellos % que, en general, los +uenos
proveedores de espacio Je+ tienen alguno disponi+le para sus usuarios, con instrucciones de uso incluidas.
Los programas que se ejecutan en el navegador suelen estar escritos en JavaScript, % reali#an tareas
simples de validaci)n. (n muchas ocasiones estn com+inados con scripts 3L6 que modi&ican el mensaje
generado por un &ormulario para &acilitar su lectura % manejo.
(l vector document.forms contiene todos los &ormularios de un documento. As', se acceder'a al primer
&ormulario de&inido como document.forms[0]. Sin em+argo, si usamos el parmetro NAME en la etiqueta
HTML!
<FORM NAME="miFormulario">
entonces podremos acceder al &ormulario con document.miFormulario, que resulta +astante ms c)modo %
esta+le ante la posi+ilidad de variaci)n del nmero % posici)n de &ormularios en el documento. (stos son los
m0todos % propiedades del o+jeto Horm!
submit#$
(nv'a el &ormulario.
reset#$
.evuelve los valores de un &ormulario a su estado inicial.
elements&(
3ontiene todos % cada uno de los elementos de los que consta el &ormulario, es decir, los +otones,
cajas de textos, listas desplega+les, etc. que componen un &ormulario. 3ada elemento puede ser un
o+jeto distinto, por lo que de+eremos averiguar de qu0 tipo son por medio de la propiedad comn
type.
16.1 Objetos Text
3uatro elementos HTML distintos 1text, textarea, passJord % hidden2 son, desde el punto de vista del .EM,
o+jetos tan parecidos entre s' que vamos a estudiarlos conjuntamente. (n realidad, s)lo tienen tres
propiedades verdaderamente importantes!
name
<om+re del elemento, indicado en el atri+uto NAME de su etiqueta HTML. (ste atri+uto est presente
en todos los o+jetos que son elementos de un &ormulario.
t/pe
Tipo del elemento. Al igual que el anterior, esta propiedad est presente en todos los o+jetos que
representan elementos de un &ormulario. (n el caso de los que nos ocupan valdr siempre "text".
"alue
3ontiene el valor, es decir, el texto tecleado por el usuario. (s a esta propiedad a la que
accederemos ha+itualmente.
3omo ejemplo de su uso, vamos a ver ahora el c)digo de nuestro primer &ormulario con validaci)n, que
comprue+a si la direcci)n de correo electr)nico que introduce el usuario es correcta!
formularios.html
<HTML>
<HEAD>
<TITLE>Ejemplo de formularios</TITLE>
function validar(direccion) {
if (direccion.indexOf("@") != -1)
return true;
else {
alert('Debe escribir una direccin vlida');
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="miFormulario"
METHOD="POST"
ACTION="mailto:yo@miproveedor.mipais"
ENCTYPE="text/plain"
onSubmit="return validar(this.email.value)">
Mandame tu e-mail: <INPUT NAME="email" TYPE="text"><BR>
<INPUT TYPE="submit" VALUE="Mandame tu e-mail">
</FORM>
</BODY>
</HTML>
(l c)digo es sencillo! el c)digo llamado por el controlador de evento onSubmit de+e devolver false si
deseamos que el &ormulario no sea enviado. As' pues, llamamos a la &unci)n que comprue+a si ha% alguna
arro+a en el campo email del &ormulario.
La manera de llamar a esta &unci)n es qui#s lo ms complicado. La &unci)n validar reci+e una cadena de
caracteres, devolviendo verdadero o &also dependiendo de que ha%a o no una arro+a dentro de ella. (l
controlador utili#a para llamar a esta &unci)n lo siguiente!
this.email.value
this es una re&erencia estndar. 3uando veamos this en algn c)digo en realidad de+eremos sustituirlo
mentalmente por el nom+re del o+jeto en el que est el c)digo. (n este caso, como estamos dentro de
miFormulario, this ser equivalente a document.miFormulario. email es el nom+re del campo que
queremos investigar % value el el atri+uto que contiene lo que ha%a tecleado el usuario.
&andame tu e4mailZ
Mandame tu eCmail
16.2 Objetos Checkbox y Radio
(n estos o+jetos, tanto el atri+uto HTML VALUE como su correspondiente propiedad value accesi+le desde
Javascript no corresponden a nada visi+le. (n am+os casos, el estado del elemento es de tipo l)gico! puede
estar seleccionado o no. (ste valor l)gico se contiene en la propiedad checked.
/or tanto, para compro+ar si est pulsado o no una caja de con&irmaci)n o un +ot)n de selecci)n espec'&ico
de+eremos preguntar por dicha propiedad.
"amos a ver un ejemplo prctico de uso! os vo% a hacer un peque-o examen, para ver cuanto JavaScript
ha+0is aprendido. (spero que ningn pro&esor utilice este ejemplo para reali#ar sus exmenes, %a que
cualquiera puede averiguar las respuestas o+servando el c)digo. Aqu' ten0is el examen!
La estructura a N + B c ! dM es...
un +ucle
una operaci)n aritm0tica
una condici)n
(l atri+uto JindoJ.status contiene!
el valor de la +arra de estado
el valor por de&ecto de la +arra de estado
ciertas caracter'sticas de la ventana
(l evento load ocurre!
cuando termina de cargarse una pgina
cuando termina de cargarse un gr&ico
cuando empie#a a cargarse una pgina
A>ue array contiene los gr&icos de una pginaB
document.graphics
document.images
no ha% ninguno
(l m0todo alert sirve para!
hacer sonar un pitido de alarma
lan#ar una ventana con in&ormaci)n
decirle al navegador que ha% un pro+lema con el c)digo
>uiero sa+er mi nota
<o os vo% a poner el c)digo que si no me averiguais las respuestas, tramposillos... Simplemente comprue+a
que cada elemento del &ormulario de tipo radio seleccionado tiene el atri+uto VALUE igual a "bien".
Teniendo en cuenta que el vector elements contiene todos los elementos de un &ormulario, el c)digo
resultante es el siguiente!
function averiguarNota(examen) {
var resultado=0;
for (i=0;i<examen.elements.length;i++)
if ((examen.elements[i].type=="radio") &&
(examen.elements[i].value=="bien") &&
(examen.elements[i].checked))
resultado++;
alert("Acertaste "+resultado+" de 5 preguntas.");
return false;
}
% cada pregunta tiene la siguiente estructura!
<BR>HTML en castellano es
<BR><INPUT TYPE="radio" NAME="Respuesta1" VALUE="mal">
una porquera
<BR><INPUT TYPE="radio" NAME="Respuesta1" VALUE="bien">
el mejor
<BR><INPUT TYPE="radio" NAME="Respuesta1" VALUE="mal">
algo poco reseable
Luego la &unci)n es llamada desde el evento su+mit % %a est. /odr'a ha+erse hecho tam+i0n desde el
evento clic4 de un +ot)n... siempre ha% ms de una manera de hacer las cosas.
16.3 Objetos Select y Option
(l o+jeto Select es, con mucho, el ms complicado. (sto es de+ido a que contiene en su interior un vector
de o+jetos Option. .ispone de dos propiedades interesatnes!
selected%ndex
(mpe#ando a contar a partir de cero, indica qu0 opci)n est seleccionada. Si ha% varias
seleccionadas, indica la opci)n con el 'ndice ms +ajo.
options&(
"ector que contiene los o+jetos Option correspondientes a todas % cada una de las opciones.
(l o+jeto Option, por otro lado, dispone de otras dos propiedades a estudiar 1aparte de las comunes, como
type o value2!
selected
"alor l)gico que ser verdadero si la opci)n est seleccionada.
text
Texto que acompa-a a la opci)n.
3omo ejemplo, vamos a ver una lista desplega+le que nos permita navegar por diversas pginas. 3ada
etiqueta OPTION tendr como parmetro VALUE la direcci)n de la pgina Je+ e incluiremos un controlador del
evento onChange 1que se ejecuta cuando el usuario cam+ia la opci)n escogida en la lista2 que llamar a una
rutina que explicamos ms adelante!
select.html
<HTML>
<HEAD>
<TITLE>Ejemplo de Select</TITLE>
function irA(menu){
window.location.href = menu.options[menu.selectedIndex].value;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="formulario">
<SELECT NAME="menu" SIZE=1 onChange ="irA(this)">
<OPTION VALUE="">Visitar
<OPTION VALUE="http://www.ole.es">¡Olé!
<OPTION VALUE="http://www.ozu.es">Ozú
<OPTION VALUE="http://www.ozu.com">Otro ozú
<OPTION VALUE="http://www.es.lycos.de">Lycos
<OPTION VALUE="http://www.metabusca.com">Metabusca
</SELECT>
</FORM>
</BODY>
</HTML>
La &unci)n irA simplemente utili#a la opci)n elegida para o+tener por medio de su valor la direcci)n de la
pgina a la que de+e acudir.
17 Otros objetos
(l modelo de o+jetos del documento de&ine varios o+jetos, por as' decirlo, $menores$, que no tienen relaci)n
con nada &'sico de la pgina en la que estamos. (s decir, no guardan relaci)n con las etiquetas HTML que
est0n en ellas escritas. Son los siguientes!
17.1 Objeto History
Se accede a este o+jeto por medio de la re&erencia document.history % contiene todas las direcciones que
se han visitado en la sesi)n actual. Aunque no permite acceder a ellas 1para que no podamos cotillear
demasiado al usuario2, dispone de varios m0todos para sustituir el documento actual por alguno que el
usuario %a ha%a visitado!
bac;#$
"olver a la pgina anterior. (s mu% sencillo de utili#ar!
<A HREF="javascript:window.history.back()">
,, para variar, si deseas pro+ar no tienes ms que pulsar aqu'.
for5ard#$
6r a la pgina siguiente.
go#donde$
6r a donde se indique, siendo donde un nmero tal que go(1)=forward() % go(-1)=back().
17.2 Objeto Location
Se accede a este o+jeto por medio de la re&erencia document.location % contiene in&ormaci)n so+re la
direcci)n de la pgina actual en varias propiedades.
href
/ermite el acceso a la direcci)n de la pgina actual. Si lo cam+iamos, pues cam+iaremos de pgina.
protocol
/rotocolo de la pgina actual. Ha+itualmente http.
host
Mquina donde se al+erga la pgina actual. (n el caso de la que ests le%endo, ser'a
html.programacion.net.
pathname
3amino de la pgina actual. (n nuestro ejemplo, ser /js/otrosobjetos.htm.
hash
Si hemos accedido a una pgina por medio de un ancla, contiene una almohadilla seguida de ese
ancla. /or ejemplo, #location.
search
/uede que hallas notado que muchas pginas 1especialmente en los motores de +squeda2 tienen
unas direcciones inmensas con una estructura como pagina.asp?
busqueda=HTML+en+castellano&tipo=Y o engendros semejantes. (sta propiedad permite acceder
a esa ltima parte de la direcci)n 1a partir de la interrogaci)n, inclusive2. /uede ser til para pasar
parmetros de una pgina a otra.
17.3 Objeto Navigator
Se accede a 0l por medio de la re&erencia navigator % nos permite averiguar varias caracter'sticas del
navegador que usamos. /or ejemplo!
app*ame
<om+re del navegador.
app8er
<mero principal de versi)n.
language
6dioma del mismo.
platform
/lata&orma donde esta ejecutndose.
<o podemos so+reescri+ir estos atri+utos, pero s' leerlos.
17.4 Objeto Screen
3omo ca+'a esperarse, se puede acceder a este o+jeto por medio de la re&erencia... chachaaaan OscreenP
<os permitir conocer la con&iguraci)n de la pantalla del usuario. Al igual que en el anterior o+jeto, todos sus
atri+utos son de s)lo lectura. 3onviene indicar que este o+jeto s)lo est disponi+le desde las versiones 7.9
de am+os navegadores.
height
Altura de la resoluci)n de la pantalla.
5idth
Anchura de la resoluci)n de la pantalla.
pixelDepth
<mero de +its por pixel.
As', por ejemplo, te puedo decir que en este momento tu pantalla est con&igurada para
:987xFIQx78;7;IF8;I colores. , el c)digo que he utili#ado para averiguarlo es el siguiente!
if (window.screen)
texto=screen.width + "x" + screen.height + "x" +
Math.pow(2,screen.colorDepth) + " colores.";
else
texto="quien sabe cuantos colores, que necesito " +
"que tengas Communicator o IE4 para averiguarlo.";
document.write(texto);
/uede verse que antes de acceder al o+jeto, investigo si 0ste existe, mostrando un mensaje de
circunstancias en caso de que no sea as'.
18 Ficheros .js
5n &ichero .js es un archivo donde podremos guardar &unciones % varia+les glo+ales que podrn leerse desde
cualquier pgina HTML. Lracias a ellos podremos evitar el tener que duplicar &unciones que se necesiten en
ms de un documento. /odremos incorporarlos a nuestras pginas de esta manera!
externo.html
<HTML>
<HEAD>
<TITLE>Mi Pgina</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="funciones.js">

</SCRIPT>
</HEAD>
<BODY>
Lo que sea.
</BODY>
</HTML>
(l c)digo que inclu%amos entre un RS3D6/T SD3S % un RTS3D6/TS s)lo se ejecutar en caso de que la
lectura del &ichero .js &alle.
/or otra parte, ha% que indicar que el &ichero en cuesti)n contendr s)lo c)digo en Javascript, no etiquetas
HTML de ningn tipo, ni siquiera las de apertura % cierre de SCRIPT.

Curso de Javascript by Priale

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso de Javascript by Priale

Cargado por

Copyright:

Formatos disponibles

Curso de Javascript

Manual del alumno

También podría gustarte