Conclusiones del curso

Clase 47 de 55 • Fundamentos de JavaScript 2018

Contenido del curso

Introducción al curso

Primeros pasos en JavaScript

Estructuras de Control y Funciones

Arrays

Programación Orientada a Objetos en JavaScript

Asincronismo

Juego de HTML

Complementos

Tomar examen

Resumen

Felicitaciones, ya tienes unas bases sólidas para continuar aprendiendo frameworks más avanzados basados en JavaScript.

Comentarios

Javier Romero

student•

pues Excelente la parte donde enseña lo básico ósea me refiero a las primeras clases, pero los tutoriales del juego simón dice y el asincronismo no lo entendí muy bien, me quede con tantas dudas que la verdad no se que hacer y como responder a los demás cursos y eso es lo que me preocupa mucho 😥, no se ustedes pero espero con el tiempo comprender todo lo que hizo sacha en el proyecto de Simón dice o díganme compañeros que aconsejan, quiero ver sus mensajes motivadores.

Martin Paez

student•

No te desanimes. Es cuestion de volver a repertir cada parte del tutorial del juego e ir haciendo apuntes de lo que resuelve en cada parte. Si en algun tema te sobre pasa, vuelve a la terioria basica y regresa a este punto. A mi al principio me costo mucho como tu comentas, pero repasando y volviendo a repertir cada parte donde me atascaba fui comprendiendo mejor las cosas. Sigue repasando

Juan Daniel Martínez Navarro

student•

Así es la programación compañero, no creo que sea algo nuevo para nadie el no entender lo que estás haciendo cuando tocas temas nuevos. Recuerda que esto no es como las matemáticas donde empiezas sumando, restando y multiplicando, luego pasas a problemas, ecuaciones sencillas, cálculo etc etc. En la programación se mezclan todos los conceptos y paradigmas cuando estás aprendiendo, y al principio se necesita tener fe ciega en quien está impartiendo el tema, posteriormente llega un momento en el que lo entiendes todo.

Recuerda que cada determinado tiempo es bueno volver a repasar los fundamentos aún cuando estés haciendo proyectos más profesionales, te soprendería lo fácil que será para ti comprender los temas que antes creías nunca poder dominar, y también lo más importante es la constancia, siempre he dicho que programar es como ir al gimnasio, llegas a faltar una semana y pierdes mucho progreso, y tu avance será muuuy lento. Ánimo y no desistas ;) experimenta lo que aprendiste, intenta aplicar la lógica como tu la entendiste y no pasa nada si el programa truena, así se aprende.

cristhian joel Acevedo Tipian

student•

Excélsior

E. Jonathan Marza Mayta

student•

Excélsior!!

Rodrigo Oswaldo Hernandez Gonzalez

student•

Un gran maestro un gran curso

Pablo Domínguez Durán

student•

Un curso largo, doloroso pero súper necesario!

José Manuel Velázquez Susunaga

student•

Grande Pablito! Saludos desde Veracruz:)

Dennis Soliz

student•

SuperNecessary

Jorge Delfino

student•

Muy bueno el curso, mucho mas claro y mejor explicado que el del año pasado.
Cada vez que vea codigo javascript voy a pensar en Sacha diciendo “no voy a bloquear el event loop”

Fabio Andres Arango Grajales

student•

Buenisimo

Sergio Ivan Santacruz Madrigal

student•

Sacha, Excelente curso, muy bien explicado, el ejercicio muy productivo.

Diego Alejandro Aguilera Martinez

student•

Mi pequeño aporte una pequeña animación

.celeste, .violeta, .naranja,.verde{
          transition: .2s ease-out;
      }
      .celeste.light, .violeta.light, .naranja.light, .verde.light{
        animation: aumentar .3s ease-out;
      }
      @keyframes aumentar{
          0%{
              transform: scale(0.95)
          }
          100%{
              transform: scale(1.03)
          }
      }

José A Azocar

student•

Muy buen curso aunque hubo temas que me explotaron la cabeza hehe pero allí vamos de a poco.

Jose Ortiz

student•

ya somos dos jajaja espero conforme ir haciendo proyectos mejorar mi logica :)

Jesús David Cuéllar

student•

Muy buen curso. Me gusto. Aun tengo miedito de no usar todo este conocimiento y se me olvide pero se que debo ponerlo en practica a pesar de que me cuesta bastante; aun asi este curso me motiva a seguir, antes ni dos lineas de codigo escribia jeje.

Angélica Rocha

student•

gracias por todas las enseñanzas sacha, muy buen curso.

Julián David Palacios Cárdenas

student•

Al comienzo me costó mucho, no entendía muy bien, hice hasta la mitad del curso y lo detuve, luego salió el de JS básico. lo hice y volví a empezar este, poco a poco fui entendiendo hasta que lo completé, excelente curso, recuerden en ocasiones hay temas difíciles, vale la pena tener paciencia y perseverar, saludos! :)

