Javaskript objekter

Objekter er datatyper som kan inneholde data i form av variable og funksjoner.

Objekter defineres med klasse-navn.

<script>
    var minBil = {};      // Et tomt objekt.  
</script>

Objekter kan lages med {krøllparenteser} …
… eller med new Object.

<script>
    var minBil = new Object;      // Et tomt objekt.  
</script>

Et bilobjekt

<script>
    var minBil = { farge: "lilla" };
    // Objektet minBil sin farge er lilla. 
</script>

Et bilobjekt hvor eneste egenskap er farge.

Hente ut data

For å hente ut data kan det brukes prikk-notasjon.

<script>
function visFarge()
    { alert(minBil.farge); }
</script>

<input 
type="button" 
value="Vis farge" 
onclick="visFarge();">

… eller parentesnotasjon.

<script>
function visEgenskap(egenskap)
{ 
    var f = minBil[egenskap];
    alert(f); 
}
</script>

<input 
type="button" 
value="Vis egenskap" 
onclick="visEgenskap('farge');">

… eller med eval().

<script>   # eval.
function visBil(egenskap)
{
    var bilegenskap = "minBil." + egenskap;
    alert (eval (bilegenskap));
}
</script>

<input 
type="button" 
value="Vis bilegenskap" 
onclick="visBil('farge');">

Funksjoner i objekter

Data kan også hentes ut vha. funksjoner inne i objektet.

<script>
var minBil = 
{ 
    merke: "Nissan", 
    farge: "lilla",

    // Objekter kan inneholde funksjoner.
    vismerke: function() {
        return this.merke;  
        // Returnerer dette objektets sitt merke.
    }
};
</script>

Her er et objekt med to egenskaper og en funksjon.

Knappekoden:

<input 
type="button" 
value="minBil.vismerke()" 
onclick="alert(minBil.vismerke());">

Egenskapene separeres med komma.

Funksjonen oppfører seg som en variabel.

this

‹this› må brukes for å angi at det er dette objektets verdier en vil ha tak i.
‹this› peker på objektet.

(Merk at ‹this› alene peker på nettleservinduet.)

Legge inn data

<script>
var minBil = 
{ 
    merke: "Nissan", 
    farge: "lilla",

    // Objekter kan inneholde funksjoner.
    settmerke: function() 
    { 
    // Setter bilmerket til Opel og returnerer merket.
    return this.merke = "Opel"; 
    }
};
</script>

<input 
type="button" 
value="minBil.settmerke()" 
onclick="alert(minBil.settmerke());">

Fordelen med å bruke funksjoner for å hente ut og legge inn data i objekter er at funksjoner antas å være fast over den tiden som objektet vedlikeholdes.
Innholdet i objektet, slik som f.eks. navn på variabler, osv. kan endres uten at en trenger å endre konteksten.

Egenskaper kan tilføyes dynamisk

Egenskaper kan tilføyes i runtime.

<script>
    var minBil2 = {};    // Et tomt bil-objekt.  
</script>

<script>  
function settmerke() 
{
minBil2.merke = "Datsun";   
// En egenskap tilføyes under kjøring.
alert("Merke er satt.");
}
</script>

<input 
type="button" 
value="Sett bilmerke" 
onclick="settmerke();">

<script>  
function vismerke(egenskap) 
{alert(minBil2.merke);}
</script>

<input type="button" 
value="Vis bilmerke" 
onclick="vismerke();">

Funksjoner kan tilføyes dynamisk

Funksjoner kan tilføyes i runtime.

<script>  
function settfunksjon()   
// Setter inne en funksjon i foregående objekt.
{
    minBil.vismerke = function ()
    { alert(this.merke) };
};
</script>

<input 
type="button" 
value="Sett inn funksjon" 
onclick="settfunksjon();">

Objekter i objekter

<script>  // Objekter kan inneholde objekter.
var person = 
{
navn: "Nils Martin",
bil: { merke: "Nissan" } 
};
</script>

<script>
function navn()
    { alert(person.navn); }

function bil()
    { alert(person.bil.merke); }

</script>

Klasser

Klasser er en ny egenskap i JS6.

<script>
class person {}
</script>

Funksjoner som klasser

Funksjoner er objekter.
Funksjoner kan lagres i en variabel, array eller et objekt.

<script>
function person6()
{
this.navn = "Nils Martin";
}
</script>

<script>
var p6 = new person6();

function navn6()
    { alert(p6.navn); }

</script>

 

 

Ordliste

CSS  –  Cascading Stylesheet.

Se også:  CSS  HTML  JavaScript    Internettordbok.html  CSS.html. JavaskriptOrdbok.html 

Dato  –  er et forhåndsdefinert objekt.

Se også:  Dato    Javaskript.html  JavaskriptOrdbok.html 

DOM  –  Document Object Model er en struktur som nettleseren lager etter å ha lest et HTML-dokument.

For å inspisere DOM trykk F12 i nettleseren.

Se også:  DOM    Koding.html  HTMLordbok.html  JavaskriptOrdbok.html 

Egenskap  –  kan være noe som karakteriserer et objekt, f.eks. farge.

Se også:  Egenskap  Klasse  Objekt 

Funksjoner  –  ligner på metoder i Java og C#.

Funksjoner har alltid en returverdi. En funksjon uten en return-kommando, returnerer undefined.

Ingen returtype.

Funksjoner er objekter. Det betyr at de kan lagres i en variabel, array eller i et objekt.

Funksjoner kan også sendes til og returneres fra funksjoner.

Ingen sjekk for antall argumenter.

Se også:  Funksjoner  Objekter    Javaskript.html  JavaskriptOrdbok.html 

HTML  –  Hyper Text Markup Language.

Se også:  HTML  CSS  JavaScript    JavaskriptOrdbok.html  Internettordbok.html  HTMLordbok.html  HTML.html 

Java  –  er et OO-programmeringsspråk utviklet av Sun Microsystems.

Se også:  Java  JavaScript  OO  OOP    JavaskriptOrdbok.html  Internettordbok.html 

JavaScript  –  er et objektorientert interpreterende skriptspråk som kan brukes i html-dokumenter for å utvide funksjonaliteten til vev-sider.

Se også:  JavaScript  CSS  HTML  Java    Javaskript.html  Internettordbok.html  HTMLordbok.html  JavaskriptOrdbok.html 

JSON  –  JavaScript Object Notation, er et tekstbasert datautvekslingsformat som er språk- og plattformuavhengig selv om den er basert på et subsett av JavaScript-syntaks.

Se også:  JSON  JavaScript    JavaskriptOrdbok.html 

Klasse  –  definerer objektets egenskaper.

Se også:  Klasse  Objekt  Egenskap 

Logikk  –  Sant og usant med bruk av  ==  og  !=  kan være veldig usikkert i JavaScript.

1 == '1';               // Sant.

false == 0;             // Sant.

undefined == null;      // Sant.

undefined == ' ';       // Usant.

null == 0;              // Usant.

' ' == false;           // Sant.

' ' == 0;               // Sant.

Bruk derfor alltid  ===  eller  !==.

Se også:  Logikk    Javaskript.html  JavaskriptOrdbok.html 

Objekt  –  er en instans av en klasse.

Se også:  Objekt  Egenskap  Klasse  Objekter 

Objekter  –  er datatyper som kan inneholde variable og funksjoner.

Se også:  Objekter  Funksjoner  Objekt  OOP    Javaskript.html  JavaskriptOrdbok.html 

OO  –  Objekt-Orientert.

Se også:  OO  OOP    JavaskriptOrdbok.html 

OOP  –  OO-programmering.

Se også:  OOP  OO    Objekter.html 

Variabel  –  kan sees på som en beholder med en verdi inni. Rent fysisk er det minnecelle som inneholder en viss verdi.

Variabelen må ha et unikt navn i den konteksten der er i.

Navnet kan tenkes på som en peker til variabelen.

Se også:  Variabel  Objekter    Koding.html  JavaskriptOrdbok.html 

Variabler  –  er utypet og kan være hva som helst.

var x = 1;              // Tall.

var x = "Hallo.";       // Tekst.

var x = {};             // Objekt.

Se også:  Variabler  Objekter    Javaskript.html  JavaskriptOrdbok.html