Javascript Ciclo

133
JavaScript Lenguajes de marcas y sistemas de gestión de la información

Transcript of Javascript Ciclo

  • JavaScript

    Lenguajes de marcasy sistemas de gestin

    de la informacin

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    2

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    3

    ndice1. JAVASCRIPT .......................................................................................................................................... 5

    INTRODUCCIN .......................................................................................................................................... 5ALGODE HISTORIA...................................................................................................................................... 5EL LENGUAJE JAVASCRIPT........................................................................................................................... 7UBICAR ETIQUETAS..................................................................................................................................... 8OCULTAR SCRIPTS EN NAVEGADORES ANTIGUOS ...................................................................................... 9CAMBI0S EN XHTML.................................................................................................................................. 10

    2. EL LENGUAJE....................................................................................................................................... 13SINTAXIS ................................................................................................................................................... 13VARIABLES ................................................................................................................................................ 14MBITO DE LAS VARIABLES ...................................................................................................................... 15QU PODEMOS GUARDAR EN VARIABLES?............................................................................................. 18TIPOS DE DATOS ....................................................................................................................................... 19OPERADORES............................................................................................................................................ 21

    3. ESTRUCTURAS DE CONTROL .............................................................................................................. 28INTRODUCCIN ........................................................................................................................................ 28ESTRUCTURA IF ......................................................................................................................................... 29ESTRUCTURA SWITCH ................................................................................................................................. 33BUCLE FOR ................................................................................................................................................. 34BUCLESWHILE Y DO ...WHILE......................................................................................................................... 36BREAK Y CONTINUE .................................................................................................................................. 38BUCLES ANIDADOS ................................................................................................................................... 39

    4. FUNCIONES......................................................................................................................................... 41INTRODUCCIN ........................................................................................................................................ 41DNDE COLOCAMOS LAS FUNCIONES?.................................................................................................. 43PARMETROS DE LAS FUNCIONES............................................................................................................ 44VALORES DE RETORNO ............................................................................................................................. 46

    5. ARRAYS .............................................................................................................................................. 48INTRODUCCIN ........................................................................................................................................ 48LONGITUD DE LOS ARRAYS ....................................................................................................................... 50ARRAYSMULTIDIMENSIONALES............................................................................................................... 51TRATAMIENTO DE ERRORES ..................................................................................................................... 53

    6. FUNCIONES INTERNAS ....................................................................................................................... 56LIBRERA DE FUNCIONES........................................................................................................................... 56EJEMPLOS DE FUNCIONES ........................................................................................................................ 57

    7. OBJETOS ............................................................................................................................................. 59INTRODUCCIN ........................................................................................................................................ 59OBJETOS INCORPORADOS ........................................................................................................................ 60CLASE STRING ........................................................................................................................................... 62EJEMPLOS DE LA CLASE STRING ................................................................................................................ 63CLASE DATE............................................................................................................................................... 64EJEMPLO DE LA CLASE DATE ..................................................................................................................... 66CLASEMATH ............................................................................................................................................. 67EJEMPLO DE LA CLASEMATH.................................................................................................................... 68CLASE BOOLEAN ....................................................................................................................................... 68MODELO DE OBJETOS DEL NAVEGADOR (DOM)....................................................................................... 69OBJETOWINDOW..................................................................................................................................... 72EJEMPLOS DEL OBJETOWINDOW............................................................................................................. 75

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    4

    OBJETO DOCUMENT ................................................................................................................................. 81EJEMPLOS DEL OBJETO DOCUMENT......................................................................................................... 82OBJETO LOCATION.................................................................................................................................... 83OBJETO NAVIGATOR ................................................................................................................................. 85OBJETO SCREEN ........................................................................................................................................ 86

    8. FORMULARIOS ....................................................................................................................................88TRABAJO CON FORMULARIOS .................................................................................................................. 88CALCULADORA SENCILLA.......................................................................................................................... 89OBJETO FORM........................................................................................................................................... 91CONTROL DE CAMPOS DE TEXTO.............................................................................................................. 92CONTROL DE CHECKBOX........................................................................................................................... 94CONTROL DE BOTONES DE RADIO ............................................................................................................ 96CONTROL DE CAMPOS SELECT.................................................................................................................. 99CONTROL DE TEXTAREA.......................................................................................................................... 101

    9. EVENTOS ...........................................................................................................................................104INTRODUCCIN ...................................................................................................................................... 104TIPOS DE EVENTOS.................................................................................................................................. 105EJEMPLO DEL EVENTOONBLUR.............................................................................................................. 107EJEMPLO VALIDACIN DE UN FORMULARIO .......................................................................................... 110EJEMPLO EVENTOONUNLOAD............................................................................................................... 111EJEMPLO EVENTOONLOAD .................................................................................................................... 112EJEMPLO EVENTOONCHANGE ............................................................................................................... 113EJEMPLO EVENTOONKEYDOWN............................................................................................................ 116EJEMPLO ROLLOVER ............................................................................................................................... 118EJEMPLO RELOJ....................................................................................................................................... 119EJEMPLO RELOJ CON PAUSA................................................................................................................... 120

    10. LAS COOKIES...................................................................................................................................121QUE SON LAS COOKIES .................................................................................................................................. 121DNDE SE ESCONDEN ................................................................................................................................... 121COOKIES .................................................................................................................................................... 123

    11. EJERCICIOS ......................................................................................................................................125

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    5

    1 JavascriptINTRODUCCINJavaScript 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 queno es necesario compilar los programas para ejecutarlos. En otras palabras, losprogramas escritos con JavaScript se pueden probar directamente en cualquiernavegador sin necesidad de procesos intermedios.A pesar de su nombre, JavaScript no guarda ninguna relacin directa con el lenguajede programacin Java. Legalmente, JavaScript es una marca registrada de laempresa Sun Microsystems, como se puede comprobar en la siguiente direccinhttp://www.sun.com/suntrademarks/. ALGO DE HISTORIAA 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 a desarrollarse las primeras aplicaciones web y por tanto, las pginasweb comenzaban a incluir formularios complejos.Con unas aplicaciones web cada vez ms complejas y una velocidad de navegacintan lenta, 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 podrasolucionar este problema adaptando otras tecnologas existentes (como ScriptEase)al navegador Netscape Navigator 2.0, que iba a lanzarse en 1995. Inicialmente, Eichdenomin a su lenguaje LiveScript.Posteriormente, Netscape firm una alianza con Sun Microsystems para el desarrollodel nuevo lenguaje de programacin. Adems, justo antes del lanzamiento Netscapedecidi cambiar el nombre por el de JavaScript. La razn del cambio de nombre fue

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    6

    exclusivamente 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 lanz JScript con su navegador Internet Explorer 3. JScript era una copia deJavaScript al que le cambiaron el nombre para evitar problemas legales.Para evitar una guerra de tecnologas, Netscape decidi que lo mejor seraestandarizar el lenguaje JavaScript. De esta forma, en 1997 se envi la especificacinJavaScript 1.1 al organismo 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 creel comit TC39 se denomin ECMA-262, en el que se defini por primera vez ellenguaje ECMAScript.Por este motivo, algunos programadores prefieren la denominacin ECMAScript parareferirse al lenguaje JavaScript. De hecho, JavaScript no es ms que laimplementacin que realiz la empresa Netscape del estndar ECMAScript.La organizacin internacional para la estandarizacin (ISO) adopt el estndar ECMA-262 a travs de su comisin IEC, dando lugar al estndar ISO/IEC-16262.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    7

    EL LENGUAJE JAVASCRIPTQu necesitas?Para programar en Javascript necesitamos bsicamente lo mismo que paraprogramar pginas web con HTML. Un editor de textos y un navegador compatiblecon Javascript. Un usuario de Windows posee de salida todo lo necesario para poderprogramar en Javascript, puesto que dispone dentro de su instalacin tpica desistema operativo, de un editor de textos, el Bloc de notas, y de un navegador:Internet Explorer.Dnde escribir?Lo ms importante y bsico que podemos destacar en este momento es que laprogramacin de Javascript se realiza dentro del propio documento HTML. Estoquiere decir que en la pgina se mezclan los dos lenguajes de programacin, y paraque estos dos lenguajes se puedan mezclar sin problemas se han de incluir unosdelimitadores que separan las etiquetas HTML de las instrucciones Javascript. Estosdelimitadores son las etiquetas y . Todo el cdigo Javascriptque pongamos en la pgina ha de ser introducido entre estas dos etiquetas.

    En una misma pgina podemos introducir varios scripts, cada uno que podraintroducirse dentro de unas etiquetas . La colocacin de estosscripts suele ser antes de la etiqueta .

    Tambin se puede escribir Javascript dentro de un fichero externo y hacer referenciaa dicho fichero desde nuestra pgina a travs del atributo SRC de la etiqueta.

    Los ficheros externos de Javascript tienen un formato muy sencillo, Bsicamente sonficheros de texto que contienen cdigo Javascript. No se necesitan etiquetas dentro de los ficheros externos.

    No existen reglas concretas sobre qu mtodo emplear, pero el consenso generaldesaconseja incluir grandes cantidades de Javascript en lnea por distintos motivos:

    Seguridad: Cualquiera puede ver el cdigo con tan slo examinar el cdigofuente de la pgina. Recordemos que Javascript se ejecuta en el cliente.

    Mantenimiento del cdigo: Si el cdigo Javascript se distribuye en variaspginas su mantenimiento se hace complicado.

    Almacenamiento en cach: Los navegadores almacenan en cach todos losarchivos de Javascript vinculados, de forma que si dos pginas utilizan elmismo archivo, slo se carga una vez, lo que supone tiempos de carga msrpidos. La inclusin del mismo cdigo en varias pginas no slo es unaprdida de tiempo, sino que tambin aumenta el tamao de la pgina y eltiempo de descarga del servidor.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    8

    UBICAR ETIQUETASPor lo general, suele ser habitual incluir todo el cdigo y las definiciones de funcionesen la metiqueta de una pgina HTML para que el cdigo se cargue y sepueda utilizar al representar el cuerpo de la misma. El nico cdigo que debeaparecer en la etiqueta es el que invoca a funciones definidas previamente.

    Al incluir la etiqueta dentro de la etiqueta , la secuencia decomandos se ejecuta al descargar esa parte de la pgina en el navegador. De estaforma se puede ejecutar cdigo Javascript antes de que se abra la totalidad de lapgina.

    Function hola(){

    Alert(hola);}

    hola();

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    9

    Tambin podemos invocar a Javascript desde un evento. Por ejemplo:

    OCULTAR SCRIPTS EN NAVEGADORESANTIGUOSYa hemos visto que Javascript se implement a partir de Netscape 2.0 e InternetExplorer 3.0, incluso hay navegadores que funcionan en sistemas donde slo sepuede visualizar texto y por lo tanto determinadas tecnologas, como este lenguaje,estn fuera de su alcance. As pues, no todos los navegadores del web comprendenJavascript. En los casos en los que no se interpretan los scripts, los navegadoresasumen que el cdigo de stos es texto de la propia pgina web y comoconsecuencia, presentan los scripts en la pgina web como si de texto normal setratara. Para evitar que el texto de los scripts se escriba en la pgina cuando losnavegadores no los entienden se tienen que ocultar los con comentarios HTML (). Veamos con un ejemplo cmo se han de ocultar los scripts.

    Vemos que el inicio del comentario HTML es idntico a cmo lo conocemos en elHTML, pero el cierre del comentario presenta una particularidad, que empieza pordoble barra inclinada. Esto es debido a que el final del comentario contiene varioscaracteres que Javascript reconoce como operadores y al tratar de analizarlos lanzaun mensaje de error de sintaxis. Para que Javascript no lance un mensaje de error secoloca antes del comentario HTML esa doble barra, que no es ms que un comentarioJavascript, que conoceremos ms adelante cuando hablemos de sintaxis.

    Function hola(){

    Alert(hola);}

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    10

    El inicio del comentario HTML no es necesario comentarlo con la doble barra, dadoque Javascript entiende bien que simplemente se pretende ocultar el cdigo. Unaaclaracin a este punto: si pusiesemos las dos barras en esta lnea, se veran ennavegadores antiguos por estar fuera de los comentarios HTML. Las etiquetas no las entienden los navegadores antiguos, por lo tanto no lasinterpretan, tal como hacen con cualquier etiqueta que desconocen.Existe la posibilidad de indicar un texto alternativo para los navegadores que noentienden Javascript, para informarles de que en ese lugar debera ejecutarse unscript y que la pgina no est funcionando al 100% de sus capacidades. Tambinpodemos sugerir a los visitantes que actualicen su navegador a una versincompatible con el lenguaje. Para ello utilizamos la etiqueta y entre estaetiqueta y su correspondiente de cierre podemos colocar el texto alternativo al script.

    CAMBI0S EN XHTMLCon la aparicin del estndar XHTML (HTML extensible), la etiqueta hasufrido ciertos cambios. En lugar del atributo language, espera un atributo type paraindicar el tipo de contenido. El valor de este atributo es text/javascript.

    Aunque muchos navegadores no admiten XHTML de forma completa, la mayora deprogramadores utilizan el atributo type en lugar de language. La omisin del atributolanguage no genera ningn error, ya que todos los navegadores aceptan Javascriptde forma predeterminada.

    El segundo cambio de XHTML es el uso de las secciones CDATA. Estas secciones seutilizan en XML (y, por tanto, en XHTML) para indicar qu texto no debe analizarsecomo etiquetas, lo que permite el uso de caracteres especiales como los smbolos , & y sin utilizar sus entidades de caracteres. Veamos un ejemplo:

    //cdigo javascript

    Este navegador no comprende los scripts que se estn ejecutando, debes

    actualizar tu versin de navegador a una ms reciente.

    Netscape.Microsoft.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    11

    El cdigo de la funcin anterior para XHTML no es vlido ya que utiliza trescaracteres especiales: menor que, mayor que y las comillas dobles. Para solucionarloes necesario sustituir estos caractres por sus entidades XML: y ".

    El utilizar dichas entidades presenta dos problemas. Por un lado, los programadoresno estn acostumbrados a disear cdigo con entidades XML, ya que dificulta lalegibilidad del cdigo. Por otra parte, se considera un error sintctico en Javascript,ya que el intrprete desconoce el significado de las entidades XML. Al utilizar unaseccin CDATA, se puede escribir cdigo de Javascript en una sintxis normal ylegible. La forma de incluir una seccin CDATA es:

    function comparar(){

    if (a < b){

    alert("A es menor que B");}else if (a > b){

    alert("A es mayor que B");}else{

    alert("A es igual a B");}

    }

    function comparar(){

    if (ab){

    alert(A es mayor que B);}else{

    alert(A es igual a B);}

    }

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    12

    /*function comparar(){

    if (a < b){

    alert("A es menor que B");}else if (a > b){

    alert("A es mayor que B");}else{

    alert("A es igual a B");}

    }/*]]>*/

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    13

    2 El LenguajeSINTAXISEl lenguaje Javascript tiene una sintaxis muy parecida a la de Java por estarbasado en l. Tambin es muy parecida a la del lenguaje C, de modo que si el lectorconoce alguno de estos dos lenguajes se podr manejar con facilidad con el cdigo.De todos modos, en los siguientes captulos vamos a describir toda la sintaxis condetenimiento, por lo que los novatos no tendrn ningn problema con ella.ComentariosUn comentario es una parte de cdigo que no es interpretada por el navegador ycuya utilidad radica en facilitar la lectura al programador. El programador, a medidaque desarrolla el script, va dejando frases o palabras sueltas, llamadas comentarios,que le ayudan a l o a cualquier otro a leer mas fcilmente el script a la hora demodificarlo o depurarlo.

    Ya se vio anteriormente algn comentario Javascript, pero ahora vamos a contarlosde nuevo. Existen dos tipos de comentarios en el lenguaje. Uno de ellos, la doblebarra, sirve para comentar una lnea de cdigo. El otro comentario lo podemosutilizar para comentar varias lneas y se indica con los signos /* para empezar elcomentario y */ para terminarlo. Veamos unos ejemplos.

    Maysculas y minsculasEn javascript se han de respetar las maysculas y las minsculas. Si nosequivocamos al utilizarlas el navegador responder con un mensaje de error desintaxis.

    //Este es un comentario de una lnea/* Este comentario se puede extenderpor varias lneas..................................Las que quieras */

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    14

    Separacin de instruccionesLas distintas instrucciones que contienen nuestros scripts se han de separarconvenientemente para que el navegador no indique los correspondientes errores desintaxis. Javascript tiene dos maneras de separar instrucciones. La primera es atravs del carcter punto y coma (;) y la segunda es a travs de un salto de lnea.Por esta razn Las sentencias Javascript no necesitan acabar en punto y coma a noser que coloquemos dos instrucciones en la misma lnea.No es una mala idea, de todos modos, acostumbrarse a utilizar el punto y comadespus de cada instruccin pues otros lenguajes como Java o C obligan a utilizarlasy nos estaremos acostumbrando a realizar una sintaxis ms parecida a la habitual enentornos de programacin avanzados. VARIABLESUna variable es un espacio en memoria donde se almacena un dato, unespacio donde podemos guardar cualquier tipo de informacin que necesitemos pararealizar las acciones de nuestros programas. Por ejemplo, si nuestro programarealiza sumas, ser muy normal que guardemos en variables los distintos sumandosque participan en la operacin y el resultado de la suma. El efecto sera algo parecidoa esto.

    sumando1 = 23sumando2 = 33suma = sumando1 + sumando2

    En este ejemplo tenemos tres variables, sumando1, sumando2 y suma, dondeguardamos el resultado. Vemos que su uso para nosotros es como si tuvisemos unapartado donde guardar un dato y que se pueden acceder a ellos con slo poner sunombre.Los nombres de las variables han de construirse con caracteres alfanumricos y elcarcter subrayado (_). Aparte de esta, hay una serie de reglas adicionales paraconstruir nombres para variables. La ms importante es que tienen que comenzarpor un carcter alfabtico o el subrayado. No podemos utilizar caracteres raros comoel signo +, un espacio o un $. Nombres admitidos para las variables podran ser:edadpaisDeNacimiento_nombre

    Tambin hay que evitar utilizar nombres reservados como variables, por ejemplo nopodremos llamar a nuestra variable palabras como return o for, que ya veremos queson utilizadas para estructuras del propio lenguaje. Veamos ahora algunos nombresde variables que no estn permitidos utilizar.12mesestu nombre

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    15

    returnpe%peDeclaracin de variablesDeclarar variables consiste en definir y de paso informar al sistema de que vas autilizar una variable. Es una costumbre habitual en los lenguajes de programacin eldefinir las variables que se van a usar en los programas y para ello, se siguen unasreglas estrictas. Pero javascript se salta muchas reglas por ser un lenguaje un tantolibre a la hora de programar y uno de los casos en los que otorga un poco de libertades a la hora de declarar las variables, ya que no estamos obligados a hacerlo, alcontrario de lo que pasa en la mayora de los lenguajes de programacin.De todos modos, es aconsejable declarar las variables, adems de una buenacostumbre y para ello Javascript cuenta con la palabra var. Como es lgico, se utilizaesa palabra para definir la variable antes de utilizarla.var operando1;var operando2 ;

    Tambin se puede asignar un valor a la variable cuando se est declarandovar operando1 = 23;var operando2 = 33;

    Tambin se permite declarar varias variables en la misma lnea, siempre que seseparen por comas.var operando1,operando2;MBITO DE LAS VARIABLESSe le llama mbito de las variables al lugar donde estas estn disponibles.Por lo general, cuando declaramos una variable hacemos que est disponible en ellugar donde se ha declarado, esto ocurre en todos los lenguajes de programacin ycomo javascript se define dentro de una pgina web, las variables quedeclaremos en la pgina estarn accesibles dentro de ella. De este modo, nopodremos acceder a variables que hayan sido definidas en otra pgina. Este es elmbito ms habitual de una variable y le llamaremos a este tipo de variablesglobales a la pgina, aunque no ser el nico, ya que tambin podremos declararvariables en lugares ms acotados.Variables globalesComo hemos dicho, las variables globales son las que estn declaradas en el mbitoms amplio posible, que en Javascript es una pgina web. Para declarar una variableglobal a la pgina simplemente lo haremos en un script, con la palabra var.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    16

    Las variables globales son accesibles desde cualquier lugar de la pgina, es decir,desde el script donde se han declarado y todos los dems scripts de la pgina,incluidos los manejadores de eventos, como el onclick, que ya vimos que se podaincluir dentro de determinadas etiquetas HTML.Variables localesTambin podremos declarar variables en lugares ms acotados, como por ejemplouna funcin. A estas variables les llamaremos locales. Cuando se declaren variableslocales slo podremos acceder a ellas dentro del lugar donde se ha declarado, esdecir, si la habamos declarado en una funcin solo podremos acceder a ella cuandoestemos en esa funcin.Las variables pueden ser locales a una funcin, pero tambin pueden ser locales aotros mbitos, como por ejemplo un bucle. En general, son mbitos locales cualquierlugar acotado por llaves.

    En el script anterior hemos declarado una variable dentro de una funcin, por lo queesa variable slo tendr validez dentro de la funcin. Se pueden ver cmo se utilizanlas llaves para acotar el lugar donde est definida esa funcin o su mbito.No hay problema en declarar una variable local con el mismo nombre que una global,en este caso la variable global ser visible desde toda la pgina, excepto en el mbitodonde est declarada la variable local ya que en este sitio ese nombre de variableest ocupado por la local y es ella quien tiene validez.

    function miFuncion (){var variableLocal;

    }

    var variableGlobal;

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    17

    Un consejo para los principiantes podra ser no declarar variables con los mismosnombres, para que nunca haya lugar a confusin sobre qu variable es la que tienevalidez en cada momento.Diferencias entre utilizar var o noComo hemos dicho, en Javascript tenemos libertad para declarar o no las variablescon la palabra var, pero los efectos que conseguiremos en cada caso sern distintas.En concreto, cuando utilizamos var estamos haciendo que la varible que estamosdeclarando sea local al mbito donde se declara. Por otro lado, si no utilizamos lapalabra var para declarar una variable, sta ser global a toda la pgina, sea cualsea el mbito en el que haya sido declarada.

    En el caso de una variable declarada en la pgina web, fuera de una funcin o cualquierotro mbito ms reducido, nos es indiferente si se declara o no con var, desde un punto devista funcional. Esto es debido a que cualquier variable declarada fuera de un mbito esglobal a toda la pgina. La diferencia se puede apreciar en una funcin por ejemplo, yaque si utilizamos var la variable ser local a la funcin y si no lo utilizamos, la variableser global a la pgina. Esta diferencia es fundamental a la hora de controlarcorrectamente el uso de las variables en la pgina, ya que si no lo hacemos en una funcinpodramos sobreescribir el valor de una variable, perdiendo el dato que pudiera contenerpreviamente.

    var numero = 2;function miFuncion (){numero = 19;document.write(numero); //imprime 19

    }document.write(numero); //imprime 2//llamamos a la funcinmiFuncion();document.write(numero); //imprime 19

    var numero = 2;function miFuncion (){var numero = 19;document.write(numero); //imprime 19

    }document.write(numero); //imprime 2

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    18

    En este ejemplo, tenemos una variable global a la pgina llamada numero, quecontiene un 2. Tambin tenemos una funcin que utiliza la variable numero sinhaberla declarado con var, por lo que la variable numero de la funcion ser la mismavariable global numero declarada fuera de la funcin. En una situacin como esta, alejecutar la funcin se sobreescribir la variable numero y el dato que haba antes deejecutar la funcin se perder.QU PODEMOS GUARDAR ENVARIABLES?En una variable podemos introducir varios tipos de informacin, por ejemplo texto,nmeros enteros o reales, etc. A estas distintas clases de informacin se les conocecomo tipos de datos. Cada uno tiene caractersticas y usos distintos, veamos culesson los tipos de datos de Javascript.

    NmerosPara empezar tenemos el tipo numrico, para guardar nmeros como 9 o 23.6

    CadenasEl tipo cadena de carcter guarda un texto. Siempre que escribamos una cadena decaracteres debemos utilizar las comillas (").

    BoleanosTambin contamos con el tipo boleano, que guarda una informacin que puede valersi (true) o no (false).

    Por ltimo sera relevante sealar aqu que nuestras variables pueden contener cosasms complicadas, como podra ser un objeto, una funcin, o vaco (null) pero ya loveremos ms adelante.

    En realidad nuestras variables no estn forzadas a guardar un tipo de datos enconcreto y por lo tanto no especificamos ningn tipo de datos para una variablecuando la estamos declarando. Podemos introducir cualquier informacin en unavariable de cualquier tipo, incluso podemos ir cambiando el contenido de una variablede un tipo a otro sin ningn problema. Vamos a ver esto con un ejemplo.

    var nombre_ciudad = "Valencia";var revisado = true;nombre_ciudad = 32;revisado = "no";

    Esta ligereza a la hora de asignar tipos a las variables puede ser una ventaja en unprincipio, sobretodo para personas inexpertas, pero a la larga puede ser fuente deerrores ya que dependiendo del tipo que son las variables se comportarn de unmodo u otro y si no controlamos con exactitud el tipo de las variables podemosencontrarnos sumando un texto a un nmero. Javascript operar perfectamente, ydevolver un dato, pero en algunos casos puede que no sea lo que estbamosesperando. As pues, aunque tenemos libertad con los tipos, esta misma libertad nos

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    19

    hace estar ms atentos a posibles desajustes difciles de detectar a lo largo de losprogramas. Veamos lo que ocurrira en caso de sumar letras y nmeros.var sumando1 = 23;var sumando2 = "33";var suma = sumando1 + sumando2;document.write(suma);

    Este script nos mostrara en la pgina el texto 2333, que no se corresponde con lasuma de los dos nmeros, sino con su concatenacin, uno detrs del otro.TIPOS DE DATOSEn nuestros scripts vamos a manejar variables diversas clases de informacin, comotextos o nmeros. Cada una de estas clases de informacin son los tipos de datos.Javascipt distingue entre tres tipos de datos y todas las informaciones que se puedanguardar en variables van a estar encajadas en uno de estos tipos de datos. Veamosdetenidamente cules son estos tres tipos de datos.Tipo de datos numrico (Number)En este lenguaje slo existe un tipo de datos numrico, al contrario que ocurre en lamayora de los lenguajes ms conocidos. Todos los nmeros son por tanto del tiponumrico, independientemente de la precisin que tengan o si son nmeros reales oenteros. Los nmeros enteros son nmeros que no tienen coma, como 3 o 339. Losnmeros reales son nmeros fraccionarios, como 2.69 o 0.25, que tambin sepueden escribir en notacin cientfica, por ejemplo 2.482e12.

    Con Javascript tambin podemos escribir nmeros en otras bases, como lahexadecimal. Las bases son sistemas de numeracin que utilizan ms o menosdgitos para escribir los nmeros. Existen tres bases con las que podemos trabajar

    Base 10, es el sistema que utilizamos habitualmente, el sistema decimal.Cualquier nmero, por defecto, se entiende que est escrito en base 10.

    Base 8, tambin llamado sistema octal, que utiliza dgitos del 0 al 7. Paraescribir un nmero en octal basta con escribir ese nmero precedido de un 0,por ejemplo 045.

    Base 16 o sistema hexadecimal, es el sistema de numeracin que utiliza 16dgitos, los comprendidos entre el 0 y el 9 y las letras de la A a la F, para losdgitos que faltan. Para escribir un nmero en hexadecimal debemos escribirloprecedido de un cero y una equis, por ejemplo 0x3EF.

    var i=56; // Base 10var j=070; // Base 8. Equivale a 57 en decimalvar h=0x1f // Base hexadecimal, Equivale a 31

    Para definir un valor de coma flotante, es necesario incluir una coima decimal y undgito despus de la coma. Por ejemplo:

    var precio=12,25

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    20

    Tipo boleano (Boolean)El tipo bolean, boolean en ingls, sirve para guardar un si o un no o dicho de otromodo, un verdadero o un falso. Se utiliza para realizar operaciones lgicas,generalmente para realizar acciones si el contenido de una variable es verdadero ofalso.Si una variable es verdadero entonces Ejecuto unas instrucciones Si no Ejecuto otras.Los dos valores que pueden tener las variables boleanas son true o false.miBoleana = truemiBoleana = falseTipo cadena de caracteres (String)El ltimo tipo de datos es el que sirve para guardar un texto. Javascript slo tiene untipo de datos para guardar texto y en el se pueden introducir cualquier nmero decaracteres. Un texto puede estar compuesto de nmeros, letras y cualquier otro tipode caracteres y signos. Los textos se escriben entre comillas, dobles o simples.miTexto = "Pepe se va a pescar"miTexto = '23%%$ Letras & *--*'

    Todo lo que se coloca entre comillas, como en los ejemplos anteriores es tratadocomo una cadena de caracteres independientemente de lo que coloquemos en elinterior de las comillas. Por ejemplo, en una variable de texto podemos guardarnmeros y en ese caso tenemos que tener en cuenta que las variables de tipo texto ylas numricas no son la misma cosa y mientras que las de numricas nos sirven parahacer clculos matemticos las de texto no.Caracteres de escape en cadenas de texto.Hay una serie de caracteres especiales que sirven para expresar en una cadena detexto determinados controles como puede ser un salto de lnea o un tabulador. Estosson los caracteres de escape y se escriben con una notacin especial que comienzapor una contra barra (una barra inclinada al revs de la normal '\') y luego se colocael cdigo del carcter a mostrar.Un carcter muy comn es el salto de lnea, que se consigue escribiendo \n. Otrocarcter muy habitual es colocar unas comillas, pues si colocamos unas comillas sinsu carcter especial nos cerraran las comillas que colocamos para iniciar la cadenade caracteres. Las comillas las tenemos que introducir entonces con \" o \' (comillasdobles o simples). Existen otros caracteres de escape, que veremos en la tabla deabajo ms resumidos, aunque tambin hay que destacar como carcter habitual elque se utiliza para escribir una contrabarra, para no confundirla con el inicio de uncarcter de escape, que es la doble contrabarra \\.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    21

    Tabla con todos los caracteres de escape

    Salto de lnea \nComilla simple \'Comilla doble \"Tabulador \tContrabarra \\

    Algunos de estos caracteres probablemente no los llegars a utilizar nunca, pues sufuncin es un poco rara y a veces poco clara.Tipo Indefinido (Undefined)Tiene un nico valor:undefined. Se genera cuando se define una variable y no seinicializa (no se le asigna un determinado valor). Por ejemplo:

    El operador typeofIndica el tipo de una variable. Para ello acepta un parmetro: la variable o valor acomprobar. Por ejemlo:La instruccin typeof devuelve uno de los siguientes valores:

    undefined: si la variable es de tipo undefined. boolean: si la variable es de tipo boolean. number: si la variable es de tipo numrico. string: si la variable es de tipo cadena. object: si la variable es de tipo objeto.

    OPERADORESAl desarrollar programas en cualquier lenguaje se utilizan los operadores. stossirven para hacer los clculos y operaciones necesarios para llevar a cabo susobjetivos. Un programa que no realiza operaciones solo se puede limitar a hacer

    var a;alert(typeof a);

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    22

    siempre lo mismo, es el resultado de estas operaciones lo que hace que un programavare su comportamiento segn los datos que obtenga. Existen operaciones mssencillas o complejas, que se pueden realizar con operandos de distintos tipos dedatos, como nmeros o textos, veremos en este captulo de manera detallada todosestos operadores.Ejemplos de uso de operadoresAntes de entrar a enumerar los distintos tipos de operadores vamos a ver un par deejemplos de stos para que nos ayuden a hacernos una idea ms exacta de lo queson. En el primer ejemplo vamos a realizar una suma utilizando el operador suma.

    3 + 5

    Esta es una expresin muy bsica que no tiene mucho sentido ella sola. Hace lasuma entre los dos operandos nmero 3 y 5, pero no sirve de mucho porque no sehace nada con el resultado. Normalmente se combinan ms de un operador paracrear expresiones ms tiles. La expresin siguiente es una combinacin entre dosoperadores, uno realiza una operacin matemtica y el otro sirve para guardar elresultado.miVariable = 23 * 5

    En el ejemplo anterior, el operador * se utiliza para realizar una multiplicacin y eloperador = se utiliza para asignar el resultado en una variable, de modo queguardemos el valor para su posterior uso.

    Los operadores se pueden clasificar segn el tipo de acciones que realizan. Acontinuacin vamos a ver cada uno de estos grupos de operadores y describiremos lafuncin de cada uno.Operadores aritmticosSon los utilizados para la realizacin de operaciones matemticas simples como lasuma, resta o multiplicacin. En javascript son los siguientes:

    + Suma de dos valores

    - Resta de dos valores, tambin puede utilizarse para cambiar el signo de unnmero si lo utilizamos con un solo operando -23

    * Multiplicacin de dos valores

    / Divisin de dos valores

    % El resto de la divisin de dos nmeros (3%2 devolvera 1, el resto dedividir 3 entre 2)

    ++ Incremento en una unidad, se utiliza con un solo operando. Se puedeutilizar como prefijo o sufijo.

    -- Decremento en una unidad, utilizado con un solo operando. Se puedeutilizar como prefijo y sufijo.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    23

    precio = 128;unidades = 10;factura = precio * unidades;resto = factura % 3;precio++;

    a=55;c=++a;En este caso primero se incrementa el valor de a y despus se asigna a c. la variablec valdra 56.c=a++;En este caso primero se asigna a c el valor de a y a continuacin se incremente elvalor de a. La variable c valdra 55.Operadores de asignacinSirven para asignar valores a las variables, ya hemos utilizado en ejemplos nterioresel operador de asignacin =, pero hay otros operadores de este tipo, que provienendel lenguaje C y que muchos de los lectores ya conocern.

    = Asignacin. Asigna la parte de la derecha del igual a la parte de laizquierda. A al derecha se colocan los valores finales y a la izquierdageneralmente se coloca una variable donde queremos guardar el dato.

    += Asignacin con suma. Realiza la suma de la parte de la derecha con la dela izquierda y guarda el resultado en la parte de la izquierda.

    -= Asignacin con resta

    *= Asignacin de la multiplicacin

    /= Asignacin de la divisin

    %= Se obtiene el resto y se asigna

    ahorros = 7000;ahorros += 3500;ahorros /= 2;

    Operadores de cadenasLas cadenas de caracteres, o variables de texto, tambin tienen sus propiosoperadores para realizar acciones tpicas sobre cadenas. Aunque javascript slo tieneun operador para cadenas se pueden realizar otras acciones con una serie defunciones predefinidas en el lenguaje que veremos ms adelante.

    + Concatena dos cadenas, pega la segunda cadena a continuacin de laprimera.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    24

    cadena1 = "hola";cadena2 = "mundo";cadenaConcatenada = cadena1 + cadena2;

    Un detalle importante que se puede ver en este caso es que el operador + sirve parados usos distintos, si sus operandos son nmeros los suma, pero si se trata decadenas las concatena. Esto pasa en general con todos los operadores que se repitenen el lenguaje, javascript es suficientemente listo para entender que tipo deoperacin realizar mediante una comprobacin de los tipos que estn implicados enlla.Un caso que resultara confuso es el uso del operador + cuando se realiza laoperacin con operadores texto y numricos entremezclados. En este caso javascriptasume que se desea realizar una concatenacin y trata a los dos operandos como side cadenas de caracteres se trataran, incluso si la cadena de texto que tenemosfuese un nmero. Esto lo veremos ms fcilmente con el siguiente ejemplo.

    miNumero = 23;miCadena1 = "pepe";miCadena2 = "456";resultado1 = miNumero + miCadena1resultado2 = miNumero + miCadena2miCadena2 += miNumero

    Como hemos podido ver, tambin en el caso del operador +=, si estamos tratandocon cadenas de texto y nmeros entremezclados, tratar a los dos operadores comosi fuesen cadenas.Operadores lgicosEstos operadores sirven para realizar operaciones lgicas, que son aquellas que dancomo resultado un verdadero o un falso, y se utilizan para tomar decisiones ennuestros scripts. En vez de trabajar con nmeros, para realizar este tipo deoperaciones se utilizan operandos boleanos, que conocimos anteriormente, que sonel verdadero (true) y el falso (false). Los operadores lgicos relacionan los operandosboleanos para dar como resultado otro operando boleano, tal como podemos ver enel siguiente ejemplo.Si tengo hambre y tengo comida entonces me pongo a comer. Nuestro programa javascriptutilizara en este ejemplo un operando boleano para tomar una decisin. Primeromirar si tengo hambre, si es cierto (true) mirar si dispongo de comida. Si son losdos ciertos, se puede poner a comer. En caso de que no tenga comida o que notenga hambre no comera, al igual que si no tengo hambre ni comida. El operando encuestin es el operando Y, que valdr verdadero (true) en caso de que los dosoperandos valgan verdadero.

    ! Operador NO o negacin. Si era true pasa a false y viceversa.&& Operador Y, si son los dos verdaderos vale verdadero, en caso contrarioes falso.|| Operador O, vale verdadero si por lo menos uno de ellos es verdadero.

    miBoleano = true;

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    25

    miBoleano = ! miBoleano; //miBoleano ahora vale falsetengoHambre = true;tengoComida = true;comoComida = tengoHambre && tengoComida;Operadores relacionalesSirven para realizar expresiones condicionales todo lo complejas que deseemos.Estas expresiones se utilizan para tomar decisiones en funcin de la comparacin devarios elementos, por ejemplo si un numero es mayor que otro o si son iguales. Losoperadores condicionales se utilizan en las expresiones condicionales para tomas dedecisiones. Como estas expresiones condicionales sern objeto de estudio msadelante ser mejor describir los operadores condicionales ms adelante. De todosmodos aqu podemos ver la tabla de operadores condicionales.

    == Comprueba si dos nmeros son iguales!= Comprueba si dos nmeros son distintos> Mayor que, devuelve true si el primer operador es mayor que el segundo< Menor que, es true cuando el elemento de la izquierda es menor que el dela derecha>= Mayor igual.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    26

    Cuando se utiliza el operador de ==, si un operador es una cadena y otro es unnmero, intanta convertir la cadena a nmero y despus realiza la comparacin. Porejemplo:

    Existe una variante de los operadores igual (==) y distinto (!=). Idnticamente igual(===) y no idnticamente igual (!==). En estos casos no hay conversin. Porejemplo:

    Precedencia de los operadoresLa evaluacin de una sentencia de las que hemos visto en los ejemplos anteriores esbastante sencilla y fcil de interpretar, pero cuando en una sentencia entran en juegomultitud de operadores distintos puede haber una confusin a la hora de interpretarlay dilucidar qu operadores son los que se ejecutan antes que otros. Para marcarunas pautas en la evaluacin de las sentencias y que estas se ejecuten siempre igualy con sentido comn existe la precedencia de operadores, que no es ms que elorden por el que se irn ejecutando las operaciones que ellos representan. En unprincipio todos los operadores se evalan de izquierda a derecha, pero existen unasnormas adicionales, por las que determinados operadores se evalan antes queotros. Muchas de estas reglas de precedencia estn sacadas de las matemticas yson comunes a otros lenguajes, las podemos ver a continuacin.

    () [] Parntesis, corchetes y el operador punto que sirve para los objetos! - ++ -- Negacin, negativo e incrementos* / % Multiplicacin divisin y mdulo+- Suma y resta> >>> Cambios a nivel de bit< >= Operadores condicionales== != Operadores condicionales de igualdad y desigualdad& ^ | Lgicos a nivel de bit&& || Lgicos boleanos= += -= *= /= %= = >>>= &= ^= != Asignacin

    var a= "55";var b=55;alert(a===b);

    var a= "55";var b=55;alert(a==b);

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    27

    En los siguientes ejemplos podemos ver cmo las expresiones podran llegar a serconfusas, pero con la tabla de precedencia de operadores podremos entender sinerrores cul es el orden por el que se ejecutan.12 * 3 + 4 - 8 / 2 % 3

    En este caso primero se ejecutan los operadores * / y %, de izquierda a derecha, conlo que se realizaran estas operaciones. Primero la multiplicacin y luego la divisinpor estar ms a la izquierda del mdulo.

    12 * 3 + 4 - 8 / 2 % 336 + 4 - 4 % 336 + 4 - 140 - 139

    De todos modos, es importante darse cuenta que el uso de los parntesis puedeahorrarnos muchos quebraderos de cabeza y sobretodo la necesidad de sabernos dememoria la tabla de precedencia de los operadores. Cuando veamos poco claro elorden con el que se ejecutarn las sentencias podemos utilizarlos y as forzar que seevale antes el trozo de expresin que se encuentra dentro de los parntesis

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    28

    3 Estructuras de ControlINTRODUCCINLos scripts vistos hasta ahora han sido tremendamente sencillos y lineales: se ibanejecutando las sentencias simples una detrs de la otra desde el principio hasta elfin. Sin embargo, esto no tiene porque ser siempre as, en los programasgeneralmente necesitaremos hacer cosas distintas dependiendo del estado denuestras variables o realizar un mismo proceso muchas veces sin escribir la mismalnea de cdigo una y otra vez.

    Para realizar cosas ms complejas en nuestros scripts se utilizan las estructuras decontrol. Utilizndolas podemos realizar tomas de decisiones y bucles. En lossiguientes captulos vamos a conocer las distintas estructuras de control que existenen Javascript.Toma de decisionesNos sirven para realizar unas acciones u otras en funcin del estado de las variables.Es decir, tomar decisiones para ejecutar unas instrucciones u otras dependiendo delo que est ocurriendo en ese instante en nuestros programas.

    Por ejemplo, dependiendo si el usuario que entra en nuestra pgina es mayor deedad o no lo es, podemos permitirle o no ver los contenidos de nuestra pgina.

    Si edad es mayor que 18 entoncesTe dejo ver el contenido para adultos

    Si noTe mando fuera de la pgina

    En javascript podemos tomar decisiones utilizando dos enunciados distintos.

    if switchBucles

    Los bucles se utilizan para realizar ciertas acciones repetidamente. Son muyutilizados a todos los niveles en la programacin. Con un bucle podemos por ejemploimprimir en una pgina los nmeros del 1 al 100 sin necesidad de escribir cien vecesel la instruccin imprimir.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    29

    Desde el 1 hasta el 100Imprimir el nmero actual

    En javascript existen varios tipos de bucles, cada uno est indicado para un tipo deiteracin distinto y son los siguientes:

    for while do ... while

    Como hemos sealado ya, las estructuras de control son muy importantes enJavascript y en cualquier lenguaje de programacin. Es por ello que en los siguientescaptulos veremos cada una de estas estructuras detenidamente, describiendo su usoy ofreciendo algunos ejemplos. ESTRUCTURA ifif es una estructura de control utilizada para tomar decisiones. Es un condicional querealiza unas u otras operaciones en funcin de una expresin. Funciona de lasiguiente manera, primero se evala una expresin, si da resultado positivo serealizan las acciones relacionadas con el caso positivo.

    La sintaxis de la estructura if es la siguiente.

    if (expresin){acciones a realizar en caso positivo...

    }

    Opcionalmente se pueden indicar acciones a realizar en caso de que la evaluacin dela sentencia de resultados negativos.

    if (expresin){acciones a realizar en caso positivo...

    }else{acciones a realizar en caso negativo...

    }

    Fijmonos en varias cosas. Para empezar vemos como con unas llaves engloban lasacciones que queremos realizar en caso de que se cumplan o no las expresiones.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    30

    Estas llaves han de colocarse siempre, excepto en el caso de que slo haya unainstruccin como acciones a realizar, que son opcionales.Otro detalle que salta a la vista es el sangrado (margen) que hemos colocado encada uno de los bloques de instrucciones a ejecutar en los casos positivos ynegativos. Este sangrado es totalmente opcional, slo lo hemos hecho as para que laestructura if se comprenda de una manera ms visual. Los saltos de lnea tampocoson necesarios y se han colocado tambin para que se vea mejor la estructura.Perfectamente podramos colocar toda la instruccin if en la misma lnea de cdigo,pero eso no ayudar a que las cosas estn claras. Nosotros, y cualquierprogramador, te aconsejamos que utilices los sangrados y saltos de lnea necesariospara que las instrucciones se puedan entender mejor, hoy y dentro de un mes,cuando te acuerdes menos de lo que hiciste en tus scripts.Veamos algn ejemplo de condicionales if.

    if (dia == "lunes")document.write ("Que tengas un feliz comienzo de semana");

    Si es lunes nos desear una feliz semana. No har nada en caso contrario. Como eneste ejemplo slo indicamos una instruccin para el caso positivo, no har faltautilizar las llaves. Fjate tambin en el operador condicional que consta de dos signosigual.

    Vamos a ver ahora otro ejemplo, un poco ms largo.

    if (credito >= precio){document.write("has comprado el artculo " + nuevoArtculo) //enseo compracarrito += nuevoArticulo //introduzco el artculo en el carrito de la compracredito -= precio //disminuyo el crdito segn el precio del artculo

    }else{document.write("se te ha acabado el crdito") //informo que te falta dinerowindow.location = "carritodelacompra.html" //voy a la pgina del carrito

    }

    Este ejemplo es un poco ms complejo, y tambin un poco ficticio. Lo que hago escomprobar si tengo crdito para realizar una supuesta compra. Para ello miro si elcrdito es mayor o igual que el precio del artculo, si es as informo de la compra,introduzco el artculo en el carrito y resto el precio al crdito acumulado. Si el preciodel artculo es superior al dinero disponible informo de la situacin y mando alnavegador a la pgina donde se muestra su carrito de la compra. 0Expresiones condicionalesLa expresin a evaluar se coloca siempre entre parntesis y est compuesta porvariables que se combinan entre si mediante operadores condicionales. Recordamosque los operadores condicionales relacionaban dos variables y devolvan siempre unresultado boleano. Por ejemplo un operador condicional es el operador "es igual"(==), que devuelve true en caso de que los dos operandos sean iguales o false encaso de que sean distintos.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    31

    if (edad > 18)document.write("puedes ver esta pgina para adultos");

    En este ejemplo utilizamos en operador condicional "es mayor" (>). En este caso,devuelve true si la variable edad es mayor que 18, con lo que se ejecutara la lneasiguiente que nos informa de que se puede ver el contenido para adultos.

    Las expresiones condicionales se pueden combinar con las expresiones lgicas paracrear expresiones ms complejas. Recordamos que las expresiones lgicas son lasque tienen como operandos a los boleanos y que devuelvan otro valor boleano. Sonlos operadores negacin lgica, Y lgico y O lgico.

    if (bateria == 0 && redElectrica == 0)document.write("tu ordenador portatil se va a apagar en segundos");

    Lo que hacemos es comprobar si la batera de nuestro supuesto ordenador est acero (acabada) y tambin comprobamos si el ordenador no tiene red elctrica (estdesenchufado). Luego, el operador lgico los relaciona con un Y, de modo que si estsin batera Y sin red elctrica, informo que el ordenador se va a apagar.

    La lista de operadores que se pueden utilizar con las estructuras if se puede ver en elcaptulo de operadores condicionales y operadores lgicos.Sentencias if anidadasPara hacer estructuras condicionales ms complejas podemos anidar sentencias if, esdecir, colocar estructuras if dentro de otras estructuras if. Con un solo if podemosevaluar y realizar una accin u otra segn dos posibilidades, pero si tenemos msposibilidades que evaluar debemos anidar Ifs para crear el flujo de cdigo necesariopara decidir correctamente.

    Por ejemplo, si deseo comprobar si un nmero es mayor menor o igual que otro,tengo que evaluar tres posibilidades distintas. Primero puedo comprobar si los dosnmeros son iguales, si lo son, ya he resuelto el problema, pero si no son igualestodava tendr que ver cul de los dos es mayor. Veamos este ejemplo en cdigoJavascript.var numero1=23var numero2=63if (numero1 == numero2){document.write("Los dos nmeros son iguales")

    }else{if (numero1 > numero2){document.write("El primer nmero es mayor que el segundo")

    }else{document.write("El primer nmero es menor que el segundo")

    }}

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    32

    O tambin se podra haber encadenado de la siguiente forma:var numero1=23var numero2=63if (numero1 == numero2){document.write("Los dos nmeros son iguales")

    }else if (numero1 > numero2){document.write("El primer nmero es mayor que el segundo")

    }else{

    document.write("El primer nmero es menor que el segundo")}

    El flujo del programa es como comentbamos antes, primero se evala si los dosnmeros son iguales. En caso positivo se muestra un mensaje informndolo. En casocontrario ya sabemos que son distintos, pero aun debemos averiguar cul de los dosen mayor. Para eso se hace otra comparacin para saber si el primero es mayor queel segundo. Si esta comparacin da resultados positivos mostramos un mensajediciendo que el primero es mayor que el segundo, en caso contrario indicaremos queel primero es menor que el segundo.

    Volvemos a remarcar que las llaves son en este caso opcionales, pues slo se ejecutauna sentencia para cada caso. Adems, los saltos de lnea y los sangrados tambinopcionales en todo caso y nos sirven slo para ver el cdigo de una manera msordenada. Mantener el cdigo bien estructurado y escrito de una maneracomprensible es muy importante, ya que nos har la vida ms agradable a la hora deprogramar y ms adelante cuando tengamos que revisar los programas. En estemanual utilizar una notacin como la que has podido ver en las lneas anteriores, yvers en adelante, adems mantendr esa notacin en todo momento. Esto sin lugara dudas har que los cdigos con ejemplos sean comprensibles ms rpidamente, sino lo hiciramos as sera un verdadero incordio leerlos. Esta misma receta esaplicable a los cdigos que has de crear t y el principal beneficiado sers t mismo ylos compaeros que lleguen a leer tu cdigo.Operador ifHay un operador que no hemos visto todava y es una forma ms esquemtica derealizar algunos if sencillos. Proviene del lenguaje C, donde se escriben muy pocaslneas de cdigo que resulta muy elegante. Este operador es un claro ejemplo deahorro de lneas y caracteres al escribir los scripts. Lo veremos rpidamente, pues lanica razn por la que lo incluyo es para que sepas que existe y si lo encuentras enalguna ocasin por ah sepas identificarlo y cmo funciona.

    Un ejemplo de uso del operador if se puede ver a continuacin.Variable = (condicin) ? valor1 : valor2

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    33

    Este ejemplo no slo realiza una comparacin de valores, adems asigna un valor auna variable. Lo que hace es evaluar la condicin (colocada entre parntesis) y si espositiva asigna el valor1 a la variable y en caso contrario le asigna el valor2.Veamos un ejemplo:momento = (hora_actual < 12) ? "Antes del medioda" : "Despus del medioda"

    Este ejemplo mira si la hora actual es mayor que 12. Si es as, es que ahora es antesdel medioda, as que asigna "Antes del medioda" a la variable momento. Si la horaes mayo o igual a 12 es que ya es despus de medioda, con lo que se asigna el texto"Despus del medioda" a la variable momento.ESTRUCTURA switchEs la otra expresin disponible en Javascript para tomar decisiones en funcin dedistintos estados de las variables. Esta expresin se utiliza cuando tenemos mltiplesposibilidades como resultado de la evaluacin de una sentencia.La estructura SWITCH se incorpor a partir de la versin 1.2 de Javascript (Netscape4 e Internet Explorer 4). Su sintaxis es la siguiente.switch (expersin){case valor1:Sentencias a ejecutar si la expresin tiene como valor a valor1break

    case valor2:Sentencias a ejecutar si la expresin tiene como valor a valor2break

    case valor3:Sentencias a ejecutar si la expresin tiene como valor a valor3break

    default:Sentencias a ejecutar si el valor no es ninguno de los anteriores

    }La expresin se evala, si vale valor1 se ejecutan las sentencias relacionadas con esecaso. Si la expresin vale valor2 se ejecutan las instrucciones relacionadas con esevalor y as sucesivamente, por tantas opciones como deseemos. Finalmente, paratodos los casos no contemplados anteriormente se ejecuta el caso por defecto.La palabra break es opcional, pero si no la ponemos a partir de que se encuentrecoincidencia con un valor se ejecutarn todas las sentencias relacionadas con este ytodas las siguientes. Es decir, si en nuestro esquema anterior no hubiese ningnbreak y la expresin valiese valor1, se ejecutaran las sentencias relacionadas convalor1 y tambin las relacionadas con valor2, valor3 y default.Tambin es opcional la opcin default u opcin por defecto.Veamos un ejemplo de uso de esta estructura. Supongamos que queremos indicarque da de la semana es. Si el da es 1 (lunes) sacar un mensaje indicndolo, si el daes 2 (martes) debemos sacar un mensaje distinto y as sucesivamente para cada da

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    34

    de la semana, menos en el 6 (sbado) y 7 (domingo) que queremos mostrar elmensaje "es fin de semana". Para das mayores que 7 indicaremos que ese da noexiste.

    Switch (dia_de_la_semana){case 1:document.write("Es Lunes");break;

    case 2:document.write("Es Martes");break;case 3:document.write("Es Mircoles");break ;

    case 4:document.write("Es Jueves");break;

    case 5:document.write("Es viernes");break;

    case 6:case 7:document.write("Es fin de semana");break;

    default:document.write("Ese da no existe");

    }El ejemplo es relativamente sencillo, solamente puede tener una pequea dificultad,consistente en interpretar lo que pasa en el caso 6 y 7, que habamos dicho quetenamos que mostrar el mismo mensaje. En el caso 6 en realidad no indicamosninguna instruccin, pero como tampoco colocamos un break se ejecutar lasentencia o sentencias del caso siguiente, que corresponden con la sentenciaindicada en el caso 7 que es el mensaje que informa que es fin de semana. Si el casoes 7 simplemente se indica que es fin de semana, tal como se pretenda.BUCLE forEl bucle for se utiliza para repetir mas instrucciones un determinado nmero deveces. De entre todos los bucles, el for se suele utilizar cuando sabemos seguro elnmero de veces que queremos que se ejecute la sentencia. La sintaxis del bucle semuestra a continuacin.

    for (inicializacin;condicin;actualizacin){sentencias a ejecutar en cada iteracin

    }

    El bucle for tiene tres partes incluidas entre los parntesis. La primera es lainicializacin, que se ejecuta solamente al comenzar la primera iteracin del bucle.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    35

    En esta parte se suele colocar la variable que utilizaremos para llevar la cuenta de lasveces que se ejecuta el bucle.La segunda parte es la condicin, que se evaluar cada vez que comience la iteracindel bucle. Contiene una expresin para comprobar cundo se ha de detener el bucle,o mejor dicho, la condicin que se debe cumplir para que contine la ejecucin delbucle.Por ltimo tenemos la actualizacin, que sirve para indicar los cambios que queramosejecutar en las variables cada vez que termina la iteracin del bucle, antes decomprobar si se debe seguir ejecutando.Despus del for se colocan las sentencias que queremos que se ejecuten en cadaiteracin, acotadas entre llaves.Un ejemplo de utilizacin de este bucle lo podemos ver a continuacin, donde seimprimirn los nmeros del 0 al 10.var i

    for (i=0;i

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    36

    Lo que deseamos escribir en una pgina web mediante Javascript es lo siguiente:Encabezado de nivel 1Encabezado de nivel 2Encabezado de nivel 3Encabezado de nivel 4Encabezado de nivel 5Encabezado de nivel 6

    Para ello tenemos que hacer un bucle que empiece en 1 y termine en 6 y en cadaiteracin escribiremos el encabezado que toca.for (i=1;i

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    37

    principio del bucle, donde tenemos que volver a evaluar si lo que hay en la variablecolor es "rojo" y as sucesivamente mientras que no se haya introducido como colorel texto "rojo". Obviamente la expresin dame un color no es Javascript, pero comono sabemos todava cmo escribir eso en Javascript es mejor verlo ms adelante.Bucle do...whileEs el ltimo de los bucles que hay en Javascript. Se utiliza generalmente cuando nosabemos cuantas veces se habr de ejecutar el bucle, igual que el bucle while, con ladiferencia de que sabemos seguro que el bucle por lo menos se ejecutar una vez.Este tipo de bucle se introdujo en Javascript 1.2, por lo que no todos los navegadoreslos soportan, slo los de versin 4 o superior. En cualquiuer caso, cualquier cdigoque quieras escribir con do...while se puede escribir tambin utilizando un buclewhile, con lo que en navegadores antiguos debers traducir tu bucle do...while porun bucle while.La sintaxis es la siguiente.do{sentencias del bucle

    }while (condicin)El bucle se ejecuta siempre una vez y al final se evala la condicin para decir si seejecuta otra vez el bucle o se termina su ejecucin.Veamos el ejemplo que escribimos para un bucle while en este otro tipo de bucle.var colordo{color = dame un color

    }while (color != "rojo")

    Este ejemplo funciona exactamente igual que el anterior, excepto que no tuvimosque inicializar la variable color antes de introducirnos en el bucle. Pide un colormientras que el color introducido es distinto que "rojo".

    EjemploVamos a ver a continuacin un ejemplo ms prctico sobre cmo trabajar con unbucle while. Como resulta muy dificil hacer ejemplos prcticos con lo poco quesabemos sobre Javascript, vamos a adelantar una instruccin que aun no conocemos.En este ejemplo vamos a declarar una variable e inicializarla a 0. Luego iremossumando a esa variable un nmero aleatorio del 1 al 100 hasta que sumemos 1.000o ms, imprimiendo el valor de la variable suma despus de cada operacin. Sernecesario utilizar el bucle while porque no sabemos exactamente el nmero deiteraciones que tendremos que realizar.var suma = 0;while (suma < 1000){

    suma += parseInt(Math.random() * 100);document.write (suma + "");

    }

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    38

    Suponemos que por lo que respecta al bucle while no habr problemas, pero donde sique puede haberlos es en la sentencia utilizada para tomar un nmero aleatorio. Sinembargo, no es necesario explicar aqu la sentencia porque lo tenemos planeadohacer ms adelante. BREAK Y CONTINUEDe manera adicional al uso de las distintas estructuras de bucle se pueden utilizardos instrucciones para

    Detener la ejecucin de un bucle y salirse de l Detener la iteracin actual y volver al principio del bucle.

    Son las instrucciones break y continue.breakSe detiene un bucle utilizando la palabra break. Detener un bucle significa salirse del y dejarlo todo como est para continuar con el flujo del programa inmediatamentedespus del bucle.

    for (i=0;i

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    39

    Este ejemplo, en condiciones normales contara hasta desde i=0 hasta i=7, pero cadavez que se ejecuta el bucle pregunta al usuario si desea incrementar la variable o no.Si introduce "no" se ejecuta la sentencia continue, con lo que se vuelve al principiodel bucle sin llegar a incrementar en 1 la variable i, ya que se ignoran las sentenciaque hayan por debajo del continue.

    EjemploUn ejemplo ms prctico sobre estas instrucciones se puede ver a continuacin. Setrata de un bucle for planeado para llegar hasta 1.000 pero que lo vamos a parar conbreak cuando lleguemos a 333.

    for (i=0;i

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    40

    0-60-70-80-9

    Para cada iteracin del bucle externo se ejecutarn las 10 iteraciones del bucleinterno o anidado. Hemos visto la primera iteracin, ahora vamos a ver las siguientesiteraciones del bucle externo. En cada una acumula una unidad en la variable i, conlo que saldran estos valores:1-01-11-21-31-41-51-61-71-81-9

    Y luego estos:2-02-12-22-32-42-52-62-72-82-9

    As hasta que se terminen los dos bucles, que sera cuando se alcanzase el valor 9-9.Veamos un ejemplo muy parecido al anterior, aunque un poco ms til. Se trata deimprimir en la pgina las todas las tablas de multiplicar. Del 1 al 9, es decir, la tabladel 1, la del 2, del 3...

    for (i=1;i

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    41

    4 FuncionesINTRODUCCINAhora vamos a ver un tema muy importante, sobretodo para los que no hanprogramado nunca y con Javascript estn dando sus primeros pasos en el mundo dela programacin ya que veremos un concepto nuevo, el de funcin, y los usos quetiene. Para los que ya conozcan el concepto de funcin tambin ser un captulo util,pues tambin veremos la sintaxis y funcionamiento de las funciones en Javascript.Qu es una funcinA la hora de hacer un programa ligeramente grande existen determinados procesosque se pueden concebir de forma independiente, y que son ms sencillos de resolverque el problema entero. Adems, estos suelen ser realizados repetidas veces a lolargo de la ejecucin del programa. Estos procesos se pueden agrupar en unafuncin, definida para que no tengamos que repetir una y otra vez ese cdigo ennuestros scripts, sino que simplemente llamamos a la funcin y ella se encarga dehacer todo lo que debe.As que podemos ver una funcin como una serie de instrucciones que englobamosdentro de un mismo proceso. Este proceso se podr luego ejecutar desde cualquierotro sitio con solo llamarlo. Por ejemplo, en una pgina web puede haber una funcinpara cambiar el color del fondo y desde cualquier punto de la pgina podramosllamarla para que nos cambie el color cuando lo deseemos.Las funciones se utilizan constantemente, no slo las que escribes tu, sino tambinlas que ya estn definidas en el sistema, pues todos los lenguajes de programacintienen un montn de funciones para realizar procesos habituales como por ejemploobtener la hora, imprimir un mensaje en la pantalla o convertir variables de un tipo aotro. Ya hemos visto alguna funcin en nuestros sencillos ejemplos anteriores cuandohacamos un document.write() en realidad estabamos llamando a la funcin write()asociada al documento de la pgina que escribe un texto en la pgina. En loscaptulos de funciones vamos primero a ver cmo realizar nuestras propias funcionesy cmo llamarlas luego. A lo largo del libro veremos muchas de las funcionesdefinidas en Javascript que debemos utilizar para realizar distintos tipos de accioneshabituales.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    42

    Cmo se escribe una funcinUna funcin se debe definir con una sintaxis especial que vamos a conocer acontinuacin.

    function nombrefuncion ()

    {

    instrucciones de la funcin

    ...}

    Primero se escribe la palabra function, reservada para este uso. Seguidamente seescribe el nombre de la funcin, que como los nombres de variables puede tenernmeros, letras y algn carcter adicional como en guin bajo. A continuacin secolocan entre llaves las distintas instrucciones de la funcin. Las llaves en el caso delas funciones no son opcionales, adems es til colocarlas siempre como se ve en elejemplo, para que se vea fcilmente la estructura de instrucciones que engloba lafuncin.Veamos un ejemplo de funcin para escribir en la pgina un mensaje de bienvenidadentro de etiquetas para que quede ms resaltado.function escribirBienvenida(){document.write("Hola a todos");

    }

    Simplemente escribe en la pgina un texto, es una funcin tan sencilla que elejemplo no expresa suficientemente el concepto de funcin, pero ya veremos otrasms complejas. Las etiquetas H1 no se escriben en la pgina, sino que soninterpretadas como el significado de la misma, en este caso que escribimos unencabezado de nivel 1. Como estamos escribiendo en una pgina web, al poneretiquetas HTML se interpretan como lo que son.Cmo llamar a una funcinCuando se llaman a las funciones Para ejecutar una funcin la tenemos que llamar encualquier parte de la pgina, con eso conseguiremos que se ejecuten todas lasinstrucciones que tiene la funcin entre las dos llaves. Para ejecutar la funcinutilizamos su nombre seguido de los parntesis.

    NombreDeLaFuncion()

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    43

    DNDE COLOCAMOS LASFUNCIONES?En principio, podemos colocar las funciones en cualquier parte de la pgina, siempreentre etiquetas , claro est. No obstante existe una limitacin a la hora decolocarla con relacin a los lugares desde donde se la llame. Lo ms normal escolocar la funcin antes de cualquier llamada a la misma y as seguro que nunca nosequivocaremos.En concreto, la funcin se debe definir en el bloque donde est la llamadaa la funcin, aunque es indiferente si la llamada se encuentra antes o despus lafuncin, dentro del mismo bloque .

    Este ejemplo funciona correctamente porque la funcin est declarada en el mismobloque que su llamada.Tambin es vlido que la funcin se encuentre en un bloque anterior albloque donde est la llamada.

    Vemos un cdigo completo sobre cmo podra ser una pgina web donde lasfunciones estn en la cabecera. Un lugar muy bueno donde colocarlas, porque se

    MI PGINA

    function miFuncion(){//hago algo...document.write("Esto va bien");

    }

    miFuncion();

    miFuncion()function miFuncion(){//hago algo...document.write("Esto va bien")

    }

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    44

    supone que en la cabecera no se van a utilizar todava y siempre podremos disfrutarde ellas en el cuerpo porque ya han sido declaradas seguro.

    Esto ltimo en cambio sera un error.

    Lo que ser un error es una llamada a una funcin que se encuentra declarada en unbloque posterior.

    PARMETROS DE LAS FUNCIONESLas estructuras que hemos visto anteriormente sobre funciones no son las nicas quedebemos aprender para manejarlas en toda su potencia. Las funciones tambintienen una entrada y una salida, que se pueden utilizar para recibir y devolver datos.ParmetrosLos parmetros se usan para mandar valores a la funcin, con los que ella trabajarpara realizar las acciones. Son los valores de entrada que recibe una funcin. Porejemplo, una funcin que realizase una suma de dos nmeros tendra comoparmetros a esos dos nmeros. Los dos nmeros son la entrada, as como la salidasera el resultado, pero eso lo veremos ms tarde.Veamos un ejemplo anterior en el que crebamos una funcin para mostrar unmensaje de bienvenida en la pgina web, pero al que ahora le vamos a pasar unparmetro que contendr el nombre de la persona a la que hay que saludar.function escribirBienvenida(nombre){document.write("Hola " + nombre + "");

    }Como podemos ver en el ejemplo, para definir en la funcin un parmetro tenemosque poner el nombre de la variable que va a almacenar el dato que le pasemos. Esavariable, que en este caso se llama nombre, tendr como valor el dato que lepasemos a la funcin cuando la llamemos, adems, la variable tendr vida durante laejecucin de la funcin y dejar de existir cuando la funcin termine su ejecucin.

    miFuncion();

    function miFuncion(){//hago algo...document.write("Esto va bien");

    }

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    45

    Para llamar a una funcin que tiene parmetros se coloca entre parntesis el valordel parmetro. Para llamar a la funcin del ejemplo habra que escribir:

    escribirBienvenida("Alberto Garca")

    Al llamar a la funcin as, el parmetro nombre toma como valor "Alberto Garca" y alescribir el saludo por pantalla escribir "Hola Alberto Garca" entre etiquetas .Los parmetros pueden recibir cualquier tipo de datos, numrico, textual, boleano oun objeto. Realmente no especificamos el tipo del parmetro, por eso debemos tenerun cuidado especial al definir las acciones que realizamos dentro de la funcin y alpasarle valores a la funcin para asegurarnos que todo es consecuente con los tiposde nuestras variables o parmetros.

    Mltiples parmetrosUna funcin puede recibir tantos parmetros como queramos y para expresarlo secolocan los parmetros separados por comas dentro de los parntesis. Veamosrpidamente la sintaxis para que la funcin de antes reciba dos parmetros, elprimero el nombre al que saludar y el segundo el color del texto.

    function escribirBienvenida(nombre,colorTexto){document.write(");document.write("Hola " + nombre + "");document.write("");

    }

    Llamaramos a la funcin con esta sintaxis. Entre los parntesis colocaremos losvalores de los parmetros.

    var miNombre = "Pepe";var miColor = "red";escribirBienvenida(miNombre,miColor);

    He colocado entre los parntesis dos variables en lugar de dos textosentrecomillados. Cuando colocamos variables entre los parmetros en realidad lo queestamos pasando a la funcin son los valores que contienen las variables y no lasmismas variables.Parmetros por valorAl hilo del uso de parmetros en nuestros programas Javascript tenemos que indicarque los parmetros de las funciones se pasan por valor. Esto quiere decir que aunquemodifiquemos un parmetro en una funcin la variable original que habamos pasadono cambiar su valor. Se puede ver fcilmente con un ejemplo.

    function pasoPorValor(miParametro){miParametro = 32;

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    46

    document.write("he cambiado el valor a 32");}var miVariable = 5;pasoPorValor(miVariable);document.write ("el valor de la variable es: " + miVariable);

    En el ejemplo tenemos una funcin que recibe un parmetro y que modifica el valordel parmetro asignndole el valor 32. Tambin tenemos una variable, queinicializamos a 5 y posteriormente llamamos a la funcin pasndole esta variablecomo parmetro. Como dentro de la funcin modificamos el valor del parmetropodra pasar que la variable original cambiase de valor, pero como los parmetros nomodifican el valor original de las variables esta no cambia de valor. De este modo, alimprimir en pantalla el valor de miVariable se imprimir el nmero 5, que es el valororiginal de la variable, en lugar de 32 que era el valor col el que habamosactualizado el parmetro.En javascript slo se pueden pasar las variables por valor.VALORES DE RETORNOLas funciones tambin pueden retornar valores, de modo que al ejecutar la funcinse podr realizar acciones y dar un valor como salida. Por ejemplo, una funcin quecalcula el cuadrado de un nmero tendr como entrada -tal como vimos- a esenmero y como salida tendr el valor resultante de hallar el cuadrado de esenmero. Una funcin que devuelva el da de la semana tendra como salida en da dela semana.Veamos un ejemplo de funcin que calcula la media de dos nmeros. La funcinrecibir los dos nmeros y retornar el valor de la media.function media(valor1,valor2){var resultado;resultado = (valor1 + valor2) / 2;return resultado;

    }

    Para especificar el valor que retornar la funcin se utiliza la palabra return seguidadel valor que se desea devolver. En este caso se devuelve el contenido de la variableresultado, que contiene la media de los dos nmeros.Para recibir los valores que devuelve una funcin se coloca el operador de asignacin=. Para ilustrar esto se puede ver este ejemplo, que llamar a la funcin media() yguardar el resultado de la media en una variable para luego imprimirla en la pgina.var miMedia;miMedia = media(12,8);document.write (miMedia);Mltiples returnEn una misma funcin podemos colocar ms de un return. Lgicamente slo vamos apoder retornar una cosa, pero dependiendo de lo que haya sucedido en la funcinpodr ser de un tipo u otro, con unos datos u otros.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    47

    En esta funcin podemos ver un ejemplo de utilizacin de mltiples return. Se tratade una funcin que devuelve un 0 si el parmetro recibido era par y el valor delparmetro si este era impar.function multipleReturn(numero){var resto = numero % 2;if (resto == 0)return 0;

    elsereturn numero;

    }

    Para averiguar si un nmero es par hallamos el resto de la divisin al dividirlo entre2. Si el resto es cero es que era par y devolvemos un 0, en caso contrario -el nmeroes impar- devolvemos el parmetro recibido.mbito de las variables en funcionesDentro de las funciones podemos declarar variables, incluso los parmetros son comovariables que se declaran en la cabecera de la funcin y que se inicializan al llamar ala funcin. Todas las variables declaradas en una funcin son locales a esa funcin,es decir, solo tendrn validez durante la ejecucin de la funcin.Podemos declarar variables en funciones que tengan el mismo nombre que unavariable global a la pgina. Entonces, dentro de la funcin la variable que tendrvalidez es la variable local y fuera de la funcin tendr validez la variable global a lapgina.En cambio, si no declaramos las variables en las funciones se entender porjavascript que estamos haciendo referencia a una variable global a la pgina, demodo que si no est creada la variable la crea, pero siempre global a la pgina enlugar de local a la funcin.

  • Lenguajes de marcas y sistemas de gestin deLenguajes de marcas y sistemas de gestin de la informacin: JavaScript

    48

    5 ArraysINTRODUCCINEn los lenguajes de programacin existen estructuras de datos especiales que nossirven para guardar informacin ms compleja que simples variables. Una estructuratpica en todos los lenguajes es el Array, que es como una variable donde podemosintroducir varios valores, en lugar de solamente uno como ocurre con las variablesnormales.Los arrays nos permiten guardar varias variables y acceder a ellas de maneraindependiente, es como tener una variable con distintos compartimentos dondepodemos introducir datos distintos. Para ello utilizamos un ndice que nos permiteespecificar el compartimiento o posicin a la que nos estamos refiriendo.Los arrays se introdujeron en versiones Javascript 1.1 o superiores, es decir, solo lospodemos utilizar a partir de los navegadores 3.0. Para navegadores antiguos sepuede simular el array utilizando sintaxis de programacin orientada a objetos, perodada la complejidad de esta tarea, por lo menos en el momento en que nosencontramos y las pocas ocasiones que los deberemos utilizar vamos a ver cmoutilizar el autntico array de Javascript.Creacin de arraysEl primer paso para utilizar un array es crearlo. Para ello utilizamos un objetoJavascript ya implementado en el navegador. Veremos en adelante un tema paraexplicar lo que es la orientacin a objetos, aunque no ser necesario para poderentender el uso de los arrays. Esta es la sentencia para crear un objeto array:

    var miArray = new Array():

    Esto crea un array en la pgina que esta ejecutndose. El array se crea sin ningncontenido, es decir, no tendr ninguna casilla o compartimiento creado. Tambinpodemos crear el array especificando el nmero de compartimentos que va a tener.

    var miArray = new Array(10);

    En este caso indicamos que el array va a tener 10 posiciones, es decir, 10 casillasdonde guardar datos.Es importante que nos fijemos que la palabra Array en cdigo Javascript se escribecon la primera letra en mayscula. Como en Javascript las maysculas y minsculassi que importan, si lo escribimos en minscula no funcionar.Tanto se indique o no el nmero de casillas del array, podemos introducir en el arraycualquier dato. Si la casilla est creada se introduce simplemente y si la casilla noestaba creada se crea y luego se introduce el dato, con lo que el resultado final es elmismo. Esta creacin de casillas es dinmica y se produce al mismo tiempo que los