Object based JS tutorial

[Clay]

Op de vraag of er behoefte was aan een javascript tutorial over object based javascript werd er (mijns inziens) redelijk vaak met "ja" geantwoord, en om er maar niet veel woorden aan vuil te maken, hier is ie:

OO Javascript Tutorial _{v 0.9b}

Of iig een versie ervan dus Nu is mijn vraag of jullie hem willen lezen, en vervolgens kunnen aangeven wat er wel en niet goed aan is, om zo tot een uiteindelijke versie te komen waar iedereen wat aan heeft.

[Verwijderd]

Mooi zow
En vet handig

[Limhes]

Eindelijk

Ga em lezen...

[Verwijderd]

Ffies kijken of ik nog wat slimmer wordt

edit:

Je weet de kleuren wel te kiezen, toen ik hem had gelezen, en hem wegklikte leek het alsof ik een rode gloed over mijn scherm had

[Clay]

Op zaterdag 29 juni 2002 20:39 schreef Gordijnstok het volgende:
Ffies kijken of ik nog wat slimmer wordt

Jij hebt het niet nodig begin maar ergens onderaan met lezen de rest kan je overslaan.

[Kresh]

Mooi verhaal!

[ mierenneuk mode ]
Tikfoutje:

Mist goed toegepast is er ontzettend veel mogelijk en kunnen er geweldige (en ook stabiele) bijna-applicaties mee worden gebouwd.

[HunterPro]

wát een kleur zeg!

verder duidelijk en helder geschreven... alleen ga ik nu een biertje pakken om van die waas voor m'n ogen af te komen

[Verwijderd]

Ziet er goed uit .
Zou er ook een afdrukvriendelijke versie kunnen komen? Het liefst iets smaller. Ik heb de pagina's nu afgedrukt en kwam er achter dat er aan het einde van iedere regel wat ontbreekt, leest zo lastig .

[Bosmonster]

Heerlijke kleuren ja

Dit is wel weer super van je

code:

function Monster() {
   // "Super" object
}

[crisp]

Netjes en duidelijk. Iets waar ik de laatste tijd zelf ook mee aan het stoeien ben geweest, en wat ik op die manier zelf al uitgevogelt had. Als je eerder was geweest had me dat waarschijnlijk een hoop tijd bespaard

Ik heb echter wel iets vreemds ondervonden; een dmv prototyping toegevoegde method schijnt door IE ook als property gezien te worden; dat geeft nog wel eens problemen als ik door de properties heen wil lopen. Moz/NS hebben dit 'probleem' niet.

Een voorbeeld:

code:

function topic(arg) {

  // set default properties
  this.topic = '0';
  this.title = 'unknown';
  this.forumid = 'ZZZ';
  this.forum = '0';
  this.stime = 0;
  this.topicstarter = 'unknown';
  this.starterid = '0';
  this.time = 0;
  this.lastreplier = 'unknown';
  this.replierid = '0';
  this.numreplies = 0;
  this.ltime = 0;
  this.curreplies = 0;

  // override properties from arguments
  for (var el in arg) { this[el] = arg[el]; }

}

// Topic toSource method
function Topic_toSource() {
  var returnstring = '{';
  for (var el in this) {
    if (!Topic.prototype[el]) {
    if (returnstring.length > 1) returnstring += ',';
    returnstring += el +':';
    if (isNaN(this[el])) returnstring += '\'' + this[el] + '\'';
    else returnstring += this[el];
    }
  }
  returnstring += '}';
  return returnstring;
}
Topic.prototype.toSource = Topic_toSource;

Je ziet dat ik hier in de functie Topic_toSource een uitvraging 'if (!Topic.prototype[el])' heb zitten; als ik namelijk in IE dmv 'for (var el in new Topic())' door de properties heenloop, dan krijg ik vanzelf een propertie 'toSource' voor mijn kiezen van het type '[object]'. Heel vervelend en ongewenst natuurlijk.
Nogmaals: Moz/NS hebben die vervelende gewoonte niet.
Welke browser zit hier nou fout?

[Clay]

Goed goed, sorry van die kleuren ik heb het nu maar saai grijs gemaakt, en iets smaller. Al dat soort instellingen staan trouwens gewoon in de stylesheet, dus je kan um ook dllen en dat aanpassen.

crisp
Ik heb echter wel iets vreemds ondervonden; een dmv prototyping toegevoegde method schijnt door IE ook als property gezien te worden; dat geeft nog wel eens problemen als ik door de properties heen wil lopen. Moz/NS hebben dit 'probleem' niet.

Een voorbeeld:

code:

voorbeeld

Heel vervelend en ongewenst natuurlijk.
Nogmaals: Moz/NS hebben die vervelende gewoonte niet.
Welke browser zit hier nou fout?

Ik vind het eigenlijk lastig dat standaard objecten geen functies laten zien als je for(var i in object) doet maar het lijkt me idd dat IE hier fout zit, aangezien het de enige is die het zo doet, en dan nog alleen na prototyping. Die if lijkt me dan ook de enige juiste oplossing.

Ik ga er trouwens nog 1 stukje bijschrijven, over het kopieren van objecten, hierom:

code:

var henk = [1,2,3];
var piet = henk;

piet[1] = 4;
// henk == [1,4,3]

[crisp]

Op zondag 30 juni 2002 11:53 schreef Clay het volgende:
Ik ga er trouwens nog 1 stukje bijschrijven, over het kopieren van objecten, hierom:

code:

var henk = [1,2,3];
var piet = henk;

piet[1] = 4;
// henk == [1,4,3]

Yep, is inderdaad ook iets om rekening mee te houden op het moment dat je echt een kopie wilt hebben, zonder het origineel te beinvloeden

[Pelle]

Ziet er netjes uit hoor.. in overerving had ik me met JS nog nooit in verdiept, altijd handig om te weten hoe dat in z'n werk gaat

Op zondag 30 juni 2002 11:53 schreef Clay het volgende:
Ik ga er trouwens nog 1 stukje bijschrijven, over het kopieren van objecten, hierom:
[code]var henk = [1,2,3];

Daar had ik het laatst nog over met drm.. dat het op zich raar is dat wanneer je een string kopieert, er ook een kopie wordt gemaakt, maar wanneer je een array of een object kopieert, er alleen een reference naar toe gemaakt wordt.
Er zou eigenlijk een universele operator moeten komen die de value overneemt, en een operator waarmee je een reference aanmaakt. Ben je meteen van het gedonder af dat je eigen copy() functies moet schrijven.

[Verwijderd]

Een goed begin. Lekker duidelijk, laat niets te wensen over.

Hopelijk breidt dit zich uit tot een hele serie over OO-JavaScript. Er valt namelijk nog zoveel over te vertellen!

[Clay]

Op zondag 30 juni 2002 13:37 schreef Blues het volgende:
Een goed begin. Lekker duidelijk, laat niets te wensen over.

Hopelijk breidt dit zich uit tot een hele serie over OO-JavaScript. Er valt namelijk nog zoveel over te vertellen!

Da's mooi om te horen
Ik heb er nu ook een stukje over kopieren van objecten bijgezet, dus op zich moet het nu een vrij compleet verhaal zijn.
Ik hoop ook dat het inderdaad een duidelijk verhaal geworden is voor mensen die er nog niet veel mee gedaan hebben want ik weet dan zelf wel hoe het werkt, maar dat houdt niet in dat ik het dus ook goed uit kan leggen.

Mocht dat wel zo zijn wil ik best meer tuto's gaan maken trouwens.

[Mithrandir]

Wauw man

Vet goede tut! Voor het eerst dat ik iets van OO begrijp ... Zou je ook zoiets kunnen/willen schrijven voor C#?

En kun je misschien een vervolg hierop schrijven? Zoiets is namelijk errug handig

Restecp

[Verwijderd]

Ik vind het zo verschrikkelijk jammer dat je niet op de object oriented manier objecten kunt meegeven als argument aan een setTimeout of setInterval, zonder als eerste argument een string mee te geven, maar een function pointer.

Voorbeeld:

code:

schaapje = setTimeout("alert('blaat');", 5000);

Dit vind ik een ranzige oplossing, aangezien het in principe een veredelde eval() functie is. Volgens de Netscape implementatie kun je het volgende doen:

code:

schaapje = setTimeout(alert, 5000, 'blaat');

oftewel
variabele = setTimeout(fPointer, tijd, args);

Helaas ondersteunt Internet Explorer dit niet, en zelfs dan is nog niet te bereiken wat ik wil, en wat Clay zo te zien ook heeft geprobeerd.

Ik heb het nog iets anders geprobeerd, maar ook dat bleek niet te werken:

code:

function TimerObject()
{
  this.intervals = new Array();
  this.timeouts = new Array();

  this.addInterval = function addInterval(obj, interval)
  {
    this.intervals.push(setInterval(obj.update, interval));
  }
}
        
function CustomObject(name)
{
  this.name = name;

  this.setInterval = function setInterval(interval)
  {
    document.timer.addInterval(this, interval);
  }

  this.update = function update()
  {
    alert(this.name);
  }
}

document.timer = new TimerObject();

schaapje = new CustomObject('blaat');

blaat.setInterval(2000);

Volgens mij is dit niet zonder ingenieus truuckje op te lossen, of heeft iemand die al op de 100% OO manier voor elkaar gekregen?

edit:

Voor de duidelijkheid: het object dat wordt aangesproken bij obj.update is het window object in plaats van het opgegeven object

Voor de rest is het volgens mij een hele nette tutorial, veer respect daarvoor

[Verwijderd]

erg nette tutor, hier valt wel wat van te leren, alleen moest ik het wel lezen op mijn windows pc aangezien de mac IE er een letterbrei van maakt. misschien kun je dit nog es verhelpen.

[Clay]

Op zondag 30 juni 2002 15:56 schreef Cheatah het volgende:
Ik vind het zo verschrikkelijk jammer dat je niet op de object oriented manier objecten kunt meegeven als argument aan een setTimeout of setInterval, zonder als eerste argument een string mee te geven, maar een function pointer.

code:

voorbeeld

idd timeouts en intervals zijn niet zo sterk opgezet in js eigenlijk. Ik heb zelf een ook keer zoiets gemaakt om er omheen te werken:

code:

document.objects = [];

Object.prototype.setInterval = function(str, time) {
    // obj ergens instoppen
    var id = 'obj'+document.objects.length;
    document.objects[id] = this;
    
    // interval zetten 
    return setInterval('document.objects["'+id+'"].'+str, time);
}



function Ding() {
    this.teller = 0;
}
    Ding.prototype.update = function() {
        window.status = this.teller ++;
    }


ding = new Ding();
ding.setInterval('update()', 40)

maar dan zit je wel weer met een extra array, en je bent nog steeds strings aan het evallen.

[Verwijderd]

Erg "mooie" tutorial Clay, bedankt! Met timeouts e.d. gebruik ik meestal de volgende code, erg makkelijk vind ik => alleen ook dan eval je nog steeds een string
Maar dat kun je natuurlijk veranderen

code:

Object.prototype.eval = function($code){ eval($code); }

Object.prototype.setTimeout = function($code, $time)
{
   var $scheduleNumber = null;
   if ( Object.schedules == null )
    Object.schedules = [];
   $scheduleNumber = Object.schedules.push(this) - 1;
   $code = $code.replace(new RegExp('(\'|\\\\)', 'g'), '\\$1');
   return window.setTimeout('Object.schedules[' + $scheduleNumber
    + '].eval(\'' + $code + '\')', $time);
};

_{Hier meer info over bovenstaande code (onderen)}

[Verwijderd]

Zeer leerzaam !!!
Ik ben nu dik over de helft, en het meeste kwam me wel bekend voor maar ook veel dingen niet..

Top !

[Verwijderd]

/me kijkt al uit naar deel 2

