Lektionen
Start
Jetzt lernen
CodeGym /Kurse /Frontend SELF DE /Einführung in JavaScript

Einführung in JavaScript

Frontend SELF DE
Level 2 , Lektion 5
Verfügbar

1. Tag <script>

Bevor wir tief in HTML eintauchen, möchte ich euch noch mit einer anderen coolen Sache bekannt machen — der Programmiersprache JavaScript.

JavaScript ist eine mächtige Programmiersprache, die verwendet wird, um dynamische und interaktive Webseiten zu erstellen. Sie ermöglicht es, auf Benutzeraktionen zu reagieren, den Inhalt von Webseiten zu verändern, mit Servern zu interagieren und auf viele andere Weise das Nutzererlebnis zu verbessern.

Aktuell werden wir JavaScript nicht im Detail lernen, aber manchmal werde ich es trotzdem in Beispielen verwenden. Lasst mich euch kurz erklären, wie JavaScript in ein HTML-Dokument eingebettet wird.

Java university

Der Tag <script> wird verwendet, um JavaScript-Code in ein HTML-Dokument einzubetten.

CSS+HTML+JavaScript 
      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Einführung in JavaScript</title>
</head>
<body>
    <h1>Willkommen auf meiner Seite!</h1>
    <script>
        // Hier ist euer JavaScript-Code alert('Hallo, Welt!');
    </script>
</body>
</html>

In diesem Beispiel wird der Tag <script> verwendet, um einfachen JavaScript-Code einzubetten, der ein Popup-Fenster mit der Nachricht "Hallo, Welt!" anzeigt.

2. Ein Script einbinden

Manchmal ist es besser, JavaScript-Code in einer separaten Datei zu speichern. Das verbessert die Organisation des Codes und seine Wiederverwendbarkeit. Um eine JavaScript-Datei einzubinden, wird ebenfalls der Tag <script> verwendet. Mit dem Attribut src kann der Name der JavaScript-Datei angegeben werden.

Einbindung einer externen JavaScript-Datei:

HTML 
      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Einführung in JavaScript</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Willkommen auf meiner Seite!</h1>
</body>
</html>

Diese HTML-Datei weist den Browser an, die JavaScript-Datei mit dem Namen script.js zu laden. Diese Datei kann denselben Code enthalten wie im obigen Beispiel:

JavaScript 
      
//script.js:
// Hier ist euer JavaScript-Code
alert('Hallo, Welt!');

Das Attribut defer wird verwendet, um dem Browser mitzuteilen, dass das Script ausgeführt werden soll, nachdem das gesamte HTML-Dokument vollständig geladen und angezeigt wurde.

3. Inline-Code

Erinnert ihr euch, wie wir CSS-Stile direkt im style-Attribut eines Elements geschrieben haben?

HTML 
      
<p style="color:red"> Rot</p>

Auf die gleiche Weise kann auch JavaScript-Code direkt geschrieben werden.

Angenommen, wir möchten, dass ein Element beim Klick darauf seine Farbe auf Blau ändert. Dann müssen wir folgenden Code schreiben:

HTML 
      
<p style="color:red" onclick="this.style.color = 'blue';">Rot</p>

Grün markiert ist der JavaScript-Code, der ausgeführt wird, wenn der Benutzer auf das Element <p> klickt. Einfach, oder?

  • onclick: Ein HTML-Attribut, das eine Funktion angibt, die beim Klicken auf ein Element ausgeführt wird.
  • this: Verweist auf das Element, auf das geklickt wurde.
  • style.color: Ein CSS-Property, das die Textfarbe eines Elements ändert.
Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION