Webteknologi - Opgaver modul 3

Kom i gang med skabelonen fra GitHub

I disse opgave skal du tage skabelonen som udleveres og selv tilføje noget nyt JavaScript i html-dokumentet.

Skabelonen finder du ved at bruge git clone. Herunder skal <repo> erstattes af den rigtige URL som du kan finder under “Materialer” på Canvas.

git clone <repo>

Herefter får du en folder det sted du står i terminalen som indeholder skabelonen.

Jeg vil anbefale, at du kopiere skabelonen ind i sin egen mappe for hver opgave du løser, så du altid har en “ren” skabelon af kopiere fra. Hvis du ændrer i selve skabelonen, får du problemer med at hente nye kodeeksempler fra GitHub senere.

Når du har lavet en kopi af skabelon-mappen, kan du bruge live-server fra sidste modul i mappen, så du nemt kan se de ændringer du laver.

Opgave 1 - Hello, World

Til en start skal du blot åbne index.html i din mappe, og indføje følgende stykke kode i <script>-tagget:

console.log("Hello, world!");

Herefter skal du åbne siden i Chrome, åbne Chrome Developer Tools, finde “Console”, og se at teksten fra dine console.log udskrives i konsollen når siden åbnes.

Hvis det virker, så er du klar til næste opgave!

Opgave 2 - Simple regnestykker

Du skal lige have noget grundlæggende træning i JavaScript inden vi begynder at tegne. Skriv kode svarene til de enkelte skridt herunder og test om det virker.

Gør følgende:

1. Lav en variabel der hedder a og giv den værdien 42.
2. Lav en variabel der hedder b og giv den værdien 9000.
3. Lav en console.log hvor du udskriver a + b - altså hvor de to variabler er lagt sammen.
4. Tjek i konsollen at det korrekte tal udskrives når siden vises.
5. Lav en const der hedder pi og tildel tallet pi (du vælger selv antallet af decimaler du vil have med).
6. Lav en console.log hvor du udskriver pi ganget med 42.
7. Tjek igen i konsollen at det udskrives rigtigt.
8. Lav nu en variabel der hedder velkomst og skriv en hilsen i den. Udskriv igen med console.log.
9. Lav en variabel der indeholder dit navn.
10. Udskriv med console.log de to sidste variabler (hilsen og navn) lagt sammen med +.

Nu må du gå videre til næste opgave.

Opgave 3 - Tegn en smiley med JavaScript

I skabelonen er der stillet en lille håndfuld JavaScript-funktioner til rådighed. Du kan ikke se dem i HTML-dokumentet, men du kan bruge dem under script-tagget. Funktionerne hedder:

• drawBox(x, y, width, height, color)
• drawCircle(cx, cy, radius, color)
• drawLine(x1, y1, x2, y2, stroke)

Din opgave er at bruge funktionerne på en sådan måde, så der vises en smiley i SVG-billedet når siden åbner i en browser. Tag udgangspunkt i den smiley du lavede til lektion 2, men udvid den så den også har en lille hat på.

Hvis koden driller og du ikke får et billede, så husk at kigge i browser-konsollen (under Developer Tools) for at se om der er nogle vigtige JavaScript-fejl du skal forholde dig til.

Opgave 4 - Indfør variabler

Det er tid til at introducerer variabler i din tegne-kode. Du skal introducere to variabler der hedder offsetX og offsetY (offset = forskydning), og de skal begge tildeles værdien 0. Det kan du gøre sådan her:

let offsetX = 0;
let offsetY = 0;

Alle steder i din kode hvor du anvender x, skal du nu i stedet for anvende offsetX + x. Dvs. at offsetX nu bliver lagt til alle x’er. Og du skal gøre det samme for offsetY og y.

Det betyder at alle dine x- og y-beregninger kan forskubbes blot ved at justere på de to nye variabler.

Brug live-server i mens du ændrer på offsetX og offsetY og se hvordan dit billede skubbes rundt på siden når du gemmer.

Ekstra udfordring: Kan man indføre en variabel der kan bruges til at gøre billedet større eller mindre?

Opgave 5 - Genbrug din kode

Du kan nu skubbe hele billedet bare ved at ændre på to værdier. Det er derfor nu meget nemmere at kopiere billedet, så du har flere kopier i samme ramme.

Kopier din kode, så koden nu står fire gange i dit <script>-tag, og du får tegnet smileyen fire gange. De to offset-variabler ændres imellem hver tegning, men uden at lave “nye” variabler.

Opgave 6 - “for loops”

Med udgangspunkt i eksemplerne fra dagens præsentation, skriv et par simple for loops som gør følgende:

1. Et for loop der udskriver “Hello, world!” 20 gange i browser-konsollen.
2. Et for loop der udskriver alle tal fra 0 til 100 i browser-konsollen.
3. Et for loop der lægger alle tal sammen fra 5 til 15. Brug herefter console.log til at udskrive summen.

Opgave 7 - “for loops”

Ved hjælp af “for loops” skal du omskrive din løsning i opgave 4, så koden ikke længere gentages. Koden skal gøre præcist det samme som før, men du skal nu anvende et “for loop” til at lave selve gentagelsen med i stedet for at have den samme kode til at stå fire gange.

Opgave 8 - Afsluttende udfordringer (svær)

Prøv at tegne de følgende billeder med JavaScript-kode ved at anvende alt hvad du har lært indtil nu.

Hint: Man kan godt have et loop inde i et andet loop.