JavaScript del 3 If, Operatorer och Confirm Under förra uppgiften så kollade vi på hur användaren kan ge oss information via promt(), vi använde den informationen både för att skriva ut den och för att utföra beräkningar. Men kommunikation med användaren blir väldigt torftig och vi kan inte heller göra så mycket i vår kod om vi inte får möjlighet att ta olika beslut baserat på vad användaren vill och baserat på den data vi fått skickat till oss. Några exempel: Om tex användaren matar in talet 5 och talet 3, hur kan vi då ta reda på vilket av dessa som är störst? Om vi gör ett spel som går ut på att gissa ett hemligt tal, något tal som befinner sig mellan 1 10, hur kan vi då ta reda på om användaren gissat rätt? Om vi gör ett spel och vill veta om användaren vill gå åt höger eller åt vänster, hur vet vi vilken användaren valde? If, else if och else Låter oss jämföra saker och baserat på om något är sant eller falskt låta olika saker ske. Den nya delen i vår kod ovan är if-delen. Den betyder att om villkoret som står mellan () är sant så kommer koden som står mellan { och } att köras. Dvs om 5 är mindre än 3 skriv koden. När vi besöker sidan så ser vi också att det hela fungerar: Skulle vi ändra värdena på talen, så att tal1 får värdet 3 och tal2 får värdet 5 skulle vi mötas av följande resultat om vi besöker webbplatsen (bild på nästa sida): Jakob Envall 1
Eftersom villkoret, fem är mindre än tre, är falskt så körs aldrig koden som står mellan { och }. Vi behöver alltså en lösning som låter oss testa flera villkor, om det första är falskt, gå vidare och testa nästa. I JavaScript gör man detta med hjälp av else if: När vi nu besöker sidan möts vi av: Dvs eftersom tal1 inte var större än tal2 så har den nu kolla om tal1 är mindre än tal2 vilket det är och vi kan alltså återigen tala om att 5 är större än 3. Det finns dock ytterligare en kombination som skulle ställa till problem för oss, om vi ändrar värdena på tal1 och tal2 så att bägge har värdet 5 så möts vi på nytt av: Jakob Envall 2
Vi behöver alltså skapa en lösning som tar reda på om de är lika stora. Vi skulle kunna lösa detta genom att lägga till ytterligare en else if, det skulle fungera utmärkt. Men i det här fallet finns det faktiskt ett ännu smartare sätt. För om det är så att tal1 inte är större än tal2 och tal2 inte är större än tal1 så finns det ju bara ett alternativ kvar, de är lika stora, det kan inte vara något annat svar. Om vi redan vet svaret så vore det ju onödigt om vi behövde skriva en massa kod för att kolla om de är lika stora och det behöver vi inte heller göra: Else kommer alltid att köras om inget av de ovanstående villkoren är sanna, det innehåller inget eget villkor utan körs alltså alltid om inget av de ovanstående körts. När vi besöker webbsidan ser vi: Jakob Envall 3
Jämförelseoperatorer och Logiska operatorer Vi har redan använt oss av två olika jämförelseoperatorer, större än: > och mindre än: <. Dessa känner ni säkert igen sedan tidigare. Nedan följer en lista på olika jämförelseoperatorer du kan använda dig av i dina if-satser: Operator Betydelse Exempel i ord Exempel i siffror > Större än Är 5 större än 3? 5 > 3 < Mindre än Är 3 mindre än 5? 3 < 5 == Lika med Är 5 lika med 5? 5 == 5 >= Större än eller lika med Är 5 större än eller lika med 3? 5 >= 3 <= Mindre än eller lika med Är tre mindre än eller lika med 5? 3 <= 5!= Inte lika med Är 5 inte lika med 3? 5!= 3 Ibland har vi behovet att ställa flera villkor samtidigt, säg tex att vi funderar på att bada, då vill vi inte att det skall vara för kallt i vattnet, men vi vill inte heller att det ska vara för varm för vi vill inte bränna oss. Nedan följer några logiska operatorer som låter oss kolla flera villkor samtidigt: Operator Betydelse Exempel && Och Om 5 är större än 3 OCH 12 är mindre än 15 Eller Om 5 är större än 3 ELLER 12 är mindre än 15 För att testa det hela så tar vi och skapar exemplet för att se om vi vill bada eller ej. Vi vill endast bada om vattnet är över 20 grader och under 35 grader. När vi sedan besöker sidan så kan vi få detta resultat: Om vi fyller i ett värde som var över 20 grader men under 35 grader får vi sedan följande svar (bild på nästa sida): Jakob Envall 4
Om vi i stället hade fyllt i att det var kallare eller varmare än så hade vi fått följande svar: Jakob Envall 5
Confirm Confirm är en ruta liknande prompt() och alert() som låter användaren bekräfta något genom att välja mellan OK eller Avbryt. Vilket skulle ge oss följande resultat på webben: Resultatet handlar om sant och falskt, om användaren klickar på OK så kommer värdet true att lagras i variabeln val och om användaren klickar på Avbryt så kommer värdet false att lagras i variabeln. Detta kan vi enkelt testa genom att lägga till några rader kod: Då skrivs följande ut om jag klickar på OK: Detta kan vi använda i en if-sats och vi kan använda den genom att skapa en if-sats där villkoret ser lite annorlunda ut tidigare (bild på nästa sida): Jakob Envall 6
Den delen som ser annorlunda ut är vår villkorsdel: if(val) Vad sjutton innebär detta och varför funkar det? När vi tidigare använt if-satser har vi skrivit saker i stil med: if(5 > 3) Men vad vi egentligen kollar efter är om något är sant eller falskt, true or false. Om 5 är större än 3 så är villkoret sant annars är det falskt. Om ett villkor är true så körs koden mellan { och } annars går vi vidare i koden och kollar eventuella else if och else. I vårt exempel if(val) så kollar den helt enkelt om val är true och val har ju värdet true, dvs det är sant. Koden ovan är helt enkelt en förkortning av if(val == true) och som vi kan se när vi besöker webbsidan fungerar den utmärkt. Om jag klickat på OK möts jag av: Annars möts jag av: Jakob Envall 7
Uppgifter 1. Jobba igenom de exempel som finns i det här dokumentet och se till så att du verkligen förstått dom. 2. Gör ett program som har två variabler: alder kanlasa Alder är en siffra som visar en persons ålder. KanLasa skall innehålla värdet true eller false beroende på om personen kan läsa eller ej. Denna information skall användaren få mata in, lämpligtvis via en prompt() och en confirm(). Programmet ska testa om en person ska gå i skolan eller inte: Om alder är större än sex år, mindre än 18 år och personen inte kan läsa ska denna gå i skolan. Är alder 18 år eller större och personen inte kan läsa borde den gå en kurs. Är alder större än sex år, mindre än 18 och personen kan läsa kan denne gå vidare till högre studier. Är personen yngre än sex år får den gå på dagis. Jakob Envall 8