RECUERDA PONER A GRABAR

LA CLASE
¿DUDAS DEL ON-
BOARDING?
MIRALO AQUI
 ¡IMPORTANTE!
Los desafíos y entregas de proyecto se deben cargar hasta siete días
después de finalizada la clase. Te sugerimos llevarlos al día.
 Clase 02. JAVASCRIPT
CONTROL DE FLUJOS
 Entender:
● ¿Qué es un condicional y cómo nos
permite tomar decisiones en nuestro
código?
● ¿Cómo JavaScript evalúa un valor
verdadero o falso?
OBJETIVOS DE LA ● ¿Qué es un operador de comparación y
CLASE cuál es su uso en los condicionales?
● ¿Qué es un operador lógico y cuál es su
uso en los condicionales?
GLOSARIO:
Clase 1
JavaScript: es un lenguaje de programación que se utiliza Operadores lógicos: permiten agrupar expresiones
principalmente para aportar dinamismo a los sitios web. lógicas. Las expresiones lógicas son todas aquellas
expresiones que obtienen como resultado verdadero o
Variable: es un espacio reservado en la memoria que, falso. Los operadores lógicos son aquellos que hacen de
como su nombre indica, puede cambiar de contenido a lo nexo de este tipo de expresiones.
largo de la ejecución de un programa. Podemos almacenar
un número, un texto, un listado de números, etcétera. Anidar: en programación, se refiere a escribir una
sentencia junto a una subsiguiente dentro de la misma
Algoritmo: en programación, es un conjunto de estructura sintáctica. Es decir, que no hay un salto de línea
procedimientos o funciones que se necesitan para realizar en el medio.
cierta operación o acción.
MAPA DE CONCEPTOS
MAPA DE CONCEPTOS CLASE 2

Condicionales en IF...ELSE,
Estructura IF
JS IF…ELSE IF

Variables boolean ¿Cuáles son?

Operadores lógicos ¿Cuáles son? Combinaciones

 CRONOGRAMA DEL CURSO
Clase 1 Clase 2 Clase 3

Conceptos generales: Control de flujos Funciones básicas +

sintaxis y variables Ciclos/Iteraciones

EJEMPLO EN VIVO EJEMPLOS EN VIVO EJEMPLOS EN VIVO

CREAR UN ALGORITMO JS CREAR UN ALGORITMO CON CREAR UN ALGORITMO

SIMPLE UN CONDICIONAL UTILIZANDO UN CICLO
GUIÓN DE LA CLASE
Accede al material complementario aquí.
CONDICIONALES EN
JS
CONDICIONALES:
DEFINICIÓN
Cuando en programación
hablamos de condicionales,
hablamos de una estructura
sintáctica que sirve para tomar
una decisión a partir de una
condición.
Si <condición> entonces
<operación>
 ESTRUCTURA IF
La estructura más utilizada en la mayoría de los lenguajes, y por
ende también en JS, es la estructura if

if (true){
console.log("vas a ver este mensaje");
}
 ESTRUCTURA IF
Si la condición se cumple (es decir, si su valor es true) se ejecutan
todas las instrucciones que se encuentran dentro de {...}. Si la condición
no se cumple (es decir, si su valor es false) no se ejecuta ninguna
instrucción contenida en {...} y el programa continúa ejecutando el
resto de instrucciones del script.

if (false){
console.log("no vas a ver este mensaje");
}
EJEMPLO DE CONDICIONALES
let unNumero = 5

// Con (unNumero == 5) comparamos si unNumero es igual a 5

if (unNumero == 5){
console.log("vas a ver este mensaje");
}

// Con (unNumero == 6) comparamos si unNumero es igual a 6

if (unNumero == 6){
console.log("no vas a ver este mensaje");
}
 EJEMPLO DE CONDICIONALES
En este ejemplo, las comparaciones se realizan entre el valor de la variable
unNumero y un valor numérico.

En el primer condicional, como los dos valores coinciden, la igualdad se

cumple, y por lo tanto la condición es cierta; su valor es true, y se ejecutan las
instrucciones contenidas en el bloque del if.
En el segundo caso unNumero no es igual a 6; su valor es false, y no se ejecutan las
instrucciones contenidas en el bloque del if.
La comparación del ejemplo anterior suele ser el origen de muchos errores de programación, al
confundir los operadores == y =. Las comparaciones siempre se realizan con el operador ==, ya
que el operador = solamente asigna valores.
 IF...ELSE
En ocasiones, las decisiones que se deben realizar no son del tipo "si se
cumple la condición, hazlo; si no se cumple, no hagas nada".
Normalmente las condiciones suelen ser del tipo "si se cumple esta
condición, hazlo; si no se cumple, haz esto otro".
let unColor = "Rojo"

// Con (unColor == "Rojo") comparamos si unColor es igual "Rojo"

if (unColor == "Rojo"){
console.log("el color es Rojo");
}else{
//La instrucción se interpreta cuando unColor NO es "Rojo"
console.log("el color NO es Rojo");
}
 EJEMPLO DE IF...ELSE
let nombreUsuario = prompt("Ingresar nombre de usuario");

if (nombreUsuario == "") {
alert("No ingresaste el nombre de usuario");
}
else {
alert("Nombre de usuario ingresado " + nombreUsuario);
}
CONDICIONES ANIDADAS
IF..ELSE IF
let precio = 100.5;

if (precio < 20) {

alert("El precio es menor que 20");
}
else if (precio < 50) {
alert("El precio es menor que 50");
}
else if (precio < 100) {
alert("El precio es menor que 100");
}
else {
alert("El precio es mayor que 100");
}
VARIABLES BOOLEAN
 TRUE o FALSE
Las variables booleanas son las que sólo tienen dos valores, true or
false. Pueden recibir el valor a partir de una evaluación booleana
sobre otras variables:

let esValida = true;

let numero = 10;
let esMayor5 = (numero > 5); // su valor sera true

if (esValida) {
alert("Es boolean true");
}
¡VAMOS A PRACTICAR LO
VISTO!
 ☕
BREAK
¡5/10 MINUTOS Y
VOLVEMOS!
OPERADORES
LÓGICOS
 OPERADORES EN JS
En JavaScript, disponemos de los operadores lógicos habituales en
lenguajes de programación como son: es igual, es distinto, menor,
menor o igual, mayor, mayor o igual, and (y), or (o) y not (no).
La sintaxis se basa en símbolos, como veremos a continuación.
Cabe destacar que hay que prestar atención a no confundir ‘==’
con ‘=’ porque implican distintas cosas.
OPERADORES EN JS
 CONDICIONES COMPUESTA
CON &&
Ante una combinación de operadores && (AND) será requisito que todas las
comparaciones sean verdadera para que la condición compuesta sea verdadera.

let nombreIngresado = prompt("Ingresar nombre");

let apellidoIngresado = prompt("Ingresar apellido");

if((nombreIngresado !="") && (apellidoIngresado !="")){

alert("Nombre: "+nombreIngresado +"\nApellido: "+apellidoIngresado);
}else{
alert("Error: Ingresar nombre y apellido");
}
 CONDICIONES COMPUESTA
CON
En caso de utilizar || (OR), será requisito ||
que al menos una de las comparaciones sea
verdadera para que la condición compuesta sea verdadera.

let nombreIngresado = prompt("Ingresar nombre");

if((nombreIngresado == "ANA") || (nombreIngresado =="ana")){

alert("El nombre ingresado es Ana");
}else{
alert("El nombre ingresado NO ES Ana");
}
 COMBINACIÓN DE
También es posible combinar || (OR) y && (AND)&&
OPERADORES y ||comparaciones
para combinar
cada vez más complejas.

let nombreIngresado = prompt("Ingresar nombre");

if((nombreIngresado !="") && ((nombreIngresado == "EMA") || (nombreIngresado =="ema"))){

alert("Hola Ema");
}else{
alert("Error: Ingresar nombre valido");
}
COMBINACIÓN DE OPERADORES
Ya que las expresiones&& yevaluadas
lógicas son || de izquierda a
derecha, es necesario agrupar las operaciones para asegurar que se
cumplan como uno lo desea:

No es lo mismo:
if((nombreIngresado !="") && ((nombreIngresado == "EMA") || (nombreIngresado =="ema"))){
que:
if(((nombreIngresado !="") && (nombreIngresado == "EMA")) || (nombreIngresado =="ema")){
¡VAMOS A PRACTICAR LO
VISTO!
 2

CREAR UN ALGORITMO CON UN

CONDICIONAL
Crea un algoritmo que solicite al usuario uno o más valores ingresados por prompt(),
compare las entradas y, en función de ciertas condiciones, muestre un resultado.
CREAR UN ALGORITMO CON UN CONDICIONAL
Formato: Página HTML y código fuente en JavaScript. Debe identificar el apellido del
alumno/a en el nombre de archivo comprimido por “claseApellido”.
Sugerencia: Tener en cuenta que los valores obtenidos por prompt() son string, si se
busca operar con números hay que parsearlos antes y si van a usar cadenas recordar tener
cuidado con mayúsculas y minúsculas en las comparaciones de igualdad. (Ej. “Hola” y
“HOLA” no son iguales)

>> Consigna: Crea un algoritmo que solicite al usuario uno o más valores ingresados por prompt(), compare las
entradas y, en función de ciertas condiciones, muestre por consola o alert() el resultado según los valores ingresados y
las condiciones cumplidas.
>>Aspectos a incluir en el entregable:
Archivo HTML y Archivo JS, referenciado en el HTML por etiqueta <script src="js/miarchivo.js"></script>, que
incluya la definición de un algoritmo en JavaScript que emplee instrucciones condicionales.
>>Ejemplo:
- Pedir número mediante prompt y si es mayor a 1000 mostrar un alert.
- Pedir un texto mediante prompt, y si es igual a "Hola" mostrar un alerta por consola.
- Pedir un número por prompt y evaluar si está entre 10 y 50. En caso positivo mostrar un alert.
¿PREGUNT
AS?
 ¡PARA PENSAR!
¿Te gustaría comprobar tus conocimientos de la clase?

Te compartimos a través del chat de zoom

el enlace a un breve quiz de tarea.
Para el profesor:
- Acceder a la carpeta “Quizzes” de la camada
- Ingresar al formulario de la clase
- Pulsar el botón “Invitar”
- Copiar el enlace
- Compartir el enlace a los alumnos a través del chat
 RECURSOS:
●Conversión de tipos de datos, operadores y sentencias condicionales |
Los apuntes de Majo (Página 9 a 16).
●Operadores y condicionales |
Te lo explico con gatitos Operadores.
Te lo explico con gatitos Operadores Lógicos.
Te lo explico con gatitos Condicionales.

●Práctica interactiva sobre operaciones con JavaScript |

Silent teacher.

●Documentación |
Documentación IF ELSE.

Documentación SWITCH.
 ¡MUCHAS
GRACIAS!
Resumen de lo visto en clase hoy:
- Operador if, else y sus variantes.
- Variables boolean.
- Operaciones lógicas: AND, OR y
combinaciones.
OPINA Y VALORA ESTA
CLASE
#DEMOCRATIZANDOLAEDUC
ACIÓN