javascript json · lado del cliente petición al servidor y ejecución en el cliente la etiqueta ...
TRANSCRIPT
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
@marioglweb
JavaScript - JSON