IntroduccinJavaScriptConceptos bsicos y avanzadosEste libro sobreJavaScriptest dirigido a todos aquellos que desean aumentar lainteractividadde sus sitios Web. El libro tiene dos objetivos: en primer lugar,dominar las basesde JavaScript para poder trabajar con los scripts ms frecuentes en la red y, en segundo, descubrir elnuevo potencial de JavaScriptcuando se utiliza con las hojas de estilo (CSS), el DHTML,AJAXo con bibliotecascomo PrototypeoScript.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 enuna 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 GUTIERREZDespus de haber trabajado muchos aos como formador,Emmanuel Gutierrezes 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 JavaScriptHistorial y versiones de JavaScriptLo 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 lospop-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 publicacinVersin de JavaScriptNavegadores compatibles

19951.0Internet Explorer 3.0Netscape Navigator 2.0

19961.1Internet Explorer 4.0Netscape Navigator 3.0

19971.2Internet Explorer 4.0Netscape Navigator 4.0

19981.3Netscape Navigator 4.5

19991.4Internet Explorer 6.0Netscape Navigator 6.0

20001.5Netscape Navigator 6.0

20051.6Firefox 1.0

20061.7Firefox 2.0Internet 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 JavaScriptComo 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 concepcinLas 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 pruebaEs 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. 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:

al final del 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:

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 etiquetasyubicadas justo despus del cdigo.

document.write ("Hola");

Su navegador no comprende el cdigo JavaScriptEn este ejemplo, el navegador mostrarHolasi es compatible o el texto que se encuentra entre las etiquetasysi no lo es.Una vez que se han insertado las dos etiquetas y el cdigo correspondiente, slo queda guardar sus pginas gracias al menArchivo - 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 JavaScriptHTML y JavaScriptAnteriormente 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 JavaScriptLos 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:

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 cdigoEn 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 minsculasUnas 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 JavaScriptMiobjetono es lo mismo quemiobjeto.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 comentariosTal 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:

//Esto es un comentario en una sola lnea

/* Esto es un comentarioEn mltiples lneas */

En algunos editores, los comentarios aparecen con un color diferente al del cdigo.3. El punto y comaCada 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 tabulacinCuando 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.

