Curso JavaScript: 77. BOM: Propiedades y Eventos -

En este video te explico propiedades y eventos del #BOM de #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 kzbin.info... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
📫 Suscríbete a mi lista de correo tinyletter.com...

[@joelleiva6952]

Perfecto ya empezamos con el BOM, excelente clase Mis anotaciones de la clase: //*💻 El evento resize se activa cuando redimensionemos el tamaño de nuestra ventana, o el del viewport window.addEventListener("resize", e => { console.clear() console.log("********* Evento Resize *********") //👉Hace referencia al ancho del viewport console.log("Ancho del viewport:",window.innerWidth,"px") //👉Hace referencia al alto del viewport console.log("Alto del viewport:",window.innerHeight,"px") //👉Hace referencia al ancho de la ventana del navegador console.log("Ancho de la ventana:",window.outerWidth,"px") //👉Hace referencia al alto de la ventana del navegador console.log("Alto de la ventana:",window.outerHeight,"px") console.log(e) }) //*🔃 El evento scroll se activa cuando usamos la barra de desplazamiento o nos movemos con la rueda del mouse window.addEventListener("scroll", e => { console.clear() console.log("********* Evento Scroll *********") //👉Hace referencia a la barra de desplazamiento X, mientras mas se aleja de la izquierda mas va a aumentar console.log("Scroll X:",window.scrollX, "px") //👉Hace referencia a la barra de desplazamiento Y, mientras mas se aleje del top mas va a aumentar console.log("Scroll Y:", window.scrollY, "px") console.log(e) }) //* El evento load se activa cuando la ventana del navegador haya terminado de cargar window.addEventListener("load", e => { console.log("********* Evento Load *********") //👉Hace referencia a la coordernada en la que se emepezo a dibujar la ventana del navegador en vertical console.log("Screen X:",window.screenX, "px") //👉Hace referencia a la coordernada en la que se emepezo a dibujar la ventana del navegador en horizontal console.log("Screen Y:", window.screenY, "px") console.log(e) }) //*🔁 El evento DOMContentLoaded se activa cuando la ventana del navegador haya terminado de cargar window.addEventListener("DOMContentLoaded", e => { console.log("********* Evento DOMContentLoaded *********") //👉Hace referencia a la coordernada en la que se emepezo a dibujar la ventana del navegador en vertical console.log("Screen X:",window.screenX, "px") //👉Hace referencia a la coordernada en la que se emepezo a dibujar la ventana del navegador en horizontal console.log("Screen Y:", window.screenY, "px") console.log(e) }) //! 🥊DOMContentLoaded VS 🥊load //* ✅✅ Cuando tengamos que hacer que algo se cargue al momento de que el DOM este listo, es mucho mas eficiente trabajar con con el evento 'DOMContentLoaded' que con el 'load', sobre todo cuando estemos haciendo peticiones asincronas. Porque el evento DOMContentLoaded es disparado cuando el HTML se cargo por completo, en cambio el evento load se dispara hasta que haya cargado todo el documento HTML, las hojas de estilos, los scripts, imagenes, etc...

[@jonmircha]

😉👋🏻

[@hernansanabria9685]

sept 11 1969**Nov 18 2023 gracias excelente curso felicidades John Mircha

[@jonmircha]

Gracias, saludos

[@alejandracasado7636]

no hay un solo tema del que ya conocia de antes al que tu no le agregues valor y claridad. Gracias!!

[@jonmircha]

😉👍

[@paolagalarza2823]

Esto vale oro... Mas de mil likes se merece!!!. Gracias Jon, me gusta tu practicidad y forma de explicar. Por ahora, solo puedo ayudar con compartir, vistas y likes, en cuanto pueda me uniré.

[@reactivoJS]

Siempre me produce nostalgia cuando haces comparaciones con jQuery :)

[@jonmircha]

😅

[@karenlorenacaicedo7718]

Muchas Gracias Profe, usted es el mejor.

[@jonmircha]

Hola, muchas gracias

[@ZeR0ByTe]

Grande Jon!! Sigue adelante! Es sin duda este el mejor curso de Javascript que hay, no tengas dudas!!!

[@jonmircha]

Gracias :)

[@guillerminasanchezgarcia1674]