Christian Velázquez

student•

Aprendí mucho. Gracias al profesor Sacha, por lograr explicar de una manera dinánimca, y "coloquial", para los "primerizos". Agradezco, a toda la comunidad de Platzi, por ayudarme (cuando tenía problemas con el código). Ahora, a seguir aprendiendo, y ayudar a la comunidad (como me ayudaron a mí).

Ignacio Ivan Havelka

student•

El curso me parecio bastante bueno e interesante, haaasta que llegamos a asincronismo, una vez entrando a este apartado, ya comenzo a ser todo mas complejo, creo que fue tocado bastante por encima el tema. Ojala mientras avance en el curso de js, expliquen mas a profundidad estos temas ya que no me han quedado muy claros. Si no, a volver a ver el curso. Muchas gracias, excelente profe!

Oscar Mejía Sánchez

student•

Excelente curso, muy bien explicado y todo muy claro. Como mejora propondría que previo a resolver el problema, primero se definan los pasos, ya que permitiría conocer la lógica antes del código.

Jhonanderson Tellez Parra

student•

aquí pongo mi código del reto, no es la gran cosa me tarde 2 días en lograrlo y me di cuenta que debo volver a html y css porque me falta mucho de maquetacion web.

y acá una imagen de como se ve.

const rojo = document.getElementById('rojo')
const azul = document.getElementById('azul')
const naranja = document.getElementById('naranja')
const verde = document.getElementById('verde')
const btnEmpezar = document.getElementById('btnEmpezar')
const level = document.getElementById('level')
const ULTIMO_NIVEL = 10

function empezarJuego(){
    window.juego = new Juego()
}

class Juego {
    constructor(){
        this.inicializar = this.inicializar.bind(this)//bind(this) atamos this a la funcion para que siempre que se llame this.inicializar this sea la clase juego
        this.cuentaRegresiva()
        /* this.generarSecuencia() */
    }

inicializar(){
    this.siguienteNivel = this.siguienteNivel.bind(this)
    this.elegirColor = this.elegirColor.bind(this)
    this.toggleBtnEmpezar()
    this.nivel = 1
    this.colores = {
        rojo,
        azul,
        naranja,
        verde
    }
}

toggleBtnEmpezar(){
    if(btnEmpezar.classList.contains('hide')){
        btnEmpezar.classList.remove('hide')
        btnEmpezar.textContent = 'Empieza capullo!'
    }else{
        btnEmpezar.classList.add('hide')
    }
}

generarSecuencia(){
    this.secuencia = new Array(ULTIMO_NIVEL).fill(0).map(n => Math.floor(Math.random() * 4))
}

siguienteNivel(){
    this.subnivel = 0
    this.iluminarSecuencia()
    this.agregarEventosClick()
}

iluminarSecuencia(){
    for(let i = 0; i < this.nivel; i++){
       let color = this.transformarNumeroAColor(this.secuencia[i]) 

       setTimeout( () => this.iluminarColor(color), 800 * i)
    }
}

iluminarColor(color){
    this.colores[color].classList.add('light')

    setTimeout( () => this.apagarColor(color), 400)
}

apagarColor(color){
    this.colores[color].classList.remove('light')
}

transformarNumeroAColor(num){
    switch(num){
        case 0: 
             return 'rojo'
        case 1: 
             return 'azul'
        case 2: 
             return 'naranja'
        case 3: 
             return 'verde'    
    }
}

transformarColorANumero(color){
    switch(color){
        case 'rojo': 
             return 0
        case 'azul': 
             return 1
        case 'naranja': 
             return 2
        case 'verde': 
             return 3    
    }
}

agregarEventosClick(){
    for(let btnColor in this.colores){
        this.colores[btnColor].addEventListener('click', this.elegirColor)        
    }
}

eliminarEventosClick(){
    for(let btnColor in this.colores){
        this.colores[btnColor].removeEventListener('click', this.elegirColor)
    }
}

elegirColor(ev){
    const nombreColor = ev.target.dataset.color 
    const numeroColor = this.transformarColorANumero(nombreColor)
    this.iluminarColor(nombreColor)
    if(numeroColor === this.secuencia[this.subnivel]){
        this.subnivel++
        if(this.subnivel === this.nivel){
            this.nivel++
            this.eliminarEventosClick()
            this.nivelActual(this.nivel)
            if(this.nivel === (ULTIMO_NIVEL + 1)){
                this.ganoJuego()
                this.nivelActual(ULTIMO_NIVEL);
            }else {
                setTimeout(this.siguienteNivel, 1000)
            }
        }      
    }else {
        this.perdioJuego();
        this.nivelActual(1);
    }
}

ganoJuego() {
    swal('Jhonander dice', 'Enhorabuena jilipollas los has logrado!', 'success')
    .then(this.inicializar)
}

perdioJuego() {
    swal('Jhonander dice', 'la has cagado capullo!', 'error').then(() => {
        this.eliminarEventosClick()
        this.inicializar()
    })
}    

nivelActual(num){
    level.textContent = `Nivel: ${num}`
}

cuentaRegresiva(){
    let j = 0
    let time
    for(let i = 3; i >= 0; i--){
        while(j <= 3 ){
            j++
            time = j - 1
            break
        }
        setTimeout(() => {
            btnEmpezar.classList.add('btn-start-count')
            btnEmpezar.textContent = i
            if(i === 0){
                btnEmpezar.classList.remove('btn-start-count')
                this.inicializar()
                this.generarSecuencia()
                setTimeout(this.siguienteNivel, 500)
            }
        }, 1000 * time)
    }
}



}

