Ahora vamos a ver algo muy importante, sobretodo para los que no han programado nunca y con Javascript están dando sus primeros pasos en el mundo de la programación ya que veremos un concepto nuevo, el de función, y los usos que tiene. Para los que ya conozcan el concepto de función también será un capítulo util, pues también veremos la sintaxis y funcionamiento de las funciones en Javascript.

Qué es una función: A la hora de hacer un programa ligeramente grande existen determinados procesos que se pueden concebir de forma independiente, y que son más sencillos de resolver que el problema entero. Además, estos suelen ser realizados repetidas veces a lo largo de la ejecución del programa. Estos procesos se pueden agrupar en una función, definida para que no tengamos que repetir una y otra vez ese código en nuestros scripts, sino que simplemente llamamos a la función y ella se encarga de hacer todo lo que debe.

Así que podemos ver una función como una serie de instrucciones que englobamos dentro de un mismo proceso. Este proceso se podrá luego ejecutar desde cualquier otro sitio con solo llamarlo. Por ejemplo, en una página web puede haber una función para cambiar el color del fondo y desde cualquier punto de la página podríamos llamarla para que nos cambie el color cuando lo deseemos.

Las funciones se utilizan constantemente, no sólo las que escribes tu, sino también las que ya están definidas en el sistema, pues todos los lenguajes de programación tienen un montón de funciones para realizar procesos habituales como por ejemplo obtener la hora, imprimir un mensaje en la pantalla o convertir variables de un tipo a otro. Ya hemos visto alguna función en nuestros sencillos ejemplos anteriores cuando hacíamos un document.write() en realidad estabamos llamando a la función write() asociada al documento de la página que escribe un texto en la página. En los capítulos de funciones vamos primero a ver cómo realizar nuestras propias funciones y cómo llamarlas luego. A lo largo del libro veremos muchas de las funciones definidas en Javascript que debemos utilizar para realizar distintos tipos de acciones habituales.

Cómo se escribe una función:

Una función se debe definir con una sintaxis especial que vamos a conocer a continuación.

function nombrefuncion (){
   instrucciones de la función
   ...
}

Primero se escribe la palabra function, reservada para este uso. Seguidamente se escribe el nombre de la función, que como los nombres de variables puede tener números, letras y algún carácter adicional como en guión bajo. A continuación se colocan entre llaves las distintas instrucciones de la función. Las llaves en el caso de las funciones no son opcionales, además es útil colocarlas siempre como se ve en el ejemplo, para que se vea fácilmente la estructura de instrucciones que engloba la función.

Veamos un ejemplo de función para escribir en la página un mensaje de bienvenida dentro de etiquetas <H1> para que quede más resaltado.

function escribirBienvenida(){
   document.write("<H1>Hola a todos</H1>")
}

Simplemente escribe en la página un texto, es una función tan sencilla que el ejemplo no expresa suficientemente el concepto de función, pero ya veremos otras más complejas. Las etiquetas H1 no se escriben en la página, sino que son interpretadas como el significado de la misma, en este caso que escribimos un encabezado de nivel 1. Como estamos escribiendo en una página web, al poner etiquetas HTML se interpretan como lo que son.

Cómo llamar a una función:

Cuando se llaman a las funciones Para ejecutar una función la tenemos que llamar en cualquier parte de la página, con eso conseguiremos que se ejecuten todas las instrucciones que tiene la función entre las dos llaves. Para ejecutar la función utilizamos su nombre seguido de los paréntesis.

NombreDeLaFuncion()

Dónde colocamos las funciones: En principio, podemos colocar las funciones en cualquier parte de la página, siempre entre etiquetas <SCRIPT>, claro está. No obstante existe una limitación a la hora de colocarla con relación a los lugares desde donde se la llame. Lo más normal es colocar la función antes de cualquier llamada a la misma y así seguro que nunca nos equivocaremos.

En concreto, la función se debe definir en el bloque <SCRIPT> donde esté la llamada a la función, aunque es indiferente si la llamada se encuentra antes o después la función, dentro del mismo bloque <SCRIPT>.

<SCRIPT>
miFuncion()
function miFuncion(){
    //hago algo...
    document.write("Esto va bien")
}
</SCRIPT>

Este ejemplo funciona correctamente porque la función está declarada en el mismo bloque que su llamada.

También es válido que la función se encuentre en un bloque <SCRIPT> anterior al bloque donde está la llamada.

<HTML>
<HEAD>
   <TITLE>MI PÁGINA</TITLE>
<SCRIPT>
function miFuncion(){
    //hago algo...
    document.write("Esto va bien")
}
</SCRIPT>
</HEAD>
<BODY>

<SCRIPT>
miFuncion()
</SCRIPT>

</BODY>
</HTML>

Vemos un código completo sobre cómo podría ser una página web donde las funciones están en la cabecera. Un lugar muy bueno donde colocarlas, porque se supone que en la cabecera no se van a utilizar todavía y siempre podremos disfrutar de ellas en el cuerpo porque ya han sido declaradas seguro.

Esto último en cambio sería un error.

Lo que será un error es una llamada a una función que se encuentra declarada en un bloque <SCRIPT> posterior.

<SCRIPT>
miFuncion()
</SCRIPT>

<SCRIPT>
function miFuncion(){
    //hago algo...
    document.write("Esto va bien")
}
</SCRIPT>

Parámetros de las funciones: Las estructuras que hemos visto anteriormente sobre funciones no son las únicas que debemos aprender para manejarlas en toda su potencia. Las funciones también tienen una entrada y una salida, que se pueden utilizar para recibir y devolver datos.

Parámetros: Los parámetros se usan para mandar valores a la función, con los que ella trabajará para realizar las acciones. Son los valores de entrada que recibe una función. Por ejemplo, una función que realizase una suma de dos números tendría como parámetros a esos dos números. Los dos números son la entrada, así como la salida sería el resultado, pero eso lo veremos más tarde.

Veamos un ejemplo anterior en el que creábamos una función para mostrar un mensaje de bienvenida en la página web, pero al que ahora le vamos a pasar un parámetro que contendrá el nombre de la persona a la que hay que saludar.

function escribirBienvenida(nombre){
    document.write("<H1>Hola " + nombre + "</H1>")
}

Como podemos ver en el ejemplo, para definir en la función un parámetro tenemos que poner el nombre de la variable que va a almacenar el dato que le pasemos. Esa variable, que en este caso se llama nombre, tendrá como valor el dato que le pasemos a la función cuando la llamemos, además, la variable tendrá vida durante la ejecución de la función y dejará de existir cuando la función termine su ejecución.

    Para llamar a una función que tiene parámetros se coloca entre paréntesis el valor del parámetro. Para llamar a la función del ejemplo habría que escribir:

escribirBienvenida("Alberto García")

    Al llamar a la función así, el parámetro nombre toma como valor "Alberto García" y al escribir el saludo por pantalla escribirá "Hola Alberto García" entre etiquetas <H1>.

    Los parámetros pueden recibir cualquier tipo de datos, numérico, textual, boleano o un objeto. Realmente no especificamos el tipo del parámetro, por eso debemos tener un cuidado especial al definir las acciones que realizamos dentro de la función y al pasarle valores a la función para asegurarnos que todo es consecuente con los tipos de nuestras variables o parámetros.

    Múltiples parámetros: Una función puede recibir tantos parámetros como queramos y para expresarlo se colocan los parámetros separados por comas dentro de los paréntesis. Veamos rápidamente la sintaxis para que la función de antes reciba dos parámetros, el primero el nombre al que saludar y el segundo el color del texto.

