JavaScriptJSON

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 aIntroducción aJavaScriptJavaScript

JavaScript - JSON

Conceptos iniciales

Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScriptLa versión ES6 o ES2015JSON

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 deEntorno dedesarrollodesarrollo

JavaScript - JSON

Entorno de desarrollo

Editor:

 (npx eslint --init)

Configurar:Format on PasteFormat on Save"editor.codeActionsOnSave": {     "source.fixAll.eslint": true }

 y npm

Visual Studio CodeSpanish Language Pack for Visual Studio CodeEditorConfig for VS CodeESLintLive Share

Node.jsGit

JavaScript - JSON

.editorconfig

JavaScript - JSON

# Editor configuration, see https://editorconfig.orgroot = true [*]charset = utf-8indent_style = spaceindent_size = 2insert_final_newline = truetrim_trailing_whitespace = trueend_of_line = lf

123456789

10

Node.js y npmNode.js y npm

JavaScript - JSON

npm

Instalar última versión después de instalar Node.js (configurar proxy si es necesario): npm install -g npmRepositorio de paquetes distribuiblesLa carpeta node_modulesEl archivo package.json

JavaScript - JSON

JavaScript - JSON

Comandos npm

Instalar un paquete:     npm install paquete --save-devInstalar todas las dependencias registradas:     npm installLanzar 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 navegadorDebuggear por consola

JavaScript - JSON

VariablesVariables

JavaScript - JSON

Declaración

Variables: letConstantes: const

JavaScript - JSON

Tipado dinámico y débilTipo numberTipo string

Template literals

Tipos

JavaScript - JSON

Tipado dinámico y débilTipo numberTipo string

Template literalsTipo booleanArraysObjetosTipo nullTipo undefinedValores y referencias

Tipos

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

Tipado dinámico y débilTipo numberTipo string

Template literalsTipo booleanArraysObjetosTipo nullTipo undefinedValores y referencias

Tipos

JavaScript - JSON

Ámbitos

Ámbito globalJerarquí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

JavaScript - JSON

Operador ternario

condición ? valor1 : valor2

JavaScript - JSON

Operador spread

Meter un array dentro de otroArgumentos variables en funcionesPasar varios valores a una funciónCopiar un array en otroCopiar un objeto en otroMergear objeto con defaults

JavaScript - JSON

Operador spread

Meter un array dentro de otroArgumentos variables en funcionesPasar varios valores a una funciónCopiar un array en otroCopiar un objeto en otroMergear 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 l 1 1 3 6

Estructuras condicionales

ifelse / else ifif anidadosswitch

JavaScript - JSON

Estructuras condicionales

ifelse / else ifif anidadosswitch

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

123456789

101112131415161718192021222324

Bucles

for / for ... in / for ... ofwhileforEach

JavaScript - JSON

Bucles

for / for ... in / for ... ofwhileforEach

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ónParámetrosLlamadaFunciones como expresiónÁmbitos en las funcionesFunción arrow

JavaScript - JSON

Arrays

DeclaraciónTipos de arraysMétodos y propiedades

