6.1 FUNCIONES EN JAVASCRIPT:
6.1.1 -QUÉ ES UNA FUNCIÓN:
A la hora de hacer un programa ligeramente grande existen determinados procesos. Suelen ser realizados repetidas veces a lo largo de la ejecución del programa. Estos se pueden agrupar en una función, definida para que no tengamos que 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. Este proceso se podrá luego ejecutar desde cualquier otro sitio con solo llamarlo. Por ejemplo, puede haber una función para cambiar el color del fondo y desde color.
6.1.2 -COMO SE ESCRIBE UNA FUNCIÓN:
Se debe definir con una sintaxis especial:
function nombrefuncion (){
instrucciones de la función
...
}
Primero se escribe function. Seguidamente se escribe el nombre de la función, que 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.
Ejemplo:
function escribirBienvenida(){
document.write("<H1>Hola a todos</H1>")
}
6.1.3 -COMO LLAMAR A UNA FUNCIÓN:
Para ejecutar una función la tenemos que invocar en cualquier parte de la página.
Para ejecutar la función utilizamos su nombre seguido de los paréntesis. Por ejemplo:
escribirBienvenida()
6.2 DÓNDE COLOCAMOS LAS FUNCIONES:
Las funciones son uno de los principales componentes de los programas, en la mayoría de los lenguajes de programación.
Dos opciones posibles para colocar el código de una función:
a) Colocar la función en el mismo bloque de script: La función se puede 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 del código de la función, dentro del mismo bloque <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>
Las funciones están en la cabecera de la página (dentro del HEAD). Éste es un lugar excelente 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 sabemos seguro que ya han sido declaradas.
Veamos el siguiente ejemplo, 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()
</SCRIPT>
<SCRIPT>
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
6.3 PARÁMETROS DE LAS FUNCIONES:
6.3.1 -PARÁMETROS:
Se usan para mandar valores a las funciones. Una función trabajará con los parámetros para realizar las acciones. Los parámetros son los valores de entrada que recibe una función.
Un ejemplo sencillo, 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 de la suma.
Un ejemplo:
function escribirBienvenida(nombre){
document.write("<H1>Hola " + nombre + "</H1>")
}
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, tendrá como valor el dato que le pasemos a la función cuando la llamemos. Además, la variable donde recibimos el parámetro 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 :
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.
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.
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.
6.3.3 -LOS PARÁMETROS SE PASAN POR VALOR:
Los parámetros de las funciones se pasan por valor. Esto quiere decir que estamos pasando valores y no variables. En la práctica, aunque modifiquemos un parámetro en una función, la variable original que habíamos pasado no cambiará su valor.
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)
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, ésta no cambia de valor.
De este modo, una vez ejecutada la función, 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 con el que habíamos actualizado el parámetro.
En Javascript sólo se pueden pasar las variables por valor.
6.4 VALORES DE RETORNO:
6.4.1 -DEVOLUCIÓN DE VALORES EN LAS FUNCIONES:
Las funciones en Javascript también pueden retornar valores.
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.
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 calculada de los dos números.
Quizás nos preguntemos ahora cómo recibir un dato que devuelve una función. Realmente en el código fuente de nuestros programas podemos invocar a las funciones en el lugar que deseemos. Cuando una función devuelve un valor simplemente se sustituye la llamada a la función por ese valor que devuelve. Así pues, para almacenar un valor de devolución de una función, tenemos que asignar la llamada a esa función como contenido en una variable, y eso lo haríamos con el operador de asignación =.
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)
6.4.2 -MÚLTIPLES RETURN:
Las funciones sólo pueden devolver un valor, por lo que en principio no podemos hacer funciones que devuelvan dos datos distintos.
Aunque sólo podamos devolver un dato, en una misma función podemos colocar más de un return.
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
}
6.4.3 -ÁMBITO DE LAS VARIABLES EN FUNCIONES:
Dentro de las funciones podemos declarar variables. 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.
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.
function variables_glogales_y_locales(){
var variableLocal = 23
variableGlobal = "qwerty"
}
variableLocal es una variable que se ha declarado en la función, por lo que será local a la función y sólo tendrá validez durante su ejecución. Por otra parte variableGlobal no se ha llegado a declarar (porque antes de usarla no se ha utilizado la palabra var para declararla). En este caso la variable variableGlobal es global a toda la página y seguirá existiendo aunque la función finalice su ejecución. Además, si antes de llamar a la función existiese la variable variableGlobal, como resultado de la ejecución de esta función, se machacaría un hipotético valor de esa variable y se sustituiría por "qwerty".
No hay comentarios:
Publicar un comentario