function mensaje() y si tiene argumentos: function sumar(a, b)
Los argumentos pueden ser variables, o directamente cadenas, números e incluso objetos.
Después de haber definido el nombre de la función, se escribe un par de llaves, dentro de las cuales irán todas las líneas que compongan el código de nuestra función. Por ejemplo:
function mensaje() {
alert("Esto es un mensaje de JavaScript")
}
Las funciones de javaScript reciben los argumentos por valor, es decir, que si la función cambia el valor de los parámetros recibidos, este cambio no se reflejará globalmente, sino que sólo será efectivo en el ámbito de la propia función, ni siquiera si la misma función es llamada desde otro punto del programa.
No hay que confundir la declaración de funciones con el objeto Function() de javaScript. Fíjate en que el nombre de este objeto comienza por "F" mayúscula. Se verá en el apartado Objetos.
Normalmente las funciones se invocarán capturando un evento, es decir, un suceso que se produce y es detectado en la ventana del navegador. Uno de los eventos más comunes es el que detecta la pulsación (onClick) del puntero del ratón sobre un objeto, por ejemplo, un botón de un formuulario. En el siguiente ejemplo veremos cómo escribir una página que captura un evento en el botón de un formulario que llama a una función. Esta función invoca el método alert del objeto window:
<HTML>
<HEAD>
<TITLE>Capturar evento de boton</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function mensaje() {
alert("Esto es un mensaje de JavaScript")
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="mensaje()">
</FORM>
</BODY>
</HTML>
Y al pulsar el botón, se obtiene:
Al ser capaz function de realizar acciones tanto como de devolver valores, es necesaria una instrucción que le indique lo que debe hacer: return. Solamente si aparece esta instrucción al final de la función, ésta devolverá el valor que tenga programado, si no, realizará las tareas que tenga encomendadas, pero no se podrá obtener de ella una respuesta. Por ejemplo:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
sumar = a + b
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
Se obtiene:
undefined
Como puedes ver, se ha definido una función con dos argumentos: a y b que serán sumados. No obstante, cuando es invocada para escribir el resultado de la suma, se obtiene una desconcertante respuesta: undefined . Esto es debido a que no se le ha dicho que entregue el resultado, sino solamente que lo calcule. Pero si se escribe:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
sumar = a + b
return sumar
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
Esta vez sí se obtiene lo esperado:
4
En el ejemplo, la función devuelve el resultado de la suma en una variable que se llama igual que la propia función: sumar, pero también se puede hacer sobre una variable con distinto nombre. Por ejemplo, funcionaría igual así:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
resultado = a + b
return resultado
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
También es posible devolver directamente el resultado de la suma sin depositar el valor previamente en ninguna variable ni en el nombre de la función:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
return a + b
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
En JavaScript las funciones que tienen argumentos, como la del ejemplo, automáticamente son provistas de un vector conteniendo los valores de los argumentos. Y te preguntarás qué es eso de un "vector". Un vector es algo parecido a una matriz o array, y en este caso nos permite acceder a los valores de los argumentos a y b por otra via que no es utilizarlos directamente. Estos vectores, cuando hay que automatizar procedimientos, pueden resultar muy útiles. En el caso del vector de nuestra función, y como todos los vectores y arrays, la numeración del índice comienza por el cero, y por supuesto, el orden de los valores en el vector es el mismo que el de los argumentos en la función, es decir, el índice 0 corresponde al argumento a y el índice 1 corresponde al b. Este ejemplo es equivalente al anterior:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
return arguments[0] + arguments[1]
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
La palabra arguments, como ya habrás supuesto, es reservada y no puede emplearse como nombre de variable ni de función, y tiene una propiedad: length que nos indica la longitud del índice del vector. Por ejemplo, si modificamos un poco la función anterior:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
return arguments.length
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
Se obtiene 2 que es el número de argumentos que tiene la función. Fíjate en que este contador no empieza en el cero, puesto que devuelve 2.