Introduccin JavaScript

Conceptos bsicos y avanzados

Este libro sobre JavaScript est dirigido a todos aquellos que desean aumentar la interactividad de sus sitios Web. El libro tiene dos objetivos: en primer lugar, dominar las bases de JavaScript para poder trabajar con los scripts ms frecuentes en la red y, en segundo, descubrir el nuevo potencial de JavaScript cuando se utiliza con las hojas de estilo (CSS), el DHTML, AJAX o con bibliotecas como Prototype o Script.aculo.us. Una vez descrita la sintaxis de base, el libro se apoya en ejemplos significativos (gestin de formularios, del tiempo, de mens de navegacin, autocompletacin), para comentarlos y demostrar la omnipresencia de JavaScript en una arquitectura Web 2.0. El libro acompaa al lector a travs de un recorrido que va de los principios de JavaScript hasta el descubrimiento de los conceptos ms avanzados. Los ejemplos y los scripts citados en el libro se pueden descargar en esta pgina.

Emmanuel GUTIERREZ
Despus de haber trabajado muchos aos como formador, Emmanuel Gutierrez es actualmente consultor informtico y director de un centro de formacin creado por l mismo. Sus diferentes intervenciones en empresas entorno al tema de la creacin de sitios web se suman a su experiencia pedaggica, para dar al lector un libro totalmente efectivo para dominar el desarrollo en JavaScript.

Conceptos bsicos e introduccin a JavaScript

Historial y versiones de JavaScript
Lo menos que se puede decir es que JavaScript es un lenguaje muy polmico. En los comienzos de Internet, las pginas web estaban compuestas nicamente de texto y de vnculos hipertexto, limitando as su uso a un mbito cientfico y universitario. Por otro lado, las limitaciones tcnicas de la poca, sobre todo las relacionadas con la velocidad de conexin, no permitan proponer algo ms. Es a mediados de 1990 cuando la necesidad de disponer de pginas web ms amigables y con ms servicios se hizo ms fuerte. Brendan Eich, por aquel entonces ingeniero informtico de Netscape, tuvo el encargo de desarrollar un nuevo navegador web. Aprovech la ocasin para desarrollar un lenguaje de Script, originalmente denominado LiveScript, que deba ser en teora un complemento de Java (estos dos lenguajes suelen confundirse debido a su denominacin casi idntica a pesar de no tener casi nada en comn). El objetivo de este lenguaje de programacin era desarrollar pginas web ms atractivas y amigables para el usuario, sin tener que usar para ello una programacin en el lado del servidor. Para poder realizar esto, era necesario que el navegador pudiera interpretar el cdigo JavaScript. Netscape decide entonces implementar de manera nativa LiveScript en la versin 2.0 de su navegador (bautizado entonces Netscape Navigator) a partir del ao 1995. Comienza entonces un perodo de intensa produccin de lenguajes de script y Microsoft no tuvo otra opcin que desarrollar su propia versin. Naci entonces en 1996 Jscript, integrado en su navegador Internet Explorer y cuya ltima versin actualmente es Jscript.Net. Las versiones de JavaScript comenzaron a encadenarse proponiendo en cada una de ellas nuevas mejoras. Todo el mundo pudo constatar cmo Internet fue invadido rpidamente por pginas compuestas de pequeos scripts que permitan, por ejemplo, mostrar la hora, la fecha, el nombre del visitante o validar el contenido de los campos de un formulario. Sin embargo, a pesar de ser JavaScript un lenguaje respetuoso de las instrucciones dadas por el ECMA (European Computer Manufacturers Association), organismo internacional encargado de la estandarizacin de sistemas de informacin y de comunicacin, los editores de programas (Microsoft de un lado con Internet Explorer y Sun del otro con Firefox) desarrollaron desde el principio navegadores que interpretaban de manera diferente JavaScript. En consecuencia, algunos scripts podan ejecutarse de manera correcta en un navegador y paradjicamente generar un error en otro. Por ello, en parte, a finales de los noventa, otros lenguajes como ASP y PHP se hicieron muy populares. Pero fue sobre todo el uso abusivo de los pop-up (ventana emergente) la razn del desinters creciente por JavaScript. Su proliferacin afect negativamente a JavaScript y la desesperacin de los usuarios termin por desprestigiar sus ventajas entre los desarrolladores web; llegando a considerarlo incluso como un sublenguaje. Afortunadamente, la llegada de los bloqueadores de pop-up integrados en los navegadores le permiti a JavaScript recuperar el prestigio perdido.

La siguiente tabla permite relacionar la versin de JavaScript con la del navegador: Ao de publicacin 1995 Versin de JavaScript 1.0 Navegadores compatibles Internet Explorer 3.0 Netscape Navigator 2.0

Ao de publicacin 1996

Versin de JavaScript 1.1

Navegadores compatibles Internet Explorer 4.0 Netscape Navigator 3.0

1997

1.2

Internet Explorer 4.0 Netscape Navigator 4.0

1998 1999

1.3 1.4

Netscape Navigator 4.5 Internet Explorer 6.0 Netscape Navigator 6.0

2000 2005 2006

1.5 1.6 1.7

Netscape Navigator 6.0 Firefox 1.0 Firefox 2.0 Internet Explorer 7.0

En nuestros das, JavaScript ha recuperado su popularidad. Es interesante constatar cmo incluso aquellos que antes rechazaban este lenguaje, actualmente usan y abusan de l. Efectivamente, el surgimiento de nuevas tecnologas web sobre todo del llamado Web 2.0, devuelve a la programacin con JavaScript un lugar primordial, principalmente por su utilizacin conjunta con XML o por su utilizacin asncrona (AJAX), de la cual hablaremos ms adelante. Sin embargo, nunca est de ms sealar las ventajas y desventajas de la utilizacin de JavaScript.

Ventajas y desventajas de JavaScript

Como ya hemos dicho, JavaScript es un lenguaje universal presente en numerosas pginas HTML, de manera complementaria a este cdigo. Gracias a JavaScript, las pginas HTML son ms agradables y disponen de muchas funcionalidades suplementarias. Saber escribir scripts en JavaScript significa permitir a los usuarios de sus pginas HTML el acceso a otras funcionalidades y otros servicios, mejorando de esta manera la profesionalidad de un sitio web. Incluso recientemente, cuando un internauta escoga por primera vez un nombre de usuario, era necesario hacer clic sobre un botn y esperar una respuesta del servidor que en ocasiones solicitaba recomenzar el procedimiento puesto que el nombre de usuario perteneca ya a otra persona. En cambio hoy, gracias al uso de la tecnologa AJAX, el control se realiza en un segundo plano al mismo tiempo que el usuario cumplimenta la ficha. Es innegable que JavaScript contribuye mucho a la facilidad de uso de un sitio web e incrementa adems la fidelidad del usuario. Teniendo en cuenta esta importante difusin, saber programar en JavaScript se ha convertido hoy en un conocimiento bsico para todo desarrollador web.

Sin embargo, el uso de JavaScript no es exclusivo a la red; de hecho, muchos programas del mercado como Adobe Photoshop o Adobe Illustrator utilizan versiones muy similares a JavaScript para la automatizacin de muchas tareas. En cuanto a la dificultad del lenguaje, muchos son los que se muestran reticentes al anlisis de pginas HTML compuestas de JavaScript, pero a fin de cuentas, con un poco de paciencia y estudio, Javascript resulta un lenguaje que se domina fcilmente. Ms an si se ha trabajado ya con otros lenguajes de programacin como Visual Basic o el lenguaje C, por ejemplo, incluso si es necesario de todas maneras adaptarse a algunas particularidades. Sin embargo, JavaScript no puede hacer todo. Como es un lenguaje que se ejecuta en la parte del cliente, no puede interactuar con una base de datos de tipo MySql o SQL, por ejemplo. Para cumplir este objetivo es necesario pasar por el uso de lenguajes tales como ASP o PHP. Otro punto importante, JavaScript no es capaz ni de leer ni de escribir en el disco duro del equipo del cliente (a excepcin de las cookies que son simples archivos de texto cuyos aspectos trataremos en el captulo Mejorar la interactividad con JavaScript y las CSS). No obstante, esta limitacin no es en s misma un defecto, actuando de esa manera JavaScript se evita propagar virus de gran peligrosidad. Otra particularidad de JavaScript es que no necesita ningn editor ni compilador en particular. Es muy sencillo escribir scripts directamente en el cdigo fuente de la pgina HTML usando un simple editor de texto tipo Wordpad o un editor de cdigo HTML. Sin embargo, existen editores ms sofisticados que ofrecen muchas ventajas.

Herramientas de concepcin
Las herramientas que permiten insertar cdigo JavaScipt son muchas. Hay desde el simple editor de texto como WordPad de Windows hasta herramientas especializadas como Aptana Studio, pasando por editores de cdigo HTML tales como Dreamweaver o FrontPage, que permiten insertar bloques de cdigo JavaScript. El uso de estos programas permite disponer de un cierto nmero de herramientas que facilitan la escritura del cdigo. Por ejemplo, es muy simple:

verificar una sintaxis gracias a la coloracin automtica del cdigo fuente; disponer de la funcin de completado automtico (proposicin de mtodos o propiedades
disponibles del objeto);

conocer el valor de una variable una vez ejecutado el script.

Para ello, usted puede optar por un programa como Aptana que se puede descargar en la direccin http://www.aptana.com. Desgraciadamente este IDE (entorno de desarrollo) est en ingls, lo cual puede resultar un poco desalentador. Sin embargo, es una herramienta que resultar muy interesante para la depuracin del cdigo as como otras herramientas que mencionaremos en los siguientes captulos. Una vez seleccionada la herramienta de concepcin, es conveniente crear un entorno de programacin y de prueba para perder el menor tiempo posible en la bsqueda de los errores que surgirn de manera inevitable.

Parmetros y entorno ideal de prueba

Es necesario tener en cuenta que para comenzar a trabajar con JavaScript, hace falta un mnimo de conocimientos de HTML, sobre todo la nocin de etiquetas que permite situarse en la pgina. Para refrescar la memoria, recordaremos simplemente que una pgina HTML se divide en dos grandes partes:

la parte head (cabeza en espaol) donde se ubican los datos correspondientes a la descripcin del contenido; la parte body (cuerpo en espaol) donde figura el cdigo que hace posible la construccin de objetos en la pgina (campos de formulario, zonas de texto, imgenes, etc.).

Una secuencia de comandos JavaScript puede ubicarse, segn se desee, en una u otra de estas dos partes. Sin embargo, por principio, los scripts se encuentran generalmente en la parte head de la pgina. Su ejecucin puede ser inmediata (cuando se carga la pgina) o diferida (hacer clic en un botn, por ejemplo). Har falta en ese caso usar la programacin basada en eventos y las funciones para que el cdigo se ejecute. Estos puntos se tratan en el captulo Funciones y eventos de este libro. No obstante, colocar los scripts en la parte head no significa que sern indexados por los buscadores. De hecho, hasta ahora, los buscadores como Yahoo o Google no proponen ningn contenido a partir de estos elementos del cdigo, pero con el desarrollo de la Web 2.0 lo harn tarde o temprano. Por el momento, en el caso de que una pgina contenga vnculos en un men construido con JavaScript, los buscadores no tendrn en cuenta las direcciones. Por lo tanto, es sumamente recomendable agregar los vnculos en HTLM sirvindose de la etiqueta <a href="mipaginavisibleporlosbuscadores.html">. Una vez que ya hemos explicado la ubicacin del cdigo JavaScript, es necesario comprender cmo deben insertarse. Ya hemos visto que JavaScript no necesita un entorno particular. Basta simplemente una pgina HTML en cuyo interior usted agregar las lneas escritas en JavaScript entre dos etiquetas. La primera etiqueta explica al navegador el comienzo del script y la segunda su fin. Las etiquetas que deben utilizarse son las siguientes: Al comienzo del script: <script language="javascript"> al final del script </script> Entre las dos etiquetas, el nmero de lneas de cdigo es ilimitado. Se puede agregar la versin de JavaScript utilizada y obtener as el siguiente tipo de lnea: <script language="javascript 1.5"> Sin embargo, los navegadores se adaptan muy bien a la primera sintaxis y de acuerdo con su versin se adaptan a la version de JavaScript. Adems, especificar una de las ltimas versiones obliga a los usuarios a disponer de la ltima versin de navegador, lo cual limita el alcance de su cdigo. Pero si, despus de todo, usted desea transmitir datos a los usuarios con navegadores que no soportan JavaScript, tiene que hacerlo entre las etiquetas <noscript> y </noscript> ubicadas justo despus del cdigo. <script language="javascript"> document.write ("Hola"); </script> <noscript> Su navegador no comprende el cdigo JavaScript</noscript> En este ejemplo, el navegador mostrar Hola si es compatible o el texto que se encuentra entre las etiquetas <noscript> y </noscript> si no lo es. Una vez que se han insertado las dos etiquetas y el cdigo correspondiente, slo queda guardar sus pginas gracias al men Archivo - Guardar como. De esta manera, usted puede constituir de manera progresiva una biblioteca de pginas HTML compuestas de cdigos JavaScript que podr reutilizar en contextos especficos.

En otras palabras, para comenzar se necesita una pgina HTML bsica que le servir de modelo para todas las otras pginas que contengan scripts.

HTML Y JavaScript
HTML y JavaScript
Anteriormente hemos explicado que JavaScript y HTML estaban ntimamente relacionados, con el cdigo HTML que sirve generalmente de contenedor al bloque de instrucciones de JavaScript. Una vez cargada la pgina HTML, el navegador ejecuta las instrucciones de JavaScript permitiendo de esta manera enriquecerla con nuevas funcionalidades. No obstante, existe otro tipo de ejecucin de JavaScript.

Los dos tipos de ejecucin de JavaScript

Los bloques de cdigo de JavaScript pueden estar directamente presentes en el cdigo fuente de la pgina HTML entre dos etiquetas (una de inicio y otra de fin), o escritos en un archivo JavaScript con la extensin .js, de manera totalmente independiente del cdigo HTML de la pgina. El primer caso se conoce como JavaScript interno en contraposicin al segundo llamado JavaScript externo. Ninguno de los dos es mejor que el otro, se trata slo de una opcin de programacin. La segunda opcin tiene sin embargo la ventaja de permitir reutilizar el cdigo en otras pginas HTML sin que por ello sea necesario reescribirlo o copiarlo. De manera especfica, el script se redacta en un documento especial mediante un editor de texto y se guarda sin formatear bajo la extensin .js. Si el editor no propone por defecto esta extensin, basta con agregarla en el momento de guardar el documento. Se recomienda nombrar de manera explcita el papel que juega su script en la pgina HTML de manera que sea ms fcil encontrarlo en otra ocasin. Una vez realizadas estas acciones, resulta muy sencillo designar el archivo JavaScript en la pgina HTML respetando la siguiente sintaxis: <script src="archivo_javascript.js"></script> Evidentemente, el archivo deber estar presente en la misma carpeta de su disco duro o del servidor donde se encuentra el archivo HTML correspondiente. Por razones de comodidad, todos los ejemplos de este libro han sido escritos en JavaScript interno, de manera que resulte ms sencillo para usted localizar el cdigo. Adems de estas normas relacionadas principalmente con la organizacin del script, existe un cierto nmero de reglas de sintaxis que tambin deben respetarse.

Las reglas de sintaxis del cdigo

En vista de que JavaScript es un lenguaje poco flexible que no autoriza errores, tal como podremos constatar en las siguientes lneas, el respeto de estas reglas es fundamental para comenzar con buen pie en JavaScript.

1. Maysculas y minsculas
Unas de las principales dificultades de JavaScript es la de ser un lenguaje de programacin que distingue el uso de maysculas y minsculas. Es una regla que cobra gran su importancia cuando se trabaja con variables y objetos.

De manera concreta, en JavaScript Miobjeto no es lo mismo que miobjeto. Esto se aplica a todas las palabras claves (propiedades, mtodos, funciones JavaScript) y el uso de herramientas de concepcin como Aptana o el editor de Dreamweaver facilita la identificacin de esta sintaxis puesto que son casi instantneamente identificadas con colores. Otra regla sintctica se refiere a la insercin de comentarios.

2. Insercin de comentarios
Tal como sucede en la mayora de los lenguajes de programacin, la insercin de comentarios en sus scripts puede resultar sumamente til. De hecho, aparte de poder encontrar de manera ms sencilla los bloques de instrucciones que usted ha creado, los comentarios podrn ser de una inmensa ayuda el da que tenga que retomar el cdigo. La legibilidad del cdigo es incluso uno de los principales criterios determinantes de la calidad de un cdigo JavaScript. Porque, a fin de cuentas, de qu sirve escribir un magnfico cdigo si su modificacin, una semanas ms tarde, necesitar el doble de tiempo? La insercin de comentarios en un bloque de cdigo JavaScript puede hacerse en una sola lnea o en mltiple lneas. Los comentarios compuestos en un sola lnea estarn precedidos de una doble barra //. Los comentarios que no puedan contenerse en una sola lnea estarn precedidos de /* y tendrn que terminarse en */. Ejemplo: <script language="javascript"> //Esto es un comentario en una sola lnea </script> <script language="javascript"> /* Esto es un comentario En mltiples lneas */ </script>

En algunos editores, los comentarios aparecen con un color diferente al del cdigo.

3. El punto y coma
Cada lnea de cdigo de JavaScript termina generalmente en punto y coma, salvo alguna excepcin sintctica que detallaremos ms adelante. Un simple olvido de este punto y coma puede hacerle perder un tiempo precioso. La primera etapa de depuracin del cdigo consistir entonces en identificar su presencia.

4. La tabulacin
Cuando las lneas del cdigo comienzan a ser numerosas, puede darse el caso de que el desarrollador se pierda un poco ante una serie de signos que no logra relacionar. Es entonces cuando resulta muy til servirse de una regla de presentacin de scripts que consiste en

desplazar hacia la derecha las instrucciones que se relacionan. Suele ser el caso de pruebas o de bucles anidados. Ejemplo: colocar en varios cuadros de dilogo el resultado de dos variables utilizadas como contador en dos bucles anidados.

<script language="javascript"> var i,j=0; for (i=0;i<2;i++) { alert("este es el valor de mi primer contador i: "+i); for (j=0;j<2;j++) { alert("este el valor de mi segundo contador j: "+j); } }</script>

En este caso, el desplazamiento de las llaves gracias a la tabulacin permite encontrar la anidacin del bucle j en el bucle i. La creacin de bucles anidados la explicaremos con ms detalle en el capitulo Controlar los scripts con las estructuras de control. El conocimiento de estos elementos le permitir escribir su primera pgina en JavaScript que servir igualmente de pgina modelo.

Creacin de la pgina de prueba

Para escribir de manera eficaz en la pginas HTML, lo mejor es crear una pgina modelo donde se debern incluir las etiquetas que indican el comienzo y el fin del script. Siendo la parte head de la pgina donde generalmente se inserta el cdigo JavaScript, observe este ejemplo de cdigo HTML de la pgina modelo que ser utilizada para la escritura de todos sus scripts.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Pgina modelo en Javascript</title> <script language="javascript"> document.write("Colocar el cdigo aqu"); </script> </head>

<body> </body> </html> Las dos primeras lneas determinan el tipo de documento, su presencia es fundamental para el buen funcionamiento de las instrucciones DHTML, como veremos en el captulo Mejorar la interactividad con JavaScript y las CSS. La cuarta lnea indica el inicio de la etiqueta head que nos interesa de manera particular. La quinta lnea permite agregar una etiqueta meta que indica los caracteres utilizados, la sexta le da un ttulo a la pgina (en nuestro caso, Pgina modelo en JavaScript). Es entre las lneas:<script language="javascript"> y </script> donde deber incluir la mayora de los scripts que va a escribir. La posicin est indicada por la lnea document.write("Colocar el cdigo aqu"). No obstante, se puede ubicar el cdigo JavaScript en cualquier lugar de la pgina. Guarde esta pgina con un nombre que permita distinguirlo fcilmente (pgina modelo, por ejemplo). De ahora en adelante, usted podr:

retomar esta misma pgina; modificar el script; y finalmente guardarlo con otro nombre mediante la orden Guardar como de su editor.

No olvide modificar tambin el contenido de la etiqueta <title>. Para mayor seguridad y evitar borrar esta pgina modelo, usted puede modificar los derechos de acceso y atribuirle un estado de slo lectura. Ejemplo: para crear una nueva pgina HTML compuesta por un script de escritura de un mensaje en la pgina, tiene que abrir la pgina modelo y seguidamente insertar entre las dos etiquetas <script language="javascript"> y </script> el siguiente cdigo: document.write(" la pgina modelo es reutilizable") ; Con este mtodo, usted podr constituirse de manera rpida y fcil una verdadera biblioteca de scripts.

Creacin de una biblioteca personal de scripts JavaScript

Con el paso del tiempo, tendr que desarrollar numerosos scripts que se podrn reutilizar posteriormente. Para facilitar esta reutilizacin, identifique sus pginas con nombres que indiquen claramente el objetivo de su script JavaScript.

Cuidado con confundir biblioteca personal de scripts y bibliotecas comunes, abundantes en la red, y que enriquecen el funcionamiento clsico de JavaScript. La instalacin de nuevas bibliotecas JavaScript se tratar en el captulo Mejorar la interactividad con JavaScript y las CSS.

Mensajes de error y consejos para depurar el cdigo (debug)

El hecho de que los navegadores interpreten de manera diferente JavaScript, impone la necesidad de realizar pruebas en cada uno de ellos. Sin embargo, el mejor consejo es probar los scripts primero en Firefox/Mozilla que dispone de una herramienta de resolucin de errores ms poderosa y luego realizar una prueba en Internet Explorer. Para ayudarle un poco en el procesamiento de los posibles errores; podemos dividir estos en diferentes categorias: En primer lugar, puede darse el caso de que nada suceda cargar la pgina. Es necesario saber que JavaScript realiza un control del script antes de mostrar cualquier cosa. Si encuentra un error, el script se interrumpe sin llegar muy lejos. Estos errores se deben generalmente a una sintaxis aproximada o a errores de teclado. Es posible tambin encontrar errores no al cargar la pgina sino cuando se ejecuta. Esto significa generalmente que los objetos, sus propiedades, sus mtodos e incluso las funciones no corresponden o estn mal utilizadas. Finalmente, los errores ms difciles de detectar son los errores puramente lgicos que surgen cuando las pruebas del script no han sido suficientes. En estos casos, el script puede funcionar en un caso y provocar un error con otros valores u otras circunstancias. No dude en probar sus scripts con valores diferentes y observe atentamente los resultados obtenidos. Por prudencia, si no dispone de una herramienta que permita controlar el estado del script (como Aptana o Firebug, por ejemplo), el programador debera incluir en su script muchos cuadros de dilogo. Estos permitirn mostrar el contenido de las variables a lo largo del desarrollo del script. Desde un punto de vista general, cuando surge un error en el desarrollo de su script, resulta de mucha utilidad buscar en la barra de estado de su navegador la presencia de un posible icono indicando que el error ha sido identificado (en Internet Explorer, abajo a la izquierda, abajo a la derecha en Firefox/Mozilla). Con un simple clic en este icono, le ser posible saber cul es la lnea que contiene el error. Pero cuidado, esta informacin no es siempre precisa. La indicacin del nmero de lnea informa simplemente que se ha encontrado un error a partir de dicha lnea. Es necesario a veces remontar varias lneas antes de encontrar el problema que provoca el error. Una vez ms, todas las ventajas de las herramientas de concepcin (coloracin del cdigo, tabulacin) son bienvenidas, puesto que esta labor larga y tediosa sigue siendo la causa principal del desinters por Javascript. Estos consejos constituyen una primera ayuda para la depuracin del cdigo, pero no bastan cuando los problemas resultan ms graves. En ese caso, existen herramientas que permiten facilitar un poco el trabajo.

Las herramientas de depuracin de JavaScript

A pesar de que es posible escribir un script de una manera muy sencilla, la utilizacin de una herramienta de concepcin puede resultar til, sobre todo si se trata de la resolucin de un error. Su utilizacin nos permitir tener puntos de interrupcin, conocer el valor de las variables y otras ayudas que sern muy tiles en esta etapa crucial como es la bsqueda de un error. Vamos a presentar algunas de estas herramientas.

1. Microsoft Script Debugger

Con el uso de Microsoft Script Debugger, usted dispone de una herramienta de ayuda a la sintaxis y la resolucin de problemas. Cuando el navegador Internet Explorer encuentra un problema en el desarrollo de un script, en Microsoft Script Debugger es posible ir directamente a la lnea que presenta el problema.

Se trata de un programa de resolucin de problemas de Microsoft, aunque su utilizacin es poco intuitiva y est disponible slo en ingls. Puede descargarlo en el centro de descargas de Microsoft en la siguiente direccin: http://www.microsoft.com/downloads/ Le ser necesario quizs instalar previamente el programa Genuine de Microsoft.

2. Microsoft FrontPage / Adobe Dreamweaver

Los editores de cdigo HTML permiten visualizar el cdigo de la pgina y de esta manera acceder a la parte JavaScript. Pero no disponen de funcionalidades capaces de agregar puntos de interrupcin y de conocer el valor de las variables. Por ello, son poco convenientes para la resolucin de problemas de scripts complejos, aunque son un excelente intermediario entre el mundo de JavaScript y el HTML.

3. Venkman
Es un complemento de Firefox/Mozilla (y se utiliza con l), que permite visualizar el cdigo JavaScript, agregar puntos de interrupcin y controlar el valor de la variables. Se integra directamente en el navegador y puede iniciarse con el men Herramientas - JavaScript Debugger.

4. Firebug
Este es otro complemento de Firefox/Mozilla con las mismas caractersticas, que Venkman pero con un enfoque ms intuitivo. Es esta la herramienta que le aconsejo instalar. Podr encontrarla fcilmente descargndola en la siguiente direccin: https://addons.mozilla.org/es-ES/firefox/addon/1843 Una vez descargado el archivo, slo tiene que instalarlo abriendo el archivo con el men Archivo - Abrir un archivo y luego reiniciar Firefox/Mozilla. Firebug estar entonces disponible en el men Herramientas - Firebug.

Es fcil constatar que las herramientas son ms numerosas en Firefox/Mozilla. Hay muchas ms extensiones gratuitas y descargables en la direccin: https://addons.mozilla.org/esES/firefox/ Es por ello que Firefox/Mozilla se mantiene como el navegador en el que resulta ms fcil efectuar una depuracin, encontrar una variable, o su valor, as como los objetos en los que se basa la programacin JavaScript. Una vez que ha seleccionado su herramienta de concepcin y ha creado su pgina modelo, ya est en condiciones de abordar los principales conceptos de la programacin orientada a objetos.

Iniciacin a la programacin orientada a objetos y JavaScript

Lenguaje de script y lenguaje de programacin
Lenguaje de script y lenguaje de programacin generalmente se oponen; sin embargo, si nos fijamos bien, son muchas las cosas que tienen en comn. Por un lado, los lenguajes de programacin necesitan un editor especial y un compilador. La escritura de un programa se considera ms complicada que la de un script. Las instrucciones escritas por un lenguaje de programacin son interpretadas directamente por el procesador del ordenador. En esta categora encontramos lenguajes de programacin como C o Java. Los lenguajes de script (de los que forma parte JavaScript) permiten, por su lado, encadenar una serie de instrucciones ejecutadas por otro programa (en este caso el explorador web). No hay necesidad de ningn compilador y slo se necesita un editor de texto. En general, la escritura de un script se considera ms sencilla que la programacin. En otras palabras, podemos decir que JavaScript se sirve fundamentalmente de otros programas como los navegadores (Internet Explorer, Firefox/Mozilla, etc.) para ejecutar una serie de instrucciones de manipulacin de objetos (ventanas, campos de pginas de Internet, etc.) con el objetivo de llevar a cabo una aplicacin. La manipulacin de estos objetos funciona segn una tcnica llamada programacin orientada a objetoso POO.

Los principios de la programacin orientada a objetos

Este tipo de programacin naci en los aos sesenta y conoci un fuerte desarrollo a partir de los aos ochenta, notablemente con Smalltalk. Actualmente, muchas aplicaciones se construyen a partir de la programacin orientada a objetos que, tal como indica su nombre, se basa en la nocin de objeto.

1. Objetos, mtodos y propiedades

La programacin orientada a objetos es un paradigma informtico; esto es, una manera de ver las cosas. Con la programacin orientada a objetos, y de manera especial con JavaScript, todos los elementos de una pgina web (ventana, botones, formulario, campos de texto, etc.) son considerados como objetos que usted puede probar y manipular. Sin embargo, estos objetos no tienen todos la misma importancia. De hecho, muchos son los que dependen de otros objetos. Por ejemplo, un formulario puede estar compuesto por casillas o por campos de texto que dependen directamente de l, y al mismo tiempo, el propio formulario depende del

documento en el que se encuentra. La expresin nocin de jerarqua se utiliza para denominar esta dependencia. El siguiente esquema representa la jerarqua de objetos JavaScript predefinidos:

Para alcanzar un objeto, es necesario rastrear su ruta (un poco como en el caso de un disco duro), partiendo del objeto ms importante, jerrquicamente hablando, para finalmente llegar al menos importante. Por cada cambio de objeto se agrega un punto. Esta forma sintctica se denomina sintaxis por puntos. De esta manera, en una pgina compuesta por un formulario llamado formu que contiene un campo Nombre, la sintaxis para acceder a Nombre sera la siguiente: document.formu.nombre ; Pero eso no es todo, adems de alcanzar un objeto preciso dentro de una jerarqua, la sintaxis por puntos se refiere tambin al acceso a mtodos o propiedades que permiten manipular o describir estos objetos. En otras palabras, las propiedades constituyen un conjunto de atributos que permiten modificar la apariencia, y los mtodos constituyen acciones realizables por este objeto. Generalmente suele usarse el ejemplo de un coche para explicar de manera ms precisa esta idea. Para ilustrar de una manera ms clara la Programacin Orientada Objeto, suele evocarse el ejemplo de un coche. Segn esta metfora, el coche representa un objeto que se caracteriza por poseer un cierto nmero de propiedades (su color azul o rojo, su forma monovolumen o berlina). Paralelamente a estas propiedades, este objeto realiza igualmente un cierto nmero de acciones (avanzar, girar, retroceder, etc.) que corresponden a lo que denominamos mtodos. Los mtodos y las propiedades no son necesariamente las mismas para todos los objetos. Es posible que varios objetos posean una misma propiedad o mtodo, pero no es obligatorio. De hecho, para utilizar correctamente JavaScript es necesario conocer en profundidad el modelo del objeto as que los mtodos y propiedades disponibles. Desde un punto de vista sintctico, el punto se utiliza para separar un objeto de su propiedad o de su mtodo. Entre los principales objetos predefinidos de JavaScript se encuentra el objeto Window que corresponde a la ventana navegador. Para tomar un ejemplo concreto, si usted desea imprimir la pgina de Internet activa, deber utilizar el mtodo print() (imprimir) del objeto window (ventana), que es el objeto ms alto en la jerarqua. Segn esta idea, el script que permitir imprimir la pgina activa es el siguiente: <script language="javascript"> window.print(); </script>

Siendo el objeto window el ms alto de la jerarqua, no es necesario nombrarlo en cada manipulacin. Puede entonces escribirse el script de una manera todava ms simple. Por ello, a partir de hora, para simplificar las cosas, no haremos ms referencia al objeto window. <script language="javascript"> print(); </script> Otro ejemplo, si desea mostrar en la pgina la propiedad title del objeto document (que permite obtener el titulo de la pgina), es posible hacerlo con el siguiente script:

