Vorlesung 3
JavaScript Grundlagen
Strings und Eingaben

Strings

Strings sind in JavaScript eine grundlegende Datentyp, die verwendet werden, um Text und Zeichenketten zu repräsentieren. In JavaScript können Strings auf zwei Arten erstellt werden: als primitive Zeichenkette oder als String-Objekt. Hier ist eine Erklärung beider Varianten.

Primitive Zeichenkette

Eine primitive Zeichenkette ist der einfachste und häufigste Weg, Strings in JavaScript zu erstellen. Sie können primitive Zeichenketten durch das Umgeben von Text mit einfachen Anführungszeichen (') oder doppelten Anführungszeichen (") erstellen.


const greeting = 'Hallo, Welt!'; // Verwendung von einfachen Anführungszeichen
const message = "Das ist ein Text."; // Verwendung von doppelten Anführungszeichen

Eigenschaften von primitiven Zeichenketten:

Unveränderlich: Primitive Zeichenketten sind unveränderlich, was bedeutet, dass Sie den Inhalt einer vorhandenen Zeichenkette nicht ändern können. Sie können jedoch neue Zeichenketten durch Konkatenation erstellen


const name = 'Alice';
const greeting = 'Hallo, ' + name; // Neue Zeichenkette durch Konkatenation

String-Objekt

String-Objekte sind spezielle Objekte in JavaScript, die zusätzliche Methoden und Eigenschaften für die Arbeit mit Zeichenketten bereitstellen. Sie können ein String-Objekt erstellen, indem Sie den String-Konstruktor verwenden.


const strObject = new String('Dies ist ein String-Objekt.');

Eigenschaften von String-Objekten:

Methoden: String-Objekte bieten eine Vielzahl von nützlichen Methoden zur Manipulation von Zeichenketten, z. B. length, charAt(), substring(), toUpperCase(), toLowerCase(), usw.


const text = 'JavaScript ist eine großartige Sprache.';
const length = text.length; // Länge der Zeichenkette
const firstChar = text.charAt(0); // Erstes Zeichen
const subString = text.substring(0, 10); // Teilzeichenkette von Index 0 bis 9

Eigenschaften: String-Objekte haben Eigenschaften, die Informationen über die Zeichenkette bereitstellen, z. B. length für die Länge der Zeichenkette.


const text = 'Dies ist ein Beispiel.';
const len = text.length; // Länge der Zeichenkette

Es ist wichtig zu beachten, dass JavaScript automatisch primitive Zeichenketten in String-Objekte umwandeln kann und umgekehrt. Dieser Prozess wird als "Implizite String-Umwandlung" bezeichnet.


const primitiveString = 'Hallo';
const stringObject = new String(primitiveString); // Konvertierung in ein String-Objekt
const backToPrimitive = stringObject.toString(); // Konvertierung zurück in eine primitive Zeichenkette

In den meisten Fällen werden primitive Zeichenketten bevorzugt, da sie einfacher zu handhaben sind. Sie können jedoch String-Objekte verwenden, wenn Sie zusätzliche Funktionen zur Arbeit mit Zeichenketten benötigen.

String-Objekt Funktionen

charAt()

Diese Methode gibt das Zeichen an einer bestimmten Position in einem String zurück.

indexOf()

Gibt den Index des ersten Vorkommens eines angegebenen Wertes in einem String zurück. Wenn der Wert nicht gefunden wird, gibt die Methode -1 zurück.

lastIndexOf()

Ähnlich wie indexOf(), aber diese Methode gibt den Index des letzten Vorkommens eines angegebenen Wertes im String zurück.

substring()

Diese Methode gibt einen Teilstring zurück, der zwischen zwei angegebenen Indizes liegt.

split()

Diese Methode teilt einen String anhand eines Trennzeichens in ein Array von Substrings auf.

Formulare

Das Arbeiten mit Formularen in HTML und JavaScript ermöglicht es Benutzern, Daten in Webanwendungen einzugeben und zu senden. Hier ist eine Schritt-für-Schritt-Erklärung, wie Sie Formulare in HTML erstellen und Daten mit JavaScript verarbeiten können:


<body>
    <h1>Formular Beispiel</h1>
    <>form id="myForm">
        <!-- Texteingabefeld -->
        <<>label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>

        <!-- Optionsfelder (Radio-Buttons) -->
        <label>Geschlecht:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Männlich</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Weiblich</label><br><br>

        <!-- Auswahlmenü (Dropdown-Liste) -->
        <label for="country">Land:</label>
        <select id="country" name="country">
            <option value="germany">Deutschland</option>
            <option value="usa">USA</option>
            <option value="france">Frankreich</option>
        </select><br><br>

        <!-- Kontrollkästchen -->
        <label for="subscribe">Newsletter abonnieren:</label>
        <input type="checkbox" id="subscribe" name="newsletter"><br><br>

        <!-- Senden-Button -->
        <input type="submit" value="Absenden">
    </form>
</body>

In diesem Beispiel haben wir ein einfaches HTML-Formular erstellt, das die Eingabe von Name, Geschlecht, Land und die Option zum Abonnieren eines Newsletters ermöglicht.

JavaScript hinzufügen, um das Formular zu verarbeiten


<script>
    // Funktion zur Verarbeitung des Formulars
    function handleSubmit(event) {
        event.preventDefault(); // Verhindert das Standardverhalten des Formulars (Seitenneuladen)

        // Formulardaten abrufen
        const form = event.target;
        const name = form.elements.name.value;
        const gender = form.elements.gender.value;
        const country = form.elements.country.value;
        const newsletter = form.elements.newsletter.checked;

        // Verarbeitung der Daten (hier: Anzeige in der Konsole)
        console.log("Name: " + name);
        console.log("Geschlecht: " + gender);
        console.log("Land: " + country);
        console.log("Newsletter abonnieren: " + newsletter);
    }

    // Formular-Element abrufen und Event-Listener hinzufügen
    const form = document.getElementById("myForm");
    form.addEventListener("submit", handleSubmit);
</script>

In diesem JavaScript-Code haben wir eine Funktion handleSubmit erstellt, die aufgerufen wird, wenn das Formular abgesendet wird. Die event.preventDefault()-Methode verhindert das Standardverhalten des Formulars (Seitenneuladen).

Wir rufen dann die Werte der Formularelemente ab, die der Benutzer eingegeben hat, und verarbeiten sie. In diesem Beispiel geben wir die Daten einfach in der Konsole aus, aber Sie können sie auch an einen Server senden oder anderweitig verwenden.

Schließlich fügen wir einen Event-Listener zum Formular hinzu, der die handleSubmit-Funktion aufruft, wenn das Formular abgesendet wird.

Mit diesen Schritten können Sie Benutzereingaben über Formulare in HTML und JavaScript erfassen und verarbeiten. Sie können die Verarbeitungsfunktion an Ihre Anforderungen anpassen, um die Daten in Ihrer Webanwendung zu verwenden oder an einen Server zu senden.