introduccion javascript

www.librosweb.es

Introduccin a

JavaScript

Javier Eguluz Prez

Sobre este libro...

Los contenidos de este libro estn bajo una licencia Creative CommonsReconocimiento - No Comercial - Sin Obra Derivada 3.0(http://creativecommons.org/licenses/by-nc-nd/3.0/deed.es)

Esta versin impresa se cre el 25 de marzo de 2009 y todava estincompleta. La versin ms actualizada de los contenidos de este libro se puedeencontrar en http://www.librosweb.es/javascript

Si quieres aportar sugerencias, comentarios, crticas o informar sobre errores,puedes enviarnos un mensaje a [email protected]

Introduccin a JavaScript

www.librosweb.es 2

Captulo 1. Introduccin ............................................................................................................... 5

1.1. Qu es JavaScript? .................................................................................................................. 5

1.2. Breve historia............................................................................................................................ 5

1.3. Especificaciones oficiales.......................................................................................................... 6

1.4. Cmo incluir JavaScript en documentos XHTML ...................................................................... 6

1.5. Etiqueta noscript ...................................................................................................................... 8

1.6. Glosario bsico ....................................................................................................................... 10

1.7. Sintaxis.................................................................................................................................... 10

1.8. Posibilidades y limitaciones .................................................................................................... 11

1.9. JavaScript y navegadores........................................................................................................ 12

1.10. JavaScript en otros entornos ................................................................................................ 12

Captulo 2. El primer script ......................................................................................................... 13

Captulo 3. Programacin bsica................................................................................................. 16

3.1. Variables ................................................................................................................................. 16

3.2. Tipos de variables ................................................................................................................... 18

3.3. Operadores............................................................................................................................. 21

3.4. Estructuras de control de flujo ............................................................................................... 27

3.5. Funciones y propiedades bsicas de JavaScript...................................................................... 34

Captulo 4. Programacin avanzada............................................................................................ 39

4.1. Funciones................................................................................................................................ 39

4.2. mbito de las variables........................................................................................................... 45

4.3. Sentencias break y continue................................................................................................... 47

4.4. Otras estructuras de control................................................................................................... 49

Captulo 5. DOM......................................................................................................................... 53

Captulo 6. Eventos .................................................................................................................... 63

6.1. Modelos de eventos ............................................................................................................... 63

6.2. Modelo bsico de eventos...................................................................................................... 64

6.3. Obteniendo informacin del evento (objeto event) .............................................................. 71

Captulo 7. Formularios .............................................................................................................. 81

7.1. Propiedades bsicas de formularios y elementos .................................................................. 81

7.2. Utilidades bsicas para formularios........................................................................................ 83

7.3. Validacin ............................................................................................................................... 90

Captulo 8. Otras utilidades ........................................................................................................ 98

8.1. Relojes, contadores e intervalos de tiempo ........................................................................... 98

8.2. Calendario............................................................................................................................. 101

8.3. Tooltip................................................................................................................................... 104

8.4. Men desplegable ................................................................................................................ 107

8.5. Galeras de imgenes (Lightbox)........................................................................................... 110

Captulo 9. Deteccin y correccin de errores........................................................................... 115

9.1. Correccin de errores con Internet Explorer ........................................................................ 115

9.2. Correccin de errores con Firefox ........................................................................................ 117

9.3. Correccin de errores con Opera ......................................................................................... 119


www.librosweb.es 3

Captulo 10. Recursos tiles...................................................................................................... 121

Captulo 11. Ejercicios resueltos ............................................................................................... 122


www.librosweb.es 4

Captulo 1. Introduccin

1.1. Qu es JavaScript?

JavaScript es un lenguaje de programacin que se utiliza principalmente para crearpginas web dinmicas.Una pgina web dinmica es aquella que incorpora efectos como texto que aparece ydesaparece, animaciones, acciones que se activan al pulsar botones y ventanas conmensajes de aviso al usuario.Tcnicamente, JavaScript es un lenguaje de programacin interpretado, por lo que no esnecesario compilar los programas para ejecutarlos. En otras palabras, los programasescritos con JavaScript se pueden probar directamente en cualquier navegador sinnecesidad de procesos intermedios.A pesar de su nombre, JavaScript no guarda ninguna relacin directa con el lenguaje deprogramacin Java. Legalmente, JavaScript es una marca registrada de la empresa SunMicrosystems, como se puede ver en http://www.sun.com/suntrademarks/.

1.2. Breve historia

A principios de los aos 90, la mayora de usuarios que se conectaban a Internet lohacan con mdems a una velocidad mxima de 28.8 kbps. En esa poca, empezaban adesarrollarse las primeras aplicaciones web y por tanto, las pginas web comenzaban aincluir formularios complejos.Con unas aplicaciones web cada vez ms complejas y una velocidad de navegacin tanlenta, surgi la necesidad de un lenguaje de programacin que se ejecutara en elnavegador del usuario. De esta forma, si el usuario no rellenaba correctamente unformulario, no se le haca esperar mucho tiempo hasta que el servidor volviera amostrar el formulario indicando los errores existentes.Brendan Eich, un programador que trabajaba en Netscape, pens que podra solucionareste problema adaptando otras tecnologas existentes (como ScriptEase) al navegadorNetscape Navigator 2.0, que iba a lanzarse en 1995. Inicialmente, Eich denomin a sulenguaje LiveScript.Posteriormente, Netscape firm una alianza con Sun Microsystems para el desarrollo delnuevo lenguaje de programacin. Adems, justo antes del lanzamiento Netscape decidicambiar el nombre por el de JavaScript. La razn del cambio de nombre fueexclusivamente por marketing, ya que Java era la palabra de moda en el mundoinformtico y de Internet de la poca.La primera versin de JavaScript fue un completo xito y Netscape Navigator 3.0 yaincorporaba la siguiente versin del lenguaje, la versin 1.1. Al mismo tiempo, Microsoft

Introduccin a JavaScript Captulo 1. Introduccin

www.librosweb.es 5

lanz JScript con su navegador Internet Explorer 3. JScript era una copia de JavaScript alque le cambiaron el nombre para evitar problemas legales.Para evitar una guerra de tecnologas, Netscape decidi que lo mejor sera estandarizarel lenguaje JavaScript. De esta forma, en 1997 se envi la especificacin JavaScript 1.1 alorganismo ECMA (European Computer Manufacturers Association).ECMA cre el comit TC39 con el objetivo de "estandarizar de un lenguaje de scriptmultiplataforma e independiente de cualquier empresa". El primer estndar que cre elcomit TC39 se denomin ECMA-262, en el que se defini por primera vez el lenguajeECMAScript.Por este motivo, algunos programadores prefieren la denominacin ECMAScript parareferirse al lenguaje JavaScript. De hecho, JavaScript no es ms que la implementacinque realiz la empresa Netscape del estndar ECMAScript.La organizacin internacional para la estandarizacin (ISO) adopt el estndarECMA-262 a travs de su comisin IEC, dando lugar al estndar ISO/IEC-16262.

1.3. Especificaciones oficiales

ECMA ha publicado varios estndares relacionados con ECMAScript. En Junio de 1997 sepublic la primera edicin del estndar ECMA-262. Un ao despus, en Junio de 1998 serealizaron pequeas modificaciones para adaptarlo al estandar ISO/IEC-16262 y se crela segunda edicin.La tercera edicin del estndar ECMA-262 (publicada en Diciembre de 1999) es laversin que utilizan los navegadores actuales y se puede consultar gratuitamente enhttp://www.ecma-international.org/publications/standards/Ecma-262.htmActualmente se encuentra en desarrollo la cuarta versin de ECMA-262, que podraincluir novedades como paquetes, namespaces, definicin explcita de clases, etc.ECMA tambin ha definido varios estndares relacionados con ECMAScript, como elestndar ECMA-357, que define una extensin conocida como E4X y que permite laintegracin de JavaScript y XML.

1.4. Cmo incluir JavaScript en documentos XHTML

La integracin de JavaScript y XHTML es muy flexible, ya que existen al menos tresformas para incluir cdigo JavaScript en las pginas web.

1.4.1. Incluir JavaScript en el mismo documento XHTML

El cdigo JavaScript se encierra entre etiquetas y se incluye en cualquier partedel documento. Aunque es correcto incluir cualquier bloque de cdigo en cualquier zonade la pgina, se recomienda definir el cdigo JavaScript dentro de la cabecera deldocumento (dentro de la etiqueta ):


www.librosweb.es 6

Ejemplo de cdigo JavaScript en el propio documento

alert("Un mensaje de prueba");

Un prrafo de texto.

Para que la pgina XHTML resultante sea vlida, es necesario aadir el atributo type a laetiqueta . Los valores que se incluyen en el atributo type estn estandarizadosy para el caso de JavaScript, el valor correcto es text/javascript.Este mtodo se emplea cuando se define un bloque pequeo de cdigo o cuando sequieren incluir instrucciones especficas en un determinado documento HTML quecompleten las instrucciones y funciones que se incluyen por defecto en todos losdocumentos del sitio web.El principal inconveniente es que si se quiere hacer una modificacin en el bloque decdigo, es necesario modificar todas las pginas que incluyen ese mismo bloque decdigo JavaScript.

1.4.2. Definir JavaScript en un archivo externo

Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScriptque los documentos XHTML enlazan mediante la etiqueta . Se pueden creartodos los archivos JavaScript que sean necesarios y cada documento XHTML puedeenlazar tantos archivos JavaScript como necesite.Ejemplo:Archivo codigo.js

alert("Un mensaje de prueba");

Documento XHTML



www.librosweb.es 7

Un prrafo de texto.

Adems del atributo type, este mtodo requiere definir el atributo src, que es el queindica la URL correspondiente al archivo JavaScript que se quiere enlazar. Cada etiqueta solamente puede enlazar un nico archivo, pero en una misma pgina sepueden incluir tantas etiquetas como sean necesarias.Los archivos de tipo JavaScript son documentos normales de texto con la extensin .js,que se pueden crear con cualquier editor de texto como Notepad, Wordpad, EmEditor,UltraEdit, Vi, etc.La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica elcdigo XHTML de la pgina, que se puede reutilizar el mismo cdigo JavaScript en todaslas pginas del sitio web y que cualquier modificacin realizada en el archivo JavaScriptse ve reflejada inmediatamente en todas las pginas XHTML que lo enlazan.

1.4.3. Incluir JavaScript en los elementos XHTML

Este ltimo mtodo es el menos utilizado, ya que consiste en incluir trozos de JavaScriptdentro del cdigo XHTML de la pgina:


Un prrafo de texto.

El mayor inconveniente de este mtodo es que ensucia innecesariamente el cdigoXHTML de la pgina y complica el mantenimiento del cdigo JavaScript. En general, estemtodo slo se utiliza para definir algunos eventos y en algunos otros casos especiales,como se ver ms adelante.

1.5. Etiqueta noscript

Algunos navegadores no disponen de soporte completo de JavaScript, otros navegadorespermiten bloquearlo parcialmente e incluso algunos usuarios bloquean completamenteel uso de JavaScript porque creen que as navegan de forma ms segura.En estos casos, es habitual que si la pgina web requiere JavaScript para su correctofuncionamiento, se incluya un mensaje de aviso al usuario indicndole que deberaactivar JavaScript para disfrutar completamente de la pgina. El siguiente ejemplo


www.librosweb.es 8

muestra una pgina web basada en JavaScript cuando se accede con JavaScript activadoy cuando se accede con JavaScript completamente desactivado.

Figura 1.1. Imagen de www.Netvibes.com con JavaScript activado

Figura 1.2. Imagen de www.Netvibes.com con JavaScript desactivado

El lenguaje HTML define la etiqueta para mostrar un mensaje al usuariocuando su navegador no puede ejecutar JavaScript. El siguiente cdigo muestra unejemplo del uso de la etiqueta :

...

Bienvenido a Mi SitioLa pgina que ests viendo requiere para su funcionamiento el uso de

JavaScript.Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.

La etiqueta se debe incluir en el interior de la etiqueta (normalmente se incluye al principio de ). El mensaje que muestra puede incluir cualquier elemento o etiqueta XHTML.


www.librosweb.es 9

1.6. Glosario bsico

Script: cada uno de los programas, aplicaciones o trozos de cdigo creados con ellenguaje de programacin JavaScript. Unas pocas lneas de cdigo forman un script y unarchivo de miles de lneas de JavaScript tambin se considera un script. A veces setraduce al espaol directamente como "guin", aunque script es una palabra msadecuada y comnmente aceptada.Sentencia: cada una de las instrucciones que forman un script.Palabras reservadas: son las palabras (en ingls) que se utilizan para construir lassentencias de JavaScript y que por tanto no pueden ser utilizadas libremente. Laspalabras actualmente reservadas por JavaScript son: break, case, catch, continue,default, delete, do, else, finally, for, function, if, in, instanceof, new, return,switch, this, throw, try, typeof, var, void, while, with.

1.7. Sintaxis

La sintaxis de un lenguaje de programacin se define como el conjunto de reglas quedeben seguirse al escribir el cdigo fuente de los programas para considerarse comocorrectos para ese lenguaje de programacin.La sintaxis de JavaScript es muy similar a la de otros lenguajes de programacin comoJava y C. Las normas bsicas que definen la sintaxis de JavaScript son las siguientes:

No se tienen en cuenta los espacios en blanco y las nuevas lneas: comosucede con XHTML, el intrprete de JavaScript ignora cualquier espacio en blancosobrante, por lo que el cdigo se puede ordenar de forma adecuada paraentenderlo mejor (tabulando las lneas, aadiendo espacios, creando nuevaslneas, etc.)

Se distinguen las maysculas y minsculas: al igual que sucede con la sintaxisde las etiquetas y elementos XHTML. Sin embargo, si en una pgina XHTML seutilizan indistintamente maysculas y minsculas, la pgina se visualizacorrectamente, siendo el nico problema la no validacin de la pgina. En cambio,si en JavaScript se intercambian maysculas y minsculas el script no funciona.

No se define el tipo de las variables: al crear una variable, no es necesarioindicar el tipo de dato que almacenar. De esta forma, una misma variable puedealmacenar diferentes tipos de datos durante la ejecucin del script.

No es necesario terminar cada sentencia con el carcter de punto y coma (;):en la mayora de lenguajes de programacin, es obligatorio terminar cadasentencia con el carcter ;. Aunque JavaScript no obliga a hacerlo, es convenienteseguir la tradicin de terminar cada sentencia con el carcter del punto y coma(;).

Se pueden incluir comentarios: los comentarios se utilizan para aadirinformacin en el cdigo fuente del programa. Aunque el contenido de los


www.librosweb.es 10

comentarios no se visualiza por pantalla, si que se enva al navegador del usuariojunto con el resto del script, por lo que es necesario extremar las precaucionessobre la informacin incluida en los comentarios.

JavaScript define dos tipos de comentarios: los de una sola lnea y los que ocupan variaslneas.Ejemplo de comentario de una sola lnea:

// a continuacin se muestra un mensajealert("mensaje de prueba");

Los comentarios de una sola lnea se definen aadiendo dos barras oblicuas (//) alprincipio de la lnea.Ejemplo de comentario de varias lneas:

/* Los comentarios de varias lneas son muy tilescuando se necesita incluir bastante informacinen los comentarios */alert("mensaje de prueba");

Los comentarios multilnea se definen encerrando el texto del comentario entre lossmbolos /* y */.

1.8. Posibilidades y limitaciones

Desde su aparicin, JavaScript siempre fue utilizado de forma masiva por la mayora desitios de Internet. La aparicin de Flash disminuy su popularidad, ya que Flashpermita realizar algunas acciones imposibles de llevar a cabo mediante JavaScript.Sin embargo, la aparicin de las aplicaciones AJAX programadas con JavaScript le hadevuelto una popularidad sin igual dentro de los lenguajes de programacin web.En cuanto a las limitaciones, JavaScript fue diseado de forma que se ejecutara en unentorno muy limitado que permitiera a los usuarios confiar en la ejecucin de los scripts.De esta forma, los scripts de JavaScript no pueden comunicarse con recursos que nopertenezcan al mismo dominio desde el que se descarg el script. Los scripts tampocopueden cerrar ventanas que no hayan abierto esos mismos scripts. Las ventanas que secrean no pueden ser demasiado pequeas ni demasiado grandes ni colocarse fuera de lavista del usuario (aunque los detalles concretos dependen de cada navegador).Adems, los scripts no pueden acceder a los archivos del ordenador del usuario (ni enmodo lectura ni en modo escritura) y tampoco pueden leer o modificar las preferenciasdel navegador.Por ltimo, si la ejecucin de un script dura demasiado tiempo (por ejemplo por unerror de programacin) el navegador informa al usuario de que un script estconsumiendo demasiados recursos y le da la posibilidad de detener su ejecucin.


www.librosweb.es 11

A pesar de todo, existen alternativas para poder saltarse algunas de las limitacionesanteriores. La alternativa ms utilizada y conocida consiste en firmar digitalmente elscript y solicitar al usuario el permiso para realizar esas acciones.

1.9. JavaScript y navegadores

Los navegadores ms modernos disponibles actualmente incluyen soporte de JavaScripthasta la versin correspondiente a la tercera edicin del estndar ECMA-262.La mayor diferencia reside en el dialecto utilizado, ya que mientras Internet Explorerutiliza JScript, el resto de navegadores (Firefox, Opera, Safari, Konqueror) utilizanJavaScript.

1.10. JavaScript en otros entornos

La inigualable popularidad de JavaScript como lenguaje de programacin deaplicaciones web se ha extendido a otras aplicaciones y otros entornos no relacionadoscon la web.Herramientas como Adobe Acrobat permiten incluir cdigo JavaScript en archivos PDF.Otras herramientas de Adobe como Flash y Flex utilizan ActionScript, un dialecto delmismo estndar de JavaScript.Photoshop permite realizar pequeos scripts mediante JavaScript y la versin 6 de Javaincluye un nuevo paquete (denominado javax.script) que permite integrar amboslenguajes.Por ltimo, aplicaciones como Yahoo Widgets (http://widgets.yahoo.com/) y elDashboard de Apple (http://www.apple.com/downloads/dashboard/) utilizanJavaScript para programar sus widgets.


www.librosweb.es 12

Captulo 2. El primer scriptA continuacin, se muestra un primer script sencillo pero completo:

El primer script

alert("Hola Mundo!");

Esta pgina contiene el primer script

En este ejemplo, el script se incluye como un bloque de cdigo dentro de una pginaXHTML. Por tanto, en primer lugar se debe crear una pgina XHTML correcta queincluya la declaracin del DOCTYPE, el atributo xmlns, las secciones y , laetiqueta , etc.Aunque el cdigo del script se puede incluir en cualquier parte de la pgina, serecomienda incluirlo en la cabecera del documento, es decir, dentro de la etiqueta.A continuacin, el cdigo JavaScript se debe incluir entre las etiquetas.... Adems, para que la pgina sea vlida, es necesario definir elatributo type de la etiqueta . Tcnicamente, el atributo type se correspondecon "el tipo MIME", que es un estndar para identificar los diferentes tipos decontenidos. El "tipo MIME" correcto para JavaScript es text/javascript.Una vez definida la zona en la que se incluir el script, se escriben todas las sentenciasque forman la aplicacin. Este primer ejemplo es tan sencillo que solamente incluye unasentencia: alert("Hola Mundo!");.La instruccin alert() es una de las utilidades que incluye JavaScript y permite mostrarun mensaje en la pantalla del usuario. Si se visualiza la pgina web de este primer scripten cualquier navegador, automticamente se mostrar una ventana con el mensaje"Hola Mundo!".A continuacin se muestra el resultado de ejecutar el script en diferentes navegadores:

Introduccin a JavaScript Captulo 2. El primer script

www.librosweb.es 13

Figura 2.1. Mensaje mostrado con "alert()" en Internet Explorer

Figura 2.2. Mensaje mostrado con "alert()" en Firefox


www.librosweb.es 14

Figura 2.3. Mensaje mostrado con "alert()" en Opera

Como se puede observar en las imgenes anteriores, el funcionamiento de la utilidadalert() en los distintos navegadores es idntico. Sin embargo, existen grandesdiferencias visuales en la forma en la que se presentan los mensajes.Ejercicio 1

Modificar el primer script para que:

1. Todo el cdigo JavaScript se encuentre en un archivo externo llamado codigo.js yel script siga funcionando de la misma manera.

2. Despus del primer mensaje, se debe mostrar otro mensaje que diga "Soy el primerscript"

3. Aadir algunos comentarios que expliquen el funcionamiento del cdigo4. Aadir en la pgina XHTML un mensaje de aviso para los navegadores que no

tengan activado el soporte de JavaScript


www.librosweb.es 15

Captulo 3. Programacin bsicaAntes de comenzar a desarrollar programas y utilidades con JavaScript, es necesarioconocer los elementos bsicos con los que se construyen las aplicaciones. Si ya sabesprogramar en algn lenguaje de programacin, este captulo te servir para conocer lasintaxis especfica de JavaScript.Si nunca has programado, este captulo explica en detalle y comenzando desde cero losconocimientos bsicos necesarios para poder entender posteriormente la programacinavanzada, que es la que se utiliza para crear las aplicaciones reales.

3.1. Variables

Las variables en los lenguajes de programacin siguen una lgica similar a las variablesutilizadas en otros mbitos como las matemticas. Una variable es un elemento que seemplea para almacenar y hacer referencia a otro valor. Gracias a las variables es posiblecrear "programas genricos", es decir, programas que funcionan siempre igualindependientemente de los valores concretos utilizados.De la misma forma que si en Matemticas no existieran las variables no se podrandefinir las ecuaciones y frmulas, en programacin no se podran hacer programasrealmente tiles sin las variables.Si no existieran variables, un programa que suma dos nmeros podra escribirse como:

resultado = 3 + 1

El programa anterior es tan poco til que slo sirve para el caso en el que el primernmero de la suma sea el 3 y el segundo nmero sea el 1. En cualquier otro caso, elprograma obtiene un resultado incorrecto.Sin embargo, el programa se puede rehacer de la siguiente manera utilizando variablespara almacenar y referirse a cada nmero:

numero_1 = 3numero_2 = 1resultado = numero_1 + numero_2

Los elementos numero_1 y numero_2 son variables que almacenan los valores que utilizael programa. El resultado se calcula siempre en funcin del valor almacenado por lasvariables, por lo que este programa funciona correctamente para cualquier par denmeros indicado. Si se modifica el valor de las variables numero_1 y numero_2, elprograma sigue funcionando correctamente.Las variables en JavaScript se crean mediante la palabra reservada var. De esta forma, elejemplo anterior se puede realizar en JavaScript de la siguiente manera:

Introduccin a JavaScript Captulo 3. Programacin bsica

www.librosweb.es 16

var numero_1 = 3;var numero_2 = 1;var resultado = numero_1 + numero_2;

La palabra reservada var solamente se debe indicar al definir por primera vez lavariable, lo que se denomina declarar una variable. Cuando se utilizan las variables enel resto de instrucciones del script, solamente es necesario indicar su nombre. En otraspalabras, en el ejemplo anterior sera un error indicar lo siguiente:

var numero_1 = 3;var numero_2 = 1;var resultado = var numero_1 + var numero_2;

Si cuando se declara una variable se le asigna tambin un valor, se dice que la variableha sido inicializada. En JavaScript no es obligatorio inicializar las variables, ya que sepueden declarar por una parte y asignarles un valor posteriormente. Por tanto, elejemplo anterior se puede rehacer de la siguiente manera:

var numero_1;var numero_2;

numero_1 = 3;numero_2 = 1;

var resultado = numero_1 + numero_2;

Una de las caractersticas ms sorprendentes de JavaSript para los programadoreshabituados a otros lenguajes de programacin es que tampoco es necesario declarar lasvariables. En otras palabras, se pueden utilizar variables que no se han definidoanteriormente mediante la palabra reservada var. El ejemplo anterior tambin escorrecto en JavaScript de la siguiente forma:

var numero_1 = 3;var numero_2 = 1;resultado = numero_1 + numero_2;

La variable resultado no est declarada, por lo que JavaScript crea una variable global(ms adelante se vern las diferencias entre variables locales y globales) y le asigna elvalor correspondiente. De la misma forma, tambin sera correcto el siguiente cdigo:

numero_1 = 3;numero_2 = 1;resultado = numero_1 + numero_2;

En cualquier caso, se recomienda declarar todas las variables que se vayan a utilizar.El nombre de una variable tambin se conoce como identificador y debe cumplir lassiguientes normas:

Slo puede estar formado por letras, nmeros y los smbolos $ (dlar) y _ (guinbajo).

El primer carcter no puede ser un nmero.


www.librosweb.es 17

Por tanto, las siguientes variables tienen nombres correctos:var $numero1;var _$letra;var $$$otroNumero;var $_a__$4;

Sin embargo, las siguientes variables tienen identificadores incorrectos:var 1numero; // Empieza por un nmerovar numero;1_123; // Contiene un carcter ";"

3.2. Tipos de variables

Aunque todas las variables de JavaScript se crean de la misma forma (mediante lapalabra reservada var), la forma en la que se les asigna un valor depende del tipo devalor que se quiere almacenar (nmeros, textos, etc.)

3.2.1. Numricas

Se utilizan para almacenar valores numricos enteros (llamados integer en ingls) odecimales (llamados float en ingls). En este caso, el valor se asigna indicandodirectamente el nmero entero o decimal. Los nmeros decimales utilizan el carcter .(punto) en vez de , (coma) para separar la parte entera y la parte decimal:

var iva = 16; // variable tipo enterovar total = 234.65; // variable tipo decimal

3.2.2. Cadenas de texto

Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar el valora la variable, se encierra el valor entre comillas dobles o simples, para delimitar sucomienzo y su final:

var mensaje = "Bienvenido a nuestro sitio web";var nombreProducto = 'Producto ABC';var letraSeleccionada = 'c';

En ocasiones, el texto que se almacena en las variables no es tan sencillo. Si por ejemploel propio texto contiene comillas simples o dobles, la estrategia que se sigue es la deencerrar el texto con las comillas (simples o dobles) que no utilice el texto:

/* El contenido de texto1 tiene comillas simples, por lo quese encierra con comillas dobles */

var texto1 = "Una frase con 'comillas simples' dentro";

/* El contenido de texto2 tiene comillas dobles, por lo quese encierra con comillas simples */

var texto2 = 'Una frase con "comillas dobles" dentro';

No obstante, a veces las cadenas de texto contienen tanto comillas simples como dobles.Adems, existen otros caracteres que son difciles de incluir en una variable de texto(tabulador, ENTER, etc.) Para resolver estos problemas, JavaScript define un mecanismo


www.librosweb.es 18

para incluir de forma sencilla caracteres especiales y problemticos dentro de unacadena de texto.El mecanismo consiste en sustituir el carcter problemtico por una combinacin simplede caracteres. A continuacin se muestra la tabla de conversin que se debe utilizar:

Si se quiere incluir... Se debe incluir...

Una nueva lnea \n

Un tabulador \t

Una comilla simple \'

Una comilla doble \"

Una barra inclinada \\

De esta forma, el ejemplo anterior que contena comillas simples y dobles dentro deltexto se puede rehacer de la siguiente forma:

var texto1 = 'Una frase con \'comillas simples\' dentro';

var texto2 = "Una frase con \"comillas dobles\" dentro";

Este mecanismo de JavaScript se denomina "mecanismo de escape" de los caracteresproblemticos, y es habitual referirse a que los caracteres han sido "escapados".Ejercicio 2

Modificar el primer script del captulo anterior para que:

1. El mensaje que se muestra al usuario se almacene en una variable llamada mensajey el funcionamiento del script sea el mismo.

2. El mensaje mostrado sea el de la siguiente imagen:


www.librosweb.es 19

Figura 3.1. Nuevo mensaje que debe mostrar el script

3.2.3. Arrays

En ocasiones, a los arrays se les llama vectores, matrices e incluso arreglos. No obstante,el trmino array es el ms utilizado y es una palabra comnmente aceptada en elentorno de la programacin.Un array es una coleccin de variables, que pueden ser todas del mismo tipo o cada unade un tipo diferente. Su utilidad se comprende mejor con un ejemplo sencillo: si unaaplicacin necesita manejar los das de la semana, se podran crear siete variables detipo texto:

var dia1 = "Lunes";var dia2 = "Martes";...var dia7 = "Domingo";

Aunque el cdigo anterior no es incorrecto, s que es poco eficiente y complica en excesola programacin. Si en vez de los das de la semana se tuviera que guardar el nombre delos meses del ao, el nombre de todos los pases del mundo o las mediciones diarias detemperatura de los ltimos 100 aos, se tendran que crear decenas o cientos devariables.En este tipo de casos, se pueden agrupar todas las variables relacionadas en unacoleccin de variables o array. El ejemplo anterior se puede rehacer de la siguienteforma:

var dias = ["Lunes", "Martes", "Mircoles", "Jueves", "Viernes", "Sbado","Domingo"];

Ahora, una nica variable llamada dias almacena todos los valores relacionados entre s,en este caso los das de la semana. Para definir un array, se utilizan los caracteres [ y ]para delimitar su comienzo y su final y se utiliza el carcter , (coma) para separar suselementos:

var nombre_array = [valor1, valor2, ..., valorN];

Una vez definido un array, es muy sencillo acceder a cada uno de sus elementos. Cadaelemento se accede indicando su posicin dentro del array. La nica complicacin, quees responsable de muchos errores cuando se empieza a programar, es que las posicionesde los elementos empiezan a contarse en el 0 y no en el 1:

var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes"var otroDia = dias[5]; // otroDia = "Sbado"

En el ejemplo anterior, la primera instruccin quiere obtener el primer elemento delarray. Para ello, se indica el nombre del array y entre corchetes la posicin del elementodentro del array. Como se ha comentado, las posiciones se empiezan a contar en el 0, porlo que el primer elemento ocupa la posicin 0 y se accede a el mediante dias[0].


www.librosweb.es 20

El valor dias[5] hace referencia al elemento que ocupa la sexta posicin dentro delarray dias. Como las posiciones empiezan a contarse en 0, la posicin 5 hace referenciaal sexto elemento, en este caso, el valor Sbado.Ejercicio 3

Crear un array llamado meses y que almacene el nombre de los doce meses del ao. Mostrarpor pantalla los doce nombres utilizando la funcin alert().

3.2.4. Booleanos

Las variables de tipo boolean o booleano tambin se conocen con el nombre de variablesde tipo lgico. Aunque para entender realmente su utilidad se debe estudiar laprogramacin avanzada con JavaScript del siguiente captulo, su funcionamiento bsicoes muy sencillo.Una variable de tipo boolean almacena un tipo especial de valor que solamente puedetomar dos valores: true (verdadero) o false (falso). No se puede utilizar paraalmacenar nmeros y tampoco permite guardar cadenas de texto.Los nicos valores que pueden almacenar estas variables son true y false, por lo queno pueden utilizarse los valores verdadero y falso. A continuacin se muestra un par devariables de tipo booleano:

var clienteRegistrado = false;var ivaIncluido = true;

3.3. Operadores

Las variables por s solas son de poca utilidad. Hasta ahora, slo se ha visto cmo crearvariables de diferentes tipos y cmo mostrar su valor mediante la funcin alert(). Parahacer programas realmente tiles, son necesarias otro tipo de herramientas.Los operadores permiten manipular el valor de las variables, realizar operacionesmatemticas con sus valores y comparar diferentes variables. De esta forma, losoperadores permiten a los programas realizar clculos complejos y tomar decisioneslgicas en funcin de comparaciones y otros tipos de condiciones.

3.3.1. Asignacin

El operador de asignacin es el ms utilizado y el ms sencillo. Este operador se utilizapara guardar un valor especfico en una variable. El smbolo utilizado es = (no confundircon el operador == que se ver ms adelante):

var numero1 = 3;

A la izquierda del operador, siempre debe indicarse el nombre de una variable. A laderecha del operador, se pueden indicar variables, valores, condiciones lgicas, etc:


www.librosweb.es 21

var numero1 = 3;var numero2 = 4;

/* Error, la asignacin siempre se realiza a una variable,por lo que en la izquierda no se puede indicar un nmero */

5 = numero1;

// Ahora, la variable numero1 vale 5numero1 = 5;

// Ahora, la variable numero1 vale 4numero1 = numero2;

3.3.2. Incremento y decremento

Estos dos operadores solamente son vlidos para las variables numricas y se utilizanpara incrementar o decrementar en una unidad el valor de una variable.Ejemplo:

var numero = 5;++numero;alert(numero); // numero = 6

El operador de incremento se indica mediante el prefijo ++ en el nombre de la variable.El resultado es que el valor de esa variable se incrementa en una unidad. Por tanto, elanterior ejemplo es equivalente a:

var numero = 5;numero = numero + 1;alert(numero); // numero = 6

De forma equivalente, el operador decremento (indicado como un prefijo -- en elnombre de la variable) se utiliza para decrementar el valor de la variable:

var numero = 5;--numero;alert(numero); // numero = 4

El anterior ejemplo es equivalente a:var numero = 5;numero = numero - 1;alert(numero); // numero = 4

Los operadores de incremento y decremento no solamente se pueden indicar comoprefijo del nombre de la variable, sino que tambin es posible utilizarlos como sufijo. Eneste caso, su comportamiento es similar pero muy diferente. En el siguiente ejemplo:

var numero = 5;numero++;alert(numero); // numero = 6

El resultado de ejecutar el script anterior es el mismo que cuando se utiliza el operador++numero, por lo que puede parecer que es equivalente indicar el operador ++ delante o


www.librosweb.es 22

detrs del identificador de la variable. Sin embargo, el siguiente ejemplo muestra susdiferencias:

var numero1 = 5;var numero2 = 2;numero3 = numero1++ + numero2;// numero3 = 7, numero1 = 6

var numero1 = 5;var numero2 = 2;numero3 = ++numero1 + numero2;// numero3 = 8, numero1 = 6

Si el operador ++ se indica como prefijo del identificador de la variable, su valor seincrementa antes de realizar cualquier otra operacin. Si el operador ++ se indica comosufijo del identificador de la variable, su valor se incrementa despus de ejecutar lasentencia en la que aparece.Por tanto, en la instruccin numero3 = numero1++ + numero2;, el valor de numero1 seincrementa despus de realizar la operacin (primero se suma y numero3 vale 7, despusse incrementa el valor de numero1 y vale 6). Sin embargo, en la instruccin numero3 =++numero1 + numero2;, en primer lugar se incrementa el valor de numero1 y despus serealiza la suma (primero se incrementa numero1 y vale 6, despus se realiza la suma ynumero3 vale 8).

3.3.3. Lgicos

Los operadores lgicos son imprescindibles para realizar aplicaciones complejas, ya quese utilizan para tomar decisiones sobre las instrucciones que debera ejecutar elprograma en funcin de ciertas condiciones.El resultado de cualquier operacin que utilice operadores lgicos siempre es un valorlgico o booleano.

3.3.3.1. Negacin

Uno de los operadores lgicos ms utilizados es el de la negacin. Se utiliza para obtenerel valor contrario al valor de la variable:

var visible = true;alert(!visible); // Muestra "false" y no "true"

La negacin lgica se obtiene prefijando el smbolo ! al identificador de la variable. Elfuncionamiento de este operador se resume en la siguiente tabla:

variable !variable

true false

false true


www.librosweb.es 23

Si la variable original es de tipo booleano, es muy sencillo obtener su negacin. Sinembargo, qu sucede cuando la variable es un nmero o una cadena de texto? Paraobtener la negacin en este tipo de variables, se realiza en primer lugar su conversin aun valor booleano:

Si la variable contiene un nmero, se transforma en false si vale 0 y en true paracualquier otro nmero (positivo o negativo, decimal o entero).

Si la variable contiene una cadena de texto, se transforma en false si la cadena esvaca ("") y en true en cualquier otro caso.

var cantidad = 0;vacio = !cantidad; // vacio = true

cantidad = 2;vacio = !cantidad; // vacio = false

var mensaje = "";mensajeVacio = !mensaje; // mensajeVacio = true

mensaje = "Bienvenido";mensajeVacio = !mensaje; // mensajeVacio = false

3.3.3.2. AND

La operacin lgica AND obtiene su resultado combinando dos valores booleanos. Eloperador se indica mediante el smbolo && y su resultado solamente es true si los dosoperandos son true:

variable1 variable2 variable1 && variable2

true true true

true false false

false true false

false false false

var valor1 = true;var valor2 = false;resultado = valor1 && valor2; // resultado = false

valor1 = true;valor2 = true;resultado = valor1 && valor2; // resultado = true

3.3.3.3. OR

La operacin lgica OR tambin combina dos valores booleanos. El operador se indicamediante el smbolo || y su resultado es true si alguno de los dos operandos es true:

variable1 variable2 variable1 || variable2

true true true


www.librosweb.es 24

true false true

false true true

false false false

var valor1 = true;var valor2 = false;resultado = valor1 || valor2; // resultado = true

valor1 = false;valor2 = false;resultado = valor1 || valor2; // resultado = false

3.3.4. Matemticos

JavaScript permite realizar manipulaciones matemticas sobre el valor de las variablesnumricas. Los operadores definidos son: suma (+), resta (-), multiplicacin (*) ydivisin (/). Ejemplo:


resultado = numero1 / numero2; // resultado = 2resultado = 3 + numero1; // resultado = 13resultado = numero2 4; // resultado = 1resultado = numero1 * numero 2; // resultado = 50

Adems de los cuatro operadores bsicos, JavaScript define otro operador matemticoque no es sencillo de entender cuando se estudia por primera vez, pero que es muy tilen algunas ocasiones.Se trata del operador "mdulo", que calcula el resto de la divisin entera de dosnmeros. Si se divide por ejemplo 10 y 5, la divisin es exacta y da un resultado de 2. Elresto de esa divisin es 0, por lo que mdulo de 10 y 5 es igual a 0.Sin embargo, si se divide 9 y 5, la divisin no es exacta, el resultado es 1 y el resto 4, porlo que mdulo de 9 y 5 es igual a 4.El operador mdulo en JavaScript se indica mediante el smbolo %, que no debeconfundirse con el clculo del porcentaje:

var numero1 = 10;var numero2 = 5;resultado = numero1 % numero2; // resultado = 0

numero1 = 9;numero2 = 5;resultado = numero1 % numero2; // resultado = 4

Los operadores matemticos tambin se pueden combinar con el operador deasignacin para abreviar su notacin:


www.librosweb.es 25

var numero1 = 5;numero1 += 3; // numero1 = numero1 + 3 = 8numero1 -= 1; // numero1 = numero1 - 1 = 4numero1 *= 2; // numero1 = numero1 * 2 = 10numero1 /= 5; // numero1 = numero1 / 5 = 1numero1 %= 4; // numero1 = numero1 % 4 = 1

3.3.5. Relacionales

Los operadores relacionales definidos por JavaScript son idnticos a los que definen lasmatemticas: mayor que (>), menor que (=), menor o igual ( numero2; // resultado = falseresultado = numero1 < numero2; // resultado = true

numero1 = 5;numero2 = 5;resultado = numero1 >= numero2; // resultado = trueresultado = numero1 = texto2; // resultado = false


www.librosweb.es 26

Cuando se utilizan cadenas de texto, los operadores "mayor que" (>) y "menor que" (

si su valor es false) no se ejecuta ninguna instruccin contenida en {...} y el programacontina ejecutando el resto de instrucciones del script.Ejemplo:

var mostrarMensaje = true;

if(mostrarMensaje) {alert("Hola Mundo");

}

En el ejemplo anterior, el mensaje s que se muestra al usuario ya que la variablemostrarMensaje tiene un valor de true y por tanto, el programa entra dentro del bloquede instrucciones del if.El ejemplo se podra reescribir tambin como:


if(mostrarMensaje == true) {alert("Hola Mundo");

}

En este caso, la condicin es una comparacin entre el valor de la variablemostrarMensaje y el valor true. Como los dos valores coinciden, la igualdad se cumple ypor tanto la condicin es cierta, su valor es true y se ejecutan las instruccionescontenidas en ese bloque del if.La comparacin del ejemplo anterior suele ser el origen de muchos errores deprogramacin, al confundir los operadores == y =. Las comparaciones siempre serealizan con el operador ==, ya que el operador = solamente asigna valores:


// Se comparan los dos valoresif(mostrarMensaje == false) {

...}

// Error - Se asigna el valor "false" a la variableif(mostrarMensaje = false) {

...}

La condicin que controla el if() puede combinar los diferentes operadores lgicos yrelacionales mostrados anteriormente:

var mostrado = false;

if(!mostrado) {alert("Es la primera vez que se muestra el mensaje");

}


www.librosweb.es 28

Los operadores AND y OR permiten encadenar varias condiciones simples para construircondiciones complejas:

var mostrado = false;var usuarioPermiteMensajes = true;

if(!mostrado && usuarioPermiteMensajes) {alert("Es la primera vez que se muestra el mensaje");

}

La condicin anterior est formada por una operacin AND sobre dos variables. A su vez,a la primera variable se le aplica el operador de negacin antes de realizar la operacinAND. De esta forma, como el valor de mostrado es false, el valor !mostrado sera true.Como la variable usuarioPermiteMensajes vale true, el resultado de !mostrado &&usuarioPermiteMensajes sera igual a true && true, por lo que el resultado final de lacondicin del if() sera true y por tanto, se ejecutan las instrucciones que seencuentran dentro del bloque del if().Ejercicio 5

Completar las condiciones de los if del siguiente script para que los mensajes de losalert() se muestren siempre de forma correcta:


if(...) {alert("numero1 no es mayor que numero2");

}if(...) {

alert("numero2 es positivo");}if(...) {

alert("numero1 es negativo o distinto de cero");}if(...) {

alert("Incrementar en 1 unidad el valor de numero1 no lo hace mayor o igualque numero2");}

3.4.2. Estructura if...else

En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple lacondicin, hazlo; si no se cumple, no hagas nada". Normalmente las condiciones suelenser del tipo "si se cumple esta condicin, hazlo; si no se cumple, haz esto otro".Para este segundo tipo de decisiones, existe una variante de la estructura if llamadaif...else. Su definicin formal es la siguiente:

if(condicion) {...

}else {


www.librosweb.es 29

...}

Si la condicin se cumple (es decir, si su valor es true) se ejecutan todas lasinstrucciones que se encuentran dentro del if(). Si la condicin no se cumple (es decir,si su valor es false) se ejecutan todas las instrucciones contenidas en else { }.Ejemplo:

var edad = 18;

if(edad >= 18) {alert("Eres mayor de edad");

}else {

alert("Todava eres menor de edad");}

Si el valor de la variable edad es mayor o igual que el valor numrico 18, la condicin delif() se cumple y por tanto, se ejecutan sus instrucciones y se muestra el mensaje "Eresmayor de edad". Sin embargo, cuando el valor de la variable edad no es igual o mayorque 18, la condicin del if() no se cumple, por lo que automticamente se ejecutantodas las instrucciones del bloque else { }. En este caso, se mostrara el mensaje"Todava eres menor de edad".El siguiente ejemplo compara variables de tipo cadena de texto:

var nombre = "";

if(nombre == "") {alert("An no nos has dicho tu nombre");

}else {

alert("Hemos guardado tu nombre");}

La condicin del if() anterior se construye mediante el operador ==, que es el que seemplea para comparar dos valores (no confundir con el operador = que se utiliza paraasignar valores). En el ejemplo anterior, si la cadena de texto almacenada en la variablenombre es vaca (es decir, es igual a "") se muestra el mensaje definido en el if(). Enotro caso, se muestra el mensaje definido en el bloque else { }.La estructura if...else se puede encadenar para realizar varias comprobacionesseguidas:

if(edad < 12) {alert("Todava eres muy pequeo");

}else if(edad < 19) {

alert("Eres un adolescente");}else if(edad < 35) {

alert("Aun sigues siendo joven");}


www.librosweb.es 30

else {alert("Piensa en cuidarte un poco ms");

}

No es obligatorio que la combinacin de estructuras if...else acabe con la instruccinelse, ya que puede terminar con una instruccin de tipo else if().Ejercicio 6

El clculo de la letra del Documento Nacional de Identidad (DNI) es un proceso matemticosencillo que se basa en obtener el resto de la divisin entera del nmero de DNI y el nmero23. A partir del resto de la divisin, se obtiene la letra seleccionndola dentro de un array deletras.

El array de letras es:

var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B',

'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];

Por tanto si el resto de la divisin es 0, la letra del DNI es la T y si el resto es 3 la letra es la A.Con estos datos, elaborar un pequeo script que:

1. Almacene en una variable el nmero de DNI indicado por el usuario y en otravariable la letra del DNI que se ha indicado. (Pista: si se quiere pedir directamenteal usuario que indique su nmero y su letra, se puede utilizar la funcin prompt())

2. En primer lugar (y en una sola instruccin) se debe comprobar si el nmero esmenor que 0 o mayor que 99999999. Si ese es el caso, se muestra un mensaje alusuario indicando que el nmero proporcionado no es vlido y el programa nomuestra ms mensajes.

3. Si el nmero es vlido, se calcula la letra que le corresponde segn el mtodoexplicado anteriormente.

4. Una vez calculada la letra, se debe comparar con la letra indicada por el usuario. Sino coinciden, se muestra un mensaje al usuario dicindole que la letra que haindicado no es correcta. En otro caso, se muestra un mensaje indicando que elnmero y la letra de DNI son correctos.

3.4.3. Estructura for

Las estructuras if y if...else no son muy eficientes cuando se desea ejecutar de formarepetitiva una instruccin. Por ejemplo, si se quiere mostrar un mensaje cinco veces, sepodra pensar en utilizar el siguiente if:

var veces = 0;

if(veces < 4) {alert("Mensaje");veces++;

}


www.librosweb.es 31

Se comprueba si la variable veces es menor que 4. Si se cumple, se entra dentro del if(),se muestra el mensaje y se incrementa el valor de la variable veces. As se debera seguirejecutando hasta mostrar el mensaje las cinco veces deseadas.Sin embargo, el funcionamiento real del script anterior es muy diferente al deseado, yaque solamente se muestra una vez el mensaje por pantalla. La razn es que la ejecucinde la estructura if() no se repite y la comprobacin de la condicin slo se realiza unavez, independientemente de que dentro del if() se modifique el valor de la variableutilizada en la condicin.La estructura for permite realizar este tipo de repeticiones (tambin llamadas bucles)de una forma muy sencilla. No obstante, su definicin formal no es tan sencilla como lade if():

for(inicializacion; condicion; actualizacion) {...

}

La idea del funcionamiento de un bucle for es la siguiente: "mientras la condicinindicada se siga cumpliendo, repite la ejecucin de las instrucciones definidas dentro delfor. Adems, despus de cada repeticin, actualiza el valor de las variables que se utilizanen la condicin".

La "inicializacin" es la zona en la que se establece los valores iniciales de lasvariables que controlan la repeticin.

La "condicin" es el nico elemento que decide si continua o se detiene larepeticin.

La "actualizacin" es el nuevo valor que se asigna despus de cada repeticin a lasvariables que controlan la repeticin.

var mensaje = "Hola, estoy dentro de un bucle";

for(var i = 0; i < 5; i++) {alert(mensaje);

}

La parte de la inicializacin del bucle consiste en:var i = 0;

Por tanto, en primer lugar se crea la variable i y se le asigna el valor de 0. Esta zona deinicializacin solamente se tiene en consideracin justo antes de comenzar a ejecutar elbucle. Las siguientes repeticiones no tienen en cuenta esta parte de inicializacin.La zona de condicin del bucle es:

i < 5

Los bucles se siguen ejecutando mientras se cumplan las condiciones y se dejan deejecutar justo despus de comprobar que la condicin no se cumple. En este caso,mientras la variable i valga menos de 5 el bucle se ejecuta indefinidamente.


www.librosweb.es 32

Como la variable i se ha inicializado a un valor de 0 y la condicin para salir del bucle esque i sea menor que 5, si no se modifica el valor de i de alguna forma, el bucle serepetira indefinidamente.Por ese motivo, es imprescindible indicar la zona de actualizacin, en la que se modificael valor de las variables que controlan el bucle:

i++

En este caso, el valor de la variable i se incrementa en una unidad despus de cadarepeticin. La zona de actualizacin se ejecuta despus de la ejecucin de lasinstrucciones que incluye el for.As, durante la ejecucin de la quinta repeticin el valor de i ser 4. Despus de la quintaejecucin, se actualiza el valor de i, que ahora valdr 5. Como la condicin es que i seamenor que 5, la condicin ya no se cumple y las instrucciones del for no se ejecutan unasexta vez.Normalmente, la variable que controla los bucles for se llama i, ya que recuerda a lapalabra ndice y su nombre tan corto ahorra mucho tiempo y espacio.El ejemplo anterior que mostraba los das de la semana contenidos en un array se puederehacer de forma ms sencilla utilizando la estructura for:


for(var i=0; i


for(i in dias) {alert(dias[i]);

}

La variable que se indica como indice es la que se puede utilizar dentro del buclefor...in para acceder a los elementos del array. De esta forma, en la primera repeticindel bucle la variable i vale 0 y en la ltima vale 6.Esta estructura de control es la ms adecuada para recorrer arrays (y objetos), ya queevita tener que indicar la inicializacin y las condiciones del bucle for simple y funcionacorrectamente cualquiera que sea la longitud del array. De hecho, sigue funcionandoigual aunque vare el nmero de elementos del array.

3.5. Funciones y propiedades bsicas de JavaScript

JavaScript incorpora una serie de herramientas y utilidades (llamadas funciones ypropiedades, como se ver ms adelante) para el manejo de las variables. De esta forma,muchas de las operaciones bsicas con las variables, se pueden realizar directamentecon las utilidades que ofrece JavaScript.

3.5.1. Funciones tiles para cadenas de texto

A continuacin se muestran algunas de las funciones ms tiles para el manejo decadenas de texto:length, calcula la longitud de una cadena de texto (el nmero de caracteres que laforman)

var mensaje = "Hola Mundo";var numeroLetras = mensaje.length; // numeroLetras = 10

+, se emplea para concatenar varias cadenas de textovar mensaje1 = "Hola";var mensaje2 = " Mundo";var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"

Adems del operador +, tambin se puede utilizar la funcin concat()var mensaje1 = "Hola";var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"

Las cadenas de texto tambin se pueden unir con variables numricas:var variable1 = "Hola ";var variable2 = 3;var mensaje = variable1 + variable2; // mensaje = "Hola 3"

Cuando se unen varias cadenas de texto es habitual olvidar aadir un espacio deseparacin entre las palabras:


www.librosweb.es 34

var mensaje1 = "Hola";var mensaje2 = "Mundo";var mensaje = mensaje1 + mensaje2; // mensaje = "HolaMundo"

Los espacios en blanco se pueden aadir al final o al principio de las cadenas y tambinse pueden indicar forma explcita:

var mensaje1 = "Hola";var mensaje2 = "Mundo";var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola Mundo"

toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientescaracteres en maysculas:

var mensaje1 = "Hola";var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"

toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientescaracteres en minsculas:

var mensaje1 = "HolA";var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"

charAt(posicion), obtiene el carcter que se encuentra en la posicin indicada:var mensaje = "Hola";var letra = mensaje.charAt(0); // letra = Hletra = mensaje.charAt(2); // letra = l

indexOf(caracter), calcula la posicin en la que se encuentra el carcter indicadodentro de la cadena de texto. Si el carcter se incluye varias veces dentro de la cadena detexto, se devuelve su primera posicin empezando a buscar desde la izquierda. Si lacadena no contiene el carcter, la funcin devuelve el valor -1:

var mensaje = "Hola";var posicion = mensaje.indexOf('a'); // posicion = 3posicion = mensaje.indexOf('b'); // posicion = -1

Su funcin anloga es lastIndexOf():lastIndexOf(caracter), calcula la ltima posicin en la que se encuentra el carcterindicado dentro de la cadena de texto. Si la cadena no contiene el carcter, la funcindevuelve el valor -1:

var mensaje = "Hola";var posicion = mensaje.lastIndexOf('a'); // posicion = 3posicion = mensaje.lastIndexOf('b'); // posicion = -1

La funcin lastIndexOf() comienza su bsqueda desde el final de la cadena hacia elprincipio, aunque la posicin devuelta es la correcta empezando a contar desde elprincipio de la palabra.substring(inicio, final), extrae una porcin de una cadena de texto. El segundoparmetro es opcional. Si slo se indica el parmetro inicio, la funcin devuelve laparte de la cadena original correspondiente desde esa posicin hasta el final:


www.librosweb.es 35

var mensaje = "Hola Mundo";var porcion = mensaje.substring(2); // porcion = "la Mundo"porcion = mensaje.substring(5); // porcion = "Mundo"porcion = mensaje.substring(7); // porcion = "ndo"

Si se indica un inicio negativo, se devuelve la misma cadena original:var mensaje = "Hola Mundo";var porcion = mensaje.substring(-2); // porcion = "Hola Mundo"

Cuando se indica el inicio y el final, se devuelve la parte de la cadena originalcomprendida entre la posicin inicial y la inmediatamente anterior a la posicin final (esdecir, la posicin inicio est incluida y la posicin final no):

var mensaje = "Hola Mundo";var porcion = mensaje.substring(1, 8); // porcion = "ola Mun"porcion = mensaje.substring(3, 4); // porcion = "a"

Si se indica un final ms pequeo que el inicio, JavaScript los considera de formainversa, ya que automticamente asigna el valor ms pequeo al inicio y el ms grandeal final:

var mensaje = "Hola Mundo";var porcion = mensaje.substring(5, 0); // porcion = "Hola "porcion = mensaje.substring(0, 5); // porcion = "Hola "

split(separador), convierte una cadena de texto en un array de cadenas de texto. Lafuncin parte la cadena de texto determinando sus trozos a partir del carcterseparador indicado:

var mensaje = "Hola Mundo, soy una cadena de texto!";var palabras = mensaje.split(" ");// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];

Con esta funcin se pueden extraer fcilmente las letras que forman una palabra:var palabra = "Hola";var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]

3.5.2. Funciones tiles para arrays

A continuacin se muestran algunas de las funciones ms tiles para el manejo dearrays:length, calcula el nmero de elementos de un array

var vocales = ["a", "e", "i", "o", "u"];var numeroVocales = vocales.length; // numeroVocales = 5

concat(), se emplea para concatenar los elementos de varios arraysvar array1 = [1, 2, 3];array2 = array1.concat(4, 5, 6); // array2 = [1, 2, 3, 4, 5, 6]array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]


www.librosweb.es 36

join(separador), es la funcin contraria a split(). Une todos los elementos de unarray para formar una cadena de texto. Para unir los elementos se utiliza el carcterseparador indicado

var array = ["hola", "mundo"];var mensaje = array.join(""); // mensaje = "holamundo"mensaje = array.join(" "); // mensaje = "hola mundo"

pop(), elimina el ltimo elemento del array y lo devuelve. El array original se modifica ysu longitud disminuye en 1 elemento.

var array = [1, 2, 3];var ultimo = array.pop();// ahora array = [1, 2], ultimo = 3

push(), aade un elemento al final del array. El array original se modifica y aumenta sulongitud en 1 elemento. (Tambin es posible aadir ms de un elemento a la vez)

var array = [1, 2, 3];array.push(4);// ahora array = [1, 2, 3, 4]

shift(), elimina el primer elemento del array y lo devuelve. El array original se vemodificado y su longitud disminuida en 1 elemento.

var array = [1, 2, 3];var primero = array.shift();// ahora array = [2, 3], primero = 1

unshift(), aade un elemento al principio del array. El array original se modifica yaumenta su longitud en 1 elemento. (Tambin es posible aadir ms de un elemento a lavez)

var array = [1, 2, 3];array.unshift(0);// ahora array = [0, 1, 2, 3]

reverse(), modifica un array colocando sus elementos en el orden inverso a su posicinoriginal:

var array = [1, 2, 3];array.reverse();// ahora array = [3, 2, 1]

3.5.3. Funciones tiles para nmeros

A continuacin se muestran algunas de las funciones y propiedades ms tiles para elmanejo de nmeros.NaN, (del ingls, "Not a Number") JavaScript emplea el valor NaN para indicar un valornumrico no definido (por ejemplo, la divisin 0/0).

var numero1 = 0;var numero2 = 0;alert(numero1/numero2); // se muestra el valor NaN


www.librosweb.es 37

isNaN(), permite proteger a la aplicacin de posibles valores numricos no definidosvar numero1 = 0;var numero2 = 0;if(isNaN(numero1/numero2)) {

alert("La divisin no est definida para los nmeros indicados");}else {

alert("La divisin es igual a => " + numero1/numero2);}

Infinity, hace referencia a un valor numrico infinito y positivo (tambin existe el valorInfinity para los infinitos negativos)

var numero1 = 10;var numero2 = 0;alert(numero1/numero2); // se muestra el valor Infinity

toFixed(digitos), devuelve el nmero original con tantos decimales como losindicados por el parmetro digitos y realiza los redondeos necesarios. Se trata de unafuncin muy til por ejemplo para mostrar precios.

var numero1 = 4564.34567;numero1.toFixed(2); // 4564.35numero1.toFixed(6); // 4564.345670numero1.toFixed(); // 4564


www.librosweb.es 38

Captulo 4. Programacin avanzadaLas estructuras de control, los operadores y todas las utilidades propias de JavaScriptque se han visto en los captulos anteriores, permiten crear scripts sencillos y demediana complejidad.Sin embargo, para las aplicaciones ms complejas son necesarios otros elementos comolas funciones y otras estructuras de control ms avanzadas, que se describen en estecaptulo.

4.1. Funciones

Cuando se desarrolla una aplicacin compleja, es muy habitual utilizar una y otra vez lasmismas instrucciones. Un script para una tienda de comercio electrnico por ejemplo,tiene que calcular el precio total de los productos varias veces, para aadir losimpuestos y los gastos de envo.Cuando una serie de instrucciones se repiten una y otra vez, se complica demasiado elcdigo fuente de la aplicacin, ya que:

El cdigo de la aplicacin es mucho ms largo porque muchas instrucciones estnrepetidas.

Si se quiere modificar alguna de las instrucciones repetidas, se deben hacer tantasmodificaciones como veces se haya escrito esa instruccin, lo que se convierte enun trabajo muy pesado y muy propenso a cometer errores.

Las funciones son la solucin a todos estos problemas, tanto en JavaScript como en elresto de lenguajes de programacin. Una funcin es un conjunto de instrucciones que seagrupan para realizar una tarea concreta y que se pueden reutilizar fcilmente.En el siguiente ejemplo, las instrucciones que suman los dos nmeros y muestran unmensaje con el resultado se repiten una y otra vez:

var resultado;


// Se suman los nmeros y se muestra el resultadoresultado = numero1 + numero2;alert("El resultado es " + resultado);

numero1 = 10;numero2 = 7;

// Se suman los nmeros y se muestra el resultadoresultado = numero1 + numero2;alert("El resultado es " + resultado);

Introduccin a JavaScript Captulo 4. Programacin avanzada

www.librosweb.es 39


// Se suman los nmeros y se muestra el resultadoresultado = numero1 + numero2;alert("El resultado es " + resultado);...

Aunque es un ejemplo muy sencillo, parece evidente que repetir las mismasinstrucciones a lo largo de todo el cdigo no es algo recomendable. La solucin queproponen las funciones consiste en extraer las instrucciones que se repiten y sustituirlaspor una instruccin del tipo "en este punto, se ejecutan las instrucciones que se hanextrado":

var resultado;


/* En este punto, se llama a la funcin que suma2 nmeros y muestra el resultado */





...

Para que la solucin del ejemplo anterior sea vlida, las instrucciones comunes se tienenque agrupar en una funcin a la que se le puedan indicar los nmeros que debe sumarantes de mostrar el mensaje.Por lo tanto, en primer lugar se debe crear la funcin bsica con las instruccionescomunes. Las funciones en JavaScript se definen mediante la palabra reservadafunction, seguida del nombre de la funcin. Su definicin formal es la siguiente:

function nombre_funcion() {...

}

El nombre de la funcin se utiliza para llamar a esa funcin cuando sea necesario. Elconcepto es el mismo que con las variables, a las que se les asigna un nombre nico parapoder utilizarlas dentro del cdigo. Despus del nombre de la funcin, se incluyen dosparntesis cuyo significado se detalla ms adelante. Por ltimo, los smbolos { y } seutilizan para encerrar todas las instrucciones que pertenecen a la funcin (de formasimilar a como se encierran las instrucciones en las estructuras if o for).


www.librosweb.es 40

Volviendo al ejemplo anterior, se crea una funcin llamada suma_y_muestra de lasiguiente forma:

function suma_y_muestra() {resultado = numero1 + numero2;alert("El resultado es " + resultado);

}

Aunque la funcin anterior est correctamente creada, no funciona como debera ya quele faltan los "argumentos", que se explican en la siguiente seccin. Una vez creada lafuncin, desde cualquier punto del cdigo se puede llamar a la funcin para que seejecuten sus instrucciones (adems de "llamar a la funcin", tambin se suele utilizar laexpresin "invocar a la funcin").La llamada a la funcin se realiza simplemente indicando su nombre, incluyendo losparntesis del final y el carcter ; para terminar la instruccin:

function suma_y_muestra() {resultado = numero1 + numero2;alert("El resultado es " + resultado);

}

var resultado;


suma_y_muestra();


suma_y_muestra();


suma_y_muestra();...

El cdigo del ejemplo anterior es mucho ms eficiente que el primer cdigo que semostr, ya que no existen instrucciones repetidas. Las instrucciones que suman ymuestran mensajes se han agrupado bajo una funcin, lo que permite ejecutarlas encualquier punto del programa simplemente indicando el nombre de la funcin.Lo nico que le falta al ejemplo anterior para funcionar correctamente es poder indicar ala funcin los nmeros que debe sumar. Cuando se necesitan pasar datos a una funcin,se utilizan los "argumentos", como se explica en la siguiente seccin.


www.librosweb.es 41

4.1.1. Argumentos y valores de retorno

Las funciones ms sencillas no necesitan ninguna informacin para producir susresultados. Sin embargo, la mayora de funciones de las aplicaciones reales debenacceder al valor de algunas variables para producir sus resultados.Las variables que necesitan las funciones se llaman argumentos. Antes de que puedautilizarlos, la funcin debe indicar cuntos argumentos necesita y cul es el nombre decada argumento. Adems, al invocar la funcin, se deben incluir los valores que se le vana pasar a la funcin. Los argumentos se indican dentro de los parntesis que van detrsdel nombre de la funcin y se separan con una coma (,).Siguiendo el ejemplo anterior, la funcin debe indicar que necesita dos argumentos,correspondientes a los dos nmeros que tiene que sumar:

function suma_y_muestra(primerNumero, segundoNumero) { ... }

A continuacin, para utilizar el valor de los argumentos dentro de la funcin, se debeemplear el mismo nombre con el que se definieron los argumentos:

function suma_y_muestra(primerNumero, segundoNumero) { ... }var resultado = primerNumero + segundoNumero;alert("El resultado es " + resultado);

}

Dentro de la funcin, el valor de la variable primerNumero ser igual al primer valor quese le pase a la funcin y el valor de la variable segundoNumero ser igual al segundo valorque se le pasa. Para pasar valores a la funcin, se incluyen dentro de los parntesisutilizados al llamar a la funcin:

// Definicin de la funcinfunction suma_y_muestra(primerNumero, segundoNumero) { ... }

var resultado = primerNumero + segundoNumero;alert("El resultado es " + resultado);

}

// Declaracin de las variablesvar numero1 = 3;var numero2 = 5;

// Llamada a la funcinsuma_y_muestra(numero1, numero2);

En el cdigo anterior, se debe tener en cuenta que: Aunque casi siempre se utilizan variables para pasar los datos a la funcin, se

podra haber utilizado directamente el valor de esas variables:suma_y_muestra(3, 5);

El nmero de argumentos que se pasa a una funcin debera ser el mismo que elnmero de argumentos que ha indicado la funcin. No obstante, JavaScript nomuestra ningn error si se pasan ms o menos argumentos de los necesarios.


www.librosweb.es 42

El orden de los argumentos es fundamental, ya que el primer dato que se indica enla llamada, ser el primer valor que espera la funcin; el segundo valor indicadoen la llamada, es el segundo valor que espera la funcin y as sucesivamente.

Se puede utilizar un nmero ilimitado de argumentos, aunque si su nmero esmuy grande, se complica en exceso la llamada a la funcin.

No es obligatorio que coincida el nombre de los argumentos que utiliza la funciny el nombre de los argumentos que se le pasan. En el ejemplo anterior, losargumentos que se pasan son numero1 y numero2 y los argumentos que utiliza lafuncin son primerNumero y segundoNumero.

A continuacin se muestra otro ejemplo de una funcin que calcula el precio total de unproducto a partir de su precio bsico:

