JavaScript lernen: Grundlagen-Tutorial für Anfänger
JavaScript ist die Programmiersprache des Webs - sie macht Websites interaktiv und dynamisch. JavaScript läuft im Browser und kann HTML und CSS manipulieren, auf Benutzer-Interaktionen reagieren, und vieles mehr. Fast alle modernen Websites verwenden JavaScript für Interaktivität.
JavaScript ist relativ einfach zu lernen, besonders wenn Sie bereits Erfahrung mit anderen Programmiersprachen haben, aber auch für komplette Anfänger geeignet. JavaScript ist eine vielseitige Sprache, die für Frontend-Entwicklung (Browser), Backend-Entwicklung (Node.js), und Mobile-Entwicklung verwendet werden kann.
Dieses Tutorial führt Sie durch die JavaScript-Grundlagen, von Variablen bis zu DOM-Manipulation. JavaScript ist essentiell für moderne Web-Entwicklung.
Was ist JavaScript?
JavaScript ist eine Client-Side-Programmiersprache, die im Browser ausgeführt wird. JavaScript kann HTML und CSS manipulieren, auf Events reagieren, Daten validieren, und vieles mehr. JavaScript macht Websites interaktiv - ohne JavaScript wären Websites statisch.
JavaScript wird in HTML-Dateien eingebunden und läuft, wenn die Seite geladen wird. JavaScript kann auch extern in .js-Dateien gespeichert werden, was die beste Praxis ist.
JavaScript einbinden
JavaScript kann auf drei Arten eingebunden werden: Inline (direkt im HTML), Internal (im <script>-Tag), oder External (in separaten .js-Dateien). External JavaScript ist die beste Praxis.
External: <script src="script.js"></script> im HTML-Head oder vor schließendem Body-Tag. Internal: <script>console.log("Hallo");</script> im HTML. Inline: <button onclick="alert('Hallo')">Klick</button> (nicht empfohlen).
Variablen
Variablen speichern Daten. In JavaScript können Sie var, let, oder const verwenden. let und const sind moderner als var.
let name = "Max"; - Variable kann geändert werden. const age = 30; - Konstante kann nicht geändert werden. var old = "alt"; - Alte Syntax, nicht empfohlen.
Datentypen
JavaScript unterstützt verschiedene Datentypen: String (Text): let name = "Max";. Number (Zahl): let age = 30;. Boolean (wahr/falsch): let isActive = true;. Array (Liste): let colors = ["rot", "grün"];. Object (Objekt): let person = {name: "Max", age: 30};. Null/Undefined: let empty = null;.
Funktionen
Funktionen sind wiederverwendbare Code-Blöcke: function greet(name) { return "Hallo, " + name; } greet("Max");. Arrow-Funktionen (modern): const greet = (name) => "Hallo, " + name;. Funktionen können Parameter haben und Werte zurückgeben.
DOM-Manipulation
DOM (Document Object Model) ist die HTML-Struktur. JavaScript kann DOM manipulieren: Element auswählen: document.getElementById("id") oder document.querySelector(".klasse"). Inhalt ändern: element.textContent = "Neuer Text";. Style ändern: element.style.color = "red";. Klasse hinzufügen: element.classList.add("klasse");.
Events
Events sind Benutzer-Interaktionen (Klicks, Tastendrücke, etc.). Event-Listener: button.addEventListener("click", function() { alert("Geklickt!"); });. Häufige Events: click, change, submit, keydown, load.
Arrays und Schleifen
Arrays speichern mehrere Werte: let colors = ["rot", "grün", "blau"];. Zugriff: colors[0] gibt "rot" aus. Schleifen: for (let i = 0; i < colors.length; i++) { console.log(colors[i]); }. forEach: colors.forEach(color => console.log(color));.
Objekte
Objekte speichern Daten als Key-Value-Paare: let person = {name: "Max", age: 30, city: "Berlin"};. Zugriff: person.name oder person["name"]. Methoden: let person = {greet: function() { return "Hallo"; }};.
Bedingungen
if/else steuert Programmablauf: if (age >= 18) { console.log("Volljährig"); } else { console.log("Minderjährig"); }. Switch: switch(day) { case 1: console.log("Montag"); break; }. Ternary: let status = age >= 18 ? "Volljährig" : "Minderjährig";.
Asynchrones JavaScript
JavaScript kann asynchron arbeiten. setTimeout: setTimeout(() => console.log("Später"), 1000); führt Code nach 1 Sekunde aus. Promises: fetch("url").then(response => response.json()).then(data => console.log(data));. async/await: async function getData() { const response = await fetch("url"); }.
Best Practices
Verwenden Sie let und const statt var. Verwenden Sie aussagekräftige Variablennamen. Kommentieren Sie komplexen Code. Verwenden Sie externe JavaScript-Dateien. Validieren Sie User-Input. Verwenden Sie moderne JavaScript-Features (ES6+).
Kommentare