JavaScript(Conceptos Básicos y Avanzados)

(1)

Introducción

JavaScript

Conceptos básicos y avanzados

Este libro sobre JavaScript está dirigido a todos aquellos que desean aumentar la interactividad de sus sitios Web. El libro tiene dos objetivos: en primer lugar, dominar las

bases de JavaScript para poder trabajar con los scripts más frecuentes en la red y, en segundo,

descubrir el nuevo potencial de JavaScript cuando se utiliza con las hojas de estilo (CSS), el

DHTML, AJAX o con bibliotecas como Prototype o Script.aculo.us.

Una vez descrita la sintaxis de base, el libro se apoya en ejemplos significativos (gestión de formularios, del tiempo, de menús de navegación, autocompletación), para comentarlos y demostrar la omnipresencia de JavaScript en una arquitectura Web 2.0.

El libro acompaña al lector a través de un recorrido que va de los principios de JavaScript hasta

el descubrimiento de los conceptos más avanzados.

Los ejemplos y los scripts citados en el libro se pueden descargar en esta página.

Emmanuel GUTIERREZ

Después de haber trabajado muchos años como formador, Emmanuel Gutierrez es actualmente consultor informático y director de un centro de formación creado por él mismo. Sus diferentes intervenciones en empresas entorno al tema de la creación de sitios web se suman a su experiencia pedagógica, para dar al lector un libro totalmente efectivo para dominar el desarrollo en JavaScript.

(2)

Conceptos básicos e

introducción a JavaScript

Historial y versiones de JavaScript

Lo menos que se puede decir es que JavaScript es un lenguaje muy polémico. En los comienzos de Internet, las páginas web estaban compuestas únicamente de texto y de vínculos hipertexto, limitando así su uso a un ámbito científico y universitario. Por otro lado, las limitaciones técnicas de la época, sobre todo las relacionadas con la velocidad de conexión, no permitían proponer algo más. Es a mediados de 1990 cuando la necesidad de disponer de páginas web más amigables y con más servicios se hizo más fuerte. Brendan Eich, por aquel entonces ingeniero informático de Netscape, tuvo el encargo de desarrollar un nuevo navegador web. Aprovechó la ocasión para desarrollar un lenguaje de Script, originalmente denominado LiveScript, que debía ser en teoría un complemento de Java (estos dos lenguajes suelen confundirse debido a su denominación casi idéntica a pesar de no tener casi nada en común). El objetivo de este lenguaje de programación era desarrollar páginas web más atractivas y amigables para el usuario, sin tener que usar para ello una programación en el lado del servidor. Para poder realizar esto, era necesario que el navegador pudiera interpretar el código JavaScript. Netscape decide entonces implementar de manera nativa LiveScript en la versión 2.0 de su navegador (bautizado entonces Netscape Navigator) a partir del año 1995. Comienza entonces un período de intensa producción de lenguajes de script y Microsoft no tuvo otra opción que desarrollar su propia versión. Nació entonces en 1996 Jscript, integrado en su navegador Internet Explorer y cuya última versión actualmente es Jscript.Net. Las versiones de JavaScript comenzaron a encadenarse proponiendo en cada una de ellas nuevas mejoras. Todo el mundo pudo constatar cómo Internet fue invadido rápidamente por páginas compuestas de pequeños scripts que permitían, por ejemplo, mostrar la hora, la fecha, el nombre del visitante o validar el contenido de los campos de un formulario. Sin embargo, a pesar de ser JavaScript un lenguaje respetuoso de las instrucciones dadas por el ECMA (European Computer Manufacturers Association), organismo internacional encargado de la estandarización de sistemas de información y de comunicación, los editores de programas (Microsoft de un lado con Internet Explorer y Sun del otro con Firefox) desarrollaron desde el principio navegadores que interpretaban de manera diferente JavaScript. En consecuencia, algunos scripts podían ejecutarse de manera correcta en un navegador y paradójicamente generar un error en otro. Por ello, en parte, a finales de los noventa, otros lenguajes como ASP y PHP se hicieron muy populares. Pero fue sobre todo el uso abusivo de los pop-up (ventana emergente) la razón del desinterés creciente por JavaScript. Su proliferación afectó negativamente a JavaScript y la desesperación de los usuarios terminó por desprestigiar sus ventajas entre los desarrolladores web; llegando a considerarlo incluso como un sublenguaje. Afortunadamente, la llegada de los bloqueadores de pop-up integrados en los navegadores le permitió a JavaScript recuperar el prestigio perdido.

La siguiente tabla permite relacionar la versión de JavaScript con la del navegador:

Año de publicación Versión de JavaScript Navegadores compatibles

1995 1.0 Internet Explorer 3.0

(3)

Año de publicación Versión de JavaScript Navegadores compatibles 1996 1.1 Internet Explorer 4.0 Netscape Navigator 3.0 1997 1.2 Internet Explorer 4.0 Netscape Navigator 4.0 1998 1.3 Netscape Navigator 4.5 1999 1.4 Internet Explorer 6.0 Netscape Navigator 6.0 2000 1.5 Netscape Navigator 6.0 2005 1.6 Firefox 1.0 2006 1.7 Firefox 2.0 Internet Explorer 7.0

En nuestros días, JavaScript ha recuperado su popularidad. Es interesante constatar cómo incluso aquellos que antes rechazaban este lenguaje, actualmente usan y abusan de él. Efectivamente, el surgimiento de nuevas tecnologías web sobre todo del llamado Web 2.0, devuelve a la programación con JavaScript un lugar primordial, principalmente por su utilización conjunta con XML o por su utilización asíncrona (AJAX), de la cual hablaremos más adelante. Sin embargo, nunca está de más señalar las ventajas y desventajas de la utilización de JavaScript.

Ventajas y desventajas de JavaScript

Como ya hemos dicho, JavaScript es un lenguaje universal presente en numerosas páginas HTML, de manera complementaria a este código. Gracias a JavaScript, las páginas HTML son más agradables y disponen de muchas funcionalidades suplementarias.

