Kapselung Function (JavaScript)

[ATS3788]

Hallo
Ich versuche mich in JavaScript
Lasst mich erst mal jammern.

Wow wie ich Pascal liebe
JS keine logische Struktur,
OK für mich ist das so.............
Wenn ihr mich nicht helfen könnt vielleicht weiß
ja jemand ein gutes JS Forum, kann auch in Englisch sein.

Das habe ich mir bis jetzt als Lern Script zusammen geschustert.

Was ich nicht verstehe!!!!
Ich definiere Robot als Klasse, ich hoffe so heißt das in JS

In Init wird das Initialisiert
und mit animate Animiert.

Soweit so gut.

Nur wenn ich stop aufrufe ist meine Robot Klasse weg
und ich dachte naiv wie ich bin, dass wenn ich oben
"Robot =" das ganze Ding ein Object ist, auf welches
ich zugreifen kann.

Delphi-Quellcode:

function PreInit (Control) {
var Robot =
{
init: function() {
Robot.div = document.getElementById("robot");
Robot.frameHeight = 150;
Robot.frames = 10;
Robot.offsetY = 0;
Robot.OffOn = false;

Robot.animate();
Robot.stop();
},   // End Init
stop: function() {
Robot.OffOn = true;

},
animate: function() {
Robot.offsetY -= Robot.frameHeight;
if (Robot.offsetY <= -Robot.frameHeight * Robot.frames) {
Robot.offsetY = 0;   } // End Query
Robot.div.style.backgroundPosition =
"0 " + Robot.offsetY + "px";

if (Robot.OnOff) {
clearTimeout(Robot.animate); } // End Query

setTimeout(Robot.animate, 75);

}, // End Animate
left: function() {
}

switch (Control)
{
case "Init": 
Robot.init ();
break;

case "Stop": 
Robot.stop ();
break;
}};

Zitat:

JS Sucks

[generic]

Nimm typescript oder dart - beide compilieren in JS.

[ATS3788]

Danke generic
Habe das mal überflogen.
Aber heißt das nicht, ohne Typescript oder Dart,
auf einemanderem Rechner läuft JS nicht.

Martin Michael

[BUG]

Dart und zB. CoffeeScript können nach JS compiliert werden. Dart kann wahlweise auch direkt vom Browser unterstützt sein.

Eingerückt dein Code bei mir so aus:

Code:

function PreInit (Control) {
   var Robot = {
      init: function() {
         Robot.div = document.getElementById("robot");
         Robot.frameHeight = 150;
         Robot.frames = 10;
         Robot.offsetY = 0;
         Robot.OffOn = false;

         Robot.animate();
         Robot.stop();
      }, // End Init

      stop: function() {
         Robot.OffOn = true;
      },

      animate: function() {
         Robot.offsetY -= Robot.frameHeight;
         if (Robot.offsetY <= -Robot.frameHeight * Robot.frames) {
            Robot.offsetY = 0;
         } // End Query
         Robot.div.style.backgroundPosition = "0 " + Robot.offsetY + "px";

         if (Robot.OnOff) {
            clearTimeout(Robot.animate);
         } // End Query

         setTimeout(Robot.animate, 75);

      }, // End Animate
      
      left: function() {
      }

      switch (Control)
      {
         case "Init": 
            Robot.init ();
            break;

         case "Stop": 
            Robot.stop ();
            break;
      }
   };

Es fehlt also die schließende Klammer von PreInit.
Viel merkwürdiger ist aber, dass du da ein switch mitten in der Initialisierung deines Objekts hast.
Ein paar andere Sachen sind auch noch drin ... sagt OnOff == true jetzt, dass der Roboter an ist oder dass er aus ist :gruebel:
Außerdem sieht das mit den Timeouts nicht so aus, als würde es funktionieren.


JavaScript ist definitiv besser als sein Ruf. Man muss sich nur etwas damit beschäftigen.
Auf die Schnelle habe ich folgendes (einigermaßen lesbares) Tutorial gefunden, das dir vielleicht weiterhilft:

• Teil 1
• Teil 2

[ATS3788]

Ja da hast Du schon recht da fehlt ein Teil des
codes und ich lerne es erst.

Mich wundert es nur wie die in JS ein Objekt kapseln,
wenn man das so sagen kann

[ATS3788]

Danke die Links sind Hilfreich.
Ich habe von denen das Buch Simply JS.

Das ist harte Kost für einen Anfänger.

[Phoenix]

Zitat:

Zitat von ATS3788 (Beitrag 1201050)

Mich wundert es nur wie die in JS ein Objekt kapseln,
wenn man das so sagen kann

Okay, fangen wir mal von vorne an: In JavaScript ist in erster Linie erstmal alles ein Object.

Code:

var myString = "Test";

myString ist also schon ein Object.

Komplexe Objekte können auf mehrere Arten erstellt werden. Das was Du da anscheinend versuchst, ist das Objekt direkt komplett zu erzeugen (aber ohne Klasse!):

Code:

var myComplexObject = {
   test: "Property of type string",
   test2: 4,
   makeSomething: function() {
      return "bar";
   }
}; // hier wird myComplexObject gleich das JSON-Object zugewiesen

var foo = myComplexObject.makeSomething(); // foo hat den Wert bar

Was Du aber eigentlich vermutlich machen willst, ist eine (Constructor-) Funktion zu schreiben, die Dir ein Objekt vom Typ Robot zurück gibt. Diese wären auch via Konvention groß geschrieben (normale Funkionen und properties per Konvention alles klein).

Das würde so aussehen:

Code:

// definieren der constructor-Funktion
var Robot = function(domElementName) {
   this.div = window.document.getElementById(domElementName);
   this.frameHeight = 150;
   this.frames = 10;
   this.offsetY = 0;
   this.OffOn = false;

   this.animate = function() { ... };
   this.stop = function() {...};

   return this;  // ist optional, this wird sonst in der ctor-Funktion immer zurückgegeben
};

var myRobot = new Robot("robot"); // hier wird eine Instanz der Klasse 'Robot' für das übergebene Div erzeugt
myRobot.animate(); // animation starten...

myRobot.stop();
myRobot = null; // hier wird die instanz wieder freigegeben 'löschen'
delete myRobot; // alternativ kann auch die (globale) variable komplett entfernt werden

Mit dieser Variante würden die Einstellungen wie offset und frames public sein, und könnten von aussen verwendet werden.
Willst Du diese Kapseln (also sozusagen private machen), dann würdest Du sie als closure verwenden:

Code:

var Robot = function(domElementName) {
   var div = window.document.getElementById(domElementName);
   var frameHeight = 150;
   var frames = 10;
   var offsetY = 0;
   var OffOn = false;

   this.animate = function() { ... };
   this.stop = function() {...};

   return this;  // ist optional, this wird sonst in der ctor-Funktion immer zurückgegeben
};

Die Variablen wie div, frameHeight, frames etc. existieren nur innerhalb der Konstruktorfunktion und können von den dort definierten Funktionen wie animate verwendet werden. Aber sie sind nach aussen hin nicht sichtbar, da sie nicht auf 'this' (also das Objekt selber) gesetzt werden.

Ich empfehle als Lektüre zu JavaScript im übrigen "JavaScript: The Good Parts" von Douglas Crockford. Dort lernst man alle sinnvollen und guten Features im Detail kennen und auch, welche man tunlichst nicht nutzen sollte (die bad parts :) ).

[ATS3788]

Danke Phoenix

Nun ist mir vieles klar.

Werde damit ein wenig herumspielen

Martin Michael