Manual Programacion Javascript Parte1 PDF

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.
com
Programacin en JavaScript
(1 Entrega)
Descubre el lenguaje de programacin del lado cliente por excelencia, Javascript. Esta es la primera parte del Manual de Javascript donde veremos las caractersticas del lenguaje, como la sintaxis, variables, estructuras de control, funciones, arrays, etc.
Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez Manu Gutierrez
Director de DesarrolloWeb.com http://www.desarrolloweb.com (36 captulos)
http://www.tu uncion.com (! captulo)
Manual de programacin en Javascript: www.desarrolloweb.com/manuales/20/

" #os manuales de DesarrolloWeb.com tienen el cop$right de sus autores. %o reproducir sin autorizaci&n.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Parte 1:
Introducciones a Javascript
'rtculos (ue nos ser)ir*n para introducirnos en este lengua+e, aprendiendo los conceptos m*s b*sicos de -a)ascript $ la programaci&n del lado del cliente.
1.1.- Introduccin a Javascript

Veamos u! es Java"cript y las posibilidades ue nos ofrece utili#ar este lenguaje a la $ora de desarrollar p%ginas &eb. Ante todo, gracias por leer este Manual de Javascript, en el que esperamos ofrecer un punto de partida para las personas que quieren introducirse en el mundo de la programacin y que quieren aplicar un mayor dinamismo a su pgina web. El curso de Javascript que hemos preparado en esarrollo!eb.com est dividido en dos partes fundamentales. En este primer manual pretendemos ofrecer la informacin ms esencial para aprender a programar en Javascript, ofreciendo informacin sobre cmo incluir scripts y lidiar con los elementos ms bsicos de cualquier lengua"e de programacin, como son las variables, operadores, estructuras de control, funciones, etc. #a segunda parte del manual la dedicaremos a e$plorar temas ms espec%ficos sobre cmo Javascript nos puede ayudar a aplicar dinamismo a una pgina web, a trav&s del control dinmico de elementos de la pgina y la interaccin con el usuario.
Nota: 'or tanto, en este primer manual encontrar&is que se ofrece mucha ms informacin terica t%pica sobre lengua"es de programacin. (er esencial para saber cmo dar los primeros pasos en la programacin, pero qui)s resulte un poco ms aburrida que la segunda parte, donde aprenderemos a alterar dinmicamente la pgina web, responder a acciones del usuario, etc. *osotros hemos querido e$plicar las cosas con detenimiento, para que aprender Javascript con este manual est& al alcance de personas incluso sin conocimientos de programacin. *o obstante, en esarrollo!eb.com e$isten diversos manuales ms bsicos todav%a para aprender a programar, como puede ser el manual de 'ginas dinmicas o la introduccin a la programacin., (in embargo, qui)s personas ms e$perimentadas puedan preferir pasar directamente a la segunda parte de este manual, donde e$plicaremos cosas ms prcticas y volver sobre art%culos puntuales de este manual para utili)arlos como referencia a medida que vayan necesitando conocer la sinta$is de determinadas estructuras de control, operadores del lengua"e, construccin de funciones, etc.
En este art%culo pretendemos e$plicar qu& Javascript y para qu& sirve este lengua"e, al menos en l%neas generales. A lo largo de &ste y los pr$imos art%culos pretendemos que las personas tengan una idea ms o menos clara sobre qu& es Javascript, las posibilidades de del lengua"e o usos ms comunes y los modos de traba"o que podemos emplear para desarrollar nuestros propios scripts.
Nota: +tro recurso que queremos recomendar para aprender Javascript, especialmente indicado para las personas con menos e$periencia, es el ,ideotutorial de Javascript.

1.1.1.- Qu es Javascript
Javascript es un lengua"e de programacin utili)ado para crear peque-os programitas encargados de reali)ar acciones dentro del mbito de una pgina web. .on Javascript podemos crear efectos especiales en las pginas y definir interactividades con el usuario. El navegador del cliente es el encargado de interpretar las instrucciones Javascript y e"ecutarlas para reali)ar estos efectos e interactividades, de modo que el mayor recurso, y tal ve) el /nico, con que cuenta este lengua"e es el propio navegador. Javascript es el siguiente paso, despu&s del 01M#, que puede dar un programador de la web que decida me"orar sus pginas y la potencia de sus proyectos. Es un lengua"e de programacin bastante sencillo y pensado para hacer las cosas con rapide), a veces con ligere)a. 2ncluso las personas que no tengan una e$periencia previa en la programacin podrn aprender este lengua"e con facilidad y utili)arlo en toda su potencia con slo un poco de prctica. Entre las acciones t%picas que se pueden reali)ar en Javascript tenemos dos vertientes. 'or un lado los efectos especiales sobre pginas web, para crear contenidos dinmicos y elementos de la pgina que tengan movimiento, cambien de color o cualquier otro dinamismo. 'or el otro, "avascript nos permite e"ecutar instrucciones como respuesta a las acciones del usuario, con lo que podemos crear pginas interactivas con programas como calculadoras, agendas, o tablas de clculo. Javascript es un lengua"e con muchas posibilidades, permite la programacin de peque-os scripts, pero tambi&n de programas ms grandes, orientados a ob"etos, con funciones, estructuras de datos comple"as, etc. 1oda esta potencia de Javascript se pone a disposicin del programador, que se convierte en el verdadero due-o y controlador de cada cosa que ocurre en la pgina. En este manual vamos a tratar de acercarnos a este lengua"e en profundidad y conocer todos sus secretos y m&todos de traba"o. Al final del manual seremos capaces de controlar el flu"o en nuestros programas Javascript y saber cmo colocar scripts para resolver distintas necesidades que podamos tener. 1odo lo que veremos a continuacin nos servir de base para adentrarnos ms adelante en el desarrollo de pginas enriquecidas del lado del cliente.
Artculo por
Miguel Angel Alvarez
1.2.- Algo de historia so re Javascript

'lgunas curiosidades relativas a la $istoria de Javascript. (elatamos los orgenes y etimologas de este lenguaje de programacin de p%ginas &eb. En 2nternet se han creado multitud de servicios para reali)ar muchos tipos de comunicaciones, como correo, charlas, b/squedas de informacin, etc. 'ero ninguno de estos servicios se ha desarrollado tanto como el !eb. (i estamos leyendo estas l%neas no vamos a necesitar ninguna e$plicacin de lo que es el web, pero si podemos hablar un poco sobre cmo se ha ido desarrollando con el paso de los a-os. El !eb es un sistema 0iperte$to, una cantidad de dimensiones gigantes de te$tos interrelacionados por medio de enlaces. .ada una de las unidades bsicas donde podemos encontrar informacin son las pginas web. En un principio, para dise-ar este sistema de pginas con enlaces se pens en un lengua"e que permitiese presentar cada una de estas informaciones "unto con unos peque-os estilos, este lengua"e fue el 01M#. .onforme fue creciendo el !eb y sus distintos usos se fueron complicando las pginas y las acciones que se quer%an reali)ar a trav&s de ellas. Al poco tiempo qued patente que 01M# no era suficiente para reali)ar todas las acciones que se pueden llegar a necesitar en una pgina web. En otras palabras, 01M# se hab%a quedado corto ya que slo sirve para presentar el te$to en un pgina, definir su estilo y poco ms. Al complicarse los sitios web, una de las primeras necesidades fue que las pginas respondiesen a algunas acciones del usuario, para desarrollar peque-as funcionalidades ms all de los propios enlaces. El primer ayudante para cubrir las necesidades que estaban surgiendo fue Java, que es un lengua"e de propsito general, pero que hab%a creado una manera de incrustar programas en pginas web. A trav&s de la tecnolog%a de los Applets, se pod%a crear peque-os programas que se

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com e"ecutaban en el navegador dentro de las propias pginas web, pero que ten%an posibilidades similares a los programas de propsito general. #a programacin de Applets fue un gran avance y *etscape, por aquel entonces el navegador ms popular, hab%a roto la primera barrera del 01M# al hacer posible la programacin dentro de las pginas web. *o cabe duda que la aparicin de los Applets supuso un gran avance en la historia del web, pero no ha sido una tecnolog%a definitiva y muchas otras han seguido implementando el camino que comen) con ellos.
1.2.1.- !lega Javascript

*etscape, despu&s de hacer sus navegadores compatibles con los applets, comen) a desarrollar un lengua"e de programacin al que llam #ive(cript que permitiese crear peque-os programas en las pginas y que fuese mucho ms sencillo de utili)ar que Java. e modo que el primer Javascript se llamo #ive(cript, pero no dur mucho ese nombre, pues antes de lan)ar la primera versin del producto se for" una alian)a con (un Microsystems, creador de Java, para desarrollar en con"unto ese nuevo lengua"e. #a alian)a hi)o que Javascript se dise-ara como un hermano peque-o de Java, solamente /til dentro de las pginas web y mucho ms fcil de utili)ar, de modo que cualquier persona, sin conocimientos de programacin pudiese adentrase en el lengua"e y utili)arlo a sus anchas. Adems, para programar Javascript no es necesario un 3it de desarrollo, ni compilar los scripts, ni reali)arlos en ficheros e$ternos al cdigo 01M#, como ocurr%a con los applets. *etscape 4.5 fue el primer navegador que entend%a Javascript y su estela fue seguida por otros clientes web como 2nternet E$plorer a partir de la versin 6.5. (in embargo, la compa-%a Microsoft nombr a este lengua"e como J(cript y ten%a ligeras diferencias con respecto a Javascript, algunas de las cuales perduran hasta el d%a de hoy.
1.2.2.- "i#erencias entre distintos navegadores

.omo hemos dicho el Javascript de *etscape y el de Microsoft 2nternet E$plorer ten%a ligeras diferencias, pero es que tambi&n el propio lengua"e fue evolucionando a medida que los navegadores presentaban sus distintas versiones y a medida que las pginas web se hac%an ms dinmicas y ms e$igentes las necesidades de funcionalidades. #as diferencias de funcionamiento de Javascript han marcado las historia del lengua"e y el modo en el que los desarrolladores se relacionan con &l, debido a que estaban obligados a crear cdigo que funcionase correctamente en diferentes plataformas y diferentes versiones de las mismas. A d%a de hoy, siguen habiendo muchas diferencias y para solucionarlo han surgido muchos productos como los 7ramewor3s Javascript, que ayudan a reali)ar funcionalidades avan)adas de 01M# sin tener que preocuparse en hacer versiones distintas de los scripts, para cada uno de los navegadores posibles del mercado. A continuacin seguiremos aprendiendo curiosidades del lengua"e y aclararemos que Java y Javascript son dos cosas distintas, en el art%culo sobre las diferencias de Java y Javascript.
Artculo por
1.$.- "i#erencias entre Java % Javascript

Java y Javascript son dos productos distintos. )onemos de manifiesto la diferencia entre estos dos lenguajes con un nombre similar. Estamos contando diversos asuntos interesantes y curiosidades que sirven de introduccin para el Manual de Javascript y queremos tratar una de las ms t%picas asociaciones que se se hacen al oir hablar de Javascript. *os referimos a relacionarlo con otro lengua"e de programacin, llamado Java, que no tiene mucho que ver. 8ealmente Javascript se llam as% porque *etscape, que estaba aliado a los creadores de Java en la &poca, quiso aprovechar el conocimiento y la percepcin que las personas ten%an del popular lengua"e. .on todo, se cre un producto que ten%a ciertas similitudes, como la sinta$is del lengua"e o el nombre. (e hi)o entender que era un hermano peque-o y orientado espec%ficamente para hacer cosas en las pginas web, pero tambi&n se hi)o caer a muchas personas en el error de pensar que son lo mismo. 9ueremos que quede claro que Javascript no tiene nada que ver con Java, salvo en sus or%genes, como se ha podido leer

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com hace unas l%neas. Actualmente son productos totalmente distintos y no guardan entre si ms relacin que la sinta$is id&ntica y poco ms. Algunas diferencias entre estos dos lengua"es son las siguientes: Compilador. 'ara programar en Java necesitamos un ;it de desarrollo y un compilador. (in embargo, Javascript no es un lengua"e que necesite que sus programas se compilen, sino que &stos se interpretan por parte del navegador cuando &ste lee la pgina. Orientado a objetos. Java es un lengua"e de programacin orientado a ob"etos. <Ms tarde veremos que quiere decir orientado a ob"etos, para el que no lo sepa todav%a= Javascript no es orientado a ob"etos, esto quiere decir que podremos programar sin necesidad de crear clases, tal como se reali)a en los lengua"es de programacin estructurada como . o 'ascal. Propsito. Java es mucho ms potente que Javascript, esto es debido a que Java es un lengua"e de propsito general, con el que se pueden hacer aplicaciones de lo ms variado, sin embargo, con Javascript slo podemos escribir programas para que se e"ecuten en pginas web. Estructuras fuertes. Java es un lengua"e de programacin fuertemente tipado, esto quiere decir que al declarar una variable tendremos que indicar su tipo y no podr cambiar de un tipo a otro automticamente. 'or su parte Javascript no tiene esta caracter%stica, y podemos meter en una variable la informacin que deseemos, independientemente del tipo de &sta. Adems, podremos cambiar el tipo de informacin de una varible cuando queramos. Otras caractersticas. .omo vemos Java es mucho ms comple"o, aunque tambi&n ms potente, robusto y seguro. 1iene ms funcionalidades que Javascript y las diferencias que los separan son lo suficientemente importantes como para distinguirlos fcilmente.
Artculo por
1.&.- Antes de empezar

Mostramos ejemplos de p%ginas ue emplean Java"cript en su desarrollo y comentamos las aplicaciones necesarias para empe#ar a programar. 0ay varios puntos que queremos comentar como introduccin en el Manual de Javascript y que podrs querer conocer antes de comen)ar a programar. 'rimero ser%a bueno hacernos una idea ms concreta de las posibles aplicaciones que podr%a tener el lengua"e y que se pueden encontrar en innumerables sitios web. Adems tambi&n queremos comentar las herramientas y conocimientos previos que necesitamos para ponernos manos a la obra.
1.&.1.- 'sos de Javascript

9ui)s a d%a de hoy sobra decir para qu& sirve Javascript, pero veamos brevemente algunos usos de este lengua"e que podemos encontrar en el web para hacernos una idea de las posibilidades que tiene. (in ir ms le"os, esarrollo!eb.com utili)a Javascript para el men/ superior, que muestra diferentes enlaces dentro de cada opcin principal. ,amos cambiando la pgina cada cierto tiempo, pero en el dise-o actual de este sitio web, elementos como el recuadro de >#ogin> tambi&n tienen su dinamismo con Javascript. Actualmente casi todas las pginas un poco avan)adas utili)an Javascript, pues se ha vuelto una de las insignias de lo que se denomina la !eb 4.5 y la e$periencia enriquecida de usuario. 'or e"emplo, webs tan populares como 7aceboo3, 1witter o ?outube usan Javascript a raudales. 'ara ser ms concretos, cuando en la red social apretamos un enlace para comentar algo, se muestra en la pgina un peque-o formulario que aparece como por arte de magia y luego se env%a sin salirse de la propia pgina. 1ambi&n cuando votamos por un v%deo en ?outube o cuando se cuentan los caracteres que llevamos escritos en los mini@post de 1witter, se utili)a Javascript para reali)ar peque-as funcionalidades que no es posible reali)ar con 01M# slo. En realidad se pueden ver e"emplos de Javascript dentro de cualquier pgina un poco comple"a. Algunos que habremos visto en innumerables ocasiones son calendarios dinmicos para seleccionar fechas, calculadoras o convertidores de divisas,

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com editores de te$to enriquecido, navegadores dinmicos, etc. Es mucho ms habitual encontrar Javascript para reali)ar efectos simples sobre pginas web, o no tan simples, como pueden ser navegadores dinmicos, apertura de ventanas secundarias, validacin de formularios, etc. *os atrevemos a decir que este lengua"e es realmente /til para estos casos, pues estos t%picos efectos tienen la comple"idad "usta para ser implementados en cuestin de minutos sin posibilidad de errores. (in embargo, aparte de esos unos simples e"emplos, podemos encontrar dentro de 2nternet muchas aplicaciones que basan parte de su funcionamiento en Javascript, que hacen que una pgina web se convierta en un verdadero programa interactivo de gestin de cualquier recurso. E"emplos claros son las aplicaciones de ofimatica online, como Aoogle ocs, +ffice +nline o Aoogle .alendar.
1.&.2.- Qu necesitas para tra a(ar con Javascript

'ara programar en Javascript necesitamos bsicamente lo mismo que para desarrollar pginas web con 01M#. Bn editor de te$tos y un navegador compatible con Javascript. .ualquier ordenador m%nimamente actual posee de salida todo lo necesario para poder programar en Javascrip. 'or e"emplo, un usuario de !indows dispone dentro de su instalacin t%pica de sistema operativo, de un editor de te$tos, el Cloc de notas, y de un navegador: 2nternet E$plorer.
Nota: Bsuarios que deseen herramientas ms avan)adas pueden encontrar en 2nternet fcilmente programas similares en la seccin de programas para desarrolladores.
'ermitidme una recomendacin con respecto al editor de te$tos. (e trata de que, aunque el Cloc de *otas es suficiente para empe)ar, tal ve) sea muy /til contar con otros programas que nos ofrecen me"ores prestaciones a la hora de escribir las l%neas de cdigo. Estos editores avan)ados tienen algunas venta"as como que colorean los cdigos de nuestros scripts, nos permiten traba"ar con varios documentos simultneamente, tienen ayudas, etc. Entre otros queremos destacar ;omodo Edit, *otepadDD o BltraEdit.
1.&.$.- )onocimientos previos recomenda les

#o cierto es que no hace falta tener mucha base de conocimientos para ponerse a programar en Javascript. #o ms seguro es que si lees estas l%neas ya sepas todo lo necesario para traba"ar, puesto que ya habrs tenido alguna relacin con el desarrollo de sitios web y habrs detectado que para hacer ciertas cosas te viene bien conocer un poco de Javascript. *o obstante, ser%a bueno tener un dominio avan)ado de 01M#, al menos el suficiente para escribir cdigo en ese lengua"e sin tener que pensar qu& es lo que ests haciendo. 1ambi&n ser /til un conocimiento medio sobre .(( y qui)s alguna e$periencia previa sobre alg/n lengua"e de programacin, aunque en este manual de esarrollo!eb.com vamos a tratar de e$plicar Javascript incluso para personas que no hayan programado nunca. En el siguiente art%culo seguiremos con temas que sirven de introduccin al lengua"e de scripting del lado del cliente viendo las algunas diferencias de Javascript que e$isten en las versiones de navegadores que han ido apareciendo.
Artculo por
1.*.- +ersiones de navegadores % de Javascript

)resentamos las diferentes versiones de Java"cript, los navegadores ue las aceptan y sus contribuciones con respecto a las predecesoras. 'ara continuar con la introduccin al lengua"e que estamos viendo en el Manual de Javascript, tambi&n resulta apropiado introducir las distintas versiones de Javascript que e$isten y que han evolucionado en con"unto con las versiones de navegadores. El lengua"e ha ido avan)ando durante sus a-os de vida e incrementando sus capacidades. En un principio pod%a reali)ar muchas cosas en la pgina web, pero ten%a pocas instrucciones para crear efectos especiales. .on el tiempo tambi&n el 01M# ha avan)ado y se han creado nuevas caracter%sticas como las capas, que permiten tratar y maquetar los documentos de manera distinta. Javascript ha avan)ado tambi&n y para mane"ar todas estas nuevas

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com caracter%sticas se han creado nuevas instrucciones y recursos. 'ara resumir vamos a comentar las distintas versiones de Javascript:
Actualizado: En el momento de actuali)ar este art%culo, podemos decir que no tenemos que preocuparnos mucho de las versiones de Javascript que puedan haber e$istido. 8ealmente cualquier navegador medianamente moderno tendr ahora todas las funcionalidades de Javascript que vayamos a necesitar y sobre todo, las que podamos utili)ar en nuestros primeros pasos con el lengua"e. *o obstante puede venir bien conocer las primeras versiones de Javascript que comentamos en este art%culo, a modo de curiosidad.
Javascript : naci con el *etscape 4.5 y soportaba gran cantidad de instrucciones y funciones, casi todas las que e$isten ahora ya se introdu"eron en el primer estandar. Javascript ! : Es la versin de Javascript que se dise- con la llegada de los navegadores 6.5. 2mplementaba poco ms que su anterior versin, como por e"emplo el tratamiento de imgenes dinmicamente y la creacin de arrays. Javascript !": #a versin de los navegadores E.5. Esta tiene como desventa"a que es un poco distinta en plataformas Microsoft y *etscape, ya que ambos navegadores crecieron de distinto modo y estaban en plena lucha por el mercado. Javascript !#: ,ersin que implementan los navegadores F.5. En esta versin se han limado algunas diferencias y aspere)as entre los dos navegadores. Javascript !$: ,ersin actual, en el momento de escribir estas l%neas, que implementa *etscape G. 'or su parte, %icrosoft tambi&n ha evolucionado hasta presentar su versin $!$ de J&cript <as% llaman al "avascript utili)ado por los navegadores de Microsoft=.
Es obvio que todav%a, despu&s de escribir estas l%neas, se presentarn o habrn presentado muchas otras versiones de Javascript, pues, a medida que se van me"orando los navegadores y van saliendo versiones de 01M#, surgen nuevas necesidades para programacin de elementos dinmicos. *o obstante, todo lo que vamos a aprender en este manual, incluso otros usos mucho ms avan)ados, ya est implementado en cualquier Javascript que e$istan en la actualidad. En el siguiente art%culo comen)aremos ya a mostrar peque-os cdigos Javascript que servirn para hacer efectos simples en pginas web.
Artculo por
1.,.- -#ectos r.pidos con Javascript

En este *ltimo artculo de introduccin a Javascript veremos algunos ejemplos de cdigos sencillos de gran utilidad. Antes de meternos de lleno en materia podemos ver una serie de efectos rpidos que se pueden programar con Javascript, lo que nos puede hacer una idea ms clara de las capacidades y potencia del lengua"e. A continuacin veremos varios e"emplos, que hemos destacado para esta introduccin en el Manual de Javascript, por tener un m%nimo de comple"idad y aunque sean muy bsicos, nos vendrn bien para tener una idea ms e$acta de lo que es Javascript a la hora de recorrer los siguientes cap%tulos.
1.,.1.- A rir una ventana secundaria

'rimero vamos a ver que con una l%nea de Javascript podemos hacer cosas bastante atractivas. 'or e"emplo podemos ver cmo abrir una ventana secundaria sin barras de men/s que muestre el buscador Aoogle. El cdigo ser%a el siguiente.
<script> window.open("http://www.google.com","","width=550,height=420,menub r=no"! </script>

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 'odemos ver el e"emplo en marcha aqu%.
1.,.2.- 'n mensa(e de ienvenida

'odemos mostrar una ca"a de te$to emergente al terminarse de cargar la portada de nuestro sitio web, que podr%a dar la bienvenida a los visitantes.
<script> window. lert(""ien#enido </script> mi sitio web. $r ci s..."!
'uedes ver el e"emplo en una pgina a parte.
1.,.$.- /echa actual

,eamos ahora un sencillo script para mostrar la fecha de hoy. A veces es muy interesante mostrarla en las webs para dar un efecto de que la pgina est al >al d%a>, es decir, est actuali)ada.
<script> document.write(new % te(!! </script>
Estas l%neas deber%an introducirse dentro del cuerpo de la pgina en el lugar donde queramos que apare)ca la fecha de /ltima actuali)acin. 'odemos ver el e"emplo en marcha aqu%.
Nota: Bn detalle a destacar es que la fecha aparece en un formato un poco raro, indicando tambi&n la hora y otros atributos de la misma, pero ya aprenderemos a obtener e$actamente lo que deseemos en el formato correcto.
1.,.&.- 0otn de volver

+tro e"emplo rpido se puede ver a continuacin. (e trata de un botn para volver hacia atrs, como el que tenemos en la barra de herramientas del navegador. Ahora veremos una l%nea de cdigo que me)cla 01M# y Javascript para crear este botn que muestra la pgina anterior en el historial, si es que la hubiera.
<input t&pe=button # lue='tr(s onclic)="histor&.go(*+!">
El botn ser%a parecido al siguiente. 'odemos pulsarlo para ver su funcionamiento <deber%a llevarnos a la pgina anterior=.
Atrs
.omo diferencia con los e"emplos anteriores, hay que destacar que en este caso la instruccin Javascript se encuentra dentro de un atributo de 01M#, onclic3, que indica que esa instruccin se tiene que e"ecutar como respuesta a la pulsacin del botn. (e ha podido comprobar la facilidad con la que se pueden reali)ar algunas acciones interesantes. .omo podr&is imaginar, e$istir%an muchas otras muestras sencillas de Javascript que nos reservamos para cap%tulos posteriores. (i lo deseas, puedes ver cmo hemos desarrollado algunos de estos efectos rpidos Javascript paso por paso y en v%deo. En el siguiente art%culo empe)aremos ya a hablar del propio lengua"e de programacin Javascript.
Artculo por

Parte 2:
Primeros pasos con el lenguaje Javascript

.omenzamos a aprender cosas (ue tienen (ue )er directamente con la programaci&n en el lengua+e -a)ascript $ la manera con la (ue se integra /ste en una p*gina web.
2.1.- -l lengua(e Javascript

Veamos cmo se escribe el cdigo en Javascript y para ello comentaremos las primeras reglas para insertar scripts en p%ginas &eb. En esta parte del manual sobre Javascript vamos a conocer la manera ms bsica de traba"ar con el lengua"e. En este art%culo daremos las primeras informaciones sobre cmo incluir scripts, me)clando el propio cdigo Javascript con el 01M#. #uego veremos tambi&n cmo se debe colocar cdigo para que nuestra web sea compatible con todos los navegadores, incluso aquellos que no soportan Javascript. Muchas ideas del funcionamiento de Javascript ya se han descrito en cap%tulos anteriores, pero con el ob"etivo de no de"arnos nada en el tintero vamos a tratar de acaparar a partir de aqu% todos los datos importantes de este lengua"e.
2.1.1.- Javascript se escri e en el documento 12M!

#o ms importante y bsico que podemos destacar en este momento es que la programacin de Javascript se reali)a dentro del propio documento 01M#. Es decir, el cdigo Javascript, en la mayor%a de los casos, se me)cla con el propio cdigo 01M# para generar la pgina. Esto quiere decir que debemos aprender a me)clar los dos lengua"es de programacin y rpidamente veremos que, para que estos dos lengua"es puedan convivir sin problemas entre ellos, se han de incluir unos delimitadores que separan las etiquetas 01M# de las instrucciones Javascript. Estos delimitadores son las etiquetas H(.82'1I y HJ(.82'1I. 1odo el cdigo Javascript que pongamos en la pgina ha de ser introducido entre estas dos etiquetas.
2.1.2.- !a colocacin de los scripts s3 4ue importa

En una misma pgina podemos introducir varios scripts, cada uno que podr%a introducirse dentro de unas etiquetas H(.82'1I distintas. #a colocacin de estos scripts no es indiferente. En un principio, con lo que sabemos hasta el momento y los scripts que hemos reali)ado de prueba, nos da un poco igual donde colocarlos, pero en determinados casos esta colocacin s% que ser muy importante. En cada caso, y llegado el momento, se informar de ello convenientemente. 1ambi&n se puede escribir Javascript dentro de determinados atributos de la pgina, como el atributo onclick. Estos atributos estn relacionados con las acciones del usuario y se llaman mane"adores de eventos. ,amos a ver en el siguiente cap%tulo com ms detenidamente estas dos maneras de escribir scripts, que tienen como diferencia principal el momento en que se e"ecutan las sentencias.


Artculo por
2.2.- Maneras de e(ecutar scripts Javascript

Existen dos maneras b%sicas de ejecutar scripts Javascript en una p%gina+ al cargar la p%gina o como respuesta a acciones del usuario. 0asta ahora en el Manual de Javascript ya hemos tenido la ocasin de probar algunos scripts sencillos, no obstante, todav%a tenemos que aprender una de las bases para poder traba"ar con el lengua"e y es aprender las dos maneras de e"ecutar cdigo Javascript. E$isten dos maneras fundamentales de ejecutar scripts en la pgina. #a primera de estas maneras se trata de e"ecucin directa de scripts, la segunda es una e"ecucin como respuesta a la accin de un usuario. E$plicaremos ahora cada una de estas formas de e"ecucin disponibles, pero para el que lo desee, recomendamos tambi&n ver el v%deo sobre Maneras de incluir y e"ecutar scripts.
2.2.1.- -(ecucin directa

Es el m&todo de e"ecutar scripts ms bsico. En este caso se incluyen las instrucciones dentro de la etiqueta H(.82'1I, tal como hemos comentado anteriormente. .uando el navegador lee la pgina y encuentra un script va interpretando las l%neas de cdigo y las va e"ecutando una despu&s de otra. #lamamos a esta manera e"ecucin directa pues cuando se lee la pgina se e"ecutan directamente los scripts. Este m&todo ser el que utilicemos preferentemente en la mayor%a de los e"emplos de esta parte del Manual de Javascript. En la segunda parte del Manual de Javascript podremos aprender muchas cosas y entre ellas veremos con detalle el segundo modo de e"ecucin de scripts que vamos a relatar a continuacin.
2.2.2.- 5espuesta a un evento

Es la otra manera de e"ecutar scripts, pero antes de verla debemos hablar sobre los eventos. #os eventos son acciones que reali)a el usuario. #os programas como Javascript estn preparados para atrapar determinadas acciones reali)adas, en este caso sobre la pgina, y reali)ar acciones como respuesta. e este modo se pueden reali)ar programas interactivos, ya que controlamos los movimientos del usuario y respondemos a ellos. E$isten muchos tipos de eventos distintos, por e"emplo la pulsacin de un botn, el movimiento del ratn o la seleccin de te$to de la pgina. #as acciones que queremos reali)ar como respuesta a un evento se han de indicar dentro del mismo cdigo 01M#, pero en este caso se indican en atributos 01M# que se colocan dentro de la etiqueta que queremos que responda a las acciones del usuario. En el cap%tulo donde vimos alg/n e"emplo rpido ya comprobamos que si quer%amos que un botn reali)ase acciones cuando se pulsase sobre el, deb%amos indicarlas dentro del atributo onclic3 del botn. .omprobamos pues que se puede introducir cdigo Javascript dentro de determinados atributos de las etiquetas 01M#. ,eremos ms adelante este tipo de e"ecucin en profundidad y los tipos de eventos que e$isten. 'ero para llegar a ello aun tenemos que aprender muchas otras cosas de Javascript. En el pr$imo art%culo mostraremos cmo podemos ocultar el cdigo Javascript para navegadores antiguos.
Artculo por
2.$.- 6cultar scripts Javascript en navegadores antiguos

,o todos los navegadores son compatibles con Javascript, as ue tenemos ue aprender cmo $acer ue los scripts no molesten en navegadores ue no los entienden.

10
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com A lo largo de los anteriores cap%tulos del Manual de Javascript ya hemos visto que el lengua"e se implement a partir de *etscape 4.5 e 2nternet E$plorer 6.5. 2ncluso, para los que no lo sepan, est bien decir que hay navegadores que funcionan en sistemas operativos, donde slo se puede visuali)ar te$to y donde determinadas tecnolog%as y aplicaciones no estn disponibles, como el uso de imgenes, fuentes tipogrficas distintas o el propio Javascript. As% pues, no todos los navegadores que puedan utili)ar los usuarios que visiten nuestra pgina comprenden Javascript. En los casos en los que no se interpretan los scripts, los navegadores asumen que el cdigo de &stos es te$to de la propia pgina y como consecuencia, presentan los scripts en el cuerpo del documento, como si de te$to normal se tratara. 'ara evitar que el te$to de los scripts se escriba en la pgina cuando los navegadores no los entienden se tienen que ocultar los con comentarios 01M# <HK@comentario 01M# @@I=. Adems, en este art%culo veremos tambi&n cmo mostrar un mensa"e que se vea slo en los navegadores que no son compatibles con Javascript.
Actualizado: En el momento actual podemos decir que casi el L55M de los navegadores disponibles soportan Javascript, o por lo menos reconocen las etiquetas de script, por lo que, aunque est& desactivado, no mostrarn el te$to de nuestros programas Javascript. 'or ello, actualmente ya no es fundamental reali)ar la operacin de ocultar el cdigo de los scripts de la pgina para navegadores antiguos. *o obstante, si queremos hacer una pgina totalmente correcta, convendr aprender cmo se puede ocultar un script para que en ning/n caso se muestre como te$to en la pgina.
2.$.1.- 6cultar el cdigo Javascript con comentarios 12M!

,eamos con un e"emplo de cdigo donde se han utili)ado comentarios 01M# para ocultar Javascript, o me"o dicho, el cdigo los scripts Javascript.
<,-./01> <2** -3digo 4 # script //**> </,-./01>
,emos que el inicio del comentario 01M# es id&ntico a cmo lo conocemos en el 01M#, pero el cierre del comentario presenta una particularidad, que empie)a por doble barra inclinada. Esto es debido a que el final del comentario contiene varios caracteres que Javascript reconoce como operadores y al tratar de anali)arlos lan)a un mensa"e de error de sinta$is. 'ara que Javascript no lance un mensa"e de error se coloca antes del comentario 01M# esa doble barra, que no es ms que un comentario Javascript, que conoceremos ms adelante cuando hablemos de sinta$is. El inicio del comentario 01M# no es necesario comentarlo con la doble barra, dado que Javascript entiende bien que simplemente se pretende ocultar el cdigo. Bna aclaracin a este punto: si pusi&semos las dos barras en esta l%nea, se ver%an en navegadores antiguos por estar fuera de los comentarios 01M#. #as etiquetas H(.82'1I no las entienden los navegadores antiguos, por lo tanto no las interpretan, tal como hacen con cualquier etiqueta que desconocen.
2.$.2.- Mostrar un mensa(e para navegadores antiguos con 7869)5I:2;

E$iste la posibilidad de indicar un te$to alternativo para los navegadores que no entienden Javascript, para informarles de que en ese lugar deber%a e"ecutarse un script y que la pgina no est funcionando al L55M de sus capacidades. 1ambi&n podemos sugerir a los visitantes que actualicen su navegador a una versin compatible con el lengua"e. 'ara ello utili)amos la etiqueta H*+(.82'1I y entre esta etiqueta y su correspondiente de cierre podemos colocar el te$to alternativo al script.
<,-./01> c3digo 5 # script </,-./01> <67,-./01> 8ste n #eg dor no comprende los scripts 9ue se est(n e5ecut ndo, debes n #eg dor un m(s reciente. <br><br> < hre;=http://netsc pe.com>6etsc pe</ >.<br> < hre;=http://microso;t.com><icroso;t</ >. </67,-./01>
ctu li: r tu #ersi3n de
En el siguiente art%culo veremos algunos otros detalles sobre colocar scripts Javascript que se han quedado en el tintero.

11

Artculo por
2.&.- M.s so re colocar scripts

-ltimas notas sobre cmo colocar scripts. .ndicar la versin utili#ada y utili#ar fic$eros externos. (eguimos ofreciendo cap%tulos del Manual de Javascript, con informacin /til para saber cmo utili)ar el lengua"e. As% que ahora veremos un par de notas adicionales sobre cmo colocar scripts en pginas web. En este art%culo mostraremos uno de los atributos que se pueden indicar en la etiqueta de (.82'1, que indica el lengua"e que vamos a utili)ar. 'ero sobre todo debemos prestar especial atencin al caso de incluir archivos e$ternos con Javascript, que sin duda es una manera de traba"ar, que utili)ar&is bastante a menudo.
2.&.1.- Indicar el lengua(e 4ue estamos utilizando

#a etiqueta H(.82'1I tiene un atributo que sirve para indicar el lengua"e que estamos utili)ando, as% como la versin de este. 'or e"emplo, podemos indicar que estamos programando en Javascript L.4 o ,isual Casic (cript, que es otro lengua"e para programar scripts en el navegador cliente que slo es compatible con 2nternet E$plorer. El atributo en cuestin es language y lo ms habitual es indicar simplemente el lengua"e con el que se han programado los scripts. El lengua"e por defecto es Javascript, por lo que si no utili)amos este atributo, el navegador entender que el lengua"e con el que se est programando es Javascript. Bn detalle donde se suele equivocar la gente sin darse cuenta es que lenguage se escribe con dos @g@ y no con @g@ y con @"@ como en castellano.
<,-./01 ='6$>'$8=5 # script>
2.&.2.- Incluir #icheros e<ternos de Javascript

+tra manera de incluir scripts en pginas web, implementada a partir de Javascript L.L, es incluir archivos e$ternos donde se pueden colocar muchas funciones que se utilicen en la pgina. #os ficheros suelen tener e$tendin ."s y se incluyen de esta manera.
<,-./01 l ngu ge=5 # script src=" rchi#o?e@terno.5s"> //esto& inclu&endo el ;ichero " rchi#o?e@terno.5s" </,-./01>
entro de las etiquetas H(.82'1I se puede escribir cualquier te$to y ser ignorado por el navegador, sin embargo, los navegadores que no entienden el atributo (8. tendrn a este te$to por instrucciones, por lo que es aconse"able poner un comentario Javascript antes de cada l%nea con el ob"etivo de que no respondan con un error. El archivo que incluimos <en este caso archivoNe$terno."s= debe contener tan solo sentencias Javascript. *o debemos incluir cdigo 01M# de ning/n tipo, ni tan siquiera las etiquetas HJ(.82'1I y HJ(.82'1I. ,istos estos otros usos interesantes que e$isten en Javascript y que debemos conocer para poder aprovechar las posibilidades de la tecnolog%a, debemos haber aprendido todo lo esencial para empe)ar a hacer cosas ms importantes. As% que en el pr$imo art%culo empe)aremos a repasar la sinta$is del lengua"e Javascript.
Artculo por
2.*.- 9inta<is Javascript

Empe#amos a contar la sintaxis del lenguaje Javascript, indicando sus principales caractersticas.

12
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 'or fin empe)amos a ver cdigo fuente de JavascriptK Esperamos que se hayan asimilado todas las informaciones previas del Manual de Javascript, en las que hemos aprendido bsicamente diversos modos de incluir scripts en pginas web. 0asta ahora todo lo que hemos visto en este manual puede haber parecido muy terico, pero de aqu% en adelante esperamos que os pare)ca ms ameno por empe)ar a ver cosas ms prcticas y relacionadas directamente con la programacin. El lengua"e Javascript tiene una sinta'is mu( parecida a la de Java por estar basado en &l. 1ambi&n es muy parecida a la del lengua"e ., de modo que si el lector conoce alguno de estos dos lengua"es se podr mane"ar con facilidad con el cdigo. e todos modos, en los siguientes cap%tulos vamos a describir toda la sinta$is con detenimiento, por lo que los novatos no tendrn ning/n problema con ella.
2.*.1.- )omentarios en el cdigo

Bn comentario es una parte de cdigo que no es interpretada por el navegador y cuya utilidad radica en facilitar la lectura al programador. El programador, a medida que desarrolla el script, va de"ando frases o palabras sueltas, llamadas comentarios, que le ayudan a &l o a cualquier otro a leer mas fcilmente el script a la hora de modificarlo o depurarlo. ?a se vio anteriormente alg/n comentario Javascript, pero ahora vamos a contarlos de nuevo. E$isten dos tipos de comentarios en el lengua"e. Bno de ellos, la doble barra, sirve para comentar una l%nea de cdigo. El otro comentario lo podemos utili)ar para comentar varias l%neas y se indica con los signos JO para empe)ar el comentario y OJ para terminarlo. ,eamos unos e"emplos.
<,-./01> //8ste es un coment rio de un lAne /B8ste coment rio se puede e@tender por # ri s lAne s. = s 9ue 9uier sB/ </,-./01>
2.*.2.- Ma%=sculas % min=sculas

En Javascript se )an de respetar las ma(*sculas ( las min*sculas . (i nos equivocamos al utili)arlas el navegador responder con un mensa"e de error, ya sea de sinta$is o de referencia indefinida. 'or poner un e"emplo, no es lo mismo la funcin alert<= que la funcin Alert<=. #a primera muestra un te$to en una ca"a de dilogo y la segunda <con la primera A may/scula= simplemente no e$iste, a no ser que la definamos nosotros. .omo se puede comprobar, para que la funcin la recono)ca Javascript, se tiene que escribir toda en min/scula. +tro claro e"emplo lo veremos cuando tratemos con variables, puesto que los nombres que damos a las variables tambi&n son sensibles a las may/sculas y min/sculas. 'or regla general, los nombres de las cosas en Javascript se escriben siempre en min/sculas, salvo que se utilice un nombre con ms de una palabra, pues en ese caso se escribirn con may/sculas las iniciales de las palabras siguientes a la primera. 'or e"emplo document.bg.olor <que es un lugar donde se guarda el color de fondo de la pgina web=, se escribe con la >.> de color en may/scula, por ser la primera letra de la segunda palabra. 1ambi&n se puede utili)ar may/sculas en las iniciales de las primeras palabras en algunos casos, como los nombres de las clases, aunque ya veremos ms adelante cules son estos casos y qu& son las clases.
2.*.$.- 9eparacin de instrucciones

#as distintas instrucciones que contienen nuestros scripts se han de separar convenientemente para que el navegador no indique los correspondientes errores de sinta$is. Javascript tiene dos maneras de separar instrucciones. #a primera es a trav&s del carcter punto y coma <P= y la segunda es a trav&s de un salto de l%nea. 'or esta ra)n #as sentencias Javascript no necesitan acabar en punto y coma a no ser que coloquemos dos instrucciones en la misma l%nea. *o es una mala idea, de todos modos, acostumbrarse a utili)ar el punto y coma despu&s de cada instruccin pues otros lengua"es como Java o . obligan a utili)arlas y nos estaremos acostumbrando a reali)ar una sinta$is ms parecida a la habitual en entornos de programacin avan)ados.

13
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com En el pr$imo art%culo comen)aremos a hablaros sobre la creacin de variables en Javascript.
Artculo por
Parte 3:
ra!ajo con varia!les " tipos de datos en Javascript

0na de las cosas m*s undamentales en cual(uier lengua+e de programaci&n son las )ariables $ los tipos de datos. 1eremos (u/ son $ c&mo se traba+a con ellos en -a)ascript.
$.1.- +aria les en Javascript

Vemos en t!rminos generales u! es una variable, para u! sirve y cmo declarar variables en Javascript antes de usarlas. Este es el primero de los art%culos que vamos a dedicar a las variables en el Manual de Javascript. ,eremos, si no lo sabemos ya, que las variables son uno de los elementos fundamentales a la hora de reali)ar los programas, en Javascript y en la mayor%a de los lengua"es de programacin e$istentes. As% pues, en este art%culo veremos cul es el concepto de variable y aprenderemos a declararlas en Javascript.
$.1.1.- )oncepto de varia le

+na variable es un espacio en memoria donde se almacena un dato , un espacio donde podemos guardar cualquier tipo de informacin que necesitemos para reali)ar las acciones de nuestros programas. 'or e"emplo, si nuestro programa reali)a sumas, ser muy normal que guardemos en variables los distintos sumandos que participan en la operacin y el resultado de la suma. El efecto ser%a algo parecido a esto.
sum ndo+ = 2C sum ndo2 = CC sum = sum ndo+ D sum ndo2
En este e"emplo tenemos tres variables, sumandoL, sumando4 y suma, donde guardamos el resultado. ,emos que su uso para nosotros es como si tuvi&semos un apartado donde guardar un dato y que se pueden acceder a ellos con slo poner su nombre.

14
#os nombres de las variables han de construirse con caracteres alfanum&ricos y el carcter subrayado <N=. Aparte de esta, hay una serie de reglas adicionales para construir nombres para variables. #a ms importante es que tienen que comen)ar por un carcter alfab&tico o el subrayado. *o podemos utili)ar caracteres raros como el signo D, un espacio o un Q. *ombres admitidos para las variables podr%an ser Edad pais e*acimiento Nnombre 1ambi&n hay que evitar utili)ar nombres reservados como variables, por e"emplo no podremos llamar a nuestra variable palabras como return o for, que ya veremos que son utili)adas para estructuras del propio lengua"e. ,eamos ahora algunos nombres de variables que no est permitido utili)ar L4meses tu nombre return peMpe
$.1.2.- "eclaracin de varia les en Javascript

eclarar variables consiste en definir y de paso informar al sistema de que vas a utili)ar una variable. Es una costumbre habitual en los lengua"es de programacin el definir las variables que se van a usar en los programas y para ello, se siguen unas reglas estrictas. 'ero Javascript se salta muchas reglas por ser un lengua"e un tanto libre a la hora de programar y uno de los casos en los que otorga un poco de libertad es a la hora de declarar las variables, ya que no estamos obligados a hacerlo, al contrario de lo que pasa en la mayor%a de los lengua"es de programacin. Javascript cuenta con la palabra >var> que utili)aremos cuando queramos declarar una o varias variables. .omo es lgico, se utili)a esa palabra para definir la variable antes de utili)arla.
Nota: Aunque Javascript no nos obligue a declarar e$pl%citamente las variables, es aconse"able declararlas antes de utili)arlas y veremos en adelante que se trata tambi&n de una buena costumbre. Adems, en sucesivos art%culos veremos que en algunos casos especiales, no producir e$actamente los mismos resultados un script en el que hemos declarado una variable y otro en el que no lo hagamos. # r oper ndo+ # r oper ndo2
1ambi&n se puede asignar un valor a la variable cuando se est declarando

# r oper ndo+ = 2C # r oper ndo2 = CC
1ambi&n se permite declarar varias variables en la misma l%nea, siempre que se separen por comas.
# r oper ndo+,oper ndo2
(i lo deseas, puedes ver un e"emplo de pgina que declara variables Javascript. En el siguiente art%culo seguiremos aprendiendo cosas de variables y veremos uno de los conceptos ms importantes que deberemos aprender sobre ellas, el mbito de las variables.
Artculo por
$.2.- Am ito de las varia les en Javascript

El %mbito de las variables en Javascript+ u! son las variables locales y globales y cmo se trabaja con

15
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ellas en Javascript. El mbito de las variables es uno de los conceptos ms importantes que deberemos conocer cuando traba"amos con variables, no slo en Javascript, sino en la mayor%a de los lengua"es de programacin. En el art%culo anterior ya comen)amos a e$plicar qu& son las variables y cmo declararlas. En este art%culo del Manual de Javascript pretendemos e$plicar con detenimiento qu& es este mbito de las variables y ofrecer e"emplos para que se pueda entender bien.
$.2.1.- )oncepto de .m ito de varia les

&e le llama ,mbito de las variables al lu-ar donde estas est,n disponibles. 'or lo general, cuando declaramos una variable hacemos que est& disponible en el lugar donde se ha declarado, esto ocurre en todos los lengua"es de programacin y como Javascript se define dentro de una pgina web, las variables que declaremos en la p,-ina estar,n accesibles dentro de ella. En Javascript no podremos acceder a variables que hayan sido definidas en otra pgina. 'or tanto, la propia pgina donde se define es el mbito ms habitual de una variable y le llamaremos a este tipo de variables -lobales a la pgina. ,eremos tambi&n se pueden hacer variables con mbitos distintos del global, es decir, variables que declararemos y tendrn valide) en lugares ms acotados.
$.2.2.- +aria les glo ales

.omo hemos dicho, las variables globales son las que estn declaradas en el mbito ms amplio posible, que en Javascript es una pgina web. 'ara declarar una variable global a la pgina simplemente lo haremos en un script, con la palabra var.
<,-./01> # r # ri ble$lob l </,-./01>
#as 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 mane"adores de eventos, como el onclic3, que ya vimos que se pod%a incluir dentro de determinadas etiquetas 01M#.
$.2.$.- +aria les locales

1ambi&n podremos declarar variables en lugares ms acotados, como por e"emplo una funcin. A estas variables les llamaremos locales. .uando se declaren variables locales slo podremos acceder a ellas dentro del lugar donde se ha declarado, es decir, si la hab%amos declarado en una funcin solo podremos acceder a ella cuando estemos en esa funcin. #as variables pueden ser locales a una funcin, pero tambi&n pueden ser locales a otros mbitos, como por e"emplo un bucle. En general, son mbitos locales cualquier lugar acotado por llaves.
<,-./01> ;unction miEuncion (!F # r # ri ble=oc l G </,-./01>
En el script anterior hemos declarado una variable dentro de una funcin, por lo que esa variable slo tendr valide) dentro de la funcin. (e pueden ver cmo se utili)an las llaves para acotar el lugar donde est definida esa funcin o su mbito. *o 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, e$cepto en el mbito donde est declarada la variable local ya que en este sitio ese nombre de variable est ocupado por la local y es ella quien tiene valide). En resumen, la variable que tendr valide) en cualquier sitio de la pgina es la global. Menos en el mbito donde est declarada la variable local, que ser ella quien tenga valide).

16

<,-./01> # r numero = 2 ;unction miEuncion (!F # r numero = +H document.write(numero! //imprime +H G document.write(numero! //imprime 2 </,-./01>
Bn conse"o para los principiantes podr%a ser no declarar variables con los mismos nombres, para que nunca haya lugar a confusin sobre qu& variable es la que tiene valide) en cada momento.
$.2.&.- "i#erencias entre declarar varia les con var> o no declararlas

.omo hemos dicho, en Javascript tenemos libertad para declarar o no las variables con la palabra var, pero los efectos que conseguiremos en cada caso sern distintos. En concreto, cuando utili)amos var estamos haciendo que la varible que estamos declarando sea local al mbito donde se declara. 'or otro lado, si no utili)amos la palabra var para declarar una variable, &sta ser global a toda la pgina, sea cual sea el mbito en el que haya sido declarada. En el caso de una variable declarada en la pgina web, fuera de una funcin o cualquier otro mbito ms reducido, nos es indiferente si se declara o no con var, desde un punto de vista funcional. Esto es debido a que cualquier variable declarada fuera de un mbito es global a toda la pgina. #a diferencia se puede apreciar en una funcin por e"emplo, ya que si utili)amos var la variable ser local a la funcin y si no lo utili)amos, la variable ser global a la pgina. Esta diferencia es fundamental a la hora de controlar correctamente el uso de las variables en la pgina, ya que si no lo hacemos en una funcin podr%amos sobreescribir el valor de una variable, perdiendo el dato que pudiera contener previamente.
<,-./01> # r numero = 2 ;unction miEuncion (!F numero = +H document.write(numero! //imprime +H G document.write(numero! //imprime 2 //ll m mos l ;unci3n miEuncion(! document.write(numero! //imprime +H </,-./01>
En este e"emplo, tenemos una variable global a la pgina llamada numero, que contiene un 4. 1ambi&n tenemos una funcin que utili)a la variable numero sin haberla declarado con var, por lo que la variable numero de la funcion ser la misma variable global numero declarada fuera de la funcin. En una situacin como esta, al e"ecutar la funcin se sobreescribir la variable numero y el dato que hab%a antes de e"ecutar la funcin se perder. En el pr$imo art%culo continuaremos hablando de variables y mostraremos que en ellas se pueden guardar distintos tipos de informacin.
Artculo por
$.$.- Qu podemos guardar en varia les

Vemos el concepto de tipos de datos para el lenguaje Javascript y por u! es importante manejarlos bien. En el Manual de Javascript ya hemos hablado sobre las variables en varios art%culos. 'ero todav%a nos quedan cosas por ver y en concreto mostraremos en este art%culo que en una variable podemos guardar distintos tipos de datos. En una variable podemos introducir varios tipos de informacin. 'or e"emplo podr%amos introducir simple te$to, n/meros enteros o reales, etc. A estas distintas clases de informacin se les conoce como tipos de datos. .ada uno tiene caracter%sticas

17
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com y usos distintos. ,eamos cules son los tipos de datos ms habituales de Javascript. N*meros 'ara empe)ar tenemos el tipo num&rico, para guardar n/meros como R o 46.G Cadenas El tipo cadena de carcter guarda un te$to. (iempre que escribamos una cadena de caracteres debemos utili)ar las comillas <>=. .oleanos 1ambi&n contamos con el tipo boleano, que guarda una informacin que puede valer si <true= o no <false=. 'or /ltimo ser%a relevante se-alar aqu% que nuestras variables pueden contener cosas ms complicadas, como podr%a ser un ob"eto, una funcin, o vac%o <null= pero ya lo veremos ms adelante. En realidad nuestras variables no estn for)adas a guardar un tipo de datos en concreto y por lo tanto no especificamos ning/n tipo de datos para una variable cuando la estamos declarando. 'odemos introducir cualquier informacin en una variable de cualquier tipo, incluso podemos ir cambiando el contenido de una variable de un tipo a otro sin ning/n problema. ,amos a ver esto con un e"emplo.
# r nombre?ciud d = "I lenci " # r re#is do = true nombre?ciud d = C2 re#is do = "no"
Esta ligere)a a la hora de asignar tipos a las variables puede ser una venta"a en un principio, sobretodo para personas ine$pertas, pero a la larga puede ser fuente de errores ya que dependiendo del tipo que son las variables se comportarn de un modo u otro y si no controlamos con e$actitud el tipo de las variables podemos encontrarnos sumando un te$to a un n/mero. Javascript operar perfectamente, y devolver un dato, pero en algunos casos puede que no sea lo que estbamos esperando. As% pues, aunque tenemos libertad con los tipos, esta misma libertad nos hace estar ms atentos a posibles desa"ustes dif%ciles de detectar a lo largo de los programas. ,eamos lo que ocurrir%a en caso de sumar letras y n/meros. var suma S sumandoL D sumando4 document.write<suma= Este script nos mostrar%a en la pgina el te$to 4666, que no se corresponde con la suma de los dos n/meros, sino con su concatenacin, uno detrs del otro. ,eremos algunas cosas ms referentes a los tipos de datos en el pr$imo art%culo.
Artculo por
$.&.- 2ipos de datos en Javascript

Vemos los tres tipos de datos ue soporta Javascript+ numerico, boleano y texto. En el art%culo anterior del Manual de Javascript ya empe)amos a mostrar que en una variable podemos almacenar distintos tipos de informacin. *o obstante, todav%a hay algunas cosas que queremos e$plicar sobre los distintos tipos de datos disponibles en Javascript. En nuestros scripts vamos a mane"ar variables diversas clases de informacin, como te$tos o n/meros. .ada una de estas clases de informacin son los tipos de datos. Javascipt distingue entre tres tipos de datos y todas las informaciones que se

18
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com puedan guardar en variables van a estar enca"adas en uno de estos tipos de datos. ,eamos detenidamente cules son estos tres tipos de datos.
$.&.1.- 2ipo de datos numrico

En este lengua"e slo e$iste un tipo de datos num&rico, al contrario que ocurre en la mayor%a de los lengua"es ms conocidos. 1odos los n/meros son por tanto del tipo num&rico, independientemente de la precisin que tengan o si son n/meros reales o enteros. #os n/meros enteros son n/meros que no tienen coma, como 6 o 66R. #os n/meros reales son n/meros fraccionarios, como 4.GR o 5.4F, que tambi&n se pueden escribir en notacin cient%fica, por e"emplo 4.ET4eL4. .on Javascript tambi&n podemos escribir n/meros en otras bases, como la he$adecimal. #as bases son sistemas de numeracin que utili)an ms o menos d%gitos para escribir los n/meros. E$isten tres bases con las que podemos traba"ar Case L5, es el sistema que utili)amos habitualmente, el sistema decimal. .ualquier n/mero, por defecto, se entiende que est escrito en base L5. Case T, tambi&n llamado sistema octal, que utili)a d%gitos del 5 al U. 'ara escribir un n/mero en octal basta con escribir ese n/mero precedido de un 5, por e"emplo 5EF. Case LG o sistema he$adecimal, es el sistema de numeracin que utili)a LG d%gitos, los comprendidos entre el 5 y el R y las letras de la A a la 7, para los d%gitos que faltan. 'ara escribir un n/mero en he$adecimal debemos escribirlo precedido de un cero y una equis, por e"emplo 5$6E7.
$.&.2.- 2ipo oleano

El tipo bolean, boolean en ingl&s, sirve para guardar un si o un no o dicho de otro modo, un verdadero o un falso. (e utili)a para reali)ar operaciones lgicas, generalmente para reali)ar acciones si el contenido de una variable es verdadero o falso. (i una variable es verdadero entonces E"ecuto unas instrucciones (i no E"ecuto otras
#os dos valores que pueden tener las variables boleanas son true o false. mi1e$to S >'epe se va a pescar> mi1e$to S V46MMQ #etras W O@@OV 1odo lo que se coloca entre comillas, como en los e"emplos anteriores es tratado como una cadena de caracteres independientemente de lo que coloquemos en el interior de las comillas. 'or e"emplo, en una variable de te$to podemos guardar n/meros y en ese caso tenemos que tener en cuenta que las variables de tipo te$to y las num&ricas no son la misma cosa y mientras que las de num&ricas nos sirven para hacer clculos matemticos las de te$to no.
$.&.&.- )aracteres de escape en cadenas de te<to

0ay una serie de caracteres especiales que sirven para e$presar en una cadena de te$to determinados controles como puede ser un salto de l%nea o un tabulador. Estos son los caracteres de escape y se escriben con una notacin especial que comien)a por una contra barra <una barra inclinada al rev&s de la normal VV= y luego se coloca el cdigo del carcter a mostrar. Bn carcter muy com/n es el salto de l%nea, que se consigue escribiendo n. +tro carcter muy habitual es colocar unas comillas, pues si colocamos unas comillas sin su carcter especial nos cerrar%an las comillas que colocamos para iniciar la cadena de caracteres. #as comillas las tenemos que introducir entonces con > o V <comillas dobles o simples=. E$isten otros caracteres de escape, que veremos en la tabla de aba"o ms resumidos, aunque tambi&n hay que destacar como carcter habitual el que se utili)a para escribir una contrabarra, para no confundirla con el inicio de un carcter de escape, que es la doble contrabarra . 1abla con todos los caracteres de escape (alto de l%nea: Xn .omilla simple: XV

19
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com .omilla doble: X> 1abulador: Xt 8etorno de carro: Xr Avance de pgina: Xf 8etroceder espacio: Xb .ontrabarra: XX Algunos de estos caracteres probablemente no los llegars a utili)ar nunca, pues su funcin es un poco rara y a veces poco clara. .on esto ya hemos terminado de e$plicar todo lo que se debe conocer sobre las variables en Javascript y podemos comen)ar con un tema nuevo que ser el de operadores.
Artculo por
Parte #:
$peradores en Javascript
2ratamos en di)ersos artculos los operadores. 3 receremos e4plicaciones de todos los operadores (ue podremos encontrarnos en -a)ascript.
&.1.- 6peradores Javascript I

Estudiamos lo ue es un operador y para u! sirve. Vemos los operadores aritm!ticos y de asignacin. En el presente art%culo del Manual de Javascript vamos a comen)ar una serie de te$tos enfocados en e$plicar los diferentes operadores disponibles en este lengua"e de programacin. Al desarrollar programas en cualquier lengua"e se utili)an los operadores, que sirven para hacer los clculos y operaciones necesarios para llevar a cabo tus ob"etivos. 0asta el menor de los programas imaginables necesita de los operadores para reali)ar cosas, ya que un programa que no reali)ase operaciones, slo se limitar%a a hacer siempre lo mismo. Es el resultado de las operaciones lo que hace que un programa var%e su comportamiento seg/n los datos que tenga para traba"ar y nos ofre)ca resultados que sean relevantes para el usuario que lo utilice. E$isten operaciones ms sencillas o comple"as, que se pueden reali)ar con operandos de distintos tipos, como n/meros o te$tos, veremos en este cap%tulo, y los siguientes, de manera detallada todos estos operadores disponibles en Javascript.
&.1.1.- -(emplos de uso de operadores

Antes de entrar a enumerar los distintos tipos de operadores vamos a ver un par de e"emplos de &stos para que nos ayuden a hacernos una idea ms e$acta de lo que son. En el primer e"emplo vamos a reali)ar una suma utili)ando el operador suma.

20
6DF Esta es una e$presin muy bsica que no tiene mucho sentido ella sola. 0ace la suma entre los dos operandos n/mero 6 y F, pero no sirve de mucho porque no se hace nada con el resultado. *ormalmente se combinan ms de un operador para crear e$presiones ms /tiles. #a e$presin siguiente es una combinacin entre dos operadores, uno reali)a una operacin matemtica y el otro sirve para guardar el resultado.
miI ri ble = 2C B 5
En el e"emplo anterior, el operador O se utili)a para reali)ar una multiplicacin y el operador S se utili)a para asignar el resultado en una variable, de modo que guardemos el valor para su posterior uso. #os operadores se pueden clasificar seg/n el tipo de acciones que reali)an. A continuacin vamos a ver cada uno de estos grupos de operadores y describiremos la funcin de cada uno.
&.1.2.- 6peradores aritmticos

(on los utili)ados para la reali)acin de operaciones matemticas simples como la suma, resta o multiplicacin. En "avascript son los siguientes: D (uma de dos valores @ 8esta de dos valores, tambi&n puede utili)arse para cambiar el signo de un n/mero si lo utili)amos con un solo operando @46 O Multiplicacin de dos valores J ivisin de dos valores M El resto de la divisin de dos n/meros <6M4 devolver%a L, el resto de dividir 6 entre 4= DD 2ncremento en una unidad, se utili)a con un solo operando @@ ecremento en una unidad, utili)ado con un solo operando Ejemplos
precio = +2J //introdu:co un +2J en l # ri ble precio unid des = +0 //otr sign ci3n, luego #eremos oper dores de sign ci3n ; ctur = precio B unid des //multiplico precio por unid des, obtengo el # lor ; ctur resto = ; ctur K C //obtengo el resto de di#idir l # ri ble ; ctur por C precioDD //increment en un unid d el precio ( hor # le +2H!
&.1.$.- 6peradores de asignacin

(irven para asignar valores a las variables, ya hemos utili)ado en e"emplos anteriores el operador de asignacin S, pero hay otros operadores de este tipo, que provienen del lengua"e . y que muchos de los lectores ya conocern. S Asignacin. Asigna la parte de la derecha del igual a la parte de la i)quierda. A al derecha se colocan los valores finales y a la i)quierda generalmente se coloca una variable donde queremos guardar el dato. DS Asignacin con suma. 8eali)a la suma de la parte de la derecha con la de la i)quierda y guarda el resultado en la parte de la i)quierda. @S Asignacin con resta OS Asignacin de la multiplicacin JS Asignacin de la divisin MS (e obtiene el resto y se asigna Ejemplos
horros = L000 // sign un L000 l # ri ble horros horros D= C500 //increment en C500 l # ri ble horros, hor horros /= 2 //di#ide entre 2 mis horros, hor 9ued n 5250 # le +0500
En el siguiente art%culo seguiremos conociendo otros de los operadores de Javascript: +peradores de cadenas, operadores lgicos y operadores condicionales.

21
Artculo por
&.2.- 6peradores Javascript II

Estudiamos los operadores de cadenas, lgicos y condicionales. Este es el segundo art%culo sobre los operadores que publicamos en el Manual de Javascript, pues son suficientes como para verlos por partes. En la anterior entrega ofrecimos una breve descripcin del concepto de operador y vimos los operadores aritm&ticos y de asignacin. En el presente te$to veremos un listado y descripcin de tres tipos adicionales: operadores de cadenas, operadores lgicos y operadores condicionales.
&.2.1.- 6peradores de cadenas

#as cadenas de caracteres, o variables de te$to, tambi&n tienen sus propios operadores para reali)ar acciones t%picas sobre cadenas. Aunque "avascript slo tiene un operador para cadenas se pueden reali)ar otras acciones con una serie de funciones predefinidas en el lengua"e que veremos ms adelante. D .oncatena dos cadenas, pega la segunda cadena a continuacin de la primera. Ejemplo
c den + = "hol " c den 2 = "mundo" c den -onc ten d = c den + D c den 2 //c den conc ten d # le "hol mundo"
Bn detalle importante que se puede ver en este caso es que el operador D sirve para dos usos distintos, si sus operandos son n/meros los suma, pero si se trata de cadenas las concatena. Esto pasa en general con todos los operadores que se repiten en el lengua"e, "avascript es suficientemente listo para entender que tipo de operacin reali)ar mediante una comprobacin de los tipos que estn implicados en &lla. Bn caso que resultar%a confuso es el uso del operador D cuando se reali)a la operacin con operadores te$to y num&ricos entreme)clados. En este caso "avascript asume que se desea reali)ar una concatenacin y trata a los dos operandos como si de cadenas de caracteres se trataran, incluso si la cadena de te$to que tenemos fuese un n/mero. Esto lo veremos ms fcilmente con el siguiente e"emplo.
mi6umero = 2C mi- den + = "pepe" mi- den 2 = "45M" result do+ = mi6umero D mi- den + //result do+ # le "2Cpepe" result do2 = mi6umero D mi- den 2 //result do2 # le "2C45M" mi- den 2 D= mi6umero //mi- den 2 hor # le "45M2C"
.omo hemos podido ver, tambi&n en el caso del operador DS, si estamos tratando con cadenas de te$to y n/meros entreme)clados, tratar a los dos operadores como si fuesen cadenas.
Nota: .omo se puede haber imaginado, faltan muchas operaciones t%picas a reali)ar con cadenas, para las cuales no e$isten operadores. Es porque esas funcionalidades se obtienen a trav&s de la clase (tring de Javascript, que veremos ms adelante.
&.2.2.- 6peradores lgicos

Estos operadores sirven para reali)ar operaciones lgicas, que son aquellas que dan como resultado un verdadero o un falso, y se utili)an para tomar decisiones en nuestros scripts. En ve) de traba"ar con n/meros, para reali)ar este tipo de operaciones se utili)an operandos boleanos, que conocimos anteriormente, que son el verdadero <true= y el falso <false=. #os operadores