Saber escribir scripts en JavaScript significa permitir a los usuarios de sus páginas HTML el acceso a otras funcionalidades y otros servicios, mejorando de esta manera la profesionalidad de un sitio web. Incluso recientemente, cuando un internauta escogía por primera vez un nombre de usuario, era necesario hacer clic sobre un botón y esperar una respuesta del servidor que en ocasiones solicitaba recomenzar el procedimiento puesto que el nombre de usuario pertenecía ya a otra persona. En cambio hoy, gracias al uso de la tecnología AJAX, el control se realiza en un segundo plano al mismo tiempo que el usuario cumplimenta la ficha. Es innegable que JavaScript contribuye mucho a la facilidad de uso de un sitio web e incrementa además la fidelidad del usuario.

Teniendo en cuenta esta importante difusión, saber programar en JavaScript se ha convertido hoy en un conocimiento básico para todo desarrollador web.

(4)

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 automatización de muchas tareas. En cuanto a la dificultad del lenguaje, muchos son los que se muestran reticentes al análisis de páginas HTML compuestas de JavaScript, pero a fin de cuentas, con un poco de paciencia y estudio, Javascript resulta un lenguaje que se domina fácilmente. Más aún si se ha trabajado ya con otros lenguajes de programación 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 excepción de las cookies que son simples archivos de texto cuyos aspectos trataremos en el capítulo Mejorar la interactividad con JavaScript y las CSS). No obstante, esta limitación 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 ningún editor ni compilador en particular. Es muy sencillo escribir scripts directamente en el código fuente de la página HTML usando un simple editor de texto tipo Wordpad o un editor de código HTML. Sin embargo, existen editores más sofisticados que ofrecen muchas ventajas.

Herramientas de concepción

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

 verificar una sintaxis gracias a la coloración automática del código fuente;

 disponer de la función de completado automático (proposición de métodos o propiedades disponibles del objeto);

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

Para ello, usted puede optar por un programa como Aptana que se puede descargar en la dirección http://www.aptana.com. Desgraciadamente este IDE (entorno de desarrollo) está en inglés, lo cual puede resultar un poco desalentador. Sin embargo, es una herramienta que resultará muy interesante para la depuración del código así como otras herramientas que mencionaremos en los siguientes capítulos.

Una vez seleccionada la herramienta de concepción, es conveniente crear un entorno de programación y de prueba para perder el menor tiempo posible en la búsqueda de los errores que surgirán de manera inevitable.

Parámetros y entorno ideal de prueba

Es necesario tener en cuenta que para comenzar a trabajar con JavaScript, hace falta un mínimo de conocimientos de HTML, sobre todo la noción de etiquetas que permite situarse en la página. Para refrescar la memoria, recordaremos simplemente que una página HTML se divide en dos grandes partes:

(5)

 la parte head (cabeza en español) donde se ubican los datos correspondientes a la descripción del contenido;

 la parte body (cuerpo en español) donde figura el código que hace posible la construcción de objetos en la página (campos de formulario, zonas de texto, imágenes, etc.).

Una secuencia de comandos JavaScript puede ubicarse, según 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 página. Su ejecución puede ser inmediata (cuando se carga la página) o diferida (hacer clic en un botón, por ejemplo). Hará falta en ese caso usar la programación basada en eventos y las funciones para que el código se ejecute. Estos puntos se tratan en el capítulo Funciones y eventos de este libro. No obstante, colocar los scripts en la parte head no significa que serán indexados por los buscadores. De hecho, hasta ahora, los buscadores como Yahoo o Google no proponen ningún contenido a partir de estos elementos del código, pero con el desarrollo de la Web 2.0 lo harán tarde o temprano. Por el momento, en el caso de que una página contenga vínculos en un menú construido con JavaScript, los buscadores no tendrán en cuenta las direcciones. Por lo tanto, es sumamente recomendable agregar los vínculos en HTLM sirviéndose de la etiqueta <a href="mipaginavisibleporlosbuscadores.html">. Una vez que ya hemos explicado la ubicación del código JavaScript, es necesario comprender cómo deben insertarse. Ya hemos visto que JavaScript no necesita un entorno particular. Basta simplemente una página HTML en cuyo interior usted agregará las líneas 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>

Entre las dos etiquetas, el número de líneas de código es ilimitado. Se puede agregar la versión de JavaScript utilizada y obtener así el siguiente tipo de línea:

Sin embargo, los navegadores se adaptan muy bien a la primera sintaxis y de acuerdo con su versión se adaptan a la version de JavaScript. Además, especificar una de las últimas versiones obliga a los usuarios a disponer de la última versión de navegador, lo cual limita el alcance de su código. Pero si, después 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 después del código.

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 código correspondiente, sólo queda guardar sus páginas gracias al menú Archivo - Guardar como. De esta manera, usted puede constituir de manera progresiva una biblioteca de páginas HTML compuestas de códigos JavaScript que podrá reutilizar en contextos específicos.

(6)

En otras palabras, para comenzar se necesita una página HTML básica que le servirá de modelo para todas las otras páginas que contengan scripts.

(7)

HTML Y JavaScript

HTML y JavaScript

Anteriormente hemos explicado que JavaScript y HTML estaban íntimamente relacionados, con el código HTML que sirve generalmente de contenedor al bloque de instrucciones de JavaScript. Una vez cargada la página HTML, el navegador ejecuta las instrucciones de JavaScript permitiendo de esta manera enriquecerla con nuevas funcionalidades. No obstante, existe otro tipo de ejecución de JavaScript.

Los dos tipos de ejecución de JavaScript

Los bloques de código de JavaScript pueden estar directamente presentes en el código fuente de la página HTML entre dos etiquetas (una de inicio y otra de fin), o escritos en un archivo JavaScript con la extensión .js, de manera totalmente independiente del código HTML de la página. El primer caso se conoce como JavaScript interno en contraposición al segundo llamado JavaScript externo.

Ninguno de los dos es mejor que el otro, se trata sólo de una opción de programación. La segunda opción tiene sin embargo la ventaja de permitir reutilizar el código en otras páginas HTML sin que por ello sea necesario reescribirlo o copiarlo.

De manera específica, el script se redacta en un documento especial mediante un editor de texto y se guarda sin formatear bajo la extensión .js. Si el editor no propone por defecto esta extensión, basta con agregarla en el momento de guardar el documento. Se recomienda nombrar de manera explícita el papel que juega su script en la página HTML de manera que sea más fácil encontrarlo en otra ocasión.

Una vez realizadas estas acciones, resulta muy sencillo designar el archivo JavaScript en la página HTML respetando la siguiente sintaxis:

Evidentemente, el archivo deberá estar presente en la misma carpeta de su disco duro o del servidor donde se encuentra el archivo HTML correspondiente.

Por razones de comodidad, todos los ejemplos de este libro han sido escritos en JavaScript interno, de manera que resulte más sencillo para usted localizar el código.

Además de estas normas relacionadas principalmente con la organización del script, existe un cierto número de reglas de sintaxis que también deben respetarse.

Las reglas de sintaxis del código

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

1. Mayúsculas y minúsculas

Unas de las principales dificultades de JavaScript es la de ser un lenguaje de programación que distingue el uso de mayúsculas y minúsculas. Es una regla que cobra gran su importancia cuando se trabaja con variables y objetos.

(8)

De manera concreta, en JavaScript Miobjeto no es lo mismo que miobjeto.

Esto se aplica a todas las palabras claves (propiedades, métodos, funciones JavaScript) y el uso de herramientas de concepción como Aptana o el editor de Dreamweaver facilita la identificación de esta sintaxis puesto que son casi instantáneamente identificadas con colores. Otra regla sintáctica se refiere a la inserción de comentarios.

2. Inserción de comentarios

Tal como sucede en la mayoría de los lenguajes de programación, la inserción de comentarios en sus scripts puede resultar sumamente útil. De hecho, aparte de poder encontrar de manera más sencilla los bloques de instrucciones que usted ha creado, los comentarios podrán ser de una inmensa ayuda el día que tenga que retomar el código. La legibilidad del código es incluso uno de los principales criterios determinantes de la calidad de un código JavaScript. Porque, a fin de cuentas, ¿de qué sirve escribir un magnífico código si su modificación, una semanas más tarde, necesitará el doble de tiempo?

La inserción de comentarios en un bloque de código JavaScript puede hacerse en una sola línea o en múltiple líneas.

Los comentarios compuestos en un sola línea estarán precedidos de una doble barra //.

Los comentarios que no puedan contenerse en una sola línea estarán precedidos de /* y tendrán que terminarse en */.

Ejemplo:

//Esto es un comentario en una sola línea </script>

En algunos editores, los comentarios aparecen con un color diferente al del código.

3. El punto y coma

Cada línea de código de JavaScript termina generalmente en punto y coma, salvo alguna excepción sintáctica que detallaremos más adelante.

Un simple olvido de este punto y coma puede hacerle perder un tiempo precioso. La primera etapa de depuración del código consistirá entonces en identificar su presencia.

4. La tabulación

Cuando las líneas del código 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 presentación de scripts que consiste en

(9)

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 diálogo el resultado de dos variables utilizadas como contador en dos bucles anidados.

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 tabulación permite encontrar la anidación del bucle j en el bucle i. La creación de bucles anidados la explicaremos con más detalle en el capitulo Controlar los scripts con las estructuras de control.

El conocimiento de estos elementos le permitirá escribir su primera página en JavaScript que servirá igualmente de página modelo.

Creación de la página de prueba

Para escribir de manera eficaz en la páginas HTML, lo mejor es crear una página modelo donde se deberán incluir las etiquetas que indican el comienzo y el fin del script.

Siendo la parte head de la página donde generalmente se inserta el código JavaScript, observe este ejemplo de código HTML de la página modelo que será utilizada para la escritura de todos sus scripts.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

document.write("Colocar el código aquí"); </script>

(10)

Las dos primeras líneas determinan el tipo de documento, su presencia es fundamental para el buen funcionamiento de las instrucciones DHTML, como veremos en el capítulo Mejorar la interactividad con JavaScript y las CSS. La cuarta línea indica el inicio de la etiqueta head que nos interesa de manera particular. La quinta línea permite agregar una etiqueta meta que indica los caracteres utilizados, la sexta le da un título a la página (en nuestro caso, Página

modelo en JavaScript). Es entre las líneas:<script

language="javascript"> y </script> donde deberá incluir la mayoría de los scripts que va a escribir. La posición está indicada por la línea document.write("Colocar el código aquí"). No obstante, se puede ubicar el código JavaScript en cualquier lugar de la página.

Guarde esta página con un nombre que permita distinguirlo fácilmente (página modelo, por ejemplo). De ahora en adelante, usted podrá:

 retomar esta misma página;

 modificar el script;

 y finalmente guardarlo con otro nombre mediante la orden Guardar como de su editor.

No olvide modificar también el contenido de la etiqueta <title>. Para mayor seguridad y evitar borrar esta página modelo, usted puede modificar los derechos de acceso y atribuirle un estado de sólo lectura.

Ejemplo: para crear una nueva página HTML compuesta por un script de escritura de un mensaje en la página, tiene que abrir la página modelo y seguidamente insertar entre las dos etiquetas <script language="javascript"> y </script> el siguiente código:

document.write(" la página modelo es reutilizable") ;

Con este método, usted podrá constituirse de manera rápida y fácil una verdadera biblioteca de scripts.

Creación de una biblioteca personal de scripts

JavaScript

Con el paso del tiempo, tendrá que desarrollar numerosos scripts que se podrán reutilizar posteriormente. Para facilitar esta reutilización, identifique sus páginas con nombres que indiquen claramente el objetivo de su script JavaScript.

Cuidado con confundir biblioteca personal de scripts y bibliotecas comunes, abundantes en la red, y que enriquecen el funcionamiento clásico de JavaScript. La instalación de nuevas bibliotecas JavaScript se tratará en el capítulo Mejorar la interactividad con JavaScript y las CSS.

Mensajes de error y consejos para depurar el código

(debug)

(11)

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 resolución de errores más 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 página. 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 también encontrar errores no al cargar la página sino cuando se ejecuta. Esto significa generalmente que los objetos, sus propiedades, sus métodos e incluso las funciones no corresponden o están mal utilizadas.

Finalmente, los errores más difíciles de detectar son los errores puramente lógicos 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 debería incluir en su script muchos cuadros de diálogo. Estos permitirán 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 cuál es la línea que contiene el error. Pero cuidado, esta información no es siempre precisa. La indicación del número de línea informa simplemente que se ha encontrado un error a partir de dicha línea. Es necesario a veces remontar varias líneas antes de encontrar el problema que provoca el error. Una vez más, todas las ventajas de las herramientas de concepción (coloración del código, tabulación) son bienvenidas, puesto que esta labor larga y tediosa sigue siendo la causa principal del desinterés por Javascript.

Estos consejos constituyen una primera ayuda para la depuración del código, pero no bastan cuando los problemas resultan más graves. En ese caso, existen herramientas que permiten facilitar un poco el trabajo.

Las herramientas de depuración de JavaScript

A pesar de que es posible escribir un script de una manera muy sencilla, la utilización de una herramienta de concepción puede resultar útil, sobre todo si se trata de la resolución de un error. Su utilización nos permitirá tener puntos de interrupción, conocer el valor de las variables y otras ayudas que serán muy útiles en esta etapa crucial como es la búsqueda de un error.

Vamos a presentar algunas de estas herramientas.

1. Microsoft Script Debugger

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

(12)

Se trata de un programa de resolución de problemas de Microsoft, aunque su utilización es poco intuitiva y está disponible sólo en inglés. Puede descargarlo en el centro de descargas de Microsoft en la siguiente dirección: http://www.microsoft.com/downloads/

Le será necesario quizás instalar previamente el programa Genuine de Microsoft.

2. Microsoft FrontPage / Adobe Dreamweaver

Los editores de código HTML permiten visualizar el código de la página y de esta manera acceder a la parte JavaScript. Pero no disponen de funcionalidades capaces de agregar puntos de interrupción y de conocer el valor de las variables. Por ello, son poco convenientes para la resolución de problemas de scripts complejos, aunque son un excelente intermediario entre el mundo de JavaScript y el HTML.

3. Venkman

Es un complemento de Firefox/Mozilla (y se utiliza con él), que permite visualizar el código JavaScript, agregar puntos de interrupción 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 características, que Venkman pero con un enfoque más intuitivo. Es esta la herramienta que le aconsejo instalar. Podrá encontrarla fácilmente descargándola en la siguiente dirección:

https://addons.mozilla.org/es-ES/firefox/addon/1843

Una vez descargado el archivo, sólo 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 fácil constatar que las herramientas son más numerosas en Firefox/Mozilla. Hay muchas más extensiones gratuitas y descargables en la dirección: https://addons.mozilla.org/es-ES/firefox/

Es por ello que Firefox/Mozilla se mantiene como el navegador en el que resulta más fácil efectuar una depuración, encontrar una variable, o su valor, así como los objetos en los que se basa la programación JavaScript.

Una vez que ha seleccionado su herramienta de concepción y ha creado su página modelo, ya está en condiciones de abordar los principales conceptos de la programación orientada a objetos.

(13)

Iniciación a la programación

orientada a objetos y JavaScript

Lenguaje de script y lenguaje de programación

Lenguaje de script y lenguaje de programación generalmente se oponen; sin embargo, si nos fijamos bien, son muchas las cosas que tienen en común.

Por un lado, los lenguajes de programación necesitan un editor especial y un compilador. La escritura de un programa se considera más complicada que la de un script. Las instrucciones escritas por un lenguaje de programación son interpretadas directamente por el procesador del ordenador. En esta categoría encontramos lenguajes de programación como C o Java.

Los lenguajes de script (de los que forma parte JavaScript) permiten, por su lado, encadenar una serie de instrucciones ejecutadas por otro programa (en este caso el explorador web). No hay necesidad de ningún compilador y sólo se necesita un editor de texto. En general, la escritura de un script se considera más sencilla que la programación.

En otras palabras, podemos decir que JavaScript se sirve fundamentalmente de otros programas como los navegadores (Internet Explorer, Firefox/Mozilla, etc.) para ejecutar una serie de instrucciones de manipulación de objetos (ventanas, campos de páginas de Internet, etc.) con el objetivo de llevar a cabo una aplicación.

La manipulación de estos objetos funciona según una técnica llamada programación orientada

a objetoso POO.

Los principios de la programación orientada a objetos

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

1. Objetos, métodos y propiedades

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

(14)

documento en el que se encuentra. La expresión noción de jerarquía se utiliza para denominar esta dependencia.

El siguiente esquema representa la jerarquía 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 más importante, jerárquicamente hablando, para finalmente llegar al menos importante. Por cada cambio de objeto se agrega un punto. Esta forma sintáctica se denomina sintaxis por puntos. De esta manera, en una página compuesta por un formulario llamado formu que contiene un campo Nombre, la sintaxis para acceder a Nombre sería la siguiente:

document.formu.nombre ;

Pero eso no es todo, además de alcanzar un objeto preciso dentro de una jerarquía, la sintaxis por puntos se refiere también al acceso a métodos 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 métodos constituyen acciones realizables por este objeto. Generalmente suele usarse el ejemplo de un coche para explicar de manera más precisa esta idea. Para ilustrar de una manera más clara la Programación Orientada Objeto, suele evocarse el ejemplo de un coche. Según esta metáfora, el coche representa un objeto que se caracteriza por poseer un cierto número de propiedades (su color azul o rojo, su forma monovolumen o berlina). Paralelamente a estas propiedades, este objeto realiza igualmente un cierto número de acciones (avanzar, girar, retroceder, etc.) que corresponden a lo que denominamos métodos. Los métodos y las propiedades no son necesariamente las mismas para todos los objetos. Es posible que varios objetos posean una misma propiedad o método, pero no es obligatorio. De hecho, para utilizar correctamente JavaScript es necesario conocer en profundidad el modelo del objeto así que los métodos y propiedades disponibles. Desde un punto de vista sintáctico, el punto se utiliza para separar un objeto de su propiedad o de su método. 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 página de Internet activa, deberá utilizar el método print() (imprimir) del objeto window (ventana), que es el objeto más alto en la jerarquía. Según esta idea, el script que permitirá imprimir la página activa es el siguiente: <script language="javascript">

