apuntes de la clase:
Introducción
¿Qué significa ser un profesional de JavaScript?
Aspectos que destacan a un profesional
Inicio del proyecto
Repaso de Conceptos Fundamentales
Cómo llega un script al navegador
Scope
Closures
El primer plugin
this
Los métodos call, apply y bind
Prototype
Herencia Prototipal
Cómo funciona JavaScript
Parsers y el Abstract Syntax Tree
Abstract Syntax Tree en Práctica
Cómo funciona el JavaScript Engine
Event Loop
Fundamentos Intermedios
Promesas
Getters y setters
Fundamentos Avanzados
Proxy
Generators
APIs del DOM
Fetch - Cómo cancelar peticiones
IntersectionObserver
VisibilityChange
Service Workers
TypeScript
Introducción
Tipos básicos
Funciones
Interfaces
Clases
Convertir el proyecto a TypeScript
Patrones de Diseño
Qué es un patrón de diseño
Categorías de patrones de diseño
Patrón Singleton y Casos de Uso
Implementación del patrón Singleton
¿Cómo funciona el Patrón Observer?
Implementación del patrón Observer
Casos de Uso del patrón Observer: Redux
Patrón Decorator y Casos de Uso
Implementación del patrón Decorator
Proyecto: MediaPlayer
Implementación de plugin de Ads: Desplegando en consola
Implementación de plugin de Ads: Desplegando en pantalla
Publicar en npm
Conclusiones
Conclusiones
El **DOM **es la representación que hace el navegador de un documento HTML.
El navegador interpreta el archivo HTML y cuando termina de transformarlo al DOM se dispara el evento DOMContentLoaded lo que significa que todo el documento está disponible para ser manipulado.
Todo script que carguemos en nuestra página tiene un llamado y una ejecución.
Tanto con async como defer podemos hacer llamados asíncronos pero tiene sus diferencias:
Hay que tener en cuenta que cuando carga una página y se encuentra un script a ejecutar toda la carga se detiene. Por eso se recomienda agregar tus scripts justo antes de cerrar el body para que todo el documento esté disponible.
Aportes 183
Preguntas 29
apuntes de la clase:
URGENTE PLATZI TEAM. Se necesita un curso exclusivo de manipulación del DOM con Javascript para poder aprovechar mucho más toda esta ruta. Este es un conocimieno elemental de Java Script, que está sorprendentemente ausente de esta ruta. Lo digo por experiencia propia. Tuve que estudiar por fuera de Platzi esta materia, para volver a este curso. Lo que hablaba el profe en esta clase (para mi un primerizo que viene siguiendo la ruta de la Escuela de JS), era chino.
Por ejemplo es importantísimo y vital saber manejar herramientas básicas de DOM scripting como selectores, traversing,y eventos.
Ey chicos me tome el tiempo para traerles las mejores notas del curso, denle una checada porfavor a mis notas, y si son de su agrado dejenme un like en github. Saludos 😄
Notas o https://github.com/JasanHdz/javascript-professional/tree/master/notes
Anteriormente lo usamos con la etiqueta <script >
, pero hay muchas más formas de traer un script.
Es una representación de un documento HTML, por ejemplo:
Cuando el navegador recibe este archivo lo tiene que convertir en una estructura parecida a un árbol.
Es una estructura fácil de procesar. Luego que el documento es leída y cargado ocurre el DOMContentLoaded.
A partir de este punto tenemos la garantía de que todo nuestro documento se ha cargado.
Cuando abrimos etiquetas scripts lo hacemos como un elemento más del HTML, pero no todos son iguales. Veamos este ejemplo:
Primero tenemos un script que trae a google analytics con una fuente externa, luego tenemos un script embebido de cuatro líneas. Cuando tenemos un código embebido provoca que el navegador detenga el proceso de carga hasta que todo el código que esté dentro de ese script se ejecute por completo. Pasaría algo así:
Nuestro navegador estaría leyendo el HTML y luego se encuentra con el script. En este caso el script es muy corto, el navegador se detendrá allí pero se cumplirá muy rápido.
Es muy importante saber esto, por eso vamos a ver un ejemplo:
Tenemos primero el script con las funcionalidades que quisiéramos tener en un formulario. Luego tenemos el formulario.
¿Qué pasaría si ejecutamos este código? No dará el famoso error:
Cuando tenemos el script por arriba del formulario sucede que nuestro navegador detiene la lectura y creación de elemento cuando ve la etiqueta script. En nuestro navegador no existe la ID que usamos en el JavaScript, tampoco existen nuestro formulario. La solución es colocar elemento que vamos a tratar con el script en la parte de arriba para que se cargue primero. Por esto es que siempre nos han aconsejado colocarla antes de cerrar la etiqueta </body>
, esto para que el navegador encuentre todos los elementos antes de ejecutar el script.
Con estos scripts sucede lo mismo, nuestro navegador detendrá el proceso hasta que la petición a la fuente y el script lleguen a manos de el.
Ahora existe un atributo que le podemos dar a los scripts externos.
Con este atributo logramos el la carga del HTML no se interrumpa cuando el script fetching está sucediendo, esto quiere decir que la petición va a ocurrir asíncronamente. Cuando ya tenemos el script y pasamos al script execution sí nos detenemos.
Supongamos que tenemos un script que es de tamaño inmenso y el otro sí es un poco reducido.
Ambas peticiones salen pero no necesariamente se contestan en el mismo orden, en este caso primero responde el primer script, cuando se termina de cargar inmediatamente se ejecuta. Cuando llega el segundo script pasa lo mismo, se ejecuta inmediatamente interrumpiendo al HTML.
Tenemos esta tercera forma de traer scripts externos. Esto lo que haces es posponer la ejecución del JavaScript hasta el final de la carga del HTML.
Es similar al async ya que funciona asíncronamente sin detener el HTML. La gráfica muestra que la petición ocurre y se responde muy temprano, pero no se ejecuta hasta el final.
Ahora en nuestro código lo que haremos es crear un archivo index.js
en nuestra carpeta assets. Luego cortaremos el script que teníamos en nuestro HTML y lo pegamos en el archivo creado, no tenemos que pasar las etiquetas </script>
. Quedará así:
Ahora a las etiquetas <script>
que quedaron en nuestro HTML le agregaremos el atributo src
con el path de nuestro nuevo archivo index.js
.
<script src="./assets/index.js"></script>
No usaremos async
ni defer
por que ya lo tenemos al final y no interrumpirá con el HTML.
Cuando el browser encuentra una etiqueta la lee y detiene la ejecución del código hasta terminar, ésto significa que:
Cuando tenemos un script previo al contenido, y se ejecuta, todavía no está cargado lo demás del DOM, por lo que no podemos acceder a los elementos, por lo tanto, se recomienda que el script se corra después de que se cargue el elemento
Cuando llamamos a un archivo, el browser detiene la ejecución del código a menos de que utilicemos la propiedad async o defer.
Async
En caso de usar async no se va a detener la ejecución del DOM, hasta que llegue la respuesta
<script async src=“script.js”>
Al trabajar con respuestas asíncronas es difícil predecir cuál se responderá primero, normalmente el más pequeño o con mejor respuesta de servidor llegará primero y detendrá la ejecución y no se responderá otro script antes de que termine
Defer
En caso de usar defer, la respuesta sucederá asíncronamente, pero no se llamará hasta que no termine de leer el DOM
<script defer src=“script.js”>
Recuerdan el $(document).ready(function(){});
de jQuery? Les dejo la versión en Vanilla JS
document.addEventListener('DOMContentLoaded', function(){});
donde estas Sacha!!!
Aquí un poco más de información :
RESUMEN
DOM: Representa el codigo HTML.
DOMContentLoaded: El documento esta disponible para manipularlo.
En la interpretación de los scripts, hay varias formas:
Async: Ejecuta el html y la carga del DOM al mismo tiempo.
defer: Ejecuta primero el DOM y luego el script.
Embebidos: Cuando están dentro del .html, va leyendo linea por linea del DOM, al llegar al script, ejecuta el script y continua con el DOM.
Por la carga y para que todo sea más rápido, se recomienda agregar los scripts antes de cerrar el body, porque asi también todo lo que el necesita (Id, clases, tags) ya están en el DOM.
Buenisima clase, desconocia el ‘defer’ y el ‘async’ para usarlo en HTML
Me gusto este tema, la verdad hay que estar preparado con lo fundamental para entender este curso ya que no se para a explicar puntos ya antes vistos, para eso se debe seguir la siguiente ruta y ensayar con lo que aprenden (como hacer una agenda con JavaScript):
Les ayudara a comprender mejor todo y no tendran problemas para enterderle al profe Richard.
Las gráficas con las explicaciones de los diferentes llamados están buenísimas, me ayudaron a entender la diferencia que en puro código me costaba trabajo. ¡Gracias!
Creo que tendré que regresas a fundamentos de javascript 😄
estupendo, ahora si entendí lo de async y el defer, estupendooo
Por fin entendí muchas cosas sobre el DOM. Que buen profesor, no asume, simplemente explica.
En consola pueden **BAJAR EL VOLUMEN **del video con:
player.media.volume = 0.5
Lo mejor es agregar los scripts justo antes de cerrar la etiqueta body. Es recomendable para poder tener el documento completo antes de iniciar la carga de los scripts.
disculpe profe pero en verdad me es muy complicado entenderlo 😦
para iniciar este curso clone el repositorio y segui los siguientes pasos.
espero les sirva.
1. git clone url_repo
2. git checkout ff1badc05e00be6bb018bf3e5705ba672e20821f
3. git branch nueva_rama
4. git checkout nueva_rama
Notas de la clase
<script></script>
detiene la ejecución del DOM hasta que se ejecute todo su código, no carga mas HTML
<script async src="index.js"></script>
en una declaración de script externo permite que el script se descargue mientras el DOM se sigue ejecutando , pero el DOM se deja de ejecutar para ejecutar el script una vez la descarga a terminado
<script defer src="index.js"></script>
igual que async permite la descarga asíncrono del script pero este no se ejecutara hasta que la cargar del DOM se allá ejecutado en su totalidad
Tanto con async como defer podemos hacer llamados asíncronos pero tiene sus diferencias:
async. Con async podemos hacer la petición de forma asíncrona y no vamos a detener la carga del DOM hasta que se haga la ejecución del código.
defer. La petición es igual asíncrona como en el async pero va a deferir la ejecución del Javascript hasta el final de que se cargue todo el documento.
Hola chicos, por lo visto a muchas personas le gustaron los apuntes que fui realizando en el curso. Lastimosamente cuando las hice no tenia mi cuenta de Platzi, ahora que la pude adquirir les comparto el link donde subí a github todos los apuntes en pdf para que los tengan a la mano siempre.
repositorio: https://github.com/Boogst/javascript
Si le gustaron esos apuntes los invito también a mirar los que hice para docker: https://github.com/Boogst/docker
Nunca pares de aprender !!
Cuando vi esto por primera vez, me imaginé que era un atributo forzoso que el desarrollador de la librería requería para poder trabajar.
Ahora sé como administrar la petición de mis scripts de terceros para optimizar la carga de mi documentos HTML.
Explicado de forma interactiva en :
https://manzdev.github.io/script-type/
Dom ==> Dominic Toreto???
Apuntes de la clase…
Entonces el defer es bueno usar en g maps?
Buen dato acerca de async y defer, no los conocía.
Geniall la explicación de los scripts externos 😄
Muy buenos ejemplos de cuando hay que insertar los script con async y defer
que genial que justifique cada linea de código, buenisimo!
genial son los atributos
async: descargar el script sin detener la ejecución del HTML y cuando ya esta listo es que lo ejecuta.
defer: descargar el script sin detener la ejecución del HTML pero solo lo ejecuta cuando el HTML se a terminado de ejecutar.
DOM
DOM, es la representacion que hace el navegador de un documento HTML
Cuando recibe el documento HTML lo convierte en una estructura de arbol
DOMContentLoader es el evento que ocurre cuando el navegador termina de convertir al DOM
SCRIPT
Cunado el DOM se este procesando va a detener todo el procesamiento cuando se encuentre la etiqueta <script>. Es importante colocar el script en el lugar correcto (por ej, el final del body).
ASYNC Y DEFER
Nos permiten hacer llamadas asincronas
Async: nos permite realizar peticiones de forma asincrona y no detiene la carga del dom hasta que se pueda ejecutar el script
Defer: El script se ejecutara cuando termine de cargar el codiog HTML
Excelente curso, se tiene que llegar con bases muy sólidas en JavaScript: POO con JavaScript, Promesas, Scope, … para todo ello existen cursos en la escuela de desarrollo web.
Un objecto que explica un poco mas breve lo que el profesor hizo
const mediaPlayer = {
media: video,
play: function() {
this.media.play();
},
pause: function() {
this.media.pause();
},
togglePlay: function() {
(this.media.paused)
? this.play()
: this.pause();
}
}
button.onclick = () => mediaPlayer.togglePlay();
Me está gustando mucho este profesor!
Definitivamente esta clase ha sido de mucha información nueva 🤯🤯🤯
Es la primera clase de todas las que tengo vistas en Platzi que antes que termine, vuelvo a verlo porque me di cuenta que me quedaba mucha información si anotar.
Genial clase y me cierra mucha información que tenía suelta.
Realmente se nota que me van profesionalizando en esta carrera jeje.
Debe mejorar la explicacion
Es buena practicar validar si e documento de termino de cargar para ejecutar nuestra js? o no hace falta porque nuestra etiqueta script esta de ultima? He visto que algunos desarrolladores si lo validan.
excelente, no sabia del async y el defer
Esta clase me gusto mucho mas, buenos datos.
Súper buenas las clases de este curso. Pero sí hay que tener claro los fundamentos del lenguaje. Si te sientes muy perdido recomiendo repasar primero el curso de JavaScript básico y Fundamentos de JavaScript y con los conocimientos adquiridos construir un proyecto propio desafiante con puro HTML (css opcional) y JavaScript. Con ello después le sacarás el máximo provecho a este curso. Saludos.
Las propiedades async y defer solo aplican cuando la etiqueta contiene también el atributo src de lo contrario no funcionara, ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>¿Donde colocar mis scripts?</title>
</head>
<body>
<script>
//Aqui no funciona el atributo async o defer
let h1 = document.querySelector('#main-title')
h1.textContent = "Titulo principal"
</script>
<script src="url..." async></script><!--El atributo funcionara-->
<script src="url..." defer></script><!--El atributo funcionara-->
<h1 id="main-title"></h1>
</body>
</html>
Mi reto terminado
const video = document.querySelector('video')
const button = document.querySelector('button')
function MediaPlayer(config){
this.media = config.el
}
MediaPlayer.prototype.play = function ()
{
if (this.media.paused){
this.media.play()
} else {
this.media.pause()
}
}
const player = new MediaPlayer({el: video})
button.onclick = () => player.play()```
¿Cómo llega un script al browser?
Cuándo el navegador está armando el DOM, y se encuentra con una etiqueta script, detiene el procesamiento de HTML y se encarga de hacer el fetch y execute del Javascript en dicha etiqueta. Una vez termina la ejecución, se continua el armado del DOM.
Atributos de la etiqueta script:
Async: el procesamiento del DOM va a continuar mientras se ejecuta el fetch del Javascript. Solo va a detenerse cuando este esté disponible para su ejecución.
Defer: el fetch se va a realizar de manera asíncrona, igual que con el atributo anterior. Pero va a aplazar la ejecución del javascript hasta que el DOM esté completo.
Genial, ahora entiendo lo del async y defer.
Alguna vez leí que siempre era mejor agregar los scripts al final del body.
No entiendo porque el script se considera un asset
Código de la clase:
const video = document.querySelector('video')
const button = document.querySelector('button')
function MediaPlayer(config) {
this.media = config.el
}
MediaPlayer.prototype.play = function() {
this.media.play()
}
MediaPlayer.prototype.pause = function() {
this.media.pause()
}
MediaPlayer.prototype.togglePlay = function() {
(this.media.paused)
? this.play()
: this.pause()
}
const player = new MediaPlayer( { el: video } )
button.onclick = () => player.togglePlay()
el Defer me parece bastante util, pues segun entiendo, se podria solicitar un recurso de codigo script virtual. asi que mientras se ejecuta el script va cargando el DOM, es decir, ahorrando tiempo.
muy interesante el async y defer y como se soluciona simplemente.
Esta clase es demasiado importante para un desarrollador JavaScript. Entender esta clase de conceptos te puede ahorrar muchos problemas en el futuro.
No tenia idea que <script> detenia la ejecucion del DOM, creo que eso se debería dar a conocer en lo mas basico de JS, aunque pensándolo bien, creo que no hubiese entendido la importancia que eso tiene
Está muy buena la información
El navegador por lo general no entiende de manera directa la sintaxis que escribimos tanto en html como css, para entender el código que escribimos el navegador transforma las etiquetas html y las reglas de css en objetos entendibles para el navegador. Cabe añadir que el orden de nuestra estructura html es igual al orden de los objetos que el navegador crea.
DOM
Document Object Model. Es una transformación del código HTML escrito por nosotros a objetos entendibles para el navegador.
CSSOM
Así como el DOM para el HTML, EL CSSOM es una representación de objetos de nuestros estilos en CSS.
Render Tree
Es la unión entre el DOM y el CSSOM para renderizar todo el código de nuestra página web.
El código lo transforma una serie de Bytes el código escrito en el lenguaje
Transformar los bytes en unos caracteres esto lo realiza tomando en cuenta la codificación que le indiquemos en la etiqueta chartset=utf-8.
Luego transforma esos caracteres en unos tokens. Que son unos elementos html que él entiende, en este punto el navegador identifica que etiqueta abre y que etiqueta cierra. Esto lo especifica la w3c.
Luego realiza una transformación de tokens a nodos y estos nodos son los objetos que entiende el navegador
Luego el DOM sería tomar todos esos elementos (nodos) y ponerlos en un árbol y ese árbol va a tener una estructura que depende de la organización que tenemos en nuestros sitios web.
CSSOM lo que va a hacer es la transformación individual a cada una de su sintaxis y la va a pegar por decirlo así de forma individual en cada nodo del árbol del DOM.
Es importante recalcar que si escribimos reglas de manera no estandarizada y con buenas prácticas se verá afectado el rendimiento de la rendermerización de nuestra página web y esto se conoce como performance o rendimiento
El **DOM ** es la representación que hace el navegador de un documento HTML. El navegador interpreta el archivo HTML y cuando termina de transformarlo al DOM se dispara el evento DOMContentLoaded lo que significa que todo el documento está disponible para ser manipulado.
Todo lo anterior es un proceso
Es importante en donde introducimos el un script de nuestra página web, la mejor opción es introducir los script locales al final del archivo body. La razón de esto es porque el navegador detiene cualquier proceso de carga del DOM si se consigue algún código de javaScript o script. Entonces es por ello que es recomendable es colocar cualquier scrip local al final del body.
TypeError si se coloca un JavaScript que manipule un elemento del DOM y todo esto se hace antes del código HTML esto dará un error conocido como.
El TypeError es un objeto que representa un error cuando no se pudo realizar una operación, normalmente (pero no exclusivamente) cuando un valor no es del tipo esperado.
Todo script que carguemos en nuestra página tiene un llamado y una ejecución.
script locales , son aquellos que están presente en la etiqueta script usando el atributo src (source) de la etiqueta
script embebidos el script embebido es aquel código está presente dentro de la etiqueta script y se encuentra en el código html.
Tanto con async como defer podemos hacer llamados asíncronos pero tiene sus diferencias:
async. Con async podemos hacer la petición de forma asíncrona y mientras se hace la consulta para obtener el archivo (Script fetching) del script, va cargando elementos del DOM y no se detiene la carga. Este se detiene hasta que el archivo script se obtiene, allí va a detener carga del DOM y se realiza la ejecución del código (Script Execution).
defer. La petición es igual asíncrona (Script fetching), como en el async, pero va a deferir la ejecución del Javascript (Script Execution) hasta el final de que se cargue todo el documento.
Hay que tener en cuenta que cuando carga una página y se encuentra un script a ejecutar toda la carga se detiene. Por eso se recomienda agregar tus scripts justo antes de cerrar el body para que todo el documento esté disponible.
Hola Comunidad.
.
En base a lo que dijo el profesor me surgió una duda 🤔: ¿Qué es mejor, colocar el script con defer en el head o colocar el script sin defer antes de cerrar la etiqueta body?
.
Según pude averiguar la respuesta es que colocar el script utilizando defer en el head resulta en una optimización de la carga de la web debido a que los navegadores actuales se han preparado para que esta sea la práctica estándar.
.
Si bien en pasados años era variable, parece ser que en la actualidad esa “técnica” puede ayudar a optimizar la carga de nuestra página web al estar siendo tomada como estándar por los navegadores .
.
Revisé varios enlaces (varios 😑) pero comparto con ustedes los 3 que me parecieron más claros o que citan documentación oficial:
.
Enlace de Stack Overflow dice: “These days, unless you’re supporting very old browsers, you should just go ahead and use async/defer in the head”.
Enlace de Medium dice: “Basically this attribute is ideal for all scripts that are guaranteed to access the DOM, and must do so successfully at all costs”.
Enlace a Blog de JS dice: “The best thing to do to speed up your page loading when using scripts is to put them in the head, and add a defer attribute to your script tag”
.
Obviamente solo esas líneas no justifican la respuesta, dentro de cada enlace está el detalle del análisis realizado y las pruebas hechas.
.
Espero les sirva este dato que nos puede ayudar a optimizar la carga de nuestras páginas web en algún proyecto.
.
¡Saludos!
async: Realiza una petición de forma asíncrona y no vamos a detener la car del DOM hasta que se haga la ejecución del código
defer: Realiza una petición de forma asíncrona como en el async pero va a diferir de la ejecución del JavaScript hasta el final de que se cargue todo el DOM
NOTAS IMPORTANTES:
Los atributos async y defer son similares pero no iguales, la diferencia radica en que defer realiza la ejecución del script al final del procesamiento del html, mientras que async lo hace inmediatamente después de obtener la respuesta del archivo
El DOM es la representación de un documento HTML.
Cuando llega el HTML al browser, este lo empieza a parsear: Va leyendo etiqueta por etiqueta y va creando el DOM. Cuando este proceso termina por completo es cuando obtenemos el evento <code>DOMContentLoaded</code>.
Cuando el navegador encuentra script en medio del HTML va a dejar de leer las etiquetas y ejecutará el script, luego continuará leyendo.
Commit del repositorio para esta clase
https://github.com/platzi/javascript-profesional/commit/b1362ca2a4bb42b36c82788465f17031b67a2b34
les comparto otro recurso interesante sobre las formas de cargar scripts, y de paso repasan el ingles ☺
recurso interesante
Tanto con async como defer podemos hacer llamados asíncronos pero tiene sus diferencias:
async. Con async podemos hacer la petición de forma asíncrona y no vamos a detener la carga del DOM hasta que se haga la ejecución del código.
defer. La petición es igual asíncrona como en el async pero va a deferir la ejecución del Javascript hasta el final de que se cargue todo el documento.
Hay que tener en cuenta que cuando carga una página y se encuentra un script a ejecutar toda la carga se detiene. Por eso se recomienda agregar tus scripts justo antes de cerrar el body para que todo el documento esté disponible.
No puedo creer que estuve los últimos 3 años desarrollando y sin saber esto. La cantidad de veces que me salió el Type Error, y las soluciones que le daba a esto les sorprendería ajjajajajaja
esta parte no me gusto , veo codigo modificado que no lo hizo en el video pasado , y me confundo pienso que debio iniciar con un proyecto nuevo el no es el hecho de que sea un curso profesional haga modificaciones y no sepa uno que mal no me gusto
Yo resolví de esta forma el desafío del botón play/pause. Puede alguien darme feedback?
button.onclick = () => {
if (video.paused === false) {
player.pause();
} else {
player.play();
}
};```
excelente expliaciòn
Para una demostración un poco más gráfica de la abstracción del código JS a un AST (Abstract Syntax Tree) que es el árbol que se menciona aquí, también se puede ir a este link, donde puedes poner el código que quieras y te muestra cómo lo interpreta.
Orden de ejecución (async) o vamos a detener la carga del DOM hasta que se haga la ejecución del código.
Es común usar el Async o el defer?
Es decir, siempre declaro el script al final
Script externos (defer) la ejecución del Javascript hasta el final de que se cargue todo el documento.
Script async: Trae los recursos sin detener el procesamiento de HTML y hasta que se traiga todo entonces detiene HTML y ejecuta.
Script Defer: Trase los recursos externos de manera asíncrona, solamente que hasta que se haya cargado todo, difiere, lleva al final toda la ejecución de lo que es necesario para el código.
DOM es el objeto con el que se puede manipular, el navegador realmente recibe éste objeto por medio de la lectura del documento HTML y es cuandos e dispara DOMContentLoaded para interpretar todo y ahora disponible para manipular
Ya entiendo un poco mas async
Me gustó esta clase
Muy buena clase no sabía de defer y async dentro de la etiqueta script.
Tanto con async como defer podemos hacer llamados asíncronos pero tiene sus diferencias:
async. Con async podemos hacer la petición de forma asíncrona y no vamos a detener la carga del DOM hasta que se haga la ejecución del código.
defer. La petición es igual asíncrona como en el async pero va a deferir la ejecución del Javascript hasta el final de que se cargue todo el documento.
Hay que tener en cuenta que cuando carga una página y se encuentra un script a ejecutar toda la carga se detiene. Por eso se recomienda agregar tus scripts justo antes de cerrar el body para que todo el documento esté disponible.
El **DOM **es la representación que hace el navegador de un documento HTML.
El navegador interpreta el archivo HTML y cuando termina de transformarlo al DOM se dispara el evento DOMContentLoaded lo que significa que todo el documento está disponible para ser manipulado.
Todo script que carguemos en nuestra página tiene un llamado y una ejecución.
OK:
<form id="loginForm" action="/login" method="POST">
</form>
<script>
let formEl = document.querySelector('#loginForm');
console.log('formEl');
console.log(formEl);
if (formEl) {
formEl.addEventListener('submit', function (event) {
alert('hello');
});
}
if (formEl) {
alert('found object');
} else {
alert('error!!!');
}
</script>
BAD:
<script>
let formEl = document.querySelector('#loginForm');
console.log('formEl');
console.log(formEl);
if (formEl) {
formEl.addEventListener('submit', function (event) {
alert('hello');
});
}
if (formEl) {
alert('found object');
} else {
alert('error!!!');
}
</script>
<form id="loginForm" action="/login" method="POST">
</form>
Entendido
Con esta clase me quedo super claro el por que de las ubicaciones de la etiqueta <script>, algo que solía hacer sin saber el por que… excelente información
Muy buena la clase. excelente. tanto que tengo una pregunta.
¿Por que no es mejor usar ‘defer’ al final del head creo que te nos ahorramos un montón de tiempo ?
Con async y defer, si el script llega a un id (o elemento pedido por el script) que el DOM aún no ha cargado se genera error, entonces hay que tener cuidado al usarlo.
No se debe abusar el uso de aync y defer ya que como lo explicó el profesor puede dar lugar a errores, en su lugar yo siempre que puedo uso mis scripts al final del body.
Excelente clase, no conocía lo de defer.
esta muy bien explicado. mejor que mi instituto actual.
Excelente clase!
me parece importante resaltar esto
<script defer>: el script se descarga de forma asíncrona, en paralelo con el análisis HTML, y además su ejecución es diferida hasta que termine el análisis HTML. No hay bloqueo en el renderizado HTML. La ejecución de todos los scripts diferidos se realiza en el mismo orden en el que aparecen en el documento.
Mejor explicación, Imposible !!!
Bien explicado!
Muy buen dato!! Gracias.
Muy buena clase, importante conocer estos atributos de los Scripts.
Demasiado interesante este concepto de Async y Defer en las etiquetas no lo conocia, pero mi conclusion es:
Async En la etiqueta indica que solo detiene la carga del HTML cuando el fetch del script este completa y se ejecute
Defer En la etiqueta indica que solo se ejecutara cuando la carga del HTML este completa.
Muy interesante.
Interesante defer. No lo sabía.
No los conocía.
seria mejor meterlo dentro de una carpeta src todo no?
Increíble explicación
El DOM es la representación que hace el navegador de un documento HTML.
El navegador interpreta el archivo HTML y cuando termina de transformarlo al DOM se dispara el evento DOMContentLoaded lo que significa que todo el documento está disponible para ser manipulado.
Todo script que carguemos en nuestra página tiene un llamado y una ejecución.
Hay que tener en cuenta que cuando carga una página y se encuentra un script a ejecutar toda la carga se detiene. Por eso se recomienda agregar tus scripts justo antes de cerrar el body para que todo el documento esté disponible.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.