JavaScript-skolan Variabler

1. Inledning

I de exempel har tittat på hittills har scripten varit okomplicerade och förhoppningsvis enkla att förstå. Nu är det därför dags att öka svårighetsgraden något.

På de följande sidorna kommer jag att ta upp olika delar av JavaScript-språket. Här skall jag visa hur man arbetar med värden i variabler.

2. Vad är en variabel?

Om vi inte hade variabler i svenska språket skulle vi ha väldigt svårt att prata om sådant vi inte direkt kan peka på. Om jag skriver:

"Någon kommer att läsa det här"

så är "någon" en variabel. Varför då? Jo, jag pekar inte ut någon speciell individ utan säger bara att det finns en tänkt mängd av individer och att en i den mängden kommer att läsa det jag skrivit.

I matematiken används variabler för att ange att det finns "någon" i en tänkt mängd. Om vi skriver:

3x + 2 = 8

så har vi angett en variabel "x", som multiplicerat med 3 och adderat med 2 blir summan 8.

Variabler används för att ange en plats, som i sin tur kan ges olika värden. I ekvationen kan "x" bli olika tal, beroende på de övriga siffror vi skriver in. I satsen "Någon kommer att läsa det här" kan "någon" vara Peter, Kalle eller Stina.

I JavaScript används variabler på motsvarande sätt. De skrivs så här:

<script language="JavaScript">
<!--
var Mitt_namn;
-->
</script>

Variabeln anges med var och variabelnamnet är Mitt_namn. Med koden talar man således om att här finns en variabel som heter Mitt_namn.

Variabelnamnet får innehålla stora och små bokstäver, liksom siffror, men första tecknet i namnet får inte vara en siffra. Som vanligt gäller också att man inte får använda mellanslag eller andra konstiga tecken.

Det finns dessutom ett knappt hundratal reserverade ord, som inte heller får användas för variabelnamn. Sådana ord är t.ex false, true, delete, return, public, import, function, osv. Genom att använda egna och gärna sammansatta ord i namnen undviker man att få med ett "förbjudet" namn av misstag.

3. Deklarera ett värde

I exemplet i förra avsnittet talade vi om för webbläsaren att scriptet innehåller en variabel med namnet "Mitt_namn". Men vi har därmed inte sagt vilket värde variabeln har.

För att tilldela ett värde till en variabel kan man göra på två sätt. Det första ser ut så här:

<script language="JavaScript">
<!--
var Mitt_namn = "Mitt namn är Jonas";
-->
</script>

och det andra ser ut så här:

<script language="JavaScript">
<!--
var Mitt_namn;
Mitt_namn = "Mitt namn är Jonas";
-->
</script>

Likamedtecknet kallas här för operator och används för att skapa ett sammansatt uttryck.

Man kan även ange flera variabler i samma script:

<script language="JavaScript">
<!--
var Mitt_fornamn = "Jonas";
var Mitt_efternamn = "Ahlberg";
-->
</script>

Man kan även skriva dem på samma rad. Enda skillnaden är då att uttrycken delas upp i två med kommatecken:

<script language="JavaScript">
<!--
var Mitt_fornamn = "Jonas", var Mitt_efternamn = "Ahlberg";
-->
</script>

4. Evalvera en variabel

När man evalverar en variabel innebär det att man räknar om dess värde. Evalvering skall därför inte förväxlas med evaluering, som är något annat (nämligen att bedöma värdet av något).

Varför vill man räkna om ett värde? Jo, därför att så fort man angett ett värde till en variabel så har den det värdet i fortsättningen. För att evalvera ett värde skriver man:

<script language="JavaScript">
<!--
var Mitt_fornamn = "Jonas";
var Mitt_efternamn = "Ahlberg";
var Mitt_namn = Mitt_fornamn + Mitt_efternamn;
-->
</script>

Här har jag angett att den sista variabeln är de andra två. Plustecknet används som operator.

Det går också att skriva på följande sätt. Om jag spelat golf och har 28 i handikapp och vill räkna ut mitt resultat efter en runda:

<script language="JavaScript">
<!--
var Mitt_score = 30;
var Mitt_resultat = Mitt_score - 28;
-->
</script>