Saludos a todos, cuídense mucho por favor! Qué gusto me da verlo nuevamente, tomé los tutoriales de HTML5 hace unos años y logré hacer una página web. Por favor envíele un saludo a mi nieto Esteban para que se anime a aprender éste arte. Gracias, un abrazo grande y bendiciones. (Sería bueno agregar el # de una tarjeta, no todos tenemos PayPal).

[@tongastonga22]

Gracias Jon, que tengas buenas vacaciones, merecido descanso!!!

[@jonmircha]

👋🏻😉

[@Wiiiiizard]

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

[@jonmircha]

Gracias por comentar

[@ivantg4572]

Es muchísima información valiosa pero seria genial que nos enseñaras a hacer un sitio web así como el tuyo indicarnos que es lo que se necesita para hacerlo es decir que temas y eso .Gracias por tanto valor

[@jonmircha]

👍🏻

[@Ni_idea_de_tecnologia]

Expectacular explicación. Cada vídeo me resulta más fácil de asimilar el concepto que en el se expone. Gracias Sr. Mircha

[@jonmircha]

👋🏻😉

[@eduardomegoguevara3181]

Este curso mínimo debería tener medio millón de vistas en cada video.... es el mejor

[@jonmircha]

🥰🙌🏻

[@WillyAntunezVlogs]

Excelente clase profesor, mi mente vuela al pensar todas las posibilidades para aplicar todo lo aprendido. Nuevamente, muchas gracias jeje 👍

[@jonmircha]

DE nada :)

[@leonardoprone5967]

Excelente video, Jon!

[@jonmircha]

Gracias!

[@aldairmarcelo5432]

Eres el mejor Jon!

[@jonmircha]

🙈

[@yovanyescobarrojas2041]

excelente curso, padre de padres (window).

[@jonmircha]

😉👍🏻

[@aronlife1098]

No quiero sonar repetitivo, pero Jon eres un excelente profe, comenzamos desde la historia de JS, cada capítulo motiva a continuar y sin darme cuenta ya, llegue a aprender incluso más que la Uni, gracias profe

[@jonmircha]

😉👋🏻

[@criadordeperroslostresdona9695]

muy buena explicacion gracias.

[@jonmircha]

Gracias por comentar

[@braianrico4422]

Antier eran 85100, ayer 85200 y ya hoy somos 85300 y poco a poco serán más y más suscriptores a tu canal. Me alegra que el mundo este encontrando y valorando tu gran labor, eres grande Jon! Bendiciones 🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

Gracias por tus bendiciones 🙌🏻🙌🏻🙌🏻 igual para ti

[@martingalenda]

Y hoy son 126mil jiji Vamos por más! Jon se merece esto y mucho más

[@elirios7096]

@@martingalenda 142,000, grande JON

[@helipalacio8772]

Gracias Jon por aportar tanto a esta comunidad.

[@jonmircha]

👋🏻😉

[@elweonweandolaweafome]

Todo clean!!

[@jonmircha]

Gracias 😊

[@timawid]

Excelente video maestro Jon ✅💕

[@jonmircha]

Gracias! 😊

[@bluefutbol1515]

cuatro largos años y llegue al bom gracias profesor

[@jonmircha]

👋🏻😉 ánimo

[@gustavocaqui7600]

Profesor , Muchas gracias por toda su labor y compartir sus conocimientos,

[@jonmircha]

😉👍🏻

[@andcaru]

Como siempre clara explicación, muchas gracias!.

[@jonmircha]

😀👌🏻

[@williamalexanderpineda6098]

Excelente vídeo!

[@jonmircha]

😉👋🏻

[@johnherrera5913]

Master! Mil gracias por todo

[@jonmircha]

A la orden

[@henrycedeno9315]

Hola profesor muy buenas tardes !! no seria posible que en algun punto usted enseñe a como hacer librerias tipo Jquery, o por ultimo un framework tipo angular, o por lo menos la idea de comer hacer uno, me entusiasmaría bastante la idea de poder seguir algun curso suyo sobre eso !!

[@jonmircha]

Lo tomaré en cuenta

[@cumpaMira]

Gracias profe! Excelente!

[@nachosanabria6942]

excelente video muchas gracias..

[@jonmircha]

Gracias por comentar

[@r.w.s.2402]

Este curso es genial Jon! Siempre aprendo cosas nuevas

[@jonmircha]

