[JS] Prototype beginners-vraag

[Verwijderd]

Ik ben een tijdje geleden begonnen met een object georiënteerde benadering van Javascript en vraag me af of het volgende überhaupt mogelijk is (ik heb al tig manieren geprobeerd, maar helaas):

code:

function IeHtmlEditor( _htmlElement ) {
    this.htmlElement = _htmlElement;
}

IeHtmlEditor.prototype.strong = strong;             

function strong() {
    execCmd( 'bold' );
}

function execCmd( command ) {
    // stukje code hier wat een stukje tekst bold maakt
}

htmlEditor1 = new IeHtmlEditor( 'naam van editor'  );

Een knop die de tekst bold moet maken gebruikt "htmlEditor1.strong()". Dat werkt in zoverre dat binnen de functie strong() "this.htmlElement" gewoon een waarde heeft.

Wat ik nu graag zou willen is dat function vervolgens execCmd() aanroept en daar een stukje code uitvoert. Dat krijg ik nog wel voor elkaar, wat echter niet wil lukken is op de een-of-andere manier binnen execCmd() bij de waarde van this.htmlElement te kunnen. Is dit überhaupt mogelijk, of snap ik het hele principe niet Bij alles wat ik erover heb gelezen (de helft van de Google-links) wordt dit nergens gebruikt, wat m'n vermoeden sterkt dat ik iets wil wat niet op deze manier kan.

Is er een andere manier om dit netjes te doen als het niet anders kan? Ik wil het graag op een soortgelijke manier omdat er meerdere html editors in een pagina kunnen zitten.

