Objektorientierte Programmierung
0 0 0 0 
Felix Riesterer
0 0
0 
Struppi
Objektorientierte Programmierung
Hi,
beschäftige mich seit Kurzem mit OOP.
Wenn ich ein Objekt einrichte, sollten die Variablen dieses Objektes doch abrufbar sein. Der alert( willkommen.farbig_src ) hinter dem HTML zeigt den Wert richtig an. Wenn ich danach über das Bild mause, kommt die Meldung 'undefined'.
Habe keine Idee, warum.
function bild( bname )
{
this.farbig_src = '';
this.sw_src = '';
this.min_x = 61; // kl. Bild
this.max_x = 75; // gr. Bild
}
<center><img id='willkommen' class=menu src='img/welcome_sw.jpg' onMouseOver="alert(willkommen.farbig_src)"><br>Home</center>
<script type="text/javascript">
var willkommen = new bild();
willkommen.farbig_src = 'img/welcome.jpg';
alert( willkommen.farbig_src );
</script>
Gruß, Schlumpi
-
hallo,
willkommen.farbig_src = 'img/welcome.jpg';
vielleicht so: willkommen.farbig_src = "img/welcome.jpg";
-
vielleicht so: willkommen.farbig_src = "img/welcome.jpg";
Kein Unterschied, bei der zeitlich zweiten Anzeige bleibt es beim 'undefined'
Schlumpi
-
-
Hi!
Du verschweigst doch was. Ich habs mitm IE6 getestet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Form im IE6 </title> <script type="text/javascript"> function bild( bname ) { this.farbig_src = ''; this.sw_src = ''; this.min_x = 61; // kl. Bild this.max_x = 75; // gr. Bild } </script> </head> <body> <center><img id='willkommen' class=menu src='grey.gif' onMouseOver="alert(willkommen.farbig_src)"><br>Home</center> <script type="text/javascript"> var willkommen = new bild(); willkommen.farbig_src = 'img/welcome.jpg'; alert( willkommen.farbig_src ); </script> </body> </html>Ich hab sogar deinen Code 1:1 uebernommen und nichts 'repariert'. Was soll ich sagen? Ich bekomme im alert immer den String. Wie gewollt.
Ich hab zwar grad keine Nudeln in Rahmsosse zum Wahrsagen da, aber ich behaupte in deinem Proigramm hast Du nen Tippfehler. scr statt src ist fuer mich der top Kandidat.
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett-
Hi!
danke für deine Mühe. Ich hatte noch <style> davor.
Ich hab sogar deinen Code 1:1 uebernommen und nichts 'repariert'. Was soll ich sagen? Ich bekomme im alert immer den String. Wie gewollt.
Also, irgendwie spukt's bei mir.
Mit der Opera bekam ich das gewünschte Ergebnis beim übermausen, mit dem IE6 und dem FF 3.0.1 nicht.
Nun habe ich das HTML- Dokument vollkommen geleert und den von dir _doch_ veränderten Code reinkopiert (mein Bild hast du getauscht).
Nun ist das Übermausergebnis bei der Opera und beim IE6 i.O., der FF bleibt bei seinem 'undefined'.
Hier nochmal das _komplette_ Dokument:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Form im IE6 </title> <script type="text/javascript"> function bild( bname ) { this.farbig_src = ''; this.sw_src = ''; this.min_x = 61; // kl. Bild this.max_x = 75; // gr. Bild } </script> </head> <body> <center><img id='willkommen' class=menu src='img/welcome_sw.jpg' onMouseOver="alert(willkommen.farbig_src)"><br>Home</center> <script type="text/javascript"> var willkommen = new bild(); willkommen.farbig_src = 'img/welcome.jpg'; alert( willkommen.farbig_src ); </script> </body> </html>Schlumpi
-
Lieber Schlumpi,
function bild( bname )
{
this.farbig_src = '';
this.sw_src = '';
this.min_x = 61; // kl. Bild
this.max_x = 75; // gr. Bild
}
[...]
<img id='willkommen' class=menu src='img/welcome_sw.jpg' onMouseOver="alert(willkommen.farbig_src)">tja, lieber Schlumpi, wieso denkst Du dass eine JavaScript-Variable (in Wirklichkeit ist es ein Member-Objekt des window-Objektes) namens "willkommen" existiert??? Nur weil ein Element eine ID hat, heißt das (bei nicht-IE-Browsern) noch lange nicht, dass es auch ein entsprechendes Objekt unterhalb von window gibt.
Zum besseren Verständnis: "willkommen" in Deinem Kontext ist dasselbe wie "window.willkommen", da "globale Variablen" in JavaScript immer ein direktes Unterobjekt von window sind.
Informiere Dich über die Funktion
document.getElementById(). Und wenn Du schon zu "Objektorientierte Programmierung" fragst (so der Titel Deines Threads hier), dann kannst Du ja mal in meinen Artikel reinlesen. Vielleicht findest Du da das Ein oder Andere, das Dich in dieser Hinsicht weiter bringt? Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScriptsLiebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hi!
tja, lieber Schlumpi, wieso denkst Du dass eine JavaScript-Variable (in Wirklichkeit ist es ein Member-Objekt des window-Objektes) namens "willkommen" existiert???
Weil er sie etwas weiter unten definiert. ;)
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett
-
-
Hi!
Nun habe ich das HTML- Dokument vollkommen geleert und den von dir _doch_ veränderten Code reinkopiert (mein Bild hast du getauscht).
Das stimmt allerdings. 'img/welcome.jpg' waren bei mir grad aus.
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett -
Nun habe ich das HTML- Dokument vollkommen geleert und den von dir _doch_ veränderten Code reinkopiert (mein Bild hast du getauscht).
Nun ist das Übermausergebnis bei der Opera und beim IE6 i.O., der FF bleibt bei seinem 'undefined'.
Hier meine Testergebnisse zum gleichen Code:
- Mein IE 6 liefert den gewünschten String.
- Mein Opera 9.52 liefert "undefined".
- Firefox 3.0.3 liefert "undefined".
Hier nochmal das _komplette_ Dokument:
(...)
Die Fehlerursache wird übrigens klar, sobald man mal
willkommenanzeigen lässt, es ist das Image-Element, das natürlich nicht über die von dir gesetzten Eigenschaften verfügt, die in einem ganz anderen Objekt stecken. Sobald du eine andere ID verwendest, funktioniert es in allen drei Browsern. Oder du schreibstalert(window.willkommen.farbig_src);, das funktioniert auch.--
Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.
Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:|
-
-
-
<center><img id='willkommen' class=menu src='img/welcome_sw.jpg' onMouseOver="alert(willkommen.farbig_src)"><br>Home</center>
wie du schon mitbekomen hast, liegt der Fehler hier an der ID. Das ist eine Tücke in JS. Variabeln werden in verschiedenen Kontexten gesucht, ich kann dir jetzt nicht genau sagen, wie das exakt abläuft, aber hier ist es this.willkommen was gefunden wird.
Laß dir mal alert(this == willkommen) anzeigen oder alert(willkommen.tagName)Die Lösung des Problems ist einfach, du solltest schreiben, was du wirklich meinst nämlich window.willkommen.
Noch besser ist es, wenn du JS Events nicht im HTML code definierst, sondern per JS hinzufügst, dann kann dir sowas nicht passieren.
In dem Zusammenhang empfehle ich dir die Lektüre dieses Artikels.
Struppi.
-
Hallo,
erstmal danke für eure Stellungnahmen, aber den AHA- Effekt hatte ich noch nicht, trotz Überfliegen der genannten Artikel.
Ich möchte Bilder beim Übermausen vergrößern und beim Ausmausen sollen sie sich selbständig wieder verkleinern. Mit selbstständig meine ich, dass der Mauscursor ganz woanders ist.
Dafür, dachte ich, könnte OOP geeignet sein. Ich gehe mal schrittweise vor und stelle Fragen, denn die Grundlage fehlt bei mir vollständig. Denn mal klappt es (zufällig) und danach wieder nicht. Das An- und Abscripten lasse ich der Übersicht halber mal weg (also Fehler liegen nicht daran, dass ich <script ... vergessen habe).
function bild( name ) {
}
<img id='pic1' src='img1.jpg'>
bild1 = new bild( 'pic1' );Ist das Objekt bild1 nun eine Kopie oder ein Pointer auf das Bild? Mal sehen, was alert sagt:
alert( "[" +bild1.src +"]" ); // Source des Bildes
Antwort FF: [undefined], IE [undefined], Opera: [undefined].Mmh, wie kann das sein? Mal sehen, ob das bild1 Objekt überhaupt reagiert:
bild1.farbe = 'rot';
alert( "[" +bild1.farbe +"]" ); // Source des Bildes
Antwort FF: [rot], IE [rot], Opera: [rot].Tja, und so stochere ich im Nebel. Ach so, mal sehen, ob ich das HTML- Bild ändern kann (keine Erwartungshaltung, so wird man nicht enttäuscht):
bild1.src = 'img/stud2.jpg';Nöö, keiner der Browser zeigt das neue Bild. Also das bild1 Objekt scheint überhaupt keine Verbindung zum Bild zu haben.
Wie stelle ich die her?
LG Schlumpi
-
function bild( name ) {
}
<img id='pic1' src='img1.jpg'>
bild1 = new bild( 'pic1' );Ist das Objekt bild1 nun eine Kopie oder ein Pointer auf das Bild?
Weder noch. Einfach ein Objekt.
Mmh, wie kann das sein?
Wie kommst du darauf, dass die Objektinstanz bild1 identisch ist mit einem img-Elementobjekt?
Nöö, keiner der Browser zeigt das neue Bild. Also das bild1 Objekt scheint überhaupt keine Verbindung zum Bild zu haben.
Wie stelle ich die her?
Warum verwendest du überhaupt einen Konstruktor und erzeugst damit Instanzen?
Wenn du auf ein Bild zugreifen willst, tu es über document.getElementById. Dann bekommst du das img-Elementobjekt und kannst das tun, was du anscheinend vorhast.
Du kannst am Elementobjekt auch andere Daten speichern (farbig_src, sw_src usw.).
Welchen Vorteil erhoffst du dir damit, das Bild nochmal in einem eigenen Objekt zu kapseln?Das ginge so:
function MyImage (id) { this.imgElement = document.getElementById(id); this.setSrc = function (newSrc) { this.imgElement.src = newSrc; }; /* usw. */ } var bild1 = new MyImage("idDesBildes"); bild.setSrc("bla.jpg");Das img-Elementobjekt wird einfach als Eigenschaft der Instanz gespeichert und die Methoden können entsprechend darauf zugreifen.
Aber wozu willst du das tun?
Mathias
-
function bild( name ) {
}
<img id='pic1' src='img1.jpg'>Ich nehme an, diese Zeile soll nur zeigen, dass du ein Bild in deinem HTML Code hast, denn hier würdest du eine JS Fehlermeldung bekommen.
bild1 = new bild( 'pic1' );
und hier versuchst du irgendwie einen Bezug zu dem Bild mit der ID herzustellen. Aber woher soll dieser Bezug kommen, wenn du nicht die Referenz auf das Bild aus dem HTML Dokument holst?
Nöö, keiner der Browser zeigt das neue Bild. Also das bild1 Objekt scheint überhaupt keine Verbindung zum Bild zu haben.
Hat es auch nicht.
Wie stelle ich die her?
z.b. so:
<center><img id='pic1' src='bilder/foto2.jpg'><br>Home</center> <script type="text/javascript"> ~~~~~~javascript function Bild(id, src) { var obj = document.getElementById(id); if(obj) { var old_src = obj.src; obj.onmouseover = function() { this.src = src; }; obj.onmouseout = function() { this.src = old_src; }; } else { alert('Das Element mit der ID '+ id + ' existiert nicht.'); } } new Bild('pic1', 'bilder/foto1.jpg');</script>Struppi.
-
-