ihk-ausbildung/1-Ausbildungsjahr/LF6-Webanwendungen/LF6-02-Frontend.md

# 6.2 Frontend-Entwicklung

## JavaScript

### Grundlagen

```javascript
// Variablen
let name = "Max";      // veränderbar
const alter = 25;      // konstant

// Datentypen
let text = "Hallo";    // String
letzahl = 42;          // Number
let wahr = true;       // Boolean
let array = [1, 2, 3]; // Array
let objekt = {         // Object
    name: "Max",
    alter: 25
};
```

### Kontrollstrukturen

```javascript
// Bedingung
if (alter >= 18) {
    console.log("Volljährig");
} else {
    console.log("Minderjährig");
}

// Switch
switch (tag) {
    case "Mo":
    case "Di":
        console.log("Arbeitstag");
        break;
    default:
        console.log("Wochenende");
}

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

array.forEach(item => {
    console.log(item);
});
```

### Funktionen

```javascript
// Funktionsdeklaration
function gruss(name) {
    return "Hallo " + name;
}

// Arrow Function
const gruss = (name) => "Hallo " + name;

// Mit Standardwert
function gruss(name = "Gast") {
    return "Hallo " + name;
}
```

---

## DOM - Document Object Model

### Element auswählen

```javascript
// Nach ID
const element = document.getElementById("meine-id");

// Nach Klasse
const elemente = document.getElementsByClassName("klasse");

// Nach Selektor
const element = document.querySelector(".klasse");
const elemente = document.querySelectorAll("p");
```

### Inhalt ändern

```javascript
// Text ändern
element.textContent = "Neuer Text";

// HTML ändern
element.innerHTML = "<strong>Fett</strong>";

// Attribute
element.setAttribute("class", "neu");
element.getAttribute("href");
```

### Praktisches Beispiel: To-Do-Liste

```html
<!-- HTML -->
<input type="text" id="todo-input" placeholder="Neue Aufgabe">
<button id="add-btn">Hinzufügen</button>
<ul id="todo-list"></ul>
```

```javascript
// JavaScript
const input = document.getElementById('todo-input');
const button = document.getElementById('add-btn');
const list = document.getElementById('todo-list');

button.addEventListener('click', () => {
    const text = input.value.trim();
    if (text) {
        // Neues Element erstellen
        const li = document.createElement('li');
        li.textContent = text;

        // Löschen-Button
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'X';
        deleteBtn.onclick = () => li.remove();

        li.appendChild(deleteBtn);
        list.appendChild(li);
        input.value = '';
    }
});

// Enter-Taste Support
input.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') button.click();
});
```

### Events

```javascript
// Event Listener
element.addEventListener("click", function() {
    console.log("Geklickt!");
});

// Arrow Function
element.addEventListener("click", () => {
    alert("Geklickt!");
});
```

---

## Formulare

### HTML-Formular

```html
<form id="login-form">
    <label for="email">E-Mail:</label>
    <input type="email" id="email" name="email" required>

    <label for="password">Passwort:</label>
    <input type="password" id="password" name="password" required>

    <button type="submit">Anmelden</button>
</form>
```

### Formulardaten auslesen

```javascript
const formular = document.getElementById("login-form");

formular.addEventListener("submit", function(e) {
    e.preventDefault(); // Verhindert Seitenreload

    const formData = new FormData(formular);
    const daten = Object.fromEntries(formData);

    console.log(daten);
    // { email: "...", password: "..." }
});
```

---

## Frameworks

### React

```jsx
import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Zähler: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Erhöhen
            </button>
        </div>
    );
}
```

### Vue

```html
<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
    <p>Zähler: {{ count }}</p>
    <button @click="count++">Erhöhen</button>
</template>
```

### Vergleich

| Framework | Typ |特点 |
|-----------|-----|-----|
| React | Library | Flexibel, große Community |
| Vue | Framework | Einfach zu lernen |
| Angular | Framework | Enterprise, TypeScript |

---

## Asynchrone Programmierung

### Promises

```javascript
// Promise erstellen
const promise = new Promise((resolve, reject) => {
    // Async Operation
    if (erfolg) {
        resolve("Erfolg!");
    } else {
        reject("Fehler!");
    }
});

// Nutzen
promise
    .then(ergebnis => console.log(ergebnis))
    .catch(fehler => console.error(fehler));
```

### Async/Await

```javascript
async function datenLaden() {
    try {
        const response = await fetch('/api/daten');
        const daten = await response.json();
        console.log(daten);
    } catch (error) {
        console.error("Fehler:", error);
    }
}
```

---

## Fetch API

```javascript
// GET
fetch('/api/benutzer')
    .then(response => response.json())
    .then(data => console.log(data));

// POST
fetch('/api/benutzer', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: "Max",
        email: "max@example.com"
    })
})
    .then(response => response.json())
    .then(data => console.log(data));
```

---

## Querverweise

- [[LF6-01-Web-Grundlagen|Zurück: Web-Grundlagen]]
- [[LF6-03-Backend|Nächstes Thema: Backend-Entwicklung]]
- [[LF6-04-Sicherheit-Web|Web-Sicherheit]]

---

*Stand: 2024*