Rohny Mantilla

student•

Que curso me recomiendan seguir después de este para profundizar en JavaScript por el lado del front-end?

Korpi delfin

student•

¡Hola!

¿Hay algo que te interese aprender construir?

Puedes irte por toda la escuela de JavaScript y ser un FullStack JavaScript :D

Francisco Ponce

student•

Hola Runy,

Todo depende. En lo personal me gustaría seguir la ruta de la Escuela de Desarrollo Web, en algún punto toca el lado Frontend con JavaScript y es muy completo. Pero ya que estas del lado de Fundamentos podrías seguir el proyecto de la Escuela de Javascript

Alexander Vega

student•

Gracias Sacha, buen curso, muy bien explicado el curso, ahora a poner en practica lo aprendido y por supuesto, nunca parar de aprender.

Leisy Karina Algarra Fernandez

student•

Genial, el curso me encanto.Solo que hay muchos conceptos que aun no me quedan claros por lo tanto seguiré investigando y practicando.

Mauricio Lopez Agudelo

student•

Hola comunidad, una pregunta, hay algún curso donde se enseñe como interactuar más con el DOM, como hacer animaciones etc?
Agradecería la respuesta y si no es así, que fuentes puedo consultar para eso.
Muchas gracias!

Carlos Sampol

Team Platzi•

Si quieres aprender a manipular mas el DOM te recomiendo el curso de JQuery a JavaScript. https://platzi.com/clases/jquery-js/

Y para animaciones: https://platzi.com/clases/animaciones-web/

Sebastián Riátiga

student•

Estuvo súper. Debo decir que me costó bastante esfuerzo y tuve que repetir varias clases, varias veces, pero esa es la idea, hacerlo hasta aprender. No me la creo que haya hecho todo este recorrido. Ahora, lo que falta.... :)

Isaias Chávez

student•

Si no le entendieron mucho a la primera, esperen 1 semana y vuelvan a verlo, se les hace mucho más corto y lo entienden mucho mejor <3

Henry Caicedo Velasco

student•

creo q tomare tu consejo pero de max dos dias

.celeste, .violeta, .naranja,.verde{
          transition: .2s ease-out;
      }
      .celeste.light, .violeta.light, .naranja.light, .verde.light{
        animation: aumentar .3s ease-out;
      }
      @keyframes aumentar{
          0%{
              transform: scale(0.95)
          }
          100%{
              transform: scale(1.03)
          }
      }

const rojo = document.getElementById('rojo')
const azul = document.getElementById('azul')
const naranja = document.getElementById('naranja')
const verde = document.getElementById('verde')
const btnEmpezar = document.getElementById('btnEmpezar')
const level = document.getElementById('level')
const ULTIMO_NIVEL = 10

function empezarJuego(){
    window.juego = new Juego()
}

