clase8.md

Curso de JavaScript Avanzado para desarrolladores Front-end

POO con JS, ECMA6, Patrones de diseño, AJAX avanzado, HTML5 avanzado, APIs externas.

Clase 8

Eventos

• Más información:

  • Programación dirigida por eventos
  • w3schools Events
  • MDN Event
  • MDN Event Reference

• Propiedades:

  • .bubbles
  • .cancelable
  • .currentTarget
  • .defaultPrevented
  • .eventPhase
  • .explicitOriginalTarget
  • .isTrusted
  • .originalTarget
  • .srcElement
  • .target
  • .timeStamp
  • .type

• Métodos:

  • .addEventListener()
  • .attachEvent()
  • .removeEventListener()
  • .detachEvent()
  • .dispatchEvent()

¿Cómo navegamos por internet?

• How the Internet Works in 5 Minutes
• How Does the Internet Actually Work?
• Inside a Google data center
• La HISTORIA de INTERNET #DiaDeInternet - Drawing Things
• How It Works: Internet of Things

¿Cómo funciona el protocolo HTTP?

• Lista de respuestas HTTP

¿Cómo funciona el protocolo SSL/TLS?

• HakTip - How to Capture Packets with Wireshark - Getting Started
• Are HTTP Websites Insecure?
• From July, Chrome will name and shame insecure HTTP websites
• Google Chrome: HTTPS or bust. Insecure HTTP D-Day is tomorrow, folks
• Steal My Login
• Google Chrome to Label Sites Using HTTP as Insecure Starting in July
• Firefox 59: mark HTTP as insecure

JSON

• JSON en Wikiwand
• MDN | JSON.parse()
• MDN | JSON.stringify()
• Validador: jsonformatter
• Visor: jsonviewer

Trabajando con APIs y CRUD

• API RTVE
• MARVEL Doc
• Public APIs
• programmableweb - List
• Open APIs Wikipedia
• apilist.fun
• Shodan
• pokeapi
• Open Weather Map
• Fitbit
• Marvel
• SWAPI - The Star Wars API
• reddit
• Deck of Cards - API
• TheTVDB API v2
• Twitter Streaming
• Guild Wars 2
• Nutritionix API

CORS: Control de acceso HTTP

• CORS Wikiwand
• Tutorial CORS
• Using CORS by html5rocks
• Control de acceso HTTP (CORS) by MDN
• Cross-origin resource sharing en Wikipedia
• Enable cross-origin resource sharing
• crossorigin.me (Proxy)

JSONP

• Ejemplo con php de formandome
• jsonp.js de Przemek Sobstel
• J50Npi.js de Roberto Decurnex
• Is JSONP safe to use?
• Using JSONP Safely
• Practical JSONP Injection
• JSONP for cross-site Callbacks
• (in)Security of JSONP: CSRF risks

Herramientas esenciales

• Insomnia
• Jsonviewer
• Postman

Ajax avanzado: Cabeceras personalizadas y credenciales

• XMLHttpRequest.withCredentials
• XMLHttpRequest.setRequestHeader()
• Forbidden response header name
• Forbidden header name

Ajax: FormData, una gran incentivo

• Usando Objetos FormData
• Uploading Files with AJAX

Ajax avanzado: Otros usos

• XMLHttpRequest.responseXML
• XMLHttpRequest.responseType
• XMLHttpRequest.upload
• XMLHttpRequest.timeout
• XMLHttpRequest.getAllResponseHeaders()
• XMLHttpRequest.getResponseHeader()
• XMLHttpRequest.overrideMimeType()

Seguridad AJAX

• Is Your Website Hackable?
• AJAX Security Cheat Sheet
• Testing for AJAX Vulnerabilities (OWASP-AJ-001)
• Understanding Ajax vulnerabilities

Datos Abiertos

• Portal de datos abiertos del Ayuntamiento de Madrid
• Iniciativa de datos abiertos del Gobierno de España
• EMT Datos Abiertos
• European Data Portal
• Open NASA
• Datos Abiertos de Mexico
• The home of the U.S. Government’s open data

Fetch

• Compatibilidad nula con IE11
• promesas
• Async/Await
• Response()
• Response.redirected
• Response.clone()
• Response.status
• Response.statusText
• Response.type
• Response.headers
• Body.bodyUsed
• Body.body
• Body.text()
• Body.json()
• Body.formData()
• Body.blob()
• Body.arrayBuffer()
• Response.ok
• Response.error()
• Fetch API by DWB
• Introduction to fetch() By Matt Gaunt
• This API is so Fetching! by Mozilla Hacks
• That's so fetch! by Jake Archibald
• Can I use? Fetch
• Basics: Using AJAX with Fetch API
• Fetch: Polyfill