Formulare in JavaScript

Obwohl wir auch schon mit anderen Elementen Klick-Eingaben verarbeiten konnten, bringt das Aussehen einer Tastfläche für den Bediener viel klarer zum Ausdruck, daß die Tastfläche angeklickt werden kann.

Ein Klickzähler

Das folgende Programm zeigt die Realisierung eines Klick-Zählers mit Hilfe eines Formulares.

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
</style></head><body>
<h1>Zähler</h1>
<form>
  <p><input type="text" id="text" value="0" /></p>
  <p><button type="button" id="button">Inkrementieren!</button></p>
</form>
<pre><code><script>/*<![CDATA[*/
text = window.document.getElementById( "text" );
button = window.document.getElementById( "button" );
button.addEventListener( "click", () => text.value = +text.value + 1 );
/*]]>*/</script></code></pre></body></html>

Nach dem Start des Programms kann man – während des Programmablaufs – die einzelnen Einträge und andere Ausdrücke auch in der Konsole auswerten. Dies kann zur Fehlersuche in einem Programm hilfreich sein.

Auswertung

text

<input id="text" value="0" type="text">

Auswertung

text.value

"0"

Auswertung

text.value = +text.value + 1

Es ist auch möglich, die Funktion durch »() => window.alert( text.value = +text.value + 1 )« zu ersetzen, um sich den Wert des Ausdrucks anzeigen zu lassen.

Wir konnten zwar bisher schon dafür sorgen, daß die Flächen von Elementen auf Anklicken reagierten, aber eine Tastfläche (ein button-Element) macht durch sein normales Erscheinungsbild bereits deutlich, daß er aktiviert (beispielsweise angeklickt) werden kann und ist damit benutzerfreundlicher.

Ein Programm zur Verdopplung einer Zahl

Das folgende Programm zeigt die Verwendung eines separaten output-Feldes zur Anzeige eines Ergebnisses.

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
</style></head><body>
<h1>Verdoppler</h1>
<form>
  <p><input type="text" id="text" value="0" /></p>
  <p><button type="button" id="button">Verdoppeln!</button></p>
  <p><label for="output">Ergebnis: </label><output id="output" for="text" /></p>
</form>
<pre><code><script>/*<![CDATA[*/
text = window.document.getElementById( "text" );
button = window.document.getElementById( "button" );
output = window.document.getElementById( "output" );
button.addEventListener( "click", () => output.value = +text.value * 2 );
/*]]>*/</script></code></pre></body></html>

Ein Programm zur Auswertung eines eingegebenen Ausdrucks

Das folgende Programm zeigt die Verwendung von »eval« zur Auswertung eines eingegebenen Ausdrucks. Man kann in das Formular nun praktisch beliebig komplizierte Ausdrücke, wie beispielsweise »2+3*4«, eingeben und auswerten lassen.

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
</style></head><body>
<h1>Auswerter</h1>
<form>
  <p><input type="text" id="text" value="0" /></p>
  <p><button type="button" id="button">Auswerten!</button></p>
  <p><label for="output">Ergebnis: </label><output id="output" for="text" /></p>
</form>
<pre><code><script>/*<![CDATA[*/
text = window.document.getElementById( "text" );
button = window.document.getElementById( "button" );
output = window.document.getElementById( "output" );
button.addEventListener( "click", () => output.value = eval( text.value ));
/*]]>*/</script></code></pre></body></html>

Tatsächlich kann man jetzt beliebige JavaScript -Ausdrücke eingeben und auswerten lassen. So kann man nun durch die Eingabe von »window.alert( "Hallo!" )« einen Dialog öffnen. Gibt man ein »text = 0«, so ändert man den Wert des globalen Eintrages »text«, woraufhin das Programm nicht mehr funktioniert!

Eine solche Möglichkeit, Ausdrücke im Rahmen einer Webseite auswerten zu lassen, nennen wir auch ein Auswertungsformular (engl. “eval box ”) bezeichnet. Mit einem Auswertungsformular kann man eine einfache JavaScript -Konsole auch in Klienten nachbauen, die keine eigene JavaScript -Konsole besitzen.

Eingabeprüfung

Ein Skript könnte auch Formulareingaben prüfen, Beispielsweise eingegebene Werte auf Plausibilität prüfen.

Probleme damit sind:

Machmal werden die Prüfungen zu eng vorgenommen: Ist es wirklich immer richtig, zu verlangen, daß ein eingegebenes Alter zwischen 18 und 80 liegen muß?
Prüfungen im Klienten (Browser) können umgangen werden. Es ist also weiterhin möglich, alle möglichen Daten an den Dienst zu schicken. Daher muß der Server die Daten erneut prüfen. Solche doppelten Prüfungen sind aber ein Last, da dann auch alle Änderungen der Prüfregeln immer doppelt umgesetzt werden und das Risiko besteht, daß die Ergebnisse der Prüfungen auf dem Klienten sich von den Ergebnissen der Prüfungen auf dem Dienst unterscheiden könnten.