// Definicin de la funcinfunction calculaPrecioTotal(precio) {

var impuestos = 1.16;var gastosEnvio = 10;var precioTotal = ( precio * impuestos ) + gastosEnvio;

}

// Llamada a la funcincalculaPrecioTotal(23.34);

La funcin anterior toma como argumento una variable llamada precio y le suma losimpuestos y los gastos de envo para obtener el precio total. Al llamar a la funcin, sepasa directamente el valor del precio bsico mediante el nmero 23.34.No obstante, el cdigo anterior no es demasiado til, ya que lo ideal sera que la funcinpudiera devolver el resultado obtenido para guardarlo en otra variable y poder seguirtrabajando con este precio total:

function calculaPrecioTotal(precio) {var impuestos = 1.16;var gastosEnvio = 10;var precioTotal = ( precio * impuestos ) + gastosEnvio;

}

// El valor devuelto por la funcin, se guarda en una variablevar precioTotal = calculaPrecioTotal(23.34);

// Seguir trabajando con la variable "precioTotal"

Afortunadamente, las funciones no solamente puede recibir variables y datos, sino quetambin pueden devolver los valores que han calculado. Para devolver valores dentro deuna funcin, se utiliza la palabra reservada return. Aunque las funciones puedendevolver valores de cualquier tipo, solamente pueden devolver un valor cada vez que seejecutan.

function calculaPrecioTotal(precio) {var impuestos = 1.16;var gastosEnvio = 10;


www.librosweb.es 43

var precioTotal = ( precio * impuestos ) + gastosEnvio;return precioTotal;

}

var precioTotal = calculaPrecioTotal(23.34);

// Seguir trabajando con la variable "precioTotal"

Para que la funcin devuelva un valor, solamente es necesario escribir la palabrareservada return junto con el nombre de la variable que se quiere devolver. En elejemplo anterior, la ejecucin de la funcin llega a la instruccin return precioTotal; yen ese momento, devuelve el valor que contenga la variable precioTotal.Como la funcin devuelve un valor, en el punto en el que se realiza la llamada, debeindicarse el nombre de una variable en el que se guarda el valor devuelto:

var precioTotal = calculaPrecioTotal(23.34);

Si no se indica el nombre de ninguna variable, JavaScript no muestra ningn error y elvalor devuelto por la funcin simplemente se pierde y por tanto, no se utilizar en elresto del programa. En este caso, tampoco es obligatorio que el nombre de la variabledevuelta por la funcin coincida con el nombre de la variable en la que se va a almacenarese valor.Si la funcin llega a una instruccin de tipo return, se devuelve el valor indicado yfinaliza la ejecucin de la funcin. Por tanto, todas las instrucciones que se incluyendespus de un return se ignoran y por ese motivo la instruccin return suele ser laltima de la mayora de funciones.Para que el ejemplo anterior sea ms completo, se puede aadir otro argumento a lafuncin que indique el porcentaje de impuestos que se debe aadir al precio delproducto. Evidentemente, el nuevo argumento se debe aadir tanto a la definicin de lafuncin como a su llamada:

function calculaPrecioTotal(precio, porcentajeImpuestos) {var gastosEnvio = 10;var precioConImpuestos = (1 + porcentajeImpuestos/100) * precio;var precioTotal = precioConImpuestos + gastosEnvio;return precioTotal;

}

var precioTotal = calculaPrecioTotal(23.34, 16);var otroPrecioTotal = calculaPrecioTotal(15.20, 4);

Para terminar de completar el ejercicio anterior, se puede rendondear a dos decimalesel precio total devuelto por la funcin:

function calculaPrecioTotal(precio, porcentajeImpuestos) {var gastosEnvio = 10;var precioConImpuestos = (1 + porcentajeImpuestos/100) * precio;var precioTotal = precioConImpuestos + gastosEnvio;return precioTotal.toFixed(2);

}


www.librosweb.es 44

var precioTotal = calculaPrecioTotal(23.34, 16);

Ejercicio 8

Escribir el cdigo de una funcin a la que se pasa como parmetro un nmero entero ydevuelve como resultado una cadena de texto que indica si el nmero es par o impar.Mostrar por pantalla el resultado devuelto por la funcin.

Ejercicio 9

Definir una funcin que muestre informacin sobre una cadena de texto que se le pasacomo argumento. A partir de la cadena que se le pasa, la funcin determina si esa cadenaest formada slo por maysculas, slo por minsculas o por una mezcla de ambas.

