Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

Erstes JavaScript-Projekt erstellen

Erstes JavaScript-Projekt erstellen

~9 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026

Jetzt schreiben wir die erste echte Datei des Haushaltsbuch-Projekts und legen die Grundstruktur an, die in den kommenden Kapiteln wächst.

Projektstruktur anlegen

mkdir src
touch src/index.js

Projektstruktur nach Kapitel 3

haushaltsbuch-app/
├── package.json
└── src/
    └── index.js

Die erste Datei: src/index.js

src/index.js
console.log('Haushaltsbuch-App gestartet');
node src/index.js
// Ausgabe: Haushaltsbuch-App gestartet

Oder über das npm-Skript aus package.json, das wir in Kapitel 2 angelegt haben:

npm start
// Ausgabe: Haushaltsbuch-App gestartet

console.log() und seine Geschwister

console.log() ist das wichtigste Werkzeug beim Lernen und Debuggen – es gibt Werte auf der Kommandozeile aus. Node.js kennt daneben weitere console-Methoden, die sich in der Praxis lohnen:

  • console.log(...) – normale Ausgabe, für allgemeine Informationen.
  • console.warn(...) – Warnung, meist gelb hervorgehoben.
  • console.error(...) – Fehlerausgabe, meist rot hervorgehoben, landet auf stderr statt stdout.
  • console.table(...) – gibt ein Array von Objekten als übersichtliche Tabelle aus, sehr nützlich für unsere spätere Transaktionsliste.
console.log('Info: App gestartet');
console.warn('Warnung: Kein Budget für Kategorie "Freizeit" gesetzt');
console.error('Fehler: Datei nicht gefunden');
console.table([
  { kategorie: 'Miete', betrag: -850 },
  { kategorie: 'Gehalt', betrag: 2400 },
]);

Kommentare

JavaScript kennt zwei Kommentar-Formen: einzeilig mit // und mehrzeilig mit /* ... */. Kommentare werden von der Engine vollständig ignoriert – sie dienen ausschließlich Menschen, die den Code lesen.

// Das ist ein einzeiliger Kommentar

/*
 * Das ist ein mehrzeiliger Kommentar,
 * z. B. für längere Erklärungen.
 */
console.log('Code nach dem Kommentar läuft normal weiter');

Semikolons: Automatic Semicolon Insertion

JavaScript-Anweisungen enden üblicherweise mit einem Semikolon ;. Tatsächlich würde der Code auch OHNE Semikolons meistens funktionieren – die Engine fügt sie über "Automatic Semicolon Insertion" (ASI) automatisch ein. Dieses automatische Verhalten hat aber ein paar überraschende Sonderfälle (z. B. bei return auf einer eigenen Zeile). Dieses Tutorial setzt Semikolons DURCHGEHEND explizit – das ist die sicherste, am weitesten verbreitete Konvention und vermeidet jede Unklarheit.

Achtung: Verlassen Sie sich NICHT auf ASI. return gefolgt von einem Zeilenumbruch und dann erst dem eigentlichen Rückgabewert wird von ASI mit einem unsichtbaren Semikolon direkt nach return "repariert" – die Funktion gibt dann undefined zurück, obwohl es syntaktisch nicht so aussieht. Schreiben Sie Semikolons immer explizit.