Full Stack amb React
Full Stack amb React
Full Stack amb React
Full Stack amb React
1995
Netscape
Manipular el DOM
Java
Mocha -> LiveScript -> JavaScript
Historia de JavaScript
Full Stack amb React
Full Stack amb React
Lenguaje de scripting
Sirve para:
manipular el DOM
responder a acciones del usuario
comunicarse con APIs
¿Qué es JS?
Full Stack amb React
Full Stack amb React
Conceptos iniciales
Interpretado y ejecutado en el navegador
Cada navegador programa su propio motor de JS
Estandarización: ECMAScript
La versión ES6 o ES2015
Transpiladores: Babel, TypeScript
Full Stack amb React
Full Stack amb React
La consola del navegador
Breakpoints
Debug
Full Stack amb React
Full Stack amb React
Full Stack amb React
Full Stack amb React
Variables:
let
Constantes:
const
Declaración
Full Stack amb React
Full Stack amb React
Tipado dinámico y débil
Tipo number
Tipo string
Template literals
Tipo boolean
Arrays
Objetos
Tipo null
Tipo undefined
Valores y referencias
let nombre = 'Antonio';
let cuadrado = function(x) {
return x * x;
}
let n = Math.floor(Math.random() * 10);
let saludo1 = 'Hola, ' + nombre + '. El cuadrado de ' + n + ' es ' + cuadrado(n) + '.';
let saludo2 = `Hola, ${nombre}. El cuadrado de ${n} es ${cuadrado(n)}.`;
Tipos
Full Stack amb React
Full Stack amb React
Ámbitos
Ámbito global
Jerarquías de ámbitos
Full Stack amb React
Full Stack amb React
Números
Métodos:
toFixed([digitos])
toString()
Funciones globales:
Number(valor)
Full Stack amb React
Full Stack amb React
Números
Métodos del objeto Math:
floor(n)
ceil(n)
round(n)
trunc(n)
max(n1, [n2], [n3]...) / min(n1, [n2], [n3]...)
random()
// Número entero aleatorio entre 0 y 10
const n = Math.floor(Math.random() * 11);
Full Stack amb React
Full Stack amb React
Cadenas
Métodos:
toUpperCase(), toLowerCase()
charAt(posicion)
slice(posicionInicial, [posicionFinal])
split([separador], [limite])
includes(valor, [posicion])
replace(busqueda, sustitucion)
replaceAll(busqueda, sustitucion)
indexOf(busqueda, [posicion])
padStart(longitud, [relleno = ' '])
Full Stack amb React
Full Stack amb React
Operadores aritméticos
Suma ( + ), resta ( - ), multiplicación ( * ), división ( / )
Resto o módulo ( % )
Incremento ( ++ ) y decremento ( -- )
Exponente ( ** )
Full Stack amb React
Full Stack amb React
Operadores de asignación
Asignación ( = )
Asignación con suma ( += )
Asignación con resta ( -= )
Asignación con multiplicación ( *= )
Asignación con división ( /= )
Asignación con exponente ( **= )
Full Stack amb React
Full Stack amb React
Operadores de comparación
Igual ( == ) <-- no usar
No igual ( != ) <-- no usar
Igual estricto ( === )
No igual estricto ( !== )
Mayor ( > )
Mayor o igual ( >= )
Menor ( < )
Menor o igual ( <= )
Full Stack amb React
Full Stack amb React
Operadores lógicos
AND ( && )
OR ( || )
NOT ( ! )
Full Stack amb React
Full Stack amb React
Operadores de cadenas
Concatenación ( + )
Asignación con concatenación ( += )
Full Stack amb React
Full Stack amb React
Operador ternario
condición ? valor1 : valor2
Full Stack amb React
Full Stack amb React
Operador spread
Meter un array dentro de otro
Número variable de argumentos en una función
Pasar varios valores a una función
Copiar un array en otro
Copiar un objeto en otro
Mergear objeto con defaults
// function(a, b, c)
function sumar(a, b, c) {
console.log(a + b + c);
}
let nums = [1, 3, 6];
sumar(...nums);
// function(n parámetros)
function sumar(...nums) {
let suma = 0;
for (n of nums) {
suma += n;
}
console.log("La suma es " + suma);
}
let a = 3;
let b = 7;
let c = 8;
sumar(a, b, c);
// push y unshift
let nums1 = [1, 3, 6];
let nums2 = [0, 52, 15, 9];
nums1.push(...nums2);
console.log(nums1);
nums1.unshift(...nums2);
console.log(nums1);
// meter un array en medio de otro
let nums1 = [1, 3, 6];
let nums2 = [0, 52, 15, 9];
nums1.splice(1, 0, ...nums2);
console.log(nums1);
// copiar un array
let nums1 = [1, 3, 6];
let nums2 = [...nums1];
// copiar un objeto
let o1 = {
x: 3,
y: 5
}
let o2 = { ...o1 };
// mergear un objeto con defaults (ES2018)
let defaults = {
ancho: 100,
alto: 200,
color: "rojo"
}
let o1 = {
ancho: 200,
grosor: 10000
}
o1 = { ...defaults, ...o1 };
Full Stack amb React
Full Stack amb React
Estructuras condicionales
if
else / else if
if anidados
switch
let saludo;
if (hora > 6 && hora < 14) {
saludo = 'Buenos días';
} else if (hora < 21) {
saludo = 'Buenas tardes';
} else {
saludo = 'Buenas noches';
}
let comision;
switch (pago) {
case 'tpv':
comision = 1;
break;
case 'transferencia':
comision = 0.5;
break;
case 'contrarreembolso':
comision = 0;
break;
default:
comision = 0;
}
Full Stack amb React
Full Stack amb React
Bucles
for / for ... in / for ... of
while
forEach
let nombres = ["Patricia", "Zacarías", "Miguel", "Maite"];
for (let i in nombres) {
console.log(nombres[i]);
}
for (let nombre of nombres) {
console.log(nombre);
}
let nombre = "Antonio Jesús";
for (let c of nombre) {
console.log(c);
}
Full Stack amb React
Full Stack amb React
Funciones
Declaración
Parámetros
Llamada
Funciones como expresión
Ámbitos en las funciones
Función arrow
Full Stack amb React
Full Stack amb React
Arrays
Declaración
Tipos de arrays
Métodos y propiedades
length
push(elemento) / unshift(elemento)
pop() / shift()
indexOf(elemento, [posicion])
includes(elemento, [posicion])
some(callback(elemento))
find(callback(elemento))
findIndex(callback(elemento))
Full Stack amb React
Full Stack amb React
Arrays
Métodos y propiedades
join([separador = ','])
forEach(callback(elemento, [posicion]))
reverse()
slice(posicionInicial, [posicionFinal])
sort([funcionComparacion])
Iterando un array
Full Stack amb React
Full Stack amb React
Arrays
Métodos:
map
let nombres = ["juan", "luisa", "amparo", "arturo"];
let nombresMays = nombres.map(nombre => nombre.toUpperCase());
console.log(nombresMays);
Full Stack amb React
Full Stack amb React
Arrays
Métodos:
map
filter
let personas = [
{
nombre: "juan",
edad: 15
},
{
nombre: "luisa",
edad: 35
},
{
nombre: "amparo",
edad: 17
},
{
nombre: "arturo",
edad: 32
}
];
let mayoresEdad = personas.filter(persona => persona.edad >= 18);
console.log(mayoresEdad);
Full Stack amb React
Full Stack amb React
Arrays
Métodos:
map
filter
reduce
let nums = [2, 4, 10, 15, 12];
let suma = nums.reduce((x, y) => x + y);
let objs = [
{
x: 3,
y: 2
},
{
x: 8,
y: 10
},
{
x: 10,
y: 15
}
]
let sumaX = objs.reduce((acc, obj) => acc + obj.x, 0); // Método 1
let sumaX = objs.map(obj => obj.x).reduce((obj1, obj2) => obj1 + obj2); // Método 2
Full Stack amb React
Full Stack amb React
Arrays
Métodos:
map
filter
reduce
Encadenamiento
let notas = [
{
nombre: "juan",
nota: 6
},
{
nombre: "luisa",
nota: 8
},
{
nombre: "amparo",
nota: 4
},
{
nombre: "arturo",
nota: 3
}
];
let notasAprobados = notas.filter(n => n.nota >= 5).map(n => n.nota);
console.log(notasAprobados);
Full Stack amb React
Full Stack amb React
Arrays
El operador spread
Destructuring
Asignar desde un array
Intercambiar variables
function medidasMueble() {
// ...
return [100, 70, 20];
}
let [ancho, alto, profundo] = medidasMueble();
console.log(ancho, alto, profundo);
// 100, 70, 20
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b);
// 20, 10
Full Stack amb React
Full Stack amb React
Objetos
Declaración
Tipos de objetos
Iterando un objeto
const empleado = {
nombre: "Antonio",
apellidos: "González Díaz",
edad: 33
}
for (const [propiedad, valor] of Object.entries(empleado)) {
console.log(propiedad, valor);
}
Full Stack amb React
Full Stack amb React
Objetos
El operador spread
Destructuring
Asignar desde un objeto
Renombrar variables
Valores por defecto
Argumentos en las funciones
function getRGB(colorHex) {
// ...
return {
alias: 'deeppink',
red: 255,
green: 20,
blue: 147,
alpha: 0.8
}
}
let { red, green, blue } = getRGB("#ff1493");
console.log(red, green, blue);
// 255, 20, 147
let personas = [{
nombre: "Luis",
apellido: "Herrera",
edad: 23
},
{
nombre: "Marta",
apellido: "Nieto",
edad: 29
}];
for (let {nombre, edad} of personas) {
console.log(`Me llamo ${nombre} y tengo ${edad} años`);
}
// Me llamo Luis y tengo 23 años
// Me llamo Marta y tengo 29 años
let notas = {
mat: 8,
fis: 6,
dib: 5,
tec: 6
}
let { mat: matematicas, fis: fisica, dib: dibujo, tec: tecnologia } = notas;
console.log(matematicas, fisica, dibujo, tecnologia);
// 8, 6, 5, 6
let persona = {
nombre: "Luis",
edad: 23
}
let { nombre, edad, estado = "soltero" } = persona;
console.log(nombre, edad, estado);
// Luis, 23, soltero
function area({radio = 0, base = 0, altura = 0, tipo = 'circulo'} = {}) {
console.log(radio, base, altura, tipo);
}
area({ tipo: 'rectangulo', base: 10, altura: 20 });
// 0, 10, 20, "rectangulo"
area();
// 0, 0, 0, "circulo"
Full Stack amb React
Full Stack amb React
JSON
Mapeado con objetos de JS
Sintaxis del formato JSON
Tipos de datos
{
"peliculas": [
{
"id": 1,
"titulo": "Fantastic Mr. Fox",
"director": "Wes Anderson",
"anyo": 2009,
"cartel": "https://images-na.ssl-images-amazon.com/images/I/515cCzEhUIL.jpg",
"vista": false,
"valoracion": 0
},
{
"id": 2,
"titulo": "El ataque de los tomates asesinos",
"director": "John De Bello",
"anyo": 1978,
"cartel": "https://st-listas.20minutos.es/images/2007-09/164/3641_249px.jpg?1190728503",
"vista": false,
"valoracion": 0
},
{
"id": 3,
"titulo": "Alguien voló sobre el nido del cuco",
"director": "Milos Forman",
"anyo": 1975,
"cartel": "http://img.aullidos.com/imagenes/caratulas/alguien-volo-sobre-el-nido-del-cuco.jpg",
"vista": false,
"valoracion": 0
},
{
"id": 4,
"titulo": "Desafío total",
"director": "Paul Verhoeven",
"anyo": 1990,
"cartel": "https://www.elseptimoarte.net/carteles/desafio_total_3773.jpg",
"vista": false,
"valoracion": 0
},
{
"id": 5,
"titulo": "Seven (Se7en)",
"director": "David Fincher",
"anyo": 1995,
"cartel": "https://3.bp.blogspot.com/-NpcWr8ZfAs4/T9t6sER_SQI/AAAAAAAAMwk/5mGFR5R_8t8/s275/seven.jpg",
"vista": true,
"valoracion": 5
}
]
}
Full Stack amb React
Full Stack amb React
Clases
Clases
Propiedades y métodos
class A {
x;
y;
z;
constructor(z) {
this.x = 3;
this.y = 10;
this.z = z;
}
suma() {
return this.x + this.y + this.z;
}
}
let a = new A(20);
console.log(a.suma());
class A {
x = 3;
y = 10;
z;
constructor(z) {
this.z = z;
}
suma() {
return this.x + this.y + this.z;
}
}
let a = new A(20);
console.log(a.suma());
Full Stack amb React
Full Stack amb React
Clases
Clases
Propiedades y métodos
Getters y setters
class A {
constructor(z) {
this.x = 3;
this.y = 10;
this.z = z;
}
suma() {
return this.x + this.y + this.z;
}
set zeta(z) {
this.z = z * 2;
}
get zeta() {
return this.z / 2;
}
}
let a = new A(20);
a.zeta = 15;
console.log(a.zeta);
Full Stack amb React
Full Stack amb React
Clases
Clases
Propiedades y métodos
Getters y setters
Métodos estáticos
class A {
constructor(z) {
this.x = 3;
this.y = 10;
this.z = z;
}
static getPI() {
return 3.14159;
}
suma() {
return this.x + this.y + this.z;
}
set zeta(z) {
this.z = z * 2;
}
get zeta() {
return this.z / 2;
}
}
let a = new A(20);
a.zeta = 15;
console.log(a.zeta);
console.log(A.getPI());
Full Stack amb React
Full Stack amb React
Clases
Clases
Propiedades y métodos
Getters y setters
Métodos estáticos
Herencia con extends y super()
class A {
constructor(z) {
this.x = 3;
this.y = 10;
this.z = z;
}
static getPI() {
return 3.14159;
}
suma() {
return this.x + this.y + this.z;
}
set zeta(z) {
this.z = z * 2;
}
get zeta() {
return this.z / 2;
}
}
class B extends A {
constructor() {
super(100);
this.x = 20;
}
suma() {
return this.x + this.z;
}
resta() {
return this.x - this.z;
}
}
let b = new B();
console.log(b.suma());
console.log(b.resta());
Full Stack amb React
Full Stack amb React
Timers
setTimeout(callback, delay);
setInterval(callback, delay);
clearTimeout(timer);
clearInterval(timer);
Full Stack amb React
Full Stack amb React
Trabajando con fechas
El objeto Date
new Date()
new Date(timestamp)
new Date("2020-10-01")
new Date(2020, 11, 1);
Imprimir un formato legible:
fecha.toLocaleDateString()
fecha.toLocaleTimeString()
fecha.toLocaleString()
Full Stack amb React
Full Stack amb React
Trabajando con fechas
Getters:
fecha.getDate()
fecha.getDay()
fecha.getFullYear()
fecha.getMonth()
fecha.getHours()
fecha.getMinutes()
fecha.getSeconds()
fecha.getMilliseconds()
fecha.getTime()
Full Stack amb React
Full Stack amb React
Trabajando con fechas
La librería Luxon
El objeto DateTime:
DateTime.local()
DateTime.local(2020, 11, 30)
DateTime.fromISO("2020-11-30")
DateTime.fromMillis(timestamp)
Imprimir un formato legible:
fecha.toLocaleString()
fecha.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)
Full Stack amb React
Full Stack amb React
Trabajando con fechas
Getters:
fecha.year
fecha.month
fecha.day
fecha.weekday
fecha.minute
fecha.second
Full Stack amb React
Full Stack amb React
Trabajando con fechas
Cálculos:
fecha.plus({ days: 7 })
fecha.minus({ hours: 12, minutes: 30 })
fecha.endOf("month")
Full Stack amb React
Full Stack amb React
Trabajando con fechas
Comparaciones:
fecha1 < fecha2
fecha1.equals(fecha2)
fecha1.hasSame(fecha2, 'year')
Diferencias:
fecha2.diff(fecha1, 'days')
Validación:
fecha1.isValid
Full Stack amb React
Full Stack amb React
Trabajando con fechas
La clase Info:
Info.weekdays("narrow")
Info.months("long")
Elegir el idioma:
Settings.defaultLocale = "en";
Full Stack amb React
Full Stack amb React
Fetch - peticiones HTTP
Request:
Nos interesan las propiedades:
method
headers ('Content-Type': 'application/json')
body
Response:
Nos interesan las propiedades:
ok
status
body
Y el método:
json()
Full Stack amb React
Full Stack amb React
Fetch - peticiones HTTP
La función fetch()
Promesa
.then()
.catch()
Full Stack amb React
Full Stack amb React
Módulos
Archivos JS donde todo está encapsulado
Se comunican entre sí mediante import/export
Gestionar las dependencias mediante <script>
Mejor usar un gestor de módulos (webpack)
Exportar:
export const ...
export function ...
export default ...
import { elementos } from "modulo";
import elemento from "modulo";
Full Stack amb React
Full Stack amb React
Módulos