Estructuras de Control Alternativas

Tomando decisiones en tu código

Te pusiste a pensar la cantidad de veces en el día que tomás decisiones que pueden afectar a tu vida o incluso la vida de los demás? Desde las menos relevantes como " ¿Me pongo la remera azul o la verde?", hasta las más cruciales como "¿Renuncio a mi trabajo para dedicarme a ser un programador freelance, mientras viajo por el mundo?"

Pensemos que estamos programando un juego en que cada vez que un jugador pierde una vida necesitamos avisarle si puede seguir jugando o no. Es decir que mientras le queden vidas, él podría seguir jugando, pero en caso contrario, tenemos que avisarle que el juego ha terminado. Este es el momento en el que, como programadores, necesitamos empezar a tomar decisiones sobre nuestro código. Estas decisiones (también llamadas condiciones) te van a modificar el flujo del programa, ya que te permiten elegir qué acciones deberá realizar el código en cada caso.
A continuación te mostramos los diferentes tipos de estructuras condicionales que existen y cómo se pueden utilizar en Javascript.

Condicional Simple: if

Con la estructura de control if podés indicarle al programa que tome cierto camino, siempre y cuando la condición sea verdadera. Llamamos condición a cualquier expresión de tipo Boolean (que se evalúe como true o false).

bloque de código anterior
 inicio alternativa
 si (condición es verdadera) entonces
	  bloque de código
	 (se ejecuta si la condición es verdadera)
 fin alternativa

Sintaxis

Una declaración if en Javascript la escribimos así:

if (condición) {
 	// código a ejecutar si la condición es verdadera
 }

Las estructuras alternativas también pueden utilizarse de forma anidadas con otras alternativas.

Tip

Recordá que cuando dentro de las llaves ({ }) sólo tenés una línea, se pueden omitir dichas llaves. Aún así, siempre es recomendable ponerlas si tenemos dudas o no estamos seguros.

Tené cuidado!!

Javascript es un lenguaje Case Sensitive, es decir, diferencia entre mayúsculas y minúsculas. Tené en cuenta que if está en minúsculas. Las letras mayúsculas (If o IF) generarán un error.

Ejemplos

