JavaScript lernen

Die JavaScript-Syntax ist der Satz von Regeln, der definiert, wie JavaScript-Programme vom Programmierer erstellt und vom Browser oder der Laufzeit interpretiert werden.

Anweisungen und Semikolons

Eine JavaScript-Anweisung ist ein Befehl, der der Engine mitgeteilt wird:

javascriptCopy
let x = 10;
let y = 20;
let z = x + y;
console.log(z); // 30

Hinweis zu Semikolons: Semikolons trennen JavaScript-Anweisungen. Während das automatische Einfügen von Semikolons (ASI) in vielen Fällen das Weglassen ermöglicht, verhindert das Schreiben expliziter Semikolons das schwierige Parsen von Randfällen.

Groß-/Kleinschreibung und Namenskonventionen

Bei JavaScript wird die Groß-/Kleinschreibung strikt beachtet:

• Die Variablen myVariable und myvariable sind völlig unterschiedlich. – Die Standardkonvention für Variablen und Funktionen ist lowerCamelCase (getUserProfile). – Klassen und Konstruktorfunktionen verwenden UpperCamelCase (DeveloperProfile).
• Konstanten verwenden UPPER_SNAKE_CASE (MAX_RETRY_COUNT).

Kommentare

javascriptCopy
// Single line comment

/*
  Multi-line block comment
  useful for long descriptions or documentation
*/

Strikter Modus ("use strict";)

Der strikte Modus verhindert stille Fehler, verbietet versehentliche Globals und verbietet problematische Sprachfunktionen:

javascriptCopy
"use strict";

x = 3.14; // Uncaught ReferenceError: x is not defined (not declared with let/const)

Interaktives Quiz: Syntax

<div class=“interactive-quiz” data-answer=“2”> <div class=“quiz-question”>Welche Namenskonvention ist Standard für Funktionen und Variablen in JavaScript?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-syn” value=“0”> <span>snake_case</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-syn” value=“1”> <span>kebab-case</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-syn” value=“2”> <span>lowerCamelCase</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-syn” value=“3”> <span>SCREAMING_SNAKE_CASE</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Antwort prüfen</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

In JavaScript sind Variablen Container zum Speichern von Werten. Modernes JavaScript (ES6+) bietet drei Schlüsselwörter zum Deklarieren von Variablen: const, let und das alte var.

const vs. let vs. var

javascriptCopy
// Prefer const by default
const API_URL = "https://www.oldlane17.com";

// Use let when the value will change
let currentCount = 0;
currentCount += 1;

// Avoid var in modern code

Primitive Datentypen

JavaScript hat 7 primitive Datentypen plus object:

1. number: Sowohl Ganzzahlen als auch Gleitkommazahlen (z. B. 42, 3.14).
2. string: Zeichenfolge ("hello", 'world', `template ${val}`).
3. boolean: true oder false.
4. undefined: Eine deklarierte Variable, der kein Wert zugewiesen wurde.
5. null: Explizite Darstellung von „kein Wert“.
6. bigint: Ganzzahlen beliebiger Länge (9007199254740991n).
7. symbol: Eindeutiger und unveränderlicher Bezeichner (Symbol("id")).

javascriptCopy
let title = "Old Lane 17";
console.log(typeof title);       // "string"
console.log(typeof 42);          // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (historic JS quirk!)

Interaktives Quiz: Variablen<div class=“interactive-quiz” data-answer=“1”>

<div class=“quiz-question”>Welcher Fehler wird ausgegeben, wenn versucht wird, eine mit „const“ deklarierte Variable neu zuzuweisen?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-var” value=“0”> <span>ReferenceError</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-var” value=“1”> <span>TypeError (Zuweisung zu konstanter Variable)</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-var” value=“2”> <span>SyntaxError</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-var” value=“3”> <span>Kein Fehler, die Neuzuweisung erfolgt stillschweigend</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Antwort prüfen</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

JavaScript umfasst einen umfangreichen Satz an Operatoren zur Durchführung mathematischer Berechnungen, logischer Aussagen und Objektinspektionen.

Strikte Gleichheit (===) vs. lockere Gleichheit (==)

Bevorzugen Sie immer die strikte Gleichheit (===) gegenüber der losen Gleichheit (==):

• === (Streng): Überprüft sowohl Wert als auch Typ ohne Zwang.
• == (lose): Erzwingt Typen vor dem Vergleich, was zu unerwarteten Ergebnissen führt.

javascriptCopy
console.log(5 === "5"); // false (number !== string)
console.log(5 == "5");  // true  (string coerced to number)

console.log(0 === false); // false
console.log(0 == false);  // true

Moderne Tresorbetreiber: ?. und ??

Modernes JavaScript (ES2020+) hat zwei Operatoren für den sicheren Umgang mit null und undefined eingeführt:

1. Optionale Verkettung (?.)

Greift sicher auf verschachtelte Objekteigenschaften zu, ohne TypeError: Cannot read properties of undefined auszulösen:

javascriptCopy
const user = { profile: { name: "Alice" } };

// Without optional chaining: would crash if profile were null/undefined
console.log(user?.profile?.name); // "Alice"
console.log(user?.settings?.theme); // undefined (safe!)

2. Nullish Coalescing Operator (??)

Gibt den rechten Operanden nur zurück, wenn der linke Operand null oder undefined ist (im Gegensatz zu ||, der auch auf 0, "" oder false zurückgreift):

javascriptCopy
const userScore = 0;

// Logical OR (||) treats 0 as falsy!
const displayA = userScore || 10;
console.log(displayA); // 10 (Incorrect: 0 was a valid score!)

// Nullish Coalescing (??) preserves 0 and empty string
const displayB = userScore ?? 10;
console.log(displayB); // 0 (Correct!)

Logische Zuweisungsoperatoren

javascriptCopy
let count = 0;
count ||= 5; // count becomes 5 (since 0 is falsy)

let title = null;
title ??= "Default Title"; // title becomes "Default Title"

Interaktives Quiz: Operatoren<div class=“interactive-quiz” data-answer=“2”>

<div class=“quiz-question”>Was ist die Ausgabe von: null ?? ‘Fallback’ vs. falsch || „Fallback“?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-ops” value=“0”> <span>‘Fallback’ und false</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-ops” value=“1”> <span>null und ‘Fallback’</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-ops” value=“2”> <span>‘Fallback’ und ‘Fallback’</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-ops” value=“3”> <span>null und false</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Antwort prüfen</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Bedingte Anweisungen werden verwendet, um unterschiedliche Aktionen basierend auf unterschiedlichen Bedingungen auszuführen.

if, else if und else

javascriptCopy
const hour = new Date().getHours();
let greeting;

if (hour < 12) {
  greeting = "Good morning";
} else if (hour < 18) {
  greeting = "Good afternoon";
} else {
  greeting = "Good evening";
}

console.log(greeting);

Der ternäre Operator (? :)

Ein sauberer Einzeiler zum Zuweisen bedingter Werte:

javascriptCopy
const age = 19;
const canVote = age >= 18 ? "Eligible to vote" : "Too young to vote";
console.log(canVote);

Die switch-Anweisung

Beim Auswerten einer einzelnen Variablen anhand mehrerer streng übereinstimmender Fälle:

javascriptCopy
const role = "editor";

switch (role) {
  case "admin":
    console.log("Full system access");
    break;
  case "editor":
    console.log("Can edit and publish articles");
    break;
  case "viewer":
    console.log("Read-only access");
    break;
  default:
    console.log("Guest access");
}

Warnung: Fügen Sie immer break; am Ende jedes Falls ein; andernfalls wird die Ausführung automatisch zum nächsten Fall weitergeleitet!

Interaktives Quiz: Bedingungen

<div class=“interactive-quiz” data-answer=“1”> <div class=“quiz-question”>Was passiert in einer Switch-Anweisung, wenn Sie vergessen, eine „Break“-Anweisung in übereinstimmender Groß-/Kleinschreibung zu schreiben?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-cond” value=“0”> <span>Ein SyntaxError wird sofort ausgelöst</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-cond” value=“1”> <span>Ausführung erfolgt zum nächsten Fallblock</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-cond” value=“2”> <span>Die switch-Anweisung wird von Anfang an erneut ausgeführt</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-cond” value=“3”> <span>Der Standardblock wird stattdessen ausgeführt</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Antwort prüfen</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Schleifen führen einen Codeblock mehrmals aus, solange eine bestimmte Bedingung wahr ist.

1. Die Standardschleife for

javascriptCopy
for (let i = 0; i < 5; i++) {
  console.log(`Iteration: ${i}`);
}

2. for...of (Am besten für Arrays und Iterables)

for...of durchläuft Werte einer Iterable (Arrays, Strings, Sets, Maps):

javascriptCopy
const frameworks = ["Vanilla JS", "Node.js", "Cloudflare Workers"];

for (const fw of frameworks) {
  console.log(`Building with ${fw}`);
}

3. for...in (Am besten zum Überprüfen von Objekteigenschaften geeignet)

for...in iteriert über die aufzählbaren Eigenschaftsschlüssel eines Objekts:

javascriptCopy
const serverConfig = {
  host: "www.oldlane17.com",
  port: 443,
  ssl: true
};

for (const key in serverConfig) {
  console.log(`${key}: ${serverConfig[key]}`);
}

4. Moderne Array-Iterationsmethoden

In modernem JavaScript werden häufig Array-Methoden wie .forEach(), .map() und .filter() verwendet:

javascriptCopy
const numbers = [1, 2, 3, 4, 5];

// Map creates a new array transformed
const doubled = numbers.map(n => n * 2);

// Filter returns elements that pass test
const evens = numbers.filter(n => n % 2 === 0);

Interaktives Quiz: Schleifen

<div class=“interactive-quiz” data-answer=“2”> <div class=“quiz-question”>Welche Schleifenstruktur iteriert direkt über die WERTE eines Arrays?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-loop” value=“0”> <span>für…in</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-loop” value=“1”> <span>switch…case</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-loop” value=“2”> <span>für…von</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-loop” value=“3”> <span>while…each</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Antwort prüfen</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Funktionen sind die grundlegenden Bausteine ​​in JavaScript. Eine Funktion ist eine wiederverwendbare Prozedur, die Eingaben entgegennimmt, Berechnungen durchführt und einen Wert zurückgibt.

Funktionsdeklarationen vs. Ausdrücke

javascriptCopy
// Function Declaration (hoisted)
function add(a, b) {
  return a + b;
}

// Function Expression (not hoisted)
const multiply = function(a, b) {
  return a * b;
};

Pfeilfunktionen (=>)

Die in ES6 eingeführten Pfeilfunktionen bieten eine prägnante Syntax und binden keinen eigenen this:

javascriptCopy
// Standard arrow function
const subtract = (a, b) => {
  return a - b;
};

// Implicit return for single expressions
const square = x => x * x;

// Returning an object literal directly requires wrapping parentheses ({})
const makeUser = (name, role) => ({ name, role });

Restparameter und Standardwerte

javascriptCopy
// Default parameter value
function formatMessage(msg, prefix = "INFO") {
  return `[${prefix}] ${msg}`;
}

// Rest parameters: collects extra arguments into a real Array
function sumAll(...numbers) {
  return numbers.reduce((acc, n) => acc + n, 0);
}

console.log(sumAll(10, 20, 30)); // 60

Schließungen in JavaScript

Ein Abschluss ist die Kombination einer gebündelten Funktion mit Verweisen auf die umgebende lexikalische Umgebung:

javascriptCopy
function createCounter(initialValue = 0) {
  let count = initialValue;
  return {
    increment: () => ++count,
    decrement: () => --count,
    getValue: () => count
  };
}

const counter = createCounter(10);
console.log(counter.increment()); // 11
console.log(counter.increment()); // 12
console.log(counter.getValue());  // 12

Interaktives Quiz: Funktionen

<div class=“interactive-quiz” data-answer=“1”> <div class=“quiz-question”>Wie geht eine Pfeilfunktion im Vergleich zu regulären Funktionen mit dem Schlüsselwort „this“ um?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-fn” value=“0”> <span>Es bindet „dieses“ dynamisch an den Aufrufer</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-fn” value=“1”> <span>Es erbt „this“ lexikalisch vom umschließenden Ausführungsbereich</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-fn” value=“2”> <span>Es setzt „this“ immer auf null</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-fn” value=“3”> <span>Es wird ein neues globales „Dies“ erstellt</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Antwort prüfen</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Objekte in JavaScript sind Sammlungen von Schlüssel-Wert-Paaren, wobei Schlüssel Zeichenfolgen (oder Symbole) sind und Werte einen beliebigen Datentyp haben können.

Objektliterale und Kurzschrift

javascriptCopy
const name = "Old Lane 17";
const year = 2026;

// Property shorthand
const site = {
  name,
  year,
  // Method shorthand
  describe() {
    return `${this.name} (${this.year})`;
  }
};

console.log(site.describe());

Destrukturierung und Verbreitung der Syntax

javascriptCopy
const config = { host: "localhost", port: 8788, ssl: false, debug: true };

// Object Destructuring with default values
const { host, port, protocol = "http" } = config;

// Spread syntax for shallow copying and merging
const productionConfig = {
  ...config,
  host: "www.oldlane17.com",
  ssl: true
};

ES6-Klassen

ES6-Klassen bieten eine saubere, syntaxzuckerhaltige Ebene über der prototypbasierten Vererbung von JavaScript:

javascriptCopy
class Article {
  constructor(title, author) {
    this.title = title;
    this.author = author;
    this.likes = 0;
  }

  like() {
    this.likes += 1;
    return this.likes;
  }
}

class TutorialArticle extends Article {
  constructor(title, author, language) {
    super(title, author);
    this.language = language;
  }

  getSummary() {
    return `"${this.title}" (${this.language}) by ${this.author}`;
  }
}

const post = new TutorialArticle("Python Decorators", "Old Lane 17", "Python");
console.log(post.getSummary());

Interaktives Quiz: Objekte

<div class=“interactive-quiz” data-answer=“2”> <div class=“quiz-question”>Welche Syntax extrahiert die Eigenschaft „Titel“ aus einem Objekt „Artikel“ in eine lokale Variable?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-obj” value=“0”> <span>const [Titel] = Artikel;</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-obj” value=“1”> <span>const Titel <- article;</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-obj” value=“2”> <span>const { title } = Article;</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-obj” value=“3”> <span>const title = extract(article);</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Antwort prüfen</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Willkommen beim Old Lane 17 JavaScript-Tutorial. JavaScript ist die Programmiersprache des Webs. Es unterstützt dynamische Benutzeroberflächen im Browser, moderne Serverlaufzeiten über Node.js und Desktop-/mobile Anwendungen.

Warum JavaScript lernen?

• Allgegenwärtig: Jeder moderne Browser führt JavaScript nativ ohne Plugins aus.
• Vollständige Stack-Fähigkeit: Verwenden Sie JavaScript sowohl auf dem Client (Frontend) als auch auf dem Server (Node.js / Cloudflare Workers).
• Riesiges Ökosystem: Greifen Sie über npm auf Millionen von Open-Source-Paketen zu.

javascriptCopy
// Modern JavaScript (ES6+)
const greet = (name) => {
  return `Hello, ${name}! Welcome to Old Lane 17.`;
};

const users = ["Alice", "Bob", "Charlie"];
users.forEach(user => console.log(greet(user)));

Tutorial-Lehrplanübersicht

Navigieren Sie mithilfe der Seitenleiste auf der linken Seite durch die Kerngrundlagen:

Interaktives Quiz

Testen Sie Ihre JavaScript-Grundlagen:<div class=“interactive-quiz” data-answer=“1”> <div class=“quiz-question”>Welches Schlüsselwort sollte Ihre Standardauswahl für die Deklaration von Variablen sein, die in modernem JavaScript nicht neu zugewiesen werden?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-intro” value=“0”> <span>var</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-intro” value=“1”> <span>const</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-intro” value=“2”> <span>let</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-intro” value=“3”> <span>def</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Antwort prüfen</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>