07 – Funciones (parte 1)

Concepto de función y uso básico

Índice
 Uso de funciones

 Concepto de función
 Uso de funciones
 Ventajas del uso de funciones
 ¿Cómo creamos una función?
 Los parámetros de la función
 El valor de retorno
 Respecto al flujo
 Ejemplos

 Prácticas

ALBERT BASSONS 2
Concepto de función
• Una función (también llamada subrutina, subprograma,
procedimiento o rutina) es un segmento independiente de
código, diseñado para realizar una tarea específica.

Subrutina:
realizar llamada

ALBERT BASSONS 3
Concepto de función
• Una función es, en esencia, un conjunto de instrucciones de
programación agrupadas, de forma que las podamos ejecutar
desde cualquier punto de nuestro programa tantas veces
como sea necesario.

• Podríamos diferenciar entre funciones y procedimientos,

dependiendo de si retornan un valor o no. En el ejemplo de la
transparencia siguiente, la función no devuelve nada, así que
podríamos decir que es un procedimiento.

• En estas transparencias no diferenciaré entre procedimientos,

funciones y métodos, llamándolo a todo funciones.

ALBERT BASSONS 4
Ejemplo

ALBERT BASSONS 5
Ejemplo
• En el ejemplo anterior, cada uno de los divs se colorea de un
color concreto.

• Cambia ahora el cuerpo de la web por el siguiente:

ALBERT BASSONS 6
Ejemplo
• Y si no te gusta recuperar el valor del input de tipo color una
y otra vez, puedes utilizar una variable global de este modo:

ALBERT BASSONS 7
Concepto de función
• Una función puede recibir valores (parámetros de entrada) y
también puede retornar un valor (valor de retorno). Desde el
exterior podríamos verla como un mecanismo de caja negra.

Función cubo(), que calcula el

cubo de un número

ALBERT BASSONS 8
Concepto de función
• Si tenemos que implementar nosotros la función cubo(),
tendremos que plantearnos: qué recibe, qué hace, cómo lo
hace y finalmente qué devuelve.

• Recibe un número, realiza el cálculo ( número * número *

número) y devuelve el resultado obtenido.

• La implementación puede ser:

ALBERT BASSONS 9
Concepto de función

• Imaginémonos que la función cubo() ya ha sido

implementada y está lista para ser utilizada.

• Si la queremos usar, tendremos que pensar en qué recibe,

qué hace y qué devuelve para que todo funcione
correctamente.

• No hace falta saber cómo hace la operación.

ALBERT BASSONS 10
Ejemplo

ALBERT BASSONS 11
Funciones en JS

• Como acabamos de ver, podemos definir nuestras propias

funciones para hacer tareas concretas.

• Pero además, en todos los lenguajes de programación,

disponemos de librerías con funciones ya hechas,
preparadas para ser usadas.

ALBERT BASSONS 12
Funciones en JS

• Por ejemplo, en la librería Math

disponemos de las funciones para
realizar cálculos matemáticos:
sqrt(), abs(), pow(), min(),
max(), sin(), cos(), tan()...

• En JS también tendremos funciones

para trabajar con cadenas de texto,
con arrays…

ALBERT BASSONS 13
Ejemplo

ALBERT BASSONS 14
Ventajas
• Crear nuestras propias funciones nos ofrece la posibilidad de
definir un determinado algoritmo solamente una vez, pero
reutilizarlo todas las veces que sea necesario.

• Reutilizar las funciones hechas facilita el trabajo, reduce el

tiempo invertido en la programación y el número de errores.

ALBERT BASSONS 15
Ventajas
• Estructura modular : una función se puede ver como un
módulo que hace una tarea determinada.

• Reutilización de código: ya no será necesario escribir varias

veces lo mismo, sino que lo escribiremos una vez y lo
invocaremos tantas veces como sea necesario.

• Simplificaremos una tarea compleja en diversas tareas más

simples.

• Mejor organización del código y menos dificultad en la

detección de errores. Además generamos un código más
comprensible para los demás.

ALBERT BASSONS 16
Usando funciones

• A continuación veamos cómo usar algunas de las funciones

que ya vienen con el lenguaje JS, después hablaremos de
cómo crear las nuestras.

• En próximas transparencias veremos más funciones y

métodos (para trabajar con arrays, para cadenas de
texto…).

ALBERT BASSONS 17
Usando funciones
• Las funciones pueden recibir datos como parámetros (input de la
función) y pueden devolver un resultado mediante la sentencia
return (output de la función).

• Para poder usar una función ya implementada, debemos

saber:

• Cómo se llama
• Qué hace
• Qué recibe
• Qué devuelve

ALBERT BASSONS 18
Usando funciones

• Imaginemos que queremos elevar un número cualquiera a

otro.

• Para ello “descubrimos” que tenemos la función pow() en la

librería Math de JavaScript.

• Lo primero que tenemos que hacer es documentarnos sobre

cómo funciona.

ALBERT BASSONS 19
Usando funciones

ALBERT BASSONS 20
Usando funciones
• Para usar la función pow(), no tenemos por qué saber los
detalles de su implementación.

• La usamos conforme a sus especificaciones para cubrir nuestras

necesidades.

ALBERT BASSONS 21
Usando funciones

• En JS, como en muchos otros lenguajes, las funciones de

uso más común ya están implementadas.

• Existen funciones genéricas (funciones globales), entre las

que encontraréis algunas que ya conocéis como:
parseInt(), parseFloat(), o isNaN().

ALBERT BASSONS 22
Usando funciones

Función Descripción
eval() Evalua una cadena de texto como código JavaScript
isFinite() Determina si un número es un número finito
isNaN() Determina si un número es un número ilegal (NaN)
Number() Convierte un objeto en un número
parseFloat() Parsea un string y devuelve su valor como float
parseInt() Parsea un string y devuelve su valor como int
String() Convierte un objeto en un string

ALBERT BASSONS 23
Usando funciones

Función Descripción
decodeURI() Decodifica una URI
decodeURIComponent() Decodifica un componente de URI
encodeURI() Codifica una URI
encodeURIComponent() Codifica un componente de URI

ALBERT BASSONS 24
Creando funciones
• Cuando un programador tiene la necesidad de implementar una
función concreta, debe conocer:

• Cómo se va a llamar.
• Qué tiene que hacer.
• Qué recibirá.
• Qué tiene que devolver.

No necesita saber dónde o para qué se va a usar la función.

ALBERT BASSONS 25
Creando funciones
• Por ejemplo, si nos piden implementar una función para
calcular el volumen de una esfera en función de su radio:

• Se llamará: volumenEsfera().
• Calcula el volumen de la esfera en función de su radio.
• Recibe el radio (number).
• Devolverá el resultado del cálculo (number).

ALBERT BASSONS 26
El prototipo de la función

• El conjunto de nombre de la función, parámetros de

entrada (y sus tipos) y valor de retorno (y su tipo), se conoce
como prototipo de la función y especifica su interfaz de uso.

number volumenEsfera(number r);

Tipo del valor Parámetros que

Nombre
de retorno recibe y sus tipos

ALBERT BASSONS 27
El prototipo de la función

• La interfaz anterior, sirve como acuerdo para poder

compenetrar el trabajo del programador que usa la función y
el que la implementa.

• El primer programador no tiene que saber cómo está

implementada la función, solamente cómo usarla; mientras que el
segundo tiene que saber cómo implementarla pero le da igual
cómo se use.

ALBERT BASSONS 28
El prototipo de la función

number volumenEsfera(number r);

ALBERT BASSONS 29
El prototipo de la función
• Ambas personas podrían trabajar en paralelo. La función
volumenEsfera(r) se puede probar por separado.

• Si se quieren hacer pruebas de la aplicación que usa la función

volumenEsfera(r) sin que esta esté aún implementada, se
puede usar temporalmente una función dummy (tonta), que
siempre retorne el mismo valor.

ALBERT BASSONS 30
Implementación
• Al implementar la función volumenEsfera(r), hay que tener
en cuenta el cálculo que se debe realizar:

ALBERT BASSONS 31
Uso de la función

ALBERT BASSONS 32
Otro ejemplo:

• Vamos a crear una función para saber si un número es par o no.

• Debe recibir un número entero y retornar cierto o falso.

• La función solamente tendrá un parámetro de entrada, de tipo

entero (integer) y su valor de retorno será boolean. El
prototipo será:

boolean esPar(int numero);

ALBERT BASSONS 33
Parámetros
• Esta función esPar(numero) recibe un argumento o
parámetro, que identificamos como numero en ella.

• No deberíamos llamar a la función sin pasarle ese valor. De

hecho, en los lenguajes fuertemente tipados no podremos
hacerlo.

• El argumento numero será tratado como una variable local a

la función esPar(), solamente existirá dentro de ella.

• Una función puede tener más de un parámetro de entrada, se

especifican entre los paréntesis, separados por comas.

ALBERT BASSONS 34
Implementación
• Se pueden realizar implementaciones diferentes de la función:

ALBERT BASSONS 35
Uso de la función
• Debemos usar la función de forma correcta.

• Los siguiente ejemplos generarían error en lenguajes

fuertemente tipados. En JS, no producirán un error pero
darán lugar a resultados incorrectos o incoherentes.

esPar(15.5);
Tipos incorrectos
esPar(true);
esPar(“hola”);

esPar( ); Faltan argumentos

Sobran argumentos
esPar(1, 2);

ALBERT BASSONS 36
Valor de retorno

• Una función retorna un valor haciendo uso de la sentencia

return. Solamente se puede devolver un único valor.

• return además finaliza la ejecución de la función actual,

devolviendo el control del programa a la función que la llamó.

• Se aconseja no utilizar más de un return por función,

aunque si se hace no supone un problema. De hecho, yo lo
suelo hacer a menudo.

ALBERT BASSONS 37
Valor de retorno
• Las funciones que devuelven un boolean (true o false) se
pueden usar directamente en las condiciones de if, while,
do while…

• Podemos llamar a la función esPrimo() desde cualquier

punto de nuestro programa, tantas veces como sea necesario,
para probar todos los números que queramos.

ALBERT BASSONS 38
Otro ejemplo

ALBERT BASSONS 39
Otro ejemplo (versión b)

Primo valdrá true si no

encontró ningún divisor y
false en caso contrario.

ALBERT BASSONS 40
Independencia funcional
• Es muy importante, para permitir la reutilización de funciones
que éstas sean independientes del código HTML.

ALBERT BASSONS 41
Independencia funcional
• Cuando creamos funciones independientes, hay que pasarles los
parámetros adecuados para que hagan su trabajo correctamente.

• En JS, esto puede hacer que el código que colocamos en el

tratamiento del evento se complique y sea “feo”:

ALBERT BASSONS 42
Independencia funcional
• Existen varias soluciones para evitar ese código “feo”:

a) Usar una función adicional dependiente del HTML, ubicada

en la misma página (no en ficheros externos), que se encargue
de ir a buscar los valores de entrada y de llamar a la función
independiente que realiza el cálculo, así como de mostrar el
resultado.

b) Usar un framework tipo JQuery, donde la expresión anterior

quedaría algo más sencilla.

c) Definir nuestras propias funciones de alias que permitan

ahorrar un poco de código.

ALBERT BASSONS 43
Ejemplo final (1 de 3)

[Link]

ALBERT BASSONS 44
Ejemplo final (2 de 3)

[Link]

ALBERT BASSONS 45
Ejemplo final (3 de 3)

[Link]

ALBERT BASSONS 46
Funciones “alias”

• Las funciones de usadas en el ejemplo, nos pueden ser útiles

porque nos ahorran escritura y mejoran la visibilidad del código.

• Para poderlas usar en nuestros proyectos, las ubicaremos en un

fichero con extensión js, por ejemplo [Link] y las
incluiremos en nuestro HTML como se ha mostrado.

ALBERT BASSONS 47
Respecto al flujo

• Todos los programas en C, C++, Java… tienen al menos una

función llamada main, que es la función principal del programa.

• La ejecución comienza por la función main y el orden de las

operaciones viene ahí especificado, dirigiendo el flujo (salvo
eventos).

• En JavaScript, no tenemos main como tal, el orden de las

instrucciones viene determinado por el código <script> que
ponemos directamente en nuestra página (salvo eventos).

ALBERT BASSONS 48
Respecto al flujo

• Cuando trabajamos con eventos

(onclick, onblur, onchange,
onload…) la secuencia de
operaciones que se realizan depende
del orden en que se produzcan estos
eventos.

ALBERT BASSONS 49
Ejercicios
Funciones
Ejercicios
 OBSERVACIONES:

En algunos de los siguientes ejercicios se pide implementar

funciones, no se pide un programa que “haga algo útil”.

En esos casos, limitaros a implementar la función teniendo en

cuenta: entradas, salida y lo que se pide.

Para poder probarla sí que deberéis crear una pequeña web que
ejecute muchas veces la función para diferentes valores de
entrada e imprima los resultados (batería de pruebas).

ALBERT BASSONS 51
Ejercicios
1. Realiza una función para agrandar elementos HTML al doble
de su tamaño inicial.

Piensa en hacer una primera versión sin usar CSS, modificando

el height y el width, después haz la misma función
modificando la altura y anchura mediante el estilo CSS. ¿Son
equivalentes ambas versiones?.

2. Realiza ahora una función para agrandar o encoger

elementos en base a la escala que queramos. Pista: la
función recibirá dos parámetros.

ALBERT BASSONS 52
Ejercicios

3. Haz que al pasar el ratón sobre las imágenes de una galería

de 3x3 imágenes, éstas se agranden un 30%. Al quitar el
ratón deben volver a su tamaño inicial. Usa onmouseenter y
onmouseleave para los eventos.

Hay que hacerlo con JS y usando la función creada en el

ejercicio 2. No vale usar CSS con la pseudoclase :hover.

ALBERT BASSONS 53
Ejercicios
4. Crea una función para cambiar el color de
fondo de los elementos HTML de manera
aleatoria. Usa rgb() o rgba() de CSS y
genera los componentes de color entre 0 y
255 de forma aleatoria.

Sería conveniente crear la función que

genera números aleatorios entre 0 y 255.

Para probarla, puedes crear un montón de

divs y hacer que cambien de color al pasar
el ratón por encima.

ALBERT BASSONS 54
Ejercicios
5. Utiliza lo anterior para crear una
galería de figure con imágenes
dentro.

El color del fondo de las figuras

cambiará de forma aleatoria al
pasar el ratón sobre ellas,
mientras que la imagen se
agrandará o encogerá.

Debes usar las funciones

realizadas anteriormente.

ALBERT BASSONS 55
Ejercicios

6. Crea la página MegaCutrePaint.

Con 10.000 divs a los que se les

cambia el color de fondo al pasar
el ratón por encima.

Intenta que solamente se pinte al

hacer click y se deje de pintar al
volver a hacer click.

ALBERT BASSONS 56
Ejercicios
7. Realiza un programa que imprima una lista de números primos,
desde el 1 hasta un número n introducido en un input.

Por ejemplo, si se introduce el 10, deberían aparecer el 1, 2, 3, 5

y 7. Puedes aprovechar la función esPrimo() mostrada
como ejemplo en estas transparencias.

Pista: recorre los números del 1 hasta n comprobando si son

primos con la función esPrimo().

Tenéis el listado de los números primos del 1 al 100 en la

siguiente transparencia.

ALBERT BASSONS 57
Ejercicios

ALBERT BASSONS 58
 Ejercicios
8. Queremos un programa que nos calcule la impedancia total (Z)
de un circuito RLC serie. El usuario introducirá el valor de la
resistencia (R), de la inductancia de la bobina (L), de la
capacidad del condensador (C) y la frecuencia de entrada (f).

Z = R 2 + ( Xl − Xc) 2
• La impedancia total del circuito se calcula como :
Xc = 1
• Xc (reactancia capacitiva) se calcula así: 2* π * f *C

• Xl (reactancia inductiva) se calcula: Xl = 2 * π * f * L

ALBERT BASSONS 59
Ejercicios
9. Implementa un juego de piedra, papel, tijera.

• El jugador puede elegir qué quiere tirar haciendo clic sobre la

imagen correspondiente.
• La CPU elije al azar.
• Se cambian las imágenes de la interfaz gráfica en función de
las opciones seleccionadas.
• Se evalúa si ganas, pierdes o empatas y se muestra el
resultado.
• Se acumula y muestra el número de victorias y derrotas del
jugador.
• Puedes darle un mejor aspecto a la aplicación usando CSS.

Sigue en la siguiente transparencia 

ALBERT BASSONS 60
Ejercicios

#imgJugador #imgCPU

#resultado

#partidas
#ganadas
#perdidas
#empatadas
onclick
tirada(‘piedra’); Sigue en la siguiente transparencia 
ALBERT BASSONS 61
Ejercicios
function tirada(tiradaJugador);

Sigue en la siguiente transparencia 

ALBERT BASSONS 62
Ejercicios

• Si alguien lo desea, puede

implementar la variante de
juego mostrada en la serie
The Big Bang Theory: piedra,
papel, tijera, lagarto, Spock.

• Solamente tendrá que

implementar las condiciones
adicionales.

ALBERT BASSONS 63