JavaScript ist eine leistungsstarke Skriptsprache, die im Browser ausgeführt wird und es ermöglicht, den Inhalt und das Verhalten der Webseite zu steuern. Vergleicht man es mit einem Haus, übernimmt JavaScript die Funktionalität des Hauses, einschließlich Elemente wie Elektrik, Sanitär, Hausautomation und Zentralheizung – im Grunde alles, was Funktionalität bereitstellt.

So kann JavaScript in das HTML-Dokument eingebunden werden:

Inline-JavaScript

JavaScript kann direkt im HTML-Dokument mit dem <script>-Tag eingebunden werden. Diese Methode eignet sich für das Hinzufügen von schnellen, einmaligen Skripten.

Beispiel:

Bitte klicken Sie auf die Click Me-Schaltfläche unten.

Externe JavaScript-Dateien

Für umfangreichere Skripte oder wenn Code auf mehreren Seiten wiederverwendet werden soll, ist es üblich, externe JavaScript-Dateien zu verwenden. Erstellen Sie eine separate JavaScript-Datei (z. B. index.js) und binden Sie diese mit dem <script>-Tag in das HTML-Dokument ein.

Beispiel:

Bitte überprüfen Sie alle drei Dateien im bereitgestellten Beispiel.

JavaScript-Grundlagen

JavaScript ermöglicht das Hinzufügen von Interaktivität und dynamischem Verhalten zu Webseiten. Nachfolgend einige grundlegende Konzepte:

Variablen

Variablen dienen zur Speicherung von Datenwerten. Variablen können mit den Schlüsselwörtern let oder const deklariert werden.

let age = 30;
const name = "Peter";

Funktionen

Funktionen sind wiederverwendbare Codeblöcke, die eine bestimmte Aufgabe ausführen. Funktionen können mit dem Schlüsselwort function definiert werden.

function greet() {
  alert('Hello, World!');
}

DOM-Manipulation

Das Document Object Model (DOM) stellt die Struktur einer Webseite dar. JavaScript ermöglicht die Manipulation des DOM, um den Inhalt und das Verhalten der Webseite dynamisch zu verändern.

document.getElementById('myElement').innerHTML = 'New Content';

Bedingte Anweisungen

Bedingte Anweisungen ermöglichen es, verschiedene Codeblöcke basierend auf bestimmten Bedingungen auszuführen.

if (age >= 21) {
  alert('You are an adult.');
} else {
  alert('You are a minor.');
}

Video-Tutorial