wucher wichtel: OOP mit JavaScript

SELF-Forum

OOP mit JavaScript

wucher wichtel
– Informationen zu den Bewertungsregeln

Hallo!

Nachdem ich jetzt einige Zeit lang mich mit OOP und JavaScript näher beschäftigt habe, habe ich jetzt ein Beispiel geschrieben. Dazu habe ich mehrere Fragen:

1) Ist das gut so, wie ich das mache, oder geht das
    besser? (ich meine den kompletten Code :-) )

2) Wenn ich die Methoden mit "new" aufrufe passiert
    das gleiche, wie ohne. Warum, und was ist besser?
    Das habe ich noch nicht so ganz verstanden.

3) Außerdem gibt es folgendes Problem: Ich rufe die
    Funktion "fadeOut()" auf. Das klappt. Dann rufe
    ich die Funktion "fadeIn()" auf. Das klappt auch.
    Aber wenn ich dann wieder "fadeOut()" aufrufen will,
    Dann passiert nichts. Erst nach einem Reload. Warum?

Und hier der Code:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<head>  
 <title>Test</title>  
<script type="text/javascript">
~~~~~~javascript
  
  
var changeOpacity =  
  {  
  settings : // Die Einstellungen  
    {  
     // Speichert den Ausgangswert für opacity  
     opacity : 1,  
  
     // Speichert, welcher Wert für opacity am Schluss bestehen soll  
     stopOpacity : null,  
  
     // Speichert, um wieviel opacity pro Funktionsaufruf zu- bzw. abnimmt  
     speed : 0.01,  
  
     // Speichert die ID  
     id : null,  
  
     // Speichert, ob schon ausgefadet wurde :P  
     isFadeOut : false,  
  
     // Die Fehlermeldung  
     errorMsg : "Ein Fehler"  
    },  
  functions : // Die Funktionen  
    {  
  
  
     /*  
     *  
     * Diese Methoden verändern den Wert für opacity  
     *  
     */  
  
     // Diese Methoden verkleinern den Wert für opacity  
     fadeOut : function (id, stopOpacity) {  
      changeOpacity.settings.isFadeOut  = true;  
      changeOpacity.settings.id    = document.getElementById(id);  
      changeOpacity.settings.stopOpacity  = stopOpacity;  
      changeOpacity.settings.opacity   = 1;  
  
      newFadeOutOpacity = window.setInterval("changeOpacity.functions.newFadeOut()", 20);  
     },  
  
     newFadeOut : function () {  
      changeOpacity.settings.id.style.opacity = changeOpacity.settings.opacity;  
      changeOpacity.settings.opacity    = changeOpacity.settings.opacity - changeOpacity.settings.speed;  
  
      if ( changeOpacity.settings.opacity <= changeOpacity.settings.stopOpacity ) {  
       window.clearInterval(newFadeOutOpacity);  
       changeOpacity.settings.id.style.visibility = "hidden";  
      }  
     },  
  
  
     // Diese Methoden vergrößern den Wert für opacity  
     fadeIn : function (id, stopOpacity) {  
      if ( changeOpacity.settings.isFadeOut == false ) {  
       alert (changeOpacity.settings.errorMsg);  
      } else {  
       changeOpacity.settings.id      = document.getElementById(id);  
       changeOpacity.settings.id.style.visibility  = "visible";  
       changeOpacity.settings.isFadeOut    = false;  
       changeOpacity.settings.stopOpacity    = stopOpacity;  
  
  
       newFadeInOpacity = window.setInterval ("changeOpacity.functions.newFadeIn()", 20);  
      }  
     },  
     newFadeIn : function () {  
      changeOpacity.settings.id.style.opacity = changeOpacity.settings.opacity;  
      changeOpacity.settings.opacity    = changeOpacity.settings.opacity + changeOpacity.settings.speed;  
  
      if ( changeOpacity.settings.opacity >= changeOpacity.settings.stopOpacity ) {  
       window.clearInterval(newFadeOutOpacity);  
      }  
     }  
    }  
  }  

~~~~~~html
</script>  
</head>  
  
<body>  
<h3 id="opacity_bsp">Beispiel</h3>  
<p>  
 <a href="#" onclick="changeOpacity.functions.fadeOut('fade', 0); return false">fadeOut()</a> |  
 <a href="#" onclick="changeOpacity.functions.fadeIn('fade', 1); return false">fadeIn()</a>  
</p>  
<div style="height: 230px;">  
 <div id="fade" class="text" style="height:210px; width:180px; overflow:hidden; background-color:#000000; color:#FFFFFF">  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
  sed do eiusmod tempor incididunt ut labore et dolore magna  
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
  ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  Duis aute irure dolor in reprehenderit in voluptate velit esse  
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
  cupidatat non proident, sunt in culpa qui officia deserunt mollit  
  anim id est laborum.  
 </div>  
</div>  
</body>  
</html>

Vielen Dank für eure Mühe und Hilfe!

ciao, ww

--
sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. OOP mit JavaScript

    Struppi Homepage des Autors
    – Informationen zu den Bewertungsregeln
    1. Ist das gut so, wie ich das mache, oder geht das
          besser? (ich meine den kompletten Code :-) )

    Das ist nicht OOP, weil du nicht mit Objekten arbeitest.

    1. Wenn ich die Methoden mit "new" aufrufe passiert
          das gleiche, wie ohne. Warum, und was ist besser?
          Das habe ich noch nicht so ganz verstanden.

    merkt man.

    1. Außerdem gibt es folgendes Problem: Ich rufe die
          Funktion "fadeOut()" auf. Das klappt. Dann rufe
          ich die Funktion "fadeIn()" auf. Das klappt auch.
          Aber wenn ich dann wieder "fadeOut()" aufrufen will,
          Dann passiert nichts. Erst nach einem Reload. Warum?

    Bei mir ist ein Fehler in der Konsole.

    Also bei mir kurzen testen fällt mir auf dass der interval nicht mehr stoppt, hab aber nicht gesehen woran es lag, deine Stil ist anders als meiner daher finde ich mich in deinem Code nur schwer zurecht.

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. OOP mit JavaScript

      wucher wichtel
      – Informationen zu den Bewertungsregeln

      Hallo!

      Bei mir ist ein Fehler in der Konsole.

      Also bei mir kurzen testen fällt mir auf dass der interval nicht mehr stoppt [...]

      Danke für den Hinweis. Im Firefox 2.0 habe ich keinen Fehler in der Konsole gesehen?! Aber ich habe gesehen, dass ich den falschen Interval aufgelöst hatte. Danke!

      ciao, ww

      --
      sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. OOP mit JavaScript

        Klawischnigg
        – Informationen zu den Bewertungsregeln

        Hi there,

        Danke für den Hinweis. Im Firefox 2.0 habe ich keinen Fehler in der Konsole gesehen?! Aber ich habe gesehen, dass ich den falschen Interval aufgelöst hatte. Danke!

        Der Fehler hat darin bestanden, daß opacity einen ungültigen Wert angenommen hat. (entweder  kleiner null oder größer als eins...)

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. OOP mit JavaScript

          wucher wichtel
          – Informationen zu den Bewertungsregeln

          Hallo!

          Danke für den Hinweis. Im Firefox 2.0 habe ich keinen Fehler in der Konsole gesehen?! Aber ich habe gesehen, dass ich den falschen Interval aufgelöst hatte. Danke!

          Der Fehler hat darin bestanden, daß opacity einen ungültigen Wert angenommen hat. (entweder  kleiner null oder größer als eins...)

          Nein. Der Fehler war, dass ich mit newFadeInOpacity = window.setInterval ("changeOpacity.functions.newFadeIn()", 20); einen Interval gestartet habe und ihn mit window.clearInterval(newFadeOutOpacity); beenden wollte.

          Opacity nimmt zwar auch einen ungültigen Wert an, aber das wird mit einer kleinen Warnung und der Anmerkung, dass diese Deklaration ignoriert wird, quittiert. Aber das war nicht der eigentliche Fehler, warum das Script nicht richtig funktionierte.

          ciao, ww

          --
          sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. OOP mit JavaScript

    Christian S.
    – Informationen zu den Bewertungsregeln

    Hi,

    sieht für mich auf den ersten Blick komisch aus...

    changeOpacity klingt für mich eher wie eine Methode eines Objektes, als eine eigenstängige Objektvariable.

    dann der aufruf mit:
    changeOpacity.functions.fadeOut

    sieht auch seltsam aus... wieso extra noch mal das functions dazwischen?

    dann innerhalb des Objekts immer wieder den variablen namen zu benutzen ist ja auch nicht schön...

    ich würde eher so den Ansatz wählen:

    function Fader()
    {
       this.opacity = 1;
       this.stopOpacity = null,
       this.speed = 0.01;

    this.fadeIn = function(str, o)
       {
       };

    // usw...

    }

    var myFader = new Fader();

    .....

    onclick="myFader.fadeIn('fade', 0);

    Gruß
    Christian

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. OOP mit JavaScript

      wucher wichtel
      – Informationen zu den Bewertungsregeln

      Hallo!

      Vielen Dank für deine Hilfe. Ich habe es so gemacht, wie du es beschrieben hast. Allerdings kommt immer eine [1]Fehlermeldung.

        
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<head>  
 <title>Test</title>  
<script type="text/javascript">
~~~~~~javascript
  
  
function Fader(){  
  
 this.opacity   = 1;  
 this.speed   = 0.01;  
 this.stopOpacity = null;  
 this.id    = null;  
 this.isFadeOut  = false;  
 this.errorMsg  = "Ein Fehler";  
  
 this.fadeOut = function (id, stopOpacity) {  
  this.isFadeOut   = true;  
  this.id    = document.getElementById(id);  
  this.opacity  = 1;  
  this.stopOpacity = stopOpacity;  
  
  newFadeOutOpacity   = window.setInterval("Fader.newFadeOut()", 20);  
 };  
  
 Fader.newFadeOut = function () {  
  Fader.id.style.opacity = Fader.opacity;  
// [1]  
// Fehler: Fader.id has no properties  
// Zeile: 26  
  Fader.opacity   = Fader.opacity - Fader.speed;  
  
  if ( Fader.opacity <= Fader.stopOpacity ) {  
   window.clearInterval(newFadeOutOpacity);  
   Fader.id.style.visibility = "hidden";  
  }  
 };  
}  
 var myFader = new Fader();
~~~~~~html
  
</script>  
</head>  
  
<body>  
<h3 id="opacity_bsp">Beispiel</h3>  
<p>  
 <a href="#" onclick="myFader.fadeOut('fade', 0); return false">fadeOut()</a> |  
 <a href="#" onclick="myFader.fadeIn('fade', 1); return false">fadeIn()</a>  
</p>  
<div style="height: 230px;">  
 <div id="fade" class="text" style="height:210px; width:180px; overflow:hidden; background-color:#000000; color:#FFFFFF">  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
  sed do eiusmod tempor incididunt ut labore et dolore magna  
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
  ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  Duis aute irure dolor in reprehenderit in voluptate velit esse  
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
  cupidatat non proident, sunt in culpa qui officia deserunt mollit  
  anim id est laborum.  
 </div>  
</div>  
</body>  
</html>

      Ich habe keine Ahnung, warum es da zu einem Fehler kommt. Hast du eine Idee? Vielen Dank!

      PS: Ich werde "Fader" noch durch "this" ersetzen, aber das mache ich erst gegen Ende, wenn es funktioniert. Das macht es für mich am einfachsten :-)

      Nochmals vielen Dank!

      ciao, ww

      --
      sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. OOP mit JavaScript

        Christian S.
        – Informationen zu den Bewertungsregeln

        Hi

        function Fader(){

        this.opacity   = 1;
        this.speed   = 0.01;
        this.stopOpacity = null;
        this.id    = null;
        this.isFadeOut  = false;
        this.errorMsg  = "Ein Fehler";

        this.fadeOut = function (id, stopOpacity) {
          this.isFadeOut   = true;
          this.id    = document.getElementById(id);
          this.opacity  = 1;
          this.stopOpacity = stopOpacity;

        newFadeOutOpacity   = window.setInterval("Fader.newFadeOut()", 20);
        };

        // newFadeOutOpacity wohl eher mit var deklarieren, damit es lokal ist, oder mach es als private Variable in Fader rein. (auch mit var).

        Fader.newFadeOut = function () {
          Fader.id.style.opacity = Fader.opacity;
        // [1]
        // Fehler: Fader.id has no properties
        // Zeile: 26

        damit machst du eine statische Methode. und keine Objektmethode. mach this aus Fader.
        und wenn id null ist, dann hat es eben keine properties. und dann kommt der fehler.

        Gruß!

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. OOP mit JavaScript

          wucher wichtel
          – Informationen zu den Bewertungsregeln

          Hallo!

          Danke für deine Hilfe! Irgendwie klappt es aber nicht. Ich habe jede mögliche Schreibweise ausprobiert und alle bringen unterschiedliche Fehlermeldungen. Ich verstehe es nicht. Ich poste nochmal den Quelltext. Könntest du mir vielleicht im Quelltext zeigen, was ich wie schreiben muss? Ich weiß, dass alleine machen mehr Spaß macht und einen weiter bringt, aber ich sitze an diesem Problem mit kurzen Unterbrechungen seit heute vormittag und verzweifle so langsam.

            
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<head>  
 <title>Test</title>  
<script type="text/javascript">
~~~~~~javascript
  
  
function Fader(){  
  
 this.opacity   = 1;  
 this.speed   = 0.01;  
 this.stopOpacity = null;  
 this.id    = null;  
 this.isFadeOut  = false;  
 this.errorMsg  = "Ein Fehler";  
  
 this.fadeOut = function (id, stopOpacity) {  
  this.isFadeOut   = true;  
  this.id    = document.getElementById(id);  
  this.opacity  = 1;  
  this.stopOpacity = stopOpacity;  
  
  var newFadeOutOpacity = window.setInterval("Fader.newFadeOut()", 20);  
 };  
  
 this.newFadeOut = function () {  
  this.id.style.opacity = this.opacity;  
  this.opacity   = this.opacity - Fader.speed;  
  
  if ( this.opacity <= this.stopOpacity ) {  
   window.clearInterval(newFadeOutOpacity);  
   Fader.id.style.visibility = "hidden";  
  }  
 };  
  
  
 Fader.fadeIn = function (id, stopOpacity) {  
  if ( Fader.isFadeOut == false ) {  
   alert ( this.errorMsg );  
  } else {  
   Fader.id     = document.getElementById(id);  
   Fader.id.style.visibility  = "visible";  
   Fader.isFadeOut    = false;  
   Fader.stopOpacity   = stopOpacity;  
  
   var newFadeInOpacity    = window.setInterval ("Fader.newFadeIn()", 20);  
  }  
 };  
  
 Fader.newFadeIn = function () {  
  Fader.id.style.opacity = Fader.opacity;  
  Fader.opacity   = Fader.opacity + this.speed;  
  
  if( Fader.opacity >= Fader.stopOpacity ) {  
   window.clearInterval( newFadeInOpacity );  
  }  
 };  
}  
 var myFader = new Fader();  

~~~~~~html
</script>  
</head>  
  
<body>  
<h3 id="opacity_bsp">Beispiel</h3>  
<p>  
 <a href="#" onclick="myFader.fadeOut('fade', 0); return false">fadeOut()</a> |  
 <a href="#" onclick="myFader.fadeIn('fade', 1); return false">fadeIn()</a>  
</p>  
<div style="height: 230px;">  
 <div id="fade" class="text" style="height:210px; width:180px; overflow:hidden; background-color:#000000; color:#FFFFFF">  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
  sed do eiusmod tempor incididunt ut labore et dolore magna  
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
  ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  Duis aute irure dolor in reprehenderit in voluptate velit esse  
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
  cupidatat non proident, sunt in culpa qui officia deserunt mollit  
  anim id est laborum.  
 </div>  
</div>  
</body>  
</html>

          Vielen Dank!

          ciao, ww

          --
          sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. OOP mit JavaScript

            Christian S.
            – Informationen zu den Bewertungsregeln

            ersetze deinen JS Code durch das hier, dann klappts, zumindest in meinem Firefox 2.0.

            aber den code kann man dennoch was schöner gestalten... ich hab nur auf die Schnelle die Fehler rausgemacht.

            die ganzen this. Variablen sind public. also man kann die auch von außen setzen. Das möchte man bei id sicher nicht. private machst du sie mit var.

            function Fader(){

            this.opacity   = 1;
             this.speed   = 0.01;
             this.stopOpacity = null;
             this.id    = null;
             this.isFadeOut  = false;
             this.errorMsg  = "Ein Fehler";
            var newFadeOutOpacity;
              var self = this;
            var newFadeInOpacity;
             this.fadeOut = function (id, stopOpacity) {
              this.isFadeOut   = true;
              this.id    = document.getElementById(id);
              this.opacity  = 1;
              this.stopOpacity = stopOpacity;

            newFadeOutOpacity = window.setInterval(function(){self.newFadeOut();}, 20);
             };

            this.newFadeOut = function () {
              this.id.style.opacity = this.opacity;
              this.opacity   = this.opacity - this.speed;

            if ( this.opacity <= this.stopOpacity ) {
               window.clearInterval(newFadeOutOpacity);
               this.id.style.visibility = "hidden";
              }
             };

            this.fadeIn = function (id, stopOpacity) {
              if ( this.isFadeOut == false ) {
               alert ( this.errorMsg );
              } else {
               this.id     = document.getElementById(id);
               this.id.style.visibility  = "visible";
               this.isFadeOut    = false;
               this.stopOpacity   = stopOpacity;

            newFadeInOpacity    = window.setInterval (function(){self.newFadeIn();}, 20);
              }
             };

            this.newFadeIn = function () {
              this.id.style.opacity = this.opacity;
              this.opacity   = this.opacity + this.speed;

            if( this.opacity >= this.stopOpacity ) {
               window.clearInterval( newFadeInOpacity );
              }
             };
            }
             var myFader = new Fader();

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. OOP mit JavaScript

              wucher wichtel
              – Informationen zu den Bewertungsregeln

              Hallo!

              Danke! Jetzt kann ich heute Nacht gut schlafen :-) Danke schön.

              ciao, ww

              --
              sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

          2. OOP mit JavaScript

            Struppi Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Danke für deine Hilfe! Irgendwie klappt es aber nicht. Ich habe jede mögliche Schreibweise ausprobiert und alle bringen unterschiedliche Fehlermeldungen. Ich verstehe es nicht.

            Jetzt bist du im Objektorientierten Modus und du hast dir auch gleich ein etwas komplizierter Problem ausgesucht, insofern ist ein Nachmittag sogar eher wenig.

            function Fader(){

            this.opacity   = 1;
            this.speed   = 0.01;
            this.stopOpacity = null;
            this.id    = null;
            this.isFadeOut  = false;
            this.errorMsg  = "Ein Fehler";

            this.fadeOut = function (id, stopOpacity) {
              this.isFadeOut   = true;
              this.id    = document.getElementById(id);
              this.opacity  = 1;
              this.stopOpacity = stopOpacity;

            var newFadeOutOpacity = window.setInterval("Fader.newFadeOut()", 20);

            Das Problem eins ist Fader.newFadeOut() existiert nicht, sondern this.newFadeOut() wobei this der Variabel entspricht der du das Objekt mit new zuweist.
            Allerdings geht, wie du schon gemerkt hast this.newFadeOut() auch nicht, da in window.setInterval("Fader.newFadeOut()", 20); der String in 20 ms quasi mit new Function() erzeugt und aufgerufen wird, nur bist du dann im window Kontext und this ist gleich window da aber window.newFadeOut() nicht existiert schlägt der Aufruf fehl.

            Die Lösung ist eine lokale Variabel und ein anonyme Funktion. In der anonymen Funktion steht die lokale Variabel auch beim verspätetem Aufruf zu Verfügung und zeigt dann auf this und es können die Funktionen des Objektes aufgerufen werden.

            Struppi.

            --
            Javascript ist toll (Perl auch!)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. OOP mit JavaScript

              wucher wichtel
              – Informationen zu den Bewertungsregeln

              Hallo!

              Danke schön. Jetzt habe ich auch verstanden, warum es hier solche Probleme gab. Vielen Dank!

              ciao, ww

              --
              sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln