HTML - JavaScript: Ein Anfängerleitfaden

Hallo da draußen, angehende Webentwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von HTML und JavaScript zu sein. Als jemand, der seit über einem Jahrzehnt Programmierung unterrichtet, kann ich Ihnen versichern, dass Sie einiges zu erwarten haben. Lassen Sie uns eintauchen und die Geheimnisse der Webentwicklung gemeinsam entdecken!

HTML - Javascript

Was ist JavaScript?

Bevor wir uns den Details zuwenden, lassen Sie uns verstehen, was JavaScript ist. JavaScript ist eine mächtige Programmiersprache, die Leben in Webseiten bringt. Es ist wie der magische Zauberstab des Internets, der statische HTML-Seiten tanzen, interagieren und auf Benutzeraktionen reagieren lässt.

Stellen Sie sich eine Webseite wie ein Haus vor. HTML ist die Struktur - die Wände, das Dach und das Fundament. CSS ist die Farbe und die Dekoration. JavaScript? Na ja, das ist die Elektrizität, die Sanitärinstallation und alle coolen Gadgets, die das Haus funktionell und interaktiv machen!

Syntax

JavaScript hat wie jede Sprache seine eigenen Regeln. Lassen Sie uns die Grundlagen durchbrechen:

Variablen

Variablen sind wie Behälter, die Informationen speichern. So deklarieren Sie sie:

let meinName = "Alice";
const meinAlter = 25;
var meinHobby = "coden";

In diesem Beispiel:

let wird für Variablen verwendet, die sich ändern können.
const ist für Variablen, die sich nicht ändern.
var ist eine ältere Methode zur Deklaration von Variablen, aber let und const werden jetzt bevorzugt.

Funktionen

Funktionen sind wiederverwendbare Blöcke von Code. Sie sind wie Rezepte für Ihr Programm:

function grüße(name) {
console.log("Hallo, " + name + "!");
}

grüße("Bob"); // Ausgabe: Hallo, Bob!

Diese Funktion nimmt einen name als Eingabe und gibt eine Begrüßung aus. Es ist wie ein freundlicher Roboter, der jedem, den du ihm vorstellst,Hallo sagt!

Bedingte Anweisungen

Diese helfen Ihrem Code, Entscheidungen zu treffen:

let temperatur = 22;

if (temperatur > 30) {
console.log("Es ist draußen heiß!");
} else if (temperatur > 20) {
console.log("Es ist ein schöner Tag!");
} else {
console.log("Es ist ein bisschen kalt.");
}

Dieser Code überprüft die Temperatur und gibt unterschiedliche Nachrichten basierend auf der Wärme aus. Es ist wie das Lehren Ihres Computers, ein Wetterkommentator zu sein!

Beispiele von JavaScript in HTML

Nun sehen wir, wie wir JavaScript in unseren HTML-Seiten verwenden können. Es gibt drei Hauptwege, dies zu tun:

1. Inline JavaScript

Das ist wie das Flüstern einer schnellen Anweisung:

<button onclick="alert('Hallo!')">Klicke mich</button>

Wenn Sie auf diese Schaltfläche klicken, wird eine Pop-up-Nachricht "Hallo!" anzeigen. Es ist schnell und einfach, aber nicht großartig für größere Skripte.

2. Internes JavaScript

Das ist wie dem eigenen HTML eine Gehirn zu geben:

<!DOCTYPE html>
<html>
<head>
<title(Meine Seite)</title>
<script>
function changeColor() {
document.body.style.backgroundColor = "hellblau";
}
</script>
</head>
<body>
<button onclick="changeColor()">ändere Farbe</button>
</body>
</html>

Dieses Skript ändert die Hintergrundfarbe der Seite in Hellblau, wenn Sie auf die Schaltfläche klicken. Es ist wie dem eigenen Webpage eine Chamäleon-Fähigkeit zu geben!

3. Externes JavaScript

Das ist wie dem Webpage eine separate Gehirn zu geben, auf die es sich beziehen kann:

<!DOCTYPE html>
<html>
<head>
<title(Meine Seite)</title>
<script src="myscript.js"></script>
</head>
<body>
<button onclick="grüße()">Sage Hallo</button>
</body>
</html>

Und in myscript.js:

function grüße() {
alert("Hallo aus einer externen Datei!");
}

Das hält Ihr HTML sauber und Ihr JavaScript organisiert. Es ist wie das Aufbewahren Ihrer Werkzeuge in einer Werkzeugkiste anstatt sie im Haus zu verstreuen.

HTML

Manchmal ist JavaScript möglicherweise nicht verfügbar oder aktiviert im Browser des Benutzers. Da kommt das <noscript>-Element ins Spiel:

<script>
document.write("Hallo, JavaScript funktioniert!");
</script>
<noscript>
<p>Oh nein! Dein Browser unterstützt JavaScript nicht oder es ist deaktiviert.</p>
</noscript>

Das ist wie ein Notfallplan. Wenn JavaScript funktioniert, sehen die Benutzer die erste Nachricht. Wenn nicht, die zweite. Es ist immer gut, vorbereitet zu sein!

JavaScript Methoden Tabelle

Schauen wir uns einige häufig verwendete JavaScript-Methoden an:

Methode	Beschreibung	Beispiel
`alert()`	Zeigt eine Pop-up-Nachricht	`alert("Hallo, Welt!");`
`console.log()`	Druckt in die Browser-Konsole	`console.log("Dies ist ein Log");`
`document.getElementById()`	Findet ein HTML-Element nach seiner ID	`let elem = document.getElementById("myDiv");`
`addEventListener()`	Hängt einen Ereignis-Handler an ein Element an	`button.addEventListener("click", function() { alert("Geklickt!"); });`
`setTimeout()`	Führt eine Funktion nach einer Verzögerung aus	`setTimeout(function() { console.log("Verzögerte Nachricht"); }, 2000);`

Diese Methoden sind wie die Schweizer Army knives von JavaScript - vielseitig und unglaublich nützlich!

Schlussfolgerung

Glückwunsch! Sie haben Ihre ersten Schritte in die Welt von HTML und JavaScript gemacht. Denken Sie daran, das Lernen von Code ist wie das Fahrradfahren - am Anfang mag es wackelig sein, aber mit Übung werden Sie schnell davonfliegen.

Fürchten Sie sich nicht, zu experimentieren, Fehler zu machen und daraus zu lernen. Das ist, wie alle großartigen Programmierer angefangen haben! Weiter codieren, weiter lernen und vor allem, haben Sie Spaß dabei. Bevor Sie es wissen, werden Sie erstaunliche Websites und Webanwendungen erstellen.

Frohes Coden, zukünftige Web-Zauberer! ??‍??‍?

Credits: Image by storyset

Vorheriges Tutorial:

HTML - Hinzufügen von Favicon

Nächstes Tutorial:

HTML - Layouts