Condicional simple: Siguiendo con el ejemplo que propusimos inicialmente, en el que estamos programando un juego y cuando el jugador se queda sin vidas necesitamos avisarle que el juego se terminó. Es decir, si sabemos la cantidad de vidas que le quedan, cuando ese valor es menor a 1, el juego se termina (lo podemos representar con el mensaje "juego terminado");
function estadoJuego(vidas) { let mensaje = ''; if (vidas < 1 ) { // si vidas es menor o igual a 0 mensaje='juego terminado' ; } return mensaje; } let vidas = 0; // numero de vidas (prueba cambiar su valor) let estado = estadoJuego(vidas); if (estado !== '' ) { // si estado no es un string vacío, entonces la mostramos alert(estado); }
Volviendo en el tiempo...

En Javascript, cuando evaluamos una expresión booleana donde su valor resultante sea:
NaN

undefined
null

0 (cero)
'' o "" (string vacío)
da como resultado false. Es decir, que si el condicional de una alternativa es alguno de los valores antes mencionados, entonces NO ejecuta el bloque de código de la estructura if, ya que su condición es false.
Minidesafío #1 :
Si observamos el ejemplo anterior, se encuentra la variable estado comparada con un string vacío, línea 11: if (estado !== ' '), pero podríamos generalizar su comparación y utilizarla como if (estado), ya que para este ejemplo su uso es similar.
Para ver esto, probemos modificando el código del ejemplo (sobre la línea 11) por lo siguiente:
if (estado) {
y veamos cómo se comporta...

Minidesafío #2 :
Ahora que ya lo probamos, veamos qué ocurre si dejamos el código original, pero NO inicializamos la variable mensaje utilizada en la función estadoJuego (línea 2), es decir que la línea 2 quedaría de la siguiente manera:
let mensaje;
y si además vamos modificando los valores en la variable vidas, encontrás alguna diferencia?
Condicional simple anidada: Qué pasaría si necesitamos enviar un mensaje al jugador, no sólo cuando se quede sin vidas, si no que queremos enviarle otro cuando le quede la última vida?
Para este caso vamos a necesitar enviar un mensaje para cuando la cantidad de vidas sea 1 (podría ser 'Te queda la última vida') y otro para cuando la cantidad de vidas sea menor a 0 ('Juego Terminado').
function estadoJuego(vidas) { let mensaje = ''; if (vidas <= 1) { // si vidas es menor o igual a 1 mensaje = 'Te queda la última vida'; if (vidas <= 0) { // si vidas es menor o igual a 0 mensaje = 'Juego Terminado' ; // modificamos el valor de "mensaje" } } return mensaje; } let vidas = 0; let estado = estadoJuego(vidas); if (estado !=== '') { alert(estado); }

Minidesafío #3 :
En el ejemplo anterior utilizamos una estructura if dentro de otra (estructuras if anidadas), se te ocurre otra forma de resolverlo?
Pista: podés ayudarte pensado qué valores podría tomar la variable "vidas" al momento de hacer las comparaciones, y utilizar tantas sentencias if como creas necesarias (podés o no utilizar estructuras anidadas).

Condición con alternativa: if-else

Ahora bien, qué sucede si quisieras establecer una alternativa a la condición del if. Es decir, si quisieras tomar un camino si la condición es verdadera, pero si no lo es... seguir por otro camino?
Para eso utilizamos la expresión if seguida de otra llamada else. De esta forma vamos poder establecer que se realice:

una acción que llamaremos A, si se cumple la condición,
una acción llamada B, si no se cumple la condición.

bloque de código anterior
 inicio alternativa
 si (condición es verdadera) entonces
	 bloque de código A 
	 (se ejecuta si la condición es verdadera)
 si (condición es falsa) entonces
	 bloque de código B  
	 (se ejecuta si la condición es falsa)
 fin alternativa

Sintaxis

Una declaración if-else se escribe de la siguiente manera:

if (condición) {
	// A: código a ejecutar si la condición es verdadera
else {
	// B: ejecuta este otro código si la condición es falsa
}

Ejemplos

Ahora imagina que seguimos programando un juego, pero esta vez queremos avisarle al jugador si puede seguir jugando o no cada vez que pierda una de sus vidas. Es decir, cada vez que el jugador pierda una vida, si le quedan vidas recibe un mensaje para que siga jugando, pero si se queda sin vidas, el juego se termina, por lo que recibe el mensaje de 'Juego Terminado'.

Pasemos esto un poco en limpio...
Si la cantidad de vidas del jugador es:
- menor a 1 => se termina el juego => Juego Terminado
- mayor o igual a 1 => el juego no ha terminado => Sigue jugando!
function estadoJuego(vidas) { let mensaje = ''; if (vidas < 1 ) { // si vidas es menor o igual a 0 mensaje = 'Juego Terminado' ; } else { mensaje = 'Sigue jugando!' ; } return mensaje; } let vidas = prompt('El jugador acaba de perder una vida, ¿Cuántas vidas le quedan?'); let estado = estadoJuego(vidas); alert(estado); // vidas es menor o igual a 0
Otra sintaxis if-else

Existe otra sintaxis definida para una estructura de control if-else llamada operador ternario que tiene una forma mucho más corta y, en algunos casos, más legible. Aunque es una opción que sólo se recomienda utilizar cuando son sentencias alternativas más simples.
variable1 = condición ? condición es true : condición es false;
```
let mensaje = vidas <=  ? "Juego Terminado!" :"Sigue jugando!";
 alert(mensaje);
```
En este caso, la variable mensaje va a almacenar un string u otro dependiendo del contenido de la variable vidas.
Continuando con el ejemplo anterior, ahora vamos a agregarle un poco más de complejidad.
Supongamos que una vez que el jugador pierde una vida, si éstas son menores o iguales a 0 le informamos que perdió. Pero si al jugador le quedan pocas vidas (menos de 3), ahora queremos advertirle que juegue con cuidado. Sin embargo, si le quedan 3 o más vidas, sólo querés animarlo a que siga jugando.

Volvamos a pasarlo en limpio...

Si cantidad de vidas del jugador es:
- menor o igual a 0 => "Juego Terminado"
- es mayor a 0 => el juego no ha terminado
- es mayor o igual a 3 =>"A no preocuparse... Sigue jugando!"
- es menor a 3 => "Ten cuidado, te quedan pocas vidas!"
function estadoJuego(vidas) { let mensaje = ''; if (vidas <= 0) { mensaje = 'Juego Terminado'; // vidas es menor o igual a 0 } else { if (vidas >= 3) { mensaje = 'A no preocuparse... Sigue jugando!'; // vidas es mayor o igual a 3 } else { mensaje = 'Ten cuidado! te quedan pocas vidas...'; // vidas es menor a 3 } } return mensaje; } let vidas = prompt('El jugador acaba de perder una vida, ¿Cuántas vidas le quedan?'); let estado = estadoJuego(vidas); alert(estado);

Condición con alternativa múltiple (if-else if)

Es posible que necesitemos crear una alternativa múltiple con más de 2 condiciones, es decir que necesitamos especificar una nueva condición (if) si la primera es falsa. En definitiva, luego de una sentencia else necesitamos realizar una nueva condición (if). Como vimos en el ejemplo anterior, muchas veces necesitamos tener otra condición if luego de una sentencia alternativa else. A este tipo de estructuras se la conoce como sentencia else if.

Sintaxis

Una declaración if-else if se escribe de la siguiente manera:

if (condición1) {
	// bloque de código que se ejecuta si condición1 es verdadera (condición1 === true)
} else if (condición2) {
	 // bloque de código que se ejecuta si condición1 es falsa y condición2 es verdadera 
	 // (condición1 === false && condición2 === true)
} else {
	// bloque de código que se ejecuta si condición1 y condición2 son es falsas
	// (condición1 === false && condición2 === false)
}

Ejemplo

Si retomamos el último ejemplo (número 2), en el que tenemos una sentencia alternativa else (línea 6) continuada de una condicional if (línea 7), podemos considerar volver a escribir el código de la siguiente manera:

Condición múltiple: switch

Hasta ahora hemos aprendido muchas estructuras, incluso todas las alternativas necesarias para poder empezar a tomar decisiones en el código. Pero qué pasaría si en el juego que estamos programando van a haber jugadores de distintos países, y cada vez que un jugador pierda el juego, querés avisarle que el "juego finalizó" en un idioma que pueda interpretar. Si consideramos que inicialmente hay 3 idiomas (ESP: Español, ING: Inglés y ALE: Alemán), cómo lo podemos representar?
Veamos una posible solución...

Este ejemplo ya lo deducimos rápido, incluso quizás se te ocurre otra forma de resolverlo con las estructuras que ya vimos. Pero qué pasaría si la cantidad de idiomas son más, por ejemplo unos 10 idiomas distintos... se te ocurre cuántas estructuras de control alternativas necesitaríamos?...
Y veamos... por 3 idiomas => 3 estructuras if...
Sí, si pensaste bien... vamos a necesitar al menos 10 estructuras de control condicionales!!!
¿Te animás a sumarlas en el ejemplo anterior? te damos una ayuda con las abreviaturas que podés utilizar:

ESP: Español
ING: Inglés

ALE: Alemán
POR: Portugués

FRA: Fancés
RUS: Ruso

CHN: Chino
JPN: Japonés

ARB: Árabe
TUR: Turco

Bien, ahora que ya lo resolviste y podes ver "claramente" el código... no te parece que esto resulta muy difícil de leer? el código se torna bastante extenso y, dependiendo de cómo lo hayas resuelto, posiblemente tengas estructuras cada vez más anidadas entre si, lo que lo hace muy difícil de seguir. Ufff... ni pensar si nos piden que agreguemos más idiomas!
Pero tenemos una solución para esto! Con la idea de reducir la sintaxis de este tipo de problemas, es que existen las estructuras con condicionales múltiples, en Javascript es llamada sentencia switch.
La sentencia switch es utilizada cuando se desea realizar múltiples condiciones sobre una misma expresión.

bloque de código anterior
 inicio switch
  si (Espresión === X1) entonces
	  bloque de código X1
  si (Espresión === x2) entonces
	 bloque de código x2
	 . 
	 . 
	 . 
  si (Espresión === Xn) entonces
	 bloque de código Xn
  si (Espresión no es igual a 
     X1, X2,... o Xn) entonces
	 bloque de código default optativo (n+1) 	
 fin alternativa

Sintaxis

Una declaración switch en Javascript se escribe de la siguiente manera:

switch(expression) {
	case x1:
		// bloque de código 1
		break;
	case x2:
		// bloque de código 2
		break;
		.
		.
		.
	case xn:
		// bloque de código n
		break;
	default:
	// bloque de código n+1
}

Ahora veamos una descripción de las características de este tipo de estructuras:

Cuando se lee la sentencia switch se verifica la igualdad estricta (===) entre el caso case
(x1, x2, ..., xn) y la expresión expression. Si uno de los casos coincide con la expresión expression, se ejecutará el bloque de código dentro de la cláusula del caso case, hasta que encuentre el final de la declaración switch o hasta encontrar una interrupción break. Es decir, que si expression === x1 es verdadero, entonces se ejecutará el bloque de código 1, pero si expression === x1 es falso, se seguirá con la misma comparación para los demás casos case (x2, ..., xn), hasta dar con alguno que sea verdadero.
Si más de un caso coincide con la instrucción switch, se ejecutará el primer caso case que coincida con la expresión expression. Si ninguno de los casos coincide con la expresión, se ejecutará la cláusula predeterminada default.
La instrucción break está asociada con cada etiqueta case y permite salir de la estructura de código case que estemos ejecutando, por lo que una vez que ejecutemos la instrucción break se finaliza la ejecución de la estructura switch.

Ejemplo

Bien, ahora veamos cómo podemos resolver el ejemplo anterior, con esta nueva estructura.
Repasemos un poco el problema...
Seguimos programando un juego en el que cada vez que un jugador se quede sin vidas necesitamos avisarle que el juego se ha terminado. Pero este mensaje debe ser en un idioma que el jugador entienda. Ya vimos cómo podemos implementarlo para 3 idiomas distintos, vos lo probaste con 10, pero ahora queremos que estos 10 idiomas sean comparados con estructuras condicionales múltiples.

Consideremos los siguientes idiomas (con sus abreviaturas como identificadores):

ESP: Español
ING: Inglés

ALE: Alemán
POR: Portugués

FRA: Fancés
RUS: Ruso

CHN: Chino
JPN: Japonés

ARB: Árabe
TUR: Turco

Como podemos observar ahora la sintaxis del código es mucho más simple, incluso si necesitaramos agregar nuevos idiomas ya no resultaría tan difícil de seguir. ¿Te animás a agregarle dos idiomas más al ejemplo anterior? te dejo dos orientativos por si querés usarlos:
CAT: Catalán. Traducción de 'Juego terminado' => 'joc acabat'.
POL: Polaco. Traducción de 'Juego terminado' => 'koniec gry'.

También se aplica

La instrucción break es opcional, pero si no está presente la ejecución continuará a través de las sentencias case, aunque no se encuentre coincidencia. Es decir, ejecutará todas las sentencias siguientes hasta encontrar una instrucción break o hasta que finalice la estructura switch.
Podemos omitir el uso de break para "agrupar" casos case, es decir podemos decidir ejecutar cierto bloque de código para un conjunto de casos case y otro/s bloque/s de código distinto para otros casos case.

Minidesafío #4 :

Ahora te propongo el siguiente caso... qué pasaría si en vez del idioma que sabe el jugador, ahora sabemos sólo su nacionalidad, es decir, no sabemos qué idioma puede leer pero lo podemos deducir por su nacionalidad. También sabemos que en más de un país se utiliza el mismo idioma, entonces podríamos "agrupar" varias nacionalidades en uno. Por ejemplo un jugador de nacionalidad argentina, española o uruguaya utiliza el idioma español. En cambio, un jugador de nacionalidad portuguesa o brasilera utilizan el idioma portugués.
Ahora que sabemos esto, y considerando la utilización de las sentencias break que se mencionó anteriormente, se te ocurre cómo podemos avisarle al jugador que el juego ha terminado en un idioma que pueda entender?
Pista: empecemos analizando los casos a contemplar:

si la nacionalidad es argentina, española o uruguaya (idioma es español) => "juego terminado"
si la nacionalidad es brasilera o portuguesa (idioma es portugués) => "fim de jogo"
si la nacionalidad es inglesa, estadounidense o canadiense (idioma es inglés) => "Game Over"

Videos

A continuación les dejamos un pequeño resumen de los temas que vimos en esta sección en formato de video!!

Video de Alternativas (Parte 1)

Video de Alternativas (Parte 2)

Video de Alternativas (Parte 3)

A trabajar!

Ahora que ya vimos el concepto de estructuras alternativas y cómo utilizarlas dentro de JavaScript, vamos a emplear estos conocimientos, en conjunto con todo lo que hemos aprendido en los recorridos anteriores, para resolver distintos desafíos de programación.
En la carpeta R3, vamos a crear un archivo para cada ejercicio en el que podés nombrarlo de la siguiente forma "alternativas_nivelx.js", donde x es el número del nivel que tiene el ejercicio.

Nivel 1: Refactorizando nuestro código

Ejercicio propuesto:

Volvamos a repensar el ejercicio de nivel 2, 3 y 5 resuelto en funciones, en donde planteamos la fórmula del área y el perímetro de algunas figuras geométricas. Pero esta vez el usuario debe poder elegir qué fórmula quiere que el programa realice, es decir, debe ingresar una opción para el tipo de figura geométrica, por ejemplo:
C: Cuadrado.
R: Rectángulo.
T: Triangulo.
O: Circunferencia.
También debe poder elegir el tipo de calculo a realizar ingresando es A para el área o P para el perímetro.
Nota: se pueden cambiar las letras a ingresar por números o palabras.

Nivel 2: Programando el tiempo

Ejercicio propuesto:

Necesitamos crear una aplicación que realice la conversión de horas, desde el formato de 24 hs al formato de 12 hs (AM/PM).
El usuario debería ingresar una hora entre 00 y 23 hs. Y luego visualizarla en formato de 12 horas.
Se deberá avisarle al usuario si la hora ingresada está fuera de rango. Por ejemplo: si el usuario ingresa 26 hs, no puede estar dentro del formato de 24 hs.
Horas ingresadas => Resultado:
0 => 12 AM
1 => 1 AM
…
11=> 11 AM
12 => 12 PM
13 => 1 PM
...
23 => 11 PM

Pista: Se puede pensar una función para calcular las horas y otra para el formato (AM/PM).

Nivel 3: Notificando Salidas

Ejercicio propuesto:

Es necesario programar una aplicacion para el celular, que indique sólo a los usuarios mayores de edad si puede salir de su domicilio, de acuerdo a la terminación de su dni (último número) y el día de la semana. La aplicación ya está armada, pero falta lo más importante... el código que controla y le avisa al usuario si puede salir o no.
Para esto el usuario ingresa su edad, ultimo número del dni y un número con el día de la semana:
1: Lunes,
2: Martes,
3: Miércoles,
4: Jueves,
5: Viernes,
6: Sabado,
7: Domingo.

Las salidas quedan determinado de la siguiente manera:
- Lunes, Miércoles o Viernes pueden salir los usuarios con terminación del dni par.
- Martes, Jueves y Sábados pueden salir los usuarios con terminación del dni impar.
- Domingo pueden salir todos los usuarios, incluso los menores de edad.

Tip: podemos saber si un número es par si al dividirlo por 2 el resto es 0.

Nivel 4: A rendir Examen! :o

Parte 1:

Necesitamos avisarle a los estudiantes de la materia de programación, si deben rendir o no recuperatorio.
En base a la nota que el estudiante haya obtenido en el examen, se debe enviar un mensaje que les indique el resultado del examen de la siguiente forma: si la nota es mayor a 5 el examen está aprobado :D y no debe rendir recuperatorio, pero en caso contrario el examen está desaprobado :/ y debe rendir recuperatorio.

Parte 2:

Ya terminamos de cursar programación y resulta que todos los estudiantes aprobaron los examenes o recuperatorios!!! :D
Ahora necesitamos avisarle a cada estudiantes si promociona o no la materia, es decir que los que promocionen no debe rendir examen final.
Para esto le vamos a pedir la nota de 3 examenes, donde si el promedio de esas 3 notas es mayor o igual a 8, entonces el alumno promociona la materia, pero si el promedio es menor a 8, entonces no promociona la materia.
Pista: promedio de 3 numeros se calcula con la suma de los numeros y la división por 3. Promedio = (num1 + num2 + num3)/3.

Nivel 5: Analizando condicionales con alternativas

A continuación te proponemos que crees 3 archivos, en los que vas a necesitar copiar el código que te presentamos para cada uno. Así, cuando lo ejecutes, puedas ir respondiendo las preguntas que se plantean en cada caso.

1 - Mostrando información de un año (Archivo alternativas_nivel3_1.js):

Los años biciestos son aquellos en los que el año tiene un día más (366).
I) te parece que la función infoAnio está mostrando bien la infomación? Si no está bien, te proponemos corregirla para que se comporte adecuadamente.
II) Si ahora además, necesitamos saber si el año ingresado, cuando no es biciesto, es un número par o impar, te animás a sumar esa nueva información?
Por ejemplo:
- si ingreso año 2022 con 365 dias debería mostrarme:
"El año 2022 no es biciesto y es par."
- Pero si ingreso el año 2020 debería mostrar:
"El año 2020 es biciesto."

2 - Analizando letras (Archivo alternativas_nivel4_2.js):

Tips: la funcion toUpperCase() de javascript devuelve un valor convertido en mayúscula de la cadena (string) que realiza la llamada.
Ej: "Diplo".toUpperCase() retorna "DIPLO".
I) Si al ejecutar el código ingresás alguno de los siguientes letras (minúsculas): a - e - i - o - u, te parece que el código está respondiendo bien?
Si te parece que algo no está bien, podrás corregirlo para que funcione con esas letras?
II) Ahora si quiero ingresar las vocales en mayúscula (A-E-I-O-U), el código te responde correctamente? Si te parece que no, podés modificarlo para que contemple estos casos?

3 - Comparando (Archivo alternativas_nivel4_3.js):

/**
 * Imagino que venís a full ejecutando código, así que acá bajamos un cambio... ;) 
 * Supongamos que las últimas 2 líneas de script no están comentadas. 
 * Te proponemos, que antes de ejecutar el código, lo analices y respondas lo siguiente:
 * si se ingresa cada uno de los siguientes números, qué opción (1 o 2) elegís en cada uno?
 * Dejá tu respuesta en cada caso:
 * numUsuario = 0 => opcion:
 * numUsuario = 5 => opcion:
 * numUsuario = 6 => opcion:
 * numUsuario = 10 => opcion:
 * numUsuario = 1 => opcion:
 * numUsuario = -2 => opcion:
 * Finalmente, descomentá las ultimas 2 lineas del script, así ya podés ir ejecutando el código para verificar tus respuestas...
 */
// realizamos comparaciones
function comparacion(numero) {
  let resultado;
  const falso = false;
  if (!falso && 10 <= 15 - numero && numero > 0) {
    resultado = 1;
  } else {
    resultado = 2;
  }
  return resultado;
}

// funcion que muestra si la opción elegida era la correcta o no
function mostrarResultado(resultado, opcion, numero) {
  let datosFuncion = "en la funcion \n comparacion(" + numero + ")";
  if (resultado === opcion) {
    alert("Muy bien!!! elegiste la opción correcta " + datosFuncion);
  } else {
    alert("Cuidado! la opción correcta " + datosFuncion + " es: " + resultado);
  }
}

// ----------- acá comienza nuestro código principal ----------------------------

let numUsuario, opcion, resultado;
numUsuario = Number(prompt("Ingresá un número para enviar por parámetro a la función comparacion:"));
opcion = Number(
  prompt( "Analiza el resultado que te parezca emitirá la función comparacion("   
  		 + numUsuario + 
  		"). \n Luego ingresá un número (1 - 2) de acuerdo al opción que elijas: "
  ));
// resultado = comparacion(numUsuario);
// mostrarResultado(resultado, opcion, numUsuario);

Imagino que venís a full ejecutando código, así que acá bajamos un cambio... ;)
Supongamos que las últimas 2 líneas de script no están comentadas. Te proponemos, que antes de ejecutar el código, lo analices y respondas lo siguiente:
si se ingresa cada uno de los siguientes números, qué opción (entre 1 y 2) elegís en cada uno?
Dejá tu respuesta en cada caso:
numUsuario = 0 => opcion:
numUsuario = 5 => opcion:
numUsuario = 6 => opcion:
numUsuario = 10 => opcion:
numUsuario = 1 => opcion:
numUsuario = -2 => opcion:
Finalmente, descomentá las ultimas 2 lineas del script, así ya podés ir ejecutando el código para verificar tus respuestas...

Nivel 6: Categorizando usuarios

Ejercicio propuesto:

YouTube clasifica a sus usuarios como usuarios espectadores o creadores. Donde los usuarios espectadores son aquellos que sólo utilizan la plataforma para ver videos, pero nunca han generado contenidos, es decir no han subido un video. Por el contrario, los usuarios creadores son los que al menos subieron un video a la plataforma. Cada vez que un usuario realiza una búsqueda, el algoritmo encargado de esta acción, debe priorizar los resultados dependiendo de la edad del usuario y su tipo (creador o espectador).
Para esto necesita asignarle una categoría al usuario. Dichas categorías se especifican con números, de la siguiente manera:
1: usuario es menor a 12 años.
2: la edad está entre 12 y 17 y el usuario es creador.
3: la edad está entre 12 y 17 y el usuario es espectador.
4: la edad es mayor a 17 años y el usuario es creador.
5: la edad es mayor a 17 años y el usuario es espectador.
Como el algoritmo actualmente esta sufriendo algunas fallas, están pidiendo a programadores de todo el mundo que cree un script que les permita poder categorizar los usuarios y avisarle la categoría que le corresponde.
Te animás a resolverlo?

Nivel 7: Menú de atención al usuario

Ejercicio propuesto:

Una reconocida empresa de telefonía celular necesita que se programe un menú de opciones para utilizar en su línea telefónica de atención al usuario. El menú se compone de los siguientes items:
1: Valor de su última factura.
2: Conocer fecha del próximo vencimiento de su factura.
3: Comunicarse con gestion de ventas.
4: Comunicarse con un operador de atención al cliente.
5: Comunicarse con un operador de soporte técnico.
0: Terminar la llamada.
Una vez que el usuario elija una opción se deberá mostrar un mensaje acorde a dicha elección. Por ejemplo, si el usuario elige la opción 3 se podría mostrar el mensaje:
"En instantes será atendido por uno de nuestros representantes en ventas."
En caso de que el usuario ingrese un valor que no está contemplado en el menú, se le deberá informar que la opción es incorrecta.

Nivel 8: Calculadora

Ejercicio propuesto:

Es necesario programar una calculadora que realice las 4 operaciones de suma, resta, multiplicación y división. El usuario que utilice la calculadora deberá ingresar los números a operar y el tipo de operación que desea realizar. Además, una vez que ingresó los datos debería poder ver el resultado del cálculo realizado.
Por ejemplo si desea sumar los números 20 y 10, entonces ingresa los números y el tipo de operación suma. Luego debería visualizar el resultado de la suma: 30.

Tip: Cada uno debe elegir cómo representar las operaciones, por ejemplo la operación suma se puede representar mediante una letra (s), palabra (suma), simbolo (+) o número (1).

Nivel 9: Alarma

Ejercicio propuesto:

Un usuario tiene diversos horarios en la semana para levantarse, ya que algunos días trabaja de forma remota y otros debe asistir a la oficina. Por lo que necesita que la alarma que usa para despertarse en la mañana suene en horarios distintos, de acuerdo a si ese día debe ir a la oficina o si trabaja desde su casa.
Además, los días sabados o domingo prefiere levantarse un poco más tarde, ya que no debe trabajar.
Los días y horarios en los que debe sonar su alarma son los siguientes:
- Lunes, miercoles y viernes, trabaja desde su casa, por lo que necesita levantarse a las 7:30 AM.
- Martes y jueves, como debe asistir a la oficina, tiene que levantarse a las 7 AM.
- Fines de semana prefiere que su alarma suene a las 9 AM.
Te animás a programar la alarma para que muestre un mensaje con el horario que va a sonar, dependiendo de la información que ingrese el usuario, donde indica día de la semana?

Nivel 10: Cambiando colores

Ejercicio propuesto:

Te pronpongo un ejercicio totalmente distinto.
Necesitamos poder modificar el color de fondo de la página web donde se proyecta tu archivo html.
El cambio de color se puede hacer mediantela siguiente función:


								function cambiarFondo(color) { 

									document.body.style.backgroundColor = color;

									}

Esta función se encarga de asignarle un nuevo estilo de color al fondo de la página que actualmente es blanco.
El parametro color puede tomar los siguientes string de valores:
"green" => se verá en verde
"red" => se verá en rojo
"blue" => se verá en azul
"yellow" = > se verá en color amarillo
En este caso vas a tener que pedirle al usuario que ingrese un color entre las distintas opciones que le des a elegir, y de acuerdo al color elegido deberías poder cambiar el color de fondo de la página web en tu codeSanbox.

Adicionales

Ahora que ya estás a full con los ejercicios de alternativas, te proponemos una serie de desafíos para poner aún más a prueba tus conocimientos y profundizar lo aprendido. Suerte!

Adicional 1: IMC

Ejercicio propuesto:

Un médico necesita saber el estado de sus pacientes, de acuerdo al peso y la altura que tengan cuando asisten al turno, y de esta forma, puede pedirle los estudios que crea apropiados.
Para esto, una de las cosas que les permite saber el estado de sus pacientes es el Índice de Masa Corporal (IMC). De acuerdo al valor del IMC, necesita que le mostremos un mensaje con el estado que tiene el paciente, de la siguiente forma:
Si el IMC es menor a 18.5 entonces "Peso inferior al normal".
Si el IMC está entre 18.5 y 24.9, entonces "Peso normal".
Si el IMC está entre 25.0 y 29.9, entonces "Peso superior al normal".
Si el IMC es mayor o igual a 30, entonces "Obesidad".

Cálculo del IMC = 1000 x peso/altura².

Adicional 2: Tipo de sustancia

Ejercicio propuesto:

El PH es un valor numérico que puede medir la alcalinidad o acidez de una sustacia. La escala del PH varía del 0 al 14, y se puede clasificar una sustacia de acuerdo a su PH, de la siguiente forma:
- Neutro si el valor de PH es 7.
- Ácido si el PH es menos de 7 o
- Alcalino si el PH es más de 7.
El usuario necesita que programemos un script para saber la clasificación de las sustacias de acuerdo al valor de PH que ingrese.
Nota: Debemos advertirle al usuario si el valor que ingresó está fuera del rango esperado (0 al 14);

Ejemplo de posibles pruebas que realice el usuario, ingresando el PH de las siguientes sustancias:
Jugo de limón PH = 2.4 => ácido
Leche PH = 6.5 => ácido
Agua PH = 7 => Neutro
Detergente PH = 10.5 => alcalino

Adicional 3: Más refactor

Ejercicio propuesto:

Ahora que ya conocés todas las estructuras alternativas, te animás a revisar los ejercicios de Nivel 1 y 2, y si te parece apropiado realizar el refacator que creas necesario.

Desafío Dipli! - ¿Cuál es el Número?

Considerando todo lo que hemos aprendido durante este recorrido, te proponemos que pienses en el desafío Dipli del recorrido de funciones y trates de incorporar las nuevas estructuras aprendidas: Alternativas.
Además de respetar las reglas ya planteadas en desafíos anteriores, también vamos aconsiderar que el desadío Dipli responda a las siguientes reglas:

El jugador debería poder jugar al menos 3 veces (tener al menos 3 intentos), pero los siguientes intentos sólo deberán ser posible si en el primero no ganó.
Antes de cada nuevo intento el jugador deberá saber que no acertó el anterior.
Al comienzo del juego se le debe informar al jugador el rango de valores que puede ingresar. Si el jugador ingresa valores fuera del rango pierde ese turno, y se le debe avisar que perdió esa oportunidad por estar fuera del rango de valores que puede elegir Dipli.

TIPS!

Ahora que ya incorporamos nuevas herramientas podemos cambiar algunos mensajes, como por ejemplo:
"Ganó Dipli: true", "Ganó Contrincante: false",
puede ser modificado por: "El ganador es Dipli", o el que mejor te parezca ;)

Suerte y a disfrutar programando!

Repaso!

Veamos que recordamos de lo que transitamos en este recorrido:

En una estructura alternativa, la condición es una expresión de qué tipo?
Boolean
En una estructura alternativa cuándo se ejecuta la sentencia else?
Cuando la condición es falsa (false).
Qué alert se va a observar:
let variable = 0; if (variable) { alert("Ingresa if"); } else { alert("Ingresa else"); }
El alert que contiene el string: "Ingresa else"
Qué alert se va a observar:
let variable = 2; if (variable) { alert("Ingresa if"); } else { alert("Ingresa else"); }
El alert que contiene el string: "Ingresa if"
Con qué tipo de Estructura se pueden realizar múltiples condiciones sobre una misma expresión?
Estructura condicional múltiple (switch)
Una instrucción switch(dato){...} qué operador utiliza para comparar el contenido de "dato" con el valor de cada caso (case)?
Operador de comparación igual valor y tipo (===).

Condicional Simple: if

Sintaxis

Tip

Tené cuidado!!

Ejemplos

Volviendo en el tiempo...

Condición con alternativa: if-else

Sintaxis

Ejemplos

Otra sintaxis if-else

Condición con alternativa múltiple (if-else if)

Sintaxis

Ejemplo

Condición múltiple: switch

Sintaxis

Ejemplo

También se aplica

Nivel 1: Refactorizando nuestro código

Ejercicio propuesto:

Nivel 2: Programando el tiempo

Ejercicio propuesto:

Nivel 3: Notificando Salidas

Ejercicio propuesto:

Nivel 4: A rendir Examen! :o

Parte 1:

Parte 2:

Nivel 5: Analizando condicionales con alternativas

1 - Mostrando información de un año (Archivo alternativas_nivel3_1.js):

2 - Analizando letras (Archivo alternativas_nivel4_2.js):

3 - Comparando (Archivo alternativas_nivel4_3.js):

Nivel 6: Categorizando usuarios

Ejercicio propuesto:

Nivel 7: Menú de atención al usuario

Ejercicio propuesto:

Nivel 8: Calculadora

Ejercicio propuesto:

Nivel 9: Alarma

Ejercicio propuesto:

Nivel 10: Cambiando colores

Ejercicio propuesto:

Adicional 1: IMC

Ejercicio propuesto:

Adicional 2: Tipo de sustancia

Ejercicio propuesto:

Adicional 3: Más refactor

Ejercicio propuesto: