Blöcke in Pfeilfunktionen in JavaScript 

Ein Aufruf der folgenden Funktion hat den Wert »3«. Man sagt auch, die Funktion ergebe den Wert »3« oder sie gebe »3« zurück.

Auswertung

()=> 3

function ()

Auswertung

( ()=> 3 )()

3

Solche Pfeilfunktionen  haben wir schon kennengelernt.

Hinter dem Pfeil kann an der Stelle des bisherigen Ausdrucks (wie »3«) nun auch ein Block  geschrieben werden.

Auswertung

( ()=>{ console.log( "abc" ); console.log( "def" ); } )()

abc
def
undefined

Bei der Anwendung der Funktion wird der Block dann ausgewertet.

So ist es möglich, bei der Anwendung einer Funktion eine Sequenz  auswerten zu lassen.

Auswertung

f = ()=>{ console.log( "abc" ); console.log( "def" ); }

function f()

Auswertung

f()

abc
def
undefined

Pfeilfunktionen, bei denen ein Block auf der rechten Seite des Pfeiles steht, nennen wir auch Blockfunktionen.

Ausgabe eines Liedtextes

Die Eingabe der folgenden Anweisung führt zur Ausgabe eines Kuckucksliedes.

Konsole

{ { console.log( "Auf einem Baum ein Kuckuck, -" );
    { console.log( "Sim sa la dim, bam ba," );
      console.log( "Sa la du, sa la dim -" ); }
    console.log( "Auf einem Baum ein Kuckuck sass." ); }
  { console.log( "Da kam ein junger Jaeger, -" );
    { console.log( "Sim sa la dim, bam ba," );
      console.log( "Sa la du, sa la dim -" ); }
    console.log( "Da kam ein junger Jaegersmann."    ); }
  { console.log( "Der schoss den armen Kuckuck, -" );
    { console.log( "Sim sa la dim, bam ba," );
      console.log( "Sa la du, sa la dim -" ); }
    console.log( "Der schoss den armen Kuckuck tot." ); }}

Auf einem Baum ein Kuckuck, -
Sim sa la dim, bam ba,
Sa la du, sa la dim -
Auf einem Baum ein Kuckuck sass.
Da kam ein junger Jaeger, -
Sim sa la dim, bam ba,
Sa la du, sa la dim -
Da kam ein junger Jaegersmann.
Der schoss den armen Kuckuck, -
Sim sa la dim, bam ba,
Sa la du, sa la dim -
Der schoss den armen Kuckuck tot.
undefined

Der Kehrreim führt dazu, daß im Quelltext (also in der Anweisung), eine größeres Stück immer wiederholt wird.

Stilregel Die Wiederholung größerer Programmteile gilt als schlechter Stil, weil sie die Wartbarkeit des Programms verschlechtert.

Wir können die Wiederholung eines größeren Programmteils nun vermeiden, indem wir eine Funktion zur Ausgabe des Kehrreims definieren.

Konsole

k = () =>{ console.log( "Sim sa la dim, bam ba," );
      console.log( "Sa la du, sa la dim -" ); };
{ { console.log( "Auf einem Baum ein Kuckuck, -" );
    k();
    console.log( "Auf einem Baum ein Kuckuck sass." ); }
  { console.log( "Da kam ein junger Jaeger, -" );
    k();
    console.log( "Da kam ein junger Jaegersmann."    ); }
  { console.log( "Der schoss den armen Kuckuck, -" );
    k();
    console.log( "Der schoss den armen Kuckuck tot." ); }}

Auf einem Baum ein Kuckuck, -
Sim sa la dim, bam ba,
Sa la du, sa la dim -
Auf einem Baum ein Kuckuck sass.
Da kam ein junger Jaeger, -
Sim sa la dim, bam ba,
Sa la du, sa la dim -
Da kam ein junger Jaegersmann.
Der schoss den armen Kuckuck, -
Sim sa la dim, bam ba,
Sa la du, sa la dim -
Der schoss den armen Kuckuck tot.
undefined

Das Ergebnis von Blockfunktionen

