Curso JavaScript: 91. DOM: Ejercicios Prácticos | Responsive Tester -
Вставка
- Опубліковано 14 гру 2024
- En este video de ejercicios del #DOM de #JavaScript te enseño a hacer un #ResponsiveTester con #JavaScript.
💛 Aprende JavaScript aprendejavascr...
📖 Mis notas sobre JavaScript jonmircha.com/...
📖 Mis notas sobre ECMAScript jonmircha.com/...
📖 Mis notas sobre JavaScript Asíncrono jonmircha.com/...
📖 Mis notas sobre JSON jonmircha.com/...
📖 Mis notas sobre el DOM jonmircha.com/dom
📦 Códigos: github.com/jon...
🔔 Suscríbete al canal ua-cam.com/users/jo... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
🤲 Apóyame en Patreon / jonmircha
📫 Suscríbete a mi lista de correo tinyletter.com...
Aclaración para los que estén haciendo este ejercicio: las propiedades de la ventana que estamos abriendo width y height NO funcionan en google Chrome (al menos a mi no me funcionaron), pero si en Firefox. (Aviso por si a alguno le pasa lo mismo, para que no busquen al vicio)
Gracias Jon, difiero totalmente con el usuario anterior, me parecen muy didacticas tus clases y estoy aprendiendo muchisimas Gracias x lo ofrecido.
Gracias por tus comentarios, comparte para llegar a más gente ;)
@@jonmircha Voy viendo lentamente el curso, pero sólo hago algunos ejercicios y los comparo con como lo haces. Aunque no hago algunos de los ejercicios, mayormente me he llevado algunos trucos o tips que haces o mencionas y me sirven para aplicarlos en otros proyectos. Hasta donde he visto enseñas muy, muy buenas bases, los demás sabrán que tan bien aprovechan ese conocimiento porque tu curso tiene calidad de ser de paga. Ahora estoy leyendo el libro que recomendaste, Eloquent. Muchas gracias por el esfuerzo de hacer el curso.
Coincido que la didáctica es la correcta, acorde a las necesidades. Eres muy buen docente. Saludos
Gracias Joon!
👋🏻😉
🧙♂Muchas gracias, buenisimo el curso!!!
gracias maravilloso
👋🏻😉
Muchas tenquiu....Gracias en serio. Saludos
👋🏻😉
Excelente. Esta clase da las herramientas exactas para trabajar con formulario.. Entendía cada aspecto del ejercicio. No debo olvidar que los métodos son funciones y reciben parámetros.. Solo que los métodos del DOM, del BOM y del localStorage.. se desarrollan con una sola línea de programación.. Saludos desde Venezuela, sigo avanzando con el curso.. Vas rapidísimo. (08/09/2020)
gracias maestro
👋🏻😉
Cada clase que avanzo me doy cuenta que se me van grabando mejor los conceptos y puedo aplicarlos incluso antes de que des la explicación. Eso me anima mucho a seguir, ya que veo resultados. Pero nada de eso sería posible si tus explicaciones no fueran tan buenas. La verdad que se hace tan sencillo cuando lo enseñas. En lo único que me demoro es en buscar mis errores de tipado, jajaja, a veces hasta una hora pierdo revisando el código y la consola. Pero bueno, así se aprende también. Hiper mega archi recontra agradecido con usted, profe!. Dios lo bendiga :)
Felicidades 👏🏻👏🏻👏🏻 Bendiciones también para ti
Excelente metodologia, es increible lo que se puede aprender con este curso porque ademas de brindar los conocimientos teroricos , permites una parte practica la cual podemos aprender por medio de los ejercicios que es como realmente se aprende... y ademas de eso tus retos muy diverso y gracias a las pistas podemos dar mas facil con la tecla y no estar perdidos por ahi sin saber que buscar..... me ha encantado este curso realmente , muchas gracias profesor.
De nada, comparte para llegar a más personas.
Vaya tela, en 4 meses de bootcamp no me enseñaron a acceder a los inputs del formulario así...directamente accedíamos a ellos haciendo del submit el manejador de eventos mediante "click" y pulsando en este obteníamos los values de los inputs.
Para los que no os cierre la ventana poned e.preventDefault() después del tester.close()
👍🏻
ni asi me funciona el close
Gracias por todo lo que estoy aprendiendo con usted profe👏🏼💪🏼
De nada, comparte para llegar a más gente
Logre hacer el ejercicio, y despues de ver la solucion de Jonmircha, mejore el codigo ✅
Excelente!👋🏻😉
Excelente clase pero, como a muchos otros, el tester.close() no me cierra. No se si es del propio navegador que evita que se cierren ventanas. El caso es que no me resulta posible.
De todas formas muchas gracias por compartir su sabiruría Sr. Mircha
Recuerda que es la misma variable con que se cargó o se abrió la ventana (tester = window.open(....)
Jejeje organicé mi horario solo para disfrutar de este curso y poder sacarle el 1000% de provecho. Gracias Jon.
🙌
Gracias Jon, como siempre excelente todo 🧙♂️🧙♂️🧙♂️
Gracias por ver
No me canso de agradecer Jon. Estoy haciendo cada ejercicio por mi cuenta y luego los comparo y corrijo con el video que lo explica. Ahora, muchas de las diferencias con las que me encuentro tienen que ver con el tema de cuando se le asigna un id al elemento y cuando no. Entiendo que estas son las buenas prácticas con las que tenemos que programar. Recomiendas algún material de estudio en el cual pueda aprender más acerca de esto?
Realmente es cuestión de gusto, para JS da lo mismo si seleccionas un elemento por su id o por su class
Buenísimos tus ejercicios. Estoy cogiendo ideas para los proyectos que programe!!
Excelente!
Gracias Jon! Todo fantástico. Gracias por enseñarnos!
En navegador Google no me funciona el método close() pero en Firefox si.
¿Alguien con el mismo problema? ¿Soluciones?
Tampoco me funciona la parte del close(), lo solucionaste al fin amigo ? edit: Funciona con algunas paginas con otras no.
hola, a mi me pasa lo mismo, solo que a veces si funciona el metodo close() y a veces no, pero no vea que sea funcional así, osea deberia anda siempre y probe con el firefox y no funciona
Tengo el mismo inconveniente, estoy usando Brave, lo probe en Chrome (basado también en chromium) pero tampoco me funciono y adicionalmente me lleve la sorpresa de que muchos de los componentes (el reloj, la alarma, etc) no aparecían, probe en Firefox y si funciono 😕
Segun lei en StackOverflow, los navegadores como Brave y Chrome previenen esa acción para evitar vulnerabilidades
También es depende a la página a la cual quieras ingresar, por ejemplo cuando pongo la URL de facebook no me funciona el .close pero con UA-cam si
mircha eres el mejor jaja hasta estaban hablando de ti en un grupo de telegram :3 dije waoo yo que voy lejos mira estas personas hablando de mi querido profesor
😮
Que bien Jonathan!! muchisimas gracias:)
De nada!
Vamos como la tortuga, lento pero seguro jajajaja . Mil gracias por tu contenido. A ver si este año si terminamos todo el curso :)
;)
Se me presento un error "Uncaught TypeError: Cannot set property 'innerHTML' of null".. Tuve que colocar la etiqueta al principio del documento HTML, y si funcionó.. Como se podría evitar esto?.. Si coloco la etiqueta script antes de cerrar la etiqueta body.
Seguro tienes un error de dedo en tus nombres de variables o funciones lo que te dice es que no puede aplicar innerHTML a algo que esta nulo o inexistente
JonMircha otra consulta disculpa por que en la validacion del if : if(e.target === form.cerrar ) no uso if(e.target.matches(cerrar) cual es la diferencia maestro
la primera estas comparando el nodo, en la de matches comparas el selector
@@jonmircha muchas gracias por aclararme la duda
al dia de hoy no me funciona el método close() para cerrar la ventana. Probé en chrome y en edge. Alguien sabe como que sucede? hay varios que tienen el mismo problema. Estoy googleando pero no pillo nada concreto. saludos a todos. La pestaña es como que recargara, desaparece y luego vuelve aparecer en una fracción de menos de 1 segundo.
Funciona sólo en ventanas que abras con JS, no puedes cerrar otras ventanas
@@jonmircha profe Jon..si la ventana es la misma que abro con el código. Tal cual en el vídeo. De hecho comparo mi consigo con el suyo y está igual. El método Open() funciona. Pero al cerrar la misma ventana que se abre con el método close(). No sé cierra, la ventana realiza un pequeño pestañeo pero queda abierta. 🤔
@@cristianpino4862 Lo solucionas colocando "e.preventDefault();" justo después "tester.close();"
@@javi_el_dinamico1023 Gracias bro!
@@cristianpino4862 Con guto, bro.
Saludos.
Una pregunta jon, el ".matches" se suele usar con nombres de selectores, y el "===" con los elementos directamente?
Sí
@@jonmircha muchas gracias! Por cierto, feliz navidad y año nuevo, saludos desde argentina!
gracias jonMircha por tus clases desde casa
De nada :)
Hola profesor, vengo del futuro jaja
Resolví el ejercicio con una nueva propiedad del navigator que es userAgentData y me funcionó muy bien para mi equipo Windows en el Microsoft Edge y justo cuando creí que ya no se ocuparía los objetos de validación que mostró me doy cuenta que no, la propiedad no sirve para iphone (y ya no quise probar con otros navegadores jaja), quizá más en el futuro arreglen eso.
Así que mejor me quedaré con su explicación, muchas gracias por compartir ese conocimiento :)
Espero que pronto llegue a los 100k ya falta poco, cuídese.
😮 no la conocía 🤯
Me acabo de dar cuenta q en el botón hamburguesa no me salen las dos primeros opciones ni el reloj ni los eventos del teclado que creen q pueda ser y revisado el código muchas veces y comparado con el de Jon y esta igual, solo he revisado el css por el java no tiene nada q ver con los estilos del panel verdad?
😮
mmm revisá que el código de html no tenga error en el menú (el que se abre con el boton de hamburguesa), que cada apertura tenga su cierre, es común que uno se pase, y por otro lado revisá el css en cuanto a medidas, capaz te lo está cargando pero más arriba. podrías probar tu página con el inspector de elementos
Jon, buenas tardes. Consuta, si declaramos e.preventDefault() porque envia el formulario ?
no debería, quiza tienes error en el nombre de la variable o selector de tu form
@@jonmircha lo digo por el ejercicio del video, se declaró e.prevent Default() para que no se envie (min 11:03) pero a pesar de eso, al final se envia, no debería haber algún método comtrario a preventeDefault ?
yo investigue en la MDN y en un ejemplo pude ver que en el ejemplo crean una variable con los valores opcionales, en este caso seria el innerWidth y el Height es buena practica esa?
No te entiendo pero pasa el link del código, aunque si fue de la MDN seguro es buena práctica
 Ah bueno, Muchas gracias
