Code verstehen, schreiben & dokumentieren

JavaScript verstehen · TypeScript nutzen

Dozent: Daniel Schlecht
Kurstag 4 – Secure World with TypeScript

Lernziele 🎯

• Ein JavaScript-Programm interpretieren (K4)
• Aus einer Aufgabenstellung selbstständig Code entwickeln (K5)
• Nutzen von Kommentaren im Code erklären (K2)
• In JS & TS sinnvolle Kommentare verfassen (K3)

Warum TypeScript?

• Erweitert JavaScript um Typensicherheit
• Hilft, Fehler früh zu erkennen
• Bessere Lesbarkeit & Wartbarkeit
• Ideal für größere & sicherheitsrelevante Projekte

Ein JS-Programm verstehen

let users = [
  { name: "Anna", active: true },
  { name: "Ben", active: false },
  { name: "Clara", active: true }
];

let activeUsers = users.filter(u => u.active);
console.log("Aktive Benutzer:");
for (let user of activeUsers) {
  console.log(user.name);
}
          

• Was speichert das Programm?
• Welche Logik filtert es?
• Was wird ausgegeben?

→ Interpretation = Code lesen, verstehen & erklären können

Übung 1 🧩

Lies den folgenden Code und erkläre in eigenen Worten, was passiert:

function doubleValues(numbers) {
  let result = [];
  for (let n of numbers) {
    result.push(n * 2);
  }
  return result;
}

console.log(doubleValues([1, 3, 5]));
          

• Was tut die Funktion?
• Welche Eingabe erwartet sie?
• Welche Ausgabe erzeugt sie?

Von der Aufgabe zum Programm

Beispiel-Aufgabe:
„Erstelle ein Programm, das die Durchschnittstemperatur aus einer Liste berechnet.“

let temps = [18, 21, 23, 19, 22];

let sum = 0;
for (let t of temps) {
  sum += t;
}
let avg = sum / temps.length;

console.log("Durchschnitt:", avg);
          

→ Struktur: Daten → Verarbeitung → Ausgabe

Übung 2 🧩

Aufgabe: Entwickle ein eigenes kleines JS-Programm

• Lies eine Liste von Zahlen (z. B. Preise)
• Berechne den Gesamtwert
• Gib das Ergebnis in der Konsole aus

let prices = [10.5, 5.9, 8.0];
let total = 0;

for (let p of prices) {
  total += p;
}
console.log("Gesamt:", total);
          

Kommentare im Code

Kommentare helfen anderen (und dir selbst!), Code schneller zu verstehen.

• // → Einzeiliger Kommentar
• /* ... */ → Mehrzeiliger Kommentar

let radius = 5; // Kreisradius in cm
let area = Math.PI * radius * radius; /* Formel: πr² */
console.log("Fläche:", area);
          

→ Gute Kommentare erklären Warum, nicht Was.

Gute vs. schlechte Kommentare

let x = 5; // Variable x
x = x + 1; // addiert 1
              

let loginAttempts = 0; // Zählt die Anzahl der Loginversuche
loginAttempts++;       // Erhöhe, wenn ein Versuch fehlschlägt
              

TypeScript: JavaScript mit Typen

let username: string = "Lisa";
let age: number = 25;
let isAdmin: boolean = false;

function greet(user: string): void {
  console.log("Hallo " + user);
}

greet(username);
          

TypeScript erkennt Typfehler bereits vor dem Ausführen und hilft, Code robuster zu machen.

TypeScript mit Objekt

type User = {
  name: string;
  email: string;
  active: boolean;
};

let user: User = {
  name: "Sophie",
  email: "sophie@example.com",
  active: true
};

console.log(user.name);
          

Durch type oder interface wird klar, welche Eigenschaften ein Objekt haben soll.

Übung 3 🧩

Schreibe ein TypeScript-Programm:

• Definiere einen Product-Typ (Name, Preis)
• Lege ein Array von Produkten an
• Berechne die Gesamtsumme
• Kommentiere deinen Code sinnvoll!

type Product = {
  name: string;
  price: number;
};

let products: Product[] = [
  { name: "Apfel", price: 1.2 },
  { name: "Banane", price: 0.9 }
];

// Berechne Gesamtsumme aller Produkte
let total = 0;
for (let p of products) {
  total += p.price;
}
console.log("Summe:", total);
          

Zusammenfassung

• JavaScript verstehen = Strukturen & Logik erkennen
• TypeScript = sichereres, typisiertes JavaScript
• Kommentare fördern Lesbarkeit & Teamarbeit
• Code ist Kommunikation – nicht nur Funktion!

Nächste Sitzung

Thema: DOM & User Interaction

Wir werden mit TypeScript & JavaScript Webseiten dynamisch verändern, auf Klicks reagieren und Benutzereingaben validieren.

Fragen?

Was war heute neu? Welche Vorteile siehst du in TypeScript?