wucher wichtel: OOP mit JavaScript

Beitrag lesen

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