Excelente!

[@brianalexisalmada6522]

Qué gran clase :)

[@jonmircha]

😉👍🏻

[@carlesbautista8293]

Bien Entendido!!!Muchas gracias por tu tiempo Jonathan!!!

[@jonmircha]

Por nada!

[@emanuelr9815]

Excelente muchas gracias!!!

[@jonmircha]

De nada!

[@alveiroceron]

Que buena explicación, mil gracias!!

[@jonmircha]

Con mucho gusto

[@harrinsonA]

Muy buena clase.

[@danielfabiani4468]

Grazie, ancora...

[@jonmircha]

👋🏻😉

[@developer1328]

Hola Jon, me quedó una duda. se recomienda siempre poner el script js antes del cierre del body del html, entonces si el DOMContentLoaded no espera a los scripts para empezar a trabajar no es un poco riesgoso usarlo?

[@jonmircha]

No funciona así el DOMContentLoaded, no depende de que lea todo el archivo sino de que el DOM este listo en memoria del navegador

[@alejandroc.1082]

Jon te quería preguntar para hacer un pre-loader cual es más útil evento load o DOMContentLoaded

[@jonmircha]

DOMContentLoaded

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@JB-pl8vj]

Gracias Jon! El mejor curso que encontre de JS, piensas hacer uno de React js?

[@jonmircha]

Sí, en enero 2021

[@JB-pl8vj]

@@jonmircha genial!

[@JesusDaniell]

Hola profe, en realidad soy estudiante de ing civil, me gusta mucho tambien el desarrollo web, ya domino bien lo que es html5 y css, actualmente comence hacer su curso de javascript y quisiera saber su opinion si podria llegar a obtener algun beneficio siendo autodidacta en esto del desarrollo web a la hora de un empleo.

[@jonmircha]

POr supuesto, no necesitas de un título para dedicarte al desarrollo web, lo que vale es lo que puedas desarrollar con tus capacidades y habilidades :)

[@ZeR0ByTe]

Exactamente como te dijo @jonmircha arriba. Un titulo "no significa nada", yo tengo un titulo y al dedicarme siempre a otra cosa me atrasé y perdi todo esto y veo chicos de 20 años q saben 4 o 5 veces más que yo. Pero lo importante es lo que sabes hacer. Crea tu web, crea tu github con repositorios, trabajos, proyectos, practicas de youtube o mismo practicas de este curso, y con todo eso y enviando CV, podrás encontrar trabajo. Creeme que asi lo hago yo y tengo entrevistas cada semana. Saludos

[@PalestinianCode]

Dejen comentarios aunque sea de una sola letra.

[@jonmircha]

🤣

[@ejop9681]

A

[@elcaosdejosh6622]

Excelente video, en verdad no hay forma de agradecerte por todo este contenido, me quedé con una duda: ¿Podemos usar el "load" para los casos en los que el usuario debe esperar a que se cargue la pagina para interactuar con la pagina? Probablemente ya lo hayas explicado y si es asi, entonces volveré a ver los videos jaja Muchas Gracias!

[@jonmircha]

Mejor usa el DOMContentLoaded

[@miguelmendoza8855]

Hola jon como siempre excelente las clases , tengo una duda, cual seria la versión js vanilla de $("#id").load("rutaArchivo")?

[@jonmircha]

Espera a que llegues a la parte de ajax

[@heferh4320]

entonces se puede decir que ya no hay necesidad de usar Load ? como los manejadores semanticos

[@jonmircha]

yo prefiero listeners

[@luisdanielayalavaldes5347]

muy buenas, tengo una duda en google chrome cuando hago console.log(window.innerWidth) y console.log(window.outerWidth) me da siempre el mismo valor, sin embargo en otros navegador como Edge no sucede así, esta propiedad no deberia funcionar ya igual en todos?

[@jonmircha]

😮

[@gerardoanaya6159]

Lo minimo que puedo hacer es desactivar el bloqueador de anuncios como gratitud por compartir tus conocimientos.

[@jonmircha]

👋🏻😉

[@NonsenseIsOver]

¿Qué es esa alerta en la consola del navegador que dice "A cookie associated with a cross-site resource at placeimg.com/ was set without the "SameSite" atributte. A future release of crhome will only deliver cookies.. etc etc"? También me sale cuando utilizo imágenes de Font Awesome