var i,j=0;for (i=0;i12;alert("El resultado del test es: " + respuesta);

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.

var respuesta=5 !=12;alert("El resultado del valor es: " + respuesta);

3. LgicosSe 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.OperadoresNombreRolEjemploResultado

&&YPermite concatenar varias condiciones para una comparacin. Devuelve true si se renen las dos condiciones.5 es superior a 4 e inferior a 6True

||OVerifica que una u otra de las condiciones se cumple. Enva true si es el caso.5 es superior a 4 o inferior a 3True

!NoVerifica que la condicin de la comparacin no ha sido respetada. Enva true si es el caso.5 es superior a 6True

Ejemplo 1: mostrar el resultado de una comparacin doble (5Diferencia

Rango10< >=Comparacin

Rango 9== !=Comparacin

Rango 8&Y bit a bit

Rango 7^O exclusivo

Rango 6|O inclusivo

Rango 5&&Y lgico

Rango 4||O lgico

Rango 3?:Condicional ternario

Rango 2= += -= = &= ^= |=Asignacin

Rango 1,Separador

Ejemplo: mostrar en un cuadro de dilogo el contenido de la adicin de 1 y de 2 multiplicado por 3.

resultado=1+2*3;alert("El resultado del clculo es: "+resultado);

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.

resultado=(1+2)*3;alert("El resultado del calculo es: "+resultado);

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 controlLas instrucciones condicionalesEstas 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. ifLa 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 claveelse(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.

continuacin=confirm("Desea continuar? ");if (continuacin==true) {alert("Qu bien ");}else {alert("Que lstima");}

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 mtodoconfirm(). 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 tipoalert()para agradecrselo. En caso contrario, es decir, si el usuario hace clic enCancelar(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:

continuacin=confirm("Desea continuar? ");(continuacin==true)? alert("Qu bien! ") : alert("Qu lstima");

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.

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");}

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 !=.

opinin=confirm("Le gusta JavaScript? ");continuacin=confirm("Desea continuar? ");if (continuacin==true && opinin==true) {alert("Qu bien! ");}else {alert("Qu lstima");}

El mismo script, utilizando el operador o || que permite verificar slo una condicin.

opinin=confirm("Le gusta JavaScript? ");continuacin=confirm("Desea continuar? ");if (continuacin==true || opinin==true) {alert("Qu bien! Aunque falta confirmarlo");}else {alert("Qu lstima");}

Otra variante utilizando el operador lgico No !=, explicado en el captulo Utilizacin de la variables, constantes y operadores.

opinin=confirm("Le gusta JavaScript? ");continuacin=confirm("Desea continuar? ");if (continuacin!=false && opinin!=false) {alert("Qu bien! ");}else {alert("Qu lstima");}

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 ternarioPara 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.

var mivar=prompt("Qu valor desea tomar para hacer una pruebacon el operador ternario ?");(mivarpasswordZona de contrasea

< INPUT TYPE ="hidden">hiddenCampo oculto

< INPUT TYPE ="file">fileUploadZona de seleccin de un archivo

JavaScript permite efectuar controles sobre estos objetos:1. Manipulacin del campo de textoLos 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 utilizartextarea.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.valuedonde document es facultativo.PropiedadesDescripcin

valueCorresponde a la informacin escrita en el campo.

defaultValueCorresponde al valor que se muestra por defecto en el campo del texto.

MtodosDescripcin

select()Muestra el texto donde se encuentra el cursor con inversin de color.

blur()Libera el campo de texto del cursor.

focus()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.

manipulacion_campos_texto

function manipcampotexto(){form1.campo1.value=;form1.campo2.select();}

campo1 campo2 campo3

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 funcinmanipcampotexto()en este caso es el clic en el campo 3, identificado poronFocus.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:

Control campo texto

function controlvacio(){if(form1.nombre.value ==) {alert("este campo est vaco");}else {alert("este campo no est vaco");}}

La funcincontrolvaciocomienza por un test del valorif(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 instruccinif(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 textareaLos campos de tipotextareason idnticos a los campos de texto, pero son utilizados en los casos en los que la cadena es demasiado larga para una sola linea.PropiedadesDescripcin

valueValor del elemento.

defaultValueCorresponde al valor que se muestra por defecto en el campo textarea.

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

manipulacion_campos_textarea

function manipcamptextarea(){form1.Total_campo.value=form1.campo1.value+form1.campo2.value+\n+form1.campo3.value;}

campo1 campo2 campo3 Total campo

La funcinmanipcamptextarea()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 botnConcatenar.3. Controlar las casillasEn 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.PropiedadesDescripcin

checkedValor booleano igual atruecuando la casilla est marcada yfalsecuando no lo est.

defaultCheckedValor booleano correspondiente a la casilla marcada (es decir, el valortrue) al 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" (&&).

Control_casilla

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");}

Qu medio de transporte utiliza normalmente parair al trabajo? Caminar Coche personal

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 opcinLos 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 bsicasDescripcin

checkedValor booleano igual atruecuando el botn est activado yfalsecuando no lo est.

defaultCheckedValor booleano correspondiente a la casilla marcada (es decir, el valortrue) al cargar el formulario (es el valor predeterminado).

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

Control_boton_radio

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");}}

Conoce Javascript? Si
Un poco
Para nada

La funcincontrolbotonradio()comprueba los botones de opcin, llamados conocer_Javascirpt y seguidos del nmero de indice entre corchetes. En funcin de la propiedadchecked, un mensaje se muestra en un cuadro de dilogo.5. Controlar los valores de seleccin de una listaEl 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 instruccinselectedIndex.Propiedades bsicasDescripcin

lengthCorresponde al nmero de valores en la lista.

selectedIndexCorresponde a un valor en la lista, identificado por un nmero en el indice. El indice comienza en cero.

defaultSelectedValor 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.

Control_lista

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");}}

Cul era la velocidad mxima del TGV francs cuando bati el rcordel 3 de abril del 2007 ? 630,1 Km/h 477,8 Km/h 574,8 Km/h

El script se ejecuta al hacer clic en el botncomprobar. La funcincontrolistacomprueba 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 mltipleLas 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 bsicasDescripcin

lengthCorresponde al nmero de valores en la lista.

selectedIndexCorresponde a un valor en la lista identificado con su nmero en el indice. El indice comienza en cero.

defaultSelectedValor predeterminado seleccionado en la lista.

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

manipulacion_lista_multiple

function maniplistamultiple(){var ciudad="";nb=form1.lista_ciudad.length;i=form1.lista_ciudad.selectedIndex;for (i = 0;i0) {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, comprobandodocument.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:

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));}

El primer paso consiste en comprobar la presencia de la cookie que nos interesa. En este caso, la cookie se llamamicookie. 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 llamadacomienzo. 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 mtodoindexOf()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 llamadafin. 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 cookieLa 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.

Modificar una cookie

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-209900: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-209900:00:01 GMT;domain=midominio.com;path=/";var comienzo = document.cookie.indexOf("micookie" );}

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 quemicookiecontiene 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 mtodoparseInt(). La variablecookienumpuede 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 cookiePara 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.

if (document.cookie.length>0) {alert("Mi cookie ya est presente");document.cookie="micookie=mivalor;expires=Thu,01-Jan-1980 00:00:01GMT;domain=www.midominio.com;path=/";alert("La cookie micookie ha sido eliminada");}else {alert("La cookie micookie no est presente");}

Como siempre, hay que comprobar la presencia de la cookie por medio dedocument.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 CSSHTML, 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 Interfacepara 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 DOMCon 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 herramientaDOM inspectorincluida 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 menHerramientasy 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 menVery la opcinBarra 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 objetodocument. La sintaxis que se debe utilizar en la siguiente:document.getElementById ;Ejemplo: determinar si el navegador utilizado es compatible con el DOM.

if (document.getElementById) {alert("El navegador es compatible");}else {alert("Lamentablemente su navegador no es compatible")}

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 sintaxisdocument.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 elementosCon el DOM, existen unos mtodos que permiten acceder directamente a los elementos de una pgina, sin pasar por el mtodo de sintaxis clsicawindow.document.formCuatro mtodos principales permiten una manipulacin de los elementos que componen una pgina:MtodosResultado

getElementById()Selecciona un elemento en funcin de su identificador.

getElementsByName()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 mtodogetElementById()necesita la utilizacin del valor de la etiquetaidpara 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.

Acceso al DOM

function acceso(){document.getElementById(elemento1).innerHTML="Texto modificado porDHTML";}

Texto del elemento 1

alert(document.getElementById(elemento1).innerHTML);

El script se ejecuta cuando se hace clic en el botnModificar. 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 funcinaccesopermite 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.

var numero=document.all.length;alert("el nmero de elementos presentes en el cdigo de esta pginaes de:"+numero);for (i=0; iEl 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:

Ejemplo de script AJAX

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 usuariono est disponible.;}document.getElementById(respuesta).innerHTML = Este identificadorse 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;elsereturn false;}

En este script, es la funcinverif()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 funcinfrespuesta()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 funcinconnectURL()comienza por comprobar el navegador para saber si acepta el objetoXmlHttpRequesty construye el objetoobjXHR. 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 funcinconnectURL()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 instruccininnerHTML.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 JavaScriptDesde 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 PrototypeLa 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 disponible en la direccin siguiente: http://www.prototypejs.org/downloadEsta biblioteca esta constituida de un solo archivo que se tiene que invocar cada vez que se usa la biblioteca con la siguiente lnea:

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.usEsta biblioteca se puede descargar en la siguiente direccin: http://script.aculo.us/downloadsLa biblioteca est constituida de varios archivos clasificados en tres carpetas. La carpetalibque contiene la biblioteca Prototype, necesaria para la utilizacin de los scripts de script.aculo.us. La carpetatestcontiene dos pginas que permiten visualizar y comprobar las funcionalidades de script.aculo.us. De esta manera, la pginarun_unit_testspermite 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 carpetasrctiene ocho archivos que corresponden al archivo de base scriptaculous.js as como siete mdulos correspondientes a las funcionalidades precisas:ArchivoFuncionalidades

effects.jsEfectos especiales.

builder.jsManipulacin de los objetos HTML va DOM.

dragdrop.jsEfectos de deslizar-soltar.

sliders.jsEfectos de deslizar.

sound.jsUtilizacin de sonidos.

control.jsCompletado automtico.

unitest.jsTest de los efectos.

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:

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:

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.usEn 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)Dondenombredelefectocorresponde al efecto que desea utilizar entre la lista de los efectos disponibles,nombreelementocorresponde al elemento sobre el cual se aplica el efecto (generalmente un calco) yopcionescorresponde a la configuracin del efecto (posicin, dimensin, etc.).Ejemplo: crear una pgina que permita aplicar los diferentes efectos sobre un bloque de texto.

Test efectos con scriptaculos 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); } .Estilo1 {left:800;top:200; color: #FF0000; font-weight: bold;}

Texto Efectos visuales descript.aculo.us

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.usLa 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 opcinFuncin

constraint: "horizontal" "vertical"Limita el desplazamiento del objeto en sentido horizontal o vertical.

endeffect:function()Indica la posible funcin que debe ejecutar al final del efecto.

ghosting: "true" "false"Crea y desplaza un clon del elemento.

handle: "true" "false"Indica si un controlador de desplazamiento debe ser utilizado.

revert: "true" "false"Indica si el elemento debe volver a su posicin inicial despus de haber soltado el botn del ratn.

reverteffect:Indica la posible funcin que se debe ejecutar cuando se devuelve el elemento revert.

snap:[x,y]Indica una cuadrcula de pxeles segn el cual el elemento se desplaza.

starteffect:Indica la posible funcin que se ejecutar al comienzo del efecto.

zindex:(1)Indica el ndice de posicionamiento del elemento segn el eje z.

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 opcinFuncin

accept: "nombre de la (las) clase(s)" [clase1,classe2]Indica los elementos autorizados por el objeto definido. Es la clase que corresponde al objeto o a los objetos aceptados.

containment: "elemento" [elemento1,lmento2]Indica el objeto definido y los elementos aceptados.

hoverclass:Permite modificar la clase del objeto definido cuando un elemento pasa por debajo.

overlap: "horizontal" "vertical"Una funcin puede ejecutarse si el objeto definido est cubierto ms del 50% de la superficie en la direccin especificada.

onHover:funcin(elemento,destino, porcentajeEjecuta la funcin, cuando un elemento especificado cubre el objeto de destino con un porcentaje que ha especificado en los parmetros.

OnDrop:funcin(elemento,destino)Ejecuta la funcin cuando el elemento es soltado en el 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.

.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 2pxsolid; border-left:#000000 2px solid;height:200px;width:200px;left:200px;top:200px;border-bottom:#000000 2px solid}

Objeto 1Objeto 2 Objeto destino

new Draggable("objeto1");new Draggable("objeto2",{revert:true});Droppables.add("archivodestino", { accept: "objeto1",onDrop: function() { new Effect.Highlight("archivodestino"); alert("Conscriptaculous, el arrastrar-soltar es fcil");new Effect.MoveBy("archivodestino",100,100)}});

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 instruccinnew Draggable. En este caso, la opcinrevert:trueindica 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 mtodoDroppables.add, que define los eventos cuando el objeto es aceptado por el objeto de destino. El eventoonDroppermite 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.usScript.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 objetonew Ajax.autocompleter, cuya sintaxis es la siguiente:new Ajax.Autocompleter("camposugerencia","visualizacin","url");Dondecamposugestioncorresponde 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:

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.El script del archivo html:

Completado automtico con scriptaculous

.proposiciones {position:absolute;background-color:#CCFFFF;border:1pxsolid#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}

Escriba un nombrede usuario:

new Ajax.Autocompleter("identificador","identificador_proposiciones","consultasimple.php",{paramName:identificador,minChars:1});

El script comienza con la llamada a las bibliotecas prototype y script.aculo.us, necesarias para la utilizacin del objetonew 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), cmo 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).El parmetro devuelto a este archivo corresponde al nombre que figura despus deparamNamecon 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:

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 8859-15 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. 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.