Condicionales
Las condicionales son decisiones, si se ejecuta un bloque de códigos u otro bloque de códigos.
La Condición if
Si la condición if es verdadera se ejecuta un bloque de códigos.
En el Código_104, al hacer click en el botón que es la etiqueta <button>, invoca la función mensaje(), la función mensaje() devuelve un mensaje con la función alert(), el mensaje depende si la variable edad es mayor que 18, usuando la condición if.
Descargar archivo codigo104.html
Copiar enlace:
Pegar enlace en la url del explorador web y descarga el archivo:
Código 104: La Condición if
<!-- Archivo: codigo104.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Edad -->
<p>Edad: 21</p>
<!-- Mensaje -->
<button onclick="mensaje()">Mensaje</button>
<!-- Códigos de JavaScript -->
<script>
// Función mensaje
function mensaje() {
// Variable
var edad = 21;
// Condición if
if(edad > 18) {
// Mensaje
alert("Usuario tiene suficiente edad para entrar");
}
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo104.html
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Edad -->
<p>Edad: 21</p>
<!-- Mensaje -->
<button onclick="mensaje()">Mensaje</button>
<!-- Códigos de JavaScript -->
<script>
// Función mensaje
function mensaje() {
// Variable
var edad = 21;
// Condición if
if(edad > 18) {
// Mensaje
alert("Usuario tiene suficiente edad para entrar");
}
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo104.html
En la Figura_105, si se presiona el botón Mensaje aparece el mensaje “Usuario tiene suficiente edad para entrar” porque el usuario tiene 21 años.
Figura 105 – Vista en el explorador Web
Código 104: La Condición if
La Condición if … else
La sentencia else ejecuta un bloque de códigos si if es falso.
En el Código_105, al hacer click en el botón que es la etiqueta <button>, invoca la función mensaje(), la función mensaje() devuelve un mensaje con la función alert(), el mensaje depende si la variable edad es mayor o menor que 18, usuando la condición if…else.
Código 105: La Condición if … else
<!-- Archivo: codigo105.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Edad -->
<p>Edad: 15</p>
<!—Botón Mensaje -->
<button onclick="mensaje()">Mensaje</button>
<!-- Códigos de JavaScript -->
<script>
// Función mensaje
function mensaje() {
// Variable
var edad = 15;
// Condición if
if(edad > 18) {
// Mensaje
alert("Usuario tiene suficiente edad para entrar");
} else {
// Mensaje
alert("Usuario no tiene suficiente edad para entrar");
}
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo105.html
En la Figura_106, si se presiona el botón Mensaje aparece el mensaje “Usuario no tiene suficiente edad para entrar” porque el usuario tiene 15 años.
Figura 106 – Vista en el explorador Web
Código 105: La Condición if … else
La Condición if … else if … else
La sentencia else … if else … if ejecuta un bloque de códigos si la segunda condición if es verdadera y la primera condición if es falso.
En el Código_106, al hacer click en el botón que es la etiqueta <button>, invoca la función mensaje(), la función mensaje() devuelve un mensaje dependiendo de la hora actual, la variable tiempo obtiene la hora actual y dependiendo la hora actual manda el mensaje con la función alert().
Código 106: La Condición if … else if … else
<!-- Archivo: codigo106.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!—Botón Mensaje -->
<button onclick="mensaje()">Mensaje</button>
<!-- Códigos de JavaScript -->
<script>
// Función mensaje
function mensaje() {
var tiempo = new Date().getHours();
var saludo = "";
// Condición if ... else if ... else
if(tiempo < 12) {
saludo = "Buenos días";
} else if (tiempo < 18) {
saludo = "Buenas tardes";
} else {
saludo = "Buen noches";
}
// Mensaje
alert(saludo);
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo106.html
En la Figura_107, si se presiona el botón Mensaje aparece el mensaje “Buenas tardes” porque la hora de PC es 14.
Figura 107 – Vista en el explorador Web
Código 106: La Condición if … else if … else
La Sentencia switch
La sentencia switch evalúa el valor de una variable con alguna coincidencia con la instrucción case, si hay una coincidencia manda un mensaje, si no hay una coincidencia con alguna instrucción case entonces ejecuta la expresión default que es un mensaje.
En el Código_107, al hacer click en el botón que es la etiqueta <button>, invoca la función mensaje(), la función mensaje() devuelve un mensaje dependiendo del texto de la variable fruta que coincida con el texto de un case de la condición switch y manda el mensaje con la función alert().
Código 107: La Sentencia switch
<!-- Archivo: codigo107.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón Mensaje -->
<button onclick="mensaje()">Fruta</button>
<!-- Para mostrar el valor de la variable fruta -->
<p id="demo"></p>
<!-- Códigos de JavaScript -->
<script>
// Función mensaje
function mensaje() {
var fruta = "fresa";
document.getElementById("demo").innerHTML = fruta;
// Condición
switch(fruta) {
case "manzana":
alert("fruta de color verde");
break;
case "fresa":
alert("fruta de color rojo");
break;
case "mago":
alert("fruta de color amarillo");
break;
default:
alert("No hay coincidencia");
}
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo107.html
En la Figura_108, si se presiona el botón Fruta aparece el mensaje “Fruta de color rojo”, en la Figura 109, si se presiona el botón Acepta, aparece el nombre de la fruta que es fresa.
Figura 108 – Vista en el explorador Web
Código 107: La Sentencia switch
Figura 109 – Vista en el explorador Web
Código 107: La Sentencia switch
Comentarios
Publicar un comentario