C2 - JavaScript
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
Variables
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
Desenvolupador Web Full Stack amb React - C2-JavaScript
By mariogl
Desenvolupador Web Full Stack amb React - C2-JavaScript
Diapositivas para el curso Desenvolupador Web Full Stack amb React, del 2 de febrero al 27 de abril de 2021 en Barcelona. Módulo C2 - JavaScript
- 390