JavaScript

Variabler

För att kunna mellanlagra vissa data som ska användas flera gånger finns det i JavaScript något som kallas variabler. En variabel är i stort sett en behållare med namn där ett visst värde kan lagras. Variabler kan lagra allt från enkla heltal till komplicerade strukturer som t ex listor. En variabel skapas när den skapas i koden första gången och brukar då tilldelas ett värde. En tilldelning till variabeln med namn tal kan se ut enligt följande:

Innan namnet på variabeln skrivs kan det också stå att det är en variabel som skapas och detta görs genom ordet var. Liksom när det gäller semikolon i slutet på satser går det att utelämna var. När man senare i koden använder variabeln tal får man fram värdet. T ex :

var tal = 15;

skrivUt(tal);

Funktionen får nu värdet på tal som indata och skriver alltså ut 15 (om nu funktionen skrivUt har denna uppgift). Namnet variabel pekar på att en variabel förutom att lagra ett värde kan variera. Värdet är utbytbart och kan vara olika i olika delar av koden. Om vi först tilldelar tal 15 och skickar det till skrivUt kommer 15 att skrivas ut. Sen gör vi ytterligare en tilldelning till tal och sätter värdet till 20 samt skickar variabelns värde till skrivUt igen. Samma variabel skickas alltså två gånger till skrivUt, men den andra gången skrivs dess nya värde ut, alltså 20.

Det finns ett ganska enkelt sätt att testa sin JavaScript-kod utan att behöva skapa ett nytt dokument. För att testa utskriften till skärmen (document.write() gör följande saker:

• Öppna ett nytt fönster i din webbläsare (starta webbläsaren)
• Rensa adressfältet i webbläsaren
• Skriv in javascript:
• Skriv in document.write('Det här är skärmen!'); efter kolonet
• Tryck Enter

Det går att göra mer avancerade uttyck. För att skriva in fler instruktioner sätter man semikolon mellan dessa.

Tänk er lilla Lisa på 6 år som går omkring med sin äppelkorg. Vi låter Lisas korg (en behållare) vara en variabel och innehållet i variabeln är antalet äpplen som Lisa har i korgen. Hon går omkring och plockar äpplen och variabeln ökar då. Sen ger hon bort äpplen till sina kompisar och variabeln minskar igen. När Lisa har gått runt ett tag får hon slut på äpplen och vill hem. Men eftersom hon har gått ganska länge och är trött bestämmer hon sig för att åka buss. Hon ringer till sin mamma för att fråga vilken buss som går snabbast hem. Svaret skriver Lisa ner på en papperslapp som hon lägger i korgen. Variabeln innehåller nu namnet på en busslinje istället för antalet äpplen. Det går alltså att lagra olika saker i en variabel, precis som i en korg!

Alla variabler har något som vi kallar räckvidd eller synlighet och livslängd. Räckvidd står för var en viss variabel kan ses (kommas åt) ifrån. Inne i funktioner säger vi att variablerna är lokala, d v s de finns endast lokalt inne i funktionskroppen och syns inte för omvärlden. Det går alltså att använda variabeln tal i flera olika funktioner utan att påverka varandra. En variabel som är deklarerad utanför dina funktioner är synlig från alla funktioner. Dessa variabler kallas globala variabler i och med att de har global synlighet.

Synligheten kan man tänka på som att Lisa sätter sig på en buss, alltså ett ställe som omvärlden inte har så mycket kunskap om. När Lisa är inne i bussen är det bara de som själva är i bussen som vet hur många äpplen korgen innehåller. De kan lätt fråga Lisa hur många hon har. Men folk utanför kan inte fråga samma sak så de ser inte variabeln Korg. Samma sak gäller för en variabel som finns inne i en funktion, den saknar synlighet för saker utanför funktionen.

Livslängden är när variabeln försvinner för gott och inte längre kan hämtas från programmets minne. Alla variabler försvinner när programmet stängs ner och skapas på nytt med nya värden när programmet åter startar. De lokala variablerna försvinner direkt när funktionen är klar.

Vi ska påbörja ett exempel på variabler som handlar om Nikes leksaker. Med hjälp av två knappar ska vi kunna välja att hon äter upp en leksak eller att ge henne fler. En variabel håller reda på exakt hur många leksaker av den speciella sorten det finns. Vi startar med att skapa denna variabel.

Variabeln nrOfShoes har till att börja med värdet 10, alltså har Nike 10 skor att leka med. Sen vill vi också skriva ut på webbsidan hur många skor det finns och gör detta med en enkel kodsnutt.

Vi kan inte skriva dessa saker direkt i HTML-koden utan måste bädda in dem inom skripttaggar som säger att det är just JavaScript som kommer i koden. Det hela blir nu istället :

<script type="text/javascript">



var nrOfShoes = 10;



document.write(nrOfShoes);

</script>

Efter att ha lagt detta i en rubrik (H2) blir resultatet såhär.

Titta gärna på koden via länken här nedanför. Vi kommer senare att gå vidare med exemplet så försök att gå igenom det igen om du inte förstår det.

Självklart ska detta också synas på sidan med Nikes övriga leksaker och vi lägger JavaScript-koden för att skriva ut antalet skor under tabellen med övriga leksaker.

Vi har alltså använt oss av en variabel för att skriva ut antalet skor på webbsidan. Mer om detta senare, men först ska vi gå igenom några grundläggande saker för att kunna arbeta med bland annat variabler i JavaScript.