Bedingte Auswertungen in JavaScript unter Firefox 49
Formularprüfung mit JavaScript
Im folgenden Programm wird ein Empfänger für das Ereignis »submit« der Formulars festgelegt. Falls keine Kundennummer eingebenen wurde, also das Eingabefeld noch ganz leer ist, wird ein Meldung angezeigt und die Einreichung des Formulars unterbunden.
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css"></style></head><body>
<h1>Kundenformular</h1>
<form id = "form" action="http://www.example.invalid">
<p><label for="input">Kundennummer?</label> <input type="text" id="kundennummer" value="" /></p>
<p><button type="submit" id="button">Einreichen!</button></p>
</form><pre><code><script>/*<![CDATA[*/"use strict";
{ const kundennummer = window.document.getElementById( "kundennummer" );
const form = window.document.getElementById( "form" );form.addEventListener( "submit", event =>
{ if( Boolean( kundennummer.value )=== false )
{ window.alert( "Bitte Kundennummer eingeben!" );
event.preventDefault(); }}); }/*]]>*/</script></code></pre></body></html>
Es darf nicht vergessen werden, daß JavaScript im Browser abgeschaltet oder manipuliert werden kann. Deswegen darf sich ein Web-Server trotz einer mit JavaScript realisierten Sicherheitsabfrage nicht darauf verlassen, daß ihn nur die gewünschten Eingaben erreichen. Vielmehr muß der Web-Server ebenfalls noch einmal alle erhaltenen Daten überprüfen, ohne irgendwelche Annahmen über sie zu machen.
Es wird manchmal empfohlen, mit JavaScript Eingaben zu verändern, deren ungeprüfte Verwendung für den Server gefährlich werden könnte. Doch dies ist der falsche Weg, da unter Umgehung von JavaScript ohnehin alles an den Server geschickt werden kann. Deswegen muß der Server gefährliche Eingaben entschärfen und nicht der Klient (JavaScript ).
Vermeidung von Laufzeitfehlern
Die Funktionen »getElementById« ergeben den Wert »null«, wenn kein Element mit der angegebenen Kennung in ihrem Kontext gefunden wird.
- Auswertung
this.document.getElementById( "abc" )
null
Falls man einen Eintrag eines Ergebnisses von »getElementById« angeben will, so führt dies zu einer Fehlermeldung, wenn jenes Ergebnis gleich »null« ist.
- Auswertung
this.document.getElementById( "abc" ).innerHTML = "def"
TypeError: this.document.getElementById(...) is null
Solche Laufzeitfehler in einem Skript werden in vielen Browsern zunächst mehr oder weniger versteckt und bleiben deshalb manchmal unbemerkt. Dabei haben sie einen fatalen Effekt: Alle folgenden Anweisungen werden nicht mehr ausgeführt!
Das folgende Programm zeigt beispielsweise nur den ersten Alarm »A« an.
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css"></style></head><body>
<pre><code><script>/*<![CDATA[*/"use strict";
alert( "A" );
this.document.getElementById( "abc" ).innerHTML = "def";
alert( "B" );
/*]]>*/</script></code></pre></body></html>
Der Laufzeitfehler in dem gezeigten Skript könnte natürlich dadurch vermieden werden, daß sichergestellt wird, daß ein Element mit der angegebenen Kennung auch vorhanden ist. Falls dies aber nicht möglich ist, kann der Laufzeitfehler durch eine vorherige Prüfung vermieden werden. Das folgende Programm zeigt nun beide Alarme an.
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css"></style></head><body>
<pre><code><script>/*<![CDATA[*/"use strict";
alert( "A" );
{ const abc = this.document.getElementById( "abc" );
if( abc )abc.innerHTML = "def"; }alert( "B" );
/*]]>*/</script></code></pre></body></html>
Fähigkeitserkennung
Manchen JavaScript -Implementationen fehlen bestimmte Einträge.
Wenn ein Eintragsausdruck mit einem Punkt ».« ausgewertet wird, zu dessen am Ende stehenden Bezeichnernamen kein Eintrag vorhanden ist, so führt dies nicht zu einem Laufzeitfehler, sondern ergibt den Wert »undefined«.
Dies kann verwendet werden, um vor der Verwendung eines möglicherweise fehlenden Eintrags zu prüfen, ob dieser vorhanden ist, und so einen Laufzeitfehler (der die Ausführung auch folgender Anweisungen verhindern würde) zu vermeiden.
- Fähigkeitserkennung
if( element.addEventListener )element.addEventListener( "click", f, false );
Noch etwas sicherer ist es, zu prüfen, ob eine Eintrag, der eine Funktion sein sollte, auch wirklich eine Funktion ist.
- Fähigkeitserkennung
if( typeof element.addEventListener === "function" )
element.addEventListener( "click", f, false );
Aus der freien Wildbahn Ausbrechen aus Rahmen
Während es heute in HTML5 gar keine Rahmen mit dem Elementtype »frame« mehr gibt, erfreuten diese sich früher großer Beliebtheit. Dabei war es auch möglich, fremde Webseiten in Rahmen einzusperren. Manche Webseite enthalten der Programmteile, um aus fremden Rahmen, in die sie eingezwängt wurden, auszubrechen. Dazu wurde zunächst mit einer Prüfung untersucht, ob die Seite in einem Rahmen enthalten ist.
- Mögliche Prüfung, ob die Seite mit dem Skript in einem Rahmen enthalten ist
if( top.location != location )
- Mögliche Prüfung, ob die Seite mit dem Skript in einem Rahmen enthalten ist
if( window != top )
- Mögliche Prüfung, ob die Seite mit dem Skript in einem Rahmen enthalten ist
if( parent.frames.length )
Falls die Prüfung „ja“ ergab, wurde der gesamte Inhalt des Browser-Fensters durch die bisher im Rahmen eingesperrte Seite ersetzt.
- Mögliche Konsequenz
top.location = "http://example.invalid/"
Natürlich funktioniert dies nur, wenn im Browser überhaupt JavaScript aktiviert ist.
Aus der freien Wildbahn Einzwängen in Rahmen
Andere Webseiten gehen genau den umgekehrten Weg: Sie wollen in einem bestimmten Rahmen sein, aber werden manchmal außerhalb ihres Rahmens angezeigt. Sie können dies erkennen und dann dafür sorgen, daß der gewünschte Rahmen angezeigt wird.
- Einzwängen in Rahmen
if( top.location == location )top.location.href = "frame-URI";
Natürlich funktioniert dies nur, wenn im Browser überhaupt JavaScript aktiviert ist.
Seitenwechsel
Die Anzeige springt bei Drücken der Seitensprungtaste zur nächsten „Seite“.
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css">#header, #footer, #content { position: absolute; right:0; left:0 }
#header { height: 100px; top: 0 }
#footer { height: 100px; bottom: 0 }
#content { top: 100px; bottom: 100px; overflow: hidden; }
.hidden { display: none; }</style></head><body>
<div class="header" id="header"><p>header</p></div>
<div class="content" id="content">
<div class="content" id="page0"><p>page0</p></div>
<div class="content hidden" id="page1"><p>page1</p></div>
<div class="content hidden" id="page2"><p>page2</p></div>
</div>
<div class="footer" id="footer"><p>footer</p></div><pre><code><script>/*<![CDATA[*/"use strict";
let pagenumber = 0;
document.addEventListener
( "keydown",
event =>
{ document.getElementById( "page" + pagenumber ).
classList.toggle( "hidden" );
if( event.key === "PageDown" )pagenumber = pagenumber + 1;
if( event.key === "PageUp" )pagenumber = pagenumber - 1;
if( pagenumber < 0 )pagenumber = 0;
if( 2 < pagenumber )pagenumber = 2;
document.getElementById( "page" + pagenumber ).
classList.toggle( "hidden" ); } );/*]]>*/</script></code></pre></body></html>
Solch ein Programm, das mehrere Seiten auf einer einzigen Web-Seite simuliert, ist eine Grundlage sowohl für manche „Dia-Shows“ als auch für manche „Web-Apps“.
Ü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.
Seitenwechsel mit Tastflächen
Fügen Sie zur Oberfläche des obigen Programms zum Seitenwechsel zwei Tastflächen hinzu, die es erlauben, auch durch Anklicken mit der Maus die Seite zu Wechseln.
/ Aus der freien Wildbahn Captcha
Erstellen Sie eine Webseite, die ein Frage stellt. Erst wenn der Benutzer JavaScript aktiviert, die richtige Antwort in ein Textfeld geschrieben hat und eine Tastfläche gedrückt hat, soll ein bestimmtes Bild auf der Seite angezeigt werden.
/ Aus der freien Wildbahn Vertrag
Erstellen Sie eine Webseite, die einen Vertragstext, ein Kontrollkästchen und eine Schaltfläche anzeigt. Erst wenn der Benutzer JavaScript aktiviert und durch das Abhaken des Kontrollkästchens den Vertrag akzeptiert, soll die Schaltfläche die Übertragung einer Datei starten.