08 enero 2013

Javascript para impacientes - 3.1 - Condiciones simples

(Si no lo has leído antes, quizá te interese mirar el apartado 2)


Para comprobar condiciones básicas, usaremos la palabra "if" ("si", en inglés). Indicaremos entre paréntesis la condición que se debe verificar, y luego lo que hay que hacer si dicha condición se cumple:

<html>
<body>
Sumador de numeros...
<script>
    var n1 = prompt("Dime un numero");
    var n2 = prompt("Dime otro numero");
    document.write("La suma de "+ n1 + " y "+ n2 + " es: ");
    var suma = parseInt(n1)+parseInt(n2);
    document.write(suma);
    if (suma > 0)
        document.write(" y es positiva");
</script>
</body>
</html>
 

Es frecuente que haya que dar varios pasos si una condición se cumple, y en ese caso deberemos encerrar los pasos entre llaves:

<html>
<body>
Sumador de numeros...
<script language="JavaScript">
    var n1 = prompt("Dime un numero");
    var n2 = prompt("Dime otro numero");
    document.write("La suma de "+ n1 + " y "+ n2 + " es: ");
    var suma = parseInt(n1)+parseInt(n2);
    document.write(suma);
    if (suma > 0)
    {
        document.write(" y es positiva");
        if (suma > 10)
            document.write(" y ademas mayor que 10");
    }
</script>
</body>
</html>
 

Y si queremos indicar qué hacer cuando no se cumpla la condición, usaremos la palabra "else":

<html>
<body>
Sumador de numeros...
<script>
    var n1 = prompt("Dime un numero");
    var n2 = prompt("Dime otro numero");
    document.write("La suma de "+ n1 + " y "+ n2 + " es: ");
    var suma = parseInt(n1)+parseInt(n2);
    document.write(suma);
    if (suma > 0)
        document.write(" y es positiva");
    else
        document.write(" y es negativa o cero");
</script>
</body>
</html>
 

Y, por supuesto, podemos tener varias condiciones encadenadas:

<html>
<body>
Sumador de numeros...
<script language="JavaScript">
    var n1 = prompt("Dime un numero");
    var n2 = prompt("Dime otro numero");
    document.write("La suma de "+ n1 + " y "+ n2 + " es: ");
    var suma = parseInt(n1)+parseInt(n2);
    document.write(suma);
    if (suma > 0)
        document.write(" y es positiva");
    else if (suma < 0)
        document.write(" y es negativa");
    else
        document.write(" (cero)");
</script>
</body>
</html>
 

Los comparadores son:
  • > - Mayor que
  • >= - Mayor o igual que
  • < - Menor que
  • <= - Menor o igual que
  • == - Igual a (CUIDADO: dos símbolos de igual, no sólo uno)
  • != - Distinto de
Y este es un ejemplo que prueba todos ellos:

<html>
<body>
Sumador de numeros...
<script>
    var n1 = prompt("Dime un numero");
    var n2 = prompt("Dime otro numero");
    document.write("La suma de "+ n1 + " y "+ n2 + " es: ");
    var suma = parseInt(n1)+parseInt(n2);
    document.write(suma);
    if (suma > 0)
        document.write(" y es positiva");
    if (suma >= 0)
        document.write(" y es positiva o cero");
    if (suma < 0)
        document.write(" y es negativa");
    if (suma <= 0)
        document.write(" y es negativa o cero");
    if (suma == 2)
        document.write(" y vale 2");
    if (suma != 3)
        document.write(" y no vale 3");
    if (suma = 5)
        document.write(" y vale 5...no! error!");
</script>
</body>
</html>
 

Si lo pruebas, verás que en el ultimo caso se comporta incorrectamente: la condición "if (x=5)" está mal planteada, porque tiene un único símbolo de "igual", y siempre se interpreta como "verdadera", aunque x no valga 5. Es importante recordar usar siempre dos símbolos de "igual" cuando se quiere ver el valor de una variable.
Finalmente, podemos enlazar varias condiciones en una, para formar condiciones como "si ocurre esto o aquello":
  • && - Y
  • || - O
  • ! - No
Por ejemplo:

<html>
<body>
Sumador de numeros...
<script>
    var n1 = prompt("Dime un numero");
    var n2 = prompt("Dime otro numero");
    document.write("La suma de "+ n1 + " y "+ n2 + " es: ");
    var suma = parseInt(n1)+parseInt(n2);
    document.write(suma);
    if ((n1 == 5) || (n2 == 5))    
        document.write(" y uno de los números es 5");
    else if ((n1 == 7) && (n2 == 7))
        document.write(" y los dos valen 7");
    else if ( ! (n1 > 7))
        document.write(" y el primero no es mayor que 7");
</script>
</body>
</html>
 

Ejercicios propuestos
  • 03.01.01 - Crea una página web que pida al usuario dos números y muestre su división, pero sólo en caso de que el segundo no sea cero; si el segundo es cero, deberá escribir "No se puede dividir entre cero"
  • 03.01.02 - Crea una página web que pida al usuario dos números y diga cuántos de ellos son positivos
  • 03.01.03 - Crea una página web que pida al usuario tres números y diga si son iguales o, en caso contrario, cual es el mayor de ellos
  • 03.01.04 - Crea una página web que pida al usuario dos números y diga cual es el mayor de los tres
  • 03.01.05 - Crea una página web que pida al usuario una letra y diga si ha escrito una vocal o algún otro carácter
  • 03.01.06 - Crea una página web que pida al usuario cinco números y diga cuántos de ellos son negativos
(Puedes continuar con el siguiente apartado)