JavaScript del 2 DocumentWrite, Prompt och ParseInt Senast kollade vi lite på vad JavaScript är för något, hur man skapar variabler samt hur vi kan skicka ut ett meddelande till användaren genom alert. Här kommer vi att utveckla kommunikationen med den som besöker vår webbsida något. Vi kommer att testa att skriva ut något direkt på webbsidan i stället för att en alert poppar upp. Vi kommer även att testa på att ta in feedback från användaren, där denne får fylla i tex vilken information som skall lagras i en variabel. DocumentWrite Används för att skriva ut något direkt på webbsidan, i stället för via en alert-ruta som poppar upp: När vi besöker webbsidan ser vi: Vi kan självklart även använda document.write i kombination med variabler: Vilket ger oss: Jakob Envall 1
Prompt Ibland vill vi att användaren skall kunna skicka information till oss, prompt är att sätt att göra det på: Vilket ger oss följande resultat: Textten vi skriver innanför () är alltså den som står ovanför inmatningsrutan, vi måste alltså skriva något bra där för att användaren skall förstå vad det är för något denna skall mata in. Men när vi sedan klickar på OK så händer inget förutom att rutan stängs ner, vi möts helt enkelt av en tom blank sida. För att kunna använda oss av informationen användaren matar in bör vi spara den i en variabel. Då kan vi sedan tex skriva ut variabeln: Vilket likt tidigare ger oss prompten där användaren får fylla i sitt namn (bild på nästa sida): Jakob Envall 2
När vi nu klickar på OK så möts vi nu av detta: Jakob Envall 3
ParseInt Detta borde ju betyda att vi kan använda promt för att skapa beräkningar där användaren får skriva in de värden vi skall räkna med. Vi testar: Vi testar sedan att besöka sidan och fylla i lämpliga värden: Men resultatet vi får blir inte alls vad vi hade tänkt oss: Vi vet ju alla att fem plus tre är lika med 8 och inte 53. Vad har gått snett? Om vi tänker tillbaka till förra uppgiften så testade vi att slå ihop två stycken textsträngar till en, vi hade att användaren matade in förnamn och efternamn och sparade det hela i variabler. Sedan Jakob Envall 4
skapade vi en ny variabel med namnet namn och gav den värdet av förnamn + efternamn. Detta är vad som skett nu, vår beräkning sker som om vi slog ihop två stycken texter, inte som om vi adderade två stycken tal. Anledningen till att detta sker är att promt alltid ger oss värdet i form av text, dvs ungefär som om vi i stället för att skriva var tal1 = 5; hade skrivit var tal1 = "5". För att lösa det hela måste vi via koden tala om att vi vill göra om den informationen vi får från vår promt till ett heltal. Ordet heltal heter på engelska integer, vilket i programmeringssammanhang ofta förkortast int. För att tala om för JavaScript att vi vill ha resultatet som en int så skriver vi parseint() vilket ger oss följande kod: Vilket ger oss följande resultat på webben om vi fyller i värdena 5 och 3: Vill vi sedan formatera utskriften lite snyggare så kan vi uppdatera document.write-delen av vår kod: Vilket ger oss en lite proffsigare utskrift: Jakob Envall 5
Övningar Som uppgift här ska vi ta och göra om de två första uppgifterna från förra övningen samt att vi skall göra en hel ny uppgigt. Vi börjar med de två första uppgifterna från förra övningen. De ändringar ni skall göra är så att i stället för att dessa innehåller förutbestämda värden så skall användaren med hjälp av prompt() få mata in dessa värden. Du skall också skriva ut svaren med hjälp av en document.write() i stället för med en alert() som du gjorde på övning 1. Om du behöver fräscha upp minnet så här kommer dessa uppgifter igen, exakt så som de såg ut på övning 1: 1. Skapa fyra variabler. Ge tre första värdena 1, 2 och 3. Den fjärde ska ha värdet av variabel1 gånger variabel2 gånger variabel3. Skriv sedan med hjälp av en alert ut den fjärde variabeln. 2. Skapa fyra variabler. Ge de tre första värdena 20, 5 och 2. Den fjärde ska ha värdet av variabel1 minus variabel2 plus variabel3. Sedan skall du formatera utskriften så att den ser ut så här: 20 5 + 2 = 17 När du gör utskriften måste du använda dig av variablerna, du får alltså inte bara skriva texten ovan i en alert. Här kommer sedan den nya uppgiften: Olika länder använder sig av olika värden för temperatur, i Sverige använder vi oss tex av Celsius, när vi har 20 grader så menar vi alltså 20 grader Celcius. En annat vanligt sätt att mäta temperatur är Fahrenheit, vilket man använder ibland annat USA. Det är därför en amerikan kan säga att dom har 75 grader ute, vilket för oss låter helt galet, men dom menar då naturligtvis 75 grader Fahrenheit, vilket är en helt annan temperatur än 75 grader Celsius. För dig som är osäker på vad Fahrenheit och Celcius är läs dessa: http://sv.wikipedia.org/wiki/grad_fahrenheit http://sv.wikipedia.org/wiki/grad_celsius Du skall skapa en webbsida där användaren får tala om grader i Celsius och sedan skall webbsidan tala om hur många grader Fahrenheit det motsvarar. Formeln för att räkna om Celsius till Fahrenheit ser ut så här: (Celsius * 9/5) + 32 För att testa om ditt program räknar rätt så kan ni jämföra ditt resultat med det resultat ni får på denna webbplats: http://www.metric-conversions.org/temperature/celsius-to-fahrenheit.htm Jakob Envall 6