Ejercicio 10

Definir una funcin que determine si la cadena de texto que se le pasa como parmetro esun palndromo, es decir, si se lee de la misma forma desde la izquierda y desde la derecha.Ejemplo de palndromo complejo: "La ruta nos aporto otro paso natural".

4.2. mbito de las variables

El mbito de una variable (llamado "scope" en ingls) es la zona del programa en la quese define la variable. JavaScript define dos mbitos para las variables: global y local.El siguiente ejemplo ilustra el comportamiento de los mbitos:

function creaMensaje() {var mensaje = Mensaje de prueba;

}creaMensaje();alert(mensaje);

El ejemplo anterior define en primer lugar una funcin llamada creaMensaje que creauna variable llamada mensaje. A continuacin, se ejecuta la funcin mediante la llamadacreaMensaje(); y seguidamente, se muestra mediante la funcin alert() el valor deuna variable llamada mensaje.Sin embargo, al ejecutar el cdigo anterior no se muestra ningn mensaje por pantalla.La razn es que la variable mensaje se ha definido dentro de la funcin creaMensaje() ypor tanto, es una variable local que solamente est definida dentro de la funcin.Cualquier instruccin que se encuentre dentro de la funcin puede hacer uso de esavariable, pero todas las instrucciones que se encuentren en otras funciones o fuera decualquier funcin no tendrn definida la variable mensaje. De esta forma, para mostrarel mensaje en el cdigo anterior, la funcin alert() debe llamarse desde dentro de lafuncin creaMensaje():

function creaMensaje() {var mensaje = Mensaje de prueba;alert(mensaje);


www.librosweb.es 45

}creaMensaje();

Adems de variables locales, tambin existe el concepto de variable global, que estdefinida en cualquier punto del programa (incluso dentro de cualquier funcin).

var mensaje = Mensaje de prueba;

function muestraMensaje() {alert(mensaje);

}

El cdigo anterior es el ejemplo inverso al mostrado anteriormente. Dentro de la funcinmuestraMensaje() se quiere hacer uso de una variable llamada mensaje y que no ha sidodefinida dentro de la propia funcin. Sin embargo, si se ejecuta el cdigo anterior, s quese muestra el mensaje definido por la variable mensaje.El motivo es que en el cdigo JavaScript anterior, la variable mensaje se ha definidofuera de cualquier funcin. Este tipo de variables automticamente se transforman envariables globales y estn disponibles en cualquier punto del programa (incluso dentrode cualquier funcin).De esta forma, aunque en el interior de la funcin no se ha definido ninguna variablellamada mensaje, la variable global creada anteriormente permite que la instruccinalert() dentro de la funcin muestre el mensaje correctamente.Si una variable se declara fuera de cualquier funcin, automticamente se transforma envariable global independientemente de si se define utilizando la palabra reservada var ono. Sin embargo, las variables definidas dentro de una funcin pueden ser globales olocales.Si en el interior de una funcin, las variables se declaran mediante var se consideranlocales y las variables que no se han declarado mediante var, se transformanautomticamente en variables globales.Por lo tanto, se puede rehacer el cdigo del primer ejemplo para que muestre el mensajecorrectamente. Para ello, simplemente se debe definir la variable dentro de la funcinsin la palabra reservada var, para que se transforme en una variable global:

