DHTML Sissejuhatus

DHTML EI ole keel EGA veebistandard, vaid termin mis kirjeldab dünaamilise ja interaktiivse veebilehe loomise moodust. DHTML on kombinatsioon HTML'ist, JavaScript'ist, DOM'ist ja CSS'ist.

DHTML ja JavaScript

Loome lihtsa dünaamilise Html dokumendi milles kuvatakse hetke kellaaega ja kuupäeva ning aastaarvu:

      <html>
    <body>
<script type="text/javascript">
  document.write(Date());
</script>
    </body>
      </html>

Proovi ise

DHTML ja HTML DOM

Loome Html dokumendi kus Html elemendi sisu muudetakse HTML DOM abil:

      <html>
    <body>
<h1 id="pealkiri">Vanem Pealkiri</h1>
  <script type="text/javascript">
document.getElementById("pealkiri").innerHTML="Uuem Pealkiri";
  </script>
    </body>
       </html>

Tulemus peaks olema selline:

Uuem Pealkiri

Mida me tegime?

Lõime Html dokumendi milles on pealkiri. Pealkirjal on ID mille väärtuseks on "pealkiri"
DOM abil saavutasime juurdepääsu elemendile id="pealkiri"
JavaScripti abil muutsime vastava Html elemendi sisu (innerHTML)

Proovi ise:

Loome Html dokumendi kus HTML DOM abil muudame Html elemendi atribuuti:

      <html>
    <body>
<img id="pilt" src="taust-2.png">
  <script type="text/javascript">
document.getElementById("pilt").src="taust-1.png";
  </script>
    </body>
      </html>

Tulemus peaks olema selline:

Mida me tegime?

Lõime Html dokumendi milles on pilt. Pildil on ID mille väärtuseks on "pilt"
DOM abil saavutasime juurdepääsu elemendile id="pilt"
JavaScripti abil asendasime pildi "taust-2.png", pildiga "taust-1.png"

Proovi ise:

DHTML ja Html Sündmused

Html sündmused käivitatakse brauseri poolt. Näiteks kui külastaja klikib mõnele nupule siis JavaScript käivitub.

Näited:

onclick
Pilt muutub kui sellele klikkida.

onmousedown ja onmouseup
Pilt muutub ainult siis kui hiireklahvi all hoida.

Siin on veel üks näide sellest kuidas pealkiri muutub kui sellele klikkida:

<h1 onclick="this.innerHTML='KLIKK!'">Kliki tekstile</h1>

Proovi ise:

Sama tulemuse saab ka nii kui lisada vastav skript "head" sektsiooni:

        <html>
      <head>
    <script type="text/javascript">
function changetext(id)
{
id.innerHTML="KLIKK!";
}
    </script>
      </head>
        <body>
  <h1 onclick="changetext(this)">Kliki tekstile</h1>
        </body>
          </html>

DHTML ja CSS

Kasutame JavaScripti Html elemendi stiili muutmiseks.

Näited:

Muudame elemendi taustavärvi
Muudame jooksvat elementi
Kasutame this objekti.
Muudame määratud elementi
Kasutame getElementById.
Hiire sündmus
Sündmus käivitub kui kursor liigub üle elemendi.
Nähtavus
Muudame elemendi nähtavaks ja nähtamatuks.

HTML 4.0 Sündmuste Käivitajad

Sündmus	Ilmub siis kui..
onabort	kasutaja katkestab lehekülje laadimise
onblur	kasutaja lahkub objektilt
onchange	kasutaja muudab objekti väärtust
onclick	kasutaja klikib objektile
ondblclick	kasutaja teeb topelt-kliki objektil
onfocus	kasutaja muudab objekti aktiivseks
onkeypress	klaviatuuri klahvi vajutatakse
onkeyup	klaviatuuri klahv vabastatakse
onload	lehekülje laadimine on lõppenud
onmousedown	kasutaja vajutab hiire-nuppu
onmousemove	hiire-kursor liigub objekti peale
onmouseover	hiire-kursor liigub üle objekti
onmouseout	hiire-kursor liigub objektilt ära
onmouseup	kasutaja vabastab hiire-nupu
onreset	kasutaja taastab vormingu
onselect	kasutaja valib leheküljel mingi sisu
onsubmit	kasutaja sisestab midagi vormingusse
onunload	kasutaja sulgeb lehekülje