Wie genau muss ich das denn anwenden? Also das komplette Script in eine Function packen? Und wie wird diese aufgerufen? Per Onload? Und was genau hat es mit den Klammern aufsich? Vor function eine Klammer?
Du solltest vielleicht erst mal wissen, dass in Javascript
function funktionsname(a, b, c) {
}
ein anderer Weg ist, um
var funktionsname = function (a, b, c) {
}
zu schreiben. Funktionen sind in Javascript ganz normale Objekte, die, wie alle anderen Objekte, in einer Variablen hausen. Erzeugt werden Funktionsobjekte mit dem Schlüsselwort function.
Im zweiten Weg oben wird das Konzept deutlich. Der erste passt sich hingegen an andere Sprachen an und ist dadurch zwar "leichter bekömmlich", verschleiert aber dummerweise die wahre Natur von Funktionen in Javascript.
Ausgeführt werden Funktionsobjekte, in dem an den Variablennamen ein Klammerpaar angehängt wird, welches bei Bedarf die Argumente übernimmt:
funktionsname(1, 2, 3); // altbekannt, aber: funktionsname ist eine echte Variable!
Bedenke: funktionsname ist nicht die Funktion, sondern die Variable, die das Funktionsobjekt enthält.
Da eine Funktion ein normales Objekt ist, kannst du analog zu
var i = 1; // Variable i mit 1 belegen
var a = i; // Inhalt von i nach a übernehmen
im Anschluss an das Erstellen der Funktion funktionsname auch
var anderername = funktionsname; // Funktionsobjekt aus funktionsname nach Variable anderername
anderername(1, 2, 3); // Funktionsobjekt ausführen
schreiben. Dieselbe Funktion ist dann sowohl unter dem Namen funktionsname als auch unter dem Namen anderername ausführbar.
Hängen wir jetzt spaßeshalber noch dieses an:
funktionsname = 23; // der Variablen funktionsname anderen Wert zuweisen
funktionsname(1, 2, 3); // Fehler!
wird der Interpreter dir die zweite Zeile um die Ohren hauen, denn in funktionsname steht ja kein Funktionsobjekt mehr, sondern ein (nicht ausführbares) Number-Objekt mit Wert 23.
Zurück zur anonymen Funktion:
Du erzeugst also eine anonyme, eine namenlose Funktion und schreibst deinen gesamten Code in dieser Funktion (hier durch … dargestellt):
function () {…}
^^^^^^^^^^^^^^^---erzeugt Funktionsobjekt
function gibt, wie eingangs beschrieben, ein Funktionsobjekt zurück. Dieses Objekt lagern wir gar nicht erst in einer Variablen, sondern lassen es an Ort und Stelle ausführen, indem wir () hintenanstellen:
function () {…}()
^^---Aufruf des neuen Funktionsobjekts
^^^^^^^^^^^^^^^---erzeugt Funktionsobjekt
Um daraus korrekte Javascript-Syntax zu machen, muss allerdings noch ein Klammerpaar hinzukommen. Dafür gibt es zwei Möglichkeiten:
(function () {…}());
(function () {…})();
Welche Variante du nimmst, ist wurscht. Die einen bevorzugen Variante 1, weil das gesamte Ding sauber in einem Klammerpaar verpackt ist. Andere nehmen Variante 2, weil dort durch das rechts aussen stehende Klammerpaar deutlicher wird, dass das Funktionsobjekt sofort aufgerufen wird.