Cómo enlazar un archivo JS a un archivo HTML

Aprender a enlazar un archivo JavaScript a un archivo HTML es fundamental para dar vida y funcionalidad a tus páginas web. Sigue leyendo para descubrir lo sencillo y poderoso que puede ser este proceso.

Cómo enlazar un archivo HTML con JavaScript

Enlazar un archivo HTML con JavaScript es un paso fundamental para añadir interactividad a una página web. Para lograrlo, se puede hacer uso de la etiqueta <script> en el archivo HTML. A continuación, se muestra un ejemplo básico de cómo enlazar un archivo JavaScript externo a un archivo HTML:

Paso 1: Crear un archivo JavaScript externo

Primero, se debe crear un archivo JavaScript separado con extensión .js que contenga el código JavaScript que se desea enlazar. Por ejemplo, «script.js»:

// script.js
document.getElementById("demo").innerHTML = "¡Este es un texto generado desde JavaScript!";

Paso 2: Enlazar el archivo JavaScript externo en el archivo HTML

Para enlazar el archivo JavaScript al archivo HTML, se utiliza la etiqueta <script> dentro del archivo HTML, preferiblemente justo antes de cerrar el body:

<body>
    <p id="demo">Este texto será reemplazado por JavaScript</p>
    <script src="script.js"></script>
</body>

En este caso, el atributo src de la etiqueta <script> apunta al archivo JavaScript externo «script.js», el cual se carga y ejecuta en la página web.

Consideraciones importantes:

Es fundamental que el archivo JavaScript esté enlazado correctamente para que funcione.
Se puede enlazar tanto archivos JavaScript externos como scripts internos directamente en el archivo HTML.
Es importante tener en cuenta el orden de carga de los scripts en el archivo HTML para evitar errores de ejecución.

Cómo enlazar un archivo en HTML

En HTML, para enlazar un archivo se utiliza la etiqueta <a>, que es la abreviatura de «anchor» (ancla). Para enlazar un archivo, se debe usar el atributo href y especificar la URL del archivo al que se quiere enlazar.

Conexión directa a una URL: Se usa cuando el archivo está alojado en un servidor remoto. Por ejemplo: <a href="https://www.ejemplo.com/archivo.pdf">Enlace al archivo PDF</a>.

Enlazar un archivo local: Para enlazar un archivo que se encuentra en el mismo directorio que el documento HTML o en subdirectorios, se debe especificar el nombre del archivo en el atributo href. Por ejemplo: <a href="documento.pdf">Enlace al archivo PDF</a>.

Descarga de un archivo: Si se desea que al hacer clic en el enlace se descargue el archivo en lugar de abrirlo en el navegador, se puede añadir el atributo download a la etiqueta <a>. Por ejemplo: <a href="archivo.zip" download>Descargar archivo ZIP</a>.

Es importante recordar que para enlazar un archivo a través de HTML, es fundamental tener en cuenta la estructura de carpetas y la ruta del archivo, ya que de lo contrario, el enlace podría no funcionar adecuadamente.

Ver más Uso de Outlet en React Router Dom

Cómo llamar a un JavaScript desde HTML

Cuando se trata de **llamar** a un script de **JavaScript desde HTML**, es importante tener en cuenta la forma en que se hace la conexión entre ambos lenguajes. A continuación, se presentan varios métodos comunes para lograr esto:

Método	Descripción
Etiqueta <script>	Una de las formas más simples de llamar a un script de JavaScript es mediante la etiqueta <script> en el archivo HTML. Puedes agregar el código directamente en el documento HTML o enlazar un archivo externo.
Eventos HTML	Se puede llamar a funciones JavaScript al desencadenar eventos HTML como clics de ratón, cambios en formularios, entre otros. Esto se logra escribiendo atributos de eventos en las etiquetas HTML correspondientes.
Manejadores de eventos	Asociar un manejador de eventos en JavaScript para interactuar con elementos HTML en la página. Esto permite llamar a funciones JavaScript en respuesta a acciones del usuario.

Un ejemplo sencillo de cómo llamar a un script de JavaScript desde HTML utilizando la etiqueta <script> sería:





  Llamada a JavaScript desde HTML
  
    function saludar() {
      alert('¡Hola, mundo!');
    }
  



Ejemplo de llamada a JavaScript desde HTML

En este ejemplo, al hacer clic en el botón, se llamará a la función ‘saludar()’ definida en el script de JavaScript incrustado en el documento HTML.

Para enlazar un archivo JS a un archivo HTML, asegúrate de incluir la etiqueta <script src="nombre_archivo.js"></script> en el <body> o <head> de tu HTML. ¡Ahora podrás dar vida a tus páginas web con funcionalidades interactivas! ¡Hasta pronto!