Cómo crear y usar archivos JavaScript externos

Colocar JavaScripts directamente en el archivo que contiene el HTML para una página web es ideal para los scripts cortos que se usan mientras se aprende JavaScript. Sin embargo, cuando comienza a crear scripts para proporcionar una funcionalidad significativa para su página web, la cantidad de JavaScript puede ser bastante grande, e incluir estos scripts grandes directamente en la página web plantea dos problemas:

• Puede afectar el ranking de su página con los diversos motores de búsqueda si el JavaScript ocupa la mayor parte del contenido de la página. Esto reduce la frecuencia de uso de palabras clave y frases que identifican de qué trata el contenido.
• Hace que sea más difícil reutilizar la misma función de JavaScript en varias páginas de su sitio web. Cada vez que desee usarlo en una página diferente, deberá copiarlo e insertarlo en cada página adicional, además de cualquier cambio que requiera la nueva ubicación. 

Es mucho mejor si hacemos que JavaScript sea independiente de la página web que lo usa.

Selección del código JavaScript para mover

Afortunadamente, los desarrolladores de HTML y JavaScript han proporcionado una solución a este problema. Podemos mover nuestros JavaScripts fuera de la página web y aún así funcionar exactamente igual.

Lo primero que debemos hacer para que un JavaScript externo a la página que lo utiliza es seleccionar el código JavaScript real (sin las etiquetas de script HTML que lo rodean) y copiarlo en un archivo separado.

Por ejemplo, si el siguiente script está en nuestra página, seleccionaremos y copiaremos la parte en negrita:

var hello = 'Hola mundo';
document.write (hola);

Solía ​​ser una práctica colocar JavaScript en un documento HTML dentro de las etiquetas de comentarios para evitar que los navegadores antiguos muestren el código; sin embargo, los nuevos estándares HTML dicen que los navegadores deben tratar automáticamente el código dentro de las etiquetas de comentarios HTML como comentarios, y esto hace que los navegadores ignoren su Javascript. 

Si ha heredado páginas HTML de otra persona con JavaScript dentro de las etiquetas de comentarios, entonces no necesita incluir las etiquetas en el código JavaScript que selecciona y copia.

Por ejemplo, solo copiaría el código en negrita, dejando de lado las etiquetas de comentario HTML en el ejemplo de código siguiente:

Guardar código JavaScript como un archivo

Una vez que haya seleccionado el código JavaScript que desea mover, péguelo en un nuevo archivo. Dé un nombre al archivo que sugiera lo que hace el script o identifique la página a la que pertenece el script.

Dale al archivo un .js sufijo para que sepa que el archivo contiene JavaScript. Por ejemplo, podríamos usar hola.js como el nombre del archivo para guardar el JavaScript del ejemplo anterior.

Vinculación a la secuencia de comandos externa

Ahora que tenemos nuestro JavaScript copiado y guardado en un archivo separado, todo lo que tenemos que hacer es hacer referencia al archivo de script externo en nuestro documento de página web HTML.

Primero, elimine todo entre las etiquetas de script: