top of page

Like-feature 1 (betingelser)

Du skal nu lære, hvordan du kan gøre det muligt for brugeren at like et billede og unlike det igen.

​

Placer en pladsholder til et billede (Trin 1) og vælg (Trin 2), vælg Icons (Trin 3), skriv heart i søgefeltet (Trin 4), vælg ikonet heart-o (Trin 5) og angiv højden og bredden til 30 px (Trin 6).

Til syvende og sidst skal du ændre id'et "image3" til noget mere beskrivende, nemlig til "image1Like" (Trin 7), som betegner at pladsholderen skal bruges til at angive om brugeren liker image1 eller ikke. Beskrivende betegnelser bliver fra nu af reglen, når du laver nye elementer, for at du ikke så let mister overblikket over hvad der er hvad i dit voksende program.

del-1-1-insert-heart-o.PNG

 

 

2. Klik på fanen  EVENTS  for at indsætte en hændelsesprocedure og fjern  console.log . Planen er nu, når brugeren klikker, at udskifte billedet af hjertet, som er sort og hult, med et andet hjerte, som er udfyldt og rødt.  Til det formål skal vi bruge en særlig programstruktur, som kan evaluere om noget er SANDT eller FALSK og derefter gå videre og gøre det ene (skift til rødt hjerte) eller det andet (skift tilbage til sort hjerte), afhængig af situationen. Denne blokstruktur kaldes en IF-THEN-ELSE sætning og findes i kategorien  Control  i Værktøjskassen. Træk den over i hændelsesproceduren for din Like-funktion.

del-1-2-IF-blok.png

 

 

3. Ideen der skal få det til at virke er den, at hvis den såkaldt logiske operation i  Linje 14  viser,  at det er sandt, at det billede der vises i pladsholderen er det sorte, hule hjerte - så skal pladsholderens billede udskiftes til det sorte, fyldte billede ( Linje 15 ), som så skal farves rødt med en ekstra kommando ( Linje 16 ). Det skal se sådan her ud:

del-1-3-IF-THEN.png

 

 

hvor koden som helhed skal læses sådan:

 Linje 13  Den hændelse er indtruffet, at brugeren har klikket på "image1Like".

​

 Linje 14  Hvis det er sandt, at det billede der lige nu vises i "image1Like" er "icon://fa-heart-o".

 

                Så udføres linje 15 og 16:

​

 Linje 15 Skift det billede der vises i "image1Like" til billedet "icon://fa-heart"

 Linje 16  Skift egenskaben icon-color i "image1Like" til "red". 

​

Resten af blokken vender vi tilbage til om lidt, efter at du har kodet ovenstående, som du bliver guidet igennem her.

4. Indsæt denne blok fra kategorien  Math . Den kaldes en lighedsoperator og bruges til at evaluere om det der står på hver side af dobbeltlighedstegnet er lig med hinanden. Det gælder ikke kun tal, men også tekster (filnavne) som i dette eksempel. Resultatet af det der står i parentesen i  Linje 14  er derfor SANDT, hvis teksterne er helt ens, ellers er resultatet FALSK.

del-1-4-IF-equality.png

 

 

5. Nu skal du indsætte de to tekster du vil sammenligne i udtrykket i parentesen , for at finde ud af om udtrykket er SANDT. Den ene tekst er filnavnet på det oprindelige billede: "icon://fa-heart-o" som betyder at billedet ikke er liket.

del-1-4-IF-filename.png

 

 

6. Teksten på højresiden af  = =  hentes med kommandoen  getImageURL  og indeholder adresse og filnavn for det billede der aktuelt vises i pladsholderen "image1Like" som skal  sammenlignes med "icon://fa-heart-o" på venstresiden.

del-1-5-IF-getImageUrl.PNG

 

 

7. Nu indsætter du de kommandoer der skal udføres fra  Linje 15 , hvis det er SANDT at de to tekster i  Linje 14  er lig med hinanden. Det gøres med den modsatrettede kommando af  getImageURL , nemlig  setImageURL  som angiver den aktuelle billedfil til en ny, altså udskifter den der er der i forvejen. Den nye billedfil hedder "icon://fa-heart".

del-1-6-setImageUrl.PNG

 

 

8. Næste trin er at omfarve det nye billede fra sort til rødt. Det gøres med kommandoen  setProperty , som har tre dropdownlister, mens setImageURL  kun havde to. Det skyldes, at man i den midterste dropdownliste kan vælge mellem alle de egenskaber man kan styre for det elementID man angiver i den første dropdownliste. I den sidste dropdownliste angiver du endelig værdien, her "red", af den egenskab du gerne vil styre, som er "icon-color". Bemærk at kommandoen skal være en ny  Linje 16  der kommer inden  } else {  så den bliver udført i samme sekvens som  Linje 15 . Test at det virker inden du går videre.

del-1-7-setProperty.PNG

 

 

9. Nu virker din Like-funktion den ene vej, altså når brugeren vil like det billede hjertet står ved. For at det kommer til at virke den anden vej også, hvis brugeren vil unlike billedet igen, skal du angive kommandoer der bringer hjerte-ikonet tilbage i samme tilstand som det havde oprindelig. Det gør du ved at indsætte kommandoerne efter  } else {  delen af  if-blokken  , altså fra  Linje 18  , så de bliver udført, når betingelsen i  Linje 14  er FALSK, fordi billedet allerede er liket. 

Test at det virker.

del-1-8-false.PNG

Nu kan brugeren af din prototype like og unlike et billede. Typisk vil den funktion skulle gentages mange gange i forbindelse med mange billeder. Løsningen på den udfordring er at bruge funktioner, som du vil lære om i vejledningen Like feature 2.

bottom of page