window.print(); </script>

Siendo el objeto window el más alto de la jerarquía, no es necesario nombrarlo en cada manipulación. Puede entonces escribirse el script de una manera todavía más simple. Por ello, a partir de hora, para simplificar las cosas, no haremos más referencia al objeto window.

</script>

Otro ejemplo, si desea mostrar en la página la propiedad title del objeto document (que permite obtener el titulo de la página), es posible hacerlo con el siguiente script:

(15)

En este caso, el método write() permite mostrar en el documento el valor correspondiente a la propiedad title de la página.

En JavaScript existen dos tipos de objeto. De un lado, están los objetos predefinidos que se encuentran en la jerarquía de objetos que ya hemos mencionado, y del otro, se encuentran los objetos concebidos por el desarrollador mismo gracias a la creación de una función tal como veremos en el capítulo Funciones y eventos. En cuanto a los objetos predefinidos, cada nueva versión de JavaScript enriquece el modelo permitiendo acceder a los nuevos objetos o agregando nuevos métodos y propiedades. Este aspecto, sin duda positivo, implica sin embargo consecuencias menos provechosas. En realidad, los usuarios que no utilicen la última versión del navegador no podrán disponer de los nuevos objetos, propiedades y métodos. El script enviará inevitablemente un mensaje de error. ¡Haría falta una nueva versión del navegador por cada nueva propiedad! A primera vista, un verdadero dolor de cabeza, aunque con la explosión de Internet (y las facilidades de actualización), la mayor parte de los internautas disponen actualmente de una versión reciente y adaptada. En el momento de la redacción de este libro, las versiones 7.0 de Internet Explorer y 2.0 de Firefox/Mozilla soportan la versión 1.5 de JavaScript. Versión de JavaScript Navegadores compatibles Mejoras/Incorporaciones 1.0 Internet Explorer 3.0 Netscape Navigator 2.0

Versión básica de JavaScript conforme a la directiva de ECMA.

1.1 Internet Explorer 4.0

Netscape Navigator 3.0

Inserción de nuevos eventos. Corrección de algunos fallos.

1.2 Internet Explorer 4.0

Netscape Navigator 4.0

Inserción de la instrucción Switch, de nuevas propiedades del objeto navegador y de nuevos eventos. Integración de las expresiones regulares.

1.3 Netscape Navigator 4.5

Mejoras del objeto Date. Corrección de algunos fallos.

1.4 Netscape servidor Desarrollado únicamente para los servidores de Netscape. Inserción de excepciones jet y try ... catch

Integración de nuevas mejoras (instanceOf). Cambios aportados a LiveConnect.

(16)

Versión de JavaScript

Navegadores compatibles

Mejoras/Incorporaciones

Modificaciones del objeto Array.

1.5 Netscape Navigator 6.0 Internet Explorer 6.0

Versión basada sobre las especificaciones ECMA-262 3a edición. Integración de la gestión de excepciones.

1.6 Firefox/Mozilla 1.0

Internet Explorer 6.0

Inserción de la tecnología E4X que permite controlar los documentos XML.

Inserción de los métodos every(), filter(),forEach(), map(), some() del objeto Array.

Internet Explorer 6.0

Integración de las nuevas palabras clave yield,let, definición de tablas por compresión.

Inserción de las clausuras de expresión, de las expresiones generadoras, de los métodosreduce() y reduceright() para el objeto Array.

Para utilizar una versión especifica de JavaScript (por ejemplo la versión 1.7), es más prudente precisarlo cuando se declara la etiqueta con la instrucción: <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 métodos y propiedades puede evitar una perdida de tiempo. El objeto es, pues, la base del lenguaje JavaScript y si usted necesita utilizar diferentes métodos o propiedades para un objeto, en vez de citar varias veces el mismo objeto puede servirse de la palabra clave with en la instrucción.

Basta con comenzar la instrucción por la palabra clave with, poner entre paréntesis el objeto y después utilizar las propiedades o métodos basados en ese objeto incluyéndolas 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 manipulación de las propiedades o métodos ; }

Ejemplo: mostrar el contenido de un campo de formulario antes y después de la modificación del valor de la variable.

(17)

<p>

</form> </body> </html>

En este caso, el objeto correspondiente al campo de texto del formulario se declara en principio con la instrucción with (document.form1.nombre). Es inútil retomar la sintaxis document.form1.nombre, basta con modificar las instrucciones modificando sucesivamente el valor del objeto. La apertura sucesiva de varios cuadros de diálogo permite seguir esta modificación del valor.

Podría pensar que una condición esencial para el aprendizaje de la programación orientada a objetos es el conocimiento perfecto del conjunto de objetos de JavaScript. Sin embargo, es preferible conocer, en un principio, las propiedades y métodos básicos de los objetos que se utilizan más a menudo.

Métodos JavaScript

1. alert()

El método alert() del objeto window permite mostrar un cuadro de diálogo con un mensaje de advertencia. El mensaje del cuadro de diálogo dese escribirse entre comillas, pero es posible agregarle acentos, espacios y cualquier otro carácter que desee mostrar. Puede también mostrar variables en lugar de los mensajes o, como veremos en el capítulo sobre la Utilización de constantes, variables y operadores.

(18)

Cuando aparece este cuadro de diálogo, JavaScript se detiene y espera a que el usuario haga clic sobre el botón Aceptar.

Incluso si parece un poco limitado a primera vista, este método 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 diálogo de tipo alert con un simple mensaje.

alert("Esto es un cuadro de diálogo que se abre gracias a JavaScript"); </script>

Si desea que el mensaje aparezca en dos líneas, debe agregar \n al final de la primera línea. <script language="javascript">

alert("Esto es un cuadro de diálogo que se abre \n gracias a JavaScript"); </script>

Pero el uso del método 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 métodos propuestos por JavaScript.

2. confirm()

El método confirm() del objeto window muestra un cuadro de diálogo con un mensaje seguido de dos botones Aceptar y Cancelar.

Ejemplo: una vez cargada la página, mostrar un cuadro de diálogo con dos botones de respuesta a través del método Confirm().

confirm("Aceptar = 0, Cancelar = 1"); </script>

La gran diferencia con el método alert() es que en función de la respuesta, es decir, de la acción 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 método confirm(). En el capítulo Utilización de constantes, variables y operadores se habla con más detalle de las variables, pero se puede modificar ya el script anterior:

Ejemplo: mostrar un cuadro de diálogo con dos botones Aceptar y Cancelar y luego enviar el valor de la pregunta planteada a otro cuadro de diálogo.

(19)

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 selección del usuario (es decir al valor 0 o -1). Luego, sólo se necesita mostrar la respuesta por medio del método alert(), teniendo cuidado de poner entre comillas el mensaje que debe mostrarse, de agregar el operador de concatenación + así como la variable. De esta manera, puede construir una verdadera frase como respuesta. A pesar de que el método confirm() permite comenzar una interacción, sólo puede haber un máximo de dos respuestas. En el caso de una respuesta abierta, es necesario utilizar un tercer método.

3. prompt()

El método prompt() permite mostrar, además, un mensaje para introducir un valor en un campo llamado invite. Se puede entonces introducir una respuesta abierta a diferencia de los métodos anteriores. El cuadro de diálogo dispone de dos valores; el botón Aceptar permite aplicar a una variable el valor agregado en el invite, el botón Cancelar implica la asignación a la variable del valorNull. También 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 método prompt() es la siguiente:

Prompt("texto que se va a mostrar", "valor por defecto");

Ejemplo: mostrar dos cuadros de diálogo con el objetivo de introducir el nombre y el apellido del usuario y luego abrir un tercer cuadro con el nombre completo.

nombre=prompt("¿Cuál es su nombre?", "Ingresar su nombre aquí"); apellido=prompt("¿Cuál es su apellido?", "Ingresar su apellido aquí"); alert("Su nombre completo es: \r"+nombre+"\r "+apellido);

</script>

En un primer momento, la utilización del método prompt() permite solicitar el nombre y el apellido al visitante. Los valores escritos se aplican automáticamente a las dos variables nombre y apellido. Luego es muy fácil construir el mensaje mostrado con el método alert(). Este mensaje será la suma de una línea de caracteres (puesta entre comillas) y de variables que aparecerán en dos líneas gracias al uso de ’\r’.

Cuidado: Firefox no tiene en cuenta el símbolo ’/r’. En este contexto, el mensaje aparece en un sola línea.

(20)

La utilización de estos métodos del objeto window está directamente relacionada con las variables. Debemos conocer el funcionamiento de estas últimas.

Utilización de constantes

variables y operadores

Tipología y utilización de constantes

Las constantes son elementos de información cuyos valores se indican de manera explicita en el código JavaScript. Por regla general, los valores de las constantes se determinan al comienzo del script y son válidas hasta el final. Esta asignación del valor de las constantes se efectúa según la siguiente sintaxis:

Mi_constante = valor de la constante;

El valor de la constante escrita a la derecha del signo igual se guarda en la memoria asignada al nombre del nombre escrito a la izquierda del signo, que en este ejemplo es Mi_constante. Las constantes JavaScript pueden clasificarse en varias categorías:

1. Constantes aritméticas

Estas corresponden a un número (tipo number), constituido de una serie de cifras. Existen varios tipos de constante en función de su modo de escritura:

La constante decimal está constituida por una serie de 17 cifras como máximo 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 dieciséis 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.

(21)

Ejemplo:

0xF45B es una constante hexadecimal.

2. Constantes cadena de caracteres

Corresponden a una serie de caracteres que pueden ser letras o cifras o una asociación de las dos. La cadena de caracteres debe estar entre comillas o apóstrofos.

Ejemplo:

"mi constante texto" o ’mi constante texto’ son constantes de cadena de caracteres.

Una contante puede estar vacía, en ese caso se escriben dos apóstrofos o comillas sucesivas sin agregar nada en el interior.

3. Constantes booleanas

Sólo pueden corresponder a dos valores, true o false, se escriben sin comillas ni apóstrofos y se establecen generalmente en función de una prueba en las estructuras de control que estudiaremos en el capítulo Controlar los scripts con las estructuras de control.

Ejemplo:

Respuesta = true permite la aplicación de un valor booleano true a la constante Respuesta.

Ejemplo general sobre las constantes: declarar un cierto número de constantes en función del tipo y de la sintaxis, luego mostrar los resultados en la página por medio del método document.write().

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 número"; constante_indefinida= undefined;

document.write ("Esta es mi constante numérica : "+constante_numerica+"<BR>");

document.write ("Esta es mi constante texto1 : "+constante_texto1+"<BR>");

(22)

document.write ("Esta es mi constante cadena vacía : "+constante_cadena_vacia+"<BR>");

document.write ("Esta es mi constante infinita : "+constante_infinita+"<BR>");

document.write ("Mi constante es un número : "+isNaN(constante_numero)+"<BR>");

document.write ("Esta es mi constante_indefinida : "+constante_indefinida);

</script>

En este caso, sólo hay que efectuar declaraciones y asignaciones de constantes y luego mostrar los valores por medio del método document.write(). Este permite escribir directamente en la página y la utilización de <BR> permite saltar una línea con el fin de que se muestre todo de una manera más clara. Hay que notar en todo caso la utilización de la palabra clave undefined que corresponde a una constante JavaScript.

4. Otras constantes

Además de las constantes definidas por el usuario, el ECMA ha definido algunas constantes: Infinity

Esta constante corresponde a un número infinito superior a 1.7976931348623157E+10308_o

inferior a -1.7976931348623157E+10308_.

Esta constante es devuelta como resultado de una división 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 número. Es necesario utilizar la sintaxis siguiente con isNaN:

(23)

isNaN(variable o constante) ;

IsNaN envía true si el valor probado no es número 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 ningún 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 muchísimo menos usadas que las variables, cuyo uso es sistemático.

