Cuando llamamos a una función JavaScript crea automáticamente un
objeto llamado "arguments" que almacena los valores que le pasamos a
dicha función. También este objeto arguments almacena en una propiedad
llamada length la cantidad de parámetros que llegaron. Veamos un ejemplo
muy sencillo.
Confeccionar una función que retorne la suma de dos enteros:
<html>
<head>
</head>
<body>
<script type="text/javascript">
function sumar(x,y)
{
var s=x+y;
return s;
}
document.write(sumar(5,3));
</script>
</body>
</html>
Luego podemos resolver esta misma función accediendo al objeto arguments que se crea cada vez que llamamos a una función:
<html>
<head>
</head>
<body>
<script type="text/javascript">
function sumar(x,y)
{
var s=arguments[0]+arguments[1];
return s;
}
document.write(sumar(5,3));
</script>
</body>
</html>
Como podemos observar dentro de la función sumar accedemos al primer
parámetro mediante el objeto arguments (con el subíndice 0 accedemos al
primer parámetro llamado x) Tenemos dos formas de acceder al primer
parámetro de la función : con el nombre x o con arguments[0].
Como podemos observar si debemos sumar dos valores que llegan como
parámetro el algoritmo más claro es el primero en lugar que tener que
acceder al objeto "arguments", pero veremos que en muchas situaciones el
objeto "arguments" nos favorece en la implementación de funciones mucho
más complejas y reutilizables.
Problema
Confeccionar una función que reciba un conjunto variable de enteros y nos retorne su suma:
<html>
<head>
</head>
<body>
<script type="text/javascript">
function sumar()
{
var s=0;
var f;
for(f=0; f<arguments.length; f++)
{
s=s+arguments[f];
}
return s;
}
document.write(sumar(2,4));
document.write('<br>');
document.write(sumar(1,2,3,4,5));
document.write('<br>');
document.write(sumar(100,200,300));
</script>
</body>
</html>
Como no sabemos con cuantos parámetros llamaremos a la función sumar
no indicamos ningún parámetro. Luego la única forma de acceder a los
parámetros es mediante el objeto "arguments" y por medio del subíndice
accedemos uno a uno. También el objeto "arguments" tiene una propiedad
length que almacena la cantidad de parámetros recibidos por la función.
Esta sintaxis nos permite codificar funciones muy poderosas que se
adaptan a muchas situaciones, como vemos luego podemos llamar a la
función sumar pasando 2 parámetros:
document.write(sumar(2,4));
5 parámetros:
document.write(sumar(1,2,3,4,5));
3 parámetros:
document.write(sumar(100,200,300));
etc.
Problema
Confeccionar una función que reciba un conjunto de string y genere
dentro de la página una lista ordenada (<ol>). La función debe
recibir en el primer parámetro el id de un div.
<html>
<head>
</head>
<script type="text/javascript">
window.onload=iniciar;
function iniciar()
{
generarLista('lista1','uno','dos','tres','cuatro','cinco','seis');
}
function generarLista()
{
var s='<ol>';
var f;
for(f=1;f<arguments.length;f++)
{
s=s+'<li>'+arguments[f]+'</li>';
}
s=s+'</ol>';
var elemento1=document.getElementById(arguments[0]);
elemento1.innerHTML=s;
}
</script>
<body>
<div id="lista1"></div>
</body>
</html>
Veamos por partes el funcionamiento de este programa. En el body de
la página hemos definido un div con id llamado "lista1" sin contenido:
<body> <div id="lista1"></div> </body>
En el bloque del script inicializamos la propiedad onload del objeto
window indicando la función a ejecutar luego que la página esta
completamente cargada:
window.onload=iniciar;
Es decir que la función iniciar se ejecuta una vez que la página está
completamente construida (es decir ya está en memoria el div definido
en el body)
La función iniciar es la que llama a la función generarLista pasando
como parámetros primero el id del div a cargar y a partir del segundo
parámetro en adelante los distintos string a mostrar en cada elemento
del <ol>:
function iniciar()
{
generarLista('lista1','uno','dos','tres','cuatro','cinco','seis');
}
Finalmente la función generarLista que como podemos observar no tiene
parámetros explícitos, sino que los accedemos luego mediante el objeto
arguments. Disponemos un for que lo inicializamos en 1 ya que el
argumento cero tiene el nombre del id del div:
function generarLista()
{
var s='<ol>';
var f;
for(f=1;f<arguments.length;f++)
{
s=s+'<li>'+arguments[f]+'</li>';
}
s=s+'</ol>';
var elemento1=document.getElementById(arguments[0]);
elemento1.innerHTML=s;
}
Mediante el método getElementById obtenemos la referencia del div que
llega como parámetro en el arguments[0]. y luego mediante la propiedad
innerHTML indicamos todo el código HTML que debe cargarse en el div. En
este caso almacenamos en la variable s todas las marcas necesarios para
generar la lista ordenada.
