Objekter

Før vi går inn på hva et objekt er, kan vi se hva slags problem objekter løser.

Sett at vi ønsker å beskrive en katt:

let catName = "Fluffy"
let catAge = 4
function meow() {
  alert("meeeooow")
}

Det er ingenting galt med denne koden, men for å holde disse elementene som én samlet enhet istedenfor tre usammenhengende elementer, kan vi bruke et objekt.

Et objekt er en kontainer som inneholder egenskaper med verdier. Vi lager et objekt ved å bruke krøllparanteser {}, som du får ved å trykke alt gr+7 og alt gr+0

let cat = {
  name: "fluffy"
}

Her er altså cat et objekt, og variabelnavnet. Name er egenskapen, og fluffy er verdien.

Vi kan legge flere egenskaper til objektet. Bruk da komma på enden av hver linje:

let cat = {
  name: "fluffy",
  age: 4,
  eyeColor: "blue"
}

Hvis vi nå ønsker å hente ut noen av disse verdiene kan vi skrive cat.[egenskap]:

alert(cat.name) // printer ut “fluffy”
alert(cat.age) // printer ut 4
alert(cat.eyeColor) // printer ut “blue”

Vi kan også ha funksjoner tilknyttet objektet:

let cat = {
  name: "fluffy",
  age: 4,
  eyeColor: "blue",
  meow() {
    alert('Meeeooow')
  }
}

Funksjonen kalles da ganske enkelt med

cat.meow()

For ordens skyld: en funksjon som er tilknyttet et objekt kalles en metode.

Vi kan ha et objekt inni et objekt, såkalt nøsting:

let cat = {
  name: "Fluffy",
  age: 4,
  eyeColor: "blue",
  foods: {
    favorite: "tuna",
    leastFavorite: "oranges"
  },
  meow() {
    alert('Meeeooow')
  }
}

Som kan hentes ut slik:

alert(cat.foods.favorite)

På samme måte som vi nå bygger egne objekter, har browseren ferdigbygde objekter klare som inneholder egenskaper og verdier som vi kan bruke og manipulere.

En av de viktigste objektene, som vi kan se på er document, som representerer websiden, som helhet. Hvis vi f.eks ønsker å vise en melding når noen trykker et bestemt sted på nettsiden, så ønsker vi å lytte til klikk et eller annet sted i dokumentet. Dokument-objektet inneholder en metode som heter addEventListener. Den tar inn to argument:

document.addEventListener(a, b)

Argument a er hva som skal lyttes til, og argument b er en funksjon som skjer hver gang a-argumentet skjer.

Vi skal lytte til at musa klikker, og kan da skrive “click” som argument a. Så kan vi lage en funksjon som utfører det vi ønsker skal skje.

// legg merke til at myAmazingFunction ikke har paranteser 
// når vi kaller den som et argument. Dette fordi vi ikke 
// ønsker å kjøre funksjonen der den kalles, men bare når det klikkes.
document.addEventListener("click", myAmazingFunction)
function myAmazingFunction() {
  alert("Hello there!")
 }