Tipología 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 cálculo en el código o incluso por una inserción de datos por medio del método prompt(). Una variable puede cambiar de valor, además, durante el desarrollo del script, puesto que JavaScript retiene sólo su último valor; es ahí donde radica toda la importancia de su utilización. 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 programación, JavaScript es un lenguaje muy poco "tipado", lo cual quiere decir que las variables no necesitan pertenecer a un tipo (texto, numérico, booleano) para funcionar. En realidad, es el interpretador JavaScript el que define el tipo de variable en el momento de su ejecución. La ventaja reside en que al prescindir de la determinación de un tipo, usted economiza código, aunque existe igualmente el inconveniente de que algunas veces puedan darse algunas incoherencias, por ejemplo: sumar texto y números, sin que ello moleste a JavaScript. Para terminar, los tipos de variables son, los mismos que las contantes (texto, numérico, booleano) y son, por consiguiente, de muy fácil utilización.

Las etapas que se deben respetar en la utilización de

las variables

Con el objetivo de trabajar correctamente con las variables, se recomienda respetar las etapas de creación. Por lo general, tiene que comenzar por preguntarse cuál es el alcance de la variable para así luego efectuar su declaración y su asignación.

1. Alcance de las variables

Es necesario preguntarse si la variable debe estar disponible a lo largo del script o si debe estar limitada a la función en la cual ha sido creada. Esto es lo que se llama el alcance de las variables.

Existen dos tipos de alcance. Cuando una variable está definida en el interior de una función, como veremos en el capítulo dedicado a las funciones, su alcance se conoce como local. En este caso, su valor no puede ser recuperado en otra función sin hacer referencia de manera explícita. Por el contrario, cuando una variable está definida directamente en el script y sin pertenecer a ninguna función, su alcance se conoce como global y su valor está disponible en todo momento.

(24)

2. Declaración de variables

La declaración de una variable se efectúa con la ayuda de la palabra clave var y según la siguiente sintaxis, conocida como declaración explícita:

var nombre_de_la_variable ;

Se pueden declarar distintas variables en un sola línea. En este caso, estarán 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 también ver cómo puede usted realizar la aplicación de las variables.

Pero JavaScript es un lenguaje particularmente flexible y autoriza también la declaración de variables sin utilizar la palabra clave var, esto se conoce como declaración implícita.

3. Asignación de variables

En JavaScript, la asignación se puede realizar de tres maneras. Se puede hacer directamente en el código 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 cálculo implicando contantes o variables. var suma=mivariable1+mivariable2 ;

Por último, es posible también pedir al usuario un valor que será aplicado a la variable por el métodoprompt() visto anteriormente.

var respuesta=prompt(" ¿Cuál es la valor de esta variable? ") ;

Este tipo de sintaxis, incluso si respeta las buenas prácticas del procedimiento de programación, no es el único. En realidad, este tipo de declaración conocido como explícito, no es obligatorio y es posible hacer una declaración implícita 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. Visualización de variables

La visualización de una variable se efectúa, generalmente, por medio de los métodos alert() oconfirm(), vistos con más detalle en el capítulo Iniciación a la programación orientada a objetos y JavaScript.

Ejemplo 1: mostrar en un cuadro de diálogo el resultado de una suma de dos valores:

(25)

var suma, numero1=10;numero2=5; suma=numero1+numero2;

alert("el resultado de la adición es: "+suma); </script>

Antes que nada, la primera instrucción permite declarar tres variables (dos para cada uno de los números y una para el resultado) que permitirán la realización del cálculo. Evidentemente, es posible agregar tantas variables como se quiera para un cálculo más complicado. La instrucción siguiente permite efectuar el cálculo. Por último, el resultado de la operación se muestra después de una línea de texto de presentación.

El símbolo + es, en este caso, un operador de concatenación de cadenas y no un operador aritmético como sucede en la líneas anteriores.

Ejemplo 2: mostrar el resultado de una multiplicación en la página entre una variable igual a nueve y otra variable cuyo valor será escrito por el usuario en un cuadro de diálogo.

var numero2=prompt("¿Qué número desea multiplicar por 9?"); var producto=numero1*numero2;

