Initial commit: IHK Ausbildung materials

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

@@ -0,0 +1,268 @@
+# 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");
+```
+
+### 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*