Javascript - addEvent

[milchbaum]

Hallo,

vor kurzem habe ich beschlossen Java nicht mehr ganz so Stiefmütterlich zu behandeln und mir das Zeug mal (noch oberflächlich) angeschaut.
Nicht unbedingt hässlich aber zickig...

Zu meinem "Problem":

window.addEvent( 'domready', function(){
 $$( '.main2' ).each(function(item){
  var thisSlider = new Fx.Slide( item.getElement( '.moreInfo' ), { duration: 500 } );
  thisSlider.hide();
  item.getElement( '.divToggle' ).addEvent( 'click', function(){ thisSlider.toggle(); } );
 } );
} );

Zusammen mit Mootools erlaubt mir dieses tolle Skript Inhalte Ein- und Aus zu sliden. Funzt auch.
ABER, warum funktioniert statt

.addEvent( 'click', function(){ thisSlider.toggle(); });

nicht das:

.addEvent( 'click', slidi);
function slidi(e) { alert(e); e.toggle(); }

?

Der "alert" wird ausgelöst aber "toggle" macht nix...

Ist bestimmt eine einfache Syntaxfrage, hab im Netz aber nix gescheites gefunden
Mag mir jemand auf die Sprünge helfen?

 

[DubiDuh]

soweit ich das sehe ist die Variable e ein Event-Object. thisSlider aber ein Slider object. Ersetze mal e.toggle() durch thisSlider.toggle()

 

[karolherbst]

kurze Tipps und Tricks zu JS

In JavaScript gibt es 3 Arten Variablen zu deklarieren:

i = 5; // ist gleichgesetzt mit window.i = 5, hier wird eine variable ins window object reingehängt.

var i = 5; // lokal angelegte Variable, in einem Objekt erzeuger (Konstruktoren gibt es so nicht) ist dies eine private Variable, auf die man nur durch Objekt methoden! zugreifen kann, anders nicht. Oder man befindet sich im Gültigkeitsbereich der Variable

this.i = 5; // wird bei Objekterzeugung verwendet. Variable kann über obj.i direkt angesprochen werden.

Genauso verhält es sich auch mit Funktionen, die in JS nichts anderes sind als Objekte, die zusätzlich was können.

test = function(){ }; //window object. Aufruf über window.test
function test(){ }; //private funktion im Gültigkeitsbereich
var test = function(){ } //auch private funktion, ist identisch mit dem 2ten
this.test = function(){ } //methode eines objekte auf das über obj.test() zugegriffen werden kann.


BTW: verwechsel bitte Java nie mit JavaScript, das ist eine Schande für JavaScript. JavaScript ist strikt nach Prototypen aufgebaut und kennt keine Klassen. Dies hat immense Vorteile, viele versuchen da immer Nachteile reinzuintepretieren, aber diese ergeben oft keinen Sinn, da Vererbung, Objekterstellung usw. alles auch möglich ist. JavaScript ist von der Sprache her, ziemlich mächtig. Da muss Java noch ziemlich aufholen. Java hat nur den Vorteil, dass es eine ziemlich große Bibliothek besitzt, aber das wars auch schon wieder.

Die meistne JavaScript Interpreter können häufig auch auf später deklarierte Dinge zugreifen, was ich aber in der Regel niemals empfehlen würde. Was du in JavaScript immer beachten musst, sind die Übergabewerte und ob du eine Funktion als Objekt oder als Aufruf übergibst. Du übergibst in einer Annahme die Funktion als Objekt, dessen Inhalt dann einfach aufgerufen wird. (Der Inhalt, nicht die Funktion). Die Frage bleibt, wo übergibst du eigentlich das Event?

PS:Habe ich schonmal erwähnt, dass ich JQuery nicht gut finde, da es auf die Datenkapselung einen scheiß gibt? Generell RIAs in JavaScript machen zu wollen und das meiste per PHP und HTML direkt zu erstellen finde ich sehr widersprüchlich. Wozu gibt es onClick als Attribut für Tags? Warum kann man in JS Tags erzeugen und in das Dokument einspeisen?

