Curso JavaScript: 77. BOM: Propiedades y Eventos -
Вставка
- Опубліковано 14 гру 2024
- 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 ua-cam.com/users/jo... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
📫 Suscríbete a mi lista de correo tinyletter.com...
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
😉👍🏻
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...
😉👋🏻
Muchas Gracias Profe, usted es el mejor.
Hola, muchas gracias
Expectacular explicación. Cada vídeo me resulta más fácil de asimilar el concepto que en el se expone. Gracias Sr. Mircha
👋🏻😉
sept 11 1969**Nov 18 2023
gracias excelente curso
felicidades John Mircha
Gracias, saludos
🧙♂Muchas gracias, muy buen curso!!!
Gracias por comentar
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é.
Profesor , Muchas gracias por toda su labor y compartir sus conocimientos,
😉👍🏻
no hay un solo tema del que ya conocia de antes al que tu no le agregues valor y claridad. Gracias!!
😉👍
Excelente video, Jon!
Gracias!
Grande Jon!! Sigue adelante!
Es sin duda este el mejor curso de Javascript que hay, no tengas dudas!!!
Gracias :)
Todo clean!!
Gracias 😊
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).
Gracias Jon por aportar tanto a esta comunidad.
👋🏻😉
muy buena explicacion gracias.
Gracias por comentar
Gracias Jon, que tengas buenas vacaciones, merecido descanso!!!
👋🏻😉
Eres el mejor Jon!
🙈
Este curso mínimo debería tener medio millón de vistas en cada video.... es el mejor
🥰🙌🏻
Como siempre clara explicación, muchas gracias!.
😀👌🏻
Excelente video maestro Jon ✅💕
Gracias! 😊
Master! Mil gracias por todo
A la orden
Excelente clase profesor, mi mente vuela al pensar todas las posibilidades para aplicar todo lo aprendido. Nuevamente, muchas gracias jeje 👍
DE nada :)
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 🧙♂️🧙♂️🧙♂️
Gracias por tus bendiciones 🙌🏻🙌🏻🙌🏻 igual para ti
Y hoy son 126mil jiji Vamos por más! Jon se merece esto y mucho más
@@martingalenda 142,000, grande JON
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
😉👋🏻
excelente curso, padre de padres (window).
😉👍🏻
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
👍🏻
Siempre me produce nostalgia cuando haces comparaciones con jQuery :)
😅
excelente video muchas gracias..
Gracias por comentar
Excelente vídeo!
😉👋🏻
Excelente muchas gracias!!!
De nada!
Este curso es genial Jon! Siempre aprendo cosas nuevas
Excelente!
Qué gran clase :)
😉👍🏻
Bien Entendido!!!Muchas gracias por tu tiempo Jonathan!!!
Por nada!
Que buena explicación, mil gracias!!
Con mucho gusto
cuatro largos años y llegue al bom gracias profesor
👋🏻😉 ánimo
Muy buena clase.
Grazie, ancora...
👋🏻😉
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 !!
Lo tomaré en cuenta
👏👏👏 🙏🙏🙏
👋🏻😉
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?
No funciona así el DOMContentLoaded, no depende de que lea todo el archivo sino de que el DOM este listo en memoria del navegador
Jon te quería preguntar para hacer un pre-loader cual es más útil evento load o DOMContentLoaded
DOMContentLoaded
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?
😮
Dejen comentarios aunque sea de una sola letra.
🤣
A
Gracias Jon! El mejor curso que encontre de JS, piensas hacer uno de React js?
Sí, en enero 2021
@@jonmircha genial!
¿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
Es una cuestión de CORS, justamente en el video de hoy el 128 hablo de eso al respecto :)
Hola jon como siempre excelente las clases , tengo una duda, cual seria la versión js vanilla de $("#id").load("rutaArchivo")?
Espera a que llegues a la parte de ajax
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.
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 :)
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
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!
Mejor usa el DOMContentLoaded
entonces se puede decir que ya no hay necesidad de usar Load ? como los manejadores semanticos
yo prefiero listeners
Lo minimo que puedo hacer es desactivar el bloqueador de anuncios como gratitud por compartir tus conocimientos.
👋🏻😉
a mi me carga el evento Load mas Rapido
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.
Creo que deberías leer la documentación del método splice.
Humilde el profe con 2 pantallas xd
😉👍🏻
🤑🤑🤑🤑🤑🤑🤑🤑
// 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);
})
sept 11 1969**Nov 21 2023
gracias excelente curso
felicidades John Mircha
Gracias, saludos
👏👏👏 🙏🙏🙏
👋🏻😉