Ternäre Ausdrücke in JavaScript unter Firefox 49

Formularauswertung mit JavaScript

Bei der Formularauswertung können nun auch Entscheidungsstrukturen herangezogen werden. Im folgenden Programm wird ein ternärer Operator verwendet, um eine Eingabe zu beurteilen.

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>Rechentrainer</h1>
<form>
  <p><label for="input">Was ist 2 + 5?</label>&#8195;<input type="text" id="input" value="" /></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[*/"use strict";
{ const text = window.document.getElementById( "text" );
  const button = window.document.getElementById( "button" );
  const output = window.document.getElementById( "output" );
  button.addEventListener
  ( "click", () => output.value = +input.value === 7 ? "Richtig" : "Falsch" ); }
/*]]>*/</script></code></pre></body></html>

Falls JavaScript den entscheidenden Teil der Funktionalität einer Webseite bereitstellt, sollte der Bediener der Seite darauf hingewiesen werden, wenn JavaScript deaktiviert ist. Noch besser wäre es, die Funktionalität dann auf anderem Wege (etwas über den Server) bereitzustellen.

Aus der freien Wildbahn Browser-Weichen

In manchen Fällen muß ein Programmteil für eine bestimmte JavaScript -Implementation anders geschrieben als für eine andere. Der Eintrag »navigator.appName« enthält in vielen Browsern den Namen des Browsers oder seines Herstellers. Durch einen Vergleich mit jenem Eintrag kann die Ausführung eines Programmteil von dem verwendeten Browser abhängig gemacht werden.

Beispiel einer Browser-Weiche

depth = navigator.appName !== "Netscape" ? screen.colorDepth : screen.pixelDepth

Solche Browser-Weichen veralten aber schnell, da sich Browser ständig verändern. Deswegen wird heute die Vermeidung von Browser-Weichen zugunsten von der hier etwas später beschriebenen Fähigkeitserkennung empfohlen.

Ü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.

/ Glückspiel

Erstellen Sie eine Webseite, die ein Zahl zwischen 0 und 9 zufällig festlegt. Wenn der Benutzer eine Zahl eingibt, soll ausgegeben werden, ob die eingegebene Zahl der zufällig festgelegten Zahl gleich ist. Falls ja, soll angezeigt werden „Gewonnen!“, sonst „Verloren!“. Danach (egal, ob gewonnen oder verloren wurde) soll das ganz wieder von vorne losgehen (mit einer erneute zufälligen Festlegung einer Zahl).

/ Zahlenraten

Erstellen Sie eine Webseite, die ein Zahl zwischen 0 und 99 zufällig festlegt. Wenn der Benutzer eine Zahl eingibt, soll ausgegeben werden, ob die vom Benutzer eingegebene Zahl kleiner, gleich oder größer als die zuvor festgelegte Zahl ist. Der Benutzer soll die Eingabe solange wiederholen können, bis die eingegeben Zahl der zuvor festgelegten Zahl gleich ist. Falls beiden Zahlen gleich sind soll eine neue Zahl zwischen 0 und 99 zufällig festlegt werden.