På interrail med variabler (JavaScript)

Variabler er et af de vigtigste og mest grundlæggende elementer i JavaScript – og i andre programmeringssprog! Derfor er det vigtigt at have styr på, hvad det er. Og hvordan kan en interrail-tur så forklare det?

Noget af det bedste jeg ved, er ferier med rygsæk på ryggen – en rejse fra sted til sted. For eksempel en interrailtur ned igennem Europa, hvor man kan springe af toget i Hamborg, Paris, Barcelona, Rom og Athen, slentre rundt, tage et par overnatninger og hoppe tilbage på toget igen.

Da jeg læste om variabler i JavaScript, så var det mine interrail-ture, jeg kom til at tænke på – og interrail-turene hjalp mig til at forstå hvad de dér variabler er for noget. Nu skal du høre:

Foto: Jack Anstey, Unsplash

En variabel er en beholder

Først lige den lidt abstrakte version: En variabel er en beholder, der kan være noget i. Det indhold har man samlet i beholderen, fordi man skal bruge det mange gange i sin kode. Det smarte er nemlig, at man i stedet for at skrive alt indholdet, hver gang man skal bruge det, så kan man nøjes med at skrive navnet på beholderen.

Variabel som rygsæk

Som sagt virkede billede på interrail-rejsen ret godt for mig i forhold til at forså, hvad det går ud på.
Forestil dig, at en variabel er en stor rygsæk, som du har pakket til at tage sydpå i Europa.

Rygsækken/variablen indeholder alt det grej, du skal bruge på din interrail-tur: Tøj, bøger, sovepose, pas og så videre. Så kan man sige, at mens variablen er rygsækken, så er tøjet, bøgerne, soveposen og passet variablens indhold.

Når du kommer hjem igen og tager på din næste ferie med din rygsæk, så kan det være, at du skal op til Nordnorge. Og her vil du pakke noget helt andet indhold i den, for eksempel tophue, uldundertøj og en flaske brændevin. På samme måde kan variabler skrifte indhold.

Sådan skriver du en variabel

Når man skriver en variabel i Javascript, så bruger man betegnelsen ”var”.
Det er meget enkelt at lave en variabel. I din editor skriver du simpelthen:

Så har du oprettet variablen og givet den et navn. Den variabel kan du bruge i al den kode, som du skriver til din hjemmeside. Når du skal udvikle en anden hjemmeside, så skal du oprette nye variabler til den.

 

Variabler bruges igen og igen

Når man er på interrail-tur, så har man alt sit grej samlet i rygsækken, så man hurtigt finde det frem, hver gang man kommer til en ny destination.

På samme måde fungerer det med variablen: Man laver en variabel, fordi man har noget indhold, som man skal bruge mange gange i sin kode. Indholdet kalder man også for variablens værdi. Den værdi skriver man sådan her i sin editor:

Nu har du oprettet en variabel, der hedder ”rygsæk”, og som har indholdet: Tøj, bøger, sovepose, pas.

Lad os prøve at lave flere variabler!

Når en variabel har flere ord i sit navn

Når du skriver din kode, så vil du tit have gang i flere variabler. Sådan vil det især være, hvis du arbejder på en større hjemmeside.

Så lad os lave nogle flere variabler og bruge billedet fra interrail-turen: Lad os for eksempel sige, at du har købt så mange souvenirs på din rejse, at du ikke længere kan have dem alle sammen i din rygsæk, da du kommer til Rom. Derfor køber du en ekstra taske.

Den ekstrataske er pink, og vi kan derfor kalde variablen for ”pink taske”:

Som du kan se, skrev jeg ”pink taske” i et ord, fordi der ikke må være mellemrum i variablens navn. Man kunne lave en underscore imellem ”pink” og ”taske”. Men den mest almindelige måde at sætte to ord sammen på, når man skriver variabler, er at skrive det første med småt og det næste ord med stort. Præcis som jeg har gjort. Det kaldes også for Camel case.

Indholdet af denne variabel/pink taske er alle dine souvenirs, som du nu har fået plads til:

Endnu flere variabler

Lad os lave en variabel til. Den variabel kan være en sms, som du sender hjem til dine forældre eller din kæreste om, at du skal bruge flere penge:

Og indholdet af den er:

Tom beholder

Som du kan se, så er en variabel en tom beholder, som du selv kan give navn og indhold.
Navnet på variablen kan både bestå af tal og bogstaver og underscores (_). Dog skal navnet enten starte med et bogstav eller en underscore.

En variabel kan kun indeholde 1 værdi ad gangen, og det kan være af en hvilken som helst type data: Både ord, tal og så videre. 1 værdi kan for eksempel være alt indholdet i din rygsæk (tøj, bøger, sovepose, pas).

Husk To vigtige ting, når du navngiver variabler

Variabler er nogle følsomme størrelser: Når du har givet din variabel et navn, så skal du skrive det på præcis samme måde hver eneste gang, du bruger det. Hvis du for eksempel har givet din variabel navnet ”rygsæk” med små bogstaver, så kan du ikke et sted i din kode pludselig skrive det med stort begyndelsesbogstav. Altså: Du skal være konsekvent.

Når du navngiver din variabel er der NÆSTEN frit slag. For du kan ikke give den et navn, der står på listen over JavaScripts reserverede ord.

Listen finder du her

(Der er ikke så mange, så det burde være let at komme udenom dem).

Når browseren skal skrive dine variabler

Det er ikke nok bare at navngive din variabel og at specificere dens indhold. Du skal også fortælle din browser, at den skal skrive indholdet af variablen, så det kommer frem på din hjemmeside. Til det skal du bruge ordren:

Når du skriver sådan i din kode, så vil der komme indholdet af variablen rygsæk frem på din hjemmeside:

Tøj, bøger, sovepose, pas

Og du skriver på præcis samme måde med dine andre variabler

 

Hvad kommer frem på din skærm nu?