22
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com lgicos relacionan los operandos boleanos para dar como resultado otro operando boleano, tal como podemos ver en el siguiente e"emplo. (i tengo hambre y tengo comida entonces me pongo a comer *uestro programa Javascript utili)ar%a en este e"emplo un operando boleano para tomar una decisin. 'rimero mirar si tengo hambre, si es cierto <true= mirar si dispongo de comida. (i son los dos ciertos, se puede poner a comer. En caso de que no tenga comida o que no tenga hambre no comer%a, al igual que si no tengo hambre ni comida. El operando en cuestin es el operando ?, que valdr verdadero <true= en caso de que los dos operandos valgan verdadero.
Nota: 'ara no llevarnos a enga-o, cabe decir que los operadores lgicos pueden utili)arse en combinacin con tipos de datos distintos de los boleanos, pero en este caso debemos utili)arlos en e$presiones que los conviertan en boleanos. En el siguiente grupo de operadores que vamos a tratar en este art%culo hablaremos sobre los operadores condicionales, que se pueden utili)ar "unto con los operadores lgicos para reali)ar sentencias todo lo comple"as que necesitemos. 'or e"emplo: i; (@==2 NN &2=C!F //l # ri ble @ # le 2 & l G
# ri ble & es distint
de tres
En la e$presin condicional anterior estamos evaluando dos comprobaciones que se relacionan con un operador lgico. 'or una parte $SS4 devolver un true en caso que la variable $ valga 4 y por otra, yKS6 devolver un true cuando la variable y tenga un valor distinto de 6. Ambas comprobaciones devuelven un boleano cada una, que luego se le aplica el operador lgico WW para comprobar si ambas comprobaciones se cumplieron al mismo tiempo. (obra decir que, para ver e"emplos de operadores condicionales, necesitamos aprender estructuras de control como if, a las que no hemos llegado todav%a.
K +perador *+ o negacin. (i era true pasa a false y viceversa. WW +perador ?, si son los dos verdaderos vale verdadero. YY +perador +, vale verdadero si por lo menos uno de ellos es verdadero. Ejemplo
mi"ole no = true mi"ole no = 2mi"ole no //mi"ole no hor tengoO mbre = true tengo-omid = true como-omid = tengoO mbre NN tengo-omid # le ; lse
&.2.$.- 6peradores condicionales

(irven para reali)ar e$presiones condicionales todo lo comple"as que deseemos. Estas e$presiones se utili)an para tomar decisiones en funcin de la comparacin de varios elementos, por e"emplo si un numero es mayor que otro o si son iguales.
Nota: 'or supuesto, los operadores condicionales sirven tambi&n para reali)ar e$presiones en las que se comparan otros tipos de datos. *ada impide comparar dos cadenas, para ver si son iguales o distintas, por e"emplo. 2ncluso podr%amos comparar boleanos.
#os operadores condicionales se utili)an en las e$presiones condicionales para tomas de decisiones. .omo estas e$presiones condicionales sern ob"eto de estudio ms adelante ser me"or describir los operadores condicionales ms adelante. e todos modos aqu% podemos ver la tabla de operadores condicionales. SS .omprueba si dos n/meros son iguales KS .omprueba si dos n/meros son distintos I Mayor que, devuelve true si el primer operador es mayor que el segundo H Menor que, es true cuando el elemento de la i)quierda es menor que el de la derecha IS Mayor igual. HS Menor igual ,eremos e"emplos de operadores condicionales cuando e$pliquemos estructuras de control, como la condicional if.

23
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com En el siguiente art%culo finali)aremos el tema de operadores, e$plicando los operadores a nivel de bit y la precedencia de operadores.
Artculo por
&.$.- 6peradores Javascript III

Vemos el *ltimo tipo de operador, a nivel de bit, y la precedencia de operadores / ue operadores se ejecutan antes o despu!s0. .ontinuamos con el tema de operadores, que ya hab%amos iniciado en cap%tulos anteriores de este manual de Javascript. En estos momentos ya hemos visto casi todos los tipos de operadores y slo nos queda conocer un grupo que realmente no se utili)a casi nunca, que son los operadores de nivel de bit. e manera adicional, en este te$to veremos un asunto de bastante importancia en la programacin en general, que es la precedencia de operadores, que debemos tener en cuenta siempre que utilicemos diversos operadores en una misma e$presin, para que se relacionen entre ellos y se resuelvan de la manera hab%amos planeado.
&.$.1.- 6peradores a nivel de it

Estos son muy poco corrientes y es posible que nunca los llegues a utili)ar. (u uso se reali)a para efectuar operaciones con ceros y unos. 1odo lo que mane"a un ordenador son ceros y unos, aunque nosotros utilicemos n/meros y letras para nuestras variables en realidad estos valores estn escritos internamente en forma de ceros y unos. En algunos caso podremos necesitar reali)ar operaciones tratando las variables como ceros y unos y para ello utili)aremos estos operandos. En este manual se nos queda un poco grande reali)ar una discusin sobre este tipo de operadores, pero aqu% podr&is ver estos operadores por si alg/n d%a os hacen falta. W ? de bits Z [or de bits Y + de bits HH II III IIIS IIS HHS ,arias clases de cambios
&.$.2.- :recedencia de los operadores

#a evaluacin de una sentencia de las que hemos visto en los e"emplos anteriores es bastante sencilla y fcil de interpretar, pero cuando en una sentencia entran en "uego multitud de operadores distintos puede haber una confusin a la hora de interpretarla y dilucidar qu& operadores son los que se e"ecutan antes que otros. 'ara marcar unas pautas en la evaluacin de las sentencias y que estas se e"ecuten siempre igual y con sentido com/n e$iste la precedencia de operadores, que no es ms que el orden por el que se irn e"ecutando las operaciones que ellos representan. En un principio todos los operadores se eval/an de i)quierda a derecha, pero e$isten unas normas adicionales, por las que determinados operadores se eval/an antes que otros. Muchas de estas reglas de precedencia estn sacadas de las matemticas y son comunes a otros lengua"es, las podemos ver a continuacin. <= \] . 'ar&ntesis, corchetes y el operador punto que sirve para los ob"etos K @ DD @@ negacin, negativo e incrementos O J M Multiplicacin divisin y mdulo D@ (uma y resta HH II III .ambios a nivel de bit H HS I IS +peradores condicionales SS KS +peradores condicionales de igualdad y desigualdad W Z Y #gicos a nivel de bit WW YY #gicos boleanos S DS @S OS JS MS HHS IIS IIIS WS ZS KS Asignacin

24
En los siguientes e"emplos podemos ver cmo las e$presiones podr%an llegar a ser confusas, pero con la tabla de precedencia de operadores podremos entender sin errores cul es el orden por el que se e"ecutan.
+2 B C D 4 * J / 2 K C
En este caso primero se e"ecutan los operadores O J y M, de i)quierda a derecha, con lo que se reali)ar%an estas operaciones. 'rimero la multiplicacin y luego la divisin por estar ms a la i)quierda del mdulo.
CM D 4 * 4 K C
Ahora el mdulo.
CM D 4 * +
'or /ltimo las sumas y las restas de i)quierda a derecha.

40 * +
#o que nos da como resultado el valor siguiente.

CH
e todos modos, es importante darse cuenta que el uso de los par&ntesis puede ahorrarnos muchos quebraderos de cabe)a y sobretodo la necesidad de sabernos de memoria la tabla de precedencia de los operadores. .uando veamos poco claro el orden con el que se e"ecutarn las sentencias podemos utili)arlos y as% for)ar que se eval/e antes el tro)o de e$presin que se encuentra dentro de los par&ntesis. 'ara acabar con el tema de operadores nos queda por ver un /ltimo operador un tanto especial, llamado typeof.
Artculo por
&.&.- )ontrol de tipos

Es importante ue cono#camos el tipo de las variables para trabajar sin errores. Vemos cmo obtenerlo con Javascript. El listado de operadores que venimos ofreciendo para el Manual de Javascript se completa con el operador typeof, que veremos a continuacin. 0emos podido comprobar que, para determinados operadores, es importante el tipo de datos que estn mane"ando, puesto que si los datos son de un tipo se reali)arn operaciones distintas que si son de otro. 'or e"emplo, cuando utili)bamos el operador D, si se trataba de n/meros los sumaba, pero si se trataba de cadenas de caracteres las concatenaba. ,emos pues que el tipo de los datos que estamos utili)ando s% que importa y que tendremos que estar pendientes este detalle si queremos que nuestras operaciones se realicen tal como esperbamos. 'ara comprobar el tipo de un dato se puede utili)ar otro operador que est disponible a partir de "avascript L.L, el operador t(peof, que devuelve una cadena de te$to que describe el tipo del operador que estamos comprobando.
Nota: a lo largo de nuestra e$periencia con Javascript veremos que muchas veces es ms /til cambiar el tipo de dato de una variable antes de hacer una comprobacin con tipeof para ver si la podemos utili)ar como operando. E$isten diversas funciones para intentar cambiar el tipo de una variable, como parse2nt<=, que veremos ms adelante en la (egunda 'arte del Manual de Javascript. # r bole no = true # r numerico = 22

25

# r numerico?;lot nte = +C.5M # r te@to = "mi te@to" # r ;ech = new % te(! document.write("<br>8l tipo de document.write("<br>8l tipo de document.write("<br>8l tipo de document.write("<br>8l tipo de document.write("<br>8l tipo de
bole no es: " D t&peo; bole no! numerico es: " D t&peo; numerico! numerico?;lot nte es: " D t&peo; numerico?;lot nte! te@to es: " D t&peo; te@to! ;ech es: " D t&peo; ;ech !
(i e"ecutamos este script obtendremos que en la pgina se escribir el siguiente te$to: El tipo de boleano es: boolean El tipo de numerico es: number El tipo de numericoNflotante es: number El tipo de te$to es: string El tipo de fecha es: ob"ect En este e"emplo podemos ver que ser imprimen en la pgina los distintos tipos de las variables. Estos pueden ser los siguientes: boolean, para los datos boleanos. <1rue o false= number, para los num&ricos. strin-, para las cadenas de caracteres. object, para los ob"etos.
9ueremos destacar tan slo dos detalles ms: L= #os n/meros, ya tengan o no parte decimal, son siempre del tipo de datos num&rico. 4= Bna de las variables es un poco ms comple"a, es la variable fecha que es un ob"eto de la clase mane"o de fechas en los scripts. #a veremos ms adelante, as% como los ob"etos. ate<=, que se utili)a para el
.on esto ya hemos terminado de ver la lista de operadores que podemos utili)ar en Javascript y en el pr$imo art%culo pasaremos a conocer las estructuras de control.
Artculo por

26
Parte %:
Estructuras de control en Javascript

#as estructuras de control nos permitir*n controlar el lu+o de nuestros programas. 5or supuesto, tambi/n orman parte de los asuntos m*s b*sicos de -a)ascript $ de cual(uier lengua+e de programaci&n, por lo (ue las )eremos con detenimiento.
*.1.- -structuras de control en Javascript

.ntroduccin a las estructuras de control. Enumeramos las ue tenemos disponibles en Javascript. #os scripts vistos hasta ahora en el Manual de Javascript han sido tremendamente sencillos y lineales: se iban e"ecutando las sentencias simples una detrs de la otra desde el principio hasta el fin. (in embargo, esto no tiene porque ser siempre as% y de hecho, en la mayor%a de los casos las cosas son bastante ms comple"as. (i tenemos alguna e$periencia en la programacin sabremos que en los programas generalmente se necesitar hacer cosas distintas dependiendo del estado de nuestras variables o reali)ar un mismo proceso muchas veces sin escribir las mismas l%neas de cdigo una y otra ve). 'ara reali)ar cosas ms comple"as en nuestros scripts se utili)an las estructuras de control. .on ellas podemos reali)ar tomas de decisiones y bucles. En los siguientes cap%tulos vamos a conocer las distintas estructuras de control que e$isten en Javascript.
*.1.1.- 2oma de decisiones

*os sirven para reali)ar unas acciones u otras en funcin del estado de las variables. Es decir, tomar decisiones para e"ecutar unas instrucciones u otras dependiendo de lo que est& ocurriendo en ese instante en nuestros programas. 'or e"emplo, dependiendo si el usuario que entra en nuestra pgina es mayor de edad o no lo es, podemos permitirle o no ver los contenidos de nuestra pgina. (i edad es mayor que LT entonces 1e de"o ver el contenido para adultos (i no 1e mando fuera de la pgina En Javascript podemos tomar decisiones utili)ando dos enunciados distintos. 27 (!21.0
*.1.2.- 0ucles
#os bucles se utili)an para reali)ar ciertas acciones repetidamente. (on muy utili)ados a todos los niveles en la programacin. .on un bucle podemos por e"emplo imprimir en una pgina los n/meros del L al L55 sin necesidad de

27
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com escribir cien veces el la instruccin imprimir. esde el L hasta el L55 2mprimir el n/mero actual En "avascript e$isten varios tipos de bucles, cada uno est indicado para un tipo de iteracin distinto y son los siguientes: 7+8 !02#E + !02#E
.omo hemos se-alado ya, las estructuras de control son muy importantes en Javascript y en cualquier lengua"e de programacin. Es por ello que en los siguientes cap%tulos veremos cada una de estas estructuras detenidamente, describiendo su uso y ofreciendo algunos e"emplos. .omen)aremos con la estructura de control if.
Artculo por
*.2.- -structura I/ en Javascript