Ach ist mir jetzt auch egal. Ich empfehle nicht mit JQuery schicke Effekte zu erzeugen, dass geht auf anderen Wege viel einfacher, mit mehr OOP und nicht so einem großen Leistungsverlust.

 

[milchbaum]

soweit ich das sehe ist die Variable e ein Event-Object. thisSlider aber ein Slider object. Ersetze mal e.toggle() durch thisSlider.toggle()

Danke für die Antwort. Funktioniert aber nicht
Hmm, wie gesagt ich kenn mich da nicht so gut aus... aber ich hatte gehofft, das

.addEvent( 'click', slidi);

das betroffene Objekt (das betroffene DIV ?) übergibt und dieses dann hier

function slidi(e) { alert(e); e.toggle(); }

als e auftaucht...
Da der Slide ja mehrere DIV´s betreffen kann muss ich ja irgendwie übergeben welches ich den nun meine. Aber eben das klappt nicht.

@Karolherbst

Ähm.. wow. Ich lese mir das gleich nochmal in Ruhe durch, hab aber nix gefunden was mich bei meinem "Problem" weiterbringt. Wahrscheinlich hast du es in den Tiefen des Textes versteckt, damit ich mein Hirn anstrengen muss ... Wie gemein.

Ich benutze im übrigen MooTools und nicht JQuery, was dir wohl nicht den Wind aus den Segeln nehmen wird.

---EDIT::

Ah, gut... lesen bildet doch ^^

function slidi(){ thisSlider.toggle(); }

window.addEvent( 'domready', function(){  $$( '.main2' ).each(function(item){ 
thisSlider = new Fx.Slide( item.getElement( '.moreInfo' ), { duration: 500 } );   
thisSlider.hide();   
item.getElement( '.divToggle' ).addEvent( 'click', slidi );  } ); } );

funktioniert.
Ist eigentlich logisch, wenn man weiß was dieses "var" für eine Rolle spielt ^^

Danke euch beiden.

---EDIT
Nun funktioniert es allerdings nicht mit mehreren DIV´s (main2) ^^Naja, ich denk ich muss mir erstmal die Basics anschauen.

 

[karolherbst]

fast alle JS Bibliotheken sind schlimm. da Ist es egal, ob man JQuery oder MooTools meint. Sobald man mit privaten Variablen arbeitet, kannst du MooTools fast vergessen. Als Beispiel: Wie soll MooTools ein Objekt kopieren, wenn MooTools keinen Zugriff auf die private Variablen hat?
Diese Bibliotheken setzen also voraus ohne Datenkapselung OOP zu programmieren, was ein Widerspruch in sich ist. Darum ist MooTools keine OOP Bibliothek, da die Datenkapselung dort keine Beachtung findet.
MooTools hat vlt paar Funktionen, die ganz nett sind, aber das wars dann auch wieder. Wahrscheinlich bin ich hier wieder zu streng, aber wer sich als eine objektorientierte JS Framework bezeichnet, von dem darf ich doch auch erwarten, dass Datenkapselung möglich ist, oder?

 

[milchbaum]

Ich würde wirklich gerne mit dir darüber diskutieren, allerdings hatte ich noch nie etwas mit OOP und/oder Frameworks zu tun. Was es mit Datenkapselung auf sich hat kann ich nur raten... Aber für so jemanden wie mich der keine Ahnung von der Materie hat, ist es schon ganz praktisch sich ein Skript (MooTool, JQuery oder was auch immer) aus dem Netz zu laden, gegebenfalls anzupassen und ab die Post.

Aber ich antworte mal mit... Ja.

Du darfst mich aber gerne überzeugen und mir ein Skript zeigen, das ohne Framework auskommt und DIV´s schön auf und zu sliden lässt (mehrere verschiedene). Ich bin nicht unbedingt auf Framworks fixiert, allerdings lief alles andere was ich gefunden habe, nicht wirklich rund (was diese Funktion betrifft).

 

[karolherbst]

tja, da kann ich dir tatsächlich etwas zeigen aber nicht heute, ich müsste dir das auch noch etwas zusammenbasteln, da ich da was ganz schönes habe.