Kapitel 3: Objektorientering och modellering

3.1 Grundläggande objektorientering

Objektorientering (OOP) organiserar kod runt objekt som har ansvar, data och beteenden. Kärnidéerna är klasser, instanser, metoder och attribut.

Mål

• förstå klasser och instanser
• kunna beskriva ansvar och gränssnitt för ett objekt
• använda enkla exempel för att modellera en domän

Övning

Identifiera tre klasser i ett enkelt system (t.ex. quiz, användare, fråga) och beskriv deras ansvar.

3.2 Klassdiagram (UML)

Klassdiagram visar klasser, deras attribut, metoder och relationer (association, arv, beroende). UML är ett standardiserat sätt att dokumentera design.

Exempel

Rita ett klassdiagram där en `Quiz` innehåller flera `Question`-objekt och varje `Question` har text, alternativ och korrekt svar.

classDiagram
      class Course {
        +String title
        +String description
        +List~Chapter~ chapters
        +addChapter(chapter)
      }
      class Chapter {
        +String title
        +String content
        +List~Quiz~ quizzes
      }
      class Quiz {
        +String id
        +List~Question~ questions
        +checkAnswers()
      }
      class Question {
        +String prompt
        +List~String~ options
        +int correctIndex
      }
      Course "1" o-- "*" Chapter : contains
      Chapter "1" o-- "*" Quiz : contains
      Quiz "1" o-- "*" Question : contains
    

Övning

Skapa ett enkelt klassdiagram för din tidigare identifierade klasser.

3.3 Användningsfall och use-cases

Användningsfall (use cases) beskriver hur en användare interagerar med systemet. De hjälper till att fånga krav och scenarier innan detaljerad design.

Exempel

Use case: 'Ta quiz' — beskriver steg: starta quiz, välj svar, skicka in, se resultat.

Övning

Skriv ett use-case för ett scenario där en användare skapar ett nytt konto och genomför ett quiz.

3.4 Sekvensdiagram och interaktion

Sekvensdiagram visar hur objekt interagerar över tid. Det är användbart för att beskriva flödet av meddelanden mellan objekt vid t.ex. ett quiz.

Övning

Rita ett sekvensdiagram för när användaren skickar in ett quiz och systemet räknar poäng.

sequenceDiagram
      participant Student
      participant Browser
      participant Server
      Student->>Browser: öppnar kapitel
      Browser->>Server: GET /chapters/chapter-3.html
      Server-->>Browser: levererar HTML-sida
      Student->>Browser: svarar på quiz och klickar 'Skicka'
      Browser->>Browser: initializeQuizzes() validerar svar
      alt alla svar korrekta
        Browser-->>Student: Visa korrekt feedback och sammanfattning
      else några felaktiga svar
        Browser-->>Student: Visa förklaring för felaktiga frågor
      end
    

3.5 Design och överföring till kod

När modellen är klar omvandlas klassdiagram och use-cases till kod: skapa klasser, metoder och definiera ansvar. Håll designen enkel och testbar.

Övning

Implementera de viktigaste klasserna för quiz-exemplet i JavaScript och skriv korta enhetstester för centrala metoder.

Fortsätt sedan med Kap 3.8 - Generiska klasser och metoder för att se hur klasser och metoder kan göras återanvändbara för flera datatyper.

Projekt: Quizapp — Uppgift för Kapitel 3

I detta kapitel börjar ni implementera den genomgående quizappen. Nedan följer de konkreta uppgifterna som eleverna förväntas göra nu. Se även den fullständiga projektbeskrivningen: QUIZ_APP_PROJECT.md.

Mål för kapitlets projektarbete

• Implementera JavaScript-klasserna `Quiz`, `Question` och `QuizStore` enligt ert klassdiagram.
• Skriv ett enkelt UML-klassdiagram och ett sekvensdiagram för scenariot "Ta quiz" (använd Mermaid eller rita för hand och ladda upp).
• Gör en enkel implementation av `initializeQuizzes()` i JavaScript som validerar svar och visar feedback (återanvänds i kursen).
• Skriv minst två enhetstester för centrala metoder (t.ex. poängräkning och validering av svar).
• Commit och beskriv era diagram och kod i en kort teknisk rapport (README eller kort dokument).

Förslag på filer att skapa

• `quiz-project/src/quiz.js` — JavaScript-implementation av klasser
• `quiz-project/index.html` — Enkel sida som använder klasserna
• `quiz-project/css/quiz.css` — Kapitelstil för quiz
• `quiz-project/tests/quiz.test.ts` — Enhetstester

Bedömning (kapitelmoment)

Denna del bedöms främst på att klasserna finns och följer designen, UML‑diagrammet visar viktiga relationer, samt att grundläggande tester finns.

Quiz

Testa din förståelse av objektorientering och UML.