Manual Programacion Javascript Parte2

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.
com
Programacin en Javascript II
En este manual explicamos todos los recursos con los que cuenta un programador de Javascript para crear todo tipo de efectos y aplicaciones.
Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez
Director de DesarrolloWeb.com http://www.desarrolloweb.com (44 captulos)
Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

os manuales de DesarrolloWeb.com tienen el cop!right de sus autores. "o reproducir sin autorizaci#n.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Parte 1:
Introduccin a la segunda parte del Manual de Javascript

En esta segunda parte partimos de la base $ue las personas conocen el lengua%e ! la sinta&is ! 'amos a 'er c#mo utilizarlo para hacer programaci#n de p(ginas enri$uecidas del lado del cliente.
1.1.- Introduccin al manual II de Javascript

Empezamos el segundo manual de Javascrip con un repaso a los temas que vamos a cubrir. En esta segunda parte del manual de Javascript vamos a tratar de explicar todos los recursos con los que cuenta un programador de Javascript y con los que puede crear todo tipo de efectos y aplicaciones. Para leer y entender bien lo que viene en los siguientes captulos es necesario haber ledo antes la primera parte de este manual: Programacin en Javascript I donde se explican las bases sobre las que tenemos que asentar los siguientes conocimientos. En la primera parte de este manual conocimos los orgenes y las aplicaciones de Javascript pero sobretodo hicimos hincapi! en su sintaxis muy importante para entender los scripts que haremos en los siguientes captulos. "os ob#etivos de los siguientes captulos cubrir$n aspectos diversos de Javascript como: %unciones incorporadas en el lengua#e Javascript "os ob#etos en Javascript Jerarqua de ob#etos del navegador &raba#o con formularios 'ontrol de ventanas secundarias y frames Eventos
'omo se puede ver todos los temas tienen un fuerte car$cter pr$ctico y cubren aspectos varios con los que formarnos a nivel avan(ado en Javascript. Esperamos que sirvan para iluminar un $rea tan amplia del desarrollo de p$ginas )eb como es el scripting del lado del cliente. *dem$s ya fuera de este manual te recordamos que en +esarrollo,eb.com tienes disponibles muchos m$s artculos y manuales dedicados a este lengua#e que te servir$n para profundi(ar en la materia como los frame)or-s #.uery o /ootools traba#o con im$genes canvas as como videotutoriales para los que prefieran aprender con vdeo. * todo ello podr$s acceder desde la seccin Javascript a fondo0 1amos sin m$s pausa con esta segunda parte del manual que resultar$ mucho m$s entretenida y pr$ctica que la primera.
Artculo por

Parte 2:
Clases y objetos nativos de Javascript

)a'ascript dispone de un con%unto de clases ! ob%etos $ue podemos utilizar para realizar operaciones di'ersas. *odos ellos +orman una librera de c#digo $ue nos +acilitar( la 'ida cuando hagamos los programas o scripts.
2.1.- Libreria de funciones Javascript

Javascript, al igual que cualquier otro lenguaje, pone a nuestra disposicin un conjunto de funciones que llamamos funciones nativas de Javascript. En todos los lengua#es de programacin existen libreras de funciones que sirven para hacer cosas diversas y muy repetitivas a la hora de programar. "as libreras de los lengua#es de programacin ahorran la tarea de escribir las funciones comunes que por lo general pueden necesitar los programadores. 2n lengua#e de programacin bien desarrollado tendr$ una buena cantidad de ellas. En ocasiones es m$s complicado conocer bien todas las libreras que aprender a programar en el lengua#e. Javascript contiene una buena cantidad de funciones en sus libreras. 'omo se trata de un lengua#e que traba#a con ob#etos muchas de las libreras se implementan a trav!s de ob#etos. Por e#emplo las funciones matem$ticas o las de mane#o de strings se implementan mediante los ob#etos /ath y 3tring. 3in embargo existen algunas funciones que no est$n asociadas a ning4n ob#eto y son las que veremos en este captulo ya que todava no conocemos los ob#etos y no los necesitaremos para estudiarlas. Estas son las funciones que Javascript pone a disposicin de los programadores. eval(string) Esta funcin recibe una cadena de caracteres y la e#ecuta como si fuera una sentencia de Javascript. parseInt(cadena,base) 5ecibe una cadena y una base. +evuelve un valor num!rico resultante de convertir la cadena en un n4mero en la base indicada. parseFloat(cadena) 'onvierte la cadena en un n4mero y lo devuelve. escape(carcter) +evuelve un el car$cter que recibe por par$metro en una codificacin I36 "atin 7. unescape(carcter) 8ace exatamente lo opuesto a la funcin escape. isNaN(nmero) +evuelve un boleano dependiendo de lo que recibe por par$metro. 3i no es un n4mero devuelve un true si es un numero devuelve false.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com "as libreras que se implementan mediante ob#etos y las del mane#o del explorador que tambi!n se mane#an con ob#etos las veremos m$s adelante.
Nota: 9o queremos llevar a enga:o a las personas con esta corta lista de funciones nativas de Javascript. 5ealmente existen muchas otras funciones que vamos a ver a lo largo del presente manual lo que ocurre es que est$n asociadas a ob#etos. Por e#emplo como habamos se:alado existen funciones de cadenas de caracteres que est$n asociadas a ob#etos string funciones para traba#o con c$lculos matem$ticos avan(ados que est$n asociadas a la clase /ath funciones para traba#o con el ob#eto de la ventana del navegador con el documento etc.
* continuacin vamos a ver alg4n e#emplo con las funciones m$s importantes de esta lista.
Artculo por
2.2.- E emplos de funciones de la librer!a Javascript

Las funciones nativas de Javascript son bastante importantes. A ora !eremos varios ejemplos de funciones de la librer"a# eval$%, parse&nt$%, is'a'$%. En el anterior artculo del /anual de programacin en Javascript II vimos un listado de las funciones nativas del lengua#e Javascript. *hora podemos ver varios e#emplos de utili(acin de funciones nativas de Javascript que tenemos disponibles en cualquier navegador y en cualquier versin de Javascript. 1eremos tres funciones de diverso $mbito que resultan bastante fundamentales en el traba#o habitual con este lengua#e explicadas a trav!s de e#emplos.
2.2.1.- "uncin eval

