Bruno R
En programacion es necesario el uso de condicionales para tomar deciciones en base a la informacion que recibe el programa, y asi generar una nueva salida para que luego se puedan o no tomar deciciones en base a la nueva info y asi wiiii.
Su sintaxis basica seria la siguiente ⇒
if (condition) {
code to run if condition is true
} else { //si es falso ejecuta este otro codigo
run some other code instead
}Tambien se puede ver if else sin corchetes ⇒
if (condition) code to run if condition is true else run some other code instead
Con la sintaxis basica podemos poner basicamente dos opciones para las desiciones de nuestro codigo, pero que pasaria si queremos mas?, para esto podemos usar else if que sirve basicamente para agregar mas opciones dentro del if... else, cada opcion adicional requiere de un bloque adicional entre corchetes ⇒
if (choice === 'sunny') {
para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
} else if (choice === 'rainy') {
para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
} else if (choice === 'snowing') {
para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
} else if (choice === 'overcast') {
para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
} else {
para.textContent = '';
}Los operadores de comparacion sirven para probar nuestras condiciones en nuestras declaraciones condicionales, osea si un valor es estrictamente igual o diferente (===,!==), mayor que, menor que, etc.
Esta bien colocar condiconales if...else if...else dentro de otra condicional if aunque sea un solo codigo cada if actua de forma independiente de las otras, esto sirve para agregar mas opciones dependiendo el camino que tome el valor entregado a las condicionales.
if (choice === 'sunny') {
if (temperature < 86) {
para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
} else if (temperature >= 86) {
para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.';
}// aca se podrian seguir agregando mas
}... //este if superior podria seguir con cierre else o mas opciones else ifEstos sirven para probar varias condiciones sin tener que anidar muchos if...else ⇒
if (choice === 'sunny' && temperature < 86) {
para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
} else if (choice === 'sunny' && temperature >= 86) {
para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.';
}if (iceCreamVanOutside || houseStatus === 'on fire') {
console.log('You should leave the house quickly.');
} else {
console.log('Probably should just stay in then.');
}El ultimo tipo de operador logico seria NOT, expresado con !, se utiliza para negar una expresion (la invierte, si una expresion genera false y esta el operador logico ! el resultado sera true y viceversa.
Se pueden combinar tantas declaraciones logicas como se desee, en cualquier estructura ⇒
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
// run the code
}Este codigo lo que dice es si x es estrictamente igual a 5 o 7... y como 7, 10 y 20 son valores distintos de false(y todos los elementos que generan false), el resultado siempre sera true porque aunque la variable no sea identica a 5 (osea false), todos los demas valores son true (porque son distintos de false y todos sus sinonimos), asi que la expresion general es true.
if (x === 5 || x === 7 || x === 10 ||x === 20) {
// run my code
}//esto seria lo correcto para hacer una comprobacion en cada casoLas condicionales if... else, son utiles para cuando utilizamos expresiones complejas mediante operadores logicos y de comparacion largos, o bloques de codigo a ejecutar relativamente largos en cada una de las posibles opciones (if...else).
En los casos donde tenemos muchas "ramificaciones"(opciones) y por otro lado poca informacion en las expresiones condicionales y el codigo a ejecutar es corto en cada opcion, son mas utiles las declaraciones switch ⇒
switch (expression) { // palabra clave switch seguida de la expresion o valor entre parentesis
case choice1: // palabra clave case seguida de una posible expresion o valor que retorna true o false en relacion a la expresion o valor de la condicion switch de mas arriba
run this code; //en caso que se cumpla choice1 se ejecuta este codigo
break; //en caso de que se cumpla choice1 el break hace que se corte la condicion aca y que no siga ejecutando los demas case.
case choice2:
run this code instead;
break;
//luego podemos agregar tanto case como queramos
// include as many cases as you like
default:
actually, just run this code
} //por ultimo tenemos la palabra clave default parecido a else, despues de esta no tiene
//continuidad la condicional, no necesita un break justamente por esta razon, y el codigo
//que ejecuta break es en caso de que ninguno de los case coincida. No es necesario
//utilizar default pero bueno ahi esta, siempre es recomendado hacerlo.const select = document.querySelector('select');
const para = document.querySelector('p');
select.addEventListener('change', setWeather);
function setWeather() {
const choice = select.value;
switch (choice) {
case 'sunny':
para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
break;
case 'rainy':
para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
break;
case 'snowing':
para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
break;
case 'overcast':
para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
break;
default:
para.textContent = '';
}
}Es un operador que permite probar una condicion y devolver un valor o expresion si el resultado es true u otro valor o expresion si el resultado es false. Util en algunas situaciones, y aparte de poder hacer condicionales rapidas con muy poco codigo.
( condicion ) ? si true corre este codigo : si false corre este codigo;
Ejemplo simple ⇒
let greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
const select = document.querySelector('select');
const html = document.querySelector('html');
document.body.style.padding = '10px';
function update(bgColor, textColor) { //1
html.style.backgroundColor = bgColor; // 2
html.style.color = textColor; // 2
}
select.onchange = function() { //3
( select.value === 'black' ) ? update('black','white') : update('white','black');
}// 4 5segun entendi, 1) la funcion update creada requiere dos parametros que parecen variables presentes en el bloque de la funcion y estas variables son 2) iguales a cambiar el estilo del html, por un lado el background bgColor y por otro lado el texto textColor. Mas abajo se usa 3) onchange en el elemtento select (y aca tengo la duda de si cuando suceda el cambio en el elemento select se va a activar la funcion o si onchange va a tomar el valor que retorne la funcion para darselo a select), 4) donde si el valor del select es estrictamente igual a black retornara true haciendo que cambie el valor de select, donde si es 5) true se activara la funcion update dando como parametros los colores negro y blanco para bgColor y textColor respectivamente y si es falso seran al revez los valores dados a la function update. Me encanta 💖.