class Juego {
    constructor(){
        this.inicializar = this.inicializar.bind(this)//bind(this) atamos this a la funcion para que siempre que se llame this.inicializar this sea la clase juego
        this.cuentaRegresiva()
        /* this.generarSecuencia() */
    }

inicializar(){
    this.siguienteNivel = this.siguienteNivel.bind(this)
    this.elegirColor = this.elegirColor.bind(this)
    this.toggleBtnEmpezar()
    this.nivel = 1
    this.colores = {
        rojo,
        azul,
        naranja,
        verde
    }
}

toggleBtnEmpezar(){
    if(btnEmpezar.classList.contains('hide')){
        btnEmpezar.classList.remove('hide')
        btnEmpezar.textContent = 'Empieza capullo!'
    }else{
        btnEmpezar.classList.add('hide')
    }
}

generarSecuencia(){
    this.secuencia = new Array(ULTIMO_NIVEL).fill(0).map(n => Math.floor(Math.random() * 4))
}

siguienteNivel(){
    this.subnivel = 0
    this.iluminarSecuencia()
    this.agregarEventosClick()
}

iluminarSecuencia(){
    for(let i = 0; i < this.nivel; i++){
       let color = this.transformarNumeroAColor(this.secuencia[i]) 

       setTimeout( () => this.iluminarColor(color), 800 * i)
    }
}

iluminarColor(color){
    this.colores[color].classList.add('light')

    setTimeout( () => this.apagarColor(color), 400)
}

apagarColor(color){
    this.colores[color].classList.remove('light')
}

transformarNumeroAColor(num){
    switch(num){
        case 0: 
             return 'rojo'
        case 1: 
             return 'azul'
        case 2: 
             return 'naranja'
        case 3: 
             return 'verde'    
    }
}

transformarColorANumero(color){
    switch(color){
        case 'rojo': 
             return 0
        case 'azul': 
             return 1
        case 'naranja': 
             return 2
        case 'verde': 
             return 3    
    }
}

agregarEventosClick(){
    for(let btnColor in this.colores){
        this.colores[btnColor].addEventListener('click', this.elegirColor)        
    }
}

eliminarEventosClick(){
    for(let btnColor in this.colores){
        this.colores[btnColor].removeEventListener('click', this.elegirColor)
    }
}

elegirColor(ev){
    const nombreColor = ev.target.dataset.color 
    const numeroColor = this.transformarColorANumero(nombreColor)
    this.iluminarColor(nombreColor)
    if(numeroColor === this.secuencia[this.subnivel]){
        this.subnivel++
        if(this.subnivel === this.nivel){
            this.nivel++
            this.eliminarEventosClick()
            this.nivelActual(this.nivel)
            if(this.nivel === (ULTIMO_NIVEL + 1)){
                this.ganoJuego()
                this.nivelActual(ULTIMO_NIVEL);
            }else {
                setTimeout(this.siguienteNivel, 1000)
            }
        }      
    }else {
        this.perdioJuego();
        this.nivelActual(1);
    }
}

ganoJuego() {
    swal('Jhonander dice', 'Enhorabuena jilipollas los has logrado!', 'success')
    .then(this.inicializar)
}

perdioJuego() {
    swal('Jhonander dice', 'la has cagado capullo!', 'error').then(() => {
        this.eliminarEventosClick()
        this.inicializar()
    })
}    

nivelActual(num){
    level.textContent = `Nivel: ${num}`
}

cuentaRegresiva(){
    let j = 0
    let time
    for(let i = 3; i >= 0; i--){
        while(j <= 3 ){
            j++
            time = j - 1
            break
        }
        setTimeout(() => {
            btnEmpezar.classList.add('btn-start-count')
            btnEmpezar.textContent = i
            if(i === 0){
                btnEmpezar.classList.remove('btn-start-count')
                this.inicializar()
                this.generarSecuencia()
                setTimeout(this.siguienteNivel, 500)
            }
        }, 1000 * time)
    }
}



}

Conclusiones del curso

Introducción al curso

¡Alto! Tenemos una nueva versión de este curso para ti

Bienvenidos al Curso de Fundamentos de JavaScript

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

Variables

Variables: Strings

Variables: Números

Funciones

El alcance de las funciones

Objetos

Desestructurar objetos

Parámetros como referencia o como valor

Comparaciones en JavaScript

Estructuras de Control y Funciones

Condicionales

Funciones que retornan valores

Arrow functions

Estructuras repetitivas: for

Estructuras repetitivas: while

Estructuras repetitivas: do-while

Condicional múltiple: switch

Arrays

Introducción a arrays

Filtrar un array

Transformar un array

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

Cómo funcionan las clases en JavaScript

Modificando un prototipo

El contexto de las funciones: quién es this

La verdad oculta sobre las clases en JavaScript

Clases en JavaScript

Asincronismo

Funciones como parámetros

Cómo funciona el asincronismo en JavaScript

Cómo funciona el tiempo en JavaScript

¿Qué pasó con swapi.co?

Callbacks

Haciendo múltiples requests

Manejando el Orden y el Asincronismo en JavaScript

Manejo de errores con callbacks

Promesas

Promesas Encadenadas

Múltiples promesas en paralelo

Async-await: lo último en asincronismo

Juego de HTML

Comenzando el juego

Generando una secuencia de números

Iluminando la secuencia de colores

Obteniendo el input del usuario

Agregando la verificación del color elegido

Agregando los estados finales del juego

Conclusiones del curso

Complementos

Diferencias entre var, let y const

Memoización: ahorrando cómputo

¿Hace cuántos días naciste?

Funciones recursivas

Entiende los closures de JavaScript

Estructuras de datos inmutables

Cambiando de contexto al llamar a una función

¿Cuándo hace falta poner el punto y coma al final de la línea?