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 un solo 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 incruste 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 lo desea, podrá mejorar la página extrayendo JavaScript en un archivo externo para que su página contenido en el HTML isn & amp;apos;t tan abarrotado de elementos no relacionados con el contenido como JavaScript.
Video destacado
Si simplemente copia y usa JavaScript 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 integradas en su página web y sus instrucciones don & amp;apos;No le diré cómo puede mover este código de su página a un archivo separado y aún así hacer que JavaScript funcione. Don & amp;apos;Sin embargo, no se preocupe porque, independientemente del código que esté usando el 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 en la página). El proceso para hacer esto es siempre el mismo y se ilustra mejor con un ejemplo.
Eche un vistazo a cómo se vería una pieza de JavaScript cuando esté incrustada 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
Ejemplo dos
Ejemplo tres
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 lenguaje desactualizado = & amp; quot; javascript & amp; quot; en lugar de type = & amp; quot; text / javascript & amp; quot; en cuyo caso es posible que desee actualizar su código con el lenguaje de reemplazo.
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 a su alrededor que es ligeramente diferente).
- Lo primero que debe hacer para extraer realmente 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 de una de las variaciones de código que se muestran en los ejemplos anteriores.
- Después de haber 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.
- Abra otra copia de su editor de texto sin formato (u otra pestaña si su editor admite abrir más de un archivo a la vez) y pegue el contenido de JavaScript allí.
- 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 del script es salir de los cuadros para que un nombre apropiado pueda ser & amp; amp; nbsp; framebreak.js .
- Así que ahora tenemos el JavaScript en un archivo separado que devolvemos al editor donde tenemos el contenido de la página original para realizar los cambios allí para vincular a la copia externa del script.
- Como ahora tenemos el script en un archivo separado, podemos eliminar todo entre las etiquetas del script en nuestro contenido original para que la etiqueta.
- El paso final es agregar un atributo adicional a la etiqueta del script identificando dónde puede encontrar el JavaScript externo. Hacemos esto usando a & amp; amp; nbsp; src = & amp; quot; filename & amp; quot; & amp; amp; nbsp; atribute. Con nuestro script de ejemplo, especificaríamos src = & amp; quot; framebreak.js & amp; quot ;.
- La única complicación de esto es si hemos decidido almacenar los JavaScript externos en una carpeta separada de las páginas web que los usan. Si hace esto, debe agregar la ruta desde la carpeta de la página web a la carpeta JavaScript delante del nombre del archivo. Por ejemplo, si los JavaScript se almacenan en a & amp; amp; nbsp; js & amp; amp; nbsp; carpeta dentro de la carpeta que contiene nuestras páginas web que necesitaríamos & amp; amp; nbsp; src = & amp; quot; js &break.j
Entonces, ¿cómo es nuestro código después de haber separado el 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 dice:
& lt; pre & gt ;
& lt; / pre & gt ;
También tenemos un archivo separado llamado framebreak.js que contiene:
& lt; pre & gt; if (top.location != self.location) top.location = self.location ;
& lt; / pre & gt ;
Su nombre de archivo y contenido de archivo serán muy diferentes de eso porque habrá extraído cualquier JavaScript que estaba incrustado en su página web y le habrá 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.
¿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 usa más y, por lo tanto, esas líneas no son realmente necesarias en primer lugar. 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 rodearla en un comentario HTML de todos modos. El tercer ejemplo se usa para páginas XHTML para decirle a los validadores que el JavaScript debe tratarse como contenido de página y no validarlo como HTML (si está utilizando un tipo de documento HTML en lugar de uno XHTML, entonces el validador ya lo sabe y esas etiquetas no son necesarias). Con el JavaScript en un archivo separado, ya no hay ningún JavaScript en la página para ser omitido por los validadores, por lo que esas líneas ya no son necesarias.
Una de las formas más útiles en que JavaScript se puede utilizar 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 haciendo clic en algo se llama & amp; amp; nbsp; al hacer clic .
Cuando la mayoría de las personas piensan por primera vez en agregar un controlador de eventos & amp; amp; nbsp; onclick & amp; nbsp; a su página web, inmediatamente piensan en agregarlo a una etiqueta. Esto da un código que a menudo se parece a:
& lt; pre & gt ;
& lt; / pre & gt ;
Este es el & amp; amp; nbsp; incorrecto & amp; amp; nbsp; forma de usar & amp; amp; nbsp; onclick & amp; amp; nbsp; a menos que tenga una dirección real significativa en & amp; amp; nbsp; href & amp; nbsp; atribute en algún lugar. Mucha gente también deja de lado el & amp;quot;devolver falso y amp;quot; de este código y luego me pregunto 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 = & amp;quot;# & amp;quot; le dice a la página que lo haga a menos que se devuelva el falso de todos los manejadores de eventos. De & amp; amp; nbsp; course, & amp; nbsp; si tiene algo significativo como el destino del enlace, puede ir allí después de ejecutar el & amp; amp; nbsp; onclick & amp; amp; nbsp; code y entonces no necesitará el & amp; quot; return false & amp; quot ;.
Lo que muchas personas no hacen & amp; amp; nbsp; realize & amp; nbsp; es que el & amp; amp; nbsp; onclick & amp; nbsp; event handler se puede agregar a & amp; amp; nbsp; cualquier & amp; nbsp; etiqueta de contenido web en el visitante en el pedido en la página web. Entonces, si desea que algo se ejecute cuando las personas hacen clic en una imagen, puede usar:
& lt; pre & gt; 
& lt; / pre & gt ;
Si desea ejecutar algo cuando las personas hacen clic en algún texto, puede usar:
& lt; pre & gt; algún texto
& lt; / pre & gt ;
Of & amp; amp; nbsp; course, & amp; nbsp; estos don & amp; apos; t 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 puede agregue esa pista visual con bastante facilidad al diseñar la imagen o abarcar adecuadamente.
La otra cosa a tener en cuenta sobre estas formas de adjuntar el controlador de eventos & amp; amp; nbsp; onclick & amp; amp; nbsp; es que no requieren el controlador de eventos & amp; quot; return false & amp; quot; porque no hay una acción predeterminada que sucederá cuando se haga clic en el elemento que debe deshabilitarse.
Estas formas de adjuntar el & amp; amp; nbsp; onclick & amp; amp; nbsp; son una gran mejora en el método deficiente que usan muchas personas, pero aún está muy lejos de ser la mejor manera de codificarlo. Un problema con agregar & amp; amp; nbsp; onclick & amp; nbsp; usar cualquiera de los métodos anteriores es que todavía está mezclando su JavaScript con su HTML. & Amp; amp; nbsp; onclick & amp; nbsp;is & amp; nbsp; (tixb_.Como tal, para separar nuestro JavaScript de nuestro HTML para facilitar el mantenimiento de la página, necesitamos obtener ese & amp; amp; nbsp; onclick & amp; amp; nbsp; referencia del archivo HTML en un archivo JavaScript separado donde pertenece.
La forma más fácil de hacer esto es reemplazar el & amp; amp; nbsp; onclick & amp; amp; nbsp; en el HTML con an & amp; amp; nbsp; id & amp; amp; nbsp; que facilitará adjuntar el controlador de eventos al lugar apropiado en el HTML. Entonces, nuestras declaraciones HTML podrían contener uno
& lt; pre & gt; & amp; lt; img src = & amp; quot; myimg.gif & amp; quot; id = & amp; quot; img1 & amp; quot; & amp; gt; algún texto
& lt; / pre & gt ;
Luego podemos codificar el JavaScript en un archivo JavaScript separado que está vinculado en la parte inferior del cuerpo de la página o que está en el encabezado de la página y donde nuestro código está dentro de una función que se llama después de que la página termina de cargar . Nuestro JavaScript para adjuntar los controladores de eventos ahora se ve así:
& lt; pre & gt; document.getElementById (& amp; apos; img1 & amp; apos;).onclick = dosomething; document.getElementById (& amp; apos; sp1 & amp; apos;).onclick = dosomething ;
& lt; / pre & gt ;
Una cosa a tener en cuenta. Notarás que siempre hemos escrito & amp; amp; nbsp; onclick & amp; amp; nbsp; completamente en minúsculas. Al codificar la instrucción en su HTML, verá que algunas personas lo escriben como enClick. Esto es incorrecto ya que los nombres de los controladores de eventos de JavaScript son minúsculas y no existe un controlador como onClick. Puede salirse con la suya cuando incluye 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. Puede & amp; apos; t salirse con la suya con & amp; nbsp; the mal & amp; amp; nbsp; capitalización & amp; amp; nbsp; en su propio JavaScript ya que JavaScript es sensible a mayúsculas y minúsculas y no existe tal cosa en JavaScript como en Click.
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 cualquier momento necesitamos adjuntar un controlador de eventos onclick diferente al mismo elemento, entonces el procesamiento adjunto anteriormente ya no se adjuntará a ese elemento. Cuando agrega una variedad de scripts diferentes a su página web para diferentes propósitos, existe al menos la posibilidad de que dos o más de ellos quieran proporcionar algún procesamiento cuando se hace clic en el mismo elemento. La solución desordenada a este problema es identificar dónde surge esta situación y combinar el procesamiento que debe reunirse con una función que realice todo el procesamiento.
Si bien los enfrentamientos como este son menos comunes con el clic que con la carga, tener que identificar & amp; amp; nbsp; los enfrentamientos de antemano 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 para que a veces haya una cosa que hacer, a veces otra, y a veces ambas.
La mejor solución es dejar de usar un controlador de eventos por completo y, en su lugar, usar un oyente de eventos de JavaScript (junto con el correspondiente archivo adjunto para Jscript, ya que esta es una de esas situaciones en las que JavaScript y JScript & amp; nbsp; differ). Podemos hacer esto más fácilmente creando primero una función addEvent que agregará un oyente de eventos o un archivo adjunto dependiendo de cuál de los dos admite el idioma que se ejecuta;
& lt; pre & gt; function addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); volver verdadero; } más si (el.attachEvent) {return el.attachEvent (&os; on & amp; e)
& lt; / pre & gt ;
Ahora podemos adjuntar el procesamiento que queremos que ocurra cuando se hace clic en nuestro elemento usando:
& lt; pre & gt; addEvent (docum.getElementById (& amp; apos; spn1 & amp; apos;), & amp; apos; clic & amp; apos;, dosomething, false) ;
& lt; / pre & gt ;
El uso de este método para adjuntar el código que se procesará cuando se hace clic en un elemento significa que hacer otra llamada addEvent para agregar otra función que se ejecutará cuando se haga clic en un elemento específico no reemplazará el procesamiento anterior con el nuevo procesamiento, sino que lo permitirá ambas funciones a ejecutar. No necesitamos saber al llamar a addEvent si ya tenemos o no una función adjunta al elemento para ejecutar cuando se hace clic en él, la nueva función se ejecutará junto con las funciones que se adjuntaron anteriormente.
Si necesitamos la capacidad de eliminar funciones de lo que se ejecuta cuando se hace clic en un elemento, podríamos crear una función deleteEvent correspondiente que llame a la función apropiada para eliminar un oyente de eventos o un evento adjunto?
La única desventaja de esta última forma de adjuntar el procesamiento es que esos 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 usen navegadores tan anticuados para ignorarlos en el Script J (ava) que escribimos, aparte de escribir nuestro código de tal manera que no cause una gran cantidad de mensajes de error. La función anterior está escrita para no hacer nada si no se admite ninguna de las formas en que la usa. La mayoría de estos navegadores realmente antiguos tampoco son compatibles con el método getElementById para hacer referencia a HTML, por lo que es simple & amp; amp; nbsp; si (!document.getElementById) devuelve falso; & amp; amp; nbsp; 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, por lo que esos usuarios deben acostumbrarse a ver errores de JavaScript en casi todas las páginas web que visitan ahora.
¿Cuál de estas diferentes formas usa 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 esos ejemplos en la parte inferior de la página, entonces tal vez sea hora de que piense en mejorar la forma en que escribe su procesamiento con clic para usar uno de los mejores métodos presentados más abajo en la página.
Mirando el código para el oyente de eventos de navegador cruzado, notará que hay un cuarto parámetro que llamamos & amp; amp; nbsp; uC , cuyo uso es & amp; apos; t obvio de la descripción anterior.
Los navegadores tienen dos órdenes diferentes en las que pueden procesar eventos cuando se activa el evento. Pueden trabajar desde el exterior hacia adentro desde la etiqueta hacia la etiqueta que activó el evento o pueden funcionar desde adentro hacia afuera comenzando en la etiqueta más específica. Estos dos se llaman & amp; amp; nbsp; captura & amp; amp; nbsp; y & amp; amp; nbsp; burbuja & amp; amp; nbsp; respectivamente y la mayoría de los navegadores le permiten elegir qué orden se debe ejecutar el parámetro adicional en la configuración.
- uC = fiel al proceso durante la fase de captura
- uC = falso para procesar durante la fase de burbuja.
Entonces, donde hay varias otras etiquetas envueltas alrededor de la que se activó el evento en la fase de captura, primero comienza con la etiqueta más externa y avanza hacia la que activó el evento y luego, una vez que se procesó la etiqueta a la que se adjuntó el evento La fase de burbujas invierte el proceso y vuelve a salir.
Internet Explorer y los manejadores de eventos tradicionales siempre procesan la fase de burbujas y nunca la fase de captura, por lo que siempre comienzan con la etiqueta más específica y trabajan hacia afuera.
Entonces, con los controladores de eventos:
& lt; pre & gt; xx & lt; / pre & gt ;
haciendo clic en & amp; amp; nbsp; xx & amp; amp; nbsp; saldría disparando la alerta (& amp; apos; b & amp; apos;) primero y la alerta (& amp; apos; apos; a & amp; apos;) segundo.
Si esas alertas se adjuntaron utilizando oyentes de eventos con uC verdadero, entonces todos los navegadores modernos, excepto Internet Explorer, procesarían primero la alerta (& amp; apos; a & amp; apos;) y luego la alerta (& amp; apos; b & amp; apos;).
& amp; # x203A; Informática}}
