Curso Profesional de JavaScript

Clases del Curso Profesional de JavaScript

Instruido por:
Richard Kaufman
Richard Kaufman
Avanzado
6 horas de contenido
Ver la ruta de aprendizaje
Crea plugins para extender las funcionalidades del reproductor de video
Proyecto del curso
Crea plugins para extender las funcionalidades del reproductor de video

Comprende el funcionamiento del DOM. Crea plugins que den más funcionalidades al reproductor de vídeo. Implementa eventos en un objeto acorde a las necesidades de tu proyecto.

Curso Profesional de JavaScript

Curso Profesional de JavaScript

Progreso del curso:0/42contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/42contenidos(0%)

Introducción

Material Thumbnail

¿Qué significa ser un profesional de JavaScript?

07:13 min

Aspectos que destacan a un profesional

00:06 min

Material Thumbnail

Inicio del proyecto

09:44 min

Repaso de Conceptos Fundamentales

Material Thumbnail

Cómo llega un script al navegador

09:23 min

Material Thumbnail

Scope

11:50 min

Material Thumbnail

Los métodos call, apply y bind

13:25 min

Material Thumbnail

Herencia Prototipal

11:12 min

Cómo funciona JavaScript

Material Thumbnail

Parsers y el Abstract Syntax Tree

09:08 min

Material Thumbnail

Abstract Syntax Tree en Práctica

09:33 min

Material Thumbnail

Cómo funciona el JavaScript Engine

06:26 min

Material Thumbnail

Event Loop

12:00 min

Fundamentos Intermedios

Material Thumbnail

Getters y setters

06:54 min

Fundamentos Avanzados

APIs del DOM

Material Thumbnail

Fetch - Cómo cancelar peticiones

08:20 min

Material Thumbnail

IntersectionObserver

09:20 min

Patrones de Diseño

Material Thumbnail

Qué es un patrón de diseño

08:12 min

Material Thumbnail

Categorías de patrones de diseño

04:30 min

Material Thumbnail

Patrón Singleton y Casos de Uso

03:29 min

Material Thumbnail

Implementación del patrón Singleton

04:29 min

Material Thumbnail

¿Cómo funciona el Patrón Observer?

Material Thumbnail

Implementación del patrón Observer

09:54 min

Material Thumbnail

Casos de Uso del patrón Observer: Redux

03:18 min

Material Thumbnail

Patrón Decorator y Casos de Uso

08:15 min

Material Thumbnail

Implementación del patrón Decorator

07:38 min

Proyecto: MediaPlayer

Material Thumbnail

Implementación de plugin de Ads: Desplegando en consola

11:20 min

Material Thumbnail

Implementación de plugin de Ads: Desplegando en pantalla

07:08 min

Conclusiones

nuevosmás votadossin responder
Sebastian Moreno
Sebastian Moreno
Estudiante

Buenas tardes.

Alguno de ustedes les ha pasado esto?

  • “ts-node” no se reconoce como un comando interno o externo, programa o archivo por lotes ejecutable.
1
Jean Carlos Haro Luyo
Jean Carlos Haro Luyo
Estudiante

Alguien, que le haya pasado lo mismo que a mi y haya encontrado una solución
Me sale este error -> Uncaught (in promise) TypeError: Failed to execute ‘put’ on ‘Cache’: Partial response (status code 206) is unsupported
at updateCache

const VERSION = 'v1';

self.addEventListener('install', event => {
    event.waitUntil(precache())
});

self.addEventListener('fetch', event => {
    const request = event.request;
    if (request.method !== 'GET') {
        return;
    }

    event.respondWith(cachedResponse(request));

    event.waitUntil(updateCache(request));
});

async function precache () { 
    const cache = await caches.open(VERSION);
    return cache.addAll([
        /* './',
        './index.html',
        './assets/index.js',
        './assets/MediaPlayer.js',
        './assets/plugins/AutoPlay.js',
        './assets/plugins/AutoPause.ts',
        './assets/index.css',
        './assets/BigBuckBunny.mp4', */
    ])
}

async function cachedResponse (request) {
    const cache = await caches.open(VERSION);
    const response = await cache.match(request);
  
    return response || fetch(request);
}

async function updateCache (request) {
    const cache = await caches.open(VERSION);
    const response = await fetch(request);
    return cache.put(request, response);
}
1
Christian Alvarenga
Christian Alvarenga
Estudiante

¿Por qué this.media = config.el? ¿No podría pedir como parámetro solamente el elemento y poner this.media = el?
Así:

functionMediaPlayer(elemento) {
  this.media = elemento;
}

MediaPlayer.prototype.play = function () {
  this.media.play();
};

MediaPlayer.prototype.pause = function () {
  this.media.pause();
};

MediaPlayer.prototype.togglePlay = function () {
  if (this.media.paused) {
    this.play();
  } else {
    this.pause();
  }
};

const video = document.querySelector('video')
const player = new MediaPlayer(video);

const button = document.querySelector('button')
button.onclick = () => player.togglePlay();
1
Cayo Legal
Cayo Legal
Estudiante

El profe dice que renderMovies tiene que recibir un array en promise.race pero en los dos primeros no pasa un array, no entiendo

1
Jean Carlos Haro Luyo
Jean Carlos Haro Luyo
Estudiante

Una consulta, en mi caso, yo siempre he colocado el Script fuera del cierre del body, ¿está bien hacerlo así? o ¿es necesario que esté dentro del body, pero antes del cierre del body?

<html><head></head><body></body><scriptsrc=""></script></html>
2
Gabriel Hernández Valdez
Gabriel Hernández Valdez
Estudiante

Hola, tengo una duda , ¿por que algunas propiedades se escriben dentro del constructor y otra fuera de este?, ¿Cuál es la diferencia?

classBitcoinPriceimplementsSubject{
    observers: Observer[] = []

    constructor(){
        const el: HTMLInputElement = document.querySelector("#value")
        el.addEventListener("input", () => {
            this.notify(el.value)
        })
    }

1
Santiago Restrepo
Santiago Restrepo
Estudiante

Alguien por favor podría explicarme por qué el this hace referencia a la instancia de la clase MediaPlayer cuando se definen las funciones play y pause en el objeto player:

ejemplo1.PNG

Y por qué el this hace referencia al objeto player dentro del getter:

ejemplo2.PNG

No entiendo muy bien qué diferentes son estas 2 situaciones para que el this haga referencia a diferentes objetos. Thanks community 💚

1
Cayo Legal
Cayo Legal
Estudiante

Por que plugin.run del prototipo _initPlugins funciona? En ningun momento vi que MediaPlayer.js y AutoPlay.js se comunicasen entre si para que anduviese

1
Cayo Legal
Cayo Legal
Estudiante

Tengo una duda, en el min 5:03. En que parte del código MediaPlayer esta asociado con AutoPlay? Si se supone que se tendría que importar AutoPlay para usarlo porque es script type module, y no veo que se haya importado

1
Jose Andrés Blanco Reyes
Jose Andrés Blanco Reyes
Estudiante

Cuando buscas este curso en platzi te sale que es de nivel basico, pero cuando entras a verlo te sale que es avanzado.
Que otros cursos deberia llevara antes de este?

1