function creaMensaje() {mensaje = "Mensaje de prueba";

}

creaMensaje();alert(mensaje);

Qu sucede si una funcin define una variable local con el mismo nombre que unavariable global que ya existe? En este caso, las variables locales prevalecen sobre lasglobales, pero slo dentro de la funcin:

var mensaje = "gana la de fuera";


www.librosweb.es 46

function muestraMensaje() {var mensaje = "gana la de dentro";alert(mensaje);

}

alert(mensaje);muestraMensaje();alert(mensaje);

El cdigo anterior muestra por pantalla los siguientes mensajes:gana la de fueragana la de dentrogana la de fuera

Dentro de la funcin, la variable local llamada mensaje tiene ms prioridad que lavariable global del mismo nombre, pero solamente dentro de la funcin.Qu sucede si dentro de una funcin se define una variable global con el mismo nombreque otra variable global que ya existe? En este otro caso, la variable global definidadentro de la funcin simplemente modifica el valor de la variable global definidaanteriormente:

var mensaje = "gana la de fuera";function muestraMensaje() {

mensaje = "gana la de dentro";alert(mensaje);

}

alert(mensaje);muestraMensaje();alert(mensaje);

En este caso, los mensajes mostrados son:gana la de fueragana la de dentrogana la de dentro

La recomendacin general es definir como variables locales todas las variables que seande uso exclusivo para realizar las tareas encargadas a cada funcin. Las variablesglobales se utilizan para compartir variables entre funciones de forma sencilla.

4.3. Sentencias break y continue

La estructura de control for es muy sencilla de utilizar, pero tiene el inconveniente deque el nmero de repeticiones que se realizan slo se pueden controlar mediante lasvariables definidas en la zona de actualizacin del bucle.Las sentencias break y continue permiten manipular el comportamiento normal de losbucles for para detener el bucle o para saltarse algunas repeticiones. Concretamente, lasentencia break permite terminar de forma abrupta un bucle y la sentencia continuepermite saltarse algunas repeticiones del bucle.


www.librosweb.es 47

El siguiente ejemplo muestra el uso de la sentencia break:var cadena = "En un lugar de la Mancha de cuyo nombre no quiero acordarme...";var letras = cadena.split("");var resultado = "";

for(i in letras) {if(letras[i] == 'a') {

break;}else {

resultado += letras[i];}

}alert(resultado);// muestra "En un lug"

Si el programa llega a una instruccin de tipo break;, sale inmediatamente del bucle ycontina ejecutando el resto de instrucciones que se encuentran fuera del bucle for. Enel ejemplo anterior, se recorren todas las letras de una cadena de texto y cuando seencuentra con la primera letra "a", se detiene la ejecucin del bucle for.La utilidad de break es terminar la ejecucin del bucle cuando una variable toma undeterminado valor o cuando se cumple alguna condicin.En ocasiones, lo que se desea es saltarse alguna repeticin del bucle cuando se danalgunas condiciones. Siguiendo con el ejemplo anterior, ahora se desea que el texto desalida elimine todas las letras "a" de la cadena de texto original:

var cadena = "En un lugar de la Mancha de cuyo nombre no quiero acordarme...";var letras = cadena.split("");var resultado = "";

for(i in letras) {if(letras[i] == 'a') {

continue;}else {

resultado += letras[i];}

}alert(resultado);// muestra "En un lugr de l Mnch de cuyo nombre no quiero cordrme..."

En este caso, cuando se encuentra una letra "a" no se termina el bucle, sino que no seejecutan las instrucciones de esa repeticin y se pasa directamente a la siguienterepeticin del bucle for.La utilidad de continue es que permite utilizar el bucle for para filtrar los resultados enfuncin de algunas condiciones o cuando el valor de alguna variable coincide con unvalor determinado.


www.librosweb.es 48

4.4. Otras estructuras de control

Las estructuras de control de flujo que se han visto (if, else, for) y las sentencias quemodifican su comportamiento (break, continue) no son suficientes para realizaralgunas tareas complejas y otro tipo de repeticiones. Por ese motivo, JavaScriptproporciona otras estructuras de control de flujo diferentes y en algunos casos mseficientes.

4.4.1. Estructura while

La estructura while permite crear bucles que se ejecutan ninguna o ms veces,dependiendo de la condicin indicada. Su definicin formal es:

while(condicion) {...

}

El funcionamiento del bucle while se resume en: "mientras se cumpla la condicinindicada, repite indefinidamente las instrucciones incluidas dentro del bucle".Si la condicin no se cumple ni siquiera la primera vez, el bucle no se ejecuta. Si lacondicin se cumple, se ejecutan las instrucciones una vez y se vuelve a comprobar lacondicin. Si se sigue cumpliendo la condicin, se vuelve a ejecutar el bucle y as secontina hasta que la condicin no se cumpla.Evidentemente, las variables que controlan la condicin deben modificarse dentro delpropio bucle, ya que de otra forma, la condicin se cumplira siempre y el bucle while serepetira indefinidamente.El siguiente ejemplo utiliza el bucle while para sumar todos los nmeros menores oiguales que otro nmero:

var resultado = 0;var numero = 100;var i = 0;

while(i

En el ejemplo anterior, mientras se cumpla la condicin, es decir, mientras que lavariable i sea menor o igual que la variable numero, se ejecutan las instrucciones delbucle.Dentro del bucle se suma el valor de la variable i al resultado total (variable resultado)y se actualiza el valor de la variable i, que es la que controla la condicin del bucle. Si nose actualiza el valor de la variable i, la ejecucin del bucle continua infinitamente o hastaque el navegador permita al usuario detener el script.

4.4.2. Estructura do...while

El bucle de tipo do...while es muy similar al bucle while, salvo que en este casosiempre se ejecutan las instrucciones del bucle al menos la primera vez. Su definicinformal es:

do {...

} while(condicion);

De esta forma, como la condicin se comprueba despus de cada repeticin, la primeravez siempre se ejecutan las instrucciones del bucle. Es i

introduccion javascript

Documents