
JavaScript ist eine der wichtigsten Programmiersprachen im Web und ermöglicht interaktive und dynamische Webseiten. In diesem Kapitel lernst du die Grundlagen von JavaScript, wie du es in deine Webseite einbindest und erste interaktive Funktionen erstellst.
1. Was ist JavaScript?
JavaScript ist eine Programmiersprache, die im Browser ausgeführt wird. Sie wird verwendet, um:
- Inhalte dynamisch zu ändern.
- Benutzerinteraktionen zu ermöglichen.
- Daten zu laden und zu senden (z. B. via AJAX).
2. Einbinden von JavaScript
a) Inline JavaScript
Du kannst JavaScript direkt in HTML-Tags verwenden:
<button onclick="alert('Hallo Welt!')">Klick mich</button>
b) Internes JavaScript
JavaScript kann im <script>
-Tag innerhalb der HTML-Datei eingefügt werden:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Beispiel</title>
</head>
<body>
<button id="btn">Klick mich</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
alert('Hallo Welt!');
});
</script>
</body>
</html>
c) Externes JavaScript
Lagere JavaScript in eine separate Datei aus und binde sie mit dem <script>
-Tag ein:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Datei</title>
<script src="script.js"></script>
</head>
<body>
<button id="btn">Klick mich</button>
</body>
</html>
script.js:
document.getElementById('btn').addEventListener('click', function() {
alert('Hallo aus der externen Datei!');
});
3. Grundlegende Syntax
Variablen
let
: Definiert eine veränderbare Variable.const
: Definiert eine unveränderbare Konstante.var
: Veraltet, wird aber noch unterstützt.
Beispiel:
let name = 'Anna';
const alter = 25;
console.log('Name:', name, 'Alter:', alter);
Funktionen
Funktionen sind Blöcke von Code, die wiederverwendet werden können:
function begruessung(name) {
return 'Hallo, ' + name + '!';
}
console.log(begruessung('Anna'));
Bedingungen
let zahl = 10;
if (zahl > 5) {
console.log('Die Zahl ist größer als 5.');
} else {
console.log('Die Zahl ist kleiner oder gleich 5.');
}
Schleifen
for (let i = 0; i < 5; i++) {
console.log('Zahl:', i);
}
4. DOM-Manipulation
Das Document Object Model (DOM) erlaubt es, Inhalte der Webseite mit JavaScript zu ändern.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
</head>
<body>
<h1 id="headline">Willkommen</h1>
<button onclick="changeText()">Text ändern</button>
<script>
function changeText() {
document.getElementById('headline').innerText = 'Hallo Welt!';
}
</script>
</body>
</html>
5. Events
JavaScript kann auf Ereignisse wie Klicks, Eingaben oder das Laden einer Seite reagieren.
Beispiel:
document.addEventListener('DOMContentLoaded', function() {
console.log('Die Seite wurde geladen.');
});
document.getElementById('btn').addEventListener('click', function() {
console.log('Der Button wurde geklickt!');
});
6. JSON und APIs
JSON (JavaScript Object Notation) ist ein Format, um Daten zwischen Servern und Webseiten auszutauschen. JavaScript kann mit APIs Daten laden.
Beispiel:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fehler:', error));
7. Best Practices
- Schreibe sauberen, gut kommentierten Code.
- Vermeide globale Variablen.
- Nutze
const
undlet
stattvar
. - Teste deinen Code regelmäßig.
Mit diesen Grundlagen kannst du dynamische und interaktive Webseiten erstellen. Im nächsten Kapitel werden wir tiefer in fortgeschrittene JavaScript-Konzepte wie Promises, Module und Frameworks eintauchen!