[ { "path": "README.md", "content": "# javascript-professional\nLas mejores prácticas de Javascript para ser un profesional, es necesario tener buenos fundamentos del lenguaje\n" }, { "path": "decorator/index.html", "content": "\r\n\r\n\r\n \r\n \r\n \r\n Decorator Patterns\r\n\r\n\r\n

\r\n

Decorator Desgin Patterns

\r\n Email\r\n \r\n

\r\n\r\n" }, { "path": "decorator/index.ts", "content": "class Field {\r\n errors: string[];\r\n input: HTMLInputElement;\r\n\r\n constructor(input: HTMLInputElement) {\r\n this.input = input;\r\n this.errors = [];\r\n\r\n let errorMessage = document.createElement('p');\r\n errorMessage.className = 'text-danger';\r\n this.input.parentNode.insertBefore(errorMessage, this.input.nextSibling);\r\n\r\n this.input.addEventListener('input', () => {\r\n this.errors = [];\r\n this.validate();\r\n errorMessage.innerText = this.errors[0] || ' ';\r\n })\r\n }\r\n validate() {}\r\n}\r\n\r\nfunction RequireFieldDecorator(field: Field): Field {\r\n let validate = field.validate;\r\n\r\n field.validate = function () {\r\n validate()\r\n let value = field.input.value;\r\n if (!value) {\r\n field.errors.push(\"Requisito\");\r\n }\r\n };\r\n\r\n return field;\r\n}\r\n\r\nfunction EmailFieldDecorator(field: Field): Field {\r\n let validate = field.validate;\r\n\r\n field.validate = function () {\r\n validate()\r\n let value = field.input.value;\r\n\r\n if (value.indexOf(\"@\") === -1) {\r\n field.errors.push(\"Debe ser un email\");\r\n }\r\n\r\n };\r\n \r\n return field;\r\n}\r\n\r\nlet field = new Field(document.querySelector(\"#email\"));\r\nRequireFieldDecorator(field);\r\nEmailFieldDecorator(RequireFieldDecorator(field));" }, { "path": "ejercicios/abort-fetch.html", "content": "\n \n Abort Fetch\n \n\n \n Go back\n

Abre la consola

\n\n \n\n \n \n\n \n \n\n" }, { "path": "ejercicios/abort-fetch.js", "content": "const url =\r\n 'https://images.pexels.com/photos/974470/nature-stars-milky-way-galaxy-974470.jpeg?q=100';\r\n // Elementos del DOM imagen y 2 botones\r\n const img = document.getElementById('huge-image');\r\n const loadButton = document.getElementById('load');\r\n const stopButton = document.getElementById('stop');\r\n let controller;\r\n\r\n // Función que habilita o desabilita un boton\r\n function startLoading() {\r\n loadButton.disabled = true;\r\n // Camnbia el texto de su contenido\r\n loadButton.innerText = 'Loading...';\r\n stopButton.disabled = false;\r\n }\r\n // Funcíon que desabilita el boton de carga\r\n function stopLoading() {\r\n loadButton.disabled = false;\r\n loadButton.innerText = 'Load HUGE Image';\r\n stopButton.disabled = true;\r\n }\r\n\r\n loadButton.onclick = async function() {\r\n // Se ejecuta startLoading que lo unico que hace es cambiar la apariencia del boton\r\n // Para que se vea que esta cargando\r\n startLoading();\r\n\r\n // Declaramos la variable antes para despues tener acceso a ella\r\n // en el boton de cancelar petición fetch\r\n controller = new AbortController();\r\n try {\r\n // Hacemos la petición asincrona a la URL usando Async await\r\n // Vamos a añadirle un objeto de configuración al fetch\r\n // Esté objeto de configuración le vamos a pasar un objeto que se llama la señal\r\n // La señal va a venir del abort controller\r\n const response = await fetch(url, { signal: controller.signal });\r\n // Vamos a obtener el binario de la imagen con blob img en forma binaria\r\n const blob = await response.blob();\r\n // Convertimos el blob binario a una URL, el navegador se encarga de asignar el blob una url\r\n const imgUrl = URL.createObjectURL(blob);\r\n // Ahora el src se lo asignamos a la url de la imagen\r\n img.src = imgUrl;\r\n } catch (error) {\r\n console.log(error.message);\r\n }\r\n\r\n // Cuando la función asincrona se falle vamos a cambiar el boton a stop\r\n stopLoading();\r\n };\r\n\r\n stopButton.onclick = function() {\r\n // Si deseamos detener tenemos que llamar al abort controller.container\r\n // El abort envia una señal al fetch y hace que la petición se cancele\r\n controller.abort();\r\n\r\n stopLoading();\r\n };\r\n \r\n" }, { "path": "ejercicios/call-apply-bind.js", "content": "// Establece this usando 'call'\r\nfunction saludar() {\r\n console.log(`Hola soy ${this.name} ${this.lastname}`)\r\n}\r\n\r\nconst richard = {\r\n name: 'Richard',\r\n lastname: 'Lopez'\r\n}\r\n\r\nsaludar.call(richard)\r\n\r\n// Establece this usando 'call' y pasar argumentos a la función.\r\nfunction caminar(metros, direccion) {\r\n console.log(`${this.name} camina ${metros} metros hacia ${direccion}`);\r\n}\r\n\r\ncaminar.call(richard, 500, 'norte');\r\n\r\n// Establece this usando 'apply' y pasar argumentos a la función\r\n\r\ncaminar.apply(richard, [900, 'noreste']);\r\n\r\n// Establecer una nueva función usando bind()\r\nconst daniel = {\r\n name: \"Daniel\",\r\n lastname: \"Sanchez\"\r\n}\r\nconst danielSaluda = saludar.bind(daniel);\r\ndanielSaluda();\r\n\r\nconst danielCamina = caminar.bind(daniel, 1000);\r\ndanielCamina('oeste');\r\n\r\n// Cuando es útil uno de estós métodos \r\nconst buttons = document.getElementsByClassName(\"call-to-action\");\r\n// buttons.forEach(button => {\r\n// button.onclick = () => alert('Nunca pares de aprender');\r\n// });\r\n\r\n// No es una funcion forEach porque button es NodeList\r\nArray.prototype.forEach.call(buttons, button => {\r\n button.onclick = () => alert('Nunca pares de aprender');\r\n})" }, { "path": "ejercicios/clousers.js", "content": "// Clousers\r\n// printColor\r\n// let color = 'green';\r\n// function printColor() {\r\n// console.log(color);\r\n// }\r\n// IIFE: immediately invoked function expression\r\n(function () {\r\n let color = 'green';\r\n\r\n function printColor() {\r\n console.log(color);\r\n }\r\n\r\n printColor();\r\n})();\r\nfunction makeColorPrinter(color) {\r\n let colorMessage = `The color is: ${color}`;\r\n return function () {\r\n console.log(colorMessage);\r\n }\r\n}\r\nlet greenColorPrinter = makeColorPrinter(\"green\");\r\nconsole.log(greenColorPrinter());\r\n\r\n// Clousers Jasan Hernández.\r\n// ¿Variables privadas?\r\nconst counter1 = {\r\n count: 3\r\n}\r\n// count esta en el scope Global Window\r\nconsole.log(counter1.count);\r\n// Podemos modificar su valor si quisieramos\r\ncounter1.count = 99;\r\nconsole.log(counter1.count);\r\n\r\n// Clouseres - creamos un function scope\r\nfunction makeCounter(n) {\r\n // count ya no existe en window, ahora\r\n // solo pertenece a la función\r\n let count = n;\r\n return {\r\n increase: function () { count += 1; },\r\n decrease: function () { count -= 1},\r\n getCount: function () { return count; },\r\n }\r\n}\r\nlet counter = makeCounter(7);\r\nconsole.log('This count is:', counter.getCount());\r\nconsole.log('This count is:', counter.increase());\r\nconsole.log('This count is:', counter.decrease());\r\n// No podemos cambiar el valor de count porque no \r\n// está en nuestro alcance.\r\n// ERROR FATAL\r\n// counter.count = 99;" }, { "path": "ejercicios/generators.js", "content": "function* simpleGenerator() {\r\n console.log(\"GENERATOR START\");\r\n yield 1; // {value: 1, done: false}\r\n yield 2; // {value: 2, done: false}\r\n yield 3; // {value: 3, done: false}\r\n console.log(\"GENERATOR END\");\r\n}\r\n\r\n// const gen = simpleGenerator();\r\n// gen.next()\r\n// GENERATOR START\r\n// gen.next();\r\n// GENERATOR END\r\n\r\n// Podemos hacer generadores infinitos\r\nfunction* idMaker() {\r\n let id = 1;\r\n while (true) {\r\n yield id;\r\n id += 1;\r\n }\r\n}\r\n\r\n// Cuando llamamos a next también podemos pasar valores que la función recibe.\r\nfunction* idMakerWithReset() {\r\n let id = 1;\r\n let reset;\r\n while (true) {\r\n reset = yield id;\r\n if (reset) {\r\n id = 1;\r\n } else {\r\n id += 1;\r\n }\r\n }\r\n}\r\n\r\n// Ahora hagamos un ejemplo un poco más complejo: la secuencia fibonacci\r\nfunction* fibonacci() {\r\n let a = 1, b = 1;\r\n while (true) {\r\n const nextNumber = a + b;\r\n a = b;\r\n b = nextNumber;\r\n yield nextNumber;\r\n }\r\n}" }, { "path": "ejercicios/index.html", "content": "\r\n\r\n\r\n\r\n \r\n \r\n \r\n Scope\r\n\r\n\r\n

\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n" }, { "path": "ejercicios/promise.js", "content": "// Ejemplo: renderMovies([{ title: \"Spider-Man\", release_date: \"2019-06-30\", poster_path: \"/rjbNpRMoVvqHmhmksbokcyCr7wn.jpg\" }])\r\n // Traducir las funciones de usar thens a usar async/await\r\n // Crear función para que no nos gastemos la cantidad de requests demasiado rapido\r\n // Crear función donde hacemos requests secuenciales\r\n // Crear función donde hacemos requests en paralelo\r\n // Crear función donde obtenemos el primer request que llegue\r\n\r\n // The Movie Database API: https://developers.themoviedb.org/3/getting-started/introduction\r\n const apiKey = 'b89fc45c2067cbd33560270639722eae';\r\n\r\n // function getMovie(id) {\r\n // const url = `https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}`;\r\n // return fetch(url).then(response => response.json());\r\n // }\r\n\r\n async function getMovie(id) {\r\n const url = `https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}`;\r\n const response = await fetch(url)\r\n const data = await response.json();\r\n return data;\r\n }\r\n\r\n async function getPopularMovies() {\r\n const url = `https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=${apiKey}`;\r\n const response = await fetch(url);\r\n const data = await response.json();\r\n return data.results;\r\n }\r\n\r\n async function getTopMoviesIds(n = 3) {\r\n // try {\r\n // const popularMovies = await getPopularMovies();\r\n // } catch(error) {\r\n // console.log(error);\r\n // }\r\n const popularMovies = await getPopularMovies();\r\n const ids = popularMovies.slice(0, n).map(movie => movie.id);\r\n return ids;\r\n }\r\n\r\n function renderMovies(movies) {\r\n const movieList = document.getElementById('movies');\r\n movieList.innerHTML = '';\r\n\r\n movies.forEach(movie => {\r\n const listItem = document.createElement('li');\r\n listItem.innerHTML = `\r\n

\r\n

${movie.title}

\r\n

Released on ${movie.release_date}

\r\n `;\r\n\r\n movieList.appendChild(listItem);\r\n });\r\n }\r\n\r\n // Peliculas en secuencia\r\n\r\n async function getTopMoviesInSequence() {\r\n const ids = await getTopMoviesIds();\r\n const movies = [];\r\n\r\n for (const id of ids) {\r\n const movie = await getMovie(id);\r\n movies.push(movie);\r\n }\r\n\r\n return movies;\r\n }\r\n\r\n async function getTopMoviesInParallel() {\r\n const ids = await getTopMoviesIds();\r\n const moviePromises = ids.map(id => getMovie(id));\r\n\r\n const movies = await Promise.all(moviePromises);\r\n\r\n return movies;\r\n }\r\n\r\n async function getFastestTopMovie() {\r\n const ids = await getTopMoviesIds();\r\n const moviePromises = ids.map(id => getMovie(id));\r\n\r\n const movie = await Promise.race(moviePromises);\r\n return movie;\r\n }\r\n\r\n document.getElementById('sequence').onclick = async function() {\r\n const movies = await getTopMoviesInSequence();\r\n renderMovies(movies);\r\n };\r\n\r\n document.getElementById('parallel').onclick = async function() {\r\n const movies = await getTopMoviesInParallel();\r\n renderMovies(movies);\r\n };\r\n\r\n document.getElementById('fastest').onclick = async function() {\r\n const movie = await getFastestTopMovie();\r\n renderMovies([movie]);\r\n };" }, { "path": "ejercicios/promises.html", "content": "\n \n Promesas\n \n\n \n Go back\n\n

\n\n

\n\n \n \n\n" }, { "path": "ejercicios/prototype-inheritance.js", "content": "function Hero(name) {\r\n this.name = name;\r\n}\r\n\r\nHero.prototype.saludar = function () {\r\n console.log(`Hola, soy ${this.name}`);\r\n}\r\n\r\nconst zelda = new Hero('Zelda');\r\n\r\n// Propiedades de la instancia\r\nconsole.log(`New: ${zelda.name} `);\r\n// Propiedades de la \"clase\".\r\nconsole.log(`saludar: ${zelda.saludar} `);\r\n\r\n// Propiedades heredadas de ej: toString\r\nconsole.log('toString: ', zelda.toString);\r\n\r\n// hasOwnProperty (de dónde sale toString o esto?)\r\nconsole.log('zelda.hasOwnProperty(\"name\"): ', zelda.hasOwnProperty('name'));\r\nconsole.log('zelda.hasOwnProperty(\"saludar\"): ', zelda.hasOwnProperty('saludar'));\r\n" }, { "path": "ejercicios/prototype.js", "content": "// Un objeto común y corriente\r\n// const zelda = {\r\n// name: \"Zelda\"\r\n// }\r\n// zelda.saludar = function () {\r\n// console.log(`Hola soy ${this.name}`);\r\n// }\r\n// zelda.saludar();\r\n\r\n// const link = {\r\n// name: \"Link\"\r\n// }\r\n// link.saludar = function () {\r\n// console.log(`Hola soy ${this.name}`);\r\n// }\r\n// link.saludar();\r\n\r\n// Seamos un poco más eficientes\r\n// function Hero(name) {\r\n// const hero = {\r\n// name: name,\r\n// }\r\n// hero.saludar = function () {\r\n// console.log(`Hola soy ${this.name}`);\r\n// }\r\n\r\n// return hero;\r\n// }\r\n// const zelda = Hero('Zelda');\r\n// zelda.saludar();\r\n\r\n// const link = Hero(\"Link\");\r\n// link.saludar();\r\n\r\n// Aun podemos mejorar más y evitar tener que crear la misma función cada vez\r\n// const heroMethods = {\r\n// saludar: function () {\r\n// console.log(`Me llamó ${this.name}`);\r\n// }\r\n// }\r\n// function Hero(name) {\r\n// const hero = {\r\n// name: name,\r\n// }\r\n// hero.saludar = heroMethods.saludar;\r\n\r\n// return hero;\r\n// }\r\n// const zelda = Hero('Zelda');\r\n// zelda.saludar();\r\n\r\n// const link = Hero(\"Link\");\r\n// link.saludar();\r\n\r\n// Object create\r\n// const heroMethods = {\r\n// saludar: function () {\r\n// console.log(`Soy un super heroe ${this.name}`);\r\n// }\r\n// }\r\n// function Hero(name) {\r\n// const hero = Object.create(heroMethods);\r\n// hero.name = name;\r\n\r\n// return hero;\r\n// }\r\n// const zelda = Hero('Zelda');\r\n// zelda.saludar();\r\n\r\n// const link = Hero(\"Link\");\r\n// link.saludar();\r\n\r\n// Métodos de Hero dentro de Hero\r\n// function Hero(name) {\r\n// const hero = Object.create(Hero.prototype);\r\n// hero.name = name;\r\n// return hero;\r\n// }\r\n\r\n// Hero.prototype.saludar = function () {\r\n// console.log(`Soy una super heroina ${this.name}`);\r\n// }\r\n\r\n// const zelda = Hero('Zelda');\r\n// zelda.saludar();\r\n\r\n// const link = Hero(\"Link\");\r\n// link.saludar();\r\n\r\n// new es un atajo (azucar sintactica) para llevar Hero.prototype al objeto\r\n\r\nfunction Hero(name) {\r\n // const hero = Object.create(Hero.prototype);\r\n this.name = name;\r\n // return this impliciamente\r\n}\r\n\r\nHero.prototype.saludar = function () {\r\n console.log(`New: ${this.name}`);\r\n}\r\n\r\nconst zelda = new Hero('Zelda');\r\nzelda.saludar();\r\n\r\nconst link = new Hero(\"Link\");\r\nlink.saludar();" }, { "path": "ejercicios/proxy.js", "content": "// target es mi objeto a supervisar (sus propiedades pueden ser objetos, array, funciones, u otro proxy)\r\nconst target = {\r\n red: 'Rojo',\r\n green: 'Verde',\r\n blue: 'Azul'\r\n}\r\n// handler es un objeto con funciones (trampa) que definen las acciones a seguir cuando se accede al objeto supervisado\r\nconst handler = {\r\n get(obj, prop) {\r\n if (prop in obj) {\r\n // si la propiedad existe, pues retornamos su valor\r\n return obj[prop]\r\n }\r\n\r\n // Si llega hasta aqui, vamos a ver si podemos retornar una sugerencia\r\n const suggetion = Object.keys(obj).find(key => {\r\n // creo un objeto con todas mis claves del objeto supervisado, y retorno aquella (nombre) \r\n // que su distancia sea <= 3 tomando como base la propiedad invocada\r\n return Levenshtein.get(key, prop) <= 3 \r\n })\r\n\r\n \r\n if (suggetion) {\r\n console.log(`${prop} no se encontró. ¿Quisiste decir ${suggetion}?`);\r\n }\r\n\r\n return obj[prop];\r\n }\r\n}\r\nconst p = new Proxy(target, handler);\r\n\r\np.red; // \"Rojo\"\r\np.green; // \"Verder\"\r\np.reed //reee no se encontró. ¿Quisiste decir red?\r\np.geen //reee no se encontró. ¿Quisiste decir green?" }, { "path": "ejercicios/scope.js", "content": "// Global scope\r\nvar message = 'Hola, Senior';\r\nvar $ = function (message) {\r\n console.log(`Say: ${message}`)\r\n}\r\n\r\n// Funcion Scope \r\nfunction printNumbers() {\r\n var i; // No importa si declaramos i adentro javascript lo ejecutará siempre así cuando se trata de var.\r\n for (i = 0; i < 10; i++) {\r\n setTimeout(() => { \r\n console.log(i);\r\n }, 100);\r\n }\r\n}\r\n\r\nfunction printNumbers2() {\r\n var i\r\n for (i = 0; i < 10; i++) {\r\n function eventuallyPrintNumber(n) {\r\n setTimeout(() => { \r\n console.log(n);\r\n }, 100);\r\n }\r\n\r\n eventuallyPrintNumber(i)\r\n }\r\n}\r\n\r\n// Block Scope\r\nfunction printNumbers3() {\r\n for (let i = 0; i < 10; i++) {\r\n setTimeout(() => { \r\n console.log(i);\r\n }, 100);\r\n }\r\n}" }, { "path": "ejercicios/this.js", "content": "// this en el scope global\r\nconsole.log(`this: ${this}`);\r\n\r\n// this en el scope de una función\r\n// function whoIsThis() {\r\n// return this;\r\n// }\r\n// console.log(whoIsThis());\r\n\r\n// this en el scope de una función strict mode \r\nfunction whoIsThisStrictMode() {\r\n \"use strict\";\r\n return this;\r\n}\r\n// undefine\r\nconsole.log(`whoIsThisStrictMode: ${whoIsThisStrictMode()}`);\r\n\r\n// this en el constexto de un objeto \r\nconst person = {\r\n name: \"Gabriel\",\r\n saludar: function () {\r\n console.log(`hola soy ${this.name}`);\r\n }\r\n}\r\nconsole.log(person.saludar());\r\n\r\n// this cuando sacamos una función de un objeto \r\nconst accion = person.saludar;\r\naccion();\r\n\r\n// This en el contexto de una Clase(Prototype);\r\nfunction Person(name, lastName) {\r\n this.name = name;\r\n this.lastName = lastName;\r\n}\r\n\r\nPerson.prototype.saludar = function () {\r\n console.log(`Me llamó ${this.name} ${this.lastName}`);\r\n}\r\n\r\nconst jasan = new Person('Jasan', 'Hernández');\r\njasan.saludar();" }, { "path": "mediaplayer/.gitignore", "content": "node_modules\r\nlib" }, { "path": "mediaplayer/package.json", "content": "{\n \"name\": \"@jasanhdz/mediaplayer\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"build\": \"tsc src/**/*.ts --outDir lib\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"author\": \"Jasan Hernández \",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"typescript\": \"^3.6.3\"\n }\n}\n" }, { "path": "mediaplayer/src/MediaPlayer.ts", "content": "class MediaPlayer {\r\n media: HTMLMediaElement;\r\n plugins: Array;\r\n container: HTMLElement;\r\n\r\n constructor(config: any) {\r\n this.media = config.el;\r\n this.plugins = config.plugins || [];\r\n this.initPlayer();\r\n this.initPlugins();\r\n }\r\n\r\n initPlayer() {\r\n this.container = document.createElement('div');\r\n\r\n this.media.parentNode.insertBefore(this.container, this.media);\r\n this.container.appendChild(this.media);\r\n this.container.style.position = 'relative';\r\n }\r\n\r\n private initPlugins() {\r\n this.plugins.forEach(plugin => {\r\n plugin.run(this);\r\n });\r\n }\r\n\r\n pause() {\r\n this.media.pause();\r\n }\r\n\r\n play() {\r\n if (this.media.paused)\r\n this.media.play();\r\n else\r\n this.media.pause();\r\n }\r\n\r\n muted() {\r\n this.media.muted ?\r\n this.unmuted() :\r\n this.media.muted = true;\r\n }\r\n\r\n unmuted() {\r\n this.media.muted = false;\r\n }\r\n}\r\n\r\n \r\n\r\n\r\n\r\n\r\n\r\nexport default MediaPlayer;" }, { "path": "mediaplayer/src/plugins/Ads/Ads.ts", "content": "import { ALL_ADS } from './ads_list.js';\r\n\r\nexport interface Ad {\r\n imageUrl: string,\r\n title: string,\r\n body: string,\r\n url: string\r\n}\r\n\r\nclass Ads {\r\n private static instance: Ads;\r\n private ads: Ad[];\r\n\r\n private constructor() { \r\n this.initAds();\r\n }\r\n\r\n static getInstance() {\r\n if (!Ads.instance) {\r\n Ads.instance = new Ads();\r\n }\r\n\r\n return Ads.instance;\r\n }\r\n\r\n private initAds() {\r\n this.ads = [...ALL_ADS];\r\n }\r\n\r\n getAd() {\r\n if (this.ads.length === 0) {\r\n this.initAds();\r\n }\r\n return this.ads.pop();\r\n\r\n }\r\n}\r\n\r\nexport default Ads;" }, { "path": "mediaplayer/src/plugins/Ads/ads_list.js", "content": "export const ALL_ADS = [\r\n {\r\n imageUrl:\r\n 'https://static.platzi.com/media/achievements/badge-profesional-javascript-13538df2-24ce-433f-9aa6-e34eed608e70.png',\r\n title: 'Curso Profesional de JavaScript',\r\n body:\r\n 'Mejora tus habilidades en Javascript. Conoce Typescript y cómo puedes ocuparlo para mejorar el control de tus variables.',\r\n url: 'https://platzi.com/cursos/javascript-profesional/',\r\n },\r\n\r\n {\r\n imageUrl:\r\n 'https://static.platzi.com/media/achievements/badge-frontend-developer-8a49e681-3e22-408d-b886-2f47dfc9953a.png',\r\n title: 'Curso de Frontend Developer',\r\n body:\r\n 'Domina las bases de HTML y CSS. Define la arquitectura de tu código y construye un sitio web usando componentes estáticos. ',\r\n url: 'https://platzi.com/cursos/frontend-developer/',\r\n },\r\n\r\n {\r\n imageUrl:\r\n 'https://static.platzi.com/media/achievements/badge-backend-node-8e6aa8a9-f7cd-42b7-bf4a-e1ee916a942b.png',\r\n title: 'Curso de Backend con Node.js',\r\n body:\r\n 'Crea aplicaciones backend utilizando Node.js, Express y Mongo. Entiende cómo funciona Javascript en un servidor y escribe aplicaciones con Node.js.',\r\n url: 'https://platzi.com/cursos/backend-nodejs/',\r\n },\r\n\r\n {\r\n imageUrl:\r\n 'https://static.platzi.com/media/achievements/badge-prework-da6b0493-9908-40f3-ad53-f5d330b995b8.png',\r\n title:\r\n 'Comienza tus proyectos de desarrollo para JavaScript configurando un entorno de desarrollo cómodo y adaptado a tus necesidades.',\r\n body:\r\n 'Mejora tus habilidades en Javascript. Conoce Typescript y cómo puedes ocuparlo para mejorar el control de tus variables.',\r\n url: 'https://platzi.com/cursos/prework/',\r\n },\r\n\r\n {\r\n imageUrl:\r\n 'https://static.platzi.com/media/achievements/badge-autenticacion-passport-6d45426a-2b24-4757-8927-7bfaf54529dd.png',\r\n title: 'Curso de Autenticación con Passport.js',\r\n body:\r\n 'Genera estrategias de autenticación Sign-In y Sign-Out usando Passport.js. Agrega autenticación con Facebook, Twitter y Google a tus desarrollos.',\r\n url: 'https://platzi.com/cursos/passport/',\r\n },\r\n\r\n {\r\n imageUrl:\r\n 'https://static.platzi.com/media/achievements/badge-backend-frontend-02b2ac18-331a-4959-85bf-0bd3c2aa009c.png',\r\n title: 'Curso de Backend for Frontend',\r\n body:\r\n 'La ingeniería de software evoluciona día a día, no te quedes atrás. Ahora que eres un Desarrollador FullStack JavaScript necesitas evolucionar con el software, construye arquitecturas de software modernas.',\r\n url: 'https://platzi.com/cursos/bff/',\r\n },\r\n\r\n {\r\n imageUrl:\r\n 'https://static.platzi.com/media/achievements/badge-react-adec89d0-1c35-4c9c-847e-18c284dc79dd.png',\r\n title: 'Curso Práctico de React JS',\r\n body:\r\n 'React es una de las librerías más utilizadas hoy para crear aplicaciones web. Aprende a través de la creación de la interfaz de PlatziVideo todo lo que necesitas para crear increíbles componentes con React. ',\r\n url: 'https://platzi.com/cursos/react-ejs/',\r\n },\r\n\r\n {\r\n imageUrl:\r\n 'https://static.platzi.com/media/achievements/badge-react-redux-2ca3c0a5-fc53-437f-bfba-69e9ddd5a803.png',\r\n title: 'Curso de React Router y Redux',\r\n body:\r\n 'Aprende de forma práctica a implementar React Router para manejar rutas en tus proyectos de frontend como un profesional.',\r\n url: 'https://platzi.com/cursos/react-router-redux/',\r\n },\r\n];" }, { "path": "mediaplayer/src/plugins/Ads/index.ts", "content": "import MediaPlayer from '../../MediaPlayer';\r\nimport Ads, {Ad} from './Ads';\r\n\r\nclass AdsPlugin {\r\n private player: MediaPlayer;\r\n private media: HTMLMediaElement;\r\n private ads: Ads;\r\n private currentAd: Ad;\r\n private adsContainer: HTMLElement;\r\n\r\n constructor() {\r\n this.ads = Ads.getInstance()\r\n this.adsContainer = document.createElement('div');\r\n }\r\n\r\n run(player: MediaPlayer) {\r\n this.player = player;\r\n this.player.container.appendChild(this.adsContainer);\r\n this.media = this.player.media;\r\n this.media.addEventListener('timeupdate', this.handleTimeUpdate.bind(this));\r\n }\r\n\r\n private handleTimeUpdate() {\r\n const currentTime = Math.floor(this.media.currentTime);\r\n if (currentTime % 30 === 0) {\r\n this.renderAd();\r\n }\r\n }\r\n\r\n private renderAd() {\r\n if (this.currentAd) {\r\n return;\r\n }\r\n const ad = this.ads.getAd();\r\n this.currentAd = ad;\r\n console.log(this.currentAd);\r\n // this.adsContainer.style.position = 'absolute';\r\n // \r\n this.adsContainer.innerHTML = `\r\n

\r\n \r\n

\r\n

${this.currentAd.title}

\r\n

${this.currentAd.body}

\r\n

JavaScript Profesional

\r\n

\r\n\r\n## Tabla de Contenido\r\n- [¿Cómo llega un script al navegador?](#como-llegá-un-script-al-navegador)\r\n- [Scope](#scope)\r\n- [Clouseres](#clouseres)\r\n- [¿Quién es This?](#quién-es-this)\r\n- [Métodos Call y Apply](#métodos-call-y-apply)\r\n - [Evitar confundir Apply y Call](#evitar-confundir-apply-y-call)\r\n- [Bind](#bind)\r\n- [Diferencias Apply, Call y Bind](#diferencias-apply-call-y-bind)\r\n- [Prototype](#prototype)\r\n- [Object create](#object-create)\r\n- [Herencia Prototipal](#herencia-prototipal)\r\n- [¿Cómo funciona Javascript?](#como-funciona-javascript)\r\n - [Analizador y Abstract Syntax Tree](#analizador-y-abstract-syntax-tree)\r\n - [Fallo en el Parset](#fallo-en-el-parset)\r\n - [Eager Parsing (Parser de V8)](#eager-parsing-parser-de-v8))\r\n - [Lazy Parsing](#lazy-parsing)\r\n - [Tokens](#tokens)\r\n - [Abstract Syntax Tree](#abstract-syntax-tree)\r\n- [Abstract Syntax Tree en Práctica](#abstract-syntax-tree-en-práctica)\r\n- [Cómo funciona el Javascript Engine](#como-funciona-el-javascript-engine)\r\n - [Bytecode vs Machine Code](#bytecode-vs-machine-code)\r\n - [SpiderMonkey vs V8](#spidermonkey-vs-v8)\r\n- [Event Loop](#event-loop)\r\n - [EventLoop con Asincronía](#eventloop-con-asincronia)\r\n - [Task Queue](#task-queue)\r\n - [Event Loop con Promesas](#event-loop-con-promesas)\r\n- [Promesas](#promesas)\r\n- [Getters y Setters](#getters-y-setters)\r\n- [Proxy](#proxy)\r\n- [Generadores](#generadores)\r\n- [Cómo cancelar peticiones Fetch](#como-cancelar-peticiones-fetch)\r\n- [Intersection Observer API](#intersection-observer-api)\r\n - [Creando un Intersection Observer](#creando-un-intersection-observer)\r\n - [Opciones de Intersection observer](#opciones-de-intersection-observer)\r\n - [Determinando un elemento para ser observado](#determinando-un-elemento-para-ser-observado)\r\n- [Creación de Plugin para IntersectionObserver de nuestro videoplayer](#creación-de-plugin-para-intersectionobserver-de-nuestro-videoplayer)\r\n- [Visibility Change](#visibility-change)\r\n- [Service worker](#service-worker)\r\n- [Typescript](#typescript)\r\n - [Tipos básicos en Typescript](#tipos-básicos-en-typescript)\r\n - [Funciones en Typescript](#funciones-en-typescript)\r\n - [Interfaces en Typescript](#interfaces-en-typescript)\r\n - [Clases en Typescript](#clases-en-typescript)\r\n - [Herencia Typescript](#herencia-typescript)\r\n- [Modificadores de Acceso en Typescript](#modificadores-de-acceso-en-typescript)\r\n - [Público por defecto](#público-por-defecto)\r\n - [Private](#private)\r\n - [Protected](#protected)\r\n- [Convertir Proyecto a Typescript](#convertir-proyecto-a-typescript)\r\n - [Refactorización](#refactorización)\r\n- [Patrones de diseño](#patrones-de-diseño)\r\n- [Objetivos de los patrones de diseño](#objetivos-de-los-patrones-de-diseño)\r\n - [Historia sobre Patrones de diseño](#historia-sobre-patrones-de-diseño)\r\n - [Beneficios de utilizar patrones de diseño](#beneficios-de-utilizar-patrones-de-diseño)\r\n - [Desventajas de utilizar patrones de diseño](#desventajas-de-utilizar-patrones-de-diseño)\r\n- [Categorías de patrones de diseño](#categorias-de-patrones-de-diseño)\r\n - [Patrones Creacionales](#patrones-creacionales)\r\n - [Patrones estructurales](#patrones-estructurales)\r\n - [ Patrones de comportamiento](#patrones-de-comportamiento)\r\n- [Patrón Singleton y casos de uso](#patrón-singleton-y-casos-de-uso)\r\n- [Implementación del patrón Singleton con Typescript](#implementación-del-patrón-singleton-con-typescript)\r\n - [Es genial con Typescript](#es-genial-con-typescript)\r\n - [Observer (patrón de diseño)](#observer-patrón-de-diseño)\r\n - [Objetivo](#objetivo)\r\n - [Motivación](#motivación)\r\n - [Participantes](#participantes)\r\n- [Implicaciones sobre Observer](#implicaciones-sobre-observer)\r\n- [Implementación del patrón Observer con Typescript](#implementación-del-patrón-observer-con-typescript)\r\n- [Casos de uso del patrón Observer: Redux](#casos-de-uso-del-patrón-observer-redux)\r\n - [Conceptos básicos](#conceptos-básicos)\r\n- [Patrón Decoratory casos de uso](#patrón-decoratory-casos-de-uso)\r\n - [Motivation](#decorator-motivation)\r\n - [Aplicabilidad](#decorator-aplicabilidad)\r\n - [Estructura](#decorator-estructura)\r\n - [Participantes](#decorator-participantes)\r\n - [Colaboraciones](#decorator-colaboraciones)\r\n - [Consecuencias](#decorator-consecuencias)\r\n - [Implementación](#decorator-implementación)\r\n\r\n## ¿Cómo llega un script al navegador?\r\n\r\nEl **DOM** es la representación que hace el navegador de un documento HTML.\r\n\r\nEl navegador interpreta el archivo HTML y cuando termina de transformarlo al DOM se dispara el evento DOMContentLoaded lo que significa que todo el documento está disponible para ser manipulado.\r\n\r\nTodo script que carguemos en nuestra página tiene un llamado y una ejecución.\r\n\r\nTanto con **async** como **defer** podemos hacer llamados asíncronos, pero tiene sus diferencias:\r\n\r\n- **async**. Con async podemos hacer la petición de forma asíncrona y no vamos a detener la carga del DOM hasta que se haga la ejecución del código.\r\n- **defer**. La petición es igual, asíncrona como en el async pero va a deferir la ejecución del Javascript hasta el final de que se cargue todo el documento.\r\n- **scripts embebidos**: el navegador carga línea a línea el HTML y cuando se encuentra un código entre scripts va a detener su ejecución hasta que haya procesado todo el script.\r\n\r\nHay que tener en cuenta que, cuando carga una página y se encuentra un script a ejecutar, toda la carga se detiene. Por eso se recomienda agregar tus scripts justo antes de cerrar el body para que todo el documento este disponible.\r\n\r\n

Decorator Desgin Patterns

${movie.title}

${this.currentAd.title}

JavaScript Profesional

Precio del Bitcoin

Decorator Desgin Patterns

Precio del Bitcoin

${this.currentAd.title}