Imagen destacada del artículo Cómo insertar Javascript en HTML

Cómo insertar Javascript en HTML

javascript svg
actualizado: 15 / 01 / 2023

JavaScript es el lenguaje de programación que domina ampliamente el desarrollo frontend ya que permite agregar funcionalidades dinámicas a un sitio web.

En este artículo aprenderás diferentes formas de insertar Javascript en HTML.

Método 1: Usar JavaScript en html desde un archivo externo

Esta es la forma más común de ejecutar javascript en html, crea un archivo y enlazalo a tu página utilizando la etiqueta script por ejemplo:

html
<script src="script.js"></script>

Método 2: Incluir JavaScript en la etiqueta script

Puedes colocar esta etiqueta en cualquier parte de tu documento HTML, pero es más común colocarla al final del documento, justo antes de la etiqueta de cierre body.

Por ejemplo, si quieres insertar un mensaje de alerta en tu página web, puedes usar el siguiente código:

html
<script>
alert("Hola mundo");
</script>

Método 3: Incluir JavaScript en un atributo de evento

Otra forma de insertar JavaScript en HTML es incluyéndolo en un atributo de evento. Los atributos de evento son atributos especiales que se activan cuando sucede un evento determinado en la página web, como hacer clic en un botón o cargar la página.

Por ejemplo, si quieres mostrar un mensaje de alerta cuando el usuario haga clic en un botón, puedes usar el siguiente código:

html
<button onclick="alert('Hola mundo')">Haz clic aquí</button>

También es posible incluir una función JavaScript en lugar de una sentencia simple. Por ejemplo:

html
<button onclick="miFuncion()">Haz clic aquí</button>
<script>
function miFuncion() {
alert("Hola mundo");
}
</script>

Método 4: Incluir JavaScript en una etiqueta template

Las etiquetas template son etiquetas especiales que se usan para almacenar contenido que no se muestra inmediatamente en la página web.

Para incluir JavaScript en una etiqueta de template, debes encerrar el código JavaScript entre las etiquetas y template. Luego, puedes utilizar el método .innerHTML para insertar el contenido de la etiqueta de template en el documento HTML.

Por ejemplo, si quieres insertar un mensaje de alerta en tu página web utilizando una etiqueta de template, puedes usar el siguiente código:

js
<template id="miTemplate">
<script>alert('Hola mundo');</script>
</template>
js
let template = document.getElementById("miTemplate");
document.body.innerHTML = template.innerHTML;

Es importante tener en cuenta que las etiquetas de template no se procesan de forma automática por el navegador. Debes utilizar JavaScript para insertar el contenido de la etiqueta de template en el documento HTML.

Artículos relacionados:
Cómo filtrar elementos de un array con filter javascript

Imagen destacada del artículo Cómo filtrar elementos de un array con filter javascript

Cómo eliminar elementos repetidos de un arreglo en JavaScript

Imagen destacada del artículo Cómo eliminar elementos repetidos de un arreglo en JavaScript

Eliminar el primer y ultimo carácter de una cadena en javascript

Imagen destacada del artículo Eliminar el primer y ultimo carácter de una cadena en javascript

Cómo eliminar elementos de un arreglo en JavaScript

Imagen destacada del artículo Cómo eliminar elementos de un arreglo en JavaScript

Gatsby JS - introducción, ventajas y usos

Imagen destacada del artículo Gatsby JS - introducción, ventajas y usos

Introducción a Nextjs

Imagen destacada del artículo Introducción a Nextjs

Calcular cuantos días hay entre dos fechas con javascript

Imagen destacada del artículo Calcular cuantos días hay entre dos fechas con javascript

Cómo insertar un elemento en un índice específico de un array en Javascript

Imagen destacada del artículo Cómo insertar un elemento en un índice específico de un array en Javascript