function escribirBienvenida(nombre,colorTexto){
    document.write("<FONT color=" + colorTexto + ">)
    document.write("<H1>Hola " + nombre + "</H1>")
    document.write("</FONT>")
}

Llamaríamos a la función con esta sintaxis. Entre los paréntesis colocaremos los valores de los parámetros.

var miNombre = "Pepe"
var miColor = "red"
escribirBienvenida(miNombre,miColor)

    He colocado entre los paréntesis dos variables en lugar de dos textos entrecomillados. Cuando colocamos variables entre los parámetros en realidad lo que estamos pasando a la función son los valores que contienen las variables y no las mismas variables.

    Parámetros se pasan por valor: Al hilo del uso de parámetros en nuestros programas Javascript tenemos que indicar que los parámetros de las funciones se pasan por valor. Esto quiere decir que aunque modifiquemos un parámetro en una función la variable original que habíamos pasado no cambiará su valor. Se puede ver fácilmente con un ejemplo.

function pasoPorValor(miParametro){
    miParametro = 32
    document.write("he cambiado el valor a 32")
}
var miVariable = 5
pasoPorValor(miVariable)
document.write ("el valor de la variable es: " + miVariable)

    En el ejemplo tenemos una función que recibe un parámetro y que modifica el valor del parámetro asignándole el valor 32. También tenemos una variable, que inicializamos a 5 y posteriormente llamamos a la función pasándole esta variable como parámetro. Como dentro de la función modificamos el valor del parámetro podría pasar que la variable original cambiase de valor, pero como los parámetros no modifican el valor original de las variables esta no cambia de valor. De este modo, al imprimir en pantalla el valor de miVariable se imprimirá el número 5, que es el valor original de la variable, en lugar de 32 que era el valor col el que habíamos actualizado el parámetro.

En javascript sólo se pueden pasar las variables por valor.

    Valores de retorno: Las funciones también pueden retornar valores, de modo que al ejecutar la función se podrá realizar acciones y dar un valor como salida. Por ejemplo, una función que calcula el cuadrado de un número tendrá como entrada -tal como vimos- a ese número y como salida tendrá el valor resultante de hallar el cuadrado de ese número. Una función que devuelva el día de la semana tendría como salida en día de la semana.

    Veamos un ejemplo de función que calcula la media de dos números. La función recibirá los dos números y retornará el valor de la media.

function media(valor1,valor2){
    var resultado
    resultado = (valor1 + valor2) / 2
    return resultado
}

    Para especificar el valor que retornará la función se utiliza la palabra return seguida de el valor que se desea devolver. En este caso se devuelve el contenido de la variable resultado, que contiene la media de los dos números.

    Para recibir los valores que devuelve una función se coloca el operador de asignación =. Para ilustrar esto se puede ver este ejemplo, que llamará a la función media() y guardará el resultado de la media en una variable para luego imprimirla en la página.

var miMedia
miMedia = media(12,8)
document.write (miMedia)

Múltiples return

    En una misma función podemos colocar más de un return. Lógicamente sólo vamos a poder retornar una cosa, pero dependiendo de lo que haya sucedido en la función podrá ser de un tipo u otro, con unos datos u otros.

    En esta función podemos ver un ejemplo de utilización de múltiples return. Se trata de una función que devuelve un 0 si el parámetro recibido era par y el valor del parámetro si este era impar.

function multipleReturn(numero){
    var resto = numero % 2
    if (resto == 0)
       return 0
    else
       return numero
}

    Para averiguar si un número es par hallamos el resto de la división al dividirlo entre 2. Si el resto es cero es que era par y devolvemos un 0, en caso contrario -el número es impar- devolvemos el parámetro recibido.

Ámbito de las variables en funciones

    Dentro de las funciones podemos declarar variables, incluso los parámetros son como variables que se declaran en la cabecera de la función y que se inicializan al llamar a la función. Todas las variables declaradas en una función son locales a esa función, es decir, solo tendrán validez durante la ejecución de la función.

    Podemos declarar variables en funciones que tengan el mismo nombre que una variable global a la página. Entonces, dentro de la función la variable que tendrá validez es la variable local y fuera de la función tendrá validez la variable global a la página.

    En cambio, si no declaramos las variables en las funciones se entenderá por javascript que estamos haciendo referencia a una variable global a la página, de modo que si no está creada la variable la crea, pero siempre global a la página en lugar de local a la función.