4.5 KiB
4.5 KiB
6.2 Frontend-Entwicklung
JavaScript
Grundlagen
// 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
// 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
// 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
// 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
// Text ändern
element.textContent = "Neuer Text";
// HTML ändern
element.innerHTML = "<strong>Fett</strong>";
// Attribute
element.setAttribute("class", "neu");
element.getAttribute("href");
Events
// Event Listener
element.addEventListener("click", function() {
console.log("Geklickt!");
});
// Arrow Function
element.addEventListener("click", () => {
alert("Geklickt!");
});
Formulare
HTML-Formular
<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
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
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
<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
// 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
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
// 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
Stand: 2024