På denna hemsida beskrivs några av de klasser som finns i JavaScript och de objekt som motsvarar webbläsarens olika delar. Beskrivningar är inte kompletta, d.v.s. det finns eventuellt fler egenskaper och metoder än de som visas på denna webbsida. Observera också att objekten (inte klasserna) är en del av den s.k. "DOM Level 0-modellen", d.v.s. från tiden innan tillverkare av webbläsare (läs Micro$oft) kunde komma överens om en gemensam modell för objekt i webbläsare. Detta är ett problem då måste skriva speciell kod för att kod ska fungera i Internet Explorer respektive övriga (Firefox, Google Chrome, Opera och Safari). (Detta är nu löst i.o.m. introduktionen av DOM - se sidan DOM.)
Objekten beskrivs på denna webbsida för att ge en "komplett bild" av JavaScript, d.v.s. det är mycket troligt att du hittar dem i exempel på Internet samt att vissa objektrelaterade saker på denna webbsida är användbara, skulle man inte vilja lära sig DOM. :-)
JavaScript är främst, enligt mig, ett s.k. objektbaserat språk, d.v.s. det finns klasser och redan existerande objekt, men vi skapar inga egna klasser eller objekt (annat än vektorer, arrays). I JavaScript används klasser för att samla "funktioner" (eller metoder, som är den korrekta termen) och mer komplexa saker (d.v.s. innehåller flera värden) motsvaras av objekt. (Se Klasser och objekt sist på denna sida för en kort jämförelse.)
Sen jag skapade min första version av denna underwebb så har jag börjat misstycka om titeln på denna webbsida: Objekt. Ett bättre namn vore "Klassmetoder och -egenskaper samt webbläsarobjekt", vilket är lite långt. :-)
Det finns ett antal klasser i JavaScript och de används främst för dess egenskaper (eller konstanter) och metoder ("funktioner"), med undantag från klassen Array som vi skapar instanser (objekt) av (från). Namn på klasser i JavaScript börjar med en versal, t.ex. Math och String. Nedan beskrivs klasser efter den ordning som de (eller dess egenskaper/metoder) används mest.
Innan vi tittar på klasser så förklaras begreppen egenskaper och metoder.
En egenskap är ett värde och metod är en "funktion". En person har t.ex. ett födelseår, vilket är en egenskap. Skulle det finnas ett personobjekt så skulle vi t.ex. kunna fråga den om dess ålder genom att skriva person.fodelsear. Vi använder något som kallas för punktnotation, d.v.s. att vi skriver namn på objekt (eller klass) och sen egenskap (eller metod) som vi vill använda.
En del egenskaper är s.k. konstanter (värden som inte kan ändras), vilka skrivs med versaler som standard. T.ex. så finns värdet för det matematiska talet pi (3,14..., fast enligt amerikansk standard: 3.14...:-) definierat i klassen Math som Math.PI.
En metod ("funktion") gör något, d.v.s. vi vill att något ska hända när vi anropar metoder. I exempel med personobjekt skulle vi t.ex. kunna vilja att person pratade eller gick och skulle då skriva något i stil med person.prata() respektive person.ga(). För att skilja metoder från egenskaper, och då vi ibland skickar argument till metoder, så följs metodanrop av parenteser.
Man skiljer även på instans- och klassegenskaper/-metoder, d.v.s. vad som ska skrivas före punkten (Klassnamn.egenskap respektive objektVar.egenskap). De flesta egenskaper och metoder på denna webbsida är instansegenskaper och -metoder, d.v.s. det ska vara en variabel med ett objekt före punkt. Om det är en klassegenskap eller -metod så markeras detta tydligt på denna webbsida.
I beskrivningar av klasser och objekt nedan visas först egenskaper i en lista följt av metoder i ytterligare en lista.
Strängar (text) är vanligt förekommande i programmering och ofta finns ett behov av att manipulera strängar, t.ex. hitta en sträng i en sträng, titta på varje bokstav i en sträng eller omvandla till versaler/gemener. Nedan visas exempel på några metoder i klassen String.
En viktig sak att komma ihåg om strängar att de i vissa fall påminner om vektorer, bl.a. att strängar är "nollbaserade" - första position (index) i en vektor är noll. När vi anropar metoder nedan, som returnerar position, så är första positionen 0, andra positionen 1, o.s.v..
length - innehåller längden på strängen.Egenskapen length är användbar för att t.ex. avgöra om en sträng i ett formulärs textruta är långt nog (t.ex. postnummer innehåller fem tecken - se sidan Formulär). Egenskapen kan även användas för att "loopa över" en sträng, d.v.s. lika många gånger som längd på sträng.
var minStrang = "Hej!";
for(i = 0; i < minStrang.length; i++)
{
...;
}charAt(pos) - returnerar tecknet vid
position pos.indexOf(str) - returnerar startposition
av str i sträng eller -1 om str inte finns i sträng.lastIndexOf(str) - returnerar startposition
av sista förekomsten av str i strängen eller -1 om str
inte finns i sträng.substr(startpos, antal) -
returnerar antal tecken av strängen med början på position start.toLowerCase() - returnerar kopia av strängen
med endast gemener.toUpperCase() - returnerar kopia av strängen
med endast versaler.JavaScript är, som sagt, praktiskt att använda för att validera (verifiera) data i formulär. Detta involverar ofta att undersöka varje tecken i en sträng, något vi kan göra med metoden charAt(pos) i kombination med egenskapen length, d.v.s. i loop i exempel ovan (se sidan Formulär för exempel).
Metoden indexOf(str) kan t.ex. användas för att kontrollera att @-tecknet i en e-postadress inte är första tecken samt att det finns en punkt efter @-tecknet (d.v.s. att det finns en domän och huvuddomän, så som .se, efter @-tecknet).
var epost = "namn@domän.se";
if(epost.indexOf("@") > 0)
alert('Namn för e-postadress har angivits.');Till början på sida
Datum är alltid användbart..:-) Man kan t.ex. infoga datum i webbsidor så att man vet att besökaren för dagens datum på eventuella utskrifter (se exempel nedan). Datum är även användbart för att visa när webbsidor (dokument) senast uppdaterades, vilket vi kan man använda metoden lastModified() i objektet document (se mer nedan).
Observera att vissa metoder nedan fungerar olika i olika webbläsare och att programmering med datum är en källa till många fel i kod! Ytterligare en detalj att observera är att stöd för datumformat, d.v.s. hur datum skrivs, varierar och att det amerikanska datumformatet (månad/dag/år) är det som verkar fungera bäst! En tredje detalj att observera är att "datum" oftast är samma sak som datum och tid! Så även om du tror att du jämför två datumobjekt med lika värden så kan de skilja sig åt då deras tid är olika. Testa därför resultatet i de webbläsare som du tänker stådja!
Innan vi kan använda de flesta metoder nedan så måste vi skapa en instans (ett objekt) av klassen Date, vilket görs med nedanstående kod. Variabeln objDate kommer alltså innehålla ett datumobjekt.
var objDate = new Date();Metoder som börjar med "get" brukar returnera ett värde och för
varje get-metod så finns det oftast en motsvarande set-metod för att ange
motsvarande värde, t.ex. getDate() och setDate(värde).
(Därför visas endast get-metoder nedan.)
getDate() - returnerar dagen i månaden (1-31).getDay() - returnerar veckodagen som ett tal (0-6).getMonth() - returnerar månad som ett tal (0-11).getFullYear() - returnerar året (med fyra siffror).getHours() - returnerar timme (0-23).getMinutes() - returnerar minuterna (0-59).getSeconds() - returnerar sekunderna (0-59).toString() - returnerar datum som sträng (text).Nedanstående kod skriver ut dagens datum (se resultat under kod). Här börjar vi med att skapa ett nytt datumobjekt, som placeras i variabeln objDate, med vilken vi kan hämta ("fullt") årtal (d.v.s. fyra siffror), nummer på månad samt dag i månad. Observera att månaden januari har värdet noll och december elva, d.v.s. vi måste öka på värdet som getMonth() returnerar och här används parenteser för att addition ska ske istället för konkatinering (sammanslagning av strängar). Exempel visar även att vi ibland bör "snygga till" utskrifter - i detta fall borde vi skriva ut en extra nolla om månad endast innehåller en siffra.
var objDate = new Date();
var strDate = objDate.getFullYear() + "-"
+ (objDate.getMonth()+1) + "-"
+ objDate.getDate();Resultat från kod ovan (om kod fungerar i din webbläsare):
Till början på sida
Klassen Math är inte en klass man skapa objekt från, utan man använder klassens (statiska) metoder för diverse matematiska funktioner.
PI - innehåller värdet på PiNågra exempel på metoder vissa nedan.
abs(tal) - returnerar tal som positivt.ceil(tal) - returnerar tal
avrundat till närmast högre heltal.pow(tal, exp) - returnerar
tal upphöjt till exp.floor(tal) - returnerar tal
avrundat till närmast lägre heltal.max(tal1, tal2) - returnerar
största talet av de två argumenten.max(tal1, tal2) - returnerar
minsta talet av de två argumenten.random() - returnerar ett slumptal mellan 0
och 1 (som sen kan multipleras med (t.ex. 100) för att få ett större slumptal
(t.ex. mellan 0 och 100).round() - avrundar till närmaste heltal (d.v.s.
"upp" eller "ner").sqrt(tal) - returnerar roten ur tal.Det finns även funktioner för vinklar (d.v.s. cos, sin och tan), skulle vi behöva jobba med geometri.
Till början på sida
Klassen Array är alltså den udda klassen (på denna webbsida) då den används för att skapa instanser (objekt) av, d.v.s. vektorer. För en beskrivning av hur man skapar och lägger till värden (element) i vektorer, m.m., se hemsidan Språket. Nedan beskrivs olika egenskaper och metoder som finns i objekten (vektorerna).
length - antalet element (positioner) i vektor.Egenskapen length är mycket användbar, speciellt i for-loopar. I exempel nedan så skapas en vektor (storlek är irrelevant, men 5 här) som sen fylls med tal (på något sätt). Sen loopar vi "över" vektorn, d.v.s. vi loopar lika många gånger som det finns positioner i vektorn, och summerar alla talen.
Observera att eftersom loopens block endast innehåller en sats så kan vi utelämna "hakparenteserna". Operatorn += ökar på variabeln summa med innehållet i vektorn på position i, d.v.s. vi kunde ha skrivit summa = summa + vekt[i].
var vekt = new Array(5);
var summa = 0;
//kod som fyller vektor med tal
for(int i = 0; i < vekt.length; i++)
summa += vekt[i];pop() - hämtar och tar bort element "överst
på stack".push(elem) - lägger till elementet
elem "överst på stack" - returnerar ny längd på vektor.
(Det går att lägga till flera element, separerade med komma, med denna metod
- elementen läggs till från vänster till höger.)reverse() - kastar om ordningen på element i
vektorn.shift() - hämtar och tar bort element "först
i kön".sort(funktion) - sorterar vektor m.h.a. funktion (d.v.s.
en avancerad funktion som inte behandlas här för nu...)toString() - returnerar innehållet i vektor
som en sträng, där element separeras av komma.En trevlig finess, för oss vana programmerare, är att vi kan använda en vektor i JavaScript som en s.k. stack eller kö m.h.a. metoderna push, pop och shift.
En stack fungerar som tallrikshållarna i matbespisningen på skolan: man lägger till (push) tallrikar på toppen, vilket puttar ner tidigare tallrikar, och tar (pop) tallrikar från toppen, vilket höjer upp efterföljande tallrikar. (Detta kallas även för LIFO: last in, first out.) Köer fungerar som i verkligheten: först in, först ut (FIFO: fist in, first out). Två konstruktion som är mycket praktiska i viss programmering.
Till början på sida
I JavaScript (i webbläsare) finns ett antal objekt som motsvarar webbläsare och (X)HTML-dokument. Namnen på variabler som refererar till dessa objekt skrivs med gemen i början (t.ex. navigator och document). Objekten innehåller ett antal egenskaper och metoder, samt några även händelser (events). En händelse är något som kan ske, t.ex. att sida laddas eller musmarkör förs över eller bort från ett element. (Se sidan Händelser för hur man använder dessa händelser.)
Objektet navigator motsvara besökarens webbläsare och information som kan fås från webbläsaren är bl.a. dess namn och version. Eftersom Internet Explorer respektive övriga webbläsare fungerar på lite olika sätt när man ska komma åt en del webbläsarobjekt, så kan man använda t.ex. namnet och/eller version på webbläsaren kan för att t.ex. köra olika kod. (Använder vi DOM istället så finns det bättre sätt att lösa detta problem - se sidan DOM.)
appCodeName - kodnamnet på klient (t.ex.
"Mozilla")addName - namn på klient (t.ex. "Netscape"
och "Microsoft Internet Explorer").appVersion - version på klient och operativsystem
som klient körs i.cookieEnabled - om klient stödjer cookies.userAgent - värde som klient identifierar sig
med i kommunikation med webbserver (se exempel nedan).De flesta webbläsare idag använder kodnamnet Mozilla, men vi kan använda egenskaperna appName eller userAgent för att ta reda på tillverkare av klient. Observera att bl.a. Firefox identifierar sig som Netscape samt att en del webbläsare.....
javaEnabled() - returnerar sant (true)
om webbläsare har Java (inte JavaScript) aktiverat.Till början på sida
Precis som navigator motsvarar webbläsaren så motsvaras windows av själva fönstret där hemsidan visas. Om man använder ramar så är varje ram ett fönster, d.v.s. det finns ett window-objekt för varje ram i webbläsaren.
För de flesta egenskaperna och metoderna behöver man inte skriva "window." framför - det läggs till av JavaScript-tolken. Nedan visas exempel på några egenskaper, metoder och händelser för objektet window. Några av metoderna har vi redan behandlat, främst de som visar dialogrutor.
opener - fönstret (eller ramen) som fönstret öppnades från.parent - fönstret som är förälder till aktuellt fönster
(gäller främst om man använder ramar).self - själva fönstret själv.alert() - visa en meddelanderuta.blur() - sätt fönstret som inaktivt.close() - stäng fönstret.confirm() - visa en dialogruta med Ja/OK- och Nej/Avbryt-knappar.
Dialogrutan returnerar vilken knapp som besökaren klickade på.focus() - sätt fönstret som aktivt.open() - öppna ett fönster.prompt() - visa en dialogruta med en textruta för besökaren att
skriva in en sträng. Dialogrutan returnerar strängen.onLoad - händelse som inträffar när dokumentet laddas i
fönstret.onUnload - händelse som inträffar när dokumentet laddas ur.onBlur - händelse som inträffar när fönstret blir aktivt.onFocus - händelse som inträffar när fönstret blir inaktivt.Till början på sida
Varje fönster innehåller ett dokument och objektet document
motsvarar dokument samt är "underordnat" objektet window.
Objektet är ett av de mesta använda, i.a.f. dess metoder write() och
writeln() som behandlats tidigare. I Navigator är
den enda färgen som kan ändras med JavaScript bakgrundsfärgen
när hemsidan laddat klart.
bgColor - bakgrundsfärgen för dokumentet.lastModified - datum och tid som HTML-dokumentet redigerades sist.referrer - addressen till hemsidan som länkade till denna.close() - stänger fönstret.write() - skriver till dokumentet.writeln() - skriver till dokumentet och avslutar med en
radbrytning. Radbrytningen sker endast då man skriver (HTML-kod)
till ett annat fönster.För att visa egenskapen referrer så visas här hemsidan som länkade till denna och som besökaren klickade på för att se denna hemsida:
Detta dokument innehåller ett exempel på hur man kan använda
metoden open(). I exempeldokumentet finns kod som visar hur write(),
writeln() och close() fungerar.
Till början på sida
Egenskapen history...
length - antal sidor som webbläsaren har använts för att
titta på.back() - gör att webbläsaren visar föregvende sida som
besökaren besökt.forward() - gör att webbläsaren visar nästa sida som besökaren
besökt.go(pos) - gör att webbläsaren visar sidan på plats pos
i historielistan som besökaren besökt.För att visa hur man kan be webbläsaren hoppa tillbaka ett steg så
kan du klicka på denna länk: <<Tillbaka.
Värdet för attributet href i taggen a är
"javascript:history.back()".
(Klicka på Framåt/Forward för att komma tillbaka till denna hemsida
om ni klickar på <<Tillbaka ovan!)
Till början på sida
Objektet innehåller bl.a. information om webbserver och dokumentets sökvägen till dokumentet.
host - adressen till webbservern.hostname - namnet på webbservern.href - URL:en till dokumentet.pathname - sökvägen till dokumentet på servern.port - porten som webbservern använder.protocol - protokollet som används.reload() - replace() - Till början på sida
I JavaScript kan man skapa egna objekt (eller snarare klasser som man skapar objekt från) om man vill. Klasserna existerar endast så länge som besökaren har webbsidan öppen (eller snarare så länge någon kod exekverar i sidan :-).
Jag kommer inte att behandla dessa (eventuell kommer jag skriva om detta stycke någon gång i framtiden).
Till början på sida
Detta avsnitt behandlar teorin bakom en del av programmeringen i JavaScript, d.v.s. du kan skippa detta avsnitt om du inte vill förstå varför vissa saker är och fungerar som de gör i JavaScript. :-)
Förlåt, men jag känner att jag inte kan gå vidare utan att ge mig in på (relevanta delar av) programmeringens historia... eller i.a.f. ge dig möjligheten att lösa om det, skulle du vara intresserad. :-) Skälet är att jag vill försöka förklara vad ett objektbaserat språk är, vilket JavaScript är enligt mig (i.a.f. med tanke på hur de flesta använder språket).
Strukturerad programmering bygger på tre saker och de används i de flesta programmeringsspråk (strukturerat eller objektorienterat), nämligen:
Dessa tre saker kan kombineras i oändligt antal kombinationer för att skapa program.
Tack vare funktioner så kan vi även strukturera kod bättre samt undvika upprepande kod. En funktion är (kort) en bit kod som vi kan referera till (anropa) m.h.a. ett namn. (Se sidan Språket för hur funktioner definieras och anropas.) Genom att skapa funktioner så kan vi bl.a. bryta ner problemet (som utveckling av ett program är) i mindre delar samt placera kod som upprepas på ett ställe (så att vi bara behöver ändra på ett ställe, skulle vi hitta ett fel i kod eller vilja ändra programmets funktion).
OO-programmering bygger vidare på strukturerad programmering, d.v.s. vi använder fortfarande de grundläggande koncepten sekvens, selektion och iteration. Men OO bygger vidare och introducerar två nya begrepp: klasser och objekt (vilka är revolutionerande och framtiden, skulle vi använda dem fullt ut :-).
En klass är en mall för att skapa objekt och används för att definiera beteende (funktion) hos objekt av klassen. Klasser kan även innehålla metoder ("funktioner") och egenskaper (värden eller konstanter). (Dessa metoder och egenskaper kan användas utan att skapa objekt - se mer nedan.)
Objekt är instanser (förekomster) av klasser samt har egenskaper och metoder ("funktioner") som vi kan använda för att fråga om, och ändra, (enskilda) objekts tillstånd ("värden"). (Metoder och egenskaper har, som sagt, definierats i klassen enligt förra stycket. Men egenskaperna är unika för respektive objekt av klassen som skapas.)
Det här med klasser och objekt, d.v.s. objektorientering, kräver ett nytt tankesätt, vilket (till stor del) inte är relevant för oss JavaScript-programmerare att förstå. :-) Det enda vi behöver förstå är varför vi skriver på ett visst sätt ibland (när vi använder funktioner) och på ett annat sätt (när vi använder metoder i objekt eller klasser). Enklast är att visa med ett exempel.
En person (objekt) vet vilket är den är född (egenskap) och om jag frågar personen hur gammal den är (metod) så kan personen (objektet) räkna ut hur gammal den är. Vilket år det är kan personen (objektet) fråga (metod) kalendern (eller, i datatermer, klassen Date). "Översatt" till JavaScript så skulle vi kunna skriva följande kod:
var fodelsear = 2000;
var aktuelltAr = new Date().getFullYear(); //Hämta år med 4 siffror
var alder = aktuelltAr - fodelsear; //=> 17 år när detta skrivsÅlder för person född år 2000:
(Om vi skapar flera personobjekt så har de varsitt värde på egenskapen födelseår, d.v.s. de kan vara födda olika år och därmed ha olika ålder.)
Vad jag vill visa med exempel ovan (men inte själva JavaScript-koden :-) är att vissa saker (egenskaper) är en del av objekt. Ett typiskt exempel på detta är en vektor (array, som är ett objekt) som själv vet hur lång den är (egenskapen length). För att fråga ett objekt om värdet på en egenskap så använder man följande syntax (kallat punktnotation):
var min_var = objekt.egenskap;
Exempel ovan säger "snälla objekt, ge mig värdet på din egenskap". Objektet (med egenskapen) skrivs alltså först och följs av en punkt och namnet på egenskap vi vill komma åt. (Observera att egenskapens namn inte följs av parenteser! Parenteser används endast om det är en metod, vilket behandlas härnäst.)
Objekt kan även ha metoder ("funktioner"), vilket och vi såg exempel på detta redan på sidan Grundläggande: utskrift till dokument med write-metoderna (document.write(text)). Vi kan även se exempel på metodanrop, när klassen Array behandlades ovan, där vi lärde oss att vi kan anropa metoden reverse för att kasta om ordningen på vektorers element. Metoder i objekt anropas på samma sätt som vi använder egenskaper i objekt, men vi lägger till parenteser (med eventuella argument mellan).
Precis som med funktioner så kan metoder returnera ett värde.
objekt.metod(argument1, argument2, ...);
Även klasser kan ha metoder och egenskaper, vilket vi sett exempel på denna webbsida när vi tittade på klasser som Math och Date. Egenskaper och metoder anropas på samma sätt som för objekt (d.v.s. med punktnotation) men vi ersätter objekt med klassers namn.
I ett s.k. objektbaserat språk använder vi främst strukturerad programmering, men det finns även ett antal klass och objekt (d.v.s. det är en "blandning"). Objektbaserade språk identifieras genom att vi främst bara använder existerande objekt (så som document och window) samt använda s.k. klassmetoder (metoder, eller "funktioner", i klasser som Date och String) men aldrig skapar egna klasser.
Vad vi (främst) behöver veta är att språket JavaScript har objektorienterade egenskaper och vi måste skilja på om det är en funktion eller metod (i objekt eller klass) som vi anropar:
Skälet till varför jag ville ta upp ämnet i detta avsnitt, skulle du ha löst hit, är bl.a. då personer som jag, skolade i både strukturerad och objektorienterad programmering, ibland har svårt för språk som JavaScript som är någon form av "hybrid" eller blandning. Många nybörjare har även problem att förstå när de ska använda punktnotation med objekt/klasser eller bara "funktionsnamnet" (d.v.s. inte en metod, något som oftast är samma sak för nybörjaren).
Nåja, dags att sluta och svamla och återgå till mer praktiska saker. :-)
Till början på sida
Nedan finns några webbsidor/-platser med mer information om ämnet på denna webbsida.