Webentwicklung: HTML Formulare & JavaScript OOP Grundlagen

Formular-Steuerelemente: Button und Textfelder

Bisher haben wir gelernt, wie man Formulare mit verschiedenen Steuerelementen erstellt. Wir fügen ein Steuerelement vom Typ `TEXT` hinzu, das dem Benutzer die Eingabe von Zeichen über die Tastatur ermöglicht. Nun wollen wir die Bedeutung der Benennung eines Steuerelements in einem Formular verstehen. In diesem Beispiel verwenden wir vier Steuerelemente: ein Formular, eine Schaltfläche und zwei Textfelder.

Das Ereignis wird ausgelöst, wenn Sie die Schaltfläche mit dem Namen "anzeigen" drücken. Die Funktion "anzeigen" greift auf die Inhalte der beiden Textfelder zu:

var nom = document.form1.nombre.value;
var ED = document.form1.edad.value;

Um dies zu verdeutlichen, speichert die Funktion die Inhalte der Textfelder in zwei Hilfsvariablen. Beachten Sie, dass der Zugriff über das `document`-Objekt erfolgt, dann auf das Formular, das wir erstellt haben, über seinen Namen (`form1`), und anschließend auf die einzelnen Steuerelemente des Formulars über deren Namen (`nombre` und `edad`). Schließlich muss für den Zugriff auf die geladenen Zeichenketten die `.value`-Eigenschaft verwendet werden.

Das SELECT-Steuerelement

Dieses visuelle Objekt, das uns in einem Formular zur Verfügung steht, ermöglicht die Auswahl einer Zeichenkette aus einer Liste und besitzt einen damit verbundenen, nicht sichtbaren Wert. Das grundlegende Ziel in JavaScript ist es, festzustellen, welches Element ausgewählt ist und welcher Wert ihm zugeordnet ist. Dies tun wir, wenn das `onChange`-Ereignis eintritt.

Um die Position des ausgewählten Index in der Liste zu bestimmen:

Das `SELECT`-Objekt namens `select1` besitzt die `selectedIndex`-Eigenschaft, die die Position des ausgewählten Elements in der Liste speichert (beginnend bei Null).

Zur Bestimmung der ausgewählten Zeichenkette:

document.form1.select1.options[document.form1.select1.selectedIndex].text

Das `select1`-Objekt besitzt eine weitere Eigenschaft namens `options`, auf die wir über einen Index zugreifen können, um die Zeichenkette an einer bestimmten Position zu erhalten.

Es gibt Fälle, in denen nur die Zeichenkette im Objekt ausgewählt und gespeichert wird und nicht der zugehörige Wert (es ist nicht immer erforderlich, jedem Text einen Wert zuzuordnen).

Und schließlich greifen wir mit diesem Ausdruck auf den mit der Zeichenkette assoziierten Wert zu:

document.form1.select1.options[document.form1.select1.selectedIndex].value

Beispiel für die Anzeige der ausgewählten Werte in Textfeldern:

<input type="text" name="text1"> <br>
Ausgewählter Text: <input type="text" name="text2"> <br>
Zugeordneter Wert: <input type="text" name="text3"> <br>

Diese Thematik sollte gründlich analysiert werden, um das Erstellen des `SELECT`-Objekts in HTML und den Zugriff auf dessen Werte mittels JavaScript vollständig zu verstehen. Es ist wichtig zu erwähnen, dass das `SELECT`-Objekt bei einer Änderung das `onChange`-Ereignis auslöst, z.B.: `onChange="cambiarColor()"`.

Für jede Option im `SELECT`-Objekt haben wir eine Zeile, z.B. `<option value="Red">Red</option>`, wobei "Red" die im `SELECT`-Objekt angezeigte Zeichenkette ist und "Red" der damit verbundene Wert, der durch die `value`-Eigenschaft definiert wird. Durch die Analyse der Funktion `cambiarColor()` können wir sehen, wie wir die grundlegenden Werte des `SELECT`-Objekts erhalten.

Das CHECKBOX-Steuerelement

Das `CHECKBOX`-Steuerelement ist ein unabhängiges Feld, das zwei Zustände annehmen kann (aktiviert oder deaktiviert). Um zu sehen, wie es funktioniert und wie JavaScript Zugriff auf seinen Zustand erhält, wird eine kleine Beispielseite erstellt.

Das RADIO-Steuerelement

Das `RADIO`-Steuerelement macht Sinn, wenn wir mehrere Elemente haben. Nur eines kann aus der Gruppe ausgewählt werden. Es ist wichtig zu beachten, dass alle `RADIO`-Objekte in einer Gruppe den gleichen `name`-Attributwert haben müssen. Dann können wir auf jedes Element über einen Index zugreifen, z.B.:

if (document.form1.estudios[0].checked) {
    alert("Sie haben keine Studien ausgewählt");
}

Wie bei der Checkbox gibt die `checked`-Eigenschaft `true` oder `false` zurück, je nachdem, ob die Funksteuerung ausgewählt oder nicht ausgewählt ist.

