Cómo conectar JavaScript con HTML

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.

Diego Garay Cullas

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

Gualberto Montiel

Rubén Ernesto Aragón Gil

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

<html lang="en">

Siempre lo cambio a:

<html lang="es">

Duvan Zapata

How to connect Js with html

Manuel Alejandro Cabos Apolaya

🔗 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

Aaron Yamir Fernando Quintana Lobos

Para autocompletar la estructura básica de html en visual studio code, se escribe ! y presiona el tabulador

José Rodrigo Álvarez Herrera

hace 7 meses

¿Soy el único que piensa que habla mucho y dice poco? 😕

Josetruyolm

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

Ulises Alejandro Mánica Caricio

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

Juan David Amaris Garay

Para unos estudiantes puede ser chévere la energía de Juan David, en lo personal cuando ya llevo varios minutos escuchándolo se vuelve un poco estresante 😒.
Lo siento, no puedo ver más de 3 video seguidos sin tomarme un descanso. Soy más del estilo de Diego de Granda, sencillo, claro y al grano.

Max Felipe Hess Alvarez

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

Charles Duck Castillo Rosas

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 async o defer .

Mas información:

- SVG | MDN

Juan Camilo Zuniga

Ahora si se viene lo buenooooo

Gerardo Garduño Rosas

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?

Nicolas Lopez

Siento que aprendo 😭

Edgar Geovani Xuc Xol

hace 10 meses

todo nitido

Edgar Geovani Xuc Xol

gracias a Dios ,si voy entendiendo bien amo este curso

carlos maestre

a mi me van a perdonar pero de los profesores que he visto en platzi. este es el que menos me convence

Gianluca Reyes Cisneros

Excelente

NFTamina EDU

Si usan VsCode , les recomiendo ampliamente que instalen la extensión Live Server. De esta forma, con solo guardar los cambios en el archivo que estamos trabajando, se recarga la pagina y se actualizan los cambios.

Luis Carlos Pacheco Lanzziano

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.

Ricardo Alfonso Chavez Vilcapoma

DOM lo entiendo como la forma en que el navegador estructura las etiquetas HTML en objetos para que éstas puedan se usadas por JS. Además para CSS existe el CSSOM que tiene la misma función del DOM.

La combinación de DOM y CSSOM es RENDER TREE, que significa renderizar todo el código la página web.

Renderizar es la representación gráfica de una página web, es decir, mostrar en pantalla todo lo que se ha escrito en código HTML y CSS, con las propiedades de JavaScript, si es que las hay.

Ricardo Collado

Excelente!, creo que esta fue la primera clase de Juan David, que duro menos de 20 minutos !

Joshua Alas

Medio video hablando de cosas irrelevantes y no enfocandose en enseñar eficientemente.

reality !

Les recomiendo la extensión Live Server para ver los cambios de su aplicación en tiempo real, sin tener que recargar la página contantemente.

Juan Esteban Sierra Agudelo

Esperando con ansias esta clase, llevo varios meses preparandome para poder llegar a la manipulación del DOM😁

Gian HM

hace 9 meses

Para ejecutar instalen la extensión Live server, y luego van abajo de su código en la esquina inferior y le dan Go live, y se va ejecutar

Cristian Rodríguez Barba

Buena recomendación la extensión Peacock. Muy recomendable de mi parte de hoy en adelante

Charles Duck Castillo Rosas

Mis apuntes de este curso en Notion

Luis Alberto Arciniegas Jaimes

https://coderslink.com/talento/blog/ahorra-tiempo-al-escribir-codigo-html-en-visual-studio-code-utilizando-emmet/

Comparto atajos para Visual Studio Code, utilizando Emmet :

Espero sea de gran ayuda.

Jonathan David Olivos

Mis apuntes en Notion! 😄
Apuntes

Stephany Plaza

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

Mateo Gonzalez Amortegui

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

JoaoGarduno

<!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>

ÁNGEL URIEL VELASCO MEJÍA

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

Kevin Copo

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>

Ibrahim Gragirena

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.

Jose Antonio Rojas Ollarves

hace 11 días

Hace años atras estudie backend y es mucho mas directo la forma en la que se usa y todo pero es muy ambiguo ahora estoy aqui en frontend porque llego el punto donde no me gusto un apantalla negra y quiero hacer algo con mas color y vida, vamos a ver como funciona esto estoy muy feliz

Jose Antonio Rojas Ollarves

hace 12 días

Ok aqui seguimos

Julian David Alzate Cuervo

Una vez instalada, podrás empezar a usar esta extensión al **ejecutar el comando CTRL + SHIFT + P y buscar peacock**

Max Andy Diaz Neyra

