kramann.info
© Guido Kramann

Sicheres Funktionieren eines Javascript-Programms

(EN google-translate)

(PL google-translate)

Welche Möglichkeiten gibt es, das Funktionieren von Javascript-Programmen besser zu gewährleisten, als einfach Kommandos hintereinander weg in ein Skript zu schreiben?

Wie kann zudem ein dauerhaftes Funktionieren gewährleistet werden, wenn das Programm Basis eines Kiosk-Systems ist?

Nachfolgend sollen hierzu einige mögliche Maßnahmen aufgezeigt werden.

Programm aufteilen

Selbst wenn man keinen Objekt orientierten Ansatz verfolgt, läßt sich ein gewisses Maß an Modularisierung durch die bloße Aufteilung des Gesamtprogramms in einzelne Teile, die in voneinander getrennte Dateien mit der Endung .js abgelegt und beim Aufruf der Website alle geladen werden.

<script type="text/javascript" src="mathematische_hilfsfunktionen.js"></script>
<script type="text/javascript" src="zeichnen_besonderer_figuren.js"></script>
<script type="text/javascript" src="beurteilen_der_richtigkeit_von_eingaben.js"></script>
<script language:javascript>
    //Hauptteil des Programms, in dem Parameter festgelegt und Variablen definiert werden und
    //Funktionen aus den zugeladenen Teilen aufgerufen werden.
</script>

Code 0-1: Nachladen von Javascript-Programmteilen.

Da hierbei neben der übersichtlicheren besseren Strukturierung leider auch etwas an Transparenz verloren geht, da man nicht ständig alle Programmteile vor sich hat, muß auch ohne Objekt orientierten Ansatz einige Mühe darin verwendet werden, die Kopplung der Programmteile untereinander gering zu halten.

Schlecht wäre beispielsweise, wenn Variablen in einem Teil definiert und in einem anderen mit benutzt werden. Dies kann dadurch vermieden werden, dass solche Variablen stets an Funktionen übergeben werden müssen. So wird sichtbar, dass sie benötigt werden. Tendenziell werden in den zugeladenen Programmteilen also eher Funktionen stehen.

Objektorientierung

In Javascript gibt es nur Funktionen, die aber auch als Referenz in Variablen gespeichert werden können und auch wiederum selbst Funktionen enthalten können. Außerdem kann man mit dem Schlüsselwort "new" neue Instanzen von Funktionen erstellen.

"Klassen" und "Objektinstanzen" lassen sich auf dieser Grundlage u.a. folgendermaßen umsetzen (Beispiel):

//Die "Klasse" ist gleichzeitig "Konstruktor"
function Kontra(oktave)
{
    this.oktave = oktave;

    this.absolut = function(x)
    {
        if(x<0) return -x;
        return x;
    }

    this.oktavsprung = function(x,y)
    {
        if(this.absolut(x-y)==this.oktave) 
            return true;
        else
            return false;
    }
}

Code 0-2: Klassen und Objekt mit Javascript: Datei kontra.js

<!DOCTYPE html>
<html>
    <head lang="de">
        <meta charset="iso-8859-1">
        <script type="text/javascript" src="kontra.js"></script>
        <script language:javascript>

            var kontra12 = new Kontra(12);
            var kontra11 = new Kontra(11);

            alert(kontra12.oktavsprung(1,13));
            alert(kontra11.oktavsprung(1,13));
            alert(kontra11.oktavsprung(1,12));
            alert(kontra11.absolut(-122));

            alert(kontra11.oktave);

        </script>
    </head>
    <body>
    </body>
</html>

Code 0-3: Klassen und Objekt mit Javascript: Datei kontra.html im gleichen Verzeichnis.

Kapselung

//Die "Klasse" ist gleichzeitig "Konstruktor"
function Kontra(okt)
{
    var oktave = okt;

    function absolut(x)
    {
        if(x<0) return -x;
        return x;
    }

    this.oktavsprung = function(x,y)
    {
        if(absolut(x-y)==oktave) 
            return true;
        else
            return false;
    }
}

Code 0-4: Klassen und Objekt mit Javascript: Datei kontra_gekapselt.js

<!DOCTYPE html>
<html>
    <head lang="de">
        <meta charset="iso-8859-1">
        <script type="text/javascript" src="kontra_gekapselt.js"></script>
        <script language:javascript>

            var kontra12 = new Kontra(12);
            var kontra11 = new Kontra(11);

            alert(kontra12.oktavsprung(1,13));
            alert(kontra11.oktavsprung(1,13));
            alert(kontra11.oktavsprung(1,12));
            alert(kontra11.absolut(-122));

            alert(kontra11.oktave);

        </script>
    </head>
    <body>
    </body>
</html>

Code 0-5: Klassen und Objekt mit Javascript: Datei kontra_gekapselt.html im gleichen Verzeichnis.

Läßt man bei Funktionen und Variablen einer "Javascript-Klasse" das "this" weg, so können diese Elemente nicht von außen zugegriffen werden.

Man erhält eine Art "private"-Elemente.

oop.zip - obiges Beispiel.

Vollständigkeit

Befehle einer Skriptsprache werden einzeln der Reihe nach verarbeitet. Beim laden von Dokumenten aus dem Internet mit Skriptteilen kann nicht davon ausgegangen werden, dass die Abarbeitung eines Skripts erst beginnt, wenn es vollständig geladen ist.

Darum macht es Sinn, die Vollständigkeit des Ladevorgangs abzuprüfen und erst wenn diese gewährleistet ist, ein Programm zu starten.

Dies geht am einfachsten mit einem Eintrag "onload" im body-Tag und dem damit verknüpften Initialisierungsbefehl eines Programms.

Die Funktion "initialisieren()" ist dabei eine selbst geschriebene Javascript-Funktion irgendwo in den geladenen Programmteilen. Sie startet alle zu startenden Programmteile und führt nötige Initialisierungen durch.

//....
<body onload="javascript:initialisieren()">
</body>
//....

Code 0-6: Beispiel für einen onload-Eintrag.