Hur fråga efter data?

Fråga användaren

Ibland kan det vara bra att få data från den som använder programmet. Du kanske vill göra programmet personligt och vill fråga efter ett namn? Eller du kanske vill fråga efter bredd, höjd eller en siffra att räkna med?

I javascript finns funktionerna prompt() och confirm() som vi ska visa och testa här.

För att fråga om en textsträng används prompt()
Men för att kunna göra något av svaret skapar du också en variabel där svaret på frågan hamnar.

var svaret = prompt();

Testar du det på editor.p5js.org så får du upp en enkel frågeruta som kan se ut så här (beroende på vilken webbläsare du använder):Som du ser får användaren ingen information om vad de ska skriva. Lägg till det i prompt-funktionens parentes. Använd enkla eller dubbla citattecken runt texten:

var svaret = prompt("Vad heter du?");

För att använda svaret kan du t ex visa det i console.log() eller en alert()

var svaret = prompt("Vad heter du?");
console.log("Du har ett fint namn, " + svaret);

Observera att texten ”Du har ett fint namn, ” knyts ihop med variabeln med hjälp av ett plus-tecken! Så om du vill lägga till ett utropstecken efter namnet, hur gör du då?

Räknare

Dags att skapa en miniminiräknare!

var tal1 = prompt("Skriv ett tal mellan 1-100");
var tal2 = prompt("Skriv ett till tal mellan 1-100");
var sum = tal1 + tal2;
alert("Summan är: " + sum);

MEN…
Det kommer ge fel svar. Funktionen prompt() frågar efter text och vid beräkningar behöver vi arbeta med siffror. Både ”fem” och ”5” är textsträngar och går inte att addera som siffror. Vi behöver en funktion som gör om ”5” till 5 och det är Number().

var tal1 = prompt("Skriv ett tal mellan 1-100");
var tal2 = prompt("Skriv ett till tal mellan 1-100");
var sum = Number(tal1) + Number(tal2);
alert("Summan är: " + sum);

Prova att göra om det till multiplikation eller division istället för addition!

Fördjupning

Ibland vill du kanske skriva meddelanden till användaren på flera rader. Så här görs ett radslut i en textsträng med \n

prompt("Detta är rad 1\nDetta är rad 2");

Längre fram kanske du vill använda en OK-knapp istället för att fråga efter en text. Då kan du använda funktionen confirm()

var svar = confirm("Vill du gå vidare?");

Men hur du hanterar svaret, kommer vi till längre fram…