6.1 Funciones en Javascript
Definimos el concepto de función y aprendemos a crearlas y a llamarlas.
6.1.1 Qué es una función
A la hora de hacer un programa ligeramente grande existen determinados procesos que son más sencillos de resolver que el problema entero. Estos procesos se pueden agrupar en una función, para no repetir una y otra vez ese código en nuestros scripts, simplemente llamamos a la función y ella se encarga de hacer todo lo que debe.
Podemos ver una función como una serie de instrucciones que englobamos dentro de un mismo proceso. 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.
Ya hemos visto alguna función en ejemplos anteriores. Por ejemplo, cuando hacíamos un document.write() en realidad estábamos llamando a la función write() asociada al documento de la página, que escribe un texto en la página.
6.1.2 Cómo se escribe una función
Una función se debe definir con una sintaxis especial:
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, 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.
Un ejemplo de función para escribir un mensaje de bienvenida:
function escribirBienvenida(){
document.write("<H1>Hola a todos</H1>")
}
Las etiquetas H1 son interpretadas como el significado de la misma, en este caso que escribimos un encabezado de nivel 1.
6.1.3 Cómo llamar a una función
Para ejecutar la función utilizamos su nombre seguido de los paréntesis.
escribirBienvenida()
6.2 Dónde colocamos las funciones
Uso correcto y habitual que se hace de las funciones en Javascript.
Importante: colocar la función antes de cualquier llamada a la misma.
Existen dos opciones:
a) Colocar la función en el mismo bloque de script:
<SCRIPT>
miFuncion()
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
b) Colocar la función en otro bloque de script: 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>
Veamos un código que daría un error, debido a que hacemos una llamada a una función que se encuentra declarada en un bloque <SCRIPT> posterior:
<SCRIPT>
miFuncion() (daría error)
</SCRIPT>
<SCRIPT>
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
6.3 Parámetros de las funciones
Definir funciones que reciben parámetros y como hacer llamadas a funciones pasando parámetros.
6.3.1 Parámetros
Los parámetros son los valores de entrada que recibe una función. 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 de la suma.
Creamos una función para un mensaje de bienvenida:
function escribirBienvenida(nombre){
document.write("<H1>Hola " + nombre + "</H1>")
}
Para llamar a una función que tiene parámetros se coloca entre paréntesis el valor del parámetro:
escribirBienvenida("Alberto García")
Los parámetros pueden recibir cualquier tipo de datos, numérico, textual, boleano o un objeto, por eso debemos tener un cuidado especial al definir las acciones que realizamos dentro de la función y al pasarle valores.
6.3.2 Múltiples parámetros
Una función puede recibir tantos parámetros como queramos y para expresarlo se colocan los nombres de 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 estamos pasando los valores que contienen las variables y no las mismas variables.
6.3.3 Los parámetros se pasan por valor
Aunque modifiquemos un parámetro en una función, la variable original que habíamos pasado no cambiará su valor. Vemos 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)
6.4 Valores de retorno
Las funciones pueden devolver valores a través de la sentencia return.
6.4.1 Devolución de valores en las funciones
Por ejemplo, una función que calcula el cuadrado de un número tendrá como entrada a ese número y como salida tendrá el valor resultante de hallar el cuadrado de ese número.
Veamos un ejemplo de función que calcula la media de dos números:
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 del valor que se desea devolver. Cuando una función devuelve un valor simplemente se sustituye la llamada a la función por ese valor que devuelve.
Este ejemplo 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)
6.4.2 Múltiples return
En realidad en Javascript las funciones sólo pueden devolver un valor, ahora bien, aunque sólo podamos devolver un dato, en una misma función podemos colocar más de un return.
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.
6.4.3 Ámbito de las variables en funciones
Dentro de las funciones podemos declarar variables. Sobre este asunto debemos de saber que todas las variables declaradas en una función son locales a esa función, es decir, sólo tendrán validez durante la ejecución de la función.
Podría darse el caso de que 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.
Si no declaramos las variables en las funciones se entenderá por javascript que estamos haciendo referencia a una variable global a la página, si no está creada la variable la crea, pero siempre global a la página en lugar de local a la función.