(Ik heb geprobeerd "IeHtmlEditor.prototype.execCmd = execCmd;" en/of "strong.prototype.execCmd = execCmd;" toe te voegen (op goed geluk), maar dit heeft niet het beoogde resultaat.

[André]

code:

function IeHtmlEditor( _htmlElement ) {
    this.htmlElement = _htmlElement;
}

IeHtmlEditor.prototype.strong = strong;
IeHtmlEditor.prototype.execCmd = execCmd;

function strong() {
    this.execCmd( 'bold' );
}

function execCmd( command ) {
  // stukje code hier wat een stukje tekst bold maakt
}

htmlEditor1 = new IeHtmlEditor( 'naam van editor'  );

Zo?

[Verwijderd]

ja dat kan wel, met apply geloof ik, maar omdat het voor mij al weer een hele tijd terug was dat ik hiermee stoeide, stuur ik je ff door naar een goeie tut van clay (anders zeg ik het zelf nog fout)

http://www.xs4all.nl/~peterned/tutorial/index.html

(onderaan gaat het verder en vervolgens weer verder, denk dat je daar moet wezen:
http://www.xs4all.nl/~peterned/tutorial/scope.html

dus ik vermoed:

JavaScript:

function strong() {
    execCmd.apply(this, 'bold' );
}

[ Voor 14% gewijzigd door Verwijderd op 12-04-2005 16:51 ]

[Verwijderd]

André schreef op dinsdag 12 april 2005 @ 16:45:
Zo?

Die had ik ook al geprobeerd, maar helaas

[Verwijderd]

Verwijderd schreef op dinsdag 12 april 2005 @ 16:48:
ja dat kan wel, met apply geloof ik, maar omdat het voor mij al weer een hele tijd terug was dat ik hiermee stoeide, stuur ik je ff door naar een goeie tut van clay (anders zeg ik het zelf nog fout)

http://www.xs4all.nl/~peterned/tutorial/index.html

(onderaan gaat het verder en vervolgens weer verder, denk dat je daar moet wezen:
http://www.xs4all.nl/~peterned/tutorial/scope.html

dus ik vermoed:

JavaScript:

function strong() {
    execCmd.apply(this, 'bold' );
}

Daar ga ik eens naar kijken, bedankt!

[André]

Verwijderd schreef op dinsdag 12 april 2005 @ 16:51:
[...]

Die had ik ook al geprobeerd, maar helaas

Bij mij werkt het zo wel:

code:

function IeHtmlEditor( _htmlElement )
{
  this.htmlElement = _htmlElement;
}

IeHtmlEditor.prototype.strong = strong;
IeHtmlEditor.prototype.execCmd = eCmd;

function strong()
{
  this.execCmd( 'bold' );
}

function eCmd( command )
{
  // stukje code hier wat een stukje tekst bold maakt
  alert(this.htmlElement)
}

htmlEditor1 = new IeHtmlEditor('naam van editor');    
htmlEditor1.strong();

Ik krijg keurig de naam te zien

[ Voor 6% gewijzigd door André op 12-04-2005 17:00 ]

[Verwijderd]

André schreef op dinsdag 12 april 2005 @ 16:59:
[...]

Bij mij werkt het zo wel:

Ik krijg keurig de naam te zien

Sorry, mijn fout. Ik had professioneel de "this" voor execCmd over het hoofd gezien

[Sappie]

@André: Jij vervangt de custom methode "strong" van de ts door de custom methode "eCmd".

edit:
ow.. toch niet helemaal goed gelezen, want das niet wat je doet.. maargoed, onderstaande slaat desondanks toch nog wel ergens op denk

Wat de TS wil (maar dus niet slim is, zoals Clay hieronder aangeeft) is een (globale) functie aanroepen die geen onderdeel is van het htmleditor object waarbij die functie nog wel kan beschikken over een referentie naar de instantie van het object in de vorm van "this". (zeg ik t nou goed? )

Dit lijkt mij, na de tutorial van clay even vluchtig doorgelezen te hebben, idd mogelijk met apply zoals mophor aangeeft.

[ Voor 32% gewijzigd door Sappie op 12-04-2005 17:14 ]

[Clay]

Apply gaat wel een beetje ver hiervoor denk ik je kan de functies immers gewoon aan je prototype hangen. Ik zou de functies ook direct aan de prototype koppelen, en niet via aan globale functie, dus eerder:

code:

IeHtmlEditor.prototype.strong = function() { ... }
IeHtmlEditor.prototype.execCmd = function() { ... }

of zelfs

code:

IeHtmlEditor.prototype = {
   strong:function(){ ... }, 
   execCmd:function( ... ) 
}

Dan loop je ook niet risico dat verschillende objecten elkaars functies overschrijven, en het "vervuilt" je code niet met grote aantallen globale functies, die anders bv nog met window.strong() aan te roepen zijn, wat nergens op zou slaan.

[Verwijderd]

Clay schreef op dinsdag 12 april 2005 @ 17:11:
Apply gaat wel een beetje ver hiervoor denk ik je kan de functies immers gewoon aan je prototype hangen. Ik zou de functies ook direct aan de prototype koppelen, en niet via aan globale functie, dus eerder:

code:

IeHtmlEditor.prototype.strong = function() { ... }
IeHtmlEditor.prototype.execCmd = function() { ... }

of zelfs

code:

IeHtmlEditor.prototype = {
   strong:function(){ ... }, 
   execCmd:function( ... ) 
}

Dan loop je ook niet risico dat verschillende objecten elkaars functies overschrijven, en het "vervuilt" je code niet met grote aantallen globale functies, die anders bv nog met window.strong() aan te roepen zijn, wat nergens op zou slaan.

Klinkt logisch Clay. Altijd makkelijk die goeroes op GoT; m'n koppijn wordt zienderogen minder

[Verwijderd]

Om maar echt even de newbie uit te hangen het volgende (staat redelijk los van bovenstaande):

Ik heb een textarea met als id de parameter van "new IeHtmlEditor('textarea_id');". Nu wil ik binnen execCmd de focus binnen deze teaxtarea zetten (en tekst bold maken, etc). Ondanks dat "this.htmlElement" een waarde heeft wil "this.htmlElement.focus()" niet werken, net als "document.getElementById( this.htmlElement)". Dat eerste kan ik nog inkomen, maar de tweede zou het toch gewoon moeten doen

De bewuste error: "this.htmlElement.focus is not a function" (lang leve de fatsoenlijke foutmeldingen in Firefox).

[Amras]

Verwijderd schreef op dinsdag 12 april 2005 @ 17:21:
Om maar echt even de newbie uit te hangen het volgende (staat redelijk los van bovenstaande):

Ik heb een textarea met als id de parameter van "new IeHtmlEditor('textarea_id');". Nu wil ik binnen execCmd de focus binnen deze teaxtarea zetten (en tekst bold maken, etc). Ondanks dat "this.htmlElement" een waarde heeft wil "this.htmlElement.focus()" niet werken, net als "document.getElementById( this.htmlElement)". Dat eerste kan ik nog inkomen, maar de tweede zou het toch gewoon moeten doen

De bewuste error: "this.htmlElement.focus is not a function" (lang leve de fatsoenlijke foutmeldingen in Firefox).

Dat focus() niet werkt lijkt me niet erg gek. Je roept focus() tegen een id, wat gewoon een string is. Je moet dus eerst het textarea element ophalen. Dit zou gewoon moeten werken:

JavaScript:

document.getElementById(this.htmlElement).focus();

[Verwijderd]

Amras schreef op dinsdag 12 april 2005 @ 18:07:
[...]


Dat focus() niet werkt lijkt me niet erg gek. Je roept focus() tegen een id, wat gewoon een string is. Je moet dus eerst het textarea element ophalen. Dit zou gewoon moeten werken:

JavaScript:

document.getElementById(this.htmlElement).focus();

Zoals ik al zei levert dat de bewuste error op

Error: document.getElementById(this.htmlElement).focus is not a function

Aaargh, wederom mijn fout

Ik was even in Firefox aan het testen, en daar is die div niet editable en kan er dus ook geen focus op

Excuus Amras

[ Voor 24% gewijzigd door Verwijderd op 12-04-2005 19:06 ]