Esta funcin es muy importante tanto que hay algunas aplicaciones de Javascript que no se podran reali(ar si no la utili(amos. 3u utili(acin es muy simple pero puede que resulte un poco m$s comple#o entender en qu! casos utili(arla porque a veces resulta un poco sutil su aplicacin. 'on los conocimientos actuales no podemos hacer un e#emplo muy complicado pero por lo menos podemos ver en marcha la funcin. 1amos a utili(arla en una sentencia un poco rara y bastante inservible pero si la conseguimos entender conseguiremos entender tambi!n la funcin eval.
var miTexto = "3 + 5" eval("document.write(" + miTexto +")")
Primero creamos una variable con un texto en la siguiente lnea utili(amos la funcin eval y como par$metro le pasamos una instruccin #avascript para escribir en pantalla. 3i concatenamos los strings que hay dentro de los par!ntesis de la funcin eval nos queda esto.
document.write(3 + 5)
"a funcin eval e#ecuta la instruccin que se le pasa por par$metro as que e#ecutar$ esta sentencia lo que dar$ como resultado que se escriba un ; en la p$gina )eb. Primero se resuelve la suma que hay entre par!ntesis con lo que obtenemos el ; y luego se e#ecuta la instruccin de escribir en pantalla.
2.2.2.- "uncin parseInt

Esta funcin recibe un n4mero escrito como una cadena de caracteres y un n4mero que indica una base. En realidad puede recibir otros tipos de variables dado que las variables no tienen tipo en Javascript pero se suele utili(ar pas$ndole un string para convertir la variable de texto en un n4mero. "as distintas bases que puede recibir la funcin son < ; 7= y 7>. 3i no le pasamos ning4n valor como base la funcin interpreta que la base es decimal. El valor que devuelve la funcin siempre tiene base 7= de modo que si la base no es 7= convierte el n4mero a esa base antes de devolverlo.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 1eamos una serie de llamadas a la funcin parseInt para ver lo que devuelve y entender un poco m$s la funcin.
document.write (parseInt("34"))
+evuelve el numero ?@ +evuelve el numero @? +evuelve el numero <; +evuelve el numero >?
document.write (parseInt("101011" !)) document.write (parseInt("34" ")) document.write (parseInt("3#" 1$))
Esta funcin se utili(a en la pr$ctica para un montn de cosas distintas en el mane#o con n4meros por e#emplo obtener la parte entera de un decimal.
document.write (parseInt("3.3""))
+evuelve el numero ?
&ambi!n es muy habitual su uso para saber si una variable es num!rica pues si le pasamos un texto a la funcin que no sea num!rico nos devolver$ 9a9 A9ot a 9umberB lo que quiere decir que 9o es un 94mero.
document.write (parseInt("desarrollowe%.com"))
+evuelve el numero 9a9
Este mismo e#emplo es interesante con una modificacin pues si le pasamos una combinacin de letras y n4meros nos dar$ lo siguiente.
document.write (parseInt("1$&&3'"))
+evuelve el numero 7>
document.)rite AparseIntAC&D@ECBB +evuelve el numero 9a9 'omo se puede ver la funcin intenta convertir el string en n4mero y si no puede devuelve 9a9. &odos estos e#emplos un tanto inconexos sobre cmo traba#a parseInt los revisaremos m$s adelante en e#emplos m$s pr$cticos cuando tratemos el traba#o con formularios.
2.2.#.- "uncin is$a$

Esta funcin devuelve un boleano dependiendo de si lo que recibe es un n4mero o no. "o 4nico que puede recibir es un n4mero o la expresin 9a9. 3i recibe un 9a9 devuelve true y si recibe un n4mero devuelve false. Es una funcin muy sencilla de entender y de utili(ar. "a funcin suele traba#ar en combinacin con la funcin parseInt o parse%loat para saber si lo que devuelven estas dos funciones es un n4mero o no.
miInte(er = parseInt(")3.$") is*a*(miInte(er)
En la primera lnea asignamos a la variable miInteger el resultado de intentar convertir a entero el texto *?.>. 'omo este texto no se puede convertir a n4mero la funcin parseInt devuelve 9a9. "a segunda lnea comprueba si la variable anterior es 9a9 y como si que lo es devuelve un true.
mi#loat = parse#loat("4.+") is*a*(mi#loat)
En este e#emplo convertimos un texto a n4mero con decimales. El texto se convierte perfectamente porque corresponde con un n4mero. *l recibir un n4mero la funcin is9a9 devuelve un false.
Referencia: 1alidar entero en campo de formulario &enemos un &aller de Javascript muy interesante que ha sido reali(ado para afian(ar los conocimientos de estos captulos. 3e trata de un script para validar un campo de formulario de manera que sepamos seguro que dentro del campo hay siempre un n4mero entero. Puede ser muy interesante leerlo ahora ya que utili(amos las funciones is9a9AB y parseIntAB. 1er el taller

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Esperamos que los e#emplos vistos en este artculo hayan resultado interesantes. 9o obstante como habamos se:alado anteriormente existen bastantes otras funciones nativas en Javascript que debemos conocer pero que est$n asociadas a clases y ob#etos nativos Javascript. Pero antes de pasar a ese punto queremos ofrecer una peque:a gua b$sica para el traba#o con programacin orientada a ob#etos en Javascript.
Artculo por
2.#.- %b etos en Javascript

!emos una primera introduccin al mundo de los objetos en general y en particular en el lenguaje Javascript. 1amos a introducirnos en un tema muy importante de Javascript como son los ob#etos. 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 m$s sencillas las vamos a reali(ar a trav!s del mane#o de ob#etos. +e hecho en los e#emplos reali(ados hasta ahora hemos hecho grandes esfuer(os para no utili(ar ob#etos y aun as los hemos utili(ado en alguna ocasin pues es muy difcil encontrar e#emplos en Javascript que aunque sean simples no hagan uso de ellos. "a programacin orientada a ob#etos AP66B representa una nueva manera de pensar a la hora de hacer un programa. Javascript no es un lengua#e de programacin orientado a ob#etos aunque los utili(a en muchas ocasiones: podemos crear nuevos ob#etos y utili(ar muchos que est$n creados desde un principio. 3in embargo la manera de programar no va a cambiar mucho y lo que hemos visto hasta aqu relativo a sintaxis funciones etc. puede ser utili(ado igual que se ha indicado. 3olo vamos a aprender una especie de estructura nueva. Para empe(ar a empaparnos en este asunto es imprescindible que nos leamos un peque:o artculo publicado en +esarrollo,eb sobre la programacin orientada a ob#etos. +espu!s de su lectura puedes continuar con estas lneas y si conoces ya la P66 contin4a leyendo sin pausa.
2.#.1.- &mo instanciar ob etos

Instanciar un ob#eto es la accin de crear un e#emplar de una clase para poder traba#ar con !l luego. 5ecordamos que un ob#eto se crea a partir de una clase y la clase es la definicin de las caractersticas y funcionalidades de un ob#eto. 'on las clases no se traba#a estas slo son definiciones para traba#ar con una clase debemos tener un ob#eto instanciado de esa clase. En #avascript para crear un ob#eto a partir de una clase se utili(a la instruccin ne) de esta manera.
var mi,%-eto = new mi.lase()
En una variable que llamamos mi6b#eto asigno un nuevo Ane)B e#emplar de la clase mi'lase. "os par!ntesis se rellenan con los datos que necesite la clase para iniciali(ar el ob#eto si no hay que meter ning4n par$metro los par!ntesis se colocan vacos. En realidad lo que se hace cuando se crea un ob#eto es llamar al constructor de esa clase y el constructor es el encargado de crearlo e iniciali(arlo. 8ablaremos sobre esto m$s adelante.
2.#.2.- &mo acceder a propiedades ' m(todos de los ob etos

En Javascript podemos acceder a las propiedades y m!todos de ob#etos de forma similar a como se hace en otros lengua#es de programacin con el operador punto AC.CB. "as propiedades se acceden colocando el nombre del ob#eto seguido de un punto y el nombre de la propiedad que se desea acceder. +e esta manera:
mi,%-eto.mi/ropiedad
Para llamar a los m!todos utili(amos una sintaxis similar pero poniendo al final entre par!ntesis los par$metros que pasamos a los m!todos. +el siguiente modo:
mi,%-eto.mi0etodo(parametro1 parametro!)

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 3i el m!todo no recibe par$metros colocamos los par!ntesis tambi!n pero sin nada dentro.
mi,%-eto.mi0etodo() Nota: 6bviamente el mundo de la programacin orientada a ob#etos en Javascript es mucho m$s amplio de lo que hemos visto en este artculo. *l menos con lo que hemos aprendido tenemos suficiente para encarar los artculos siguientes del /anual de programacin Javascript avan(ada.
En el siguiente artculo veremos una introduccin ob#etos nativos en Javascript y luego empe(aremos a verlos uno por uno de tal modo que podremos practicar todo lo que hemos visto hasta ahora sobre P66.
Artculo por
2.).- %b etos incorporados en Javascript

Lista de los objetos que tenemos a nuestra disposicin a la ora de trabajar con Javascript. "legamos a un punto interesante dentro de la segunda parte del /anual de programacin en Javascript. En estos momentos sabemos ya lo que es la programacin orientada a ob#etos as que vamos a introducirnos en el mane#o de ob#etos en Javascript y para ello vamos a empe(ar con el estudio de las clases predefinidas que implementan las libreras para el traba#o con strings matem$ticas fechas etc. "as clases que se encuentran disponibles de manera nativa en Javascript y que vamos a ver a continuacin son las siguientes: String para el traba#o con cadenas de caracteres. Date para el traba#o con fechas. at! para reali(ar funciones matem$ticas. Number para reali(ar algunas cosas con n4meros "oolean traba#o con boleanos.
Nota: #as clases se escriben con la primera letra en ma$sculas% &iene que quedar claro que una clase es una especie de Cdeclaracin de caractersticas y funcionalidadesC de los ob#etos. +icho de otro modo las clases son descripciones de la forma y funcionamiento de los ob#etos. 'on las clases generalmente no se reali(a ning4n traba#o sino que se hace con los ob#etos que creamos a partir de las clases. 2na ve( comprendida la diferencia entre ob#etos y clases cabe se:alar que 3tring es una clase lo mismo que +ate. 3i queremos traba#ar con cadenas de caracteres o fechas necesitamos crear ob#etos de las clases 3tring y +ate respectivamente. 'omo sabemos Javascript es un lengua#e sensible a las may4sculas y las min4sculas y en este caso las clases, por convenci&n, siempre se escriben con la primera letra en ma$scula $ tambi'n la primera letra de las siguientes palabras si es que el nombre de la clase est$ compuesto de varias palabras. Por e#emplo si tuvieramos la clase de C*lumnos universitariosC se escribira con la F*F de alumnos y la F2F de universitarios en may4scula. *lumnos2niversitarios sera el nombre de nuestra supuesta clase.
8ay otros que pertenecen a este mismo con#unto los enumeramos aqu para que quede constancia de ellos pero no los vamos a tocar en captulos siguientes. (rra$ ya los hemos visto en captulos correspondientes al primer manual de Javascript. &ambi!n la clase Function lo hemos visto parcialmente al estudiar las funciones. 8ay otra clase Reg)*p que sirve para construir patrones que veremos tal ve( #unto con %unction cuando tratemos temas m$s avan(ados todava.

Nota: +so de ma$sculas $ minsculas% Ga que nos hemos parado anteriormente a hablar sobre el uso de may4sculas 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 empe(ar cualquier variable se suele escribir en min4sculas aunque si este nombre de variable se compone de varias palabras se suele escribir en may4scula 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 tambi!n en may4scula el primer caracter de la primera palabra. E#emplos: Number que es una clase se escribe con la primera en may4scula. Reg)*p que es el nombre de otra clase compuesto por dos palabras tiene la primera letras de las dos palabras en may4scula. mi,adena que supongamos que es un ob#eto de la clase 3tring se escribe con la primera letra en min4scula y la primera letra de la segunda palabra en may4scula. fec!a que supongamos que es un ob#eto de la clase +ate se escribe en min4sculas por ser un ob#eto. miFunci&n() que es una funcin definida por nosotros se acostumbra a escribir con min4scula la primera. 'omo decimos esta es la norma general para dar nombres a las variables clases ob#etos funciones etc. en Javascript. 3i la seguimos as no tendremos problemas a la hora de saber si un nombre en Javascript tiene o no alguna may4scula y adem$s todo nuestro traba#o ser$ m$s claro y f$cil de seguir por otros programadores o nosotros mismos en caso de retomar un cdigo una ve( pasado un tiempo.
Artculo por
2.*.- &lase +tring en Javascript

La clase que nos sive para manejar cadenas de caracteres. Estudiamos sus propiedades y la lista completa de m(todos. En #avascript las variables de tipo texto son ob#etos de la clase 3tring. Esto quiere decir que cada una de las variables que creamos de tipo texto tienen una serie de propiedades y m!todos. 5ecordamos que las propiedades son las caractersticas como por e#emplo longitud en caracteres del string y los m!todos son funcionalidades como pueden ser extraer un substring o poner el texto en may4sculas. Para crear un ob#eto de la clase 3tring lo 4nico 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. &ambi!n se puede crear un ob#eto string con el operador ne) que veremos m$s adelante. "a 4nica diferencia es que en versiones de Javascript 7.= no funcionar$ ne) para crear los 3trings.
2.*.1.- ,ropiedades de +tring

#engt! "a clase 3tring slo tiene una propiedad: length que guarda el n4mero de caracteres del 3tring.
2.*.2.- M(todos de +tring

"os ob#etos de la clase 3tring tienen una buena cantidad de m!todos para reali(ar muchas cosas interesantes. Primero vamos a ver una lista de los m!todos m$s interesantes y luego vamos a ver otra lista de m!todos menos 4tiles. c!ar(t(indice) +evuelve el car$cter que hay en la posicin indicada como ndice. "as posiciones de un string empie(an en =. inde*-f(carcter,desde) +evuelve la posicin de la primera ve( que aparece el car$cter indicado por par$metro en un string. 3i no encuentra el car$cter en el string devuelve F7. El segundo par$metro es opcional y sirve para indicar a partir de que posicin se desea que empiece la b4squeda.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com lastInde*-f(carcter,desde) Husca la posicin de un car$cter ex$ctamente igual a como lo hace la funcin index6f pero desde el final en lugar del principio. El segundo par$metro indica el n4mero de caracteres desde donde se busca igual que en index6f. replace(substring.a.buscar,nuevoStr) Implementado en Javascript 7.< sirve para reempla(ar porciones del texto de un string por otro texto por e#emplo podramos uili(arlo para reempla(ar todas las apariciones del substring CxxxC por CyyyC. El m!todo no reempla(a en el string sino que devuelve un resultante de hacer ese reempla(o. *cepta expresiones regulares como substring a buscar. split(separador) Este m!todo slo es compatible con #avascript 7.7 en adelante. 3irve para crear un vector a partir de un 3tring en el que cada elemento es la parte del 3tring que est$ separada por el separador indicado por par$metro. substring(inicio,fin) +evuelve el substring que empie(a en el car$cter de inicio y termina en el car$cter de fin. 3i intercambiamos los par$metros de inicio y fin tambi!n funciona. 3implemente nos da el substring que hay entre el car$cter menor y el mayor. to#o/er,ase() Pone todas los caracteres de un string en min4sculas. to+pper,ase() Pone todas los caracteres de un string en may4sculas. toString() Este m!todo lo tienen todos los ob#etos y se usa para convertirlos en cadenas. 8asta aqu hemos visto los m!todos que nos ayudar$n a tratar cadenas. *hora vamos a ver otros m!todos que son menos 4tiles pero hay que indicarlos para que quede constancia de ellos. &odos sirven para aplicar estilos a un texto y es como si utili($semos etiquetas 8&/". 1eamos cmo. anc!or(name) 'onvierte en un ancla Asitio a donde dirigir un enlaceB una cadena de caracteres usando como el atributo name de la etiqueta I*J lo que recibe por par$metro. big() *umenta el tama:o de letra del string. Es como si coloc$semos en un string al principio la etiqueta IHIDJ y al final IKHIDJ. blin0() Para que parpadee el texto del string es como utili(ar la etiqueta IH"I9LJ. 3olo vale para 9etscape. bold() 'omo si utili($semos la etiqueta IHJ. fi*ed() Para utili(ar una fuente monoespaciada etiqueta I&&J. font,olor(color) Pone la fuente a ese color. 'omo utili(ar la etiqueta I%69& colorMelNcolorNindicadoJ. fontSi1e(tama2o) Pone la fuente al tama:o indicado. 'omo si utili($semos la etiqueta I%69&J con el atributo si(e. italics() Pone la fuente en cursiva. Etiqueta IIJ. lin0(url) Pone el texto como un enlace a la 25" indicada. Es como si utili($semos la etiqueta I*J con el atributo href indicado como par$metro. small() Es como utili(ar la etiqueta I3/*""J stri0e() 'omo utili(ar la etiqueta I3&5ILEJ que sirve para que el texto apare(ca tachado.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com sub() *ctuali(a el texto como si se estuviera utili(ando la etiqueta I32HJ de subndice. sup() 'omo si utili($semos la etiqueta I32PJ de superndice.
Artculo por
2.-.- E emplos de funcionamiento de la clase +tring

)ealizamos un par de scripts en Javascript para ilustrar el funcionamiento de algunos m(todos y propiedades de la clase *tring. En captulos anteriores de esta segunda parte del /anual de Javascript vimos lo que son las clases nativas de Javascript. 2na de ellas era la clase 3tring cuyo funcionamiento vamos a mostrar a continuacin. *s pues pasemos a ver unos e#emplos sobre cmo se utili(an los m!todos y propiedades del ob#eto 3tring.
2.-.1.- E emplo de strings 1

1amos a escribir el contenido de un string con un car$cter separador ACFCB entre cada uno de los caracteres del string.
var mi1trin( = "2ola )mi(os" var result = "" 3or (i=04i5mi1trin(.len(t6714i++) 8 result += mi1trin(.c6ar)t(i) result += "7" 9 result += mi1trin(.c6ar)t(mi1trin(.len(t6 7 1) document.write(result)
Primero creamos dos variables una con el string a recorrer y otra con un string vaco donde guardaremos el resultado. "uego hacemos un bucle que recorre desde el primer hasta el pen4ltimo car$cter del string Futil(amos la propiedad length para conocer el n4mero de caracteres del stringF y en cada iteracin colocamos un car$cter del string seguido de un car$cter separador CFC. 'omo aun nos queda el 4ltimo car$cter por colocar lo ponemos en la siguiente lnea despu!s del bucle. 2tili(amos la funcin char*t para acceder a las posiciones del string. %inalmente imprimimos en la p$gina el resultado. Podemos ver el e#emplo en funcionamiento en una p$gina a parte.
2.-.2.- E emplo de strings 2

1amos a hacer un script que rompa un string en dos mitades y las imprima por pantalla. "as mitades ser$n iguales siempre que el string tenga un n4mero de caracteres par. En caso de que el n4mero de caracteres sea impar no se podr$ hacer la mitad exacta pero partiremos el string lo m$s aproximado a la mitad.
var mi1trin( = "01!345$+":" var mitad1 mitad! posicion;mitad = mi1trin(.len(t6 < ! mitad1 = mi1trin(.su%strin((0 posicion;mitad) mitad! = mi1trin(.su%strin((posicion;mitad mi1trin(.len(t6) document.write(mitad1 + "5%r=" + mitad!)
"as dos primeras lneas sirven para declarar las variables que vamos a utili(ar e iniciali(ar el string a partir. En la siguiente lnea hallamos la posicin de la mitad del string. En las dos siguientes lneas es donde reali(amos el traba#o de poner en una variable la primera mitad del string y en la otra la segunda. Para ello utili(amos el m!todo substring pas$ndole como inicio y fin en el primer caso desde = hasta la mitad y en

10
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com el segundo desde la mitad hasta el final. Para finali(ar imprimimos las dos mitades con un salto de lnea entre ellas. Podemos ver el e#emplo en funcionamiento en una p$gina a parte. 2na ve( sabemos mane#ar los ob#etos de la clase string podemos pasar a ver otras de las clases nativas de Javascript como la clase +ate.
Artculo por
2...- &lase /ate en Javascript

Explicamos la clase que se utiliza en Javascript para el manejo de fec as y oras, comentando sus m(todos y propiedades. 1amos a empe(ar a relatar todas las cosas que debes saber sobre otro de los ob#etos nativos de Javascript el que implementa la clase +ate. 3obre la clase +ate recae todo el traba#o con fechas en Javascript como obtener una fecha el da la hora actuales y otras cosas. Para traba#ar con fechas necesitamos instanciar un ob#eto de la clase +ate y con !l ya podemos reali(ar las operaciones que necesitemos. 2n ob#eto de la clase +ate se puede crear de dos maneras distintas. Por un lado podemos crear el ob#eto con el da y hora actuales y por otro podemos crearlo con un da y hora distintos a los actuales. Esto depende de los par$metros que pasemos al construir los ob#etos. Para crear un ob#eto fecha con el da y hora actuales colocamos los par!ntesis vacos al llamar al constructor de la clase +ate.
mi#ec6a = new >ate()
Para crear un ob#eto fecha con un da y hora distintos de los actuales tenemos que indicar entre par!ntesis el momento con que iniciali(ar el ob#eto. 8ay varias maneras de expresar un da y hora v$lidas por eso podemos construir una fecha gui$ndonos por varios esquemas. Estos son dos de ellos suficientes para crear todo tipo de fechas y horas.
mi#ec6a = new >ate(a?o mes dia 6ora minutos se(undos) mi#ec6a = new >ate(a?o mes dia)
"os valores que debe recibir el constructor son siempre num!ricos. 2n detalle el mes comien(a por = es decir enero es el mes =. 3i no indicamos la hora el ob#eto fecha se crea con hora ==:==:==. "os ob#etos de la clase +ate no tienen propiedades pero si un montn de m!todos vamos a verlos ahora. getDate() +evuelve el da del mes. getDa$() +evuelve el da de la semana. get3ours() 5etorna la hora. get inutes() +evuelve los minutos. get ont!() +evuelve el mes Aatencin al mes que empie(a por =B. getSeconds() +evuelve los segundos. get4ime() +evuelve los milisegundos transcurridos entre el da 7 de enero de 7OP= y la fecha correspondiente al ob#eto al que se le pasa el mensa#e.

11
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com get5ear() 5etorna el a:o al que se le ha restado 7O==. Por e#emplo para el 7OOE retorna OE para el <==E retorna 7=E. Este m!todo est$ obsoleto en 9etscape a partir de la versin 7.? de Javascript y ahora se utili(a get%ullGearAB. getFull5ear() 5etorna el a:o con todos los dgitos. 2sar este m!todo para estar seguros de que funcionar$ todo bien en fechas posteriores al a:o <===. setDate() *ctuali(a el da del mes. set3ours() *ctuali(a la hora. set inutes() 'ambia los minutos. set ont!() 'ambia el mes Aatencin al mes que empie(a por =B. setSeconds() 'ambia los segundos. set4ime() *ctuali(a la fecha completa. 5ecibe un n4mero de milisegundos desde el 7 de enero de 7OP=. set5ear() 'ambia el a:o recibe un n4mero al que le suma 7O== antes de colocarlo como a:o de la fecha. Por e#emplo si recibe OE colocar$ el a:o 7OOE. Este m!todo est$ obsoleto a partir de Javascript 7.? en 9etscape. *hora se utili(a set%ullGearAB indicando el a:o con todos los dgitos. setFull5ear() 'ambia el a:o de la fecha al n4mero que recibe por par$metro. El n4mero se indica completo e#: <==E o 7OOE. 2tili(ar este m!todo para estar seguros que todo funciona para fechas posteriores a <===. 'omo habr!is podido apreciar hay alg4n m!todo obsoleto por cuestiones relativas al a:o <===: setGearAB y getGearAB. Estos m!todos se comportan bien en Internet Explorer y no nos dar$ ning4n problema el utili(arlos. 3in embrago no funcionar$n correctamente en 9etscape por lo que es interesante que utilicemos en su lugar los m!todos get%ullGearAB y set%ullGearAB que funcionan bien en 9etscape e Internet Explorer.
Referencia: &e recomendamos un artculo sobre fechas que es especialmente pr$ctico para las personas que quieren mostrar la fecha actual con varios formatos distintos.
* continuacin para afian(ar todos estos conocimientos te recomendamos ver algunos e#emplos de traba#o con ob#etos de la clase +ate.
Artculo por
2.0.- E emplo de funcionamiento de /ate

Ejercicio realizado para ilustrar el funcionamiento de la clase +ate en Javascript. En el captulo anterior de la segunda parte del manual de Javascript explicamos las generalidades de la clase +ate para traba#o con fechas. *s que ahora podemos poner los conocimientos en la pr$ctica en un e#emplo completo. En este e#emplo vamos a crear dos fechas una con el instante actual y otra con fecha del pasado. "uego las imprimiremos las dos y extraeremos su a:o para imprimirlo tambi!n. "uego actuali(aremos el a:o de una de las fechas y la volveremos a escribir con un formato m$s legible.

12

<<en estas l@neas creamos las 3ec6as mi#ec6a)ctual = new >ate() mi#ec6a/asada = new >ate(1::" 4 !3) <<en estas l@neas imprimimos las 3ec6as. document.write (mi#ec6a)ctual) document.write ("5%r=") document.write (mi#ec6a/asada) <<extraemos el a?o de las dos 3ec6as ano)ctual = mi#ec6a)ctual.(et#ullAear() ano/asado = mi#ec6a/asada.(et#ullAear() <<Bscri%imos en a?o en la pC(ina document.write("5%r=Bl a?o actual esD " + ano)ctual) document.write("5%r=Bl a?o pasado esD " + ano/asado) <<cam%iamos el a?o en la 3ec6a actual mi#ec6a)ctual.set#ullAear(!005) <<extraemos el d@a mes E a?o dia = mi#ec6a)ctual.(et>ate() mes = parseInt(mi#ec6a)ctual.(et0ont6()) + 1 ano = mi#ec6a)ctual.(et#ullAear() <<escri%imos la 3ec6a en un 3ormato le(i%le document.write ("5%r=") document.write (dia + "<" + mes + "<" + ano)
3i se desea se puede ver en funcionamiento este script en una p$gina a parte. 8ay que destacar un detalle antes de acabar y es que el n4mero del mes puede empe(ar desde =. Por lo menos en el 9etscape con el que reali(amos las pruebas empe(aba en = el mes. Por esta ra(n sumamos uno al mes que devuelve el m!todo get/onth. 8ay m$s detalles a destacar pues resulta que en 9etscape el m!todo get%ullGearAB devuelve los a:os trascurridos desde 7O== con lo que al obtener el a:o de una fecha de por e#emplo <==E indica que es el a:o 7=E. Para obtener el a:o completo tenemos a nuestra disposicin el m!todo get%ullGearAB que devolvera <==E del mismo modo en 9etscape e Internet Explorer. /ucha atencin pues al traba#o con fechas en distintas plataformas puesto que podra ser problem$tico el hecho de que nos ofre(can distintas salidas los m!todos de mane#o de fechas com siempre dependiendo de la marca y versin de nuestro navegador.
Referencia: 3e puede ver otro e#emplo de traba#o con la clase +ate en el taller 'alcular la edad en Javascript
Artculo por
2.1.- &lase Mat2 en Javascript

La clase que utilizamos para realizar c,lculos matem,ticos de todo tipo. "a clase /ath es una de las clases nativas de Javascript. Proporciona los mecanismos para reali(ar operaciones matem$ticas en Javascript. *lgunas operaciones se resuelven r$pidamente con los operadores aritm!ticos que ya conocemos como la multiplicacin o la suma pero hay una serie de operaciones matem$ticas adicionales que se tienen que reali(ar usando la clase /ath como pueden ser calcular un seno o hacer una rai( cuadrada. +e modo que para cualquier c$lculo matem$tico comple#o utili(aremos la clase /ath con una particularidad. 8asta ahora cada ve( que queramos hacer algo con una clase debamos instanciar un ob#eto de esa clase y traba#ar con el ob#eto y en el caso de la clase /ath se traba#a directamente con la clase. Esto se permite por que las propiedades y m!todos de la clase /ath son lo que se llama propiedades y m!todos de clase y para utili(arlos se opera a trav!s de la clase en lugar de los ob#etos. +icho de otra forma para traba#ar con la clase /ath no deberemos utili(ar la instruccin ne) y utili(aremos el

13
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com nombre de la clase para acceder a sus propiedades y m!todos.
2.1.1.- ,ropiedades de Mat2

"as propiedades guardan valores que probablemente necesitemos en alg4n momento si estamos haciendo c$lculos matem$ticos. Es probable que estas propiedades resulten un poco raras a las personas que desconocen las matem$ticas avan(adas pero los que las cono(can sabr$n de su utilidad. ) 94mero E o constante de Euler la base de los logaritmos neperianos. #N6 "ogaritmo neperiano de <. #N78 "ogaritmo neperiano de 7=. #-96) "ogaritmo en base < de E. #-978) "ogaritmo en base 7= de E. :I 'onocido n4mero para c$lculo con crculos. S;R47.6 5ai( cuadrada de un medio. S;R46 5ai( cuadrada de <.
2.1.2.- M(todos de Mat2

*s mismo tenemos una serie de m!todos para reali(ar operaciones matem!ticas tpicas aunque un poco comple#as. &odos los que cono(can las matem$ticas a un buen nivel conocer$n el significado de estas operaciones. abs() +evuelve el valor absoluto de un n4mero. El valor despu!s de quitarle el signo. acos() +evuelve el arcocoseno de un n4mero en radianes. asin() +evuelve el arcoseno de un numero en radianes. atan() +evuelve un arcotangente de un numero. ceil() +evuelve el entero igual o inmediatamente siguiente de un n4mero. Por e#emplo ceilA?B vale ? ceilA?.@B es @. cos() 5etorna el coseno de un n4mero. e*p() 5etorna el resultado de elevar el n4mero E por un n4mero. floor() "o contrario de ceilAB pues devuelve un n4mero igual o inmediatamente inferior. log() +evuelve el logaritmo neperiano de un n4mero.

14
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ma*() 5etorna el mayor de < n4meros. min() 5etorna el menor de < n4meros. po/() 5ecibe dos n4meros como par$metros y devuelve el primer n4mero elevado al segundo n4mero. random() +evuelve un n4mero aleatorio entre = y 7. /!todo creado a partir de Javascript 7.7. round() 5edondea al entero m$s prximo. sin() +evuelve el seno de un n4mero con un $ngulo en radianes. s<rt() 5etorna la rai( cuadrada de un n4mero. tan() 'alcula y devuelve la tangente de un n4mero en radianes. E#emplo de utili(acin de la clase /ath 1amos a ver un sencillo e#emplo sobre cmo utili(ar m!todos y propiedaes de la clase /ath para calcular el seno y el coseno de < PI radianes Auna vuelta completaB. 'omo algunos de vosotros sabr!is el coseno de < PI radianes debe dar como resultado 7 y el seno =.
document.write (0at6.cos(! F 0at6./I)) document.write ("5%r=") document.write (0at6.sin(! F 0at6./I))
< PI radianes es el resultado de multiplicar < por el n4mero PI. Ese resultado es lo que recibe el m!todo cos y da como resultado 7. En el caso del seno el resultado no es exactamente = pero est$ aproximado con una exactitud de m$s de una millon!sima de fraccin. 3e escriben los el seno y coseno con un salto de lnea en medio para que quede m$s claro. Podemos ver el resultado de e#ecutar estas lneas de cdigo. *dem$s si deseamos profundi(ar en la clase /ath os recomiendo leer el artculo de crear un n4mero aleatorio. &ambi!n se hace uso de la clase /ath en el artculo enlace aleatorio. &odos en el &aller de Javascript.
Artculo por
2.13.- &lase $umber en Javascript

-lase que modeliza el tipo de datos num(rico. 1amos a ver a continuacin otra de las clases nativas de Javascript para traba#o con datos num!ricos. 3e trata de la clase 9umber que modeli(a el tipo de datos num!rico y fue a:adida en la versin 7.7 de Javascript Acon 9etscape 9avigator ?B. 'omo veremos en este artculo la clase 9umber nos sirve para crear ob#etos que tienen datos num!ricos como valor. Es muy probable que no lo llegues a utili(ar en ninguna ocasin. Por lo menos en la mayora de los scripts para hacer las cosas m$s dispares no vas a utili(ar esta clase no obstante viene bien conocerla.
Nota: conocimos el tipo de datos num!rico en el primer manual de #avascript. Este nos serva para guardar un valores num!ricos sin m$s. Este ob#eto modeli(a este tipo de datos y la clase en si ofrece alg4n m!todo que puede ser 4til. Para los c$lculos matem$ticos y el uso de n4meros en general vamos a utili(ar siempre las variables num!ricas vistas anteriormente.

15
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com El valor del ob#eto 9umber que se crea depende de lo que reciba el constructor de la clase 9umber. 'on estas reglas: F 3i el constructor recibe un n4mero entonces iniciali(a el ob#eto con el n4mero que recibe. 3i recibe un n4mero entrecomillado lo convierte a valor num!rico devolviendo tambi!n dicho n4mero. F +evuelve = en caso de que no reciba nada. F En caso de que reciba un valor no num!rico devuelve 9a9 que significa C9ot a 9umberC A9o es un n4meroB F 3i recibe false se iniciali(a a = y si recibe true se iniciali(a a 7. 3u funcionamiento se puede resumir en estos e#emplos.
var n1 = new *um%er() document.write(n1 + "5%r=") <<muestra un 0 var n! = new *um%er("6ola") document.write(n! + "5%r=") <<muestra *a* var n3 = new *um%er("1!3") document.write(n3 + "5%r=") <<muestra 1!3 var n4 = new *um%er("1!3asd3GHBITA") document.write(n4 + "5%r=") <<muestra *a* var n5 = new *um%er(1!345$) document.write(n5 + "5%r=") <<muestra 1!345$ var n$ = new *um%er(3alse) document.write(n$ + "5%r=") <<muestra 0 var n+ = new *um%er(true) document.write(n+ + "5%r=") <<muestra 1
Este e#emplo y el siguiente se pueden ver en una p$gina a parte.
2.13.1.- ,ropiedades de la clase $umber

Esta clase tambi!n nos ofrece varias propiedades que contienen los siguientes valores: NaN 'omo hemos visto significa 9ot a 9umber o en espa:ol no es un n4mero. (=.>(#+) $ IN.>(#+) Duardan el valor del m$ximo y el mnimo valor que se puede representar en Javascript N)9(4I>).INFINI45 $ :-SI4I>).INFINI45 5epresentan los valores negativos y positivos respectivamente a partir de los cuales hay desbordamiento. Estas propiedades son de clase as que accederemos a ellas a partir del nombre de la clase tal como podemos ver en este e#emplo en el que se muestra cada uno de sus valores.
document.write("/ropiedad document.write("5%r=") document.write("/ropiedad document.write("5%r=") document.write("/ropiedad document.write("5%r=") document.write("/ropiedad document.write("5%r=") document.write("/ropiedad *a*D " + *um%er.*a*) 0)&;J)K'BD " + *um%er.0)&;J)K'B) 0I*;J)K'BD " + *um%er.0I*;J)K'B) *BL)TIJB;I*#I*ITAD " + *um%er.*BL)TIJB;I*#I*ITA) /,1ITIJB;I*#I*ITAD " + *um%er./,1ITIJB;I*#I*ITA)
"os dos e#emplos de este artculo se pueden ver en funcionamiento en una p$gina a parte.

16
Artculo por
2.11.- &lase 4oolean en Javascript

.tra de las clases incorporadas en Javascript, en este caso para crear valores boleanos a partir de valores no boleanos. En este artculo presentaremos otra de las clases nativas de Javascript que es la clase Hoolean. Esta clase nos sirve para crear valores boleanos y fue a:adida en la versin 7.7 de Javascript Acon 9etscape 9avigator ?B. 2na de sus posibles utilidades es la de conseguir valores boleanos a partir de datos de cualquier otro tipo. 9o obstante al igual que ocurra con la clase 9umber es muy probable que no la llegues a utili(ar nunca.
Nota: conocimos el tipo de datos boolean en el primer manual de Javascript. Este nos serva para guardar un valor verdadero AtrueB o falso AfalseB. Esta clase modeli(a ese tipo de datos para crear ob#etos boleanos.
+ependiendo de lo que reciba el constructor de la clase Holean el valor del ob#eto boleano que se crea ser$ verdadero o falso de la siguiente manera F Se iniciali1a a false cuando no pasas ning4n valor al constructor o si pasas una cadena vaca el n4mero = o la palabra false sin comillas. F Se iniciali1a a true cuando recibe cualquier valor entrecomillado o cualquier n4mero distinto de =. 3e puede comprender el funcionamiento de este ob#eto f$cilmente si examinamos unos e#emplos.
var %1 = new Moolean() document.write(%1 + "5%r=") <<muestra 3alse var %! = new Moolean("") document.write(%! + "5%r=") <<muestra 3alse var %!5 = new Moolean(3alse) document.write(%!5 + "5%r=") <<muestra 3alse var %3 = new Moolean(0) document.write(%3 + "5%r=") <<muestra 3alse var %35 = new Moolean("0") document.write(%35 + "5%r=") <<muestra true var %4 = new Moolean(3) document.write(%4 + "5%r=") <<muestra true var %5 = new Moolean("2ola") document.write(%5 + "5%r=") <<muestra true
3e puede ver en funcionamiento el e#emplo en una p$gina a parte.

Artculo por

17
Parte 3:
Introduccin a la programacin orientada a objetos en Javascript

E&plicamos de manera bre'e las posibilidades de programaci#n orientada a ob%etos (,--) disponible en el lengua%e )a'ascript.
#.1.- &reacin de clases en Javascript

A ora que ya sabemos lo que son los objetos, vamos a ver cmo podemos crear nuestros propios objetos en Javascript. En captulos anteriores de esta segunda parte del /anual de Javascript vimos las generalidades sobre la programacin orientada a ob#etos. *dem$s estuvimos dando un repaso bastante completo a los distintos ob#etos nativos de Javascript. *hora que ya hemos conocido un poco los ob#etos y hemos aprendido a mane#arlos podemos pasar a un tema m$s avan(ado como es el de construir nuestros propios ob#etos que puede sernos 4til en ciertas ocasiones para temas avan(ados. *s que vamos a ver cmo podemos definir nuestros propios ob#etos con sus propiedades y m!todos de manera que aprendamos el mecanismo pero sin entrar demasiado en aspectos pr$cticos que los de#amos para e#emplos del futuro. Para crear nuestros propios ob#etos debemos crear una clase que recordamos que es algo as como la definicin de un ob#eto con sus propiedades y m!todos. Para crear la clase en Javascript debemos escribir una funcin especial que se encargar$ de construir el ob#eto en memoria e iniciali(arlo. Esta funcin se le llama constructor en la terminologa de la programacin orientada a ob#etos.
3unction 0i.lase (valor;inicialiNacion)8 <<InicialiNo las propiedades E mOtodos t6is.mi/ropiedad = valor;inicialiNacion t6is.mi0etodo = nom%re;de;una;3uncion;de3inida 9
Eso era un constructor. 2tili(a la palabra this para declarar las propiedades y m!todos del ob#eto que se est$ construyendo. &his hace referencia al ob#eto que se est$ construyendo pues recordemos que a esta funcin la llamaremos para construir un ob#eto. * ese ob#eto que se est$ construyendo le vamos asignando valores en sus propiedades y tambi!n le vamos asignando nombres de funciones definidas para sus m!todos. *l construir un ob#eto t!cnicamente es lo mismo declarar una propiedad o un m!todo solo difiere en que a una propiedad le asignamos un valor y a un m!todo le asignamos una funcin.
#.1.1.- La clase Alumno5niversitario

"o veremos todo m$s detenidamente si hacemos un e#emplo. En este e#emplo vamos a crear un ob#eto estudiante universitario. 'omo estudiante tendr$ unas caractersticas como el nombre la edad o el n4mero de matrcula. *dem$s podr$

18
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com tener alg4n m!todo como por e#emplo matricular al alumno.
#.1.2.- &onstructor6 &olocamos propiedades

1eamos cmo definir el constructor de la clase *lumnouniversitario pero solamente vamos a colocar por ahora las propiedades de la clase.
3unction )lumno'niversitario(nom%re t6is.nom%re = nom%re t6is.edad = edad t6is.num0atricula = null 9 edad)8
"os valores de iniciali(acin los recibe el constructor como par$metros en este caso es slo el nombre y la edad porque el n4mero de matrcula no lo recibe un alumno hasta que es matriculado. Es por ello que asignamos a null la propiedad num/atrcula. En el siguiente artculo explicaremos cmo se pueden reali(ar m!todos y asociarlos a las clases que estamos definiendo.
Artculo por
#.2.- &reacin de clases en Javascript II

Aprendemos a construir m(todos y asociarlos a nuestros propios objetos de Javascript. /ambi(n repasamos cmo instanciar nuestros objetos a partir de las definiciones de la clase. En el artculo anterior del presente manual de Javascript II empe(amos a explicar el proceso de creacin de una clase. *hora vamos a continuar con esa definicin de la clase para incorporar m!todos. Para construir un m!todo debemos crear una funcin. 2na funcin que se construye con intencin de que sea un m!todo para una clase puede utili(ar tambi!n la variable this que hace referencia al ob#eto sobre el que invocamos el m!todo. Pues debemos recordar que para llamar a un m!todo debemos tener un ob#eto y this hace referencia a ese ob#eto.
3unction matriculate(num;matricula)8 t6is.num0atricula = num;matricula 9
"a funcin matricular recibe un n4mero de matrcula por par$metro y lo asigna a la propiedad num/atricula del ob#eto que recibe este m!todo. *s rellenamos el la propiedad del ob#eto que nos faltaba. 1amos a construir otro m!todo que imprime los datos del alumno.
3unction imprimete()8 document.write("*om%reD " + t6is.nom%re) document.write("5%r=BdadD " + t6is.edad) document.write("5%r=*Pmero de matr@culaD " + t6is.num0atricula) 9
Esta funcin va imprimiendo todas las propiedades del ob#eto que recibe el m!todo.
#.2.1.- &onstructor6 &olocamos m(todos

Para colocar un m!todo en una clase debemos asignar la funcin que queremos que sea el m!todo al ob#eto que se est$ creando. 1eamos cmo quedara el constructor de la clase *lumno2niversitario con el m!todo matricular.
3unction )lumno'niversitario(nom%re t6is.nom%re = nom%re t6is.edad = edad t6is.num0atricula = null t6is.matriculate = matriculate t6is.imprimete = imprimete edad)8

19

9
1emos que en las 4ltimas lneas asignamos a los m!todos los nombres de las funciones que contienen su cdigo.
#.2.2.- ,ara instanciar un ob eto

Para instanciar ob#etos de la clase *lumno2niversitario utili(amos la sentencia ne) que ya hemos tenido ocasin de ver en otras ocasiones.
mi)lumno = new )lumno'niversitario("QosO >@aN" !3)
Este e#emplo lo vamos a completar en el siguiente artculo.

Artculo por
#.#.- &reacin de clases en Javascript III

0ara ilustrar el modo de trabajo con clases y objetos presentamos el ejemplo completo, en el que creamos una clase, instanciamos objetos y los utilizamos. En los dos artculos anteriores hemos comen(ado una pr$ctica sobre programacin orientada a ob#etos en Javascript que vamos a completar con este texto. Por tanto tenemos que leer antes de esto el artculo donde comen(amos la clase *lunno2niversitario y el artculo donde incorporamos los primeros m!todos. Para ilustrar el traba#o con ob#etos y terminar con el e#emplo del *lunno2niversitario vamos a ver todo este proceso en un solo script en el que definiremos la clase y luego la utili(aremos un poquito.
<<de3inimos el mOtodo matricularte para la clase )lumno'niversitario 3unction matriculate(num;matricula)8 t6is.num0atricula = num;matricula 9 <<de3inimos el mOtodo imprimete para la clase )lumno'niversitario 3unction imprimete()8 document.write("5%r=*om%reD " + t6is.nom%re) document.write("5%r=BdadD " + t6is.edad) document.write("5%r=*Pmero de matr@culaD " + t6is.num0atricula) 9 <<de3inimos el constructor para la clase 3unction )lumno'niversitario(nom%re edad)8 t6is.nom%re = nom%re t6is.edad = edad t6is.num0atricula = null t6is.matriculate = matriculate t6is.imprimete = imprimete 9 <<creamos un alumno mi)lumno = new )lumno'niversitario("QosO >@aN" !3) <<le pedimos Rue se imprima mi)lumno.imprimete() <<le pedimos Rue se matricule mi)lumno.matriculate(305) <<le pedimos Rue se imprima de nuevo (con el nPmero de matricula relleno) mi)lumno.imprimete()
3i lo deseamos podemos ver el script en funcionamiento en una p$gina a parte. 9o vamos a hablar m$s por el momento sobre cmo crear y utili(ar nuestros propios ob#etos pero en el futuro trataremos este tema con m$s profundidad y haremos alg4n e#emplo adicional.

20
Artculo por
Parte 4:
os objetos del navegador: !"M de la p#gina

.omenzamos a traba%ar con los ob%etos $ue nos sir'en para controlar directamente los elementos de la p(gina/ los ob%etos $ue se generan autom(ticamente en el na'egador al 'isitar una p(gina. 0 lo largo de estos artculos trataremos di'ersos componentes del D-1 de )a'ascript (1odelo de -b%etos del Documento).
).1.- Jerar7u!a de ob etos del navegador

*on los objetos que est,n disponibles en Javascript para controlar cualquier elemento presente en la p,gina 1eb. "legamos al tema m$s importante para aprender a mane#ar Javascript con toda su potencia el tema en el que aprenderemos a controlar al navegador y los distintos elementos de la p$gina. 3in duda este tema le va a dar mucha vida a nuestros e#emplos ya que hasta ahora no tenan mucho car$cter pr$ctico porque no traba#aban con el navegador y las p$ginas que es realmente para lo que est$ hecho Javascript. +e modo que esperamos que a partir de aqu el manual sea m$s entretenido para todos porque va a cubrir los aspectos m$s pr$cticos. 'uando se carga una p$gina el navegador crea una #erarqua de ob#etos en memoria que sirven para controlar los distintos elementos de dicha p$gina. 'on Javascript y la nomenclatura de ob#etos que hemos aprendido podemos traba#ar con esa #erarqua de ob#etos acceder a sus propiedades e invocar sus m!todos. 'ualquier elemento de la p$gina se puede controlar de una manera u otra accediendo a esa #erarqua. Es crucial conocerla bien para poder controlar perfectamente las p$ginas )eb con Javascript o cualquier otro lengua#e de programacin del lado del cliente.
).1.1.- E emplo de acceso a la erar7u!a

*ntes de empe(ar a ver rigurosamente la #erarqua de ob#etos del navegador vamos a ver el e#emplo tpico de acceso a una propiedad de esta #erarqua para cambiar el aspecto de la p$gina. 3e trata de una propiedad de la p$gina que almacena el color de fondo de la p$gina )eb: la propiedad bg'olor del ob#eto document.
document.%(.olor = "red"

21
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 3i e#ecutamos esta sentencia en cualquier momento cambiamos el color de fondo de la p$gina a ro#o. 8ay que fi#arse en que la propiedad bg'olor tiene la C'C en may4scula. Es un error tpico equivocarse con las may4sculas y min4sculas en la #erarqua. 3i no lo escribimos bien no funcionar$ y en algunos casos ni siquiera dar$ un mensa#e de error. En esta p$gina definida con color de fondo blanco hemos cambiado esa propiedad luego con Javascript por lo que saldr$ con color de fondo ro#o.
52T0K= 52B)>= 5TITKB=/rue%a %(.olor5<TITKB= 5<2B)>= 5M,>A %(color=w6ite= 5script= document.%(.olor = "red" 5<script= 5<M,>A= 5<2T0K=
Podemos ver esta p$gina en marcha en una ventana a parte. En los e#emplos que hemos visto hasta ahora tambi!n hemos hecho uso de los ob#etos de la #erarqua del navegador. En concreto hemos utili(ado mucho el m!todo )riteAB del ob#eto document para escribir un texto en la p$gina.
document.write("Bl texto a escri%ir")
Artculo por

22
).2.- 8raba ando con la Jerar7u!a en Javascript

!emos por encima la jerarqu"a entera, detallando alguno de sus elementos y una explicacin sobre como se accede a ellos. 1amos a ver ahora como est$ compuesta esta #erarqua. "os ob#etos que forman parte de ella est$n representados en el gr$fico siguiente.
?erar<u@a de obAetos del navegador en ?avascript 7%6% Podra faltar por recoger alg4n ob#eto pero sirve perfectamente para hacerse una idea de cmo se organi(an los ob#etos en la #erarqua. 'omo se puede apreciar todos los ob#etos comien(an en un ob#eto que se llama )indo). Este ob#eto ofrece una serie de

23
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com m!todos y propiedades para controlar la ventana del navegador. 'on ellos podemos controlar el aspecto de la ventana la barra de estado abrir ventanas secundarias y otras cosas que veremos m$s adelante cuando expliquemos con detalle el ob#eto. *dem$s de ofrecer control el ob#eto )indo) da acceso a otros ob#etos como el documento A"a p$gina )eb que se est$ visuali(andoB el historial de p$ginas visitadas o los distintos frames de la ventana. +e modo que para acceder a cualquier otro ob#eto de la #erarqua deberamos empe(ar por el ob#eto )indo). &anto es as que #avascript entiende perfectamente que la #erarqua empie(a en )indo) aunque no lo se:alemos. En los e#emplos incluidos en el captulo anterior podamos haber escrito tambi!n las sentencias de acceso a la #erarqua empe(ando por el ob#eto )indo) de esta manera.
window.document.%(.olor = "red" window.document.write("Bl texto a escri%ir")
9o lo hicimos por que quedase m$s claro el cdigo y ahorrar algo de texto pero ahora ya sabemos que toda la #erarqua empie(a en el ob#eto )indo).
).2.1.- Las propiedades de un ob eto pueden ser a su vez otros ob etos

/uchas de las propiedades del ob#eto )indo) son a su ve( otros ob#etos. Es el caso de ob#etos como el historial de p$ginas )eb o el ob#eto documento que tienen a su ve( otras propiedades y m!todos. Entre ellos destaca el ob#eto document que contiene todas las propiedades y m!todos necesarios para controlar muchos aspectos de la p$gina. Ga hemos visto alguna propiedad como bg'olor pero tiene muchas otras como el ttulo de la p$gina las im$genes que hay incluidas los formularios etc. /uchas propiedades de este ob#eto son a su ve( otros ob#etos como los formularios. "os veremos todos cuando tratemos cada uno de los ob#etos por separado. *dem$s el ob#eto document tiene m!todos para escribir en la p$gina )eb y para mane#ar eventos de la p$gina.
).2.2.- $avegacin a trav(s de la erar7u!a

El ob#etivo de este captulo sobre la #erarqua de ob#etos es aprender a navegar por ella para acceder a cualquier elemento de la p$gina. Esta no es una tarea difcil pero puede haber alg4n caso especial en el que acceder a los elementos de la p$gina se haga de una manera que aun no hemos comentado. 'omo ya di#imos toda la #eraqua empie(a en el ob#eto )indo) aunque no era necesario hacer referencia a )indo) para acceder a cualquier ob#eto de la #erarqua. "uego en importancia est$ el ob#eto document donde podemos encontrar alguna propiedad especial que merece la pena comentar por separado porque su acceso es un poco diferente. 3e trata de las propiedades que son arrays por e#emplo la propiedad images es un array con todas las im$genes de la p$gina )eb. &ambi!n encontramos arrays para guardar los enlaces de la p$gina los applets los formularios y las anclas. 'uando una p$gina se carga el navegador construye en memoria la #erarqua de ob#etos. +e manera adicional construye tambi!n estos arrays de ob#etos. Por e#emplo en el caso de las im$genes va creando el array colocando en la posicin = la primera imagen en la posicin 7 la segunda imagen y as hasta que las introduce todas. 1amos a ver un bucle que recorre todas las im$genes de la p$gina e imprime su propiedad src que contiene la 25" donde est$ situada la imagen.
3or (i=04i5document.ima(es.len(t64i++)8 document.write(document.ima(esSiT.src) document.write("5%r=") 9
2tili(amos la propiedad length del array images para limitar el n4mero de iteraciones del bucle. "uego utili(amos el m!todo )riteAB del ob#eto document pas$ndole el valor de cada una de las propiedades src de cada imagen. Podemos ver una p$gina con varias im$genes donde se accede a sus propiedades con el bucle anterior. *hora vamos a ver el uso de otro array de ob#etos. En este caso vamos a acceder un poco m$s dentro de la #erarqua para llegar a la matri( elements de los ob#etos formulario que contiene cada uno de los elementos que componen el formulario. Para ello tendremos que acceder a un formulario de la p$gina al que podremos acceder por el array de formularios y dentro de !l a la propiedad elements que es otro array de ob#etos. Para cada elemento del formulario vamos a escribir su propiedad value que corresponde con la propiedad value que colocamos en 8&/".

24
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com f

9 or (i=04i5document.3ormsS0T.elements.len(t64i++)8 document.write(document. 3ormsS0T.elementsSiT.value) document.write("5%r=")
Es un bucle muy parecido al que tenamos para recorrer las im$genes con la diferencia que ahora recorremos el vector de elements al que accedemos por la #erarqua de ob#etos pasando por el array de formularios en su posicin = que corresponde con el primer formulario de la p$gina. Para ver este e#emplo en funcionamiento tenemos una p$gina con un formulario donde se e#ecuta este recorrido a sus elementos. 'on esto hemos aprendido a movernos por la #erarqua de ob#etos con lo que podremos acceder a cualquier elemento del navegador o la p$gina. En adelante conoceremos con detalle cada uno de los ob#etos de la #erarqua empe(ando por el ob#eto )indo) y ba#ando por la #erarqua hasta verlos todos.
Artculo por
).#.- %b eto 9indo9 de Javascript

Estudiamos el objeto 1indo1 de Javascript que nos sirve para controlar la ventana del navegador. +etallamos sus propiedades y acemos un ejemplo. Es el ob#eto principal en la #erarqua y contiene las propiedades y m!todos para controlar la ventana del navegador. +e !l dependen todos los dem$s ob#etos de la #erarqua. 1amos a ver la lista de sus propiedades y m!todos.
).#.1.- ,ropiedades del ob eto 9indo9

* continuacin podemos ver las propiedades del ob#eto )indo). 8ay algunas muy 4tiles y otras que lo son menos. closed Indica la posibilidad de que se haya cerrado la ventana. AJavascript 7.7B defaultStatus &exto que se escribe por defecto en la barra de estado del navegador. document 6b#eto que contiene el la p$gina )eb que se est$ mostrando. Frame 2n ob#eto frame de una p$gina )eb. 3e accede por su nombre. frames arra$ El vector que contiene todos los frames de la p$gina. 3e accede por su ndice a partir de =. !istor$ 6b#eto historial de p$ginas visitadas. inner3eig!t &ama:o en pixels del espacio donde se visuali(a la p$gina en vertical. AJavascript 7.<B innerBidt! &ama:o en pixels del espacio donde se visuali(a la p$gina en hori(ontal. AJavascript 7.<B lengt! 9umero de frames de la ventana. location "a 25" del documento que se est$ visuali(ando. Podemos cambiar el valor de esta propiedad para movernos a otra p$gina. 1er tambi!n la propiedad location del ob#eto document.

25
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com locationbar 6b#eto barra de direcciones de la ventana. AJavascript 7.<B menubar 6b#eto barra de men4s de la ventana. AJavascript 7.<B name 9ombre de la ventana. "o asignamos cuando abrimos una nueva ventana. opener 8ace referencia a la ventana de navegador que abri la ventana donde estamos traba#ando. 3e ver$ con detenimiento en el tratamiento de ventanas con Javascript. out!er3eig!t &ama:o en pixels del espacio de toda la ventana en vertical. Esto incluye las barras de despla(amiento botones etc. AJavascript 7.<B out!erBidt! &ama:o en pixels del espacio de toda la ventana en hori(ontal. Esto incluye las barras de despla(amiento. AJavascript 7.<B parent 8ace referencia a la ventana donde est$ situada el frame donde estamos traba#ando. "a veremos con detenimiento al estudiar el control de frames con Javascript. personalbar 6b#eto barra personal del navegador. AJavascript 7.<B self 1entana o frame actual. scrollbars 6b#eto de las barras de despla(amiento de la ventana. status &exto de la barra de estado. statusbar 6b#eto barra de estado del navegador. AJavascript 7.<B toolbar 6b#eto barra de herramientas. AJavascript 7.<B top 8ace referencia a la ventana donde est$ situada el frame donde estamos traba#ando. 'omo la propiedad parent. /indo/ 8ace referencia a la ventana actual igual que la propiedad self. 1amos a ver un e#emplo de utili(acin de la propiedad status del ob#eto )indo). Esta propiedad sirve para escribir un texto en la barra de estado del navegador Ala barra de deba#o de la ventanaB. En este e#emplo hemos tenido que adelantarnos un poco en la marcha del manual pues utili(amos un mane#ador de eventos y no hemos visto todava lo que son. En concreto utili(amos el mane#ador de eventos onclic- que sirve para e#ecutar sentencias Javascript cuando el usuario pulsa un elemento de la p$gina. "os mane#adores de eventos se colocan en etiquetas 8&/" en nuestro caso lo colocamos en un botn de formulario. "as sentencias Javascript asociadas al evento onclic- del botn se e#ecutar$n cuando pulsemos el botn. 1eamos ya el cdigo que hace que se cambie el texto de la barra de estado cuando pulsemos un botn.
53orm= 5input tEpe="Mutton" value="/ulsameU" onclicV="window.status=W2ola a todo el mundoUW"= 5<3orm=
3implemente asignamos un texto a la propiedad status del ob#eto )indo). El texto que colocamos en la barra de estado est$ escrito entre comillas simples porque estamos escribiendo dentro de unas comillas dobles.

26
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Podemos ver una p$gina a parte con este e#emplo.
Artculo por
).).- M(todos de 9indo9 en Javascript

El objeto 1indo1 de Javascript tiene a disposicin de los programadores una larga lista de m(todos. Los estudiamos y vemos ejemplos. 1amos a ver ahora los distintos m!todos que tiene el ob#eto )indo). /uchos de estos m!todos habr$ que verlos por separado porque son muy 4tiles y aun no los hemos utili(ado ahora vamos a listarlos y ya veremos algunos e#emplos. alert(te*to) Presenta una ventana de alerta donde se puede leer el texto que recibe por par$metro bac0() Ir una p$gina atr$s en el historial de p$ginas visitadas. %unciona como el botn de volver de la barra de herramientas. AJavascript 7.<B blur() .uitar el foco de la ventana actual. AJavascript 7.7B capture)vents(eventos) 'aptura los eventos que se indiquen por par$metro AJavascript 7.<B. clearInterval() Elimina la e#ecucin de sentencias asociadas a un intervalo indicadas con el m!todo setIntervalAB.AJavascript 7.<B clear4imeout() Elimina la e#ecucin de sentencias asociadas a un tiempo de espera indicadas con el m!todo set&imeoutAB. close() 'ierra la ventana. AJavascript 7.7B confirm(te*to) /uestra una ventana de confirmacin y permite aceptar o recha(ar. find() /uestra una ventanita de b4squeda. AJavascript 7.< para 9etscapeB focus() 'oloca el foco de la aplicacin en la ventana. AJavascript 7.7B for/ard() Ir una p$gina adelante en el historial de p$ginas visitadas. 'omo si puls$semos el botn de adelante del navegador. AJavascript 7.<B !ome() Ir a la p$gina de inicio que haya configurada en el explorador. AJavascript 7.<B move"$(pi*els=, pi*els5) /ueve la ventana del navegador los pixels que se indican por par$metro hacia la derecha y aba#o. AJavascript 7.<B move4o(pi*els=, pi*els5) /ueve la ventana del navegador a la posicin indicada en las coordenadas que recibe por par$metro. AJavascript 7.<B open() *bre una ventana secundaria del navegador. 3e puede aprender a utili(arla en el reporta#e de cmo abrir ventanas secundarias. print()

27
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 'omo si puls$semos el botn de imprimir del navegador. AJavascript 7.<B prompt(pregunta,iniciali1acion.de.la.respuesta) /uestra una ca#a de di$logo para pedir un dato. +evuelve el dato que se ha escrito. release)vents(eventos) +e#a de capturar eventos del tipo que se indique por par$metro. AJavascript 7.<B resi1e"$(pi*els(nc!o,pi*els(lto) 5edimensiona el tama:o de la ventana a:adiendo a su tama:o actual los valores indicados en los par$metros. El primero para la altura y el segundo para la anchura. *dmite valores negativos si se desea reducir la ventana. AJavascript 7.<B resi1e4o(pi*els(nc!o,pi*els(lto) 5edimensiona la ventana del navegador para que ocupe el espacio en pixels que se indica por par$metro AJavascript 7.<B route)vent() Enruta un evento por la #erarqua de eventos. AJavascript 7.<B scroll(pi*els=,pi*els5) 8ace un scroll de la ventana hacia la coordenada indicada por par$metro. Este m!todo est$ desaconse#ado pues ahora se debera utili(ar scroll&oABAJavascript 7.7B scroll"$(pi*els=,pi*els5) 8ace un scroll del contenido de la ventana relativo a la posicin actual. AJavascript 7.<B scroll4o(pi*els=,pi*els5) 8ace un scroll de la ventana a la posicin indicada por el par$metro. Este m!todo se tiene que utili(ar en lugar de scroll. AJavascript 7.<B setInterval() +efine un script para que sea e#ecutado indefinidamente en cada intervalo de tiempo. AJavascript 7.<B set4imeout(sentencia,milisegundos) +efine un script para que sea e#ecutado una ve( despu!s de un tiempo de espera determinado. stop() 'omo pulsar el botn de stop de la ventana del navegador. AJavascript 7.<B Para ilustrar un poco me#or el funcionamiento de alguno de estos m!todos Flos m$s extra:osF hemos creado una p$gina )eb que los utili(a. El cdigo de la p$gina se muestra a continuacin y tambi!n podemos ver la p$gina en marcha.
53orm= 5input 5%r= 5%r= 5input 5%r= 5%r= 5input 5%r= 5%r= 5input 5%r= 5%r= 5input 5%r= 5%r= 5input tEpe="%utton" value="Jentana de %PsRueda (1olo *etscape)" on.licV="window.3ind()"= tEpe="%utton" value="0over la ventana 10 derec6a 10 a%a-o" on.licV="moveME(10 tEpe="%utton" value="0over la ventana al punto (100 10)" on.licV="moveTo(100 tEpe="%utton" value="Imprimir esta pC(ina" on.licV="print()"= tEpe="%utton" value=")umenta la ventana 10 anc6o 10 lar(o" on.licV="resiNeME(10 10)"= !00)"= 10)"= 10)"=
tEpe="%utton" value="#i-a el tama?o de la ventana en 400 x !00" on.licV="resiNeTo(400
5%r= 5%r= 5input tEpe="%utton" value="1croll arri%a del todo" on.licV="scroll(0 0)"= 5%r= 5%r= 5input tEpe="%utton" value="1croll arri%a 10 pixels" on.licV="scrollME(0 710)"= 5<3orm=
Estos e#emplos son muy simples aunque poco pr$cticos. Qnicamente se trata de una serie de botones que al pulsarlos

28
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com llaman a otros tantos m!todos del ob#eto )indo). En el atributo onclic- de la etiqueta del botn se indican las sentencias Javascript que queremos que se e#ecuten cuando se pulsa sobre dicho botn. En el captulo siguiente veremos otros e#emplos reali(ados con m!todos del ob#eto )indo) de Javascript un poco m$s detallados.
Artculo por
).*.- E emplos de m(todos de 9indo9

.tros ejemplos de m(todos del objeto 1indo1 de Javascript, relatados con detalle. *hora vamos a reali(ar alg4n e#emplo de utili(acin de los m!todos de la ventana. 9os vamos a centrar en los e#emplos que sirven para sacar ca#as de di$logo que son muy 4tiles.
).*.1.- &a a de alerta

Para sacar un texto en una ventanita con un botn de aceptar. 5ecibe el texto por par$metro.
window.alert("Bste es el texto Rue sale")
'omo el ob#eto )indo) se sobreentiende podemos escribirlo as.

alert("Bste es el texto Rue sale")
3aca una ventana como la que se puede ver en esta p$gina.
).*.2.- &a a de confirmacin

/uestra una ventana con un texto indicado por par$metro y un botn de aceptar y otro de recha(ar. +ependiendo del botn que se pulsa devuelve un true Asi se pulsa aceptarB o un false Asi se pulsa recha(arB.
5script= var respuesta = con3irm(")ceptame o rec6aName") alert ("2as pulsadoD " + respuesta) 5<script=
Este script muestra una ca#a de di$logo confirm y luego muestra en otra ca#a de di$logo alert el contenido de la variable que devolvi la ca#a de di$logo. 9uevamente podemos ver el funcionamiento de este script si accedemos a esta p$gina a parte.
).*.#.- &a a de introduccin de un dato

/uestra una ca#a de di$logo 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 par$metro del m!todo. &ambi!n hay un botn de aceptar y otro de cancelar. En caso de pulsar aceptar el m!todo devuelve el texto que se haya escrito. 3i se puls cancelar devuelve null. El e#emplo siguiente sirve para pedir el nombre de la persona que est$ visitando la p$gina y luego mostrar en la p$gina un saludo personali(ado. 2tili(a un bucle para repetir la toma de datos siempre que el nombre de la persona sea null Aporque puls el botn de cancelarB o sea un string vaco Aporque no escribi nadaB.
5script= nom%re = null w6ile (nom%re == null XX nom%re == "")8 nom%re = prompt(">ime tu nom%reD" "") 9 document.write("561=2ola " + nom%re + "5<61=") 5<script=
3i nos fi#amos en la ca#a prompt veremos que recibe dos par$metros. El segundo era el texto por defecto que sale en la ca#a como respuesta. "o hemos de#ado como un string vaco para que no salga nada como texto por defecto.

29
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Podemos ver este 4ltimo script en funcionamiento en una p$gina a parte. 8asta aqu los e#emplos de los m!todos del ob#eto )indo). +e todos modos en el resto del manual tendremos ocasin de ver cmo traba#ar con muchas propiedades y m!todos de este ob#eto.
Artculo por
).-.- %b eto document en Javascript

2na descripcin del objeto de Javascript que sirve para controlar el domumento que se visualiza en el navegador. /ambi(n ay una lista de todas sus propiedades. 'on el ob#eto document se controla la p$gina )eb y todos los elementos que contiene. El ob#eto document es la p$gina actual que se est$ visuali(ando en ese momento. +epende del ob#eto )indo) pero tambi!n puede depender del ob#eto frame en caso de que la p$gina se est! mostrando en un frame.
).-.1.- ,ropiedades del ob eto document

1eamos una lista de las propiedades del ob#eto document y luego veremos alg4n e#emplo. alin0,olor 'olor de los enlaces activos (nc!or 2n ancla de la p$gina. 3e consigue con la etiqueta I* nameMCnombreNdelNanclaCJ. 3e accede por su nombre. anc!ors arra$ 2n array de las anclas del documento. (pplet 2n applet de la p$gina. 3e accede por su nombre. AJavascript 7.7B applets arra$ 2n array con todos los applets de la p$gina. AJavascript 7.7B (rea 2na etiqueta I*5E*J de las que est$n vinculadas a los mapas de im$genes AEtiqueta B. 3e accede por su nombre. AJavascript 7.7B bg,olor El color de fondo del documento. classes "as clases definidas en la declaracin de estilos '33. AJavascript 7.<B coo0ie 2na coo-ie domain 9ombre del dominio del servidor de la p$gina. )mbed 2n elemento de la pagina incrustado con la etiqueta IE/HE+J. 3e accede por su nombre. AJavascript 7.7B embeds arra$ &odos los elementos de la p$gina incrustados con IE/HE+J. AJavascript 7.7B fg,olor El color del texto. Para ver los cambios hay que reescribir la p$gina.

30
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com From 2n formulario de la p$gina. 3e accede por su nombre. forms arra$ 2n array con todos los formularios de la p$gina. ids Para acceder a estilos '33. AJavascript 7.<B Image 2na imagen de la p$gina )eb. 3e accede por su nombre. AJavascript 7.7B images arra$ 'ada una de las im$genes de la p$gina introducidas en un array. AJavascript 7.7B last odified "a fecha de 4ltima modificacin del documento. lin0,olor El color de los enlaces. #in0 2n enlace de los de la p$gina. 3e accede por su nombre. lin0s arra$ 2n array con cada uno de los enlaces de la p$gina. location "a 25" del documento que se est$ visuali(ando. Es de solo lectura. referrer "a p$gina de la que viene el usuario. tags Estilos definidos a las etiquetas de 8&/" en la p$gina )eb. AJavascript 7.<B title El titulo de la p$gina. +R# "o mismo que location pero es aconse#able utili(ar location ya que 25" no existe en todos los navegadores. vlin0,olor El color de los enlaces visitados.
Artculo por
)...- E emplos de propiedades de document

!emos varios ejemplos de acceso y manipulacin de las propiedades del objeto document de Javascript. +espu!s de estudiar las propiedades del ob#eto document vamos a ver alg4n e#emplo para ilustrar el modo de acceso y utili(acin de las mismas.
)...1.- E emplo con la propiedad bg&olor

1amos a utili(ar el evento onclic- para colocar tres botones en la p$gina que al pulsarlos nos cambie el color del fondo de la p$gina.
5script= 3unction cam%ia.olor(colorin)8

31

document.%(.olor = colorin 9 5<script= 53orm= 5input tEpe="Mutton" value="Io-o" onclicV="cam%ia.olor(W330000W)"= 5input tEpe="Mutton" value="Jerde" onclicV="cam%ia.olor(W003300W)"= 5input tEpe="Mutton" value=")Nul" onclicV="cam%ia.olor(W000033W)"= 5<3orm=
Primero definimos una funcin que ser$ la encargada de cambiar el color y luego tres botones que llamar$n a la funcin cuando sean pulsados pas$ndole el color como par$metro. Podemos ver el e#emplo en marcha.
)...2.- ,ropiedad title

"a propiedad title guarda la cadena que conforma el ttulo de nuestra p$gina )eb. 3i accedemos a dicha propiedad obtendremos el ttulo y si la cambiamos cambiar$ el ttulo de la p$gina )eb.
Nota: recordamos que el ttulo se puede ver en la barra de arriba del todo de la ventana del navegador.
1amos a mostrar e ttulo de la p$gina en una ca#a de alerta.

alert (document.title)
*hora vamos a hacer una funcin que modifica el ttulo de la p$gina asign$ndole el texto que le llegue por par$metro.
3unction cam%iaTitulo(texto)8 document.title = texto 9
'omo en el e#emplo anterior vamos a crear varios botones que llamen a la funcin pas$ndole distintos textos que se colocar$n en el ttulo de la p$gina.
53orm= 5input tEpe="Mutton" value="Titulo = 2ola a todos" onclicV="cam%iaTitulo(W2ola a todosW)"= 5input tEpe="Mutton" value="Titulo = Mienvenidos a mi pC(ina we%" onclicV="cam%iaTitulo(WMienvenidos a mi pC(ina we%W)"= 5input tEpe="Mutton" value="Titulo = 0Cs dias Rue lon(aniNas" onclicV="cam%iaTitulo(W0Cs dias Rue lon(aniNasW)"= 5<3orm=
Podemos ver en funcionamiento este script en otra p$gina )eb.

Artculo por
).0.- M(todos de document

!emos una lista de los eventos disponibles en el objeto document. El ob#eto document locali(ado deba#o del ob#eto )indo) en la #erarqua de ob#etos de Javascript tambi!n tiene una lista de m!todos interesantes. "a vemos a continuacin. capture)vents() Para capturar los eventos que ocurran en la p$gina )eb. 5ecibe como par$metro el evento que se desea capturar. close() 'ierra el flu#o del documento. A3e ver$ m$s adelante en este manual un artculo sobre el flu#o del documentoB conte*tual() 6frece una lnea de control de los estilos de la p$gina. En el caso que deseemos especificarlos con Javascript.

32
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com getSelection() +evuelve un string que contiene el texto que se ha seleccionado. 3lo funciona en 9etscape. !andle)vent() Invocas el mane#ador de eventos del elemento especificado. open() *bre el flu#o del documento. release)vents() "iberar los eventos capturados del tipo que se especifique envi$ndolos a los ob#etos siguientes en la #erarqua. route)vent() Pasa un evento capturado a trav!s de la #erarqua de eventos habitual. /rite() Escribe dentro de la p$gina )eb. Podemos escribir etiquetas 8&/" y texto normal. /riteln() Escribe igual que el m!todo )riteAB aunque coloca un salto de lnea al final. "os eventos de document sirven principalmente para controlar dos cosas. 2n grupo nos ofrece una serie de funciones para el control de los documentos como escribir abrirlos y cerrarlos. "os veremos en el captulo siguiente que habla sobre el control del flu#o de escritura del documento. El otro grupo ofrece herramientas para el control de los eventos en el documento y lo veremos m$s adelante cuando tratemos con detenimiento el tema de eventos. 3e nos queda un poco suelto el m!todo get3electionAB que slo funciona en los navegadores de 9etscape y por tanto no resulta muy 4til para aplicaciones que deseemos que sean compatibles en todos los sistemas. *un as haremos el e#emplo sobre este m!todo ya que los otros los vamos a ver en siguientes captulos. El e#emplo consiste en una p$gina que tiene un poco de texto y un botn. En la p$gina podremos seleccionar algo de texto y luego apretar el botn que llama a una funcin que muestra en una ca#a alert el texto que se ha seleccionado. El cdigo es el siguiente:
56tml= 56ead= 5title=Iescatar lo seleccionado5<title= 5script lan(ua(e="Qava1cript"= 3unction mostrar1eleccionado()8 alert("2as seleccionadoDn" + document.(et1election()) 9 5<script= 5<6ead= 5%odE= 561=Iescatar lo seleccionado5<61= 5%r= 53orm= 5input tEpe="%utton" value="pulsameU" on.licV="mostrar1eleccionado()"= 5<3orm= 1elecciona cualRuier texto de la pC(ina E pulsa so%re el %otYn. 5<%odE= 5<6tml=
3e puede ver en funcionamiento el script en una p$gina aparte aunque slo funcionar$ en 9etscape e Internet Explorer dar$ un error.
Artculo por

33
).1.- "lu o de escritura del documento

Es el proceso en el que el navegador escribe la p,gina. 0ara escribir en la p,gina desde Javascript el flujo del documento debe estar abierto. *cerca del ob#eto document tambi!n es interesante hablar un poco sobre el flu#o de escritura del documento o p$gina )eb. 'uando el navegador lee una p$gina )eb la va interpretando y escribiendo en su ventana. El proceso en el que el navegador est$ escribiendo la p$gina le llamamos flu#o de escritura del documento. El flu#o comien(a cuando se empie(a a escribir la p$gina y dura hasta que !sta ha terminado de escribirse. 2na ve( terminada la escritura de la p$gina el flu#o de escritura del documento se cierra autom$ticamente. 'on esto termina la carga de la p$gina. 2na ve( cerrado el flu#o no se puede escribir en la p$gina )eb ni texto ni im$genes ni otros elementos. En #avascript tenemos que respetar el flu#o de escritura del documento for(osamente. Es por ello que slo podemos e#ecutar sentencias document.)riteAB Am!todo )riteAB del ob#eto documentB cuando est$ abierto el flu#o de escritura del documento o lo que es lo mismo mientras se est$ cargando la p$gina. 3i recordamos las dos formas de e#ecutar un script en Javascript: E#ecucin de los scripts mientras que carga la p$gina. *qu podremos e#ecutar document.)riteAB y lo hemos hecho habitualmente en los e#emplos anteriores. E#ecucin de los scripts cuando la p$gina ha sido cargada como respuesta a un evento del usuario. *qu no podemos hacerlo porque la p$gina ha terminado de cargarse de hecho no lo hemos hecho nunca hasta ahora.
8ay un mati( que dar a que no se puede escribir en la p$gina cuando ya est$ cerrado el flu#o. En realidad si que se puede pero necesitamos abrir el flu#o otra ve( para escribir en la p$gina tanto es as que aunque nosotros no lo abramos explcitamente Javascript se encargar$ de ello. "o que tiene que quedar claro es que si hacemos un document.)riteAB el flu#o tiene que estar abierto y si no lo est$ se abrir$. El problema de abrir el flu#o de escritura del documento una ve( ya est$ escrita la p$gina es que se borra todo su contenido. Para que quede claro vamos a hacer un script para escribir en la p$gina una ve( !sta ha sido cargada. 3implemente necesitamos un botn y al pulsarlo e#ecutar el m!todo )riteAB del ob#eto document.
53orm= 5I*/'T tEpe=%utton value=escri%ir onclicV="window.document.write(W6olaW)"= 5<3orm=
3i nos fi#amos en el mane#ador de eventos onclic- hemos colocado la #erarqua de ob#etos desde el principio es decir empe(ando por el ob#eto )indo). Esto es porque hay algunos navegadores que no sobreentienden el ob#eto )indo) en las sentencias escritas en los mane#adores de eventos. Podemos ver el e#emplo en funcionamiento. El resultado de la e#ecucin puede variar de un navegador a otro pero en cualquier caso se borrar$ la p$gina que se est$ e#ecutando.
).1.1.- M(todos open:; ' close:; de document

"os m!todos openAB y closeAB del ob#eto document sirven para controlar el flu#o del documento desde Javascript. 9os permiten abrir y cerrar el documento explcitamente. El e#emplo de escritura en la p$gina anterior se debera haber escrito con su correspondiente apertura y cierre del documento y hubiese quedado algo parecido a esto.
5script= 3unction escri%e()8 document.open() window.document.write(W2olaW) document.close() 9 5<script= 53orm=

34

5I*/'T tEpe=%utton value=escri%ir onclicV="escri%e()"= 5<3orm=
1emos que ahora no escribimos las sentencias dentro del mane#ador porque cuando hay m$s de una sentencia queda m$s claro poner una llamada a una funcin y en la funcin colocamos las sentencias que queramos. "as sentencias del e#emplo anterior que cubren la apertura escritura y cierre del documento. 3e pueden ver en marcha aqu.
Artculo por
Parte $:
%rabajo con &ormularios en Javascript

os +ormularios +orman parte del D-1 de la p(gina ! son un grupo de elementos con los $ue traba%aremos mu! habitualmente ! $ue por tanto/ merece la pena prestar especial atenci#n. 0prenderemos a recibir ! alterar din(micamente los 'alores ! estados de los elementos de +ormulario con )a'ascript.
*.1.- 8raba o con formularios en Javascript

0ara continuar vamos a ver una serie de cap"tulos enfocados a aprender a trabajar con los formularios. A ora veremos como acceder a los formularios y sus elementos. Para continuar vamos a ver una serie de captulos enfocados a aprender a traba#ar con los formularios acceder a sus elementos para controlar sus valores y actuali(arlos. El ob#eto form depende en la #erarqua de ob#etos del ob#eto document. En un ob#eto form podemos encontrar algunos m!todos y propiedades pero lo m$s 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 ca#as de seleccin $reas de texto botones de radio etc. Para acceder a un formulario desde el ob#eto document podemos hacerlo de dos formas. 7. * partir de su nombre asignado con el atributo 9*/E de 8&/". <. /ediante la matri( de formularios del ob#eto document con el ndice del formulario al que queremos acceder. Para este formulario
5#,I0 name="31"= 5I*/'T tEpe=text name=campo1= 5I*/'T tEpe=text name=campo!= 5<#,I0=
Podremos acceder con su nombre de esta manera.

35

document.31
6 con su ndice si suponemos que es el primero de la p$gina.

document.3ormsS0T
+e similar manera accedemos a los elementos de un formulario que dependen del ob#eto form. 7. * partir del nombre del ob#eto asignado con el atributo 9*/E de 8&/". <. /ediante la matri( de elementos del ob#eto form con el ndice del elemento al que queremos acceder. Podramos acceder al campo 7 del anterior formulario de dos maneras. 'on su nombre lo haramos as.
document.31.campo1
o a partir del array de elementos. document.f7.elementsR=S Autili(amos el ndice = porque es el primer elemento y en Javascript los arrays empie(an por =.B 3i deseamos acceder al segundo campo del formulario escribiramos una de estas dos cosas:
document.31.campo! document.31.elementsS1T
recordamos que tambi!n podemos acceder a un fomulario por el array de forms indicando el ndice del formulario al que acceder. +e este modo el acceso al campo< sera el siguiente:
document.3ormsS0T.campo! document.3ormsS0T.elementsS1T
En estos casos hemos supuesto que este formulario es el primero que hay escrito en el cdigo 8&/" por eso accedemos a !l con el ndice =. Esperamos que haya quedado claro el acceso a formularios y sus campos. Pasaremos entonces sin m$s a un e#emplo para practicar todo esto.
Artculo por
*.2.- E . traba o con formularios. &alculadora sencilla

!amos a ver un ejemplo del trabajo con formularios en el que desarrollaremos una calculadora sencilla. Para ilustrar un poco el traba#o con formularios vamos a reali(ar un e#emplo pr$ctico. 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 traba#a con formularios y las posibilidadedes que tenemos.
*.2.1.- E emplo calculadora sencilla

En este e#emplo vamos a construir una calculadora aunque bastante sencilla que permita reali(ar las operaciones b$sicas. Para hacer la calculadora vamos a reali(ar un formulario en el que vamos a colocar tres campos de texto los dos primeros para los operandos y un tercero para el resultado. *dem$s habr$n unos botones para hacer las operaciones b$sicas. )l formulario de la calculadora se puede ver a<u@%
53orm name="calc"= 5input tEpe="Text" name="operando1" value="0" siNe="1!"= 5%r= 5input tEpe="Text" name="operando!" value="0" siNe="1!"= 5%r= 5input tEpe="Mutton" name="" value=" + " onclicV="calcula(W+W)"= 5input tEpe="Mutton" name="" value=" 7 " onclicV="calcula(W7W)"= 5input tEpe="Mutton" name="" value=" & " onclicV="calcula(WFW)"= 5input tEpe="Mutton" name="" value=" < " onclicV="calcula(W<W)"= 5%r=

36

5input tEpe="Text" name="resultado" value="0" siNe="1!"= 5<3orm=
/ediante una funcin vamos a acceder a los campos del formulario para recoger los operandos en dos variables. "os campos de texto tienen una propiedad llamada value que es donde podemos obtener lo que tienen escrito en ese momento. /as tarde nos ayudaremos de la funcin evalAB para reali(ar la operacin. Pondremos por 4ltimo el resultado en el campo de texto creado en tercer lugar utili(ando tambi!n la propiedad value del campo de texto. * la funcin que reali(a el c$lculo Aque podemos ver a continuacinB la llamamos apretando los botones de cada una de las operaciones. +ichos botones se pueden ver en el formulario y contienen un atributo onclic- que sirve para especificar las sentencias Javascript que deseamos que se e#ecuten cuando el usuario pulse sobre !l. En este caso la sentencia a e#ecutar es una llamada a la funcin calculaAB pasando como par$metro el smbolo u operador de la operacin que deseamos reali(ar. El
*.2.2.- script con la funcin calcula:;

5script= 3unction calcula(operacion)8 var operando1 = document.calc.operando1.value var operando! = document.calc.operando!.value var result = eval(operando1 + operacion + operando!) document.calc.resultado.value = result 9 5<script=
"a funcin evalAB recordamos que reciba un string y lo e#ecutaba como una sentencia Javascript. En este caso va a recibir un n4mero que concatenado a una operacin y otro n4mero ser$ siempre una expresin aritm!tica que evalAB solucionar$ perfectamente. Podemos ver el e#emplo de la calculadora en funcionamiento. El acceso a otros elementos de los formularios se hace de manera parecida en cuanto respecta a la #erarqua de ob#etos aunque como cada elemento tiene sus particularidades las cosas que podremos hacer con ellos diferir$n un poco. "o veremos un poco m$s adelante.
Artculo por
*.#.- ,ropiedades ' m(todos del ob eto form

Ec amos un vistazo a las distintas propiedades y m(todos del objeto form de Javascript. 3ostramos alg4n ejemplo de utilizacin de propiedades y una sencilla validacin de formulario y env"o con el m(todo submit$%. 1amos a ver ahora el ob#eto form por si solo para destacar sus propiedades y m!todos.
*.#.1.- ,ropiedades del ob eto form

&iene unas cuantas propiedades para a#ustar sus atributos mediante Javascript. action Es la accin que queremos reali(ar cuando se submite un formulario. 3e coloca generalmente una direccin de correo o la 25" a la que le mandaremos los datos. 'orresponde con el atributo *'&I69 del formulario. elements arra$ "a matri( de elementos contiene cada uno de los campos del formulario. encoding El tipo de codificacin del formulario lengt!

37
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com El n4mero de campos del formulario. met!od El m!todo por el que mandamos la informacin. 'orresponde con el atributo /E&86+ del formulario. name El nombre del formulario que corresponde con el atributo 9*/E del formulario. target "a ventana o frame en la que est$ dirigido el formulario. 'uando se submita se actuali(ar$ la ventana o frame indicado. 'orresponde con el atributo target del formulario.
*.#.2.- E emplos de traba o con las propiedades

'on estas propiedades podemos cambiar din$micamente con Javascript los valores de los atributos del formulario para hacer con !l lo que se desee dependiendo de las exigencias del momento. Por e#emplo podramos cambiar la 25" que recibira la informacin del formulario con la instruccin.
document.mi#ormulario.action = "mi/C(ina.asp"
6 cambiar el target para submitir un formulario en una posible ventana secundaria llamada miNventana.
document.mi#ormulario.tar(et = "mi;ventana"
*.#.#.- M(todos del ob eto form

Estos son los m!todos 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 reiniciali(ar todos los campos del formulario como si se hubiese pulsado el botn de reset. AJavascript 7.7B
*.#.).- E emplo de traba o con los m(todos

1amos a ver un e#emplo muy sencillo sobre cmo validar un formulario para submitirlo en caso de que est! relleno. Para ello vamos a utili(ar el m!todo submitAB del formulario. El mecanismo es el siguiente: en ve( de colocar un botn de submit colocamos un botn normal AII9P2& typeMCbuttonCJB 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.
53orm name="mi#ormulario" action="mailtoDpromocionZ(uiarte.com" enctEpe="text<plain"= 5input tEpe="Text" name="campo1" value="" siNe="1!"= 5input tEpe="%utton" value="Bnviar" onclicV="valida1u%mite()"= 5<3orm=
9os fi#amos en que no hay botn de submit sino un botn normal con una llamada a una funcin que podemos ver a continuacin.
3unction valida1u%mite()8 i3 (document.mi#ormulario.campo1.value == "") alert(">e%e rellenar el 3ormulario") else document.mi#ormulario.su%mit() 9
En la funcin se comprueba si lo que hay escrito en el formulario es un string vaco. 3i es as se muestra un mensa#e de alerta que informa que se debe rellenar el formulario. En caso de haya algo en el campo de texto submite el formulario utili(ando el m!todo submit del ob#eto form.

38
Artculo por
*.).- &ontrol de campos de te<to con Javascript

Explicacin y documentacin de los campos de texto y su control con Javascript. *e incluyen los campos de tipo text, pass1ord y idden. 1amos a ver ahora los campos donde podemos guardar cadenas de texto es decir los campos de texto pass)ord y hidden. 8ay otro campo relacionado con la escritura de texto el campo &ext*rea que veremos m$s adelante.
*.).1.- &ampo 8e<t

Es el campo que resulta de escribir la etiqueta II9P2& typeMCtextCJ. "o hemos utili(ado hasta el momento en varios e#emplos pero vamos a parar un momento en !l para describir sus propiedades y m!todos.
*.).2.- ,ropiedades del campo te<t

1emos la lista de propiedades de estos tipos de campo. default>alue Es el valor por defecto que tiene un campo. "o que contiene el atributo 1*"2E de la etiqueta II9P2&J. form 8ace referencia al formulario. name 'ontiene el nombre de este campo de formulario t$pe 'ontiene el tipo de campo de formulario que es. value El texto que hay escrito en el campo. 1amos a ver un e#emplo sobre lo que puede hacer la propiedad default1alue. En este e#emplo tenemos un formulario y un botn de reset. 3i pulsamos el botn de reset el campo de texto se vaca porque su value de 8&/" 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 p$gina completa.
56tml= 56ead= 5title=.am%iar el valor por de3ecto5<title= 5script= 3unction cam%ia>e3ecto()8 document.mi#ormulario.campo1.de3aultJalue = "2olaUU" 9 5<script= 5<6ead= 5%odE= 53orm name="mi#ormulario" action="mailtoDpromocionZ(uiarte.com" enctEpe="text<plain"= 5input tEpe="Text" name="campo1" value="" siNe="1!"= 5input tEpe="Ieset"= 5%r= 5%r= 5input tEpe="%utton" value=".am%ia valor por de3ecto" onclicV="cam%ia>e3ecto()"= 5<3orm= 5<%odE=

39

5<6tml=
3e puede ver en funcionamiento en esta p$gina.
*.).#.- M(todos del ob eto 8e<t

3e pueden invocar los siguientes m!todos sobre los ob#etos tipo &ext. blur() 5etira el foco de la aplicacin del campo de texto. focus() Pone el foco de la aplicacin en el campo de texto. select() 3elecciona el texto del campo. 'omo e#emplo vamos a mostrar una funcin que selecciona el texto de un campo de texto de un formulario como el de la p$gina del e#emplo anterior. Para hacerlo hemos utili(ado dos m!todos el primero para pasar el foco de la aplicacin al campo de texto y el segundo para seleccionar el texto.
3unction selecciona#oco()8 document.mi#ormulario.campo1.3ocus() document.mi#ormulario.campo1.select() 9
Puede verse en funcionamiento en esta p$gina.
*.).).- &ampos ,ass9ord

Estos funcionan igual que los hidden con la peculiaridad que el contenido del campo no puede verse escrito en el campo por lo que salen asterscos en lugar del texto.
*.).*.- &ampos =idden

"os campos hidden son como campos de texto que est$n ocultos para el usuario es decir que no se ven en la p$gina. 3on muy 4tiles en el desarrollo de )ebs para pasar variables en los formularios a las que no debe tener acceso el usuario. 3e colocan en con 8&/" con la etiqueta II9P2& typeMhiddenJ y se rellenan de datos con su atributo value. /as 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.mi#ormulario..ampo2idden.value = "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.
Artculo por
*.*.- &ontrol de &2ec>bo< en Javascript

-ap"tulo sobre el control del elemento de formulario tipo c ec5box o caja de verificacin. Estudiamos sus m(todos y propiedades, con ejemplos. "os chec-box son las unas ca#as que permiten marcarlas o no para verificar alguna cosa en un formulario. Podemos ver una ca#a chec-bo- a continuacin.

40
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com "os chec-box se consiguen con la etiqueta II9P2& typeMchec-boxJ. 'on el atributo 9*/E de la etiqueta II9P2&J le podemos dar un nombre para luego acceder a ella con #avascript. 'on el atributo '8E'LE+ indicamos que el campo debe aparecer chequeado por defecto. 'on Javascript a partir de la #erarqua de ob#etos del navegador tenemos acceso al chec-box que depende del ob#eto form del formulario donde est$ incluido.
*.*.1.- ,ropiedades de un c2ec>bo<

"as propiedades que tiene un chec-box son las siguientes. c!ec0ed Informa sobre el estado del chec-box. Puede ser true o false. default,!ec0ed 3i est$ chequeada por defecto o no. value El valor actual del chec-box. &ambi!n tiene las propiedades form name type como cualquier otro elemento de formulario.
*.*.2.- M(todos del c2ec>bo<

1eamos la lista de los m!todos de un chec-box. clic0() Es como si hici!semos un clic- sobre el chec-box es decir cambia el estado del chec-box. blur() 5etira el foco de la aplicacin del chec-box. focus() 'oloca el foco de la aplicacin en el chec-box. Para ilustrar el funcionamiento de las chec-box vamos a ver una p$gina que tiene un chec-box y tres botones. "os dos primeros para mostrar las propiedades chec-ed y value y el tercero para invocar a su m!todo clic-AB con ob#etivo de simular un clic- sobre el chec-box.
56tml= 56ead= 5title=B-emplo .6ecV%ox5<title= 5script= 3unction alerta.6ecVed()8 alert(document.mi#ormulario.mi.6ecV.c6ecVed) 9 3unction alertaJalue()8 alert(document.mi#ormulario.mi.6ecV.value) 9 3unction metodo.licV()8 document.mi#ormulario.mi.6ecV.clicV() 9 5<script= 5<6ead= 5%odE= 53orm name="mi#ormulario" action="mailtoDpromocionZ(uiarte.com" enctEpe="text<plain"= 5input tEpe="c6ecV%ox" name="mi.6ecV"= 5%r= 5%r= 5input tEpe="%utton" value="in3orma de su propiedad c6ecVed" onclicV="alerta.6ecVed()"= 5input tEpe="%utton" value="in3orma de su propiedad value" onclicV="alertaJalue()"= 5%r= 5%r= 5input tEpe="%utton" value="1imula un clicV" onclicV="metodo.licV()"= 5<3orm=

41

5<%odE= 5<6tml=
Puede verse la p$gina en funcionamiento aqu.

Artculo por
*.-.- &ontrol de botones de radio en Javascript

Explicacin sobre el manejo de radio buttons en Javascript. Lista de m(todos y propiedades junto con alg4n ejemplo de su funcionamiento. El botn de radio Ao radio button en ingl!sB es un elemento de formulario que permite seleccionar una opcin y slo una sobre un con#unto de posibilidades. 3e puede ver a continuacin. Hlanco 5o#o 1erde
Nota: En la parte de arriba podemos ver tres radio buttons en lugar de uno solo. 3e colocan tres botones porque as podemos examinar su funcionamiento al formar parte de un grupo. 1eamos que al seleccionar una opcin se deselecciona la opcin que estuviera marcada antes.
3e consiguen con la etiqueta II9P2& typeMradioJ. 'on el atributo 9*/E de la etiqueta II9P2&J les damos un nombre para agrupar los radio button y que slo se pueda elegir una opcin entre varias. 'on el atributo value indicamos el valor de cada uno de los radio buttons. El atributo chec-ed nos sirve para indicar cu$l de los radio butons tiene que estar seleccionado por defecto.
Referencia: Explicamos en detalle la creacin de botones de radio en nuestro manual de 8&/" en el captulo 6tros elementos de formularios.
'uando en una p$gina tenemos un con#unto de botones de radio se crea un ob#eto radio por cada uno de los botones. "os ob#etos radio dependen del formulario y se puede acceder a ellos por el array de elements sin embargo tambi!n se crea un array con los botones de radio. Este array depende del formulario y tiene el mismo nombre que los botones de radio.
*.-.1.- ,ropiedades del ob eto radio

1eamos una lista de las propiedades de este elemento. c!ec0ed Indica si est$ che-eado o no un botn de radio. default,!ec0ed 3u estado por defecto. value El valor del campo de radio asignado por la propiedad value del radio. #engt! Acomo propiedad del array de radiosB El n4mero de botones de radio que forman parte en el grupo. *ccesible en el vector de radios.
*.-.2.- M(todos del ob eto radio

3on los mismos que los que tena el ob#eto chec-box.

42
*.-.#.- E emplo de utilizacin

1eamos con un e#emplo el m!todo de traba#o con los radio buttons en el que vamos a colocar un montn de ellos y cada uno tendr$ asociado un color. &ambi!n habr$ un botn y al pulsarlo cambiaremos el color de fondo de la pantalla al color que est! seleccionado en el con#unto de botones de radio. 1amos a ver la p$gina entera y luego la comentamos.
56tml= 56ead= 5title=B-emplo Iadio Mutton5<title= 5script= 3unction cam%ia.olor()8 var i 3or (i=04i5document.3colores.colorin.len(t64i++)8 i3 (document.3colores.colorinSiT.c6ecVed) %reaV4 9 document.%(.olor = document.3colores.colorinSiT.value 9 5<script= 5<6ead= 5%odE= 53orm name=3colores= 5input tEpe="Iadio" name="colorin" value="333333" c6ecVed= Mlanco 5%r= 5input tEpe="Iadio" name="colorin" value="330000"= Io-o 5%r= 5input tEpe="Iadio" name="colorin" value="003300"= Jerde 5%r= 5input tEpe="Iadio" name="colorin" value="000033"= )Nul 5%r= 5input tEpe="Iadio" name="colorin" value="333300"= )marillo 5%r= 5input tEpe="Iadio" name="colorin" value="003300"= TurRuesa 5%r= 5input tEpe="Iadio" name="colorin" value="330033"= 0orado 5%r= 5input tEpe="Iadio" name="colorin" value="000000"= *e(ro 5%r= 5%r= 5input tEpe="Mutton" name="" value=".am%ia .olor" onclicV="cam%ia.olor()"= 5<3orm= 5<%odE= 5<6tml=
Primero podemos fi#arnos en el formulario y en la lista de botones de radio. &odos se llaman CcolorinC as que est$n asociados en un mismo grupo. *dem$s vemos que el atributo value de cada botn cambia. &ambi!n vemos un botn aba#o del todo. 'on esta estructura de formulario tendremos un array de elements de O elementos los ; botones de radio y el botn de aba#o. *dem$s tendremos un array de botones de radio que se llamar$ colorn y depende del formulario accesible de esta manera.
document.3orm.colorin
Este array tiene en cada posicin uno de los botones de radio. *s en la posicin = est$ el botn del color blanco en la posicin 7 el del color ro#o... Para acceder a esos botones de radio lo hacemos con su ndice.
document.3colores.colorinS0T
3i queremos acceder por e#emplo a la propiedad value del 4ltimo botn de radio escribimos lo siguiente.
document.3colores.colorinS+T.value
"a propiedad length del array de radios nos indica el n4mero de botones de radio que forman parte del grupo.
document.3colores.colorin.len(t6

43
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com En este caso la propiedad length valdr$ ;. 'on estas notas podremos entender m$s o menos bien la funcin que se encarga de encontrar el radio button seleccionado y cambiar el color de fondo de la p$gina. 3e 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 chec-ed a true. En ese momento salimos del bucle con lo que la variable i almacena el ndice del botn de radio seleccionado. En la 4ltima lnea cambiamos el color de fondo a lo que hay en el atributo value del radio button seleccionado. Podemos ver ese e#emplo en funcionamiento.
Referencia: 3i deseamos profundi(ar el el control de botones de radio podemos acceder a un taller relacionado: Inhibir radio button con Javascript
Artculo por
*...- &ontrol de campos select con Javascript

+escripcin y ejemplo para el control de campos de formulario select, tambi(n llamados listas desplegables o combo box. El ob#eto select de un formulario es una de esas listas desplegables que nos permiten seleccionar un elemento. 3e despliegan apretando sobre una flecha a continuacin se puede escoger un elemento y para acabar se vuelven a plegar. 3e puede ver un elemento select de un formulario a continuacin.
Option 1
2no de estos elementos se puede obtener utili(ando la etiqueta I3E"E'&J dentro de un formulario. * la etiqueta le podemos a:adir un atributo para darle el nombre 9*/E para luego acceder a ese campo mediante Javascript. Para expresar cada una de las posibles opciones del campo select utili(amos una etiqueta I6P&I69J a la que le introducimos un atributo 1*"2E para expresar su valor. El texto que colocamos despu!s de la etiqueta I6P&I69J sirve como etiqueta de esa opcin es el texto que ve el usuario asociado a esa opcin.
*...1.- ,ropiedades del ob eto select

1amos a ver una lista de las propiedades de este elemento de formulario. lengt! Duarda la cantidad de opciones del campo select. 'antidad de etiquetas I6P&I69J -ption 8ace referencia a cada una de sus opciones. 3on por si mismas ob#etos. options 2n array con cada una de las opciones del select. selectedInde* Es el ndice de la opcin que se encuentra seleccionada. *parte de las conocidas propiedades comunes a todos los elementos de formulario: form y name y type.
*...2.- M(todos del ob eto select

"os m!todos son solamente < y ya conocemos su significado.

44
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com blur() Para retirar el foco de la aplicacin de ese elemento de formulario. focus() Para poner el foco de la aplicacin. -bAeto option &enemos que pararnos a ver tambi!n este ob#eto para entender bien el campo select. 5ecordamos que las option son las distintas opciones que tiene un select expresadas con la etiqueta I6P&I69J.
*...#.- ,ropiedades de option

Estos ob#etos slo tienen propiedades no tienen m!todos. 1amos a verlas. defaultSelected Indica con un true o un false si esa opcin es la opcin por defecto. "a opcin por defecto se consigue con 8&/" colocando el atributo selected a un option. inde* El ndice de esa opcin dentro del select. selected Indica si esa opcin se encuentra seleccionada o no. te*t Es el texto de la opcin. "o que puede ver el usuario en el select que se escribe despu!s de la etiqueta I6P&I69J. value Indica el valor de la opcin que se introduce con el atributo 1*"2E de la etiqueta I6P&I69J.
*...).- E emplo de acceso a un select

1amos a ver un e#emplo sobre cmo se accede a un select con Javascript como podemos acceder a sus distintas propiedades y a la opcin seleccionada. 1amos a empe(ar viendo el formulario que tiene el select con el que vamos a traba#ar. Es un select que sirve para valorar el )eb que estamos visitando.
53orm name="3omul"= JaloraciYn so%re este we%D 5select name="mi1elect"= 5option value="10"=0uE %ien 5option value="5" selected=Ie(ular 5option value="0"=0uE mal 5<select= 5%r= 5%r= 5input tEpe=%utton value=">ime propiedades" onclicV="dime/ropiedades()"= 5<3orm=
*hora vamos a ver una funcin que recoge las propiedades m$s significativas del campo select y las presenta en una ca#a alert.
3unction dime/ropiedades()8 var texto texto = "Bl numero de opciones del selectD " + document.3ormul.mi1elect.len(t6 var indice = document.3ormul.mi1elect.selectedIndex texto += "nIndice de la opcion esco(idaD " + indice var valor = document.3ormul.mi1elect.optionsSindiceT.value texto += "nJalor de la opcion esco(idaD " + valor var textoBsco(ido = document.3ormul.mi1elect.optionsSindiceT.text texto += "nTexto de la opcion esco(idaD " + textoBsco(ido alert(texto) 9

45
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Esta funcin crea una variable de texto donde va introduciendo cada una de las propiedades del select. "a 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 utili(amos el array options con el ndice recogido en las segunda variable. Podemos ver el e#emplo en funcionamiento aqu. Podemos ver un e#emplo m$s practico sobre qu! se puede hacer con un campo select en el reporta#e de cmo hacer un navegador desplegable con Javascript.
*...*.- ,ropiedad value de un ob eto select

Para acceder al valor seleccionado de un campo select podemos utili(ar 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.
3ormul.mi1elect.value
3in embargo esta propiedad slo est$ presente en navegadores Internet Explorer por lo que es recomendable acceder utili(ando el vector de options con el ndice de la posicin seleccionada si deseamos que la p$gina sea compatible con todos los navegadores. 8emos querido a:adir este punto para que si alguna ve( utili(amos o vemos utili(ar este m!todo de acceso sepamos su pega y porque es me#or utili(ar el vector de options.
Artculo por
*.0.- &ontrol de elementos 8e<tarea en Javascript

Los elementos textarea son los campos que permiten introducir varias l"neas de texto. Aprendemos a controlarlos con programacin Javascript. Para acabar de describir todos los elementos de formularios vamos a ver el ob#eto 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 ve(. El campo textarea se puede ver a continuacin. En los Textarea Podemos colocar el texto en varias lneas
2n campo textarea se consigue con la etiqueta I&ET&*5E*J. 'on el atributo name le podemos dar un nombre para acceder al campo textarea mediante Javascript. 6tros atributos interesantes son cols y ro)s que sirven para indicar la anchura y altura del campo textarea en caracteres cols indica el n4mero de columnas y ro)s 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 I&ET&*5E*J y su correspondiente cierre.
*.0.1.- ,ropiedades de te<tarea

3e puede ver una lista de las propiedades disponibles en un textarea a continuacin que son los mismos que un campo de texto. default>alue .ue contiene el valor por defecto del textarea. value

46
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com .ue contiene el texto que hay escrito en el textarea. *dem$s tiene las conocidas propiedades de elementos de formulario form name y type.
*.0.2.- M(todos de te<tarea

1eamos una lista de los m!todos 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() 3elecciona el texto del textarea. 1amos a ver un e#emplo a continuacin que presenta un formulario que tiene un textarea y un botn. *l apretar el botn se cuenta el n4mero de caracteres y se coloca en un campo de texto. Para acceder al n4mero de caracteres lo hacemos a partir del la propiedad value del ob#eto textarea. 'omo value contiene un string podemos acceder a la propiedad length que tienen todos los strings para averiguar su longitud. El cdigo de la p$gina se puede ver aqu.
56tml= 56ead= 5title=B-emplo textarea5<title= 5script= 3unction cuenta()8 num.aracteres = document.3ormul.textito.value.len(t6 document.3ormul.num.aracteres.value = num.aracteres 9 5<script= 5<6ead= 5%odE= 53orm name="3ormul"= 5textarea name=textito cols=40 rows=3= Bste es el texto por de3ecto 5<textarea= 5%r= 5%r= *Pmero de caracteres 5input tEpe="Text" name="num.aracteres" siNe="4"= 5%r= 5%r= 5input tEpe=%utton value=".uenta caracteres" onclicV="cuenta()"= 5<3orm= 5<%odE= 5<6tml=
El e#emplo funcionando se puede ver en una p$gina independiente. Para quien desee profundi(ar tenemos un artculo interesante que ampla el e#emplo anterior. 3e trata de una cuenta de los caracteres del textarea a la ve( que se est$ escribiendo dentro del campo. 3e reali(a gracias al tratamiento de eventos. 3e puede ver el artculo en la direccin http:KK))).desarrollo)eb.comKarticulosK7?@;.php
Artculo por

47
Parte ':
(ventos en Javascript
os e'entos son la base de la interacti'idad/ de modo $ue en este apartado 'eremos c#mo hacer p(ginas $ue respondan a las acciones del usuario. En )a'ascript podemos e%ecutar c#digo como respuesta a e'entos/ $ue son distintos tipos de acciones $ue el 'isitante puede realizar sobre la p(gina o sobre sus elementos.
-.1.- Los eventos en Javascript

2na explicacin sobre lo que son los eventos y como definir sus acciones asociadas en Javascript. "os eventos son la manera que tenemos en Javascript de controlar las acciones de los visitantes y definir un comportamiento de la p$gina cuando se produ(can. 'uando un usuario visita una p$gina )eb e interact4a con ella se producen los eventos y con Javascript podemos definir qu! queremos que ocurra cuando se produ(can. 'on #avascript 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 p$gina. El mane#o de eventos es el caballo de batalla para hacer p$ginas interactivas porque con ellos podemos responder a las acciones de los usuarios. 8asta ahora en este manual hemos podido ver muchos e#emplos de mane#o de uno de los eventos de Javascript el evento onclic- que se produce al pulsar un elemento de la p$gina. 8asta ahora siempre hemos aplicado el evento a un botn pero podramos aplicarlo a otros elementos de la p$gina.
-.1.1.- &mo se define un evento

Para definir las acciones que queremos reali(ar al producirse un evento utili(amos los mane#adores de eventos. Existen muchos tipos de mane#adores de eventos para muchos tipos de acciones del usuario. El maneador de eventos se coloca en la etiqueta 8&/" del elemento de la p$gina que queremos que responda a las acciones del usuario. Por e#emplo tenemos el mane#ador de eventos onclic- que sirve para describir acciones que queremos que se e#ecuten cuando se hace un clic-. 3i queremos que al hacer clic- sobre un botn pase alguna cosa escribimos el mane#ador onclic- en la etiqueta II9P2& typeMbuttonJ de ese botn. *lgo parecido a esto.
5I*/'T tEpe=%utton value="pulsame" onclicV="sentencias;-avascript..."=
3e coloca un atributo nuevo en la etiqueta que tiene el mismo nombre que el evento en este caso onclic-. El atributo se iguala a las sentencias Javascript que queremos que se e#ecuten al producirse el evento. 'ada elemento de la p$gina tiene su propia lista de eventos soportados vamos a ver otro e#emplo de mane#o de eventos esta ve( sobre un men4 desplegable en el que definimos un comportamiento cuando cambiamos el valor seleccionado.
51BKB.T onc6an(e="window.alert(W.am%iaste la selecciYnW)"= 5,/TI,* value="opcion1"=,pcion 1 5,/TI,* value="opcion!"=,pcion ! 5<1BKB.T=
En este e#emplo cada ve( que se cambia la opcin muestra una ca#a de alerta. Podemos verlo en una p$gina aparte. +entro de los mane#adores de eventos podemos colocar tantas instrucciones como deseemos pero siempre separadas por punto y coma. "o habitual es colocar una sola instruccin y si se desean colocar m$s de una se suele crear una funcin con

48
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com todas las instrucciones y dentro del mane#ador se coloca una sola instruccin que es la llamada a la funcin. 1amos a ver cmo se colocaran en un mane#ador varias instrucciones.
5input tEpe=%utton value=/ulsame onclicV="x=304 window.alert(x)4 window.document.%(.olor = WredW"=
3on instrucciones muy simples como asignar a x el valor ?= hacer una ventana de alerta con el valor de x y cambiar el color del fondo a ro#o. Podemos ver el e#emplo en una p$gina aparte. 3in embargo tantas instrucciones puestas en un mane#ador quedan un poco confusas habra sido me#or crear una funcin as.
5script= 3unction e-ecutaBvento,nclicV()8 x = 30 window.alert(x) window.document.%(.olor = WredW 9 5<script= 5#,I0= 5input tEpe=%utton value=/ulsame onclicV="e-ecutaBvento,nclicV()"= 5<#,I0=
*hora utili(amos m$s texto para hacer lo mismo pero seguro que a la mayora les parece m$s claro este segundo e#emplo. 3i se desea se puede ver esta 4ltima p$gina en una ventana aparte
-.1.2.- Jerar7u!a desde el ob eto 9indo9

En los mane#adores de eventos se tiene que especificar la #erarqua entera de ob#etos del navegador empe(ando siempre por el ob#eto )indo). Esto es necesario porque hay alg4n bro)ser antiguo que no sobreentiende el ob#eto )indo) cuando se escriben sentencias Javascript vinculadas a mane#adores de eventos.
Artculo por
-.2.- Los mane adores de eventos en Javascript

Lista de los manejadores de eventos m,s abituales del lenguaje Javascript, junto con una descripcin de cada uno. *hora vamos a ver una lista de los maneAadores de eventos <ue !a$ disponibles en ?avascript ofreciendo una peque:a descripcin de cada uno. 3i queremos saber previamente qu! es un evento y como se tratan en Javascript podemos consultar el artculo anterior del manual: "os eventos en Javascript
Nota: Estos mane#adores de eventos son los m$s comunes presentes en Javascript 7.< de 9etscape 9avigator. Existen otros mane#adores que tambi!n son muy interesantes y veremos m$s adelante en captulos de temas avan(ados de eventos. "a lista de mane#adores de eventos contiene el nombre del mane#ador en negrita su descripcin y finalmente la versin de Javascript que incorpor dicho mane#ador.
onabort Este evento se produce cuando un usuario detiene la carga de una imagen ya sea porque detiene la carga de la p$gina o porque reali(a una accin que la detiene como por e#emplo irse de la p$gina. Javascript 7.7 onblur

49
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 3e 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 e#emplo puede estar situado sobre un campo de texto una p$gina un botn o cualquier otro elemento. Javascript 7.= onc!ange 3e desata este evento cuando cambia el estado de un elemento de formulario en ocasiones no se produce hasta que el usuario retira el foco de la aplicacin del elemento. Javascript 7.= Javascript 7.= onclic0 3e produce cuando se da una pulsacin o clic al botn del ratn sobre un elemento de la p$gina generalmente un botn o un enlace. Javascript 7.= ondragdrop 3e produce cuando un usuario suelta algo que haba arrastrado sobre la p$gina )eb. Javascript 7.< onerror 3e produce cuando no se puede cargar un documento o una imagen y esta queda rota. Javascript 7.7 onfocus El evento onfocus es lo contrario de onblur. 3e produce cuando un elemento de la p$gina o la ventana ganan el foco de la aplicacin. Javascript 7.= on0e$do/n Este evento se produce en el instante que un usuario presiona una tecla independientemente que la suelte o no. 3e produce en el momento de la pulsacin. Javascript 7.< on0e$press 6curre un evento on-eypress cuando el usuario de#a pulsada una tecla un tiempo determinado. *ntes de este evento se produce un on-eydo)n en el momento que se pulsa la tecla.. Javascript 7.< on0e$up 3e produce cuando el usuario de#a de apretar una tecla. 3e produce en el momento que se libera la tecla. Javascript 7.< onload Este evento se desata cuando la p$gina o en Javascript 7.7 las im$genes ha terminado de cargarse. Javascript 7.= onmousedo/n 3e produce el evento onmousedo)n cuando el uuario pulsa sobre un elemento de la p$gina. onmousedo)n se produce en el momento de pulsar el botn se suelte o no. Javascript 7.< onmousemove 3e produce cuando el ratn se mueve por la p$gina. Javascript 7.< onmouseout 3e desata un evento onmuoseout cuando el puntero del ratn sale del $rea ocupada por un elemento de la p$gina. Javascript 7.7 onmouseover Este evento se desata cuando el puntero del ratn entra en el $rea ocupada por un eolemento de la p$gina. Javascript 7.=

50
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com onmouseup Este evento se produce en el momento que el usuario suelta el botn del ratn que previamente haba pulsado. Javascript 7.< onmove Evento que se e#ecuta cuando se mueve la ventana del navegador o un frame. Javascript 7.< onresi1e Evento que se produce cuando se redimensiona la ventana del navegador o el frame en caso de que la p$gina los tenga. Javascript 7.< 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. Javascript 7.7 onselect 3e e#ecuta cuando un usuario reali(a una seleccin de un elemento de un formulario. Javascript 7.= onsubmit 6curre cuando el visitante apreta sobre el botn de enviar el formulario. 3e e#ecuta antes del envo propiamente dicho. Javascript 7.= onunload *l abandonar una p$gina ya sea porque se pulse sobre un enlace que nos lleve a otra p$gina o porque se cierre la ventana del navegador se e#ecuta el evento onunload. Javascript 7.=
Artculo por
-.#.- E emplos de eventos en Javascript. %nabort

!emos enlaces a diversas aplicaciones pr,cticas donde se tratan eventos y ofrecemos un nuevo ejemplo para el evento onabort. * lo largo de los manuales I y II de Javascript as como del &aller hemos mostrado muchos e#emplos de utili(acin de los mane#adotes de eventos. *qu veremos e#emplos sencillos que se nos ocurren para utili(ar otros mane#adotes que no hemos visto todava aunque antes podemos hacer una lista de algunos e#emplos publicados anteriormente que deberan servir de ayuda para ir captando la pr$ctica de el mane#o de eventos. *cceso por clave con Javascript AEvento onclic-B 5ollover con Javascript AEventos onmuoseover y onmouseoutB 9avegador desplegable AEvento onchangeB 'alculadora sencilla AEvento onclic-B 'onfirmacin del envo de formulario AEvento onclic-B Posicionarse en un select AEvento on-eypressB Inhibir campo de formulario AEvento onfocusB 'uenta caracteres de un textarea AEventos on-eydo)n y on-eyupB
-.#.1.- Evento onabort

1eamos un primer e#emplo en este caso sobre el evento onabort. Este evento se activa al cancelarse la carga de una p$gina ya sea porque se pulsa el botn de cancelar o porque el usuario se marcha de la p$gina por otro enlace.

51
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Este e#emplo contiene una imagen que tiene el evento onabort asignado para que se e#ecute una funcin en caso de que la imagen no llegue a cargarse. "a funcin informa al usuario de que la imagen no se ha llegado a cargar y le pregunta si desea cargarla otra ve(. 3i el usuario contesta que s entonces se pone a descargar la imagen otra ve(. 3i dice que no no hace nada. "a pregunta se hace con una ca#a confirm de Javascript.
56tml= 56ead= 5title=Bvento ona%ort5<title= 5script= 3unction pre(untar1e(uir()8 respuesta = con3irm ("2as detenido la car(a de la pC(ina E 6aE una ima(en Rue no estCs viendo.n[>eseas car(ar la ima(en\") i3 (respuesta) document.im(1.src = "6ttpD<<ipa(inate.iespana.es<ipa(inate<desarrollo(rande.(i3" 9 5<script= 5<6ead= 5%odE= 5im( name=im(1 src="6ttpD<<ipa(inate.iespana.es<ipa(inate<desarrollo(rande.(i3" widt6=500 6ei(6t=45" alt="Ima(en Rue pesa 115]" %order="0" ona%ort="pre(untar1e(uir()"= 5%r= /ulsa el %otYn de parar la car(a de la pC(ina E se pondrC en marc6a el evento onerror 5<%odE= 5<6tml=
Este e#emplo estara bien si siempre se detuviese la carga por pulsar el botn de cancelar pero si lo que pasa es que el usuario ha cancelado por irse a otra p$gina a trav!s de un enlace saldr$ la ca#a de confirmacin pero no ocurrir$ nada independientemente de lo que se responda y el navegante se marchar$ irremediablemente a la nueva p$gina. 3e puede ver en una p$gina aparte.
Artculo por
-.).- E emplo del evento onblur en Javascript

*cript en Javascript que muestra el trabajo con el evento onblur. *e comprueba la validez de un dato al salir del campo de texto donde est, escrito. 6nblur se activa cuando el usuario retira el foco de la aplicacin de un elemento de la p$gina. El foco de la aplicacin es el lugar donde est$ el cursor. 3i por e#emplo 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 A&abB que mueve el foco hasta el siguiente elemento de la p$gina. 3i yo deseo que al situarse fuera de un campo de texto se compruebe que el valor introducido es correcto puedo utili(ar onblur y llamar a una funcin que compruebe si el dato es correcto. 3i 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 v$lido. *unque tiene alguna pega como veremos m$s adelante. 1amos a empe(ar por un caso sencillo en el que solamente deseamos comprobar un campo de texto para asegurarnos que es un n4mero entero.
Referencia: "a funcin que valida un entero la hemos explicado en un taller anterior de Javascript: 1alidar entero en campo de formulario. 56tml= 56ead=

52

5title=Bvento on%lur5<title= 5script= 3unction validarBntero(valor)8 <<intento convertir a entero. <<si era un entero no le a3ecta valor = parseInt(valor)
si no lo era lo intenta convertir
<<.omprue%o si es un valor numOrico i3 (is*a*(valor)) 8 <<entonces (no es numero) devuelvo el valor cadena vacia return "" 9else8 <<Bn caso contrario (1i era un nPmero) devuelvo el valor return valor 9
3unction comprue%aJalidoBntero()8 enteroJalidado = validarBntero(document.31.numero.value) i3 (enteroJalidado == "")8 <<si era la cadena vac@a es Rue no era vClido. Ko aviso alert (">e%e escri%ir un enteroU") <<selecciono el texto document.31.numero.select() <<coloco otra veN el 3oco document.31.numero.3ocus() 9else document.31.numero.value = enteroJalidado 9 5<script= 5<6ead= 5%odE= 53orm name=31= Bscri%a un nPmero enteroD 5input tEpe=text name=numero siNe=" value="" on%lur="comprue%aJalidoBntero()"= 5<3orm= 5<%odE= 5<6tml=
*l salirse del campo de texto AonblurB se e#ecuta comprueba1alidoEnteroAB que utili(a la funcin validarEntero explicada en un taller de Javascript. 3i el valor devuelto por la funcin no es el de un entero en este caso se recibira una cadena vaca muestra un mensa#e en una ca#a alert selecciona el texto escrito en la ca#a y coloca el foco de la aplicacin en la ca#a de texto para que el usuario coloque otro valor. 8asta que el visitante no escriba un n4mero entero en el campo de texto el foco de la aplicacin permanecer$ en el campo y continuar$ recibiendo mensa#es de error. Podemos ver este e#emplo en marcha en una p$gina aparte.
Artculo por
-.*.- &ontinuacin del e emplo de onblur? para validar varios campos de te<to.
6acemos un ejemplo de validacin de campos de un formulario utilizando como base el evento onblur y solucionando un problema de bucle infinito. 8emos visto en el e#emplo del m!todo onblur relatado anteriormente una posible t!cnica para comprobar los datos de un campo de formulario. *hora vamos a ver cmo evolucionar esta t!cnica si tenemos m$s de un campo a validar dado que se puede complicar bastante el problema.

53
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com +e hecho antes de leer nuestra solucin propuesta creo que sera un buen e#ercicio a reali(ar por el lector la pr$ctica de hacer ese mismo e#emplo para dos campos y traba#ar un poco con la p$gina a ver si encontramos alg4n problema. /uy probablemente nos encontraremos con un curioso bucle infinito que nos va a dar m$s de un quebradero de cabe(a para solucionarlo. En la pr$ctica el lector puede intentar validar un n4mero entero y un cdigo postal. Para validar un cdigo postal necesitamos comprobar que es una cadena de texto compuesta por E caracteres y todos son enteros por lo menos para los cdigos en Espa:a. Por si alguien lo quiere intentar la funcin para validar un cdigo postal sera algo parecido a esto:
3unction Jalido./()8 ./Jalido=true <<si no tiene 5 caracteres no es vClido i3 (document.31.codi(o.value.len(t6 U= 5) ./Jalido=3alse else8 3or (i=04i554i++)8 .)ctual = document.31.codi(o.value.c6ar)t(i) i3 (validarBntero(.)ctual)=="")8 ./Jalido=3alse %reaV4 9 9 9 return ./Jalido 9
3implemente se encarga de comprobar que el campo de texto contiene E caracteres y hacer un recorrido por cada uno de los caracteres para comprobar que todos son enteros. *l principio se supone que el cdigo postal es correcto colocando la variable 'P1alido a true y si alguna comprobacin falla se cambia el estado correcto a incorrecto pasando dicha variable a false. 3e puede probar a montar el e#emplo con dos campos... nosotros ahora vamos a dar una solucin al problema bastante complicadilla ya que incluimos instrucciones para evitar el efecto del bucle infinito. 9o vamos a ver el e#emplo que dara el error lo de#amos para el que desee intentarlo por si mismo y recomendamos hacerlo porque as comprenderemos me#or el siguiente cdigo.
56tml= 56ead= 5title=Bvento on%lur5<title= 5script= avisado=3alse 3unction validarBntero(valor)8 <<intento convertir a entero. <<si era un entero no le a3ecta valor = parseInt(valor)
si no lo era lo intenta convertir
<<.omprue%o si es un valor numOrico i3 (is*a*(valor)) 8 <<entonces (no es numero) devuelvo el valor cadena vacia return "" 9else8 <<Bn caso contrario (1i era un nPmero) devuelvo el valor return valor 9 9 3unction comprue%aJalidoBntero()8 enteroJalidado = validarBntero(document.31.numero.value) i3 (enteroJalidado == "")8 <<si era la cadena vac@a es Rue no era vClido. Ko aviso i3 (Uavisado)8 alert (">e%e escri%ir un enteroU") <<selecciono el texto document.31.numero.select() <<coloco otra veN el 3oco

54

document.31.numero.3ocus() avisado=true setTimeout(Wavisado=3alseW 50) 9 9else document.31.numero.value = enteroJalidado
3unction comprue%aJalido./()8 ./Jalido=true <<si no tiene 5 caracteres no es vClido i3 (document.31.codi(o.value.len(t6 U= 5) ./Jalido=3alse else8 3or (i=04i554i++)8 .)ctual = document.31.codi(o.value.c6ar)t(i) i3 (validarBntero(.)ctual)=="")8 ./Jalido=3alse %reaV4 9 9 9 i3 (U./Jalido)8 i3 (Uavisado)8 <<si no es valido Ko aviso alert (">e%e escri%ir un cYdi(o postal vClido") <<selecciono el texto document.31.codi(o.select() <<coloco otra veN el 3oco <<document.31.codi(o.3ocus() avisado=true setTimeout(Wavisado=3alseW 50) 9 9 9 5<script= 5<6ead= 5%odE= 53orm name=31= Bscri%a un nPmero enteroD 5input tEpe=text name=numero siNe=" value="" on%lur="comprue%aJalidoBntero()"= 5%r= Bscri%a un cYdi(o postalD 5input tEpe=text name=codi(o siNe=" value="" on%lur="comprue%aJalido./()"= Fespera una cadena con 5 carCcteres numOricos 5<3orm= 5<%odE= 5<6tml=
Este e#emplo sigue la gua del primer e#emplo de onblur de este artculo incluyendo un nuevo campo a validar. Para solucionar el tema del bucle infinito que habr!is podido investigar por vosotros mismos y en el que se mostraban una ca#a de alerta tras otra indefinidamente hemos utili(ado una variable llamada avisado que contiene un true si ya se ha avisado de que el campo estaba mal y un false si no se ha avisado todava. 'uando se va a mostrar la ca#a de alerta se comprueba si se ha avisado o no al usuario. 3i ya se avis no se hace nada evitando que se muestren m$s ca#as de alerta. 3i no se haba avisado todava se muestra la ca#a de alerta y se coloca el foco en el campo que era incorrecto. Para restituir la variable avisado a false de modo que la prxima ve( que se escriba mal el valor se muestre el mensa#e correspondiente se utili(a el m!todo set&imeout que e#ecuta la instruccin con un retardo en este caso de E= milisegundos. "o suficiente para que no se meta en un bucle infinito.
Nota: +espu!s de todos los parches que hemos tenido que colocar para que este evento se comporte correctamente para cumplir el cometido deseado es posible que no mere(ca la pena utili(arlo para este cometido. Podemos hacer uso del evento onchange o comprobar todos los campos de una sola ve( cuando el usuario ha decidido enviarlo.

55
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Podemos ver en marcha este e#emplo en una p$gina aparte.
Artculo por
-.-.- Elementos de formulario select asociados

-mo acer con Javascript que un elemento de formulario select cambie sus opciones cuando cambie otro elemento select de la p,gina. +e modo que cada opcin de un select tenga un grupo de opciones posibles para el otro select. 1amos a conocer uno de los trucos m$s solicitados de Javascript que tiene mucha relacin con el tema de formularios y donde se utili(a el evento onchange de Javascript. Es un e#emplo sobre cmo reali(ar una p$gina con un par de selects donde seg4n el valor escogido en uno de ellos cambien las opciones posibles del otro select. "o me#or para ver lo que vamos a hacer es ver una p$gina )eb 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 autom$ticamente. El e#emplo que hemos ilustrado utili(a provincias y pases. *l escoger en el primer select un pas en el segundo debe mostrarnos las provincias de ese pas para que esco#amos una provincia pero slo una que tenga que est! en el pas seleccionado en primer t!rmino.
-.-.1.- &onocer el ob eto select ' los option

Es importante conocer los ob#etos de formulario select y los option. "os select corresponden con las ca#as de seleccin desplegables y los option con cada una de las opciones de la ca#a desplegable. Podemos ver un artculo que habla de ello. En concreto nos interesa hacer varias cosas que tienen que ver con extraer el valor de un select en cualquier momento fi#ar su n4mero de opciones y para cada opcin colocar su valor y su texto asociado. &odo esto aprenderemos a hacerlo en este e#emplo.
Referencia: Para conocer el traba#o con formularios y la #erarqua de ob#etos #avascript A&odo eso es la base del traba#o con los elementos de las p$ginas en JavascriptB debemos haber leer el manual de Javascript II.
-.-.2.- Modo de llevar a cabo el problema

Para empe(ar vamos a utili(ar un formulario con dos selects uno para el pas y otro para la provincia.
53orm name="31"= 5select name=pais onc6an(e="cam%ia;provincia()"= 5option value="0" selected=1eleccione... 5option value="1"=Bspa?a 5option value="!"=)r(entina 5option value="3"=.olom%ia 5option value="4"=#rancia 5<select= 5select name=provincia= 5option value="7"=7 5<select= 5<3orm=
9os fi#amos en el select asociado al pas de este formulario que cuando se cambia la opcin de pas se debe llamar a la funcin cambiaNprovinciaAB. 1eremos m$s adelante esta funcin ahora es importante fi#arse que est$ asociada al evento onchange que se activa cuando cambia la opcin en el select. &odo lo dem$s ser$ cdigo Javascript. Empe(amos definiendo un montn de arrays con las provincias de cada pas. En este

56
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com caso tenemos slo @ pases entonces necesitar! @ arrays. En cada array tengo la lista de provincias de cada pas colocada en cada uno de los elementos del array. *dem$s de#ar! una primera casilla con un valor CFC que indica que no se ha seleccionado ninguna provincia.
var provincias;1=new )rraE("7" ")ndaluc@a" ")sturias" "Maleares" ".anarias" ".astilla E KeYn" ".astilla7Ka 0anc6a" "...") var provincias;!=new )rraE("7" "1alta" "1an Quan" "1an Kuis" "Ka Iio-a" "Ka /ampa" "...") var provincias;3=new )rraE("7" ".ali" "1antamarta" "0edellin" ".arta(ena" "...") var provincias;4=new )rraE("7" ")isne" ".reuse" ">ordo(ne" "Bssonne" "Lironde " "...")
8ay que fi#arse que los ndices del array de cada pas se corresponden con los del select del pas. Por e#emplo la opcin Espa:a tiene el valor asociado 7 y el array con las provincias de Espa:a se llama provinciasN7. El script se completa con una funcin que reali(a la carga de las provincias en el segundo select. El mecanismo reali(a b$sicamente estas acciones: +etecto el pas que se ha seleccionado 3i el valor del pas no es = Ael valor = es cuando no se ha seleccionado pasB &omo el array de provincias adecuado utili(ando el ndice del pas. /arco el n4mero 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. 3I 96 AEl valor de pas es = no se ha seleccionado pasB 'oloco en el select de provincia un 4nico option con el valor CFC que significaba que no haba provincia. 'oloco la opcin primera del select de provincia como la seleccionada.
"a funcin tiene el siguiente cdigo. Est$ comentado para que se pueda entender me#or.
3unction cam%ia;provincia()8 <<tomo el valor del select del pais ele(ido var pais pais = document.31.paisSdocument.31.pais.selectedIndexT.value <<miro a ver si el pais estC de3inido i3 (pais U= 0) 8 <<si esta%a de3inido entonces coloco las opciones de la provincia correspondiente. <<selecciono el arraE de provincia adecuado mis;provincias=eval("provincias;" + pais) <<calculo el numero de provincias num;provincias = mis;provincias.len(t6 <<marco el nPmero de provincias en el select document.31.provincia.len(t6 = num;provincias <<para cada provincia del arraE la introduNco en el select 3or(i=04i5num;provincias4i++)8 document.31.provincia.optionsSiT.value=mis;provinciasSiT document.31.provincia.optionsSiT.text=mis;provinciasSiT 9 9else8 <<si no 6a%@a provincia seleccionada elimino las provincias del select document.31.provincia.len(t6 = 1 <<coloco un (uiYn en la Pnica opciYn Rue 6e de-ado document.31.provincia.optionsS0T.value = "7" document.31.provincia.optionsS0T.text = "7" 9 <<marco como seleccionada la opciYn primera de provincia document.31.provincia.optionsS0T.selected = true 9
Podemos ver una p$gina con el e#emplo en funcionamiento.

Artculo por

57
-...- Evento onunload de Javascript

Ejemplo de uso del evento onunload en Javascript para abrir una ventana secundaria cuando el usuario abandone la p,gina. 1eamos un e#emplo del evento onunload que recordamos se activa cuando el usuario ha abandona la p$gina )eb. Por tanto onunload sirve para e#ecutar una accin cuando el usuario se marcha de la p$gina ya sea porque pulsa un enlace que le lleva fuera de la p$gina o porque cierra la ventana del navegador. El e#emplo que deseamos mostrar sirve para abrir una p$gina )eb en otra ventana cuando el usuario abandona la p$gina. +e este modo act4an muchos de los molestos popups de las p$ginas )eb abri!ndose #usto cuando abandonamos el sitio que est$bamos visitando.
56tml= 56ead= 5title=)%re al salir5<title= 5script= 3unction a%reventana()8 window.open("6ttpD<<www.(oo(le.es" "venta" "") 9 5<script= 5<6ead= 5%odE onunload="a%reventana()"= 5a 6re3="6ttpD<<www.desarrollowe%.com"=>HUU5<a= 5<%odE= 5<6tml=
El e#emplo es tan sencillo que casi sobran las explicaciones. 3implemente creamos una funcin que abre una ventana secundaria y la asociamos con el evento onunload que se coloca en la etiqueta IbodyJ. 3e puede ver en marcha en una p$gina aparte.
Referencia: 3i no tenemos una base de Javascript nos vendr$ muy bien acceder a nuestra seccin Javascript a fondo. 3i deseamos conocer m$s cosas de los eventos. 3i deseamos saber m$s sobre abrir ventanas.
Artculo por
-.0.- Evento onload de Javascript

-on el evento onload podemos ejecutar acciones justo cuando se an terminado de cargar todos los elementos de la p,gina. El evento onload de Javascript se activa cuando se termina de cargar la p$gina. 3e ha de colocar en la etiqueta IbodyJ aunque en versiones modernas de Javascript tambi!n lo aceptan otros elementos como las im$genes. 'on el evento onload podemos e#ecutar acciones #usto cuando se han terminado de cargar todos los elementos de la p$gina. Es un evento bastante utili(ado pues es muy habitual que se deseen llevar a cabo acciones en ese preciso instante. En nuestro e#emplo vamos a ver cmo podramos hacer un script para motivar a nuestros visitantes a que nos voten en un ran-ing cualquiera de p$ginas )eb. "a idea es que la p$gina se cargue entera y una ve( est$ cargada apare(ca una ventana de Javascript donde se proponga al visitante votar a la p$gina. Es interesante esperar a que termine de cargar la p$gina entera para que el visitante pueda ver la )eb que se propone votar antes de que realmente le pidamos su voto.

58
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com El cdigo sera el siguiente:
56tml= 56ead= 5title=JotameUU5<title= 5script lan(ua(e="Qava1cript"= 3unction pedirJoto()8 i3 (con3irm("Bsta pC(ina estC (enial (Ea la puedes ver). [0e das tu voto\"))8 window.open("6ttpD<<www.loRuesea.com<votar.p6p\idvoto=1!111" "" "") 9 9 5<script= 5<6ead= 5%odE onload="pedirJoto()"= 561=/C(ina 1uper.6ula5<61= 5%r= Bsta pC(ina estC muE %onita. 1oE su autor E te puedo ase(urar Rue no 6aE muc6as pC(inas con tanta calidad en Internet 5%r= 5%r= 5a 6re3="^"=Bntrar5<a= 5<%odE= 5<6tml=
9os fi#amos que en la etiqueta IbodyJ tenemos el evento onloadMCpedir1otoABC. Es decir que cuando se cargue la p$gina se llamar$ a una funcin llamada pedir1otoAB que hemos definido en el bloque de script que tenemos en la cabecera. "a funcin pedir1otoAB utili(a una ca#a confirm para saber si realmente el usuario desea votarnos. "a funcin confirmAB muestra una ca#a con un texto y dos botones para aceptar o cancelar. El texto es lo que se recibe por par$metro. +ependiendo de lo que se pulse en los botones la funcin confirmAB devolver$ un true si se apret el botn aceptar o un false en caso de que se pulsase sobre cancelar. "a funcin confirmAB est$ a su ve( metida dentro de un bloque condicional if de modo que dependiendo de lo que se puls en la ca#a confirm el if se evaluar$ como positivo o negativo. En este caso slo se reali(an acciones si se puls sobre aceptar. Para acceder a la p$gina donde se contabili(a nuestro voto tenemos el m!todo )indo).openAB que sirve para abrir ventanas secundarias o popups. /ostramos la p$gina donde se vota en una ventana secundaria para que el visitante no se marche de nuestra )eb ya que acaba de entrar y no deseamos que se vaya ya. 'on esto queda m$s o menos ilustrado cmo hacer uso del evento onload. 3eguro que en vuestras creaciones habr$ muchos m$s casos donde utili(arlo.
Artculo por
-.1.- Mane adores de eventos en Javascript 1.#

Listado de todos los manejadores de eventos en el lenguaje Javascript 7.8. En artculos anteriores de +esarrollo,eb.com vimos diversas informaciones relativas a los eventos en Javascript. En esta ocasin vamos a proporcionar un listado que sirva como referencia para los programadores con Javascript 7.?. En concreto vimos con anterioridad estos artculos que conviene repasar: "os eventos en Javascript /ane#adores de eventos de Javascript
En el artculo de mane#adores de eventos de Javascript vimos los eventos de las versiones de Javascript 7.= 7.7 y 7.< pero en este caso vamos a presentar el listado de los mane#adores de eventos de Javascript 7.?. 'ada evento tiene un nombre por e#emplo Cclic-C. "os mane#adores eventos que son usados para invocar una serie de

59
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com comandos cuando se produce un evento tienen siempre la palabra ConC seguida del nombre del evento. Por e#emplo Conclic-C.
-.1.1.- Mane adores de eventos :Event =andlers; en Javascript 1.#

(bort (onabort): 3e lan(a cuando se abort la carga de un elemento de la p$gina por e#emplo una imagen. "lur (onblur): 3e procesa este evento cuando un elemento de la p$gina generalmente un elemento de formulario pierde el foco de la aplicacin. ,!ange (onc!ange): Este evento se produce cuando el usuario cambia el contenido de un elemento de formulario tipo select input o textarea. ,lic0 (onclic0): 3e lan(a cuando el usuario hace clic sobre un elemento de la p$gina que puede ser un botn un enlace etc. Dbl,lic0 (ondblclic0): Este evento es lan(ado cuando el usuario hace doble clic- en un elemento de formulario o un lin-. DragDrop (ondragdrop): Este evento se produce cuando el usuario arrastra y suelta un ob#eto en la ventana del navegador. )rror (onerror): producido cuando hubo un error en la carga de un elemento de la p$gina o de un documento. Focus (onfocus): 3e produce este evento cuando un elemento de la p$gina generalmente un elemento de formulario gana el foco de la aplicacin. Ce$Do/n (on0e$do/n): Este evento se lan(a cuando el usuario pulsa una tecla. Ce$:ress (on0e$press): 3e lan(a el evento on-eypress cuando el usuario pulsa o mantiene pulsada una tecla. Ce$+p (on0e$up): 3e produce cuando el usuario suelta una tecla que tena pulsada. #oad (onload): 3e e#ecuta cuando se termina de cargar la p$gina o bien todos los frames del con#unto de %5*/E3E&. ouseDo/n (onmousedo/n): Este evento se produce cuando el usuario aprieta el botn del ratn. ouse ove (onmousemove): 3e e#ecuta cuando el usuario mueve el ratn. ouse-ut (onmouseout): 3e lan(a cuando el usuario retira el puntero del ratn. Por e#emplo si colocamos onmouseout sobre una imagen el evento se lan(ara en el momento que el usuario sale con el puntero del ratn de esa imagen. ouse-ver (onmouseover): Este evento se desata cuando el usuario mueve el puntero del ratn sobre un elemento. Imaginemos que colocamos este evento en una imagen entonces se lan(a una sola ve( en el momento de entrar con el puntero en el $rea que ocupa esa imagen. ouse+p (onmouseup): Este evento se produce cuando el usuario suelta o de#a de apretar el botn del ratn. ove (onmove): 3e produce cuando el usuario o un script mueven la ventana del navegador. Reset (onreset): El evento se e#ecuta cuando se resetea el contenido de un formulario haciendo clic en un botn de reset del formulario si es que lo tiene. Resi1e (onresi1e): 3e lan(a cuando el usuario o un script alteran el tama:o de una ventana del navegador o de un frame. Select (onselect): El evento se produce cuando el usuario selecciona un texto de un textarea o bien de un campo de texto normal. Submit (onsubmit): 3e lan(a cuando se aprieta el botn de submitir de un formulario as que permite e#ecutar cdigo cuando el usuario enva el formulario. +n#oad (onunload): Evento que se produce cuando el usuario sale de un documento osea al salir de la p$gina )eb ya sea por pulsar un enlace que lleva a otra p$gina o por cerrar la ventana del navegador.
Artculo por

60
Parte ):
(p*logos a la segunda parte del Manual de Javascript

Di'ersos artculos con in+ormaciones interesantes para completar la +ormaci#n ! para saber por d#nde se puede continuar aprendiendo.
..1.- &l@usulas tr' A catc26 detectar ' cazar errores en Javascript

!emos aspectos b,sicos sobre la utilizacin de las cl,usulas try y catc para detectar y cazar errores javascript, sin que los errores sean tratados por defecto. /uchos lengua#es de programacin utili(an las cl$usulas try U catch para ca(ar errores y reali(ar cosas cuando ocurran por ello lo que vamos a comentar aqu para Javascript puede resultar muy familiar a los programadores. Estas cl$usulas las podemos utili(ar para tratar de e#ecutar una porcin de cdigo que sabemos que podra desatar un error en tiempo de e#ecucin. 'uando ocurre un error en Javascript se hace un tratamiento determinado Amostrar el error al usuario ya sea mediante un mensa#e o la consola Javascript o simplemente mostrar un icono y detener la e#ecucin de ese cdigoB. 9osotros con try U catch podemos evitar que el error se trate de manera predeterminada y que se realicen unas acciones determinadas ante el error. *dem$s podemos conseguir que el cdigo se siga e#ecutando sin ning4n problema. 'on try especificamos una serie de sentencias Javascript que vamos a tratar de e#ecutar. 'on catch especificamos lo que queremos reali(ar si es que se ha ca(ado un error en el bloque try. "a sintaxis de utili(acin es la siguiente:
trE 8 <<intento al(o Rue puede producir un error 9catc6(mierror)8 <<6a(o al(o cuando el error se 6a detectado 9
El Hloque try se e#ecuta tal cual hasta que un posible error se ha detectado. 3i no se detecta un error durante la e#ecucin del bloque try el catch se de#a del lado y no se reali(a. En caso que s se detecte un error en el bloque try se e#ecuta las sentencias que tenamos en el catch.
3i nos fi#amos podemos ver que el bloque catch recibe un dato que en este caso hemos almacenado en la variable CmierrorC. Esa variable contiene informacin sobre el error detectado que puede ser 4til para reali(ar el tratamiento al error.

61
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 1eamos este cdigo:
trE 8 <<intento al(o Rue puede producir un error 3uncion;Rue;no;existe() 9catc6(mierror)8 alert("Brror detectadoD " + mierror.description) 9
'uando se e#ecute el try se detectar$ un error al tratar de e#ecutar una funcin que no existe. Entonces se e#ecutar$ la cl$usula catch mostrando el error que se ha detectado. 3i nos fi#amos se muestra una descripcin del error detectado mediante mierror.description. Pero la propiedad description del error slo existe en Internet Explorer. En %irefox para mostrar una descripcin del error lo hacemos directamente con la variable. *s:
trE 8 <<intento al(o Rue puede producir un error 3uncion;Rue;no;existe() 9catc6(mierror)8 alert("Brror detectadoD " + mierror) 9
Entonces para hacer un bloque try U catch como este que funcione en los dos navegadores deberamos hacer esto:
trE 8 <<intento al(o Rue puede producir un error 3uncion;Rue;no;existe() 9catc6(mierror)8 i3 (mierror.description)8 alert("Brror detectadoD " + mierror.description) 9else8 alert("Brror detectadoD " + mierror) 9 9
..1.1.- Lanzar una e<cepcin nosotros mismos

&ambi!n dentro de un bloque try podemos lan(ar nosotros mismos una excepcin sin que tenga por qu! haberse producido un error. Esto lo hacemos con la sentencia tro).
trE 8 t6row "miexcepcion"4 <<lanNa una excepciYn 9 catc6 (e) 8 <<tratamos la excepciYn alert(e)4 9
Este cdigo v$lido tanto para Internet Explorer como %irefox lan(a una excepcin en el bloque try. "uego en el bloque catch se muestra la excepcin que se ha detectado.
Artculo por
..2.- =o as de referencia Javascript

!arias c uletas u ojas de referencia de Javascript, -on un listado de m(todos funciones y usos de Javascript para r,pida consulta. En +esarrollo,eb.com ofrecemos diversos manuales para aprender Javascript que se pueden consultar todos a trav!s de la seccin Javascript a fondo. En esta seccin encontrar!is numerosos textos explicativos para aprender a traba#ar con el

62
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com lengua#e tanto para dar los primeros pasos como reali(ar operaciones m$s complicadas. 9uestros manuales vienen con explicaciones detalladas sobre Javascript pero siempre es bueno tener a mano unas CchuletasC o m$s dicho de forma m$s elegante ho#as de referencia r$pida. En !stas se encuentran multitud de nombres de funciones m!todos y distintos usos del lengua#e que son repetidos a menudo durante la programacin. En Internet se pueden encontrar diversas ho#as de referencia muy 4tiles completas y bien presentadas que nos pueden ayudar en nuestro da a da con el lengua#e si las tenemos impresas en papel y a mano para consulta. "o bueno es que las ofrecen programadores de manera gratuita con lo que podemos verlas y si nos parece que pueden ayudarnos se pueden imprimir libremente. 6s paso algunos enlaces interesantes para encontrar estas chuletas de Javascript: Javascript .uic- 5eference 'ard 'huleta de referencia Javascript escrita en dos p$ginas con conceptos bastante b$sicos sobre estructuras de control operadores etc as como ob#etos y m!todos. Java3cript and Hro)ser 6b#ects .uic- 5eference ; p$ginas con un listado de todos los ob#etos del navegador y sus propiedades y m!todos. Est$ sacada del libro CJavascript HibleC. Javascript 'heat 3heet: En una sola p$gina se muestran algunas notas sobre sintaxis los m!todos b$sicos de Javascript eventos los m!todos +6/ e incluso algunas ayudas sobre *#ax. Java3cript in one page 9o se podra imprimir en una sola p$gina pero muestra una completa tabla sobre Javascript de la que se podra incluso aprender con las escuetas explicaciones. 5eferencia Javascript 6tra peda(o p$ginaFresumen de Javascript pero que ocupa varias p$ginas con referencia sobre sintaxis orientacin a ob#etos as como compatibilidad de distintos componentes de la tecnologa con cada navegador. Expresiones regulares en Javascript 'on explicaciones muy r$pidas y esquem$ticas sobre expresiones regulares. Jquery 'heat 3heet 2na p$gina con una referencia r$pida para los que traba#an con Jquery 7.<. 1er tambi!n esta otra chuleta a color de Jquery. Prototype Javascript "ibrary 7.E.= 2na superconcentrada ho#a de clases y m!todos de Prototype. * field guide to scriptaculous combination effects 5eferencia r$pida a efectos con 3criptaculous. /ootools 7 7 'heat 3heet 8o#a de referencia a las clases de /ootools. 'huleta +6/ &odos los m!todos del +6/ de Javascript con r$pidas explicaciones.
Artculo por
..#.- ,or dnde continuar aprendiendo Javascript

9u( otras referencias y manuales existen para seguir con tu aprendizaje de Javascript. En este artculo pretendemos ofrecer un eplogo al /anual de Javascript II y un repaso a otras referencias que existen en este momento dentro de +esarrollo,eb.com que nos pueden ayudar a seguir aprendiendo el lengua#e de programacin Javascript y la manera de utili(arlo para reali(ar todo tipo de efectos e interactividades en la p$gina.

63
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 3i has seguido hasta este punto los manuales de Javascript generales es decir el /anual de Programacin en Javascript I y su segunda parte el /anual de Programacin en Javascript II estamos seguros que tendr$s ya un conocimiento slido sobre este lengua#e y las posibilidades b$sicas de la programacin en el cliente. 3in embargo t4 mismo te puedes preguntar cmo hacer muchas de las cosas que ves en tantas y tantas p$ginas )eb como interfaces de usuario avan(adas que responden a la interaccin con el visitante efectos especiales *#ax etc. 'omo podr$s comprobar a continuacin todo esto se puede aprender sin salir de +esarrollo,eb.com y afortunadamente ahora est$ a tu alcance con poco esfuer(o adicional.
..#.1.- Javascript a fondo

"a primera referencia que te queremos comentar es la seccin dedicada exclusivamente a Javascript dentro de +esarrollo,eb.com. Esto sera como una CportadaC del sitio dedicada a Javascript donde publicamos todos aquellos contenidos que tienen que ver con este lengua#e. http:KK))).desarrollo)eb.comK#avascriptK
..#.2.- 8aller de Javascript

En el taller de Javascript encontrar$s diversos artculos pr$cticos sobre cmo hacer las cosas m$s variadas con Javascript. Puedes tratarlos como pr$cticas para aprender a hacer una gama de utilidades que te dar$n una base adicional sobre el lengua#e o puedes consultarlos cuando tengas que resolver un problema concreto con Javascript. http:KK))).desarrollo)eb.comKmanualesK<<K
..#.#.- %tros manuales pr@cticos

&enemos tambi!n diversos manuales eminentemente pr$cticos sobre aspectos muy concretos que se utili(an habitualmente en Javascript. En estos manuales detallamos cosas como el traba#o con im$genes formularios frames ventanas secundarias etc. /uchas de estas cosas ya las empe(amos a tratar en el presente manual pero existe una informacin mucho m$s completa que qui($s te interese leer llegado el momento.
..#.).- "rame9or>s Javascript

"os frame)or-s son como libreras de cdigo para hacer tareas comunes en p$ginas )eb creadas por otros programadores y que est$n a tu disposicin para acelerar el proceso de creacin de p$ginas realmente avan(adas. +igamos que cualquiera de nosotros podra programar a mano y desde cero cualquiera de las funcionalidades implementadas en los frame)or-s pero ello le ocupara mucho m$s tiempo y los resultados lo m$s probable es que fueran peores. "os frame)or-s son sin duda el paso que diferencia el programador de Javascript b$sico y el programador profesional sin lmites m$s all$ de los propios del navegador y su propia imaginacin. Por ello como te podr$s imaginar recomendamos encarecidamente que aprendas uno de ellos para reali(ar aplicaciones )eb basadas en Javascript realmente profesionales. El 4nico problema que podr$s encontrar es que utili(ar un frame)or- en muchas de las ocasiones no es una tarea trivial y requiere que el programador tenga bastante habilidad. 3in embargo en +esarrollo,eb.com hemos tratado en profundidad algunos de los frame)or-s Javascript m$s populares y estamos seguros que con nuestros manuales podr$s aprender todo lo que necesitas saber para cumplir tus ob#etivos... y m$s. *dem$s los frame)or-s solucionan uno de los problemas m$s grandes que tiene Javascript Asi no el m$s crucialB y es el hecho de que el lengua#e no es exactamente igual en los diversos navegadores del mercado y las versiones que han ido saliendo. Por ello a medida que se complican las cosas comprobar$s que hay muchas tareas para las cuales tienes que detectar el navegador que est$ e#ecutando la p$gina y reali(ar acciones distintas dependiendo de ello. 'on los frame)or-s este problema se resuelve y nunca m$s tendr$s que preocuparte de que tu cdigo se e#ecute bien en todos los navegadores. 8ablando de libreras Javascript debemos saber que existen muchas posibilidades que relatamos en el artculo "istado de los +istintos %rame)or-s Javascript. En +esarrollo,eb.com empe(amos hace tiempo a explicar algunos de ellos y comen(amos por uno llamado 'rossFbro)ser pero que realmente no recomendamos porque se qued poco actuali(ado. Podemos tenerlo en cuenta como un precursor de los frame)or-s Javascript pero que se ha quedado en desuso.

64
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com *ctualmente existen opciones mucho me#ores. 3in lugar a dudas #.uery es el frame)or- Javascript m$s popular en estos momentos. * poco que se aprenda de #.uery se podr$ comprobar que es una aut!ntica delicia para implementar tanto interactividad como efectos especiales sobre p$ginas )eb. Para aprender este frame)or- tenemos un completo /anual de #.uery que no exageramos si decimos que es uno de los me#ores manuales ya publicados en +esarrollo,eb.com. *dem$s hemos publicado tambi!n un &aller de #.uery para aprender por la pr$ctica. 6tro de los frame)or-s populares es /ootools casi tan bueno como #.uery pero con sus particularidades. En mi opinin resulta un poco m$s complicado de mane#ar para ciertos usos pero es una gran librera. Para aprender puedes consultar el /anual de /ootools tratado tambi!n con gran detalle y el &aller de /ootools. &ambi!n tenemos un tercer frame)or- en discordia que nos lo ofrece el equipo de Gahoo0. En esta ocasin el manual slo tiene una ligera presentacin y explicaciones para empe(ar a traba#ar en el /anual de Introduccin a G2I.
..#.*.- Bideotutoriales de Javascript

Para quien lo prefiera en el momento de escribir estas lneas estamos publicando varios materiales para aprender Javascript de una manera m$s visual. Para ello estamos produciendo unos videotutoriales que te explicar$n cosas sobre el propio lengua#e y alguno de los frame)or-s m$s utili(ados. 'onsulta el 1ideotutorial de Javascript y el 1ideotutorial de #.uery.
..#.-.- &onclusin sobre los contenidos did@cticos Javascript

En fin que como se puede comprobar en +esarrollo,eb.com tienes todo lo que necesitas para seguir aprendiendo mucho Javascript... 'onfiamos en que con un poco de esfuer(o por tu parte puedas aprovechar todos los materiales que venimos publicando para llegar a dominar este lengua#e y sus diferentes aplicaciones. En este artculo ni siquiera hemos nombrado todos los manuales existentes sobre Javascript en este sitio porque son muchos y algunos de ellos son demasiado especficos. Pero en definitiva para estar al tanto de todos los manuales que tenemos y podamos seguir publicando en el futuro sobre Javascript te recomendamos echar un vista(o a la seccin de Javascript a fondo.
Artculo por

65

Manual Programacion Javascript Parte2

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

Manual Programacion Javascript Parte2

Cargado por

Copyright:

Formatos disponibles

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

Autores del manual

Director de DesarrolloWeb.com http://www.desarrolloweb.com (44 captulos)

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Introduccin a la segunda parte del Manual de Javascript

1.1.- Introduccin al manual II de Javascript

Miguel Angel Alvarez

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Clases y objetos nativos de Javascript

2.1.- Libreria de funciones Javascript

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Miguel Angel Alvarez

2.2.- E emplos de funciones de la librer!a Javascript

2.2.1.- "uncin eval

2.2.2.- "uncin parseInt

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

document.write (parseInt("101011" !)) document.write (parseInt("34" ")) document.write (parseInt("3#" 1$))

+evuelve el numero 9a9

+evuelve el numero 7>

2.2.#.- "uncin is$a$

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Miguel Angel Alvarez

2.#.- %b etos en Javascript

2.#.1.- &mo instanciar ob etos

2.#.2.- &mo acceder a propiedades ' m(todos de los ob etos

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Miguel Angel Alvarez

2.).- %b etos incorporados en Javascript

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

2.*.- &lase +tring en Javascript

2.*.1.- ,ropiedades de +tring

2.*.2.- M(todos de +tring

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Miguel Angel Alvarez

2.-.- E emplos de funcionamiento de la clase +tring

2.-.1.- E emplo de strings 1

2.-.2.- E emplo de strings 2

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Miguel Angel Alvarez

2...- &lase /ate en Javascript

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Miguel Angel Alvarez

2.0.- E emplo de funcionamiento de /ate

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

2.1.- &lase Mat2 en Javascript

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

2.1.1.- ,ropiedades de Mat2

2.1.2.- M(todos de Mat2

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Miguel Angel Alvarez

2.13.- &lase $umber en Javascript

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Este e#emplo y el siguiente se pueden ver en una p$gina a parte.

2.13.1.- ,ropiedades de la clase $umber

Manual de Programacin en Javascript II: http://www.desarrolloweb.com/manuales/ !/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez