Javascript

Veamos qu es JavaScript y las posibilidades que nos ofrece utilizar este lenguaje a la hora de desarrollar pginas web.
Por Miguel Angel Alvarez

Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
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 DesarrolloWeb.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 lenguaje de programacin, como son las variables, operadores, estructuras de control, funciones, etc. La segunda parte del manual la dedicaremos a explorar temas ms especficos sobrecmo Javascript nos puede ayudar a aplicar dinamismo a una pgina web, a travs del control dinmico de elementos de la pgina y la interaccin con el usuario.
Nota: Por tanto, en este primer manual encontraris que se ofrece mucha ms informacin terica tpica sobre lenguajes de programacin. Ser esencial para saber cmo dar los primeros pasos en la programacin, pero quizs resulte un poco ms aburrida que la segunda parte, donde aprenderemos a alterar dinmicamente la pgina web, responder a acciones del usuario, etc.
Nosotros hemos querido explicar las cosas con detenimiento, para que aprender Javascript con este manual est al alcance de personas incluso sin conocimientos de programacin. No obstante, en DesarrolloWeb.com existen diversos manuales ms bsicos todava para aprender a programar, como puede ser el manual de Pginas dinmicas o la introduccin a la programacin.,
Sin embargo, quizs personas ms experimentadas puedan preferir pasar directamente a la segunda parte de este manual, donde explicaremos cosas ms prcticas y volver sobre artculos puntuales de este manual para utilizarlos como referencia a medida que vayan necesitando conocer la sintaxis de determinadas estructuras de control, operadores del lenguaje, construccin de funciones, etc.
En este artculo pretendemos explicar qu Javascript y para qu sirve este lenguaje, al menos en lneas generales. A lo largo de ste y los prximos artculos pretendemos que las personas tengan una idea ms o menos clara sobre qu es Javascript, las posibilidades de del lenguaje o
usos ms comunes y los modos de trabajo que podemos emplear para desarrollar nuestros propios scripts.
Nota: Otro recurso que queremos recomendar para aprender Javascript, especialmente indicado para las personas con menos experiencia, es el Videotutorial de Javascript.
Qu es Javascript
Javascript es un lenguaje de programacin utilizado para crear pequeos programitas encargados de realizar acciones dentro del mbito de una pgina web. Con 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 ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso, y tal vez el nico, con que cuenta este lenguaje es el propio navegador.
Javascript es el siguiente paso, despus del HTML, que puede dar un programador de la web que decida mejorar sus pginas y la potencia de sus proyectos. Es un lenguaje de programacin bastante sencillo y pensado para hacer las cosas con rapidez, a veces con ligereza. Incluso las personas que no tengan una experiencia previa en la programacin podrn aprender este lenguaje con facilidad y utilizarlo en toda su potencia con slo un poco de prctica.
Entre las acciones tpicas que se pueden realizar en Javascript tenemos dos vertientes. Por 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. Por el otro, javascript nos permite ejecutar 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 lenguaje con muchas posibilidades, permite la programacin de pequeos scripts, pero tambin de programas ms grandes, orientados a objetos, con funciones, estructuras de datos complejas, etc. Toda esta potencia de Javascript se pone a disposicin del programador, que se convierte en el verdadero dueo y controlador de cada cosa que ocurre en la pgina.
En este manual vamos a tratar de acercarnos a este lenguaje en profundidad y conocer todos sus secretos y mtodos de trabajo. Al final del manual seremos capaces de controlar el flujo en
nuestros programas Javascript y saber cmo colocar scripts para resolver distintas necesidades que podamos tener. Todo lo que veremos a continuacin nos servir de base para adentrarnos ms adelante en el desarrollo de pginas enriquecidas del lado del cliente.
Algunas curiosidades relativas a la historia de Javascript. Relatamos los orgenes y etimologas de este lenguaje de programacin de pginas web.
En Internet se han creado multitud de servicios para realizar muchos tipos de comunicaciones, como correo, charlas, bsquedas de informacin, etc. Pero ninguno de estos servicios se ha desarrollado tanto como el Web. Si estamos leyendo estas lneas no vamos a necesitar ninguna explicacin de lo que es el web, pero si podemos hablar un poco sobre cmo se ha ido desarrollando con el paso de los aos.
El Web es un sistema Hipertexto, una cantidad de dimensiones gigantes de textos interrelacionados por medio de enlaces. Cada una de las unidades bsicas donde podemos encontrar informacin son las pginas web. En un principio, para disear este sistema de pginas con enlaces se pens en un lenguaje que permitiese presentar cada una de estas informaciones junto con unos pequeos estilos, este lenguaje fue el HTML.
Conforme fue creciendo el Web y sus distintos usos se fueron complicando las pginas y las acciones que se queran realizar a travs de ellas. Al poco tiempo qued patente que HTML no era suficiente para realizar todas las acciones que se pueden llegar a necesitar en una pgina web. En otras palabras, HTML se haba quedado corto ya que slo sirve para presentar el texto 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 pequeas funcionalidades ms all de los propios enlaces. El primer ayudante para cubrir las necesidades que estaban surgiendo fue Java, que es un lenguaje de propsito general, pero que haba creado una manera de incrustar programas en pginas web. A travs de la tecnologa de los Applets, se poda crear pequeos programas que se ejecutaban en el navegador dentro de las propias pginas web, pero que tenan posibilidades similares a los programas de propsito general. La programacin de Applets fue un gran avance y Netscape, por aquel entonces el navegador ms popular, haba roto la primera barrera del HTML al hacer posible la programacin dentro de las pginas web. No cabe duda que la aparicin de los Applets supuso un gran avance en la historia del web, pero no ha
sido una tecnologa definitiva y muchas otras han seguido implementando el camino que comenz con ellos.
Llega Javascript
Netscape, despus de hacer sus navegadores compatibles con los applets, comenz a desarrollar un lenguaje de programacin al que llam LiveScript que permitiese crear pequeos programas en las pginas y que fuese mucho ms sencillo de utilizar que Java. De modo que el primer Javascript se llamo LiveScript, pero no dur mucho ese nombre, pues antes de lanzar la primera versin del producto se forj una alianza con Sun Microsystems, creador de Java, para desarrollar en conjunto ese nuevo lenguaje.
La alianza hizo que Javascript se diseara como un hermano pequeo de Java, solamente til dentro de las pginas web y mucho ms fcil de utilizar, de modo que cualquier persona, sin conocimientos de programacin pudiese adentrase en el lenguaje y utilizarlo a sus anchas. Adems, para programar Javascript no es necesario un kit de desarrollo, ni compilar los scripts, ni realizarlos en ficheros externos al cdigo HTML, como ocurra con los applets.
Netscape 2.0 fue el primer navegador que entenda Javascript y su estela fue seguida por otros clientes web como Internet Explorer a partir de la versin 3.0. Sin embargo, la compaa Microsoft nombr a este lenguaje como JScript y tena ligeras diferencias con respecto a Javascript, algunas de las cuales perduran hasta el da de hoy.
Diferencias entre distintos navegadores

Como hemos dicho el Javascript de Netscape y el de Microsoft Internet Explorer tena ligeras diferencias, pero es que tambin el propio lenguaje fue evolucionando a medida que los navegadores presentaban sus distintas versiones y a medida que las pginas web se hacan ms dinmicas y ms exigentes las necesidades de funcionalidades. Las diferencias de funcionamiento de Javascript han marcado las historia del lenguaje 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 da de hoy, siguen habiendo muchas diferencias y para solucionarlo han surgido muchos productos como los Frameworks Javascript, que ayudan a realizar funcionalidades avanzadas de DHTML 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 lenguaje y aclararemos que Java y Javascript son dos cosas distintas, en el artculo sobre las diferencias de Java y Javascript.
Java y Javascript son dos productos distintos. Ponemos 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 tpicas asociaciones que se se hacen al oir hablar de Javascript. Nos referimos a relacionarlo con otro lenguaje de programacin, llamado Java, que no tiene mucho que ver. Realmente Javascript se llam as porque Netscape, que estaba aliado a los creadores de Java en la poca, quiso aprovechar el conocimiento y la percepcin que las personas tenan del popular lenguaje. Con todo, se cre un producto que tena ciertas similitudes, como la sintaxis del lenguaje o el nombre. Se hizo entender que era un hermano pequeo y orientado especficamente para hacer cosas en las pginas web, pero tambin se hizo caer a muchas personas en el error de pensar que son lo mismo. Queremos que quede claro que Javascript no tiene nada que ver con Java, salvo en sus orgenes, como se ha podido leer hace unas lneas. Actualmente son productos totalmente distintos y no guardan entre si ms relacin que la sintaxis idntica y poco ms. Algunas diferencias entre estos dos lenguajes son las siguientes:
Compilador. Para programar en Java necesitamos un Kit de desarrollo y un compilador. Sin embargo, Javascript no es un lenguaje 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 lenguaje de programacin orientado a objetos. (Ms tarde veremos que quiere decir orientado a objetos, para el que no lo sepa todava) Javascript no es orientado a objetos, esto quiere decir que podremos programar sin necesidad de crear clases, tal como se realiza en los lenguajes de programacin estructurada como C o Pascal.
Propsito. Java es mucho ms potente que Javascript, esto es debido a que Java es un lenguaje 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 ejecuten en pginas web.
Estructuras fuertes. Java es un lenguaje 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. Por su parte Javascript no tiene esta caracterstica, 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. Como vemos Java es mucho ms complejo, aunque tambin ms potente, robusto y seguro. Tiene ms funcionalidades que Javascript y las diferencias que los separan son lo suficientemente importantes como para distinguirlos fcilmente.
Mostramos ejemplos de pginas que emplean JavaScript en su desarrollo y comentamos las aplicaciones necesarias para empezar a programar.
Hay varios puntos que queremos comentar como introduccin en el Manual de Javascript y que podrs querer conocer antes de comenzar a programar. Primero sera bueno hacernos una idea ms concreta de las posibles aplicaciones que podra tener el lenguaje y que se pueden encontrar en innumerables sitios web. Adems tambin queremos comentar las herramientas y conocimientos previos que necesitamos para ponernos manos a la obra.
Usos de Javascript
Quizs a da de hoy sobra decir para qu sirve Javascript, pero veamos brevemente algunos usos de este lenguaje que podemos encontrar en el web para hacernos una idea de las posibilidades que tiene.
Sin ir ms lejos, DesarrolloWeb.com utiliza Javascript para el men superior, que muestra diferentes enlaces dentro de cada opcin principal. Vamos cambiando la pgina cada cierto tiempo, pero en el diseo actual de este sitio web, elementos como el recuadro de "Login" tambin tienen su dinamismo con Javascript.
Actualmente casi todas las pginas un poco avanzadas utilizan Javascript, pues se ha vuelto una de las insignias de lo que se denomina la Web 2.0 y la experiencia enriquecida de usuario. Por ejemplo, webs tan populares como Facebook, Twitter o
Youtube usan Javascript a raudales. Para ser ms concretos, cuando en la red social apretamos un enlace para comentar algo, se muestra en la pgina un pequeo formulario que aparece como por arte de magia y luego se enva sin salirse de la propia pgina. Tambin cuando votamos por un vdeo en Youtube o cuando se cuentan los caracteres que llevamos escritos en los mini-post de Twitter, se utiliza Javascript para realizar pequeas funcionalidades que no es posible realizar con HTML slo. En realidad se pueden ver ejemplos de Javascript dentro de cualquier pgina un poco compleja. Algunos que habremos visto en innumerables ocasiones son calendarios dinmicos para seleccionar fechas, calculadoras o convertidores de divisas, editores de texto enriquecido, navegadores dinmicos, etc.
Es mucho ms habitual encontrar Javascript para realizar efectos simples sobre pginas web, o no tan simples, como pueden ser navegadores dinmicos, apertura de ventanas secundarias, validacin de formularios, etc. Nos atrevemos a decir que este lenguaje es realmente til para estos casos, pues estos tpicos efectos tienen la complejidad justa para ser implementados en cuestin de minutos sin posibilidad de errores. Sin embargo, aparte de esos unos simples ejemplos, podemos encontrar dentro de Internet 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. Ejemplos claros son las aplicaciones de ofimatica online, como Google Docs, Office Online o Google Calendar.
Qu necesitas para trabajar con Javascript

Para programar en Javascript necesitamos bsicamente lo mismo que para desarrollar pginas web con HTML. Un editor de textos y un navegador compatible con Javascript. Cualquier ordenador mnimamente actual posee de salida todo lo necesario para poder programar en Javascrip. Por ejemplo, un usuario de Windows dispone dentro de su instalacin tpica de sistema operativo, de un editor de textos, el Bloc de notas, y de un navegador: Internet Explorer.
Nota: Usuarios que deseen herramientas ms avanzadas pueden encontrar en Internet fcilmente programas similares en la seccin de programas para desarrolladores.
Permitidme una recomendacin con respecto al editor de textos. Se trata de que, aunque el Bloc de Notas es suficiente para empezar, tal vez sea muy til contar con otros programas que nos ofrecen mejores prestaciones a la hora de escribir las lneas de cdigo. Estos editores avanzados tienen algunas ventajas como que colorean los cdigos de nuestros scripts, nos permiten trabajar con varios documentos simultneamente, tienen ayudas, etc. Entre otros queremos destacar Komodo Edit, Notepad++ o UltraEdit.
Conocimientos previos recomendables

Lo cierto es que no hace falta tener mucha base de conocimientos para ponerse a programar en Javascript. Lo ms seguro es que si lees estas lneas ya sepas todo lo necesario para trabajar, 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.
No obstante, sera bueno tener un dominio avanzado de HTML, al menos el suficiente para escribir cdigo en ese lenguaje sin tener que pensar qu es lo que ests haciendo. Tambin ser til un conocimiento medio sobre CSS y quizs alguna experiencia previa sobre algn lenguaje de programacin, aunque en este manual de DesarrolloWeb.com vamos a tratar de explicar Javascript incluso para personas que no hayan programado nunca.
En el siguiente artculo seguiremos con temas que sirven de introduccin al lenguaje de scripting del lado del cliente viendo las algunas diferencias de Javascript que existen en las versiones de navegadores que han ido apareciendo.
Presentamos las diferentes versiones de JavaScript, los navegadores que las aceptan y sus contribuciones con respecto a las predecesoras.
Para continuar con la introduccin al lenguaje que estamos viendo en el Manual de Javascript, tambin resulta apropiado introducir las distintas versiones de Javascript que existen y que han evolucionado en conjunto con las versiones de navegadores. El lenguaje ha ido avanzando durante sus aos de vida e incrementando sus capacidades. En un principio poda realizar muchas cosas en la pgina web, pero tena pocas instrucciones para crear efectos especiales. Con el tiempo tambin el HTML ha avanzado y se han creado nuevas caractersticas como las capas, que permiten tratar y maquetar los documentos de manera distinta. Javascript ha avanzado tambin y para manejar todas estas nuevas caractersticas se han creado nuevas instrucciones y recursos. Para resumir vamos a comentar las distintas versiones de Javascript:
Actualizado: En el momento de actualizar este artculo, podemos decir que no tenemos que preocuparnos mucho de las versiones de Javascript que puedan haber existido. Realmente cualquier navegador medianamente moderno tendr ahora todas las funcionalidades de Javascript que vayamos a necesitar y
sobre todo, las que podamos utilizar en nuestros primeros pasos con el lenguaje. No obstante puede venir bien conocer las primeras versiones de Javascript que comentamos en este artculo, a modo de curiosidad.
Javascript 1: naci con el Netscape 2.0 y soportaba gran cantidad de instrucciones y funciones, casi todas las que existen ahora ya se introdujeron en el primer estandar.
Javascript 1.1: Es la versin de Javascript que se dise con la llegada de los navegadores 3.0. Implementaba poco ms que su anterior versin, como por ejemplo el tratamiento de imgenes dinmicamente y la creacin de arrays.
Javascript 1.2: La versin de los navegadores 4.0. Esta tiene como desventaja que es un poco distinta en plataformas Microsoft y Netscape, ya que ambos navegadores crecieron de distinto modo y estaban en plena lucha por el mercado.
Javascript 1.3: Versin que implementan los navegadores 5.0. En esta versin se han limado algunas diferencias y asperezas entre los dos navegadores.
Javascript 1.5: Versin actual, en el momento de escribir estas lneas, que implementa Netscape 6.
Por su parte, Microsoft tambin ha evolucionado hasta presentar su versin 5.5 de JScript (as llaman al javascript utilizado por los navegadores de Microsoft).
Es obvio que todava, despus de escribir estas lneas, se presentarn o habrn presentado muchas otras versiones de Javascript, pues, a medida que se van mejorando los navegadores y van saliendo versiones de HTML, surgen nuevas necesidades para programacin de elementos dinmicos. No obstante, todo lo que vamos a aprender en este manual, incluso otros usos mucho ms avanzados, ya est implementado en cualquier Javascript que existan en la actualidad. En el siguiente artculo comenzaremos ya a mostrar pequeos cdigos Javascript que servirn para hacer efectos simples en pginas web.
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 lenguaje. A continuacin veremos varios ejemplos, que hemos destacado para esta introduccin en el Manual de Javascript, por tener un mnimo de complejidad y aunque sean muy bsicos, nos vendrn bien para tener una idea ms exacta de lo que es Javascript a la hora de recorrer los siguientes captulos.
Abrir una ventana secundaria

