Wie referenziert man konkrete Objekte aus den Eventhandlern?

[0x7F800000]

Hallo allerseits!

Ich bin neu hier, komme eigentlich aus der Java Ecke, muss mich aber momentan ein wenig mit JavaScript rumprügeln, mit dem ich bisher leider nicht wirklich klarkomme

Eine meinem Status entsprechend anfängermäßige Frage habe ich erstmal:

Wie referenziere ich irgendwelche konkrete Objekte aus den Event-Handlern?
Angenommen ich habe irgendeine Klasse definiert und eine Instanz davon erzeugt:
[Javascript]
function X(){
//irgendeine eigenschaft von X
this.x=0;

//ein input-textfeld, durch das die x-eigenschaft verändert werden soll
this.input=document.createElement(„input“);
this.input.setAttribute(„type“,„text“);
this.input.setAttribute(„onchange“,„javascript:???“);
}

var x_instance=new X();
document.getElementById(„irgendeinTollesFormular“).appendChild(x_instance.input);
[/Javascript]
Könnte mir jemand einen Tipp geben, was ich da in den event-handler „onchange“ reinschreiben soll, damit man damit auf die jeweilige instanz von X zugreifen kann, um die x-eigenschaft abzuändern?

Habe zwar versucht rumzugoogln, aber diesmal kommen da nur zehn Millionen seiten, wo beschrieben wird, wie man bei einem Mausklick ein „HalloWelt“-Fensterchen aufpoppen lässt. Wie man diese Event-Handler für irgendetwas Sinnvolles verwendet habe ich da aber leider nicht entdecken können

Bin für Lösungsvorschläge, Links & Literaturempfehlungen dankbar.
Greetz, Andrey

edit: uii, schicke code-tags habt ihr hier
edit2: ach je, ich merk grad: 11 Themen in diesem Subforum insgesamt^^ Dann sollte ich vielleicht doch im SELFHTML-Forum vorbeischauen, aber Abonemment dieses Themas hier stelle ich auf Email-Benachrichtigung, wenn ihr also etwas antwortet werde ich das schon mitbekommen

[VuuRWerK]

Meinst Du mit instanz von X nur das HTML-Element welches das JavaScript Event auslöst? Dann geht folgendes:

[Javascript]
function f(e) {
// bei events wo eine funktion ausgeführt wird, wird ein Event-Objekt mit übergeben, hier ‚e‘ genannt
e.target.style.backgroundColor = ‚#F00‘;
}
// […]
this.input.onclick = f;
// […]
[/Javascript]
Mehr Infos was für Properties das Event-Objekt noch hat findest Du hier: Javascript - Event properties

Gut Schuß
VuuRWerK

P.S.: Nur weil im JavaScript-Forum noch nicht soviele Posts sind heist es ja nicht das Dir hier deswegen nicht geholfen werden kann oder das es mehrere Tage dauert bis was kommt

[0x7F800000]

[QUOTE=VuuRWerK]Meinst Du mit instanz von X nur das HTML-Element welches das JavaScript Event auslöst?
[/QUOTE]
nein. Instanz von X ist kein HTML-Element oder irgendsoein element des DOM’s oder sowas. Es ist einfach nur ein Objekt. Es hat keinerlei graphische repräsentation, es löst auch keine ereignisse aus. Es hängt einfach so im speicher herum und verwaltet irgendwas im hintergrund. Nun will ich aber dass ein textfeld bei veränderungen seinen inhalt an diese instanz von X schickt. Wie stelle ich das an, wenn die instanz von X keinen „Namen“ hat? Dieses merkwürdige scriptdingsbums will ja irgendeine zeichenkette im Attribut des textfeldes haben.

Bei Java wäre ja alles sonnenklar: da werden normale Listener angehängt und fertig, man könnte also entweder in X einen Listener implementieren und an dieses Textfeld anhängen, oder in einem separaten Listener eine referenz auf X abspeichern, und dann jederzeit veränderungen an X weiterleiten.

Aber in JavaScript hab ich keine Listener, keine Interfaces, keine Referenzen, sondern nur diese doofe Zeichenkette:
[XML][/XML]
Und ich raff eben nicht, was ich da mit dieser zeichenkette machen soll

@"VuuRWerK"

[Javascript]
function f(e) {
// bei events wo eine funktion ausgeführt wird, wird ein Event-Objekt mit übergeben, hier ‚e‘ genannt
e.target.style.backgroundColor = ‚#F00‘;
}
// […]
this.input.onclick = f;
// […]
[/Javascript]

ich habe hier inzwischen rausgefunden, dass man anscheinend über „this“ direkt auf das Element zugreifen kann, das man bei AWT o.ä. ungefähr mit „Event.getSource()“ bekommen würde. Das ist zwar gewissermaßen praktisch, aber auf X kann ich damit auch nicht zugreifen…

P.S.: Nur weil im JavaScript-Forum noch nicht soviele Posts sind heist es ja nicht das Dir hier deswegen nicht geholfen werden kann oder das es mehrere Tage dauert bis was kommt

Joah, dass hier welche sind habe ich schon bemerkt, nur speziell der JS-unterforum erfreut sich hier anscheinend keiner allzu gewaltigen Beliebtheit, naja, vielleicht wird’s ja noch

Danke für die Antwort schonmal.

[christoph]

[QUOTE=0x7F800000]Aber in JavaScript hab ich keine Listener, keine Interfaces, keine Referenzen, sondern nur diese doofe Zeichenkette:
[XML][/XML]
Und ich raff eben nicht, was ich da mit dieser zeichenkette machen soll [/QUOTE]

Ich hoffe das mit dem onchange=„hallo X, hört du mich, mach mal was…?“ ist nicht ernst gemeint ^^
onchange ist ein EventHandler und alles was in diesem Attribut steht ist reiner JavaScript-Code!

Du kannst onchange eben direkt über den HTML-Code oder wahlweise auch über JavaScript mit Code füttern.
Dieser Code hier ist gestetet und funktionsfähig:
[Javascript]

Page title // <![CDATA[ function X() { //irgendeine eigenschaft von X this.x = 0;

			//ein input-textfeld, durch das die x-eigenschaft verändert werden soll
			this.input = document.createElement( "input" );
			this.input.setAttribute( "type", "text" );
			this.input.onchange = function( e ) {
				window.alert( e.type );
			};
		}
		
		function createForm() {
			var x_instance = new X();
			document.getElementById( "irgendeinTollesFormular" ).appendChild( x_instance.input );
		}
		// ]]>
	</script>
</head>
<body onload="createForm();">
	<form id="irgendeinTollesFormular" method="post">
	
	</form>
</body>

[/Javascript]

[0x7F800000]

In deinem Beispiel gibt es schon wieder keine referenz auf X…

Aber das ist egal, ich denke ich hab’s hinbekommen.
Mein Vorschlag wäre in etwa der folgende:
[XML]

<?xml version="1.0" encoding="UTF-8"?> simple mvc .bar{ background-color: green; text-align: center; } // <![CDATA[ //Model: speichert modelData, benachrichtigt die observers bei änderungen function Model() { this.modelData = 0; this.observers = new Array(); }

		Model.prototype.addObserver = function(obs){
			this.observers.push(obs);
			obs.model=this;
		}
		
		Model.prototype.notifyObservers = function(){
			for(i in this.observers){
				this.observers**.update();
			}
		}
		
		Model.prototype.setModelData=function(modelData){
			this.modelData=modelData;
			this.notifyObservers();
		}
		
		//model und die components:
		var model;
		var textView;
		var barView;
		var input;
		
		//funktion die nach dem laden des documents alles aufbaut
		function init(){
			
			model=new Model();
			
			//View: irgendwelche inputs, die zur ausgabe missbraucht werden oder sonstwas
			//solange es "update" implementiert, und dort auf "this.model" zugreift, eignet es sich wegen duck-typing als Observer
			textView=document.createElement("input");
			textView.setAttribute("type","text");
			textView.setAttribute("readonly","readonly");
			textView.update = function(){
				this.value=this.model.modelData;
			}
			
			barView=document.createElement("div");
			barView.appendChild(document.createTextNode("bar"));
			barView.setAttribute("class","bar");
			barView.update = function(){
				this.style.width = this.model.modelData+"em";
			}
			
			model.addObserver(textView);
			model.addObserver(barView);
			
			//Controller: eingabetextfeld und auf eine einzige methode entarteter controller
			input=document.createElement("input");
			input.setAttribute("type","text");
			input.model=model;
			input.onchange = function(e){
				this.model.setModelData(parseInt(this.value));
			}
			input.onkeyup = function(e){
				this.value=this.value.replace(/\D/,"");
			}
			
			//die ganzen elemente in die form packen
			document.getElementById("form").appendChild(input);
			document.getElementById("form").appendChild(document.createElement("br"));
			document.getElementById("form").appendChild(textView);
			document.getElementById("form").appendChild(document.createElement("br"));
			document.getElementById("form").appendChild(barView);
		}
		// ]]>
	</script>