[Verwijderd]

Op maandag 01 juli 2002 00:59 schreef ThaGroov het volgende:
/me kijkt al uit naar deel 2

Ik kan me niet zo gauw iets bedenken dat in een eventueel deel twee zou kunnen komen? Zorg eerst maar dat je dit beheerst, en dat betekent lekker veel rommelen, en verder hangt het compleet af van je eigen imagination* om iets te maken. Er is hiermee al zoveel mogelijk, dus ik denk dat dit voorlopig een vrij complete tutorial is.<span style="font-size: 1px;">* kan even niet op het nederlandse woord komen..</span>

[Verwijderd]

Op maandag 01 juli 2002 02:06 schreef Cheatah het volgende:
dus ik denk dat dit voorlopig een vrij complete tutorial is

Voor degene die JS al wat beheerst jah, misschien kan er nog wel wat meer aan basiskennis worden gegegeven. Niet iedereen kent immers de grondslagen van JS

[Willem]

Lekker bezig Clay, nice work!

[DeFeCt]

Deze tutorial gaat er vanuit dat je bekend bent met de basis van Javascript. Dat wil zeggen; Het gebruik en de werking van variabelen en methoden en het verschil tussen globale en lokale variabelen. Is dat niet het geval dan heeft het geen zin deze tutorial te lezen, en raad ik je aan dat eerst onder de knie te krijgen.

Misschien een idee om een verwijzing op te nemen naar een tut met "Het gebruik en de werking van variabelen en methoden en het verschil tussen globale en lokale variabelen." ?

Oh, en je bent nu ook gelinked vanaf digcult voor extra personality boost

[drm]

Over het kopieren van objecten:

code:

Object.prototype.clone = function () {
   ret = new Object();
   for ( i in this )
    ret[i] = this[i];
   return ret;
}

't enige nadeel hiervan is, dat je altijd een variabele van het type "object" terugkrijgt. Hoe kun je het type (de class) van een object achterhalen, om er vervolgens een nieuwe instantie van te maken

Overigens is het voordeel van een clone () method, dat alle objecten (die dus deriven van Object) die methode gewoon weer kunnen overriden met een eigen implementatie, en de rest van je code er gewoon vanuit kan gaan dat de clone () method doet, waar hij voor staat

[Clay]

Met typeof kan het iig niet die geeft voor zowel een Array als een Object "object" terug. Wat wel kan is de constructor van je object opvragen:

code:

alert(typeof [1,2,3] + ' ' + typeof (new Object()) + '\n' 
    + [1,2,3].constructor + ' ' + (new Object()).constructor)

[drm]

woei!
@ Clay!

Dan is dit dus de oplossing:

code:

Object.prototype.clone = function () {
   ret = this.constructor ();
   for ( i in this )
    ret[i] = this[i];
   return ret;
}

_edit:

Voorbeeldje:

code:

a = [1,2,65,7,345];
b = a.clone ();
b[2]='sjekko';
alert ( b );
alert ( a );

_edit2:
Werkt uiteraard weer niet met "primitieve objecten" (zal ik maar zeggen), zoals String, Regex en Number...
Maar die objecten kopieren sowieso al, dus dat gaf niets.

[Clay]

* Clay trapt even een heeeel oud topic omhoog...

In dit topic werd deze tut even genoemd, en nou wil het toeval dat die tut onlangs een behoorlijke update/uitbreiding heeft ondergaan. De nieuwe is opgedeeld in 3 onderdelen;

- de basis
- overerving
- scope

met een her en der een paar zijsprongen Deel 1 en 2 zijn grotendeels hetzelfde als de oude, met hier en daar wat meer uitleg, deel 3 is helemaal nieuw, en ook nogal abstract, dus ik hoop dat ik dat een beetje helder uitgelegd heb

De link:
http://www.xs4all.nl/~peterned/tutorial/

evt. is die binnenkort ook in .doc vorm beschikbaar (~ 20 pag.), mede omdat ik hiervoor m'n laatste vrije studiepunten heb gekregen

... Nu is mijn vraag of jullie hem willen lezen, en vervolgens kunnen aangeven wat er wel en niet goed aan is, om zo tot een uiteindelijke versie te komen waar iedereen wat aan heeft.

En dat wil ik graag nog een keer vragen

[Amras]

Ik heb het laatste stuk ook doorgelezen en het ziet er netjes uit, ik heb alleen een vraagje bij die extendsFrom functie. Ik heb even hetzelfde voorbeeld gepakt als in de tutorial:

code:

function User(name) {
    this.name = name;
}
User.prototype.show = function() {
    alert(this.name);
}

function Admin(name) {
}
Admin.prototype.show = function() {
    alert("Admin " + this.name);
}

Admin = Admin.extendsFrom(User);

admin = new Admin('henk');
admin.show();

Ik heb nu alleen bij Admin een functie show() ook toegevoegd. Als ik nu jouw extendsFrom functie gebruik krijg ik (volgens mij) niet het gewenste resultaat 'Admin henk' maar gewoon 'henk'. Ik heb jouw extendsFrom functie dan voor mezelf ook veranderd naar:

code:

Function.prototype.extendsFrom = function(Super) {
    var Self = this;
    var Func = function() {
            Super.apply(this, arguments);
            Self.apply(this, arguments);
    }
    Func.prototype = new Super();
    for(var p in Self.prototype) {
        Func.prototype[p] = Self.prototype[p];
    }
    return Func;
}

Commentaar hierop is natuurlijk welkom (vooral als het niet klopt natuurlijk )

EDIT: Sorry, ik zie dus dat je de regel:

code:

Admin = Admin.extendsFrom(User);

gelijk achter de constructor moet prakken, anders overschrijf je je functies van het Admin prototype. Misschien handig om dit in de tutorial te vermelden.

[ Voor 15% gewijzigd door Amras op 20-03-2004 12:33 ]

[Clay]

code:

Function.prototype.extendsFrom = function(Super) {
    var Self = this;
    var Func = function() {
            Super.apply(this, arguments);
            Self.apply(this, arguments);
    }
    Func.prototype = new Super();
    for(var p in Self.prototype) {
        Func.prototype[p] = Self.prototype[p];
    }
    return Func;
}

Je moet inderdaad de extendsFrom direct na de constructor aanroepen, en daarna weer extra dingen aan je nieuwe object prototypen. Anders zou je idd een dergelijke for loop nodig hebben. Da's misschien inderdaad wel ff een punt om te noemen ja Al vind ik het wel logischer dat je eerst gaat extenden, en dan pas het object gaat uitbreiden, niet andersom. En dan heb je die for loop dus niet nodig

[Amras]

Als je dat erbij vermeld moet het goedkomen denk ik ja, en het is idd ook wel logisch natuurlijk

Verder is er nog een reden om die for-lus er wel bij te zetten, namelijk in het geval van deze notatie (die ik zelf nu gebruik):

code:

function Admin() {
}
Admin.prototype = {
    bla: function() {

    }
}

In dit geval zou je dus je prototype overschrijven nadat je de extendsFrom hebt gedaan en ben je de functies van User kwijt. Als je die for-lus erin zet en pas na je prototype definitie gaat extenden gaat het zo ook goed.

[Clay]

idd. En dat is idd wel een erg makkelijke en compacte manier van prototypes definieren in Moz kan je zo zelfs op een dergelijke manier getters en setters maken van properties (al errort IE daar finaal op). En wat ook aan het einde van de tut staat;

Let wel, dit is maar 1 manier om dit te doen. Er zijn er vast ook meer, zoals alles eigenlijk wel op meerdere manieren te doen is.

Dat zie je nu ook weer

[Juup]

Hey Clay

JavaScript:

var a = [1,2,3,4]; // Array

Hier houdt a een referentie naar een anoniem array vast, a is dus geen array. Dat mag je iets duidelijker vermelden om verwarring te voorkomen. Als a een array was en b = a; dan heeft b wel een eigen kopie van het array.