document.write("el resultado de la multiplicación 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 efectúa el cálculo de las dos variables. Finalmente, el resultado se muestra.

Ejemplo 3: mostrar el resultado del cálculo del precio de un trayecto para un coche en función del consumo medio. El usuario debe rellenar diferentes cuadros de diálogo con el objetivo de obtener la marca, el consumo medio por cada cien kilómetros, el precio de un litro de combustible usado y el número de kilómetros efectuados.

var marca=prompt("¿Cuál es la marca de coche?", " indique la marca de su coche");

var consumo=prompt("¿Cuál es el consumo en litros de su coche por cada 100 kilómetros?", "indique aquí el consumo en litros de su coche");

(26)

var precio_litro=prompt("¿Cuánto cuesta en euros el litro de su carburante?", "indique el precio de su carburante por litro"); var nro_kilometros=prompt("¿Cuál es la cantidad de kilómetros de su recorrido?", "indique la cantidad de kilómetros de su recorrido"); var costo_total=nro_kilometros/100*consumo*precio_litro;

alert("El precio total de un recorrido de " + nro_kilometros + " kilómetros realizado con un coche marca " + marca + "

consumiendo una media de " + consumo + " litros por 100 kilómetros, 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 método 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 número de kilómetros por 100 y multiplicando el resultado por el consumo medio y el precio del litro. Para terminar, es mucho más agradable mostrar el resultado en un cuadro de diálogo de tipoalert() que alterne la visualización de las variables con cadenas de caracteres.

5. Transferencia de valores entre variables y conversión de tipo

Para pasar el valor de una variable a otra, basta con usar el signo igual para transferir el valor de la variable de la derecha del signo igual a la izquierda del signo igual.

var mivariable2=mavariable1 ;

Es posible también convertir una variable de un tipo a otro (generalmente de texto a numérico) gracias a los métodos parseInt() (conversión de texto a un número entero) y parseFloat()(conversión de texto a un número decimal). La sintaxis es la siguiente:

var variablenumerica=parseInt(variabletexto) ; var variablenumerica=parseFloat(variabletexto) ;

Ejemplo: mostrar el valor de una variable antes y después de la conversión a través del método parseInt(). <script language="javascript"> var numero=15; var numeroentexto="10"; var numeroencifra=parseInt(numeroentexto); suma=numero+numeroentexto;

(27)

suma=numero+numeroencifra;

alert("Este es el resultado después de la conversión: "+suma); </script>

Como siempre, las variables se declaran y se asignan desde el comienzo del script. La variable numero corresponde al número 15 mientras que a la variable numeroentexto se le asigna la cadena de caracteres 10. No es posible entonces efectuar un cálculo con estas dos variables. La variable numeroencifra declarada corresponde a la conversión en cifra de la variable nombreentexto. Para estar seguros del éxito de la conversión es posible mostrar primero el resultado de la suma antes de convertirla, que corresponde a numero+numeroentexto (el resultado corresponde a la concatenación de dos cadenas de caracteres: 1510), y luego mostrar el resultado una vez realizada la conversión numero+numeroencifra (el resultado es 25, probando así que la conversión se ha realizado correctamente).

En los casos en que la conversión no pueda realizarse, se devolverá el valor NaN (is Not a

Number, lo cual significa no es un número).

Al contrario, es posible convertir una variable numérica en texto por medio del método toString(). La sintaxis es la siguiente:

Var variabletexto=variablenumerica.toString() ;

Ejemplo: mostrar el resultado de la conversión del número en texto de una variable.

var numeroentexto=numeroencifra.toString(); total = 10+numeroentexto;

alert("El total es:" + total); </script>

El comienzo corresponde a la asignación de la cifra 15 a la variable numeroencifra. Luego, es necesario aplicarle el método toString() para convertirla en texto en numeroentexto. Después de la conversión, la suma de la variable numérica y la variable convertida devuelve una concatenación de variables de texto, demostrando de esta manera que se ha realizado correctamente.

Reglas de nombres y palabras reservadas

Hasta ahora hemos utilizado nombres de variables muy convencionales y relativamente explícitos, pero a medida que vaya progresando, se verá en la necesidad de utilizar variables más personalizadas. Sin embargo, es imperativo ajustarse a ciertas exigencías y respetar ciertas reglas si no se quiere correr el riesgo de que el script devuelva un error.

Concretamente, los nombres de variables no pueden contener espacio. En general, es necesario utilizar la subraya « _ » para simbolizarlo.

(28)

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

1. Consejos para la designación de nombres

Es preferible nombrar las variables explícitamente, es decir, por lo que representan en vez de adoptar nombres de variables completamente abstractos. Esto le permitirá encontrarlas más fácilmente en el código cuando siga un error. Existe además una lista de palabras reservadas a JavaScript que están completamente prohibidas cuando se desea declarar una variable.

2. Palabras reservadas

Las palabras reservadas son palabras que corresponden generalmente a objetos, propiedades o métodos ya utilizados por JavaScript y que no pueden en consecuencia recibir un valor. La siguiente tabla recapitula esas palabras prohibidas. Algunas de estas palabras están ya prohibidas y otras no se aconsejan, incluso si se pueden utilizar, puesto que las futuras versiones de JavaScript no las aceptarán.

abstract float short

boolean for static

break function super

byte goto switch

case if synchronized

char implements this

class import throw

const in throws

continue instanceoff transient

debugger int true

default interface try

delete long typeoff

do native var

double new void

(29)

enum package while

export private with

extends protected

false public

finally return

Tipología de operadores

Los operadores permiten manipular variables, hacer pruebas (comparaciones) entre los valores de las variables. Los operadores y las variables componen una expresión que puede, algunas veces, parecer a un mensaje encriptado. Pero estudiándolas, el trabajo con los operadores resulta sumamente fácil. Descubriremos en el capítulo Controlar los scripts con las estructuras de control cómo utilizar estas pruebas en el desarrollo del script. Por el momento, presentamos aquí una lista de diferentes operadores y su significado:

1. Aritméticos

Los operadores aritméticos permiten realizar cálculos elementales entre las variables de tipo numérico. Los símbolos +,-,* y / permiten efectuar las operaciones elementales de suma, resta, multiplicación y división. Esta es un tabla que presenta una lista de operadores aritméticos:

Operadores Nombre Función Ejemplo Resultado

+ Más Suma los valores situados a la izquierda y la derecha del símbolo.

15+10 25

- Menos Halla la diferencía entre los valores situados a la izquierda y a la derecha del símbolo.

15-10 5

* Producto o múltiplo

Efectúa la multiplicación entre los valores situados a la izquierda y a la derecha del símbolo.

15*10 150

/ División Efectúa la división del valor situado a la izquierda por el valor a la derecha del símbolo.

15/10 1.5

% Módulo Extrae el valor entero del resultado de la división en el valor situado a la izquierda y el valor situado a la derecha del símbolo modulo.

5%3 1

(30)

Operadores Nombre Función Ejemplo Resultado

caso de la utilización de un bucle. Variable++

-- Decremento Permite restar un valor, sobre todo en el caso de la utilización de un bucle.

Variable=2 Variable--

1

- Negación Permite obtener el opuesto. Variable=1 variable= -variable

-1

Pequeña precisión para el módulo %, que permite recuperar el resultado de la división del operando de la izquierda por el de la derecha. Aplicando el símbolo módulo a una variable, se obtiene el resto de la división de la variable por la cifra situada a la derecha del símbolo. Esta es la sintaxis: módulo=dividendo%divisor.

Ejemplo: mostrar el resultado de la aplicación del módulo tres en una variable igual a cinco.

var modulo = mivariable%3;

alert("El resultado del módulo es: " + modulo); </script>

Después de haber aplicado cinco a la variable, ésta se reutiliza en el cálculo de una variable llamada módulo. Por último, el resultado se muestra en un cuadro de diálogo por medio del método alert().

Los operadores de incremento y decremento pueden colocarse antes de la utilización de la variable, se habla entonces de preincremento o después de la variable, lo cual se conoce como posincremento. La utilización de esos operadores se estudiará con más detalle cuando se estudien los bucles en el siguiente capítulo.

2. Comparación

Estos operadores permiten comparar variables entre ellas mismas.

Operadores Nombre Función Ejemplo Resultado

< Menor que Comprueba si el operando a la izquierda del símbolo es más pequeño que el de la derecha. Devuelve true si es el caso.

1<2 True

<= Menor que o igual

Comprueba si el operando a la izquierda del símbolo es más pequeño o igual que el de la derecha.