Ein Beispiel für eine Eingabeprüfung mit Zurückweisung einer falschen Eingabe kann an dieser Stelle des Kurses leider noch nicht vorgestellt werden, weil uns noch einige dafür benötigte Kenntnisse fehlen. Solch ein Beispiel folgt dann in der Lektion zu bedingten Auswertungen im Browser.

Übungsaufgaben

Zur Erleichterung der Bearbeitung können Sie an Stelle von »document.getElementById« auch weiterhin NAOTWO zum Elementzugriff verwenden, oder erst zum Schluß – nachdem die Aufgabe gelöst ist – NAOTWO durch den Einsatz von »document.getElementById« ersetzen.

Zur Erleichterung der Bearbeitung können Sie an Stelle von »addEventListener« auch weiterhin on-Attribute verwenden, also beispielsweise an Stelle von »span.addEventListener( "click", () => span.innerHTML = 1 );« in einem Skript-Element »onclick="span.innerHTML=1"« als Attribut des span-Elements.

Durch NAOTWO (“named access on the window object ”, NAOTWO, sprich “now two ”) werden die im HTML-Quelltext mit »id=« festgelegten Elementkennungen, falls möglich, in JavaScript als globale Namen zur Verfügung gestellt. (Siehe auch: https://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object).

Unter HTML-Quelltext versteht man Text, der in HTML geschrieben wurde – also beispielsweise »id=« enthält. – Etwa im Gegensatz zu der von einem Browser angezeigten Webseite.

Zur Erleichterung der Bearbeitung können Sie bei Übungsaufgaben in den folgenden Lektionen an Stelle von polyglottem HTML auch weiterhin SIL verwenden. Dabei kann vor den SIL-Code ein style-Element gesetzt werden und hinter den SIL-Code ein script-Element. Die drei leeren Zeilen in dem folgenden SIL-Dokument können jeweils mit CSS -Code, HTML-Code beziehungsweise JavaScript -Code befüllt werden.

Unter HTML-Quelltext versteht man Text, der in HTML geschrieben wurde – also beispielsweise »id=« enthält. – Etwa im Gegensatz zu der von einem Browser angezeigten Webseite.

/ Übungsaufgabe

Geben Sie etwas in das Programm zur Auswertung eines eingegebenen Ausdrucks ein, welches das Texteingabefeld aus der Seite entfernt (so daß es nicht mehr sichtbar und nicht mehr verwendbar ist).

/ Umsetzung von Willenserklärungen

Erstellen Sie eine Webseite, die „Ich erkläre mich mit den Nutzungsbedingungen einverstanden: [Ja] [Nein].“ anzeigt. Dies soll durch ein form-Element mit zwei button-Elementen und eventuell weiteren Elementen realisiert werden. Die Details der Gestaltung (beispielsweise eine Aufteilung auf mehrere Zeilen) können von Ihnen festgelegt werden.

Falls die Tastfläche „[Ja]“ angeklickt wurde, soll der Text „Die Lösung lautet: 37.“ angezeigt werden.

(Eine ähnliche Aufgabe wurde früher schon einmal gestellt, aber damals noch ohne Formulare.)

/ Aus der freien Wildbahn Projekt Zitatgenerator

Eine Funktion, wie im folgenden beschrieben, wurde in der freien Wildbahn im Web auf einer Fehlerseite („404“) entdeckt.

Erstellen Sie ein Formular mit zwei Ausgabetextfeldern und einer Tastfläche mit der Beschriftung „Noch ein Zitat!“. Das Formular soll ein zufällig ausgewähltes Zitat anzeigen und bei Aktivierung der Tastfläche wieder ein (anderes) Zitat zufällig auswählen und anzeigen. In dem oberen Ausgabetextfeld soll das eigentliche Zitat erscheinen, in dem unteren der Autor.

Hinweis Um eine Sammlung von Zitaten anzulegen, können Variablennamen wie »text0«, »text1«, »text2« und so weiter verwendet werden. Der Wert einer zufällig ausgewählten Variablen kann dann mit »eval« ermittelt werden. Falls Sie »eval« nicht verwenden wollen, können Sie dieses Projekt aber auch später im Kurs angehen, nachdem Reihungen vorgestellt wurden.

Hinweis Um juristischen Streitigkeiten aus dem Wege zu gehen, sollten Sie nur sehr alte Zitate verwenden, die nicht mehr urheberrechtlich geschützt sind, oder eigene Zitate erfinden.