Pasar variables de una página HTML a otra.

El JavaScript está dividido en dos Script:

• Primer Script: es el código JavaScript que colocaremos en la página en la que definimos las variables que vamos a pasar a través de la URL.
• Segundo Script: Captura las variables definidas en el primer Script y, de necesitarlo, nos permite escribir los valores en la página.

Las variables las podemos utilizar en cualquier parte del documento HTML y los datos alfanuméricos podremos tratarlos como el tipo de dato al cual pertenece, es decir, en el caso que las variables contengan números podremos realizar cálculos con ellos y si son una cadena de texto podemos imprimirlos en pantalla y/o concatenarlos para formar frases.

Primer JavaScript

Página HTML donde definimos las variables

Comenzamos definiendo todas las variables que queramos. Los datos de las variables pueden ser números o texto y los nombres de las mismas pueden ser cualquiera. Conviene colocar los valores entre comillas dobles (" ").

El Script tiene una función llamada pasarVariables() la cual es llamada desde el atributo href de la etiqueta <A>. La función tiene dos variables que toman los valores escritos como parámetros en la función que llamamos desde el enlace. El primer parámetro es la dirección URL que se cargará al hacer clic en el enlace. Este archivo tendrá el segundo Script que captura las variables. El segundo parámetro contiene una lista separada por coma (,) de las variables que queremos pasar. No es necesario colocar todas las variables en un enlace, pueden escribirse sólo las que se quieran utilizar en el archivo que vamos a cargar.

Lo primero que realiza la función es asignar un nuevo valor a la variable URLconVariables. A la URL escrita como parámetro en la función, le agregamos (al final) el símbolo ?. Esto lo hacemos para separar la URL, de la cadena que contendrá los nombres de variables con sus valores correspondientes.

La siguiente línea de código asigna a Variable el valor de la ListaVariables indicando mediante la función split() que la coma (,) es el símbolo separador utilizado en la lista de variables.

El bucle for permite ir escribiendo en la URL los nombres de las variables con sus respectivos valores. Para esto asignamos a la variable i un valor inicial de 0 (cero) y como condición para que se ejecute este bucle indicamos que i sea menor que variable.length, que en este caso es 3 ya que son 3 las variables utilizadas. El parámetro i++ actualiza el valor de la variable i incrementando su valor 1 dígito.

La función tiene dos condiciones, la primera se ejecuta solo si i es diferente (!=) a Variable.length-1. En el caso que esta condición sea verdadera se ejecuta:

URLconVariables += Variable[i] + "=" + escape(eval(Variable[i]))+"&";

Esta línea de código escribe, en la URL a la cual vamos a pasarle las variables, el nombre de variable más el signo = más el valor de la variable más el signo & que utilizaremos para separar cada cadena de variable con su respectivo valor. Podemos ver el uso de la función escape(), que nos permite reemplazar los espacios en blanco escritos en los valores de las variables por su código ASCII correspondiente. De esta manera si se definió una variable Var Ejemplo = "Variable de ejemplo" esta función devolverá el valor Variable%20de%20ejemplo. Vemos que se reemplazaron los espacios por %20.

else se ejecuta cuando la condición anterior es falsa, es decir, en la última ejecución del bucle for por lo que ya no necesitamos escribir el símbolo &

Como dijimos, este bucle se ejecutará hasta que i sea menor que la cantidad de variables a pasar (en este caso 3), por lo que una vez escritas las 3 variables con sus valores se saltará a la siguiente línea fuera del bucle for que asigna a la propiedad href del objeto location el valor final de la variable URLconVariables.

Segundo JavaScript

Página HTML donde utilizamos las variables

Este Script debemos colocarlo en el documento HTML en el cual queremos leer las variables definidas en el Script anterior. Lo primero que realiza el JavaScript es asignar a CadenaVariables el valor devuelto por el método substring de la propiedad search del objeto location. Este valor es toda la cadena que sigue a la URL menos el símbolo ?.

La línea que sigue devuelve un array de la cadena guardada en CadenaVariables. Indicamos que el símbolo separador es &. De esta manera los distintos valores de Variables serían:

• Variables[0] = 'var1=Estas%20en'
• Variables[1] = 'var2=Código%20JavaScript'
• Variables[2] = 'var3=Tu%20fuente%20de%20ejemplos%20JavaScript'

Y la cadena total devuelta por split():

var1=Estas%20en,var2=Código%20JavaScript,var3=Tu%20fuente%20de%20ejemplos%20JavaScript

Cada variable quedará separada por el símbolo , (coma) y a su vez cada variable con su valor correspondiente queda separado por el símbolo = (igual).

El bucle for define para la variable i un valor inicial de 0 (cero) y se ejecuta solo si i<Variables.length y actualiza el valor de esta variable en 1 dígito cada vez que se ejecuta. Si la condición es verdadera se ejecuta la primera línea que asigna a VariableActual el valor correspondiente según el valor de i.

Lo que sigue es una condición que verifica si el valor de VariableActual es o no un número. Si la función devuelve el valor "true" (verdadero) se ejecuta la condición if, de otra manera se salta a else. La condición guarda temporalmente el nombre de la variable seguida de los símbolos =' seguida del valor de la variable (suprimiendo el código %20 y colocando los espacios nuevamente donde corresponden) y finalmente los símbolos ';
Lo mismo hace else pero sin las '' (comillas simples) ya que el valor que tenemos en esta variable es un número que podemos utilizar en la página para realizar algún cálculo.

Mediante el código:

<script language="javascript">
document.write(nombre-de-variable);
</script>

podemos mostrar el valor de la variable donde queramos dentro de la página HTML que contiene este segundo JavaScript.