Kreikan sana dýnamis (δύναμις) tarkoittaa voimaa, ja monissa yhteyksissä sen johdokset todella tarkoittavat fysikaalista voimaa tai siihen liittyviä suureita kuten tehoa. Niinpä tästä johtuvien mielleyhtymien takia dynaamisuus on tai sen oletetaan olevan myyvää. Erityisesti sitä usein käytetään ilmaisemaan muutosta tai muutettavuutta, kiinteän eli staattisen vastakohtana.
Ilmaisua DHTML eli dHTML eli dynamic HTML kuvataan Web-konsortion DOM-sivulla näin (suomennos minun):
"Dynaaminen HTML" on termi, jota jotkin ohjelmistovalmistajat käyttävät kuvaamaan HTML:n, tyylisäännöstöjen ja skriptien yhdistelmää, joka mahdollistaa dokumenttien elävöittämisen.
Tässä olen suomentanut epämääräisen sanan animate yhtä (?) epämääräiseksi elävöittämiseksi. Se tarkoittaa muun muassa sitä, että dokumentin ulkoasu voi muuttua; esimerkiksi tekstin väri voi muuttua, kun kursori viedään sen päälle taikka painikkeen klikkaaminen voi vaihtaa koko sivun taustavärin.
"Dynaaminen HTML" = HTML + tyylisäännöstöt + JavaScript (tai muu selainskriptikieli) + sekalaisia tapoja yhdistellä niitä. Kyse ei siis ole mistään HTML-kielen laajennuksesta vaan eri tekniikoiden yhdistelmästä.
Laajahkon johdannon "dynaamiseen HTML:ään" tarjoaa Davud Gardnerin Beginner's Guide to DHTML. Sitä ja muuta vastaavaa aineistoa lukiessa kannattaa muistaa, että kilpailevista lähestymistavoista Netscapen ns. tasot (layers) hävisivät Microsoftin lähestymistavalle, jota edellä mainittu Web-konsortion määrittelemä DOM (dokumenttioliomalli, Document Object Model) lähinnä vastaa. Täten kyseinen Netscapen tekniikka kannattaa käytännössä unohtaa. (Jos kuitenkin haluat siihen vielä perehtyä, niin hyvän johdatuksen tarjoaa Ryan Detertin Man-Handling Events #1.) Samalla on hyvä muistaa, että DOM-pohjaista toimintaa eivät vielä tue juuri muut selaimet kuin IE versiosta 4 alkaen. Itse DOM-määrittely on huomattavan teoreettinen ja yleisluonteinen, joten käytännössä on syytä käyttää tietolähteenä lähinnä IE:n dokumentaatiota ja toivoa, että se edes suunnilleen vastaa sitä, mitä tulevat selaimet tukevat DOMin puitteissa.
Sikäli kuin "dynaaminen HTML" sisältää mitään uutta osiinsa verrattuna, se on juuri edellä mainittu dokumenttioliomalli, joka määrittelee uusia liityntöjä osien välille. Erityisesti siinä on kyse siitä, miten JavaScriptissä (tms.) voidaan viitata toisaalta HTML-dokumentin eri osiin, toisaalta niihin liitettyihin tyylisäännöstöihin.
Tämä esimerkki toimii vain IE 4:ssä ja uudemmissa versioissa. Toisaalta tämä on suunniteltu niin, että toimimattomuus ei haittaa muissa selaimissa: sivu näkyy samalla tavalla kuin se näkyisi ilman tätä pikku lisäpiirrettä.
Usein juttuun halutaan liittää osuuksia, jotka ovat vähemmän
tärkeitä kuin normaaliteksti. Painoteksteissä käytetään yleisesti hiukan
pienempää kirjasinkokoa (ja pienempää rivinväliä).
HTML:ssä voi menetellä samoin, eli käyttää small-elementtiä,
koska rakenteisempaakaan menetelmää ei ole tarjolla. Mutta
Web-sivuilla voimme joissakin tilanteissa saavuttaa jotain, mikä
on paperilla mahdotonta: klikkaamalla pienennettyä tekstiä käyttäjä saa
suurennettua sen normaalikokoiseksi.
Pienennyksen tarkoitushan on toisaalta osoittaa teksti vähemmän tärkeäksi,
toisaalta säästää hiukan tilaa; ja siksi pienuus muuttuu vain haitaksi
siinä vaiheessa, kun käyttäjä päättää lukea sen!
Koon muuttaminen voidaan tehdä "dynaamisesti" siten, että
kyseiseen small-elementtiin liitetään
tapahtumamäärite (event attribute) seuraavasti:
<small onclick="this.style.fontSize='1em'">
Tämä on "dynaamista HTML:ää" MicroSoftin malliin yksinkertaisimmillaan.
Tavalliseen HTML-tägiin liitetään määrite, jonka arvona on JavaScript-koodi,
joka muuttaa elementtiin liittyviä tyyliominaisuuksia.
Käytännössä tämä merkitsee, että kun käyttäjä klikkaa hiirellä jonnekin
kyseisen elementin alueelle (pienellä näkyvää tekstiä), se merkitsee
onclick-tapahtumaa, jolloin selain suorittaa JavaScript-koodin
this.style.fontSize='1em', joka puolestaan vastaa sitä,
että tyylisäännöstössä asetettaisiin kyseiselle
elementille font-size:1em.
Emme tässä puutu enempää "dynaamisen HTML:n" yksityiskohtiin,
etenkään, kun ala on vakiintumaton ja sekava.
Aihepiiriä voi opiskella mm.
irt.orgin
Dynamic HTML -sivuilta, aloittaen vaikkapa
Martin Webbin jutusta
What is So Dynamic About Dynamic HTML?.
Aika näyttää, muodostuuko
jonkinlainen yleisesti tuettu normi, jota edes Microsoftin ja Netscapen
uudet selaimet tukisivat kohtuullisesti.
Seuraavassa tarkastelemme sen sijaan eräitä yleisiä periaatteita
kiinnittäen erityisesti huomiota siihen, että "dynaamisella HTML:llä"
ei sotkettaisi toimivuutta tilanteissa, joissa "dynaamisuus" syystä tai
toisesta puuttuu.
Esimerkkitapauksessamme mahdollisuus "suurentaa klikkaamalla" on aika hyödytön, ellei käyttäjä tiedä siitä! Luonnollinen ajatus on lisätä sivun alkuun tästä yleinen huomautus. Mutta tästä taas seuraa ongelma: huomautus näkyy niillekin, joille se on hyödytön, jopa vahingollinen, koska he turhautuvat ihmetellessään, miksei klikkaaminen vaikutakaan mitään. Ratkaisuna on kirjoittaa huomautusteksti "dynaamisesti" seuraavaan tapaan:
<script type="text/javascript"><!--
if(document.styleSheets)
document.write('<p class="huom">Tällä sivulla on kappaleita, joiden teksti '+
'on pienemmällä kirjasinlajilla kuin normaaliteksti. '+
'Voit muuttaa ne normaalikokoon klikkaamalla tekstiä. '+
'Klikkaamalla uudestaan saat sitten kirjasinkoon taas pieneksi.<\/p>');
//--></script>
Tällöin jos selain tukee JavaScriptiä ja tyylisäännöstöjä
Microsoftin määrittelemällä tavalla
ja jos kumpaakaan näistä ei ole disabloitu,
niin selain suorittaa
document.write-koodin, joka lisää dokumenttiin kyseessä
olevan ohjeen
kyseiseen kohtaan.
Huom.: Sana styleSheets on kirjoitettava juuri noin!
Aiheesta lisää:
Michael Bednarekin
Dynamic StyleSheets.
Oletetaanpa sitten, että haluaisimme tehdä klikkauksesta ns.
togglen
niin, että uusi klikkaus taas pienentää tekstin.
Tämä voidaan tehdä ehkä yksinkertaisimmin siten, että
JavaScript-koodi ensin testaa, onko kirjasinkoko normaali ja jos on, niin
sitten pienentää sen. Tällöin on syytä myös "staattisessa" tyylisäännöstössä
ensin asettaa small-elementin kirjasinkoko halutuksi,
esim. small {font-size : 0.7em;}. Ja "toggleaminen" sujuisi näin:
onclick="if(this.style.fontSize=='1em') this.style.fontSize='0.7em' else this.style.fontSize='1em';"
Tässä määritteen arvo on jaettu kahdelle riville, mikä on periaatteessa sallittua mutta aiheuttaa ongelmia useille selaimille. Tästä ja muista syistä on parempi kirjoittaa JavaScript-funktio, joka hoitaa "toggleamisen". Silloin HTML-elementin määritteeseen riittää kirjoittaa funktion kutsu. Funktio voitaisiin kirjoittaa näin (huomaa tarkistus, joka huolehtii siitä, että selain ei turhaan yritä suorittaa koodia silloin, kun siitä ei olisi mitään hyötyä):
<script type="text/javascript"><!--
function togglesize(elem) {
if(document.styleSheets) {
if(elem.style.fontSize=='1em') {
elem.style.fontSize='0.7em'; }
else {
elem.style.fontSize='1em'; }}}
//--></script>
Tämän jälkeen voimme mihin tahansa small-elementtiin
liittää kyseisen toiminnon näin:
<small onclick="togglesize(this)">
Ongelmaksi kylläkin jää se, että tulostettaessa sivu paperille kyseinen ohje voi tulla mukaan, jolloin seurauksena on hiukan naurettava vaikutelma. Tämä on IE 4+:ssa mahdollista estää käyttämällä tyylitiedostoa seuraavaan tapaan:
p-elementti tulee sellaisen div-elementin
sisään, jolla on määrite
class=noprintprint.css,
jonka sisältö koostuu rivistä
.noprint { display : none; }
head-osaan
<link rel="stylesheet" media="print" href="print.css">
Luokan nimi
noprint on tietysti vapaasti valittavissa.
Kohdassa 1 käytetty tekniikka on periaatteessa turhan mutkikas,
sillä div-elementin käytön asemesta
voitaisiin p-elementti voidaan määrätä kuulumaan useaan
luokkaan kirjoittamalla class-määritteen arvoksi
listan välilyönnillä toisistaan erotettuja luokannimiä
(class="huom noprint"). Mutta selaimet eivät tue tätä vaan
tyypillisesti jättävät koko class-määritteen huomiotta.
Muutenkin tyylisäännöstöjä käytettäessä joudutaan selainten virheiden takia
usein lisäilemään div-elementtejä epäloogisella tavalla.
Ks. erillistä pikku dokumenttia, jossa tätä tekniikkaa on sovellettu. Ja tekniikka siis toimii IE 4:ssä mutta ei näin toteutettuna aiheuta ongelmia silloin, kun se ei toimi.