Aprende JavaScript en 10 minutos!

En este blog vas a aprender a programar en JavaScript en 10 minutos y vas a poder aplicar para trabajos en la NASA. 😂

Aunque no lo creas, yo veía videos al doble de la velocidad cuando estaba aprendiendo y sentía que vivía en The Matrix. Pero no aprendi mucho de esa manera, aprendí practicando. Así que realmente vamos a aprender Javascript en 10 minutos practicando.

Aprender a programar no es dificil, hay niños que saben programar. Lo dificil es hacer aplicaciones serias con millones de lineas de codigo, con buenas prácticas y con la posibilidad de escalabilidad en equipos grandes. Eso puede tomar meses o años y mucho mucho muchos dinero. Si quieres aprender a lo loco...aprende saltando de video en video en youtube, (es posible) pero si quieres aprender a programar ingenieria de nivel mundial, estudia en Academia X. a diferencia de ser autodidacta, no dejaré vacios en tu conocimiento y te dare lo que necesitas para que seas exitoso en este campo.

Antes de entrar en materia, ¿sabes porque quieres aprender JavaScript?

1. Javascript te permite manipular y procesar datos: por ejempro, sumar numeros o ver que video de Youtube me genero los mayores ingresos.
2. Javascript te permite dar instrucciones a un computador o a hardware: por ejemplo, animar imágenes para mi portafolio, o prender estas luces en mi teclado.
3. Javascript te permite enviar y oftener informacion de internet.

Javascript es un lenguaje de programación....te permite hacer lo que tu quieras...la imaginación es tu līmite. Y en donde se utiliza Javascript especificamente: en páginas web y en aplicaciones como Facebook, Apple, Amazon, Netflix, Google. Sin Javascript...estas compañías no exitirian. Javascript es el lenguaje de programación de la web y hoy en día esta en tu televisor y hasta en tu teléfono movil!

Javascript lo puedes usar en el lado del cliente (frontend) y en el lado del servidor (backend con nodejs).

Para este blog vamos a ver en el lado del cliente. Javascript es uno de los lenguajes mas accesibles y lo único que necesitas es un navnavegador. Yo utilizo Chrome.

Da un click derecho en esta página en Chrome, abre el inspector, y vayamos a la consola ...ya veo que te estas sintiendo todo un hacker! 👨‍💻

Lo primero que quiero hacer es escribir tipos de datos.

TIPOS DE DATOS

Empecemos con texto. Para esto pongo el texto entre comillas: 

"texto"

Quiero escribir un numero. Simplemente pongo el numero.

33

Quiero escribir verdadero o falsos. verdadero que es true y falso que es false. Este tipo de dato se llama buleano.

true

false

Quiero escribir un valor no definitdo. Uso undefined.

undefined

Quiero escribir un valor que si es definitdo pero es nulo. Escribo null

null

Excelente! Pero que hago con todos estos datos primitivos. Pueddo imprimirlos en la consola con console.log(), puedo dar una alerta con alert(). Puedo renderizar los en mi pagina web con document.write

console.log("texto");

alert("texto");

document.write("texto");

Y si estos valores son primitivos, hay otros que no sean primitivos?

si por ejempro una lista. Abro corchetes y puedo crear una lista de numeros separados por una coma

[1,2,3,4,5,6]

o puedo crear un objeto. Es como un diccionario. Abro allabes y pongo la propuedad por ejemplo la ciudad del seattle, dos puntos, y el valor de esa propiedad que quiero que seat el codigo de la ciudad. 

{ Seattle: "SEA" }

Y que pasa si quiero guardar estos valores para usarlos despues? Para esto utilizao variables.

VARIABLES 

Digamos que quiero guardar un numero de telefono. Escribo let pongo espacio pongo un nombre para mi variable, la voy a llamar telefono pongo espacio, pongo = y pongo mi dato. Termino la oracion con punto y coma.

let telf = "406-234 2342";

En este caso voy a guardar este numero en forma de texto porque quiero guardar los simbolos tambien. Esto lo guardaria como numero si es que no me importan los simbolos y quiero hacer operaciones matematicas. 

let telf = 4062342342;

Hablando de matematicas. Necesito las matematicas para ser un buen programador...la respuesta obvio que no! Ahora quiero utilizar este texto voy a llamar la alerta otra vez pero en lugar de darle el valor directamente, le voy a pasar la variable. Funciona exactamente igual y puedo seguir utilizando la variable en el futuro.

alert(telf);

Javascript tambien tiene operadoes.

OPERADORES

Puedo hacer operaciones numericas

Puedo sumar 

1 + 1

Puedo restar

1 - 1

Puedo dividir

10 / 2

Puedo multiplicar

10 * 2

Para que te sirve esto. Un ejemplo de uso es una empresa de inpuestos en los USA que se llama Turbotax y ellos hacen muchas operaciones para calcular tus impuestos. Tambien tenemos operadores comparativos que nos pueden decir si un valor es igual a otro, por ejemplo:

