JavaScript-Programmierung

Was ist JavaScript?

JavaScript ist eine dynamische, hochentwickelte Programmiersprache, die interaktive Webseiten ermöglicht und ein wesentlicher Bestandteil von Webanwendungen ist.

Während HTML die Struktur bereitstellt und CSS das Styling übernimmt, fügt JavaScript Verhalten und Interaktivität zu Webseiten hinzu. Mit JavaScript kannst du dynamische Inhalte erstellen, Multimedia steuern, Bilder animieren, Formulare validieren und vieles mehr.

JavaScript wurde 1995 von Brendan Eich während seiner Arbeit bei Netscape entwickelt und hat sich seitdem zu einer der weltweit am häufigsten verwendeten Programmiersprachen entwickelt, die über den Browser hinaus in Server- Umgebungen (Node.js), mobile Anwendungen, Desktop-Software und sogar IoT-Geräte Einzug gehalten hat.

1. JavaScript-Grundlagen

JavaScript ist eine vielseitige Sprache mit einer Syntax, die dir vertraut vorkommen könnte, wenn du mit anderen Programmiersprachen gearbeitet hast. Hier sind einige grundlegende Konzepte:

Variablen und Datentypen

// Variablen
let message = "Hallo, Welt!"; // String
const pi = 3.14159;            // Zahl
var isActive = true;           // Boolean

// Modernes JavaScript bevorzugt let und const statt var
const user = {                 // Objekt
    name: "CyberUser",
    level: 42,
    isAdmin: false
};

const colors = ["rot", "grün", "blau"]; // Array
let noValue = null;            // Null
let undefinedVar;              // Undefiniert (automatisch zugewiesen)

Operatoren

// Arithmetische Operatoren
let sum = 5 + 10;      // Addition
let diff = 10 - 5;     // Subtraktion
let product = 5 * 10;  // Multiplikation
let quotient = 10 / 5; // Division
let remainder = 10 % 3; // Modulus (Rest)

// Vergleichsoperatoren
let isEqual = 5 === 5;      // Strikte Gleichheit (Wert und Typ)
let isNotEqual = 5 !== "5"; // Strikte Ungleichheit
let greaterThan = 10 > 5;   // Größer als

// Logische Operatoren
let andResult = true && false; // Logisches UND
let orResult = true || false;  // Logisches ODER
let notResult = !true;         // Logische Negation

Kontrollfluss

// Bedingte Anweisungen
if (score >= 90) {
    console.log("Hervorragend");
} else if (score >= 70) {
    console.log("Gut");
} else {
    console.log("Übe weiter");
}

// Switch-Anweisung
switch (day) {
    case "Montag":
        console.log("Beginn der Arbeitswoche");
        break;
    case "Freitag":
        console.log("Ende der Arbeitswoche");
        break;
    default:
        console.log("Ein anderer Tag");
}

// Schleifen
for (let i = 0; i < 5; i++) {
    console.log(`Durchlauf ${i}`);
}

let j = 0;
while (j < 5) {
    console.log(`While-Schleife: ${j}`);
    j++;
}

const items = ["Element1", "Element2", "Element3"];
for (const item of items) {
    console.log(item);
}

2. DOM-Manipulation

Das Document Object Model (DOM) ist eine Programmierschnittstelle für HTML-Dokumente. Es repräsentiert die Seite so, dass Programme die Dokumentstruktur, den Stil und den Inhalt ändern können.

JavaScript kann auf das DOM zugreifen und es manipulieren, wodurch du HTML-Elemente auf einer Webseite dynamisch ändern kannst.

Elemente auswählen

// Select a single element by ID
const header = document.getElementById("header");

// Select elements by class name (returns HTMLCollection)
const items = document.getElementsByClassName("item");

// Select elements by tag name (returns HTMLCollection)
const paragraphs = document.getElementsByTagName("p");

// Select elements using CSS selectors (returns first match)
const container = document.querySelector(".container");

// Select all elements matching a CSS selector (returns NodeList)
const buttons = document.querySelectorAll("button.primary");

Modifying Elements

// Change text content
element.textContent = "New text content";

// Change HTML content
element.innerHTML = "New HTML content";

// Modify attributes
element.setAttribute("src", "new-image.jpg");
const imgSrc = element.getAttribute("src");
element.removeAttribute("disabled");

// Working with classes
element.classList.add("active");
element.classList.remove("hidden");
element.classList.toggle("highlighted");
const hasClass = element.classList.contains("active");

// Change styles
element.style.color = "#00f3ff";
element.style.backgroundColor = "#1a1a2e";
element.style.fontSize = "18px";

Creating and Removing Elements

// Create a new element
const newDiv = document.createElement("div");
newDiv.textContent = "Newly created element";
newDiv.classList.add("new-item");

// Add element to the DOM
document.body.appendChild(newDiv);
parentElement.insertBefore(newDiv, referenceElement);

// Clone an element
const clone = element.cloneNode(true); // true means deep clone

// Remove elements
element.remove(); // Modern method
parentElement.removeChild(childElement); // Traditional method

3. JavaScript-Events

Events sind Aktionen oder Ereignisse, die im Browser stattfinden und von JavaScript erkannt werden können. Events ermöglichen es Ihnen, interaktive Webseiten zu erstellen, die auf Benutzeraktionen reagieren.

Event-Listener hinzufügen

// Modern approach using addEventListener
const button = document.querySelector("#submit-btn");

button.addEventListener("click", function(event) {
    console.log("Button clicked!");
    event.preventDefault(); // Prevent default action if needed
});

// Using arrow functions
element.addEventListener("mouseover", (event) => {
    element.style.backgroundColor = "#00f3ff";
});

element.addEventListener("mouseout", (event) => {
    element.style.backgroundColor = "#1a1a2e";
});

Häufige Events

click - Wenn auf ein Element geklickt wird
dblclick - Wenn ein Element doppelt geklickt wird
mouseover / mouseout - Wenn die Maus ein Element betritt/verlässt
mousedown / mouseup - Wenn die Maustaste gedrückt/losgelassen wird
keydown / keyup - Wenn eine Taste gedrückt/losgelassen wird
submit - Wenn ein Formular abgeschickt wird
load - Wenn eine Ressource (z.B. Seite, Bild) geladen wurde
resize - Wenn das Fenster in der Größe verändert wird
scroll - Wenn der Benutzer scrollt
change - Wenn sich der Wert eines Formularelements ändert

Event Bubbling und Delegation

Events in JavaScript "bubble up" (steigen auf) durch die DOM-Hierarchie standardmäßig nach oben. Dies ermöglicht Event Delegation, wobei Sie einen einzelnen Event-Listener an ein übergeordnetes Element anhängen können, um Events für mehrere untergeordnete Elemente zu verarbeiten:

// Event delegation example
const list = document.querySelector("#item-list");

list.addEventListener("click", function(event) {
    // Check if the clicked element is a list item
    if (event.target.tagName === "LI") {
        console.log("List item clicked:", event.target.textContent);
        event.target.classList.toggle("selected");
    }
});

4. Functions & Objects

Functions und Objects (Funktionen und Objekte) sind zentrale Elemente der JavaScript-Programmierung. Sie ermöglichen es Ihnen, Code effizient zu organisieren, zu strukturieren und wiederzuverwenden.

Functions

// Function declaration
function greet(name) {
    return `Hello, ${name}!`;
}

// Function expression
const sayGoodbye = function(name) {
    return `Goodbye, ${name}!`;
};

// Arrow function (ES6+)
const multiply = (a, b) => a * b;

// Default parameters
function setLevel(level = 1) {
    console.log(`Level set to ${level}`);
}

// Rest parameters
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

// Immediately Invoked Function Expression (IIFE)
(function() {
    console.log("This runs immediately!");
})();

Objects

// Object literal
const user = {
    username: "CyberUser",
    score: 95,
    isActive: true,
    
    // Method
    incrementScore: function(points) {
        this.score += points;
    },
    
    // Shorthand method syntax (ES6+)
    displayInfo() {
        console.log(`User: ${this.username}, Score: ${this.score}`);
    }
};

// Accessing properties
console.log(user.username);      // Dot notation
console.log(user["score"]);      // Bracket notation

// Adding/modifying properties
user.level = 5;
user.score = 100;

// Object destructuring (ES6+)
const { username, score } = user;

// Spread operator with objects (ES6+)
const updatedUser = { ...user, score: 110, rank: "Gold" };

Constructor Functions & Classes

// Constructor function (traditional approach)
function Player(name, level) {
    this.name = name;
    this.level = level;
    this.health = 100;
    
    this.takeDamage = function(amount) {
        this.health -= amount;
    };
}

const player1 = new Player("CyberRunner", 5);

// ES6 Class syntax (modern approach)
class Character {
    constructor(name, type) {
        this.name = name;
        this.type = type;
        this.health = 100;
        this.mana = 50;
    }
    
    castSpell(cost, damage) {
        if (this.mana >= cost) {
            this.mana -= cost;
            return damage;
        }
        return 0;
    }
    
    heal(amount) {
        this.health = Math.min(100, this.health + amount);
    }
}

const wizard = new Character("Merlin", "Wizard");