5. Skapa script med variabler

Nu har vi tittat på de regler som finns för variabler och värden. Här visar jag nu några olika sätt att skapa scripts med variabler och olika värden:

Exempel 1

<script language="JavaScript">
<!--
var Meddelande;
Meddelande = "Detta är ett script med en variabel!";
alert(Meddelande);
-->
</script>

Titta på exemplet i praktiken >

Exempel 2

<script language="JavaScript">
<!--
var Meddelande_1;
Meddelande_1 = "Meddelande nummer 1";
Meddelande_2 = "Meddelande nummer 2";
alert(Meddelande_1);
alert(Meddelande_2);
-->
</script>

Titta på exemplet i praktiken >

Detta var två enkla exempel. Nu skall vi göra något som är lite mer avancerat. Jag vill nu skapa en prompt-ruta där besökaren uppmanas att skriva in sin ålder.

Därefter använder jag en variabel som tilldelas det värde som skrivits in i prompt-fönstret. Klickar man på Avbryt i stället för att skriva in sin ålder saknas ett värde och variabeln tilldelas då värdet "null":

Exempel 3

<script language="JavaScript">
<!--
var Din_alder = prompt("Hur gammal är du?");
prompt("Hur gammal är du?");
alert(Din_alder);
-->
</script>

Titta på exemplet i praktiken >

Obs!
I vissa webbläsare skapas två prompt-rutor som frågar samma sak. Det beror på att webbläsarna tror att

var Din_alder = prompt("Hur gammal är du?");

uppmanar till att öppna ett prompt-fönster, vilket sedan upprepas med nästa rad i scriptet. Man skulle kunna komma runt detta genom att utesluta en rad i scriptet. Resultatet blir då följande:

<script language="JavaScript">
<!--
var Din_alder = prompt("Hur gammal är du?");
alert(Din_alder);
-->
</script>

Titta på det nya exemplet >

Man kan även ändra variabelvärdet efter hand. Det gamla värdet raderas då:

Exempel 4

<script language="JavaScript">
<!--
var Din_alder = prompt("Hur gammal är du?");
prompt("Hur gammal är du?");
alert(Din_alder);
prompt("Hur gammal är du nästa år?", "Skriv din ålder här");
var Din_alder = prompt("Hur gammal är du nästa år?", "Skriv din nya ålder här");
alert(Din_alder);
-->
</script>

Titta på exemplet i praktiken >

Även här öppnas två fönster, vilket vi kan strunta i så länge.

6. Övningar

Övning 1
Vilka av följande uttryck innehåller en variabel?

a) Mattias är bäst på fotboll
b) Alla människor har rätt till ett värdigt slut
c) Det finns mycket segregation i Sverige
d) Varför gjorde ingen något?
e) Ikväll skall vi på fest hos Håkan och Eva!
f) Vem kan segla förutan vind?
g) Känn ingen sorg för mig Göteborg
h) Att ha eller inte ha, det är frågan
i) Sören letar efter den rätta
j) Det bor inga människor på Mars

Facit >

Övning 2
Skapa en sats i JavaScript som uttrycker variabeln "Meddelande". Ge variabeln värdet "Detta är ett meddelande!".

Facit >

Övning 3
Skapa ett script med en variabel med valfritt namn som får värdet 3. Skapa sedan en ny variabel och tilldela den värdet 1. Gör sedan en tredje variabel som utgörs av den första variabeln minus den andra.

Facit >

Övning 4
Utgår ifrån koden i förra övningen. Skapa sedan ett alert-fönster som öppnas och visar vart och ett av de tre värdena!

Facit >

Övning 5
Vi tänker oss nu att du skall göra ett script som skall visa vilket resultat Jan-Erik fått på dagens golfrunda.

Jan-Erik har 14 i handikapp. Detta innebär att han normalt går på banans idealresultat, i det här fallet 60 slag, samt ytterligare 14. Idag hade han emellertid en dålig dag och gick runt på hela 78 slag.

Du skall nu skapa ett script som dels låter honom skriva in sitt score i en prompt-ruta och sedan visar, med en alert-ruta, hur många slag sämre än handikappet det var.

Facit >