Claves del uso de las funciones: reutilización y encapsulado del código. En JavaScript, una función es ejecutada cuando algo la invoca.
Se define una función con la palabra clave function, seguida del nombre de la función y paréntesis:
function nombreFuncion(parametro1, parametro2) {
;
return ;
}
Las reglas para nombrar las funciones son las mismas que para las variables.
Llamada a una función
nombreFuncion();
Parámetros de una función
Las funciones pueden tomar parámetros. Estos deben nombrarse en la definición de la función, separados por caomas:
nombreFuncion(parámetro1, parámetro2, …) { CódigoAEjecutar }
Uso de los parámetros dentro de la función. La función siguiente permite tomar un parámetro (‘nombre’), aunque podría tomar varios. En la llamada, la cadena «Javier» es enviada como parámetro.
// Definición de la función
function pruebas(nombre) {
alert(«Hola » + nombre);
}
// Llamada a la función. Se le pasa el parámetro ‘Javier’. Se mostrará en pantalla ‘Hola Javier’.
pruebas(«Javier»);
Llama a la función con los argumentos en el mismo orden en el que se definió la función.
Si al llamara una función se omiten agumentos/parámetros, los valores omitidos son tomados como undefined.
Declaración return
De forma opcional, una función puede tener una declaración ‘return’, la cual devuelve un valor al sitio que la llamó. La función se termina en ese momento si encuentra una sentencia return.
function multiplicacion(a,b) {
return a * b;
}
var x = multiplicacion(2,8);
// x tomará el valor 16, ya que multimplicacion() le devuelve el resultado de la a * b = 2 * 8.
Funciones integradas
Ventanas emergentes
Ventana de alerta alert(). El usuario solo podrá continuar navegando al pulsar sobre el botón ‘OK’, ‘Aceptar’, …
alert(«¡Suscríbete a nuestro boletín!\nNo enviamos spam»);
donde: \n es un salto de linea.
Ventana de solicitud prompt(). Se muestra un campo de texto. Usualmente usada para que el usuario introduzca un valor antes de entrar en la página.
var usuario = prompt(«Introduzca su nombre»);
alert(usuario);
Ventana de confirmación confirm(). Ejemplo:
var resultado = confirm(«Realmente quiere abandonar esta página?»);
if(resultado==true) {
alert(«Gracias por su visita»);
}
else {
alert(«Gracias por quedarse con nosotros»);
}
La variable ‘resultado’ contendrá verdadero o falso dependiendo de si el usuario pulsa ‘Aceptar’ o ‘Cancelar’ en la ventana emergente.
Salida de texto/HTML en el navegador
document.write(«texto-o-HTML-de-salida»);
alert(«texto»);
Cambiar el contenido HTML
getElementById() Obtiene el elemento con la ID indicada en el argumento
Obiene el elemento con id=»demo», i sustituye el contenido del elemento por «Hola javaScript»:
document.getElementById(«demo»).innerHTML = «Hola JavaScript»;
Cambiar atributos HTML
Cambia el atributo src de una imagen:
Cambiar los estilos CSS
document.getElementById(«demo»).style.fontSize = «25px»;
Ocultar/mostrar elementos HTML
document.getElementById(«demo»).style.display = «none»;
document.getElementById(«demo»).style.display = «block»;