jueves, 9 de enero de 2014

Tutorial Javascript parte 5 - Estructuras de control (if-else y switch)




Bienvenid@s a la parte 5 del tutorial de Javascript, continuamos viendo los fundamentos básicos y ahora es momento de empezar a ver las estructuras de control y en concreto vamos a ver las sentencias if-else y switch.

Las estructuras de control de flujo nos van a permitir formular determinadas condiciones y realizar determinadas acciones dependiendo del resultado obtenido por esas condición. Las estructuras de control utilizan el valor Boolean para determinar una situación, que bien puedes ser true(verdadero) o false(falso).

Abre el editor de código y para este capítulo vamos a crear un nuevo archivo al cual vamos a llamar fundamentos-4.js y lo vamos a embeber en el documento index.html ...

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="javascript/fundamentos-4.js"></script>
</head>
<body>
</body>
</html>


Antes de ver el ejemplo vamos a ver como las sentencias if-else y switch.

La sentencia if-else



Esta sentencia es una de las más utilizadas en el mundo de la programación, su labor es la de obtener un valor booleano determinado por una o varias condiciones.

A continuación una estructura básica if-else ...

var numero1 = 1;
var numero2 = 1;
if (numero1 == numero2)
{
document.write("Es cierto");
}
else
{
document.write("Es falso");
}


En esta estructura if, estamos preguntando que si el valor de variable numero1 es igual al valor de la variable numero2, nos muestre "Es cierto", de lo contrario, que nos muestre "Es falso".

También podemos incluir más condiciones a través de else if ....

var numero1 = 1;
var numero2 = 2;
if (numero1 == numero2)
{
document.write(numero1 + " y " + numero2 + " son iguales");
}
else if (numero1 < numero2)
{
document.write(numero1 + " es menor " + " que " + numero2);
}
else
{
document.write("Todas las condiciones son falsas");
}


Como puedes ver a través de else if puedes incluir tantas condiciones como necesites, en el ejemplo anterior la condición else if es cierto ya que el valor de la variable numero1 es menor que el valor de la variable numero2.

La sentencia switch



La sentencia switch es otra estructura muy útil y muy parecida a if-else, esta estructura busca entre una serie de casos, hasta encontrar un caso verdadero. La utilización de break es necesaria para romper la ejecución de switch.

var nombre = "mario";

switch(nombre)
{
case "manuel":
document.write(nombre + " ha sido encontrado");
break;

case "fernando":
document.write(nombre + " ha sido encontrado");
break;

case "mario":
document.write(nombre + " ha sido encontrado");
break;

default:
document.write(nombre + " no ha sido encontrado");
break;
}


Como puedes ver se está buscando si el valor de la variable nombre se encuentra en algunos de los casos indicados en la sentencia switch, si en ninguno de los casos es encontrado se ejecutará la instrucción de default:.

Bien, ahora que sabemos como funcionan ambas estructuras, vamos a ver un sencillo ejemplo, copia y pega el siguiente código en fundamentos-4.js y guárdalo ...

/* CONTROL DE FLUJO

El control de flujo nos va a permitir realizar acciones cuando se dá una determinada 
condición. Sin el control de flujo la aplicación se ejecuta de un modo lineal.
El control de flujo es fundamental para dotar de dinamismo a la aplicación.

*/

/* if-else */

var numero1 = 10;
var numero2 = 10;

if (numero1 != numero2)
{
document.write("<p>" + numero1 + " y " + numero2 + " Son distintos</p>");
}
else if (numero1 == numero2)
{
document.write("<p>" + numero1 + " y " + numero2 + " Son iguales</p>");
}
else
{
document.write("<p>La condición no se ha cumplido</p>");
}

/* switch */

var nombre = "Manuel";

switch(nombre)
{

case "Pepito":
document.write("<p>Pepito ha sido encontrado</p>");
break;

case "Raul":
document.write("<p>Raul ha sido encontrado</p>");
break;

case "Manuel":
document.write("<p>Manuel ha sido encontrado</p>");
break;

default:
document.write("<p>El valor no ha sido encontrado</p>");
break;

}


Ahora abre index.html para ver el resultado en el navegador ...



Bien, ahora practiquen creando variables y comprobando sus valores con if-else y switch.