Das TEXTAREA-Steuerelement

Dieses Steuerelement ist ähnlich wie das Textfeld, wird aber für mehrzeiligen Text verwendet. Das `TEXTAREA`-Tag in HTML verfügt über zwei Eigenschaften, `rows` und `cols`, die die Anzahl der sichtbaren Zeilen und Spalten auf dem Bildschirm festlegen. Um die Länge der geladenen Zeichenkette zu ermitteln, greifen wir auf die `length`-Eigenschaft zu, z.B.:

if (document.form1.curriculum.value.length > 2000) {
    // ...
}

Objektorientierte Programmierung (OOP)

Ein Objekt ist eine Struktur, die sowohl Variablen (genannt: Eigenschaften) als auch Funktionen (genannt: Methoden) enthält, die diese Variablen manipulieren. Aus dieser Struktur wurde ein neues Programmiermodell (Objektorientierte Programmierung) entwickelt, das Eigenschaften wie Vererbung oder Polymorphismus zuschreibt. Wie wir sehen werden, macht dies JavaScript zu einem hybriden Programmiermodell, das sowohl strukturierte als auch objektorientierte Programmierung vereinfacht. Das Modell der Objektorientierten Programmierung trennt sie üblicherweise in zwei Gruppen: Klassen und Instanzen (Objekte). Erstere sind abstraktere Gebilde, die eine bestimmte Menge von Objekten definieren. Letztere sind Mitglieder einer Klasse, die die gleichen Eigenschaften wie die Klasse besitzen, zu der sie gehören.

Eigenschaften und Methoden

Für den Zugriff auf die Methoden und Eigenschaften eines Objekts verwenden wir die folgende Syntax:

object.property
object.method(parameter)

Grundlagen

Objekte sind Dinge mit Identität. Sie gehören zusammen. Sie haben Eigenschaften (Attribute) und Verhaltensweisen (Funktionen, Methoden), die erfüllt sein müssen. Sie sind Kopien (Instanzen) einer Klasse und wissen, zu welcher Klasse sie gehören. Attribute oder Eigenschaften: Dies sind die Eigenschaften, die die besonderen Qualitäten der einzelnen Objekte beschreiben. Sie sollten minimal sein, um alle von der Anwendung benötigten Operationen zu ermöglichen.

Beispiele aus der realen Welt:

• Haus:
  • Attribute: Größe, Preis, Anzahl der Zimmer, etc.
  • Aufgaben: Komfort bieten, Sicherheit gewährleisten, etc.
• Büro:
  • Attribute: Höhe, Länge, Breite, etc.
  • Aufgaben: Elemente enthalten, etc.
• Fenster:
  • Attribute: Größe, Farbe, etc.
  • Aufgaben: öffnen, schließen, etc.

Beispiele aus der Programmierung:

• Fenster:
  • Eigenschaften: Größe, Farbe, etc.
  • Aufgaben: Titel anzeigen, minimieren, maximieren, etc.

Methoden (Verhaltensweisen)

Die Aufgaben werden von der Klasse erfüllt. Der Zweck einer Methode ist die Umsetzung von Aktivitäten, die der Klasse anvertraut sind. Eine Methode ist ein Algorithmus (eine Reihe von Operationen), der als Reaktion auf eine Nachricht abläuft und Wünsche erfüllt. Eine Methode besteht aus dem Namen der Operation und ihren Argumenten (Parametern). Der Name der Methode identifiziert die auszuführende Operation. Eine Methode wird von der Empfänger-Objektklasse bestimmt. Alle Objekte einer Klasse verwenden dieselbe Methode als Reaktion auf ähnliche Nachrichten. Die Interpretation einer Nachricht (Methodenauswahl) hängt vom Empfänger ab und kann bei verschiedenen Empfängern unterschiedlich sein, d.h., sie kann von einer Klasse zur anderen variieren.

Klassen

Eine Klasse ist eine Gruppierung von Objekten, die dieselben Eigenschaften und Verhaltensweisen teilen. Sie ist ein Werkzeug für Objekte, die dieselben Merkmale aufweisen (d.h., die dieselben Nachrichten empfangen und auf dieselbe Weise darauf reagieren können). Eine Klasse ist eine Darstellung einer Idee oder ein Konzept. Eine Einheit, die Code und Daten für die Methoden (Operationen) kapselt. Alle Instanzen einer Klasse verhalten sich ähnlich, indem sie dieselbe Methode als Reaktion auf ähnliche Nachrichten aufrufen. Die Klasse, zu der ein Objekt gehört, bestimmt das Verhalten des Objekts. Eine Klasse verfügt über Methoden, die die ihr anvertrauten Aktivitäten ausführen. Klassen werden wie folgt definiert:

• Attribute (Eigenschaften)
• Verhalten (Operationen oder Methoden)
• Beziehungen zu anderen Objekten

Eine Anwendung ist eine Menge von Objekten bestimmter Klassen.