Gå till innehållet

1.3 Enklare menyer och interaktivitet med JavaScript

Illustration: göra sidan mer interaktiv med JavaScript

I den här modulen lägger vi till lite enkel interaktivitet på din sida.

Vi fokuserar på:

  • en enkel meny eller navigation på sidan
  • små effekter som att visa/dölja en sektion med en knapp
  • att förstå var JavaScript-koden ligger och hur den kopplas till HTML

Målet är inte att bli JavaScript-expert, utan att se att:

“HTML är innehållet, CSS är utseendet – och JavaScript kan få saker att hända när användaren klickar.”

Smakprov – JavaScript DOM API (kortvideo)

En snabb introduktion till hur JavaScript kan styra innehållet på en webbsida (DOM):

Mål

Efter den här modulen ska du:

  • veta var du kan skriva enkel JavaScript-kod
  • förstå idén med att koppla JavaScript till element i HTML (t.ex. en knapp)
  • kunna lägga till minst en av följande saker på din sida:
  • en meny som hoppar till olika delar av sidan
  • en knapp som visar/döljer extra information
  • en “Till toppen”-knapp som scrollar upp sidan

Upplägg på träffen

Del 1 – En enkel meny (utan och med JavaScript)

  1. Skapa en meny överst på sidan med HTML-länkar som pekar på olika sektioner längre ned:

```html

Om mig

Aktiviteter

Kontakt

```

  1. Testa i webbläsaren att klicka på meny-länkarna – sidan hoppar till rätt del.

Det här är ren HTML utan JavaScript – men känns redan mer som en “riktig” sida.

Del 2 – Första lilla JavaScript-exemplet

Lägg till en knapp som visar/döljer extra information.

  1. Lägg in en sektion i HTML:

```html

```

  1. Lägg till ett litet <script>-block längst ned i <body>:

```html

```

  1. Spara/committa och testa på din GitHub Pages-sida.

Gå igenom koden tillsammans på en hög nivå: - vi hämtar knappen och rutan med getElementById - vi lyssnar på att användaren klickar med addEventListener("click", ...) - vi slår mellan “synlig” (display: block) och “gömd” (display: none)

Det viktiga är upplevelsen: du ändrar koden → sparar → sidan reagerar annorlunda.

Övningar för deltagarna

Välj en eller flera av dessa:

1. Utöka menyn

  • Lägg till fler meny-länkar
  • Se till att alla sektioner har ett id så menyn fungerar
  • Prova att använda CSS för att göra menyn lite tydligare (t.ex. marginaler, bakgrundsfärg)

2. Fler dolda rutor

  • Skapa en till sektion med extra info och en egen knapp
  • Återanvänd JavaScript-koden genom att byta id till nya element
  • Testa om du kan få båda rutorna att fungera oberoende av varandra

3. “Till toppen”-knapp (om tid och ork)

Lägg till längst ned i <body>:

<button id="to-top">Till toppen</button>

Och JavaScript:

<script>
  const toTopButton = document.getElementById("to-top");

  toTopButton.addEventListener("click", () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  });
</script>

Nu ska ett klick på knappen scrolla upp sidan.

Mellan träffarna

Om du vill fortsätta träna:

  • testa att lägga till fler knappar eller länkar
  • ändra texter, id:n och se när koden slutar fungera – och när du får igång den igen
  • fundera på:
  • “Vilken interaktivitet skulle vara användbar på en sida för vår förening?”

Skriv gärna ner idéer till nästa träff – de kan bli grunden för 1.4-övningen, där du sätter ihop allt till en liten “riktig” sida.