</head>
<body onload="init()">
	<div>
	<p>...Versuchen Sie in das obere textfeld Zahlen etwa aus dem Bereich [5-50] einzutippen. 
		Dadurch wird sich die Ausgabe im zweiten Textfeld, sowie die Breite des Balken verändern</p>
	<form id="form" action="">
	</form>
	</div>
</body>

[/XML] ist auch validiert und funktionsfähig... Passt es so, oder habt ihr noch wesentliche Verbesserungsvorschläge?

thx @ all

greetz, Andrey

[christoph]

Eines würde mich stark interessieren: warum machst du alles so umständlich? Nur aus Prinzip? Das Web ist eben quick&dirty, es wurde so konzipiert. Es ist sinnlos künstlich aufgebaute Codekonstrukte einzubauen, das verlängert höchstens die Ladezeit - außerdem hat nicht jeder JavaScript per Default aktiviert (ich zB).

[0x7F800000]

[quote=christoph]Eines würde mich stark interessieren: warum machst du alles so umständlich?
[/quote]
Wie es weniger umständlich geht konnte mir bisher ja niemand sagen…
Wie gesagt, sowas:

 window.alert( e.type ); 

bringt mich nicht weiter, das gibt’s in allen anderen beispielen zuhauf, aber ich sehe bei dieser anweisung keinen Sinn, denn in der Regel produziert man ja keine Message-Boxes und solchen kram, das will doch kein Mensch sehen. Ich wollte lediglich aus irgendwelchen gui-elementen auf „das Model“ im inneren des Programms zugreifen. In meinem Beispiel habe ich das so gelöst, dass ich dem gui-element die eigenschaft „model“ explizit zuweise, und beim update darauf zugreife.

Nur aus Prinzip? Das Web ist eben quick&dirty, es wurde so konzipiert.
Außerdem erkenne ich nicht wirklich, wo ich den code irgendwie übertrieben aufgebläht hätte… Es gibt eine Klasse, die infos speichert, es gibt ein eingabeelement, und es gibt zwei ausgabeelemente, die diese infos irgendwie anzeigen… Das ist imho eine recht übersichtliche Kurzfassung des mvc’s für javascript. Zumindest scheint’s mir so im Moment.
Die Tatsache, dass diese ganzen Technologien ohne viel Plan zusammengefummelt wurden erscheint mir auch kein guter Grund zu sein, den code unstrukturiert hinzuhacken. Im Unterschied zu Java tut JavaScript dem Hirn & der Seele nicht wirklich gut, und erhöht auch die Lebenserwartung nicht Wieso soll man die eigene lage auch noch durch den „quick&dirty“-code verschlimmern?

Es ist sinnlos künstlich aufgebaute Codekonstrukte einzubauen

Wo ist denn da was „künstlich aufgebaut“… Ist imho alles möglichst straight-forward, ich wüsste nicht wo ich was kürzen soll.

das verlängert höchstens die Ladezeit

Ob diese paar code-buchstäbchen im Vergleich zu den ganzen riesigen Bildern und Videos was ausmachen bezweifle ich, ehrlich gesagt

außerdem hat nicht jeder JavaScript per Default aktiviert
Jemand der das ausgeschaltet hat kann sich nicht drüber beschweren, dass irgendwelcher AJAX-Kram nicht funktioniert. Und solange sich bei mir niemand beschwert, ist alles wunderbar

Wozu ich diese scripts gebrauchen soll ist mir bisher auch eher rätselhaft: Bei irgendeinem „recht statischen“ blog, wo nur hin und wieder irgendwelche kommentare dazukommen, wird eh alles serverseitig aufgebaut; Irgendwelche bunten dropdown Menu’s mit Vorschau-bildchen und irgendwelchen transparenzeffekten kriege ich auch im puren CSS einigermaßen hin, zuviel schnickschnack würde ich auf meiner persönlichen Seite auch nicht haben wollen… Aber wenn mich doch einer nach JavaScript fragt, will ich eben wissen was man damit anstellen kann und wo die Grenzen liegen.

greetz, Andrey