JavaScript (Conceptos Básicos y Avanzados)
JavaScript (Conceptos Básicos y Avanzados)
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.
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
1997
1.2
1998 1999
1.3 1.4
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.
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);
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.
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.
<!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.
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.
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.
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.
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.
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
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.
<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.
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.
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.
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
<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.
<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.
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.
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
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
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
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.
<=
True
Operadores
Nombre
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
>=
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
||
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.
new
New
new mivariable
this
This
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
void
void
Ejecuta una instruccin que no enva ningn valor. Permite aplicar un valor a una
?:
Operador
(mivariable<0)
Devuelve true si el
Operadores
Funcin
Ejemplo
?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.
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.
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.
<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".
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.
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.
<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.
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 ; }
<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()
<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.
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.
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);
</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.
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
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.
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.
button, checkbox, fileUpload, layer, password, radio, reset, select, submit, text, textArea, window form
OnFocus
OnReset
image
abort
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.
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);
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.
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
Mtodos focus()
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> <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.
<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.
defaultChecked Valor booleano correspondiente a la casilla marcada (es decir, el valor true) al
Propiedades
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> </p>
<table width="643" border="0"> <tr> <td width="633">Qu medio de transporte utiliza normalmente para
</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> </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.
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> </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> </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.
Ejemplo: abrir un cuadro de dilogo que muestre un mensaje diferente en funcin de una seleccin en una lista desplegable.
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> </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.
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.
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>
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 [email protected]" 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 [email protected]. 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.
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
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.
<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,
Propiedad
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
frames
history
innerHeight
innerWidth
length
location
locationbar
menubar
name
opener
Corresponde al nombre de la ventana que ha creado una ventana por medio del mtodo Open().
outerHeight
outerWidth
Propiedad
Resultado
pageXoffset
Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera.
pageYoffset
parent
personalbar
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
window
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
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()
blur()
close()
confirm()
find()
focus()
forward()
home()
Carga la pgina definida como pgina principal en el navegador. Desplaza la ventana activa.
moveTo()
open()
print()
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
Reconocido por Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera.
resizeTo()
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()
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.
alwaysRaised
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
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
menubar
Funcin
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
status
toolbar
width
</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");
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.
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]
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].
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.
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
global
Indica si la bsqueda debe detenerse cuando se encuentra por primera vez un elemento igual a = "g".
h. Los mtodos
Mtodo Resultado Reconocido por
Mtodo test()
Reconocido por Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Internet Explorer, Mozilla, Firefox, Opera. Mozilla, Firefox, Opera.
exec()
match()
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.
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.
[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>
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>
<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>
<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> </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>
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
LOG2E
Devuelve el logaritmo de 2.
LOG10E
PI
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()
atan()
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()
Mtodo
Resultado
round()
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()
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> </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> </p> <p> </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
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.
<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.
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.
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:
<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. {
<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).
<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.
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.
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.
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.
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>
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.
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 posicionamiento de la leyenda de la tabla. Define si se muestran (show) o no (collapse) las celdas vacas. Define un ancho fijo o variable.
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.
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.
<!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"> </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"; } }
</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)">
<!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> </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.
<!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";
<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.
"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.
<!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.
<!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.
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.
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.
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.
<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); }
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.
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:
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.
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.
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.