Add async event handling example with mutable state

examples/async/nappi.itp

@@ -0,0 +1,29 @@
+# Nappi — DOM Events and State in Tampio
+#
+# Tampio handles async interactions through DOM event handlers.
+# The key pattern is "X:tä painettaessa käyköön niin, että ..."
+# which attaches a click handler to a button element.
+#
+# State is stored in a "muuttuja" (variable object with an "arvo" field).
+# "kasvatetaan yhdellä" increments the stored value in place.
+# "näytetään käyttäjälle" writes the current value to the page output.
+#
+# DOM utilities:
+#   etsii elementin nimellä "id" tuloksenaan X  = document.getElementById
+#   kirjoitetaan koodi "html"                    = element.innerHTML =
+#   pyyhitään                                    = element.innerHTML = ""
+
+# Global counter — persists across button clicks
+Olkoon kiva laskuri uusi muuttuja, jonka arvo on nolla.
+
+Kun nykyinen sivu avautuu,
+	nykyinen sivu etsii elementin nimellä "output" tuloksenaan kiva alue,
+	kivalle alueelle kirjoitetaan koodi "<p><button id='natti'>+1</button> <button id='hieno'>+10</button></p>",
+	nykyinen sivu etsii elementin nimellä "natti" tuloksenaan nätti nappi,
+	nykyinen sivu etsii elementin nimellä "hieno" tuloksenaan hieno nappi,
+	nättiä nappia painettaessa käyköön niin, että
+			kivan laskurin arvoa kasvatetaan yhdellä
+		ja	kivan laskurin arvo näytetään käyttäjälle
+ja	hienoa nappia painettaessa käyköön niin, että
+			kivan laskurin arvoa kasvatetaan kymmenellä
+		ja	kivan laskurin arvo näytetään käyttäjälle.