4 == 4

es verdadero

4 == "4"

es verdadero

4 === "4"

es falso

Tambien tenemos operadores logicos:

true && true

true && falso

falso && true

falso && falso

Solo cuando los 2 valores son verdaderos obtengo verdadero. Esto lo aprendiste en tus clases de logica en la escuela. Y comparar o en donde solo es necesario tener uno de los valores como verdadero, podemos obtener verdadero

true || true

true || falso

falso || true

falso || falso

Y de que me sireve tanto buleano? Esto te va a ser útil cuando trabajes con condicionales.

CONDICIONALES

Quiero saber si mi usuario esta autorizado para ver mi pagina web. Si mi usuario esta autorizado para ver la pagina, muestro la página. si mi usuario NO esta autorizado para ver la página, llamo una alerta. Cómo escribo esot en código?

let autorizado = true;

if (autorizado) {

   document.write = 'Bienvenido';

} else {

   alert('No estás autorizado');

}

Y asi puede utilizar esta lógica.

if (este tas disfrutando de este blog) {

   console.log("lee otro"); 

} else if (si es que te esta encantando) {

   console.log("te invito a comprar mi bootcamp! 😅");

} 

Ahora vamos a crear pequenos bloques de codigo que podemos correr cuando deseemos. Estos se llaman funciones.

FUNCIONES

Si quiero crear codigo para sumar 2 numeros puedo crear una función:

function sumar(a,b) {

   return a + b;

}

sumar(1,2);

sumar(5,7);

Como puedes ver las funciones nos permiten pasar valores dinámicamente lo que las hace reutillizables para diferentes valores. Ahora te das cuenta que alert() era una función.

Si deseo realizar operaciones en muchisimos datos, esto puede ser un dolor de cabeza escribirlo manualmente. Para esto uso los bucles.

BUCLES

Los bucles nos permiten trabajar con listas de elementos ordenados. En este caso puedo supar 10 a cada elemento con tan solo unas pocas líneas:

let lista = [1,2,3,4,5,6,7,8,9];

for (elemento of list) {

   let suma = sumar(elemento, 10);

   console.log(suma);

}

Imaginate si trabajas con millones de datos puedes procesar codigo para cada uno de esos datos increiblemente rápido.

Otro tipo de blucle es el bucle while:

let i = 0;

while (true) {

   console.log(i);

   i++;

}

Esto va a  imprimir para siempre!!!! hazte un favor y no corras este código porque nunca va a terminar!

Hay muchos tipos de bucles y cada uno se usa para situaciones únicas. Este video es para principiantes pero en mis cursos voy a detalle y con ejemplos por cada uno de ellos. Ahora vamoa a entrar a la parte mas escalofriante de JavaScript...la programacion orientada a obetos.

PROGRAMACION ORIENTADA A OBJETOS

¿Recuerdas este tipo de dato que se llama objeto y es como un diccionario? Este tipo de datos es muy poderoso y es el corazón de javascript. De hecho en javascript casi todo es un objeto.

Por ejemplo, console.log() es un objeto y lo podríamos sobreescribir:

let console = {

   log: function imprimir() {

      document.write = "Dañaste console.log()";

   }

};

console.log("asdf");

Podemos crear fabricas de objetos. Estos se llaman clases! Por ejemplo, tengo un perro, un gato, y un leon...todos son animales.

class Animal {

   constructor(nombre, sonido) {

      this.nombre = nombre;

      this.sonido = sonido;

   }

   hacerSonido() {

      console.log("Soy un " + this.nombre + "y hago " + this.sonido)

   }

}

let perro = new Animal("perro", "woof");

let gato = new Animal("gato", "miau");

let leon = new Animal("leon", "grrr");

perro.hacerSonido();

perro.hacerSonido();

perro.hacerSonido();

IMPORTAR Y EXPORTAR

En proyectos grades de javascript vas a trabajar con cientos o miles de archivos y vas a guardar tu código en archivos con la extension js. También vas a poder importar y exportar código que se puede utilizar en diferentes archivos. Así se crean las librerías de código y tienes que aprender los métodos que vienen en javascript.

Por ejemplo hay metodos para cambiar un texto a mayúscula.

"texto".toUpperCase();

Hay metodos para transformar un numero con decimales a un numero entero 

2.23423.toFixed();

Hay métodos para remover el último elemento de una lista:

[1,2,3,4].pop();

Y todo esto no se puede aprender en 10 minutos. Este blog es para principiantes y para aprender bien necesitas crear proyectos. Yo llevo años practicando, he trabajo en proyectos para Nintendo, Google, y soy Ingeniero en Amazon y todavía tengo que ir a hojas de trucos. Y está bien! La idea es utilizar estos conocimientos para crear proyectos increibles.

Gracias por leer este blog. Solo hemos topado la punta del iceberg!