питон либ луна питонлиб солнце progerlib цветок

Thema wechseln

Anmelden Registrierung
⚡ JavaScript

Hier ist die Übersetzung des Artikels von Russisch ins Deutsche, wobei alle HTML-Tags und Codeblöcke unverändert bleiben:

Lektion 2 / 35 • Vollständige Lektüre-Theorie

Was ist das und wozu dient es?

Stell dir vor, du gibst einem Roboter Befehle. Du sagst: „Roboter, schalte das Licht ein“, und er schaltet es ein. Aber damit der Roboter dich versteht, musst du in einer speziellen Sprache mit ihm sprechen. Genauso ist es mit einem Computer: Damit er etwas tut, musst du ihm einen Befehl in einer Programmiersprache geben.

JavaScript (kurz JS) ist eine solche Sprache. Sie ist sehr beliebt, weil man mit ihr Webseiten „zum Leben erwecken“ kann. Wenn du auf eine Website gehst und siehst, wie ein Bild größer wird, wenn du mit der Maus darüberfährst, oder wie ein Menü herausfährt, oder wie Pop-up-Fenster erscheinen – dann wurde das höchstwahrscheinlich mit JavaScript gemacht.

Lass uns einen Vergleich anstellen. Stell dir vor, du bist ein Sportlehrer. Du sagst zu den Schülern: „Klasse, steht auf!“, „Hebt die rechte Hand!“, „Macht einen Schritt nach vorne!“. Wenn du „Steht auf“ auf Chinesisch sagst, wird dich niemand verstehen. Man braucht eine verständliche Sprache. JavaScript ist so eine verständliche Sprache für den Browser (das Programm, mit dem du Websites anschaust, z. B. Chrome, Firefox, Safari).

Warum JavaScript lernen?

  • Es ist überall: Fast jede Website verwendet JavaScript.
  • Es ist visuell: Du siehst sofort das Ergebnis deiner Aktionen.
  • Es ist einfach für den Einstieg: Um dein erstes Programm zu schreiben, musst du keine komplexen Programme installieren – ein einfacher Texteditor und ein Browser reichen aus.
  • Es ist gefragt: Programmierer, die JavaScript können, werden von Unternehmen sehr gesucht.

In diesem Artikel lernen wir, die „Werkzeuge“ für die Arbeit mit JavaScript einzurichten und unser allererstes Programm zu schreiben – „Hello, World!“. Das ist eine Tradition aller Programmierer: Das erste Programm gibt immer diese Begrüßung aus. Betrachte es als den „ersten Schritt“ in der Welt der Programmierung.

Wenn du bereits Python kennst: In Python hast du print("Hello, World!") geschrieben. In JavaScript wird das etwas anders aussehen, aber der Sinn ist derselbe – Text auf dem Bildschirm anzuzeigen.

Codebeispiele mit Erklärung

Bevor wir Code schreiben, bereiten wir unseren „Arbeitsplatz“ vor. Du brauchst zwei Dinge:

  1. Einen Browser (Chrome, Firefox, Edge, Safari – jeder ist geeignet).
  2. Einen Texteditor – ein Programm, in dem du den Code schreibst. Die einfachste Variante ist der „Editor“ (Windows) oder „TextEdit“ (Mac) im Nur-Text-Modus. Besser ist es jedoch, einen speziellen Editor herunterzuladen, z. B. VS Code (Visual Studio Code) – er ist kostenlos und sehr praktisch.

Wie überprüft man, ob alles funktioniert? Es gibt zwei Möglichkeiten, JavaScript auszuführen:

  • Direkt im Browser (Konsole): Drücke F12 (oder Ctrl+Shift+I) auf der Tastatur, öffne den Tab „Console“ (Konsole) und schreibe den Code dort hinein. Das ist schnell, aber für größere Programme unpraktisch.
  • Über eine HTML-Datei: Wir werden eine Datei mit der Endung .html erstellen, in der sich unser JavaScript-Code befindet. Das ist die richtige Methode.

Fangen wir mit der zweiten Methode an. Erstelle einen neuen Ordner auf deinem Computer und nenne ihn z. B. „JS_Lektionen“. Erstelle darin eine Datei mit dem Namen index.html (wichtig: die Endung muss .html sein, nicht .txt). Öffne diese Datei in einem Texteditor.

Füge die folgende Basisvorlage ein:




    
    Mein erstes Programm

Speichere die Datei nun und öffne sie im Browser (doppelklicke einfach darauf). Du siehst eine leere Seite. Es ist noch nichts passiert, weil wir noch keinen Code geschrieben haben. Das ändern wir jetzt!

Beispiel 1: Das klassische „Hello, World!“

Der einfachste Weg, Text anzuzeigen, ist der Befehl alert(). Er öffnet ein Pop-up-Fenster mit einer Nachricht. Füge den folgenden Code zwischen die Tags <script> und </script> ein:

// Dies ist ein Kommentar. Der Computer ignoriert ihn.
// Er dient dazu, den Code für Menschen zu erklären.

// alert() ist eine eingebaute Funktion (wie ein Befehl).
// Sie zeigt ein Fenster mit einer Nachricht an.
alert('Hallo, Welt!'); // Den Text, den wir anzeigen wollen, schreiben wir in Anführungszeichen.

Was wird passieren? Wenn du die Seite öffnest (oder aktualisierst), erscheint ein Fenster mit dem Text „Hallo, Welt!“. Um es zu schließen, musst du auf „OK“ klicken.

Erklärung:

  • alert – das ist der Name des Befehls. Er sagt dem Browser: „Zeige ein Fenster an“.
  • Runde Klammern () – darin übergeben wir das, was wir sagen wollen. In diesem Fall den Text.
  • Anführungszeichen ' ' – sie sind nötig, damit der Computer versteht, dass es sich um Text handelt und nicht um einen Befehl. Man kann auch doppelte Anführungszeichen " " verwenden.
  • Semikolon ; – es ist wie ein Punkt am Ende eines Satzes. Es sagt: „Der Befehl ist beendet“. Man sollte es nach jedem Befehl setzen.

Vergleich mit Python: In Python würdest du print("Hallo, Welt!") schreiben. Der Unterschied besteht darin, dass print den Text in der Konsole ausgibt, während alert ihn in einem Pop-up-Fenster anzeigt.

Beispiel 2: Ausgabe in der Entwicklerkonsole

Pop-up-Fenster sind nicht sehr praktisch, wenn man viele Informationen ausgeben möchte. Programmierer verwenden häufiger die Konsole – einen speziellen Ort für die Fehlersuche. Um Text dort auszugeben, verwendet man den Befehl console.log().

Ersetze den vorherigen Code im <script>-Tag durch diesen:

// console ist ein Objekt (eine komplexe Struktur), das für die Konsole zuständig ist.
// .log() ist eine Methode (eine Aktion), die eine Nachricht in der Konsole aufzeichnet.

console.log('Dies ist eine Nachricht in der Konsole!');
console.log('Man kann eine Zahl ausgeben:', 42);
console.log('Man kann auch
← Vorherige Einleitung: Geschichte, Besonderheiten, Anwendungs Weiter → Variablen und Datentypen — JavaScript