Vemos cmo trabajar con la estrutura de control .1 en Javascript. En el Manual de Javascript de esarrollo!eb.com ya empe)amos a e$plicar lo que son las estructuras de control. En el presente art%culo vamos a dedicarnos a mostrar cmo funciona la sentencia if, que es la estructura ms habitual de las utili)adas para tomar decisiones en programas informticos. 27 es una estructura de control utili)ada para tomar decisiones. Es un condicional que sirve para reali)ar unas u otras operaciones en funcin de una e$presin. 7unciona de la siguiente manera, primero se eval/a una e$presin, si da resultado positivo se reali)an las acciones relacionadas con el caso positivo. #a sinta$is de la estructura 27 es la siguiente.
Nota: 1odas las estructuras de control se escriben en min/sculas en Javascript. Aunque algunas veces para destacar el nombre de la estructura la podamos escribir en el te$to del manual con letras may/sculas, en el cdigo de nuestros scripts siempre tenemos que ponerlo en min/sculas. En caso contrario recibiremos un mensa"e de error. i; (e@presi3n! F // cciones re li: r en c so positi#o //... G
+pcionalmente se pueden indicar acciones a reali)ar en caso de que la evaluacin de la sentencia devuelva resultados negativos.
i; (e@presi3n! F // cciones re li: r en c so positi#o //... G else F // cciones re li: r en c so neg ti#o //... G
7i"&monos en varias cosas. 'ara empe)ar vemos como con unas llaves engloban las acciones que queremos reali)ar en caso de que se cumplan o no las e$presiones. Estas llaves han de colocarse siempre, e$cepto en el caso de que slo haya una instruccin como acciones a reali)ar, que son opcionales.

28
Nota: Aunque las llaves para englobar las sentencias a e"ecutar tanto en el caso positivo como negativo sean opcionales cuando queremos e"ecutar una /nica sentencia, la recomendacin es colocarlas siempre, porque obtendremos as% un cdigo fuente ms claro. 'or e"emplo: ,eamos el cdigo siguiente: i; (llue#e! lert("- e
gu "!P
(er%a e$actamente igual que este cdigo: i; (llue#e!F lert("- e G
gu "!P
+ incluso, igual a este otro: i; (llue#e! lert("- e gu "!P
(in embargo, cuando utili)amos las llaves, el cdigo queda bastante ms claro, porque se puede apreciar en un rpido vista)o qu& instrucciones estn dependiendo del caso positivo del if. Esto es un detalle que ahora qui)s no tenga mucha importancia, pero que se agradecer cuando el programa sea ms comple"o o cuando varios programadores se encarguen de tocar un mismo cdigo.
+tro detalle que salta a la vista es el sangrado <margen= que hemos colocado en cada uno de los bloques de instrucciones a e"ecutar en los casos positivos y negativos. Este sangrado es totalmente opcional, slo lo hemos hecho as% para que la estructura 27 se comprenda de una manera ms visual. #os saltos de l%nea tampoco son necesarios y se han colocado tambi&n para que se vea me"or la estructura. 'erfectamente podr%amos colocar toda la instruccin 27 en la misma l%nea de cdigo, pero eso no ayudar a que las cosas est&n claras.
Nota: *osotros, as% como lo har%a cualquier persona con cierta e$periencia en el rea de programacin, aconse"amos que se utilicen los sangrados y saltos de l%nea necesarios para que las instrucciones se puedan entender me"or. 9ui)s el d%a que reali)as un cdigo tengas claro qu& has hecho y por qu& es as%, pero dentro de un mes, cuando tengas que releer ese cdigo, qui)s te acuerdes menos de lo que hiciste en tus scripts y agradecers que tengan un formato amigable para que se puedan leer con facilidad por las personas. (i traba"as en equipo estas recomendaciones sern todav%a ms importantes, puesto que todav%a es ms complicado leer cdigo fuente que han reali)ado otras personas.
,eamos alg/n e"emplo de condicionales 27.

i; (di == "lunes"! document.write ("Que teng s un ;eli: comien:o de sem n "!
(i es lunes nos desear una feli) semana. *o har nada en caso contrario. .omo en este e"emplo slo indicamos una instruccin para el caso positivo, no har falta utili)ar las llaves <aunque s% ser%a recomendable haberlas puesto=. 7%"ate tambi&n en el operador condicional que consta de dos signos igual. ,amos a ver ahora otro e"emplo, un poco ms largo.
i; (credito >= precio! F document.write("h s compr do el rtAculo " D nue#o'rtAculo! //enseRo compr c rrito D= nue#o'rticulo //introdu:co el rtAculo en el c rrito de l compr credito *= precio //disminu&o el crSdito segTn el precio del rtAculo G else F document.write("se te h c b do el crSdito"! //in;ormo 9ue te ; lt dinero window.loc tion = "c rritodel compr .html" //#o& l p(gin del c rrito G
Este e"emplo es un poco ms comple"o, y tambi&n un poco ficticio. #o que hago es comprobar si tengo cr&dito para reali)ar una supuesta compra. 'ara ello miro si el cr&dito es mayor o igual que el precio del art%culo, si es as% informo de la compra, introdu)co el art%culo en el carrito y resto el precio al cr&dito acumulado. (i el precio del art%culo es superior al dinero disponible informo de la situacin y mando al navegador a la pgina donde se muestra su carrito de la compra.

29
*.2.1.- -<presiones condicionales

#a e$presin a evaluar se coloca siempre entre par&ntesis y est compuesta por variables que se combinan entre si mediante operadores condicionales. 8ecordamos que los operadores condicionales relacionaban dos variables y devolv%an siempre un resultado boleano. 'or e"emplo un operador condicional es el operador >es igual> <SS=, que devuelve true en caso de que los dos operandos sean iguales o false en caso de que sean distintos.
i; (ed d > +J! document.write("puedes #er est p(gin p r dultos"!
En este e"emplo utili)amos en operador condicional >es mayor> <I=. En este caso, devuelve true si la variable edad es mayor que LT, con lo que se e"ecutar%a la l%nea siguiente que nos informa de que se puede ver el contenido para adultos. #as e$presiones condicionales se pueden combinar con las e$presiones lgicas para crear e$presiones ms comple"as. 8ecordamos que las e$presiones lgicas son las que tienen como operandos a los boleanos y que devuelvan otro valor boleano. (on los operadores negacin lgica, ? lgico y + lgico.
i; (b teri < 0.5 NN red8lectric == 0! document.write("tu orden dor port til se # p g r en segundos"!
#o que hacemos es comprobar si la bater%a de nuestro supuesto ordenador es menor que 5.F <est casi acabada= y tambi&n comprobamos si el ordenador no tiene red el&ctrica <est desenchufado=. #uego, el operador lgico los relaciona con un ?, de modo que si est casi sin bater%a ? sin red el&ctrica, informo que el ordenador se va a apagar.
Nota: #a lista de operadores que se pueden utili)ar con las estructuras 27 se pueden ver en el cap%tulo de operadores condicionales y operadores lgicos.
En el siguiente art%culo seguiremos e$plicando usos avan)ados de la estructura de control if en Javascript, como la anidacin de estructuras if.
Artculo por
*.$.- -structura I/ ?parte II@

Vemos m%s cosas sobre la estructura .1+ la anidacin de .1s y el operador 2, un .1 sencillo. #a estructura if es de las ms utili)adas en lengua"es de programacin, para tomar decisiones en funcin de la evaluacin de una sentencia. En el art%culo anterior del Manual de Javascript ya comen)amos a e$plicar la estructura if y ahora vamos a ver algunos usos un poquito ms avan)ados.
*.$.1.- 9entencias I/ anidadas

'ara hacer estructuras condicionales ms comple"as podemos anidar sentencias 27, es decir, colocar estructuras 27 dentro de otras estructuras 27. .on un solo 27 podemos evaluar y reali)ar una accin u otra seg/n dos posibilidades, pero si tenemos ms posibilidades que evaluar debemos anidar 27s para crear el flu"o de cdigo necesario para decidir correctamente. 'or e"emplo, si deseo comprobar si un n/mero es mayor menor o igual que otro, tengo que evaluar tres posibilidades distintas. 'rimero puedo comprobar si los dos n/meros son iguales, si lo son, ya he resuelto el problema, pero si no son iguales todav%a tendr& que ver cul de los dos es mayor. ,eamos este e"emplo en cdigo Javascript.
# r numero+=2C # r numero2=MC i; (numero+ == numero2!F document.write("=os dos nTmeros son igu les"!

30

GelseF i; (numero+ > numero2! F document.write("8l primer nTmero es m &or 9ue el segundo"! GelseF document.write("8l primer nTmero es menor 9ue el segundo"! G G
El flu"o del programa es como comentbamos antes, primero se eval/a si los dos n/meros son iguales. En caso positivo se muestra un mensa"e informando de ello. En caso contrario ya sabemos que son distintos, pero aun debemos averiguar cul de los dos es mayor. 'ara eso se hace otra comparacin para saber si el primero es mayor que el segundo. (i esta comparacin da resultados positivos mostramos un mensa"e diciendo que el primero es mayor que el segundo, en caso contrario indicaremos que el primero es menor que el segundo. ,olvemos a remarcar que las llaves son en este caso opcionales, pues slo se e"ecuta una sentencia para cada caso. Adems, los saltos de l%nea y los sangrados tambi&n opcionales en todo caso y nos sirven slo para ver el cdigo de una manera ms ordenada. Mantener el cdigo bien estructurado y escrito de una manera comprensible es muy importante, ya que nos har la vida ms agradable a la hora de programar y ms adelante cuando tengamos que revisar los programas.
Nota: En este manual utili)ar& una notacin como la que has podido ver en las l%neas anteriores. Adems mantendr& esa notacin en todo momento. Esto sin lugar a dudas har que los cdigos con e"emplos sean comprensibles ms rpidamente, si no lo hici&ramos as% ser%a un verdadero incordio leerlos. Esta misma receta es aplicable a los cdigos que has de crear t/ y el principal beneficiado sers t/ mismo y los compa-eros que lleguen a leer tu cdigo.
*.$.2.- 6perador I/
0ay un operador que no hemos visto todav%a y es una forma ms esquemtica de reali)ar algunos 27 sencillos. 'roviene del lengua"e ., donde se escriben muy pocas l%neas de cdigo y donde cuanto menos escribamos ms elegantes seremos. Este operador es un claro e"emplo de ahorro de l%neas y caracteres al escribir los scripts. #o veremos rpidamente, pues la /nica ra)n por la que lo incluyo es para que sepas que e$iste y si lo encuentras en alguna ocasin por ah% sepas identificarlo y cmo funciona. Bn e"emplo de uso del operador 27 se puede ver a continuacin.
I ri ble = (condici3n! U # lor+ : # lor2
Este e"emplo no slo reali)a una comparacin de valores, adems asigna un valor a una variable. #o que hace es evaluar la condicin <colocada entre par&ntesis= y si es positiva asigna el valorL a la variable y en caso contrario le asigna el valor4. ,eamos un e"emplo:
momento = (hor ? ctu l < +2! U "'ntes del mediodA " : "%espuSs del mediodA "
Este e"emplo mira si la hora actual es menor que L4. (i es as%, es que ahora es antes del mediod%a, as% que asigna >Antes del mediod%a> a la variable momento. (i la hora es mayor o igual a L4 es que ya es despu&s de mediod%a, con lo que se asigna el te$to > espu&s del mediod%a> a la variable momento. En el siguiente art%culo pasaremos a traba"ar con una nueva estructura de control, tambi&n utili)ada para toma de decisiones, llamada switch.
Artculo por
*.&.- -structura 9AI2)1 de Javascript

3a estructura de control s&itc$ de Javascript es utili#ada para tomar decisiones en funcin de distintos estados o valores de una variable.

31
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com #as estructuras de control son la manera con la que se puede dominar el flu"o de los programas, para hacer cosas distintas en funcin de los estados de las variables. En el Manual de Javascript ya empe)amos a ver las estructuras de control y ahora le ha tocado el turno a (!21.0, una estructura un poco ms comple"a que permite hacer m/ltiples operaciones dependiendo del estado de una variable. En este art%culo veremos que switch nos sirve para tomar decisiones en funcin de distintos estados de las variables. Esta e$presin se utili)a cuando tenemos m/ltiples posibilidades como resultado de la evaluacin de una sentencia. #a estructura (!21.0 se incorpor a partir de la versin L.4 de Javascript <*etscape E e 2nternet E$plorer E=. (u sinta$is es la siguiente.
switch (e@presi3n! F c se # lor+: ,entenci s e5ecut r si l bre ) c se # lor2: ,entenci s e5ecut r si l bre ) c se # lorC: ,entenci s e5ecut r si l bre ) de; ult: ,entenci s e5ecut r si el G
e@presi3n tiene como # lor e@presi3n tiene como # lor e@presi3n tiene como # lor # lor no es ninguno de los
# lor+ # lor2 # lorC nteriores
#a e$presin se eval/a, si vale valorL se e"ecutan las sentencias relacionadas con ese caso. (i la e$presin vale valor4 se e"ecutan las instrucciones relacionadas con ese valor y as% sucesivamente, por tantas opciones como deseemos. 7inalmente, para todos los casos no contemplados anteriormente se e"ecuta el caso por defecto. #a palabra brea3 es opcional, pero si no la ponemos a partir de que se encuentre coincidencia con un valor se e"ecutarn todas las sentencias relacionadas con este y todas las siguientes. Es decir, si en nuestro esquema anterior no hubiese ning/n brea3 y la e$presin valiese valorL, se e"ecutar%an las sentencias relacionadas con valorL y tambi&n las relacionadas con valor4, valor6 y default. 1ambi&n es opcional la opcin default u opcin por defecto. ,eamos un e"emplo de uso de esta estructura. (upongamos que queremos indicar que d%a de la semana es. (i el d%a es L <lunes= sacar un mensa"e indicndolo, si el d%a es 4 <martes= debemos sacar un mensa"e distinto y as% sucesivamente para cada d%a de la semana, menos en el G <sbado= y U <domingo= que queremos mostrar el mensa"e >es fin de semana>. 'ara d%as mayores que U indicaremos que ese d%a no e$iste.
switch (di ?de?l ?sem n ! F c se +: document.write("8s =unes"! bre ) c se 2: document.write("8s < rtes"! bre ) c se C: document.write("8s <iSrcoles"! bre ) c se 4: document.write("8s 4ue#es"! bre ) c se 5: document.write("8s #iernes"! bre ) c se M: c se L: document.write("8s ;in de sem n "! bre ) de; ult: document.write("8se dA no e@iste"! G

32
El e"emplo es relativamente sencillo, solamente puede tener una peque-a dificultad, consistente en interpretar lo que pasa en el caso G y U, que hab%amos dicho que ten%amos que mostrar el mismo mensa"e. En el caso G en realidad no indicamos ninguna instruccin, pero como tampoco colocamos un brea3 se e"ecutar la sentencia o sentencias del caso siguiente, que corresponden con la sentencia indicada en el caso U que es el mensa"e que informa que es fin de semana. (i el caso es U simplemente se indica que es fin de semana, tal como se pretend%a. En el siguiente art%culo comen)aremos a e$plorar las estructuras de control para hacer bucles o repeticiones en Javascript, comen)ando por el bucle for.
Artculo por
*.*.- 0ucle /65

Descripcin y ejemplos de funcionamiento del bucle 14(. .omen)amos con este art%culo del Manual de Javascript a e$plorar las estructuras de control para producir bucles o repeticiones, comen)ando por el bucle for, no por ser el ms simple, pero s% el ms utili)ado en la programacin. El bucle /O0 se utiliza para repetir mas instrucciones un determinado n*mero de veces . e entre todos los bucles, el 7+8 se suele utili)ar cuando sabemos seguro el n/mero de veces que queremos que se e"ecute. #a sinta$is del bucle for se muestra a continuacin.
;or (inici li: ci3nP condici3nP ctu li: ci3n! F //sentenci s e5ecut r en c d iter ci3n G
El bucle 7+8 tiene tres partes incluidas entre los par&ntesis, que nos sirven para definir cmo deseamos que se realicen las repeticiones. #a primera parte es la iniciali)acin, que se e"ecuta solamente al comen)ar la primera iteracin del bucle. En esta parte se suele colocar la variable que utili)aremos para llevar la cuenta de las veces que se e"ecuta el bucle. #a segunda parte es la condicin, que se evaluar cada ve) que comience una iteracin del bucle. .ontiene una e$presin para decidir cundo se ha de detener el bucle, o me"or dicho, la condicin que se debe cumplir para que contin/e la e"ecucin del bucle. 'or /ltimo tenemos la actuali)acin, que sirve para indicar los cambios que queramos e"ecutar en las variables cada ve) que termina la iteracin del bucle, antes de comprobar si se debe seguir e"ecutando. espu&s del for se colocan las sentencias que queremos que se e"ecuten en cada iteracin, acotadas entre llaves. Bn e"emplo de utili)acin de este bucle lo podemos ver a continuacin, donde se imprimirn los n/meros del 5 al L5.
# r i ;or (i=0Pi<=+0PiDD! F document.write(i! document.write("<br>"! G
En este caso se iniciali)a la variable i a 5. .omo condicin para reali)ar una iteracin, se tiene que cumplir que la variable i sea menor o igual que L5. .omo actuali)acin se incrementar en L la variable i. .omo se puede comprobar, este bucle es mu( potente1 (a que en una sola lnea podemos indicar muc)as cosas distintas ( mu( variadas, lo que permite una rpida configuracin del bucle y una versatilidad enorme. 'or e"emplo si queremos escribir los n/mero del L al L.555 de dos en dos se escribir el siguiente bucle.

33

;or (i=+Pi<=+000PiD=2! document.write(i!
(i nos fi"amos, en cada iteracin actuali)amos el valor de i incrementndolo en 4 unidades.

Nota: +tro detalle, no utili)amos las llaves englobando las instrucciones del bucle 7+8 porque slo tiene una sentencia y en este caso no es obligado, tal como pasaba con las instrucciones del 27.
(i queremos contar descendentemente del 6E6 al L5 utili)ar%amos este bucle.

;or (i=C4CPi>=+0Pi**! document.write(i!
En este caso decrementamos en una unidad la variable i en cada iteracin, comen)ando en el valor 6E6 y siempre que la variable tenga un valor mayor o igual que L5.
*.*.1.- -(ercicio de e(emplo del ucle #or

,amos a hacer una pausa para asimilar el bucle for con un e"ercicio que no encierra ninguna dificultad si hemos entendido el funcionamiento del bucle. (e trata de hacer un bucle que escriba en una pgina web los encabe)amientos desde H0LI hasta H0GI con un te$to que ponga >Encabe)ado de nivel $>. #o que deseamos escribir en una pgina web mediante Javascript es lo siguiente: H0LIEncabe)ado de nivel LHJ0LI H04IEncabe)ado de nivel 4HJ04I H06IEncabe)ado de nivel 6HJ06I H0EIEncabe)ado de nivel EHJ0EI H0FIEncabe)ado de nivel FHJ0FI H0GIEncabe)ado de nivel GHJ0GI 'ara ello tenemos que hacer un bucle que empiece en L y termine en G y en cada iteracin escribiremos el encabe)ado que toca.
;or (i=+Pi<=MPiDD! F document.write("<O" D i D ">8nc be: do de ni#el " D i D "</O" D i D ">"! G
Este script se puede ver en funcionamiento aqu%. Ahora que ya conocemos el bucle for, estamos en condiciones de aprender a mane"ar otras estructuras de control para reali)ar repeticiones, como los bucles while y do...while.
Artculo por
*.,.- 0ucles A1I!- % "6 A1I!Descripcin y diferentes usos de los dos tipos de bucles 56.3E ue se encuentran disponibles en Javascript, con algunos ejemplos pr%cticos. Estamos tratando acerca de las distintas estructuras de control que e$isten en el lengua"e Javascript y en concreto viendo los distintos tipos de bucles que podemos implementar en este lengua"e de programacin. En art%culos anteriores del Manual de

34
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Javascript vimos ya el primero de los bucles que debemos conocer, el bucle for y ahora vamos a tratar sobre los otros dos tipos de estructuras de control para hacer repeticiones. As% pues, veamos ahora los dos tipos de bucles !02#E que podemos utili)ar en Javascript y los usos de cada uno.
*.,.1.- 0ucle A1I!Estos bucles se utili)an cuando queremos repetir la e"ecucin de unas sentencias un n/mero indefinido de veces, siempre que se cumpla una condicin. (e ms sencillo de comprender que el bucle 7+8, pues no incorpora en la misma l%nea la iniciali)acin de las variables su condicin para seguir e"ecutndose y su actuali)acin. (lo se indica, como veremos a continuacin, la condicin que se tiene que cumplir para que se realice una iteracin.
while (condici3n!F //sentenci s e5ecut r G
Bn e"emplo de cdigo donde se utili)a este bucle se puede ver a continuacin.

# r color = "" while (color 2= "ro5o"!F color = prompt("d me un color (escribe ro5o p r G
s lir!",""!
Este es un e"emplo de lo ms sencillo que se puede hacer con un bucle while. #o que hace es pedir que el usuario introdu)ca un color y lo hace repetidas veces, mientras que el color introducido no sea ro"o. 'ara e"ecutar un bucle como este primero tenemos que iniciali)ar la variable que vamos utili)ar en la condicin de iteracin del bucle. .on la variable iniciali)ada podemos escribir el bucle, que comprobar para e"ecutarse que la variable color sea distinto de >ro"o>. En cada iteracin del bucle se pide un nuevo color al usuario para actuali)ar la variable color y se termina la iteracin, con lo que retornamos al principio del bucle, donde tenemos que volver a evaluar si lo que hay en la variable color es >ro"o> y as% sucesivamente mientras que no se haya introducido como color el te$to >ro"o>.
Nota: 0emos utili)ado en este e"emplo la funcin prompt de Javascript, que no hemos visto todav%a en este manual. Esta funcin sirve para que mostrar una ca"a de dilogo donde el usuario debe escribir un te$to. Esta funcin pertenece al ob"eto window de Javascript y la comentamos en el art%culo M&todos de window en Javascript.
*.,.2.- 0ucle "6...A1I!El bucle do...while es la /ltima de las estructuras para implementar repeticiones de las que dispone en Javascript y es una variacin del bucle while visto anteriormente. (e utili)a generalmente cuando no sabemos cuantas veces se habr de e"ecutar el bucle, igual que el bucle !02#E, con la diferencia de que sabemos seguro que el bucle por lo menos se e"ecutar una ve). Este tipo de bucle se introdu"o en Javascript L.4, por lo que no todos los navegadores los soportan, slo los de versin E o superior. En cualquiuer caso, cualquier cdigo que quieras escribir con +...!02#E se puede escribir tambi&n utili)ando un bucle !02#E, con lo que en navegadores antiguos debers traducir tu bucle +...!02#E por un bucle !02#E. #a sinta$is es la siguiente.
do F //sentenci s del bucle G while (condici3n!
El bucle se e"ecuta siempre una ve) y al final se eval/a la condicin para decir si se e"ecuta otra ve) el bucle o se termina su e"ecucin. ,eamos el e"emplo que escribimos para un bucle !02#E en este otro tipo de bucle.
# r color

35

do F color = prompt("d me un color (escribe ro5o p r G while (color 2= "ro5o"! s lir!",""!
Este e"emplo funciona e$actamente igual que el anterior, e$cepto que no tuvimos que iniciali)ar la variable color antes de introducirnos en el bucle. 'ide un color mientras que el color introducido es distinto que >ro"o>.
*.,.$.- -(emplo de uso de los ucles Bhile

,amos a ver a continuacin un e"emplo ms prctico sobre cmo traba"ar con un bucle !02#E. .omo resulta muy dif%cil hacer e"emplos prcticos con lo poco que sabemos sobre Javascript, vamos a adelantar una instruccin que aun no conocemos. En este e"emplo vamos a declarar una variable e iniciali)arla a 5. #uego iremos sumando a esa variable un n/mero aleatorio del L al L55 hasta que sumemos L.555 o ms, imprimiendo el valor de la variable suma despu&s de cada operacin. (er necesario utili)ar el bucle !02#E porque no sabemos e$actamente el n/mero de iteraciones que tendremos que reali)ar <depender de los valores aleatorios que se vayan obteniendo=.
# r sum = 0 while (sum < +000!F sum D= p rse/nt(< th.r ndom(! B +00! document.write (sum D "<br>"! G
(uponemos que por lo que respecta al bucle !02#E no habr problemas, pero donde si que puede haberlos es en la sentencia utili)ada para tomar un n/mero aleatorio. (in embargo, no es necesario e$plicar aqu% la sentencia porque lo tenemos planeado hacer ms adelante. e todos modos, si lo deseas, puedes ver este art%culo que habla sobre n/meros aleatorios en Javascript. 'odemos ver una pgina con el e"emplo en funcionamiento. .on esto ya hemos conocido todos los tipos de bucles que e$isten en Javascript, no obstante aun vamos a dedicar un art%culo para e$plicar las sentencias brea3 y continue que nos sirven para alterar el funcionamiento normal de los bucles en dos sentidos.
Artculo por
*.C.- 0reaD % continue

Dos instrucciones ue aumentan el control sobre los bucles en Javascript. "irven para parar y continuar con la siguiente iteracin del bucle respectivamente. Javascript tiene diferentes estructuras de control para implementar bucles, como 7+8, !02#E y +...!02#E, que ya hemos podido e$plicar en cap%tulos anteriores del Manual de Javascript. .omo hemos podido comprobar, con estos bucles podemos abarcar gran cantidad de necesidades, pero qui)s con el tiempo encuentres que te faltan algunas posibilidades de control de las repeticiones de los bucles. 2magina por e"emplo que estas haciendo un bucle muy largo para encontrar algo en cientos o miles de sitios. 'ero ponte en el caso que durante las primeras iteraciones encuentres ese valor que buscabas. Entonces no tendr%a sentido continuar con el resto del bucle para buscar ese elemento, pues ya lo hab%as encontrado. En estas situaciones nos conviene saber para el bucle cancelar el resto de iteraciones. +bviamente, &sto es solo un e"emplo de cmo podr%amos vernos en la necesidad de controlar un poco ms el bucle. En la vida real como programador encontrars muchas otras ocasiones en las que te interesar hacer esto u otras cosas con ellos. As% pues, e$isten dos instrucciones que se pueden usar en de las distintas estructuras de control y principalmente en los bucles, que te servirn para controlar dos tipos de situaciones. &on las instrucciones brea2 ( continue.:

36
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com brea2: (ignifica detener la e"ecucin de un bucle y salirse de &l. continue: (irve para detener la iteracin actual y volver al principio del bucle para reali)ar otra iteracin, si corresponde.
*.C.1.- 0reaD
(e detiene un bucle utili)ando la palabra brea3. etener un bucle significa salirse de &l y de"arlo todo como est para continuar con el flu"o del programa inmediatamente despu&s del bucle.
;or (i=0Pi<+0PiDD!F document.write (i! escribe = prompt("dime si continuo pregunt ndo...", "si"! i; (escribe == "no"! bre ) G
Este e"emplo escribe los n/meros del 5 al R y en cada iteracin del bucle pregunta al usuario si desea continuar. (i el usuario dice cualquier cosa continua, e$cepto cuando dice >no>, situacin en la cual se sale del bucle y de"a la cuenta por donde se hab%a quedado.
*.C.2.- )ontinue
(irve para volver al principio del bucle en cualquier momento, sin e"ecutar las l%neas que haya por deba"o de la palabra continue.
# r i=0 while (i<L!F increment r = prompt("= cuent i; (increment r == "no"! continue iDD G
est( en " D i D ", dime si incremento", "si"!
Este e"emplo, en condiciones normales contar%a hasta desde iS5 hasta iSU, pero cada ve) que se e"ecuta el bucle pregunta al usuario si desea incrementar la variable o no. (i introduce >no> se e"ecuta la sentencia continue, con lo que se vuelve al principio del bucle sin llegar a incrementar en L la variable i, ya que se ignorar%an las sentencia que hayan por deba"o del continue.
*.C.$.- -(emplo adicional de la sentencia reaD

Bn e"emplo ms prctico sobre estas instrucciones se puede ver a continuacin. (e trata de un bucle 7+8 planeado para llegar hasta L.555 pero que lo vamos a parar con brea3 cuando lleguemos a 666.
;or (i=0Pi<=+000PiDD!F document.write(i D "<br>"! i; (i==CCC! bre )P G
'odemos ver una pgina con el e"emplo en funcionamiento. .on la descripcin de las sentencias brea3 y continue hemos podido abarcar todo lo que se debe saber sobre la creacin de bucles en Javascript. Ahora bien, en el siguiente art%culo todav%a vamos a seguir en el tema de las estructuras de control, porque queremos ofrecer un e"emplo un poco ms avan)ado donde aprenderemos a anidar bucles.
Artculo por

37
*.E.- 0ucles anidados en Javascript

Explicamos lo ue es un bucle anidado, cmo funcionan y para u! sirven. Vemos algunos ejemplos. En el Manual de Javascript hemos recorrido ya diversos art%culos para hablar de bucles. En este momento no deber%a haber ning/n problema para poder crear los distintos tipos de bucles sin problemas, no obstante, queremos dedicar un art%culo completo a tratar acerca de uno de los usos ms habituales de los bucles, que podremos encontrar cuando estemos haciendo programas ms comple"os: la anidacin de bucles. Anidar un bucle consiste en meter ese bucle dentro de otro . #a anidacin de bucles es necesaria para hacer determinados procesamientos un poco ms comple"os que los que hemos visto en los e"emplos anteriores. (i en vuestra e$periencia como programadores los hab&is anidado un bucle todav%a, tener certe)a que ms tarde o temprano os encontrar&is con esa necesidad. Bn bucle anidado tiene una estructura como la que sigue. ,amos a tratar de e$plicarlo a la vista de estas l%neas:
;or (i=0Pi<+0PiDD!F ;or (5=0P5<+0P5DD! F document.write(i D "*" D 5! G G
#a e"ecucin funcionar de la siguiente manera. 'ara empe)ar se iniciali)a el primer bucle, con lo que la variable i valdr 5 y a continuacin se iniciali)a el segundo bucle, con lo que la variable " valdr tambi&n 5. En cada iteracin se imprime el valor de la variable i, un guin <>@>= y el valor de la variable ", como las dos variables valen 5, se imprimir el te$to >5@5> en la pgina web. ebido al flu"o del programa en esquemas de anidacin como el que hemos visto, el bucle que est anidado <ms hacia dentro= es el que ms veces se e"ecuta. En este e"emplo, para cada iteracin del bucle ms e$terno el bucle anidado se e"ecutar por completo una ve), es decir, har sus L5 iteraciones. En la pgina web se escribir%an estos valores, en la primera iteracin del bucle e$terno y desde el principio: 5@5 5@L 5@4 5@6 5@E 5@F 5@G 5@U 5@T 5@R 'ara cada iteracin del bucle e$terno se e"ecutarn las L5 iteraciones del bucle interno o anidado. 0emos visto la primera iteracin, ahora vamos a ver las siguientes iteraciones del bucle e$terno. En cada una acumula una unidad en la variable i, con lo que saldr%an estos valores. L@5 L@L L@4 L@6 L@E L@F L@G L@U L@T L@R

38
? luego estos. 4@5 4@L 4@4 4@6 4@E 4@F 4@G 4@U 4@T 4@R As% hasta que se terminen los dos bucles, que ser%a cuando se alcan)ase el valor R@R. ,eamos un e"emplo muy parecido al anterior, aunque un poco ms /til. (e trata de imprimir en la pgina las todas las tablas de multiplicar. el L al R, es decir, la tabla del L, la del 4, del 6...
;or (i=+Pi<+0PiDD!F document.write("<br><b>= t bl del " D i D ":</b><br>"! ;or (5=+P5<+0P5DD! F document.write(i D " @ " D 5 D ": "! document.write(iB5! document.write("<br>"! G G
.on el primer bucle controlamos la tabla actual y con el segundo bucle la desarrollamos. En el primer bucle escribimos una cabecera, en negrita, indicando la tabla que estamos escribiendo, primero la del L y luego las dems en orden ascendente hasta el R. .on el segundo bucle escribo cada uno de los valores de cada tabla. (e puede ver el e"emplo en marcha en este enlace.
Nota: ,eremos ms cosas con bucles anidados en cap%tulos posteriores, aunque si queremos adelantarnos un poco para ver un nuevo e"emplo que afiance estos conocimientos podemos ir viendo un e"emplo en el 1aller de Javascript sobre bucles anidados, donde se construye la tabla con todos los colores puros en definiciones de 4FG colores.
.on este art%culo ms bien prctico sobre anidacin de bucles, terminamos el tema de las estructuras de control. Ahora pasaremos a otra seccin de este Manual de Javascript, en la que trataremos sobre las funciones.
Artculo por

39
Parte &:
'unciones en Javascript
#as unciones nos permitir*n hacer programas $ scripts m*s optimizados $ de *cil mantenimiento. 2ambi/n son b*sicas en cual(uier lengua+e de programaci&n $ les dedicaremos )arios artculos.
,.1.- /unciones en Javascript

7omen#amos con las funciones en Javascript. Definimos el concepto de funcin y aprendemos a crearlas y a llamarlas. (eguimos traba"ando y ampliando nuestros conocimientos sobre Javascript. .on lo visto hasta ahora en el Manual de Javascript ya tenemos una cierta soltura para traba"ar en este interesante lengua"e de programacin. 'ero todav%a nos queda mucho por delante. Ahora vamos a ver un tema muy importante, sobretodo para los que no han programado nunca y con Javascript estn dando sus primeros pasos en el mundo de la programacin ya que veremos un concepto nuevo, el de funcin, y los usos que tiene. 'ara los que ya cono)can el concepto de funcin tambi&n ser un cap%tulo /til, pues tambi&n veremos la sinta$is y funcionamiento de las funciones en Javascript.
,.1.1.- Qu es una #uncin

A la hora de hacer un programa ligeramente grande e$isten determinados procesos que se pueden concebir de forma independiente, y que son ms sencillos de resolver que el problema entero. Adems, estos suelen ser reali)ados repetidas veces a lo largo de la e"ecucin del programa. Estos procesos se pueden agrupar en una funcin, definida para que no tengamos que repetir una y otra ve) ese cdigo en nuestros scripts, sino que simplemente llamamos a la funcin y ella se encarga de hacer todo lo que debe. As% que podemos ver una funcin como una serie de instrucciones que englobamos dentro de un mismo proceso. Este proceso se podr luego e"ecutar desde cualquier otro sitio con solo llamarlo. 'or e"emplo, en una pgina web puede haber una funcin para cambiar el color del fondo y desde cualquier punto de la pgina podr%amos llamarla para que nos cambie el color cuando lo deseemos.
Nota: (i queremos, podemos ampliar esta descripcin de las funciones en el art%culo .oncepto de funcin.
#as funciones se utili)an constantemente, no slo las que escribes t/, sino tambi&n las que ya estn definidas en el sistema, pues todos los lengua"es de programacin suelen tener un montn de funciones para reali)ar procesos habituales, como por e"emplo obtener la hora, imprimir un mensa"e en la pantalla o convertir variables de un tipo a otro. ?a hemos visto alguna funcin en nuestros sencillos e"emplos anteriores. 'or e"emplo, cuando hac%amos un document.write<= en realidad estbamos llamando a la funcin write<= asociada al documento de la pgina, que escribe un te$to en la pgina. En los cap%tulos de funciones vamos primero a ver cmo reali)ar nuestras propias funciones y cmo llamarlas luego. A lo largo del manual veremos muchas de las funciones definidas en Javascript que debemos utili)ar para reali)ar distintos tipos de acciones habituales.

40
,.1.2.- )mo se escri e una #uncin

Bna funcin se debe definir con una sinta$is especial que vamos a conocer a continuacin.
;unction nombre;uncion (!F instrucciones de l ;unci3n ... G
'rimero se escribe la palabra function, reservada para este uso. (eguidamente se escribe el nombre de la funcin, que como los nombres de variables puede tener n/meros, letras y alg/n carcter adicional como en guin ba"o. A continuacin se colocan entre llaves las distintas instrucciones de la funcin. #as llaves en el caso de las funciones no son opcionales, adems es /til colocarlas siempre como se ve en el e"emplo, para que se recono)ca fcilmente la estructura de instrucciones que engloba la funcin. ,eamos un e"emplo de funcin para escribir en la pgina un mensa"e de bienvenida dentro de etiquetas H0LI para que quede ms resaltado. function escribirCienvenida<=^ document.write<>H0LI0ola a todosHJ0LI>= _ (implemente escribe en la pgina un te$to. Admitimos que es una funcin tan sencilla, que el e"emplo no e$presa suficientemente el concepto de funcin, pero ya veremos otras ms comple"as. #as etiquetas 0L no se muestran en la pgina, sino que son interpretadas como el significado de la misma, en este caso que escribimos un encabe)ado de nivel L. .omo estamos escribiendo en una pgina web, al poner etiquetas 01M# se interpretan como lo que son.
,.1.$.- )mo llamar a una #uncin

'ara e"ecutar una funcin la tenemos que invocar en cualquier parte de la pgina. .on eso conseguiremos que se e"ecuten todas las instrucciones que tiene la funcin entre las dos llaves. 'ara e"ecutar la funcin utili)amos su nombre seguido de los par&ntesis. 'or e"emplo, as% llamar%amos a la funcin escribirCienvenida<= que acabamos de crear. escribirCienvenida<= #uego veremos que e$isten muchas cosas adicionales que debemos conocer de las funciones, como el paso de parmetros o los valores de retorno. 'ero antes vamos a e$plicar dnde debemos colocar las funciones Javascript.
Artculo por
,.2.- "nde colocamos las #unciones

Vemos la manera de insertar las funciones Javascript de cliente dentro de las p%ginas &eb. #as funciones son uno de los principales componentes de los programas, en la mayor%a de los lengua"es de programacin. En el Manual de Javascript ya hemos comen)ado a e$plicar qu& es una funcin y cmo podemos crearla e invocarla en este lengua"e. Ahora vamos a tratar un tema que no es tanto de sinta$is y programacin, sino que tiene ms que ver con el uso correcto y habitual que se hace de las funciones en Javascript, que no es otro que la colocacin del cdigo de las funciones en la pgina web. En principio, podemos colocar las funciones en cualquier parte de la pgina, siempre entre etiquetas H(.82'1I, claro est. *o obstante e$iste una limitacin a la hora de colocarla con relacin a los lugares desde donde se la llame. 1e adelantamos que lo ms fcil es colocar la funcin antes de cualquier llamada a la misma y as% seguro que nunca nos equivocaremos.

41
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com E$isten dos opciones posibles para colocar el cdigo de una funcin: a3 Colocar la funcin en el mismo bloque de script: En concreto, la funcin se puede definir en el bloque H(.82'1I donde est& la llamada a la funcin, aunque es indiferente si la llamada se encuentra antes o despu&s del cdigo de la funcin, dentro del mismo bloque H(.82'1I.
<,-./01> miEuncion(! ;unction miEuncion(!F //h go lgo... document.write("8sto # G </,-./01>
bien"!
Este e"emplo funciona correctamente porque la funcin est declarada en el mismo bloque que su llamada. b3 Colocar la funcin en otro bloque de script: 1ambi&n es vlido que la funcin se encuentre en un bloque H(.82'1I anterior al bloque donde est la llamada.
<O1<=> <O8'%> <1/1=8></ 0V$/6'</1/1=8> <,-./01> ;unction miEuncion(!F //h go lgo... document.write("8sto # bien"! G </,-./01> </O8'%> <"7%W> <,-./01> miEuncion(! </,-./01> </"7%W> </O1<=>
,emos un cdigo completo sobre cmo podr%a ser una pgina web donde tenemos funciones Javascript. .omo se puede comprobar, las funciones estn en la cabecera de la pgina <dentro del 0EA =. `ste es un lugar e$celente donde colocarlas, porque se supone que en la cabecera no se van a utili)ar todav%a y siempre podremos disfrutar de ellas en el cuerpo porque sabemos seguro que ya han sido declaradas. 'ara que quede claro este asunto de la colocacin de funciones veamos el siguiente e"emplo, que dara un error. E$amina atentamente el cdigo siguiente, que lan)ar un error, debido a que hacemos una llamada a una funcin que se encuentra declarada en un bloque H(.82'1I posterior.
<,-./01> miEuncion(! </,-./01> <,-./01> ;unction miEuncion(!F //h go lgo... document.write("8sto # G </,-./01>
bien"!
.on esto esperamos haber resuelto todas las dudas sobre la colocacin del cdigo de las funciones Javascript. En siguientes art%culos veremos otros temas interesantes como los parmetros de las funciones.
Artculo por

42
,.$.- :ar.metros de las #unciones

Vemos lo ue son los par%metros en las funciones. Vemos como definir funciones ue reciben par%metros en el lenguaje Javascript y como $acer llamadas a funciones pasando par%metros. En el Manual de Javascript hemos hablado anteriormente sobre funciones. En concreto este es el tercer art%culo que abordamos sobre el tema. #as ideas que hemos e$plicado anteriormente sobre funciones no son las /nicas que debemos aprender para mane"arlas en toda su potencia. #as funciones tambi&n tienen una entrada y una salida de datos. En este art%culo veremos cmo podemos enviar datos a las funciones Javascript.
,.$.1.- :ar.metros
#os parmetros se usan para mandar valores a las funciones. Bna funcin traba"ar con los parmetros para reali)ar las acciones. 'or decirlo de otra manera, los parmetros son los valores de entrada que recibe una funcin. 'or poner un e"emplo sencillo de entender, una funcin que reali)ase una suma de dos n/meros tendr%a como parmetros a esos dos n/meros. #os dos n/meros son la entrada, as% como la salida ser%a el resultado de la suma, pero eso lo veremos ms tarde. ,eamos un e"emplo anterior en el que crebamos una funcin para mostrar un mensa"e de bienvenida en la pgina web, pero al que ahora le vamos a pasar un parmetro que contendr el nombre de la persona a la que hay que saludar.
;unction escribir"ien#enid (nombre!F document.write("<O+>Ool " D nombre D "</O+>"! G
.omo podemos ver en el e"emplo, para definir en la funcin un parmetro tenemos que poner el nombre de la variable que va a almacenar el dato que le pasemos. Esa variable, que en este caso se llama nombre, tendr como valor el dato que le pasemos a la funcin cuando la llamemos. Adems, la variable donde recibimos el parmetro tendr vida durante la e"ecucin de la funcin y de"ar de e$istir cuando la funcin termine su e"ecucin. 'ara llamar a una funcin que tiene parmetros se coloca entre par&ntesis el valor del parmetro. 'ara llamar a la funcin del e"emplo habr%a que escribir:
escribir"ien#enid ("'lberto $ rcA "!
Al llamar a la funcin as%, el parmetro nombre toma como valor >Alberto Aarc%a> y al escribir el saludo por pantalla escribir >0ola Alberto Aarc%a> entre etiquetas H0LI. #os parmetros pueden recibir cualquier tipo de datos, num&rico, te$tual, boleano o un ob"eto. 8ealmente no especificamos el tipo del parmetro, por eso debemos tener un cuidado especial al definir las acciones que reali)amos dentro de la funcin y al pasarle valores, para asegurarnos que todo es consecuente con los tipos de datos que esperamos tengan nuestras variables o parmetros.
,.$.2.- M=ltiples par.metros

Bna funcin puede recibir tantos parmetros como queramos y para e$presarlo se colocan los nombres de los parmetros separados por comas, dentro de los par&ntesis. ,eamos rpidamente la sinta$is para que la funcin de antes, pero hecha para que reciba dos parmetros, el primero el nombre al que saludar y el segundo el color del te$to.
;unction escribir"ien#enid (nombre,color1e@to!F document.write("<E761 color=X" D color1e@to D "X>"! document.write("<O+>Ool " D nombre D "</O+>"! document.write("</E761>"!

43

G
#lamar%amos a la funcin con esta sinta$is. Entre los par&ntesis colocaremos los valores de los parmetros.
# r mi6ombre = "0epe" # r mi-olor = "red" escribir"ien#enid (mi6ombre,mi-olor!
0e colocado entre los par&ntesis dos variables en lugar de dos te$tos entrecomillados. .uando colocamos variables entre los parmetros en realidad lo que estamos pasando a la funcin son los valores que contienen las variables y no las mismas variables.
,.$.$.- !os par.metros se pasan por valor

Al hilo del uso de parmetros en nuestros programas Javascript, tenemos que saber que los parmetros de las funciones se pasan por valor. Esto quiere decir que estamos pasando valores y no variables. En la prctica, aunque modifiquemos un parmetro en una funcin, la variable original que hab%amos pasado no cambiar su valor. (e puede ver fcilmente con un e"emplo.
;unction p so0orI lor(mi0 r metro!F mi0 r metro = C2 document.write("he c mbi do el # lor C2"! G # r miI ri ble = 5 p so0orI lor(miI ri ble! document.write ("el # lor de l # ri ble es: " D miI ri ble!
En el e"emplo tenemos una funcin que recibe un parmetro y que modifica el valor del parmetro asignndole el valor 64. 1ambi&n tenemos una variable, que iniciali)amos a F y posteriormente llamamos a la funcin pasndole esta variable como parmetro. .omo dentro de la funcin modificamos el valor del parmetro podr%a pasar que la variable original cambiase de valor, pero como los parmetros no modifican el valor original de las variables, &sta no cambia de valor. e este modo, una ve) e"ecutada la funcin, al imprimir en pantalla el valor de mi,ariable se imprimir el n/mero F, que es el valor original de la variable, en lugar de 64 que era el valor con el que hab%amos actuali)ado el parmetro. En Javascript slo se pueden pasar las variables por valor. Ahora que hemos aprendido a enviar datos a las funciones, por medio de los parmetros, podemos aprender a hacer funciones que devuelven valores.
Artculo por
,.&.- +alores de retorno

3as funciones pueden devolver valores, a trav!s de la sentencia return. 8ambi!n vemos un apunte sobre el %mbito de variables en funciones en Javascript. Estamos aprendiendo acerca del uso de funciones en Javascript y en estos momentos qui)s ya nos hayamos dado cuenta de la gran importancia que tienen para hacer programas ms o menos avan)ados. En este art%culo del Manual de Javascript seguiremos aprendiendo cosas sobre funciones y en concreto que con ellas tambi&n se puede devolver valores. Adems, veremos alg/n caso de uso interesante sobre las funciones que nos puede aclarar un poco el mbito de variables locales y globales.
,.&.1.- "evolucin de valores en las #unciones

#as funciones en Javascript tambi&n pueden retornar valores. e hecho, &sta es una de las utilidades ms esenciales de las
44

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com funciones, que debemos conocer, no slo en Javascript sino en general en cualquier lengua"e de programacin. que, al invocar una funcin, se podr reali)ar acciones y ofrecer un valor como salida. e modo
'or e"emplo, una funcin que calcula el cuadrado de un n/mero tendr como entrada a ese n/mero y como salida tendr el valor resultante de hallar el cuadrado de ese n/mero. #a entrada de datos en las funciones la vimos anteriormente en el art%culo sobre parmetros de las funciones. Ahora tenemos que aprender acerca de la salida. ,eamos un e"emplo de funcin que calcula la media de dos n/meros. #a funcin recibir los dos n/meros y retornar el valor de la media.
;unction medi (# lor+,# lor2!F # r result do result do = (# lor+ D # lor2! / 2 return result do G
'ara especificar el valor que retornar la funcin se utili)a la palabra return seguida de el valor que se desea devolver. En este caso se devuelve el contenido de la variable resultado, que contiene la media calculada de los dos n/meros. 9ui)s nos preguntemos ahora cmo recibir un dato que devuelve una funcin. 8ealmente en el cdigo fuente de nuestros programas podemos invocar a las funciones en el lugar que deseemos. .uando una funcin devuelve un valor simplemente se sustituye la llamada a la funcin por ese valor que devuelve. As% pues, para almacenar un valor de devolucin de una funcin, tenemos que asignar la llamada a esa funcin como contenido en una variable, y eso lo har%amos con el operador de asignacin S. 'ara ilustrar esto se puede ver este e"emplo, que llamar a la funcin media<= y guardar el resultado de la media en una variable para luego imprimirla en la pgina.
# r mi<edi mi<edi = medi (+2,J! document.write (mi<edi !
,.&.2.- M=ltiples return

En realidad en Javascript las funciones slo pueden devolver un valor, por lo que en principio no podemos hacer funciones que devuelvan dos datos distintos.
Nota: en la prctica nada nos impide que una funcin devuelva ms de un valor, pero como slo podemos devolver una cosa, tendr%amos que meter todos los valores que queremos devolver en una estructura de datos, como por e"emplo un array. *o obstante, eso ser%a un uso ms o menos avan)ado que no vamos a ver en estos momentos.
Ahora bien, aunque slo podamos devolver un dato, en una misma funcin podemos colocar ms de un return. .omo decimos, slo vamos a poder retornar una cosa, pero dependiendo de lo que haya sucedido en la funcin podr ser de un tipo u otro, con unos datos u otros. En esta funcin podemos ver un e"emplo de utili)acin de m/ltiples return. (e trata de una funcin que devuelve un 5 si el parmetro recibido era par y el valor del parmetro si este era impar.
;unction multiple.eturn(numero!F # r resto = numero K 2 i; (resto == 0! return 0 else return numero G
'ara averiguar si un n/mero es par hallamos el resto de la divisin al dividirlo entre 4. (i el resto es cero es que era par y devolvemos un 5, en caso contrario @el n/mero es impar@ devolvemos el parmetro recibido.

45
,.&.$.- Fm ito de las varia les en #unciones

entro de las funciones podemos declarar variables. (obre este asunto debemos de saber que todas las variables declaradas en una funcin son locales a esa funcin, es decir, slo tendrn valide) durante la e"ecucin de la funcin.
Nota: 2ncluso, si lo pensamos, nos podremos dar cuenta que los parmetros son como variables que se declaran en la cabecera de la funcin y que se iniciali)an al llamar a la funcin. #os parmetros tambi&n son locales a la funcin y tendrn valide) slo cuando &sta se est e"ecutando.
'odr%a darse el caso de que podemos declarar variables en funciones que tengan el mismo nombre que una variable global a la pgina. Entonces, dentro de la funcin, la variable que tendr valide) es la variable local y fuera de la funcin tendr valide) la variable global a la pgina. En cambio, si no declaramos las variables en las funciones se entender por "avascript que estamos haciendo referencia a una variable global a la pgina, de modo que si no est creada la variable la crea, pero siempre global a la pgina en lugar de local a la funcin. ,eamos el siguiente cdigo.
;unction # ri bles?glog les?&?loc les(!F # r # ri ble=oc l = 2C # ri ble$lob l = "9wert&" G
En este caso variable#ocal es una variable que se ha declarado en la funcin, por lo que ser local a la funcin y slo tendr valide) durante su e"ecucin. 'or otra parte variableAlobal no se ha llegado a declarar <porque antes de usarla no se ha utili)ado la palabra var para declararla=. En este caso la variable variableAlobal es global a toda la pgina y seguir e$istiendo aunque la funcin finalice su e"ecucin. Adems, si antes de llamar a la funcin e$istiese la variable variableAlobal, como resultado de la e"ecucin de esta funcin, se machacar%a un hipot&tico valor de esa variable y se sustituir%a por >qwerty>.
Nota: 'odemos encontrar ms informacin sobre mbito de variables en un art%culo anterior.
.on esto hemos terminado el tema de las funciones, as% que en adelante nos dedicaremos a otros asuntos tambi&n interesantes, como son los Arrays en Javascript.
Artculo por

46
Parte (:
)rra"s Javascript
#os arra$s, tambi/n llamados tablas o matrices, son la primera estructura de datos (ue podemos aprender en -a)ascript $ en otros lengua+es de programaci&n. 6in duda ser*n imprescindibles para desarrollar programas medianamente a)anzados.
C.1.- Arra%s en Javascript

Vemos ue son los arrays en Javascript, para u! sirven y cmo utili#arlos. Veremos diversas formas de crearlos, as como definir y acceder a sus valores. 'asamos a un nuevo tema en el Manual de Javascript, en el que vamos a conocer nuestra primera estructura de datos. En los lengua"es de programacin e$isten estructuras de datos especiales que nos sirven para guardar informacin ms comple"a que simples variables. Bna estructura t%pica en todos los lengua"es es el Array, que es como una variable donde podemos introducir varios valores, en lugar de solamente uno como ocurre con la variables normales. #os arrays nos permiten guardar varias variables y acceder a ellas de manera independiente, es como tener una variable con distintos compartimentos donde podemos introducir datos distintos. 'ara ello utili)amos un %ndice que nos permite especificar el compartimiento o posicin a la que nos estamos refiriendo.
Nota: #os arrays se introdu"eron en versiones Javascript L.L o superiores, es decir, solo los podemos utili)ar a partir de los navegadores 6.5. 'ara navegadores antiguos se puede simular el array utili)ando sinta$is de programacin orientada a ob"etos, pero la verdad es que actualmente esta limitacin no debe preocuparnos. Adems, dada la comple"idad de la tarea de simular un array por medio de ob"etos, por lo menos en el momento en que nos encontramos y las pocas ocasiones en que lo necesitaremos, opinamos que es me"or olvidarnos de ese asunto y traba"ar simplemente con los arrays normalmente. As% que en este art%culo y los siguientes vamos a ver cmo utili)ar el aut&ntico array de Javascript.
C.1.1.- )reacin de Arra%s (avascript

El primer paso para utili)ar un array es crearlo. 'ara ello utili)amos un ob"eto Javascript ya implementado en el navegador. ,eremos en adelante un tema para e$plicar lo que es la orientacin a ob"etos, aunque no ser necesario para poder entender el uso de los arrays. Esta es la sentencia para crear un ob"eto array:
# r mi'rr & = new 'rr &(!
Esto crea un array en la pgina que esta e"ecutndose. El array se crea sin ning/n contenido, es decir, no tendr ninguna casilla o compartimiento creado. 1ambi&n podemos crear el array Javascript especificando el n/mero de compartimentos que va a tener.
# r mi'rr & = new 'rr &(+0!
En este caso indicamos que el array va a tener L5 posiciones, es decir, L5 casillas donde guardar datos. Es importante que nos fi"emos que la palabra Array en cdigo Javascript se escribe con la primera letra en may/scula. .omo en Javascript las may/sculas y min/sculas si que importan, si lo escribimos en min/scula no funcionar.

47
1anto se indique o no el n/mero de casillas del arra( javascript, podemos introducir en el array cualquier dato. (i la casilla est creada se introduce simplemente y si la casilla no estaba creada se crea y luego se introduce el dato, con lo que el resultado final es el mismo. Esta creacin de casillas es dinmica y se produce al mismo tiempo que los scripts se e"ecutan. ,eamos a continuacin cmo introducir valores en nuestros arrays. miArray\5] S 4R5 miArray\L] S RU miArray\4] S L4U (e introducen indicando entre corchetes el %ndice de la posicin donde quer%amos guardar el dato. En este caso introducimos 4R5 en la posicin 5, RU en la posicin L y L4U en la 4. 4os arra(s en Javascript empiezan siempre en la posicin 5, as% que un array que tenga por e"emplo L5 posiciones, tendr casillas de la 5 a la R. 'ara recoger datos de un array lo hacemos igual: poniendo entre corchetes el %ndice de la posicin a la que queremos acceder. ,eamos cmo se imprimir%a en la pantalla el contenido de un array.
# r mi'rr & = new 'rr &(C! mi'rr &Y0Z = +55 mi'rr &Y+Z = 4 mi'rr &Y2Z = 4HH ;or (i=0Pi<CPiDD!F document.write("0osici3n " D i D " del document.write("<br>"! G rr &: " D mi'rr &YiZ!
0emos creado un array con tres posiciones, luego hemos introducido un valor en cada una de las posiciones del array y finalmente las hemos impreso. En general, el recorrido por arrays para imprimir sus posiciones, o cualquier otra cosa, se hace utili)ando bucles. En este caso utili)amos un bucle 7+8 que va desde el 5 hasta el 4. 'odemos ver el e"emplo en marcha en otra pgina.
C.1.2.- 2ipos de datos en los arra%s

En las casillas de los arrays podemos guardar datos de cualquier tipo. 'odemos ver un array donde introducimos datos de tipo carcter.
mi'rr &Y0Z = "Ool " mi'rr &Y+Z = " " mi'rr &Y2Z = "todos"
2ncluso, en Javascript podemos guardar distintos tipos de datos en las casillas de un mismo array. Es decir, podemos introducir n/meros en unas casillas, te$tos en otras, boleanos o cualquier otra cosa que deseemos.
mi'rr mi'rr mi'rr mi'rr &Y0Z &Y+Z &Y+Z &Y2Z = = = = "des rrolloweb.com" +2L5 0.LJ true
C.1.$.- "eclaracin e inicializacin resumida de Arra%s

En Javascript tenemos a nuestra disposicin una manera resumida de declarar un array y cargar valores en un mismo paso. 7i"&monos en el cdigo siguiente:
# r rr &. pido = Y+2,45," rr & inici li: do en su decl r ci3n"Z
.omo se puede ver, se est definiendo una variable llamada array8apido y estamos indicando en los corchetes varios valores separados por comas. Esto es lo mismo que haver declarado el array con la funcin Array<= y luego haberle cargado los

48
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com valores uno a uno. En el pr$imo art%culo seguiremos viendo cosas relacionadas con los arrays, en concreto aprenderemos a acceder a la longitud de un array.
Artculo por
C.2.- !ongitud de los arra%s

'prendemos m%s cosas sobre el funcionamiento de los arrays y en concreto vemos como utili#ar su propiedad lengt$ para acceder al n*mero de casillas ue tiene. En el art%culo anterior del Manual de Javascript empe)amos a e$plicar el concepto de array y su utili)acin en Javascript. En este art%culo vamos a continuar con el tema, mostrando el uso de su propiedad length. 1odos los arrays en "avascript, aparte de almacenar el valor de cada una de sus casillas, tambi&n almacenan el n/mero de posiciones que tienen. 'ara ello utili)an una propiedad del ob"eto array, la propiedad length. ?a veremos en ob"etos qu& es una propiedad, pero para nuestro caso podemos imaginarnos que es como una variable, adicional a las posiciones, que almacena un n/mero igual al n/mero de casillas que tiene el array. 'ara acceder a una propiedad de un ob"eto se ha de utili)ar el operador punto. (e escribe el nombre del array que queremos acceder al n/mero de posiciones que tiene, sin corchetes ni par&ntesis, seguido de un punto y la palabra length.
# r mi'rr & = new 'rr &(! mi'rr &Y0Z = +55 mi'rr &Y+Z = 4HH mi'rr &Y2Z = M5 document.write("=ongitud del rr &: " D mi'rr &.length!
Este cdigo imprimir%a en pantalla el n/mero de posiciones del array, que en este caso es 6. 8ecordamos que un array con 6 posiciones abarca desde la posicin 5 a la 4. Es muy habitual que se utilice la propiedad length para poder recorrer un array por todas sus posiciones. 'ara ilustrarlo vamos a ver un e"emplo de recorrido por este array para mostrar sus valores.
;or (i=0Pi<mi'rr &.lengthPiDD!F document.write(mi'rr &YiZ! G
0ay que fi"arse que el bucle for se e"ecuta siempre que i valga menos que la longitud del array, e$tra%da de su propiedad length. El siguiente e"emplo nos servir para conocer me"or los recorridos por los arrays, el funcionamiento de la propiedad length y la creacin dinmica de nuevas posiciones. ,amos a crear un array con 4 posiciones y rellenar su valor. 'osteriormente introduciremos un valor en la posicin F del array. 7inalmente imprimiremos todas las posiciones del array para ver lo que pasa.
# r mi'rr & = new 'rr &(2! mi'rr &Y0Z = "-olombi " mi'rr &Y+Z = "8st dos >nidos" mi'rr &Y5Z = ""r sil" ;or (i=0Pi<mi'rr &.lengthPiDD!F document.write("0osici3n " D i D " del rr &: " D mi'rr &YiZ!

49

document.write("<br>"! G
El e"emplo es sencillo. (e puede apreciar que hacemos un recorrido por el array desde 5 hasta el n/mero de posiciones del array <indicado por la propiedad length=. En el recorrido vamos imprimiendo el n/mero de la posicin seguido del contenido del array en esa posicin. 'ero podemos tener una duda al preguntarnos cul ser el n/mero de elementos de este array, ya que lo hab%amos declarado con 4 y luego le hemos introducido un tercero en la posicin F. Al ver la salida del programa podremos contestar nuestras preguntas. (er algo parecido a esto: 'osicin 5 del array: .olombia 'osicin L del array: Estados Bnidos 'osicin 4 del array: null 'osicin 6 del array: null 'osicin E del array: null 'osicin F del array: Crasil (e puede ver claramente que el n/mero de posiciones es G, de la 5 a la F. #o que ha ocurrido es que al introducir un dato en la posicin F, todas las casillas que no estaban creadas hasta la quinta se crean tambi&n. #as posiciones de la 4 a la E estn sin iniciali)ar. En este caso nuestro navegador ha escrito la palabra null para e$presar esto, pero otros navegadores podrn utili)ar la palabra undefined. ?a veremos ms adelante qu& es este null y dnde lo podemos utili)ar, lo importante ahora es que comprendas cmo traba"an los arrays y los utilices correctamente. 'odemos ver el efecto de este script en tu navegador en una pgina a parte. .ontinuaremos el tema de arrays en la siguiente entrega de este manual: Arrays multidimensionales.
Artculo por
C.$.- Arra%s multidimensionales

Vemos u! son los arrays multidimensionales /arrays de m%s de una dimensin0 y cmo utili#arlos. 'dem%s explicamos cmo iniciali#ar arrays en su declaracin. .omo estamos viendo, los arrays son bastante importantes en Javascript y tambi&n en la mayor%a de los lengua"es de programacin. En concreto ya hemos aprendido a crear arrays y utili)arlos en art%culos anteriores del Manual de Javascript. 'ero aun nos quedan algunas cosas importantes que e$plicar, como son los arrays de varias dimensiones. #os arrays multidimensionales son un estructuras de datos que almacenan los valores en ms de una dimensin. #os arrays que hemos visto hasta ahora almacenan valores en una dimensin, por eso para acceder a las posiciones utili)amos tan solo un %ndice. #os arrays de 4 dimensiones guardan sus valores, por decirlo de alguna manera, en filas y columnas y por ello necesitaremos dos %ndices para acceder a cada una de sus posiciones. icho de otro modo, un array multidimensional es como un contenedor que guardara ms valores para cada posicin, es decir, como si los elementos del array fueran a su ve) otros arrays. En Javascript no e$iste un aut&ntico ob"eto array@multidimensinal. 'ara utili)ar estas estructuras podremos definir arrays que donde en cada una de sus posiciones habr otro array. En nuestros programas podremos utili)ar arrays de cualquier dimensin, veremos a continuacin cmo traba"ar con arrays de dos dimensiones, que sern los ms comunes. En este e"emplo vamos a crear un array de dos dimensiones donde tendremos por un lado ciudades y por el otro la temperatura media que hace en cada una durante de los meses de invierno.
# r temper tur s?medi s?ciud d0 = new 'rr &(C! temper tur s?medi s?ciud d0Y0Z = +2

50

temper tur s?medi s?ciud d0Y+Z = +0 temper tur s?medi s?ciud d0Y2Z = ++ # r temper temper tur temper tur temper tur # r temper temper tur temper tur temper tur tur s?medi s?ciud d+ = new 'rr & (C! s?medi s?ciud d+Y0Z = 5 s?medi s?ciud d+Y+Z = 0 s?medi s?ciud d+Y2Z = 2 tur s?medi s?ciud d2 = new 'rr & (C! s?medi s?ciud d2Y0Z = +0 s?medi s?ciud d2Y+Z = J s?medi s?ciud d2Y2Z = +0
.on las anteriores l%neas hemos creado tres arrays de L dimensin y tres elementos, como los que ya conoc%amos. Ahora crearemos un nuevo array de tres elementos e introduciremos dentro de cada una de sus casillas los arrays creados anteriormente, con lo que tendremos un array de arrays, es decir, un array de 4 dimensiones.
# r temper temper tur temper tur temper tur tur s?cuid des = new 'rr & s?cuid desY0Z = temper tur s?cuid desY+Z = temper tur s?cuid desY2Z = temper tur (C! s?medi s?ciud d0 s?medi s?ciud d+ s?medi s?ciud d2
,emos que para introducir el array entero hacemos referencia al mismo sin par&ntesis ni corchetes, sino slo con su nombre. El array temperaturasNcuidades es nuestro array bidimensinal. 1ambi&n es interesante ver cmo se reali)a un recorrido por un array de dos dimensiones. 'ara ello tenemos que hacer un bucle que pase por cada una de las casillas del array bidimensional y dentro de &stas hacer un nuevo recorrido para cada una de sus casillas internas. Es decir, un recorrido por un array dentro de otro. El m&todo para hacer un recorrido dentro de otro es colocar un bucle dentro de otro, lo que se llama un bucle anidado. En este e"emplo vamos a meter un bucle 7+8 dentro de otro. Adems, vamos a escribir los resultados en una tabla, lo que complicar un poco el script, pero as% podremos ver cmo construir una tabla desde Javascript a medida que reali)amos el recorrido anidado al bucle.
document.write("<t ble width=200 border=+ cellp dding=+ cellsp cing=+>"!P ;or (i=0Pi<temper tur s?cuid des.lengthPiDD!F document.write("<tr>"! document.write("<td><b>-iud d " D i D "</b></td>"! ;or (5=0P5<temper tur s?cuid desYiZ.lengthP5DD!F document.write("<td>" D temper tur s?cuid desYiZY5Z D "</td>"! G document.write("</tr>"! G document.write("</t ble>"!
Este script resulta un poco ms comple"o que los vistos anteriormente. #a primera accin consiste en escribir la cabecera de la tabla, es decir, la etiqueta H1AC#EI "unto con sus atributos. .on el primer bucle reali)amos un recorrido a la primera dimensin del array y utili)amos la variable i para llevar la cuenta de la posicin actual. 'or cada iteracin de este bucle escribimos una fila y para empe)ar la fila abrimos la etiqueta H18I. Adems, escribimos en una casilla el numero de la ciudad que estamos recorriendo en ese momento. 'osteriormente ponemos otro bucle que va recorriendo cada una de las casillas del array en su segunda dimensin y escribimos la temperatura de la ciudad actual en cada uno de los meses, dentro de su etiqueta H1 I. Bna ve) que acaba el segundo bucle se han impreso las tres temperaturas y por lo tanto la fila est terminada. El primer bucle contin/a repiti&ndose hasta que todas las ciudades estn impresas y una ve) terminado cerramos la tabla. 'odemos ver el e"emplo en marcha y e$aminar el cdigo del script entero.
C.$.1.- Inicializacin de arra%s

'ara terminar con el tema de los arrays vamos a ver una manera de iniciali)ar sus valores a la ve) que lo declaramos, as% podemos reali)ar de una manera ms rpida el proceso de introducir valores en cada una de las posiciones del array.

51
El m&todo normal de crear un array vimos que era a trav&s del ob"eto Array, poniendo entre par&ntesis el n/mero de casillas del array o no poniendo nada, de modo que el array se crea sin ninguna posicin. 'ara introducir valores a un array se hace igual, pero poniendo entre los par&ntesis los valores con los que deseamos rellenar las casillas separados por coma. ,emoslo con un e"emplo que crea un array con los nombres de los d%as de la semana.
# r di s,em n = new 'rr &("=unes","< rtes","<iSrcoles,","4ue#es","Iiernes",",(b do","%omingo"!
El array se crea con U casillas, de la 5 a la G y en cada casilla se escribe el dia de la semana correspondiente <Entre comillas porque es un te$to=. Ahora vamos a ver algo ms complicado, se trata de declarar el array bidimensional que utili)amos antes para las temperaturas de las ciudades en los meses en una sola l%nea, introduciendo los valores a la ve).
# r temper tur s?cuid des = new 'rr &(new 'rr & (+2,+0,++!, new 'rr &(5,0,2!,new 'rr &(+0,J,+0!!
En el e"emplo introducimos en cada casilla del array otro array que tiene como valores las temperaturas de una ciudad en cada mes. Javascript todav%a tiene una manera ms resumida que la que acabamos de ver, que e$plicamos en el primer art%culo donde tratamos los arrays. 'ara ello simplemente escribimos entre corchetes los datos del array que estamos creando. 'ara acabar vamos a mostrar un e"emplo sobre cmo utili)ar esta sinta$is para declarar arrays de ms de una dimensin.
# r rr &<uch s%imensiones = Y+, Y"hol ", "9ue", "t l", Y"est s", "est mos", "esto&"Z, Y"bien", "m l"Z, " c bo"Z, 2, 5ZP
En este e"emplo hemos creado un array muy poco uniforme, porque tiene casillas con contenido de simples enteros y otras con contenido de cadena y otras que son otros arrays. 'odr%amos acceder a algunas de sus casillas y mostrar sus valores de esta manera:
lert ( rr &<uch s%imensionesY0Z! lert ( rr &<uch s%imensionesY+ZY2Z! lert ( rr &<uch s%imensionesY+ZYCZY+Z!
.on esto hemos llegado al fin de los art%culos que tratan sobre arrays en Javascript y ahora podemos continuar con una peque-a pausa y conse"os que vendrn bien para me"orar nuestra relacin con este lengua"e de programacin.
Artculo por

52
Parte *:
Ep+logos a esta primera parte del ,anual de Javascript

.on estos artculos terminaremos la primera parte del manual de -a)ascript de DesarrolloWeb.com. '(u )eremos por d&nde continuar estas e4plicaciones $ algunos temas de inter/s como el control de errores en los programas.
E.1.- :ausa % conse(os Javascript

6acemos una pausa en el manual de Javascript para ofrecer una serie de consejos *tiles. 0asta aqu% hemos visto la mayor parte de la sinta$is y forma de funcionar de el lengua"e Javascript. Ahora podemos escribir scripts simples que hagan uso de variables, funciones, arrays, estructuras de control y toda clase de operadores. .on todo esto conocemos el lengua"e, pero aun queda mucho camino por delante para dominar Javascript y saber hacer todos los efectos posibles en pginas web, que en definitiva es lo que interesa. e todos modos, este manual nos lo hemos tomado con mucha calma, con intencin de que las personas que no est&n familiari)adas con el mundo de la programacin puedan tambi&n tener acceso al lengua"e y aprendan las t&cnicas bsicas que permitirn afrontar futuros retos en la programacin. Esperamos entonces que la lectura del manual haya sido provechosa para los ms ine$pertos y que ahora puedan entender con facilidad las siguientes lecciones o e"emplos, ya que conocen las bases sobre las que estn implementados. Antes de acabar, vamos a dar una serie de conse"os a seguir a la hora de programar nuestros scripts, que nos pueden ayudar a hacernos la vida ms fcil. Algunos conse"os son nuevos e importantes, otros se han se-alado con anterioridad, pero sin duda viene bien recordar.
E.1.1.- "istintos navegadores

#o primero importante en se-alar es que Javascript es un lengua"e muy dinmico y que ha sido implementado poco a poco, a medida que sal%an nuevos navegadores. (i pensamos en el *etscape 4, el primer navegador que inclu%a Javascript, y el *etscape G o 2nternet E$plorer G nos daremos cuenta que han pasado un mundo de novedades entre ellos. Javascript ha cambiado por lo menos tanto como los navegadores y eso representa un problema para los programadores, porque tienen que estar al tanto de las distintas versiones y la manera de funcionar que tienen.
Actualizado: a d%a de hoy todav%a las diferencias entre los navegadores antiguos y los nuevos es todav%a ms patente. 2ncluso, ahora que aparece el 01M# F, e$isten muchos otros usos donde Javascript tiene valide).
#as bases de "avascript, sobre las que hemos hablado hasta ahora, no han cambiado prcticamente nada. (lo en algunas ocasiones, que hemos se-alado seg/n las conoc%amos @como los arrays por e"emplo@, el lengua"e ha evolucionado un poco.

53
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com (in embargo, a medida que nuevas tecnolog%as como el de mane"arlas. 01M# se desarrollaban, los navegadores han variado su manera
*uestro conse"o es que esteis al tanto de las cosas que funcionan en unos u otros sistemas y que program&is para que vuestras pginas sean compatibles en el mayor n/mero de navegadores. 'ara procurar esto /ltimo es muy aconse"able probar las pginas en varias plataformas distintas. 1ambi&n es muy /til de"ar de lado los /ltimos avances, es decir, no ir a la /ltima, sino ser un poco conservadores, para que las personas que han actuali)ado menos el browser puedan tambi&n visuali)ar los contenidos.
E.1.2.- )onse(os para hacer un cdigo sencillo % #.cil de mantener

Ahora vamos a dar una serie de conse"os para que el cdigo de nuestros scripts sea ms claro y libre de errores. Muchos de ellos ya los hemos se-alado y somos libres de aplicarlos o no, pero si lo hacemos nuestra tarea como programadores puede ser mucho ms agradable, no slo hoy, sino tambi&n el d%a que tengamos que revisar los scripts en su mantenimiento. Btili)a comentarios habitualmente para que lo que ests haciendo en los scripts pueda ser recordado por ti y cualquier persona que tenga que leerlos ms adelante. 1en cuidado con el mbito de las variables, recuerda que e$isten variables globales y locales, que incluso pueden tener los mismos nombres y conoce en cada momento la variable que tiene valide). Escribe un cdigo con suficiente claridad, que se consigue con saltos de l%nea despu&s de cada instruccin, un sangrado adecuado <poner mrgenes a cada l%nea para indicar en qu& bloque estn incluidas=, utili)ar las llaves ^_ siempre, aunque no sean obligatorias y en general mantener siempre el mismo estilo a la hora de programar. Aplica un poco de consistencia al mane"o de variables. eclara las variables con var. *o cambies el tipo del dato que contiene <si era num&rica no pongas luego te$to, por e"emplo=. ales nombres comprensibles para saber en todo momento qu& contienen. 2ncluso a la hora de darles nombre puedes aplicar una norma, que se trata de que indiquen en sus nombres el tipo de dato que contienen. 'or e"emplo, las variables de te$to pueden empe)ar por una s <de (tring=, las variables num&ricas pueden empe)ar por una n o las boleanas por una b. 'rueba tus scripts cada poco a medida que los vas programando. 'uedes escribir un tro)o de cdigo y probarlo antes de continuar para ver que todo funciona correctamente. Es ms fcil encontrar los errores de cdigo en bloques peque-os que en bloques grandes.
En el resto de esta primera parte del manual de Javascript vamos a ver un par de cosas tambi&n fundamentales en el traba"o del d%a a d%a con este lengua"e, como son la deteccin de errores. Adems, os de"amos unas referencias importantes para continuar con el aprendi)a"e: Manual de Javascript 22: la segunda parte de este manual abordar usos de Javascript para control de los elementos de las pginas web. ,ideotutorial de Javascript: estamos publicando una serie de videotutoriales de Javascript que te encantarn si quieres aprender por la prctica. Javascript a fondo: todo lo que tiene que ver con Javascript lo encontrars en esta seccin de esarrollo!eb.com.
Artculo por
E.2.- 2ratamiento de errores en (avascript

Vamos a explicar los errores comunes ue podemos cometer y cmo evitarlos y depurarlos. 'dem%s veremos una pe ue9a conclusin a la primera parte del manual. 0emos terminado ya de e$plicar todo el contenido de la primera parte del manual de "avascript, pero aun tenemos algunas cosas importantes que tratar. En concreto en este art%culo vamos a e$plicar los errores comunes que podemos cometer y cmo evitarlos y depurarlos. Adems veremos una peque-a conclusin a esta parte del manual.

54
E.2.1.- -rrores comunes en Javascript

.uando e"ecutamos los scripts pueden ocurrir dos tipos de errores de sinta$is o de e"ecucin, los vemos a continuacin. Errores de sinta$is ocurren por escribir de manera errnea las l%neas de cdigo, equivocarse a la hora de escribir el nombre de una estructura, utili)ar incorrectamente las llaves o los par&ntesis o cualquier cosa similar. Estos errores los indica "avascript a medida que est cargando los scripts en memoria, lo que hace siempre antes de e"ecutarlos, como se indic en los primeros cap%tulos. .uando el anali)ador sintctico de "avascript detecta un error de estos se presenta el mensa"e de error. Errores de e"ecucin ocurren cuando se estn e"ecutando los scripts. 'or e"emplo pueden ocurrir cuando llamamos a una funcin que no ha sido definida. "avascript no indica estos errores hasta que no se reali)a la llamada a la funcin. #a manera que tiene "avascript de mostrar un error puede variar de un navegador a otro. En versiones antiguas se mostraba una ventanita con el error y un botn de aceptar, tanto en 2nternet E$plorer como en *etscape. En la actualidad los errores de "avascript permanecen un poco ms ocultos al usuario. Esto viene bien, porque si nuestras pginas tienen alg/n error en alguna plataforma no ser muy molesto para el usuario que en muchas ocasiones ni se dar cuenta. (in embargo para el programador puede ser un poco ms molesto de revisar y se necesitar conocer la manera de que se muestren los errores para que puedan ser reparados. En versiones de 2nternet E$plorer mayores que la E se muestra el error en la barra de estado del navegador y se puede ver una descripcin ms grande del error si le damos un doble clic3 al icono de alerta amarillo que aparece en la barra de estado. En *etscape aparece tambi&n un mensa"e en la barra de estado que adems nos indica que para mostrar ms informacin debemos teclear >"avascript:> en la barra de direcciones <donde escribimos las B8# para acceder a las pginas=. .on eso conseguimos que apare)ca la .onsola "avascript, que nos muestra todos los errores que se encuentran en las pginas. 1ambi&n podemos cometer fallos en la programacin que hagan que los scripts no funcionen tal y como desebamos y que "avascript no detecta como errores y por lo tanto no muestra ning/n mensa"e de error. 'or de"arlo claro vamos a ver un e"emplo en el que nuestro programa puede no funcionar como deseamos sin que "avascript ofre)ca ning/n mensa"e de error. En este e"emplo tratar%amos de sumar dos cifras pero si una de las variables es de tipo te$to podr%amos encontrarnos con un error.
# r numero+ = 2C # r numero2 = "42" # r sum = numero+ D numero2
a.unto vale la variable sumab .omo muchos ya sab&is, la variable suma vale >46E4> porque al intentar sumar una variable num&rica y otra te$tual, se tratan a las dos como si fueran de tipo te$to y por lo tanto, el operador D se aplica como una concatenacin de cadenas de caracteres. (i no estamos al tanto de esta cuestin podr%amos tener un error en nuestro script ya que el resultado no es el esperado y adems el tipo de la variable suma no es num&rico sino cadena de caracteres.
E.2.2.- -vitar errores comunes

,amos a ver ahora una lista de los errores t%picos cometidos por ine$pertos en la programacin en general y en "avascript en particular, y por no tan ine$pertos. Btili)ar S en e$presiones condicionales en lugar de SS es un error dif%cil de detectar cuando se comete, si utili)amos un solo igual lo que estamos haciendo es una asignacin y no una comparacin para ver si dos valores son iguales. *o conocerse la precedencia de operadores y no utili)ar par&ntesis para agrupar las operaciones que se desea reali)ar. En este caso nuestras operaciones pueden dar resultados no deseados. Bsar comillas dobles y simples errneamente. 8ecuerda que se pueden utili)ar comillas dobles o simples indistintamente, con la norma siguiente: dentro de comillas dobles se deben utili)ar comillas simples y viceversa. +lvidarse de cerrar una llave o cerrar una llave de ms.

55
.olocar varias sentencias en la misma l%nea sin separarlas de punto y coma. Esto suele ocurrir en los mane"adores de eventos, como onclic3, que veremos ms adelante. Btili)ar una variable antes de iniciali)arla o no declarar las variables con var antes de utili)arlas tambi&n son errores comunes. 8ecuerda que si no la declaras puedes estar haciendo referencia a una variable global en lugar de una local. .ontar las posiciones de los arrays a partir de L. 8ecuerda que los arrays empie)an por la posicin 5.
E.2.$.- "epurar errores (avascript

.ualquier programa es susceptible de contener errores. "avascript nos informar de muchos de los errores de la pgina: los que tienen relacin con la sinta$is y los que tienen lugar en el momento de la e"ecucin de los scripts a causa de equivocarnos al escribir el nombre de una funcin o una variable. (in embargo, no son los /nicos errores que nos podemos encontrar, tambi&n estn los errores que ocurren sin que "avascript muestre el correspondiente mensa"e de error, como vimos anteriormente, pero que hacen que los programas no funcionen como esperbamos.
Nota: 'ara aprender a utili)ar las herramientas de deteccin de errores Javascript ms populares, recomendamos especialmente ver el videotutorial sobre detectar errores Javascript en pginas web.
'ara todo tipo de errores, unos ms fciles de detectar que otros, debemos utili)ar alguna t&cnica de depuracin que nos ayude a encontrarlos. #engua"es de programacin ms potentes que el que tratamos ahora incluyen importantes herramientas de depuracin, pero en "avascript debemos contentarnos con una rudimentaria t&cnica. (e trata de utili)ar una funcin predefinida, la funcin alert<= que recibe entre par&ntesis un te$to y lo muestra en una peque-a ventana que tiene un botn de aceptar. .on la funcin alert<= podemos mostrar en cualquier momento el contenido de las variables que estamos utili)ando en nuestros scripts. 'ara ello ponemos entre par&ntesis la variable que deseamos ver su contenido. .uando se muestra el contenido de la variable el navegador espera a que apretemos el botn de aceptar y cuando lo hacemos contin/a con las siguientes instrucciones del script. Este es un sencillo e"emplo sobre cmo se puede utili)ar la funcin alert<= para mostrar el contenido de las variables.
# r n? ctu l = 0 # r sum = 0 while (sum <C00!F n? ctu l DD sum D= sum D n? ctu l lert("n? ctu l # le " D n? ctu l D " & sum G
# le " D sum !
.on la funcin alert<= se muestra el contenido de las dos variables que utili)amos en el script. Algo similar a esto es lo que tendremos que hacer para mostrar el contenido de las variables y saber cmo estn funcionando nuestros scripts, si todo va bien o hay alg/n error.
E.2.&.- )onclusin
0asta aqu% hemos conocido la sinta$is "avascript en profundidad. Aunque aun nos quedan cosas importantes de sinta$is, la visin que has podido tener del lengua"e ser suficiente para enfrentarte a los problemas ms fundamentales. En adelante presentaremos otros reporta"es para aprender a utili)ar los recursos con los que contamos a la hora de hacer efectos en pginas web. ,eremos la "erarqu%a de ob"etos del navegador, cmo construir nuestros propios ob"etos, las funciones predefinidas de "avascript, caracter%sticas del 01M# inmico, traba"o con formularios y otras cosas importantes para dominar todas las posibilidades del lengua"e.

56
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 1odo ello en nuestro manual de Javascript 22 y en el 1aller de Javascript.
Artculo por
E.$.- )onse(os para escri ir cdigo Javascript

En este artculo puedes encontrar varios consejos bastante interesantes a la $ora de programar cdigo Javascript. (i estas dando tus primeros pasos en Javacript y estas empe)ando ya a ser sucio y desordenado... *o tienes e$cusa da un giro para escribir el cdigo ordenado y todo ser ms sencillo. #os foros estan llenos de peticiones de informacin sobre A"a$, +M y como se usan algunas librer%as o efectos. 0ay una e$traordinaria cantidad de informacin, scripts, librer%as que estan siendo desarrollados, blogs y nuevos sitios especiali)ados en esta temtica, slo necesitas un poco de tiempo y echarle un vista)o... es muy fcil los me"ores los encuentras en igg.com o en del.icio.us, se acabaron aquellos d%as en el que Javascript y el 01M# se convirtieron en persona non grata como habilidad principal en tu .,. #a gran mayor%a de cdigo Javascript es hoy en dia mucho ms limpio que en la >era> 01M#.
Ahora es un buen momento para convertirte en un entusiasta de Javascript. Aunque algunos defectos que ocurrieron tiempo atras se repiten sin embargo. Aqu% os de"o una series de conse"os que os har ms sencillo mantener tu cdigo Javascript ordenado, algunos conse"os son demasiado obvios pero todos sabemos que el hombre es el /nico animal que...
E.$.1.- )onserva la sinta<is % estructura de tu cdigo limpia % ordenada

Esto significa que guardes por e"emplo un l%mite de longitud de l%nea <T5 caracteres= y que programes funciones ra)onablemente peque-as. Bn fallo es pensar que en una funcin larga lo podemos hacer todo. 1ener un tama-o ra)onable para tus funciones significa que las podrs reutili)ar cuando amplies el cdigo, tampoco seas e$tremista y hagas funciones de una o dos l%neas esto puede llegar a ser ms confuso que usar una /nica funcin. Este es un e"emplo que muestra cual es la "usta medida en cuanto al tama-o de las funciones y la divisin de las tareas:
;unction tool=in)s(!F # r tools = document.cre te8lement(XulX!P # r item = document.cre te8lement(XliX!P # r itemlin) = document.cre te8lement(X X!P itemlin).set'ttribute(Xhre;X, X[X!P itemlin). ppend-hild(document.cre te1e@t6ode(XcloseX!!P itemlin).onclic) = ;unction(!Fwindow.close(!PG item. ppend-hild(itemlin)!P tools. ppend-hild(item!P # r item2 = document.cre te8lement(XliX!P # r itemlin)2 = document.cre te8lement(X X!P itemlin)2.set'ttribute(Xhre;X, X[X!P itemlin)2. ppend-hild(document.cre te1e@t6ode(XprintX!!P itemlin)2.onclic) = ;unction(!Fwindow.print(!PG item2. ppend-hild(itemlin)2!P tools. ppend-hild(item2!P document.bod&. ppend-hild(tools!P G
'uedes optimi)ar esta funcin separando cada tarea con su propia funcin:

57
;unction tool=in)s(!F # r tools = document.cre te8lement(XulX!P # r item = document.cre te8lement(XliX!P # r itemlin) = cre te=in)(X[X, XcloseX, close\indow!P item. ppend-hild(itemlin)!P tools. ppend-hild(item!P # r item2 = document.cre te8lement(XliX!P # r itemlin)2 = cre te=in)(X[X, XprintX, print\indow!P item2. ppend-hild(itemlin)2!P tools. ppend-hild(item2!P document.bod&. ppend-hild(tools!P G ;unction print\indow(!F window.print(!P G ;unction close\indow(! F window.close(!P G ;unction cre te=in)(url,te@t,;unc!F # r temp = document.cre te8lement(X X!P temp.set'ttribute(Xhre;X, url!P temp. ppend-hild(document.cre te1e@t6ode(te@t!!P temp.onclic) = ;uncP return tempP G
E.$.2.- 'tiliza inteligentemente los nom res de varia les % #unciones

Esta es un t&cnica esencial de programacin, utili)a nombres de variables y funciones que sean totalmente descriptivos e incluso otra persona pueda llegar a plantearse que funcin reali)an antes de ver el cdigo. 8ecuerda que es correcto el uso de guiones o may/sculas para concatenar diferentes palabras, en este caso concreto de es ms t%pico el uso de may/sculas debido a la sinta$is del lengua"e, <e". getElementsCy1ag*ame<==.
- mbioEorm toEech (!P c mbio?;orm to?;ech (!P
E.$.$.- )omenta el cdigo

Aracias a los comentarios puedes librarte de ms de un quebradero de cabe)a, es me"or resolver el problema una /nica ve). .mo puedes comprobar en cualquier libro de programacin cada l%nea tiene comentarios e$plicando su ob"etivo.
E.$.&.- "i#erencia las varia les dependiendo de su importancia

Este paso es simple: .oloca aquellas variables que son usadas durante todo el script en la cabecera del cdigo, de esta maneras siempre sabrs donde encontrar estas variables que son las que determinan el resultado de nuestro cdigo.
;unction tool=in)s(!F # r tools, close\in/tem, close\in=in), print\in/tem, print\in=in)P // # ri bles tempor les # r print=in)= bel = UprintUP # r close=in)= bel = UcloseUP[ tools = document.cre te8lement(UulU!P close\in/tem = document.cre te8lement(UliU!P close\in=in) = cre te=in)(U[X, close=in)= bel, close\indow!P close\in/tem. ppend-hild(close\in=in)!P tools. ppend-hild(close\in/tem!P print\in/tem = document.cre te8lement(UliU!P

58

print\in=in) = cre te=in)(U[X, print=in)= bel, print\indow!P print\in/tem. ppend-hild(print\in=in)!P tools. ppend-hild(print\in/tem!P document.bod&. ppend-hild(tools!P G
E.$.*.- 9epara el te<to del cdigo

'uedes separar el te$to del cdigo, utili)ando un documento llamado te$to."s en formato J(+*. Bn e"emplo que funciona muy bien podr%a ser:
# r loc les = F XenX: F Xhome0 ge'nswer=in)X:X'nswer 9uestion nowX, Xhome0 geQuestion=in)X:X's) 9uestion nowX, Xcont ctOo#er<ess geX:X-lic) to send this in;o s mess geX, Xlo ding<ess geX : X=o ding &our d t ...X, XnoQ'mess geX : XWou h #e no Questions or 'nswers &etX, X9uestions%e; ultX: XWou h #e not s)ed n& 9uestions &etX, X nswers%e; ultX: XWou h #e not nswered n& 9uestions &et.X, X9uestionOe dingX : X<& QuestionsX, X nswersOe dingX : X<& 'nswersX, Xsee'll'nswersX : X,ee ll &our 'nswersX, Xsee'llQuestionsX : X,ee ll &our QuestionsX, Xre;reshX: Xre;reshX G, XesX: F Xhome0 ge'nswer=in)X:X.esponde un pregunt X, Xhome0 geQuestion=in)X:XO : un pregunt X, Xcont ctOo#eX : X- rg ndo d tos...X, XnoQ'mess geX : X6o 9ued n pregunt sX, X9uestions%e; ultX: XQued n pregunt s por responderX, X nswers%e; ultX: X6o 9ued n pregunt s pendientesX, X9uestionOe dingX : X<is pregunt sX, X nswersOe dingX : X<is respuest sX, Xsee'll'nswersX : XIer tod s l s respuest sX, Xsee'llQuestionsX : XIer tod s l s pregunt sX, Xre;reshX: X.e;resc rX G, X;rX: F G XdeX: F G GP
Esto permitir%a a cualquiera que no es programador traducir el te$to del script, cambiando unicamente las etiquetas sin necesidad de acceder al cdigo.
E.$.,.- "ocumenta el cdigo

Escribe una buena documentacion de tu script J librer%a o efecto. Bna buena documentacin da calidad al cdigo, sino preguntate porque e$iste la clsica documentacin en cualquier A'2 con todas las posibles propiedades y parametros, pero sin duda lo me"or de todo es e$plicar con e"emplos que contienen una lista de posibilidades.
Artculo por
Manu Gutierrez

59

Manual Programacion Javascript Parte1 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Programacion Javascript Parte1 PDF

Cargado por

Copyright:

Formatos disponibles

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

Autores del manual

Director de DesarrolloWeb.com http://www.desarrolloweb.com (36 captulos)

http://www.tu uncion.com (! captulo)

Manual de programacin en Javascript: www.desarrolloweb.com/manuales/20/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

1.1.- Introduccin a Javascript

Manual de programacin en Javascript: www.desarrolloweb.com/manuales/20/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

1.2.- Algo de historia so re Javascript

Manual de programacin en Javascript: www.desarrolloweb.com/manuales/20/

1.2.1.- !lega Javascript

1.2.2.- "i#erencias entre distintos navegadores

Miguel Angel Alvarez

1.$.- "i#erencias entre Java % Javascript

Manual de programacin en Javascript: www.desarrolloweb.com/manuales/20/

1.&.- Antes de empezar

1.&.1.- 'sos de Javascript

Manual de programacin en Javascript: www.desarrolloweb.com/manuales/20/

1.&.2.- Qu necesitas para tra a(ar con Javascript

1.&.$.- )onocimientos previos recomenda les

Miguel Angel Alvarez

1.*.- +ersiones de navegadores % de Javascript

Manual de programacin en Javascript: www.desarrolloweb.com/manuales/20/

Miguel Angel Alvarez

1.,.- -#ectos r.pidos con Javascript

1.,.1.- A rir una ventana secundaria

Manual de programacin en Javascript: www.desarrolloweb.com/manuales/20/

1.,.2.- 'n mensa(e de ienvenida

'uedes ver el e"emplo en una pgina a parte.

1.,.$.- /echa actual

1.,.&.- 0otn de volver

Miguel Angel Alvarez

Manual de programacin en Javascript: www.desarrolloweb.com/manuales/20/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Primeros pasos con el lenguaje Javascript

2.1.- -l lengua(e Javascript

2.1.1.- Javascript se escri e en el documento 12M!

2.1.2.- !a colocacin de los scripts s3 4ue importa

Manual de programacin en Javascript: www.desarrolloweb.com/manuales/20/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

2.2.- Maneras de e(ecutar scripts Javascript

2.2.1.- -(ecucin directa

2.2.2.- 5espuesta a un evento

Miguel Angel Alvarez

2.$.- 6cultar scripts Javascript en navegadores antiguos

Manual de programacin en Javascript: www.desarrolloweb.com/manuales/20/

2.$.1.- 6cultar el cdigo Javascript con comentarios 12M!

2.$.2.- Mostrar un mensa(e para navegadores antiguos con 7869)5I:2;

ctu li: r tu #ersi3n de

Manual de programacin en Javascript: www.desarrolloweb.com/manuales/20/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

2.&.- M.s so re colocar scripts

2.&.1.- Indicar el lengua(e 4ue estamos utilizando

2.&.2.- Incluir #icheros e<ternos de Javascript

Miguel Angel Alvarez

2.*.- 9inta<is Javascript

Manual de programacin en Javascript: www.desarrolloweb.com/manuales/20/

2.*.1.- )omentarios en el cdigo

2.*.2.- Ma%=sculas % min=sculas