Vincular archivo JavaScript a archivo HTML

Sushant Poudel 12 octubre 2023
  1. Utilice la etiqueta <script> y el atributo src para vincular un JavaScript externo a HTML
  2. Utilice la etiqueta <script> para vincular un JavaScript interno a HTML
Vincular archivo JavaScript a archivo HTML

Este artículo discutirá dos métodos para vincular un archivo JavaScript a un archivo HTML. En el primer proceso, crearemos un archivo JavaScript y vincularemos los archivos externamente. En el segundo proceso, insertaremos código JavaScript en un documento HTML.

Utilice la etiqueta <script> y el atributo src para vincular un JavaScript externo a HTML

Usamos el atributo src en la etiqueta <script> para vincular el archivo JavaScript al archivo HTML en este método. El atributo src se utiliza para especificar la URL o la ubicación del archivo externo. Si deseamos utilizar el mismo JavaScript en varias páginas de un sitio web, debemos crear un archivo JavaScript externo en lugar de escribir el mismo una y otra vez. Escribimos el <script> dentro de la etiqueta <head> en HTML. Después de guardar el archivo de script con una extensión .js, nos referimos a él usando el atributo src en la etiqueta <script>.

Por ejemplo, cree dos archivos, un archivo HTML y otro JavaScript. Escriba algo de JavaScript en el archivo JS y algo de HTML en el archivo HTML. No olvide utilizar las extensiones .html y .js después de nombrar los dos archivos respectivamente mientras los guarda. Coloque estos dos archivos dentro de la misma carpeta. Escriba el nombre del archivo JavaScript en el atributo src de la etiqueta <script> en el archivo HTML. Por ejemplo, si su nombre de archivo es hello.js, escriba <script src="hello.js"> </script>.

El siguiente ejemplo ilustra un método para vincular un archivo JavaScript a un archivo HTML. Escribimos, This is HTML en el archivo HTML y This is written from JavaScript en el archivo JavaScript. Como podemos ver en ambos textos en la sección de salida a continuación, demuestra que JavaScript está vinculado con el HTML.

Código de ejemplo:

<html>
 <head>
 <script src="hello.js"> </script>
 </head>
 
 <body>
 <p> This is HTML</p>
 </body>

</html>
document.write('This is written from JavaScript');

Producción:

Utilice la etiqueta <script> para vincular un JavaScript interno a HTML

A diferencia del primer método, agregamos el código de JavaScript en el archivo HTML usando la etiqueta <script>. La etiqueta <script> se utiliza para agregar un script del lado del cliente. Podemos escribir el JavaScript internamente dentro de la etiqueta <script> en un archivo HTML. Cuando ejecutamos el archivo HTML, veremos el JavaScript cargado.

Por ejemplo, escriba el texto This is HTML en la etiqueta <p> en HTML. Luego, abra la etiqueta <script> y escriba el mensaje This is written from JavaScript usando document.write. Luego, cierre la etiqueta de secuencia de comandos.

Podemos ver que ambos textos escritos en HTML y JavaScript se muestran en el resultado a continuación. Demuestra que HTML y JavaScript se han vinculado.

Ejemplo:

<html>
    <head>
    </head>
    <body>
        <p> This is HTML </p>
    </body>
    <script>
        document.write("This is written from JavaScript");
    </script>
</html>

Producción:

Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn