JavaScript — Introduktion genom exempel

5.1 Koordinater och gränser

Ett element kan positioneras genom att man i CSS ger det absolut positionering och sedan placerar det med önskade värden i egenskaperna top och left. Ska det ske inom ett omgivande element, ges det omgivande elemnetet en relativ positionering. I JavaScript kan man ändra värdena i top och left, för att flytta elementet. För att avgöra position och storlek finns det också några andra egenskaper och metoder som tas upp i detta exempel. Exemplet består av tre delar:

1. Olika sätt att avläsa ett elements position och storlek.
2. Program som kontrollerar om två element överlappar varandra. Kan användas för "krocktest".
3. Förflyttning av ett element, då användaren klickar på knappar eller trycker ner tangenter.

Sammanfattning

Med left, top, etc. anges positionen i en enhet, t.ex. px för pixlar. Ska man lägga in nya värden måste man alltså lägga in både värdet och enheten. Avläser man värdet, kan man ta bort enheten med parseInt(). Man kan både läsa och skriva left, top, etc.

Med offsetLeft, offsetTop, etc. erhålls positionen i pixlar. Värdet för egenskapen innehåller alltså endast ett tal utan enhet. Positionen är inom det omgivande elementet, där man utgår från 0,0 för det övre vänstra hörnet. Egenskaperna offsetLeft, etc. kan endast läsas, så man kan inte använda dem för att lägga in nya värden.

Med getBoundingClientRect() får man ett objekt som innehåller egenskaperna left, top, right, bottom, x, y, width och height. x är lika med left och y är lika med top.

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:

• Då man klickar på knappen, anropas funktionen newBall. Skriv kod, så att det slumpmässigt bestäms en ny position för bollen inom ytan för "playGround". Bollen ska placeras minst 40px från kanten.
  • Med getBoundingClientRect() kan du ta fram width och height både för den stora ytan och bollen, för att kunna bestämma övre gränser i slumptalsberäkningen av nya värden för left och top för bollen.
  • Börja med att endast bestämma nytt värde för left. Då du sedan fått det att fungera, blir koden för att bestämma top nästan likadan, fast du använder då height istället för width.