Unidad 1: Configuración del Entorno y Fundamentos de JavaScript
1.3. Estructuras condicionales y de control
¿Qué es un if-else?
La estructura if-else permite tomar decisiones en función de una condición. Evalúa si una expresión lógica es true o false y ejecuta el bloque correspondiente.
Sintaxis de if-else
Ejemplo
Programa que evalua si una variable numérica que simula la edad de una persona es mayor o menor de edad.
Ejemplo de If-Else
En el siguiente ejemplo, se evalúa si una persona es mayor de edad:
diagrama de flujo
flowchart TD
A[Inicio] --> B[Definir edad = 18]
B --> C{edad >= 18}
C -->|Sí| D["Eres mayor de edad"]
C -->|No| E["Eres menor de edad"]
D --> F[Fin]
E --> F[Fin]
Ejercicios de If-Else
Ejercicio 1: Comparar números
Instrucciones
Lo vamos a solucionar en 4 pasos, viendo en cada uno de ellos una parte de la solución.
Crea un programa que haga lo siguiente paso a paso:
- Paso 1: Determina si dos números son iguales.
- Paso 2: Evalúa si el primer número es mayor que el segundo.
- Paso 3: Evalúa si el segundo número es mayor que el primero.
- Paso 4: Combina todas las evaluaciones en un único programa.
Paso 1: Determinar si dos números son iguales
Crea un programa que haga lo siguiente:
- Solicita al usuario que introduzca dos números.
- Determina si los números son iguales.
- Muestra un mensaje indicando que los números son iguales.
Paso 2: Evaluar si el primer número es mayor que el segundo
Crea un programa que haga lo siguiente:
- Solicita al usuario que introduzca dos números.
- Evalúa si el primer número es mayor que el segundo.
- Muestra un mensaje indicando que el primer número es mayor.
Paso 3: Evaluar si el segundo número es mayor que el primero
Crea un programa que haga lo siguiente:
- Solicita al usuario que introduzca dos números.
- Evalúa si el segundo número es mayor que el primero.
- Muestra un mensaje indicando que el segundo número es mayor.
Paso 4: Combinar todas las evaluaciones
Crea un programa que haga lo siguiente:
- Solicita al usuario que introduzca dos números.
- Evalúa si los números son iguales, si el primero es mayor o si el segundo es mayor.
- Muestra un mensaje correspondiente para cada caso.
Diagrama
flowchart TD
A[Inicio] --> B[Solicitar el primer número]
B --> C[Solicitar el segundo número]
C --> D{¿num1 es igual a num2?}
D -->|Sí| E["Los números son iguales"]
D -->|No| F{¿num1 es mayor que num2?}
F -->|Sí| G["num1 es mayor que num2"]
F -->|No| H["num2 es mayor que num1"]
E --> I[Fin]
G --> I
H --> I
Solución
Ejercicio 2: Número positivo o negativo
Crea un programa que haga lo siguiente paso a paso:
- Paso 1: Determina si un número es igual a cero.
- Paso 2: Evalúa si un número es positivo.
- Paso 3: Evalúa si un número es negativo.
- Paso 4: Combina todas las evaluaciones en un único programa.
Paso 1: Determinar si un número es cero
Crea un programa que haga lo siguiente:
- Solicita al usuario que introduzca un número.
- Determina si el número es igual a cero.
- Muestra un mensaje indicando que el número es cero.
Paso 2: Determinar si un número es positivo
Crea un programa que haga lo siguiente:
- Solicita al usuario que introduzca un número.
- Evalúa si el número es positivo.
- Muestra un mensaje indicando que el número es positivo.
Paso 3: Determinar si un número es negativo
Crea un programa que haga lo siguiente:
- Solicita al usuario que introduzca un número.
- Evalúa si el número es negativo.
- Muestra un mensaje indicando que el número es negativo.
Paso 4: Combinar todas las evaluaciones
Crea un programa que haga lo siguiente:
- Solicita al usuario que introduzca un número.
- Evalúa si el número es positivo, negativo o igual a cero.
- Muestra un mensaje correspondiente para cada caso.
Solución
| Paso 4: Todo junto | |
|---|---|
Diagrama de Flujo
flowchart TD
A[Inicio] --> B[Solicitar un número]
B --> C{¿Número > 0?}
C -->|Sí| D["El número es positivo"]
C -->|No| E{¿Número < 0?}
E -->|Sí| F["El número es negativo"]
E -->|No| G["El número es cero"]
D --> H[Fin]
F --> H
G --> H
Ejercicio 3: Verificar credenciales de acceso
Crea un programa que haga lo siguiente:
- Solicita al usuario que introduzca un nombre de usuario y una contraseña.
- Compara las entradas con dos constantes predefinidas:
USERyPASSWORD. - Si coinciden, muestra el mensaje "Acceso correcto".
- Si no coinciden, muestra el mensaje "Acceso incorrecto" en rojo.
- Para el color rojo pudes utilizar la librería
chalk.pip install chalk
Solución
Explicación del código
- Constantes:
- Se definen
USERyPASSWORDcomo las credenciales válidas.
- Se definen
- Entrada del Usuario:
promptsolicita al usuario el nombre de usuario (login) y la contraseña (pwd).
- Verificación:
- Se compara si ambas entradas coinciden con las constantes.
- Si ambas coinciden, se muestra "Acceso correcto".
- Si no coinciden, se muestra "Acceso incorrecto" con texto en rojo
Tratamiento de cadenas en IF-ELSE
Vamos a ver un programa con las siguientes características:
- Solicita al usuario que introduzca dos cadenas.
- Compara las cadenas considerando mayúsculas y minúsculas (
anaes distinto deANA). - Utiliza funciones como
toUpperCaseotoLowerCasepara compararlas ignorando mayúsculas y minúsculas. - Comprueba si una cadena tiene un número de caracteres entre un mínimo y un máximo.
- Explica que, según el orden lexicográfico,
"ana"es menor que"ANA".
Solución
Explicación del Código
-
Comparación Directa (Sensible a Mayúsculas y Minúsculas):
- La comparación
cadena1 === cadena2verifica si las cadenas son exactamente iguales, considerando diferencias entre mayúsculas y minúsculas. Por ejemplo,"ana" !== "ANA".
- La comparación
-
Comparación Ignorando Mayúsculas y Minúsculas:
- Se utilizan las funciones
toLowerCase()otoUpperCase()para convertir ambas cadenas a un formato uniforme antes de compararlas. Esto hace que"ana" === "ANA".
- Se utilizan las funciones
-
Verificar Longitud:
- Se usa
cadena1.lengthpara verificar si la longitud de la primera cadena está entre los límites definidos (minLengthymaxLength).
- Se usa
-
Orden Lexicográfico:
- En JavaScript, las cadenas se comparan según su valor Unicode. En el caso de
"ana"y"ANA", las letras minúsculas tienen valores Unicode mayores que las mayúsculas. Por lo tanto:"ana" < "ANA"esfalse.
- En JavaScript, las cadenas se comparan según su valor Unicode. En el caso de
Operadores Lógicos en JavaScript
En JavaScript, los operadores lógicos se usan para combinar condiciones o modificar su resultado. Los tres operadores principales son:
&&(AND o Y): Evalúa si todas las condiciones son verdaderas.||(OR o O): Evalúa si al menos una condición es verdadera.!(NOT o NO): Invierte el valor lógico de una condición (de verdadero a falso y viceversa).
Tablas de Verdad
1. Operador && (AND)
El operador && retorna true solo si todas las condiciones son true.
| Condición A | Condición B | A && B |
|---|---|---|
true |
true |
true |
true |
false |
false |
false |
true |
false |
false |
false |
false |
2. Operador || (OR)
El operador || retorna true si al menos una condición es true.
| Condición A | Condición B | A \|\| B |
|---|---|---|
true |
true |
true |
true |
false |
true |
false |
true |
true |
false |
false |
false |
3. Operador ! (NOT)
El operador ! invierte el valor lógico de la condición.
| Condición | !Condición |
|---|---|
true |
false |
false |
true |
Ejemplos de Operadores Lógicos
| Operador | Ejemplo | Resultado |
|---|---|---|
&& |
5 > 3 && 10 > 8 |
true |
&& |
5 > 3 && 10 < 8 |
false |
|| |
5 > 3 || 10 < 8 |
true |
|| |
5 < 3 || 10 < 8 |
false |
! |
!(5 > 3) |
false |
! |
!(5 < 3) |
true |
| Mixto | 5 > 3 && (10 < 8 || 2 === 2) |
true |
| Mixto | !(5 > 3 && 10 > 8) |
false |
Notas Clave
-
Precedencia de Operadores:
- `!` tiene mayor precedencia que `&&` y `||`. - Agrupa condiciones con paréntesis para asegurarte de que se evalúan en el orden esperado. - Ejemplo: `!(A && B)` no es lo mismo que `!A && B`. -
Cortocircuito:
- En `&&`, si la primera condición es `false`, las demás no se evalúan. - En `||`, si la primera condición es `true`, las demás no se evalúan.
Leyes de De Morgan
Las Leyes de De Morgan son reglas fundamentales en lógica y álgebra booleana. Estas leyes ayudan a simplificar expresiones lógicas y a entender cómo se relacionan los operadores && (AND), || (OR) y ! (NOT).
Las dos leyes de De Morgan
-
Primera ley: > La negación de una conjunción (
A && B) es equivalente a la disyunción de las negaciones (!A || !B).Formalmente:
Ejemplo en JavaScript:
-
Segunda ley: > La negación de una disyunción (
A || B) es equivalente a la conjunción de las negaciones (!A && !B).Formalmente:
Ejemplo en JavaScript:
Cómo entender las leyes de De Morgan
-
Primera Ley (
!(A && B) ≡ !A || !B):- Si NO se cumplen ambas condiciones (A y B), entonces AL MENOS UNA de las condiciones debe ser falsa.
-
Segunda Ley (
!(A || B) ≡ !A && !B):- Si NO se cumple ninguna de las condiciones (A o B), entonces AMBAS condiciones deben ser falsas.
Tablas de Verdad
- Primera Ley (
!(A && B) ≡ !A || !B)
| A | B | A && B | !(A && B) | !A | !B | !A || !B |
|---|---|---|---|---|---|---|
| true | true | true | false | false | false | false |
| true | false | false | true | false | true | true |
| false | true | false | true | true | false | true |
| false | false | false | true | true | true | true |
- Segunda Ley (
!(A || B) ≡ !A && !B)
| A | B | A || B | !(A || B) | !A | !B | !A && !B |
|---|---|---|---|---|---|---|
| true | true | true | false | false | false | false |
| true | false | true | false | false | true | false |
| false | true | true | false | true | false | false |
| false | false | false | true | true | true | true |
Ejemplos prácticos
- Ejemplo 1: Verificar si ninguna condición es verdadera
Si queremos verificar si ni
AniBson verdaderos, podemos usar:
¿Por qué son importantes las Leyes de De Morgan?
-
Simplificación de expresiones:
- Estas leyes permiten reescribir expresiones lógicas de manera más comprensible o adecuada para ciertos contextos.
-
Optimización del código:
- Ayudan a escribir condiciones más eficientes o claras.
-
Comprensión de la lógica booleana:
- Son una base fundamental en programación, especialmente en algoritmos, bases de datos y sistemas digitales.
Ejercicio 4: Validar acceso según edad y rol
Crea un programa que haga lo siguiente:
- Solicita al usuario que introduzca su edad y su rol.
- Permite el acceso solo si:
- El usuario tiene 18 años o más y es administrador.
- O si tiene menos de 18 años pero el rol es "invitado".
- Y se asegura de que el rol no esté vacío.
Solución
Ejercicio 5: Determinar si un número cumple múltiples condiciones
Crea un programa que haga lo siguiente:
- Solicita al usuario que introduzca un número.
- Determina si el número cumple al menos una de las siguientes condiciones:
- Es divisible por 2 y mayor que 10.
- O es divisible por 3 pero no mayor que 50.
- Y que el número no sea negativo.
Solución
Ejercicio 6: Validar si un texto cumple criterios mixtos
Crea un programa que haga lo siguiente:
- Solicita al usuario que introduzca una cadena de texto.
- Determina si la cadena cumple todas las siguientes condiciones:
- Tiene entre 5 y 15 caracteres.
- O comienza con la letra "A" pero no termina con la letra "Z".
- Y no contiene espacios en blanco.
Solución
1.3.2 If-Else Anidado
¿Qué es un if-else anidado?
Un if-else anidado permite evaluar múltiples condiciones de manera jerárquica. Es una estructura donde un bloque if o else contiene otro bloque if o else en su interior.
Sintaxis de if-else anidado
| Sintaxis de If-Else Anidado | |
|---|---|
Ejemplo
Ejemplo de If-Else Anidado
En este ejemplo, se evalúa la calificación de un estudiante y se asigna una letra según el rango:
| Calificación con If-Else Anidado | |
|---|---|
Diagrama de flujo
flowchart TD
A[Inicio] --> B{¿Nota >= 90?}
B -->|Sí| C[Calificación: A]
B -->|No| D{¿Nota >= 80?}
D -->|Sí| E[Calificación: B]
D -->|No| F[Calificación: C]
C --> G[Fin]
E --> G
F --> G
Ejercicios de If-Else Anidado
Ejercicios
Ejercicio 1: Clasificación de edades
- Crea un programa que solicite al usuario su edad.
- Según la edad introducida, muestra:
- "Niño" si la edad es menor a 12.
- "Adolescente" si la edad está entre 12 y 17.
- "Adulto" si la edad es 18 o mayor.
Ejercicio 2: Determinar un descuento
- Crea un programa que solicite el importe de una compra.
- Calcula y muestra el descuento según las siguientes reglas:
- 20% si el importe es mayor o igual a 100.
- 10% si el importe está entre 50 y 99.
- Sin descuento si el importe es menor a 50.
Solución
| Determinación de descuentos | |
|---|---|
Ejercicio 3: Clasificación de temperaturas
- Crea un programa que solicite una temperatura en grados Celsius.
- Clasifica la temperatura según los siguientes rangos:
- "Frío" si es menor a 10°C.
- "Templado" si está entre 10°C y 25°C.
- "Calor" si es mayor a 25°C.
Solución
| Clasificación de temperaturas | |
|---|---|
1.3.3 Switch
¿Qué es un switch?
El switch es una estructura de control que permite evaluar una expresión y ejecutar diferentes bloques de código según su valor. Es útil cuando se tienen múltiples condiciones basadas en el mismo valor.
Sintaxis de switch
| Sintaxis de Switch | |
|---|---|
Nota: El uso de break asegura que el programa salga del bloque switch después de ejecutar el caso correspondiente.
Ejemplo
Ejemplo de Switch
En este ejemplo, se determina el día de la semana según un número introducido:
| Día de la semana con Switch | |
|---|---|
Diagrama de flujo
flowchart TD
A[Inicio] --> B{¿Día = 1?}
B -->|Sí| C[Lunes]
B -->|No| D{¿Día = 2?}
D -->|Sí| E[Martes]
D -->|No| F{¿Día = 3?}
F -->|Sí| G[Miércoles]
F -->|No| H{¿Día = 4?}
H -->|Sí| I[Jueves]
H -->|No| J{¿Día = 5?}
J -->|Sí| K[Viernes]
J -->|No| L[Fin de semana]
C --> M[Fin]
E --> M
G --> M
I --> M
K --> M
L --> M
Ejercicios
Ejercicio 1: Clasificación de vehículos
- Crea un programa que solicite al usuario el tipo de vehículo ("coche", "moto" o "camión").
- Muestra un mensaje con el número de ruedas típico para ese tipo de vehículo:
- "Coche": 4 ruedas.
- "Moto": 2 ruedas.
- "Camión": más de 4 ruedas.
Solución
Ejercicio 2: Meses del año
- Crea un programa que solicite al usuario un número del 1 al 12.
- Muestra el nombre del mes correspondiente:
- 1: Enero, 2: Febrero, etc.
- Si el número no está en el rango, muestra un mensaje de error.
Solución
Ejercicio 3: Clasificación de frutas
- Crea un programa que solicite al usuario el nombre de una fruta ("manzana", "plátano", "naranja").
- Muestra un mensaje indicando el color típico de la fruta:
- "Manzana": Roja o verde.
- "Plátano": Amarillo.
- "Naranja": Naranja.
Solución
1.3.4 Operador Ternario
¿Qué es el operador ternario?
El operador ternario es una forma compacta de escribir una expresión condicional en JavaScript. Tiene la siguiente estructura:
| Sintaxis del Operador Ternario | |
|---|---|
Ejemplo: Determinar si un número es par o impar.
| Número par o impar | |
|---|---|
Ejercicio
Ejercicio: Calificación rápida
- Crea un programa que solicite al usuario una calificación numérica.
- Muestra "Aprobado" si la calificación es mayor o igual a 5, o "Suspendido" si es menor.