JavaScript - Praxistutorial 2 - Diverse Feinarbeiten
1. Die Abschnitte
- Überblick
- Vorbereitung
- Formularinhalte überprüfen
- Diverse Feinarbeiten
- Formularelemente deaktivieren
- Formularelemente abfragen
- Formularelemente manipulieren
2. Hier stört doch was
Und zwar die Fragezeichen in den linken input-Feldern, wenn man dort nichts einträgt oder schon ein ??? vorhanden
ist. In dem Fall muss der Anwender erst alles löschen, bevor er mit der erneuten Eingabe anfängt. Da das doch ziemlich nervt, wollen wir
ihm ein wenig zur Hand gehen. So sollen denn die lästigen Fragezeichen sofort verschwinden, wenn man in das entsprechende Feld klickt.
Also erzeugen wir erst mal in der check.js die folgende Funktion.
function clearField(field)
{
if ('???' == field.value)
{
field.value = '';
}
}
Erläuterung
Der Parameter legt das entsprechende <input>-Feld fest. Wenn es den Wert ??? hat, so es mit
field.value = ''; "geleert". Sieht sehr einfach aus und ist es auch. Aber wieso können wir auf die Formularlemente
ohne das übliche Schema document.formularname.elementname zugreifen?
3. Das Wundermittel
Zunächst mal versehen wir alle <input>-Elemente im linken Bereich mit einem entsprechenden Event-Handler. Als Parameter
geben wir dabei immer ein this an.
<input type="text" name="..." onmousedown="clearField(this)" />
this
... ist in JavaScript ein "Zeiger" auf sich selbst. Einfach gesagt bedeutet das Folgendes. Jedes Element, das bei einem Event-Handler
ein this als Parameter für eine Funktion übergibt, sagt damit.
"Hey Funktion, guckst du, das hier bin ich" [Quelle: Ein Element, das sich selbst als Parameter an eine Funktion übergibt]
Wichtig!
Man könnte nun auf die Idee kommen, nicht mit Parametern zu arbeiten und das this direkt in die Funktion einzubauen. Oder
das this als Parameter der Funktion festzulegen. Aber beides funktioniert nicht. Ein this kann
in diesem Fall(!) immer nur von einem HTML-Element übergeben werden.
4. Eine Hilfsfunktion
In den nächsten beiden Abschnitten werden wir verstärkt mit Arrays arbeiten. Und wer sich
das hier schon durchgelesen hat, wird wissen, dass es in JavaScript viele
Funktionen nicht gibt, die uns zum Beispiel PHP bereit stellt. Also
basteln wir uns mal etwas, dass dem schönen in_array entspricht. Und benennen es auch genau so.
function in_array (find, arr)
{
for (var i = 0; i < arr.length; i++)
{
if (find == arr[i])
{
return true;
}
}
return false;
}
Erläuterung
find ist der Wert, den wir in arr suchen wollen. Mit for (var i = 0; i < arr.length; i++)
durchlaufen wir also besagtes Array und wenn der erste Paramater find vorhanden ist (if (find == arr[i])),
so geben wir ein true zurück (return true;) und beenden besagte Schleife damit. Gleichzeitig
wird dabei auch die Funktion abgebrochen, so dass das return false nur dann ausgeführt wird, wenn find nicht
in arr gefunden wird.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt