Una función es un conjunto de instrucciones que se agrupan
para realizar una tarea concreta y que se pueden reutilizar fácilmente.
Imaginemos que tenemos que calcular la suma de dos números
varias veces, ya que los números cambian cada vez, en lugar de hacer un script
por cada suma, usaremos una función, como puede ser de la siguiente manera:
function suma(numero1, numero2){
var
resultado = numero1 + numero2;
alert (“El
resultado total es: ” + resultado);
}
En este caso, a la función le llegan dos parámetros, es
decir, le llegan los números a sumar desde fuera, de manera que cada vez que se
llame a la función, se le darán dos parámetros y la función mostrará un resultado (la suma de
ambos).
Este es un ejemplo muy simple, está claro que se puede sacar
mucho más partido a las funciones, pero no sólo en javaScript, sino en
cualquier lenguaje de programación.
Un ejemplo más sería el siguiente:
function muestra(){
var
elemento = document.getElementById("adicional");
elemento.className
= "visible";
var enlace
= document.getElementById("enlace");
enlace.className
= "oculto";
}
En este ejemplo, estamos creando una función llamada muestra,
que en la variable “elemento”, va a guardar el estado del id “adicional”, para
cambiarlo a visible y viceversa con el id “enlace”.
Esto viene bien para que aparezca un texto a medias y tras
pinchar en un enlace, se muestre el texto al completo.
Aquí dejo el resto de código para que lo veáis, simplemente
comentaros, que en lugar de hacer el script en el mismo documento, por
comodidad, se ha hecho fuera y posteriormente lo llamamos desde este documento
con el atributo src.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ejercicio 12 - DOM básico y atributos
XHTML</title>
<style
type="text/css">
.oculto {
display: none; }
.visible {
display: inline; }
</style>
<script
src="ejercicio12.js">
</script>
</head>
<body>
<p
id="texto">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu,
consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc,
posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante,
ornare id, aliquam vitae, ultrices porttitor, pede. <span
id="adicional" class="oculto">Nullam sit amet nisl
elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus
ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio
urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend
vitae, venenatis ac, felis. Donec arcu. Nam sed tortor nec ipsum aliquam
ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer
lacus. Vestibulum venenatis erat eu odio. Praesent id
metus.</span></p>
<a id="enlace" href="#"
onclick="muestra(); return false;">Seguir leyendo</a>
</body>
</html>
No hay comentarios:
Publicar un comentario