JavaScript: Funcions
En aquest article de JavaScript s'aborden les funcions.
Contingut
Declaració de funcions
La sintaxi per crear/declarar una funció és:
function nom ([arguments]){
...
[return objecte;]
}
Un exemple:
<script language=”javascript”>
function canviaColor ( ) {
document.bgColor=”red”; // Cos de la funció
}
</script>
És molt recomanable declarar les funcions a l'inici de l'etiqueta <head>. D'aquesta manera, evitarem l'error de cridar una funció que no hagi estat encara declarada. Quan el navegador troba una funció la carrega a memòria però no l'executa. Si volem executar-la l'haurem de cridar/invocar des de qualsevol lloc del codi JavaScript (incloent qualsevol part adient del document):
<html>
<head>
<title>Pàgina amb JavaScript</title>
<script language=”javascript”>
function canviaColor ( ) {
document.bgColor=”red”; // Cos de la funció
}
</script>
</head>
<body>
<input type=”button” value=”Pàgina vermella” onClick=”canviaColor();” />
</body>
</html>
Pas d'arguments
Si al nostre document tenim diverses funcions amb el mateix codi, però amb valors diferents, sabem que ens trobem davant d'un programa "poc eficient". La solució consisteix a declarar una única funció, que rebi un o més arguments. Exemples:
<html>
<head>
<meta charset=UTF-8" />
<title></title>
<script type="text/javascript">
function canviaColor(colorText,colorFons){
document.fgColor=colorText;
document.bgColor=colorFons;
}
</script>
</head>
<body>
<h2>Text per a proves</h2>
<button onClick="canviaColor('#FF0000','#00FF00');">Text vermell sobre fons verd</button>
<button onClick="canviaColor('#0000FF','#FFFFFF');">Text blau sobre fons blanc</button>
<button onClick="canviaColor('#FF00FF','#000000');">Text violeta sobre fons negre</button>
</body>
</html>
- Els parèntesi són obligatoris encara que la funció no rebi cap argument (tant al declarar la funció com al invocar-la).
- Poden haver-hi zero, un o més arguments, separats per comes.
- Les variables colorText i colorFons no s'han de declarar prèviament a la funció. Al declarar-les com a arguments de la funció ja queden automàticament declarades localment.
Variables públiques i privades
Hi ha dos tipus de variables:
- Variables privades o locals: solament són visibles des de dins de la funció on han estat creades.
- Variables globals o públiques: són visibles des de qualsevol part del codi.
<html>
<head>
<title>Variables públiques i privades</title>
<script type="text/javascript">
function variables(){
var dada=10;
document.write("La dada val " + dada + "<br />");
}
variables();
document.write("La dada val " + dada); //La variable dada és privada i no és visible des d'aquí
</script>
</head>
<body></body>
</html>
Al següent exemple, ¿què succeirà amb la variable valor després de cridar a la funció doblar()?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Vaiables públiques i privades</title>
<script type="text/javascript">
function doblar(valor){
valor *= 2;
document.write("El doble del valor indicat és " + valor + "<br />");
}
var valor=10;
doblar(valor);
document.write("La variable valor continúa valent " + valor);
</script>
</head>
<body> </body>
</html>
Quan dins d'una funció declarem una variable sense anteposar-li la paraula var, aquesta es converteix en una variable global o pública i deixa de ser privada.
Imbricació de funcions
Tot i que no és una estructura molt freqüent, és possible incloure unes funcions dins d'altres. Exemple:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript">
function externa ( ) {
document.write("Aquesta és la funció externa <br />");
function interna ( ) {
document.write("Aquesta és la funció interna");
}
interna();
}
externa();
externa().interna();
</script>
</head>
<body></body>
</html>
Fixeu-vos amb les crides.
- Amb externa();: cridem a la funció externa, que ens mostra el missatge i després, al seu interior, crida a la seva funció interna.
- Amb externa().interna();: cridem a la funció interna, que executa el codi global de la funció externa (també mostra el missatge) i després executa la part exclusica de la seva funció interna.
Retorn des d'una funció
Una funció pot retornar un o més resultats mitjançant la sentència return:
<html>
<head>
<script language=”javascript”>
function duplicar(dada){
dada *= 2;
return dada;
}
var valor=10, doble;
doble=duplicar(valor);
document.write (“El valor és ” + valor);
document.write (“El doble del valor és ” + doble);
</script>
</head>
<body></body>
</html>
Una funció pot retornar QUALSEVOL cosa, variables, cadenes, objectes...
Advertiu que el retorn és opcional, per tant podem fer funcions que no retornen res, que vindrien a ser com procediments des del abstracte punt de l'algorísmica.
Si una funció retorna alguna cosa, aquesta s'haurà d'assignar a alguna variable/objecte d'aquell tipus, com a l'exemple superior:
doble=duplicar(valor);
Si no retorna res la funció, podem cridar-la d'aquesta forma:
saluda(horaDelDia);
