Introducción a JavaScript

1

¿Por qué aprender JavaScript?

2

¡Hola Mundo! en Mac

3

¡Hola Mundo! en Windows

4

Anatomía de una variable

5

Tipos de datos en JavaScript

6

Creación de strings

7

Operadores aritméticos

8

Conversión de tipos: Type Casting y Coerción

9

Conversión de tipos explícita e implícita

Estructuras de Control y Lógica

10

Operadores de comparación

11

Operadores lógicos

12

Ejecución condicional: if

13

Ejercicio: Adivina el número

14

Ejecución condicional: switch

15

Loop: for

16

Loop: for of

17

Loop: for in

18

Loop: while

19

Loop: do while

Funciones y This

20

Anatomía de una función

21

Funciones vs Métodos

22

Funciones puras e impuras

23

Arrow function y enlace léxico

24

Contextos de ejecución y scope chain

25

¿Qué es Closure?

26

Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?

Manipulación de Arrays

27

Introducción a Arrays

28

Mutabilidad e inmutabilidad de Arrays

29

Modificación básica del final con push( ), pop( )

30

Iteración con map( ) y forEach( )

31

Filtrado y reducción con filter( ) y reduce( )

32

Búsqueda de elementos con find( ) y findIndex( )

33

Crear copias con slice( )

34

Spread operator: casos de uso

Programación Orientada a Objetos

35

Anatomía de un Objeto

36

Trabajando con objetos en JavaScript

37

Función constructora

38

¿Qué es una clase?

39

Prototipos y herencias

40

Herencia en la práctica

41

Prototipos en la práctica

42

this en JavaScript

43

Proyecto: Crea una red social

44

Proyecto: Crea una red social parte 2

Asincronía en JavaScript

45

¿Cómo funciona el JavaScript Engine?

46

Promesas en JavaScript

47

Usando Async y await en JavaScript

48

For await of

49

¿Cómo funciona la web?

50

¿Cómo funciona HTTP?

51

Método GET en JavaScript

52

Método POST en JavaScript

53

Método DELETE en JavaScript

54

Importancia del id en el método DELETE

55

ECMAScript 6 y tus siguientes pasos

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
13 Hrs
27 Min
24 Seg

Ejecución condicional: if

12/55
Resources

How do conditional structures work in JavaScript?

When programming, one of the fundamental concepts to master are conditional structures, also known as control structures. These structures allow us to decide which part of our code will be executed based on certain conditions. In JavaScript, the most basic conditional structure is the if statement, which allows us to execute a block of code only if a certain condition is true.

To use the if structure, operators must be used to help us create logical conditions that can be evaluated as true or false. These operators can be comparison operators such as ==, ===, !=, !== or relation operators such as <, >, <=, >=.

How is the if structure used?

Here we explain how the if structure works with practical examples:

let name = "Diego";
if (name === "Diego") { console.log("Hello Diego");}

In this example, we have defined a variable name and compared it using the strict comparison operator ===. If name equals "Diego", then the code block inside the if will be executed.

What is the else and how does it work?

The else is used when we want a different code block to be executed if the if condition is not met. It serves as a default instruction in case none of the above conditions are true.

let name = "Nico";
if (name === "Diego") { console.log("Hello Diego");} else { console.log("Name not found");}

In the above example, if the variable name is not equal to "Diego", the code block inside the else will be executed, displaying "Name not found".

How to implement else if for multiple conditions?

To evaluate multiple conditions, you can extend the else if structure. This allows us to test multiple conditions in series.

let name = "Nico";
if (name === "Diego") { console.log("Hello Diego");} else if (name === "Nico") { console.log("Hello Nico");} else { console.log("Name not found");}

Here, it first checks if name is equal to "Diego". If it is not, the next else if condition for "Nico" is checked, and in case none of the above conditions is true, the block inside the else is executed.

Why using conditional structures is crucial in programming?

Conditional structures are essential because they allow us to make decisions within the code based on dynamic conditions. They facilitate the creation of more interactive and adaptive programs, where the execution flow can vary dramatically depending on the input data. Thanks to the ability to evaluate conditions, we can create robust and flexible code that responds according to different scenarios, which is crucial for application development and process automation.

In addition, it is important to mention that, by using these structures correctly, we can make our code more readable and reduce the possibility of logical errors, thus improving maintainability and long-term code evolution.

Never stop exploring and learning about these fundamental functions in programming! Conditional structures are the basis to start building more complex and detailed logic into your projects.

Contributions 38

Questions 1

Sort by:

Want to see more contributions, questions and answers from the community?

También se pueden escribir condiciones en una línea del siguiente modo: `7 == 7 ? 'verdadero' : 'falso'`
![](https://static.platzi.com/media/user_upload/La%20sentencia%20condicional%20if%20en%20JavaScript-077c02f8-3b39-43f4-8a1c-e37237e03ca8.jpg)
creo que esta bien la clase pero falto explicar lo de la extension de live server , y tambien la creación del archivo html, así como el comando para poner la estructura básica html, , alguien me puede como se puede poner de forma automatica esa estructura , como que recuerdo que hay un comando. saludos
este maestro cada dia me sorprende mas..., donde se supone que encuentre ese index que el puso ?
Formulario de inscripción utilizando condicionales ![]()![](https://static.platzi.com/media/user_upload/image-c7add945-23cf-4240-b820-ff9c54906390.jpg)
No sé por qué me da sensación como que hay clases que no he visto, de dónde se supone que ha salido con el index.html de repente?
Hice un ejercicio basado en los dos temas que vimos: Operadores condicionales, Operadores Lógicos y condicionales if, else if, else: ![](https://static.platzi.com/media/user_upload/OperadoresdeComparacion-Y-Logicos-3f201ef6-63a9-450c-9f68-84de400fb8da.jpg)Me cuentan el resultado que les dio! :D
/\*estructura de control if (si) else if (entonces) else (sino) if (let === algo){ codigo } else if{codigo}else {lo que tiene que ocurrir }\*/ let nombre = "Diego"; if (nombre === "Diego") { console.log("Hola Diego");} let nombre2 = "Nico"; if (nombre2 === "Diego") { console.log("Hola Diego"); } else if (nombre2 === "Nico"){ console.log("Hola Nico") }else { console.log ("Nombre no encontrado")}
Es como cuando pequeños, le pedias permiso a tus padres (¿Puedo salir a jugar al parque?) y por ejemplo te decian por condicion: "Si ( if ) tienes tu habitacion organizada >> puedes ir ✔️, sino ( else ) >> no puedes salir ❌" fin. Todo dependia de la condicion puesta. Espero ayude por 😃 si alguna duda.
Recomiendo profundizar en la creación de archivo de html entre otros detalles
## Condicion `if` La estructura de control `if` en JavaScript se utiliza para ejecutar un bloque de código solo si una condición específica es verdadera. \<aside> 🚨 Es una de las estructuras de control más fundamentales en la programación. \</aside> ### Sintaxis Básica `if (condición) {` ` // Código a ejecutar si la ` ` // condición es verdadera` `}` `let edad = 18;` `if (edad >= 18) {` ` console.log("Eres mayor de edad");` `}` En este ejemplo, la condición `edad >= 18` se evalúa como `true`, por lo tanto, se ejecuta el bloque de código dentro de las llaves `{}` y se imprime "Eres mayor de edad". ### if-else A veces, necesitamos ejecutar un bloque de código si la condición es falsa. Para esto, usamos `else`: `if (condición) {` ` // condición es verdadera` `} else {` ` // condición es falsa` `}` `let edad = 16;` `if (edad >= 18) {` ` console.log("Eres mayor de edad");` `} else {` ` console.log("Eres menor de edad");` `}` En este caso, la condición `edad >= 18` se evalúa como `false`, por lo que se ejecuta el bloque de código dentro de `else` y se imprime "Eres menor de edad". ### `if-else if-else` Para manejar múltiples condiciones, se pueden encadenar varias declaraciones `if` usando `else if`: `if (condición1) {` ` // Código a ejecutar si la condición1 es verdadera` `} else if (condición2) {` ` // Código a ejecutar si la condición2 es verdadera` `} else {` ` // Código a ejecutar si ninguna de las condiciones anteriores es verdadera` `}` `let nota = 85;` `if (nota >= 90) {` ` console.log("Calificación: A");` `} else if (nota >= 80) {` ` console.log("Calificación: B");` `} else if (nota >= 70) {` ` console.log("Calificación: C");` `} else if (nota >= 60) {` ` console.log("Calificación: D");` `} else {` ` console.log("Calificación: F");` `}` En este ejemplo, `nota` es 85, por lo que la primera condición `nota >= 90` es falsa. La segunda condición `nota >= 80` es verdadera, por lo que se ejecuta el bloque de código correspondiente y se imprime "Calificación: B". \<aside> 🚨 La estructura de control `if` es una herramienta fundamental en cualquier lenguaje de programación, permitiendo que el código tome decisiones y ejecute diferentes caminos en función de las condiciones evaluadas. \</aside>
```txt Les dejo este ejercicio para practicar /** * // Ejercicio de practica Crea un programa en JavaScript que verifique la edad de una persona y muestre un mensaje en la consola según su rango de edad: Si la edad es menor de 12, muestra "Eres un niño". Si la edad está entre 12 y 17, muestra "Eres un adolescente". Si la edad está entre 18 y 64, muestra "Eres un adulto". Si la edad es 65 o más, muestra "Eres un adulto mayor". */ ```
por que cambiaron la profe, a el no le logro entender
Viendo comentarios; haciendo un poquito de investigación y preguntándole a ChatGPT, aprendí que para que la consola del navegador se comporte de forma **dinámica** cada vez que editas y guardas tu archivo JS en VSC, es indispensable que debas tener primero un **archivo html**; vincularlo a tu archivo js como normalmente lo harías; y encender el **Live Server** desde tu archivo html. Un procedimiento quizá rutinario para muchos, pero yo lo desconocía.
En mi caso quise probar lo que el profe explico en la clase pasada y en codepen cree esto ![](https://static.platzi.com/media/user_upload/image-db57156b-36e1-4b42-8de6-a05fe06e2434.jpg)
Me parece que hay que profundizar un poco en varios aspectos que intervienen en el desarrollo de estas tematicas, como por ejemplo: por que se crea un archivo "index.html", generar la estructura del codigo html en el mismo archivo (que por cierto si escribes html5 este ya lo da por defecto), tambien como incluir la ruta del archivo js en el documento html, una explicacion de como instalar la extension "Live server" en VSC y como configurar el entorno para que se puedan ver los resultados en la consola del navegor. Hay varios estudiantes que no vienen empapados de esos aspectos basicos, pero que son demasiado importantes para seguir con el curso. Se supone que es un curso de los "Fundamentos de JS" donde se debe incluir lo anterior.
Este tipo de clases me hace revaluar el contenido de Platzi contra un video gratuito de YouTube, entiendo que es Fundamentos de JavaScript pero deberían dar ejemplos mas reales que solo poner la palabra "algo" o "código", a veces no comprendo como puedo desquitar lo que estoy pagando...
Cosas que no dijeron en la clase: 1. Recuerden que su Js debe estar conectado al HTML mediante \<script src ="estructuras-condicionales.js">\</script>```js <script src ="estructuras-condicionales.js"></script> ```2. Para tener la opción de live server deben descargar la extensión en VSC. Recuerden cerrar y abrir el editor despues de descargarlo. ![](https://static.platzi.com/media/user_upload/image-e8adc80c-40ac-4686-8d47-ac317f924c21.jpg) 1. Para escribir automaticamente la estructura del index .html es con “!” + tab
El plugin de VSO (Visual Studio Online) se refiere a una herramienta que facilita el desarrollo en entornos de Visual Studio. Para encontrarlo, asegúrate de que tienes instalado Visual Studio Code y busca en la sección de extensiones (o plugins) de la aplicación. Si no lo encuentras, verifica que tu conexión a internet esté activa y que estás buscando en el marketplace correcto. Si continúas sin poder encontrarlo, puede ser útil revisar la documentación oficial de Microsoft para guiarte.
Para acceder a la consola de navegación en tu navegador, sigue estos pasos: 1. **Google Chrome**: Presiona `Ctrl + Shift + J` (Windows) o `Command + Option + J` (Mac). 2. **Firefox**: Presiona `Ctrl + Shift + K` (Windows) o `Command + Option + K` (Mac). 3. **Edge**: Presiona `F12` o `Ctrl + Shift + I`. 4. **Safari**: Activa las herramientas de desarrollo en preferencias, luego usa `Command + Option + C`. Esto te permitirá ejecutar JavaScript y ver los logs de tu código.
¿En qué momento se creó ese index.html? ¿viene de otro curso? ¿Hay algún paso que se pueda explicar porque en este momento es como, escribes una validación y con tu código de programador que todos tenemos al nacer ya puedes sacar tu certificado :'(
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202025-01-21%20182413-1895c148-4e39-4087-a799-be6ef3581ae5.jpg)
Hola profesor, perdone la molestia. En el minuto 04:05 menciona un servidor dentro de un archivo Index, pero a mi no me aparecen esas opciones. Gracias de antemano por la ayuda! ![](https://static.platzi.com/media/user_upload/image-62ba2611-ca2c-4c31-ac52-5e662ab7bf74.jpg)
```js let r = "rojo" let g = "verde" let b = "azul" if (r === "rojo" && g === "verde" && b === "azul") { console.log("Los colores RGB funcionan correctamente") } else { console.log("Hubo un error al acceder los colores RGB") } ```let r = "rojo"let g = "verde"let b = "azul" if (r === "rojo" && g === "verde" && b === "azul") {  console.log("Los colores RGB funcionan correctamente")} else {  console.log("Hubo un error al acceder los colores RGB")}
let nombres = "carlo";if (nombres === "carlos") {  console.log("hola " + nombres)}else if (nombres  = "carlo") {  console.log("hola como estas  " + nombres)}
## Estructuras de Control en Programación * Las estructuras de control permiten dirigir el flujo de ejecución del código en función de condiciones específicas. * La estructura básica de control es `if`, que permite ejecutar un bloque de código si se cumple una condición. ## Estructura de Control IF * La estructura `if` se utiliza para ejecutar código condicionalmente. * Sintaxis básica:if (condición) { // código a ejecutar si la condición es verdadera } else { // código a ejecutar si la condición es falsa } ## Uso de Operadores en la Estructura IF * Los operadores se utilizan dentro de la condición `if` para realizar comparaciones. * Ejemplo de operadores: `==` (igual a), `===` (estrictamente igual a), `!=` (diferente de), `!==` (estrictamente diferente de). * Los operadores permiten comparar valores y tipos de datos para decidir el flujo del programa. ## Ejemplo Práctico con IF y ELSE * Definición de una variable:let nombre = "Diego"; * Uso de la estructura `if-else`:if (nombre === "Diego") { console.log("Hola Diego"); } else { console.log("Nombre no encontrado"); } * En este ejemplo, si `nombre` es igual a `"Diego"`, se imprime "Hola Diego". Si no, se imprime "Nombre no encontrado". ## Uso de ELSE IF para Múltiples Condiciones * La estructura `else if` permite manejar múltiples condiciones:if (nombre === "Diego") { console.log("Hola Diego"); } else if (nombre === "Nico") { console.log("Hola Nico"); } else { console.log("Nombre no encontrado"); } * En este ejemplo, se manejan tres posibles resultados dependiendo del valor de `nombre`. ## Ejemplo Completo en la Consola del Navegador 1. Definición de variables y condiciones:let nombre = "Diego"; if (nombre === "Diego") { console.log("Hola Diego"); } else if (nombre === "Nico") { console.log("Hola Nico"); } else { console.log("Nombre no encontrado"); } 2. Ejecución en la consola del navegador: * Abrir la consola en el navegador. * Copiar y pegar el código en la consola. * Ver el resultado en función del valor de la variable `nombre`. ## Próximos pasos * Practicar con diferentes valores y condiciones para entender mejor el uso de `if`, `else if` y `else`. * Aplicar estos conocimientos en proyectos y ejercicios para fortalecer la comprensión de estructuras de control. * Explorar cursos adicionales en plataformas como Platzi para mejorar habilidades en programación y desarrollo de software.
El error que mencionas indica que el archivo `juego.js` no se está encontrando en la ruta especificada, lo que genera un error 404. Además, el tipo MIME de la respuesta es `text/html`, lo que significa que el servidor podría estar sirviendo una página HTML en vez del archivo JavaScript. Aquí te dejo algunos pasos para solucionar el problema: 1. **Verifica la ruta**: Asegúrate de que la ruta `ciclos/ejecucionCondicional/if/juego.js` sea correcta y que el archivo `juego.js` realmente esté en esa ubicación. 2. **Verifica el servidor**: Asegúrate de que estás ejecutando un servidor local que esté apuntando al directorio correcto donde está tu archivo `index.html`. Si estás usando VS Code, asegúrate de que la extensión de Live Server esté activada y que estés abriendo el archivo correcto. 3. **MIME type**: Si el archivo se encuentra, asegúrate de que el servidor esté configurado para servir archivos JavaScript con el tipo MIME correcto (`application/javascript`). 4. **Consola del navegador**: Revisa la consola del navegador para ver si hay otros errores que puedan dar más pistas sobre el problema. Recuerda seguir practicando JavaScript en Platzi para mejorar tus habilidades.
Tuve, un problema porque no puedo ejecutar el archivo de js dentro de html no se si tienen el correcto codigo acerca de como hacerlo.
```js let prompt = require("prompt-sync")(); let letra = prompt("ingresa una letra: ").toLowerCase(); if ( letra == "a" || letra == "e" || letra == "i" || letra == "o" || letra == "u" ) { console.log("La letra " + letra + " es una vocal"); } else { console.log("La letra " + letra + " no es una vocal"); } ```let prompt = require("prompt-sync")(); let letra = prompt("ingresa una letra: ").toLowerCase(); if ( letra == "a" || letra == "e" || letra == "i" || letra == "o" || letra == "u" ) { console.log("La letra " + letra + " es una vocal"); } else { console.log("La letra " + letra + " no es una vocal"); }
```txt Adunto mi participación :) ``` ```js const prompt = require("prompt-sync")({sigint:true}); let respuesta = 'true' while(respuesta){ let numero = prompt("ingrese un numero: ") numero = Number(numero) if(numero <= 0){ console.log("el "+ numero +" es negativo: ") }else if(numero >= 0 ) { console.log("el "+ numero +" es positivo") }else{ console.log("no se reconoce la acccion") } let continuar = prompt("desea realizar otra operacion? Si/No: ").toLowerCase(); if(continuar != "si" && continuar != "si") { respuesta = 'false'; console.log("proceso finalizado") } else{ console.clear } } ```
Muy interesante el desarrollo de la ejecución condicional con IF, acá les comparto mi ejercicio, para afianzar conocimientos: ![](https://static.platzi.com/media/user_upload/image-ac9a9695-9659-46a1-9157-9bb496957094.jpg)
if
![](https://static.platzi.com/media/user_upload/image-002f0a3b-9440-4892-b0c2-a541c50788de.jpg) Mi ejercicio sobre el tema; si no le pongo valor a edad el no va a reconocer ninguna edad.
![](https://static.platzi.com/media/user_upload/image-80468dc0-a71c-4f4c-96fb-d1bf2945a1d0.jpg)
![](https://i.imgur.com/60aEnqR.png)
¿Hy que ver otra clase o curso antes de esta? Soy MUY novato de JS y me perdí con ese index.html
La ejecución condicional con `if` en JavaScript permite ejecutar diferentes bloques de código basados en si una condición es verdadera o falsa. Aquí te explico cómo funciona, con ejemplos para ilustrar: ### Sintaxis básica de `if` if (condición) { // Bloque de código que se ejecuta si la condición es verdadera } ### Ejemplo básico let edad = 18; if (edad >= 18) { console.log("Eres un adulto."); } En este ejemplo, la condición `edad >= 18` se evalúa como verdadera, por lo que el mensaje "Eres un adulto." se imprimirá en la consola. ### `if-else` Para manejar la ejecución de código cuando la condición es falsa, se puede usar `else`. let edad = 16; if (edad >= 18) { console.log("Eres un adulto."); } else { console.log("Eres un menor de edad."); } Aquí, la condición `edad >= 18` es falsa, por lo que se ejecuta el bloque de código dentro de `else` y se imprimirá "Eres un menor de edad.". ### `if-else if-else` Cuando necesitas evaluar múltiples condiciones, puedes usar `else if`. let nota = 85; if (nota >= 90) { console.log("Excelente"); } else if (nota >= 75) { console.log("Bueno"); } else if (nota >= 50) { console.log("Aprobado"); } else { console.log("Reprobado"); } En este caso, se evalúan las condiciones en orden. Como `nota` es 85, el bloque de `else if (nota >= 75)` se ejecutará, imprimiendo "Bueno". ### Condiciones anidadas Puedes anidar declaraciones `if` dentro de otras declaraciones `if`. let edad = 20; let tieneLicencia = true; if (edad >= 18) { if (tieneLicencia) { console.log("Puedes conducir."); } else { console.log("Necesitas una licencia para conducir."); } } else { console.log("No tienes la edad suficiente para conducir."); } ### Operadores lógicos Para combinar múltiples condiciones, se pueden usar operadores lógicos como `&&` (y) y `||` (o). let edad = 20; let tieneLicencia = true; if (edad >= 18 && tieneLicencia) { console.log("Puedes conducir."); } else { console.log("No puedes conducir."); } Aquí, ambas condiciones deben ser verdaderas para que se ejecute el bloque de código que imprime "Puedes conducir.". ### Operador ternario El operador ternario es una forma más compacta de escribir una condición `if-else`. let edad = 18; let mensaje = (edad >= 18) ? "Eres un adulto." : "Eres un menor de edad."; console.log(mensaje); En este ejemplo, `(edad >= 18) ? "Eres un adulto." : "Eres un menor de edad."` evalúa la condición y asigna el valor correspondiente a la variable `mensaje`.
**MIS APUNTES:** ![](https://static.platzi.com/media/user_upload/image-d6bc026a-9751-4c5a-9672-2cfa55c5ebf5.jpg) ![](https://static.platzi.com/media/user_upload/image-a9747cf9-d545-4cda-8771-5a8f5c6b7067.jpg)