[JavaScript] Class functie op een object event

[Verwijderd]

Luitjes,

Ter verduidelijking, ben bezig met een AJAX gericht CMS te maken. Hiervoor ben ik momenteel een tooltip aan het maken, hetzelfde idee als de title property van een HTML element, maar dan wat uitgebreider. (dik gedrukt, meerdere regels, etc) Heb dit gemaakt om te kijken of het ook echt werkte en dat deed het. Nu was de manier nogal omslachtig en niet echt netjes. Heb het geheel omgezet naar een tooltip class. Die ziet er als volgt uit:

code:

function tooltip(id, text)
{
    this.id   = id;
    this.div  = null;
    this.text = text;
    
    this.show = function(x, y)
    {
        // show div
        this.div.innerHTML      = this.text;
        this.div.style.top      = x + 23 + 'px';
        this.div.style.left    = y + 10 + 'px';
        this.div.style.visibility = 'visible';
    }
    
    this.hide = function()
    {
        // hide div
        this.div.innerHTML      = '';
        this.div.style.visibility = 'hidden';
    }
    
    if(typeof(document.getElementById(this.id)) === 'object')
    {
        // exsisting div
        this.div = document.getElementById(this.id);
    }
    else
    {
        // new div
        this.div                  = document.createElement('div');
        this.div.id          = this.id;
        this.div.style.visibility = 'hidden';

        try
        {
            // add div
            document.body.appendChild(this.div);
        }
        catch(e){}
    }
}

In de body zit een onload die de functie init() aanroept. In deze init functie wordt een tooltip object aangemaakt. Tevens wordt hier het HTML element, aan de hand van een id, aangeroepen waar de tooltip op moet verschijnen. Op deze manier wil ik alle HTML events uit de statische HTML code halen om het geheel overzichtelijk en wat meer controleerbaar te houden. Het liefst houd ik ook het HTML element buiten de class, vandaar deze aanpak. Het HTML element id meegeven aan de tooltip class en de events intern regelen is een werkende optie, maar niet de mooiste.

code:

function init()
{
    var tool = new tooltip('tooltip', TOOLTIP_SETTINGS);
    
    var sett = document.getElementById('settings');
        sett.onmouseover = tool.show();
        sett.onmouseout  = tool.hide();
        sett.onblur   = sett.onmouseout;
}

Nu het probleem, het werkt niet. En waarom werkt het niet? Bij het laden van de pagina verschijnt er een error met de melding "this.div = null" en die komt uit regel 10 van de tooltip class. Ik vermoed dat de functie tooltip.show al eens aangeroepen wordt als deze wordt toegewezen aan het onmouseover event van het HTML element. Door wat te alert'en in de tooltip class komt er naar voren dat bij het aanmaken van de class het DIV met het id tooltip al schijnt te bestaan, terwijl die niet in de HTML code voorkomt. Er wordt dus (zoals te zien in het laatste if-statement) geen nieuw DIV aangemaakt, maar de huidige wordt gebruikt. Die, na het aanroepen van de tooltip class, ineens verdwenen is. Vandaar dat this.div in de tooltip class null is. Maar, waarom wordt het div met het id tooltip dan toch gevonden?

Waar-o-waar ga ik de fout in?

code:

..
<a id='settings' href='#'>Instellingen</a>
..

