JavaScript

Introducción a JavaScript

JavaScript - JSON

Conceptos iniciales

Interpretado, compilado 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

JavaScript - JSON

Lado del cliente

Petición al servidor y ejecución en el cliente
La etiqueta <script>
El ámbito global y el orden de carga
Peticiones HTTP bloqueantes y no bloqueantes

JavaScript - JSON

Debug

La consola del navegador
Dev Tools

JavaScript - JSON

Entorno de desarrollo

JavaScript - JSON

Entorno de desarrollo

Editor: Visual Studio Code
- Extensiones
  - EditorConfig for VS Code
  - HTMLHint
  - ESLint (npx eslint --init)
- Configurar:
  - Format on Paste
  - Format on Save
  - "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
    }
Node.js y npm
Git

JavaScript - JSON

.editorconfig

# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = lf

JavaScript - JSON

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "airbnb-base",
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {
    quotes: ["error", "double"],
    "no-console": "off",
    "comma-dangle": "off",
    "arrow-parens": "off",
    "no-unused-vars": "off",
    "no-else-return": "off",
    "no-plusplus": "off",
    "prefer-destructuring": "off",
    "no-use-before-define": "off",
    "no-restricted-syntax": "off",
    "no-shadow": "off",
    "no-underscore-dangle": "off",
    "func-names": "off",
    "max-len": "off",
    "consistent-return": "off",
    "space-before-function-paren": "off",
    "no-param-reassign": "off",
    "no-restricted-globals": "off"
  }
};

JavaScript - JSON

package.json

{
    "name": "base",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {},
    "devDependencies": {
        "eslint": "^7.14.0",
        "eslint-config-airbnb-base": "^14.2.1",
        "eslint-plugin-import": "^2.22.1"
    }
}

JavaScript - JSON

Node.js y npm

JavaScript - JSON

npm

Repositorio de paquetes distribuibles
La carpeta node_modules
El archivo package.json (npm init)

JavaScript - JSON

Comandos npm

Instalar un paquete:
npm install paquete [--save-dev]
Instalar todas las dependencias registradas:
npm install
Ejecutar un paquete:
npx ejecutable

JavaScript - JSON

Configuración proxy

npm config set proxy http://username:password@host:port

npm config set https-proxy http://username:password@host:port

JavaScript - JSON

Variables

JavaScript - JSON

Declaración

Variables:
let
Constantes:
const

JavaScript - JSON

Tipos

Tipado dinámico y débil
Tipo number
Tipo string
- Template literals
Tipo boolean
Arrays
Objetos
Tipo null
Tipo undefined
Truthy y falsy
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)}.`;

JavaScript - JSON

Ámbitos

Ámbito global
Jerarquías de ámbitos

JavaScript - JSON

Números

Métodos:
- toFixed([digitos])
- toString()
Funciones globales:
- parseInt(cadena, base)
- parseFloat(cadena)

JavaScript - JSON

Números

Métodos del objeto Math:
- floor(n)
- ceil(n)
- round(n)
- trunc(n)
- max(n1, [n2], [n3]...) / min(n1, [n2], [n3]...)
- random()

JavaScript - JSON

// Número entero aleatorio entre 0 y 10
const n = Math.floor(Math.random() * 11);

Cadenas

Métodos:
- toUpperCase(), toLowerCase()
- charAt(posicion)
- slice(posicionInicial, [posicionFinal])
- split([separador], [limite])
- includes(busqueda, [posicion])
- replace(busqueda, sustitucion)
- replaceAll(busqueda, sustitucion)
- indexOf(busqueda, [posicion])
- padStart(longitud, [relleno = ' '])

JavaScript - JSON

Expresiones regulares
- Testear online

Operadores aritméticos

Suma ( + ), resta ( - ), multiplicación ( * ), división ( / )
Resto o módulo ( % )
Incremento ( ++ ) y decremento ( -- )
Exponente ( ** )

JavaScript - JSON

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 ( **= )

JavaScript - JSON

Operadores de comparación

Igual ( == )
No igual ( != )
Igual estricto ( === )
No igual estricto ( !== )
Mayor ( > )
Mayor o igual ( >= )
Menor ( < )
Menor o igual ( < )

JavaScript - JSON

Operadores lógicos

AND ( && )
OR ( || )
NOT ( ! )

JavaScript - JSON

Operadores de cadenas

Concatenación ( + )
Asignación con concatenación ( += )

JavaScript - JSON

Operador ternario

condición ? valor1 : valor2

JavaScript - JSON

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 };

JavaScript - JSON

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;
}

JavaScript - JSON

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);
}

JavaScript - JSON

Funciones

Declaración
Parámetros
Llamada
Funciones como expresión
Ámbitos en las funciones
Función arrow

JavaScript - JSON

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))

JavaScript - JSON

Arrays

Métodos y propiedades
- join([separador = ','])
- forEach(callback(elemento, [posicion]))
- reverse()
- slice(posicionInicial, [posicionFinal])
- sort([funcionComparacion])
Iterando un array

JavaScript - JSON

Programación funcional con arrays

Métodos:
- map

let nombres = ["juan", "luisa", "amparo", "arturo"];

let nombresMays = nombres.map(nombre => nombre.toUpperCase());

console.log(nombresMays);

JavaScript - JSON

Programación funcional con 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);

JavaScript - JSON

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

Programación funcional con arrays

JavaScript - JSON

Programación funcional con 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);

JavaScript - JSON

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

JavaScript - JSON

Objetos

Declaración
Tipos de objetos
Iterando un objeto

JavaScript - JSON

const empleado = {
  nombre: "Antonio",
  apellidos: "González Díaz",
  edad: 33
}

for (const [propiedad, valor] of Object.entries(empleado)) {
  console.log(propiedad, valor);
}

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"

JavaScript - JSON

JSON

Mapeado con objetos de JS
Sintaxis del formato JSON
Tipos de datos

JavaScript - JSON

{
  "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
    }
  ]
}

Clases

Clases
- Propiedades y métodos

class A {

    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());

JavaScript - JSON

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);

JavaScript - JSON

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());

JavaScript - JSON

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());

JavaScript - JSON

Timers

setTimeout(callback, delay);
setInterval(callback, delay);
clearInterval(timer);

JavaScript - JSON

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()

JavaScript - JSON

Trabajando con fechas

Getters:
- fecha.getDate()
- fecha.getDay()
- fecha.getFullYear()
- fecha.getMonth()
- fecha.getHours()
- fecha.getMinutes()
- fecha.getSeconds()
- fecha.getMilliseconds()
- fecha.getTime()

JavaScript - JSON

Trabajando con fechas

La librería Luxon
El objeto DateTime:
- DateTime.local()
- DateTime.local(2020, 11, 30)
- DateTime.fromISO("2020-11-30")
Imprimir un formato legible:
- fecha.toLocaleString()
- fecha.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)
- Presets

JavaScript - JSON

Trabajando con fechas

Getters:
- fecha.year
- fecha.month
- fecha.day
- fecha.weekday
- fecha.minute
- fecha.second

JavaScript - JSON

Trabajando con fechas

Cálculos:
- fecha.plus({ days: 7 })
- fecha.minus({ hours: 12, minutes: 30 })
- fecha.endOf("month")

JavaScript - JSON

Trabajando con fechas

Comparaciones:
- fecha1 < fecha2
- fecha1.equals(fecha2)
- fecha1.hasSame(fecha2, 'year')
Diferencias:
- fecha2.diff(fecha1, 'days')
Validación:
- fecha1.isValid

JavaScript - JSON

Trabajando con fechas

La clase Info:
- Info.weekdays("narrow")
- Info.months("long")
Elegir el idioma:
Settings.defaultLocale = "en";

JavaScript - JSON

Manipulación del DOM

El Document Object Model

<!DOCTYPE html>
<html lang="es-ES">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>
  <script src="js/jquery.min.js"></script>
  <script src="js/scripts.js"></script>
  <link rel="stylesheet" href="css/estilos.css">
</head>

<body>
  <header>
    <h1>Ejemplo DOM</h1>
  </header>
  <div>
    <h2>Esto es un documento HTML</h2>
    <img src="img/html.jpg" alt="Documento HTML">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non consectetur sapiente esse odit dolorem fugiat, iure
      omnis dolore obcaecati veniam necessitatibus sit quia praesentium, nesciunt suscipit. Adipisci illum tempore fuga.
    </p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis, consequatur? Nostrum repudiandae qui expedita
      optio exercitationem sapiente rem, quisquam ipsam, sunt veniam dolorum architecto similique! Iusto quibusdam omnis
      tenetur nihil.</p>
  </div>
</body>

</html>

JavaScript - JSON

Manipulación del DOM

El Document Object Model
Nodos HTML
Interfaces Node, HTMLElement e hijas

JavaScript - JSON

Manipulación del DOM

Acceder a los nodos
- document.getElementById(id)
- <document | nodo>.getElementsByClassName(clase)
- <document | nodo>.getElementsByTagName(etiqueta)
- <document | nodo>.querySelector(selectorCSS)
- <document | nodo>.querySelectorAll(selectorCSS)

JavaScript - JSON

Manipulación del DOM

Acceder por posiciones relativas a un nodo
- children
- firstElementChild, lastElementChild
- previousElementSibling, nextElementSibling
- parentElement

JavaScript - JSON

Manipulación del DOM

Métodos de los nodos
- cloneNode([deep=false])
- remove(), removeChild(nodo)
- append(...nodos), prepend(...nodos)
- insertBefore(nuevoNodo, nodoReferencia)
- getAttribute(nombre)
- setAttribute(nombre, valor)
- removeAttribute(nombre)

JavaScript - JSON

Manipulación del DOM

Propiedades de los nodos
- textContent
- innerHTML
- classList
- dataset
- id

JavaScript - JSON

Manipulación del DOM

Crear nodos:
- document.createElement(etiqueta)

JavaScript - JSON

Manipulación del DOM

Eventos
Tipos de eventos
Registrar un manejador de eventos:
- nodo.addEventListener(nombreEvento, callback(evento))
Cancelar la operación por defecto:
- evento.preventDefault()
Quién ha emitido el evento:
- evento.target

JavaScript - JSON

Fetch

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()

JavaScript - JSON

Fetch

La función fetch()
- Promesa
- .then()
- .catch()

JavaScript - JSON

document.cookie
Crear una cookie:
document.cookie = "nombre=valor"
Crear una cookie con caducidad:
document.cookie = "nombre=valor; expires=<fechaGMT>"
Borrar una cookie:
document.cookie="nombre=valor; expires=<fechaPasada>"
Obtener una cookie: hay que parsear document.cookie

JavaScript - JSON

const getCookie = nombre => {
  const valor = document.cookie.split("; ").find(cookie => cookie.startsWith(nombre + "="))?.split("=")[1];
  if (typeof valor === "undefined") {
    return null;
  }
  return unescape(valor);
};

const setCookie = (nombre, valor, caducidad = "") => {
  let strCookie = nombre + "=" + escape(valor);
  if (caducidad) {
    strCookie += "; expires=" + caducidad + ";";
  }
  document.cookie = strCookie;
}

const deleteCookie = nombre => {
  document.cookie = `${nombre}=; expires=${new Date(0)}`;
};

Links

JavaScript - JSON

mario@mariogl.com

@marioglweb

JavaScript - JSON

JavaScript

By mariogl

JavaScript

Curso JavaScript 30 noviembre - 3 diciembre 2020

Introducción a JavaScript

Entorno de desarrollo

Node.js y npm

Variables

JavaScript

More from mariogl