AnteriorPosterior

3.2. Condiciones repetitivas 1: while

  Curso: JavaScript para impacientes, por Nacho Cabanes

JavaScript para impacientes - 3.2. Condiciones repetitivas 1: while

(Si no lo has leído antes, posiblemente te interesará el apartado anterior)

Si queremos que algo se repita no sólo una vez, sino mientras se cumpla una condición, bastará cambiar la palabra "if" por "while" ("mientras", en inglés). Por ejemplo, podemos pedir al usuario dos números y mostrar su división, comprobando antes que el divisor no sea cero. Como el usuario puede equivocarse más de una vez, es más razonable usar "while" que "if":

<html>
<body>
Dividiendo numeros...
<script>
    var n1 = prompt("Dime un numero");
    var n2 = prompt("Dime otro numero");
    while (n2 == 0)
    {
        n2 = prompt("No debe ser cero. Dime otro");
    }
    document.write(n1 + " dividido entre "+ n2 + " es: ");
    var resultado = parseInt(n1) / parseInt(n2);
    document.write(resultado);
</script>
</body>
</html>
 

En el fuente anterior, no era necesario incluir llaves, porque sólo hay una orden que repetir. Aun así, puede ser recomendable incluir llaves como precaución incluso en ese caso: si luego se complica la lógica de la parte repetitiva, y pasamos a necesitar varias órdenes, podríamos olvidar añadir las llaves en ese momento, y el programa no se comportaría correctamente.
También podemos usar "while" cuando queramos contar. Necesitaremos una variable que empiece en uno (o cero, o el valor con el que vayamos a empezar a contar) y que aumente de valor en cada pasada:

<html>
<body>
Vamos a contar... 
<script>
    var contador = 1;
    while (contador <= 10)
    {
        document.write(contador + " ");
        contador = contador + 1;
    }
</script>
</body>
</html>
 

3.3. Operaciones abreviadas

Operaciones como ese "aumentar en uno el valor de una variable" son tremendamente frecuentes. Por eso, existen formas abreviadas de escribirlas:
  • n++; Es lo mismo que n = n + 1;
  • n--; Es lo mismo que n = n - 1;
  • n += 5; Es lo mismo que n = n + 5;
  • n -= 3; Es lo mismo que n = n - 3;
  • n *= 2; Es lo mismo que n = n * 2;
  • n /= 10; Es lo mismo que n = n / 10;

<html>
<body>
Operaciones abreviadas... 
<script>
    var n = 1;
    document.write("n vale " + n + "<br />");
 
    n ++;
    document.write("Tras n++, ahora vale " + n + "<br />");
 
    n +=5 ;
    document.write("Tras n+=5, ahora vale " + n + "<br />");
 
    n --;
    document.write("Tras n--, ahora vale " + n + "<br />");
 
    n -= 3;
    document.write("Tras n-=3, ahora vale " + n + "<br />");
 
    n *= 2;
    document.write("Tras n*=2, ahora vale " + n + "<br />");
 
    n /= 10;
    document.write("Tras n/=10, ahora vale " + n + "<br />");
 
    n = 6;
    document.write("Tras n=6, ahora vale " + n + "<br />");
</script>
</body>
</html>
 

Esos "<br />" permiten saltar de una línea a la siguiente, para que se lea mejor. No es JavaScript, sino otro tipo de "etiqueta" que se puede usar en el lenguaje de descripción de páginas HTML. Pronto veremos algunas etiquetas más.

3.4. Números al azar

Para obtener números al azar, podemos usar "Math.random", que devuelve un número entre 0 y 1. Si queremos que sea entre 0 y otro número, podemos conseguirlo multiplicando por ese número. Si queremos que empiece en 1 (o en otro valor), lo podemos sumar. Y si no queremos que tenga decimales, usaremos "Math.floor" para quedarnos sólo la parte entera. Veámoslo con un ejemplo:

<html>
<body>
<script>
    var azar1 = Math.random();
    document.write("Al azar entre 0 y 1: " + azar1  + "<br />");
 
    var azar2 = Math.random() * 5;
    document.write("Al azar entre 0 y 5, con decimales: " 
        + azar2  + "<br />");
 
    var azar3 = Math.floor( Math.random() * 6 );
    document.write("Al azar entre 0 y 5, entero: " 
        + azar3  + "<br />");
 
    var azar4 = Math.floor( Math.random() * 8 )+1;
    document.write("Al azar entre 1 y 8, entero: " 
        + azar4  + "<br />");
 
    var azar5 = Math.floor( Math.random() * 11 )+10;
    document.write("Al azar entre 10 y 20, entero: " 
        + azar5  + "<br />");    
</script>
</body>
</html>
 

Ejercicios propuestos
  • 03.04.01 - Crea una página web que muestre los números pares del 10 al 20 (ambos incluidos), usando "while"
  • 03.04.02 - Crea una página web que muestre los números del 15 al 5, descendiendo (ambos incluidos), usando "while"
  • 03.04.03 - Crea una página que pida al usuario pares de números y muestre su suma. Deberá terminar cuando el usuario introduzca cero en vez del primer número.
  • 03.04.04 - Crea una página que pida al usuario una serie de números, hasta que se pulse Intro sin escribir nada (se introduzca una cadena vacía), momento en el que se dejará de pedir datos y se mostrará la suma de todos ellos.
  • 03.04.05 - Crea una página que pida al usuario un número entero positivo y diga cuántas cifras tiene (pista: se puede conseguir dividiendo varias veces entre 10).
  • 03.04.06 - Crea una página web que genere un número al azar entre el 1 el 10 y dé al usuario 4 oportunidades para acertarlo, indicando en cada paso si el número que ha tecleado es el correcto, es mayor o es menor.
  • 03.04.07 - Crea una página web que pida al usuario su nombre y su contraseña, y se repita hasta que introduzca como nombre "Juan" y como contraseña "1234"

Actualizado el: 08-03-2014 23:38

AnteriorPosterior