JavaScript — Introduktion genom exempel

2.3 In- och utdata

Det finns flera sätt att hantera in- och utdata och vi kommer ta upp det i flera exempel, men börjar här med att se på två enkla former. Exemplet är uppdelat i två delar:

1. Användning av dialoger ("popup-rutor") för in- och utdata.
2. Användning av formulär.

Vi har delvis varit inne på dessa delar i tidigare exempel, men repetition är alltid bra och vi ser nu på det i ett nytt exempel.

Sammanfattning

• Med prompt() och alert() får man en s.k. modal interaktion. Programmet går in i ett "läge" där användaren måste ge ett svar eller klicka på en knapp, innan programmet går vidare. Det är alltså programmet som styr interaktionen med användaren.
• Med ett formulär får vi en modeless interaktion ("lägeslös"), där det är användaren som styr. Även om det är så att formuläret endast ger användaren vissa möjligheter och användaren förväntas ge en viss form av indata, ger det användaren en större känsla av att kontrollera interaktionen.
• Med input-element för textfält kan användaren skriva in textsträngar och tal, som avläses genom .value.
  • Innehållet i ett textfält är alltid en textsträng, även om det endast består av siffror. Ska det tolkas som ett numeriskt värde, måste man konvertera med Number().
• En meny kan avläsas med en referens till select-elementet och .value. Value-attributen ska ligga i option-elementen.
• En knapp kopplas till händelsen "click" och en funktion med addEventListener().
• Med en referens till ett element och tillägget .innerText eller .innerHTML, kan resultatet skrivas på webbsidan.
• Med elementet <:dialog> kan man i HTML skapa en egen dialog. Lägger man till attributet open, blir det en modeless dialog, men om man istället öppnar den med .showModal() i JavaScript blir det en modal dialog.

I formulär kan man också ha många andra objekt och vi kommer att återkomma till det i senare exempel. Nu nöjer vi oss med med det som tagits upp här, vilket är tillräckligt i de följande exemplen i grunderna i JavaScript.

Egna övningar

Här följer ett förslag på några egna övningar. Öppna filen test.html och test.js och utför följande:

• Inför två globala variabler för de båda textfälten för bredd och höjd samt elementet för resultat. I init-funktionen tar du fram referenser till elementen och sparar i variablerna.
• Koppla en händelsehanterare till knappen, så att man kommer till funktionen areaCalulation, då man klickar på knappen.
• Skriv funktionen areaCalculation, där du avläser textfälten och beräknar triangelns area. Skriv ut arean i elementet för resultat.
• Omge formuläret med ett dialog-element i HTML-koden. Lägg också in en knapp på sidan, som ska användas för att öppna dialogen.
• I init-funktionen kopplar du den nya knappen till händelsen click och en ny funktion för att öppna dialogen. Skriv också denna funktion, där du lägger in en rad för att öppna dialogen med showModal(). I funktionen areaCalculation lägger du in en rad för att stänga dialogen.