Pues has decidido sumarte al carro y aprender programación como el resto de los mortales, mi idea es hacer una introducción utilitaria, y vamos a empezar por el clásico de primeras preguntas de la programación.
Que lenguaje me pongo a aprender?
JavaScript, ya puedes pasar a la siguiente pregunta.
Quieres mas detalles no? Pues mira, asumo que tienes chrome en tu maquina, pues Chrome te permite tirar Javascript. Cualquier otra cosa ya estamos hablando de instalarte algo, pero mas allá de eso estamos hablando de que si lenguaje estructurado o orientado a objetos (Luego te explico que significa todo esto). Javascript es un remezcle de todo, tiene estructurado, tiene eventos, tiene clases y objetos y tiene funcional. Insisto, luego te explico que significa todo esto.
Tambien explicare cual es la diferencia entre compilado y interpretado, pero a su ritmo.
String
String in JavaScript
Template Literals in JavaScript
Haciendo el hello world
Vete a tu chrome, dale al F12 y vete a consola, y en la consola pon:
console.log("hola mundo!");
console.log es literalmente la función que imprime a consola, y felicidades, ya has ejecutado codigo, ahora vamos a hacer algo mas gracioso:
const elNota = { nombre: "Pans" };
console.log("Hola" + elNota.nombre + "!");
En este caso elNota pasa a ser un objeto con la propiedad nombre y el valor ese, los + son para unir cadenas.
Que son las cadenas y como ver el tipo de algo
Las cadenas de caracteres (String) son literalmente una sucesión de caracteres, un carácter en esencia es lo que sale de tu teclado, los emojis también son caracteres.
Para saber de que tipo es algo, JavaScript nos da un operador llamado typeof, vamos a tirar algo de codigo:
console.log(typeof "hola!");
console.log(typeof elNota);
console.log(typeof 2);
Como pasar el objeto a console.log
Como console.log es la tralla en Javascript, tambien le puedes pasar objetos a muerte y te permite explorarlos en chrome, para explicarle que no es una cadena separamos con ,
console.log("Hola ", elNota, "!")
Operators in JavaScript
typeof Operator in JavaScript
Las funciones
Posiblemente recuerdes las funciones de matematicas, en plan f(x) o f(x,y), olvida alguna de esas preconcepciones.
Una función es un trozo de codigo con nombre (no necesiramente) al que le metes unos parametros y saca una cosa o ninguna.
console.log es una función que viene con Javascript, pero tu puedes escribir tus propias funciones:
function comerSaladitos(numeroSaladitos) {
const nuevoNumeroDeSaladitos = numeroSaladitos - 1;
console.log("Tengo ", numeroSaladitos, " saladitos, me pimplo uno y me quedan ", nuevoNumeroDeSaladitos);
return nuevoNumeroDeSaladitos;
}
comerSaladitos(12);
comerSaladitos(8);
Las condiciones
Para ver si una condicion se da o no podemos usar el operador if, y eso nos lleva a los tipos booleanos, un tipo booleano es verdadero o falso. Vamos a hacer unas pruebas en la consola.
console.log(1 > 0);
console.log(typeof 1 > 0);
console.log(1 <= 0);
console.log(typeof 1 <= 0)
y con el operador if podemos dividir el comportamiento:
let edadDeLaPava = 12
if (edadDeLaPava >= 18) {
console.log("Viable")
} else {
console.log("Pedo alert!");
}
Ejercicio uno: Pesa mas que un pollo
Tu objetivo es completar esta función con este comportamiento: la funcion recibira como parametro el peso, si pesa mas que un pollo imprimira por consola "Me lo follo", en caso contrario llamara a la función meterse cosas por el culo con el peso partido por la mitad.
En cualquier caso la funcion devolvera un valor booleano que dice si pesa mas que un pollo:
function pesaMasQueUnPollo(pesoEntrada) {
//...
}
Arrays y bucles
Un array es una lista de cosas en algun orden. Cuando digo en algun orden digo que las cosas tienen un orden en la lista, no que siempre este ordenada, la sintaxis para los arrays es con corchete plano:
const listaDeBardaos = ["Pans", "Ale", "Kant", "Guiom"];
console.log("Tengo ", listaDeBardaos.length, " y el primer bardao es ", listaDeBardaos[0]);
Has visto este 0? es porque los arrays empiezan en la mayoria de idiomas por 0 y llegan hasta la longitud - 1.
Para manejarte con los arrays necesitas saber hacer bucles, y el primer bucle que vamos a ver el for.
El for tiene 3 campos, uno previo, una condición de continuación y un fin del bucle.
Da miedo, pero veras que al final siempre es la misma historia, es copiar y pegar las mismas condiciones para distintas listas.
for (let i = 0; i < listaDeBardaos.length; i++) {
console.log(listaDeBardaos, " es un sopla");
}
Sobre cagarla con el indice del array
vamos a cagarla a proposito para ver que pasa:
console.log("Tengo ", listaDeBardaos.length, " y el primer bardao es ", listaDeBardaos[listaDeBardaos.length]);
Ves que ha salido undefined? eso es porque no hay nada a lo que referirse, el comportamiento al hacer una cagada de este tipo depende del idioma, en javascript solo te devuelve undefined, en C que es lo que se suele usar en hardware te peta todo, y si lo lleva un controlador de avion te pegas una ostia o aterrizas con una ala manca.
Incidentalmente, otra historia relacionada con acceder fuera del rango de array, es la del HeartBleed, el fallo de seguridad que puso en panico a medio internet, y otro medio internet sigue siendo vulnerable.
HeartBleed explicado
Porque empiezan los arrays por 0 como animales
Al final un array se transforma en una serie de direcciones de memoria en tu RAM. En Javascript un array puede tener cualquier tipo de datos mezclado, pero tradicionalmente todos los elementos de un array deben de ser del mismo tipo, y ese tipo tiene un tamaño X en memoria.
De tal manera que cuando accedes al array el primer elemento es:
Dirección del array + 0, el segundo Dirección del array + 1 * X y asi sucesivamente.
Ejercicio 2
Sabiendo que a un string o cadena de caracteres lo puedes tratar como un array, vamos a hacer una funcion que imprima de una lista de cadenas de caracteres un console log por letra, por ejemplo, para una lista:
const lista = ["AB", "AC"];
unChorroCaracteres(lista);
debe imprimir A B A C en lineas distintas:
function unChorroCaracteres(lista) {
for () {
for () {
console.log();
}
}
}
unChorroDeCaracteres(listaDeBardaos);
Ejercicio 3
Recordaras de Mates las funciones de segundo grado, vamos a hacer una función que las resuelva:
function segundoGrado(a, b, c) {
//...
return { a: 1, b: 2};
}
Ejercicio 4:
Ordenar por fechas en formato Americano, los Americanos son monstruos que ponen las fechas en formato Mes-Dia-Año, eso es un coñazo de ordenar, así que te toca decir si una fecha es mayor que otra, vienen en formato String.
function esFechaMayorQue(fechaA, fechaB) {
return true;
}
esFechaMayorQue("02-02-2023", "02-02-2023"); // falso
esFechaMayorQue("03-02-2023", "02-02-2023"); // verdareo
esFechaMayorQue("02-03-2023", "02-02-2023"); // verdadero
esFechaMayorQue("02-02-2024", "02-02-2023"); // verdadero
esFechaMayorQue("02-02-2023", "03-02-2023"); // falso
esFechaMayorQue("02-02-2023", "02-03-2023"); // falso
esFechaMayorQue("02-02-2023", "02-02-2024"); // falso
Fin del capitulo 1
Data Types in JavaScript
Functions in JavaScript
[[The this Keyword in JavaScript]]
Conditional Statements in JavaScript
Loops in JavaScript
Control Structures in JavaScript
Capitulo 2: Clases, objetos y prototipos
Prototypes in Programming
Prototypes in JavaScript
Classes in JavaScript
Classes in Programming
Classes in Python
Prototypes vs Classes
Syntactic Sugar
Arrays in JavaScript
Objects in JavaScript
Strings in JavaScript
Capitulo 3: Control de errores
[[try, catch, and finally in JavaScript]]
Why Do People Rarely Use Custom Errors
Capitulo 4: Asincronia
Callbacks in JavaScript
Promises in JavaScript
Generators in JavaScript
[[async and await in JavaScript]]
Event Loop in JavaScript
Capitulo 5: ES6
- Arrow functions.
- Template literals.
- Destructuring.
- Spread and rest operators.
Capitulo 6: DOM y como manejar las web
Seleccionando y maniuplando elementos
Bookmarklets
Capitulo 7: API
Fetch
Axios
JSON data
Binary data
Authentication
Capitulo 8: Testing
Testing with Jest
mocking & stubbing
Selenium & cypress
Capitulo 9: Modulos y webpackers
ES6 modules
CommonJS modules
Webpack, Rollup? y otros bundlers
Capitulo 10: React y componentes