Funciones

Son bloques de código reutilizables.

¿qué es una función?

Función que no devuelve nada, sin parámetros

<script>
	function saludar(){
		alert("Buenas tardes!");
	}

	saludar();
</script>

Snippet para crear funciones en Sublime Text: fun

Función que no devuelve nada, con parámetros

<script>

	function saludar(nombre){
		alert("Buenas tardes " + nombre);
	}

	saludar("Pablo");

</script>

Ejercicio "hoyQuieroComer"

Crear una función llamada "hoyQuieroComer" que recibe un parámetro “comida” que recogeremos de un prompt.

Cuando llamemos a la función se mostrará un mensaje de alerta indicándonos lo que deseamos comer.

Ejercicios funciones

Resolveremos los siguientes ejercicios definiendo una función con parámetros de entrada

  1. Crear y llamar a una función que recibe un número y calcula su cubo.
  2. Crear y llamar a una función que recibe la velocidad en Km/hora y la muestra en metros/hora.
  3. Crea y llamar a una función que recibe el ancho y el alto de un rectángulo y calcula su perímetro.

    Cuando una función recibe varios parámetros, estos irán separados por coma.

    calculaPerimetro(alto, ancho);
  4. Crear y llamar a una función que recibe la base y la altura de un triángulo y calcula su área.
    Area triángulo = base*altura/2
  5. Utilizando estas dos funciones:
    • calculaPerimetro(int radio); Perímetro de la circunferencia = 2*PI*Radio
    • calculaArea(int radio); Area de la circunferencia = PI*Radio2
    Leer por teclado el valor del radio de una circunferencia y mostrar por pantalla su perímetro y area.
  6. Repetir el ejercicio de la calculadora utilizando funciones para las operaciones aritméticas. Debemos declarar 4 funciones con dos parámetros de entrada cada una: suma(a, b), resta(a, b), multiplicacion(a, b), division(a, b).

Función que devuelve un valor

<script>
	let v1 = prompt("Dame un valor");
	let v2 = alert("Esto no devuelve nada");
	alert(v1);
	alert(v2);
</script>

Ejercicio

Hacer el juego estilo "elige tu propia aventura".

Ver ejemplo

. Tener en cuenta que para que el programa procese correctamente las respuestas "sí" o "no" introducidas por el usuario, independientemente de si utilizó acentos, mayúsculas o minúsculas, necesitaré utilizar la siguiente función:

function correct(stringToCorrect) {
    let correctedString = stringToCorrect.toUpperCase();
    correctedString = correctedString.replace(/[ÁÀÄÂ]/, "A");
    correctedString = correctedString.replace(/[ÉÈËÊ]/, "E");
    correctedString = correctedString.replace(/[ÍÌÏÎ]/, "I");
    correctedString = correctedString.replace(/[ÓÒÖÔ]/, "O");
    correctedString = correctedString.replace(/[ÚÙÜÛ]/, "U");
    return correctedString;
}

Para resolver este ejercicio, puesto que usaremos acentos en la introducción de texto, deberemos añadir la metaetiqueta:

<meta charset="UTF-8">

Funciones anidadas

function comer(comida){
	function adornar(comida2){
		alert("mola el " + comida2);
	};
	adornar(comida);
}

comer('helado');

Arrow Functions

Son una nueva manera de expresar las funciones de siempre, de un modo resumido y con algunas características nuevas.

nombre de la función = parámetros => cuerpo o valor devuelto

A continuación de la flecha ponemos lo que devuelve la función.

Sin parámetros

ES5 style (sin arrow function)function devolver() {
  return 10;
}

devolver();  // 10
ES6 style (con arrow function)let devolver = () => 10
// ó
let devolver = _ => 10

devolver();  // 10

Con un parámetro

ES5 style (sin arrow function)function multiplicar(param) {
  alert (param * 2);
}

multiplicar(4);  // 8
ES6 style (con arrow function)let multiplicar = param => param * 2
// ó
let multiplicar = (param) => param * 2

multiplicar(4);  // 8

Multiples parámetros

ES5 style (sin arrow function)function multiplicar(x , y) {
  return (x * y);
}

multiplicar(2, 3);  // 6
ES6 style (con arrow function)let multiplicar = (x, y) => x * y

multiplicar(2, 3);  // 6

Con cuerpo

ES5 style (sin arrow function)function multiplicar(x , y) {
  return (x * y);
}

multiplicar(2, 3);  // 6
ES6 style (con arrow function)let multiplicar = (x, y) => {return x * y}

multiplicar(2, 3);  // 6

En una arrow function, el this no cambia de contexto.

Arrow function

Paso de parámetros

let miFunction = (p1, p2) => {
	alert("hola " + p1 + " y " + p2)
}

miFunction("Juan", "Laura");
Arrow function

Paso de un parámetro

Si sólo es un parámetro podemos prescindir de los paréntesis

let miFunction = p1 => {
	alert("hola " + p1)
}

miFunction("Juan");
Arrow Function con un parámetro

Métodos para trabajo con cadenas

<script>
	let nombre = "Ramón";
	document.write("Las dos primeras letras son: "+nombre.substring(0,2));
	document.write("<br/> Las letras que van desde la tercera hasta la última posición son: "+nombre.substring(2));
	document.write("<br/> La palabra tiene "+nombre.length + " letras");
	document.write("<br/>La palabra pasada a mayúsculas es: "+nombre.toUpperCase());
	document.write("<br/>La palabra pasada a minúsculas es: "+nombre.toLowerCase());
	document.write("<br/>La posición de la última 'm' de la palabra pasada es: "+nombre.lastIndexOf("m"));
</script>

Ejercicio

Utilizando el método substring imprimir las letras que van desde la posición 3 a la 7 de la cadena "wonderful day", es decir “derf”.

icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?