<script language="javascript"> document.write(document.title); </script> En este caso, el mtodo write() permite mostrar en el documento el valor correspondiente a la propiedad title de la pgina. En JavaScript existen dos tipos de objeto. De un lado, estn los objetos predefinidos que se encuentran en la jerarqua de objetos que ya hemos mencionado, y del otro, se encuentran los objetos concebidos por el desarrollador mismo gracias a la creacin de una funcin tal como veremos en el captulo Funciones y eventos. En cuanto a los objetos predefinidos, cada nueva versin de JavaScript enriquece el modelo permitiendo acceder a los nuevos objetos o agregando nuevos mtodos y propiedades. Este aspecto, sin duda positivo, implica sin embargo consecuencias menos provechosas. En realidad, los usuarios que no utilicen la ltima versin del navegador no podrn disponer de los nuevos objetos, propiedades y mtodos. El script enviar inevitablemente un mensaje de error. Hara falta una nueva versin del navegador por cada nueva propiedad! A primera vista, un verdadero dolor de cabeza, aunque con la explosin de Internet (y las facilidades de actualizacin), la mayor parte de los internautas disponen actualmente de una versin reciente y adaptada. En el momento de la redaccin de este libro, las versiones 7.0 de Internet Explorer y 2.0 de Firefox/Mozilla soportan la versin 1.5 de JavaScript. Versin de JavaScript 1.0 Navegadores compatibles Internet Explorer 3.0 Netscape Navigator 2.0 1.1 Internet Explorer 4.0 Netscape Navigator 3.0 1.2 Internet Explorer 4.0 Netscape Navigator 4.0 1.3 Netscape Navigator 4.5 Mejoras del objeto Date. Correccin de algunos fallos. Insercin de la instruccin Switch, de nuevas propiedades del objeto navegador y de nuevos eventos. Integracin de las expresiones regulares. Insercin de nuevos eventos. Correccin de algunos fallos. Mejoras/Incorporaciones

Versin bsica de JavaScript conforme a la directiva de ECMA.

1.4

Netscape servidor Desarrollado nicamente para los servidores de Netscape. Insercin de excepciones jet y try ... catch Integracin de nuevas mejoras (instanceOf). Cambios aportados a LiveConnect.

Versin de JavaScript

Navegadores compatibles

Mejoras/Incorporaciones

Modificaciones del objeto Array. 1.5 Netscape Navigator 6.0 Internet Explorer 6.0 1.6 Firefox/Mozilla 1.0 Internet Explorer 6.0 1.7 Firefox/Mozilla 2.0 Internet Explorer 6.0 1.8 Firefox/Mozilla 3.0 Insercin de las clausuras de expresin, de las expresiones generadoras, de los mtodosreduce() y reduceright() para el objeto Array. Insercin de la tecnologa E4X que permite controlar los documentos XML. Insercin de los mtodos every(), filter(),forEach(), map(), some() del objeto Array. Integracin de las nuevas palabras clave yield,let, definicin de tablas por compresin. Versin basada sobre las especificaciones ECMA-262 3a edicin. Integracin de la gestin de excepciones.

Para utilizar una versin especifica de JavaScript (por ejemplo la versin 1.7), es ms prudente precisarlo cuando se declara la etiqueta con la instruccin: <script lenguaje="javascript1.7"> Pero la verdadera dificultad reside en el navegador, puesto que no todos soportan la totalidad de propiedades u objetos de Javascript. Un vistazo a la tabla de mtodos y propiedades puede evitar una perdida de tiempo. El objeto es, pues, la base del lenguaje JavaScript y si usted necesita utilizar diferentes mtodos o propiedades para un objeto, en vez de citar varias veces el mismo objeto puede servirse de la palabra clave with en la instruccin. Basta con comenzar la instruccin por la palabra clave with, poner entre parntesis el objeto y despus utilizar las propiedades o mtodos basados en ese objeto incluyndolas entre dos llaves. Todo lo que se encuentra entre esos dos llaves se refiere al objeto. La sintaxis es la siguiente: with(nombredelobjeto) { Instrucciones de manipulacin de las propiedades o mtodos ; } Ejemplo: mostrar el contenido de un campo de formulario antes y despus de la modificacin del valor de la variable.

<html> <head> <title>Utilizacin de With</title>

<script language="javascript"> function control() { with (document.form1.nombre) { value="primer valor"; alert(value); value="nuevo valor"; alert(value); } } </script> </head> <body> <form name="form1" method="post" action=""> <p> <input name="nombre" type="text" id="nombre"> </p> <p> <input type="button" name="Submit" value="Botn" onClick="control()"> </p> </form> </body> </html> En este caso, el objeto correspondiente al campo de texto del formulario se declara en principio con la instruccin with (document.form1.nombre). Es intil retomar la sintaxis document.form1.nombre, basta con modificar las instrucciones modificando sucesivamente el valor del objeto. La apertura sucesiva de varios cuadros de dilogo permite seguir esta modificacin del valor. Podra pensar que una condicin esencial para el aprendizaje de la programacin orientada a objetos es el conocimiento perfecto del conjunto de objetos de JavaScript. Sin embargo, es preferible conocer, en un principio, las propiedades y mtodos bsicos de los objetos que se utilizan ms a menudo.

Mtodos JavaScript
1. alert()
El mtodo alert() del objeto window permite mostrar un cuadro de dilogo con un mensaje de advertencia. El mensaje del cuadro de dilogo dese escribirse entre comillas, pero es posible agregarle acentos, espacios y cualquier otro carcter que desee mostrar. Puede tambin mostrar variables en lugar de los mensajes o, como veremos en el captulo sobre la Utilizacin de constantes, variables y operadores.

Cuando aparece este cuadro de dilogo, JavaScript se detiene y espera a que el usuario haga clic sobre el botn Aceptar. Incluso si parece un poco limitado a primera vista, este mtodo ser de mucha ayuda cuando se tenga que resolver un problema de script y verificar el valor de las variables. Ejemplo: mostrar el cuadro de dilogo de tipo alert con un simple mensaje.

<script language="javascript"> alert("Esto es un cuadro de dilogo que se abre gracias a JavaScript"); </script> Si desea que el mensaje aparezca en dos lneas, debe agregar \n al final de la primera lnea. <script language="javascript"> alert("Esto es un cuadro de dilogo que se abre \n gracias a JavaScript"); </script> Pero el uso del mtodo alert() tiene el inconveniente de no permitir la posibilidad de introducir datos y, de esta manera, responder al mensaje que se muestra. Para ello, es necesario utilizar otros mtodos propuestos por JavaScript.

2. confirm()
El mtodo confirm() del objeto window muestra un cuadro de dilogo con un mensaje seguido de dos botones Aceptar y Cancelar. Ejemplo: una vez cargada la pgina, mostrar un cuadro de dilogo con dos botones de respuesta a travs del mtodo Confirm().

<script language="javascript"> confirm("Aceptar = 0, Cancelar = 1"); </script> La gran diferencia con el mtodo alert() es que en funcin de la respuesta, es decir, de la accin de hacer clic en Aceptar o Cancelar, usted puede enviar un valor (true) para Aceptar y (false) paraCancelar a una variable. Basta con declarar la variable respuesta antes del mtodo confirm(). En el captulo Utilizacin de constantes, variables y operadores se habla con ms detalle de las variables, pero se puede modificar ya el script anterior: Ejemplo: mostrar un cuadro de dilogo con dos botones Aceptar y Cancelar y luego enviar el valor de la pregunta planteada a otro cuadro de dilogo.

<script language="javascript"> var respuesta=window.confirm("Aceptar = true, Cancelar = false"); alert("el valor de la variable respuesta es: "+respuesta); </script> Lo primero que se debe hacer es declarar una variable llamada, en nuestro caso, respuesta, y aplicarle un valor que corresponda a la seleccin del usuario (es decir al valor 0 o -1). Luego, slo se necesita mostrar la respuesta por medio del mtodo alert(), teniendo cuidado de poner entre comillas el mensaje que debe mostrarse, de agregar el operador de concatenacin + as como la variable. De esta manera, puede construir una verdadera frase como respuesta. A pesar de que el mtodo confirm() permite comenzar una interaccin, slo puede haber un mximo de dos respuestas. En el caso de una respuesta abierta, es necesario utilizar un tercer mtodo.

3. prompt()
El mtodo prompt() permite mostrar, adems, un mensaje para introducir un valor en un campo llamado invite. Se puede entonces introducir una respuesta abierta a diferencia de los mtodos anteriores. El cuadro de dilogo dispone de dos valores; el botn Aceptar permite aplicar a una variable el valor agregado en el invite, el botn Cancelar implica la asignacin a la variable del valorNull. Tambin es posible mostrar un valor por defecto en el campo disponible para la respuesta y, si ste no le conviene, el usuario podr escribir encima un nuevo valor. La sintaxis del mtodo prompt() es la siguiente: Prompt("texto que se va a mostrar", "valor por defecto"); Ejemplo: mostrar dos cuadros de dilogo con el objetivo de introducir el nombre y el apellido del usuario y luego abrir un tercer cuadro con el nombre completo.

<script language="javascript"> nombre=prompt("Cul es su nombre?", "Ingresar su nombre aqu"); apellido=prompt("Cul es su apellido?", "Ingresar su apellido aqu"); alert("Su nombre completo es: \r"+nombre+"\r "+apellido); </script> En un primer momento, la utilizacin del mtodo prompt() permite solicitar el nombre y el apellido al visitante. Los valores escritos se aplican automticamente a las dos variables nombre y apellido. Luego es muy fcil construir el mensaje mostrado con el mtodo alert(). Este mensaje ser la suma de una lnea de caracteres (puesta entre comillas) y de variables que aparecern en dos lneas gracias al uso de \r.

Cuidado: Firefox no tiene en cuenta el smbolo /r. En este contexto, el mensaje aparece en un sola lnea.

La utilizacin de estos mtodos del objeto window est directamente relacionada con las variables. Debemos conocer el funcionamiento de estas ltimas.

Utilizacin de constantes variables y operadores

Tipologa y utilizacin de constantes
Las constantes son elementos de informacin cuyos valores se indican de manera explicita en el cdigo JavaScript. Por regla general, los valores de las constantes se determinan al comienzo del script y son vlidas hasta el final. Esta asignacin del valor de las constantes se efecta segn la siguiente sintaxis: Mi_constante = valor de la constante; El valor de la constante escrita a la derecha del signo igual se guarda en la memoria asignada al nombre del nombre escrito a la izquierda del signo, que en este ejemplo es Mi_constante. Las constantes JavaScript pueden clasificarse en varias categoras:

1. Constantes aritmticas
Estas corresponden a un nmero (tipo number), constituido de una serie de cifras. Existen varios tipos de constante en funcin de su modo de escritura: La constante decimal est constituida por una serie de 17 cifras como mximo que van del cero al nueve. La constante decimal puede ser negativa y en ese caso est precedida del signo menos. Ejemplo: 64 -64 64.14 3.1415926535 son constantes decimales.

Las constantes decimales utilizan el punto y no la coma para separar la parte entera de la parte decimal. Si usted utiliza la coma, la parte decimal no se tiene en cuenta. La constante octal est constituida de una serie de cifras que van del cero al siete. La constante octal comienza por un cero y debe ser obligatoriamente entera y positiva. Ejemplo: 02542571 es una constante octal. La constante hexadecimal est compuesta de una serie de diecisis caracteres con cifras decimales de cero a nueve a las cuales se agregan letras de la A a la F. La constante hexadecimal debe comenzar por un cero seguido de una x.

Ejemplo: 0xF45B es una constante hexadecimal.

2. Constantes cadena de caracteres

Corresponden a una serie de caracteres que pueden ser letras o cifras o una asociacin de las dos. La cadena de caracteres debe estar entre comillas o apstrofos. Ejemplo: "mi constante texto" o mi constante texto son constantes de cadena de caracteres.

Una contante puede estar vaca, en ese caso se escriben dos apstrofos o comillas sucesivas sin agregar nada en el interior.

3. Constantes booleanas
Slo pueden corresponder a dos valores, true o false, se escriben sin comillas ni apstrofos y se establecen generalmente en funcin de una prueba en las estructuras de control que estudiaremos en el captulo Controlar los scripts con las estructuras de control. Ejemplo: Respuesta = true permite la aplicacin de un valor booleano true a la constante Respuesta. Ejemplo general sobre las constantes: declarar un cierto nmero de constantes en funcin del tipo y de la sintaxis, luego mostrar los resultados en la pgina por medio del mtodo document.write().

<script language="javascript"> constante_numerica=1.45226; constante_texto1="mi constante texto"; constante_texto2=mi constante texto; constante_texto3="1.45226"; constante_texto4="Estoy de acuerdo"; constante_cadena_vacia="" constante_infinita=7.6E+333*6.7E+333; constante_numero="esto no es un nmero"; constante_indefinida= undefined; document.write ("Esta es mi constante numrica : "+constante_numerica+"<BR>"); document.write ("Esta es mi constante texto1 : "+constante_texto1+"<BR>");

document.write ("Esta es mi constante texto2 : "+constante_texto2+"<BR>"); document.write ("Esta es mi constante texto3 : "+constante_texto3+"<BR>"); document.write ("Esta es mi constante texto4 : "+constante_texto4+"<BR>"); document.write ("Esta es mi constante cadena vaca : "+constante_cadena_vacia+"<BR>"); document.write ("Esta es mi constante infinita : "+constante_infinita+"<BR>"); document.write ("Mi constante es un nmero : "+isNaN(constante_numero)+"<BR>"); document.write ("Esta es mi constante_indefinida : "+constante_indefinida); </script> En este caso, slo hay que efectuar declaraciones y asignaciones de constantes y luego mostrar los valores por medio del mtodo document.write(). Este permite escribir directamente en la pgina y la utilizacin de <BR> permite saltar una lnea con el fin de que se muestre todo de una manera ms clara. Hay que notar en todo caso la utilizacin de la palabra clave undefined que corresponde a una constante JavaScript.

4. Otras constantes
Adems de las constantes definidas por el usuario, el ECMA ha definido algunas constantes: Infinity Esta constante corresponde a un nmero infinito superior a 1.7976931348623157E+10 308 o inferior a -1.7976931348623157E+10308. Esta constante es devuelta como resultado de una divisin compuesta por un dividendo igual a cero. Ejemplo: <script language="javascript"> a=5; b=0; resultado=a/b; alert(resultado); </script> NaN o isNaN Esta constante que significa Not a Number permite verificar si la variable es un nmero. Es necesario utilizar la sintaxis siguiente con isNaN:

isNaN(variable o constante) ; IsNaN enva true si el valor probado no es nmero y false si lo es. Undefined Esta constante toma el valor true en dos tipos de situaciones. La primera se refiere al caso donde una variable no est declarada, el segundo al caso donde una variable est declarada pero no se le ha asignado ningn valor. Pero undefined corresponde igualmente a un tipo de variable. Frecuentemente se utiliza con la palabra clave typeof en una prueba para conocer el valor de una variable. A pesar de que su utilidad no puede ponerse en duda, las constantes son muchsimo menos usadas que las variables, cuyo uso es sistemtico.

Tipologa de variables
A diferencia de las constantes cuyo valor se mantiene durante todo del script, las variables pueden cambiar de valor porque se les asigna un valor de manera directa o por un clculo en el cdigo o incluso por una insercin de datos por medio del mtodo prompt(). Una variable puede cambiar de valor, adems, durante el desarrollo del script, puesto que JavaScript retiene slo su ltimo valor; es ah donde radica toda la importancia de su utilizacin. A la inversa, si el valor de la variable no debe cambiar durante el desarrollo del script, cabe la posibilidad de transformarla en constante gracias a la palabra clave const. Hay otra diferencia, relacionada esta vez con los lenguajes de programacin, JavaScript es un lenguaje muy poco "tipado", lo cual quiere decir que las variables no necesitan pertenecer a un tipo (texto, numrico, booleano) para funcionar. En realidad, es el interpretador JavaScript el que define el tipo de variable en el momento de su ejecucin. La ventaja reside en que al prescindir de la determinacin de un tipo, usted economiza cdigo, aunque existe igualmente el inconveniente de que algunas veces puedan darse algunas incoherencias, por ejemplo: sumar texto y nmeros, sin que ello moleste a JavaScript. Para terminar, los tipos de variables son, los mismos que las contantes (texto, numrico, booleano) y son, por consiguiente, de muy fcil utilizacin.

Las etapas que se deben respetar en la utilizacin de las variables

Con el objetivo de trabajar correctamente con las variables, se recomienda respetar las etapas de creacin. Por lo general, tiene que comenzar por preguntarse cul es el alcance de la variable para as luego efectuar su declaracin y su asignacin.

1. Alcance de las variables

Es necesario preguntarse si la variable debe estar disponible a lo largo del script o si debe estar limitada a la funcin en la cual ha sido creada. Esto es lo que se llama el alcance de las variables. Existen dos tipos de alcance. Cuando una variable est definida en el interior de una funcin, como veremos en el captulo dedicado a las funciones, su alcance se conoce como local. En este caso, su valor no puede ser recuperado en otra funcin sin hacer referencia de manera explcita. Por el contrario, cuando una variable est definida directamente en el script y sin pertenecer a ninguna funcin, su alcance se conoce como global y su valor est disponible en todo momento.

2. Declaracin de variables
La declaracin de una variable se efecta con la ayuda de la palabra clave var y segn la siguiente sintaxis, conocida como declaracin explcita: var nombre_de_la_variable ; Se pueden declarar distintas variables en un sola lnea. En este caso, estarn separadas por una coma. var mivariable1, mivariable2, mivariable3 ; En casos como este, las variables que no han recibido un valor se conocen como undefined. Es importante tambin ver cmo puede usted realizar la aplicacin de las variables. Pero JavaScript es un lenguaje particularmente flexible y autoriza tambin la declaracin de variables sin utilizar la palabra clave var, esto se conoce como declaracin implcita.

3. Asignacin de variables
En JavaScript, la asignacin se puede realizar de tres maneras. Se puede hacer directamente en el cdigo por medio del signo igual (como para las contantes, el valor situado a la derecha del signo igual se asigna a la variable cuyo nombre figura a la izquierda del signo igual). var mivariable = 10 ; Es posible hacerlo indirectamente por medio de un clculo implicando contantes o variables. var suma=mivariable1+mivariable2 ; Por ltimo, es posible tambin pedir al usuario un valor que ser aplicado a la variable por el mtodoprompt() visto anteriormente. var respuesta=prompt(" Cul es la valor de esta variable? ") ; Este tipo de sintaxis, incluso si respeta las buenas prcticas del procedimiento de programacin, no es el nico. En realidad, este tipo de declaracin conocido como explcito, no es obligatorio y es posible hacer una declaracin implcita de las variables sin utilizar la palabra clave var. La sintaxis se transforma entonces en: mivariable = 10 ; o en: suma=mivariable1+mivariable2 ; Una vez asignados los valores a las variables, se pueden mostrar.

4. Visualizacin de variables
La visualizacin de una variable se efecta, generalmente, por mtodos alert() oconfirm(), vistos con ms detalle en el captulo programacin orientada a objetos y JavaScript. medio de los Iniciacin a la

Ejemplo 1: mostrar en un cuadro de dilogo el resultado de una suma de dos valores:

<script language="javascript">

var suma, numero1=10;numero2=5; suma=numero1+numero2; alert("el resultado de la adicin es: "+suma); </script> Antes que nada, la primera instruccin permite declarar tres variables (dos para cada uno de los nmeros y una para el resultado) que permitirn la realizacin del clculo. Evidentemente, es posible agregar tantas variables como se quiera para un clculo ms complicado. La instruccin siguiente permite efectuar el clculo. Por ltimo, el resultado de la operacin se muestra despus de una lnea de texto de presentacin.

El smbolo + es, en este caso, un operador de concatenacin de cadenas y no un operador aritmtico como sucede en la lneas anteriores. Ejemplo 2: mostrar el resultado de una multiplicacin en la pgina entre una variable igual a nueve y otra variable cuyo valor ser escrito por el usuario en un cuadro de dilogo.

<script language="javascript"> var numero1=9; var numero2=prompt("Qu nmero desea multiplicar por 9?"); var producto=numero1*numero2; document.write("el resultado de la multiplicacin es: "+producto); </script> Primero se debe asignar a la variable numero1 el valor 9. Segundo, se debe pedir al usuario que escriba un valor que se asignar al numero2. Mientras que el usuario no haya escrito nada, la variable numero2 es undefined. Luego, el script efecta el clculo de las dos variables. Finalmente, el resultado se muestra. Ejemplo 3: mostrar el resultado del clculo del precio de un trayecto para un coche en funcin del consumo medio. El usuario debe rellenar diferentes cuadros de dilogo con el objetivo de obtener la marca, el consumo medio por cada cien kilmetros, el precio de un litro de combustible usado y el nmero de kilmetros efectuados.

<script language="javascript"> var marca=prompt("Cul es la marca de coche?", " indique la marca de su coche"); var consumo=prompt("Cul es el consumo en litros de su coche por cada 100 kilmetros?", "indique aqu el consumo en litros de su coche");

var precio_litro=prompt("Cunto cuesta en euros el litro de su carburante?", "indique el precio de su carburante por litro"); var nro_kilometros=prompt("Cul es la cantidad de kilmetros de su recorrido?", "indique la cantidad de kilmetros de su recorrido"); var costo_total=nro_kilometros/100*consumo*precio_litro; alert("El precio total de un recorrido de " + nro_kilometros + " kilmetros realizado con un coche marca " + marca + " consumiendo una media de " + consumo + " litros por 100 kilmetros, a un precio de " + precio_litro + " euros por litro de carburante

es de " + precio_total + " euros"); </script> Se trata sobre todo de solicitar al usuario que indique todas las variables necesarias por medio del mtodo prompt(). Las variables marca, consumo, precio_litro y nro_kilometros se asignan de esta manera. A partir de todas estos datos se tiene que calcular el precio total del trayecto dividiendo el nmero de kilmetros por 100 y multiplicando el resultado por el consumo medio y el precio del litro. Para terminar, es mucho ms agradable mostrar el resultado en un cuadro de dilogo de tipoalert() que alterne la visualizacin de las variables con cadenas de caracteres.

5. Transferencia de valores entre variables y conversin de tipo

Para pasar el valor de una variable a otra, basta con usar el signo igual para transferir el valor de la variable de la derecha del signo igual a la izquierda del signo igual. var mivariable2=mavariable1 ; Es posible tambin convertir una variable de un tipo a otro (generalmente de texto a numrico) gracias a los mtodos parseInt() (conversin de texto a un nmero entero) y parseFloat()(conversin de texto a un nmero decimal). La sintaxis es la siguiente: var variablenumerica=parseInt(variabletexto) ; var variablenumerica=parseFloat(variabletexto) ; Ejemplo: mostrar el valor de una variable antes y despus de la conversin a travs del mtodo parseInt().

<script language="javascript"> var numero=15; var numeroentexto="10"; var numeroencifra=parseInt(numeroentexto); suma=numero+numeroentexto; alert("Este es el resultado antes de la conversin: "+suma);

suma=numero+numeroencifra; alert("Este es el resultado despus de la conversin: "+suma); </script> Como siempre, las variables se declaran y se asignan desde el comienzo del script. La variable numero corresponde al nmero 15 mientras que a la variable numeroentexto se le asigna la cadena de caracteres 10. No es posible entonces efectuar un clculo con estas dos variables. La variable numeroencifra declarada corresponde a la conversin en cifra de la variable nombreentexto. Para estar seguros del xito de la conversin es posible mostrar primero el resultado de la suma antes de convertirla, que corresponde a numero+numeroentexto (el resultado corresponde a la concatenacin de dos cadenas de caracteres: 1510), y luego mostrar el resultado una vez realizada la conversin numero+numeroencifra (el resultado es 25, probando as que la conversin se ha realizado correctamente). En los casos en que la conversin no pueda realizarse, se devolver el valor NaN (is Not a Number, lo cual significa no es un nmero). Al contrario, es posible convertir una variable mtodo toString(). La sintaxis es la siguiente: Var variabletexto=variablenumerica.toString() ; Ejemplo: mostrar el resultado de la conversin del nmero en texto de una variable. numrica en texto por medio del

<script language="javascript"> var numeroencifra=15; var numeroentexto=numeroencifra.toString(); total = 10+numeroentexto; alert("El total es:" + total); </script> El comienzo corresponde a la asignacin de la cifra 15 a la variable numeroencifra. Luego, es necesario aplicarle el mtodo toString() para convertirla en texto en numeroentexto. Despus de la conversin, la suma de la variable numrica y la variable convertida devuelve una concatenacin de variables de texto, demostrando de esta manera que se ha realizado correctamente.

Reglas de nombres y palabras reservadas

Hasta ahora hemos utilizado nombres de variables muy convencionales y relativamente explcitos, pero a medida que vaya progresando, se ver en la necesidad de utilizar variables ms personalizadas. Sin embargo, es imperativo ajustarse a ciertas exigencas y respetar ciertas reglas si no se quiere correr el riesgo de que el script devuelva un error. Concretamente, los nombres de variables no pueden contener espacio. En general, es necesario utilizar la subraya _ para simbolizarlo. Igualmente, el primer carcter de un nombre de variable no puede ser un punto.

Por ltimo, los nombres de las variables pueden contener, indiferentemente, maysculas o minsculas, aunque es importante respetar muy bien el cambio de una a otra puesto que JavaScript distingue entre otras. Esto quiere decir que MIvariable y mivariable son para JavaScript diferentes.

1. Consejos para la designacin de nombres

Es preferible nombrar las variables explcitamente, es decir, por lo que representan en vez de adoptar nombres de variables completamente abstractos. Esto le permitir encontrarlas ms fcilmente en el cdigo cuando siga un error. Existe adems una lista de palabras reservadas a JavaScript que estn completamente prohibidas cuando se desea declarar una variable.

2. Palabras reservadas
Las palabras reservadas son palabras que corresponden generalmente a objetos, propiedades o mtodos ya utilizados por JavaScript y que no pueden en consecuencia recibir un valor. La siguiente tabla recapitula esas palabras prohibidas. Algunas de estas palabras estn ya prohibidas y otras no se aconsejan, incluso si se pueden utilizar, puesto que las futuras versiones de JavaScript no las aceptarn. abstract boolean break byte case char class const continue debugger default delete do double else float for function goto if implements import in instanceoff int interface long native new null short static super switch synchronized this throw throws transient true try typeoff var void volatile

enum export extends false finally

package private protected public return

while with

Tipologa de operadores
Los operadores permiten manipular variables, hacer pruebas (comparaciones) entre los valores de las variables. Los operadores y las variables componen una expresin que puede, algunas veces, parecer a un mensaje encriptado. Pero estudindolas, el trabajo con los operadores resulta sumamente fcil. Descubriremos en el captulo Controlar los scripts con las estructuras de control cmo utilizar estas pruebas en el desarrollo del script. Por el momento, presentamos aqu una lista de diferentes operadores y su significado:

1. Aritmticos
Los operadores aritmticos permiten realizar clculos elementales entre las variables de tipo numrico. Los smbolos +,-,* y / permiten efectuar las operaciones elementales de suma, resta, multiplicacin y divisin. Esta es un tabla que presenta una lista de operadores aritmticos: Operadores + Nombre Ms Funcin Suma los valores situados a la izquierda y la derecha del smbolo. Halla la diferenca entre los valores situados a la izquierda y a la derecha del smbolo. Ejemplo 15+10 Resultado 25

Menos

15-10

Producto o mltiplo Divisin

Efecta la multiplicacin entre los valores situados 15*10 a la izquierda y a la derecha del smbolo. Efecta la divisin del valor situado a la izquierda por el valor a la derecha del smbolo. 15/10

150

1.5

Mdulo

Extrae el valor entero del resultado de la divisin 5%3 en el valor situado a la izquierda y el valor situado a la derecha del smbolo modulo. Permite incrementar un valor, sobre todo en el Variable=1

++

Incremento

Operadores

Nombre

Funcin caso de la utilizacin de un bucle.

Ejemplo Variable++

Resultado

--

Decremento

Permite restar un valor, sobre todo en el caso de la Variable=2 utilizacin de un bucle. Variable-Permite obtener el opuesto. Variable=1 variable= variable

Negacin

-1

Pequea precisin para el mdulo %, que permite recuperar el resultado de la divisin del operando de la izquierda por el de la derecha. Aplicando el smbolo mdulo a una variable, se obtiene el resto de la divisin de la variable por la cifra situada a la derecha del smbolo. Esta es la sintaxis: mdulo=dividendo%divisor. Ejemplo: mostrar el resultado de la aplicacin del mdulo tres en una variable igual a cinco. <script language="javascript"> var mivariable=5; var modulo = mivariable%3; alert("El resultado del mdulo es: " + modulo); </script> Despus de haber aplicado cinco a la variable, sta se reutiliza en el clculo de una variable llamada mdulo. Por ltimo, el resultado se muestra en un cuadro de dilogo por medio del mtodo alert().

Los operadores de incremento y decremento pueden colocarse antes de la utilizacin de la variable, se habla entonces de preincremento o despus de la variable, lo cual se conoce como posincremento. La utilizacin de esos operadores se estudiar con ms detalle cuando se estudien los bucles en el siguiente captulo.

2. Comparacin
Estos operadores permiten comparar variables entre ellas mismas. Operadores < Nombre Menor que Funcin Ejemplo Resultado True

Comprueba si el operando a la izquierda del smbolo 1<2 es ms pequeo que el de la derecha. Devuelve true si es el caso. Comprueba si el operando a la izquierda del smbolo 2<=2 es ms pequeo o igual que el de la derecha.

<=

Menor que o igual

True

Operadores

Nombre

Funcin Devuelve true si es el caso.

Ejemplo Resultado

==

Igual

Comprueba si los valores a la izquierda y a la derecha son idnticos. Comprueba si el operando de la izquierda del smbolo es ms grande que el de la derecha. Devuelve true si es el caso.

2==2

True

>

Major que

2>1

True

>=

Major que o igual

Comprueba si el valor de la izquierda del smbolo es 2>=2 ms grande o igual que el de la derecha. En ese caso devuelve true. Comprueba si el valor de la izquierda del smbolo es 1 !=2 diferente al de la derecha. Devuelve true en ese caso. Comprueba si el operando de la izquierda del 1=== "1 smbolo es igual o del mismo tipo que el situado a la " derecha del operador. Comprueba si el operando de la izquierda es diferente y/o de tipo diferente del situado a la derecha. "1 " !== 1

True

!=

Diferente

True

===

Estrictamente igual

False

!==

Estrictamente diferente

True

No debe confundirse el operador de comparacin == con el operador de asignacin =, este ltimo sirve para asignar un valor a la variable situada a la izquierda del smbolo. Ejemplo: mostrar el valor correspondiente a la respuesta true o false del JavaScript despus de la ejecucin de una comparacin. <script language="javascript"> var respuesta=5>12; alert("El resultado del test es: " + respuesta); </script> El script se limita a una comparacin 5>12 cuya respuesta es enviada en una variable llamada respuesta cuyo contenido se mostrar para conocer el resultado del test. El resultado de esta comparacin se expresa de forma booleana (es decir true o false).

Es posible utilizar el mismo script modificando el operador de comparacin para aprender su modo de funcionamiento y visualizar el resultado enviado. Por ejemplo con el operador != (diferente), el resultado es true.

<script language="javascript"> var respuesta=5 !=12; alert("El resultado del valor es: " + respuesta); </script>

3. Lgicos
Se conocen tambin como operadores booleanos. Utilizados en diferentes comparacines, devuelven un valor true o false en funcin de si se respetan la o las condiciones. Los operadores && y || se conocen como binarios, mientras que el operador ! es unitario. Operadores Nombre && Y Rol Permite concatenar varias condiciones para una comparacin. Devuelve true si se renen las dos condiciones. Verifica que una u otra de las condiciones se cumple. Enva true si es el caso. Verifica que la condicin de la comparacin no ha sido respetada. Enva true si es el caso. Ejemplo 5 es superior a 4 e inferior a 6 Resultado True

||

5 es superior a 4 o inferior a 3 5 es superior a 6

True

No

True

Ejemplo 1: mostrar el resultado de una comparacin doble (5<12 y 5<3 ) donde las dos condiciones deben ser respetadas.

<script language="javascript"> var respuesta=5<12 && 5<3; alert("El resultado de la comparacin es: " + respuesta); </script> La comparacin utiliza el operador lgico && para probar las dos condiciones simultneamente y la respuesta de tipo booleano se muestra inmediatamente (aqu false, evidentemente). Ejemplo 2: mostrar la misma comparacin de ms arriba pero autorizando el respeto de slo una u otra de las condiciones. <script language="javascript"> var repuesta=5<12 || 5<3; alert("El resultado de la comparacin es: " + respuesta); </script>

La misma estructura precedente, slo el operador cambia y permite entonces respetar una sola condicin para devolver true. Este es el caso aqu (5 es inferior a 12 pero no es inferior a 3) y sin embargo devuelve el valor true.

4. Asociativos
Se trata del operador de asignacin igual que permite dar un valor a una variable (lo que est a la derecha del signo igual se asigna a lo que est a la izquierda). Este operador puede tambin combinarse con los operadores de clculo para realizar clculos en el momento de la asignacin. La sintaxis es la siguiente: mivariable+=10 ; Esta instruccin permite sumar directamente diez al contenido de mivariable. Sustituye de manera inteligente la operacin: mivariable=mivariable+10 ; Ejemplo: modificar el contenido de una variable igual a 10 agregando 10 y utilizando dos tcnicas: primero pasando por el operador aritmtico, despus utilizando el operador asociativo. <script language="javascript"> mivariable=10; alert("este es el contenido de mi variable: "+mivariable); mivariable=mivariable+10; alert("este es el contenido de mi variable: "+mivariable); mivariable+=10; alert("este es el contenido de mi variable: "+mivariable); </script> La utilizacin de los dos mtodos simultneamente demuestra muy bien la ventaja del uso del operador asociativo.

5. Concatenacin
Slo hay un operador de concatenacin y es el smbolo +. Permite unir cadenas de caracteres entre ellas. Gracias a l se puede construir una cadena de caracteres compuesta de variables y de un texto escrito en el cdigo del script. Operadores + Nombre Ms Funcin Concatena cadena de caracteres. Ejemplo Ho+la Resultado Hola

El operador de concatenacin se distingue aqu del operador aritmtico a pesar de que el smbolo + es el mismo. Es importante entonces diferenciarlos cuando se habla de ellos identificndolos con los trminos operadores de concatenacin o aritmticos. Ejemplo: mostrar una concatenacin de dos variables correspondientes al nombre del usuario separndolas con un espacio:

<script language="javascript"> var nombre=prompt("Cul es su nombre? :", "indique su nombre aqu"); var apellido=prompt("Cul es su apellido? :", "indique su apellido aqu"); var nombrecompleto=nombre+" "+apellido; alert("Su nombre completo es: "+nombrecompleto); </script> </head> Primero, se trata de preguntarle al usuario su nombre y apellido por medio del mtodo prompt(). Luego se tiene que efectuar la concatenacin de dos cadenas en una nueva variable correspondiente al nombre compIeto, teniendo cuidado siempre de agregar un espacio entre los dos. Para ello, basta con utilizar " " para simbolizarlo. Para terminar, el resultado se muestra en un cuadro de dilogo gracias al mtodo alert(). Adems de estos operadores clsicos, existe un cierto numero de operadores especiales.

6. Los operadores especiales

Son los operadores que no pertenecen a ninguna de las categoras anteriormente citadas y cuyo uso es un poco particular. Operadores delete Nombre Delete Funcin Suprime una variable. Ejemplo delete mivariable Resultado Mivariable ya no existe. Crea una nueva instancia de mivariable. Permite no tener que volver a citar mivariable. Permite citar una vez mivariable para modificar las propiedades.

new

New

Crea un instancia de objeto.

new mivariable

this

This

Permite registrar el objeto actual.

this mivariable

with

With

Permite declarar una sola vez un objeto para poder acceder a varios de sus propiedades y mtodos.

with mivariable

typeof

TypeOf

Permite conocer el tipo de objeto.

typeof mivariable Extrae el tipo de variable de mivariable. void(mivariable) Devuelve undefined.

void

void

Ejecuta una instruccin que no enva ningn valor. Permite aplicar un valor a una

?:

Operador

(mivariable<0)

Devuelve true si el

Operadores

Nombre condicional ternario

Funcin

Ejemplo

Resultado valor de mivariable es inferior a cero, false en otro caso.

?true :false variable segn una comparacin situado a la izquierda de ?. Si el test es verdadero, el valor situado a la izquierda de : es enviado o si no el de la derecha.

El caso del operador condicional ternario ser estudiado con ms detalle en el captulo Controlar los script con las estructuras de control. Ejemplo: mostrar el contenido de una variable antes y despus de la supresin. <script language="javascript"> mivariable="mi variable no est vaca"; alert("El valor de mi variable es: " + mivariable); delete mivariable; alert("El valor de mi variable es: " + mivariable); </script> El script comienza por mostrar la variable por medio del mtodo alert() para en principio verificar su contenido. Luego, el operador especial delete se utiliza para suprimir esta variable. La ltima etapa consiste en solicitar que se muestre la variable inexistente, pero como ya no existe no aparecer y provocar un error.

El funcionamiento del operador delete obliga a no usar la declaracin explicita de las variables a travs de la palabra clave var. Ejemplo: mostrar en la pgina el tipo de las variables usadas en el script.

<script language="javascript"> var numrica=15; var texto="mi variable"; var booleana=false; document.write("La variable numrica es de tipo: "+ typeof numrica +"<BR>"); document.write("La variable texto es de tipo: "+ typeof texto +"<BR>"); document.write("La variable booleana es de tipo: "+ typeof booleana +"<BR>");</script>

El script comienza con la aplicacin de tres variables de diferentes tipos. Luego, el operador typeOfpermite mostrar el tipo de variable en un cuadro de dilogo.

7. Orden de los operadores

En el caso en que se utilicen varios operadores en una expresin, su tratamiento no se realiza necesariamente en el sentido tradicional de la lectura de izquierda a derecha. El sentido del tratamiento depende de un orden definido en el ncleo de JavaScript y corresponde a este cuadro: Cuanto ms elevado es el rango, mayor es la prioridad: Numero de rango Rango 15 Rango 14 Rango 13 Rango 12 Rango 11 Rango10 Rango 9 Rango 8 Rango 7 Rango 6 Rango 5 Rango 4 Rango 3 Rango 2 Rango 1 () [ ]. ! ~ - ++ -*/% +<< >> >>> < <= > >= == != & ^ | && || ?: = += -= <<= >>= &= ^= |= , Smbolo Tipo Llamada de funcin/miembro Negacin/complemento Producto/cociente Adicin/sustraccin Diferencia Comparacin Comparacin Y bit a bit O exclusivo O inclusivo Y lgico O lgico Condicional ternario Asignacin Separador

Ejemplo: mostrar en un cuadro de dilogo el contenido de la adicin de 1 y de 2 multiplicado por 3. <script language="javascript">

resultado=1+2*3; alert("El resultado del clculo es: "+resultado); </script> La regla de la prioridad de los operadores obliga a hacer primero la multiplicacin de 2 por 3, y de agregar luego 1 al resultado obtenido. Ejemplo: modificar el script anterior para permitir realizar la adicin y despus la multiplicacin. <script language="javascript"> resultado=(1+2)*3; alert("El resultado del calculo es: "+resultado); </script> Basta con agregar un parntesis a la expresin 1+2 para cambiar la prioridad de los operadores. Las variables son esenciales parer el desarrollo de un script que puede verse modificado en funcin de sus valores. Son las estructuras de control las que permiten realizar tests e incrementar las variables.

Controlar los script con las estructuras de control

Las instrucciones condicionales
Estas instrucciones permiten orientar el desarrollo del script en funcin de condiciones. Por ejemplo, es posible controlar el contenido de una variable y ejecutar una instruccin si la condicin es respetada (true) o ejecutar otra instruccin si el resultado es falso (false). Estas instrucciones se ubican en el interior de estructuras de control que permiten tratar todos los casos en funcin de la respuesta a la condicin.

1. if
La instruccin if (si, en espaol) permite comprobar generalmente slo dos casos. Para realizar condicionales que impliquen ms casos, es preferible utilizar la instruccin switch que explicaremos ms adelante. El condicional debe ubicarse entre dos parntesis e implica generalmente operadores de comparacin, variables o constantes. Luego de declarar el condicional, se abre llave y se escribe la primera instruccin en la lnea siguiente. La ausencia de un punto y coma despus de esta lnea es una excepcin. Se puede considerar la primera instruccin como un condicional positivo, pero no hay ninguna obligacin para que sea siempre as. El nmero de lneas de instrucciones es ilimitado, cada una de entre ellas se termina por un punto y coma. El primer caso se termina con un llave de cierre en la lnea siguiente. La palabra clave else (si no) se agrega posteriormente sin punto y coma para terminar. Luego se abre otro llave en la lnea siguiente y se define el comienzo de las instrucciones a realizar si el resultado de la prueba es falso. Se pueden agregar igualmente todas la lneas necesarias para

tratar este segundo caso. El script contina su desarrollo normal una vez cerrado la llave. La sintaxis de la estructura de control con la instruccin if es la siguiente: if (condicional) { Lnea 1 de instruccin ; Lnea 2 de instruccin ; } else { Lnea 1 de instruccin ; Lnea 2 de instruccin ; } Ejemplo: mostrar un cuadro de dilogo y probar la respuesta para continuar o no el desarrollo del script.

<script language="javascript"> continuacin=confirm("Desea continuar? "); if (continuacin==true) { alert("Qu bien "); } else { alert("Que lstima"); } </script> El script comienza por mostrar un cuadro de dilogo que pregunta al usuario si desea o no continuar el desarrollo del script. El cuadro recupera la respuesta del usuario en una variable, llamada luego por el mtodo confirm(). El valor enviado corresponde o a true o a false. Si el usuario hace clic enAceptar (true), el script muestra un cuadro de dilogo del tipo alert() para agradecrselo. En caso contrario, es decir, si el usuario hace clic en Cancelar (false en el condicional), el script muestra otro cuadro de dilogo donde se lamenta del abandono.

Observar bien los dos signos igual, un al lado del otro, que permiten efectuar una comparacin y no una asignacin. Igualmente es posible utilizar el operador ternario para efectuar el condicional. El script se transforma entonces en: <script language="javascript">

continuacin=confirm("Desea continuar? "); (continuacin==true)? alert("Qu bien! ") : alert("Qu lstima"); </script> Incluso si al utilizar este operador el resultado del script es equivalente al anterior, estamos de acuerdo en que su interpretacin es mucho ms complicada. Si usted desea efectuar varios condicionales en una variable, es posible anidar los "if". Ejemplo: mostrar dos cuadros de dilogo sucesivamente y probar sus respuestas para continuar o no el desarrollo del script, utilizando if anidados. <script language="javascript"> opinin=confirm("Le gusta JavaScript? "); continuacin=confirm("Desea continuar? "); if (opinin==true) { if (continuacin==true) { alert("Qu bien! "); } else { alert("Qu lstima"); } } else { alert("Qu lstima"); } </script> Retomamos el mismo condicional de antes pero le agregamos una pregunta para saber si el usuario le gusta JavaScript, asignando el valor de esta respuesta a la variable opinin. Si tal es el caso, el usuario recibe un agradecimiento nicamente si ha respondido favorablemente si a las dos preguntas. En el caso contrario, si ha respondido haciendo clic en cancelar para una u otra pregunta, el script muestra el segundo cuadro de dilogo. Puede darse cuenta de la utilidad de la tabulacin en este script con el objetivo de aclarar la presentacin y de encontrar fcilmente las instrucciones que conciernen a la primera y a la segunda instruccin. Se puede imaginar fcilmente la dificultad de lectura de un script compuesto de cinco o seis if imbricados. Aunque correcta, esta tcnica es desaconsejada. Se puede incluso preferir en estos casos el uso de los operadores lgicos y && y O || . Ejemplo: mostrar dos cuadros de dilogo sucesivamente y probar sus respuestas para continuar o no el desarrollo del script con la ayuda de los operadores &&, || y !=. <script language="javascript"> opinin=confirm("Le gusta JavaScript? ");

continuacin=confirm("Desea continuar? "); if (continuacin==true && opinin==true) { alert("Qu bien! "); } else { alert("Qu lstima"); } </script> El mismo script, utilizando el operador o || que permite verificar slo una condicin. <script language="javascript"> opinin=confirm("Le gusta JavaScript? "); continuacin=confirm("Desea continuar? "); if (continuacin==true || opinin==true) { alert("Qu bien! Aunque falta confirmarlo"); } else { alert("Qu lstima"); } </script> Otra variante utilizando el operador lgico No !=, explicado en el captulo Utilizacin de la variables, constantes y operadores. <script language="javascript"> opinin=confirm("Le gusta JavaScript? "); continuacin=confirm("Desea continuar? "); if (continuacin!=false && opinin!=false) { alert("Qu bien! "); } else { alert("Qu lstima"); } </script> La utilizacin de la estructura de control if se utiliza mucho, pero existe otra sintaxis que se sirve del operador condicional ternario.

2. El operador condicional ternario

Para efectuar condicionales, es igualmente posible utilizar el operador condicional ternario. Su sintaxis es la siguiente: (condicional) ? instruccin si verdadero : instruccin si falso ; Incluso si la sintaxis es ms concisa, la relectura no se facilita con esta estructura de control. Por esta razn, su utilizacin es poco frecuente y raramente utilizada en ciertos script. Ejemplo: pedir un valor al usuario y compararlo para saber si es realmente superior o inferior al operador condicional ternario.

<script language="javascript">

var mivar=prompt("Qu valor desea tomar para hacer una prueba con el operador ternario ?"); (mivar<2)? alert("La variable es inferior a 2"):alert("La variable es superior a 2");

</script> En este caso, se aplica un valor a la variable mivar con el mtodo prompt(), luego el script utiliza el operador condicional ternario para compararlo a 2. En el caso de que se cumpla el condicional es la instruccin que figura justo despus del punto de interrogacin la que se ejecuta; en caso contrario, es la instruccin que se encuentra justo despus de los dos puntos.

3. else if
La instruccin else if se utiliza como un complemento de if cuando el nmero de condiciones es superior a dos; se habla entonces de una concatenacin de condiciones. El comienzo es idntico a la primera estructura de control, sin embargo cuando hay que agregar una segunda condicin, se debe utilizar la instruccin else if seguida de la nueva condicin entre parntesis y de la primera llave que se contendr las lneas de instrucciones. As, todas las situaciones posibles son tratadas por eliminacin hasta la ltima. Es necesario terminar con la instruccin else que se refiere en consecuencia a los otros casos que no han sido tratadas anteriormente. La sintaxis de la estructura de control con la instruccin else if es la siguiente: if (condicin) { Lnea 1 de instruccin ; Lnea 2 de instruccin ; } else if (condicin) { Lnea 1 de instruccin ;

Lnea 2 de instruccin ;} } else { Lnea 1 de instruccin ; Lnea 2 de instruccin ; } Ejemplo: mostrar el valor de un descuento obtenido por clculo, en funcin del importe del pedido en el cuadro de dialogo. El descuento ser igual a cero si el importe del pedido no alcanza los 10 000 euros. Ser igual al 5 % del pedido si ste se encuentra entre 10 000 y 25 000 euros y ser igual a 10 % por debajo de ese importe.

<script language="javascript"> pedido= prompt("Cul es el importe de la venta? :", "Indique aqu el importe del pedido"); if (pedido<10000) { alert("El importe de la venta no es suficiente para un descuento"); } else if(pedido<25000) { descuento=pedido*0.05; } else { descuento=pedido*0.1; } alert("El importe del descuento por un pedido de: " + pedido + " euros es de : " + descuento + " euros"); </script> Una vez aplicada la variable pedido, es posible efectuar el condicional sobre ella siguiendo un orden lgico (orden creciente o decreciente), en este caso se seguir una lgica creciente. Para comenzar, es necesario comparar el importe del pedido a 10 000. Si el condicional en negativo, significa que el importe del pedido no es suficientemente elevado para obtener un descuento. El cuadro de dilogo permite precisarlo. El segundo caso de este primer condicional permite indicar si el importe del pedido es superior a 10 000 y a 25 000? Para saberlo, hay que agregar un nuevo condicional despus de else if. Si el pedido es inferior a 25 000, es necesario calcular el importe de la reduccin, igual al 5 % del pedido. En el otro caso, el importe del pedido es lgicamente superior a 25 000 y no es necesario agregar otro condicional para

saberlo. El importe de la reduccin puede calcularse entonces y mostrarse en el cuadro de dilogo. Cuando son muchos, los if anidados se hacen difciles de mantener. Es muy fcil cometer un error de alneacin de las llaves y complicar de esta manera la lectura. En ese tipo de casos, siempre cabe la posibilidad de utilizar otra estructura de control. Se trata de la instruccin switch.

4. switch
Igual que la estructura compuesta de if y else if; la instruccin switch permite controlar varios casos. Su utilizacin puede resultar ms fcil que una concatenacin de if con sus respectivas llaves de difcil lectura. Desgraciadamente, la utilizacin de los operadores de comparacin menor que, major que, etc. no est autorizada en la instruccin switch. Por ello, su utilidad puede verse limitada. Una estructura de control con switch comienza seguida de la variable que debe comprobarse entre dos parntesis. El final de la lnea no debe tener punto y coma. En la lnea siguiente, se debe abrir un parntesis y luego para cada valor posible de la variable se debe indicar la palabra clave caseseguida del valor de la variable y de dos puntos. La(s) lneas siguiente(s) corresponden a las instrucciones que desen llevarse a cabo en cada caso. Para terminar el tratamiento de cada caso, es necesario utilizar la palabra clave break que permite abandonar la estructura de control. La estructura de control se termina con una llave. La sintaxis de la estructura de control con la instruccin switch es la siguiente: switch (variable de condicional) { case " primer caso " : instrucciones break ; case " segundo caso " : instrucciones break ; } Ejemplo: mostrar una respuesta segn la pregunta planteada con tres posibles respuestas: "JavaScript es un lenguaje : A.No tipado B.Poco tipado C.Tipado".

<script language="javascript"> respuesta=prompt("JavaScript es un lenguaje: A.No tipado B.Poco tipado

C.Tipado", "Indique la letra que corresponde a su respuesta"); switch (respuesta) { case "A": alert("Negativo, vuelva a intentarlo");

break; case "B": alert("Bravo! Es correcto"); break; case "C": alert("No es exacto, vuelva a intentarlo"); break; } </script> Primero, se debe asignar la variable respuesta a la respuesta del usuario. Seguidamente, es necesario comenzar la estructura de control basndose en la variable respuesta. Por cada caso, es necesario indicar una respuesta diferente para mostrar.

