30 lines
1.5 KiB
Plaintext
30 lines
1.5 KiB
Plaintext
# 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.
|
|
#
|
|
# DOM utilities:
|
|
# etsii elementin nimellä "id" tuloksenaan X = document.getElementById
|
|
# kirjoitetaan koodi "html" = element.innerHTML += (append)
|
|
# 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><p id='tally'></p>",
|
|
nykyinen sivu etsii elementin nimellä "natti" tuloksenaan nätti nappi,
|
|
nykyinen sivu etsii elementin nimellä "hieno" tuloksenaan hieno nappi,
|
|
nykyinen sivu etsii elementin nimellä "tally" tuloksenaan kaunis alue,
|
|
nättiä nappia painettaessa käyköön niin, että
|
|
kivan laskurin arvoa kasvatetaan yhdellä
|
|
ja kauniille alueelle kirjoitetaan koodi "▪ "
|
|
ja hienoa nappia painettaessa käyköön niin, että
|
|
kivan laskurin arvoa kasvatetaan kymmenellä
|
|
ja kauniille alueelle kirjoitetaan koodi "▪▪▪▪▪▪▪▪▪▪ ".
|