Autor: Marcos Legido Hernández

Se otorga permiso para copiar, distribuir y/o modificar este documento bajo los términos de la Licencia de Documentación Libre GNU, Versión 1.1 o cualquier otra versión posterior publicada por la Free Software Foundation. Puede consultar una copia de la licencia original en: http://www.gnu.org/copyleft/fdl.html.

Introducción a JavaScript

El JavaScript es un lenguaje de programación ampliamente utilizado en el mundo del desarrollo web por ser muy versátil y potente, tanto para la realización de pequeñas tareas como para la gestión de complejas aplicaciones. Además, ha saltado el ámbito de la web, y también podemos encontrarlo en otros entornos, como es el lenguaje ActionScript de Macromedia, que acompaña al sistema Flash.

JavaScript es un lenguaje interpretado que, al contrario que las aplicaciones normales, que son ejecutadas por el sistema operativo, es ejecutado por el navegador que utilizamos para ver las páginas. Eso hace que podamos desarrollar aplicaciones de muy diverso tipo, desde generadores de HTML, comprobadores de formularios, etc…, hasta programas que gestionen las capas de una página. Pueden desarrollarse incluso aplicaciones que permitan poder tener capas en una página como si fueran ventanas, y dar la sensación de estar trabajando con una aplicación de Windows.

JavaScript no es el único lenguaje que podemos encontrar en la web. También tenemos a su gran contrincante: Visual Basic Script. Este lenguaje, desarrollado por Microsoft, está basado en el lenguaje Basic de esta empresa, pero desgraciadamente sólo puede utilizarse en el navegador Internet Explorer. Si queremos que nuestras páginas dinámicas puedan ser vistas desde cualquier navegador y sistema operativo, la elección más adecuada es sin lugar a dudas JavaScript.

¿Qué podemos hacer con JavaScript?

• Páginas dinámicas (DHTML)
• Comprobación de datos (Formularios)
• Uso de los elementos de la página web
• Intercambiar información entre páginas web en distintas ventanas
• Manipulación de gráficos, texto, etc…
• Comunicación con plug-ins: Flash, Java, Shockwave, etc.

JavaScript comparte muchos elementos con otros lenguajes de alto nivel. Hay que tener en cuenta que este lenguaje es muy semejante a otros como C, Java o PHP, tanto en su formato como en su sintaxis, aunque por supuesto tiene sus propias características definitorias.

JavaScript es un lenguaje que diferencia entre mayúsculas y minúsculas, por lo que si escribimos alguna expresión en minúsculas, deberemos mantener esa expresión en minúsculas a lo largo de todo el programa. Si escribimos esa misma expresión en mayúsculas, será una expresión diferente a la primera. Esto es así en la mayoría de los lenguajes de este tipo, como PHP.

Otra característica es que podemos encerrar las expresiones que escribamos con una serie de caracteres especiales. Estos caracteres se denominan operadores y sirven tanto para encerrar expresiones como para realizar trabajos con ellas, como operaciones matemáticas o de texto. Los operadores que permiten encerrar expresiones deben cerrarse siempre. ‘(‘, ‘{‘ y ‘[' deben cerrarse con sus correspondientes ')', '}' y ']‘, respectivamente.

Como JavaScript es un lenguaje de formato libre, podemos escribir las lineas de código de la forma que consideremos mejor, aunque por supuesto debemos escribir siempre de la forma correcta. Por ejemplo, podemos escribir las lineas con un número variable de espacios:

 variable = "hola";

  variable="hola";

  variable ="hola";

  variable= "hola";

Esto significa que podemos añadir tabuladores al inicio de la linea para justificar los párrafos de código. También podemos romper las lineas de texto si son demasiado largas:

 document.write("Muy 

  buenas");

Pero no podemos hacer esto:

 document.write 

  ("Muy buenas");

Sólo podemos romper cadenas de texto, no instrucciones.

En ocasiones tenemos que escribir algunos caracteres especiales llamados “de escape”, porque en ocasiones hay que utilizar algunos caracteres no imprimibles, como por ejemplo:

document.write (“Tú & yo somos “programadores”.”);

Podemos ver que al introducir comillas dobles dentro de la cadena de caracteres, debemos añadir la barra invertida ” para escapar las propias comillas, aunque esta misma expresión se podía haber escrito así:

 document.write ("Tú & yo somos 'programadores'.");

Otro aspecto importante de JavaScript es la necesidad o no de utilizar el punto y coma ‘;’ al final de las instrucciones. Este operador solo sirve para delimitar las instrucciones, pero aunque su uso es obligatorio en la mayoría de los lenguajes, es opcional en JavaScript. Si usamos este operador, podemos incluir varias sentencias en la misma linea de código, y si no lo usamos, sólo podemos escribir una sentencia cada vez. De todas formas, aconsejamos usar el punto y coma porque en otros lenguajes como PHP o Java, este operador es obligatorio.

Las variables en JavaScript

En un programa JavaScript nos podemos encontrar con dos elementos básicos: código y datos. La parte del código es la que nos permite hacer cosas dentro de la página web, y la parte de datos es la que define el estado de la página web en un momento determinado. Los datos de un programa se guardan dentro de VARIABLES.

¿Qué es una variable? Una variable es como una caja: dentro de una caja nosotros podemos guardar cosas. Sólo que en las variables de JavaScript la caja sólo puede guardar una sola cosa a la vez. ¿Y por qué se las llama variables? Se las denomina así porque su contenido (la cosa) puede cambiar en cualquier momento durante el desarrollo del programa. De esta forma, una variable en JavaScript puede contener distintas cosas según donde se encuentre en el programa: números, letras, etc…

¿Y qué tipos de datos podemos usar en JavaScript? Tenemos cuatro tipos básicos:

• Números (enteros, decimales, etc…)
• Letras y números (cadenas de caracteres)
• Valores lógicos (True y False)
• Objetos (una ventana, un texto, un formulario, etc…)

¿Cómo definimos una variable?

 var miVar = 1234;

Aquí hemos definido una variable numérica con un valor entero. Pero también podríamos definir un número con decimales:

 var miVar = 12.34;

Como podemos ver, la nueva variable usa el operador ‘.’ (punto) para distinguir entre la parte entera y la parte decimal. Esto es importante, porque no podemos usar la coma como hacemos los de habla hispana.

Si queremos definir una cadena de caracteres, lo podemos hacer de la siguiente manera:

 var miCadena = 'Hola, mundo';

O bien:

 var miCadena = "Hola, mundo";

Aquí vemos que podemos usar los dos tipos de comillas para crear cadenas de caracteres, y será muy útil cuando trabajemos con ello (podemos incluso combinarlas dentro de la misma cadena).

También podemos crear variables con valores lógicos. Eso significa que la variable podrá tener sólo dos valores: verdad o mentira.

 var miVar = true;

Los valores admitidos para este tipo de variables son true y false. Este tipo de variables nos vendrán muy bien para crear condiciones y como valor para devolver en funciones, que veremos más adelante.

Y por último tenemos un tipo de dato especial: los objetos. ¿Y qué son los objetos? Son “cosas” que podemos usar en nuestro programa para representar “entidades”. Esto lo entenderemos muy fácilmente con unos ejemplos.

Estamos rodeados de objetos: mesas, libros, monitores, ratones, cuadros, etc… Algunos son más simples y otros son más complicados. Podemos manipular todos ellos según sus características y su forma de interactuar con el entorno donde están. Por ejemplo, una mesa sabemos que tiene cuatro patas, una tabla lisa, y que es de un color o varios colores. Es decir, que podemos determinar una mesa por sus características o atributos. Pero además, con la mesa podemos hacer cosas: podemos poner cosas encima, podemos usarla para comer o leer y a veces podemos colgar cosas de ellas, por ejemplo en un revistero. Todo eso son comportamientos que la mesa tiene para interactuar con el resto de su entorno.

Pues bien, podemos decir que los objetos en JavaScript son muy parecidos: tienen atributos (datos) y comportamientos (código). Si nos fijamos, en realidad parecen un programa JavaScript pero contenido dentro de nuestro programa JavaScript. Así, nosotros podemos usar (y crear) objetos para hacer cosas: una ventana del navegador es un objeto window, una página HTML es un objeto document, y una imagen es un objeto de tipo Image. Es fácil darse cuenta de que los objetos son de un determinado tipo: un objeto mesa, un objeto ventana, un objeto ratón, etc… Todos los objetos de un mismo tipo tienen características semejantes, aunque luego cada objeto tiene atributos con valores distintos dependiendo de cada caso. Así, dos mesas puede tener color marrón o azul, pero las dos seguirán teniendo patas, que pueden ser 4 ó 5, depende… En JavaScript, los objetos son muy importantes, como vamos a comprobar en el siguiente capítulo, que trata de las matrices y las sentencias de control.

Operar con variables

Como ya estudiamos en el capítulo anterior, en JavaScript podemos definir unos elementos llamados variables que nos permiten almacenar datos de distintos tipos. Naturalmente, nosotros podemos usar esos datos en nuestros programas y, como ya se indicó entonces, podemos incluso variar esos datos manteniendo la variable donde los depositamos. A esta operación se le llama modificar la variable, y es una de las bases de la programación moderna.

Las variables podemos usarlas en multitud de situaciones, al mostrar datos, al enviarlos y recibirlos, en expresiones y llamadas a funciones… Podemos tratar con variables para almacenar los datos que vamos a usar a lo largo del programa, tanto globalmente en toda la aplicación como de forma exclusiva con las funciones que creemos, como veremos en el capítulo correspondiente.

 var numero = 1;    numero = numero + 2;

  numero += 3;

El resultado final de esta operación sera que numero será igual a 6. En la primera linea lo que hemos hecho es declarar la variable numero con el valor inicial 1. Después, hemos incrementado el valor de la variable con la variable misma sumándole 2, y posteriormente hemos vuelto a incrementar la variable sumándole 3 por medio del operador tipográfico +=. Los operadores se encuentran en el primer apéndice del curso.

Sin embargo, surge un pequeño problema cuando tenemos que tratar con cantidades mayores de datos. Las variables como tales solo nos permiten gestionar un dato cada una de ellas, con lo que cuando tenemos que gestionar grupos mayores de datos, se hace realmente complicado. Miremos el siguiente ejemplo, en el que definimos unos nombres:

 var nombre1 = 'pepe';

  var nombre2 = 'toño';

  var nombre3 = 'mari';

  var nombre4 = 'lucas';

  var nombre5 = 'sonia';

  var nombre6 = 'ruth';

  var nombre7 = 'tete';

Si ahora quisiéramos listar estos datos (más adelante veremos cómo), tendriamos que referirnos a cada variable en concreto, con lo que tenemos pululando por nuestro programa siete variables a las que será difícil referirnos de una forma genérica (por ejemplo, como estudiaremos más adelante, para listarlos dinámicamente en un formulario). Para resolver este problema tenemos una solución: las matrices.

Las matrices son variables que contienen un objeto de tipo Array(). Podemos definir una matriz de la siguiente manera:

 var matriz = new Array();

De esta forma, hemos creado una matriz vacía que puede contener un numero ilimitado de elementos, tantos como nos permita el sistema donde se ejecuta. Las matrices vienen a ser como cajas que en vez de contener una sola cosa, contienen muchas, como si pudiéramos dividir la caja en compartimentos en los cuales pudiéramos ir depositando cosas.

Además, podemos crear matrices con una “dimensión”: es decir, que podemos hacer que la matriz se inicie con un número de elementos determinado:

 var matriz = new Array(15);

Con esta instrucción, lo que hemos hecho es crear una matriz de quince elementos. Pero ahora, lo interesante es saber cómo llamar a esos elementos, ya que si creamos la matriz, pero no sabemos operar con ella, no sirve para mucho, ¿No? La forma de acceder a un elemento de la matriz es como sigue:

 elemento = matriz[1];

En este ejemplo, la variable “elemento” contendrá el valor del elemento “1″ de la matriz. Es lo que se llama índice de la matriz, e identifica a cualquiera de los elementos de la matriz. Hay que fijarse en que para señalar el elemento de la matriz usamos los corchetes “[]“. también hay que decir que para señalar el primer elemento de la matriz, usamos el ‘0’, no el ‘1’. Así, si antes hemos definido una matriz de 15 elementos, significa que el último elemento posible es el 14.

De la misma forma, podemos dar un valor a cualquiera de los elementos de la matriz:

 matriz[5] = ‘hola’;

Hemos asignado el valor ‘hola’ al elemento 5 de la matriz. Los elementos de una matriz pueden contener cualquier tipo de dato, y se pueden cambiar en cualquier parte del programa, como las variables normales.

¿Y si queremos saber cuántos datos tenemos en la matriz? Usamos un atributo de la matriz. Como dijimos antes, las matrices son objetos de tipo Array, y los objetos pueden tener atributos (datos) y funciones (código). El atributo que debemos usar es length:

 longitud = matriz.length;

De esta forma, podemos saber cuantos elementos tiene la matriz. Recordad que como el primer índice es ‘0’, el último elemento será siempre matriz.length – 1.

Si necesitamos que la matriz contenga más elementos, podemos redimensionar la matriz aplicándole un nuevo objeto de matriz:

 matriz = new Array(longitud que queramos);

Sin embargo, perderemos todos los elementos que tuviéramos anteriormente.

Sentencias de control en JavaScript

 Si hace frío -> me pongo el jersey.

 Si hace calor -> me pongo la camisa.

Sentencia de control: If

Pues en un programa podemos realizar el mismo tipo de decisiones, gracias a la instrucción IF:

 if (condición) {

  un código cualquiera
  }

  else {

  otro código cualquiera }

Veamos lo que tenemos aquí. Primero, comprobamos la condición en la que vamos a basar nuestra decisión. Después veremos cómo crear condiciones. Si la condición es válida (si es verdadera), se ejecutará el primer bloque de código que está entre llaves ({}), y si no, se ejecutará el siguiente bloque de código, el que se encuentra debajo de la palabra else. Esto lo interpretaríamos así:

Si la condición es verdadera, ejecutamos un código cualquiera, y si no, otro código cualquiera.

De esta forma, podemos tomar decisiones simples que nos permiten cambiar el código que ejecuta el navegador, de forma que podemos controlar su ejecución fácilmente. Un ejemplo es este:

 var edad = 18;

  if (edad >= 18) {

  alert("Eres mayor de edad");

  }

  else {

  alert("Eres menor de edad");

  }

Primero definimos una variable “edad” con el valor numérico “18”. Después, comprobamos si el sujeto es o no mayor de edad comprobando el valor de la variable:

Si edad es mayor o igual que 18, entonces le decimos que es mayor de edad, y si no, le decimos que es menor de edad.

alert() es una función de Javascript que nos permite mostrar un mensaje en pantalla.

Pero, ¿Qué ocurre cuando queremos hacer varias comprobaciones al mismo tiempo? Entonces podemos usar la instrucción else if.

 if (edad > 18) {

  alert("Tienes mas de 18 años");

  }

  else if (edad == 18) {

  alert("Tienes 18 años");

  }

  else {

  alert("Tienes menos de 18 años");

  }

De esta forma, podemos extender las condiciones todo lo que queramos para cubrir todos los casos necesarios. Hay que destacar que todas las condiciones son sucesivas y que sólo se ejecuta una de ellas. Además, el último else es el que se ejecuta en el caso de que ninguno de los ifs anteriores sea válido.

Para crear condiciones, debemos usar dos elementos nuevos: los operadores lógicos y los condicionales.

Los operadores lógicos son 3:

Y los condicionales son:

Podemos crear condiciones simples usando los operadores condicionales, y después formar condiciones más complejas juntando otras más simples usando los operadores lógicos. Por ejemplo:

 if (edad > 6 && edad < 12) alert("niño");

  else if (edad >= 12 && edad < 18) alert("adolescente");

  else if (edad >= 18 && edad < 31) alert("joven");

  else if (edad >= 31 || edad <= 6) alert("No perteneces");

  else alert ("Tu debes ser muy raro");

Aquí hemos anidado varias condiciones para poder mostrar mensajes dependiendo de la situación en que nos encontremos. Podemos ver cómo juntando varias condiciones por medio de los operadores lógicos podemos tomar decisiones más complejas de las que veíamos al principio del tema. Debemos usar && cuando queramos que la resolución de la condición se encuentre incluida en las dos condiciones que indicamos. Debemos usar || cuando queramos que la resolución de la condición no se incluya en las condiciones que usamos. Así, cuando decimos que: (edad >= 31 || edad <= 6), estamos indicando que el resultado ha de ser o bien mayor de 31 o menor de 6, pero no se encontrara en ninguna de las dos condiciones, al contrario que con &&. De esta forma, podemos tomar decisiones que nos permitirán controlar mejor el flujo del programa.

Sentencias de control: Switch

Hemos visto cómo gracias a if podemos decidir qué hacer en determinadas situaciones. Pero a veces no necesitamos algo tan complicado. A veces sólo querremos decidir entre unos valores, y ejecutar código dependiendo de los posibles valores de una variable o devueltos por una función. En ese caso usamos un código semejante a éste:

 switch (variable) {

  case valor1:

  // código para valor1

  break;

  case valor2:

  // código para valor2

  break;

  case valor3:

  case valor4:

  case valor5:

  // código para valor3, valor4 y valor5

  break;

  }

En este ejemplo, comprobamos varios valores de la variable variable, de forma que cada uno de ellos permite ejecutar un código diferente dependiendo de la situación. Ahora bien, si nos fijamos en valor3, valor4 y valor5, comprobamos que sólo se ejecutará el código que aparece bajo valor5, porque los otros valores están vacíos, pero también porque no tienen una cláusula break. Esta palabra reservada corta la ejecución del código Javascript en el punto en que aparece, saliendo del bloque de código en el que se encuentra. Esto también nos servirá, por ejemplo, cuando veamos bucles, justo dentro de un momento.

Con esto, comprobamos que switch nos puede ayudar a ejecutar código de forma condicional, pero sin las complicadas operaciones que debemos realizar en IF. Sin embargo, switch no puede nunca sustituir a if, situación que a la inversa si ocurre.

Bucles y funciones en JavaScript. Introducción

En programación, la función principal de un programa es ser ejecutado para que sus instrucciones sean realizadas, bien por el procesador central (en el caso de un lenguaje compilado como C o Pascal), o por un interprete, que es un intermediario entre el programa y el procesador central. De esta forma, la ejecución lineal de las instrucciones genera acciones, cosas que nuestro programa hace porque se lo hemos indicado. Ahora bien, ¿Qué ocurre cuando queremos hacer varias veces una misma cosa? Tendríamos que escribir el mismo código varias veces, aunque el problema sería más peliagudo si encima el número de veces a ejecutar el código fuera variable, cambiase según el estado del programa (definido por las variables). Para ello tenemos dos tipos de elementos fundamentales: bucles y funciones.

Un bucle permite repetir varias veces el mismo código en la misma situación, incluso aunque la repetición de ese código sea variable y no la misma cantidad de veces cada vez. Como estudiaremos luego, tenemos a nuestra disposición dos bucles, for y while. En el caso de JavaScript, los bucles son condicionales, es decir que, como en el caso de if, necesitamos de condiciones como las que hemos estudiado para realizar las repeticiones de código. En otros bucles existen bucles incondicionales, lo que significa que sólo pueden ir de cierto punto a cierto punto (por ejemplo, para contar de 1 a 10, aunque esto, como veremos, también lo podemos hacer con los condicionales).

Por último, las funciones son elementos esenciales en programación por dos motivos: permite reutilizar el código de nuestro programa no sólo en el mismo programa, si no en otros posteriores, y además, permite estructurar las aplicaciones de forma que podamos dividir el problema en otros más pequeños. De ahí que a la programación con procedimientos y funciones se la llame estructurada (y no funcional como suelen indicar algunos neófitos: la programación funcional, que existe, es totalmente diferente de la programación con funciones). Veremos como reunir código en porciones llamadas funciones y usarlo varias veces en otras partes del código de nuestros programas.

Bucle For

Un bucle for nos permite repetir un bloque de código según unas condiciones concretas, siempre que estas sean verdaderas. Un bucle for tiene tres partes:

• Inicialización: en esta parte, debemos indicar las variables que vamos a usar en las interacciones del bucle. Lo más habitual es declarar variables numéricas pero pueden ser perfectamente cadenas de caracteres, booleanos u objetos.
• Condición: una o varias condiciones (unidas por operadores lógicos), que definen si el bucle está en condiciones de ejecutarse o no.
• Operación: una expresión que normalmente (aunque no es imprescindible) modificará las variables definidas en la primera parte para que el código del bucle pueda usarlo en alguna operación concreta.

Un ejemplo simple de bucle for sería:

 for (x = 1; x < 10; x++)

  {

  document.write("El número es " + x + "<br>");

  }

Vamos a analizar este ejemplo. Fijémonos en la primera linea, donde podemos encontrar las tres partes que indicábamos antes:

• x = 1: aquí usamos una variables x y le asignamos el valor ’1′, que será el valor de inicialización del bucle.
• x < 10: nos encontramos con una condición muy simple, y que se leería como: “si x tiene un valor menor que 10, la condición es válida”. Si la condición es válida, el bucle se seguirá ejecutando invariablemente. Veremos que eso puede generar un pequeño “problema”, que a veces podemos incluso aprovechar para nuestros propósitos, el denominado “bucle infinito”.
• x++: aquí nos encontramos con una operación matemática usando un operador tipográfico “++”, que viene a ser la misma operación que “x = x + 1″. De hecho, también podemos usarla en vez de la que aparece, pero lo normal es que usemos un operador como este (de hecho, si estudiamos código realizado por otros, veremos que es la forma más común).

Visto como funcionan las diferentes partes de la declaración del bucle, podemos decir que significa:

“para una ‘x’ igual a 1, el bucle se ejecutará mientras el valor de ‘x’ sea menor que 10; al tiempo, cada vez que se ejecute el bucle, el valor de ‘x’ se incrementará en uno”

Así visto, el bloque de código que se encuentra entre llaves ‘{ }’ se ejecutará mientras se cumpla la condición, siendo que ‘x’ se esta incrementando constantemente en 1 con cada ejecución del bucle. Como podemos ver también en el ejemplo, podemos usar la variable en las expresiones para, como por ejemplo en este caso, visualizar su valor tantas veces como se ejecute el bucle.

También podemos influir en el bucle, como en este caso:

 <html>

  <head>

  </head>

  <body>

  <script language="javascript">

  for (x = 1; x < 16; x++)

  {

  if (x % 2)

  {

  x++;

  }

  document.write('Mi número es ' + x + '<br>');

  }

  </script>

  </body>

  </html>

Podemos apreciar en este ejemplo que el resultado no es el aparentemente esperado para este bucle, dado que aunque en la parte de operación incrementamos la variable sólo en 1, el resultado final es que sólo vemos números pares en la ventana. ¿Por qué? Fijémonos en el código del bucle:

• El condicional if sólo será cierto en el caso de que el módulo de ‘x’ (la operación matemática de ‘resto’, representada por el operador ‘%’) devuelva como resultado un valor impar.
• Si la condición de if se cumple, se ejecutará un trozo de código que incrementará el valor de ‘x’ en uno, influyendo de esta forma en el desarrollo del bucle.

De esta forma, en vez de mostrar los valores numéricos del 1 al 15, como sería en el caso normal, resulta que aparecen sólo valores pares. El truco en este código es sibilino pero potente: la operación ‘x % 2′ devolverá un 0 si ‘x’ es par, pero devolverá un valor distinto si es un número impar. ¿Esto que significa? Si el valor de la operación es cero, la condición es falsa (es un comportamiento muy habitual en muchos lenguajes de programación), con lo que la condición sólo será verdadera cuando ‘x’ sea impar. Un número impar devolverá un módulo mayor que cero al dividirlo entre 2. Al incrementar un valor impar en 1, se convierte en un valor par, que es lo que finalmente vemos en pantalla.

Parece enrevesado, pero un estudio a fondo de este código nos permite apreciar algunas de las propiedades ocultas de la programación en JavaScript. Muchas de estas propiedades y características se aprenden con la experiencia, pero en este curso veremos algunas de ellas que nos serán útiles en nuestro trabajo futuro.

Además, como derivación de que un bucle ejecuta código, esto nos lleva a que podemos anidar varios bucles uno dentro de otro, como en este caso:

 for (x = 1; x < 10; x++)

  for (y = 1; y < 10; y++)

  document.write(x + ":" + y);

En este ejemplo, vemos que un bucle se ejecutará dentro del otro mostrándonos los valores de forma ordenada. No es preciso escribir llaves si el código a escribir es de una sola linea.

Para terminar este apartado, veamos rápidamente como realizar un bucle infinito con for:

 for (;;)

  {

  document.write("Esto no se acaba nunca...");

  }

Esto genera un pequeño problema… Si este bucle se ejecuta constantemente… ¿Qué hacemos para detenerlo o controlarlo? Usaremos dos palabras para controlar un bucle (sea cual sea), ya sea finito o infinito: break y continue.

Break es la palabra reservada para cortar un bucle en un momento determinado. Es muy usada en condicionales if, ya que al darse una cierta condición, podemos controlar un bucle cortándolo cuando se dé un cierto momento concreto.

Continue, sin embargo, también corta la ejecución del bucle, pero no igual que break. Mientras que break finaliza definitivamente el bucle, continue salta lo que queda de bucle y sigue la siguiente interacción sin más.

 var x = 1;

  for (;;)

  {

  x++;

  if (x > 5) break;

  document.write(x + '<br>');

  }

En este ejemplo vemos que, cuando el valor de ‘x’ sea mayor de 5, el bucle se romperá. Es otro nos permite apreciar el resultado de da continue:

 for (x = 1; x < 10; x++)

  {

  if (x % 2) continue;

  document.write(x+'

' );

  }

Ya nos podemos imaginar el resultado.

Este bucle, como for, también es condicional, aunque mucho más simple que éste, como vemos en el siguiente ejemplo:

 var x = 1;

  while (x < 10)

  {

  document.write("Mi número es: " + x + "<br>");

  x++;}

Como vemos, este bucle es idéntico al primer for que estudiamos antes, aunque como podemos apreciar, mucho más simple. En realidad, la complejidad de for se ha descompuesto en partes separadas sencillas.

¿Para qué hay dos bucles que al fin y al cabo hacen los mismo? En el pasado, for era un bucle incondicional, es decir, que sólo podía ir de cierto punto a cierto punto, sin comprobaciones intermedias. Por eso se desarrolló while. Sin embargo, lenguajes más avanzados como C crearon un for condicional más potente. Sin embargo, aunque realizan funciones semejantes, while tiene como ventaja que al ser más simple, también es más rápido y eficaz en términos de rendimiento que for. Además, algunas operaciones resultan simplificadas:

 while (verdad)

  {

  if (verdad) document.write("Es verdad");

  verdad = !verdad;

  }

Este extraño ejemplo es significativo del uso de variables lógicas o booleanas. ‘verdad’ es una variable lógica que sólo puede tener los valores true y false. Si ‘verdad’ es true, el bucle se ejecutará. Al ejecutarse, también se comprobará la condicion interna y se imprimirá el mensaje “Es verdad”. Lo interesante viene luego. La expresión “verdad = !verdad” significa “hacer que ‘verdad’ sea contrario a ‘verdad’”. Si ‘verdad’ era igual a true, ahora será igual a false (el operador ‘!’, como sabemos, es la negación, y por lo tanto, cambiará el valor de la variable a su contrario). Dejo al alumno el realizar una versión for del bucle.

while tiene una versión inversa: do … while. Este bucle tiene como diferencia respecto de while que, mientras que en while la condición se comprueba incluso antes de comenzar a ejecutar el bucle (lo que implica que si la condición ya fuese falsa antes de entrar en el bucle, este no llegaría a ejecutarse nunca), en do … while la condición se comprueba a posteriori, con lo que tenemos la oportunidad de ejecutar el bucle al menos una vez. Esto también es una ventaja con respecto a for, que en ese sentido se comporta igual que while.

 var x = 0;

  do

  {

  document.write("Mi número es el " + x + "<br>");

  x++;

  } while (x < 10);