lunes, 16 de diciembre de 2013

Control de la ejecución de código en JavaScript

Javascript proporciona un conjunto de instrucciones que permiten controlar si un bloque de código debe ejecutarse o no, o posibilitar que ese bloque de instrucciones se ejecute una o más veces.
Este tipo de instrucciones se divide en dos grupos principales que se conocen como sentencias condicionales y sentencias repetitivas (ciclos, lazos o bucles son nombres comunes utilizados en otros lenguajes de programación).


Sentencias condicionales

Básicamente, nos podemos encontrar las siguientes construcciones que involucran sentencias condicionales.
  • Sentencia if.
  • Sentencia if-else.
  • Sentencia if-else if-else.
  • Evaluación de condiciones en cortocircuito.
  • Sentencias if anidadas.
  • Sentencias switch.


Sentenias if


La instrucción if es la instrucción básica que controla la toma de decisiones. La sintaxis de una instrucción es es la siguiente:
if(expresion)[{]
    //Bloque de instrucciones;
[}]

El funcionamiento de una instrucción if es simple. Se evalúa la expresión dentro de los paréntesis del if y si la evaluación resulta verdadera (true) se ejecuta el bloque de instrucciones delimitado por las llaves, pero si resulta falsa (false) el bloque de instrucciones se ignora y se continúa con las instrucciones posteriores al bloque if.

Debe notar que en la sintaxis se incluyen unos corchetes, que no son parte de la sentencia if, quieren indicar que las llaves que encierra son opcionales si el bloque de instrucciones está compuesto por una sola instrucción. Cuando exista más de una instrucción, las llaves serán obligadas. Por conveniencia y para evitar equivocarse, resulta más fácil recordar colocar las llaves siempre, sea que el bloque de instrucciones posea una o más instrucciones, incluso, cuando no exista ninguna instrucción. Al hacerlo, nunca obtendremos un error de sintaxis.

Veamos un ejemplo del uso de la sentencia if:
var precioTotal = prompt("Introduzca el precio total: ", 10.00);
var iva = prompt("Introduzca el porcentaje de IVA: ", 0.13);
var retensionIVA;
       
if(iva >= 0){
    retensionIVA = precioTotal * iva;
    document.writeln("La retensión de IVA es: " + retensionIVA + "<br />\n");
    document.writeln("El valor total a pagar es: " + (parseFloat(precioTotal) + parseFloat(retensionIVA)) + "<br />\n");
}



Sentencia if-else

Para poder realizar una acción cuando el resultado de la evaluación de la condición sea falso, se dispone de una instrucción if con una cláusula else. La sintaxis de esta instrucción condicional es:
if(expresion)[{]
    //Bloque de instrucciones if;
[}]
else[{]
    //Bloque de instrucciones else;[}]

Un ejemplo de cómo utilizar la sentencia if-else se muestra a continuación:
var resp = prompt("¿Cuál es tu edad?", "");
if(resp){
    document.writeln("Tu edad es: ", resp);
}
else{
    alert("No has contestado...");
}


En esta forma de la instrucción, según se ilustra en el ejemplo, se evalúa el valor de resp dentro del if y si resulta ser un valor falso o equivalente (cero, cadena vacía o nulo) entonces se ejecuta la instrucción dentro del if. De lo contrario (evaluación falsa), se ejecuta la instrucción delimitada por el bloque else.


Sentencias if-else if-else


Esta sentencia puede utilizarse como complemento de la sentencia if-else cuando se deseen evaluar múltiples condiciones, no solo una como ocurre con el if-else, en donde sólo se puede evaluar una condición única. Al usar else if podemos agregar nuevas condiciones en cada bloque else if como lo muestra la sintaxis a continuación:
if(condicion-if){
   //Bloque instrucciones if
}
else if(condicion-else-if1){
   //Bloque instrucciones else-if1
}
else if(condicion-else-if2){
   //Bloque instrucciones else-if2
}
else if(condicion-else-if3){
   //Bloque instrucciones else-if3
}
...
else if(condicion-else-ifN){
   //Bloque instrucciones else-ifN
}
else{
   //Bloque instrucciones else
}

Para mostrar cómo se puede utilizar esta construcción de programación con sentencias if dejamos el siguiente ejemplo. Puede nombrar el script rendimiento.js:
var notafinal;

//Solicitando nota final del curso
notafinal = parseFloat(prompt("¿Cuál es tu nota?",""));
if(notafinal >= 0 && notafinal < 2){
    document.write("<h4>Tu rendimiento escolar es realmente malo.</h4>");
}
else if(notafinal >= 2 && notafinal < 4){
    document.write("<h4>Tu rendimiento escolar es deficiente.</h4>");
}
else if(notafinal >= 4 && notafinal < 6){
    document.write("<h4>Tu rendimiento escolar es bueno</h4>");
}
else if(notafinal >= 6 && notafinal < 8){
    document.write("<h4>Tu rendimiento escolar es muy bueno.</h4>");
}
else if(notafinal >= 8 && notafinal < 10){
    document.write("<h4>Tu rendimiento escolar es excelente.</h4>");
}
else{
    document.write("<h4>La nota ingresada no es correcta. Inténtalo de nuevo recargando la página.</h4>");

}

Puede probar el ejemplo de JavaScript anterior como una página web como la siguiente:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Rendimiento escolar</title>
</head>
<body>
<header>
    <h1>Medida de tu rendimiento escolar</h1>
</header>
<section>
    <article>
   <script type="text/javascript" src="js/rendimiento.js"></script>
        <noscript>
            <p>Tu navegador tiene desactivado el soporte para JavaScript o es demasiado antiguo.</p>
            <p>Te sugerimos actualizarlo para poder utilizar este sitio web correctamente.</p>
        </noscript>
</article>
</section>
<footer>
    <p>Ejemplo de sentencias if-else if-else</p>
</footer>
</body>

</html>

Nombre el documento web rendimiento.html y carguelo en su navegador preferido.

Podrá observar el siguiente resultado con 5 notas ingresadas diferentes en cada ocasión:


Ejecución con nota muy buena:


Ejecución con nota no válida:



Evaluación de condiciones en cortocircuito

Se denomina como evaluación en "cortocircuito" a la propiedad que tienen los operadores lógicos Y (And) y el O (Or) al involucrar ciertas expresiones en donde se puede obtener el resultado de la expresión completa, sin necesidad de evaluar los dos, o más, componentes de la misma.

Esto lo comprenderemos mejor con dos ejemplos básicos:
Para el primero vamos a recordar que en una expresión lógica con operador O (Or) basta con que una de los operandos sea verdadero (true) para que toda la expresión sea verdadera. Esto según su tabla de verdad, que se muestra a continuación:
Tabla de verdad para un O (Or)
Exp1 Exp2 Exp1 || Exp2
V V V
V F V
F V V
F F F

No hay comentarios:

Publicar un comentario

Con mucho agrado les presento este pequeño manual en forma de blog sobre el lenguaje JavaScript. Espero comentarios de su parte que ayuden a mejorar este trabajo. Aclaro que me he enfocado en un inicio en el JavaScript puro, sin framework. Tal vez más adelante y dedicando algún tiempo en aprenderlos, pueda adentrarme en algún manual de framework JavaScript posteriormente.