Primero vamos a ver que con una lnea de Javascript podemos hacer cosas bastante atractivas. Por ejemplo podemos ver cmo abrir una ventana secundaria sin barras de mens que muestre el buscador Google. El cdigo sera el siguiente.
<script> window.open("http://www.google.com","","width=550,height=420,menubar=no") </script>
Podemos ver el ejemplo en marcha aqu.
Un mensaje de bienvenida
Podemos mostrar una caja de texto emergente al terminarse de cargar la portada de nuestro sitio web, que podra dar la bienvenida a los visitantes.
<script> window.alert("Bienvenido a mi sitio web. Gracias...") </script>
Puedes ver el ejemplo en una pgina a parte.
Fecha actual
Veamos 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 da", es decir, est actualizada.
<script> document.write(new Date()) </script>
Estas lneas deberan introducirse dentro del cuerpo de la pgina en el lugar donde queramos que aparezca la fecha de ltima actualizacin. Podemos ver el ejemplo en marcha aqu.
Nota: Un detalle a destacar es que la fecha aparece en un formato un poco raro, indicando tambin la hora y otros atributos de la misma, pero ya aprenderemos a obtener exactamente lo que deseemos en el formato correcto.
Botn de volver
Otro ejemplo rpido se puede ver a continuacin. Se trata de un botn para volver hacia atrs, como el que tenemos en la barra de herramientas del navegador. Ahora veremos una lnea de cdigo que mezcla HTML y Javascript para crear este botn que muestra la pgina anterior en el historial, si es que la hubiera.
<input type=button value=Atrs onclick="history.go(-1)">
El botn sera parecido al siguiente. Podemos pulsarlo para ver su funcionamiento (debera llevarnos a la pgina anterior).
Como diferencia con los ejemplos anteriores, hay que destacar que en este caso la instruccin Javascript se encuentra dentro de un atributo de HTML, onclick, que indica que esa instruccin se tiene que ejecutar como respuesta a la pulsacin del botn. Se ha podido comprobar la facilidad con la que se pueden realizar algunas acciones interesantes. Como podris imaginar, existiran muchas otras muestras sencillas de Javascript que nos reservamos para captulos posteriores. Si lo deseas, puedes ver cmo hemos desarrollado algunos de estos efectos rpidos Javascript paso por paso y en vdeo. En el siguiente artculo empezaremos ya a hablar del propio lenguaje de programacin Javascript.
Veamos cmo se escribe el cdigo en Javascript y para ello comentaremos las primeras reglas para insertar scripts en pginas web.

En esta parte del manual sobre Javascript vamos a conocer la manera ms bsica de trabajar con el lenguaje. En este artculo daremos las primeras informaciones sobre cmo incluir scripts, mezclando el propio cdigo Javascript con el HTML. Luego veremos tambin 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 captulos anteriores, pero con el objetivo de no dejarnos nada en el tintero vamos a tratar de acaparar a partir de aqu todos los datos importantes de este lenguaje.
Javascript se escribe en el documento HTML

Lo ms importante y bsico que podemos destacar en este momento es que la programacin de Javascript se realiza dentro del propio documento HTML. Es decir, el cdigo Javascript, en la mayora de los casos, se mezcla con el propio cdigo HTML para generar la pgina. Esto quiere decir que debemos aprender a mezclar los dos lenguajes de programacin y rpidamente veremos que, para que estos dos lenguajes puedan convivir sin problemas entre ellos, se han de incluir unos delimitadores que separan las etiquetas HTML de las instrucciones Javascript. Estos delimitadores son las etiquetas <SCRIPT> y </SCRIPT>. Todo el cdigo Javascript que pongamos en la pgina ha de ser introducido entre estas dos etiquetas.
La colocacin de los scripts s que importa

En una misma pgina podemos introducir varios scripts, cada uno que podra introducirse dentro de unas etiquetas <SCRIPT> distintas. La colocacin de estos scripts no es indiferente. En un principio, con lo que sabemos hasta el momento y los scripts que hemos realizado 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.
Tambin 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 manejadores de eventos.
Vamos a ver en el siguiente captulo com ms detenidamente estas dos maneras de escribir scripts, que tienen como diferencia principal el momento en que se ejecutan las sentencias.
Existen dos maneras bsicas de ejecutar scripts Javascript en una pgina: al cargar la pgina o como respuesta a acciones del usuario.
Hasta ahora en el Manual de Javascript ya hemos tenido la ocasin de probar algunos scripts sencillos, no obstante, todava tenemos que aprender una de las bases para poder trabajar con el lenguaje y es aprender las dos maneras de ejecutar cdigo Javascript. Existen dos maneras fundamentales de ejecutar scripts en la pgina. La primera de estas maneras se trata de ejecucin directa de scripts, la segunda es una ejecucin como respuesta a la accin de un usuario. Explicaremos ahora cada una de estas formas de ejecucin disponibles, pero para el que lo desee, recomendamos tambin ver el vdeo sobre Maneras de incluir y ejecutar scripts.
Ejecucin directa
Es el mtodo de ejecutar scripts ms bsico. En este caso se incluyen las instrucciones dentro de la etiqueta <SCRIPT>, tal como hemos comentado anteriormente. Cuando el navegador lee la pgina y encuentra un script va interpretando las lneas de cdigo y las va ejecutando una despus de otra. Llamamos a esta manera ejecucin directa pues cuando se lee la pgina se ejecutan directamente los scripts.
Este mtodo ser el que utilicemos preferentemente en la mayora de los ejemplos 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 ejecucin de scripts que vamos a relatar a continuacin.
Respuesta a un evento
Es la otra manera de ejecutar scripts, pero antes de verla debemos hablar sobre los eventos. Los eventos son acciones que realiza el usuario. Los programas como Javascript estn preparados para atrapar determinadas acciones realizadas, en este caso sobre la pgina, y realizar acciones
como respuesta. De este modo se pueden realizar programas interactivos, ya que controlamos los movimientos del usuario y respondemos a ellos. Existen muchos tipos de eventos distintos, por ejemplo la pulsacin de un botn, el movimiento del ratn o la seleccin de texto de la pgina.
Las acciones que queremos realizar como respuesta a un evento se han de indicar dentro del mismo cdigo HTML, pero en este caso se indican en atributos HTML que se colocan dentro de la etiqueta que queremos que responda a las acciones del usuario. En el captulo donde vimos algn ejemplo rpido ya comprobamos que si queramos que un botn realizase acciones cuando se pulsase sobre el, debamos indicarlas dentro del atributo onclick del botn.
Comprobamos pues que se puede introducir cdigo Javascript dentro de determinados atributos de las etiquetas HTML. Veremos ms adelante este tipo de ejecucin en profundidad y los tipos de eventos que existen. Pero para llegar a ello aun tenemos que aprender muchas otras cosas de Javascript. En el prximo artculo mostraremos cmo podemos ocultar el cdigo Javascript para navegadores antiguos.
No todos los navegadores son compatibles con Javascript, as que tenemos que aprender cmo hacer que los scripts no molesten en navegadores que no los entienden.
A lo largo de los anteriores captulos del Manual de Javascript ya hemos visto que el lenguaje se implement a partir de Netscape 2.0 e Internet Explorer 3.0. Incluso, para los que no lo sepan, est bien decir que hay navegadores que funcionan en sistemas operativos, donde slo se puede visualizar texto y donde determinadas tecnologas 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 utilizar 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 texto de la propia pgina y como consecuencia, presentan los scripts en el cuerpo del documento, como si de texto normal se tratara. Para evitar que el texto de los scripts se escriba en la pgina cuando los navegadores no los entienden se tienen que ocultar los con comentarios HTML (<!-comentario HTML -->). Adems, en este artculo veremos
tambin cmo mostrar un mensaje que se vea slo en los navegadores que no son compatibles con Javascript.
Actualizado: En el momento actual podemos decir que casi el 100% de los navegadores disponibles soportan Javascript, o por lo menos reconocen las etiquetas de script, por lo que, aunque est desactivado, no mostrarn el texto de nuestros programas Javascript. Por ello, actualmente ya no es fundamental realizar la operacin de ocultar el cdigo de los scripts de la pgina para navegadores antiguos. No obstante, si queremos hacer una pgina totalmente correcta, convendr aprender cmo se puede ocultar un script para que en ningn caso se muestre como texto en la pgina.
Ocultar el cdigo Javascript con comentarios HTML

Veamos con un ejemplo de cdigo donde se han utilizado comentarios HTML para ocultar Javascript, o mejo dicho, el cdigo los scripts Javascript.
<SCRIPT> <!-Cdigo Javascript //--> </SCRIPT>
Vemos que el inicio del comentario HTML es idntico a cmo lo conocemos en el HTML, pero el cierre del comentario presenta una particularidad, que empieza 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 analizarlos lanza un mensaje de error de sintaxis. Para que Javascript no lance un mensaje de error se coloca antes del comentario HTML esa doble barra, que no es ms que un comentario Javascript, que conoceremos ms adelante cuando hablemos de sintaxis.
El inicio del comentario HTML no es necesario comentarlo con la doble barra, dado que Javascript entiende bien que simplemente se pretende ocultar el cdigo. Una aclaracin a este punto: si pusisemos las dos barras en esta lnea, se veran en navegadores antiguos por estar fuera de los comentarios HTML. Las etiquetas <SCRIPT> no las entienden los navegadores antiguos, por lo tanto no las interpretan, tal como hacen con cualquier etiqueta que desconocen.
Mostrar un mensaje para navegadores antiguos con <NOSCRIPT>
Existe la posibilidad de indicar un texto alternativo para los navegadores que no entienden Javascript, para informarles de que en ese lugar debera ejecutarse un script y que la pgina no est funcionando al 100% de sus capacidades. Tambin podemos sugerir a los visitantes que actualicen su navegador a una versin compatible con el lenguaje. Para ello utilizamos la etiqueta <NOSCRIPT> y entre esta etiqueta y su correspondiente de cierre podemos colocar el texto alternativo al script.
<SCRIPT> cdigo javascript </SCRIPT> <NOSCRIPT> Este navegador no comprende los scripts que se estn ejecutando, debes actualizar tu versin de navegador a una ms reciente. <br><br> <a href=http://netscape.com>Netscape</a>.<br> <a href=http://microsoft.com>Microsoft</a>. </NOSCRIPT>
En el siguiente artculo veremos algunos otros detalles sobre colocar scripts Javascript que se han quedado en el tintero.
ltimas notas sobre cmo colocar scripts. Indicar la versin utilizada y utilizar ficheros externos.
Seguimos ofreciendo captulos del Manual de Javascript, con informacin til para saber cmo utilizar el lenguaje. As que ahora veremos un par de notas adicionales sobre cmo colocar scripts en pginas web. En este artculo mostraremos uno de los atributos que se pueden indicar en la etiqueta de SCRIPT, que indica el lenguaje que vamos a utilizar. Pero sobre todo debemos prestar especial atencin al caso de incluir archivos externos con Javascript, que sin duda es una manera de trabajar, que utilizaris bastante a menudo.
Indicar el lenguaje que estamos utilizando
La etiqueta <SCRIPT> tiene un atributo que sirve para indicar el lenguaje que estamos utilizando, as como la versin de este. Por ejemplo, podemos indicar que estamos programando en Javascript 1.2 o Visual Basic Script, que es otro lenguaje para programar scripts en el navegador cliente que slo es compatible con Internet Explorer.
El atributo en cuestin es language y lo ms habitual es indicar simplemente el lenguaje con el que se han programado los scripts. El lenguaje por defecto es Javascript, por lo que si no utilizamos este atributo, el navegador entender que el lenguaje con el que se est programando es Javascript. Un detalle donde se suele equivocar la gente sin darse cuenta es que lenguage se escribe con dos -g- y no con -g- y con -j- como en castellano.
<SCRIPT LANGUAGE=javascript>
Incluir ficheros externos de Javascript

Otra manera de incluir scripts en pginas web, implementada a partir de Javascript 1.1, es incluir archivos externos donde se pueden colocar muchas funciones que se utilicen en la pgina. Los ficheros suelen tener extendin .js y se incluyen de esta manera.
<SCRIPT language=javascript src="archivo_externo.js"> //estoy incluyendo el fichero "archivo_externo.js" </SCRIPT>
Dentro de las etiquetas <SCRIPT> se puede escribir cualquier texto y ser ignorado por el navegador, sin embargo, los navegadores que no entienden el atributo SRC tendrn a este texto por instrucciones, por lo que es aconsejable poner un comentario Javascript antes de cada lnea con el objetivo de que no respondan con un error. El archivo que incluimos (en este caso archivo_externo.js) debe contener tan solo sentencias Javascript. No debemos incluir cdigo HTML de ningn tipo, ni tan siquiera las etiquetas </SCRIPT> y </SCRIPT>. Vistos estos otros usos interesantes que existen en Javascript y que debemos conocer para poder aprovechar las posibilidades de la tecnologa, debemos haber aprendido todo lo esencial para empezar a hacer cosas ms importantes. As que en el prximo artculo empezaremos a repasar la sintaxis del lenguaje Javascript.
Empezamos a contar la sintaxis del lenguaje Javascript, indicando sus principales caractersticas.
Por fin empezamos a ver cdigo fuente de Javascript! Esperamos que se hayan asimilado todas las informaciones previas delManual de Javascript, en las que hemos aprendido bsicamente diversos modos de incluir scripts en pginas web. Hasta ahora todo lo que hemos visto en este manual puede haber parecido muy terico, pero de aqu en adelante esperamos que os parezca ms ameno por empezar a ver cosas ms prcticas y relacionadas directamente con la programacin. El lenguaje Javascript tiene una sintaxis muy parecida a la de Java por estar basado en l. Tambin es muy parecida a la del lenguaje C, de modo que si el lector conoce alguno de estos dos lenguajes se podr manejar con facilidad con el cdigo. De todos modos, en los siguientes captulos vamos a describir toda la sintaxis con detenimiento, por lo que los novatos no tendrn ningn problema con ella.
Comentarios en el cdigo
Un 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 dejando frases o palabras sueltas, llamadas comentarios, que le ayudan a l o a cualquier otro a leer mas fcilmente el script a la hora de modificarlo o depurarlo.
Ya se vio anteriormente algn comentario Javascript, pero ahora vamos a contarlos de nuevo. Existen dos tipos de comentarios en el lenguaje. Uno de ellos, la doble barra, sirve para comentar una lnea de cdigo. El otro comentario lo podemos utilizar para comentar varias lneas y se indica con los signos /* para empezar el comentario y */ para terminarlo. Veamos unos ejemplos.
<SCRIPT> //Este es un comentario de una lnea /*Este comentario se puede extender por varias lneas.
Las que quieras*/ </SCRIPT>
Maysculas y minsculas
En Javascript se han de respetar las maysculas y las minsculas. Si nos equivocamos al utilizarlas el navegador responder con un mensaje de error, ya sea de sintaxis o de referencia indefinida. Por poner un ejemplo, no es lo mismo la funcin alert() que la funcin Alert(). La primera muestra un texto en una caja de dilogo y la segunda (con la primera A mayscula) simplemente no existe, a no ser que la definamos nosotros. Como se puede comprobar, para que la funcin la reconozca Javascript, se tiene que escribir toda en minscula. Otro claro ejemplo lo veremos cuando tratemos con variables, puesto que los nombres que damos a las variables tambin son sensibles a las maysculas y minsculas. Por regla general, los nombres de las cosas en Javascript se escriben siempre en minsculas, salvo que se utilice un nombre con ms de una palabra, pues en ese caso se escribirn con maysculas las iniciales de las palabras siguientes a la primera. Por ejemplo document.bgColor (que es un lugar donde se guarda el color de fondo de la pgina web), se escribe con la "C" de color en mayscula, por ser la primera letra de la segunda palabra. Tambin se puede utilizar maysculas 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.
Separacin de instrucciones
Las distintas instrucciones que contienen nuestros scripts se han de separar convenientemente para que el navegador no indique los correspondientes errores de sintaxis. Javascript tiene dos maneras de separar instrucciones. La primera es a travs del carcter punto y coma (;) y la segunda es a travs de un salto de lnea.
Por esta razn Las sentencias Javascript no necesitan acabar en punto y coma a no ser que coloquemos dos instrucciones en la misma lnea.
No es una mala idea, de todos modos, acostumbrarse a utilizar el punto y coma despus de cada instruccin pues otros lenguajes como Java o C obligan a utilizarlas y nos estaremos
acostumbrando a realizar una sintaxis ms parecida a la habitual en entornos de programacin avanzados. En el prximo artculo comenzaremos a hablaros sobre la creacin de variables en Javascript.
Vemos en trminos generales qu es una variable, para qu sirve y cmo declarar variables en Javascript antes de usarlas.
Este es el primero de los artculos que vamos a dedicar a las variables en el Manual de Javascript. Veremos, si no lo sabemos ya, que las variables son uno de los elementos fundamentales a la hora de realizar los programas, en Javascript y en la mayora de los lenguajes de programacin existentes. As pues, en este artculo veremos cul es el concepto de variable y aprenderemos a declararlas en Javascript.
Concepto de variable
Una variable es un espacio en memoria donde se almacena un dato, un espacio donde podemos guardar cualquier tipo de informacin que necesitemos para realizar las acciones de nuestros programas. Por ejemplo, si nuestro programa realiza sumas, ser muy normal que guardemos en variables los distintos sumandos que participan en la operacin y el resultado de la suma. El efecto sera algo parecido a esto.
sumando1 = 23 sumando2 = 33 suma = sumando1 + sumando2
En este ejemplo tenemos tres variables, sumando1, sumando2 y suma, donde guardamos el resultado. Vemos que su uso para nosotros es como si tuvisemos un apartado donde guardar un dato y que se pueden acceder a ellos con slo poner su nombre.
Los nombres de las variables han de construirse con caracteres alfanumricos y el carcter subrayado (_). Aparte de esta, hay una serie de reglas adicionales para construir nombres para
variables. La ms importante es que tienen que comenzar por un carcter alfabtico o el subrayado. No podemos utilizar caracteres raros como el signo +, un espacio o un $. Nombres admitidos para las variables podran ser
Edad paisDeNacimiento _nombre
Tambin hay que evitar utilizar nombres reservados como variables, por ejemplo no podremos llamar a nuestra variable palabras como return o for, que ya veremos que son utilizadas para estructuras del propio lenguaje. Veamos ahora algunos nombres de variables que no est permitido utilizar
12meses tu nombre return pe%pe
Declaracin de variables en Javascript