[ Voor 8% gewijzigd door Verwijderd op 03-02-2009 18:31 . Reden: Typo's.. deel 55! ]

[Verwijderd]

JavaScript:

sett.onmouseover = tool.show();
sett.onmouseout  = tool.hide();

JavaScript:

sett.onmouseover = tool.show;
sett.onmouseout  = tool.hide;

In het eerste stukje code wordt de tool.show method direct aangeroepen. De return value van die aanroep wordt aan sett.onmouseover toegekend. Dat is verkeerd. Je wilt dat sett.onmouseover een functie bevat. De tool.show "property" is een pointer naar de method.

[Verwijderd]

Mijn dank, dat is deel 1. (al eens eerder tegen die fout opgelopen, flink over het hoofd gezien..)

Nu komt dezelfde error die ik beschreef voor als je over de link gaat (tool.show functie) en als je de link verlaat (tooltip.hide functie). De class onthoudt op de één of andere manier niet het id van het HTML element lijkt het..?!

Ps: is er in JavaScript een soort constructor class (ala PHP) die altijd als eerste aangeroepen wordt binnen een class?

[ Voor 15% gewijzigd door Verwijderd op 03-02-2009 18:41 ]

[Cartman!]

Standaard niet zover ik weet maar diverse frameworks hebben dit wel ingebouwd. Gebruik zelf vaak MooTools en daarin werkt het ongeveer zo (even uit mn hoofd):

code:

var class = new Class({
variabele: null,
initialize: function()
{
// construct
this.variabele = 'waarde';
}
});

[Verwijderd]

Verwijderd schreef op dinsdag 03 februari 2009 @ 18:33:

JavaScript:

sett.onmouseover = tool.show;
sett.onmouseout  = tool.hide;

Het probleem hiermee is dat je de functie tool.show in de verkeerde scope bind aan sett. Je wilt de scope van tool maar je krijgt de scope van sett. Met scope bedoel ik hetgeen waar het keyword this naar verwijst. Zo zou het wel werken:

JavaScript:

sett.onmouseover = function() { tool.show(); }
sett.onmouseout  = function() { tool.hide(); }

Ps: is er in JavaScript een soort constructor class (ala PHP) die altijd als eerste aangeroepen wordt binnen een class?

Nee, een constructor is een standaardfunctie. Niets bijzonders. Het bijzondere ligt hem in de aanroep van de functie: met het keyword new. Je kunt binnen een constructor dus ook gewoon logica stoppen die wordt uitgevoerd bij het aanroepen, zoals jij al doet met je if/else.

[Verwijderd]

Tnx, dat brengt mij weer een stukje verder. Waar 'ie nu nog op vast loopt is het volgende: bij het aanroepen van de class wordt er gecontroleerd of de div met dat id al bestaat, zo ja, die gebruiken, zo nee, een nieuwe maken.

Maar, telkens bij het aanroepen van de class wordt de div als bestaand gezien, dus er wordt er geen een aangemaakt. Als ik het hard doe en de regel:

if(typeof(document.getElementById(this.id)) === 'object')

verander in (dus dat de div altijd aangemaakt wordt):

if(typeof(document.getElementById(this.id)) !== 'object')

wordt de div later wel herkend. Rara?

[crisp]

waarom zo moeilijk doen met typeof? getElementById geeft gewoon null terug als de div niet bestaat, da's toch voldoende? (en doe voor de gein eens alert(typeof(null)) )

[RobIII]

Verwijderd schreef op dinsdag 03 februari 2009 @ 21:10:
if(typeof(document.getElementById(this.id)) === 'object')

Met === vergelijk je het type én waarde. Je vergelijkt nu de string "object" terwijl je het type "object" wil vergelijken. Je wil dus een =-teken minder.

Verwijderd schreef op dinsdag 03 februari 2009 @ 21:10:
if(typeof(document.getElementById(this.id)) !== 'object')

Omdat je de voorwaarde nu omdraait

[ Voor 7% gewijzigd door RobIII op 03-02-2009 21:25 ]

[Verwijderd]

You got me.

Typeof(null) is inderdaad ook een object. Weird, maar nooit geweten. Nu werkt ie goed, bedankt voor het meedenken!

Nu ik het topic toch geopend heb, nog één vraag. Hoe doen jullie dat bij veel object events, proppen jullie die in de HTML code of halen jullie die op de één of andere manier erbuiten?

[crisp]

Verwijderd schreef op dinsdag 03 februari 2009 @ 21:27:
[...]
Nu ik het topic toch geopend heb, nog één vraag. Hoe doen jullie dat bij veel object events, proppen jullie die in de HTML code of halen jullie die op de één of andere manier erbuiten?

Het ligt er een beetje aan; behaviour die zo vroeg mogelijk gekoppelt moet worden (omdat het bijvoorbeeld ook invloed heeft op de layout - bijvoorbeeld een inklap menu oid) probeer ik zo vroeg mogelijk te koppelen, dus dat kan een inline stukje script zijn vlak na het (containing) element. Andere behaviours koppel ik meestal onDomContentLoaded via een initialisatie functie.

Veel soortgelijke eventhandlers kan je overigens ook delegeren naar een enkel event op een containing element (bijvoorbeeld de body). Ik zal eens kijken of ik een voorbeeldje kan maken aan de hand van jouw tooltip class.

[crisp]

En zelf een opzetje gemaakt: http://therealcrisp.xs4all.nl/exp/tooltip.html (niet IE-proof )

Hier heb ik Tooltip een singleton gemaakt die bij initialisatie ook kijkt naar elementen met een class 'tooltip' en daarvan het data-tooltip attribuut (HTML5 \o/) gebruikt als content
Verder maar 1 eventhandler

Uiteraard kan je ook in die eventhandler de class checken en vervolgens het data-tooltip attribuut uitlezen (dan kan je in principe met enkel een eventhandler wegkomen), maar dit is iets flexibeler en meer performant

[nika]

f.y.i. ook niet "safari proof"

[crisp]

nika schreef op woensdag 04 februari 2009 @ 00:00:
f.y.i. ook niet "safari proof"

true, eigenlijk Firefox-only aangezien ik gebruik maak van Array generics zonder crossbrowser fallback

[nika]

Houd je er verder rekening mee dat het gebruik van custom attributes niet W3C compliant is (misschien in HTML 5, maar iig. niet in XHTML1, XHTML1.1 en HTML 4.1)?

Just a thought...

[ Voor 6% gewijzigd door nika op 04-02-2009 00:06 ]

[crisp]

nika schreef op woensdag 04 februari 2009 @ 00:06:
Houd je er verder rekening mee dat het gebruik van custom attributes niet W3C compliant is (misschien in HTML 5, maar iig. niet in XHTML1, XHTML1.1 en HTML 4.1)?

Just a thought...

who cares? daarbij gebruik ik de HTML5 doctype en werkt het prima in hedendaagse browsers (nou ja, Firefox in dit specifieke geval ) - het is ook maar een demo...

[Verwijderd]

In ieder geval bedankt voor de info / demo.

Genoeg lees / zoek-uit voer!

[nika]

who cares?

[off topic]
Well...me , maar daarnaast een enorme bak mensen. Ik zou zeggen zoek eens een post op tweakers.net waarbij een nieuwe IE of FF versie wordt aangekondigd en tel het aantal reacties aangaande de implementatie van web stadaarden. Of liever gezegd het aantal reactie waarin die nieuwe verise van IE of FF vervloekt wordt voor het nog steeds niet goed implementeren van web standaarden).
[/off topic]

Wil alleen maar zeggen dat theFlyingV moet oppassen of hij het wel op zo'n manier wil implementeren. Bovendien, als hij toch een AJAX CMS maakt, waarom dan ook niet dynamically loaded tooltips.

Bij de weg...even deze thread killen google op jquery tooltip.

[Verwijderd]

nika schreef op woensdag 04 februari 2009 @ 00:23:
[...]
Bij de weg...even deze thread killen google op jquery tooltip.

Is een optie inderdaad, maar wil alles zelf vanaf de grond af opbouwen. Zo leer ik er namelijk meer van. (geloof zo dat de frameworks uitgebreider / handiger zijn)

[crisp]

nika schreef op woensdag 04 februari 2009 @ 00:23:
[...]


[off topic]
Well...me , maar daarnaast een enorme bak mensen. Ik zou zeggen zoek eens een post op tweakers.net waarbij een nieuwe IE of FF versie wordt aangekondigd en tel het aantal reacties aangaande de implementatie van web stadaarden. Of liever gezegd het aantal reactie waarin die nieuwe verise van IE of FF vervloekt wordt voor het nog steeds niet goed implementeren van web standaarden).
\[/off topic]

Ik ben zelf een groot voorstander van webstandaarden, maar ik ben ook pragmatisch. HTML4.x en XHTML zijn verouderd en/of niet praktisch (meer), daarom kijk ik liever vooruit. HTML5 is een grote belofte en biedt mogelijkheden die in hedendaagse browsers ook werken of werkend gemaakt kunnen worden, why not use it? Mijn demo valideert prima als HTML5

Voor de rest heb ik al eens items gewijd aan crossbrowser Array generics, aan getElementsByClassName en aan een addEvent implementatie.

[...]
Bij de weg...even deze thread killen google op jquery tooltip.

Sure, ga vooral geen javascript leren maar een heel ander dogma, include vervolgens 100KB aan library en je kan (ongeveer) hetzelfde doen met een paar regels minder code...

[Verwijderd]

nika schreef op woensdag 04 februari 2009 @ 00:06:
Houd je er verder rekening mee dat het gebruik van custom attributes niet W3C compliant is (misschien in HTML 5, maar iig. niet in XHTML1, XHTML1.1 en HTML 4.1)?

Ik zou in dat geval misschien het title attribuut gebruikt hebben, dan heb je meteen een mooie fallback voor als JavaScript niet aan staat. Voor de rest is het een mooi scriptje van crisp met een interessante implementatie van het Singleton pattern. Daar moet ik nog eens eventjes naar kijken.

[nika]

Verwijderd schreef op woensdag 04 februari 2009 @ 00:48:
[...]

Is een optie inderdaad, maar wil alles zelf vanaf de grond af opbouwen. Zo leer ik er namelijk meer van. (geloof zo dat de frameworks uitgebreider / handiger zijn)

Moet je zeker doen. Ben echter van mening (ook gezien post van Crisp hieronder) dat het goed leren werken met jQuery (of een andere javascript framework) verregaande kennis van jQuery vereist. Als ik zeg goed, bedoel ik ook echt goed, m.a.w. het schrijven van eigen extensies e.d.

include vervolgens 100KB aan library

Dat is wel heel kort door de bocht Crisp. A het is geen 100K en B krijg je voor die 50K wel iets meer functionaliteit van alleen een tooltip.

Ik zou in dat geval misschien het title attribuut gebruikt hebben, dan heb je meteen een mooie fallback voor als JavaScript

@Blues, het gebruik van het title attribuut lijkt leuk, maar het heeft als vervelende bijwerking dat de standaard tooltip altijd ook getoond wordt.

[RobIII]

nika schreef op woensdag 04 februari 2009 @ 10:30:

Dat is wel heel kort door de bocht Crisp. A het is geen 100K en B krijg je voor die 50K wel iets meer functionaliteit van alleen een tooltip.

Crisp's punt is/was dat 100 (of 50) K* includen voor een tooltip van de zotte is en dat het met een paar eigen geschreven regels code net zo makkelijk kan

* Volgens Wikipedia ergens tussen 16 en 94K

[ Voor 23% gewijzigd door RobIII op 04-02-2009 10:35 ]

[.oisyn]

crisp schreef op woensdag 04 februari 2009 @ 01:08:
en aan een [url=file:///E:/wwwroot/upload/addEvent_dean.html]addEvent[/url] implementatie.

Toch twijfel ik sterk aan de inhoud als jij als zogenaamde webguru nu een beetje files op je lokale disk hier probeert te linken

.edit:

RobIII schreef op dinsdag 03 februari 2009 @ 21:24:
[...]


Met === vergelijk je het type én waarde. Je vergelijkt nu de string "object" terwijl je het type "object" wil vergelijken. Je wil dus een =-teken minder.

Is dat zo? Typeof geeft toch gewoon een string terug? De === zou dus niet fout moeten zijn. Toch?

[ Voor 42% gewijzigd door .oisyn op 04-02-2009 12:09 ]

[crisp]

.oisyn schreef op woensdag 04 februari 2009 @ 12:06:
[...]

Toch twijfel ik sterk aan de inhoud als jij als zogenaamde webguru nu een beetje files op je lokale disk hier probeert te linken

[Verwijderd]

overigens is het iha (bij een singleton boeit het dus niet) niet zo handig je methods in de constructor te definieren. Hierdoor worden het dus instance methods ipv prototype methods, oftewel, voor elke instantie van je proto aparte instanties van je method, terwijl als je prototype methods gebruikt je maar 1 instantie van je method hebt.

[Verwijderd]

Wat werkt voor jullie (ja, dit is écht de vraag) het fijnste?

Singleton? OO met events buiten de class? Of OO met events in de class gebakken? Bij de laatste optie moet je erg rekening gaan houden met waar de scope zich op dat moment bevindt.

Ben nog beetje zoekende naar een lekkere manier om het maken. Met PHP maak ik gebruik van basis classes die zichzelf kunnen update, inserten, etc (dus het pure database werk), met, per class type, daar overheen één globale class die de algemenere taken op zich neemt en ook de basis classes heen en weer gooit naar waar die nodig zijn. De globale class kan je zien als een module waar je tegenaan kan lullen. (het zij via een URL of gewoon intern in de code)

Het voor JS het volgende ideetje in gedachte, een class maken voor een form waarmee je makkelijk dat form kan save, update, etc. Dus een class koppelen aan een HTML element. Maar, waar kan ik dan het beste de events van dat HTML element kwijt? Liever gezegd, wat is handig?

[ Voor 23% gewijzigd door Verwijderd op 04-02-2009 22:53 ]