Cómo llega un script al navegador

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

¿Cómo llega un script al navegador?

‌

Anteriormente lo usamos con la etiqueta <script >, pero hay muchas más formas de traer un script.

‌

DOM

‌

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.

‌

DOMContentLoaded

‌

A partir de este punto tenemos la garantía de que todo nuestro documento se ha cargado.

‌

Scripts externos o embebido

‌

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.

‌

¿Donde colocar el script?

‌

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.

‌

Scripts externos

‌

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.

‌

¿Qué sucede si tenemos dos script que son asíncronos?

‌

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.

‌

Scripts externos con defer

‌

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.

‌

¡Vamos al código

‌

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.

Terminología importante

• DOM: Estructura de árbol jerárquica que lee el navegador
• DOMContentLoaded: Se garantiza que ya está cargado todo el documento y está disponible para manipular

Lectura de los scripts por el browser

Cuando el browser encuentra una etiqueta la lee y detiene la ejecución del código hasta terminar, ésto significa que:

1. Hay que leerlo
2. Hay que ejecutarlo

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 :

¿Qué es el DOM?

¿Qué es DOMContentLoaded?

DOMContentLoaded VS Load event

¿Qué es async?

¿Qué es defer?

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):

1. Fundamentos de JavaScript

2. Curso de ECMAScript 6+

3. Curso Básico de JavaScript

4. Curso de JavaScript Engine (V8) y el Navegador

5. Philip Roberts: ¿Que diablos es el “event loop” (bucle de eventos) de todos modos? | JSConf EU

6. Curso de Asincronismo con JavaScript

7. Curso de Frontend Developer

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

• La ética

        <script></script>

detiene la ejecución del DOM hasta que se ejecute todo su código, no carga mas HTML

• El atributo async

        <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

• El atributo defer

        <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

7. Cómo llega un script al navegador

Proceso DOM, CSSOM, Render Tree Tres conceptos fundamentales para entender el renderizado de la web

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.

Los pasos que el navegador realiza para transformar el código en algo que este entienda.

Pasos que ocurre en el DOM

• 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.

Pasos que ocurre en el CSSOM

• 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

Render TREE ,Pasos que sigue el navegador para construir las páginas web

• Procesa el HTML para construir el DOM.
• Procesa el CSS para construir el CSSOM.
• El DOM se une con el CSSOM para crear el Render Tree.
• Se aplican los estilos CSS en el Render Tree.
• Se ““pintan”” los nodos en la pantalla para que los usuarios vean el contenido de la página web.

DOM y JavaScript

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

Forma de cargas los scripts

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

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!

Tema: Cómo llega un script al navegador

• 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 esta disponible para ser manipulado.
  • Cuando el navegador recibe la petición de un html lo muestra de manera de una jerarquía
• Script embebido: Cuando se esta interpretando el HTML dentro de nuestro navegador, si encuentra una script embebido se va a detener para realizar la ejecución del script, el tiempo de ejecución va de acuerdo con el performance del script, luego de eso sigue con las demás etiquetas HTML
• Script externo: Sucede lo mismo que el Script embebido que al llegar a la etiqueta se detiene el DOM para analizar y ejecutar el script
• Tanto async como defer son llamados asíncronos pero con diferencias:

  • 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

    • Cuando hay más scripts asíncronos el orden de ejecución va acorde al performance del script, si este contiene un menor performance se va a analizar y ejecutar primero mientras el otro script continua su proceso de análisis posteriormente al proceso de ejecución

  • 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 Scripts deben colocarse antes del cierre de la etiqueta </body> para que pueda hacer usto de los atributos id y clases que estaremos usando dentro del script
    • El tiempo de ejecución de un script va de acuerdo a la funcionalidad que este tenga en interacción con el DOM

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

script

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.