Lektion 22. Udvidet javaScript

Forberedelse

  • Læs/genlæs kapitel 11 om javaScript

Formål

  • Forstå javaScript som dynamisk program

Fælles gennemgang

Fra sidst

  • Hvad er javaScript
  • Hvad er et “dynamisk sprog” for ngoet
  • Vis de 2 store eksempler:
    • Følg op på afsnit 11.6 Fald-ned menu
    • Afsnit 11.7 Valutaomregner

Lektien til denne gang

  • Kik på afsnit 11.7 En valutaomregner med javaScript og se koden igennem
  • Præsenter lidt om forms, selvom det ikke står i min bog (endnu). F.eks. at formen kan sende til en fil, der så evaluerer … men det er alt sammen backend
  • Gentag debugging

Øvelser

22.1 Ændring af kode

Kopier koden nedenfor ind i et dokument i VS-Code, som du gemmer som valutaomregner.html.

  • Hvad gør HTML taggene <input>, <label> og <button>
  • Ændr i koden, så der står, at man skal indtaste prisen i dollar i stedet
  • Ændr i koden, så den kan omregne fra dollars i stedet for euro. Kursen på dollar er ca. 6,27 kroner for en dollar.
  • Vigtigt. Sæt kommentarer ind i koden som forklarer, hvad den gør. 
<!DOCTYPE html>
<html>

<head>
    <title>Valutaomregner</title>
</head>

<body>
    <h1><span class="ez-toc-section" id="Valutaomregner"></span>Valutaomregner<span class="ez-toc-section-end"></span></h1>

    <label for="belob">Indtast beløb i euro:</label>
    <input type="number" id="belob" name="fname"><br><br>
    <button onclick="myFunction()">Beregn</button><br><br>
    <label for="Omegning">Beløb i danske kroner:</label>
    <span id="result" name="result"></span><br><br>
    <script>
        function myFunction() {
            var euro = document.getElementById("belob").value;
            var result = euro * 7.5;
            document.getElementById("result").innerHTML = result;
        }
    </script>
</body>
</html>

22.2 Økonomiappen: En gennemgående opgave

Du skal nu lave en gennemgående opgave. Det vigtige er dels navigationen, dels at beregningerne virker. Design endelig løs, men designet kommer i 2. række. Du er hjerteligt velkommen til at genbruge tidligere designs.

Bemærk: Du skal lave designet til en smal skærm, dvs. mobile first. Så når du tester, skal du enten gøre browseren mindre eller have et test-mode, der viser en smal skærm.

Bemærk også: Det er en lang opgave, og det er ikke sikkert, at du når igennem det hele. Del 1, 2 og 3 skulle være til at have med at gøre, for du må copy-paste så meget , du vil.

Vigtigt: Brug semantiske tags og eksternt stylesheet!

  • Del 1: Lav et site med 3 sider. Forside, valutaomregner og skatteberegner. Designet skal være til en mobiltelefon, dvs. smalt. Spørg i forhold til fif og tips til, hvordan du nemmest kan tjekke layout til en mobil. I første runde bare sørg for, at navigationen og evt. en header-sektion er på plads på alle 3 sider + sæt en overskriftind
  • Lav en <section> i midten, hvor du bare sætter en overskrift ind og lidt tekst
  • Nederst laver du en footer med kontaktoplysninger
    • Ekstra: Sæt et font-awesome ikon med Facebook ind, og lav et link til www.facebook.com
  • Del 2: Forsiden
    • Den skal skal “bare” være pæn. Men lave et lille pænt logo i menuen, som man kan klikke på, for at komme tilbage til forsiden
  • Del 3: Side 2 skal have en valutaomregner
    • Valutaomregneren skal kunne omregne fra hhv. euro, dollars og engelske pund til DKK og omvendt.
  • Del 4: Side 3 skal have en skatteberegner
    • Du skal kunne indtaste bruttoindkomst, trækprocent og månedlig indkomst. Så skal den kunne vise nettoindkomst, faste omkostninger og disponibel indkomst. Se vedhæftede Excel ark med beregningerne. For nemheds skyld siger vi, at bundfradraget = kr. 45.000
Excelark-med-skatteberegnerDownload