Curso JavaScript: 79. BOM: Objetos: URL, Historial y Navegador -

En este video te explico los objetos: URL, Historial y Navegador 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/...
🤲 Apóyame en Patreon / jonmircha
📫 Suscríbete a mi lista de correo tinyletter.com...

[@colommbiano]

el mejor curso de javascript en youtube. 100% recomendado.

[@colommbiano]

@@armandoarturocentenoterraz6524 Naaa nada que ver el profe jonmircha en todas sus clases de javascript no tiene rival no hay otro curso mejor aca en youtube que lo supere arriba profe jonmircha

[@zezimatutorialspc]

Coincido estuve buscando durante mucho tiempo y no hay mejor curso de JS o más completo que este, Referencias e incluso explicaciones de ciertas curiosidades que no te explican en otros cursos, posiblemente hasta esté mucho más completo que muchísimos cursos en UDEMY.

[@vanhellsing3029]

Totalmente de acuerdo y lo dice alguien que se vio más de un curso

[@RhedKief]

💌 BOM: Objetos: URL, Historial y Navegador ( Apuntes ) ///==========================================================================================================\\\ 💮Intro Anteriormente vimos metodos , eventos ,propiedades del BOM que se centran en las caracteristicas del objeto window , ya que es el objeto global ( ventana ) del navegador. Hoy vamos a ver 3 objetos muy importantes que cuelgan de window . ///==========================================================================================================\\\ ♻ Objetos 🌐 Location : Este objeto tiene varias propiedades y metodos , ahora vamos a ver las propiedades mas importantes 💥location.origin : Este indica la ruta de la cual se origina , y si usamos liveserver nos dara el ip del servidor 💥location.protocol : Nos indica si el protocolo es http , file , etc 💥location.host : Nos indica el ip y el puerto del servidor. 💥location.hostName : Nos indicara el nombre del domino 💥location.port : Nos indica el puerto del servidor 💥location.hash : Este detecta el valor url que esta despues de un hash 💥location.pathname : Es el archivo en el cual estamos consultando. 💥location.search: Almacena los parametros que les pasamos por la Url. 🌐 History : Este objeto tiene una propiedad importante que es la longitud ( length) y el valor que tenga dara referencia de las paginas que podemos acceder desde atras o adelante , guarda el posicionamiento en el historial en el cual nos encontramos, y el valor cambiara segun cuanto navegemos en las paginas. ( Funcionan como los botones de atras y adelante de la web ) 💥 history.back : Con este indicamos cuantas paginas queremos regresar 💥 history.forward : Este hace lo contrario osea cuantas paginas queremos ir adelante 💥 history.go : Con este indicamos a donde queremos ir , si le indicamos -1 significa la pagina antes de otra , su valor puede ser positivo ( Para paginas adelante ) o negativo. ( para ir a una pagina de atras) 🌐 Navigator : Es un objeto bastante complejo con un monton d apis y objetos , da propiedades como el lenguaje , la plataforma , el sistema operativo , ahora vamos a ver las propiedades del navigator. 💥navigator.connection : nos da informacion si estamos conectados e informacion de la conexion del usuario 💥navigator.geolocalizacion : api de google para que nos muestre la ubicacion 💥navigator.mediaDevices: Nos indica si hay camaras , microfonos , etc 💥navigator.mimeTipes : Es el tipo de formato que acepta el navegador. 💥navigator.onLine : Este es el indicador que detecta si el usuario pierde o vuelve a conectarse a la red 💥navigator.servirceWorker : es una api que nos ayuda convertir en un sitio web , en una aplicacion instalable 💥navigator.storage : api de almacenamiento 💥navigator.usb : este detecta dispositivos usb 💥navigator.userAgent : nos da informacion sobre la plataforma que se conecta a nuestra aplicacion. ///==========================================================================================================\\\

[@tongastonga22]

Gracias buen hombre ! 😊

[@alexanderg3764]

Despues de tanta información con el DOM y BOM, llegó el momento de poner todo a la practica, muchas gracias por el curso, nunca pensé estar llegando tan lejos en un curso online, por lo general siempre dejaba todo a medias :)