Declarar variables consiste en definir y de paso informar al sistema de que vas a utilizar una variable. Es una costumbre habitual en los lenguajes de programacin el definir las variables que se van a usar en los programas y para ello, se siguen unas reglas estrictas. Pero Javascript se salta muchas reglas por ser un lenguaje 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 mayora de los lenguajes de programacin. Javascript cuenta con la palabra "var" que utilizaremos cuando queramos declarar una o varias variables. Como es lgico, se utiliza esa palabra para definir la variable antes de utilizarla.
Nota: Aunque Javascript no nos obligue a declarar explcitamente las variables, es aconsejable declararlas antes de utilizarlas y veremos en adelante que se trata tambin de una buena costumbre. Adems, en sucesivos artculos veremos que en algunos casos especiales, no producir exactamente los mismos resultados un script en el que hemos declarado una variable y otro en el que no lo hagamos.
var operando1 var operando2
Tambin se puede asignar un valor a la variable cuando se est declarando
var operando1 = 23 var operando2 = 33
Tambin se permite declarar varias variables en la misma lnea, siempre que se separen por comas.
var operando1,operando2
Si lo deseas, puedes ver un ejemplo de pgina que declara variables Javascript. En el siguiente artculo seguiremos aprendiendo cosas de variables y veremos uno de los conceptos ms importantes que deberemos aprender sobre ellas, el mbito de las variables.
Ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="es"> <head> <title>Mis primeras variables</title> <script language="javascript"> //creo una variable var x; //x actualmente no tiene ningn valor x = 25; //ahora x tiene el valor numrico 25 //creo una segunda variable var y = 230; //he creado una variable y asignado un valor en un solo paso!! //las variables guardan datos con los que puedo realizar operaciones var suma; suma = x + y; //he creado la variable suma y he asignado la suma de x e y alert(suma); //he mostrado el valor de la variable suma </script> </head> <body> <h1>Trabajando con variables</h1> Mira el cdigo fuente de esta pgina para ver qu se ha realizado con Javascript. </body> </html>
El mbito de las variables en Javascript: qu son las variables locales y globales y cmo se trabaja con ellas en Javascript.
El mbito de las variables es uno de los conceptos ms importantes que deberemos conocer cuando trabajamos con variables, no slo en Javascript, sino en la mayora de los lenguajes de programacin. En el artculo anterior ya comenzamos a explicar qu son las variables y cmo declararlas. En este artculo del Manual de Javascript pretendemos explicar con detenimiento qu es este mbito de las variables y ofrecer ejemplos para que se pueda entender bien.
Concepto de mbito de variables

