Aus Klassenfunktion heraus eine HTML-Objekteigenschaft ändern
  • Vote Up0Vote Down ihelieliheliel March 2008

    Hallo,

    ich habe mir mittels javascript eine Klasse folgender Form zusammengebastelt:
    <br />standard = function() {<br /><br /> this.set_class = function(name) {<br /> lastname = obj.className;<br /> return;<br /> }<br /><br />}<br />

    Diese Funktion rufe ich nun über "mouseover" auf und zwar so:

    <br /><script type="text/javascript"><br /> std = new standard();<br /></script><br /><br /><a class="test" onmouseover="std.set_class('hover')" onmouseout="std.set_class('test')" href="#">test</a><br />
    Das Problem: Firefox sagt das "obj" nicht definiert ist. Über "this.className" kommt das selbe bei raus.

    Belasse ich es bei einer einfachen Funktion ohne die Klasse, dann funktioniert alles. Demnach gibts Probleme mit der Klassenstruktur.

    Die Klasse soll eine bessere Übersicht gewähren, also eben solche kleinen Sachen wie Hovereffekte durch Klassenwechsel, etc. befinden sich in der Klasse Standard. Ajax dann wieder in einer separaten Klasse, etc. also quasi eine Art kleines Javascript- Framework.
    Soviel zum Sinn der Klassenstruktur.

    Kennt sich jemand mit Javascript- OOP in genanntem Zusammenhang aus?

    {IronischAuf} webmatze... wegen dir hab ich jetzt das Problem!!! Wieso hast du mich dazu gebracht Javascript OOP zu benutzen? {IronischZu} :-D
    Echt geile Javascript- OOP Anleitung, weiter so! Ich freu mich schon auf die nächsten Teile :-)

    mfg
    iheliel

  • 6 Answers sorted by
  • Vote Up0Vote Down webmatzewebmatze March 2008

    für die Aufgabe ist das mit der Klasse zwar wie mit "Kanonen auf Spatzen geschossen", aber damit es funktioniert, sollte es ungefähr so aussehen:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br /><head><br /> <title>Untitled Page</title><br /> <style type="text/css"><br /> .hover {<br /> color: red;<br /> }<br /> .test {<br /> color: green;<br /> }<br /> </style><br /> <br /> <script type="text/javascript"><br /> //Klasse definieren<br /> standard = function() {<br /><br /> //Methode zum Setzen der Klasse<br /> this.set_class = function(element, name) {<br /> element.className = name;<br /> }<br /><br /> }<br /> <br /> //Instanz erstellen<br /> std = new standard();<br /> <br /> </script><br /></head><br /><body onload="std.set_class(document.getElementById('test'),'test')"><br /> <a onmouseover="std.set_class(this,'hover')" <br /> onmouseout="std.set_class(this,'test')" <br /> href="#" id="test">test</a><br /></body><br /></html>

    Du mußt als Parameter natürlich auch das Element mitgeben, welches geändert werden soll.
    Als Besonderheit habe ich auch noch eingebaut, das beim Laden der Seite das class Attribut vom Link gleich auf "test" gesetzt wird, wie man in der BODY onload Funktion sehen kann.

    Hoffe das hilft dir weiter.

  • Vote Up0Vote Down ihelieliheliel March 2008

    Danke für die Antwort! Das übergeben des Elementes wollte ich der Übersicht halber vermeiden, aber wenns wirklich nicht anders geht ist das in Ordnung.
    Du schreibst:

    für die Aufgabe ist das mit der Klasse zwar wie mit "Kanonen auf Spatzen geschossen"

    -- Wenn du viele JS- Funktionen hast, wie würdest du die denn vernünftig gliedern und übersichtlicher gestalten?
    Ich dachte mit ner Klassenstruktur wäre das ganz okay.

    PS.: Ja ich weiß, es gibt zahllose Javascript- Frameworks, mich würde allerdings mal deine persönl. Meinung dazu interressieren.

    Gruß
    iheliel

  • Vote Up0Vote Down webmatzewebmatze March 2008

    Nein, du hast natürlich recht, wenn du nicht nur diese eine Funktion hast, sondern mehrere, dann würde ich natürlich auch die Klassen Version vorziehen.

    Das mit den Kanonen auf Spatzen bezog sich jetzt auf dein Beispiel, wo ja nur eine Funktion enthalten war. ;-)

  • Vote Up0Vote Down webmatzewebmatze March 2008

    Ich habe die Klasse mal angepasst und erweitert. Jetzt kannst du die Eigenschaften des Links komplett über JavaScript ändern.
    Ist vielleicht ein kleiner "Hack", aber man könnte die Klasse problemlos um weitere Funktionen erweitern.

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br /><head><br /> <title>Untitled Page</title><br /> <style type="text/css"><br /> .hover {<br /> color: red;<br /> font-weight: bold;<br /> }<br /> .test {<br /> color: green;<br /> }<br /> </style><br /> <br /> <script type="text/javascript"><br /> //Klasse definieren<br /> standard = function() {<br /><br /> //Methode zum Setzen der Klasse<br /> this.set_class = function(value) {<br /> this.element.className = value;<br /> };<br /><br /> //Methode zum Setzen des Inhaltes<br /> this.set_inhalt = function(value) {<br /> this.element.innerHTML = value;<br /> };<br /> <br /> //Eventhandler<br /> this.on = function(elementId, eventname, functionname, value) {<br /> this.element = document.getElementById(elementId);<br /> var self = this;<br /> this.element["on" + eventname] = function() {<br /> self[functionname](value);<br /> };<br /> };<br /> }<br /><br /> //Nachdem das Dokument geladen wurde!!!<br /> window.onload = function() {<br /> //Instanz erstellen<br /> std = new standard();<br /> std.on("test" , "mouseover", "set_class", "hover");<br /> std.on("test" , "mouseout", "set_class", "test");<br /> std.on("test" , "click", "set_inhalt", "Neuer Inhalt");<br /> }<br /> <br /> </script><br /></head><br /><body><br /> <a href="#" id="test">test</a><br /></body><br /></html>

    Wie du erkennen kannst, ist im Tag direkt kein JavaScript eingebunden!

  • Vote Up0Vote Down ihelieliheliel March 2008

    wow, ok jetzt bin ich baff.
    Besonders diese zeilen hab ich so noch nie gesehen. Auch nicht auf selfhtml.
    <br />var self = this;<br /> this.element["on" + eventname] = function() {<br /> self[functionname](value);<br />}<br />

    Findest du sowas durch surfen im Web raus oder hast du feste Quellen?
    Ich suche schon lange eine gescheite Referenz ausschließlich zu Javascript.
    Mein einziger derzeitiger Bezugspunkt ist wie oben bereits genannt selfhtml.de und die allseits beliebte "QuerdurchsWeb"- Suche per google.

    Apropos, wann kommt dein Javascript OOP - Teil 2 raus? *vorneugiergleichzerplatz* :-D

  • Vote Up0Vote Down webmatzewebmatze March 2008

    Naja, ich beschäftige mich schon seit Ewigkeiten vielen Jahren mit HTML und JavaScript - nicht nur berufsmäßig, sondern auch aus persönlichem Interesse. Da lernt man natürlich jeden Tag was Neues.

    Als gute Quelle zum Thema JavaScript greife auch ich immer wieder mal auf SelfHTML zurück. Man kann sich ja nicht alles merken. ;-)

    Sonst finde ich auch folgende Seiten wirklich sehr informativ:

    Quirksmode von Peter-Paul Koch ist eine der umfangreichsten Informationsquellen zu JavaScript:
    http://www.quirksmode.org/js/contents.html

    Dean Edwards ist ebenfalls ein "JavaScript" Gott:
    http://dean.edwards.name/

    "Apropos, wann kommt dein Javascript OOP - Teil 2 raus? *vorneugiergleichzerplatz* :-D"

    Ich bin gerade dabei den kompletten Inhalt von webmatze.de auf ein neues System zu übertragen, und dabei auch noch einige Inhalte zu überarbeiten. Wenn ich damit fertig bin, werde ich anfangen, neue Inhalte zu schreiben. Versprochen! ;o)

Add a Comment

Willkommen!

It looks like you're new here. If you want to get involved, click one of these buttons!

Einloggen Registrierung!

Kategorien

Diskussionsteilnehmer

Who's Online (0)