[@jonmircha]

:) Suerte!!!

[@ronaldm.r]

Nunca me habia visto más de 60 videos de youtube de un canal, solo he hecho algo similar con un curso de Vue.js pero ya esto ha roto mis expectativas de lo mejor Jon!!

[@jonmircha]

jejejej espero que tengas energía para otras 60 clases o más :P

[@edwarddk9007]

es increible lo que sigo aprendiendo con usted profesor, el manejo de rutas con react es muy sencillo, justo ahora ando haciendo un proyecto con rutas, pero no quise hacerlo con react decidi hacerlo con js y me encuentro con este fantastico video

[@jonmircha]

👋🏻😉

[@leomax522]

Gracias Jon. Vamos con los ejercicios. Son el Maradona de JS!!

[@jonmircha]

👋🏻😉

[@Aprendizzz2009]

Mereces ese apoyo más que muchos! Gracias por tan enorme generosidad para compartir conocimientos, enseñarnos y cambiar nuestro futuro a través de la educación! Salu2 👍

[@jonmircha]

Gracias :) 💛

[@denisperalta141]

Detengo el video en la mitad porque necesito comentar. Jon, la dedicación y compromiso que le metes a este curso es admirable. Realmente da gusto aprender así y siento que en tu canal es el lugar donde más he aprendido desde que arranque con programación hace poco más de 3 meses. Gracias de verdad eres un gran maestro.

[@jonmircha]

😃🙌🏻

[@jacktomdev1265]

Jon no escribí durante todo el curso porque estaba mas concentrado en seguir la constancia de practicar y practicar y ahora paro un segundo y siento que es el momento para decirte que te felicito por el pedazo de curso que te creaste. sin duda es el mejor curso de JS en español de todo youtube. Es que te escribiria un testamento de todas las felicitaciones que te debo jajaja. tu capacidad de ensenar... uff. Dificil que alguien pueda explicar todo lo aprendido en su vida de la manera en la que lo hiciste y lo estas haciendo. Cuando pueda ayudar al menos un poco económicamente para que este canal siga como lo esta haciendo lo hare. No puedo explicar en serio la ayuda que me brindaste con este curso y mostrando todos los dias una cara feliz para dar otro video aunque pueda haber sido un dia no de lo mejor. Espero jon poder aportar cuando lo tenga y nuevamente felicidades por el ENORME curso de JS que te estas mandando. Saludos desde Argentina ⭐⭐⭐ (tenia que poner eso ultimo ajjaja)

[@jonmircha]

😉🥰🙌🏻

[@webcube4601]

Ya falta nada para empezar a toquetear proyectos con el Dom :), Gracias de verdad jon

[@jonmircha]

👋🏻😉

[@JB-pl8vj]

Cuando consiga trabajo te invitare varios tacos Jon, gracias de verdad!

[@jonmircha]

;) 🌮😋

[@Rogeltelo-tw8wj]

Pudiste conseguir trabajo? Yo empezé hace unos meses y espero también vivir de esto

[@uriibrea]

​@@Rogeltelo-tw8wj como vas bro?

[@mundomagupe6088]

Muy interesante, ya quiero llegar a las actividades del Dom.

[@jonmircha]

Excelente!

[@Ni_idea_de_tecnologia]

Otro poquito de teoría antes de la batalla. Nada mal. Gracias Sr. Mircha

[@jonmircha]

Un saludo!👋🏻😉

[@caleman9791]

Saludos Siempre agradeciendo con tu trabajo

[@jonmircha]

👋🏻😉

[@luisalvarez-lm3jq]

Muy agradecido, fue teórico pero el potencial q nos mostraste es grande

[@jonmircha]

:)

[@djvarela]

gracias Jon, sos un grande. Fuerte Abrazo!

[@jonmircha]

😉👋🏻

[@trovu9157]

aaaaaaaaaa jonmircha sos el mejor gracias por hacer este curso!!!!!!!!! ❤❤❤❤❤❤❤❤❤❤❤❤❤❤

[@jonmircha]