Hola Jon, retomando el curso a los tiempos, me da un inconveniente, cuando pruebo una nueva url el botón cerrar ya no funciona
increíble lo que decís, ahora arrastrando una barra o seleccionando el dispositivo que queramos vemos la resolución al instante y bien dinámico, qué cosas cambiarán en el futuro ah? buen ejercicio!
😉
Jon una pregunta, me está saliendo un error con AddListener y es porque ya se está dejando de utilizar, en este caso ¿que comando recomiendas? Gracias
usa un evento change del window
Hola profe y compañeros de clase! no se si vayan a ver mi pregunta, pero hay alguna forma de hacer este codigo mas reusable? por ejemplo en el codigo aparte que hicimos en el archivo de responsive tester . js , usamos nombres propios para hacer uso de los valores ingresados por el usuario en los formularios, por ejemplo "ancho.value" o "alto.value" tambien "direccion.value". Pero si fueramos a usar este mismo codigo para otro proyecto tendriamos que ir a editar esas partes en especial...
Resulta que por ejemplo intente modificar la funcion y agregar mas variables adicionales no solo la de "form", pero no parece funcionarme, el profe o alguien podria explicarme como lograrlo?
👏👏👏 🙏🙏🙏
👋🏻😉
Q tal maestro JonMircha gracias por el dato que los elementos del formulario q estan dentro de un form puedo acceder con la notacion del punto , no sabia eso T_T gracias
;)
Excelente el curso!!!
Consulta porque se me está dificultando. Vengo realizando todos los ejercicios y desde los últimos tres o cuatro videos (clases), tengo inconvenientes con los botones. Se me desactivan (aparece solo el atributo "disabled" en el HTML). Ahora en el formulario me desabilita los input. Anteriormente me le escribía unas líneas de código, incluso con asincronía para que luego del click me habilitara (por ejemplo: document.querySelector(btn).disabled = false). Si comento varias funciones en el index_dom.js no ocurre. Pero pierdo esas funcionalidades (el menú, el reloj, alarma, contador, etc)
¿que crees que pueda ser? Gracias de antemano
😵🤔
¿Por qué te pasaba eso? A mí me está pasando eso
profe lo hice a mi manera y me funciono ,solo que le puse el submit al boton y no al formulario
y el evento que utilice fue click y no submit, sera que hice mal . saludos
Sí, un formulario siempre debe procesarse por un submit, nunca por un click
Buenas, a alguien mas no le cierra la ventana ? hice un console.log de la variable tester antes y despues y al comienzo me lo toma como valido pero despues cuando intento cerrar me dice que es undefined y el objeto me aparece asi : global {window: null, self: null, location: {…}, closed: true, frames: null, …} me estoy volviendo loco al intentar arreglarlo
Hola jon, el segundo parametro("tester") que usas en el video ya no hace falta utilizarlo, probe el codigo y me tira este error("A boolean is being passed as a fourth parameter to window.open. This is not used and may cause an exception in a future release."
"Se pasa un booleano como cuarto parámetro a window.open. Esto no se utiliza y puede causar una excepción en una versión futura.") Si bien la pagina carga salta ese error en la consola. 13/7/2021
😮
Llegará uno a aprender todos los nombre de los métodos??? A veces me pierdo con tantos métodos de javascript.
No, ni yo mismo los sé, incluso cuando dejo de usar con frecuencia algunos se me olvidan, pero para eso esta la documentación y el autocompletado de los editores de código :)
Cuando doy click a los inputs se me desactivan no tengo idea de porque 😭
😮
curiosamente el botón de cerrar no funciona, arroja el siguiente error: Scripts may close only the windows that were open, saludos y excelente curso sensei...
pd: a los que les pasa eso, solo tienen que colocar: tester.close()
😉👍🏻
Algo está heredando a los botones que los inhabilita. En el primer ejercicio el botón de detener reloj y detener alarma se quedan inhabilitados. En el ejercicio de Responsive Tester al focus se inhabilitan. Lo tuve que hacer en un nuevo archivo.
7:35 patrulla del còdigo, muestre su codigo
Jon: en el siguiente video te tengo un reto con el user Agent
yo: 😱 😲 😭
Jon: no es un reto, te voy a enseñar
yo (y casi todos???): 😮💨
🤭
Hola Jon, tengo el problema con mi página web: no se mucho de responsive design.
Para hacer la página adaptable usé la herramienta de "toggle device toolbar" que trae google chrome (no sé si otros navegadores la traen). Bueno, el fondo de la página es una imagen, en la computadora y en la herramienta se ven bien, pero en moviles se vé borrosa. Cuando probé la página en el responsive tester la imagen no se ve borrosa pero una parte del nav y la fuente de la misma se desbordaba. Lo que ocurre cuando la veo en mi telefono todo está como lo programé, sin la imagen de fondo. ¿como hago para que la imagen se vea bien en todos los dispositivos y que la fuente no se salga de su contenedor?
noto que cuando bajas más allá del inicio de la página, la imagen se redimensiona y aparece un espacio en blanco al final de la pantalla, que al redimensionarse, se quita
jajaj ahora lo uso para ver vídeos musicales mientras programo
😱
18:14 a alguien mas no le funciona el cerrar??? :S
🙋♂
lo pudiste arreglar ?
a mi tampoco me cierra
No, no sé si tiene arreglo. Creo que ya no es compatible esa función con los nuevos navegadores@@lucasortega3572
Tuve que hacerlo en un nuevo archivo por alguna extraña razón se bloquean mis inputs en el otro archivo sepa porque xD pero ya voy a la otra clase xXdxdxd
😮
Me pasa lo mismo
Cuando creas un proyecto más complejo ? Como uno similar a tinder o Uber.
Buen video
Saludos.
No entendí. ¿En esta clase no nos están dando un ejercicio?
Hola profesor buen día, me gusta su curso me parece un excelente curso de verdad pero una sugerencia bueno pensando yo como el que esta aprendiendo las clases podrían ser más didácticas de hecho al final de cada clase o antes de terminar cada video mandar a las personas a poner en pausa el video y mandar a resolver una actividad de la que ya se haya visto ejemplo si se hablo en el video de los ciclos entonces animar a los estudiantes a resolver el ejercicio por su misma cuenta y luego usted da la solución pero después de que los alumnos pongan en pausa el video e intenten por sus propios medios y según lo aprendido resolverlo. Vengo de cursos de udemy que prometían ejercicios prácticos y dinamismo y resulta que pague por nada y hasta ahora no he encontrado un curso que sea tan dinámico que ayude a uno a resolver los problemas planteados gracias por el curso buena iniciativa pero se pueden implementar más cosas para que los alumnos sean participes y practiquen aun más e inclusos dejer una tarea y traer la solución en un próximo video, buen día ✌️
Creo que no has entendido la dinámica de los ejercicios, al final de cada clase les muestro el siguiente reto a resolver y tú tienes oportunidad de resolverlo antes de ver el siguiente video que es cuando lo resuelvo, cuando les digo pongánle pausa al video es para que los que gusten anoten mi solución, pero yo esperaría que tú ya hayas intentado por tus medios resolver el ejercicio que yo estoy resolviendo, desde ya mismo te digo que no encontrarás ningún curso que te resuelva todo, eso depende de ti y tus ganas por progresar
Muchas gracias
👋🏻😉