JavaScript-skolan Objekt, metoder och egenskaper

1. Inledning

Den här sektionen handlar om JavaScript, som är det kanske mest användbara av alla enkla scriptspråk. Det är förhållande lätt att lära sig och de flesta webbläsare klarar också av att tolka koden.

Innan du läser vidare bör du ha vissa grundläggande kunskaper. jag föreslår därför att du börjar med att läsa följande sidor:

Scipts i Html-dokument >
Introduktion till scripts >
Vad är en DOM? >
Kompatibilitetsproblematiken >

2. Objekt

JavaScript är ett objektorienterat scriptspråk. Det innebär att man i språket arbetar med att bestämma och definiera olika objekt. Man hänvisar till objekt och talar om hur objekt skall hanteras och fungera.

Objekt kan vara många olika saker. Det kan vara en fil, en plats, en tidpunkt, en del av skärmen, ett stycke kod, en bild, ett formulär eller knapp, ett script, osv.

Objekt kan allt vara som man kan peka ut eller ge ett namn, skulle man kunna säga. Objekt är dock inte allt och man skiljer bl.a mellan objekt, metoder och händelser, som vi skall se här.

I en DOM finns uppgifter om vad som kan vara ett objekt i Html. För JavaScript finns ingen DOM, utan man använder ofta Html-objekten och styr dem.

Dessutom finns det sedan en uppsättning JavaScript-objekt. Skillnaden kan vara lite svår att förstå i börjarn och jag skall därför återvända till den först när grundkursen är klar.

3. Metoder

Nästan alla objekt förekommer tillsammans med antingen en metod eller en egenskap - och ibland både och.

Metoder kan sägas vara de beteenden som objekten har. Metoder kan också liknas vid de ord som uttrycker svenskans verb eller händelser, men bör inte förväxlas med sådana.

I JavaScript talar man ofta om vad som skall hända då besökaren klickar på ett objekt, ett dokument öppnas eller stängs. Vanliga metoder är:

• open()
• close()
• click()
• alert()

Det går att skilja metoder från egenskaper genom att de förra har parenteser efter sig. En referens till ett objekt där en metod anges ser alltså ut så här:

window.document.write()

Här är window och document objekt och write() den metod som skall användas.

4. Egenskaper

Objekt har inte bara beteenden utan även egenskaper. Sådana kan liknas vid svenskans adjektiv, alltså ord som talar om hur någonting är.

En bild har t.ex en viss bredd och höjd. Ett ljud har en viss varaktighet och volym. En länk har en viss färg och reglage har ett visst läge eller intervall.

När man använder en egenskap känns de igen på att de bara har ett enkelt värde, till skillnad från metoderna, som kan ha flera olika värden inom parenteserna:

window.document.bgColor = "blue"

Här är bgColor egenskapen för bakgrundsfärg och värdet skrivs i det här fallet efter likamedtecknet. Du kommer att läsa mer om detta på sidorna om dokumentobjekt.

5. Händelser

De egenskaper och metoder som realiseras hos ett objekt, t.ex då besökaren klickar på det, avgör objektets händelsestatus. I JavaScript finns det kommandon för att ange denna och på engelska kallas de för event handlers.

I Html kan dessa olika företeelser sägas förekomma i följande kodexempel. parallellen haltar dock något:

6. Objektreferenser

I JavaScript måste man kunna ange vad som är ett objekt, för att man sedan skall kunna tala om hur det skall behandlas vidare.

I Html anger man referensen med attribut som name, src, href:

<FRAME name="left" src="left.html">
<IMG src="bild.gif">
<A href="sida2.html">Sida 2</A>

Referenser kallas ibland också för identifierare eller identifiers, efter det engelska ordet. I JavaScript kan man dock inte ange referens lika enkelt som i Html.

Anledningen till detta är att man inte bara måste kunna referera till Html-objekt, utan också till objekt i webbläsaren (t.ex. statusfältet eller tillbaka-knappen), samt till de interna JavaScriptobjekten. (Jag kommer att utveckla detta resonemang efter hand.)

Det finns därför mer bestämda regler för hur referensen får skrivas. Den får inte innehålla mellanslag (även kallat blanksteg). Den får inte heller innehålla några konstiga tecken (utom understrykningstecknet). Den får inte inledas med en siffra och den bör stå inom citationstecken.

Dessutom måste namnet kunna gå att härleda ur ett "ursprungsnamn". Här följer ett exempel: I Html-koden har vi skapat ett dokument utan frames. Dokumentet finns alltså i en "box" som vi kan kalla för ett fönster. För att referera till dessa objekt skriver vi då i JavaScript följande:

Till vänster ser vi alltså referensen till de olika objekten. Första namnet är ursprungsnamnet (window). Man använder ofta engelska namn för att slippa svenska (=konstiga) tecken.

För att namnge dokumentet måste man sedan ange "sökvägen" - hur objekten förhåller sig till varandra - i det här fallet "window.document". Med en punkt kan vi dela av varje del av referensen.

Om vi lägger in ett formulär och vill hänvisa till det skriver vi:

Som du ser har vi här hänvisat till det namn formuläret har i Html-koden. Det går självklart att referera till delar av formuläret:

Här har jag som du kanske ser tagit bort första delen, window, eftersom det bara fanns ett script på sidan och därför inte råder någon tvekan över vilket objekt vi hänvisar med "document".

Om du tycker att det jag skriver känns svårt så behöver du inte oroa dig. På sidorna om dokumentobjekt kommer jag att utveckla detta ytterligare. Nu måste vi först lära oss lite andra saker!

7. Objektmetoder

När man refererar till ett objekt brukar man också tala om vilken eller vilka metoder som skall användas. I följande exempel används JavaScript inne i ett Html-element och SCRIPT-elementet är då utelämnat:

Här används attributet onClick, som anger vilken metod som skall aktivera scriptet "window.alert". Som du ser skriver man värdet inom dubbla citationstecken men enkla citationstecken för det som skall skrivas ut.

Man kan ibland göra tvärtom, men får inte använda samma tecken för båda sakerna. Här har jag varit tvungen att följa Html-standardens dubbla citationstecken och måste då använda enkla för scriptet.

Måste man använda sig av "window.alert"? Räcker det inte bara med "alert"? Vi testar:

I det här fallet fungerade det utmärkt, åtminstone i min webbläsare. Jag kommer att prata mer om fönster så småningom!

8. Meddelandetyper

Som du såg i förra avsnittet använde vi metoden "alert". Den kan man också lägga in i SCRIPT-elementet:

<script language="JavaScript">
<!--
alert("Det här är ett meddelande från Jonas!");
-->
</script>

Det som kommer up på skärmen är då en meddelanderuta, som brukar kallas "alertruta". Ett bättre namn är dock varningsruta. Titta på exemplet >

Obs!
Här kan det vara så att de svenska bokstäverna inte syns ordentligt i din webbläsare. Vi kommer till hur man åtgärdar det längre fram.

Semikolon används för att tala om att det skall ske en radbrytning i scriptet. Annars blir det svårt för webbläsaren att veta vad som är vad. Detta blir tydligt då vi vill ha två olika rutor som kommer upp på skärmen:

<script language="JavaScript">
<!--
alert("Det här meddelandet är från Jonas!");
alert("Det här också!");
-->
</script>

Titta på exemplet >

Förutom varningsrutor, skapade med "alert", kan man också göra två andra slags rutor:

Bekräftelse (confirm)

<script language="JavaScript">
<!--
confirm("Vill du fortsätta?");
-->
</script>

Titta på exemplet >

Uppmaning (prompt)

<script language="JavaScript">
<!--
prompt("Skriv ditt namn!");
-->
</script>

Titta på exemplet >

9. Övningar

För att du skall få ut någonting av det jag skrivit tänkte jag testa dig lite. Nedan följer 5 övningsuppgifter, med facit. Pröva att göra dem så att du kan gå vidare:

Övning 1
Skapa en varningsruta som öppnas då du klickar på en länk. Rutan skall säga: "Nu lämnar du denna sida!".
Facit >

Övning 2
Skapa en sida med två "alert"-kommandon som öppnar två rutor efter varandra då dokumentet öppnas.
Facit >

Övning 3
Skapa ett formulär med en bekräftelseruta som öppnas då man klickar på Skicka-knappen.
Facit >

Övning 4
Skapa en sida med en varningsruta som i sin tur öppnar en uppmaningsruta, där man skall skriva in sitt namn.
Facit >

Övning 5
På sidan "Scripts i Html-dokument" berättade jag om olika händelsehanterare. Läs mer >
Uppgiften består i att du skall skapa en sida med en bild. När muspekaren förs över bilden skall en varningsruta öppnas, som säger att bilden inte får kopieras.
Facit >

Övning 6
Pröva gärna att skapa egna exempel!