Codificación aprenderaprogramar.com: CU01119E
JAVASCRIPT. IF ELSE , IF ELSE IF.
La instrucción if … else funciona de forma análoga a como lo hace en otros lenguajes de programación. Permite controlar qué procesos tienen lugar, típicamente en función del valor de una o varias variables, de un valor de cálculo o booleano, o de las decisiones del usuario. La sintaxis a emplear es:
/* Ejemplo Estructura IF - aprenderaprogramar.com */ if (condición) { instrucciones } else { instrucciones } |
Esquemáticamente en forma de diagrama de flujo:
La cláusula else (no obligatoria) sirve para indicar instrucciones a realizar en caso de no cumplirse la condición. JavaScript admite escribir un else y dejarlo vacío: else { }. El else vacío se interpreta como que contemplamos el caso pero no hacemos nada en respuesta a él. Un else vacío no tiene ningún efecto y en principio carece de utilidad, no obstante a veces es usado para remarcar que no se ejecuta ninguna acción cuando se alcanza esa situación.
Cuando se quieren evaluar distintas condiciones una detrás de otra, se usa la expresión else if { }. En este caso no se admite elseif todo junto como en otros lenguajes. De este modo, la evaluación que se produce es: si se cumple la primera condición, se ejecutan ciertas instrucciones; si no se cumple, comprobamos la segunda, tercera, cuarta… n condición. Si no se cumple ninguna de las condiciones, se ejecuta el else final en caso de existir.
/* Ejemplo - aprenderaprogramar.com */ //if sencillo if ( admitido == true) { alert ("Se ha admitido el valor"); }
//if else sencillo if ( admitido == true) { alert ("Se ha admitido el valor"); } else { alert ("No se ha admitido el valor"); } //if con else if y cláusula final else if (DesplazamientoX == 0 && DesplazamientoY == 1) { alert ("Se procede a bajar el personaje 1 posición"); } else if (DesplazamientoX == 1 && DesplazamientoY == 0) { alert ("Se procede a mover el personaje 1 posición a la derecha"); }
else if (DesplazamientoX == -1 && DesplazamientoY == 0) { alert ("Se procede a mover el personaje 1 posición a la izquierda"); } else { alert ("Los valores no son válidos"); } |
La expresión dentro de paréntesis es una expresión booleana. Llamamos expresión booleana a una expresión que solo tiene dos valores posibles: verdadero (true) o falso (false).
Es importante distinguir la comparación que realizamos con el operador == de la asignación que realizamos con el operador =. Confundirlos nos generará errores que harán que el código JavaScript no se ejecute o problemas de lógica en el código. Recuerda que siempre que tengas que comparar con un operador, has de usar == ó === en lugar de =.
La condición a evaluar puede ser un simple nombre de variable. Por ejemplo:
if (antiop) {alert ('nombre se evaluó a verdadero');}
En este caso se comprueba el valor booleano (o equivalente booleano) de antiop. Si nombre es de tipo String y es la cadena vacía, su valor equivalente es falso y no se ejecutarán las instrucciones dentro del if. Si antiop es un número se considera que equivale a false si su valor numérico es 0, o que equivale a true si su valor numérico es distinto de cero (incluido NaN). Para cadenas de texto, la cadena vacía se considera equivale a false y cualquier otra cadena se considera que equivale a true.
Se admite omitir las llaves después de la condición si solo se va a incluir una sentencia a ejecutar. Por ejemplo: if (nombre) alert ('nombre se evaluó a verdadero');
Sin embargo, recomendamos incluir las llaves siempre después de un if porque hace el código más fácil de seguir y más claro.
EJEMPLO
Escribe el siguiente código y guárdalo en un archivo de extensión html (puedes cambiar la ruta de la imagen si lo deseas):
<html> <head> <title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8"> <script type="text/javascript"> function mostrarMensaje1() { var nombre, edad; nombre = prompt ('Por favor introduce tu nombre:'); if (nombre =="") { alert ('No has introducido ningún nombre'); } else { alert ('Hola '+nombre + '. Bienvenido a esta página web.'); } edad = prompt ('¿Cuál es tu edad?'); edad = Number(edad); if (edad >3 && edad < 10) {alert ('Eres un niño.');} else if (edad>=10 && edad <18) {alert ('Eres un jovencito.');} else if (edad >=18 && edad < 90) {alert ('Eres mayor de edad.');} else if (edad >=90) { alert ('Tienes muchos años encima...');} else {alert ('No has introducido un valor válido de edad ( '+edad+')');} } </script> </head> <body> <div> <p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p> <img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"> <p onclick ="alert('Alerta JavaScript')" style="background-color:yellow;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web. </p> </div> </body> </html> |
Visualiza el resultado y comprueba que la página web se muestra con normalidad y que JavaScript se ejecuta con normalidad cuando haces click sobre la imagen.
El resultado esperado esque se muestre lo siguiente (compruébalo introduciendo Juan y 96 como entradas de usuario):
Por favor introduce tu nombre: Juan (Aceptar)Hola Juan. Bienvenido a esta página web. (Aceptar)
¿Cuál es tu edad? : 96 (Aceptar)
Tienes muchos años encima... (Aceptar)
EJERCICIO
Crea un script que pida al usuario el diámetro de una rueda y su grosor (en metros) y a través de condicionales if realice las siguientes operaciones:
a) Si el diámetro es superior a 1.4 debe mostrarse el mensaje “La rueda es para un vehículo grande”. Si es menor o igual a 1.4 pero mayor que 0.8 debe mostrarse el mensaje “La rueda es para un vehículo mediano”. Si no se cumplen ninguna de las condiciones anteriores debe mostrarse por pantalla el mensaje “La rueda es para un vehículo pequeño”.
b) Si el diámetro es superior a 1.4 con un grosor inferior a 0.4, ó si el diámetro es menor o igual a 1.4 pero mayor que 0.8, con un grosor inferior a 0.25, deberá mostrarse el mensaje “El grosor para esta rueda es inferior al recomendado”
Ejecuta el código y comprueba sus resultados. Para comprobar si es correcta tu solución puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.