Webbteknik 2

Många upplever att programmering ser ut som rena grekiskan i början. Det är fullt av parenteser, klamrar, punkter och semikolon som verkar utplacerade lite på måfå.

Men precis som i svenska språket finns det en tydlig grammatik. Om du lär dig reglerna för vad tecknen betyder, blir koden plötsligt läsbar. Och till skillnad från “mänskliga” språk finns det inga undantag i programmering, grammatiken är i det avseendet enklare.

Här går vi igenom de vanligaste byggstenarna i JavaScripts “grammatik”.

1 - Olika typer av parenteser

Det finns tre huvudtyper av parenteser i JavaScript. Det absolut viktigaste regeln är: De kommer alltid i par. Öppnar du en parentes måste du stänga den.

Vanliga parenteser ( ... )

Används främst för två saker:

1. Gruppera uttryck & styrning: Precis som i matte. (3 + 2) * 5. Eller i if-satser: if (x > 5). Tänk på dem som att de “håller ihop” ett villkor eller ett uttryck.
2. Funktioner: Både när vi definierar dem (function hej(namn)) och när vi anropar dem (hej("kalle")) använder vi paranteser för definiera argumenten till funktionen. Att hänvisa till en funktion utan parenteser, t.ex. hej, är en referens till själva funktionen, inte att köra den.

Minnesregel: Runda parenteser används när vi gör något.

Måsvingar / Klamrar { ... }

Används för att gruppera kodblock (eller skapa objekt, vilket vi kommer att titta på i Webbteknik 3).

1. Kodblock: Allt som hör till en funktion, en if-sats eller en loop ligger inom måsvingar. Det markerar “här börjar det” och “här slutar det”.
   • En väldigt viktig effekt av detta är att det även indikerar livslängden, eller synligheten av variabler. En variabel som skapas inuti ett kodblock är bara synlig inuti den. Den “försvinner” när blocket är slut och kan inte användas utanför.

Minnesregel: Måsvingar används för att kapsla in block av kod (även data, men det skall vi som sagt titta på i Webbteknik 3).

Hakparenteser [ ... ]

Används nästan uteslutande för listor (arrays).

1. Skapa lista: let frukter = ["äpple", "banan"];
2. Hämta ur lista: let minFrukt = frukter[0];

Minnesregel: Fyrkantiga lådor för att rada upp saker (listor).

2 - Punktnotation (Dot notation)

Punkten . är kanske det vanligaste tecknet i javascript. Den betyder “tillhör” eller “inuti”.

Om vi har koden:

element.textContent

Så kan du läsa det som: “använd element, och ge mig dess textContent”. På svenska blir det som genitiv (ägandeform): Elementets textContent.

Det går att kedja ihop (chaining):

document.body.style.backgroundColor

Läs baklänges eller framlänges: “Dokumentets body’s style’s backgroundColor”. Vi dyker djupare och djupare in i objekten.

Metoder

Punktnotation används både för egenskaper (som ovan) och metoder. Det är samma princip: vi går in i objektet för att hitta det vi söker.

Skillnaden är ofta hur vi använder det vi hittade. Om vi hittade en funktion (en metod) så vill vi ofta köra den (anropa den).

console.log("Hej");

1. console: Hitta objektet console (webbläsarens inbyggda terminal-verktyg).
2. .: Titta inuti objektet.
3. log: Hitta funktionen log där inne.
4. ("Hej"): Kör funktionen med värdet “Hej”.

Utan punkten hade vi inte kommit åt log, eftersom den ligger inuti console, är en del av console.

3 - Operatorer som förvirrar

Likamedtecken

• = betyder tilldelning. “Stoppa in värdet till höger i lådan till vänster”.
  • let x = 5; (Gör så att x är 5).
• === (eller ==) betyder jämförelse. “Är de här två sakerna lika?”.
  • if (x === 5) (Är x lika med 5?).

Vanligt fel: Att använda = i en if-sats: if (x = 5). Detta kollar inte om x är 5, det gör x till 5, vilket oftast räknas som “sant”, så if-satsen körs alltid!

Övningar

1. Hitta paren

Kopiera koden nedan. Kan du se vilka parenteser som hör ihop? Försök identifiera var varje block börjar och slutar.

function kollaVärde(x) {
    if (x < 3) {
        let lista = ["A", "B", "C"];
        return lista[x];
    } else {
        return "Utanför listan";
    }
}

2. Tolka punkterna

Översätt följande kodrader till svenska meningar (som i exemplet med person.namn -> “Personens namn”).

1. bil.hastighet
2. användare.adress.gata
3. document.querySelectorAll("button")

3. Vad saknas?

Koden nedan kommer ge ett felmeddelande (SyntaxError). Vad är det som saknas?

let namn = "Kalle";
if (namn === "Kalle" {
    console.log("Hej Kalle!");
}