JavaScript

JSON

JavaScript - JSON

1. Presentación
2. Introducción
3. Entorno de desarrollo
4. JavaScript en el navegador
5. La consola de JavaScript
6. Variables y tipos
7. Ámbitos
8. Operadores

9. Estructuras condicionales
10. Bucles
11. Funciones
12. Arrays
13. Objetos
14. Fechas
15. Clases
16. Manipulación del DOM

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
JSON

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

Entorno de desarrollo

JavaScript - JSON

Entorno de desarrollo

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

JavaScript - JSON

.editorconfig

JavaScript - JSON

# 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

Node.js y npm

JavaScript - JSON

npm

Instalar última versión después de instalar Node.js
(configurar proxy si es necesario): npm install -g npm
Repositorio de paquetes distribuibles
La carpeta node_modules
El archivo package.json

JavaScript - JSON

Comandos npm

Instalar un paquete:
npm install paquete --save-dev
Instalar todas las dependencias registradas:
npm install
Lanzar el ejecutable de un paquete:
npx ejecutable

Configuración proxy

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

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

JavaScript - JSON

La consola

La consola del navegador
Debuggear por consola

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
Valores y referencias

JavaScript - JSON

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

Ámbitos

Ámbito global
Jerarquías de ámbitos

JavaScript - JSON

Números

Métodos:
- toFixed([digitos])
- toString()
Funciones globales:
- isNaN(n)
- parseInt(cadena)
- 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

Cadenas

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

JavaScript - JSON

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
Argumentos variables en funciones
Pasar varios valores a una función
Copiar un array en otro
Copiar un objeto en otro
Mergear objeto con defaults

JavaScript - JSON

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

Estructuras condicionales

if
else / else if
if anidados
switch

JavaScript - JSON

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

Bucles

for / for ... in / for ... of
while
forEach

JavaScript - JSON

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 obj = {
    x: 3,
    y: 4
}

for (let i in obj) {
    console.log(obj[i]);
}

let nombre = "Antonio Jesús";

for (let c of nombre) {
    console.log(c);
}

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) / shift(elemento)
- pop() / unshift()
- 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

Objetos

Declaración
Tipos de objetos
Iterando un objeto

JavaScript - JSON

Objetos

JavaScript - JSON

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"

JSON

JavaScript - JSON

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

Fetch

JavaScript - JSON

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

Fetch

JavaScript - JSON

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

Clases

JavaScript - JSON

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

Clases

JavaScript - JSON

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

Clases

JavaScript - JSON

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

Clases

JavaScript - JSON

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

Manipulación del DOM

JavaScript - JSON

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>

Manipulación del DOM

JavaScript - JSON

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

Manipulación del DOM

JavaScript - JSON

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

Manipulación del DOM

JavaScript - JSON

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

Manipulación del DOM

JavaScript - JSON

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

Manipulación del DOM

JavaScript - JSON

Propiedades de los nodos
- textContent
- innerHTML
- classList
- dataset
- id
- getAttribute(nombre)
- setAttribute(nombre, valor)

Manipulación del DOM

JavaScript - JSON

Crear nodos:
- document.createElement(etiqueta)

Manipulación del DOM

JavaScript - JSON

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

Links

JavaScript - JSON

mario@mariogl.com

@marioglweb

JavaScript - JSON

JavaScript - JSON Badalona

By mariogl

JavaScript - JSON Badalona

Curso JavaScript - JSON Badalona 24 febrero -6 marzo 2020

Introducción a JavaScript

Entorno de desarrollo

Node.js y npm

Variables

JavaScript - JSON Badalona

More from mariogl