Lernmaterialien

Basics

Fehler

Firefox - Source Maps deaktivieren:

1. Entwicklertools öffnen (F12).

2. Rechts oben auf das ⚙️ Einstellungen-Symbol klicken.

3. Unter Debugger die Option „Quellzuordnung aktivieren“ (Enable source maps) abschalten.
   → Dann werden Source Maps gar nicht erst geladen → keine Fehlermeldung.

Chrome / Edge - Source Maps deaktivieren:

1. Entwicklertools öffnen (F12).

2. Oben rechts auf ⋮ (Einstellungen) klicken.

3. Zu Preferences → Sources gehen.

4. Den Haken bei „Enable JavaScript source maps“ und „Enable CSS source maps“ entfernen.

Hello World

Java Script kann direkt im Browser ausgeführt werden:

console.log("Hello, World!");

• console: ein eingebautes Objekt in JavaScript, das verschiedene Funktionen zum Debuggen bereitstellt.

• .log(...): eine Methode von console, mit der man Ausgaben in der Konsole (z. B. im Browser-Entwicklertool oder in Node.js) anzeigen lassen kann.

• "Hello, World!": ein String (Text), der als Argument an console.log übergeben wird.

<- undefined ist eine Rückmeldung der Konsole

In JavaScript bekommt jede Funktion, die keinen return-Befehl hat, automatisch den Rückgabewert undefined.

alert

alert("Hello, World!");

• alert(...) ist eine eingebaute JavaScript-Funktion.

• Sie zeigt ein Popup-Fenster (Dialogbox) mit einer Nachricht und einem OK-Button an.

• alert zeigt die Nachricht direkt für den Benutzer sichtbar im Browserfenster an und blockiert den Code, bis der Benutzer auf OK klickt.

Bei console.log("Hello, World!"); steht ein Objekt davor (console).
Bei alert("Hello, World!"); nicht.

➡️ Der Grund liegt daran, wie JavaScript die Funktionen bereitstellt:

• console.log gehört zum Objekt console. Deshalb muss man es mit console.log(...) aufrufen.

• alert ist dagegen eine sogenannte globale Funktion. Sie wird vom Browser automatisch bereitgestellt und gehört zum window-Objekt (das Hauptobjekt im Browser).

alert("Hello, World!");
window.alert("Hello, World!");

prompt

prompt("Enter your name:");

const name = prompt("Enter your name:");
alert("Hello, " + name);

const name = prompt("Enter your name:");

• prompt(...) öffnet ein Eingabefeld (Dialogbox) im Browser.

• Der Text "Enter your name:" erscheint dabei als Hinweis für den Benutzer.

• Der Benutzer tippt etwas ein und klickt auf OK.

• Der eingegebene Text wird als String zurückgegeben.

• Mit const name = ... wird dieser Text in der Variablen name gespeichert.

alert("Hello, " + name);

• Hier wird wieder ein Popup-Fenster angezeigt.

• "Hello, " + name verbindet (konkateniert) den String "Hello, " mit dem Wert der Variable name.

Variablen

Mit let deklarierst man eine Variable, deren Wert sich ändern kann.

let age = 20;
age = 21;            // erlaubt
console.log(age);    // 21

Mit const deklarierst man eine Konstante – also eine Variable, die nicht neu zugewiesen werden darf.

const pi = 3.14159;
pi = 3;              // Fehler! Neu zuweisen ist nicht erlaubt

Beide sind block-skopiert (gelten nur innerhalb der { ... }, in denen sie definiert werden).

{ const a = 6; console.log(a); }
6
{ const a = 5; console.log(a); }
5

Bei Objekten und Arrays verhindert const nur die Neuzuweisung, nicht aber das Ändern des Inhalts.

const person = { name: "Anna" };
person.name = "Lena";   // erlaubt (Inhalt verändert)
person = {};            // Fehler! komplette Neuzuweisung verboten

Empfehlung:

• Standardmäßig const verwenden, wenn sich der Wert nicht ändern soll.

• Nur dann let nehmen, wenn man wirklich plant, den Wert später zu ändern.

    So bleibt der Code übersichtlicher und Fehler werden schneller erkannt.

Datentypen

let darf nur einmal verwendet werden!

Primitive Datentypen

string – Textwerte

let text = "Hallo";
typeof text;
<- "string"
let name = 'Thomas';

In JavaScript gibt es keinen technischen Unterschied zwischen '...' und "...".

number – Zahlen (ganz oder mit Nachkommastellen)

let zahl = 42;
let pi = 3;
pi = 3.14;
typeof zahl;
<- "number"
typeof zahl;
<- "number"

bigint – sehr große Ganzzahlen (größer als Number sicher speichern kann)

let a = 984321792837409218374109283710928374091283740918327401928374;
console.log(a);
9.843217928374092e+60
typeof a;
"number"

a = 123123123n;
typeof(a);
"bigint"

boolean – Wahrheitswerte (true oder false)

let abendschuler = true;

undefined – bedeutet: Variable wurde deklariert, aber noch nicht mit einem Wert versehen

let x;
console.log(x);       // undefined

let person = { name: "Anna" };
console.log(person.alter); // undefined

null – bewusste Abwesenheit eines Wertes

let y = null;
let person = { name: "Anna", alter: null };

symbol – eindeutige, unveränderliche Kennzeichen (oft für Objektschlüssel)

let id = Symbol("id");

Auch primitve Datentypen haben Funktionen.

let t=5;
console.log(t.toString());
7

Referenztypen (Objekte)

Object (allgemeines Objekt)

let anna = { name: "Anna", alter: 25 };

Array (Liste von Werten, technisch auch nur ein spezielles Objekt)

let primzahlen = [3, 5, 7, 11, 13, 17];
console.log(primzahlen);
Array(6) [ 3, 5, 7, 11, 13, 17 ]

Function (auch Funktionen sind Objekte)

function sagHallo() { console.log("Hallo"); }

Eingebaute Objekte Date, RegExp, Map, Set usw.

Template Literals

In Template Literals kann man Variablen und Ausdrücke direkt einsetzen

const name = "Alice";
const age = 25;

const message = `Mein Name ist ${name} und ich bin ${age} Jahre alt.`;

Der code wird lesbarer.

const title = "Willkommen";
const html = `
  <h1>${title}</h1>
  <p>Dies ist ein Beispieltext.</p>
`;

function addValue(a, b) {
  return a + b;
}

const x = 5;
const y = 7;

console.log(addValue(3,6));
9
console.log(`addValue(3,6)`);
addValue(3,6)
console.log(`${addValue(3,6)}`);
9

const message = `Die Summe von ${x} und ${y} ist ${addValue(x, y)}.`;
console.log(message);

Operators

Arithmetic Operators

const sum = 10 + 5;                 // 15
const difference = 10 - 5;          // 5
const product = 10 * 5;             // 50
const quotient = 10 / 5;            // 2


sum += 2;

Logical Operators

&&, ||, !

Equality

Loose Equality

• Vergleicht zwei Werte auf Gleichheit, wandelt aber Typen automatisch um („Type Coercion“).

10 == 10
true
10 == "10"
true

Strict Equality

• Vergleicht Wert UND Typ.

• Es findet keine automatische Typumwandlung statt.

10 === 10
true
10 === "10"
false

Fast immer === verwenden, um unerwartete Typumwandlungen zu vermeiden.

== ist nur in seltenen Spezialfällen sinnvoll (z. B. absichtlicher Vergleich mit null oder undefined).

Type Coercion

JavaScript wandelt automatisch Werte von einem Datentyp in einen anderen um, wenn das im aktuellen Kontext nötig erscheint.

Diese Umwandlung passiert z. B. bei Vergleichen (==), bei mathematischen Operationen oder bei String-Konkatenation.

console.log(5 == "5");    // true  → "5" wird zu Zahl 5
console.log(true == 1);   // true  → true wird zu Zahl 1
console.log(false == 0);  // true  → false wird zu Zahl 0

console.log("10" - 2); // 8   → "10" wird zu Zahl
console.log("10" + 2); // "102" → 2 wird zu String

Type Conversion

Man wandelt den Typ absichtlich um, z. B. mit Funktionen wie Number(), String(), Boolean().

console.log(Number("42"));     // 42
console.log(Number("3.14"));   // 3.14
console.log(Number("Hallo"));  // NaN (keine Zahl)
console.log(Number(true));     // 1
console.log(Number(false));    // 0

console.log(String(42));       // "42"
console.log(String(true));     // "true"
console.log((123).toString()); // "123"

if Abfrage

let age = 18;

if (age >= 18) {
  console.log("Volljährig");
}

let age = 16;

if (age >= 18) {
  console.log("Volljährig");
} else {
  console.log("Minderjährig");
}

let temperature = 25;

if (temperature > 30) {
  console.log("Heiß");
} else if (temperature > 20) {
  console.log("Angenehm");
} else {
  console.log("Kühl");
}

switch Anweisung

let fruit = "Apfel";

switch (fruit) {
  case "Apfel":
    console.log("Rot oder grün!");
    break;
  case "Banane":
    console.log("Gelb!");
    break;
  default:
    console.log("Unbekannte Frucht");
}

Schleifen

for (let i = 0; i < 5; i++) {
  console.log("Durchlauf:", i);
}

let count = 0;
while (count < 3) {
  console.log("Count:", count);
  count++;
}

let number = 0;
do {
  console.log("Nummer:", number);
  number++;
} while (number < 3);

let fruits = ["Apfel", "Banane", "Kirsche"];

for (let fruit of fruits) {
  console.log(fruit);
}

let person = { name: "Anna", age: 25 };

for (let key in person) {
  console.log(key, "=", person[key]);
}