Introducción a la programación
en JavaScript
Módulo 2 - Formato
Introducción a la programación en JavaScript
Estructuras de
control de flujo
Introducción a la programación en JavaScript
Estructuras de control de flujo
Si solamente trabajamos con operadores y
variables, generamos una sucesión de pasos
lineales. No podemos decidir si algo se mostrará
o no según determinadas circunstancias o en
todo caso repetir una instrucción tantas veces.
Para realizar estas secuencias más complejas y
con múltiples posibilidades se debe trabajar con
estructuras de control de flujo.
Para poder avanzar, necesitamos recordar
algunos tipos de variables y operadores que
vamos a utilizar en estas nuevas estructuras.
Introducción a la programación en JavaScript
Tipo booleano
Los tipos de variables de dato booleanos son aquellos conformados
únicamente por 2 posibles valores: true/false.
Un booleano puede ser definido en forma explícita, por ejemplo,
asignando un "true" a una variable. Recordemos que, por ejemplo,
si generamos una ventana de confirmación estamos esperando
que el resultado según el usuario acepte o no , es verdadero/falso.
El resultado será el siguiente:
Introducción a la programación en JavaScript
Tipo booleano
Vamos a mostrar el resultado en una alerta:
Si el usuario cancela, el resultado será el siguiente:
Introducción a la programación en JavaScript
Operadores relacionales
Vamos a recordar qué tenemos la posibilidad de trabajar
con operadores relacionales, por ejemplo:
> Mayor a
< Menor a
>= Mayor o igual a
<= Menor o igual a
== “Igual a” => Utilizado para verificar si 2 valores coinciden
!= “Distinto de” => Utilizado para verificar si 2 valores NO coinciden
=== “Idéntico a” => Utilizado para verificar si 2 valores coinciden y
son del mismo tipo de dato
Introducción a la programación en JavaScript
Operadores relacionales
Si utilizamos operadores relacionales, podríamos
generar el siguiente código, donde nos preguntamos
si el numero1 es menor al numero2. Es decir, si 10
es menor a 20…
Como el resultado da true(booleano), la respuesta:
Introducción a la programación en JavaScript
Operadores lógicos
También podemos utilizar operadores lógicos para generar procesos más complejos donde
decimos por ejemplo que un número es igual o mayor a otro pero también qué debe cumplir
o no con otra condición.
Siempre es interesante graficar estas
situaciones para entender el proceso
de descarte, donde algo termina o no
dando true o false:
Introducción a la programación en JavaScript
Estructuras
condicionales
Introducción a la programación en JavaScript
Condicionales
Son aquellas que nos permiten tomar decisiones
acerca de qué sentencias (órdenes) debe ejecutar
el programa, en base a una condición / expresión
booleana, es decir si algo es true/false.
Se puede decir que a diferencia de los programas
que veníamos generando, en este caso según el
dato de entrada es que se tomará una serie de
pasos u otra, por lo tanto el resultado o dato de
salida dependerá del dato de entrada.
Introducción a la programación en JavaScript
Condicionales: if
El condicional if nos permite tomar una decisión
en base a una condición.
Cuando la condición sea evaluada como verdadera,
se ejecutará un bloque con un conjunto de
sentencias asociado al if.
Siempre, para empezar a trabajar, lo haremos en
pseudocódigo, esto es esencial para no cometer
errores y saber siempre hacia donde apunta
nuestro programa.
Introducción a la programación en JavaScript
Condicionales: if
A partir del pseudocódigo anterior, la sintaxis
será similar a la siguiente:
Generemos algo real para ir probandolo en
nuestro código:
Introducción a la programación en JavaScript
Condicionales: if
Dado que hemos decidido que el dato de entrada sea a través de una
ventana de usuario, lo haremos de la siguiente forma:
Como el usuario, efectivamente tiene 20 o más,
el resultado en el navegador será el siguiente:
Introducción a la programación en JavaScript
Condicionales: if, else
En este caso fijamos una alternativa, de esta forma
un algoritmo y un pseudocódigo que representen
esta situación sería:
Introducción a la programación en JavaScript
Condicionales: if, else
Vamos a generar el código del caso anterior en nuestro [Link]
El resultado de no cumplirse la condición es:
Introducción a la programación en JavaScript
Condicionales: if, else, elseif
La estructura elseif, nos brinda una posibilidad
de que se ejecute una serie de pasos si una
opción (no la primera) es verdadera.
Por ejemplo, nuestro pseudocódigo podría ser:
Introducción a la programación en JavaScript
Condicionales: if, else, elseif
Nuestro código podría verse de la siguiente forma:
El resultado si el usuario ingresa 25 será el siguiente:
Introducción a la programación en JavaScript
Condicionales: if, else, elseif
En el caso de que el usuario ingrese 15 por ejemplo, el resultado
en el navegador a través de una ventana de alerta será el siguiente:
Probemos también hacerlo con un [Link]() para alternar
entre las diferentes formas vistas de output en Javascript.
Introducción a la programación en JavaScript
Revisión
● Repase el concepto de estructura de control de flujo.
● Genere diferentes opciones de pseudocódigo para
trabajar con condicionales.
● Implemente if, else, elseif.
● Combine los diferentes tipos de output vistos.
● Implemente los conocimientos en el Proyecto Integrador.
● Realice las preguntas necesarias al/la docente.
Introducción a la programación en JavaScript
¡Muchas gracias!
¡Sigamos trabajando!
Introducción a la programación en JavaScript