Latinas bootcamp 💜

JavaScript

Tipos de datos primitivos

Números
...-3, -2, -1, 0, 1, 2, 3...
0.1, 5.5, 10.88
Strings
" Hola "
' Angelito '
` Hola `
Booleanos
true

false
Valores vacíos
null

undefined

¿Qué puedo hacer con esto?

Sumar y restar:

                  10 + 2;
                  5 - 3;

Multiplicar y dividir:

                  10 * 2;
                  5 / 10;

Comparar números:

Escribir mensajes:

"Hey, mami, ¡soy desarrolladora!"

Concatenar mensajes:

"Hola" + " "  + "soy Angelito"

¿Cuántos años tengo sí nací en 1993?

2022 - 1993

Tu turno 🪅

Calcula cuántos años tiene tu familia junta:

Edad de mi mamá + mi edad + ...

Variables

Una variable es un contenedor para nuestros valores.

El nombre de una variable puede ser cualquier palabra, los números pueden formar parte del nombre siempre y cuando NO estén al principio (holi123 es válido). También pueden incluir el símbolo de pesitos $ o underscore _ pero ningún otro signo de puntiación.

No usar ñ, tildes, signos especiales ¿?, ¡!, &, %, #

Ejemplos

mi_nombre
mi_peli_favorita
$html
texto_1

¿Qué puedo hacer con esto?

Guardar información sobre mí:

mi_nombre = "Angelito";
mi_edad = 29;
mi_pais = "México";

Pedir datos

Podemos pedir datos usando
prompt("¿Cómo te llamas?") y guardando el resultado en una variable.

Guardar información sobre mí:

mi_nombre = prompt("¿Cómo te llamas?");
mi_edad = prompt("¿Cuántos años tienes?");
mi_pais = prompt("¿De dónde eres?");

"Hola, soy " + mi_nombre
+ " tengo " + mi_edad
+ " y soy de " + mi_pais

Condicionales

Los programas necesitan "tomar decisiones" y saber qué hacer en diferentes casos.

Para ello contamos con:

if
else if
else

if y else if EVALUAN sí una expresión es cierta (true) o false (false)

Se usan de la siguiente forma

  mi_numero_en_string = prompt("Elije un número");
  mi_numero = Number(mi_numero_en_string);

  if (mi_numero < 10) {
    console.log("Es un número pequeño");
  } else if (mi_numero < 100) {
    console.log("Es un número mediano");
  } else {
    console.log("Es un número grande");
  }

             ¿El número es menor de 10?
                         |
            ---------------------------
            |                         |
            SI                        NO
            |                         |
    "Es un número pequeño"            |
                                      |
                        ---------------
                        |
            ¿El número es menor de 100?
                        |
            ---------------------------
            |                         |
            SI                        NO
            |                         |
    "Es un número mediano"            |
                                      |
                                      |
                        "Es un número grande"

¿Qué puedo hacer con esto?

Guardar secretos:

mi_codigo = "1234";
mi_secreto = "Me gusta abrazar perritos";
codigo_secreto = prompt("Ingresa el código");

// console.log("codigo_secreto", codigo_secreto)
// console.log("mi_codigo", mi_codigo)
// console.log("Son iguales", codigo_secreto === mi_codigo)

if (codigo_secreto === mi_codigo) {
  console.log("Te contaré mi secreto");
  console.log(mi_secreto);
} else {
  console.log("No...")
}

Loops

while
for loops

Estructura de un while

          while( Aquí va una sentantencia verdadera o falsa ) {
            MIENTRAS la sentencia se verdadera
            se ejecutará este BLOQUE DE CÓDIGO
          }

Ejemplo

Nota: MIENTRAS codigo_secreto NO sea igual a mi_codigo seguiremos pidiendo el código correcto.

mi_codigo = "1234";
mi_secreto = "Me gusta abrazar perritos";
codigo_secreto = prompt("Ingresa el código");

while(codigo_secreto !== mi_codigo) {
  codigo_secreto = prompt("Error, intenta de nuevo");
}
console.log("Te contaré mi secreto");
console.log(mi_secreto);

A jugar 🪅

Adivina el número

numero_a_adivinar = parseInt(Math.random() * 20)

numero_del_usuario_string = prompt("Ingresa el número");
numero_del_usuario = Number(numero_del_usuario_string);

while(numero_del_usuario !== numero_a_adivinar) {
  if (numero_a_adivinar > numero_del_usuario) {
    alert("El número a adivinar es más grande")
  } else {
    alert("El número a adivinar es más pequeño")
  }
  numero_del_usuario_string = prompt("Error, intenta de nuevo");
  numero_del_usuario = Number(numero_del_usuario_string);
}

alert("Ganaste")

Declarar - asignar variables

3 formas de declarar una variable

var NO USAR
let Usar si creemos que el valor puede cambiar
const Es un valor fijo NUNCA PUEDE CAMBIAR

Al declarar una variable la "registramos" (como cuando nacemos y nos asignan un ID único)

Por esa razón NO podemos declarar dos veces la misma variable (dentro del mismos scope - bloque de código)

// Declarar (con let)
let mi_nombre;

// Reasignar valor (con let)
mi_nombre = "Angelito"

---------------------------

// Declarar y asignar (con let)
let mi_nombre = "Angelito"

---------------------------

// Declarar y asignar (con const)
const mi_nombre = "Angelito"

Operadores lógicos

AND → && Todos los valores/expresiones deben ser verdaderos.
OR → || Es verdadero sí uno de sus valores es verdadero.
NOT → ! Niega el valor -> Si es true pasa a false y viceversa.

const me_gustan_los_perritos = true
const me_gustan_las_galletas = true
const me_gustan_las_peliculas_de_terror = false

if (me_gustan_los_perritos && me_gustan_las_galletas) {
  console.log("Team perritos Y galletas")
}

if (me_gustan_las_peliculas_de_terror || me_gustan_las_galletas) {
  console.log("Noche de pelis")
}

if (!me_gustan_los_perritos && !me_gustan_las_galletas) {
  console.log("¿Todo bien?")
}

Objetos

Es un Tipo de dato de JS que guarda una colección LLAVE - VALOR para entidades/valores más complejos.

// Flujo normal
let angelito_nombre = "Angelito"
let angelito_edad = 29
let angelito_pais = "México"
let angelito_trabajo = "Dev"

let verito_nombre = "Verito"
let verito_edad = 35
let verito_pais = "Argentina"
let verito_trabajo = "QA"

// Con Objetos

let angelito = {
  nombre: "Angelito",
  edad: 29,
  pais: "México",
  trabajo: "Dev",
}

let verito = {
  nombre: "Verito",
  edad: 35,
  pais: "Argentina",
  trabajo: "Dev",
}

// Acceder/Usar valores
angelito.nombre -> "Angelito"
angelito["nombre"] -> "Angelito"

verito.edad -> 35

// Actualizar/Reasignar  valores

verito.trabajo = "Dev Senior"

JavaScript

Useful links