 |
JavaScript-skolan
Funktioner |
 |
2. Vad är en funktion?
3. Händelsestyrda funktioner
4. Funktionsstyrda funktioner
5. Parametrar
6. Globala vs lokala variabler
7. Funktioner och arrayer
8. Övningar
Obs!
Alla exempel och facituppgifter öppnas i ett nytt fönster!
1. Inledning
Den här sidan går igenom grunderna i att skapa funktioner. På efterföljande sidor kommer du att se fler exempel på hur man kan skriva. Ett problem med funktioner för nybörjaren är att de ganska snabbt blir väldigt avancerade. Därför måste vi börja lite försiktigt.
2. Vad är en funktion?
Hittills har vi tittat på scripts som läses uppifrån och ner. Med funktioner kan man i stället skapa scripts som läses på andra sätt, där man hoppar mellan olika delar av scriptet.
En funktion definieras av en samling satser och vad de skall göra. Syntaxen ser ut så här:
function Namn ( [parameter1]...,
[parameterN]) {
satserna i funktionen
}
Det första kommandot, function, startar funktionen. Namn är här det namn man ger den. Parametrarna måste inte förekomma och jag skall utesluta dem i de första exemplen. Innanför krullparenteserna finns sedan de satser som ingår i funktionen.
Till skillnad från de övriga kommandona vi tittat på måste funktionen sedan anropas för att starta. Man kan göra detta på olika sätt och jag skall börja med att visa ett enkelt sätt, som dock sällan används:
Exempel 1
<script language="JavaScript">
<!--
MinFunktion();
function MinFunktion() {
alert("Detta är en enkel
funktion");
}
-->
</script>
Titta på exemplet i praktiken >
Här säger vi att det finns en funktion som heter MinFunktion, vars innehåll består av en sats. Funktionen anropas med MinFunktion() först i scriptet.
Man kan också anropa funktionen från ett annat ställe, som följande exempel visar:
Exempel 2
<script language="JavaScript">
<!--
function MinFunktion() {
alert("Detta är en enkel
funktion");
}
MinFunktion();
-->
</script>
Titta på exemplet i praktiken >
3. Händelsestyrda funktioner
De sätt man normalt använder sig av för att aktivera funktioner är genom händelsehanterare. Du stiftade bekantskap med dessa på sidan "Scripts i Html-dokument". Läs mer >
Här skall jag nu visa hur aktiveringen går till:
Exempel 3
<script language="JavaScript">
<!--
MinFunktion();
function MinFunktion() {
alert("Detta är en enkel
funktion");
}
-->
</script>
+
<body onLoad="MinFunktion">
Titta på exemplet i praktiken >
Som du ser aktiveras scriptet och funktionen då body-elementet läses in. Man kan självklart använda andra händelsehanterare, men det går jag inte igenom ytterligare här.
4. Funktionsstyrda funktioner
Funktioner kan även aktiveras genom andra funktioner:
Exempel 4
<script language="JavaScript">
<!--
function Meddelande1() {
alert("Detta är meddelande
1");
Meddelande2();
alert("Detta är meddelande
3");
}
function Meddelande2() {
alert("Detta är meddelande
2");
}
-->
</script>
+
onClick="Meddelande1()"
Titta på exemplet i praktiken >
Som du kanske ser aktiveras scriptet och funktionen Meddelande1 genom onClick-kommandot. Först visas då alert-rutan med "Detta är meddelande 1".
Därefter aktiveras funktionen Meddelande2 inifrån Meddelande1. Funktionen innehåller en alert-ruta, som visar texten "Detta är meddelande 2".
Först när Meddelande2 har körts så återvänder webbläsaren till den ursprungliga funktionen igen och kör då den sista raden, som visar alert-rutan med "Detta är meddelande 3".
5. Parametrar
Parametrar kan sägas vara en slags variabler. En parameter kan vara ett tal, en sträng, osv. Syntaxen har du redan sett:
function Namn ( [parameter1]...,
[parameterN]) {
satserna i funktionen
}
Följande exempel visar alltså hur man kan låta en parameter stå som platshållare för olika meddelanden inne i ett script. utan parametern hade scriptet blivit betydligt längre och varje meddelande hade då behövt ha var sin funktion:
Exempel 5
<script language="JavaScript">
<!--
function Funktion5(meddelande) {
alert(meddelande);
}
-->
</script>
+
<form>
<input type="button"
value="Skiner solen?"
onClick="Funktion5('Då
är våren snart här!')">
<input type="button"
value="Regnar det?"
onClick="Funktion5('Då
blir det snart höst...')">
</form>
Titta på exemplet i praktiken >
Observera först de enkla citationstecknen i Html-koden. De används för att inte webbläsaren skall blanda samman dem med citationstecknen för Html-attributen.
Scriptet gör alltså så att man kan lägga in flera olika meddelanden med samma funktion, tack vare parametern "meddelande".
Parametern får ett värde då funktionen körs, men till skillnad från variabler så är inte detta värde permanent. I följande exempel syns detta ännu tydligare:
Exempel 6
<script language="JavaScript">
<!--
function Funktion6(a, b, c) {
alert("Hejsan, " + a);
}
Funktion6("Mikael", "Erik",
"Patrik");
Funktion6("Erika", "Christine");
-->
</script>
Titta på exemplet i praktiken >
Funktionen har alltså tre parametrar, men bara "a" används i meddelandet. När första satsen efter funktionen läses, aktiveras funktionen och den första strängen i serien visas, dvs "Mikael". De andra parametrarna aktiveras inte och därmed inte heller de efterföljande textsträngarna.
När nästa rad i scriptet läses in, anropas funktionen och parametern a hämtas i listan med namn. Nu visas alltså "Erika", medan de övriga förblir inaktiverade. Parametern "c" blir här dessutom null eftersom det saknas ett värde eller sträng för den.
I vissa webbläsare laddas sedan funktionen ytterligare en gång, beroende på att vi inte har sagt till i scriptet att det skall sluta köra efter dessa två gånger. Men då returneras värdet "null" eller "undefied", eftersom vi inte angett något strängvärde för parametrarna. Vi skall titta på hur man startar och stannar denna process på senare sidor.
Styrkan hos parametrar är alltså stor, men samtidigt måste man ha koll på deras värden, då dessa kan förändras utan att man alltid ser det så lätt.
6. Globala vs lokala variabler
Variabler som definieras utanför funktioner, alltså sådana som vi hittills har bekantat oss med, kallas globala. Det betyder att variabelns värde är bestämt i det dokument eller det fönster webbläsarna visar.
Det innebär att det inte får finnas någon variabel med samma namn som har ett annat värde i dokumentet. Det betyder också att man kan anropa en global variabel, definierad i script A, från script B. Det ända som krävs är att variabelns räckvidd (scope) är tillräcklig, i praktiken att scripten finns i samma dokument.
Så fort ett dokument laddas om eller ersätts av ett annat, raderas alla globala variabler från minnet. Det finns tekniker för att spara ett värde, men det skall vi återkomma till längre fram.
En lokal variabel är följdaktligen en som har definierats inne i en funktion. Detta är ett mycket effektivt sätt att använda variabler på, men som nybörjare skall vi ännu inte tro att detta är lätt. Det blir nämligen ofta fel och buggar i scripten som dessutom är svåra att hitta i koden.
Här är dock ett exempel på hur man kan utnyttja globala och lokala variabler i ett script. jag har hämtat det från Danny Goodmans bok "JavaScript Bible", som kommit i flera olika utgåvor:
Exempel 7
<head>
<script
language="JavaScript">
<!--
var Husse = "John"; // global
variabel
var JohnsKatt = "Dizzy";
// global
function Funktion7() {
var JohnsKatt = "Ofelia";
// Lokalvariant av den globala
var Resultat = JohnsKatt + "
tillhör inte " + Husse +
".<br>";
document.write(Resultat)
}
-->
</script>
+
<body>
<script language="JavaScript">
Funktion7();
document.write(JohnsKatt + "
tillhör " + Husse + ".");
</script>
Titta på exemplet i praktiken >
Vad som händer är att webbläsaren tillskriver de globala variablerna värden. Därefter läser den in funktionen. Den upptäcker då att det finns en lokal variant av variabeln "JohnsKatt" och ersätter det globala värdet med detta nya, lokala värde.
Förutsättningen för att detta skall ske är dock att man använder "var", som talar om att det är en variabel. Erfarna programmerare utesluter ibland var och annat i koden för att krympa dess omfång.
Däremot har "Husse" kvar sitt globala värde genom hela scriptet. Eftersom scriptet skall skrivas ut på sidan, vilket sker genom kommandot "document.write", finns i Resultat-variabeln en Html-kod, <br>, som skapar en radbrytning.
Vad som händer när webbläsaren kommer till scriptet i body är att funktionen "Funktion7" aktiveras. Värdet till "HussesKatt" är då "Ofelia" och "Husse" har värdet "John". Det som skrivs ut är alltså:
Ofelia tillhör inte John
eftersom "document.write(Resultat)" är en del av funktionen. Nästa rad i scriptet i body är "document.write". Webbläsaren skriver då ut det värde som "HussesKatt" har, dvs "Dizzy".
Anledningen till att variabeln nu får det globala värdet är att funktionen "Funktion7" inte anropas. Därför påverkas inte värdet av det som definierats i funktionen. Webbläsaren skriver alltså:
Dizzy tillhör John
7. Funktioner och arrayer
Jag tänker nu visa ett lite mer avancerat exempel. Jag hämtar datan från de parallella arrayerna på förra sidan:
| Veckodag | Värde | KaffeAnsvarig |
| Måndag |
[0]
|
Pelle |
| Tisdag |
[1]
|
Stina |
| Onsdag |
[2]
|
Ida |
| Torsdag |
[3]
|
Kajsa |
| Fredag |
[4]
|
Lars |
| Lördag |
[5]
|
Mikael |
| Söndag |
[0]
|
Per |
Koden till exemplet (som jag hämtat från Danny Goodmans "JavaScript Bible") ser ut så här:
Exempel 8
<head>
<script language="JavaScript">
<!--
var Veckodag = new Array("Måndag",
"Tisdag", "Onsdag",
"Torsdag", "Fredag",
"Lördag", "Söndag");
var KaffeAnsvarig = new Array("Pelle",
"Stina", "Ida",
"Kajsa", "Lars",
"Mikael", "Per");
function HittaAnsvarig() {
var Dag = document.formular.textrutan.value;
for (var i = 0; i < Veckodag.length;
i++) {
if (Veckodag[i] == Dag) {
break;
}
}
alert("Ansvarig denna dag är
" + KaffeAnsvarig[i] + ".");
}
-->
</script>
+
<body>
<form name="formular"
id="formular" method="post"
action="">
<input name="textrutan"
type="text" />
<input type="submit"
value="Starta scriptet!"
onClick="HittaAnsvarig()"
/>
</form>
Titta på exemplet i praktiken >
Jag börjar med att visa hur det ser ut i min webbläsare:
Först skriver besökaren
in veckodagen. Scriptet innehåller
inga verktyg för att kontrollera
så att det som skrivs är
rättstavat, men det kan vi hoppa
över just nu.
När veckodagen är inskriven
klickar besökaren på knappen
för att starta scriptet. Du ser
i koden ovan att det finns en händelsehanterare,
onClick, som aktiverar funktionen
"HittaAnsvarig".
Webbläsaren läser scriptet
med funktionen och returnerar värdet
från arrayen med personnamn.
En lite mer noggrann titt på scriptet ger följande: Vi har två arrayer, som du stött på tidigare. Värdet som matas in i textrutan blir variabeln "Dag" i funktionen "HittaAnsvarig":
function HittaAnsvarig()
{
var Dag = document.formular.textrutan.value;
Webbläsaren hittar detta värde tack vare att sökvägen angetts. I Html-koden för formuläret ser du motsvarande namn som här angetts.
Loopen som inleds med for innebär att startvärdet blir noll:
for (var i = 0; i < Veckodag.length; i++) {
Bokstaven i har vi inte gått igenom, men den anger ett indexvärde, dvs startvärdet. Här är det alltså noll. Loopen skall sedan fortsätta så länge indexvärdet är mindre än antalet värden för arrayen Veckodag. Efter varje gång for-kommandot körs skall sedan nästa värde i arrayen kontrolleras, varför i måste öka med nästa gång for-loopen körs.
Inne i for-kommandot finns ett if-villkor:
if (Veckodag[i] == Dag)
{
break;
} // avslutar if-loopen
} // avslutar for-loopen
Detta villkor säger att om indexvärdet i arrayen Veckodag stämmer överens med Dag, alltså det som besökaren har skrivit i formuläret, så skall for-loopen fortsätta köra. Med if-villkoret stegar funktionen alltså igenom arrayen Veckodag tills dess att rätt person hittas.
När detta inträffar har if-villkoret uppfyllts och då skall loopen avbrytas. Det sker med kommandot break.
När loopen avbryts har indexvärdet bestämts och kan användas i den andra arrayen, alltså KaffeAnsvarig:
alert("Ansvarig
denna dag är " + KaffeAnsvarig[i]
+ ".");
} // Avslutar hela funktionen
Detta värde i arrayen ger alltså en viss person och visas i alert-rutan.
Detta script kan tyckas krångligt, men det är i själva verket ett ganska enkelt exempel på hur scripts kan användas tillsammans med arrayer!
8. Övningar
Fråga
1
Vad är en funktion? Varför
vill man använda sig av funktioner?
Fråga
2
Skapa en funktion som innehåller
följande sats:
alert("Detta är en funktion");
Scriptet skall aktiveras då sidan laddas i webbläsaren.
Fråga
3
Skapa en valfri funktion som aktiverar
en annan funktion! Den första
funktionen skall aktiveras då
man klickar på en bild!
Fråga
4
I avsnitt 6 ovan såg du prov
på hur man kan skapa globala
och lokala variabler. Utgår
ifrån exemplet och försök
skapa ett likadant script, men som
returnerar följande text:
Agneta är inte
gift med Lasse.
Lotta är gift med Lasse.
Fråga
5
Skapa arrayer för följande
värden. Skapa också ett
formulär med ett script som låter
besökaren skriva in planetens
namn, där en alert-ruta öppnas
och berättar vilken ordning från
solen planeten har!
| Planet | Värde | Placering |
| Merkurius |
[0]
|
1 |
| Venus |
[1]
|
2 |
| Jorden |
[2]
|
3 |
| Mars |
[3]
|
4 |
| Jupiter |
[4]
|
5 |
| Saturnus |
[5]
|
6 |
| Uranus |
[6]
|
7 |
| Pluto |
[7]
|
8 |