JavaScript del 9 Dynamik och animeringar

Transkript

1 JavaScript del 9 Dynamik och animeringar Det sista vi ska titta på när det kommer till att lära oss JavaScript är hur vi skapar dynamik på vår webbplats, ge användarna chansen att påverka vad som händer och se hur vi med JavaScript kan flytta på objekt på vår webbsida. Events Hittills har den mesta av den kod vi skrivit körts så fort sidan laddats, allt har skett omedelbart. Ibland vill vi kunna styra när olika saker skall inträffa, detta kalas för events. Exempel på events kan vara när användaren klickar på något eller när webbsidan har laddats klart. Tecknet # som värde för href betyder att länken inte skall gå någon stans, dvs när vi klickar på länken så kommer vi inte att komma till någon annan sida. OnClick är vårt event och som du kan se så skriver vi sedan JavaScript-kod som värde för det. När vi besöker webbsidan och klickar på länken så ser vi också att det fungerar: Inget händer alltså när sidan laddats, det är för när själva click-eventet sker som vår JavaScript-kod körs. I exemplet ovan så skrev vi koden direkt som värde för onclick, men vi kan tex anropa en funktion: Jakob Envall 1

2 Vilket i just det här fallet skulle ge oss samma resultat som tidigare: OnClick är bara ett exempel på event, det finns massor av andra tex: onmouseover inträffar när musen kommer över ett område onmouseout när musen lämnar ett område onload när sidan laddats onkeydown, onkeypress och onkeyup används för tangentborsklick Du hittar alla events samt info om hur de fungerar här: Göra saker synliga/osynliga Vi testade på lite av detta tidigare i kursen när vi med hjälp av CSS-gjorde delar av en meny osynlig och sedan fick den att dyka upp/försvinna på nytt beroende på var vi hade muspekaren, likanade saker kan vi även skapa med hjälp av JavaScript. I exemplet på nästa sida så har jag en div-tagg med en text i samt två länkar. Sedan har vi två länkar på sidan, en visa och en dölj. När jag klickar på döljlänken så kommer div-taggen att bli osynlig och när jag klickar på visalänken så kommer den att visas igen. Jakob Envall 2

3 När jag surfar in till sidan möts jag av När jag klickar på Dölj så försvinner div-taggen (bild på nästa sida):: Jakob Envall 3

4 För att sedan komma tillbaka när jag klickar på visa: Koden vi använt oss av funkar utmärkt, men vill man kan man snygga till det hela genom att endast ha en funktion och via parametrar styra vilket objekt vi vill ändra på samt tala om i fall att vi vill göra det osynligt eller synligt. Fördelen med denna lösning är att vi kan återanvända den i framtiden, dvs använda exakt samma funktion utan att ändra den i andra projekt där vi vill kunna visa/dölja saker (bild på nästa sida): Jakob Envall 4

5 Timer Vi har tidigare sett hur vi kan ändra CSS-kod med hjälp av JavaScript, det betyder att vi tex skulle kunna flytta en bild från en position till en annan. Men hur gör vi om vi inte vill att den ena ögonblicket ska finnas på en plats och nästa på den nya platsen utan i stället få den att röra sig från en punkt till en annan? För att göra denna typ av saker, där en viss kod skall anropas med ett bestämt tidsintervall så har JavaScript två funktioner som vi kan använda: settimeout() Kör angiven JavaScript-kod en gång efter angiven tid setinterval() Kör angiven JavaScriptkod upprepade gånger med angivet tidsintervall Vi testar (bild på nästa sida): Jakob Envall 5

6 När vi sedan besöker sidan så ser vi att bilden, i mitt fall en blå rektangel, befinner sig 100px från vänsterkanten, sedan nästan direkt (200 millisekunder är ingen lång stund) så hoppar den och befinner sig sedan 500px från vänsterkanten. Om vi i stället vill skapa en animering så kan vi använda oss av setinterval(): Om du nu testar koden så kommer bilden att röra sig åt höger. Jakob Envall 6

7 Uppgifter 1. Skapa en animering likt exemplet för animeringar där en bild flyttas från vänster till höger. Du ska dock utveckla koden: I dagsläget så fortsätter bilden att åka till höger i all oändlighet. Du skall göra så att om bilden når högerkanten av webbläsarfönstret så skall den stanna där. För att lösa detta måste du ta reda på hur man med hjälp av JavaScript känner av hur brett webbläsarfönstret är och därefter med hjälp av en if avgöra om den skall flyttas inte, dvs något i stil med: Om bildens position + dess bredd är >= bredden på webbläsarfönstret gör inget, annars flytta bilden åt höger. 2. Skapa en sida med en bild på och fyra länkar. Länktexterna skall vara Uppåt, nedåt, vänster och höger. När du klickar på någon av dessa länkar så skall bilden börja åka åt det angivna hållet och göra det tills att den kommer fram till kanten på webbläsaren. Där ska den stanna. Klickar du på ett nytt håll (både när den har stannat eller medan den fortfarande rör sig) så ska den börja åka i den nya riktningen. Extrauppgifter för de som är klara tidigt 1. Skapa en sida med en div-tagg på. Du bestämmer själv hur stor den ska vara (ställ in med hjälp av css) samt sätter en border (kant) på din div-tagg (även detta med hjälp av css) så att vi kan se hur stor den är. Via JavaScript ska du sedan göra så att siffran 0 står i div-taggen. Div-taggen ska från början befinna sig uppe till vänster i webbläsaren (inte nödvändigtvis längst upp i vänstra hörnet) för att sedan automatiskt börja röra sig snett nedåt åt höger. När div-taggen når botten av webbläsarfönstret så ska den studsa uppåt och dessutom ska siffran i div-taggen räknats upp till 1. På samma vis ska den studsa varje gång den rör en kant. Den ska alltså ha samma utfallsvinkel som infallsvinkel (tänk er att ni skjuter en fotboll snett mot ett staket). Varje gång rutan krockar med en kant så skall siffran i den räknas upp ett steg. Om du har lite svårt att förstå vad jag menar så kom förbi mig så ska jag visa ett exempel. 2. I det sista exemplet i detta dokument, det med animering så stötte jag på ett problem, min kod ville inte fungera om left: 200px låg innanför style-taggar i stället för inom style= direkt på div-taggen. Lös detta problem så att det fungerar utan att använda style=. Jakob Envall 7