😉👋🏻

[@Wiiiiizard]

🧙‍♂Muchas gracias!!!

[@jonmircha]

Un saludo

[@johnherrera5913]

Master! Gente como tu me devuelve la fe en la humanidad

[@jonmircha]

😉🙌🏻

[@chambers4222]

Que bien explicas cada detalle, además de que motivas mucho el querer seguir adelante en el desarrollo web. Mis respetos! y muchas gracias por todos estos videos.

[@jonmircha]

COmparte para llegar a más personas :)

[@hernansanabria9685]

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

[@jonmircha]

Gracias, saludos

[@leidyvanesacifuentes512]

He aprendido mucho con sus videos, y agradezco que vuelvo a retomar mis estudios en programación gracias a usted.. Me hizo reír mucho la parte de "se los dejo en consolazos" jajaja

[@jonmircha]

Felicidades!

[@r.w.s.2402]

Seguimos aprendiendo en el mejor curso de Javascript con el mejor profesor;)

[@jonmircha]

Muchas gracias!

[@tongastonga22]

Gracias jon!!!

[@jonmircha]

Con gusto👋🏻😉

[@timawid]

Muchas gracias Jon ❤

[@jonmircha]

👋🏻😉

[@instintoimagen]

el mejor #curso de #javaScript

[@jonmircha]

🥰🙌🏻

[@joseval6101]

gracias jhon.

[@jonmircha]

😉👋🏻

[@nachosanabria6942]

gracias excelente video

[@jonmircha]

😉🙌🏻

[@mariotorres4689]

Curso de calidad, gracias por todo jon.

[@jonmircha]

:)

[@emanuelr9815]

Wow wow wow increible, sigo alucinando con el potencial que tiene JavaScript, sin duda es el lenguaje de la web!!

[@jonmircha]

Es el rey :)

[@williamalexanderpineda6098]

Sin duda es de Importal Vitancia que mas personas que deseen aprender js conozcan tu contenido :)

[@jonmircha]

😎🤘🏻

[@agusoteras]

Muy buena clase, excelente profesor!!!

[@jonmircha]

🤓👍🏻

[@braianrico4422]

Jon Bendiciones, mil y mil gracias por tanto! 🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

Igualmente!

[@leonardoprone5967]

Buena clase, Jon! Gracias!

[@jonmircha]

Con gusto

[@tecmiguell85]

fui a tu pagina y vi el apartado de estoicismos y estoy por comprar un libro, se ve muy interesante ese tema

[@jonmircha]

👋🏻😃

[@carlesbautista8293]

Perfecto!!!!muchas gracias Jonathan :)

[@jonmircha]

:)

[@cumpaMira]

Gracias profe! Ya casi termino con mi spam 😅

[@jonmircha]

🤭

[@diegos.3988]

Muchas gracias por el contenido Jon. Y felicitaciones por los 100.000! 👏👏

[@jonmircha]

💯🎉🥳🙌🏻

[@tavospok]

Cuánta información querido Jon! Gracias por este video!

[@jonmircha]

Por nada!

[@ivantg4572]

yo quiero aprender a hacer una pagina web como tuya bro esta genial

[@jonmircha]

👍🏻

[@henrycb7884]

Excelente curso Profe gracias, contento por q ya vienen los ejercicios :) :P

[@jonmircha]

Gracias a ti

[@joelleiva6952]

A poner en practica todo esto del DOM. El curso de PWA sigue estando actualizado o ya esta obsoleto, lo digo porque me gustaria verlo Dejo mis apuntes de la clase: /* console.log("********** Objeto URL (location) **********") console.log(location); //👉 Devuelve el origen, es decir imprime: 127.0.0.1:5501 console.log(location.origin); //👉 Devuelve el protocolo del sitio WEB, es decir imprime: http: console.log(location.protocol); //👉 Devuelve el host del sitio WEB incluyendo el puerto, es decir imprime: 127.0.0.1:5501 console.log(location.host); //👉 Devuelve el nombre host del sitio WEB, es decir imprime: 127.0.0.1 console.log(location.hostname); //👉 Devuelve el numero del puerto console.log(location.port); //👉 Devuelve la direccion URL del sitio WEB, es decir imprime: 127.0.0.1:5501/dom.html console.log(location.href); //👉 Devuelve el hash que hay en la direccion URL del sitio WEB, es decir imprimiria: #contacto console.log(location.hash); //👉Devuelve todos los valores que encuentra despues del signo '?', es decir imprime: ?nombre=joel&edad=14 console.log(location.search); //👉 Devuelve el nombre del archivo al que estoy consultando, es decir imprime: /dom.html console.log(location.pathname); */ /* console.log("********** Objeto Historial (history) **********"); console.log(history); //👉 Devuelve la cantidad de paginas que visitamos recientemente console.log(history.length); //👉 Te regresa x paginas hacia atras, por ejemplo visite 5 paginas y pongo 2, me regresa a la pagina 3 history.back(3) //👉 Te impulsa x paginas, por ejemplo visite 5 paginas, volvi a la 1 y le paso 2, me lleva a la pagina 3 history.forward(2) //👉 Te lleva x paginas adelante o atras, si visite 5 paginas, volvi a la 4 y le paso -1, me lleva a la 3 history.go(-1) */ console.log("********** Objeto Navegador (navigator) **********"); console.log(navigator); //👉 Devuelve un objeto con informacion como cual es nuestra velocidad | 4G console.log(navigator.connection); //👉 Devuelve un objeto con ciertos metodos que tiene la geolocalizacion console.log(navigator.geolocation); //👉 Devuelve un objeto con los dispositivos console.log(navigator.mediaDevices); //👉 Devuelve un objeto con los tipos de formatos que dependiendo el tipo de aplicion soporta el navegador console.log(navigator.mimeTypes); //👉 Devuelve un boolean dependiendo si el usuario esta(true) o no(false) conectado a internet console.log(navigator.onLine); //👉 Es el API que nos ayuda a convertir sitios WEB en PWA console.log(navigator.serviceWorker); //👉 Es el API de almacenamiento, es decir que es como una mini base de datos del navegador console.log(navigator.storage); //👉 Es el API que nos permite realizar acciones cuando detecta un USB console.log(navigator.usb); //👉 Es el API que nos da informacion del usuario, su sistema operativo, su navegador, sus bits, etc. console.log(navigator.userAgent);

[@tomasalvarez922]

Como te admiro. Increible

[@moisescastillo3447]

Espero que realices varias practicas o ejemplos de este punto en particular que actualmente se utiliza mucho en la web, una consulta, esto del la URL, el hash, el historial del navegados tambien se podria utilizar en una single pag con scroll donde la pagina esta dividida obviamente por secciones y al hacer el back o el forward pueda retroceder o avanzar realizando el scroll respectivo mostrar dicha seccion tanto en la url como en el navegador. a ver si te haces un ejemplito de esto, desde ya un saludo y a seguir con el curso que esta buenazo

[@jonmircha]

El hash sí, el historial no por que estas en la misma página

[@martinsaldana3507]

Quiero aportar algo simple. Hay una extensión de visual studio code que se llama Beautify que refresca la página cada vez que se guarda los cambios, sin necesidad de refrescar en el navegador

[@jonmircha]

gracias :)

[@RainSoundsToConcentrate]

Crack :)

[@jonmircha]

😉👍🏻

[@genecles]

Genial lo de la aplicación final.

[@jonmircha]

:)

[@bluefutbol1515]

un paso para llegar a los ejercicios profesor :D

[@jonmircha]

👋🏻😉

[@denisperalta141]

Importal Vitancia jajaaja GRANDE JON

[@jonmircha]

😉👍🏻

[@elweonweandolaweafome]

se viene lo bueno

[@zobeklol7852]

Este curso de Javascript es mejor que muchos de los que compre en Udemy. Jon haces backend? tienes preparado algun curso de nodeJS?

[@jonmircha]

Sí kzbin.info/aero/PLvq-jIkSeTUY3gY-ptuqkNEXZHsNwlkND

[@matiasmarcelocentorbi7659]

jon se le puede aplicar eventos a un template ya clonado e implementado en el dom?

[@jonmircha]

A la clon sí, al template como tal no

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@mrwakko5715]

Hola Jonathan, tengo una duda, cuando haces un console.log(history), por ejemplo, imprime todas las variables y metodos (o funciones) del objeto "history". Pero como podemos saber en JS que es lo que le puedes pasar a los metodos "go()", "back()" o "forward()", es decir, como se que acepta "number" como parametro? Tambien he chequeado en la MDN y vale, lo vemos en los ejemplos, pero no aparece a mi parecer del todo bien documentado, no crees tu tambien? Gracias.

[@jonmircha]

tendrías que escarbar en el propio motor del navegador que corre JS :P

[@ivantg4572]

En ese orden de ideas hay que aprender HTML,CSS,JS,PHYTON O PHP Y NODE JS si? Y un framewor como react?

[@jonmircha]

jonmircha.com/cursos

[@sergiolopez203]

JON, .mimeTypes me dice que ya esta en desuso, y en chrome ya no me devuelve lo mismo que devuelve en el video,pero aja,dice que ya esta en desuso

Hola, muy buen trabajo, una consulta quiero mostrar un modal cuando se cargue una pagina pero una sola vez, utilizo el atributo onload para mostrarlo pero no puedo identificar si ya fue visitado, como podría hacerlo, onload="window.location.href = '#openModal11'" este modal define a donde dirijo según elección. Es decir quiero que el modal se muestre una sola vez, intente con un script pero no se como ubicar en el historial si fue visitado anteriormente

[@jonmircha]

Después de mostrarlo eliminalo del DOM y listo :) puedes asociar esa tarea al X que cierre el modal

[@sandokanArg]

Excelente Jon, en el mozilla, el navigator.connection y el navigator.usb me dan undefined. sera por el borwser o algo mal en mi codigo (lo mas seguro). Ahora empiezo con las practicas, que nervios.

[@jonmircha]

Puede que no esten todas soportadas aun, prueba en Chrome, suerte con los ejercicios :)

[@haberquepasa2024]

Efectivamente dale sin miedo el tema es por el navegador, no te preocupes, a mí también me salió lo mismo. Saludos

[@matiasromera330]

no sabía que el browser podía obtener información sobre el equipo donde se usa, ahora entiendo como funcionan esas páginas que te dice el modelo de tu máquina o celular y te quieren encajar un antivirus que es más virus que otra cosa

[@jonmircha]

🤣🤭

[@igmeMarcial]

ricien sigo aqui jaja

[@jonmircha]

😉👌🏻

[@eliam9461]

Profe, ya vio el Microsoft Edge? El nuevo operador? crea cualquier página en aplicación aunque no se haya utilizado el service worker

[@jonmircha]

No, aun no

[@jonatangarcia2668]

Lo prometido es deuda 8:55 jeje ;)

[@kevinnunez8490]

Entramos al meridiano, próxima estación "Veamos si esto es de tu talla"

[@sandokanArg]

te falto poner en la descripcion, la miniserie de 6 capitulos para hacer la web como app. Oh yo no vi el anuncio?

[@jonmircha]

kzbin.info/aero/PLvq-jIkSeTUYIw8CP2AP7QJs4GeeZdvs6

[@sandokanArg]

@@jonmircha gracias, mi proximos videos a mirar, ya no miro mas nextflix, miro jonMicha chanel :-)

[@arturorodriguez3110]

porqué le dices "gatito" al simbolo # ? :)

[@jonmircha]

Por que así le decimos en México y en cada país de latinoamérica le dicen de diferente forma numeral, almohadilla, etc

[@MiguelPerez-cc4pe]

@Thouma caos Tambien en algunas partes de México le decimos Michi

[@sergiowinchester1233]

tus videos son de importal vitancia

[@jonmircha]

👋🏻😉

[@heimancastro1954]

🤑🤑🤑🤑🤑 ahora si a ganar dolares 😁😁

[@jonmircha]

🤑

[@joelventura76]

:S

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