Startercode für JavaScript

(function(myparm)
  {

    //  ... Hier kommt der eigene JavaScript-Code rein ...

    alert(myparm);
  } )('soso');

Der etwas kryptische Code ()(); ist der Call-Operator für Funktionen.
In der ersten Klammer wird eine namenlose Funktion notiert, die der Call-Operator zur Laufzeit sofort ausführt. Man könnte auch sagen: Der Call-Operator macht aus einer Funktions-Definition eine Anweisung.

In diesem Beispiel hat die namenlose Funktion noch einen Parameter (myparm). Dieser Parameter steht dann innerhalb der Funktion als interne Variable zur Verfügung und kann beliebig verwendet werden. Im Beispiel wird er per alert() einfach ausgegeben.

Aber woher erhält der Parameter seinen Wert? - Aus der zweiten Klammer! Im Beispiel ist es nur die Zeichenkette 'soso'.

Das ganze Konstrukt ist insofern sinnvoll, als das man innerhalb der namenlosen Funktion das eigentliche Programm notieren kann, das man benötigt, also alle Objekte, Definitionen und Anweisungen. Das ganze Programm läuft dann wie erwartet ab. Der Unterschied: die eigene Applikation befindet sich nicht im lokalen Raum, kann also nicht in Konflikte mit weiteren JavaScript-Frameworks kommen, die man auf derselben HTML-Seite einbinden möchte.

Notiert man JavaScript man Ende einer HTML-Seite, dann ist man sicher, dass der ganze HTML-Code, auf den JavaScript zugreifen soll, auch im Browser geladen ist.
Aus Gründen der leichteren Wartbarkeit einer HTML-Seite ist es günstig, möglichst nur eine einzige Stelle zum Einbinden von JavaScript-Code zu haben; und das ist üblicherweise die Einbindung einer JavaScript-Datei im Header und sonst nirgends.

Das erfordert für unsere Applikation einen zusätzlichen Code, der bewirkt, dass das Programm auf das Ende des Ladens der HTML-Seite wartet, bevor Zugriffe auf HTML-Elemente stattfinden.

  document.onreadystatechange = function () {
    if (document.readyState == "complete") {
      
       //  ... unsere eigentliche JavaScript-Anwendung hier notieren ...

    }
  }

document.onreadystatechange startet die Funktion, die ihr zugewiesen wurde, jedoch erst, wenn die Seite geladen ist. Dabei gibt es mehrere Phasen. Die if-Anweisung fragt document.readyState ob "complete" erreicht ist. Dann wissen wir, dass das HTML-Dokument vollständig geladen wurde und erst dann wird der Code innerhalb von if ausgeführt.

Die document.onreadystatechange-Konstruktion kann nur einmal vorkommen und muss daher die äußerste Hülle unseres Codes sein. Darin können aber mehrere Call-Operatoren untergebracht werden, jeder mit seiner gekapselten Teilapplikation.

  document.onreadystatechange = function () {
    if (document.readyState == "complete") {
      
       (function() {

        //  ... Teilapplikation 1 ...

       } )();
      
       (function() {

        //  ... Teilapplikation 2 ...

       } )();

      // ...

    }
  }

Damit haben wir eine Möglichkeit, verschiedenen JavaScript-Code komplett im Header einzubinden.

Anstatt der document.onreadystatechange-Konstruktion wird gern diese verwendet:

document.addEventListener('DOMContentLoaded', function () {

  ... eigene Applikationen ... 

} 

Der Scriptcode wird ausgelöst, wenn der DOM-Baum komplett steht, aber Stylesheets, Bildinhalte u.a Ressourcen eventuell noch geladen werden. Das entspricht der document.onreadystatechange-Konstruktion, wenn diese statt 'complete' den Wert 'interactive' verwenden würde.

Siehe dazu im MDN Document:readyState property.