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:
html
<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.
Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.
Sobre mi