No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Disfruta de nuestro contenido y eventos por un año a un precio especial

Antes: $179

Currency
$149/año
¡Suscríbete!

🔥 Te quedan 🔥

0D
0H
31M
23S
Curso Práctico de JavaScript

Curso Práctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Cómo conectar JavaScript con HTML

9/26
Recursos

Aportes 18

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Que es el DOM? (Document Object Model. por sus siglas en inglés)

El DOM es una representación del documento HTML como un grupo de nodos y objetos. Determinando así la forma en la cual se puede acceder y modificar la estructura, contenido y estilo de un documento HTML. En palabras mas sencillas el DOM le dice a un programa como JavaScript que nodo o parte del HTML esta leyendo (como puede ser un párrafo o un titulo o una sección, etc.) y es el mismo DOM el que modela como un objeto (con sus propiedades y métodos) esa parte del documento. Con JS se accede a esas propiedades y se invoca esos métodos para modificar, eliminar, crear, etc. elementos en una pagina web.

Por lo menos esa es la forma en la cual lo entiendo por ahora. Lo comparto porque me parece importante y quizá alguien mas tenga la duda.
Pueden encontrar una definición formal y mejor estructurada en:
https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction

Si alguien tiene una mejor explicación le agradecería la pueda compartir, para ayudar a entender mejor de que nos hablan cuando mencionan el DOM.

No sé si estoy mal, pero en la parte de arriba:

<html lang="en"> 

Siempre lo cambio a:

<html lang="es">

How to connect Js with html

A mi me gusta usar la extension Go Live del VSCode asi ya no estar recargando la pagina cada rato sino solo se actualiza

Las siglas DOM significan Document Object Model, o lo que es lo mismo, la estructura del documento HTML. Una página HTML está formada por múltiples etiquetas HTML, anidadas una dentro de otra, formando un árbol de etiquetas relacionadas entre sí, que se denomina árbol DOM (o simplemente DOM).

El DOM facilita una representación estructurada del documento y define de qué manera los programas pueden acceder, al fin de modificar, tanto su estructura, estilo y contenido

🔗 Conectar JavaScript con HTML

DOM - Document Object Model (Modelo de Objetos del Documento)
API para representar e interactuar con el documento HTML, cada parte del documento es un nodo (elemento, cadena de texto o un comentario)

.

<script>

Insertar código JS en HTML o referenciar un archivo JS.

<!-- Insertar -->
<script>
	console.log('Hello world!');
</script>
<!-- Referenciar -->
<script src="./script.js"></script>

script.js

console.log('Hello world!');

📌 Estos son interpretados y ejecutados siempre que no tengan async o defer

<script> | MDN

No puede ser tan facil… yo llorando que no sabia durante un mes xd

Para ejecutar código de JavaScript en nuestro html usaremos la etiqueta script.

<script>
	console.log('Hello, world');
</script>

<script> ⇒ Se utiliza para insertar o hacer referencia a un script ejecutable.

  • src

    • Este atributo especifica la ruta del script externos.
    • Se puede utilizar para agregar scripts embebidos o separar tu código javascript y mantener un orden.
    <script src="./main.js"></script>
    

💡 Los script son interpretados y ejecutados inmediantamente antes de que el navegador procese la página, mientras no contengan el atributo asyncdefer .

Mas información:

- SVG | MDN

recuerdo cuando siempre tenia algun error conectando el css o javascript a mi html y sufria demasiado jajaja

Excelente explicacion necesitaba este conocimiento por que nunca se habia explicado en cursos anteriores gracias !

Se puede poner la etiqueta <script> en el head o en el body del html.
Lo más recomendable es que al manipular el DOM pongamos esa etiqueta al final de nuestro <body>

Manipulación del DOM

¿Cómo conectar JS con HTML?

Hay varias formas de ejecutar Js, tanto en el frontend (Ejemplo el navegador), como en el backend (Node JS) Teniendo un entorno de ejecución.

Nuestro trabajo es hacer que esas aplicaciones web que creamos ejecute mediante el html todo el código JS y no desde la consola como veniamos trabajando.

Bueno , pero que es el DOM?

Esta es definida como Document Objet Model o “Modelo de objetos del documento” Sirve de interfáz para documentos HTML y XML y es una base para la construcción de paginas definiendo su estructura y la manera en que se puede acceder a ellos y manipularlos.

Considero que esta el primera buena practica para ver que se hayan vinculado o enlazado los archivos verificando que funcione 100%.


Como anécdota personal me pasa que estoy haciendo una pagina web simple para practicar HTML y CSS y justo estoy poniendo unos estilos para x cosa y veo que no funcionan casi me quiero matar por que no esta funcionando, la culpa es del Navegador jajajaja cuando lees el código como dice Freddy que en su gran mayoría es leer código existente y modificarlo pues es cuando realmente te das cuenta que no era el Navegador, ¿Quién fue el malo de la obra?

Resumen

crear el archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manipulación del DOM básica - Curso Práctico de JavaScript</title>
</head>
<body>
<h1>Manipulación del DOM básica</h1>
<script src="./script.js"></script>
</body>
</html>

… luego crear el archivo script.js

console.log('Hello, world');

listo, abre el archivo index.html, presiona F12 y veras en consola el texto Hello, world.

Awww yo tengo experiencia haciendo esto con ASPX y me da mucha emoción 😂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic JavaScript | Practice Excercise</title>
</head>
<body>
    <script src="./js/script.js"></script>
</body>
</html>