Se debe verificar la presencia de break; es un tipo de olvido que no seala el navegador y se corre el riesgo de perder mucho tiempo buscando el error. Este script sobrentiende que se respetarn las posibilidades de respuesta (A, B o C). Pero qu pasa si el usuario escoge escribir otro tipo de respuesta? El script se interrumpe brutalmente sin dar respuesta alguna. Lo mejor es utilizar la palabra clave default que corresponde a todos los casos que no han sido tratados anteriormente. Esta palabra clave debe ser agregada al final del script seguida de break igualmente. El script resultante es el siguiente: <script language="javascript"> respuesta=prompt("JavaScript es un lenguaje: A.No tipado B.Poco tipado

C.Tipado", "Indique la letra que corresponde a su respuesta"); switch (respuesta) { case "A": alert("Negativo, vuelva a intentarlo"); break; case "B": alert("Bravo! Es correcto"); break; case "C": alert("No es exacto, vuelva a intentarlo"); break; default: alert("Su respuesta no corresponde a las propuestas"); break; }

</script> De esta manera, en el caso en que el usuario no escribiera una de las propuestas de respuesta (A, B o C), es el cuadro de dilogo situado despus de default el que se muestra. En el caso de que un mismo condicional deba asignarse a varios elementos, es posible integrar el condicional en una estructura de bucle.

Las instrucciones de repeticin (bucles)

Los bucles permiten recorrer bloques de instrucciones varias veces, se conocen tambin como instrucciones de iteracin. En JavaScript, existen dos tipos, los bucles con for y los bucles con while.

1. for
Necesita la utilizacin de un valor inicial de contador, de un condicional y de un factor de progresin. El valor que ha de alcanzar el contador debe ser conocido. La sintaxis de esta instruccin de repeticin es la siguiente: for (valor inicial del contador ; condicional de repeticin ; factor de progrecin){ instrucciones que se desean repetir } Ejemplo: mostrar diez veces en una pgina el resultado de una bucle compuesta de una variable post-incrementada.

<script language="javascript"> for (contador=0; contador<10;contador++) { document.write("el valor del contador es: " + contador+"<BR>");} </script> Para empezar, es necesario configurar la estructura de bucle precisando el valor de comienzo del contador, el valor final y el operador de incremento. Luego, basta con insertar en el bucle, el cuadro de dilogo que se mostrar con una cadena de caracteres y el contador mismo. Su visualizacin permite seguir el incremento del contador en cada pgina. En este caso, el cuadro de dilogo se mostrar diez veces, puesto que el contador comienza en cero y se detiene en 9, siendo la condicin de contador <10, lo cual le impide ir ms lejos.

Es posible obtener el mismo resultado (10 visualizaciones) modificando el valor de inicio de la variable y el valor lmite a alcanzar en el condicional (por ejemplo, escoger 1 para la inicio y el contador <11 para el valor condicional).

2. forin
Este tipo de bucle est destinado a manipular un objeto y se utiliza con la siguiente sintaxis: for (var nombrepropriedad in nombredelobjeto) { instrucciones ; } Ejemplo: mostrar en la pgina la lista de propiedades del objeto document:

<script language="javascript"> document.write("Estas son las propiedades del objeto document: "+"<BR>"); for (var propiedad in document) { document.write(propiedad+"<BR>"); } </script>

Algunas propiedades quedan escondidas por JavaScript y no podrn en consecuencia ser enumeradas por el script. El salto de lnea "\r" no funciona con Firefox/Mozilla.

3. while / do while
Los bucles con while permiten ejecutar un bloque de instrucciones siempre y cuando una instruccin sea verdadera. Con while, las instrucciones que figuran entre las llaves sern ejecutadas si y slo si el condicional se verifica. Cuando el resultado del condicional toma un valor false, el bucle se interrumpe y el desarrollo del script contina. La sintaxis de la estructura de control con la instruccin while es la siguiente: while (condicional) { instrucciones a repetir } do while permite igualmente la repeticin de instrucciones con la diferencia de que el condicional se ubica despus del bloque de instrucciones en vez de precederlo: do { instrucciones a repetir } while (condicional); Ejemplo: mostrar un cuadro de dilogo pidiendo la introduccin de un nmero cuyo valor debe ser positivo. Mientras se escriba un valor negativo o nulo, el cuadro de dilogo continua.

<script language="javascript"> respuesta=-1; while (respuesta<0) { respuesta=prompt("Indique un valor positivo", "Indique su valor"); } alert(" Gracias por haber indicado un valor positivo ") ; </script> La particularidad de este script reside en el hecho de que la variable respuesta que sirve de condicional debe ser menor que cero antes de pasar por la instruccin; de esta manera, el cuadro aparece desde que se carga la pgina. Esta es la razn por la cual el script asigna -1 a la variable respuesta desde el comienzo. Cuando pasa por primera vez por la instruccin while, el condicional se respeta y el cuadro aparece. Luego, el valor de la respuesta deber ser major que 0 para salir de la estructura de control. Si el valor -1 no se aplica a la variable respuesta, esta seria null y equivaldra a cero con lo cual no respetara el condicional. En ese caso, el cuadro no aparecera.

Interrumpir y abandonar los bucles

1. break
Como ya hemos visto en la estructura de control switch, break permite abandonar los bucles prematuramente. La instruccin break puede tambin devolver el desarrollo del script hacia una etiqueta, es decir una posicin identificada con un nombre y seguida de dos puntos. La instruccin break slo puede ser usada en el interior de bucles anidados con for o switch. El nombre de la etiqueta debe seguir las mismas reglas que los nombres de las variables (sin espacio, el nombre de la etiqueta debe comenzar siempre por una letra). La etiqueta debe colocarse antes de la instruccin break y debe estar seguida de un doble punto. Ejemplo: mostrar en un cuadro de dialogo el valor de los contadores i y j hasta que j sea igual a tres.

<script language="javascript"> bucle: for (i=0;i<10;i++) { alert("El valor de i es igual a: "+i); for (j=0;j<10;j++) { alert("El valor de j es igual a: "+j); if (j==3) {

break bucle; } } } </script> En este caso, el primer bucle indica el valor de i y luego el valor de j. Este aparece varias veces antes de que el condicional se verifique. En este momento la instruccin break bucle, enva el script a la etiqueta bucle fuera, lgicamente, del bucle correspondiente a j y a i. Luego el script retorna su curso despus del final del bucle ms grande (en este caso, el que corresponde a i). Existe tambin una instruccin que, al contrario que a la instruccin break, permite seguir el desarrollo de un script.

2. continue
La instruccin continue permite no tener en cuenta ciertos valores que seran falsos en el condicional, asegurando as la continuidad del bucle. Ejemplo: mostrar el valor del contador de un bucle de 0 a 4 salvo el valor 3: <script language="javascript"> for (j=0;j<5;j++) { if (j==3) { continue; } alert("El valor de j es igual a: "+j); } </script> El script muestra el mensaje de visualizacin de la variable j que se incrementa cada vez que pasa el bucle. Cuando una variable j es igual a 3, la instruccin continue salta la instruccin de mostrar el cuadro de dilogo. De esta manera, el valor 3 no se muestra pero el script contina su desarrollo y muestra los valores restantes.

La gestin de las excepciones

JavaScript da varias instrucciones o estructuras de control que permiten controlar los errores enviados por el navegador cuando se ejecuta el script.

1. La estructura trycatch
Esta estructura permite ejecutar las instrucciones que se encuentran entre las llaves y que corresponden a la palabra clave try (el bloque de prueba). En el caso de que un error sea detectado por el navegador, las instrucciones situadas entre las llaves correspondientes a la palabra clavecatch() se ejecutan. La sintaxis de la estructura es la siguiente:

try { Instrucciones ; } catch(identificador){ Instrucciones ; } Ejemplo: mostrar un mensaje indicando la imposibilidad de efectuar una divisin para la cual no se ha declarado ninguna variable que corresponda al divisor.

<script language="javascript"> dividendo=10; try { resultado=dividendo/divisor; } catch(exception){ alert("Divisin imposible"); } </script> En este script, el resultado de la operacin dividendo/divisor genera un error, puesto que se trata de una divisin por un divisor indefinido (divisin por cero). El bloque de instruccin try permite capturar este error y orientar el desarrollo del script hacia el bloque de instrucciones catch, permitiendo de esta manera que muestre un cuadro de dilogo.

2. La estructura tryfinally
Es posible agregar un bloque final en el caso de que no se detecte ninguna excepcin no se detecta. En este caso, es necesario incluir las instrucciones que deben efectuarse en un bloque delimitado por la palabra clave finally. try { Instrucciones ; } catch(identificador){ Instrucciones ; } finally { Instrucciones ; }

El script se transforma entonces en:

<script language="javascript"> dividendo=10; try { resultado=dividendo/divisor; } catch(divisor){ alert("Divisin Imposible"); } finally{ divisor=2; resultado=dividendo/divisor; alert("El resultado de la divisin es "+resultado); } </script> En este script, el error se detecta y la visualizacin del mensaje se efecta por el bloque correspondiente a catch. Pero el bloque de instrucciones finally permite asignar el valor 2 a la variable divisor, lo cual permite a pesar de todo ejecutar el script. Es posible anidar los try con el objetivo de permitir intentos con los diferentes valores y as probar un script en todas sus formas.

Funciones y eventos
Papel de las funciones
Las funciones forman parte de los elementos fundamentales de JavaScript, junto con los mtodos que ya hemos mencionado. La nocin de funcin es bastante aproximada a la de mtodo, puesto que ambos son procedimientos que efectan un accin especfica. La diferencia reside en el hecho de que los mtodos se aplican a un objeto particular mientras que las funciones estn totalmente desvinculadas de esta nocin. Existen dos tipos de funcin, las predefinidas, es decir aquellas integradas en JavaScript, y las definidas por el programador. En cuanto a las primeras, basta con emplearlas en el momento deseado sin tener que declararlas previamente. Respecto a las segundas, es necesario declararlas obligatoriamente antes de poder utilizarlas ms tarde en el script. Las funciones predefinidas se asemejan a los mtodos pertenecientes al objeto. La siguiente tabla permite identificar algunas funciones tiles: Funciones predefinidas escape() Accin

Enva una cadena de caracteres que sustituye con su codificacin ASCII, la cadena presente entre los parntesis. Ejecuta el cdigo JavaScript que se encuentra entre los parntesis. Comprueba el valor ubicado entre los parntesis para saber si corresponde o no a un nmero finito. En JavaScript un nmero se define como finito cuando su valor es superior a 1.7976931348623157E+10308 o inferior a 1.7976931348623157E+10308. Comprueba el valor entre los parntesis para saber si no es numrico. Devuelve true si la prueba es cierta y false en el caso contrario. Devuelve el resultado de una conversin en cifras de la variable ubicada entre los parntesis. Devuelve el resultado de una conversin en texto de la variable ubicada entre los parntesis.

eval() isFinite()

isNaN()

Number()

String()

Ejemplo: mostrar el resultado de una conversin en cifras de una variable texto:

<script language="javascript"> resultado=Number("4")+3 ; alert("Este el total del resultado convertido en cifra: "+resultado); </script> Desde el comienzo de este libro, los scripts se insertan en la pgina y se ejecutan cuando se cargan en memoria. Incluso si esto es suficiente para verificar de momento su funcionamiento, deja poca libertad en su utilizacin a pesar de que los scripts se ejecutan normalmente en el momento de cargarse la pgina. Con las funciones, es posible ejecutar el script en un momento preciso, correspondiente a un evento bien determinado como un clic en un botn, por ejemplo. El navegador leer la funcin, pero la ejecutar slo cuando se haga clic en el botn. Este es lo que se llama programacin basada en eventos. Ahora es fcil ahora comprender que el concepto de funcin es fundamental para la programacin orientada a objetos en JavaScript y que presenta dos ventajas: 1. Agrupar instrucciones en bloques con nombre, igual que los subprogramas o mdulos. 2. La ejecucin de esos bloques de instrucciones, en momentos precisos, gracias a la programacin basada en eventos.

1. La declaracin de las funciones

Para declarar una funcin, es necesario utilizar la palabra clave function() seguida del nombre que usted desea atribuirle, parntesis, una llave { que indica el comienzo del bloque de instrucciones y otra } que delimita el fin de la funcin. Ejemplo: Funcin MiFuncion(argumento1, argumento2) { Instruccin1 Instruccin2 } Cuidado, las reglas de denominacin de las funciones siguen las mismas reglas que las de las variables, es decir:

El nombre debe comenzar por una letra. El nombre puede estar compuesto de letras, cifras y de los signos _ y & pero no se
deben utilizar caracteres especiales, reservados o espacios.

Los parntesis ubicados al final del nombre de la funcin permiten pasar argumentos
(variables). Incluso si no se transmite ningn argumento en la funcin, la presencia de los parntesis es indispensable. No lo olvide. Los parntesis permiten pasar argumentos. Estos argumentos corresponden a un nombre y no estn tipados. Si hay varios, hay que separarlos con una coma. Si no hay, es necesario agregar los parntesis de todas formas si no se quiere generar un error. Cuidado, no se debe olvidar tampoco la llave que cierra. Recuerde tambin que JavaScript distingue entre que MiFuncion no tiene nada que ver con mifuncion. maysculas y minsculas y

No existe lmite respecto al nmero de funciones, no puede haber ms de 255 argumentos (lo cual ya es bastante). Las llaves permiten diferenciar el comienzo del final de la funcin. Para terminar, es mejor que dos funciones no tengan el mismo nombre. Si a pesar de todo se da el caso, JavaScript tiene en cuenta la ltima e ignora las otras del mismo nombre. Este es el cdigo de una funcin JavaScript que permite mostrar un mensaje: <html> <head> <title>Funciones</title> <script language="javascript"> function MiFuncion() { alert("Esta es mi primera funcin") } </script> </head> Pero una funcin de este tipo no puede funcionar correctamente si no es llamada cuando sucede un evento en particular. Es necesario entonces asociar a esta funcin un evento desencadenador. Una vez declarada la funcin y creada, es posible utilizarla Ilamndola y proporcionndole los argumentos necesarios. Ejemplo: crear una funcin que permita calcular el nivel de alcoholemia medio de un hombre de 80 kg que ha bebido dos vasos de vino.

<script language="javascript"> function nivelalcohol (peso,alcohol) { coeff=0.7; resultado=alcohol/preso*coeff; return resultado; } peso=80; alcohol =2*10; document.write("El nivel de alcoholemia para un hombre que ha bebido dos vasos de vino es: "+nivelalcohol(peso,alcohol )+"aproximadamente"); </script> Aqu, la funcin calcula el resultado en funcin de los argumentos que sern transmitidos (aqu el peso y la cantidad de alcohol en gramos). El resultado ser devuelto gracias a la instruccin returnque delimita la funcin. La continuacin del script provee los valores que

sirven de elementos de clculo e invoca la funcin pasndole el valor de los argumentos. El mtodo document.write()permite mostrar luego en la pgina el resultado enviado por la funcin.

2. Utilizar varias funciones y transmitir datos entre ellas

Una de las particularidades de las funciones concierne al uso de las variables. Si una variable se declara fuera de una funcin, se encuentra disponible para el resto del script. En ese caso se denominan variables globales. Sin embargo, cuando las variables se declaran en el interior de una funcin (se denominan entonces variables locales) no se encuentran accesibles para las otras funciones. As, en el siguiente cdigo, la variable variable1 no est disponible y no se podr visualizar. <html> <head> <title>Las funciones</title> <script language="javascript"> function primerafuncion() { var variable1="Esta es mi primera variable"; } function mostrar() { alert(variable1); }</script> </head> <body> <input type="button" name="Submit" value="Mostrar" onClick="mostrar()"> </body> </html> Sin embargo, es posible transferir valores entre dos funciones de manera relativamente simple. Basta con invocar a la segunda funcin a partir de la primera, identificando la variable que transita entre las dos. Ejemplo: transferir variables de respuesta de una funcin a otra: Nos gustara, por ejemplo, crear una primera funcin destinada a mostrar un cuadro de dilogo y recuperar la respuesta del usuario despus de haber hecho clic sobre alguno de los dos botones del cuadro.

Esta respuesta ser inmediatamente transferida a otra funcin cuya tarea ser mostrar un cuadro de dilogo precisando que la segunda funcin est activada y mostrando el resultado de la primera funcin.

<script language="javascript"> function plantea_pregunta() { var respuesta =confirm("Desea continuar?"); test_respuesta (respuesta) } function test_respuesta (respuesta) { alert("Estamos en la funcin test_respuesta"); alert("La respuesta escrita en la funcin plantea_pregunta es: "+ respuesta); } </script> De esta manera, la expresin test_respuesta(respuesta) permite transmitir datos de una funcin a otra por medio de la llamada de una segunda funcin (test_respuesta) donde esta ltima recupera la respuesta dada en el argumento. Luego, la expresin de la Declaracin funcin test_respuesta (respuesta) permite a la funcin test_respuesta recibir como argumento la variable respuesta que le servir para abrir el cuadro de dilogo.

3. La instruccin return
Esta expresin permite devolver el resultado de una funcin. Si la funcin no tiene nada que enviar, se devolver el valor undefined. Ejemplo: mostrar en un cuadro de dilogo el resultado de una adicin cuyo clculo se realiza en una funcin llamada total.

<script language="javascript"> function total(cifra1,cifra2) { adicin=cifra1+cifra2; return adicin; } var cifra1=10; var cifra2=20; alert("El resultado de la adicin de la funcin total es: "+total(cifra1,cifra2));

</script> Una funcin puede igualmente aplicarse a una variable. Para ello, slo es necesario declarar la variable y asignarle la funcin a travs del signo igual. Ejemplo: crear una variable llamada total que corresponda a una funcin compuesta de dos parmetros (cifra 1 y cifra 2, respectivamente igual a 10 y a 20).

<script language="javascript"> var total = function(cifra1,cifra2) { adicin=cifra1+cifra2; return adicin; } alert(" El resultado de la adicin de la funcin total es: "+ total(10,20)); </script>

4. Las clausuras
Una de las particularidades de JavaScript es la de ser un lenguaje que soporta las clausuras. Este anglicismo significa que una funcin A puede comportar una funcin B, la cual hace referencia al mismo tiempo a la funcin A. Ejemplo: mostrar el resultado de la adicin que toma el valor de dos variables originarias de funciones diferentes.

<script language="javascript"> function externa(parmetro) { var variable1 = parmetro; function interna() { var variable2=10; resultado=variable1+variable2; alert("La adicin de dos variables que vienen de dos funciones diferentes es: "+resultado);

} return interna; } var muestra= externa(1); muestra();

</script> El script se divide en dos funciones diferentes. La primera funcin conocida como externa dispone de un parmetro (en este ejemplo, igual a 1) transmitido por la instruccin var muestra=externa(1);. Este parmetro es posteriormente transmitido a la interna que sigue tiene por objetivo enviar y mostrar la funcin padre llamada externa y de la variable2 proceso finalmente se efecta cuando se invoca la llamada a la funcin externa(). variable llamada variable1. La funcin el resultado de la variable1 producto de definida en su interior. El conjunto del variable que no es otra cosa que una

Sin embargo, cuidado, las clausuras pueden provocar fugas de memoria perjudiciales para el desarrollo de los scripts, ralentizando o incluso bloqueando el navegador.

5. Fuga de memoria
Una fuga de memoria corresponde a una sobre utilizacin de las capacidades de memoria del ordenador. En general, es involuntaria y es consecuencia del hecho de que el navegador no libera la memoria que ya no necesita. Esta cuestin es mucho ms importante con la web2.0 y la utilizacin de AJAX. En efecto, en la utilizacin clsica, es decir sin AJAX, la pginas se suceden y elgarbagecollector de JavaScript (recolector de basura en espaol) efecta un trabajo de liberacin de la memoria de los objetos que ya no se utilizarn. Con AJAX, los datos que componen la pgina pueden multiplicarse, puesto que no hay forzosamente cambio de pgina. Internet Explorer est directamente relacionado con este problema porque utiliza su propio garbage collector que puede entrar en conflicto con el de JavaScript. En definitiva, las clausuras constituyen una de las principales causas de fuga de memoria.

6. La palabra clave This

Este palabra clave permite identificar el objeto sobre el cual usted desea trabajar (se habla entonces de instancia del objeto).

Utilizar una funcin para crear un objeto

En JavaScript, como en la mayora de los lenguajes orientados a objetos, es posible no limitarse a los objetos nativos de JavaScript y crear sus propios objetos. Hay dos maneras de construir un objeto en JavaScript. Es posible hacerlo directamente, inicializando un objeto o mediante un prototipo. El mtodo de prototipado es el mas comn y el mas simple de utilizar. Para llegar a l, hay que seguir dos etapas sucesivas. Primero, hay que crear una funcin que sirva de constructor al nuevo objeto y de declaracin de las diferentes propiedades. Esto se conoce como un prototipado porque se trata precisamente de construir un prototipo de objeto. Function nombredemiobjeto (propiedad1, propiedad2, propiedad3){ This.propriedad1=valorPropiedad1 ; This.propriedad1=valorPropiedad2 ; This.propriedad1=valorPropiedad3 ;

Usted puede reutilizarlo ms tarde con la palabra clave var y new: var miobjeto=new nombredemibjeto("valor1","valor2","valor3") ; Ejemplo: mostrar en un cuadro de dilogo la informacin de un objeto personal llamado coche y caracterizado por una marca, un modelo y un ao.

<script language="javascript"> function coche(propMarca, propModelo, propAo) { this.marca=propMarca; this.modelo=propModelo; this.ao=propAo; } var micoche=new coche("Peugeot","307","2007"); alert("Estas son las caractersticas de mi objeto coche:" + "\r la marca: " + micoche.marca + "\r el modelo: " + micoche.modelo + "\r el ao: " + micoche.ao); </script> Aqu el objeto coche tiene tres propiedades (propMarca, propModelo, propAo) que corresponden a "Peugeot"; "307"; "2007". Es posible, por lo tanto, crear una instancia del objeto con su valores. Luego, slo queda mostrar el mensaje en un cuadro de dilogo agregando las propiedades del objeto en el sitio deseado. Cuidado con la utilizacin de \r que no funciona en Firefox/Mozilla. Por consiguiente, la informacin aparece en una sola lnea. La funciones y la programacin basada en eventos son muy utilizadas, sobre todo con los formularios que corresponden a las pginas compuestas de campos que dese completar el usuario.

Los eventos
Los eventos se aplican a los objetos presentes en la pagina: los botones, los campos o las barras de desplazamiento de la ventana, pero tambin a la pgina misma. Gracias a los eventos, la pgina hace interactiva. Es posible activar una accin cuando se produce un evento. La sintaxis a seguir corresponde a: evento= "accin a realizar" ; Basta con nombrar el evento (vase la siguiente lista), poner a continuacin el signo igual (=) y definir la accin que debe corresponderle. Objetos concernidos Evento Se produce

Objetos concernidos window window image, window

Evento OnLoad OnUnLoad Onabort

Se produce Cuando se carga el objeto. Cuando se descarga el objeto. Cuando se detiene la carga de la pgina. Cuando se desplaza la ventana. Cuando se redimensiona la ventana. Cuando se desplaza la ventana por el navegador. Cuando se hace clic con el ratn. Con el doble clic del ratn.

window

OnMove

window

OnResize

window

OnScroll

button, checkbox, document, link, radio, reset, select, submit document, link button, document, link

OnClick

OnDbClick

OnMouseDown Cuando se mantiene pulsado el botn izquierdo del ratn. OnMouseUp Cuando se suelta el botn del ratn.

button, document, link

area, layer, link

OnMouseOver Cuando se pasa el ratn sobre uno de los objetos. OnMouseMove Cuando se mueve el ratn. OnMouseOut Cuando el ratn sale de algn objeto Cuando se recibe el cursor en uno de los objetos.

ninguno layer, link

button, checkbox, fileUpload, layer, password, radio, reset, select, submit, text, textArea, window form

OnFocus

OnReset

Cuando se reinicia el formulario. Cuando se detiene la descarga de la pgina.

image

abort

Objetos concernidos document, image, link, textArea

Evento Keydown

Se produce Cuando se mantiene pulsada una tecla del teclado. Cuando se pulsa una tecla. Cuando se deja de pulsar una tecla. Cuando termina una operacin de arrastrar y colocar en una pgina. Cuando hay un cambio en alguno de los objetos. Cuando se retira el foco de un elemento. Cuando hay un error sobre uno de los objetos.

document, image, link, textArea document, image, link, textArea

Keypress Keyup

window

Dragdrop

fileUpload, select, submit, text, textArea button, checkbox, fileUpload, layer, password, radio, reset, select, submit image, window

OnChange

Onblur

Onerror

Ejemplo: mostrar un cuadro de dilogo cuando se carga una pgina. <script language="javascript"> window.document.OnLoad=alert("Esta ventana aparece en el momento de cargarse la pgina"); </script> Pero generalmente desencadenamiento de la accin est condicionado por un evento que corresponde a un elemento HTML de la pgina, como un botn o un campo de formulario. Para aplicar una accin a este elemento HTML es necesario:

incluir las acciones en una funcin como ya hemos visto; aplicar un evento (onClick, onChange) a un elemento HTML (elemento presente en la
parte BODY);

activar la funcin (presente en la parte HEAD) colocndola entre comillas.

La sintaxis resultante es la siguiente: <ObjetHTML evento= "mifuncion()" ;/> Si la funcin no espera argumentos, de todas maneras se tiene que dejar los parntesis de apertura y de cierre. Por el contrario, si est a la espera de un argumento, se tiene que incluir dentro de esos parntesis. Evidentemente, para que todo esto funcione correctamente, se tiene que escribir la funcin antes de invocarla.

Ejemplo: partiendo del ejemplo anterior, asociar la visualizacin de un cuadro de dilogo con el clic en un botn.

<html> <head> <title>Las funciones y los eventos</title> <script language="javascript"> function MiFuncion() { alert("Esta es mi primera funcin") } </script> </head> <body> <form id="form1" name="form1" method="post" action="" > <p> <input type="submit" name="Submit" value="Funcionar" onClick="MiFuncion()" /> </p> </form> </body> </html>

Mientras el usuario no haga clic en uno de los botones, la funcin no se ejecutar. Es posible utilizar igualmente los eventos para pasar argumentos a las funciones. Ejemplo: transmitir el valor asignado a un botn pasado como argumento a una funcin permitiendo mostrar el nombre.

<html> <head> <title>Muestra el nombre del botn</title> <script language="javascript"> function mostrar(nombreboton) { alert("Usted ha hecho clic en el botn "+nombreboton); }

</script> </head> <body> <input type="button" name="Botn" value="Nombre" onclick="mostrar(this.value)" /> </body> </html> El botn llamado Botn tiene un valor igual a la cadena de caracteres "Nombre" que es enviada a la funcin mostrar compuesta de un argumento llamado nombreboton. La funcin mostrar() puede mostrar en un cuadro de dilogo el valor devuelto por el botn. La utilizacin de los eventos est, por lo tanto, directamente relacionada con las funciones.

Los formularios
Utilizacin de JavaScript con los formularios
La utilizacin de JavaScript en la creacin de formularios es muy frecuente. Es indispensable controlar la validez de los campos del formulario para detectar las entradas no conformes causantes de errores en el momento de transmitir informacin a una base de datos. Los casos ms comunes son, por ejemplo, la entrada de una direccin de correo electrnico no conforme, o la ausencia de datos en un campo obligatorio. Adems del control de las entradas efectuadas, se puede realizar igualmente clculos entre varios campos numricos de un formulario para determinar, por ejemplo, un subtotal a partir de una cantidad y de un precio unitario. El ltimo ejemplo de en este captulo nos permitir recorrer el conjunto de estas funcionalidades a travs de la realizacin de un formulario de reserva de varios productos, su transmisin y su impresin. Para empezar, examinemos el objeto Form.

El objeto Form
Toda creacin de formulario necesita la inclusin en la pgina HTML de un objeto llamado "Form" que contiene los campos de texto, las listas desplegables y otros controles como los botones de opcin o las casillas de verificacin. El objeto Form es un subobjeto del objeto document en la jerarqua de los objetos de JavaScript. Dispone de propiedades y de mtodos que permiten manipularlo o asignarle acciones especficas (eliminacin del contenido de todos los campos del formulario, envo por correo electrnico de la informacin escrita...). Detallemos algunas propiedades y mtodos tiles para la manipulacin del objeto Form.

1. Propiedades
action Corresponde a la accin que deber ser ejecutada por el formulario (generalmente se trata demailto:). encoding

Define el tipo de codificacin de los datos que se emplearn en el momento de enviar el formulario (por ejemplo, text/plain permite indicar que los datos se enviarn en formato de texto). length Corresponde al nmero de formularios en la pgina. method Corresponde al mtodo de envo del formulario (Get o Post). name Corresponde al nombre del formulario. target Indica la ventana meta de un conjunto de cuadros activa despus del envo del formulario.

2. Mtodos
handlEvent() Permite centralizar el proceso del formulario en un solo manejador (mtodo no reconocido por Internet Explorer). Reset() Borra los contenidos del formulario. Submit() Enva el formulario.

Los elementos de formulario

Los elementos del formulario representan los campos, las casillas, los botones de opcin o las listas desplegables y todo aquello que permite recuperar la informacin insertada o seleccionada. La colocacin del formulario es mucho ms simple si se utiliza una tabla sin cuadricula, esto permite alinear las etiquetas de descripcin en una primera columna y los campos de formulario en una segunda. La tabla misma est integrada en el formulario. Para efectuar los controles, es necesario escribir una funcin JavaScript que se colocar en la parte HEAD de la pgina. Esta funcin es invocada en el momento de hacer clic en el botn del formulario gracias a la instruccin: onClick= "control()". A manera de recordatorio, se presenta aqu una tabla que permite hacer la correspondencia entre las etiquetas HTML y los objetos JavaScript:

Etiqueta TAL <INPUT TYPE ="text"> <TEXTAREA>

Objeto JavaScript text textarea

Descripcin Zona de texto de una sola lnea Zona de texto de mltiples lneas Casilla de verificacin Botn de opcin Zona de seleccin Permite el envo de datos Reinicia el formulario Zona de contrasea Campo oculto Zona de seleccin de un archivo

< INPUT TYPE ="checkbox"> checkbox < INPUT TYPE ="radio"> <SELECT> < INPUT TYPE ="submit"> < INPUT TYPE ="reset"> radio select submit reset

< INPUT TYPE ="password"> password < INPUT TYPE ="hidden"> < INPUT TYPE ="file"> hidden fileUpload

JavaScript permite efectuar controles sobre estos objetos:

1. Manipulacin del campo de texto

Los campos de texto permiten recibir los valores escritos por el usuario y mostrar los resultados (por ejemplo, el resultado de un clculo). El campo de texto es de una sola lnea, lo que no es suficiente para una cadena extensa. En este ltimo caso, es mejor utilizar textarea. Para acceder al valor de un campo de texto de formulario, se tiene que utilizar la sintaxis por puntos. De esta manera, para acceder al valor escrito en el campo1 del formulario Form1 y guardarlo en la variable mi_variable, se tendr que utilizar la siguiente sintaxis:mi_variable=document.Form1.campo1.value donde document es facultativo. Propiedades value defaultValue Mtodos select() blur() Descripcin Corresponde a la informacin escrita en el campo. Corresponde al valor que se muestra por defecto en el campo del texto. Descripcin Muestra el texto donde se encuentra el cursor con inversin de color. Libera el campo de texto del cursor.

Mtodos focus()

Descripcin Posiciona el cursor en el campo de texto.

Ejemplo 1: borrar el contenido de un campo de texto y seleccionar otro, haciendo clic en un tercer campo.

<html> <head> <title>manipulacion_campos_texto</title> <script language="javascript"> function manipcampotexto() { form1.campo1.value=; form1.campo2.select(); } </script> </head> <body> <form id="form1" name="form1" method="" action="" > <table width="400" border="0"> <tr> <td>campo1</td> <td><input name="campo1" type="text" id="campo1" value= "Borrar"></td> </tr> <tr> <td>campo2</td> <td><input type="text" id="campo2" value="Resaltar"></td> </tr> <tr> <td>campo3</td> <td><input name="campo3" type="text" id="campo3" onFocus="manipcampotexto()" value="Hacer clic aqu"></td> </tr> </table>

</form> </body> </html> En un formulario compuesto de tres campos de texto, haciendo clic en el campo 3, se borra el contenido del campo 1 y se resalta el contenido del campo 2. El evento desencadenante de la funcin manipcampotexto() en este caso es el clic en el campo 3, identificado por onFocus. Ejemplo 2: controlar si un campo Text est vaco a travs de una funcin ejecutada al hacer clic en el botn y luego mostrar un mensaje de advertencia en un cuadro de dilogo:

<html> <head> <title>Control campo texto</title> <script language="javascript"> function controlvacio() { if(form1.nombre.value ==) { alert("este campo est vaco"); } else { alert("este campo no est vaco"); } } </script> </head> <body> <form id="form1" name="form1" method="" action="" > <p>&nbsp; <p> <input name="nombre" type="text" id="nombre"> </p> <p> <input type="submit" name="Submit" value="Enviar" onClick="controlvacio()" /> </p> </form> </p>

</body> </html> La funcin controlvacio comienza por un test del valor if(form1.nombre.value ==) de un campo de tipo texto para saber si est vaco. Si es el caso, un cuadro de dilogo se muestra advirtiendo de que el campo es obligatorio; si no, otro cuadro de dilogo aparece confirmando la entrada. La instruccin if(form1.nombre.value ==) permite comprobar el valor del campo de texto y saber si est vaco. En ese caso, se muestra el cuadro de dilogo que indica este estado; si no, otro cuadro de dilogo confirma que el campo no est vaco.

2. Manipulacin del campo textarea

Los campos de tipo textarea son idnticos a los campos de texto, pero son utilizados en los casos en los que la cadena es demasiado larga para una sola linea. Propiedades value defaultValue Valor del elemento. Corresponde al valor que se muestra por defecto en el campo textarea. Descripcin

Ejemplo: concatenar el contenido de tres campos de texto en un campo textarea.

<html> <head> <title>manipulacion_campos_textarea</title> <script language="javascript"> function manipcamptextarea() { form1.Total_campo.value=form1.campo1.value+form1.campo2.value +\n+form1.campo3.value; } </script> </head> <body> <form id="form1" name="form1" method="" action="" > <table width="400" border="0"> <tr> <td>campo1</td> <td><input name="campo1" type="text" id="campo1"></td>

</tr> <tr> <td>campo2</td> <td><input type="text" id="campo2"></td> </tr> <tr> <td>campo3</td> <td><input name="campo3" type="text" id="campo3"></td> </tr> <tr> <td>Total campo </td> <td><textarea name="Total_campo" cols="15" rows="2" id="Total_campo"></textarea></td> </tr> <tr> <td colspan="2"><input type="button" name=" Concatenar " value="Concatenar" onClick="manipcamptextarea()"></td> </tr> </table> </form> </body> </html> La funcin manipcamptextarea() realiza la concatenacin de los dos primeros campos del formulario y luego escribe el valor en el tercero aplicando un salto de lnea entre esas dos partes mediante \n. Se trata aqu de utilizar el operador de concatenacin + para obtener una nueva cadena de texto. La funcin se ejecuta al hacer clic en el botn Concatenar.

3. Controlar las casillas

En cuanto a las casillas de verificacin, es posible saber si estn marcadas o no y orientar en consecuencia el desarrollo del script. Es posible marcar varias respuestas seleccionando varias casillas en una misma pregunta. Propiedades checked Descripcin Valor booleano igual a true cuando la casilla est marcada y false cuando no lo est.

defaultChecked Valor booleano correspondiente a la casilla marcada (es decir, el valor true) al

Propiedades

Descripcin cargar el formulario (es el valor predeterminado).

Ejemplo: comprobar las respuestas, en forma de casillas posibles, de una pregunta y mostrar un cuadro de dilogo. En este ejemplo hay cuatro posibilidades de respuesta: Ninguna de las casillas est marcada. La primera casilla est marcada. La segunda casilla est marcada. Las dos casillas estn marcadas. Para este ltimo caso, se tendr que asociar los dos valores simultneamente en el test gracias al "y lgico" (&&).

<html> <head> <title>Control_casilla</title> <script language="javascript"> function controlcasilla() { if((form1.caminar.checked ==true) && (form1.cp.checked ==true)) alert("Est bien caminar de vez en cuando"); else if(form1.cp.checked ==true) alert("No es bueno para el medio ambiente"); else if(form1.caminar.checked ==true) alert("Caminar es bueno para la salud"); else alert("Responda marcando al menos una casilla"); } </script> </head> <body> <form id="form1" name="form1" method="" action="" > <p>&nbsp; </p>

<table width="643" border="0"> <tr> <td width="633">Qu medio de transporte utiliza normalmente para

ir al trabajo? </tr> <tr>

</td>

<td><input name="caminar" type="checkbox" id="caminar" value="checkbox"> Caminar </td> </tr> <tr> <td><input name="cp" type="checkbox" id="cp" value="checkbox"> Coche personal </td> </tr> </table> <p>&nbsp;</p> <p> <input type="submit" name="Submit" value="Enviar" onClick="controlcasilla()" /> </p> </form> </body> </html> Es necesario aplicar cuatro tests diferentes para tratar las cuatro situaciones posibles. El resultado del test permitir mostrar el cuadro de dilogo correspondiente.

4. Control de los botones de opcin

Los botones de opcin deben tener todos el mismo nombre para as poder identificarlos en funcin de su nmero de indice. As, el primer botn est identificado con 0, el segundo con 1 y el tercero con 2. Cuando se selecciona un botn, todos los dems son deseleccionados; lo cual hace la diferencia entre los botones de opcin y las casillas. Propiedades bsicas checked Descripcin

Valor booleano igual a true cuando el botn est activado y false cuando no lo est.

defaultChecked Valor booleano correspondiente a la casilla marcada (es decir, el valor true) al cargar el formulario (es el valor predeterminado).

Ejemplo: comprobar las respuestas a una pregunta presentadas como tres botones de opcin (radio).

<html> <head> <title>Control_boton_radio</title> <script language="javascript"> function controlbotonradio() { if(form1.conocer_Javascript[0].checked) { alert("Muy bien!"); } if (form1.conocer_Javascript[1].checked) { alert("Puedes progresar ms todava"); } if (form1.conocer_Javascript[2].checked) { alert("Slo es el comienzo"); } } </script> </head> <body> <form id="form1" name="form1" method="" action="" > <p>&nbsp; </p>

<table width="617" border="0"> <tr> <td width="326">Conoce Javascript? </td> <td width="281"><p> <label> <input type="radio" name="conocer_Javascript" value="S"> Si</label> <br> <label> <input type="radio" name="conocer_Javascript" value="Un poco"> Un poco</label> <br> <label> <input type="radio" name="conocer_Javascript" value= "Para nada">

Para nada</label> </p></td> </tr> </table> <p>&nbsp;</p> <p> <input type="submit" name="Submit" value="Enviar" onClick="controlbotonradio()" /> </p> </form> </body> </html> La funcin controlbotonradio() comprueba los botones de opcin, llamados conocer_Javascirpt y seguidos del nmero de indice entre corchetes. En funcin de la propiedad checked, un mensaje se muestra en un cuadro de dilogo.

5. Controlar los valores de seleccin de una lista

El control de los valores de una lista se asemeja al de los valores de las casillas, estando los elementos de la lista identificados tambin con un nmero de indice. El elemento seleccionado est identificado por la instruccin selectedIndex. Propiedades bsicas length selectedIndex Descripcin Corresponde al nmero de valores en la lista. Corresponde a un valor en la lista, identificado por un nmero en el indice. El indice comienza en cero.

defaultSelected Valor predeterminado seleccionado en la lista.

Ejemplo: abrir un cuadro de dilogo que muestre un mensaje diferente en funcin de una seleccin en una lista desplegable.

<html> <head> <title>Control_lista</title> <script language="javascript"> function controlista() { if(form1.Pregunta.selectedIndex ==0)

alert("Es menos"); else if(form1.Pregunta.selectedIndex==1) alert("Es ms"); else { alert("Es la velocidad correcta"); } } </script> </head> <body> <form id="form1" name="form1" method="" action="" > <p>Cul era la velocidad mxima del TGV francs cuando bati el rcord el 3 de abril del 2007 ? </p> <select name="Pregunta" id="Pregunta"> <option>630,1 Km/h</option> <option>477,8 Km/h</option> <option>574,8 Km/h</option> </select> <p>&nbsp;</p> <p> <input type="submit" name="comprobar" value="comprobar" onClick="controlista()" /> </p> </form> </body> </html> El script se ejecuta al hacer clic en el botn comprobar. La funcin controlista comprueba el indice de la seleccin en una lista (estando el primer indice identificado con el cero). En funcin de esta seleccin, el script muestra un cuadro de dilogo.

6. Controlar los valores de una lista de seleccin mltiple

Las listas de seleccin mltiple permiten seleccionar varios valores de la lista utilizando la tecla [Alt] para las selecciones contiguas y la tecla [Ctrl] para las selecciones que no lo son. El script contendr un bucle sobre los elementos de la lista que controlar en cada uno si el valor ha sido seleccionado. Propiedades bsicas Descripcin

Propiedades bsicas length selectedIndex

Descripcin Corresponde al nmero de valores en la lista. Corresponde a un valor en la lista identificado con su nmero en el indice. El indice comienza en cero.

defaultSelected Valor predeterminado seleccionado en la lista.

Ejemplo: mostrar en cuadros de dilogo sucesivos los valores seleccionados en una lista de seleccin mltiple.

<html> <head> <title>manipulacion_lista_multiple</title> <script language="javascript"> function maniplistamultiple() { var ciudad=""; nb=form1.lista_ciudad.length; i=form1.lista_ciudad.selectedIndex; for (i = 0;i<nb;i++){ if(form1.lista_ciudad.options[i].selected){ ciudad=form1.lista_ciudad.options[i].value; alert(ciudad+" ha sido seleccionada"); } } } </script> </head> <body> <form id="form1" name="form1" method="" action="" > <table width="146" border="0"> <tr> <td width="140" height="108"><select name="lista_ciudad" size="5" multiple id="lista_ciudad"> <option value="Madrid">Madrid</option>

<option value="Barcelona">Barcelona</option> <option value="Cdiz">Cdiz</option> <option value="Sevilla">Sevilla</option> <option value="Alicante">Alicante</option> </select> </tr> <tr> <td><input type="button" name="Submit" value="Seleccionar" onClick="maniplistamultiple()"></td> </tr> </table> </form> </body> </html> El script se ejecuta al hacer clic en el botn Seleccionar. La funcin maniplistamultiple() comienza inicializando la variable ciudad. Luego, cuenta el nmero de elementos presentes en la lista y transfiere en una variable llamada i el nmero de ndice del valor seleccionado. Finalmente, un bucle recorre el conjunto de los elementos de la lista para mostrarlos sucesivamente en un cuadro de dilogo. En el caso de que ninguna ciudad sea seleccionada, no aparece nada. </td>

7. El envo de un archivo por formulario

Es un tipo de objeto de formulario que permite enviar un archivo al servidor. Se presenta bajo la forma de un campo, de tipo texto, destinado a recibir la ruta del archivo ubicado en el disco duro. Es posible tambin utilizar el botn Examinar para as tener un control ms visual. Cuidado, este objeto puede ser peligroso, puesto que es posible agregar cualquier tipo de archivo, incluyendo aquellos con contenido malintenconado. Para verificar que no se trata de un archivo peligroso (es decir, todos los archivos que no tienen la extensin gif o jpg, por ejemplo), es preferible asociar una funcin de control. Para efectuar este tipo de control, se tiene que manipular el objeto String. Un ejemplo de este tipo de control se explica en el captulo Los principales objetos de JavaScript en detalle sobre las cadenas de texto.

Validar y enviar un formulario por correo electrnico

Para todo desarrollador de pginas web, los formularios constituyen un elemento esencial para la interactividad con los internautas. Los formularios permiten recoger informacin en una base datos y, en el caso de que no se trabaje con una base de datos, se puede transmitir informacin escrita simplemente por correo electrnico. En este ejemplo, se trata de concebir un formulario de reserva de artculos que podr imprimirse y enviarse a una direccin correo electrnico predeterminada. La informacin no se guardar en una base de tipo MySql, por ejemplo, pero ser enviada por correo electrnico a un destinatario predefinido que podr tratar los datos desde el momento de su recepcin. La creacin del formulario no se trata en este libro, es posible crearlo en HTML o a travs de un editor HTML como Dreamweaver, por ejemplo.

Como anteriormente, la insercin del cdigo JavaScript permitir verificar la presencia de datos en los campos de formulario y de controlar su contenido. El resultado de estos controles permitir enviar mensajes de advertencia o incluso efectuar clculos.

El formulario est compuesto, adems de los elementos ya detallados, de cuatro botones de funciones distintas. El botn Enviar efecta la transmisin de informacin por correo electrnico. Cdigo del botn: <input name="boton_transmitir" type="submit" id="botn_transmitir" value="Enviar"> Este botn de tipo Submit enva del formulario. Cdigo del formulario: <form action="mailto:micorreo electrnico@miservidor.com" method="post" enctype="text/plain" name="Formulario_reserva" El botn Reiniciar permite borrar el contenido de todos los controles del formulario. <input name="boton_reiniciar" type="reset" id="botn_reiniciar " value="Reiniciar"> El botn Imprimir imprime el formulario. function Imprim() { window.print();} El botn Validar permite que se ejecuten diferentes procesos incluidos en la funcin JavaScript de control. El primer proceso concierne al campo Nombre. Para este campo, usted desea convertir la inclusin de datos de minscula en mayscula. Para ello, debe utilizar el mtodo toUpperCase() que permite convertir la cadena de texto. El segundo proceso comprueba el contenido del campo Codigo_Postal. Primero, usted efecta un test que prohbe dejar el campo vaco. Luego, se prueba de nuevo para autorizar slo la inclusin de un campo numrico. En otro caso, como comprueba la escritura de una letra en este campo, se muestra una advertencia en el cuadro de dilogo. Usted deber utilizar IsNaN (Is Not a Number) para realizar el test. El tercer proceso permite validar el campo correo electrnico con la presencia de un arroba en la cadena de caracteres. Para ello se utiliza el mtodo search(@) que enva a una variable la posicin de la arroba en la cadena de caracteres. Si esta posicin es negativa, significa que no hay arroba en la cadena. La direccin entonces no es vlida. Por supuesto, usted puede proceder a realizar otros test, sobre todo para saber si la extensin del nombre de dominio es realista. A pesar de todo, no es posible excluir la escritura de una direccin ficticia del tipo desconocido@sinservidor.com. El cuarto proceso de esta funcin permite mostrar el precio de un artculo a partir de la seleccin en la lista desplegable. Para ello, se utiliza la instruccin switch que permite tratar el

conjunto de los casos de la seleccin de la lista. En funcin de esta seleccin, se muestra el precio en el campo Precio_unitario_P1 o P2 correspondiente cada uno a la seleccin de un primer producto o de un segundo. El quinto proceso permite calcular los subtotales P1 o P2 efectuando la multiplicacin del valor de los campos Cantidad y Precio_unitario P1 y P2. El sexto proceso calcula el subtotal sin IVA a travs de la suma de los campos sub_total P1 y sub_total P2, previamente convertidos en nmeros con la instruccin parseInt(). El sptimo proceso calcula los importes con IVA por producto de los subtotales con 1.16 y redondeados con Math.round. El octavo proceso controla si la casilla Reserva ha sido seleccionada. Si no es el caso, aparece un cuadro de dilogo advirtiendo de que esta casilla es obligatoria. El noveno proceso permite imprimir el formulario con la instruccin que figura en la funcin Imprim() la cual se activa al hacer clic en el botn Imprimir del formulario. Para terminar, se transmiten los valores escritos o calculados en los campos del formulario, haciendo clic en el botn Enviar. Conviene notar que la informacin transmitida estar precedida del nombre del campo definido en la creacin del formulario y del signo igual (=). Este es un ejemplo del contenido del correo electrnico recibido una vez que se ha transmitido el formulario:

El botn Reiniciar permite restablecer todos los campos del formulario. La transmisin de un formulario por correo electrnico puede presentar algunos problemas. Es necesario abrir el cliente de correo predeterminado y enviar para terminar el envo.

<script language="JavaScript"> function control() { apellido_minuscula=Formulario_reserva.Apellido.value; apellido_mayuscula=apellido_minuscula.toUpperCase(); Formulario_reserva.Apellido.value=apellido_mayuscula; if(Formulario_reserva.CP.value==) { Formulario_reserva.CP.style.backgroundColor = "FFCC00"; alert("Este campo es obligatorio"); } codigo=Formulario_reserva.CP.value; if(isNaN(codigo)) { alert("Introduzca un cdigo postal vlido"); Formulario_reserva.CP.style.backgroundColor = "FFCC00";

Formulario_reserva.CP.value=; } test_correo electrnico=Formulario_reserva.correo electrnico.value; resultado = test_correo electrnico.search(@); if (resultado<0) { alert("correo electrnico incorrecto"); Formulario_reserva.correo electrnico.style.backgroundColor = "FFCC00"; Formulario_reserva.correo electrnico.value= } var articulo1 = Formulario_reserva.Designacion_P1.value; var articulo2 = Formulario_reserva.Designacion_P2.value; switch (articulo1) { case "Falda": Formulario_reserva.Precio_unitario_P1.value=35; break; case "Pantaln": Formulario_reserva.Precio_unitario_P1.value=50; break; case "Short": Formulario_reserva.Precio_unitario_P1.value=25; break; case "Camiseta": Formulario_reserva.Precio_unitario_P1.value=15; } switch (articulo2) { case "Falda": Formulario_reserva.Precio_unitario_P2.value=35; break; case "Pantaln": Formulario_reserva.Precio_unitario_P2.value=50; break; case "Short": Formulario_reserva.Precio_unitario_P2.value=25; break;

case "Camiseta": Formulario_reserva.Precio_unitario_P2.value=15; } Formulario_reserva.Subtotal_P1.value=Formulario_reserva. Cantidad_P1.value*Formulario_reserva.Precio_unitario_P1.value; Formulario_reserva.Subtotal_P2.value=Formulario_reserva. Cantidad_P2.value*Formulario_reserva.Precio_unitario_P2.value; subtotal_P1=parseInt(Formulario_reserva.Subtotal_P1.value); subtotal_P2=parseInt(Formulario_reserva.Subtotal_P2.value); Total_sin IVA=Subtotal_P1+sub_total_P2; Formulario_reserva.Total_sin IVA.value=Total_sin IVA; Total_con IVA=Total_sin IVA*1.16; Total_con IVA_redondeado=Math.round(Total_con IVA*100)/100; Formulario_reserva.Total_con IVA.value=Total_con IVA_redondeado; if (Formulario_reserva.Reservacion.checked==false) alert("Por favor, valide las condiciones generales de venta"); } </script>

El mtodo round() del objeto Math se estudia en el capitulo Los principales objetos JavaScript en detalle. Para validar las mscaras de entrada, es igualmente posible utilizar el objeto RegExp en una expresin regular, el cual ser estudiado en el captulo Los principales objetos JavaScript en detalle. El formulario es uno de los objetos ms importantes en la composicin de una pgina; sin embargo, hay otros igualmente importantes que conviene estudiar.

Principales objetos JavaScript

Objetos y navegadores
Como ya hemos visto a lo largo de los captulos anteriores, JavaScript es interpretado de manera muy diferente segn los navegadores. En lo ms alto de la jerarqua de los objetos JavaScript, se destaca el objeto navigator que corresponde al navegador utilizado para la lectura de la pgina del objetowindow que corresponde a la ventana.

Los objetos JavaScript

JavaScript ofrece un cierto nmero de objetos definidos nativamente y que son, en consecuencia, manipulables en todo momento. Estos objetos no dependen del navegador en el que se utilizan y sern estudiados con ms precisin al final del captulo.

1. El objeto navigator
El objeto navigator corresponde al navegador utilizado por el usuario de la pgina. Esa informacin resulta primordial cuando se asocia JavaScript y DHTML, debido a que su interpretacin vara mucho de una version del navegador a otra. Evidentemente, la informacin del objeto navigator est en slo lectura, lo cual parece bastante lgico. En la jerarqua de los objetos JavaScript, el objeto navigator esta relacionado con el objeto window. Usted puede en consecuencia acceder a l con las siguientes sintaxis, ambas correctas: window.navigator o simplemente con navigator. Las propiedades del objeto navigator permiten obtener informacin esencial para orientar al usuario optimizando as su visita. De esta manera, el hecho de saber si las cookies estn activadas o no permite notificar al visitante que el sitio no funcionar correctamente sin las cookies activadas. Igualmente, el conocimiento del idioma utilizado por el navegador permitir orientar automticamente al usuario hacia la pgina correspondiente.

a. Las propiedades
Propiedad appCodeName appName appVersion Devuelve el cdigo del navegador. Devuelve el nombre del navegador. Devuelve la versin del navegador. Resultado

Propiedad cookieEnabled cpuClass javaEnabled() mimeTypes platform plugins userAgent userLanguage

Resultado Devuelve true o false para indicar si las cookies estn activadas. Devuelve el tipo de procesador del ordenador en uso. Determina si el navegador es apto para ejecutar los applets Java. Devuelve una matriz de los tipos MIME soportados por el navegador. Devuelve la plataforma sobre la cual el navegador funciona. Devuelve una matriz con los plug-ins instalados en el equipo del navegador. Devuelve la informacin relativa al navegador cliente. Devuelve el idioma utilizado por el navegador.

Ejemplo: mostrar la informacin del navegador en uso gracias a la propiedad userAgent.

<script language="JavaScript"> agent=navigator.userAgent; alert(agent); </script> La informacin que se muestra corresponde al tipo y versin del navegador, a la plataforma utilizada y a la versin del CLR presente en el ordenador. El CLR corresponde a la mquina virtual del framework.NET de Microsoft.

b. Los mtodos
Los mtodos son menos numerosos y menos tiles. Esencialmente, permiten manipular las preferencias del navegador. Mtodo plugins.refresh() preference() savePreferences() Resultado Actualiza la lista de plug-ins instalados en el equipo del navegador. Determina las preferencias del navegador. Guarda las modificaciones aportadas a las preferencias del navegador.

Ejemplo: mostrar en un cuadro de dilogo el nombre del navegador, su versin, el nombre del tipo de plataforma actualmente usada as como la presencia y la activacin de las cookies.

<script language="JavaScript"> navegador=navigator.appName; version=navigator.appVersion; plataforma=navigator.platform; cookie=navigator.cookieEnabled(); if (cookie==true){ alert("Usted utiliza actualmente " +navegador+ " "+version+ "\r como navegador Internet, en una plataforma de tipo: " +plataforma+ " con las cookies activadas" ); } else { alert("Usted utiliza actualmente " +navegador+ " "+version+ "\r como navegador Internet, en una plataforma de tipo: " +plataforma+ " Cuidado! las cookies estn desactivadas" ); } </script> El script comienza con la aplicacin de diferentes variables a travs de la propiedades y mtodos del objeto navigator, sobre todo de la cookieEnabled(), que sirve de valor de comparacin del condicional. Con la comprobacin de cookieEnabled(), el script se orienta hacia uno u otro mensaje.

Abriendo este script con Mozilla Firefox, la respuesta ser Netscape. Ejemplo: mostrar el tipo de navegador y su versin para permitir orientar el script posteriormente.

<html> <head> <title>Verificacin del navegador</title> <script language="JavaScript"> function verifnavegador() { navegador = navigator.appName.substring(0,3); version = navigator.appVersion.substring(0,1);

if (navegador == "Mic"){ alert("Usted utiliza actualmente la versin " +version+" de Internet Explorer"); } else if(navegador=="Net") { alert("Usted utiliza actualmente la versin " +version+" de Firefox "); } else if(navegador=="Ope") { alert("Usted utiliza actualmente la versin " +version+" de Opera "); } } </script> </head> <body onLoad="verifnavegador()"> </center> </body> </html> El script se ejecuta cuando se carga la pgina y utiliza las propiedades del objeto navigator para dar un valor a las variables navegador y versin. El valor corresponde a una lnea de tres caracteres extrada de esas propiedades empleando el mtodo substring() del objeto String que detallaremos posteriormente en este captulo. Slo queda entonces comparar esta cadena de caracteres con el comienzo del nombre de los navegadores (en nuestro caso, Mic para Microsoft Internet Explorer, Net para Firefox Mozilla y Ope para Opera). Un cuadro de dilogo aparece entonces retomando el contenido de las variables.

2. El objeto window
El objeto window (ventana) es el objeto ms alto en la jerarqua de los objetos JavaScript. Es el padre de todos los objetos ubicados en su interior. Este objeto se califica normalmente de implcito, puesto que no es necesario nombrarlo para acceder a los objetos ubicados bajo su jerarqua. Esta simplicidad de utilizacin es, sin embargo, relativa; la razn principal es que no todos los navagadores intrepretan correctamente las propiedades y mtodos de este objeto. A pesar de todo, es un objeto muy utilizado porque posee el mayor nmero de propiedades y mtodos. Por ello, es muy importante describirlo en detalle.

a. Las propiedades
Propiedad closed Resultado Devuelve true si la ventana implicada est cerrada. Reconocido por Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer,

defaultStatus Corresponde al mensaje que se muestra permanentemente en

Propiedad

Resultado la barra de estado situada por debayo de la ventana.

Reconocido por Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Mozilla, Firefox,

document

Corresponde al documento actual.

frames

Corresponde al conjunto de marcos del objeto window.

history

Corresponde al contenido del objetohistory.

innerHeight

Corresponde a la altura utilizable de una ventana.

innerWidth

Corresponde al ancho utilizable de una ventana.

length

Corresponde al nmero total de elementos utilizados en la ventana.

location

Corresponde a la URL de la pgina cargada en la ventana.

locationbar

Corresponde a la barra de direccin del navegador.

menubar

Corresponde a la barra de men del navegador.

name

Corresponde al nombre dado a la ventana.

opener

Corresponde al nombre de la ventana que ha creado una ventana por medio del mtodo Open().

outerHeight

Corresponde a la altura exterior de la pgina en pxeles.

outerWidth

Corresponde al ancho exterior de la pgina en pxeles.

Propiedad

Resultado

Reconocido por Opera.

pageXoffset

Corresponde a la posicin horizontal en pxeles de la ventana.

Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera.

pageYoffset

Corresponde a la posicin vertical en pxeles de la ventana.

parent

Corresponde a la pgina que contiene los marcos de una pgina de marcos.

personalbar

Corresponde a la barra de herramientas personal.

scrollbars

Corresponde a las barras de desplazamiento horizontal y vertical. Corresponde a la ventana actual (window).

self

status

Corresponde al mensaje aleatorio que puede mostrarse cuando Internet Explorer, hay un evento en la barra de estado situada en la parte inferior Mozilla, Firefox, de la ventana. Opera. Corresponde a la barra de herramientas del navegador. Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera.

toolbar

top

Corresponde a la ventana del nivel ms alto en el interior de una pgina de marcos.

window

Corresponde a la ventana actual (self).

b. Los mtodos
Algunos de los mtodos ya han sido tratados en el captulo Utilizacin de constantes, variables y operadores. Para el resto, se trata de mtodos que tienen que ver con la gestin de ventanas (apertura, cierre, posicin, visualizacin, etc.), o a la navegacin de las pginas visitadas. La tabla siguiente ofrece una descripcin del conjunto de mtodos del objeto window: Mtodo alert() Resultado Muestra un cuadro de dilogo compuesto por un mensaje de Reconocido por Internet Explorer, Mozilla, Firefox,

Mtodo

Resultado advertencia y un botnAceptar.

Reconocido por Opera. Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera.

back()

Vuelve a la pgina anterior del historial de pgina visitadas.

blur()

Desactiva la pgina actual.

close()

Cierra la pgina actual.

confirm()

Muestra un cuadro de dilogo compuesto por dos botones: Aceptar y Cancelar.

find()

Efecta una bsqueda de texto en la pgina activa.

focus()

Activa una ventana.

forward()

Avanza una pgina en el historial de pginas visitadas.

home()

Carga la pgina definida como pgina principal en el navegador. Desplaza la ventana activa.

moveTo()

open()

Abre una nueva ventana.

print()

Imprime la pgina activa.

prompt()

Muestra un cuadro de dilogo permitiendo al usuario introducir Internet Explorer, un valor. Mozilla, Firefox, Opera. Modifica el tamao de la ventana activa a partir de la esquina Internet Explorer,

resizeBy()

Mtodo

Resultado inferior derecha en funcin de la cantidad de pxeles indicada.

Reconocido por Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera.

resizeTo()

Modifica el tamao de la ventana activa determinando la posicin de la esquina inferior derecha.

setInterval() Efecta un tratamiento con intervalos regulares.

setTimeOut()

Inicia un minutero.

scrollBy()

Mueve el contenido de una ventana en funcin de una cantidad Internet Explorer, expresada en pxeles. Mozilla, Firefox, Opera. Mueve el contenido de una ventana determinando un nuevo origen para la esquina superior izquierda. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera.

scrollTo()

stop()

Interrumpe la carga de la pgina actual.

Debemos detallar uno de los mtodos del objeto window ms comnmente usados.

c. Mtodo open()
Este mtodo es usado generalmente para crear lo que se conoce como pop-up, es decir, ventanas que se abren automticamente mientras se consulta una pgina. Algunas veces tiles y otras no tanto, estas ventanas pueden ser bloqueadas por un bloqueador de ventanas emergentes, incluido por otro lado en las ltimas versiones de los navegadores. Por ello, no se debe incluir un contenido importante para su sitio web (como un formulario de inscripcin, por ejemplo) en una ventana emergente. Lo mejor es reservar su uso a mensajes de advertencia (hora y fecha de una reunin, por ejemplo) o para datos que se renuevan rpidamente. La sintaxis del mtodo open() es la siguiente: f=window.open("pgina", "nombre", "parmetro1,parmetro2,parmetro3") Donde f es el nombre del objeto representado por la nueva ventana, pgina es la direccin de la pgina por mostrar, nombre es el nombre de la nueva ventana y parmetro 1/2/3... es una serie de parmetros opcionales (posicin, tamao, etc.). Los dos primeros parmetros son obligatorios, los otros son facultativos. Los parmetros se indican en forma de cadena, sin lmite de tamao. Cuidado con ciertos parmetros que no son interpretados por Internet Explorer. Slo los parmetros de posicin y de tamao se expresan numricamente, los otros utilizan los valorestrue o false o yes o no. La tabla siguiente precisa los diferentes parmetros posibles y su reconocimiento por los navegadores.

Parmetros

Funcin

Reconocido por Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Mozilla, Firefox, Opera.

alwaysLowered Crea una nueva ventana bajo las otras.

alwaysRaised

Crea una nueva ventana por encima de todas las dems.

dependent

Crea una nueva ventana dependiente de la primera. En el caso de que se cierre la ventana padre, la ventana hija se cerrar igualmente. Muestra la barra de herramientas personal.

directories

Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox,

focus

Da el foco al teclado. Permite reactivar una ventana que acaba de ser creada.

fullscreen height

Permite mostrar la ventana en pantalla completa. Define en pxeles la altura de la nueva ventana. Debe ser gustituida porinnerHeight en Internet Explorer.

hist

Determina si la URL de la nueva ventana ser guardada en el historial del navegador.

hotkeys

Activa o desactiva ciertos atajos del teclado para la nueva pgina. Determina la altura en pxeles de la nueva ventana (sta debe se superior a 100 pxeles). Determina el ancho de la nueva ventana (sta debe se superior a 100 pxeles). Determina la posicin en abscisa de la nueva ventana.

innerHeight

innerWidth

left

location

Muestra u oculta la barra de direcciones.

menubar

Muestra u oculta la barra de men situada en la parte superior

Parmetros de la ventana. outerHeight

Funcin

Reconocido por Opera. Mozilla, Firefox, Opera. Mozilla, Firefox, Opera.

Determina en pxeles la altura del marco exterior (debe ser superior a 100 pxeles). Determina la anchura del marco exterior (debe ser superior a 100 pxeles).

outerWidth

resizable

Permite la modificacin del tamao de la nueva ventana por el Internet Explorer, usuario. Mozilla, Firefox, Opera. Determina la abscisa de la esquina superior izquierda de la nueva ventana. Determina la posicin en coordenadas de la nueva ventana. Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera.

screenX

screenY

scrollbars

Muestra la barra de desplazamiento.

status

Muestra u oculta la barra de estado situada por debajo de la ventana.

toolbar

Muestra u oculta la barra de iconos situada por debajo de la barra de men.

width

Define en pxeles el ancho de la ventana.

Ejemplo: mostrar y ocultar una nueva ventana a partir de otra.

<html> <head> <title>Objeto Window</title> <script language="javascript"> ventana=window.open("","Nueva","height=100,width=300,menubar=yes, toolbar=yes,resizable=no,scrollbar=no"); </script>

</head> <body onUnload="window.ventana.close()"> <input type="button" name="Submit" value="Nueva" onClick="ventana.focus()"> <input type="button" name="Submit2" value="Ocultar" onClick="ventana.blur()"> </body> </html> El script utiliza los mtodos focus() y blur() del objeto window para mostrar la ventana deseada. De esta manera, desde el comienzo del script, una nueva ventana se muestra con los parmetros de tamao y de visualizacin deseados. La instruccin <body onUnload="window.ventana.close()"> permite cerrar la ventana, si se carga la primera ventana. Luego, los botones Nueva y Ocultar activan la ejecucin de dos funciones que permiten mostrar y ocultar la ventana. Ejemplo: modificar repetidas veces el tamao y la posicin de una ventana. <html> <head> <head> <title>Ventana que modifica el tamao y la posicin</title> <script language="JavaScript" type="text/javascript"> function tamaoposicion(){ window.innerHeight=100; window.innerWidth=200; for(i=0;i<200;i++){ h=4; z=4; self.moveBy(h, z); self.resizeBy(h, z); } } </script> </head> <body> <form name="form1" action=""> <input name="Modificar" type="button" id="Modificar" onClick=tamaoposicion(); value="Modificar"">

</form> </body> </html> En este script se utilizan las propiedades de tamao y de posicin. El script comienza por la definicin del comienzo de la ventana, con las propiedades innerHeight y innerWidth. Luego, se crea un bucle permitiendo redimensionar la ventana y moverla cuatro pxeles ms (la ventana se desplazar entonces del borde superior izquierdo al borde inferior derecho o dar la impresin de vibrar si la ventana ocupa ya todo el espacio de la pantalla). Una vez cerrado el bucle, la ventana se estabiliza. Ejemplo: proponer insertar la pgina activa en favoritos:

<html> <head> <title>Agregar en favoritos</title> <script language="JavaScript"> navegador = navigator.appName.substring(0,3); version = navigator.appVersion.substring(0,1); direccion=window.location; titulo=window.name; function agregarfavoritos() { rep=confirm("Desea agregar esta pgina a los favoritos?"); if (rep==false) { return; } else { if (navegador == "Mic" && version >= 4){ url_sitio=direccion; titulo_sitio = titulo; window.external.AddFavorite(url_sitio, titulo_sitio); } else { alert("Utilice el atajo de teclado Ctrl+D parar agregar este sitio a sus favoritos");

Otros objetos tiles

1. regexp
Este objeto permite manipular las expresiones regulares. Las expresiones regulares estn presentes en la mayora de los lenguajes de programacin (adems, la sintaxis de las expresiones regulares en JavaScript se asemeja mucho a PERL). Permiten efectuar muchos procesos en las cadenas de caracteres, del ms simple al ms elaborado. Con ellas, es posible buscar, remplazar y cortar las cadenas de caracteres. Dominarlas constituye, por lo tanto, una ventaja importante, incluso si su compresin puede resultar un poco tediosa al principio. Conviene precisar, en todo caso, que las expresiones regulares pueden presentar problemas con algunos navegadores como Internet Explorer o Safari, por ejemplo. Esta limitacin no pone en duda su potencia y eficacia. Su principio de funcionamiento consiste en redactar una mscara (pattern en ingls) que se puede aplicar a una cadena de caracteres para filtrarla. Para utilizar la expresiones regulares, se tiene primero que crear un objeto de tipo RegExp, la sintaxis es la siguiente: var miexpresion=new RegExp(motivo, opcin) ; En la cual, motivo representa la mscara de bsqueda y opcin corresponde al conmutador. Puede tomar cuatro valores diferentes en funcin de lo que se quiere hacer (por ejemplo, tener en cuenta las maysculas o minsculas de los caracteres). La siguiente tabla muestra todas las opciones: disponibles: Carcter de opcin g i gi Funcin Ninguna opcin definida. Bsqueda global. No distingue entre maysculas/minsculas. Asocia los valores de i y g.

Otro mtodo de creacin puede igualmente ser empleado siguiendo la sintaxis: Var miexpresion=/motivo/opcion ; Para escribir la mscaras de la expresin regular, adems de los caracteres clsicos, el desarrollador dispone de una serie de caracteres "herramientas", que se pueden clasificar en categoras en funcin de su funcin.

a. Los caracteres en conjunto

Permite, definir un conjunto de caracteres que deber aparecer o no segn sea el caso. Carcter herramienta [xyz] Funcin

Corresponde a un conjunto de caracteres (en este caso xyz) ubicado entre los corchetes. Corresponde a un conjunto de caracteres en minsculas entre x y z. Corresponde a un conjunto de caracteres en maysculas entre X y Z.

[x-z] [X-Z]

Carcter herramienta [0-9] [^xz] \d \D

Funcin

Corresponde a un conjunto de caracteres entre 0 y 9. Excluye los caracteres siguientes ^ (en este caso, x y z). Corresponde a una cifra. Equivalente a [0-9]. Excluye las cifras de 0 a 9. Equivalente a [^0-9].

b. Los caracteres de agrupamiento

Carcter herramienta () Funcin Permite agrupar los caracteres que forman un submotivo.

c. Los caracteres de repeticin

Estos caracteres permiten comprobar el nmero de coincidencias de un carcter. Carcter herramienta * + ? {x} {x,z} x|z Funcin El carcter puede aparecer indefinidamente. El carcter debe aparecer al menos una vez. El carcter debe aparecer cero o una sola vez. El carcter debe aparecer un nmero de veces igual a x. El carcter debe aparecer al menos x veces o como mximo z veces. El carcter puede ser X o Z.

d. Los caracteres de posicionamiento

Carcter herramienta ^ $ \b \B (x) Funcin Precisa el comienzo de la expresin en la cadena de caracteres. Precisa el fin de la expresin en la cadena de caracteres. Precisa el comienzo de una palabra. Precisa el fin de una palabra. Encuentra la cadena de caracteres y retiene su posicin.

Carcter herramienta X( ?=y) X( ?!y)

Funcin Encuentra la cadena nicamente si x est seguido de y. Encuentra la cadena nicamente si x no est seguido de y.

e. El caracter de seleccin
Permite hacer una seleccin en la expresin regular entre varios sub-motivos. Carcter herramienta x|z Funcin El carcter puede ser x o z.

f. Los caracteres especiales

Caracter herramienta . \ \f \n \r \t Funcin Corresponde a cualquier caracter. Indica que el carcter siguiente no es especial. Corresponde a un salto de pgina. Corresponde a un salto de lnea. Corresponde a un retorno de carro. Corresponde a una tabulacin.

g. Las propiedades
Propiedad lastIndex Resultado Indica el ndice a partir del cual la siguiente bsqueda debe efectuarse. Reconocido por Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Mozilla, Firefox, Opera.

source

Corresponde al texto de la mscara.

global

Indica si la bsqueda debe detenerse cuando se encuentra por primera vez un elemento igual a = "g".

ignoreCase Indica si no debe tenerse en cuenta las maysculas/minsculas = "i".

h. Los mtodos
Mtodo Resultado Reconocido por

Mtodo test()

Resultado Devuelve un valor booleano si el test se verifica o no.

Reconocido por Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Mozilla, Firefox, Opera.

exec()

Devuelve la primera coincidencia encontrada en la cadena.

match()

Encuentra los casos de una subcadena de caracteres.

split()

Encuentra los elementos ubicados entre los separadores de una cadena de caracteres.

toSource() Devuelve una declaracin de objeto representando el objeto especficado. toString() Devuelve una cadena de caracteres que corresponde al objeto en cuestin.

Mozilla, Firefox, Opera.

Mozilla, Firefox, Opera.

Este mtodo bastante til permite saber si una cadena de caracteres corresponde a una mscara de la expresin regular. Devuelve true si es el caso y false en el caso contrario. Los motivos se construyen utilizando los caracteres herramientas que hemos vistos anteriormente en funcin del resultado que se desea obtener. Un motivo se escribe de izquierda a derecha como en una frase clsica. Incluso si parece en principio poco claro, un ejemplo de sintaxis de una expresin regular puede ser: "[0-9]{2}[-][a-z]{3}[-][0-9]{4}","gi"

Esta expresin regular permite controlar la validez de una cadena de caracteres representado una fecha en el formato 01-ene-2008. Para utilizar luego un motivo, es necesario construir una variable con la ayuda del objeto RegExp y utilizar los mtodos deseados.

i. Utilizacin de la mtodo test

Este mtodo permite saber si una cadena de caracteres corresponde al motivo. Devuelve true si es el caso y false en el caso contrario. Por ejemplo, para comprobar si un valor introducido en un cuadro de dilogo corresponde a la nueva norma europea de placa de matrcula, la cual esta compuesta de una serie de caracteres formados de tres bloques separados por guiones (dos letras, guin, tres cifras mximo, guin y letras), conviene pasar por tres lneas de instrucciones correspondientes a tres pasos: Declaracin de la variable correspondiente al motivo elaborado a partir del objeto RegExp. Recuperacin de la variable introducida en un cuadro de dilogo. Aplicacin del mtodo test() para verificar la validez de los datos introducidos. La sintaxis de la mscara ser la siguiente:

[A-Z]{2}[-][1-9]{1,3}[-][A-Z]{2} [A-Z]{2} corresponde a dos letras obligatorias. [-] corresponde al guin entre el primer y el segundo bloque de caracteres. [1-9]{1,3} indica que hacen falta entre 1 y 3 cifras comprendidas entre 1 y 9. [-] corresponde al guin entre el segundo y el tercer bloque de caracteres. [A-Z]{2} corresponde a la ltima serie de letras.

<script language="javascript"> var matrcula=new RegExp("[A-Z]{2}[-][1-9]{1,3}[-][A-Z]{2}","g"); var introducirmatrcula=prompt("Introduzca el nmero de la matrcula europea con el formato de 2 letras-3 cifras mximo-2 letras: "); alert(matrcula.test(introducirmatrcula)); </script>

La respuesta se mostrar indicando el valor true o false, en funcin de si el test de la expresin regular se respeta o no. Ejemplo: mostrar un mensaje indicando si el valor introducido en un cuadro de dilogo respeta la mscara de una expresin regular, correspondiente a un nmero de telfono espaol. <script language="javascript"> var telfono=new RegExp("[9]{1}[1-8]{1}[.][0-9]{3}[.][0-9]{2}[.][09]{2}[.][0-9]{2}","g"); var ingresarnumero=prompt("Ingrese un nmero de telfono con el formato 00.000.00.00.00 : "); alert(telefono.test(ingresarnumero)); </script>

j. Utilizacin del mtodo exec()

Devuelve nicamente el primer caso encontrado correspondiente al motivo de la expresin regular en una lista de datos. La sintaxis es la siguiente: variableexpresionregular.exec(listadedatos) ; Ejemplo: mostrar el primer nmero de telfono presente en una agenda respetando la mscara[0]{1}[1-4]{1}[.][0-9]{2}[.][0-9]{2}[.][0-9]{2}[.][0-9]{2} <script language="javascript"> var telefono=new RegExp("[0]{1}[1-4]{1}[.][0-9]{2}[.][0-9]{2}[.][09]{2}[.][0-9]{2}","g");

var agenda=new Array ("03.44.12.230","01.000.01.01.01","01.12.13.14.15"); var resultado = telefono.exec(agenda); alert("El nmero de telfono correspondiente a la mscara es el siguiente "+resultado); </script>

k. Utilizacin del mtodo match()

Permite encontrar todos los casos correspondientes al motivo de una expresin regular en una variable de tipo String. La sintaxis es la siguiente: Variabletexto.match(variableexpresionregular) ; Ejemplo: mostrar en un cuadro de dilogo los nmeros de telfono correspondientes al motivo usado anteriormente:

<script language="javascript"> var telefono=new RegExp("[0]{1}[1-4]{1}[.][0-9]{2}[.][0-9]{2}[.][09]{2}[.][0-9]{2}","g"); var agenda= ("03.44.12.230 01.000.01.01.01 01.12.13.14.15 01.12.13.14.16"); var resultado = agenda.match(telefono); var numelementos=resultado.length; mensaje=numelementos+" nmeros encontrados en la mscara :"; for (i=0;i<numelementos;i++) { var respuesta=resultado[i]; mensaje=mensaje+"\r"+respuesta; } alert(mensaje); </script>

Cuidado: "\r " no funciona con Firefox.

l. Utilizacin del mtodo search()

El mtodo search() se aplica a las expresiones regulares tal como se aplica a las variables de texto. Ejemplo: controlar la presencia de una arroba en un campo de formulario y mostrar un mensaje de advertencia o de conformidad en funcin del resultado.

<html> <head> <title>Objeto RegExp - Mtodo search</title> <script language="javascript"> function controlemail() { var email=document.form1.mimail.value; var resultado=email.search("@"); if (resultado!=false) { alert("El campo email no tiene arroba. Por favor, respete la sintaxis"); } else { alert("Gracias, su direccin de email tiene arroba"); } } </script> </head> <body> <form name="form1" method="post" action=""> <p>&nbsp;</p> <table width="400" border="0"> <tr> <td>E-mail</td> <td><input name="mimail" type="text" id="mimail" value="Introduzca su email personal"></td> </tr> </table> <p> <input type="button" name="Submit" value="Controlar" onClick="controlemail()"> </p> </form> </body> </html>

m. Utilizacin del mtodo replace()

Este mtodo permite encontrar y remplazar un valor por otro segn un motivo definido en la expresin regular. La sintaxis del mtodo replace() es la siguiente: cadenaquesedeberespetar.replace(cadenaqueseremplazara,cadenadecambio) ; Ejemplo: mostrar en la pgina una agenda donde se han sustituido los caracteres barra y los dos puntos por un simple punto como carcter de delimitacin. <script language="javascript"> var telefono=new RegExp("[/:]","g"); var agenda= ("03/44/12/23 01/00/01/01/01 01:12:13:14:15"); var resultado=agenda.replace(telefono,"."); document.write(resultado); </script> En realidad, a pesar de necesitar un poco de prctica, las expresiones regulares se utilizan en muchos scripts donde se debe validar, buscar o modificar una cadena de caracteres.

2. Math
Este objeto permite efectuar clculos complejos. Dispone de un cierto nmero de propiedades y de mtodos.

a. Las propiedades
Propiedad E Resultado Reconocido por

Devuelve la constante de Euler cuyo valor se aproxima a Internet Explorer, Mozilla, Firefox, 2,718. Opera. Devuelve el logaritmo natural de 2. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera.

LN2

LN10

Devuelve el logaritmo natural de 10.

LOG2E

Devuelve el logaritmo de 2.

LOG10E

Devuelve el logaritmo de 10.

PI

Devuelve el valor de Pi, aproximadamente 3.14159.

Ejemplo: mostrar el resultado del clculo de una circunferencia de un crculo a partir de su dimetro.

<script language="javascript"> var diametro=prompt("Cul es el dimetro del crculo?"); var circunferencia =diametro*Math.PI; alert("Esta es la circunferencia: "+circunferencia ); </script>

b. Los mtodos
Mtodo abs() Resultado Extrae el valor positivo absoluto de un nmero pasado como argumento. Calcula el ngulo cuyo argumento representa el coseno. Reconocido por Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera.

acos()

asin()

Calcula el ngulo cuyo argumento representa el seno.

atan()

Calcula el ngulo cuyo argumento representa la tangente.

ceil()

Devuelve un nmero correspondiente al nmero entero superior a Internet Explorer, Mozilla, un valor pasado como argumento. Firefox, Opera. Devuelve un nmero correspondiente al nmero entero inferior a un valor pasado como argumento. Calcula el logaritmo neperiano de un nmero pasado como argumento. Devuelve el nmero ms grande en la serie pasada como argumento. Devuelve el nmero ms pequeo en la serie pasada como argumento. Calcula el resultado de un nmero elevado a una potencia pasada como argumento. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla,

floor()

log()

max()

min()

pow()

random() Devuelve un nmero aleatorio comprendido entre 0 y 1.

Mtodo

Resultado

Reconocido por Firefox, Opera.

round()

Redondea un nmero al nmero entero mas prximo.

Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera.

sqrt()

Calcula la raz al cuadrado de un nmero pasado como argumento. Calcula el seno de un nmero pasado como argumento.

sin()

tan()

Calcula la tangente de un ngulo pasado como argumento.

Ejemplo: crear una aplicacin en JavaScript que permita efectuar sorteos de la lotera nacional (es decir, con seis cifras distintas del 1 al 49 y un nmero complementario). Cuidado, los nmeros slo pueden aparecer una vez.

<html> <head> <title>Objetos Array y Math</title> <script language="JavaScript"> function sorteo6numeros() { var sorteo=new Array(12); var sorteoseleccion=new Array(12); var buensorteo=new Array(); for(i=1;i<12;i++) { bola=Math.ceil(Math.random()*49); sorteo[i]=bola; } sorteoseleccion=sorteo.sort(function(n,m){return n-m}); for(i=1;i<12;i++) { if( sorteoseleccion[i]!=sorteoseleccion[i+1]) { buensorteo[i]=sorteoseleccion[i]; } } buensorteoseleccion=buensorteo.sort(function(n,m){return n-m}); for(i=1;i<7;i++) {

nombrecampo="bola"+i; instruccin="document.form1."+nombrecampo+".value=buensorteoseleccion[i]"; eval(instruccin); } } function fcomplementario(){ numcomp=Math.ceil(Math.random()*49); document.form1.complementario.value=numcomp; } </script> </head> <body> </center> <form name="form1" method="post" action=""> <table width="64%" border="1" align="center"> <tr> <td><div align="center">Bola 1 </div></td> <td><div align="center">Bola 2 </div></td> <td><div align="center">Bola 3 </div></td> <td><div align="center">Bola 4 </div></td> <td><div align="center">Bola 5 </div></td> <td><div align="center">Bola 6 </div></td> </tr> <tr> <td><div align="center"> <input name="bola1" type="text" id="1" size="5" maxlength="5"> </div></td> <td><div align="center"> <input name="bola2" type="text" id="2" size="5" maxlength="5"> </div></td> <td><div align="center"> <input name="bola3" type="text" id="3" size="5" maxlength="5"> </div></td>

<td><div align="center"> <input name="bola4" type="text" id="4" size="5" maxlength="5"> </div></td> <td><div align="center"> <input name="bola5" type="text" id="5" size="5" maxlength="5"> </div></td> <td><div align="center"> <input name="bola6" type="text" id="6" size="5" maxlength="5"> </div></td> </tr> <tr> <td colspan="6"><div align="center"> <input type="button" name="Submit" value="Sorteo 6 nmeros" onClick="sorteo6numeros()"> </div></td> </tr> </table> <p>&nbsp;</p> <table width="13%" border="1" align="center"> <tr> <td><div align="center">Nmero complementario </div></td> </tr> <tr> <td><div align="center"> <input name="complementario" type="text" id="complementario" size="5" maxlength="5"> </div></td> </tr> <tr> <td><div align="center"> <input type="button" name="Submit2" value="Sorteo complementario" onClick="fcomplementario()">

</div></td> </tr> </table> <p>&nbsp;</p> <p>&nbsp;</p> </form> </body> </html> En este script, el sorteo de los seis primeros nmeros y del nmero complementario se hace por separado. Este script presenta varias dificultades. La primera consiste en obtener seis nmeros dentro del lmite establecido (de 1 a 49). La segunda constituye el centro de la funcin puesto que es imposible encontrar dos veces la misma cifra en el mismo sorteo. Es la funcin sorteo6numeros la que inicia el proceso de los seis primeros nmeros de manera simultnea. De esta manera, no es necesario hacer clic dos veces en un botn. Para procesar el sorteo, se tiene que pasar por las matrices. El uso de diferentes mtodos de procesamiento (seleccin, eliminacin) impone la creacin de varias matrices. Son entonces las matrices sorteo, seleccionsorteo y buensorteo las que guardan los datos durante estas diferentes etapas. Las dos primeras disponen de un nmero de elementos determinados (12) puesto que se tienen que efectuar una cantidad de sorteos ms alta que la de los nmeros que saldrn (hay que tener en cuenta la eliminacin de los datos repetidos). En el ejemplo, la cantidad de sorteos a realizar es 12, lo cual parece suficiente, puesto que es muy raro obtener 6 nmeros repetidos. Al final, solo seis nmeros se muestran, los otros (si hay) no aparecen. Es interesante la utilizacin del mtodo random del objeto Math para completar la primera matriz. Recordemos que este mtodo devuelve un nmero entre 0 y 1. De esta manera, para obtener un nmero entre 1 y 49, basta con multiplicarlo por 49. Solo queda el problema de un resultado igual a cero, lo que se solucionar empleando el mtodo ceil que permite extraer el entero superior. As, incluso si el resultado dado por la funcin random() equivale a 0.7365456, por ejemplo, se devuelve uno. La siguiente parte del script permite alimentar la matriz seleccionsorteo compuesta por los nmeros seleccionados. La dificultad consiste en obtener una matriz sin repeticiones. Una vez realizada la seleccin, las repeticiones se encuentran una al lado de otra en la matriz, lo cual facilita su eliminacin. El mtodo sort() se emplea en este caso de manera conjunta con una funcin de comparacin ubicada entre parntesis que permite devolver los elementos numricos seleccionados. Sin esta funcin de comparacin, los elementos sern seleccionados en un orden alfabtico. Realizada la seleccin, basta compararlos uno a uno y transferirlos luego en la matriz llamada buensorteo. Esta ltima matriz puede entonces estar compuesta por elementos con un valor undefined. Seleccionando la matriz, estos elementos se colocan al final y no aparecern. Slo falta mostrar los elementos de la matriz en los campos del formulario. Es posible utilizar dos mtodos para realizar esta accin. El primero consiste en emplear el DOM. Este mtodo se estudiar en detalle en el captulo Mejorar la interactividad con JavaScript y las CSS. El segundo consiste en realizar un bucle y utilizar el contador i para completar la instruccin nombrecampo = "bola"+i; Esta expresin se procesa con el mtodo eval(). De esta manera, la variable texto nombrecampo se compone de la cadena de caracteres "bola" a la que slo hay que agregarle el nmero de contador i. Luego se tiene que construir una instruccin donde se alternan cadenas de caracteres y la variable nombrecampo para que as se ejecute con eval(). La segunda funcin permite procesar el nmero complementario a travs del mismo mtodo.

3. frame
El objeto frame corresponde a los marcos (frames) presentes en una pgina HTML. El objeto framedispone de una propiedad esencial.

a. La propiedad
propiedad length Resultado Corresponde al nmero de marcos presentes en la p&a Reconocido por

Mejorar la interactividad de JavaScript con las CSS

JavaScript y las cookies
Contrariamente a lo que se podra pensar, el objetivo de esta parte del libro no es transmitir informacin culinaria o recetas de cocina. Las cookies (cuya traduccin podra llevar a pensar en eso) son simplemente pequeos archivos dejados por el navegador en el disco duro del visitante. El tamao de estos archivos es muy limitado (inferior a 5 Kb) pero guardan muchos datos que conciernen al visitante, como su identificador (si l quiere) o el objeto de sus anteriores visitas al sitio. Las cookies son percibidas en general negativamente por los usuarios, quienes suelen prohibirlas gracias a las opciones del navegador. La verdad es que cuando se usan con fines deshonestos, las cookies permiten seguir en detalle los pasos del usuario. Sin embargo, las cookies no son virus y no favorecen tampoco su propagacin. JavaScript permite administrarlas fcilmente.

1. Principio y utilizacin de las cookies

Las cookies son pequeos archivos en formato txt (y que contienen slo texto) guardadas en el disco duro, de manera diferente segn el navegador. Con Internet Explorer, las cookies se guardan en el directorio c:\Documents and Settings\usuario\Cookies bajo la forma de varios archivos cuyo nombre puede permitir adivinar su origen. Seguramente le sorprender y le asurtar la gran cantidad de archivos guardados en su ordenador, a pesar suyo. Con Firefox/Mozilla, las cookies se guardan en un archivo nico (cookies.txt), y con Opera, a parte de esto, son encriptados. Concretamente, el principio de funcionamiento de las cookies es muy simple. Cuando se realiza la primera visita, el navegador escribe en un archivo particular la informacin que podr leer cuando se haga otra visita. Los usos posibles son muy variados y van de la navegacin avanzada hasta la gestin de la cesta de compra en lnea, pasando por los contadores de visitas. Por ejemplo, es muy fcil guardar el nombre, el apellido o el idioma de preferencia del visitante con el objetivo de personalizar su interfaz cuando se conecte nuevamente y as proponerle pginas en su idioma preferido. Las cookies pueden ser modificadas, contener valores modificables posteriormente y una vez pasada su utilidad se pueden suprimir. Para comprobar convenientemente los scripts que contienen cookies, conviene revisar los niveles de seguridad de su navegador. Como se ha indicado anteriormente, incluso si un script es correcto, el navegador no podr escribir si el nivel de seguridad es muy elevado. Por lo tanto, es importante configurar los navegadores.

2. Configurar los navegadores

Cuando las cookies se emplean para facilitar la autentificacin, pueden guardar datos confidenciales (nombre de usuario, contrasea, etc.). Este aspecto podra parecer muy inquietante. En efecto, nada impide pensar que un usuario malintencionado pueda recuperar los datos provenientes de otros mbitos. A fortunadamente, es imposible leer una cookie que no pertenezca al script que lo ha generado. De esta manera, el autor del script puede leer nicamente las cookies que ha dejado y no las otras. De todas maneras, si los usuarios desean evitar las cookies, stas siempre podrn ser desactivadas en el navegador. Todos los navegadores son capaces de borrar las cookies presentes en el ordenador. Con Firefox/Mozilla, la opcin Borrar del men Herramientas permite vaciar el contenido de las

cookies. Con Internet Explorer, se tiene que hacer clic en el botn Eliminar y marcar la casilla Cookiesaccesible en el Men Herramientas/Opciones de Internet. Para prohibir la escritura de las cookies en el ordenador con Firefox/Mozilla, basta con ir al men Herramientas, seleccionar Opciones y finalmente desmarcar la casilla Aceptar cookies del men Privacidad. Con Internet Explorer, se tiene que ir al men Privacidad del cuadro de dilogo Opciones de Internet, visible en el men Herramientas. Para los prximos ejemplos, es importante configurar los navegadores para que acepten las cookies.

3. Lmites de utilizacin de las cookies

Los ejemplos anteriores de utilizacin muestran claramente el inters, pero tambin los lmites de utilizacin de las cookies. No se puede crear un contador de visitas con JavaScript y las cookies, el solo medio de conseguirlo es mediante el uso de un lenguaje de programacin del lado del servidor, como ASP o PHP. Ciertos sitios necesitan la utilizacin de las cookies para funcionar correctamente y las ventajas de la utilizacin de estas, incluso si son interesantes, sobre todo para la personalizacin de la interfaz de los sitios web, son puestas en duda generalmente, ms an si se tienen en cuenta los problemas de seguridad.

4. Aplicacin de las cookies

El paso fundamental consiste en crear una cookie en el equipo del usuario. Esta creacin necesita la presencia de un cierto nmero de datos obligatorios.

5. La informacin obligatoria para la creacin de una cookie

El acceso a las cookies se efecta a travs de la propiedad cookie del objeto document. Existen dos tipos de funcionamiento de las cookies, uno es temporal (en cuyo caso no necesario guardar la informacin para un uso posterior) y el otro es permanente (cuando las cookies se quedan presentes en el ordenador despus de la conexin). Para un uso temporal, basta indicar el nombre de la cookie que se desea crear y la informacin que se va a guardar en ella. Sin embargo, para un uso permanente, es necesario indicar un nombre, una fecha expiracin (duracin de vida), un valor y un nombre de dominio para reconocerlas entre las otras. Adems, el tamao no debe ser superior a 5 Kb, es imposible guardar ms de veinte por dominio y el numero total de cookies, guardadas en el ordenador, no debe ser superior a 300. La informacin se guarda bajo la forma de una cadena de caracteres sin espacio. Este aspecto representa la principal dificultad de la gestin de las cookies. Para una utilizacin temporal, la sintaxis que permite la creacin de una cookie es la siguiente: document.cookie="nombredelacookie=valordelacookie" ; Ejemplo: crear una cookie temporal y luego mostrarla en un cuadro de dilogo.

<script language="javascript"> document.cookie="micookie=mi_nombre"; alert(document.cookie); </script> Este ejemplo demuestra la facilidad de creacin de las cookies temporales. Sin embargo, el inters de la utilizacin de las cookies temporales es limitado, dado que la informacin no puede ser guardadas para un uso posterior. Cerrando la ventana del navegador la cookie es

automticamente eliminada. Si se quiere conservar la informacin, se debe utilizar las cookies de manera permanente.

6. Las cookies permanentes

No hay que equivocarse con el termino permanente, puesto que las cookies permanentes tienen igualmente una duracin limitada. Esta es establecida por el desarrollador y puede ser muy corta o al contrario muy larga. Para crear una cookie permanente, es necesario agregar informacin adicional que permita indicar la duracin de la cookie. Este dato corresponde a su fecha de fin que se agrega con la siguiente sintaxis: expires=fechafin donde fechafin puede ser una fecha absoluta (por ejemplo el 31 de diciembre de 2099) o una fecha relativa a la fecha de creacin (por ejemplo, 100 das despus de la fecha de creacin de la cookie). document.cookie="nombredelacookie= valordelacookie ; expires=fechafin; Ejemplo: crear una cookie permanente con una fecha de fin correspondiente al 31 de diciembre de 2099. <script type="text/javascript" language="JavaScript"> var name="micookie"; var value="mivalor"; document.cookie = name + "=" + value + ";expires="+"Sat,31-Dec-2099 00:00:01 GMT"; </script>

Primero es necesario crear y asignar las variables name y value a travs de un valor de tipo texto. Luego, es necesario utilizar el mtodo cookie() del objeto document y agregar los parmetros de creacin. El formato de la fecha de fin se expresa aqu en GMT. Ejemplo: crear una cookie permanente cuyo fin ser treinta segundos ms tarde.

<script type="text/javascript" language="JavaScript"> fecha_fin=new Date(); var fin=30000; fecha_fin.setTime(fecha_fin.getTime() + (fin)); document.cookie =micookie="mivalor";expires=fecha_fin; alert("La cookie finalizar en este momento: "+fecha_fin); </script>

El primer paso tiene como objetivo crear un objeto de tipo date() llamado fecha_fin. Luego, se tiene que crear una variable fin correspondiente al tiempo en milisegundos (en este caso 30000 milisegundos = 30 segundos) que se agregar en el momento actual gracias a la instruccinfecha_fin.setTime(fecha_fin.getTime() + (fin)); Luego, basta crear la cookie con el mtodo precedente, agregando el parmetro expires que corresponde a la fecha de fin. Es muy fcil mostrar entoncer, en un cuadro de dilogo, el momento previsto del fin de la cookie. La fecha de fin es, por lo tanto, un dato muy importante para la creacin o la eliminacin de una cookie, como veremos ms tarde. Pero se pueden tambin declarar otros datos cuando se crea una cookie, como el dominio, el lugar donde ese guarda la cookie e incluso el atributo de seguridad. Simplemente hay que agregarlas unas despus de otras separadas con puntos y comas. Pero estos datos, al contrario de name, value y expires, son opcionales.

7. Agregar informacin opcional a las cookies

Los datos opcionales permiten identificar ms claramente las cookies. Son tres.

a. El dominio de validez
El hecho de agregar un dominio de validez permite identificar las cookies, lo cual es muy til, sobre todo cuando se trata de una relectura. Si no se especifica esta opcin, el navegador tomara el nombre del dominio de la pgina que contiene el script, lo cual es suficiente generalmente. Una vez especificado el dominio, no suele ser posible modificar el contenido de la cookie a partir de una pgina que no pertenece al domino. El nmero de cookies autorizadas por dominio se limita a veinte. Con Internet Explorer, el nmero de cookies por dominio se muestra entre corchetes (informacin visible en el directorio de gestin de cookies). La sintaxis que permite especificar un dominio es la siguiente: domain=nombredeldominio ;

b. La ruta de acceso
La ruta de acceso permite indicar para qu parte de la URL la cookie es vlida. Es posible leer las cookies dejadas por las pginas de los directorios superiores pero no los de los subdirectorios. La sintaxis correspondiente es: path=ruta ;

c. El atributo de seguridad
El atributo de seguridad corresponde al tipo de conexin (https y no http). Si se activa esta opcin, la cookie no se transmitir si la conexin no es segura (es decir, cuando se usa el protocolo https). Para activar esta seguridad, basta con hacer figurar la mencin secure en los parmetros de la cookie, sin ningn procedimiento en particular.

Cuidado: si se activa la opcin secure, el script no se ejecutar si se hace un test con el protocolo http. Como se ha indicado anteriormente, estos datos facultativos pueden agregarse fcilmente a las menciones obligatorias, separndolos con punto y coma. La sintaxis completa de creacin de una cookie es la siguiente:

document.cookie = "name=value; expires=fechafin; path=ruta; domain=nombrededominio; secure";

8. Lectura de una cookie

El mtodo de lectura de una cookie es relativamente simple, es suficiente con manipular la cadena de caracteres presente en las cookies, identificada por su nombre. El mtodo de manipulacin puede corresponder a una expresin regular. Ejemplo: crear dos pginas, una que permita escribir una cookie compuesta por la hora y la fecha de visita de la pgina, y otra que permitir leer la cookie y mostrar un cuadro de dilogo con la fecha y la hora de la ltima visita, escritas en la cookie. Script de la pgina de escritura de la cookie:

<script type="text/javascript" language="JavaScript"> var nombre="micookie"; var mifecha=new Date(); var hora=mifecha.getHours(); var minuto=mifecha.getMinutes(); var segundo=mifecha.getSeconds(); var dia=mifecha.getDay()+1; var mes=mifecha.getMonth()+1; var ao=mifecha.getFullYear(); var fechacompleta=dia+"/"+mes+"/"+ao+" "+hora+":"+minuto+":"+segundo; var value= fechacompleta ; document.cookie = nombre + "=" + value + ";expires="+"Sat,31-Dec-2099 00:00:01 GMT;domain=midominio.com"; if (document.cookie.length>0) { alert("hay una cookie presente"); } Para poder escribir la hora y la fecha de la visita, es necesario crear todas la variables para as guardar en ellas el conjunto de elementos de informacin del tiempo (ao, mes, da, hora, minuto, segundo). Es muy til tambin crear una variable, llamada fechacompleta, que concatena el conjunto de datos provenientes de las variables de tiempo. El paso siguiente permite crear y configurar la cookie compuesta del nombre, de su valor correspondiente a fechacompleta, de la fecha de fin y del dominio. Finalmente, comprobando document.cookie, se puede saber si la cookie se ha dejado correctamente y si su tamao es superior a cero. El cuadro de dilogo confirma entonces que se ha dejado correctamente la cookie. Script de la pgina de lectura y del cuadro de dilogo:

<script language="javascript"> var comienzo = document.cookie.indexOf("micookie" ); if( comienzo == -1 ) alert("no hay cookie"); } else { var fin=document.cookie.length; alert(document.cookie.substring(comienzo,fin)); } </script> El primer paso consiste en comprobar la presencia de la cookie que nos interesa. En este caso, la cookie se llama micookie. Esto se obtiene efectuando una bsqueda de la posicin del nombre en la cadena de caracteres de la cookie. El resultado se asigna a una variable llamada comienzo. Esta posicin permitir encontrar la informacin que se busca en la cadena. Si el condicional es igual a -1, significa que la cookie no existe (es la respuesta del mtodo indexOf() cuando la bsqueda no ha funcionado). Un cuadro de dilogo permite indicarlo. En el otro caso, la cookie se ha encontrado y se trata luego de leer el contenido. Para ello, se tiene que calcular la longitud de la cadena de caracteres que corresponde a la cookie y guardarla en una variable llamada fin. Luego, solo queda pedir que se muestre la cookie seleccionando el comienzo y el fin de la cadena de caracteres que componen la cookie. {

9. Actualizacin de una cookie

La actualizacin se efecta simplemente con la lectura y la asignacin de un nuevo valor a la cookie. El nico problema se encuentra en que el conjunto de la informacin guardada es una cadena de caracteres, lo cual no facilita la aplicacin de las operaciones aritmticas que permiten por ejemplo crear un contador de visitas. Ejemplo: mostrar un contador que represente el numero de veces que un visitante consulta la misma pgina.

<html> <head> <title>Modificar una cookie</title> <script type="text/javascript" language="JavaScript"> var fin=document.cookie.length; if (fin>0) { alert("Mi cookie ya est presente"); var valorcookie=document.cookie.substring(10,fin);

var cookienum=parseInt(valorcookie); cookienum=cookienum+1; alert("Esta es su visita nmero"+cookienum+" "); document.cookie="micookie="+cookienum+ ";expires="+"Sat,31-Dec-2099 00:00:01 GMT;domain=www.midominio.com;path=/"; } else { alert("Mi cookie no est presente y esta es su primera visita"); var nombre="micookie"; var value=1; document.cookie = nombre + "=" + value + ";expires="+"Sat,31-Dec-2099 00:00:01 GMT;domain=midominio.com;path=/"; var comienzo = document.cookie.indexOf("micookie" ); } </script> </head> <body> </body> </html>

jCuidado! Este contador no es realmente un contador de visitas. Hay que distinguirlo del contador de visitas que cuenta todas las visitas de todos los visitantes. Para ese tipo de contador, se tienen que utilizar lenguajes de programacin del lado del servidor (el contador se guarda en un servidor y puede contar las visitas provenientes de distintos visitantes). En nuestro caso, el contador se interesa nicamente por las visitas del visitante conectado a la pgina, puesto que toma la informacin guardada en el ordenador gracias a las cookies. Como para la lectura, se necesita primero comprobar la presencia de la cookie. En este caso, basta con calcular el nmero de caracteres de la cookie y verificar que ese nmero es superior a cero. Si tal es el caso, aparece un cuadro de dilogo que informa sobre su presencia. El trabajo siguiente consiste en definir el comienzo y el fin de la cadena de caracteres que se quiere extraer de la cookie. En vista de que micookie contiene 8 caracteres (correspondientes al nombre), la informacin que nos interesa (es decir el contador) se encuentra a partir del noveno carcter. Se aplica entonces el resultado de la bsqueda en la cadena de caracteres a una variable (valorcookie). Luego, debe realizarse una conversin de la variable puesto que se encuentra en formato texto y se debe cambiar al formato numrico gracias al mtodo parseInt(). La variable cookienum puede entonces incrementarse. Finalmente, slo queda mostrar el resultado en un cuadro de dilogo y reescribir la cookie con un nuevo valor. En el caso de que no exista ninguna cookie, hay que crearla y asignarle el valor 1 (puesto que es la primera visita).

10. Eliminacin de una cookie

Para eliminar una cookie, basta con llamarla asignndole una fecha de fin anterior a la fecha del da. Una vez que el navegador se haya cerrado, la cookie se eliminar. Ejemplo: eliminar la cookie micookie y mostrar un cuadro de dilogo para informar al visitante de la eliminacin.

<script type="text/javascript" language="JavaScript"> if (document.cookie.length>0) { alert("Mi cookie ya est presente"); document.cookie="micookie=mivalor;expires=Thu,01-Jan-1980 00:00:01 GMT;domain=www.midominio.com;path=/"; alert("La cookie micookie ha sido eliminada"); } else { alert("La cookie micookie no est presente"); } </script> Como siempre, hay que comprobar la presencia de la cookie por medio de document.cookie.length. Si el resultado es superior a cero, significa que est presente. Se muestra entonces un cuadro de dilogo. Luego, basta con crear una cookie con el mismo nombre pero con una fecha de fin pasada (en esta caso, enero de 1980). Slo esto basta para eliminar la cookie. Si la cookie no est presente, aparece simplemente un cuadro de dilogo informando al visitante.

JavaScript y CSS
HTML, JavaScript y CSS pueden interactuar en la elaboracin de una pgina web. El lenguaje HTML no permite un control profundo de los elementos que componen una pgina. De esta manera, las pginas escritas nicamente con HTML son poco originales. Muchas pginas utilizan hoy en da procedimientos tcnicos diferentes y variados que permiten agregar animaciones, sonidos e incluso pequeos vdeos. Los archivos de animaciones en formato flash son un buen ejemplo. El DHTML(Dynamic HyperText Markup Language) es una alternativa a Flash. Combina HTML, CSS, el modelo de objeto DOM (Document Object Model) y JavaScript para dar a las pginas web un aspecto grfico mejorado y una cierta interactividad (la interactividad total slo puede concebirse con los lenguajes de programacin PHP o ASP). El DHTML no es un lenguaje de programacin por s slo, sino una combinacin de tres tcnicas. En esta combinacin, JavaScript es un elemento central. Con JavaScript, es posible manipular el DOM y sus objetos. Lamentablemente, el DOM no se ha implementado de la misma manera en todos los navegadores. Tambin es necesario a veces redactar previamente un script de deteccin de navegadores y escribir luego todos los scripts necesarios segn el nmero de versiones del navegador. Estas diferencias implican un buen conocimiento del DOM y de sus mtodos de acceso a los objetos para redactar scripts DHTML.

1. El DOM (Document Object Model)

El DOM es en realidad una descripcin de los elementos que componen una pgina web. Es gracias a esta estructura jerarquizada que los lenguajes de programacin (entre los cuales se encuentra JavaScript) pueden acceder a los objetos presentes en la pgina. Con el DOM, el programador dispone de un acceso total a la pgina que le permite modificar la apariencia as como su contenido. El DOM es una API (Application Programming Interface para interfaz de programacin), totalmente independiente de la plataforma y del lenguaje que la manipula. Es el W3C (World Wide Web Consortium) el que ha definido las diferentes versiones del modelo DOM desde 1998. Es posible encontrar una descripcin completa del DOM directamente en el sitio web del W3C en la siguiente direccin: http://www.w3.org/DOM/ en versin inglesa. La primera versin, bautizada DOM 1 sali en 1998 y ha definido la representacin de un documento HTML o XML (eXtensible Markup Language), bajo la forma de un rbol. La nocin de nudo se utiliza para dar esta representacin jerrquica de la pgina web. La segunda versin, bautizada DOM2, sali en marzo 2000 y ha agregado algunas funciones que permiten identificar los elementos de una pgina. En el momento de la redaccin de esta obra (mayo del 2008) el W3C trabaja sobre la versin 3 del DOM. Una de las crticas que se le hacen al modelo DOM es que necesita cargar en la memoria el conjunto de objetos de una pgina web para poder funcionar, lo cual puede retardar mucho el tiempo necesario para cargar una pgina. El DOM es una API fundada en los rboles; sin embargo, existe otro mtodo bautizado SAX que permite remediar este complicado problema, puesto que esta fundado en los eventos. Por nuestra parte, nos limitaremos a algunas tcnicas bsicas basadas en el DOM y JavaScript para interactuar en la pgina web.

2. Nociones esenciales del DOM

Con el DOM, el programador dispone de objetos, propiedades y mtodos que le permiten manipular todos los componentes de la pgina, igual que con JavaScript. Sin embargo, con JavaScript, no es posible manipular ciertos objetos (el contenido de las celdas de una tabla, por ejemplo), mientras que combinando JavaScript y DOM se puede hacer todo o casi todo. Una de las nociones esenciales del DOM es la de nudo, el cual corresponde a un elemento especfico en el cdigo HTML de una pgina web. Existen tres tipos de nodos: los nodos de elementos, los nodos de atributos y los nodos de texto. Los nodos estn jerarquizados por s mismos. Para identificar de manera ms clara la estructura DOM que compone una pgina HTML, es posible utilizar la herramienta DOM inspector incluida en la versin 2.0.0.14 de Firefox/Mozilla. Esta herramienta permite representar visualmente los elementos del DOM que componen un pgina. Para acceder a esta herramienta, se debe pasar por el men Herramientas y seleccionar luego inspector DOM o utilizar el atajo de teclado [Ctrl] [Mays] I. Para Internet Explorer, existe igualmente un cierto numero de herramientas entre las cuales podemos citar DebugBar disponible gratuitamente (con la condicin de hacer un uso personal), en la direccin: http://www.debugbar.com/ Despus de la instalacin, la herramienta se encuentra disponible como una barra de herramientas que se debe activar en al men Ver y la opcin Barra de herramientas Debugbar. Como se ha indicado anteriormente, las ltimas versiones de los navegadores son compatibles con el DOM. Sin embargo, si el visitante no dispone de una versin reciente, le ser muy difcil acceder a las funcionalidades que se han desarrollado. Es preferible entonces efectuar a pesar de todo una prueba de compatibilidad. Una vez hecho esto, se mostrar un mensaje de advertencia o un mensaje que oriente el script hacia una parte compatible con el navegador. Para llegar a ello, basta controlar si ste soporta correctamente el acceso a los objetos por

medio del mtodogetElementBy() del objeto document. La sintaxis que se debe utilizar en la siguiente: document.getElementById ; Ejemplo: determinar si el navegador utilizado es compatible con el DOM.

<script language="javascript"> if (document.getElementById) { alert("El navegador es compatible"); } else { alert("Lamentablemente su navegador no es compatible") } </script> Por regla general, este script permite determinar las versiones del navegador superiores a la versin 4 de Internet Explorer y Netscape. Existen sin embargo otros parmetros que es posible utilizar para afinar la deteccin. As, utilizando la sintaxis document.all&&getElementById, es posible saber si el navegador es una versin 5 o superior de Internet Explorer. De igual manera, para saber si la versin de Netscape es al menos igual a la versin 6, se tiene que utilizardocument.all&&!getElementById. Desde un punto de vista sintctico, se utilizan los mtodos del DOM en el interior del script JavaScript para acceder a los elementos.

3. Los mtodos DOM para acceder a los elementos

Con el DOM, existen unos mtodos que permiten acceder directamente a los elementos de una pgina, sin pasar por el mtodo de sintaxis clsica window.document.form Cuatro mtodos principales permiten una manipulacin de los elementos que componen una pgina: Mtodos getElementById() getElementsByName() Resultado Selecciona un elemento en funcin de su identificador. Selecciona uno o varios elementos en funcin de un nombre pasado como argumento.

getElementsByTagName() Selecciona uno o varios elementos en funcin de un nombre de etiqueta pasado como argumento. innerHTML() Permite leer o asignar un valor a un elemento.

El primer mtodo getElementById() necesita la utilizacin del valor de la etiqueta id para encontrar el elemento en la pagina. Su sintaxis es la siguiente:

document.getElementById(elemento que se desea manipular) Ejemplo: acceder al valor contenido en un elemento por medio de los mtodos propuestos por el DOM.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Acceso al DOM</title> <script language="javascript"> function acceso(){ document.getElementById(elemento1).innerHTML="Texto modificado por DHTML"; } </script> </head> <body> <div id="elemento1">Texto del elemento 1 </div> <script language="javascript"> alert(document.getElementById(elemento1).innerHTML); </script> <input type="button" name="Submit" value="Modificar" onClick="acceso()"> </body> </html> El script se ejecuta cuando se hace clic en el botn Modificar. Antes, un script, ubicado en el cuerpo de la pgina, accede al valor del elemento identificado por el id elemento1 para mostrar su valor. La funcin acceso permite acceder al elemento para modificar su valor, siempre por medio del mtodoinnerHTML(). Esto demuestra muy bien la posibilidad de lectura y escritura de este mtodo. Ejemplo: mostrar el nmero de elementos as que su nombre presentes en una pgina.

<script language="javascript"> var numero=document.all.length;

alert("el nmero de elementos presentes en el cdigo de esta pgina es de:"+numero); for (i=0; i<numero;i++) { nombreelemento=document.all(i).tagName; mostrarelemento="El nombre del elemento "+i+" es "+nombreelemento; alert(mostrarelemento); } </script> El script comienza por contar el nmero de elementos del DOM que componen la pgina y luego los muestra en un cuadro de dilogo. Seguidamente, el script revisa el conjunto de todos los elementos identificados por su nmero de ndice y recupera su nombre utilizando el atributo tagName. El hecho de poder acceder a los elementos de la pgina por medio del DOM abre nuevas posibilidades, sobre todo por la asociacin de JavaScript y las hojas de estilo en cascada que permiten mejorar la presentacin de las pginas web.

4. Presentacin de la pgina web con JavaScript y CSS

Algunas nociones bsicas son indispensables para una buena utilizacin de las CSS.

5. Primeras nociones de CSS

La utilizacin de las CSS (Cascading Style Sheets) o hojas de estilo en cascada es un concepto que consiste en definir las propiedades de presentacin y aplicarlas a todo el documento o solo una parte. El procedimiento presenta muchas ventajas y permite obtener una presentacin homognea, fcilmente modificable posteriormente. Una vez que se han definido y aplicado las hojas de estilo a un sitio web, es muy fcil modificar la apariencia uniformemente. De hecho, la modificacin de un estilo ser automticamente recuperada por el conjunto de las pginas que la utilizan. Las hojas de estilo son hoy compatibles con las ltimas versiones de los navegadores (versin 4 de Internet Explorer y Netscape Navigator, versin 5 de Opera). Para definir exactamente esta compatibilidad con los estndares definidos por el W3C, es importante agregar al cdigo HTML de cada pgina, una lnea de instrucciones llamada DTD(Document Type Definition), que especifica las modalidades de aplicacin de las CSS. Sin entrar mucho en detalle, basta con saber que existen tres tipos, del ms estricto al menos estricto. El docType ms comn y que facilitar su aprendizaje es al siguiente: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Adems de esta definicin de docType, se preferible agregar una etiqueta Meta indicando el tipo de CSS al navegador y/o a los motores de bsqueda. <meta http-equiv="Content-Type" content="text/css"> Al igual que JavaScript, el cdigo CSS que define las caractersticas de estilo puede integrarse directamente en la pgina HTML entre las etiquetas <HEAD> y </HEAD> o en un fichero externo guardado bajo el formato CSS. No estudiaremos aqu la insercin del archivo CSS puesto que para una mejor lisibilidad, es preferible disponer en su conjunto del cdigo en la

misma pgina. De esta manera, para insertar el cdigo CSS, es necesario (al igual que para JavaScript) incluirlo entre las etiquetas <style css> y </style>. La aplicacin de estilos CSS se hace por medio de reglas compuestas de un selector de etiqueta y de una declaracin. El selector de etiqueta corresponde a la etiqueta a la cual se deber aplicar el estilo. La declaracin, como tal, est compuesta por propiedades a las cuales se asocian valores. La composicin de una regla CSS se presenta entonces de la siguiente manera: selector {Propiedad : valor} Donde selector corresponde a una etiqueta HTML, Propiedad a una propiedad de la etiqueta yvalor a un valor aplicado a la propiedad. En suma, se tiene que definir sobre qu se desea aplicar el estilo y de qu est compuesto este estilo. Para tomar un ejemplo concreto, definamos un estilo que permita escribir con la tipografa Tahoma en negrita y en rojo. Est previsto que este estilo se aplique a un texto ubicado en la etiqueta h1 (Encabezado 1). Partiendo del cdigo siguiente de la pgina HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Mi primer estilo CSS</title> </head> <body> <h1>Texto en Tahoma, rojo y negrita</h1> </body> </html>

Se tiene que agregar la definicin de estilo y su aplicacin en el cdigo de la pgina, obteniendo el siguiente resultado: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Mi primer estilo CSS</title> <style css> h1{font-family: Tahoma;font-style: bold;color: red} </style>

</head> <body> <h1>Texto en Tahoma, rojo y negrita</h1> </body> </html> No es necesario agregar cdigo en las etiquetas h1, el simple hecho de indicar la etiqueta en la definicin de la regla permite aplicar el estilo CSS.

El cdigo CSS puede encontrarse en cualquier parte de la pgina e incluso por debajo de la etiqueta h1 al final de la parte body.

Es posible aplicar el mismo estilo a varios elementos, basta separarlos con una coma. Una nocin fundamental de CSS reside en el hecho de que los estilos puede acumularse (de ah su nombre). De esta manera, si retomamos el ejemplo anterior y creamos una nueva regla sobre el selector h1, el texto toma todos los estilos descritos. <style css> h1{font-family: Tahoma;font-style: bold;color: red} h1{font-style:italic} </style> El conjunto de reglas de estilo CSS puede estar incluido en el interior de una clase que se llamar cuando se utilice la etiqueta HTML. Slo hay que agregar un punto antes de definir el conjunto de las propiedades del estilo. Para aplicar el estilo a la etiqueta, hay que utilizar la instruccin: <h1 class="cambiarestilo"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Mi primer estilo CSS</title> </script> <style css> .cambiarestilo { font-family: Tahoma;font-style: bold;color: red; font:italic; } </style>

</head> <body> <h1 class="cambiarestilo">Texto con la etiqueta h1</h1> </body> </html>

En este script, el primer paso consiste en declarar la clase cambiarestilo y en definir los valores de las propiedades. Luego, slo hay que llamara la clase cambiarestilo en el interior de la etiqueta sobre la cual ser aplicada. La lista de propiedades disponibles es extensa, lo cual demuestra la cantidad de posibilidades ofrecidas por la utilizacin de las CSS. Propiedades tipogrficas Propiedad Funcin

font-family Corresponde a uno o varios nombres de tipografas o familias tipogrficas. Si se definen varias, se aplicar la primera que se encuentre en el sistema del usuario. font-style fontweight font-size fontvariant font Corresponde al estilo de escritura. Corresponde al grosor de la fuenta.

Corresponde al tamao de la fuenta. Corresponde a una variante (pequeas maysculas).

Atajo que permite especificar todas las propiedades. Propiedades de los prrafos

Propiedad color line-height text-align text-indent text-decoration Corresponde al color del texto. Corresponde al interlineado. Corresponde a la alineacin del texto. Corresponde a la sangrado. Corresponde a una decoracin del texto.

Funcin

Propiedades de los prrafos Propiedad text-shadow text-transform white-space word-spacing width height Funcin Corresponde al sombreado del texto, su desplazamiento a la derecha, hacia abajo. Corresponde a la caja del texto. Corresponde a los espacios en blanco. Corresponde al espacio entre las palabras. Corresponde al ancho de un elemento de texto o de una imagen. Corresponde a la altura de un elemento de texto o de una imagen. Propiedades de los colores y del fondo Propiedad background-color background-image background-repeat background-attachment background-position background Corresponde al color de fondo. Corresponde a la imagen de fondo. Corresponde a la manera de repetir el fondo. Indica si la imagen se queda fija cuando hay un desplazamiento de la pantalla. Corresponde a la posicin de la imagen respecto a la esquina superior izquierda. Atajo para todas las propiedades de fondo. Propiedades de los mrgenes Propiedad margin-top margin-right margin-bottom margin-left margin Funcin Corresponde al valor del margen superior. Corresponde al valor del margen derecho. Corresponde al valor del margen inferior. Corresponde al valor del margen izquierdo. Atajo para todas las propiedades de margen. Funcin

Propiedades de los bordes Propiedad border[-top -left -bottom -right]width border[-top -left -bottom -right]color Funcin Corresponde al ancho del borde [superior, izquierdo, inferior o derecho]. Corresponde al color del borde [superior, izquierdo, inferior o derecho].

border[-top -left -bottom -right]-style Corresponde al estilo del borde [superior, izquierdo, inferior o derecho]. border-collapse border Corresponde a la fusin de los bordes. Atajo global para las propiedades del borde. Propiedades de los espacios interiores Propiedad padding-top padding-right padding-bottom padding-left padding Funcin Corresponde al espacio interior entre un elemento y el borde superior. Corresponde al espacio interior entre el elemento y el borde derecho. Corresponde al espacio interior entre el elemento y el borde inferior. Corresponde al espacio interior entre el elemento y el borde izquierdo. Atajo para el conjunto de propiedades de espacio interior. Propiedades de las tablas Propiedad bordercollapse borderspacing caption-side empty-cells table-layout Funcin Corresponde a la fusin de los bordes de las celdas (collapse) o no (separate).

Corresponde al espacio entre las celdas.

Corresponde al posicionamiento de la leyenda de la tabla. Define si se muestran (show) o no (collapse) las celdas vacas. Define un ancho fijo o variable.

Propiedades de las tablas Propiedad Funcin

speak-headers Propiedad para sordos que indica el comportamiento cuando se leen las celdas de la cabecera de una tabla. Propiedades de las listas Propiedad list-style-type list-style-image list-style-position list-style Funcin Corresponde al tipo de lista y de su numeracin. Permite personalizar las listas con una imagen. Corresponde a la tabulacin de las listas. Atajo para todas las propiedades de las listas. Propiedades de maquetacin Propiedad @page size margin-top margin-right Define maquetacin de la impresin. Corresponde al formato de la impresin. Corresponde al margen superior. Corresponde al margen de la derecha. Funcin

margin-bottom Corresponde al margen inferior. margin-left marks page-breakbefore page-breakafter orphans Corresponde al margen izquierdo. Marcas de corte y mrgenes de montajes. Fuerza el salto de pgina antes de un elemento.

Fuerza el salto de pgina despus de un elemento.

Evita las lneas hurfanas al final de la pagina. Define el nmero de lneas mnimo a partir del cual se efecta un envo hacia la pgina siguiente.

Propiedades de maquetacin Propiedad widows Funcin Evita las lneas viudas al comienzo de una pgina. Define el nmero de lneas a partir del cual se efecta una vuelta hacia la pgina anterior.

El conjunto de estas propiedades demuestra el vasto campo de aplicacin de las CSS. La utilizacin conjunta con JavaScript permite controlar las diferentes presentaciones en funcin de las situaciones o condiciones particulares.

Interaccin JavaScript/CSS
Como ya hemos abordado las reglas CSS y la propiedad className, seri interesante poder asociarlas a JavaScript y mejorar as la presentacin de ciertos elementos de una pgina. Para ello, se tienen que aplicar las hojas de estilo a travs de los eventos.

1. Aplicar las hojas de estilo a travs de los eventos

JavaScript permite controlar la aplicacin de las reglas CSS definidas. Slo se tiene que agregar un comportamiento para ejecutar una funcin aplicando el estilo CSS deseado. Ejemplo: aplicar un estilo CSS sobre un texto cuando el ratn pasa por encima (el ejemplo retoma el ejemplo anterior).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Mi primer estilo CSS</title> <script language="javascript"> function cambiar(h1) { h1.className="cambiarestilo"; } </script> <style css> .cambiarestilo { font-family: Tahoma;font-style: bold;color: red; font:italic; } </style> </head>

<body> <h1 class="Ningn estilo CSS" onMouseOver="cambiar(this)">Texto con la etiqueta h1</h1> <p class="cambiarestilo">&nbsp;</p> </body> </html Cuando el ratn pasa la funcin cambiar se ejecuta y toma el objeto this (en esta caso la etiqueta h1), como argumento. La funcin cambiar indica luego que se aplique el estilo CSS llamadocambiarestilo.

2. Utilizar las estructuras de control para controlar la aplicacin de los estilos CSS
Tambin posible utilizar las estructuras de control de JavaScript para elaborar scripts ms complejos que permitan crear efectos tiles. Por ejemplo, el uso de los estilos CSS puede simplificar la bsqueda de informacin en una tabla donde se encuentra una gran cantidad de informacin (incluso si se trata de una tabla simple). Ejemplo: modificar el fondo de las celdas de la tabla para que se transformen en rojo con el texto blanco en negrita cuando pase el ratn.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Javascript y CSS</title> <style css> .celdaresaltada { color:#FFFFFF; font-weight:bold; background-color:#CC0000; } </style> <script language="javascript"> function luzcelda(cell) { if (cell.className="Ningn estilo CSS") { cell.className="celdaresaltada"; } }

function apagarcelda(cell) { if(cell.className="celdaresaltada") { cell.className="Ningn estilo CSS"; } } </script>

</head> <body> <table width="50%" border="1"> <tr> <td class="Ningn estilo CSS" onMouseOver="luzcelda(this)" onMouseOut="apagarcelda(this)"><div align="center">A</div></td> <td class="Ningn estilo CSS" onMouseOver="luzcelda(this)" onMouseOut="apagarcelda(this)"><div align="center">B</div></td> <td class="Ningn estilo CSS" onMouseOver="luzcelda(this)" onMouseOut="apagarcelda(this)"><div align="center">C</div></td> </tr> <tr> <td class="Ningn estilo CSS" onMouseOver="luzcelda(this)" onMouseOut="apagarcelda(this)"><div align="center">1</div></td> <td class="Ningn estilo CSS" onMouseOver="luzcelda(this)" onMouseOut="apagarcelda(this)"><div align="center">2</div></td> <td class="Ningn estilo CSS" onMouseOver="luzcelda(this)" onMouseOut="apagarcelda(this)"><div align="center">3</div></td> </tr> <tr> <td class="Ningn estilo CSS" onMouseOver="luzcelda(this)" onMouseOut="apagarcelda(this)"><div align="center">4</div></td> <td class="Ningn estilo CSS" onMouseOver="luzcelda(this)" onMouseOut="apagarcelda(this)"><div align="center">5</div></td> <td class="Ningn estilo CSS" onMouseOver="luzcelda(this)" onMouseOut="apagarcelda(this)"><div align="center">6</div></td> </tr> </table> </body>

</html> El primer paso consiste en definir la clase y sus reglas: color:#FFFFFF y fontweight:bold para el texto blanco y negrita, y background-color:#CC0000 para el fondo de la celda. Luego, el script JavaScript se divide en dos funciones, una para resaltar (luzcelda) cuando pasa el ratn y otra para apagarla cuando el ratn ya ha pasado (apagarcelda). La primera funcin comprueba si la clase es igual a "Ningn estilo CSS", que es el estilo por defecto. Si tal es el caso, se aplica el estilo celdaresaltada. La segunda funcin hace el mismo trabajo pero a la inversa, es decir, comprueba primero si el estilo es celdaresaltada, y en ese caso, aplica el estilo "Ningn estilo CSS". Finalmente, se tiene que aplicar para cada celda de la tabla dos comportamientos, uno para accionar la primera funcin y otro para accionar la segunda. De esta manera, cuando el puntero pasa por encima de la tabla, se identifica fcilmente la celda que se encuentra por debajo de ste.

Es posible modificar ligeramente este script para visualizar de una manera ms clara las lneas en vez de las celdas. En este caso, es la etiqueta <tr> que corresponde a la lnea completa de la tabla, la que origina el cambio de la maquetacin en lugar de la etiqueta <td>, que corresponde a al celda. <tr class="Ningun estilo CSS" onMouseOver="luzcelda(this)" onMouseOut="apagarcelda(this)">

3. Mostrar/ocultar los elementos con JavaScript

Tambin es posible acceder a las propiedades de estilo por JavaScript. Esto permite sobre todo mostrar y ocultar los bloques de texto incluidos en las etiquetas de tipo <div>. Este tipo de etiqueta permite constituir bloques de texto y se asemeja a la etiqueta <span>. Es la propiedad display la que permite mostrar u ocultar los bloques. Basta con atribuirle el valornone para ocultar o block para mostrar. Es posible utilizar otra propiedad en lugar de display: la propiedad visibiliy que puede tener como valor, visible o hidden. En este caso, el resultado es ligeramente diferente puesto que el espacio que ocupa el bloque de texto no se libera. Este ejemplo es til en las tablas compuestas por numerosas lneas y en la cuales el espacio disponible no es suficiente. En este ejemplo, el numero de lneas se reduce a cuatro para simplificar. Ejemplo: mostrar/ocultar informacin en una tabla cuando pasa el puntero por encima de las celdas. El mensaje podra estar en rojo o en verde segun la situacin.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Javascript y CSS</title>

<script language="javascript"> function borrar(elemento) { var tabelementos=new Array(); tabelementos=["1306","2206","2506","3006"]; for (i=0;i<tabelementos.length;i++) { document.getElementById(tabelementos[i]).style.display=none; } } function mostrar(nombre) { document.getElementById(nombre).style.display=block; } function ocultar(nombre) { document.getElementById(nombre).style.display=none; } </script> <style type="text/css"> .estilorojo { color: #FF0000; font-weight: bold; } .estiloverde { color: #006600; font-weight: bold; } </style> </head> <body onLoad="borrar()"> <p>&nbsp;</p> <table width="50%" border="1"> <tr> <td ><span class="style3">Fecha</span></td> <td ><span class="style3">Formacin</span></td> <td ><span class="style3">Lugar</span></td> </tr> <tr> <td onMouseOver="mostrar(1306)" onMouseOut="ocultar(1306)">

13 y 14 de junio <div class="estiloverde" id="1306">Plazas disponibles</div></td> <td onClick="ocultar()">JavaScript</td> <td onClick="ocultar()">Madrid</td> </tr> <tr> <td onMouseOver="mostrar(2206)" onMouseOut="ocultar(2206)">22, 23 y 24 de junio <div class="estilorojo" id="2206">No hay ms plazas disponibles</div></td> <td onClick="ocultar()">HTML</td> <td onClick="ocultar()">Barcelona</td> </tr> <tr> <td onMouseOver="mostrar(2506)" onMouseOut="ocultar(2506)"> 25 y 26 de junio <div class="estilorojo" id="2506">No hay ms plazas disponibles</div></td> <td onClick="ocultar()">JavaScript</td> <td onClick="ocultar()">Cdiz</td> </tr> <tr> <td onMouseOver="mostrar(3006)" onMouseOut="ocultar(3006)"> 29 y 30 junio <div class="estiloverde" id="3006">Plazas disponibles </div></td> <td onClick="ocultar()">HTML</td> <td onClick="ocultar()">Salamanca</td> </tr> </table> </body> </html> El script se ocupa de cuatro celdas de una tabla y comienza por la construccin de una tabla que permite identificar las etiquetas <div> en funcin de su id. Esto permite, inmediatamente despus, efectuar un bucle para estar seguro que todos los bloques est ocultos. El clculo del nombre de elementos de la tabla permite determinar el nmero de iteraciones. Siguen las dos funciones que permiten mostrar y ocultar, segun los parmetros transmitidos en el evento (onMouseOver yonMouseOut). De esta manera, cuando pasa el ratn, el evento activa la

funcin mostrar() y le transmite el id del bloque que se quiere manipular. De manera inversa, cuando el ratn ya no est sobre el texto, la funcin ocultar() oculta el bloque correspondiente. Los dos estilos CSS se definen y se aplican a las etiquetas <div>. Este es otro ejemplo de utilizacin un poco ms complicado que permite controlar la visibilidad de los elementos. Ejemplo: comunicar al usuario el nmero de caracteres disponibles en el campo, mientras escribe en el formulario. Incluso el campo debe tomar un aspecto diferente (fondo amarillo) para prevenir que el numero de caracteres se agota.

<html> <head> <title>Advertencia sobre el lmite de campo de formulario</title> <script language="javascript"> function control(cadena) { var longitud=0; longitud=cadena.length; lmite=10-longitud; var mensaje="Cuidado, slo le quedan "+lmite+" caracteres disponibles"; if (lmite<5 && lmite>0) { document.getElementById(alerta).style.visibility="visible"; document.getElementById(texto).className="fin"; document.getElementById(alerta).innerHTML=mensaje; } else { document.getElementById(alerta).style.visibility="hidden"; } } </script> <style type="text/css"> .normal{ position:absolute; left:64px; top:83px; height:25px; width:329px; visibility:hidden; background-color:#FFFFCC;

border:1px solid double; color: #FF0000; padding:2px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold } .fin{ background-color:#FFFFCC; color: #FF0000; font-size:12px; font-weight:bold} </style> </head> <body> <div id="alerta" class="normal"></div> <form name="form1" method="post" action=""> <p> <input name=texte type=text id="texto" size=15 maxlength="15" onKeyUp="control(this.value)"> </p> </form> </body> </html> La ejecucin del script depende del nmero de caracteres escritos en el campo de texto. La funcin se ejecuta entonces cada vez que se deja de presionar una tecla. El contenido del campo texto es enviado a la funcin control() como argumento. Se debe activar entonces la variable longitud para que tome el nuevo valor de la longitud de la cadena. Es posible, en consecuencia, calcular esta longitud con la propiedad length de la cadena de caracteres. Dado que el lmite de escritura en el campo es de diez caracteres, es fcil determinar a travs de una resta el nmero de caracteres disponibles. Inmediatamente despus, el script construye una variable llamada mensaje que se mostrar un poco ms tarde en la capa gracias al mtodo innerHTML que esta compuesta de dos cadenas de caracteres, separadas por la variable lmite. Es esta variable la que permite saber si el nmero de caracteres del campo se encuentra entre 5 y 0. Si tal es el caso, se tiene que mostrar la capa modificanda su visibilidad ya que sta se encuentra establecida por defecto en hidden gracias a un estilo CSS. En este momento, tambin es posible cambiar el estilo CSS del campo de formulario para estar seguro de llamar la atencin del usuario, modificando el color del fondo a amarillo. Finalmente, se tiene que actualizar el contenido de la capa con un mensaje que indica el fin del nmero de caracteres disponibles. Una vez que se ha superado la condicin, el mensaje se borra para dejar el campo en rojo.

4. Modificar la posicin de los elementos con JavaScript

Adems de la visibilidad, es posible modificar la posicin de los elementos por medio de la propiedadposition. La posicin puede ser definida o de una manera absoluta (en pxeles en relacin con la esquina superior izquierda del objeto) o de manera relativa (en relacin con el objeto que origina la accin). Para precisarlo, conviene agregar la propiedad position: relative o position: absolute. En todo caso, las propiedades left y top permiten configurar esta posicin. Ejemplo: crear un mapa interactivo que permita mostrar mensajes que comuniquen el nombre de la regin espaola cuando se hace clic en la regin en cuestin. Para simplificar el cdigo, el test tendr en cuenta solamente dos regiones (Gerona y Teruel).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Mi primer estilo CSS</title> <script language="javascript"> function ocultar() { document.getElementById("GERONA").style.visibility=hidden; document.getElementById("TERUEL").style.visibility=hidden; } function coordenadas(event) { var posx=event.clientX; var posy=event.clientY; if(posx>500&&posx<570&&posy>155&&posy<270){ var posy=posy; var posx=posx; document.getElementById("GERONA").style.visibility=visible; document.getElementById("GERONA").style.top=posy+"px"; document.getElementById("GERONA").style.left=posx+"px"; } else if(posx>310&&posx<400&&posy>205&&posy<260){ var posy=posy; var posx=posx; document.getElementById("TERUEL").style.visibility=visible; document.getElementById("TERUEL").style.top=posy+"px";

document.getElementById("TERUEL").style.left=posx+"px"; } } </script> <style type = "text/css"> .respuesta{position:relative;background-color:#FFFF99;fontweight:bold;width:100px;height:auto } </style> </head> <body>

<div class=respuesta id="GERONA">GERONA</div> <div class=respuesta id="TERUEL">TERUEL</div> <p><img src="mapa_mudo_espana.gif" width="600" height="490" OnLoad="ocultar()" onClick="coordenadas(event)"></p> </body> </html> El script oculta en principio los calcos eventualmente visibles en el momento de cargarse la imagen gracias a la funcin ocultar(). Las otras funciones se ejecutan cuando se hace clic en una porcin de la imagen correspondiente a la regin. Para determinar la zona en pxeles (a partir de la esquina superior izquierda), se tiene que recuperar la posicin del puntero cuando se hace clic y luego efectuar una serie de tests para saber si el ratn se encuentra en la zona definida. Para definir la posicin del puntero, es posible utilizar event.clientX y event.clientY. La definicin de la zona correspondiente a la regin se hace de manera arbitraria, es decir, el dibujo de las regiones se reduce a un rectngulo. Evidentemente, para aquellos que lo desean, la definicin de la zona puede ser ms fina. Finalmente, se tienen que redefinir la etiqueta que tendr el nombre de la regin, aplicndole un ajuste de posicin de manera relativa. Los parmetros para mostrar el mensaje de informacin se definen en el archivo CSS.

5. Modificar el tamao de los elementos con JavaScript

Tambin es posible acceder a las propiedades de tamao. Para ello, se tienen que utilizar las propiedades de ancho (style.width) y alto (style.height): Ejemplo: efectuar un cambio de tamao de una capa despus de haber pedido al usuario los nuevos parmetros.

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Modificar el tamao</title> <script language="javascript"> function cambiarcapa(){ alert("Esta capa debe cambiar de tamao"); var dimX=document.getElementById("capa1").offsetWidth; var dimY=document.getElementById("capa1").offsetHeight; alert("Las dimensiones de la capa son" : "+ dimX +" pxeles de ancho y "+dimY+" pxeles de alto"); newdimX=prompt("Cul es el nuevo tamao?: "Escriba aqui el nuevo tamao"); newdimY=prompt("Cul es el nuevo tamao en altura?": "Escriba aqu el nuevo tamao"); newdimY=newdimY+"px"; newdimX=newdimX+"px"; document.getElementById("capa1").estilo.height=newdimY; document.getElementById("capa1").estilo.width=newdimX; } </script> <style type="text/css"> .capa1 { position:absolute;left:300px;top:100px;color:#FF0000; padding:10px;border:1px solid #000;background-color:#FFFF99; } </style> </head> <body> <div class="capa1" id="capa1" onClick="cambiarcapa()">Capa1</div> </body> </html> Este script se ejecuta cuando se hace clic en la capa. La funcin cambiarcapa() muestra en principio un cuadro de dilogo y luego asigna a las variables dimX y dimY los valores en pxeles del tamao de la capa. El script muestra luego esos valores en un cuadro del dilogo. Despus,

se le pide al usuario escribir los nuevos valores para cambiar las dimensiones de la capa. Estos valores se guardan en las variables nexdimX newdimY a las cuales se tiene que agregar "px" para obtener la nueva cadena correspondiente, por ejemplo 100 px. Finalmente, es posible modificar las dimensiones de la capa utilizando el mtodo getElementById.

6. Modificar la superposicin de los elementos con JavaScript

Tambin es posible trabajar con la superposicin de elementos. La superposicin se controla con la propiedad z-index. Es posible modificar el orden de superposicin del objeto, asignando un valor az-index. Ejemplo: crear un men de navegacin combinando las propiedades de visibilidad, de posicin y superposicin.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Men navegacin CSS</title> <script language="javascript"> function ocultar(numcapa) { document.getElementById(numcapa).style.visibility=hidden; document.getElementById(triangless1).style.visibility=hidden; } function mostrar(capa) { document.getElementById(capa).style.visibility=visible; } function mscara(capa) { document.getElementById(capa).style.visibility=hidden; } function mostrartriangulo(tringulo) { document.getElementById(tringulo).style.visibility=visible; document.getElementById(tringulo).style.zIndex=2; } function retirartriangulo(tringulo) { document.getElementById(tringulo).style.zIndex=0; } function ocultartriangulo(tringulo) { document.getElementById(tringulo).style.visibility=hidden;

} </script> <style type="text/css"> .capa1{ visibility:hidden; padding:2px; position:absolute; background:#993399; border:#000000:solid; left:0px; top:21px; height:137px; width:150px; color:#FFFFFF; background-color: #993399; } .menu1{ position:absolute; padding:2px; background:#993399; border:#000000:solid; left:0px; top:0px; height:20px; width:100px; color:#FFFFFF} .triangless1{ visibility:hidden; padding:1px; position:absolute; padding:0px; left:136px; top:40px} .capa2{ visibility:hidden; padding:2px;

position:absolute; background:#993399; border:#000000:solid; left:150px; top:40px; height:141px; width:150px; color:#FFFFFF} .zonaoculta{ position:absolute; background:#FFFFFF; border:#000000:solid; left:742px; top:161px; height:250px; width:350px; color:#FFFFFF} </style> </head> <body> <div class="menu1" id="Men1" style="z-index:1" onMouseOver="mostrar(capa1)">Men1</div> <div class="capa1" id="capa1" style="z-index:1" onMouseOver="mostrar(capa1)"> <div id="txtsubmenu1" onMouseOver="mostrartriangulo(triangless1);mostrar(ss1)" onMouseOut="ocultartriangulo(triangless1); mscara(ss1)"> <p>Submen 1</p> </div> <div id="txtsubmen2"> <p>Submen 2</p> </div> <div id="txtsubmen3"> <p>Submen 3</p> </div> </div>

<div class="capa2" id="ss1" style="z-index:1"> <p>Sub-submen 1</p> <p>Sub-submen 2</p> <p> Sub-submen 3</p> </div> <div class="zonaoculta" id="zonaoculta" style="z-index:0" onMouseOver="mscara(capa1); mscara(ss1)"></div> <img src="triangulo_malva.jpg" width="15" height="19" class="triangless1" id="triangless1" > <img src="triangulo_malva.jpg" width="15" height="19" class="triangless1" id="triangless2" > </body> </html> El script se divide en varias funciones que permiten mostrar u ocultar ciertos componentes del men (men, submen y tringulo de indicacin). Este script se basa en la visibilidad y ocultacin de los elementos, en funcin del sobrevuelo sobre otro elemento. El principio aproximacin/retroceso se emplea sobre todo para el tringulo que cambia de ndice de superposicin para aparecer por debajo de los elementos del men. La primera funcin ocultar() oculta todas las capas y el tringulo de indicacin por medio de la propiedad de visibilidad. Las otras funciones permiten, por su lado, mostrar u ocultar los elementos del men, transmitido como parmetro en el momento del sobrevuelo. De esta manera, cuando se sobrevuela el primer texto del submenu, el tringulo se hace visible y su ndice z-index toma el valor 2, lo cual permite pasar por encima de los mens y submens. Por el contrario, cuando el ratn deja de sobrevolar el primer texto del submen, el tringulo toma un valor de z-index igual a cero y pasa entonces por debajo del men. Hubiera sido posible ocultar el tringulo con la propiedad visibilidad; sin embargo, este script es un buen ejemplo de la mezcla de las propiedades de visibilidad y de superposicin.

7. Arrastrar y soltar (drag-and-drop)

Arrastrar y soltar permite tomar un objeto (generalmente una capa), al hacer clic en el, y desplazarlo oprimiendo el botn izquierdo del ratn. Una vez que est en la posicin deseada, solo hay que soltar el botn. No hay ninguna funcin de arrastrar y soltar en JavaScript. Para poder realizar esta accin, se debe encontrar la manera que permita realizar el desplazamiento. Ejemplo: realizar un script que permita hacer un arrastrar y soltar de una capa que corresponda a la etiqueta de una regin espaola en un mapa de Espaa.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Deslizar-Soltar</title> <script language="javascript"> var positionX=0, positionY=0; var dimX=0, dimeY=0; var mivar=1; var nuevaposicionX=0, nuevaposicionY=0; function comienzo(capa) { dimX=positionX-document.getElementById(capa).offsetLeft; dimY=positionY-document.getElementById(capa).offsetTop; mivar=0; } function desplazamiento(pagina) { if (document.all) { positionX=event.clientX; positionY=event.clientY; } else { positionX=pagina.paginaX; positionY=pagina.paginaY; } if(mivar!=1){ var nuevaposicionX=positionX-dimX; var nuevaposicionY=positionY-dimY; document.getElementById(capa1).style.left= nuevaposicionX+"px"; document.getElementById(capa1).style.top= nuevaposicionY+"px"; } } function parar(capa) { calcoDragDrop=""; mivar=1; } document.onmousemove=desplazamiento; document.onmouseup=parar; </script>

<style type="text/css"> .capa {position:absolute;left:400px;top:100px; cursor:move;width:75px;height:35px;font-size:10pt; font-weight:bold;font-family:arial;border:1px solid #999 } </style> <body estilo="height:100%"> <div id="capa1" class="capa" estilo="top:25px; left:931px; z-index:0; color:#009; background-color:#D5D5FF;" onMouseDown="comienzo(capa1)">Regin</div> <p><br /> <img src="mapa_mudo_espana.gif" width="600" height="490"> </p> </body> </html> El script comienza cuando se carga la pgina y se pone a cero el conjunto de las variables que se utilizan. La funcin comienzo() se ejecuta en el momento de hacer clic, lo cual permite recuperar las coordenadas del puntero respecto a la esquina superior izquierda de la capa y guardarla en dos variables dimX y dimY. Por la misma razn, la variable mivar toma el valor de 0 indicando de esta manera que la capa ha sido seleccionada. Cuando se desplaza el ratn, la funcin desplazamiento() comprueba el tipo de navegador y permite recuperar de dos maneras diferentes las coordenadas del puntero, en funcin de su tipo. Con Internet Explorer, se trata del mtodo pageX(), pageY(). En funcin de la posicin del puntero y si la variable mivar es diferente de cero (lo cual es normalmente el caso puesto que el usuario ha hecho clic en la capa), se tiene que calcular la nueva posicin correspondiente. Para poder hacer esto, se tiene que tomar la posicin del puntero y restarle la diferencia del clic en la capa (variable dimX y dimY). El resultado es aplicado inmediatamente a la capa pasando por los mtodosdocument.getElementById(capa1).style.top() ydocument.getElementById(ca pa1).style.left().

AJAX y JavaScript
Ante todo, hay que sealar que esta parte del libro no pretende explicar todo lo concerniente a AJAX ni permite de esta manera desarrollar con esta tecnologa un sitio ntegramente. Se trata simplemente de definir los elementos principales y conocer los principios de funcionamiento. Pero, qu es AJAX? Al igual que DHTML, AJAX (Asynchronous JavaScript And XML) es una mezcla de diferentes tcnicas. Con AJAX es posible efectuar recargas de datos que provienen del servidor, mantenindose siempre en la misma pgina. Un visitante puede continuar escribiendo los campos de un formulario mientras que se efecta un control en segundo plano para verificar los datos que se han escrito con los del servidor. Este tipo de funcionamiento, llamado asncrono, no es el nico puesto que la tecnologa AJAX permite igualmente consultar una base de datos en modo sncrono (en este caso la consulta se ejecuta sin que sea necesario

recargar las pgina o cargar otra, pero la introduccin simultnea de datos es imposible, lo cual reduce su utilizacin). En realidad, las pginas escritas con AJAX usan varias tecnologas:

El cdigo HTML que se mantiene como el elemento central de la pgina, ayudado por la
hojas de estilo para la presentacin de los datos.

EL DOM para el acceso a los elementos de la pgina, sobre todo con los
mtodosgetElementById o getElementByName.

El cdigo de programacin del lado del servidor, de tipo PHP o ASP, que permite
recuperar la informacin del servidor como el objeto XmlHttpRequest que permite controlar la consulta de datos en el servidor. Los datos que se recuperan se presentan bajo la forma de un simple archivo de texto o JavaScript e incluso XML y deben ser tratados con JavaScript para poder aparecer de manera correcta en la pgina. Como puede apreciarse, JavaScript se sita en el centro de diferentes tecnologas y juega un poco el rol de un jefe de orquesta que controla el conjunto de procesos. Al contrario de esta multitud de tecnologas, AJAX se basa esencialmente en un solo objeto llamado XmlHttpRequest.

1. El objeto XmlHttpRequest
Este objeto es idntico para todos los navegadores recientes, incluso si la declaracin es diferente entre Internet Explorer y los otros navegadores. Este objeto es relativamente antiguo, puesto que fue desarrollado por Microsoft desde 1998 y se implement en la versin 5 de Internet Explorer. Los otros navegadores han tenido en cuenta este objeto progresivamente. Por ello, es importante conocer la compatibilidad del navegador. Ejemplo: crear un script de verificacin de compatibilidad del navegador y mostrar el resultado en un cuadro de dilogo.

<script language="javascript"> if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); alert("Su navegador es compatible con AJAX"); } else if(window.ActiveXObject){ xhr=new ActiveXObject("Microsoft.XMLHTTP"); alert("Su navegador es compatible con AJAX"); } else {alert("Su navegador no es compatible con AJAX"); } </script> En principio se trata de intentar crear una nueva instancia para Firefox/Mozilla y luego de manera diferente para Internet Explorer (puesto que est basado en el componente ActiveX), si la primera no es suficiente.

Una vez determinada la compatibilidad, slo queda manipular XmlHttpRequest, para poder ejecutar la consulta de datos. Para esto. XmlHttpRequest dispone de varios mtodos y atributos.

2. Los atributos de XmlHttpRequest

Atributos Resultado

onreadystatechange Aplica una funcin a cada cambio de estado en el proceso de la consulta en modo asncrono. readyState Corresponde al estado del objeto durante todo el proceso de tratamiento de la consulta. Est compuesto por cuatro valores: 0 para no inicializado (Uninitialized), 1 para abierto (Open), 2 para enviado (Sent), 3 para en proceso de recepcin (Receiving) y 4 para realizado (Loaded). Indica que la respuesta deber ser enviada bajo forma de texto. Indica que la respuesta deber ser desuelta en formato XML. Corresponde al cdigo del estatus del servidor (404 para una pgina no encontrada y 200 para OK). Corresponde al mensaje que acompaa al cdigo de estado. Resultado Abandona la consulta y reinicia el objeto XmlHttpRequest.

responseText responseXML status

statusText Mtodo abort

getAllResponseHeaders() Corresponde a la cabecera http de la respuesta. getResponseHeader() open() Corresponde al valor de la cabecera indicada como parmetro. Permite la conexin con el servidor a travs de los parmetros del mtodo (GET, POST), de la URL y de tipo (sncrono o asncrono). Transmite una consulta al servidor segn los mtodos GET o POST. Asigna un valor a una cabecera que ser devuelta en el momento de la consulta.

send() setRequestHeader()

El conjunto de los atributos y mtodos permite trabajar con scripts escritos en JavaScript, para acceder a los datos presentes en el servidor sin que sea necesario recargar la pgina. Ah radica todo el poder de AJAX abriendo la va a eso que hoy se llama la Web 2.0. Para poder observar los resultados de los siguientes scripts, es importante trabajar en un sistema adecuado. Es necesario, por ejemplo, subir al servidor los archivos que componen los datos que se van a recuperar. Ejemplo: controlar la escritura en un campo de nombre de usuario con el objetivo de enviar un mensaje de advertencia, si el nombre ya ha sido tomado por otro usuario.

El archivo PHP: <?php require_once(../../Conexiones/conex1.php); ?> <?php mysql_select_db($database_conex1, $conex1); $query_Recordset1 = ("SELECT Usuarios.Identificador FROM Usuarios WHERE Usuarios.Identificador = ".$_GET["Identificador"].""); $Recordset1 = mysql_query($query_Recordset1, $conex1) or die(mysql_error()); $row_Recordset1 = mysql_fetch_row($Recordset1); $totalRows_Recordset1 = mysql_num_rows($Recordset1); //echo $Recordset1; if ($row_Recordset1>0) { echo yahasidotomado; } ?> El script PHP utiliza el parmetro (Identificador), reenviado por el archivo html, para extraer los datos gracias a la consulta en la base de datos. En el caso en que la consulta encuentre los elementos que corresponden a los criterios (es decir si $row_Recordset1>0), significa que existe ya un identificador idntico. En este caso, el script, devuelve la cadena de caracteres yahasidotomado como respuesta. El archivo con script JavaScript: <html> <head> <title>Ejemplo de script AJAX</title> <script language="javascript"> var resultado = ""; function verif(Identificador){ if (Identificador.length >= 4) { frespuesta(Identificador); } } function frespuesta(Identificador) { resultado = connectURL(control.php?Identificador==+Identificador); if(resultado=="yahasitotomado"); {

document.getElementById(respuesta).innerHTML = Este nombre de usuario no est disponible.; } document.getElementById(respuesta).innerHTML = Este identificador se encuentra disponible.; } function connectURL(url) { if (window.XMLHttpRequest) objXHR = new XMLHttpRequest(); else { if (window.ActiveXObject) objXHR = new ActiveXObject("Microsoft.XMLHTTP"); alert(objXHR); } objXHR.open("GET",url,false); objXHR.send(null); if (objXHR.readyState == 4) return objXHR.responseText; else return false; } </script> </head> <body> <form> <div id="respuesta"></div> <input type="text" name="Identificador" onKeyUp="verif(this.value);" /> </form> </body> </html> En este script, es la funcin verif() la que activa el proceso cada vez que se deja de pulsar una tecla del teclado. El control del identificador se efecta solamente si se han escrito al menos 4 caracteres. En este caso, la funcin frespuesta() toma el relevo. Define una variable llamada resultado que corresponde al resultado enviado por el archivo PHP, por medio de la funcinconnectURL() en la que la direccin del archivo y el criterio de interrogacin se pasan como parmetros. La funcin connectURL() comienza por comprobar el navegador para saber

si acepta el objeto XmlHttpRequest y construye el objeto objXHR. Luego se tiene que comprobar el estado de la conexin para saber si es posible enviar una consulta (objXHR.readyState == 4). Si tal es el caso, la funcin connectURL() devuelve la respuesta en forma de texto. Una vez que se ha obtenido la respuesta, la funcin frespuesta procesa el valor. En funcin del resultado del test, se enva un mensaje al calco por medio de la instruccin innerHTML. El poder de AJAX queda de esta manera demostrado; desde hace algunos meses el nmero de pginas con cdigo AJAX crece de manera exponencial. De hecho, como la moda, desarrollar en AJAX se ha convertido en una obligacin. Y como sucede en la mayora de estos casos, se puede encontrar AJAX incluso en pginas donde no era estrictamente necesario. Dado que el uso de AJAX multiplica las consultas a la base de datos, es conveniente limitar su utilizacin a casos muy precisos. Este script muestra igualmente que JavaScript no es un sublenguaje. Combinado con las recientes tecnologas, los scripts escritos con JavaScript pueden puede resultar muy complejos. Existe sin embargo una alternativa que permite simplificar la redaccin de este tipo de scripts. Es el uso de bibliotecas JavaScript que permiten descubrir nuevos usos.

Las bibliotecas JavaScript

Desde el comienzo de este libro, los principios de JavaScript se han aplicado para agregar mayor funcionalidad a la pgina HTML. Sin embargo, un desarrollo de este tipo exige una inversin de tiempo importante, lo cual puede resultar un poco desalentador. Afortunadamente, existen muchosframework (bibliotecas) JavaScript que se pueden descargar gratuitamente y que permiten no solamente ganar tiempo sino que ofrecen tambin muchas posibilidades suplementarias. El objetivo no es revisar todas las bibliotecas, sino simplemente mostrar su utilizacin y los principios de funcionamiento. Nos detendremos particularmente en la biblioteca script.aculo.us que permite realizar muchos efectos visuales y agregar fcilmente muchas funcionalidades (completado automtico, arrastrar y soltar...). Pero ante todo se debe describir la biblioteca Prototype, base de otrosframework, y en consecuencia, indispensable.

1. La biblioteca Prototype
La biblioteca Prototype es una biblioteca que permite simplificar la redaccin de scripts JavaScript. Las funcionalidades propuestas son algo as como una extensin de los mtodos JavaScript. Esta biblioteca ofrece muchos atajos de cdigo interesantes y permite simplificar igualmente las consultas AJAX. Esta biblioteca se encuentra http://www.prototypejs.org/download disponible en la direccin siguiente:

Esta biblioteca esta constituida de un solo archivo que se tiene que invocar cada vez que se usa la biblioteca con la siguiente lnea: <script lenguaje="JavaScript" src="rutadelarchivo/prototype.js"> Sera muy largo dar una descripcin detallada de la biblioteca Prototype. Sirve de base a otra biblioteca script.aculo.us, con muchas funcionalidades interesantes (sobre todo grficas) que vamos a detallar en el siguiente prrafo.

2. La biblioteca script.aculo.us
Esta biblioteca se puede descargar en la siguiente direccin: http://script.aculo.us/downloads La biblioteca est constituida de varios archivos clasificados en tres carpetas. La carpeta lib que contiene la biblioteca Prototype, necesaria para la utilizacin de los scripts de script.aculo.us.

La carpeta test contiene dos pginas que permiten visualizar y comprobar las funcionalidades de script.aculo.us. De esta manera, la pgina run_unit_tests permite verificar que los scripts se ejecutan correctamente en el navegador del test; se trata de dejar desarrollarse el test y controlar el mensaje de confirmacin para estar seguro de que todo funciona correctamente. Finalmente, la carpeta src tiene ocho archivos que corresponden al archivo de base scriptaculous.js as como siete mdulos correspondientes a las funcionalidades precisas: Archivo effects.js builder.js dragdrop.js sliders.js sound.js control.js unitest.js Efectos especiales. Manipulacin de los objetos HTML va DOM. Efectos de deslizar-soltar. Efectos de deslizar. Utilizacin de sonidos. Completado automtico. Test de los efectos. Funcionalidades

Para disponer de funcionalidades de scriptaculo.us, se debe cambiar el archivo correspondiente al efecto deseado o cambiar el archivo scriptaculous.js despus del archivo prototype.js. Las siguientes deben figurar en las pginas: <script language="javascript" src="prototype.js" > </script> <script language="javascript" src="scriptaculous.js"> </script> El archivo scriptaculous.js llama a los diferentes archivos (effects.js, sliders.js), en funcin de las exigencias del script de la pgina. Esto significa que todos los archivos se cargan, incluso antes de que se realice el ms mnimo proceso. Este aspecto puede resultar problemtico para los usuarios que no disponen de una velocidad de conexin alta (incluso si esta situacin resulta cada vez ms rara). Para reducir el tiempo de descarga, se puede llamar slo al archivo en cuestin. Es intil por ejemplo, cargar un archivo dragdrop si la pgina solo est compuesta por archivos de animacin. En este caso, se tiene que llamar slo al archivo correspondiente con la siguiente sintaxis: <script language="javascript" src="rutadelarchivo/scriptaculous.js?load=effects"></script> Por supuesto, los archivos js deben estar en el servidor. Gracias a esto, es posible acceder a los nuevos mtodos y las nuevas palabras claves. Para simplificar la presentacin, los siguientes scripts llaman a la biblioteca entera.

3. Los efectos visuales con script.aculo.us

En vez de presentar una lista de todos los efectos visuales, lo mejor es elaborar un script que permita aplicarlos todos. Para utilizar estos efectos, basta con respetar esta sintaxis: New Effect.nombredelefecto("nombreelemento",opciones) Donde nombredelefecto corresponde al efecto que desea utilizar entre la lista de los efectos disponibles, nombreelemento corresponde al elemento sobre el cual se aplica el efecto (generalmente un calco) y opciones corresponde a la configuracin del efecto (posicin, dimensin, etc.). Ejemplo: crear una pgina que permita aplicar los diferentes efectos sobre un bloque de texto.

<html> <head> <title>Test efectos con scriptaculos</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="/scriptaculous.js"></script> <script language="javascript"> var el="elemento1"; function subrayar() { new Effect.Highlight(el); } function desplazar() { new Effect.MoveBy(el,100,100); } function escalar() { new Effect.Scale(el,150); } function mover(){ new Effect.Shake(el); } function desaparecer() { new Effect.Fade(el); } function aparecer() { new Effect.Appear(el); }

function desplegar() { new Effect.BlindDown(el); } function plegar() { new Effect.BlindUp(el); } function huida() { new Effect.DropOut(el); } function reducir() { new Effect.Fold(el); } function inflar() { new Effect.Grow(el); } function pegar() { new Effect.Pulsate(el); } function nube() { new Effect.Puff(el); } function remover() { new Effect.Shrink(el); } function volver() { new Effect.Squish(el); } function interrumpir() { new Effect.SwichOff(el); }

</script> <style type="text/css"> .Estilo1 { left:800; top:200;

color: #FF0000; font-weight: bold; } </style> </head> <body> <div class="Estilo1" id="elemento1"> <div align="center">Texto</div> </div> <div align="center"> <table width="72%" border="0">

<tr> <td colspan="15"><div align="center">Efectos visuales de script.aculo.us </div></td> </tr> <tr> <td width="5%"><input type="button" name="Submit15" value="Escala" onClick="escala()"></td> <td width="5%"><input type="button" name="Submit13" value="Subrayar" onClick="subrayar()"></td> <td width="5%"><input type="button" name="Submit14" value="Desplazar" onClick="desplazar()"></td> <td width="5%"><input type="button" name="Submit" value="Mover" onClick="mover()"></td> <td width="7%"><input type="button" name="Submit2" value="Desaparecer" onClick="desaparecer()"></td> <td width="7%"><input type="button" name="Submit3" value="Aparecer" onClick="aparecer()"></td> <td width="6%"><input type="button" name="Submit4" value="Plegar" onClick="plegar()"></td> <td width="7%"><input type="submit" name="Submit5" value="Desplegar" onClick="desplegar()"></td> <td width="6%"><input type="button" name="Submit6" value="Huir" onClick="huida()"></td> <td width="10%"><input type="button" name="Submit7"

value="Reducir" onClick="reducir()"></td> <td width="11%"><input type="button" name="Submit8" value="Inflar" onClick="inflar()"></td> <td width="8%"><input type="button" name="Submit9" value="Pegar" onClick="pegar()"></td> <td width="9%"><input type="button" name="Submit10" value="Nube" onClick="nube()"></td> <td width="6%"><input type="button" name="Submit11" value="Remover" onClick="remover()"></td> <td width="18%"><input type="button" name="Submit12" value="Volver" onClick="volver()"></td> </tr> </table> </p> </div> </body> </html> Este script se ejecuta cuando se carga la pgina. Despus de haber cargado los dos archivos necesarios para las funcionalidades de la biblioteca scriptaculo.us, el script define una variable que permite economizar la escritura para las siguientes manipulaciones. El conjunto de los efectos aplicados al objeto puede ser iniciado por un clic en el botn donde figura el nombre del efecto. La biblioteca script.aculo.us, adems de estos efectos visuales bastantes impresionantes, permite dominar las tcnicas JavaScript ms avanzadas. La primera de ellas ya ha sido detallada anteriormente, pero conviene comparar la complejidad de este script con la simplicidad de utilizacin ofrecida por script.aculo.us.

4. Arrastrar y soltar con script.aculo.us

La creacin de arrastrar y soltar con script.aculo.us es de una simplicidad desconcertante, adems de ofrecer muchas alternativas gracias a las opciones. El mtodo que se debe utilizar debe seguir dos pasos. En un primer momento, se trata de indicar cules son los elementos que pueden ser desplazados y en segundo lugar, cules son los designados para recibirlos. La sintaxis que debe seguirse, cuando se designan los objetos que deben desplazarse es la siguiente: new Draggable("id del objeto que se desplaza", {opciones}) ; Las opciones disponibles son las siguientes: Nombre de la opcin constraint: "horizontal" "vertical" Funcin Limita el desplazamiento del objeto en sentido horizontal o vertical.

Nombre de la opcin endeffect:function() ghosting: "true" "false" handle: "true" "false" revert: "true" "false"

Funcin Indica la posible funcin que debe ejecutar al final del efecto. Crea y desplaza un clon del elemento. Indica si un controlador de desplazamiento debe ser utilizado. Indica si el elemento debe volver a su posicin inicial despus de haber soltado el botn del ratn. Indica la posible funcin que se debe ejecutar cuando se devuelve el elemento revert. Indica una cuadrcula de pxeles segn el cual el elemento se desplaza. Indica la posible funcin que se ejecutar al comienzo del efecto. Indica el ndice de posicionamiento del elemento segn el eje z.

reverteffect:

snap:[x,y] starteffect: zindex:(1)

Una vez que se han definido los elementos que se desplazarn, se tiene que indicar quin los recibir. Si el elemento esperado se coloca correctamente, puede entonces ejecutarse un efecto visual o mostrar un cuadro de dilogo. La sintaxis que permite definir un objeto destino es la siguiente: droppables.add("id que se desplazar", {opciones}) ; Las opciones disponibles son las siguientes: Nombre de la opcin accept: "nombre de la (las) clase(s)" [clase1,classe2] containment: "elemento" [elemento1,lmento2] hoverclass: Funcin Indica los elementos autorizados por el objeto definido. Es la clase que corresponde al objeto o a los objetos aceptados. Indica el objeto definido y los elementos aceptados.

Permite modificar la clase del objeto definido cuando un elemento pasa por debajo. Una funcin puede ejecutarse si el objeto definido est cubierto ms del 50% de la superficie en la direccin especificada. Ejecuta la funcin, cuando un elemento especificado cubre el objeto de destino con un porcentaje que ha especificado en los parmetros. Ejecuta la funcin cuando el elemento es soltado en el destino.

overlap: "horizontal" "vertical"

onHover:funcin(elemento,destino, porcentaje

OnDrop:funcin(elemento,destino)

Ejemplo: crear un efecto de arrastrar y soltar que permita desplazar dos capas en un archivo determinado. Si el objeto corresponde a la buena respuesta, un cuadro de dilogo aparece y un efecto se aplica al archivo.

<html> <head> <script language="javascript" src="prototype.js" > </script> <script language="javascript" src="scriptaculous.js"> </script> </head> <body> <style type=text/css> .objeto1 {background-color:#993399;height:100px;width:100px; z-index:1} .objeto2{background-color:#336666;height:100px;width:100px; z-index:1} .archivodestino {border-right:#000000 2px solid; border-top: #000000 2px solid; border-left:#000000 2px solid;height:200px;width:200px; left:200px;top:200px;border-bottom:#000000 2px solid} </style> <div class=objeto1 id=objeto1>Objeto 1</div> <div class=objeto2 id=objeto2>Objeto 2</div> <div class=archivodestino id=archivodestino> Objeto destino</div> <script language="javascript"> new Draggable("objeto1"); new Draggable("objeto2",{revert:true}); Droppables.add("archivodestino", { accept: "objeto1", onDrop: function() { new Effect.Highlight("archivodestino"); alert("Con scriptaculous, el arrastrar-soltar es fcil"); new Effect.MoveBy("archivodestino",100,100)}}); </script> </body> </html>

Este script se ejecuta en el momento de cargarse la pgina. Tal como sucedi anteriormente, los dos archivos de la biblioteca script.aculo.us se invocan desde el principio. Luego, los estilos CSS de cada objeto (objeto1, objeto2 y el objeto de destino) se definen y el script permite el desplazamiento de los objetos gracias a la instruccin new Draggable. En este caso, la opcin revert:true indica que el objeto deber retomar su posicin inicial despus del desplazamiento. Luego, el script indica el objeto que debe recibir los otros objetos por la utilizacin del mtodo Droppables.add, que define los eventos cuando el objeto es aceptado por el objeto de destino. El evento onDrop permite modificar la apariencia del objeto definido, mostrar un mensaje en un cuadro de dilogo y modificar la posicin del objeto definido antes de recomenzar. La ventaja del uso de script.aculo.us es incontestable, sobre todo cuando se trabaja con efectos visuales y grficos, pero este no es el nico caso en el que esta biblioteca puede ser de gran ayuda. De hecho, la aplicacin de la tecnologa AJAX se simplifica enormemente.

5. El completado automtico con script.aculo.us

Script.aculo.us pone a nuestra disposicin un poderoso objeto que permite controlar fcilmente el completado automtico (mltiples propuestas en el momento de escribir en un campo), por medio de la tecnologa AJAX. Se trata del objeto new Ajax.autocompleter, cuya sintaxis es la siguiente: new Ajax.Autocompleter("camposugerencia","visualizacin","url"); Donde camposugestion corresponde al campo de un formulario que recibe las sugerencias, visualizacin en el elemento que debe mostrarlos y la url al archivo (generalmente el PHP que permite extraer y componer la lista de sugerencias. Las sugerencias pueden ser devueltas por:

un simple archivo escrito en php compuesto por una matriz, una base de datos (MySQL con PHP) interrogada por una consulta.
El primer tipo de utilizacin es mucho ms fcil. Ejemplo 1: crear un script que proponga una lista de nombres que corresponden a lo que se ha escrito en el campo de formulario. El archivo PHP est compuesto por los valores que se deben devolver bajo la forma de una matriz.

El script del archivo consultasimple.php: <?php header(Content-type: text/html; charset=iso-8859-1); $identificadores = array(antonio,andres,enrique,fernando, isabel,natalia,hctor,); echo "<ul>\n"; foreach ($identificadores as $identificador){ if (stripos($identificador, $_POST[identificador]) === 0){ echo " } <li>$identificador</li>\n";

} echo "</ul>"; ?> La primera lnea del script permite indicar si se trabaja a partir de un juego de caracteres 8859-1, que permite devolver los caracteres acentuados. Luego, el script genera una matriz en la cual los nombres se escriben. Cada valor es entonces comparado con la variable devuelta por la pgina. Cuando los elementos pueden ser devueltos, componen una lista gracias a la utilizacin de la etiqueta <li>. El script del archivo html: <html> <head> <title>Completado automtico con scriptaculous</title> <meta http-equiv="content-type" content="text/html; charset=ISO8859-15"> <script language="javascript" src="prototype.js" > </script> <script language="javascript" src="scriptaculous.js"> </script> <style type="text/css"> .proposiciones {position:absolute;background-color:#CCFFFF;border:1px solid#330066;margin:0px;padding:0px;} .proposiciones ul {list-style-type:none;margin:0px; padding:0px;overflow:auto} .proposiciones ul li.selected {background-color:#6699FF; color:#FFFFFF;font-weight:bold} .proposiciones ul li {list-style-type:none;display:block;margin:0px; padding:2px;cursor:pointer} </style> <form action="" method="get" name="form1" id="form1">Escriba un nombre de usuario:<input name="identificador" type="text" id="identificador" size="20" maxlength="20" /> <div id="identificador_proposiciones" class="proposiciones"></div> </form> <script language="javascript"> new Ajax.Autocompleter("identificador","identificador_proposiciones", "consultasimple.php",{paramName:identificador,minChars:1}); </script>

</body> </html> El script comienza con la llamada a las bibliotecas prototype y script.aculo.us, necesarias para la utilizacin del objeto new Ajax.Autocompleter. Luego, es necesario definir varios estilos CSS que permitan presentar de manera correcta la lista de sugerencias. Despus de la definicin del campo de formulario, el script JavaScript utiliza el objeto new Ajax.Autocompleter indicndole:

para qu campo debe lanzarse el completado automtico (en este caso el campo nombre
de usuario), las sugerencia debern ser presentadas (en este caso la capa indentificador_proposiciones), a partir de qu archivo los datos sern devueltos (en este caso el archivo consultasimple.php).

cmo

El parmetro devuelto a este archivo corresponde al nombre que figura despus de paramName con un nmero mnimo de caracteres (definido en este caso por minChars:1). Ejemplo 2: crear un script que proponga una lista de nombres que correspondan a lo que se ha escrito en el campo de formulario. El archivo PHP sirve de soporte a la consulta SQL que permite la extraccin de los valores correspondientes a la cadena de caracteres escrita en el archivo completoautomatico.html. Este se mantiene idntico, aparte de la url del que toma el valor consultacompleja.php en lugar de consultasimple.php. El script del archivo consultacompleja.php es el siguiente: <?php require_once(../../Conexiones/conex1.php); ?> <?php header(Content-type: text/html; charset=iso-8859-15); mysql_select_db($database_conex1, $conex1); $query_Recordset1 = "SELECT Ref_Usuario, Identificador FROM Usuarios WHERE Identificador LIKE ".$_POST[identificador]."%"; $Recordset1 = mysql_query($query_Recordset1, $conex1) or die(mysql_error()); $result = mysql_query($sql); echo "<ul id=\"mylist\">\n"; while($data = mysql_fetch_assoc($Recordset1)) { echo "<li id=\"item_" . $data[Ref_Usuario] . "\">" . $data[Identificador] . "</li>\n"; } echo "</ul>"; ?> <?php

mysql_free_result($Recordset1); ?> Las primeras lneas del archivo permiten la conexin a la base de datos. Es importante definir qu juego de caracteres debe funcionar (en este caso debe ser el juego cuyo cdigo es 885915 para interpretar los caracteres acentuados). El script permite calcular el nmero de resultados que se debe enviar y construir la lista de valores gracias a la etiqueta <li>. En este caso, la tabla MySql contiene los mismos valores que la matriz PHP que se ha creado anteriormente, el resultado debe ser entonces idntico. La ventaja de esta solucin reside en el hecho de que ya no es obligatorio cambiar, agregar o eliminar los valores propuestos directamente en el cdigo, lo cual simplifica el mantenimiento de esta funcionalidad. Adems de la bibliotecas Prototype y Script.aculo.us, existen muchas otras bibliotecas con funcionalidades igual de interesantes. Se puede citar, por ejemplo, la biblioteca Dojo (disponible en la direccin http://dojotoolkit.org/downloads) que contienen muchas herramientas grficas como la presentacin en arborescencia. En resumen, un vasto campo de descubrimientos y de desarrollo en perspectiva.