lengthpush(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 propiedadesjoin([separador = ','])forEach(callback(elemento, [posicion]))reverse()slice(posicionInicial, [posicionFinal])sort([funcionComparacion])

Iterando un array

JavaScript - JSON

JavaScript - JSON

Programación funcional con arrays

Métodos:map

JavaScript - JSON

Programación funcional con arrays

Métodos:maplet nombres = ["juan", "luisa", "amparo", "arturo"];

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

JavaScript - JSON

Programación funcional con arrays

Métodos:mapfilter

JavaScript - JSON

Programación funcional con arrays

Métodos:mapfilter

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:mapfilterreduce

Programación funcional con arrays

JavaScript - JSON

Métodos:mapfilterreduce

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élet sumaX = objs.map(obj => obj.x).reduce((obj1, obj2) => obj1 + obj2);

Programación funcional con arrays

JavaScript - JSON

Programación funcional con arrays

Métodos:mapfilterreduce

Encadenamiento

JavaScript - JSON

Programación funcional con arrays

Métodos:mapfilterreduce

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 spreadDestructuring

Asignar desde un array

JavaScript - JSON

Arrays

El operador spreadDestructuring

Asignar desde un arrayIntercambiar variables

let a = 10; let b = 20; [a, b] = [b, a]; console.log(a, b); // 20, 10

function medidasMueble() { // ... return [100, 70, 20]; } let [ancho, alto, profundo] = medidasMueble(); console.log(ancho, alto, profundo); // 100, 70, 20

JavaScript - JSON

Arrays

El operador spreadDestructuring

Asignar desde un arrayIntercambiar variables

JavaScript - JSON

Arrays

El operador spreadDestructuring

Asignar desde un arrayIntercambiar variables

let a = 10; let b = 20; [a, b] = [b, a]; console.log(a, b); // 20, 10

Objetos

DeclaraciónTipos de objetosIterando un objeto

JavaScript - JSON

Objetos

JavaScript - JSON

Objetos

JavaScript - JSON

El operador spread

Objetos

JavaScript - JSON

El operador spreadDestructuring

Objetos

JavaScript - JSON

El operador spreadDestructuring

Asignar desde un objeto

Objetos

JavaScript - JSON

El operador spreadDestructuring

Asignar desde un objeto

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

123456789

1011121314151617

Objetos

JavaScript - JSON

El operador spreadDestructuring

Asignar desde un objeto

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

123456789

1011121314151617

Objetos

JavaScript - JSON

El operador spreadDestructuring

Asignar desde un objetoRenombrar variables

Objetos

JavaScript - JSON

El operador spreadDestructuring

Asignar desde un objetoRenombrar variables

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

123456789

101112

Objetos

JavaScript - JSON

El operador spreadDestructuring

Asignar desde un objetoRenombrar variablesValores por defecto

Objetos

JavaScript - JSON

El operador spreadDestructuring

Asignar desde un objetoRenombrar variablesValores por defecto

let persona = { nombre: "Luis", edad: 23} let { nombre, edad, estado = "soltero" } = persona; console.log(nombre, edad, estado); // Luis, 23, soltero

123456789

10

Objetos

JavaScript - JSON

El operador spreadDestructuring

Asignar desde un objetoRenombrar variablesValores por defectoArgumentos en las funciones

Objetos

JavaScript - JSON

El operador spreadDestructuring

Asignar desde un objetoRenombrar variablesValores por defectoArgumentos en las funciones

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"

12345678

JSON

JavaScript - JSON

Sintaxis del formato JSONTipos de datosMapeado 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 bodyY el método: json()

Fetch

JavaScript - JSON

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

Clases

JavaScript - JSON

Clases

JavaScript - JSON

Clases

Clases

JavaScript - JSON

ClasesPropiedades y métodos

Clases

JavaScript - JSON

ClasesPropiedades y métodosclass 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

ClasesPropiedades y métodosGetters y setters

Clases

JavaScript - JSON

ClasesPropiedades y métodosGetters 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

ClasesPropiedades y métodosGetters y settersMétodos estáticos

Clases

JavaScript - JSON

ClasesPropiedades y métodosGetters y settersMé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

ClasesPropiedades y métodosGetters y settersMétodos estáticosHerencia con extends y super()

Clases

JavaScript - JSON

ClasesPropiedades y métodosGetters y settersMétodos estáticosHerencia 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;

}

Manipulación del DOM

JavaScript - JSON

Manipulación del DOM

JavaScript - JSON

El Document Object Model

Manipulación del DOM

JavaScript - JSON

El Document Object Model

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 consectet omnis dolore obcaecati veniam necessitatibus sit quia praesentium, nesc </p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis, conse optio exercitationem sapiente rem, quisquam ipsam, sunt veniam dolorum tenetur nihil.</p> </div></body> </html>

123456789

1011121314151617181920212223242526272829

Manipulación del DOM

JavaScript - JSON

El Document Object ModelNodos HTML

Manipulación del DOM

JavaScript - JSON

El Document Object ModelNodos HTMLInterfaces 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 nodochildrenfirstElementChild, lastElementChildpreviousElementSibling, nextElementSiblingparentNode

Manipulación del DOM

JavaScript - JSON

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

Manipulación del DOM

JavaScript - JSON

Propiedades de los nodostextContentinnerHTMLclassListdatasetidgetAttribute(nombre)setAttribute(nombre, valor)

Manipulación del DOM

JavaScript - JSON

Crear nodos:document.createElement(etiqueta)

Manipulación del DOM

JavaScript - JSON

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

Tipos de eventos

Links

JavaScript - JSON

Tablas de compatibilidad en navegadoresBiblia de JavaScriptTrabajando con JSONReglas de ESLintJSON Server API

mario@mariogl.com

@marioglweb

JavaScript - JSON