Curso JavaScript: 87. DOM: Ejercicios Prácticos | Botón de Scroll -

Поділитися
Вставка
  • Опубліковано 14 гру 2024

КОМЕНТАРІ • 159

  • @leomax522
    @leomax522 Рік тому +2

    Excelente explicación, magistral tu forma de transmitir conocimientos. Gracias por todo.

    • @jonmircha
      @jonmircha  Рік тому

      Con mucho gusto👋🏻😉

  • @Juankybi
    @Juankybi 4 роки тому +38

    muy buen ejercicio, me hecha humo mi cabeza. Tengo que colocarle un disipador. Hay otro canal que es Pildoras Informaticas, pero no da JavaScript. Ese Señor de ese canal, realiza cursos gratis como tu de Java y otros lenguajes. Digamos que ese señor y tu sois de lo mejor. Y eso que he visitado decenas de canales. Pero todos pecan de explicar las cosas con prisas y no como vosotros. Vosotros lo haceis despacito y bien, paso a paso. Ambos sois, para mi, motivacion suficiente para seguir en algo que ya pensé que jamas podria hacer... programar!

  • @EducacionCultura1992
    @EducacionCultura1992 Рік тому +2

    Excelente👏🏽

  • @MaxielJohannaCamargoGomez
    @MaxielJohannaCamargoGomez 4 роки тому +10

    Literalmente soy nueva en JS he realizado todos los ejercicios y ha sido todo un reto. Nunca antes había realizado algo igual, básicamente copio todo tal como lo hace el profe, pero gracias a seguir todo el curso he logrado ir desarrollando más la lógica y entender el porque se usa determinada parte del lenguaje para solucionar el problema o reto que se tenga. Mil gracias profe, al menos ahora abro un archivo JS y entiendo lo que veo. ETERNAMENTE AGRADECIDA

  • @Wiiiiizard
    @Wiiiiizard 2 роки тому +1

    🧙‍♂Muchas gracias, muy buen curso!!!

  • @gastontimchuk2295
    @gastontimchuk2295 9 місяців тому +1

    Muy bueno el ejercicios yo lo pude aplicar de otra manera a continuacion se los dejo por si les sirve. Grande Jon!
    d.addEventListener("scroll", (e) => {
    const html = d.querySelector("html");
    const scrollYes = html.getBoundingClientRect();
    const scroll = d.querySelector(".button-scroll");
    console.log(scrollYes);
    if (scrollYes.y < -200) {
    scroll.classList.remove("disabled");
    scroll.classList.add("enabledscroll");
    } else {
    scroll.classList.remove("enabledscroll");
    scroll.classList.add("disabled");
    }
    });

  • @danielhincapievargas4551
    @danielhincapievargas4551 Рік тому +2

    Hola Jon, gracias a tus clases aprendo JS a mi ritmo y con una explicación excelente. Solo quería comentar que el scrollTo() ya te hace por defecto una transición suave. Entonces en el caso de este ejercicio solo tienes que poner w.scrollTo(0, 0)

  • @gabrielcarrasco5650
    @gabrielcarrasco5650 3 роки тому +1

    Aporta mucho valor!

  • @Ni_idea_de_tecnologia
    @Ni_idea_de_tecnologia Рік тому

    Muy buen ejercicio y muy fácil de ejecurar si entendemos las partes del documento y las de window.
    Muchas gracias por sus explicaciones Sr. Mircha

  • @carloscontreras6051
    @carloscontreras6051 3 роки тому +1

    A full con los ejercicios!!!!!!
    Un comentario, yo hice el if con scrollY, buscando encontre ese en vez de pageYOffset, segun "canIuse", tienen el mismo soporte
    Y acabo de ver que varios lo hicieron igual...

  • @instintoimagen
    @instintoimagen 2 роки тому +1

    muchas gracias! es el mejor #curso de #JavaScript

  • @davidmena5137
    @davidmena5137 3 роки тому +1

    Gracias totales docente, saludos desde Perú.

  • @nickname1000
    @nickname1000 2 роки тому +1

    ¡Gracias!

  • @luisluna8900
    @luisluna8900 2 роки тому +1

    sin ver la solucion lo que utilice fue la propiedad w.scrollY y apartir de ahi agregar o remover, como colocque un enlace denteo para dirigir el desplazamiento, pero este modo esta super cool , siempre aprendiendo nuevas cosass, graciasssssss mil

  • @leonardoprone5967
    @leonardoprone5967 2 роки тому +1

    Excelente clase, Jon, muy útil! Muchas gracias!

  • @Isaaczfg
    @Isaaczfg 3 роки тому +1

    Esta son mis soluciones a los ejercicios hasta el momento
    Sitio: priceless-jackson-fb66b4.netlify.app/
    GitHub (Para ver codigo): github.com/isaacFierrog/ejerciciosDOM.git
    A seguir aprendiendo compañeros!!!

  • @carlosjavierorozco8418
    @carlosjavierorozco8418 2 роки тому +1

    Uff estos ejercicios estan fenomenales! Muchas gracias por el esfuerzo puesto en este curso!

  • @Bisson156
    @Bisson156 3 роки тому +2

    Muy bueno Jon muchas gracias nuevamente! El portfolio esta quedando brutal gracias a todo lo que nos enseñas.
    Buen fin de semana!

  • @tongastonga22
    @tongastonga22 11 місяців тому

    Gracias Jon !

    • @jonmircha
      @jonmircha  11 місяців тому +1

      Con gusto👋🏻😉

  • @johnherrera5913
    @johnherrera5913 3 роки тому +1

    Master! Muchas gracias, tus tutoriales son realmente buenos.

  • @timawid
    @timawid Рік тому +1

    Excelente ✅

  • @nachosanabria6942
    @nachosanabria6942 2 роки тому

    gracias excelente curso

  • @danielacatriel2543
    @danielacatriel2543 3 роки тому +1

    muy bueno!

  • @Dousan87
    @Dousan87 3 роки тому +1

    87 clases (Videos) despues por fin aprendí por lo que hace mucho tiempo quería estudiar JS, hacer ese bendito botón. (es raro lo sé, pero era una funcionalidad que siempre quise aprender de base y no siguiendo un tutorial) jajaj, muchas gracias maestro!

  • @srcuyo
    @srcuyo Рік тому +1

    hola soy tu amigo y estudiante digital! Gracias por tanto

  • @carlosvelasquez1913
    @carlosvelasquez1913 2 роки тому +1

    Excelente video amigo , explicas de una manera increíble gracias por compartir tus conocimientos , sigue así :)

  • @fadelsalem4172
    @fadelsalem4172 2 роки тому +1

    Genial. Ademas de window.pageYOffset y document.documentElement.scrollTop
    hay tambilen: window.scrollY.
    Es solo para dar comentarios , Jon 🙂

  • @javierovallea3836
    @javierovallea3836 3 роки тому

    Quiero agradecerle Profesor, este curso me a ayudado mucho a superarme.

  • @hernangarcia77
    @hernangarcia77 3 роки тому

    Eres grande Mircha!!! Muchas Gracias!!

  • @addevmoises
    @addevmoises 3 роки тому

    que genial, tendré en cuenta este ejercicio para realizar en mis proyectos

  • @totenkorpf
    @totenkorpf 3 роки тому

    muy bueno jon! estaba tratando de hacer un navbar que cuando el usuario haga scroll hacia abajo tenga un bg-color determinado y cuando el scrollTop este en la posicion 0 se transparente y este video me vino como anillo al dedo!

  • @victormontivero1998
    @victormontivero1998 3 роки тому

    Gran video, este si lo había podido razonar solo, algunos de los anteriores no pude, pero aún así voy aprendiendo mucho de la forma en la que se hacen las cosas y cuando termine de hacer el curso voy a probarme de nuevo a hacer todos los ejercicios para ver si he adquirido más lógica y tratar de hacer algunas variaciones.

  • @2012patry
    @2012patry 10 місяців тому +1

    pageYOffset me dice que esta en desuso... deprecado... seria que puedo utilizar scrollY ?

  • @genecles
    @genecles 4 роки тому

    Hola. Buenisísima tu explicación de este tema como siempre. Saludos.

  • @danielfabiani4468
    @danielfabiani4468 2 роки тому

    Gracias Jon, en estos ejercicios se ve la importancia de saber algo de CSS. Saludos

  • @RetromanDVJ
    @RetromanDVJ Рік тому

    Gracias! tendrás algún video similar pero con un div en el centro y que tenga contenido con scroll horizontal ? Saludos.

  • @miguelantonioescuderoperal7485
    @miguelantonioescuderoperal7485 4 роки тому

    Maestro mircha que buen video, logre hacerlo algo parecido a su codigo tuve que investigar sobre los eventos del scroll para poder resolverlo y si lo consegui , gracias JonMircha

  • @TheDawnBreaker1104
    @TheDawnBreaker1104 3 роки тому +1

    Gracias Jon, una pregunta cuando se recomienda colocar {} en los import del DOM y cuando no. Gracias

    • @jonmircha
      @jonmircha  3 роки тому +1

      destructuración cuando no usas default, cuando sí lo usas no es necesario la destructuración

    • @TheDawnBreaker1104
      @TheDawnBreaker1104 3 роки тому +1

      @@jonmircha Muchas gracias, estoy disfrutando al máximo este curso

  • @baironguerra5405
    @baironguerra5405 3 роки тому

    muy bueno, gracias jon

  • @lucasciapparelli4974
    @lucasciapparelli4974 3 роки тому +1

    Como hago para que la flecha ( ⬆ ) se me ponga negrita simple. Porque se me pone con fondo celeste y queda muy feo.

    • @jonmircha
      @jonmircha  3 роки тому

      con CSS aplícale el color que quieras al botón

  • @TheWaalteers
    @TheWaalteers Рік тому

    Hola! porque cuando escuchas el evento 'scroll' lo haces en referencia del objeto 'windows' y no desde el 'document'? probé cambiandolo al document e igualmente funciona, pero no se si habrá alguna diferencia o tendrá algun problema mas adelante.

  • @AngelSalazar-uf5fk
    @AngelSalazar-uf5fk 3 роки тому +2

    Amigo jon, puedes responderme cuando puedas. Yo lo hice con mi lógica de la siguiente manera y me funciona perfectamente, pero si bien algo he aprendido en este mundo de la programación es a desconfiar de la lógica inmediata jaja, entonces me gustaría saber si está mal hacerlo de esta forma:
    d.addEventListener("scroll", (e) => {
    if(scrollY >= 400){
    $btnscroll.classList.add("hidden")
    }else if(scrollY {
    window.scrollTo(0,0);
    })
    })

  • @miktl
    @miktl 2 роки тому +1

    Maestro para el scroll yo lo hice con window.scrollY funcionó pero esta bien o hay algún problema?
    para el boton use la etiqueta "a" con el href a seccion 1, para no usar js.

  • @jebusxuy
    @jebusxuy 2 роки тому

    El profe Jon creando los estilos para el botón y yo reutilizando todo lo del anterior, solo no sé si estuvo bien que usara la propiedad ScrollY, en lugar de las que se usaron para resolver el ejercicio. Voy por mi tercer intento de este curso y al fin se me están grabando las cosas en mi memoria.

  • @dvesc
    @dvesc 4 роки тому +2

    @jonmircha, tengo una duda con el codigo CSS, yo he estado creando archivos separados por cada ejercicio los cuales solo modifican los estilos de dichos ejercicios por ejemplo: "reloj.css" o "countdown.css" y asi, a su vez tengo un "index.css" donde esta el "formateo" y los estilos generales de la pagina como el estilo de la barra principal o el de las secciones.....mi duda es: Esto es bueno hacerlo? o es mejor tener todos los estilos en un solo archivo????

    • @jonmircha
      @jonmircha  4 роки тому

      YO prefiero todo en un archivo

  • @PalestinianCode
    @PalestinianCode 3 роки тому

    Top de top👍👍👍👍

  • @juancamiloparedeszamora8481
    @juancamiloparedeszamora8481 2 роки тому

    Excelente material, una pregunta; porque no se usó "window.scrollY" visto en clases anteriores para el ejercicio, ¿Hay algún problema si se hace con este atributo?

  • @kikemadrigalr
    @kikemadrigalr 4 роки тому

    saludos Jon, saludos a todos los compañeros. Paso a dejar mi solución para este ejercicio. Creo que es el que menos tiempo me ha tomado hacer. utilice un objeto window.scroll para asignar los valores que tomaría al hacer click en el botón. Y la transición de entrada y salida la hice con CSS.
    codepen.io/kikemadrigalr/pen/MWydQKw

    • @kikemadrigalr
      @kikemadrigalr 4 роки тому

      Justo right: calc() era todo lo que necesitaba para que mi ejercicio estuviese mucho mas optimo.. Pues por lo demás creo que en lineas generales lo hice muy similar. Gracias por seguir enseñándome algo nuevo cada día

  • @euronymous_
    @euronymous_ 4 роки тому +1

    para seleccionar el elemento del boton usé getElementById(button). Pero no me funciona. Cuando lo cambié a querySelector comenzó a funcionar ¿por que pasa esto?

    • @jonmircha
      @jonmircha  4 роки тому

      Si tu variable button tenía el # por eso no te funcionaba con getElementById

    • @euronymous_
      @euronymous_ 4 роки тому

      @@jonmircha la variable no tenia el #, aun así el metodo no funciona, cuando cambié el método por querySelector("#btn-scroll") comenzó a funcionar... no se que pasa.

    • @euronymous_
      @euronymous_ 4 роки тому

      @@jonmircha lo mismo ocurre en el siguiente ejercicio, uso getElementByid("btn-theme") no funciona, cuando cambio el método y coloco el # por supuesto que si funciona

    • @jonmircha
      @jonmircha  4 роки тому

      @@euronymous_ La I de Id va en mayúsculas

    • @euronymous_
      @euronymous_ 4 роки тому

      @@jonmircha buah, ese fue un error mio: en el código está con I en mayuscula: ya revise el nombre del id en la etiqueta, lo copié y lo pegué en la llamada a la funcion, pero nada...
      le pongo el # y cambio el método y funciona. ¿que podrá ser?

  • @yovanyescobarrojas2041
    @yovanyescobarrojas2041 3 роки тому

    profe mircha trate de hacerlo yo mismo pero no pude, solo hice que el boton apareciera y desapareciera al evento scroll ,y reconocer el boton al evento click, no savia de esa propiedad scrollto pero de todos modos no estaba tan perdido muchas gracias mircha, saludos desde colombia.

  • @echak6902
    @echak6902 2 роки тому

    Genial como siempre!! Hay alguna forma de hacer que el botón de scroll aparezca cuando tengamos un scroll en la ventana del 50% en lugar de en píxeles? Un saludo!!!

  • @oscarcordova9292
    @oscarcordova9292 3 роки тому +1

    Hola Jonatan, tengo una pregunta yo trabajo con laravelmix de laravel para procesar mi css y js. pero tengo problemas con detectar algunos eventos como el scroll. sabras que podría estar afectándome? saludos

    • @jonmircha
      @jonmircha  3 роки тому +1

      Ni idea, no conozco esa herramienta, revisa en la doc o en stackoverflow quiza alguién tenga esa misma peculiaridad

    • @oscarcordova9292
      @oscarcordova9292 3 роки тому +1

      @@jonmircha Gracias por el tiempo (y), saludos

  • @MrRampengu
    @MrRampengu 2 роки тому

    Aaa no me hace la transición suave en el método scrollTo(), me fije en stackoverflow pero supuestamente ya con el mismo código del vídeo se podría deber hacer..

  • @user87546
    @user87546 Рік тому

    Me molesta el punto y coma que se agrega con el autocompletar siempre al final. Saben si se puede sacar solo lo del punto y coma?

    • @fernandocaste6904
      @fernandocaste6904 Рік тому

      Si ahora JS desde el ECMA 2016 creo ya no es necesario el punto y coma

  • @srgiochu8936
    @srgiochu8936 4 роки тому

    Hola, como puedo hacer para que el boton que aprece en android y windows , muy bien, mantenga los estilos en MAC o en iphone ???

    • @jonmircha
      @jonmircha  4 роки тому

      Apple implementa cierta presentación a los botones tendrías que inspeccionar los estilos y resetearlos.

  • @alvaromorales3310
    @alvaromorales3310 3 роки тому

    Muy buen video! (y)

  • @ronaldm.r
    @ronaldm.r 4 роки тому +1

    El smooth no me funciona ni con el css, dicen que es una propiedad experimental, por ende no le funciona a todos los usuarios

  • @Juankybi
    @Juankybi 4 роки тому +2

    .scroll-top-btn {
    right: 10vw;
    tuve que dejarlo asi, porque no me funciona calc.
    Espero no ser muy pesado

  • @ronalddavidhernandezpadill8182
    @ronalddavidhernandezpadill8182 9 місяців тому

    Hice el botón de scroll a mi manera ahora veré la tuya

  • @matiasromera330
    @matiasromera330 3 роки тому

    Jon amigo y docente digital, caballero dorado de la casa de Géminis, me surgió una duda con éste vídeo respecto del anterior, pensé que íbamos a hacer como hicimos con el evento keydown de no incluirlo en el domcontentloaded y asignarlo al evento directamente, o capaz se puede de ambas formas, sinceramente me mareó un poco. Espero que puedas tirarme algún centro! 🤗

    • @jonmircha
      @jonmircha  3 роки тому

      Se pueden ambas Matias de Virgo 🤭

  • @rowilmoran7321
    @rowilmoran7321 3 роки тому +1

    me salió el ejercicio sin ver el video. =D, lo único es que puse un y por default sube hacia al top de la pagina .

  • @heimancastro1954
    @heimancastro1954 Рік тому +1

    🥰🥰🥰

  • @ryuzakibakura8229
    @ryuzakibakura8229 Рік тому

    no se por que a mi solo me funciona una sola vez el botón de subir, si lo uso y vuelvo a bajar, al precionarlo de nuevo ya no sube, tengo que racargar la pagina para que vuelva a funcionar una sola vez ={

  • @Juankybi
    @Juankybi 4 роки тому

    d.document.documentElement.scrollTop es siempre 0. Utilizo tambien como tu, Firefox. Pero nada. No me salen valores. He mirado en la documentacion y comentan que es una opcion no bien soportada por los navegadores. Ademas w.pageYOffset, me sale con muchos decimales.
    No entiendo, cómo en 3 meses de tu publicacion a esta parte haya tantos problemas en el codigo. Algunas soy yo, que soy novato, pero otras, da la sensacion que es por cambios del codigo de los navegadores. No se si me puedes confirmar o desmentir algo.

    • @pablocruz1365
      @pablocruz1365 4 роки тому

      Amigo, document se ha declarado desde el inicio, por lo tanto no es correcto poner d.document.documentElement, si no nada mas, d.documentElement. Saludos :)

  • @helipalacio8772
    @helipalacio8772 Рік тому

    👏👏👏 🙏🙏🙏

  • @estebanoctaviopavezllanca2385
    @estebanoctaviopavezllanca2385 4 роки тому +2

    Estimado adjunto ejercicio
    github.com/Stev-189/Ejercicio_DOM
    Gracias Profe.-

  • @DanielLozadaDev
    @DanielLozadaDev 4 роки тому +2

    No entiendo por qué nunca me funciona el behavior: smoot o scroll-behavior: smoot y eso que tengo todo actualizado :(

    • @jonmircha
      @jonmircha  4 роки тому +1

      En que navegador estas ?

    • @DanielLozadaDev
      @DanielLozadaDev 4 роки тому +1

      @@jonmircha Google Chrome

    • @jonmircha
      @jonmircha  4 роки тому +1

      @@DanielLozadaDev que raro

    • @DanielLozadaDev
      @DanielLozadaDev 4 роки тому +2

      @@jonmircha ya descubrí por qué era y es que en las opciones de rendimiento del equipo le había configurado para que tuviera mayor rendimiento y eso fue porque antes tenía solo 4GB de memoria RAM pero la expandí y olvidé activar las animaciones del sistema operativo..

    • @jonmircha
      @jonmircha  4 роки тому +1

      @@DanielLozadaDev :)

  • @braianrico4422
    @braianrico4422 3 роки тому +1

    🧙‍♂️🧙‍♂️🧙‍♂️

  • @devangel1698
    @devangel1698 4 роки тому

    Hola, muchisimas gracias por la enseñanza me sirvio de mucho, lo que no me funciona es el comportamiento smooth al hacer clic en el boton, lo unico distinto que uso es el manejador del evento 'click' asi objButton.addEventListener("click", () => { window.scroll({behavior: 'smooth', top: 0}) }); que podria ser ?? help me xD mi navegador es Chrome ultima versión
    PD: En Firefox me funciona, como hacerlo para que funcione en ambos ??? ni menciono mejor IE XD

    • @jonmircha
      @jonmircha  4 роки тому +1

      Súbelo a un codepen así platicadito no puedo saber que pasa

    • @devangel1698
      @devangel1698 4 роки тому

      @@jonmircha Gracias por responder Jon te dejo el codepen codepen.io/AMillanir/pen/XWXXQeM

    • @jonmircha
      @jonmircha  4 роки тому

      a mi me funciona :P

    • @devangel1698
      @devangel1698 4 роки тому

      @@jonmircha te funciona en chrome y en firefox ? Yo uso chrome

    • @jonmircha
      @jonmircha  4 роки тому +1

      Sí en ambos incluso en edge

  • @helipalacio8772
    @helipalacio8772 3 місяці тому +1

    👨

  • @edwina.espinaltaveras4222
    @edwina.espinaltaveras4222 3 роки тому +1

    para yo hacer que el boton subiera al tope tuve que crear un div arriba del header y luego hacer un ancla jajja
    lo cambiare a como esta en e video

    • @jonmircha
      @jonmircha  3 роки тому

      😉👍 lo importante es que lo hiciste

  • @federicoraulmaciasaparicio1339
    @federicoraulmaciasaparicio1339 4 роки тому +1

    Dejo la resolución del modo dark. codepen.io/Scipio14/pen/yLeNZLj

  • @brayanorellanos9367
    @brayanorellanos9367 3 роки тому +1

    scrollY da lo mismo

  • @YuriMayakoskiSivizaca
    @YuriMayakoskiSivizaca 4 роки тому

    Enlace a ejercicio con dos botones el de Jon y el mio github.com/mayakoski/exercisesDOM/tree/2530dfa355e635ba25aecb5e2a0bef0843259a86

  • @kunjilee9810
    @kunjilee9810 3 роки тому +1

    Aqui esta mi codigo profe!! codepen.io/Kunjo_/pen/qBaGPXa , unicamente te envie el javascript de el boton , por eso es que los demas ejercicios no funcionan