Se le llama mbito de las variables al lugar donde estas estn disponibles. Por lo general, cuando declaramos una variable hacemos que est disponible en el lugar donde se ha declarado, esto ocurre en todos los lenguajes de programacin y como Javascript se define dentro de una pgina web, las variables que declaremos en la pgina estarn accesibles dentro de ella. En Javascript no podremos acceder a variables que hayan sido definidas en otra pgina. Por tanto, la propia pgina donde se define es el mbito ms habitual de una variable y le llamaremos a este tipo de variables globales a la pgina. Veremos tambin se pueden hacer variables con mbitos distintos del global, es decir, variables que declararemos y tendrn validez en lugares ms acotados.
Variables globales
Como hemos dicho, las variables globales son las que estn declaradas en el mbito ms amplio posible, que en Javascript es una pgina web. Para declarar una variable global a la pgina simplemente lo haremos en un script, con la palabra var.
<SCRIPT> var variableGlobal </SCRIPT>
Las variables globales son accesibles desde cualquier lugar de la pgina, es decir, desde el script donde se han declarado y todos los dems scripts de la pgina, incluidos los manejadores de eventos, como el onclick, que ya vimos que se poda incluir dentro de determinadas etiquetas HTML.
Variables locales
Tambin podremos declarar variables en lugares ms acotados, como por ejemplo una funcin. A estas variables les llamaremos locales. Cuando se declaren variables locales slo podremos acceder a ellas dentro del lugar donde se ha declarado, es decir, si la habamos declarado en una funcin solo podremos acceder a ella cuando estemos en esa funcin.
Las variables pueden ser locales a una funcin, pero tambin pueden ser locales a otros mbitos, como por ejemplo un bucle. En general, son mbitos locales cualquier lugar acotado por llaves.
<SCRIPT> function miFuncion (){ var variableLocal } </SCRIPT>
En el script anterior hemos declarado una variable dentro de una funcin, por lo que esa variable slo tendr validez dentro de la funcin. Se pueden ver cmo se utilizan las llaves para acotar el lugar donde est definida esa funcin o su mbito.
No hay problema en declarar una variable local con el mismo nombre que una global, en este caso la variable global ser visible desde toda la pgina, excepto en el 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 validez. En resumen, la variable que tendr validez en cualquier sitio de la pgina es la global. Menos en el mbito donde est declarada la variable local, que ser ella quien tenga validez.
<SCRIPT> var numero = 2 function miFuncion (){
var numero = 19 document.write(numero) //imprime 19 } document.write(numero) //imprime 2 </SCRIPT>
Un consejo para los principiantes podra ser no declarar variables con los mismos nombres, para que nunca haya lugar a confusin sobre qu variable es la que tiene validez en cada momento.
Diferencias entre declarar variables con var, o no declararlas

Como 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 utilizamos var estamos haciendo que la varible que estamos declarando sea local al mbito donde se declara. Por otro lado, si no utilizamos 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. La diferencia se puede apreciar en una funcin por ejemplo, ya que si utilizamos var la variable ser local a la funcin y si no lo utilizamos, 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 podramos sobreescribir el valor de una variable, perdiendo el dato que pudiera contener previamente.
<SCRIPT> var numero = 2 function miFuncion (){ numero = 19 document.write(numero) //imprime 19 } document.write(numero) //imprime 2 //llamamos a la funcin miFuncion()
document.write(numero) //imprime 19 </SCRIPT>
En este ejemplo, tenemos una variable global a la pgina llamada numero, que contiene un 2. Tambin tenemos una funcin que utiliza 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 ejecutar la funcin se sobreescribir la variable numero y el dato que haba antes de ejecutar la funcin se perder. En el prximo artculo continuaremos hablando de variables y mostraremos que en ellas se pueden guardar distintos tipos de informacin.
Vemos el concepto de tipos de datos para el lenguaje Javascript y por qu es importante manejarlos bien.
En el Manual de Javascript ya hemos hablado sobre las variables en varios artculos. Pero todava nos quedan cosas por ver y en concreto mostraremos en este artculo que en una variable podemos guardar distintos tipos de datos. En una variable podemos introducir varios tipos de informacin. Por ejemplo podramos introducir simple texto, nmeros enteros o reales, etc. A estas distintas clases de informacin se les conoce como tipos de datos. Cada uno tiene caractersticas y usos distintos. Veamos cules son los tipos de datos ms habituales de Javascript.
Nmeros Para empezar tenemos el tipo numrico, para guardar nmeros como 9 o 23.6
Cadenas El tipo cadena de carcter guarda un texto. Siempre que escribamos una cadena de caracteres debemos utilizar las comillas (").
Boleanos Tambin contamos con el tipo boleano, que guarda una informacin que puede valer si (true) o no (false).
Por ltimo sera relevante sealar aqu que nuestras variables pueden contener cosas ms complicadas, como podra ser un objeto, una funcin, o vaco (null) pero ya lo veremos ms adelante.
En realidad nuestras variables no estn forzadas a guardar un tipo de datos en concreto y por lo tanto no especificamos ningn tipo de datos para una variable cuando la estamos declarando. Podemos introducir cualquier informacin en una variable de cualquier tipo, incluso podemos ir cambiando el contenido de una variable de un tipo a otro sin ningn problema. Vamos a ver esto con un ejemplo.
var nombre_ciudad = "Valencia" var revisado = true nombre_ciudad = 32 revisado = "no"
Esta ligereza a la hora de asignar tipos a las variables puede ser una ventaja en un principio, sobretodo para personas inexpertas, 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 exactitud el tipo de las variables podemos encontrarnos sumando un texto a un nmero. 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 desajustes difciles de detectar a lo largo de los programas. Veamos lo que ocurrira en caso de sumar letras y nmeros.
var suma = sumando1 + sumando2 document.write(suma)
Este script nos mostrara en la pgina el texto 2333, que no se corresponde con la suma de los dos nmeros, sino con su concatenacin, uno detrs del otro.
Veremos algunas cosas ms referentes a los tipos de datos en el prximo artculo.
Vemos los tres tipos de datos que soporta Javascript: numerico, boleano y texto.

En el artculo anterior del Manual de Javascript ya empezamos a mostrar que en una variable podemos almacenar distintos tipos de informacin. No obstante, todava hay algunas cosas que queremos explicar sobre los distintos tipos de datos disponibles en Javascript. En nuestros scripts vamos a manejar variables diversas clases de informacin, como textos o nmeros. Cada una de estas clases de informacin son los tipos de datos. Javascipt distingue entre tres tipos de datos y todas las informaciones que se puedan guardar en variables van a estar encajadas en uno de estos tipos de datos. Veamos detenidamente cules son estos tres tipos de datos.
Tipo de datos numrico

En este lenguaje slo existe un tipo de datos numrico, al contrario que ocurre en la mayora de los lenguajes ms conocidos. Todos los nmeros son por tanto del tipo numrico, independientemente de la precisin que tengan o si son nmeros reales o enteros. Los nmeros enteros son nmeros que no tienen coma, como 3 o 339. Los nmeros reales son nmeros fraccionarios, como 2.69 o 0.25, que tambin se pueden escribir en notacin cientfica, por ejemplo 2.482e12.
Con Javascript tambin podemos escribir nmeros en otras bases, como la hexadecimal. Las bases son sistemas de numeracin que utilizan ms o menos dgitos para escribir los nmeros. Existen tres bases con las que podemos trabajar
Base 10, es el sistema que utilizamos habitualmente, el sistema decimal. Cualquier nmero, por defecto, se entiende que est escrito en base 10. Base 8, tambin llamado sistema octal, que utiliza dgitos del 0 al 7. Para escribir un nmero en octal basta con escribir ese nmero precedido de un 0, por ejemplo 045. Base 16 o sistema hexadecimal, es el sistema de numeracin que utiliza 16 dgitos, los comprendidos entre el 0 y el 9 y las letras de la A a la F, para los dgitos que faltan. Para escribir un nmero en hexadecimal debemos escribirlo precedido de un cero y una equis, por ejemplo 0x3EF.
Tipo boleano
El tipo bolean, boolean en ingls, sirve para guardar un si o un no o dicho de otro modo, un verdadero o un falso. Se utiliza para realizar operaciones lgicas, generalmente para realizar acciones si el contenido de una variable es verdadero o falso.
Si una variable es verdadero entonces
Ejecuto unas instrucciones Si no
Ejecuto otras
Los dos valores que pueden tener las variables boleanas son true o false.
miTexto = "Pepe se va a pescar" miTexto = '23%%$ Letras & *--*'
Todo lo que se coloca entre comillas, como en los ejemplos anteriores es tratado como una cadena de caracteres independientemente de lo que coloquemos en el interior de las comillas. Por ejemplo, en una variable de texto podemos guardar nmeros y en ese caso tenemos que tener en cuenta que las variables de tipo texto y las numricas no son la misma cosa y mientras que las de numricas nos sirven para hacer clculos matemticos las de texto no.
Caracteres de escape en cadenas de texto

Hay una serie de caracteres especiales que sirven para expresar en una cadena de texto determinados controles como puede ser un salto de lnea o un tabulador. Estos son los caracteres de escape y se escriben con una notacin especial que comienza por una contra barra (una barra inclinada al revs de la normal '') y luego se coloca el cdigo del carcter a mostrar.
Un carcter muy comn es el salto de lnea, que se consigue escribiendo n. Otro carcter muy habitual es colocar unas comillas, pues si colocamos unas comillas sin su carcter especial nos cerraran las comillas que colocamos para iniciar la cadena de caracteres. Las comillas las tenemos que introducir entonces con " o ' (comillas dobles o simples). Existen otros caracteres de escape, que veremos en la tabla de abajo ms resumidos, aunque tambin hay que destacar como carcter habitual el que se utiliza para escribir una contrabarra, para no confundirla con el inicio de un carcter de escape, que es la doble contrabarra .
Tabla con todos los caracteres de escape
Salto de lnea: \n Comilla simple: \'
Comilla doble: \" Tabulador: \t Retorno de carro: \r Avance de pgina: \f Retroceder espacio: \b Contrabarra: \\
Algunos de estos caracteres probablemente no los llegars a utilizar nunca, pues su funcin es un poco rara y a veces poco clara. Con esto ya hemos terminado de explicar todo lo que se debe conocer sobre las variables en Javascript y podemos comenzar con un tema nuevo que ser el de operadores.
Estudiamos lo que es un operador y para qu sirve. Vemos los operadores aritmticos y de asignacin.
En el presente artculo del Manual de Javascript vamos a comenzar una serie de textos enfocados en explicar los diferentes operadores disponibles en este lenguaje de programacin. Al desarrollar programas en cualquier lenguaje se utilizan los operadores, que sirven para hacer los clculos y operaciones necesarios para llevar a cabo tus objetivos. Hasta el menor de los programas imaginables necesita de los operadores para realizar cosas, ya que un programa que no realizase operaciones, slo se limitara a hacer siempre lo mismo. Es el resultado de las operaciones lo que hace que un programa vare su comportamiento segn los datos que tenga para trabajar y nos ofrezca resultados que sean relevantes para el usuario que lo utilice. Existen operaciones ms sencillas o complejas, que se pueden realizar con operandos de distintos tipos, como nmeros o textos, veremos en este captulo, y los siguientes, de manera detallada todos estos operadores disponibles en Javascript.
Ejemplos de uso de operadores

Antes de entrar a enumerar los distintos tipos de operadores vamos a ver un par de ejemplos de stos para que nos ayuden a hacernos una idea ms exacta de lo que son. En el primer ejemplo vamos a realizar una suma utilizando el operador suma.
3+5
Esta es una expresin muy bsica que no tiene mucho sentido ella sola. Hace la suma entre los dos operandos nmero 3 y 5, pero no sirve de mucho porque no se hace nada con el resultado. Normalmente se combinan ms de un operador para crear expresiones ms tiles. La expresin siguiente es una combinacin entre dos operadores, uno realiza una operacin matemtica y el otro sirve para guardar el resultado.
miVariable = 23 * 5
En el ejemplo anterior, el operador * se utiliza para realizar una multiplicacin y el operador = se utiliza para asignar el resultado en una variable, de modo que guardemos el valor para su posterior uso.
Los operadores se pueden clasificar segn el tipo de acciones que realizan. A continuacin vamos a ver cada uno de estos grupos de operadores y describiremos la funcin de cada uno.
Operadores aritmticos
Son los utilizados para la realizacin de operaciones matemticas simples como la suma, resta o multiplicacin. En javascript son los siguientes:
+ Suma de dos valores - Resta de dos valores, tambin puede utilizarse para cambiar el signo de un nmero si lo utilizamos con un solo operando -23 * Multiplicacin de dos valores / Divisin de dos valores % El resto de la divisin de dos nmeros (3%2 devolvera 1, el resto de dividir 3 entre 2) ++ Incremento en una unidad, se utiliza con un solo operando -- Decremento en una unidad, utilizado con un solo operando
Ejemplos
precio = 128 //introduzco un 128 en la variable precio unidades = 10 //otra asignacin, luego veremos operadores de asignacin factura = precio * unidades //multiplico precio por unidades, obtengo el valor factura
resto = factura % 3 //obtengo el resto de dividir la variable factura por 3 precio++ //incrementa en una unidad el precio (ahora vale 129)
Operadores de asignacin
Sirven para asignar valores a las variables, ya hemos utilizado en ejemplos anteriores el operador de asignacin =, pero hay otros operadores de este tipo, que provienen del lenguaje C y que muchos de los lectores ya conocern.
= Asignacin. Asigna la parte de la derecha del igual a la parte de la izquierda. A al derecha se colocan los valores finales y a la izquierda generalmente se coloca una variable donde queremos guardar el dato. += Asignacin con suma. Realiza la suma de la parte de la derecha con la de la izquierda y guarda el resultado en la parte de la izquierda. -= Asignacin con resta *= Asignacin de la multiplicacin /= Asignacin de la divisin %= Se obtiene el resto y se asigna
Ejemplos
ahorros = 7000 //asigna un 7000 a la variable ahorros ahorros += 3500 //incrementa en 3500 la variable ahorros, ahora vale 10500 ahorros /= 2 //divide entre 2 mis ahorros, ahora quedan 5250
En el siguiente artculo seguiremos conociendo otros de los operadores de Javascript: Operadores de cadenas, operadores lgicos y operadores condicionales.
Estudiamos los operadores de cadenas, lgicos y condicionales.

Este es el segundo artculo 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 aritmticos y de asignacin.
En el presente texto veremos un listado y descripcin de tres tipos adicionales: operadores de cadenas, operadores lgicos y operadores condicionales.
Operadores de cadenas
Las cadenas de caracteres, o variables de texto, tambin tienen sus propios operadores para realizar acciones tpicas sobre cadenas. Aunque javascript slo tiene un operador para cadenas se pueden realizar otras acciones con una serie de funciones predefinidas en el lenguaje que veremos ms adelante.
+ Concatena dos cadenas, pega la segunda cadena a continuacin de la primera.
Ejemplo
cadena1 = "hola" cadena2 = "mundo" cadenaConcatenada = cadena1 + cadena2 //cadena concatenada vale "holamundo"
Un detalle importante que se puede ver en este caso es que el operador + sirve para dos usos distintos, si sus operandos son nmeros los suma, pero si se trata de cadenas las concatena. Esto pasa en general con todos los operadores que se repiten en el lenguaje, javascript es suficientemente listo para entender que tipo de operacin realizar mediante una comprobacin de los tipos que estn implicados en lla.
Un caso que resultara confuso es el uso del operador + cuando se realiza la operacin con operadores texto y numricos entremezclados. En este caso javascript asume que se desea realizar una concatenacin y trata a los dos operandos como si de cadenas de caracteres se trataran, incluso si la cadena de texto que tenemos fuese un nmero. Esto lo veremos ms fcilmente con el siguiente ejemplo.
miNumero = 23 miCadena1 = "pepe" miCadena2 = "456" resultado1 = miNumero + miCadena1 //resultado1 vale "23pepe" resultado2 = miNumero + miCadena2 //resultado2 vale "23456" miCadena2 += miNumero //miCadena2 ahora vale "45623"
Como hemos podido ver, tambin en el caso del operador +=, si estamos tratando con cadenas de texto y nmeros entremezclados, tratar a los dos operadores como si fuesen cadenas.
Nota: Como se puede haber imaginado, faltan muchas operaciones tpicas a realizar con cadenas, para las cuales no existen operadores. Es porque esas funcionalidades se obtienen a travs de la clase String de Javascript, que veremos ms adelante.
Operadores lgicos
Estos operadores sirven para realizar operaciones lgicas, que son aquellas que dan como resultado un verdadero o un falso, y se utilizan para tomar decisiones en nuestros scripts. En vez de trabajar con nmeros, para realizar este tipo de operaciones se utilizan operandos boleanos, que conocimos anteriormente, que son el verdadero (true) y el falso (false). Los operadores lgicos relacionan los operandos boleanos para dar como resultado otro operando boleano, tal como podemos ver en el siguiente ejemplo.
Si tengo hambre y tengo comida entonces me pongo a comer
Nuestro programa Javascript utilizara en este ejemplo un operando boleano para tomar una decisin. Primero mirar si tengo hambre, si es cierto (true) mirar si dispongo de comida. Si son los dos ciertos, se puede poner a comer. En caso de que no tenga comida o que no tenga hambre no comera, al igual que si no tengo hambre ni comida. El operando en cuestin es el operando Y, que valdr verdadero (true) en caso de que los dos operandos valgan verdadero.
Nota: Para no llevarnos a engao, cabe decir que los operadores lgicos pueden utilizarse en combinacin con tipos de datos distintos de los boleanos, pero en este caso debemos utilizarlos en expresiones que los conviertan en boleanos. En el siguiente grupo de operadores que vamos a tratar en este artculo hablaremos sobre los operadores condicionales, que se pueden utilizar junto con los operadores lgicos para realizar sentencias todo lo complejas que necesitemos. Por ejemplo:
if (x==2 && y!=3){ //la variable x vale 2 y la variable y es distinta de tres }
En la expresin condicional anterior estamos evaluando dos comprobaciones que se relacionan con un operador lgico. Por una parte x==2 devolver un true en caso que la variable x valga 2 y por otra, y!=3 devolver un true cuando la variable y tenga un valor distinto de 3. Ambas comprobaciones devuelven un
boleano cada una, que luego se le aplica el operador lgico && para comprobar si ambas comprobaciones se cumplieron al mismo tiempo.
Sobra decir que, para ver ejemplos de operadores condicionales, necesitamos aprender estructuras de control como if, a las que no hemos llegado todava.
! Operador NO o negacin. Si era true pasa a false y viceversa. && Operador Y, si son los dos verdaderos vale verdadero. || Operador O, vale verdadero si por lo menos uno de ellos es verdadero.
Ejemplo
miBoleano = true miBoleano = !miBoleano //miBoleano ahora vale false tengoHambre = true tengoComida = true comoComida = tengoHambre && tengoComida
Operadores condicionales
Sirven para realizar expresiones condicionales todo lo complejas que deseemos. Estas expresiones se utilizan para tomar decisiones en funcin de la comparacin de varios elementos, por ejemplo si un numero es mayor que otro o si son iguales.
Nota: Por supuesto, los operadores condicionales sirven tambin para realizar expresiones en las que se comparan otros tipos de datos. Nada impide comparar dos cadenas, para ver si son iguales o distintas, por ejemplo. Incluso podramos comparar boleanos.
Los operadores condicionales se utilizan en las expresiones condicionales para tomas de decisiones. Como estas expresiones condicionales sern objeto de estudio ms adelante ser mejor describir los operadores condicionales ms adelante. De todos modos aqu podemos ver la tabla de operadores condicionales.
== Comprueba si dos valores son iguales != Comprueba si dos valores son distintos > Mayor que, devuelve true si el primer operando es mayor que el segundo < Menor que, es true cuando el elemento de la izquierda es menor que el de la derecha
>= Mayor igual <= Menor igual Veremos ejemplos de operadores condicionales cuando expliquemos estructuras de control, como la condicional if. En el siguiente artculo finalizaremos el tema de operadores, explicando los operadores a nivel de bit y la precedencia de operadores.
Vemos el ltimo tipo de operador, a nivel de bit, y la precedencia de operadores (que operadores se ejecutan antes o despus).
Continuamos con el tema de operadores, que ya habamos iniciado en captulos 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 utiliza casi nunca, que son los operadores de nivel de bit. De manera adicional, en este texto 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 expresin, para que se relacionen entre ellos y se resuelvan de la manera habamos planeado.
Operadores a nivel de bit

Estos son muy poco corrientes y es posible que nunca los llegues a utilizar. Su uso se realiza para efectuar operaciones con ceros y unos. Todo lo que maneja un ordenador son ceros y unos, aunque nosotros utilicemos nmeros y letras para nuestras variables en realidad estos valores estn escritos internamente en forma de ceros y unos. En algunos caso podremos necesitar realizar operaciones tratando las variables como ceros y unos y para ello utilizaremos estos operandos. En este manual se nos queda un poco grande realizar una discusin sobre este tipo de operadores, pero aqu podris ver estos operadores por si algn da os hacen falta.
& Y de bits ^ Xor de bits
| O de bits << >> >>> >>>= >>= <<= Varias clases de cambios
Precedencia de los operadores

La evaluacin de una sentencia de las que hemos visto en los ejemplos anteriores es bastante sencilla y fcil de interpretar, pero cuando en una sentencia entran en juego multitud de operadores distintos puede haber una confusin a la hora de interpretarla y dilucidar qu operadores son los que se ejecutan antes que otros. Para marcar unas pautas en la evaluacin de las sentencias y que estas se ejecuten siempre igual y con sentido comn existe la precedencia de operadores, que no es ms que el orden por el que se irn ejecutando las operaciones que ellos representan. En un principio todos los operadores se evalan de izquierda a derecha, pero existen unas normas adicionales, por las que determinados operadores se evalan antes que otros. Muchas de estas reglas de precedencia estn sacadas de las matemticas y son comunes a otros lenguajes, las podemos ver a continuacin.
() [] . Parntesis, corchetes y el operador punto que sirve para los objetos ! - ++ -- negacin, negativo e incrementos * / % Multiplicacin divisin y mdulo +- Suma y resta << >> >>> Cambios a nivel de bit < <= > >= Operadores condicionales == != Operadores condicionales de igualdad y desigualdad & ^ | Lgicos a nivel de bit && || Lgicos boleanos = += -= *= /= %= <<= >>= >>>= &= ^= != Asignacin
En los siguientes ejemplos podemos ver cmo las expresiones podran llegar a ser confusas, pero con la tabla de precedencia de operadores podremos entender sin errores cul es el orden por el que se ejecutan.
12 * 3 + 4 - 8 / 2 % 3
En este caso primero se ejecutan los operadores * / y %, de izquierda a derecha, con lo que se realizaran estas operaciones. Primero la multiplicacin y luego la divisin por estar ms a la izquierda del mdulo.
36 + 4 - 4 % 3
Ahora el mdulo.
36 + 4 - 1
Por ltimo las sumas y las restas de izquierda a derecha.
40 - 1
Lo que nos da como resultado el valor siguiente.
39
De todos modos, es importante darse cuenta que el uso de los parntesis puede ahorrarnos muchos quebraderos de cabeza y sobretodo la necesidad de sabernos de memoria la tabla de precedencia de los operadores. Cuando veamos poco claro el orden con el que se ejecutarn las sentencias podemos utilizarlos y as forzar que se evale antes el trozo de expresin que se encuentra dentro de los parntesis. Para acabar con el tema de operadores nos queda por ver un ltimo operador un tanto especial, llamado typeof.
Es importante que conozcamos 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. Hemos podido comprobar que, para determinados operadores, es importante el tipo de datos que estn manejando, puesto que si los datos son de un tipo se realizarn operaciones distintas que si son de otro.
Por ejemplo, cuando utilizbamos el operador +, si se trataba de nmeros los sumaba, pero si se trataba de cadenas de caracteres las concatenaba. Vemos pues que el tipo de los datos que estamos utilizando s que importa y que tendremos que estar pendientes este detalle si queremos que nuestras operaciones se realicen tal como esperbamos.
Para comprobar el tipo de un dato se puede utilizar otro operador que est disponible a partir de javascript 1.1, eloperador typeof, que devuelve una cadena de texto que describe el tipo del operador que estamos comprobando.
Nota: a lo largo de nuestra experiencia 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 utilizar como operando. Existen diversas funciones para intentar cambiar el tipo de una variable, como parseInt(), que veremos ms adelante en la Segunda Parte del Manual de Javascript.
var boleano = true var numerico = 22 var numerico_flotante = 13.56 var texto = "mi texto" var fecha = new Date() document.write("<br>El tipo de boleano es: " + typeof boleano) document.write("<br>El tipo de numerico es: " + typeof numerico) document.write("<br>El tipo de numerico_flotante es: " + typeof numerico_flotante) document.write("<br>El tipo de texto es: " + typeof texto) document.write("<br>El tipo de fecha es: " + typeof fecha)
Si ejecutamos este script obtendremos que en la pgina se escribir el siguiente texto:
El tipo de boleano es: boolean El tipo de numerico es: number El tipo de numerico_flotante es: number El tipo de texto es: string El tipo de fecha es: object
En este ejemplo podemos ver que ser imprimen en la pgina los distintos tipos de las variables. Estos pueden ser los siguientes:
boolean, para los datos boleanos. (True o false) number, para los numricos. string, para las cadenas de caracteres. object, para los objetos.
Queremos destacar tan slo dos detalles ms:
1) Los nmeros, ya tengan o no parte decimal, son siempre del tipo de datos numrico.
2) Una de las variables es un poco ms compleja, es la variable fecha que es un objeto de la clase Date(), que se utiliza para el manejo de fechas en los scripts. La veremos ms adelante, as como los objetos. Con esto ya hemos terminado de ver la lista de operadores que podemos utilizar en Javascript y en el prximo artculo pasaremos a conocer las estructuras de control.
Introduccin a las estructuras de control. Enumeramos las que tenemos disponibles en Javascript.
Los scripts vistos hasta ahora en el Manual de Javascript han sido tremendamente sencillos y lineales: se iban ejecutando las sentencias simples una detrs de la otra desde el principio hasta el fin. Sin embargo, esto no tiene porque ser siempre as y de hecho, en la mayora de los casos las cosas son bastante ms complejas. Si tenemos alguna experiencia en la programacin sabremos que en los programas generalmente se necesitar hacer cosas distintas dependiendo del estado de nuestras variables o realizar un mismo proceso muchas veces sin escribir las mismas lneas de cdigo una y otra vez. Para realizar cosas ms complejas en nuestros scripts se utilizan las estructuras de control. Con ellas podemos realizar tomas de decisiones y bucles. En los siguientes captulos vamos a conocer las distintas estructuras de control que existen en Javascript.
Toma de decisiones
Nos sirven para realizar unas acciones u otras en funcin del estado de las variables. Es decir, tomar decisiones para ejecutar unas instrucciones u otras dependiendo de lo que est ocurriendo
en ese instante en nuestros programas.
Por ejemplo, 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.
Si edad es mayor que 18 entonces Te dejo ver el contenido para adultos Si no Te mando fuera de la pgina
En Javascript podemos tomar decisiones utilizando dos enunciados distintos.
IF SWITCH
Bucles
Los bucles se utilizan para realizar ciertas acciones repetidamente. Son muy utilizados a todos los niveles en la programacin. Con un bucle podemos por ejemplo imprimir en una pgina los nmeros del 1 al 100 sin necesidad de escribir cien veces el la instruccin imprimir.
Desde el 1 hasta el 100 Imprimir el nmero actual
En javascript existen varios tipos de bucles, cada uno est indicado para un tipo de iteracin distinto y son los siguientes:
FOR WHILE DO WHILE
Como hemos sealado ya, las estructuras de control son muy importantes en Javascript y en cualquier lenguaje de programacin. Es por ello que en los siguientes captulos veremos cada una de estas estructuras detenidamente, describiendo su uso y ofreciendo algunos ejemplos. Comenzaremos con la estructura de control if.
Vemos cmo trabajar con la estrutura de control IF en Javascript.

En el Manual de Javascript de DesarrolloWeb.com ya empezamos a explicar lo que son las estructuras de control. En el presente artculo vamos a dedicarnos a mostrar cmo funciona la sentencia if, que es la estructura ms habitual de las utilizadas para tomar decisiones en programas informticos. IF es una estructura de control utilizada para tomar decisiones. Es un condicional que sirve para realizar unas u otras operaciones en funcin de una expresin. Funciona de la siguiente manera, primero se evala una expresin, si da resultado positivo se realizan las acciones relacionadas con el caso positivo.
La sintaxis de la estructura IF es la siguiente.

Nota: Todas las estructuras de control se escriben en minsculas en Javascript. Aunque algunas veces para destacar el nombre de la estructura la podamos escribir en el texto del manual con letras maysculas, en el cdigo de nuestros scripts siempre tenemos que ponerlo en minsculas. En caso contrario recibiremos un mensaje de error.
if (expresin) { //acciones a realizar en caso positivo //... }
Opcionalmente se pueden indicar acciones a realizar en caso de que la evaluacin de la sentencia devuelva resultados negativos.
if (expresin) { //acciones a realizar en caso positivo //... } else { //acciones a realizar en caso negativo //... }
Fijmonos en varias cosas. Para empezar vemos como con unas llaves engloban las acciones
que queremos realizar en caso de que se cumplan o no las expresiones. Estas llaves han de colocarse siempre, excepto en el caso de que slo haya una instruccin como acciones a realizar, que son opcionales.
Nota: Aunque las llaves para englobar las sentencias a ejecutar tanto en el caso positivo como negativo sean opcionales cuando queremos ejecutar una nica sentencia, la recomendacin es colocarlas siempre, porque obtendremos as un cdigo fuente ms claro. Por ejemplo:
Veamos el cdigo siguiente:
if (llueve) alert("Cae agua");
Sera exactamente igual que este cdigo:
if (llueve){ alert("Cae agua"); }
O incluso, igual a este otro:
if (llueve) alert("Cae agua");
Sin embargo, cuando utilizamos las llaves, el cdigo queda bastante ms claro, porque se puede apreciar en un rpido vistazo qu instrucciones estn dependiendo del caso positivo del if. Esto es un detalle que ahora quizs no tenga mucha importancia, pero que se agradecer cuando el programa sea ms complejo o cuando varios programadores se encarguen de tocar un mismo cdigo.
Otro detalle que salta a la vista es el sangrado (margen) que hemos colocado en cada uno de los bloques de instrucciones a ejecutar en los casos positivos y negativos. Este sangrado es totalmente opcional, slo lo hemos hecho as para que la estructura IF se comprenda de una manera ms visual. Los saltos de lnea tampoco son necesarios y se han colocado tambin para que se vea mejor la estructura. Perfectamente podramos colocar toda la instruccin IF en la misma lnea de cdigo, pero eso no ayudar a que las cosas estn claras.
Nota: Nosotros, as como lo hara cualquier persona con cierta experiencia en el rea de programacin, aconsejamos que se utilicen los sangrados y saltos de lnea necesarios para que las instrucciones se puedan entender mejor. Quizs el da que realizas un cdigo tengas claro qu has hecho y por qu es as, pero
dentro de un mes, cuando tengas que releer ese cdigo, quizs 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. Si trabajas en equipo estas recomendaciones sern todava ms importantes, puesto que todava es ms complicado leer cdigo fuente que han realizado otras personas.
Veamos algn ejemplo de condicionales IF.
if (dia == "lunes") document.write ("Que tengas un feliz comienzo de semana")
Si es lunes nos desear una feliz semana. No har nada en caso contrario. Como en este ejemplo slo indicamos una instruccin para el caso positivo, no har falta utilizar las llaves (aunque s sera recomendable haberlas puesto). Fjate tambin en el operador condicional que consta de dos signos igual.
Vamos a ver ahora otro ejemplo, un poco ms largo.
if (credito >= precio) { document.write("has comprado el artculo " + nuevoArtculo) //enseo compra carrito += nuevoArticulo //introduzco el artculo en el carrito de la compra credito -= precio //disminuyo el crdito segn el precio del artculo } else { document.write("se te ha acabado el crdito") //informo que te falta dinero window.location = "carritodelacompra.html" //voy a la pgina del carrito }
Este ejemplo es un poco ms complejo, y tambin un poco ficticio. Lo que hago es comprobar si tengo crdito para realizar una supuesta compra. Para ello miro si el crdito es mayor o igual que el precio del artculo, si es as informo de la compra, introduzco el artculo en el carrito y resto el precio al crdito acumulado. Si el precio del artculo es superior al dinero disponible informo de la situacin y mando al navegador a la pgina donde se muestra su carrito de la compra.
Expresiones condicionales
La expresin a evaluar se coloca siempre entre parntesis y est compuesta por variables que se combinan entre si mediante operadores condicionales. Recordamos que los operadores
condicionales relacionaban dos variables y devolvan siempre un resultado boleano. Por ejemplo un operador condicional es el operador "es igual" (==), que devuelve true en caso de que los dos operandos sean iguales o false en caso de que sean distintos.
if (edad > 18) document.write("puedes ver esta pgina para adultos")
En este ejemplo utilizamos en operador condicional "es mayor" (>). En este caso, devuelve true si la variable edad es mayor que 18, con lo que se ejecutara la lnea siguiente que nos informa de que se puede ver el contenido para adultos.
Las expresiones condicionales se pueden combinar con las expresiones lgicas para crear expresiones ms complejas. Recordamos que las expresiones lgicas son las que tienen como operandos a los boleanos y que devuelvan otro valor boleano. Son los operadores negacin lgica, Y lgico y O lgico.
if (bateria < 0.5 && redElectrica == 0) document.write("tu ordenador portatil se va a apagar en segundos")
Lo que hacemos es comprobar si la batera de nuestro supuesto ordenador es menor que 0.5 (est casi acabada) y tambin comprobamos si el ordenador no tiene red elctrica (est desenchufado). Luego, el operador lgico los relaciona con un Y, de modo que si est casi sin batera Y sin red elctrica, informo que el ordenador se va a apagar.
Nota: La lista de operadores que se pueden utilizar con las estructuras IF se pueden ver en el captulo de operadores condicionales y operadores lgicos.
En el siguiente artculo seguiremos explicando usos avanzados de la estructura de control if en Javascript, como la anidacin de estructuras if. As mismo, recomendamos ver tambin el Videotutorial de Javascript, en el vdeo donde tratamos la estructura IF.
Vemos ms cosas sobre la estructura IF: la anidacin de IFs y el operador ?, un IF sencillo.

La estructura if es de las ms utilizadas en lenguajes de programacin, para tomar decisiones en funcin de la evaluacin de una sentencia. En el artculo anterior del Manual de Javascriptya comenzamos a explicar la estructura if y ahora vamos a ver algunos usos un poquito ms avanzados.
Sentencias IF anidadas
Para hacer estructuras condicionales ms complejas podemos anidar sentencias IF, es decir, colocar estructuras IF dentro de otras estructuras IF. Con un solo IF podemos evaluar y realizar una accin u otra segn dos posibilidades, pero si tenemos ms posibilidades que evaluar debemos anidar IFs para crear el flujo de cdigo necesario para decidir correctamente.
Por ejemplo, si deseo comprobar si un nmero es mayor menor o igual que otro, tengo que evaluar tres posibilidades distintas. Primero puedo comprobar si los dos nmeros son iguales, si lo son, ya he resuelto el problema, pero si no son iguales todava tendr que ver cul de los dos es mayor. Veamos este ejemplo en cdigo Javascript.
var numero1=23 var numero2=63 if (numero1 == numero2){ document.write("Los dos nmeros son iguales") }else{ if (numero1 > numero2) { document.write("El primer nmero es mayor que el segundo") }else{ document.write("El primer nmero es menor que el segundo") } }
El flujo del programa es como comentbamos antes, primero se evala si los dos nmeros son iguales. En caso positivo se muestra un mensaje informando de ello. En caso contrario ya sabemos que son distintos, pero aun debemos averiguar cul de los dos es mayor. Para eso se hace otra comparacin para saber si el primero es mayor que el segundo. Si esta comparacin da resultados positivos mostramos un mensaje diciendo que el primero es mayor que el segundo, en caso contrario indicaremos que el primero es menor que el segundo.
Volvemos a remarcar que las llaves son en este caso opcionales, pues slo se ejecuta una sentencia para cada caso. Adems, los saltos de lnea y los sangrados tambin 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 utilizar una notacin como la que has podido ver en las lneas anteriores. Adems mantendr esa notacin en todo momento. Esto sin lugar a dudas har que los cdigos con ejemplos sean comprensibles ms rpidamente, si no lo hiciramos as sera 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 compaeros que lleguen a leer tu cdigo.
Operador IF
Hay un operador que no hemos visto todava y es una forma ms esquemtica de realizar algunos IF sencillos. Proviene del lenguaje C, donde se escriben muy pocas lneas de cdigo y donde cuanto menos escribamos ms elegantes seremos. Este operador es un claro ejemplo de ahorro de lneas y caracteres al escribir los scripts. Lo veremos rpidamente, pues la nica razn por la que lo incluyo es para que sepas que existe y si lo encuentras en alguna ocasin por ah sepas identificarlo y cmo funciona.
Un ejemplo de uso del operador IF se puede ver a continuacin.
Variable = (condicin) ? valor1 : valor2
Este ejemplo no slo realiza una comparacin de valores, adems asigna un valor a una variable. Lo que hace es evaluar la condicin (colocada entre parntesis) y si es positiva asigna el valor1 a la variable y en caso contrario le asigna el valor2. Veamos un ejemplo:
momento = (hora_actual < 12) ? "Antes del medioda" : "Despus del medioda"
Este ejemplo mira si la hora actual es menor que 12. Si es as, es que ahora es antes del medioda, as que asigna "Antes del medioda" a la variable momento. Si la hora es mayor o igual a 12 es que ya es despus de medioda, con lo que se asigna el texto "Despus del medioda" a la variable momento.
En el siguiente artculo pasaremos a trabajar con una nueva estructura de control, tambin utilizada para toma de decisiones, llamada switch.
La estructura de control switch de Javascript es utilizada para tomar decisiones en funcin de distintos estados o valores de una variable.
Las estructuras de control son la manera con la que se puede dominar el flujo de los programas, para hacer cosas distintas en funcin de los estados de las variables. En el Manual de Javascript ya empezamos a ver las estructuras de control y ahora le ha tocado el turno a SWITCH, una estructura un poco ms compleja que permite hacer mltiples operaciones dependiendo del estado de una variable. En este artculo veremos que switch nos sirve para tomar decisiones en funcin de distintos estados de las variables. Esta expresin se utiliza cuando tenemos mltiples posibilidades como resultado de la evaluacin de una sentencia.
La estructura SWITCH se incorpor a partir de la versin 1.2 de Javascript (Netscape 4 e Internet Explorer 4). Su sintaxis es la siguiente.
switch (expresin) { case valor1: Sentencias a ejecutar si la expresin tiene como valor a valor1 break case valor2: Sentencias a ejecutar si la expresin tiene como valor a valor2 break case valor3: Sentencias a ejecutar si la expresin tiene como valor a valor3 break default: Sentencias a ejecutar si el valor no es ninguno de los anteriores }
La expresin se evala, si vale valor1 se ejecutan las sentencias relacionadas con ese caso. Si la
expresin vale valor2 se ejecutan las instrucciones relacionadas con ese valor y as sucesivamente, por tantas opciones como deseemos. Finalmente, para todos los casos no contemplados anteriormente se ejecuta el caso por defecto.
La palabra break es opcional, pero si no la ponemos a partir de que se encuentre coincidencia con un valor se ejecutarn todas las sentencias relacionadas con este y todas las siguientes. Es decir, si en nuestro esquema anterior no hubiese ningn break y la expresin valiese valor1, se ejecutaran las sentencias relacionadas con valor1 y tambin las relacionadas con valor2, valor3 y default.
Tambin es opcional la opcin default u opcin por defecto.
Veamos un ejemplo de uso de esta estructura. Supongamos que queremos indicar que da de la semana es. Si el da es 1 (lunes) sacar un mensaje indicndolo, si el da es 2 (martes) debemos sacar un mensaje distinto y as sucesivamente para cada da de la semana, menos en el 6 (sbado) y 7 (domingo) que queremos mostrar el mensaje "es fin de semana". Para das mayores que 7 indicaremos que ese da no existe.
switch (dia_de_la_semana) { case 1: document.write("Es Lunes") break case 2: document.write("Es Martes") break case 3: document.write("Es Mircoles") break case 4: document.write("Es Jueves") break case 5: document.write("Es viernes") break case 6: case 7:
document.write("Es fin de semana") break default: document.write("Ese da no existe") }
El ejemplo es relativamente sencillo, solamente puede tener una pequea dificultad, consistente en interpretar lo que pasa en el caso 6 y 7, que habamos dicho que tenamos que mostrar el mismo mensaje. En el caso 6 en realidad no indicamos ninguna instruccin, pero como tampoco colocamos un break se ejecutar la sentencia o sentencias del caso siguiente, que corresponden con la sentencia indicada en el caso 7 que es el mensaje que informa que es fin de semana. Si el caso es 7 simplemente se indica que es fin de semana, tal como se pretenda.
Nota: Adems contamos con un videotutorial sobre el SWITCH en Javascript que os puede ser de mucha ayuda para entenderlo todo mucho mejor.
En el siguiente artculo comenzaremos a explorar las estructuras de control para hacer bucles o repeticiones en Javascript, comenzando por el bucle for.
Descripcin y ejemplos de funcionamiento del bucle FOR.

Comenzamos con este artculo del Manual de Javascript a explorar las estructuras de control para producir bucles o repeticiones, comenzando por el bucle for, no por ser el ms simple, pero s el ms utilizado en la programacin. El bucle FOR se utiliza para repetir una o ms instrucciones un determinado nmero de veces. De entre todos los bucles, el FOR se suele utilizar cuando sabemos seguro el nmero de veces que queremos que se ejecute. La sintaxis del bucle for se muestra a continuacin.
for (inicializacin; condicin; actualizacin) { //sentencias a ejecutar en cada iteracin }
El bucle FOR tiene tres partes incluidas entre los parntesis, que nos sirven para definir cmo
deseamos que se realicen las repeticiones. La primera parte es la inicializacin, que se ejecuta solamente al comenzar la primera iteracin del bucle. En esta parte se suele colocar la variable que utilizaremos para llevar la cuenta de las veces que se ejecuta el bucle.
La segunda parte es la condicin, que se evaluar cada vez que comience una iteracin del bucle. Contiene una expresin para decidir cundo se ha de detener el bucle, o mejor dicho, la condicin que se debe cumplir para que contine la ejecucin del bucle.
Por ltimo tenemos la actualizacin, que sirve para indicar los cambios que queramos ejecutar en las variables cada vez que termina la iteracin del bucle, antes de comprobar si se debe seguir ejecutando.
Despus del for se colocan las sentencias que queremos que se ejecuten en cada iteracin, acotadas entre llaves.
Un ejemplo de utilizacin de este bucle lo podemos ver a continuacin, donde se imprimirn los nmeros del 0 al 10.
var i for (i=0;i<=10;i++) { document.write(i) document.write("<br>") }
En este caso se inicializa la variable i a 0. Como condicin para realizar una iteracin, se tiene que cumplir que la variable i sea menor o igual que 10. Como actualizacin se incrementar en 1 la variable i.
Como se puede comprobar, este bucle es muy potente, ya que en una sola lnea podemos indicar muchas cosas distintas y muy variadas, lo que permite una rpida configuracin del bucle y una versatilidad enorme.
Por ejemplo si queremos escribir los nmero del 1 al 1.000 de dos en dos se escribir el siguiente bucle.
for (i=1;i<=1000;i+=2)
document.write(i)
Si nos fijamos, en cada iteracin actualizamos el valor de i incrementndolo en 2 unidades.

Nota: Otro detalle, no utilizamos las llaves englobando las instrucciones del bucle FOR porque slo tiene una sentencia y en este caso no es obligado, tal como pasaba con las instrucciones del IF.
Si queremos contar descendentemente del 343 al 10 utilizaramos este bucle.
for (i=343;i>=10;i--) document.write(i)
En este caso decrementamos en una unidad la variable i en cada iteracin, comenzando en el valor 343 y siempre que la variable tenga un valor mayor o igual que 10.
Ejercicio de ejemplo del bucle for

Vamos a hacer una pausa para asimilar el bucle for con un ejercicio que no encierra ninguna dificultad si hemos entendido el funcionamiento del bucle.
Se trata de hacer un bucle que escriba en una pgina web los encabezamientos desde <H1> hasta <H6> con un texto que ponga "Encabezado de nivel x".
Lo que deseamos escribir en una pgina web mediante Javascript es lo siguiente:
<H1>Encabezado de nivel 1</H1> <H2>Encabezado de nivel 2</H2> <H3>Encabezado de nivel 3</H3> <H4>Encabezado de nivel 4</H4> <H5>Encabezado de nivel 5</H5> <H6>Encabezado de nivel 6</H6>
Para ello tenemos que hacer un bucle que empiece en 1 y termine en 6 y en cada iteracin escribiremos el encabezado que toca.
for (i=1;i<=6;i++) { document.write("<H" + i + ">Encabezado de nivel " + i + "</H" + i + ">")
Este script se puede ver en funcionamiento aqu. Ahora que ya conocemos el bucle for, estamos en condiciones de aprender a manejar otras estructuras de control para realizar repeticiones, como los bucles while y do...while.
Descripcin y diferentes usos de los dos tipos de bucles WHILE que se encuentran disponibles en Javascript, con algunos ejemplos prcticos.
Estamos tratando acerca de las distintas estructuras de control que existen en el lenguaje Javascript y en concreto viendo los distintos tipos de bucles que podemos implementar en este lenguaje de programacin. En artculos anteriores del Manual de 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 WHILE que podemos utilizar en Javascript y los usos de cada uno.
Bucle WHILE
Estos bucles se utilizan cuando queremos repetir la ejecucin de unas sentencias un nmero indefinido de veces, siempre que se cumpla una condicin. Se ms sencillo de comprender que el bucle FOR, pues no incorpora en la misma lnea la inicializacin de las variables su condicin para seguir ejecutndose y su actualizacin. Slo se indica, como veremos a continuacin, la condicin que se tiene que cumplir para que se realice una iteracin.
while (condicin){ //sentencias a ejecutar }
Un ejemplo de cdigo donde se utiliza este bucle se puede ver a continuacin.
var color = "" while (color != "rojo"){ color = prompt("dame un color (escribe rojo para salir)","")
Este es un ejemplo de lo ms sencillo que se puede hacer con un bucle while. Lo que hace es pedir que el usuario introduzca un color y lo hace repetidas veces, mientras que el color introducido no sea rojo. Para ejecutar un bucle como este primero tenemos que inicializar la variable que vamos utilizar en la condicin de iteracin del bucle. Con la variable inicializada podemos escribir el bucle, que comprobar para ejecutarse que la variable color sea distinto de "rojo". En cada iteracin del bucle se pide un nuevo color al usuario para actualizar 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 "rojo" y as sucesivamente mientras que no se haya introducido como color el texto "rojo".
Nota: Hemos utilizado en este ejemplo la funcin prompt de Javascript, que no hemos visto todava en este manual. Esta funcin sirve para que mostrar una caja de dilogo donde el usuario debe escribir un texto. Esta funcin pertenece al objeto window de Javascript y la comentamos en el artculo Mtodos de window en Javascript.
Bucle DO...WHILE
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. Se utiliza generalmente cuando no sabemos cuantas veces se habr de ejecutar el bucle, igual que el bucle WHILE, con la diferencia de que sabemos seguro que el bucle por lo menos se ejecutar una vez.
Este tipo de bucle se introdujo en Javascript 1.2, por lo que no todos los navegadores los soportan, slo los de versin 4 o superior. En cualquiuer caso, cualquier cdigo que quieras escribir con DO...WHILE se puede escribir tambin utilizando un bucle WHILE, con lo que en navegadores antiguos debers traducir tu bucle DO...WHILE por un bucle WHILE.
La sintaxis es la siguiente.
do { //sentencias del bucle } while (condicin)
El bucle se ejecuta siempre una vez y al final se evala la condicin para decir si se ejecuta otra
vez el bucle o se termina su ejecucin.
Veamos el ejemplo que escribimos para un bucle WHILE en este otro tipo de bucle.
var color do { color = prompt("dame un color (escribe rojo para salir)","") } while (color != "rojo")
Este ejemplo funciona exactamente igual que el anterior, excepto que no tuvimos que inicializar la variable color antes de introducirnos en el bucle. Pide un color mientras que el color introducido es distinto que "rojo".
Ejemplo de uso de los bucles while

Vamos a ver a continuacin un ejemplo ms prctico sobre cmo trabajar con un bucle WHILE. Como resulta muy difcil hacer ejemplos prcticos con lo poco que sabemos sobre Javascript, vamos a adelantar una instruccin que aun no conocemos.
En este ejemplo vamos a declarar una variable e inicializarla a 0. Luego iremos sumando a esa variable un nmero aleatorio del 1 al 100 hasta que sumemos 1.000 o ms, imprimiendo el valor de la variable suma despus de cada operacin. Ser necesario utilizar el bucle WHILE porque no sabemos exactamente el nmero de iteraciones que tendremos que realizar (depender de los valores aleatorios que se vayan obteniendo).
var suma = 0 while (suma < 1000){ suma += parseInt(Math.random() * 100) document.write (suma + "<br>") }
Suponemos que por lo que respecta al bucle WHILE no habr problemas, pero donde si que puede haberlos es en la sentencia utilizada para tomar un nmero aleatorio. Sin embargo, no es necesario explicar aqu la sentencia porque lo tenemos planeado hacer ms adelante. De todos modos, si lo deseas, puedes ver este artculo que habla sobre nmeros aleatorios en Javascript.
Podemos ver una pgina con el ejemplo en funcionamiento.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> </head> <body> <h1>Ejemplo de WHILE</h1> <script> var suma = 0 while (suma < 1000){ suma += parseInt(Math.random() * 100) document.write (suma + "<br>") } </script> </body> </html>
Con esto ya hemos conocido todos los tipos de bucles que existen en Javascript, no obstante aun vamos a dedicar un artculo para explicar las sentencias break y continue que nos sirven para alterar el funcionamiento normal de los bucles en dos sentidos.
Dos instrucciones que aumentan el control sobre los bucles en Javascript. Sirven para parar y continuar con la siguiente iteracin del bucle respectivamente.
Javascript tiene diferentes estructuras de control para implementar bucles, como FOR, WHILE y DO...WHILE, que ya hemos podido explicar en captulos anteriores del Manual de Javascript. Como hemos podido comprobar, con estos bucles podemos abarcar gran cantidad de necesidades, pero quizs con el tiempo encuentres que te faltan algunas posibilidades de control de las repeticiones de los bucles. Imagina por ejemplo que estas haciendo un bucle muy largo para encontrar algo en cientos o miles de sitios. Pero ponte en el caso que durante las primeras iteraciones encuentres ese valor que buscabas. Entonces no tendra sentido continuar con el resto del bucle para buscar ese elemento, pues ya lo habas encontrado. En estas situaciones nos conviene saber para el bucle cancelar el resto de iteraciones. Obviamente, sto es solo un ejemplo de cmo podramos 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, existen 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. Son las instrucciones break y continue.:
break: Significa detener la ejecucin de un bucle y salirse de l. continue: Sirve para detener la iteracin actual y volver al principio del bucle para realizar otra iteracin, si corresponde.
Break
Se detiene un bucle utilizando la palabra break. Detener un bucle significa salirse de l y dejarlo todo como est para continuar con el flujo del programa inmediatamente despus del bucle.
for (i=0;i<10;i++){ document.write (i) escribe = prompt("dime si continuo preguntando...", "si") if (escribe == "no") break }
Este ejemplo escribe los nmeros del 0 al 9 y en cada iteracin del bucle pregunta al usuario si desea continuar. Si el usuario dice cualquier cosa continua, excepto cuando dice "no", situacin en la cual se sale del bucle y deja la cuenta por donde se haba quedado.
Continue
Sirve para volver al principio del bucle en cualquier momento, sin ejecutar las lneas que haya por debajo de la palabra continue.
var i=0 while (i<7){ incrementar = prompt("La cuenta est en " + i + ", dime si incremento", "si") if (incrementar == "no") continue
i++ }
Este ejemplo, en condiciones normales contara hasta desde i=0 hasta i=7, pero cada vez que se ejecuta el bucle pregunta al usuario si desea incrementar la variable o no. Si introduce "no" se ejecuta la sentencia continue, con lo que se vuelve al principio del bucle sin llegar a incrementar en 1 la variable i, ya que se ignoraran las sentencia que hayan por debajo del continue.
Ejemplo adicional de la sentencia break

Un ejemplo ms prctico sobre estas instrucciones se puede ver a continuacin. Se trata de un bucle FOR planeado para llegar hasta 1.000 pero que lo vamos a parar con break cuando lleguemos a 333.
for (i=0;i<=1000;i++){ document.write(i + "<br>") if (i==333) break; }
Podemos ver una pgina con el ejemplo en funcionamiento. Con la descripcin de las sentencias break y continue hemos podido abarcar todo lo que se debe saber sobre la creacin de bucles en Javascript. Ahora bien, en el siguiente artculo todava vamos a seguir en el tema de las estructuras de control, porque queremos ofrecer un ejemplo un poco ms avanzado donde aprenderemos a anidar bucles.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Ejemplo break</title> </head> <body> <script> for (i=0;i<=1000;i++){ document.write(i + "<br>") if (i==333) break; } </script>
</body> </html>
Explicamos lo que es un bucle anidado, cmo funcionan y para qu sirven. Vemos algunos ejemplos.
En el Manual de Javascript hemos recorrido ya diversos artculos para hablar de bucles. En este momento no debera haber ningn problema para poder crear los distintos tipos de bucles sin problemas, no obstante, queremos dedicar un artculo completo a tratar acerca de uno de los usos ms habituales de los bucles, que podremos encontrar cuando estemos haciendo programas ms complejos: la anidacin de bucles. Anidar un bucle consiste en meter ese bucle dentro de otro. La anidacin de bucles es necesaria para hacer determinados procesamientos un poco ms complejos que los que hemos visto en los ejemplos anteriores. Si en vuestra experiencia como programadores los habis anidado un bucle todava, tener certeza que ms tarde o temprano os encontraris con esa necesidad.
Un bucle anidado tiene una estructura como la que sigue. Vamos a tratar de explicarlo a la vista de estas lneas:
for (i=0;i<10;i++){ for (j=0;j<10;j++) { document.write(i + "-" + j) } }
La ejecucin funcionar de la siguiente manera. Para empezar se inicializa el primer bucle, con lo que la variable i valdr 0 y a continuacin se inicializa el segundo bucle, con lo que la variable j valdr tambin 0. En cada iteracin se imprime el valor de la variable i, un guin ("-") y el valor de la variable j, como las dos variables valen 0, se imprimir el texto "0-0" en la pgina web.
Debido al flujo 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 ejecuta. En este ejemplo, para cada
iteracin del bucle ms externo el bucle anidado se ejecutar por completo una vez, es decir, har sus 10 iteraciones. En la pgina web se escribiran estos valores, en la primera iteracin del bucle externo y desde el principio:
0-0 0-1 0-2 0-3 0-4 0-5 0-6 0-7 0-8 0-9
Para cada iteracin del bucle externo se ejecutarn las 10 iteraciones del bucle interno o anidado. Hemos visto la primera iteracin, ahora vamos a ver las siguientes iteraciones del bucle externo. En cada una acumula una unidad en la variable i, con lo que saldran estos valores.
1-0 1-1 1-2 1-3 1-4 1-5 1-6 1-7 1-8 1-9
Y luego estos.
2-0 2-1 2-2 2-3
2-4 2-5 2-6 2-7 2-8 2-9
As hasta que se terminen los dos bucles, que sera cuando se alcanzase el valor 9-9.
Veamos un ejemplo muy parecido al anterior, aunque un poco ms til. Se trata de imprimir en la pgina las todas las tablas de multiplicar. Del 1 al 9, es decir, la tabla del 1, la del 2, del 3...
for (i=1;i<10;i++){ document.write("<br><b>La tabla del " + i + ":</b><br>") for (j=1;j<10;j++) { document.write(i + " x " + j + ": ") document.write(i*j) document.write("<br>") } }
Con 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 1 y luego las dems en orden ascendente hasta el 9. Con el segundo bucle escribo cada uno de los valores de cada tabla. Se puede ver el ejemplo en marcha en este enlace.
Nota: Veremos ms cosas con bucles anidados en captulos posteriores, aunque si queremos adelantarnos un poco para ver un nuevo ejemplo que afiance estos conocimientos podemos ir viendo un ejemplo en el Taller de Javascript sobre bucles anidados, donde se construye la tabla con todos los colores puros en definiciones de 256 colores.
Con este artculo 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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Tablas de multiplicar</title> </head> <body> <h1>Tablas de multiplicar</h1> <script language="JavaScript"> for (i=1;i<10;i++){ document.write("<br>La tabla del " + i + ":<br>") for (j=1;j<10;j++) { document.write(i + " x " + j + ": ") document.write(i*j) document.write("<br>") } } </script> </body> </html>
Taller 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 lenguaje. A continuacin veremos varios ejemplos, que hemos destacado para esta introduccin en el Manual de Javascript, por tener un mnimo de complejidad y aunque sean muy bsicos, nos vendrn bien para tener una idea ms exacta de lo que es Javascript a la hora de recorrer los siguientes captulos.
Abrir una ventana secundaria

Primero vamos a ver que con una lnea de Javascript podemos hacer cosas bastante atractivas. Por ejemplo podemos ver cmo abrir una ventana secundaria sin barras de mens que muestre el buscador Google. El cdigo sera el siguiente.
<script> window.open("http://www.google.com","","width=550,height=420,menubar=no") </script>
Un mensaje de bienvenida
Podemos mostrar una caja de texto emergente al terminarse de cargar la portada de nuestro sitio web, que podra dar la bienvenida a los visitantes.
<script> window.alert("Bienvenido a mi sitio web. Gracias...") </script>
Fecha actual
Veamos 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 da", es decir, est actualizada.
<script> document.write(new Date()) </script>
Estas lneas deberan introducirse dentro del cuerpo de la pgina en el lugar donde queramos que aparezca la fecha de ltima actualizacin.
Nota: Un detalle a destacar es que la fecha aparece en un formato un poco raro, indicando tambin la hora y otros atributos de la misma, pero ya aprenderemos a obtener exactamente lo que deseemos en el formato correcto.
Botn de volver
Otro ejemplo rpido se puede ver a continuacin. Se trata de un botn para volver hacia atrs, como el que tenemos en la barra de herramientas del navegador. Ahora veremos una lnea de cdigo que mezcla HTML y Javascript para crear este botn que muestra la pgina anterior en el historial, si es que la hubiera.
<input type=button value=Atrs onclick="history.go(-1)">
El botn sera parecido al siguiente. Podemos pulsarlo para ver su funcionamiento (debera llevarnos a la pgina anterior).
Como diferencia con los ejemplos anteriores, hay que destacar que en este caso la instruccin Javascript se encuentra dentro de un atributo de HTML, onclick, que indica que esa instruccin se tiene que ejecutar como respuesta a la pulsacin del botn.
Este artculo te ensear en profundidad como abrir ventanas secundarias y configurar su forma.

En determinadas ocasiones es muy til abrir un enlace en una ventana secundaria, es decir, una ventana aparte que se abre para mostrar una informacin especfica. Algunas ventajas de abrir un enlace en una ventana secundaria pueden ser que:
El usuario no se marcha de la pgina donde estaba el enlace. La ventana secundaria se puede configurar libremente con lo que se pueden hacer ventanas ms grandes o pequeas y con ms o menos mens. En general, el grado de control de la ventana secundaria utilizando Javascript aumenta.
Pincha aqu para ver lo que es una ventana secundaria Para abrir una ventana secundaria podemos hacerlo de dos maneras, con HTML y con Javascript. Veamos cada una de ellas
Abrir una ventana con HTML
Se puede conseguir abrir una ventana secundaria muy fcilmente con tan solo HTML. Para ello podemos utilizar el atributo TARGET de las etiquetas HREF. Si ponemos target="_blank" en el enlace, la pgina se abrir en una ventana secundaria. Tambin podemos poner target="xxx" para que el enlace se presente el la ventana llamada xxx o en el frame xxx.
El enlace tendra que tener esta forma:
<a href="mipagina.html" target="_blank">
El problema de abrir una pgina secundaria con HTML consiste en que no podemos definir la forma de sta ni podremos ejercer mayor control sobre lla, tal como comentbamos entre las ventajas de abrir una ventana secundria con Javascript. La ventana que se abre siempre ser como el usuario tenga definido por defecto en su navegador.
Abrir una ventana con Javascript
Para abrir una ventana con Javascript podemos utilizar la sentencia window.open(). No pasa nada por que no conozcas Javascript, puesto que es muy sencillo utilizarlo para este caso. Vamos a ver paso a paso cmo abrir una ventana secundaria utilizando Javascript.
1. Sentencia Javascript para abrir una ventana
La sentencia es simplemente la funcin window.open(), lo ms complicado es saber cmo utilizar esa funcin, pero ahora veremos que no reviste ninguna complicacin.
La funcin window.open() recibe tres parmetros, que se colocan dentro de los parntesis, de este modo:
window.open(URL,nombre_de_la_ventana,forma_de_la_ventana)
Veamos rpidamente cada uno de estos parmetros por separado.
URL: representa el URL que deseamos abrir en la ventana secundaria, por ejemplo http://www.desarrolloweb.com nombre_de_la_ventana: es el nombre que se le asigna a esta ventana para dirigir enlaces con el atributo target del HTML forma_de_la_ventana: se indica el aspecto que va a tener la ventana secundaria. Por ejemplo se puede definir su altura, anchura, si tiene barras de desplazamiento, etc
Veamos un ejemplo de sentencia Javascript completa para abrir una ventana secundaria:
window.open("http://www.desarrolloweb.com" , "ventana1" , "width=120,height=300,scrollbars=NO")
Esto quiere decir que abra la pgina inicial de desarrolloweb.com en una ventana secundaria a la que vamos a llamar ventana1. Adems, la ventana ser de 120 pixels de ancho, 300 de alto y no tendr barras de desplazamiento.
Una aclaracin adicional, si despus de abrir esa ventana colocamos otro enlace en la pgina que abra la ventana cuyo atributo target est dirigido hacia el nombre_de_la_ventana (en este caso ventana1), este enlace se mostrar en la ventana secundaria.
2. Funcin que abre una ventana
Lo ms cmodo para abrir una ventana es colocar una funcin Javascript que se encarge de las tareas de abrirla y que reciba por parmetro la URL que se desea abrir.
El script es sencillo, vemoslo a continuacin:
<script language=javascript> function ventanaSecundaria (URL){ window.open(URL,"ventana1","width=120,height=300,scrollbars=NO") } </script>
3. Colocamos un enlace
Este enlace no debe estar dirigido directamente a la pgina que queramos abrir, sino a la sentencia Javascript necesaria para abrir la ventana secundaria. Para ejecutar una sentencia Javascript con la pulsacin de un enlace lo hacemos as:
<a href="javascript:sentencia_javascript_para_abrir_la_ventana">
4. El enlace llama a la funcin que abre la ventana
Ahora Veamos cmo quedara todo ese enlace en la pgina.
<a href="javascript:ventanaSecundaria('http://www.desarrolloweb.com')"> Pincha en este enlace para abrir la ventana secundaria</a>
Que da como resulado: Pincha en este enlace para abrir la ventana secundaria
(En la pgina que vayamos a colocar este enlace deberamos tener el script que hemos hecho anteriormente que contena la funcin para abrir la ventana.)
Hay que fijarse que las comillas simples que se colocan para definir el URL que se pasa como parmetro de la funcin ventanaSecundaria(). Son comillas simples porque el href del enlace ya tiene unas comillas dobles, y dentro de comillas dobles siempre se han de utilizar comillas simples a no ser que deseemos cerrar las comillas dobles.
Parmetros para dar forma a una ventana
Estos atributos los puedes utilizar en la funcin window.open() para definir la forma que deseas que tenga tu ventana secundaria.
Width Height Top
Left
Scrollbars
Resizable
Directories (barra directorios) Location (barra direcciones) Menubar Cuando ponemos el atributo=YES estamos forzando a que ese (barra de mens) elemento se vea. Cuando ponemos atributo=NO lo que hacemos es Status evitar que ese elemento se vea. (barra de estado) Titlebar (la barra del ttulo) Toolbar (barra de herramientas)
Abrir una ventana sin un enlace
Ajusta el ancho de la ventana. En pixels Ajusta el alto de la ventana Indica la posicin de la ventana. En concreto es la distancia en pixels que existe entre el borde superior de la pantalla y el borde superior de la ventana. Indica la posicin de la ventana. En concreto es la distancia en pixels que existe entre el borde izquierdo de la pantalla y el borde izquierdo de la ventana. Para definir de forma exacta si salen o no las barras de desplazamiento. scrollbars=NO hace que nunca salgan. Scrollbars=YES hace que salgan (siempre en ie y solo si son necesarias en NTS). Establece si se puede o no modificar el tamao de la ventana. Con resizable=YES se puede modificar el tamao y con resizable=NO se consigue un tamao fijo. A partir de aqu se enumeran otra serie de propiedades que sirven para mostrar o no un elemento de la barra de navegacin que tienen los navegadores ms populares, como podra ser la barra de mens o la barra de estado.
En otras ocasiones desearemos abrir una ventana secundaria automticamente, es decir, sin necesidad de que el usuario pulse sobre ningn enlace. En este caso, el cdigo de la funcin ventanaSecundaria nos sirve tambin y habr que aadir una lnea de cdigo Javascript a continuacin de la funcin ventanaSecundaria. Esta lnea a aadir simplemente ser una llamada a la funcin que se ejecutar segn se est cargando la pgina. Veamos como quedara este
cdigo:
<script language=javascript> function ventanaSecundaria (URL){ window.open(URL,"ventana1","width=120,height=300,scrollbars=NO") }
ventanaSecundaria("http://www.desarrolloweb.com"); </script>
Explicamos con detalle el proceso para cerrar ventanas del navegador mediante la programacin Javascript.
Para cerrar la ventana del navegador debemos utilizar el mtodo close() del objeto window de la vetana que deseamos cerrar. Es muy sencillo, aun as, vamos a ver un ejemplo sobre cerrar ventanas.
El ejemplo consta de una pgina que tiene un botn que abre una ventana secundaria o popup. Adems, tendr otro botn que cerrar la ventana secundaria. Por su parte, la ventana secundaria tendr un botn que permitir cerrarse a ella misma. Luego de tratar este ejemplo comentaremos el caso especial de cerrar la ventana principal desde el popup y las pegas que tiene.
Veamos el ejemplo en marcha y as comentaremos con ms facilidad los cdigos.
La pgina principal tendra esta forma:
<html> <head> <title>Ventana Principal</title> <script> //creamos la variable ventana_secundaria que contendr una referencia al popup que vamos a abrir //la creamos como variable global para poder acceder a ella desde las distintas funciones var ventana_secundaria
function abrirVentana(){ //guardo la referencia de la ventana para poder utilizarla luego ventana_secundaria = window.open("cerrar_window2.html","miventana","width=300,height=200,menubar=no") }
function cerrarVentana(){ //la referencia de la ventana es el objeto window del popup. Lo utilizo para acceder al mtodo close ventana_secundaria.close() } </script> </head>
<body> Esta es la ventana principal <form> <input type=button value="Abrir ventana secundaria" onclick="abrirVentana()"> <br> <br> <input type=button value="Cerrar ventana secundaria" onclick="cerrarVentana()"> </form>
</body> </html>
Contiene un script en la cabecera de la pgina con las funciones para abrir y cerrar la ventana. Adems, como ya se indic anteriormente en este manual, se debe guardar una referencia a la ventana que se acaba de abrir para poder realizar acciones sobre ella posteriormente, en este caso cerrarla. Como la referencia de la ventana se crea en la funcin abrirVentana() y luego se utilizar en la funcin cerrarVentana(), dicha referencia deber declararse como global o de lo contrario slo tendra validez mientras la funcin abrirVentana() estuviera ejecutndose y, cuando pretendisemos utilizarla en la funcin cerrarVentana(), nos dira que esa referencia ya no existe.
As que disponemos de una referencia global a la ventana que va a abrirse y dos funciones que abren el popup guardando la referencia y cerrar el popup utilizando la referencia de la ventana a cerrar. Estas dos funciones se llaman desde dos botones de la pgina, que hemos colocado dentro de un formulario. Podemos poner en marcha la pgina en una ventana aparte.
Nota: Hay que sealar que puede haber un error javascript si se pretende cerrar la ventana antes de abrirla. Para evitarlo podemos controlar que realmente la ventana est abierta antes de ejecutar el mtodo close() de su objeto window, pero esa es una prctica que veremos en ejercicios ms adelante.
Por su parte, el popup tiene un cdigo como el siguiente.
<html> <head> <title>Ventana Secundaria</title> <script> function cerrarse(){ window.close() } </script> </head>
<body>
Esta es la ventana del popup
<form> <input type=button value="Cerrar" onclick="cerrarse()"> </form>
</body> </html>
Contine tan solo una funcin para cerrarse ella misma, que lo nico que hace es ejecutar el mtodo close() sobre su propio objeto window. Tambin hemos colocado un botn que se ha configurado para llamar a la funcin que cierra la ventana cuando se le haga clic.
El ejemplo sobre cerrar ventanas se puede ver aqu.
Un detalle sobre cerrar ventanas
En cualquier momento podemos cerrar una ventana secundaria utilizando el mtodo close() del objeto window. En el ejemplo anterior hemos visto cmo se cierran ventanas y es muy sencillo. En cualquier momento podemos cerrar una ventana, pero si intentamos cerrar una ventana que no se ha abierto con Javascript (sin utilizar window.open()) nos saldr una caja de confirmacin que pregunta al usuario si de verdad quiere cerrar la ventana.
Podemos ver esta caja de confirmacin al pulsar el botn siguiente, que intentar cerrar esta ventana.
Nota: La caja de confirmacin que hemos podido ver aparece como elemento de seguridad, para evitar que un programador malicioso intente cerrar una ventana que hemos abierto nosotros como usuarios y que, en teora, no tiene permiso para cerrar. As que a partir de determinado navegador decidieron preguntar al usuario si realmente desea que se cierre esa ventana. De todos modos, las cosas pueden variar de unos casos a otros, ya que en Netscape 7 ya no preguntan si se desea de verdad cerrar la ventana. Por su parte, si en Internet Explorer 6 la ventana se abri con un enlace HTML con el atributo target="_blank" tampoco aparece la ventana de la que estamos hablando.
Es slo un detalle que no tiene mucha importancia, pero para las personas que nunca han experimentado con el trabajo con ventanas secundarias en Javascript, resultar sorprendente que el navegador haga esa pregunta, que probablemente nunca hayamos visto. Una cosa ms, slo ocurre esto en navegadores modernos, aunque actualmente le va a pasar a casi todos los usuarios.
Script para conseguir un degradado del color de fondo de la pgina web. Un ejemplo es simple y otro, ms complejo, se adapta a muchos degradados distintos.
Vamos a ver un ejemplo tpico de efecto especial en una pgina web: un degradado de colores para el fondo de la pgina.
El degradado consiste en cambiar el color de fondo de la pgina poco a poco para ir acercndolo hacia otro color . Podemos hacer muchos degradados distintos para pginas web con poco esfuerzo, pocos conocimientos tcnicos y bastante de imaginacin.
Se puede ver un ejemplo de degradado en una pgina a parte, para hacerse una idea exacta de
lo que vamos a explicar en este taller. Adems, al final del artculo, veremos un script que permite hacer una mplia gama de degradados, como este ejemplo de degradado ms complejo.
Complicacin del degradado
La mayor complicacin que encontramos a la hora de crear un script para hacer un degradado es que los colores se expresan en hexadecimal y en Javascript trabajamos con nmeros decimales. De modo que, para convertir nuestros nmeros decimales en hexadecimales y poder as utilizarlos para indicar colores hemos creado una funcin especial:
function convierteHexadecimal(num){ var hexaDec = Math.floor(num/16) var hexaUni = num - (hexaDec * 16) return hexadecimal[hexaDec] + hexadecimal[hexaUni] }
La funcin devuelve el nmero pasado por parmetro en forma hexadecimal. Por ejemplo, si recibe 140 devuelve 8C. Si recibe 15 devuelve 0F.
Para ello se ayuda de un Array creado anteriormente que guarda conversin de nmeros decimales a hexadecimales de las unidades bsicas, es decir, del 0 a la letra F. Esta es la lnea que crea el Array.
hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
La funcin primero calcula los grupos de 16 que se pueden hacer a partir del nmero que recibimos. El nmero de estos grupos seran las "hexa-decenas".
Luego calculamos el resto de la divisin anterior, o dicho de otra forma, cuantas unidades nos restan despus de tomar estas "hexa-decenas". ste segundo nmero sern las unidades. Al juntar las unidades con los grupos de 16 que hemos obtenido, convirtiendo ambos valores por medio del array de conversin decimal a hexadecimal, conseguimos la conversin buscada.
Creando la secuencia de colores para el degradado
Una vez podemos convertir del valor decimal (necesario para llevar la cuenta en Javascript) al hexadecimal (necesario para indicar un color) nuestra nica tarea ser contar en decimal los colores y convertirlos a hexadecimal antes de cambiar la propiedad document.bgColor, que como sabemos es la propiedad que guarda el color de fondo de la pgina.
Hemos querido hacer un primer ejemplo muy simple para que se pueda entender ms fcilmente. El ejemplo lo hemos podido ver anteriormente en funcionamiento. Se trata de una escala de grises que empieza en negro y termina en blanco.
color_decimal = 0
Primero inicializamos la variable color_decimal, que es la que guarda el color actual a mostrar, en formato decimal. Slo guardamos un valor del color pues, al ser una escala de grises, todos los valores RGB son el mismo.
Tendremos una funcin llamada degradado que ser la encargada de realizar la mayor parte del trabajo.
function degradado(){ color_decimal ++ color_hexadecimal = convierteHexadecimal(color_decimal) document.bgColor = color_hexadecimal + color_hexadecimal + color_hexadecimal
//la llamo con un retardo if (color_decimal < 255) setTimeout("degradado()",1) }
La funcin se encarga de incrementar el color_decimal en una unidad, convertirlo en hexadecimal y colocarlo dentro de propiedad document.bgColor para actualizar el fondo de la pgina.
Finalmente, y en esto se basan muchos efectos especiales de Javascript, se llama la funcin a si misma con un retardo. En el ejemplo podemos ver que si el color_decimal es menor de 255 (que es el mximo que se puede alcanzar en colores) se llama a la funcin con setTimeout, que es la que nos crea el retardo.
El cdigo de este ejemplo simple se puede ver entero a continuacin:
<html> <head> <title>Ejemplo de degradado 1</title> </head>
<body bgcolor=000000>
<h1 align="center">Degradando...</h1> <h2>Ejemplo 1</h2> En esta pgina podemos ver un ejemplo de degradado de negro a blanco, con una sola pasada. Solo se ve el texto cuando el fondo es suficientemente blanco para que contraste.
<script language="javascript">
hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
function convierteHexadecimal(num){ var hexaDec = Math.floor(num/16) var hexaUni = num - (hexaDec * 16) return hexadecimal[hexaDec] + hexadecimal[hexaUni] }
color_decimal = 0
function degradado(){ color_decimal ++ color_hexadecimal = convierteHexadecimal(color_decimal) document.bgColor = color_hexadecimal + color_hexadecimal + color_hexadecimal
//la llamo con un retardo if (color_decimal < 255) setTimeout("degradado()",1) }
degradado() </script> </body> </html>
Si queremos, tambin se puede ver el ejemplo en funcionamiento en una pgina a parte.
Ms degradados
Probablemente este no sea el ejemplo ms til para el lector que desea implementar un degradado en su pgina, pues resulta un poco simple y especfico. Para solucionar este asunto hemos creado un sistema donde se puede configurar el tipo de degradado de la pgina con una serie de variables. Es un ejemplo que se basa en el que acabamos de ver, aunque tiene muchas variables para parametrizar el comportamiento del degradado y que se adapte a las necesidades del desarrollador.
Por falta de tiempo no vamos a explicar todo el script, tan slo vamos a fijarnos en las variables que permiten configurarlo.
color_inicio = new Array(150,150,255)
Con color_incio configuramos el color que se muestra al principio en la pgina. Lo indicamos con un array, donde en cada casilla colocamos el valor decimal de cada uno de los tres colores RGB.
color_fin = new Array(255,99,0)
Con color_fin configuramos el color al que va a tender nuestro degradado, de manera idntica a como lo hacamos en el color_inicio
pasos = 100
Es el nmero de pasos que vamos a utilizar en alcanzar el valor del color final, desde el color de inicio.
comportamiento = 1
Esta variable sirve para definir el comportamiento del script en cuatro posibles valores: 1. Realiza un bucle infinito desde el color de inicio al color fin y del color fin al color de inicio, para volver a empezar. Se repite por siempre. 2. Realiza una pasada desde el color inicio al color fin. Termina cuando acaba la pasada. 3. Realiza una pasada del color de inicio al de fin y una vuelta desde el fin al inicio. Termina cuando realiza la ida y la vuelta. 4. Un bucle infinito con una parada de 10 segundos entre cuando ha hecho la ida y la vuelta, antes de volver ha empezar otra ida-vuelta.
5. Ejercicio realizado para ilustrar el funcionamiento de la clase Date en Javascript.

6. Por Miguel Angel Alvarez
7. Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
8. En el captulo anterior de la segunda parte del manual de Javascript explicamos las generalidades de la clase Date, para trabajo con fechas. As que ahora podemos poner los conocimientos en la prctica en un ejemplo completo. 9. En este ejemplo vamos a crear dos fechas, una con el instante actual y otra con fecha del pasado. Luego las imprimiremos las dos y extraeremos su ao para imprimirlo tambin. Luego actualizaremos el ao de una de las fechas y la volveremos a escribir con un formato ms legible. 10. //en estas lneas creamos las fechas
miFechaActual = new Date() miFechaPasada = new Date(1998,4,23)
11. //en estas lneas imprimimos las fechas. document.write (miFechaActual) document.write ("<br>") document.write (miFechaPasada) 12. //extraemos el ao de las dos fechas anoActual = miFechaActual.getFullYear() anoPasado = miFechaPasada.getFullYear() 13. //Escribimos en ao en la pgina document.write("<br>El ao actual es: " + anoActual) document.write("<br>El ao pasado es: " + anoPasado) 14. //cambiamos el ao en la fecha actual miFechaActual.setFullYear(2005)
15. //extraemos el da mes y ao dia = miFechaActual.getDate() mes = parseInt(miFechaActual.getMonth()) + 1 ano = miFechaActual.getFullYear() 16. //escribimos la fecha en un formato legible document.write ("<br>") document.write (dia + "/" + mes + "/" + ano) 17. Si se desea, se puede ver en funcionamiento este script en una pgina a parte. 18. Hay que destacar un detalle antes de acabar y es que el nmero del mes puede empezar desde 0. Por lo menos en el Netscape con el que realizamos las pruebas empezaba en 0 el mes. Por esta razn sumamos uno al mes que devuelve el mtodo getMonth. 19. Hay ms detalles a destacar, pues resulta que en Netscape el mtodo getFullYear() devuelve los aos trascurridos desde 1900, con lo que al obtener el ao de una fecha de, por ejemplo, 2005, indica que es el ao 105. Para obtener el ao completo tenemos a nuestra disposicin el mtodo getFullYear() que devolvera 2005 del mismo modo en Netscape e Internet Explorer. 20. Mucha atencin, pues, al trabajo con fechas en distintas plataformas, puesto que podra ser problemtico el hecho de que nos ofrezcan distintas salidas los mtodos de manejo de fechas, com siempre dependiendo de la marca y versin de nuestro navegador. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Trabajo con fechas</title> </head> <body> <script language=javascript> //en estas lneas creamos las fechas miFechaActual = new Date() miFechaPasada = new Date(1998,4,23) //en estas lneas imprimimos las fechas. document.write (miFechaActual) document.write ("<br>") document.write (miFechaPasada) //extraemos el ao de las dos fechas anoActual = miFechaActual.getFullYear() anoPasado = miFechaPasada.getFullYear() //Escribimos en ao en la pgina document.write("<br>El ao actual es: " + anoActual) document.write("<br>El ao pasado es: " + anoPasado) //cambiamos el ao en la fecha actual miFechaActual.setFullYear(2005) //extraemos el da mes y ao
dia = miFechaActual.getDate() mes = parseInt(miFechaActual.getMonth()) + 1 ano = miFechaActual.getFullYear() //escribimos la fecha en un formato legible document.write ("<br>") document.write (dia + "/" + mes + "/" + ano) </script> </body> </html>
Cmo hacer con Javascript que un elemento de formulario select cambie sus opciones cuando cambie otro elemento select de la pgina. De modo que cada opcin de un select tenga un grupo de opciones posibles para el otro select.
Vamos a conocer uno de los trucos ms solicitados de Javascript, que tiene mucha relacin con el tema de formularios y donde se utiliza el evento onchange de Javascript. Es un ejemplo sobre cmo realizar una pgina con un par de selects donde, segn el valor escogido en uno de ellos, cambien las opciones posibles del otro select. Lo mejor para ver lo que vamos a hacer es ver una pgina web donde se muestra en funcionamiento el script. Para ver su funcionamiento debemos cambiar la seleccin del primer select y comprobaremos como las opciones del segundo select cambian automticamente. El ejemplo que hemos ilustrado utiliza provincias y pases. Al escoger en el primer select un pas, en el segundo debe mostrarnos las provincias de ese pas para que escojamos una provincia, pero slo una que tenga que est en el pas seleccionado en primer trmino.
Conocer el objeto select y los option

Es importante conocer los objetos de formulario select y los option. Los select corresponden con las cajas de seleccin desplegables y los option con cada una de las opciones de la caja desplegable. Podemos ver un artculo que habla de ello. En concreto nos interesa hacer varias cosas que tienen que ver con extraer el valor de un select en cualquier momento, fijar su nmero de opciones y, para cada opcin, colocar su valor y su texto asociado. Todo esto aprenderemos a hacerlo en este ejemplo.
Referencia: Para conocer el trabajo con formularios y la jerarqua de objetos javascript (Todo eso es la base del trabajo con los elementos de las pginas en Javascript) debemos haber leer el manual de Javascript II.
Modo de llevar a cabo el problema

Para empezar, vamos a utilizar un formulario con dos selects, uno para el pas y otro para la provincia.
<form name="f1"> <select name=pais onchange="cambia_provincia()"> <option value="0" selected>Seleccione... <option value="1">Espaa <option value="2">Argentina <option value="3">Colombia <option value="4">Francia </select>
<select name=provincia> <option value="-"></select> </form> Nos fijamos en el select asociado al pas de este formulario que, cuando se cambia la opcin de pas, se debe llamar a la funcin cambia_provincia(). Veremos ms adelante esta funcin, ahora es importante fijarse que est asociada al evento onchange que se activa cuando cambia la opcin en el select. Todo lo dems ser cdigo Javascript. Empezamos definiendo un montn de arrays con las provincias de cada pas. En este caso tenemos slo 4 pases, entonces necesitar 4 arrays. En cada array tengo la lista de provincias de cada pas, colocada en cada uno de los elementos del array. Adems, dejar una primera casilla con un valor "-" que indica que no se ha seleccionado ninguna provincia.
var provincias_1=new Array("-","Andaluca","Asturias","Baleares","Canarias","Castilla y Len","Castilla-La Mancha","...") var provincias_2=new Array("-","Salta","San Juan","San Luis","La Rioja","La Pampa","...")
var provincias_3=new Array("-","Cali","Santamarta","Medellin","Cartagena","...") var provincias_4=new Array("-","Aisne","Creuse","Dordogne","Essonne","Gironde ","...")
Hay que fijarse que los ndices del array de cada pas se corresponden con los del select del pas. Por ejemplo, la opcin Espaa, tiene el valor asociado 1 y el array con las provincias de Espaa se llama provincias_1. El script se completa con una funcin que realiza la carga de las provincias en el segundo select. El mecanismo realiza bsicamente estas acciones:
Detecto el pas que se ha seleccionado Si el valor del pas no es 0 (el valor 0 es cuando no se ha seleccionado pas)
o o o
Tomo el array de provincias adecuado, utilizando el ndice del pas. Marco el nmero de opciones que debe tener el select de provincias Para cada opcion del select, coloco su valor y texto asociado, que se hace corresponder con lo indicado en el array de provincias.
SI NO (El valor de pas es 0, no se ha seleccionado pas)
Coloco en el select de provincia un nico option con el valor "-", que significaba que no haba provincia.
Coloco la opcin primera del select de provincia como la seleccionada.
La funcin tiene el siguiente cdigo. Est comentado para que se pueda entender mejor.
function cambia_provincia(){ //tomo el valor del select del pais elegido var pais pais = document.f1.pais[document.f1.pais.selectedIndex].value //miro a ver si el pais est definido if (pais != 0) { //si estaba definido, entonces coloco las opciones de la provincia correspondiente. //selecciono el array de provincia adecuado mis_provincias=eval("provincias_" + pais) //calculo el numero de provincias num_provincias = mis_provincias.length //marco el nmero de provincias en el select document.f1.provincia.length = num_provincias //para cada provincia del array, la introduzco en el select
for(i=0;i<num_provincias;i++){ document.f1.provincia.options[i].value=mis_provincias[i] document.f1.provincia.options[i].text=mis_provincias[i] } }else{ //si no haba provincia seleccionada, elimino las provincias del select document.f1.provincia.length = 1 //coloco un guin en la nica opcin que he dejado document.f1.provincia.options[0].value = "-" document.f1.provincia.options[0].text = "-" } //marco como seleccionada la opcin primera de provincia document.f1.provincia.options[0].selected = true }
<body> <form name="f1"> <select name=pais onchange="cambia_provincia()"> <option value="0" selected>Seleccione... <option value="1">Espaa <option value="2">Argentina <option value="3">Colombia <option value="4">Francia </select> <select name=provincia> <option value="-"></select> </form> <script> //defino una serie de varibles Array para cada pas var provincias_1=new Array("","Andaluca","Asturias","Baleares","Canarias","Castilla y Len","Castilla-La Mancha","...") var provincias_2=new Array("-","Salta","San Juan","San Luis","La Rioja","La Pampa","...") var provincias_3=new Array("","Cali","Santamarta","Medellin","Cartagena","...") var provincias_4=new Array("","Aisne","Creuse","Dordogne","Essonne","Gironde ","...") //funcin que cambia las provincias del select de provincias en funcin del pas que se haya escogido en el select de pas. function cambia_provincia(){ //tomo el valor del select del pais elegido var pais pais = document.f1.pais[document.f1.pais.selectedIndex].value //miro a ver si el pais est definido
if (pais != 0) { //si estaba definido, entonces coloco las opciones de la provincia correspondiente. //selecciono el array de provincia adecuado mis_provincias=eval("provincias_" + pais) //calculo el nmero de provincias num_provincias = mis_provincias.length //marco el nmero de provincias en el select document.f1.provincia.length = num_provincias //para cada provincia del array, la introduzco en el select for(i=0;i<num_provincias;i++){ document.f1.provincia.options[i].value=mis_provincias[i] document.f1.provincia.options[i].text=mis_provincias[i] } }else{ //si no haba provincia seleccionada, elimino las provincias del select document.f1.provincia.length = 1 //coloco un guin en la nica opcin que he dejado document.f1.provincia.options[0].value = "-" document.f1.provincia.options[0].text = "-" } //marco como seleccionada la opcin primera de provincia document.f1.provincia.options[0].selected = true } </script> </body>

Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript

Uploaded by

Copyright:

Available Formats

Veamos qu es JavaScript y las posibilidades que nos ofrece utilizar este lenguaje a la hora de desarrollar pginas web.

Por Miguel Angel Alvarez

Diferencias entre distintos navegadores

Qu necesitas para trabajar con Javascript

Conocimientos previos recomendables

Abrir una ventana secundaria

<script> window.open("http://www.google.com","","width=550,height=420,menubar=no") </script>

Podemos ver el ejemplo en marcha aqu.

<script> window.alert("Bienvenido a mi sitio web. Gracias...") </script>

Puedes ver el ejemplo en una pgina a parte.

<script> document.write(new Date()) </script>

<input type=button value=Atrs onclick="history.go(-1)">

Por Miguel Angel Alvarez

Javascript se escribe en el documento HTML

La colocacin de los scripts s que importa

Ocultar el cdigo Javascript con comentarios HTML

<SCRIPT> <!-Cdigo Javascript //--> </SCRIPT>

Mostrar un mensaje para navegadores antiguos con <NOSCRIPT>

Indicar el lenguaje que estamos utilizando

Incluir ficheros externos de Javascript

<SCRIPT language=javascript src="archivo_externo.js"> //estoy incluyendo el fichero "archivo_externo.js" </SCRIPT>

Las que quieras*/ </SCRIPT>

sumando1 = 23 sumando2 = 33 suma = sumando1 + sumando2

Edad paisDeNacimiento _nombre

12meses tu nombre return pe%pe

Declaracin de variables en Javascript

var operando1 var operando2

Tambin se puede asignar un valor a la variable cuando se est declarando

var operando1 = 23 var operando2 = 33

Concepto de mbito de variables

<SCRIPT> var variableGlobal </SCRIPT>

<SCRIPT> function miFuncion (){ var variableLocal } </SCRIPT>

<SCRIPT> var numero = 2 function miFuncion (){

var numero = 19 document.write(numero) //imprime 19 } document.write(numero) //imprime 2 </SCRIPT>

Diferencias entre declarar variables con var, o no declararlas

document.write(numero) //imprime 19 </SCRIPT>

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

var suma = sumando1 + sumando2 document.write(suma)

Veremos algunas cosas ms referentes a los tipos de datos en el prximo artculo.

Por Miguel Angel Alvarez

Tipo de datos numrico

Si una variable es verdadero entonces

Ejecuto unas instrucciones Si no

miTexto = "Pepe se va a pescar" miTexto = '23%%$ Letras & *--*'

Caracteres de escape en cadenas de texto

Tabla con todos los caracteres de escape

Salto de lnea: \n Comilla simple: \'

Ejemplos de uso de operadores

Estudiamos los operadores de cadenas, lgicos y condicionales.

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

Si tengo hambre y tengo comida entonces me pongo a comer

if (x==2 && y!=3){ //la variable x vale 2 y la variable y es distinta de tres }

Operadores a nivel de bit

& Y de bits ^ Xor de bits

Precedencia de los operadores

Por ltimo las sumas y las restas de izquierda a derecha.

Lo que nos da como resultado el valor siguiente.

Si ejecutamos este script obtendremos que en la pgina se escribir el siguiente texto:

Queremos destacar tan slo dos detalles ms:

en ese instante en nuestros programas.

En Javascript podemos tomar decisiones utilizando dos enunciados distintos.

Desde el 1 hasta el 100 Imprimir el nmero actual

FOR WHILE DO WHILE

Vemos cmo trabajar con la estrutura de control IF en Javascript.

miTexto = "Pepe se va a pescar" miTexto = '23%%$ Letras & --'