De principiante a fullstack en Nucba: mi experiencia

Descubre cómo pasé de principiante a programador fullstack en el bootcamp de programación Nucba con mi experiencia personal en la enseñanza de JavaScript.

13 de octubre de 2022

Tips / Consejos / Javascript

👉 Nota: Documentación Javascript

Introducción a JS

🔅 ¿Qué es Javascripts?

Como una breve introducción, ya que esto no es un tutorial ni una documentación. __Javascript__ es
lo que le da __"vida"__ a las páginas.

🔅 ¿Cómo incluirlo en una web?

Incluído dentro de un elemento html:

<!-- En este caso al hacer click sobre el texto "Hola Mundo,
   Vamos a ver una alerta que dice "hola".               -->
<h1 onClick="alert('hola')">Hola Mundo...</h1>

Incluído dentro de la etiqueta scripts

<!-- En esta situación nos saldría una alerta en el navegador que diría "hola". -->
<body>
    <script>
        alert('hola')
    </script>
</body>

Incluído en un archivo externo (La mejor forma de incluir javascript).

<!-- De esta forma estamos linkeando al archivo index.js
     Dentro de la carpeta del proyecto               -->
<script src="./index.js"></script>

/* index.js */
alert("hola");

Fundamentos de Javascript

🔅 Variables:

Una variable es un "almacen" con un nombre, donde se guardan ciertos datos. En Javascript utilizamos __let__ y __const__. 
let message; // Let define la variable "message"
message = 'Hola mundo'; // la variable "message" muestra 'Hola mundo'

console.log(message); // Con console.log podemos ver en la consola 'Hola mundo'

Otra forma más óptima de escribir el mismo código es:

let message = 'Hola mundo';

console.log(message) // Muestra un "Hola mundo"
  • Declarar Varias Variables:

Podemos declarar variables separándolas con una ',':

let user = 'linuxin', age = 28, message = 'Hola mundo';

🔅 Constantes:

Las constantes son variables inmutables.

const myBirthday = '1994-09-08'

myBirthday = '1996-10-22'; // ¡error, no se puede reasignar la constante!

Interacciones

🔅 alert:

alert('hola mundo') // muestra una alerta "hola mundo" en el navegador

🔅 prompt:

let age = prompt('¿Cuántos años tengo?') // Pregunta en el navegador cuántos años tengo.

console.log(`¡Tengo ${age} años!`) // muestra la cantidad de años.

🔅 confirm:

let isNucbaBoss = confirm('Es NUCBA el jefe?')

console.log(isNucbaBoss) // true si se pulsa OK

Condicionales

🔅 if:

En el siguiente ejemplo, declaramos dos números. 420 cómo 'numberReal' y 520 como 'numberFalse'. 
let numberReal = 420
let numberFalse = 520

// Si numberFalse es mayor o igual a 420, devuelve 420 klk.
if(numberReal >= numberFalse) {
    console.log('420 klk')
}
// Si es mayor devuelve 'no es elegante este número'.
else{
    console.log('No es elegante este número')
}

🔅 Operador ternario '?'

let accessAllowed;
let age = prompt('¿Qué edad tenés?', '');

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

El operador ternario permite ejecutar esto mismo de manera más sencilla.

let accessAllowed = age > 18 ? true : false

Bucles | For y While

Los bucles son para repetir acciones.

🔅 While (mientras):

let i = 0 // Declaramos una variable.
while (i < 3) {
    console.log(i) // muestra 0, luego 1, luego 2..
    i++
}

🔅 For:

For es más complejo que While, pero es el más usado. 

// Declaramos la variable personas...
let personas = ['Santiago', 'Juan', 'David', 'Angel', 'Franco', 'Camila']

// Y con for recorremos los nombres de personas
// hasta la última letra. (Santiago tiene 7 carácteres (0-7))
for (let index = 0; index < personas.length; index++) {
    personas[index] == 'Santiago'
    'Santiago'.length - 1 == 7
    'Santiago'[7] == 'o'

    // Si la última letra es la L. Entonces para de contar.
    if (personas[index][personas[index].length - 1] == 'l') {
        break
    }
    console.log('Hola ' + personas[index])
}