Herramientas para desarrolladores : Cursos, manuales y guías de referencia : Cursos : JavaScript avanzado :

Inserción de múltiples scripts en una misma página

  1. Introducción
  2. Insertando más de un script
  3. Conflictos con nombres de variables o funciones
  4. Compartir los manejadores de eventos

1. Introducción

En teoría, no existe ningún límite al número de scripts JavaScript que podemos introducir en una página web. El único límite a considerar es el tamaño de la página: a mayor número de scripts, mayor será también el número de bytes que ocupará la página, lo que aumentará el tiempo de descarga. Sin embargo no es difícil encontrarse ante situaciones en las que dos scripts funcionan perfectamente por separado, pero por algún motivo aparentemente misterioso, provocan errores cuando son insertados en una misma página.

En los párrafos siguientes explicaremos cómo se insertan varios scripts en una misma página y cómo podemos hacer para evitar errores de interoperatividad durante la ejecución de cada uno de ellos.

2. Insertando más de un script

Como explicamos en el Capítulo 1 de nuestro Tutorial de JavaScript, existen dos formas de insertar un script en una página web:

  1. Copiando el código JavaScript directamente en la página HTML, entre las etiquetas <script> y </script>.
  2. Indicando el nombre (y la ruta si hace falta) del fichero que contiene el código JavaScript, mediante el parámetro src de la etiqueta <script>:
    <SCRIPT LANGUAGE="JavaScript" SRC="scripts/fuente.js"></SCRIPT>

Teniendo esto en cuenta, podemos poner tantos scripts como queramos, copiándolos uno detrás de otro, bien utilizando el primer método (cada uno de ellos entre sus etiquetas <script> y </script>), o el segundo (con tantas líneas <SCRIPT ... SRC=... </SCRIPT> como sea necesario). O bien, con cualquier combinación de ambos métodos.

Por ejemplo, el siguiente ejemplo muestra cómo se codifica una página con 2 sencillos scripts insertados directamente en el código:

<HEAD>
<TITLE>Introducción a JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Primer script
function hola() {
window.alert('Bienvenido a JavaScript')
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Segundo script
function adios() {
window.alert('Hasta la vista')
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="hola()">
</BODY>

3. Conflictos con nombres de variables o funciones

El ejemplo anterior funcionará sin problemas porque no se produce ningún conflicto entre las variables del script o los nombres de las funciones. Los conflictos se producen cuando dos (o más) scripts comparten el espacio de nombres para alguna variable o función. En estos casos, pueden aparecer errores en tiempo de ejecución, o bien aunque na haya errores, podemos obtener resultados inesperados.

Para entenderlo vamos a modificar el ejemplo anterior para que los 2 scripts utilicen el mismo nombre de función:

<HEAD>
<TITLE>Introducción a JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Primer script
function hola() {
window.alert('Bienvenido a JavaScript')
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Segundo script
function hola() {
window.alert('Hasta la vista')
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="hola()">
</BODY>
</html>

Si ejecutamos este ejemplo veremos como la página muestra un mensaje de alerta diferente. Ahora aparece el mensaje Hasta la vista, en vez del mensaje Bienvenido a JavaScript. En este caso, no hay error de ejecución, pero el resultado no es el esperado (o al menos, es algo confuso). La solución, en este caso, es muy sencilla: basta con renombrar una de las funciones, para que tenga un nombre diferente.

Los conflictos con los nombres de variables o funciones más frecuentes (y difíciles de detectar) se producen cuando alguno de los objetos de la página tiene el mismo nombre que una variable o función del código JavaScript. Pongamos de nuevo un ejemplo:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Primer script
function escribir( texto ) {
window.alert( texto )
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Segundo script
function mensaje( texto ) {
window.alert( texto )
}
//-->
</SCRIPT>
</head>

<body>
<form class="buscador" name="miformu">
<input type="text" name="mensaje" value="Este es el mensaje">
<input type="button" value="Funcion 1" onClick="escribir(this.form.mensaje.value)">
<input type="button" value="Funcion 2" onClick="mensaje(this.form.mensaje.value)">
</form>
</body>
</html>

El ejemplo anterior presenta un formulario con un campo de texto y dos botones, como el siguiente.

El primer botón invoca a la función escribir() del primer script. La ejecución es correcta, y aparecerá un cuadro de alerta en la ventana del navegador con el mensaje escrito en el cuadro de texto.

El segundo botón invoca a la función mensaje(). Se produce un error en tiempo de ejecución, porque el nombre de la función coincide con el nombre asignado al cuadro de texto del formulario (para el navegador, por tanto, no es una función, sino un objeto). El mensaje de error (Error: mensaje is not a function) no ayuda mucho si no se sabe cuál puede ser el origen del problema.

4. Compartir los manejadores de eventos

Otro problema típico que surge a la hora de insertar varios scripts en una página es el de los manejadores de eventos. El más común es el onLoad, que como es sabido, permite asociar una acción al evento de finalización de la carga de la página.

El problema se produce cuando tenemos dos scripts, y cada uno asocia una función diferente a este mismo evento. Por ejemplo, podríamos tener:

<SCRIPT LANGUAGE="JavaScript">
<!--
//Primer script
function hola() {
window.alert('Bienvenido a JavaScript')
}
window.onload=hola //-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Segundo script
function adios() {
window.alert('Hasta la vista')
}
window.onload=adios //-->
</SCRIPT>

Si insertamos los 2 scripts en nuestra página web, el resultado no será la ejecución de las funciones hola() y adios(), por este orden, como quizá esperaríamos. Lo que sucede es que se ejecuta únicamente la función adios(), porque el intérprete JavaScript de los navegadores se quedará siempre con la última asignación realizada al manejador onLoad. Lo mismo sucederá con cualquier otro evento al que se quiera asociar una acción.

La solución en este caso pasa por crear una función específica que invoque a las 2 piezas de código que queríamos ejecutar al cargar la página: hola() y adios(). El gestor de eventos onload se asociará a esta función, y se eliminará la asociación de los otros scripts. El código necesario podría ser el siguiente:

<SCRIPT LANGUAGE="JavaScript">
<!--
//Primer script
function hola() {
window.alert('Bienvenido a JavaScript')
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Segundo script
function adios() {
window.alert('Hasta la vista')
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function empezar() {
hola()
adios()
}
window.onload=empezar
//-->
</SCRIPT>

De esta forma, se ejecutarán ambas funciones, primero hola(), y tras finalizar ésta, adios().

Alternativamente, se puede utilizar la forma tradicional de asociar funciones a manejadores de eventos dentro del código HTML. Para el caso que nos ocupa, podríamos usar el parámetro onload de la etiqueta body, de la siguiente forma:

<BODY ONLOAD="hola(); adios();">

 

Tutorial de JavaScript