Curso jQuery: 6 Estructuras de control
Nueva noticia publicada en https://amdisenoweb.es/curso-jquery-6-estructuras-control/
Curso jQuery: 6 Estructuras de control
Si nosotros realizamos nuestros programas usando solamente lo visto hasta el momento, o sea variables, eventos y acceso al código de la web entonces las ordenes se ejecutan secuencialmente, o lo que es lo mismo una detrás de la otra, en muchas ocasiones nos interesa o que se repitan ciertas ordenes o que dependiendo de una condición se ejecuten unas ordenes u otras ordenes diferentes.
Entre las estructuras de control mas usadas nos encontramos con: if, switch, while, for, do while.
IF
Es la sentencia más utilizada en todos los lenguajes de programación se utiliza para tomar una decisión dependiendo de una condición, la sintaxis seria:
if (condición) // 1. ordenes si se cumple la condición else // 2. ordenes si no se cumple la condición
El resultado de evaluar la condición tiene que ser true o false, si se cumple se ejecutarán las ordenes del punto 1, y si no se cumplen las del punto 2.
Por ejemplo supongamos que tenemos un input tipo texto para pedir la edad del usuario, si la edad es mayor de 18 queremos que nos diga que somos mayores de edad, y sino que somos menores de edad, ademas de poner el color del texto en verde o azul dependiendo del resultado, para visualizar el resultado utilizaremos un div con clase resultado.
Introduce tu edad: <input type="text" name="edad" class="edad"> <br> <input type="button" value="Comprobar" class="comprobar"> <div class="resultado"></div> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) $(".comprobar").click(function (e) var edad; edad=$(".edad").val(); if(edad>=18) $(".resultado").html("Eres mayor de edad"); $(".resultado").css("color","green"); else $(".resultado").html("Eres menor de edad"); $(".resultado").css("color","blue"); ); ); </script>
Podríamos mejorarlo si antes de comprobar el valor de la edad comprobamos si es un numero o no.
Introduce tu edad: <input type="text" name="edad" class="edad"> <br> <input type="button" value="Comprobar" class="comprobar"> <div class="resultado"></div> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) $(".comprobar").click(function (e) var edad; edad=$(".edad").val(); if(isNaN(edad)) $(".resultado").html("Debes introducir un numero"); $(".resultado").css("color","red"); else if(edad>=18) $(".resultado").html("Eres mayor de edad"); $(".resultado").css("color","green"); else $(".resultado").html("Eres menor de edad"); $(".resultado").css("color","blue"); ); ); </script>
Switch
Cuando dependiendo del valor de una variable tenemos que tomar una decisión u otra y si estas decisiones son muchas a la hora de anidar los if puede resultar un poco embarazoso y lioso, para esto existe otra estructura de control condicional que es el Switch, se suele utilizar cuando conocemos de antemano los valores que puede tomar una variable, su sintaxis seria:
switch(variable) caso valor_1: //ordenes 1 break; caso valor_2: //ordenes 2 break; caso valor_3: //ordenes 3 break; default: //ordenes 4 break;
Dependiendo del valor de la variable se ejecutarían las ordenes 1, 2, 3 o 4 si no es ningún valor que aparezca en los case.
Por ejemplo, supongamos que tenemos una casilla en la que metemos el numero de un mes, y con un switch vamos a visualizar el nombre del mes correspondiente.
Introduce un numero de mes <input type="text" name="mes" class="mes"> <br/> <input type="button" value="Dime el mes" class="comprobar"> <div class="resultado"></div> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) $(".comprobar").click(function (e)); ); </script>
El primer paso que hacemos es comprobar si hemos metido un numero y si dicho numero esta entre 1 y doce, si no es así entonces ejecutaríamos el return para salirnos de la función.
Otra forma de hacerlo seria declarando un array con los meses, en este caso no necesitariamos el switch.
Introduce un numero de mes <input type="text" name="mes" class="mes"> <br/> <input type="button" value="Dime el mes" class="comprobar"> <div class="resultado"></div> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) $(".comprobar").click(function (e) mes>12) $(".resultado").html("No has escrito el mes"); return; $(".resultado").html(meses[mes]); ); }); </script>