Javascript ist Toll!

OOP in Javascript – Teil 1

Mein erster Versuch hier einen Artikel über Vererbung in JS zu schreiben, scheiterte an einem Punkt den ich übersehen hatte. Daher hier eine neue zweite Version. Ich werde den Artikel aber in drei Teile aufsplitten.

1. Teil 1. - OOP in Javascript
2. Teil 2. - MOC my Object Creator
3. Teil 3. - Vergleiche und Benchmarks

Eventhandling mit Javascript

Um in Javascript einem Objekt einen Event hinzuzufügen, bietet sich folgende Schreibweise an:

[object].onevent = function(e){

// ... tu_was

}

Wobei [object] ein Objekt des DOM ist und onevent einen Event meint, z.b. onclick. Diese Methode hat den Nachteil, dass ein bereits vorhandener Event überschrieben wird.

Die Mozilla-Funktion addEventListener() beseitigt dieses Problem, steht aber nicht in allen Browsern zu Verfügung. Die IE Variante mit attachEvent() ist leider nicht praktikabel, da bei jedem Aufruf die Funktion erneut dem Event zugefügt wird und das Eventobjekt nicht in der Eventfunktion als this zu Verfügung steht. [... weiterlesen]

include.js – die Standardbibliothek

Beschreibung

Die Datei include.js enthält einige Funktionen die das Programmieren mit Javascript leichter machen.

Hauptsächlich dient sie mir dazu Bibliotheken im Skript einfacher einzubinden. Dazu reicht der Aufruf include('lib.js');. Die Bibliothek wird relativ zum Verzeichnis der Datei include.js eingebunden. Dadurch ist es möglich, das HTML Dateien in verschiedenen Unterverzeichnissen immer den gleichen Befehl zum einbinden von Dateien benutzen können, nur der Pfad zur include.js Datei muss noch angepaßt werden.

[NEU]!
Ich habe die Funktion so erweitert, dass Dateien auch in dem Format Pfad::Datei eingegeben werden können. Ich verwende das um andere Bibliotheken, die alle unterhalb des Standardverzeichnisses liegen, nachzuladen.

Darüber hinaus enthält die Datei noch einen Satz von Funktionen um Variabeln zu testen.

Funktionen

include()

Einbinden externer Javascript Dateien. Jede Datei wird nur einmal eingebunden.

Beispiel

include('lib.js');

is_number()/is_string()/is_object()/is_function()

Die Funktion testet ob der Parameter von dem entsprechenden Typ ist.

defined()

Test ob der Parameter definiert ist.

main()

Das ist keine Funktion, sondern das Skript fügt einen onload Handler ein, der nach dem Laden der Seite nach einer Funktion main() (so heißt in C/C++ die Hauptfunktion, die beim Start eines Programmes aufgerufen wird) sucht und diese dann aufruft. Da viele Skripte erst nach dem laden der Seite starten sollen oder dürfen, müssen diese nur noch innerhalb der Funktion main() geschrieben werden.

Beispiel

<script src="include.js" type="text/javascript"></script>
<script type="text/javascript">
function main()
{
     alert('Seite fertig geladen');
}
</script>

Download

include.js (ca. 2 KB )

Zahlen formatieren

Die folgende Funktion formatiert Zahlen.

function formatZahl(zahl, k, fix) {

    if(!k) k = 0;

    var neu = '';

	var dec_point = '.';

	var thousands_sep = ',';

    // Runden

    var f = Math.pow(10, k);

    zahl = '' + parseInt(zahl * f + (.5 * (zahl > 0 ? 1 : -1)) ) / f ;

    // Komma ermittlen

    var idx = zahl.indexOf('.');

    // fehlende Nullen einfügen

    if(fix)    {

         zahl += (idx == -1 ? '.' : '' )

         + f.toString().substring(1);

    }

	var sign = zahl < 0;

	if(sign) zahl = zahl.substring(1);

    idx = zahl.indexOf('.');

	// Nachkommastellen ermittlen

    if( idx == -1) idx = zahl.length;

    else neu = dec_point + zahl.substr(idx + 1, k);

    while(idx > 0)    {

        if(idx - 3 > 0)

        neu = thousands_sep + zahl.substring( idx - 3, idx) + neu;

        else

        neu = zahl.substring(0, idx) + neu;

        idx -= 3;

    }

    return (sign ? '-' : '') + neu;

}