Dato de vital importancia: * El profesor coloca la etiqueta script casi al final del archivo para primero cargue los elementos y despues el codigo. * Esto se debe a que para manipular el DOM necesitamos que este pintado en la pantalla, que exista y para ello el JS debe ejecutarse despues. * Existen varios atributos hoy para manejar ese tema como async y defer ya no siendo necesario colocar la etiqueta script al final.

Sebastian Ruiz Pulache

Profesor Juanuna pregunta como se llama su tema en vs code y que hay que desacargar para tenerlo?

Jhon Edward Quipo Baron

![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-09-25%20152705-2b37f06d-783f-4934-9612-fdbecbc56129.jpg) recuerden agregar defer en el script para que les lea el html primero y depues el script

Luis Alfredo Suarez

hace 4 meses

Para conectar JavaScript con HTML, puedes seguir estos pasos básicos:

Incorporar el script en tu HTML: Debes incluir tu código JavaScript en el archivo HTML utilizando la etiqueta <script>. Puedes hacerlo de dos formas: dentro del <head> o al final del <body>.

<!DOCTYPE html>
<html>
<head>
    <title>Mi Página</title>
    <script src="mi_script.js"></script> <!-- Enlaza a un archivo externo -->
</head>
<body>
    <!-- Contenido de la página -->
    <script>
        // Tu código JavaScript aquí si prefieres ponerlo inline
    </script>
</body>
</html>

Enlazar a un archivo externo: Puedes almacenar tu código JavaScript en un archivo separado (por ejemplo, mi_script.js) y luego enlazarlo en tu HTML, como se muestra en el ejemplo anterior.
\
Escribir código JavaScript: Puedes escribir tu código JavaScript directamente dentro de la etiqueta <script> en el <head> o al final del <body>, según tus preferencias.
```
<script>
    function miFuncion() {
        // Código JavaScript aquí
    }
</script>
```

Interactuar con elementos HTML: Puedes seleccionar elementos HTML utilizando el método document.querySelector y luego manipular su contenido, atributos y estilos desde JavaScript. Por ejemplo:

<p id="miParrafo">Este es un párrafo.</p>

<script>
    // Seleccionar un elemento por su ID
    var parrafo = document.querySelector("#miParrafo");

    // Manipular el contenido del párrafo
    parrafo.innerHTML = "Nuevo contenido para el párrafo";
</script>

Responder a eventos: Puedes añadir funciones de JavaScript para responder a eventos, como clics de botones, cambios de input, etc.

<button id="miBoton">Haz clic</button>

<script>
    var boton = document.querySelector("#miBoton");

    boton.addEventListener("click", function() {
        alert("¡Botón clickeado!");
    });
</script>

¡Estos son los pasos básicos para conectar JavaScript con HTML! Puedes ampliar tus conocimientos explorando más sobre DOM (Document Object Model), manipulación de elementos, eventos y técnicas más avanzadas de interacción.

Espero haber sido de ayuda! 👨‍💻

Antonio Maldonado

hace 4 meses

Googleen el poner la etiqueta:
.
<script src= “index.js” defer></script>
.
Con el atributo defer* en el HEAD.

Maria Gabriela Rodriguez Cuevas

🌐 Archivos del Proyecto 🌐

Pasos 📌

• Ir a la terminal (presiona las teclas Ctrl + Alt + t), crear la carpeta del proyecto llamado curso-js-practico ejecutando:

take curso-js-practico

• Crear otra carpeta para el mini-proyecto llamada conectar-js-html con:

take  conectar-js-html

• Abrir el editor VS Code ejecutando:

code .

• En el menú izquierdo de VS Code, crear un nuevo archivo llamado index.html, el código queda:

<!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>

• Crear otro archivo llamado script.js, el código queda:

console.log('Hello, world');

• Para correr el script, se da click derecho sobre el nombre de index.html en el menú de VS Code y se selecciona “Open with Live Server”, aparece un navegador, se da click derecho en la página y se selecciona “Inspeccionar”, luego se selecciona la pestaña “Console”.
- • Cuando se recarga la página, en la consola aparece el mensaje: “Hello, world”.

Francisco Steven Tabares Ussa

hace 7 meses

El DOM (Document Object Model) es una representación estructurada y jerárquica en forma de árbol de un documento HTML, XML u otro tipo de documento similar. El DOM permite que los desarrolladores web accedan y manipulen los elementos de un documento de una manera programática, lo que les permite crear dinámicamente contenido, modificar el estilo y la estructura del documento, y responder a eventos del usuario. En resumen, el DOM es un modelo de objetos que proporciona una interfaz para interactuar con un documento web y es fundamental para la creación de aplicaciones web interactivas y dinámicas.

Julián Guacaneme

Conectar el archivo de JS con el HTML

Elvis Milan

enserio!

Raymondi Alejandro Ramos Vásquez