Colocación JavaScripts directamente en el archivo que contiene el HTML para una página web es ideal para secuencias de comandos cortas utilizadas 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 llegar a 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é se 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, el 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í hacer que funcione exactamente igual.
Lo primero que debemos hacer para que un JavaScript externo a la página que lo utiliza es seleccionar el código de JavaScript en sí (sin las etiquetas de script HTML que lo rodean) y cópielo en un archivo separado archivo.
Por ejemplo, si el siguiente script está en nuestra página, seleccionaremos y copiaremos la parte en negrita:
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 Etiquetas de comentario HTML como comentarios, y esto resulta en navegadores que ignoran su Javascript.
Si ha heredado páginas HTML de otra persona con JavaScript dentro de las etiquetas de comentarios, 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 y en el código de ejemplo a continuación:
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:
Esto aún no le dice a la página qué JavaScript debe ejecutar, por lo que a continuación debemos agregar un atributo adicional a la etiqueta del script que le indica al navegador dónde encontrar el script.
Nuestro ejemplo ahora se verá así:
src = "hello.js">
El atributo src le dice al navegador el nombre del archivo externo desde donde se debe leer el código JavaScript para esta página web (que es hola.js en nuestro ejemplo anterior).
No tiene que poner todos sus JavaScripts en la misma ubicación que los documentos de su página web HTML. Es posible que desee colocarlos en una carpeta de JavaScript separada. En este caso, simplemente modifica el valor en el src atributo para incluir la ubicación del archivo. Puede especificar cualquier dirección web relativa o absoluta para la ubicación del archivo fuente JavaScript.
Usando lo que sabes
Ahora puede tomar cualquier script que haya escrito o cualquier script que haya obtenido de una biblioteca de script y moverlo desde el código de la página web HTML a un archivo JavaScript referenciado externamente.
Luego puede acceder a ese archivo de secuencia de comandos desde cualquier página web simplemente agregando las etiquetas de secuencia de comandos HTML apropiadas que llaman a ese archivo de secuencia de comandos.