Mover JavaScript fuera de la página web

Cuando escribe por primera vez un nuevo JavaScript, la forma más fácil de configurarlo es incrustar el código JavaScript directamente en la página web para que todo esté en el mismo lugar mientras lo prueba para que funcione correctamente. Del mismo modo, si está insertando un script preescrito en su sitio web, las instrucciones pueden indicarle que inserte partes o todo el script en la página web..

Esto está bien para configurar la página y hacer que funcione correctamente en primer lugar, pero una vez que su página funcione de la manera que desea, podrá mejorar la página extrayendo el JavaScript en un archivo externo para que su página el contenido en HTML no está tan abarrotado de elementos que no son de contenido como JavaScript.

Si solo copia y usa JavaScripts escritos por otras personas, entonces sus instrucciones sobre cómo agregar su script a su página pueden haber resultado en que tenga una o más secciones grandes de JavaScript realmente incrustadas en su propia página web y sus instrucciones no le dicen le explica cómo puede mover este código de su página a un archivo separado y aún así tener JavaScript funcionando. Sin embargo, no se preocupe porque, independientemente del código que use JavaScript en su página, puede mover fácilmente el JavaScript fuera de su página y configurarlo como un archivo separado (o archivos si tiene más de una pieza de JavaScript incrustada) la página). El proceso para hacerlo es siempre el mismo y se ilustra mejor con un ejemplo..

Veamos cómo podría verse un fragmento de JavaScript cuando se incrusta en su página. Su código JavaScript real será diferente del que se muestra en los siguientes ejemplos, pero el proceso es el mismo en todos los casos.

Ejemplo uno

  if (top.location! = self.location) top.location = self.location;  

Ejemplo dos

Ejemplo tres

  / * if (top.location! = self.location) top.location = self.location; / *]]> * /  

Su JavaScript incrustado debería parecerse a uno de los tres ejemplos anteriores. Por supuesto, su código JavaScript real será diferente del que se muestra, pero el JavaScript probablemente se incrustará en la página utilizando uno de los tres métodos anteriores. En algunos casos, su código puede usar el obsoleto idioma = "javascript" en lugar de tipo = "texto / javascript" en cuyo caso es posible que desee actualizar su código más para comenzar reemplazando el atributo de idioma con el tipo uno.

Antes de poder extraer el JavaScript en su propio archivo, primero debe identificar el código que se extraerá. En los tres ejemplos anteriores, hay dos líneas de código JavaScript real para extraer. Su script probablemente tendrá muchas más líneas, pero puede identificarse fácilmente porque ocupará el mismo lugar dentro de su página que las dos líneas de JavaScript que hemos resaltado en los tres ejemplos anteriores (los tres ejemplos contienen las mismas dos líneas de JavaScript, es solo el contenedor que los rodea es ligeramente diferente).

1. Lo primero que debe hacer para extraer el JavaScript en un archivo separado es abrir un editor de texto sin formato y acceder al contenido de su página web. Luego debe ubicar el JavaScript incrustado que estará rodeado por una de las variaciones de código que se muestran en los ejemplos anteriores.
2. Una vez que haya localizado el código JavaScript, debe seleccionarlo y copiarlo en su portapapeles. Con el ejemplo anterior, el código que se seleccionará está resaltado, no necesita seleccionar las etiquetas de script o los comentarios opcionales que pueden aparecer alrededor de su código JavaScript.
3. Abra otra copia de su editor de texto plano (u otra pestaña si su editor admite abrir más de un archivo a la vez) y pegue el contenido de JavaScript allí.
4. Seleccione un nombre de archivo descriptivo para usar para su nuevo archivo y guarde el nuevo contenido usando ese nombre de archivo. Con el código de ejemplo, el propósito de la secuencia de comandos es romper cuadros para que se pueda obtener un nombre apropiado framebreak.js.
5. Entonces, ahora que tenemos el JavaScript en un archivo separado, volvemos al editor donde tenemos el contenido de la página original para hacer los cambios allí para vincular a la copia externa del script.
6. Como ahora tenemos el script en un archivo separado, podemos eliminar todo entre las etiquetas del script en nuestro contenido original para que el
7. El último paso es agregar un atributo adicional a la etiqueta del script que identifica dónde puede encontrar el JavaScript externo. Hacemos esto usando un src = "nombre de archivo" atributo. Con nuestro script de ejemplo, especificaríamos src = "framebreak.js".
8. La única complicación de esto es si hemos decidido almacenar los JavaScripts externos en una carpeta separada de las páginas web que los usan. Si hace esto, entonces necesita agregar la ruta desde la carpeta de la página web a la carpeta JavaScript frente al nombre del archivo. Por ejemplo, si los JavaScripts se almacenan en un js carpeta dentro de la carpeta que contiene nuestras páginas web que necesitaríamos src = "js / framebreak.js"

Entonces, ¿cómo se ve nuestro código después de haber separado JavaScript en un archivo separado? En el caso de nuestro ejemplo JavaScript (suponiendo que JavaScript y HTML estén en la misma carpeta) nuestro HTML en la página web ahora lee:

También tenemos un archivo separado llamado framebreak.js que contiene:

if (top.location! = self.location) top.location = self.location;

Su nombre de archivo y el contenido del archivo serán muy diferentes de eso porque habrá extraído lo que sea que JavaScript haya incrustado en su página web y le haya dado al archivo un nombre descriptivo basado en lo que hace. El proceso real de extracción será el mismo, independientemente de las líneas que contenga..