DANDO VIDA A NUESTRA PAGINA

DOM STYLE

Una vez definido los scripts, debe comunicarse con el html para saber cuando ejecutarse. Esto se puede definir mediante las etiquetas, cada una soporta diferentes eventos. Los eventos son una forma de interactuar con los elementos de una página web mediante el uso de JavaScript.

Por ejemplo "onload function()" en el body, ejecutará la función luego de cargar el body.

En el input, podemos poner un evento del tipo "onmouseover" que se activa al pasar el mouse sobre el elemento.

En el botón, pondremos un evento del tipo "onclick", que se activa al hacer click al botón.

Hay muchos más eventos, algunos de los más usados son (además de los nombrados ):

onchange: Se produce cuando se ha cambiado el valor de un elemento HTML, como un campo de texto, un checkbox o un select
onmouseout: Se produce cuando el usuario aleja el ratón de un elemento HTML. Por ejemplo, se puede usar para restaurar el estilo o ocultar la información adicional sobre el elemento
onkeydown: Se produce cuando el usuario presiona una tecla del teclado. Por ejemplo, se puede usar para validar la entrada del usuario o realizar acciones según la tecla pulsada

Igualmente, lo ideal es dejar el HTML "lo más limpio posible" e indicar en nuestro archivo .js que "esté atento" para ejecutar el script en el momento preciso.

Esto lo haremos usando objetos globales en javascript sobre los que aplicaremos los eventos.

Por ejemplo, window es un objeto global que representa la ventana del navegador donde se ejecuta el código javascript. Podemos usar window.onload para asignar una función que se ejecutará en cuanto la ventana haya terminado de cargar los recursos.

Document es otro objeto global que representa el documento HTML que se muestra en el navegador. Document sirve como punto de entrada al contenido de la página web, que es el árbol DOM (Document object model). El árbol DOM incluye elementos como <body> y <table> entre muchos otros y proporciona funcionalidad global al documento, como obtener la URL de la página y crear nuevos elementos en el documento. Mediante document se puede acceder y modificar los documentos del HTML desde JavaScript, añadiendo nuevas etiquetas, modificando o eliminando otras, cambiando sus atributos HTML, añadiendo clases, cambiando el contenido del texto, etc. Para ello, tenemos muchos métodos para trabajar con el DOM, como document.getElementbyId(), document.createElement(), document.querySelector(), etc.

A continuación, aprenderemos a insertar elementos de forma dinámica y hacer pedidos a una API:

RICK AND MORTY