 |
JavaScript-skolan
JavaScript och DOM |
 |
2. Objekt, objekt och objekt
3. Objektreferenser
4. Övningar
Obs!
Alla exempel och facituppgifter öppnas i ett nytt fönster!
1. Inledning
Den här sidan inleder sektionen om dokumentobjekt. För att du skall förstå vad jag menar med denna rubrik tänker jag här berätta lite om de objekt som förekommer i JavaScript.
En förutsättning för att du skall förstå vad jag pratar om är att du har läst sidan "Vad är en DOM?". Läs mer >
2. Objekt, objekt och objekt
När du läste sidorna i grundkursen stötte du på flera olika objekt. Först och främst de välkända Html-objekten, t.ex <BODY>, <FORM>, <INPUT> och <P>.
Sedan fick du också stifta bekantskap med JavaScript-objekten Array, Math, Date och String. Du fick dessutom lära dig hur man skapade nya sådana objekt med nyckelordet "new".
Ytterligare en typ av objekt har varit webbläsarens. Till dessa hör dels sådana som syns i själva webbläsarfönstret, t.ex window, document och toolbar. Sedan finns också objekt som inte syns lika tydligt, t.ex history och location.
Dessa tre grupper av objekt går att styra med JavaScript, men jag kommer framförallt att fokusera på sådana som har att göra med det som syns på bildskärmen. Sådana kallar jag dokumentobjekt.
Termen är inte helt tagen ur luften för de flesta sådana objekt styrs av det som står i en DOM (dokumentobjektsmodell). I en DOM styrs framförallt de objekt som skapas via Html- eller Xml-koden. Dessutom regleras många av webbläsarens objekt.
Men inte alla. Det finns t.ex ingen DOM för JavaScript-objekten. Dessutom har olika webbläsare olika varianter av DOM. Det är därför ett script ibland inte fungerar. De försöker då styra objekt som inte ingår i webbläsarens DOM.
Hur vet man då vilka objekt som går att styra? Jo, för varje webbläsare finns en ganska tekniskt snårig och svårläst DOM, men den vänder sig främst till utvecklare och riktigt avancerade användare. Alla vi andra får pröva oss fram eller använda scripts som andra gjort.
Ytterligare ett sätt att veta hur objekten styrs är ju att lära sig syntaxen och semantiken för JavaScript. Syntaxen är de stavningsregler som finns för programspråket. Semantiken är vad uttrycken kan och får betyda.
På de återstående sidorna kommer jag att prata om de olika objekten och hur man styr dem, men för den som verkligen vill veta alla tekniska skillnader och egenheter hos DOM, JavaScript och webbläsarna, får alltså själv söka dessa kunskaper. Förhoppningsvis räcker ändå det jag skriver till med råge!
3. Objektreferenser
En viktig detalj då man använder JavaScript för att styra dokumentobjekten är att man måste referera till dem på rätt sätt. Det kanske vanligaste sättet är att identitetsmärka dem. Detta görs precis som med stilmallar, med kommandot id.
Exempel 1
<script language="JavaScript">
<!--
function HittaElement() {
var ElementNamn;
ElementNamn = document.all("Huvudrubrik");
if (ElementNamn == Huvudrubrik) {
alert("Element \'Huvudrubrik\'
finns i dokumentet!");
}
}
-->
</script>
+
<body onLoad="HittaElement()">
<H1 id="Huvudrubrik">Detta
är en huvudrubrik</H1>
Titta på exemplet i praktiken >
Så
här skall det se ut, men det
fungerar inte i alla webbläsare.
Exemplet visar hur man använder ett script som letar upp huruvida det finns ett element som är märkt med "Huvudrubrik" eller annat valfritt namn.
Huvudobjektet är "document" (här har jag uteslutit "window"), alltså det dokument som öppnas i webbläsaren. Egenskapen all inkluderar alla element i dokumentet. Jag har använt id-attributet för att identitetsmärka den rubrik jag har som huvudrubrik.
På ett liknande sätt kan vi också anropa element för att få reda på deras status.
Exempel 2
<script language="JavaScript">
<!--
document.write("Bakgrundsfärgen
är: " + document.bgColor);
-->
</script>
Titta på exemplet i praktiken >
Här skrivs svaret ut direkt på sidan tack vare metoden write().
Med en liknande metod går det att få ut en lista på alla element i dokumentet. Det fungerar inte överallt, men väl i Internet Explorer:
Exempel 3
<script language="JavaScript">
<!--
function ListaElement() {
var Element, Meddelande;
Meddelande = "Elementen på
denna sida är: ";
for (i = 0; i < document.all.length;
i++) {
Element = document.all(i).tagName;
Meddelande = Meddelande + "\r"
+ Element;
}
alert(Meddelande);
}
-->
</script>
+
<body onLoad="ListaElement()">
Titta på exemplet i praktiken >
For-loopen betyder att scriptet börjar med det första elementet och stegar sig igenom samtliga element i dokumentet. Efter varje gång for-loopen körts hämtas namnet på varje element med metoden tagName, vilken lagras i variabeln Element. På nästa rad förs detta värde vidare till variabeln Meddelande tillsammans med en radbrytning mellan varje förekomst.
Ytterligare ett exempel på hur man använder sig av objektreferenser finns i följande exempel:
Exempel 4
<form name="exempel4">
<textarea name="text1">Skriv
något här!</textarea>
<input type="button"
value="Markera texten"
onClick="document.exempel4.text1.select()"
/>
<input type="button"
value="Visa texten"
onClick="alert(document.exempel4.text1.value)"
/>
</form>
Titta på exemplet i praktiken >
Här skrivs scriptet direkt i formulärkoden. I stället för att öppna en alert-ruta kan du pröva att skriva in "document.write". Med metoden select() markeras texten (man måste dock stå inuti textrutan när man klickar på knappen).
I
JavaScript pratar man ofta om ett
huvudobjekt (parent) och dess
underordnade objekt (subobjects och
ibland children).
I exemplet är window huvudobjektet, medan document är ett underordnat objekt.
Formuläret är i sin tur underordnat document och textrutan underordnad formulärobjektet.
Däremot är ju metoden select() inget objekt och ingår därför inte i hierarkin.
4. Övningar
Övning
1
Vilka tre slags objekt kan man styra
med JavaScript? Ge exempel på
varje sådant objekt!
Övning
2
Varför kan det vara svårt
att använda JavaScript tillsammans
med en DOM?
Övning
3
Skapa ett script som letar upp ett
element som id-märkts!
Övning
4
Skapa ett script med två olika
funktioner, som var för sig letar
upp ett id-märkt objekt. Aktivera
funktionerna med var sin knapp i ett
formulär!
Övning
5
I ett Html-dokument finns ett formulär
som heter "form1". I formuläret
finns en textruta med namnet "ruta1"
och värdet "Sant".
Skapa en referens till detta värde
enligt den syntax du fått lära
dig!