Cómo separar el JavaScript en su página web

Cuando escribe 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 Correcto. 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 el contenido de su página en el HTML no esté tan abarrotado de elementos que no sean 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 en realidad incrustado en su página web y sus instrucciones no le dicen cómo puede mover este código de su página a un archivo separado y aún tener el JavaScript trabajo. Sin embargo, no se preocupe porque independientemente del código que use JavaScript en su página, puede moverlo fácilmente. fuera de su página y configúrelo como un archivo separado (o archivos si tiene más de una pieza de JavaScript incrustada en 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.

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 se puede identificar fácilmente porque ocupará el mismo lugar dentro de su página que las dos líneas de JavaScript que se han resaltado en los tres ejemplos anteriores (los tres ejemplos contienen las mismas dos líneas de JavaScript, es solo el contenedor alrededor de ellos el que está 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 sin formato (u otra pestaña si su editor admite la apertura de 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 etiqueta.
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 qué lo hace. El proceso real de extracción será el mismo, independientemente de las líneas que contenga.

¿Qué pasa con esas otras dos líneas en cada uno de los ejemplos dos y tres? Bueno, el propósito de esas líneas en el ejemplo dos es ocultar el JavaScript de Netscape 1 e Internet Explorer 2, ninguno de los cuales ya se usa, por lo que esas líneas no son realmente necesarias en el primero sitio. Colocar el código en un archivo externo oculta el código de los navegadores que no entienden la etiqueta del script de manera más efectiva que rodearlo en un comentario HTML de todos modos. El tercer ejemplo se utiliza para las páginas XHTML para indicar a los validadores que el JavaScript debe tratarse como contenido de la página y no para validarlo. como HTML (si está utilizando un tipo de documento HTML en lugar de uno XHTML, entonces el validador ya lo sabe y, por lo tanto, esas etiquetas no son necesario). Con el JavaScript en un archivo separado, ya no hay ningún JavaScript en la página que los validadores omitan y, por lo tanto, esas líneas ya no son necesarias.

Una de las formas más útiles de usar JavaScript para agregar funcionalidad a una página web es realizar algún tipo de procesamiento en respuesta a una acción de su visitante. La acción más común a la que desea responder será cuando ese visitante haga clic en algo. El controlador de eventos que le permite responder a los visitantes que hacen clic en algo se llama al hacer clic.

Cuando la mayoría de la gente piensa en agregar un controlador de eventos onclick a su página web, inmediatamente piensan en agregarlo a un etiqueta. Esto proporciona un código que a menudo se ve así:

Este es el incorrecto forma de usar onclick a menos que tenga una dirección significativa real en el atributo href para que aquellos sin JavaScript se transfieran a algún lugar cuando hagan clic en el enlace. Mucha gente también omite el "retorno falso" de este código y luego se pregunta por qué la parte superior de la página actual siempre se carga después de que se haya ejecutado el script (que es lo que href = "#" le dice a la página que haga, a menos que se devuelva falso de todos los controladores de eventos. Por supuesto, si tiene algo significativo como destino del enlace, es posible que desee ir allí después de ejecutar el código onclick y no necesitará el "retorno falso".

Lo que muchas personas no se dan cuenta es que el controlador de eventos onclick se puede agregar a ninguna Etiqueta HTML en la página web para interactuar cuando su visitante hace clic en ese contenido. Entonces, si desea que se ejecute algo cuando las personas hacen clic en una imagen, puede usar:

Si desea ejecutar algo cuando las personas hacen clic en algún texto que puede usar:

algún texto

Por supuesto, estos no dan la pista visual automática de que habrá una respuesta si su visitante hace clic en ellos de la manera en que lo hace un enlace, pero usted puede agregar esa pista visual fácilmente al diseñar la imagen o el espacio apropiadamente.

La otra cosa a tener en cuenta sobre estas formas de adjuntar el controlador de eventos onclick es que no requieren "return false" porque no hay acción predeterminada que sucederá cuando se hace clic en el elemento que necesita ser discapacitado.

Estas formas de adjuntar el onclick son una gran mejora en el método deficiente que utilizan muchas personas, pero todavía está muy lejos de ser la mejor forma de codificarlo. Un problema al agregar onclick usando cualquiera de los métodos anteriores es que todavía está mezclando tu JavaScript con tu HTML. al hacer clic es no un atributo HTML, es un controlador de eventos de JavaScript. Por lo tanto, para separar nuestro JavaScript de nuestro HTML para hacer que la página sea más fácil de mantener, necesitamos obtener esa referencia onclick del archivo HTML en un archivo JavaScript separado al que pertenece.

La forma más fácil de hacer esto es reemplazar el onclick en el HTML con un carné de identidad eso facilitará adjuntar el controlador de eventos al lugar apropiado en el HTML. Por lo tanto, nuestro HTML ahora puede contener una de estas declaraciones:

 algún texto

Luego podemos codificar el JavaScript en un archivo de JavaScript separado que está vinculado a la parte inferior del cuerpo de la página o que está en el encabezado de la página y donde está nuestro código dentro de una función que se llama a sí misma después de que la página termina de cargarse. Nuestro JavaScript para adjuntar los controladores de eventos ahora se ve así:

document.getElementById ('img1'). onclick = dosomething; document.getElementById ('sp1'). onclick = dosomething;

Una cosa a tener en cuenta. Notarás que siempre hemos escrito onclick completamente en minúsculas. Al codificar la declaración en su HTML, verá que algunas personas la escriben como onClick. Esto es incorrecto ya que los nombres de los controladores de eventos de JavaScript están en minúsculas y no existe un controlador como onClick. Puede salirse con la suya si incluye el JavaScript dentro de su etiqueta HTML directamente ya que HTML no distingue entre mayúsculas y minúsculas y el navegador lo asignará al nombre correcto para usted. No puede salirse con la mayúscula incorrecta en su propio JavaScript, ya que JavaScript distingue entre mayúsculas y minúsculas y no existe tal cosa en JavaScript como onClick.

Este código es una gran mejora con respecto a las versiones anteriores porque ahora estamos adjuntando el evento al elemento correcto dentro de nuestro HTML y tenemos el JavaScript completamente separado del HTML. Sin embargo, podemos mejorar esto aún más.

El único problema que queda es que solo podemos adjuntar un controlador de eventos onclick a un elemento específico. Si en algún momento necesitamos adjuntar un controlador de eventos onclick diferente al mismo elemento, el procesamiento previamente adjunto ya no se adjuntará a ese elemento. Cuando agrega una variedad de scripts diferentes a su página web para diferentes propósitos, hay al menos un posibilidad de que dos o más de ellos quieran proporcionar algún procesamiento para que se realice cuando el mismo elemento es hizo clic en La solución desordenada a este problema es identificar dónde surge esta situación y combinar el procesamiento que necesita ser llamado a una función que realice todo el procesamiento.

Si bien los enfrentamientos como este son menos comunes con onclick que con onload, tener que identificar los enfrentamientos por adelantado y combinarlos no es la solución ideal. No es una solución en absoluto cuando el procesamiento real que debe adjuntarse al elemento cambia con el tiempo, de modo que a veces hay algo que hacer, a veces otro y a veces ambos.

La mejor solución es dejar de usar un controlador de eventos por completo y, en su lugar, usar un detector de eventos JavaScript (junto con con el adjunto correspondiente para Jscript, ya que esta es una de esas situaciones en las que JavaScript y JScript diferir de). Podemos hacer esto más fácilmente creando primero una función addEvent que agregará un detector de eventos o un archivo adjunto dependiendo de cuál de los dos admite el lenguaje que se está ejecutando;

función addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); volver verdadero; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Ahora podemos adjuntar el procesamiento que queremos que ocurra cuando se hace clic en nuestro elemento usando:

addEvent (document.getElementById ('spn1'), 'click', dosomething, false);

El uso de este método para adjuntar el código a procesar cuando se hace clic en un elemento significa que hacer otra llamada a addEvent para agregar otra función ejecutar cuando se hace clic en un elemento específico no reemplazará el procesamiento anterior con el nuevo procesamiento, sino que permitirá que ambas funciones sean correr. No tenemos necesidad de saber cuando llamamos a addEvent si ya tenemos una función adjunta o no elemento para ejecutar cuando se hace clic en él, la nueva función se ejecutará junto con las funciones que anteriormente adjunto.

Si necesitamos la capacidad de eliminar funciones de lo que se ejecuta cuando se hace clic en un elemento, entonces podríamos crear un correspondiente función deleteEvent que llama a la función apropiada para eliminar un detector de eventos o adjunto ¿evento?

La única desventaja de esta última forma de adjuntar el procesamiento es que los navegadores realmente antiguos no admiten estas formas relativamente nuevas de adjuntar el procesamiento de eventos a una página web. Ya debería haber pocas personas que utilicen navegadores tan anticuados como para ignorarlos en lo que J (ava) Guión que escribimos aparte de escribir nuestro código de tal manera que no cause un gran número de errores mensajes La función anterior está escrita para no hacer nada si no se admite ninguna de las formas en que utiliza. La mayoría de estos navegadores realmente antiguos tampoco admiten el método getElementById para hacer referencia a HTML, por lo que es muy simple if (! document.getElementById) devuelve falso; en la parte superior de cualquiera de sus funciones que hacen tales llamadas también sería apropiado. Por supuesto, muchas personas que escriben JavaScript no son tan consideradas con las que todavía usan navegadores antiguos y por lo que esos usuarios deben estar acostumbrados a ver errores de JavaScript en casi todas las páginas web que visitan en este momento.

¿Cuál de estas diferentes formas utiliza para adjuntar el procesamiento a su página para que se ejecute cuando sus visitantes hacen clic en algo? Si la forma en que lo hace está más cerca de los ejemplos en la parte superior de la página que de los ejemplos en la parte inferior de la página, entonces tal vez sea vez que pensó en mejorar la forma en que escribe su procesamiento onclick para usar uno de los mejores métodos presentados más abajo en el página.

Al mirar el código para el oyente de eventos entre navegadores, notará que hay un cuarto parámetro que llamamos uC, cuyo uso no es obvio en la descripción anterior.

Los navegadores tienen dos órdenes diferentes en las que pueden procesar eventos cuando se activa el evento. Pueden trabajar desde afuera hacia adentro desde

• uC = verdadero para procesar durante la fase de captura
• uC = falso para procesar durante la fase de burbuja.

Entonces, cuando hay varias otras etiquetas envueltas alrededor de la que el evento se activó en la fase de captura, se ejecuta primero comenzando con la etiqueta más externa y avanzando hacia el que activó el evento y luego, una vez que se procesó la etiqueta a la que se unió el evento, la fase de burbuja invierte el proceso y vuelve a salir de nuevo.

Internet Explorer y los controladores de eventos tradicionales siempre procesan la fase de burbuja y nunca la fase de captura, por lo que siempre comienzan con la etiqueta más específica y funcionan hacia afuera.

Entonces, con los controladores de eventos:

xx