Condicionales "If", "else if" y "else"
Las declaraciones condicionales en JavaScript, como el “if”, “else” y “else if”, te permiten tomar decisiones en tu código basadas en ciertas condiciones. Aquí tienes una explicación breve y fácil de entender:
if: El “if” se usa para ejecutar un bloque de código solo si una condición es verdadera. La estructura básica es la siguiente:
if (condición) {
// código a ejecutar si la condición es verdadera
}
else: El “else” se usa junto con el “if” para ejecutar un bloque de código alternativo cuando la condición del “if” es falsa. La estructura básica es la siguiente:
if (condición) {
// código a ejecutar si la condición es verdadera
} else {
// código a ejecutar si la condición es falsa
}
else if: El “else if” se utiliza cuando deseas probar múltiples condiciones en orden. Puedes tener tantas declaraciones “else if” como necesites. La estructura básica es la siguiente:
if (condición1) {
// código a ejecutar si la condición1 es verdadera
} else if (condición2) {
// código a ejecutar si la condición2 es verdadera
} else {
// código a ejecutar si ninguna de las condiciones anteriores es verdadera
}
El programa evaluará las condiciones en orden. Si la primera condición es verdadera, se ejecutará su bloque de código correspondiente y las demás condiciones se ignorarán. Si la primera condición es falsa, se evaluará la segunda condición y así sucesivamente. Si ninguna de las condiciones anteriores es verdadera, se ejecutará el bloque de código dentro del “else” final.
Estas declaraciones condicionales te permiten controlar el flujo de tu programa y tomar decisiones en función de diferentes situaciones.
Ejemplos:
Construyendo un tema para activar el modo obscuro en un sitio web.
let mode = "ninja";
let color = "ghostWhite";
let image = "/img/light-icon.png";
let label = "Light Mode";
if (mode === "dark") {
color = "darkSlateBlue";
image = "/img/dark-icon.png";
label = "Dark Mode";
} else if (mode === "light") {
mode = "ghostWhite";
image = "/img/light-icon.png";
label = "Light Mode";
} else {
color = "dimGray";
image = "/img/ninja-icon.png";
label = "Ninja Mode";
}
console.log(label);
Ayuda en diferentes idiomas
Usando condicionales para traducir un mensaje según la configuración de idioma actual
let message = "";
let language = "Arabic";
if (language === "English") {
message = "Thank you";
} else if (language === "Spanish") {
message = "Gracias";
} else if (language === "German") {
message = "Danke";
} else {
message = "We don't support " + language;
}
console.log(message);
Página web de reserva de vacaciones
Crear una página para vacacionistas, complemento de un sitio web de reservas de vacaciones.
const beds = 6;
const reviewScore = 4.78;
const costPerNight = 140;
const pool = true;
const country = "Italy";
const minBeds = 5;
const minReviewScore = 3.5;
const maxCostPerNight = 150;
const needPool = true;
const inCountry = "Italy";
let match = true;
let saving;
let message;
if (beds < minBeds) {
match = false;
}
if (reviewScore < minReviewScore) {
match = false;
}
if (needPool && !pool) {
match = false;
}
if (inCountry !== country) {
match = false;
}
if (costPerNight > maxCostPerNight) {
match = false;
} else {
saving = maxCostPerNight - costPerNight;
}
if (match) {
message = "This property is a match!";
if (saving) {
message = message + " It is $" + saving + " cheaper than your maximum.";
}
}
if (match) {
document.getElementById('message').innerText = message;
} else {
document.getElementById('message').innerText =
"Sorry, this property is not suitable.";
}
const listItemArray = document.querySelectorAll("li");
listItemArray[0].innerHTML = "Beds: " + beds;
listItemArray[1].innerHTML = "Review Score: " + reviewScore;
listItemArray[2].innerHTML = "Cost: " + costPerNight;
listItemArray[3].innerHTML = "Pool: " + ((pool) ? "Yes" : "No");
listItemArray[4].innerHTML = "Location: " + country;
listItemArray[5].innerHTML = "Minimum beds: " + minBeds;
listItemArray[6].innerHTML = "Minimum Review Score: " + minReviewScore;
listItemArray[7].innerHTML = "Maximum Cost: " + maxCostPerNight;
body {
font-family: 'Gill Sans', sans-serif;
padding: 4px 24px;
}
h1 {
color: seagreen;
}
h2 {
font-size: 18px;
}
#message {
background-color: seagreen;
padding: 8px 10px;
color: white;
border-radius: 4px;
}
<!doctype html>
<html>
<head>
<title>Vacationista Search</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Vacationista Search</h1>
<p id="message"></p>
<h2>Listing Details</h2>
<ul>
<li>Beds: 6</li>
<li>Review Score: 4.78</li>
<li>Cost ($ per night): 150</li>
<li>Pool: Yes</li>
<li>Location: Spain</li>
</ul>
<h2>Your Requirements</h2>
<ul>
<li>Minimum Beds: 5</li>
<li>Minimum Review Score: 3.5</li>
<li>Maximum Cost ($ per night): 160</li>
<li>Must Have Pool: No</li>
<li>Location: No preference</li>
</ul>
<script src="script.js"></script>
</body>
</html>
Boletos de cine
Usando condicionales para averiguar el precio correcto del boleto para diferentes invitados.
let member_number = 23287;
let age = 27;
let price;
if (age >= 65) {
price = 5;
} else if (age <= 10) {
price = 8;
} else {
price = 10;
}
const isMember = (member_number > 0);
if (isMember) {
console.log("Welcome back!");
price *= 0.8;
}
console.log("Ticket Price: $ " + price);