[@jonmircha]

Es una cuestión de CORS, justamente en el video de hoy el 128 hablo de eso al respecto :)

[@santiagoramirezpinto625]

a mi me carga el evento Load mas Rapido

[@RhedKief]

BOM: Propiedades y Eventos ( Apuntes ) //////////////////////////////////////======//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Inicio 🎅 El BOM (Browser Object Model) es una serie de eventos y objetos que cuelgan de windows , anteriormente usamos document como nodo de documento html , sin embargo hay una serie de metodos que hacen referencia a la ventana del navegador -> el objeto window //////////////////////////////////////======//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// PROPIEDADES 🏄‍♂️ window.innerWidth = Esta propiedad hace referencia al tamaño del ancho en el viewport de la ventana window.innerHeight = Esta hace referencia al tamaño de la altura del viewport window.outerHeight y window.outerWidth = Este es el tamaño que tiene nuestra ventana del navegador. Estos representan al viewport del navegador y no hace referencia a la barra de navegaciones , consola , etc. Una manera de identificar el tamaño de la pantalla es con el evento "resize" junto con una arrow function window.addEventListener("resize", (e) =>{console.clear()} ejecutamos un console.clear antes asi cada vez que redimensionamos se limpia la consola . 🚴‍♂️OTRAS PROPIEDADES window.scrollX = Este hace referencia a las barras de desplazamientos y le podemos asignar cuanto queremos que se aleje ( siempre son numeros positivos y expresados por pixeles) la ventana tiene un evento del scroll , y podemos identificar cuanto scroll hacemos indicado con el scrollY , lo mismo con el scrollX console.log(windows.scrollY); {}) { contenido de adentro} y el DOMContentLoad va a tardar mucho menos que el evento Load. y el timeStamp demuestra cuanto tarda en cargar y esto es mucho mas eficiente que trabajar con load , sobretodo cuando hacemos peticiones ajax , el evento contentload se dispara cuando el contenido html ha sido cargado , es decir cuando el navegador tiene todo el contenido html parciado , en cambio dom contentload no espera a que carge todas las imagenes , tramas , script para funcionar . y load se dispara hasta que carga todo desde doctype hasta

[@jonmircha]

😉👍🏻

[@davidcardenas7737]

buenos dias profe , tengo lo siguiente: lista:[ { nombre:'', accion:''" } ] lo lleno asi: agregar(){ this.lista.push({nombre:this.mc,accion:'Eliminar'}) this.mc="" console.log(this.lista); }, y funciona pero el problema lo tengo al eliminar. estoy aplicando splice eliminar(id){ this.lista.splice(id) } profe colaboreme como seria para eliminar con splice asi como lo tengo me elimina todo. y pues yo solo quiero el elemento que le diga eliminar , como deberia ultilizar el splice , gracias desde colombia.

[@kikemadrigalr]

Creo que deberías leer la documentación del método splice.

[@MrRampengu]

Humilde el profe con 2 pantallas xd

[@jonmircha]

😉👍🏻

[@matiasgomez9416]

// 77. BOM: Propiedades y Eventos // Propiedades de las ventanas window.addEventListener("resize", (e) => { console.clear(); console.log("*** Evento Resize ***"); console.log(window.innerWidth); console.log(window.innerHeight); console.log(window.outerWidth); console.log(window.outerHeight); console.log(e); }); window.addEventListener("scroll", (e) => { console.clear(); console.log("*** Evento Scroll ***"); console.log(window.scrollX); console.log(window.scrollY); console.log(e); }); // Error frecuente usar "load" para inizializar algunas cargas de tu sitio. Usar el "DOMContentLoaded" // window.addEventListener("load", (e) => { // console.clear(); // console.log("*** Evento Load ***"); // console.log(window.screenX); // console.log(window.screenY); // console.log(e); // }); // Es más apropiado usar este document.addEventListener("DOMContentLoaded", (e) => { console.log("*** Evento DOMContentLoaded ***"); console.log(window.screenX); console.log(window.screenY); console.log(e); })

[@heimancastro1954]

🤑🤑🤑🤑🤑🤑🤑🤑

[@hernansanabria9685]

sept 11 1969**Nov 21 2023 gracias excelente curso felicidades John Mircha

[@jonmircha]

Gracias, saludos

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