Das Ergebnis der oben gezeigten Funktionen ist immer »undefined«, was man auch so beschreiben kann, daß sie keinen  Wert ergeben (wenn man den Wert »undefined« als eine Art von „Unwert“ interpretiert). Daher kann man die obigen Funktionen als Wirkfunktionen  beschreiben, ihr Sinn ist es nicht, einen bestimmten Wert zu ergeben, sondern eine bestimmte Wirkung zu haben (wie beispielsweise auch die vordefinierte Funktion »console.log«.

Übungsfragen

?   Übungsfrage

Was ist die Ausgabe der folgenden Sequenz?

Skript

beta = ()=> { console.log( "beta" ); };
main = ()=> { console.log( "alpha" ); };
main();

?   Übungsfrage

Was ist die Ausgabe der folgenden Sequenz?

Skript

beta = ()=> { console.log( "Hallo!" ); };
zeta = ()=> { beta(); beta(); };
main = ()=> { beta(); zeta(); };
main();

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

/   Übungsaufgabe

Schreiben Sie eine Definition einer Wirkfunktion namens »helloWorld«, so daß die Auswertung des Aufrufausdrucks »helloWorld()« dann den Text »hello, world« ausgibt. Hierbei soll zur Ausgabe »console.log« verwendet werden.

/   Würfeln **

Hinweis für den Dozenten  ► Diese Aufgabe ist für einen normalen Kurs an dieser Stelle zu schwierig. Sie sollte vereinfacht oder weiter nach hinten bewegt werden.

Das folgende Programm stellt drei Seiten eines Würfels dar. Überarbeiten Sie dieses Programm so, daß nur noch eine  jener drei Würfelseiten dargestellt wird und beim jedem Anklicken der Webseite eine der drei Würfelseiten zufällig ausgewählt erscheint wird. Sie können die Webseite dann auch noch so überarbeiten, daß alle sechs übliche Würfelseiten (statt nur drei) verwendet werden.

Bei dieser Aufgabe dürfen alle  Teile des HTML-Dokumentes verändert werden.

<!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">
p.die
{ display: inline-block;
  background-color: gray;
  height: 40px; width: 40px; }
span.f0
{ position: relative; top: 10px; left: 15px;
  border-radius: 50%; display: inline-block;
  width: 10px; height: 10px; background-color: black; }
span.f1
{ position: relative; top: 10px; left: 5px;
  border-radius: 50%; display: inline-block;
  width: 10px; height: 10px; background-color: black;
  box-shadow: 20px 00px 0px Black; }
span.f2
{ position: relative; top: 0px; left: 5px;
  border-radius: 50%; display: inline-block;
  width: 10px; height: 10px; background-color: black;
  box-shadow:  10px 10px 0px Black,
  20px 20px 0px Black; }
</style></head><body>
<p class="die"><span class="f0"></span></p><p></p>
<p class="die"><span class="f1"></span></p><p></p>
<p class="die"><span class="f2"></span></p><p></p>
<pre><code><script>/*<![CDATA[*/
/* JavaScript hier einfuegen */
/*]]>*/</script></code></pre></body></html>

/   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 mehrere Zeilen) kann von Ihnen festgelegt werden.

Wenn eine der beiden Tastfläche „[Ja]“ oder „[Nein]“ angeklickt wurde, soll das Formular verschwinden.

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

(Zwei ähnliche Aufgaben wurde früher schon einmal gestellt, aber damals noch ohne Formulare und dann ohne die Anforderung des Ausblendens des Formulars.)

/   Übersetzungsprogramm

Schreiben Sie ein Programm, das mit »window.prompt« ein englisches Wort einliest und dann dessen deutsche Übersetzung anzeigt. Es reicht hierbei aus, wenn das Programm die beiden Wörter “table ” („Tisch“) und “star ” („Stern“) übersetzen kann. Für andere Eingabe soll die Übersetzung lauten: „(unbekannt)“.

Zusatzaufgaben

/   Funktion deklarieren

Schreiben Sie das folgende Skript so um, daß sich wiederholende Anweisungen von einer Funktion ausgewertet werden, die dann wiederholt aufgerufen wird (bzw. aufgerufen werden). Das Umschreiben soll die Ausgabe des Skripts nicht verändern. Es sollte möglichst nur eine einzige  weitere Funktionsdefinition geschrieben werden.

Skript

console.log( "Tomaten" );
console.log( "Rotkohl Gruenkohl" );
console.log( "Gurken" ); 
console.log( "Tomaten" );
console.log( "Rotkohl Gruenkohl" );
console.log( "Spinat" ); 
console.log( "Tomaten" );
console.log( "Rotkohl Gruenkohl" );
console.log( "Kohlrabi" );

Ausgabe

Tomaten
Rotkohl Gruenkohl
Gurken
Tomaten
Rotkohl Gruenkohl
Spinat
Tomaten
Rotkohl Gruenkohl
Kohlrabi