Dinaminiai HTML

Kas tai yra dinaminis HTML?

Dinaminis HTML yra technologija, apjungianti savyje HTML, stilių sąrašus ir skriptus, bei leidžianti Web puslapiams keistis ir realizuojanti animaciją. Be to, kai puslapis buvo užkrautas iš serverio, nebereikalingas ryšys su serveriu – viskas vyksta vartotojo kompiuteryje. Dinaminiuose HTML vartotojui spaudžiant klavišus, važinėjant su pele ar spaudžiant jos klavišus, keičiasi Web puslapio teksto dydis, spalva, padėtis ir t.t. Galima animacija, puslapio elementai gali judėti aplinkui, atskiri elementai gali dingti ir vėl pasimatyti.

Kai kurie DHTML privalumai:

1. DHTML leidžia elgtis su visu Web puslapiu, kaip programuojamu objektu.Tai leidžia Web puslapiams geriau reaguoti į įvedamus duomenis ir komandas, pateikiamas vartotojo.
2. Papildomos multimedijos panaudojimo, maketų kūrimo galimybės. Pranešimo laukų judėjimas, šrifto spalvos keitimas, specialūs filtrai (pvz. šešėlių kūrimas) ir daugelis kitų priemonių leidžia sukurti interaktyvesnius dokumentus.
3. Serverio apkrovimo sumažinimas. Žiūrint vartotojui DHTML visi duomenys iš pat pradžių paimami iš serverio ir perkeliami į vartotojo kompiuterį. Po to darbas vyksta tik pastarojo kompiuteryje. Taip mažiau apkraunamas ir tinklas, ir serveris.
4. Interaktyvumo lygio padidėjimas. Dinaminio Web puslapio turinys gali būti pakeistas priklausomai nuo vartotojo veiksmų (pvz. vartotojas su pele gali tampyti atskirus objektus, matomus ekrane).
5. Duomenų bazių palaikymas. Leidžia pateikti duomenis puslapyje be pakartotino kreipimosi į serverį, kad šis prileistų prie informacijos.
6. Duomenų išvedimo (patalpinimo) supaprastėjimas.Duomenys gali būti išvedami iš karto, kai jie yra gaunami. Anksčiau reikėdavo gauti visus duomenis, ir tik po to juos buvo galima išvesti į ekraną.
7. Sąrašų stilių pagerinimas.Čia galima patalpinti papildomos informacijos, kuri leidžia sutrumpinti puslapio formatavimo atributų aprašymą.
8. Kelių platformų palaikymas. Palaiko Windows, Macintosh, UNIX ir kt.
Dinaminiame HTML galimas ne tik paprastas Web puslapio elementų atributų keitimas, bet ir galima transformuoti patį tekstą. Visi taisymai vykdomi realiame laike.

Dinaminių HTML minusai

Nors dinaminiai HTML suteikia gerokai daugiau galimybių, tačiau yra vienas labai didelis minusas. Nėra visiškai bendro standarto. Ką supranta viena naršyklė, visiškai nesupranta kita naršyklė. Todėl tokius puslapius potencialiai gali žiūrėti gerokai mažiau vartotojų. Vartotojas, norėdamas žiūrėti puslapius, turi turėti kelias naršykles įvairiems puslapiams.

DHTML panaudojimas

DHTML galima naudoti peržiūros programose,verslo puslapiuose, mokomuosiuose, pramoginio pobūdžio puslapiuose ir k.t.
Tai gali būti:
1. Verslo programos
2. Galima DHTML pagalba gauti užsakymus, vartotojui įvedant informaciją ekrane, gali būti iš karto atlikti skaičiavimai, reikalingi, kad vartotojas priimtų sprendimą.
3. Interaktyvūs dokumentai
4. Greitai reaguojantys į vartotojo veiksmus dokumentai:
a. Dinaminis išplėtimas
Puslapių su paieškos rezultatais scenarijai gali būti užprogramuoti taip, jog jeigu užvažiuoti su pele ant sąrašo elemento, bus išvedama detali informacija apie elementą.
b. Teksto efektai
Vartotojui gali būti leidžiama keisti teksto, kurį tuo metu skaito, šrifto dydį. Kad vartotojas aplankytų tam tikra po nuoroda esantį puslapį, galima pele užvažiavus ant nuorodos padidinti tekstą toje vietoje, padidinti garsą ir t.t.
c. Manipuliacija dokumento pavadinimu
Siekiant supaprastinti darbą su dokumentais galima išvesti į ekraną dokumento antraštę, kai tik tai yra būtina. Be to tai galima padaryti bet kurioje vietoje, bet kuriuo momentu.
d. Pramogos ir išsilavinimas
Galimybė sukurti animacinius personažus, reaguojančius į vartotojo įvedamą informaciją, daro puslapius patrauklesnius, vaizdingesnius bei informatyvesnius. Personažai gali judėti plokštumoje, su specialiomis priemonėmis net trimatėje erdvėje. Personažo judėjimą galima susieti su muzikinio fono stiprėjimu (silpnėjimu).

Dinaminių stilių naudojimas kuriamų Web puslapių išvaizdos keitimui

Dinaminiai stiliai leidžia dokumente pakeisti pakeisti bet kokį HTML elementą. Stiliai kuriami arba kaip atributų deskriptoriai, arba su CSS (kaskadinių stilių sąrašai). Naudojant paprastus scenarijus HTML puslapių autoriai gali keisti dinaminių CSS atributų ir savybių reikšmes.
Dinaminius stilius galima naudoti tokiais atvejais:

1. Elemento pavaizdavimas ir paslėpimas
Visi DHTML puslapio elementai gali būti paslėpti, kol vartotojas neperneš pelės ant tam tikros vietos . Arba, pavyzdžiui, užvažiavus ant žodžio atsiras papildoma informacija apie tą elementą.
2. Teksto dydžio, šrifto, spalvos ir kitų elementų keitimas
Kai ant teksto patalpinama pelė, gali būti padidinamas (sumažinamas) tekstas, pakeičiama jo spalva ir t.t. Nemažai pavyzdžių yra pateikta srityje “Dinaminių puslapių kūrimas”

3. Elemento padėties ekrane keitimas
DHTML keičiantis kažkuriems elementams, atliekami skaičiavimai, kurių rezultatais naudojantis, perpiešiami tik tie elementai, kurie arba kurių padėtis buvo pakeisti.

Dinaminių puslapių kūrimas

1. Atskirų elementų atsiradimas ir dingimas

Čia pateiktas DHTML pavyzdys, kur pelės žymeklį patalpinus ant pirmos teksto eilutės, dingsta antra eilutė. Jeigu pele nuvažiuojame į kitą vietą, tai dingusi eilutė vėl pasimato.
Šis puslapis turi dvi elementų grupes : pirma eilutė ir antra eilutė. Kiekviena grupė aprašyta, naudojant deskriptorių DIV ( galimi ir kiti deskriptoriai ):

<DIV> [style] [<įvykiai>] [id] tekstas arba kiti elementai </DIV>

Čia prie STYLE nusirodo teksto spalva, šriftas, teksto dydis, kursoriaus išvaizda, teksto pabraukimas, ar matomas ir kt. Jo sintaksė:

STYLE=”savybė1:reišmė1;savybė2:reišmė2;…;savybėN:reišmėN;”
(STYLE rašyti nebūtina)

<ĮVYKIAI> yra tokie kaip pelės klavišo paspaudimas, dvigubas paspaudimas, klavišo paspaudimas, judesys pele ir k.t. Čia rašoma, prie kokio įvykio, kokią funkciją atlikti (JavaScript’as).
Sintaksė:

Įvykio_pavadinimas=”funkcijos_pavadinimas([funkcijos parametrai]);”
(Įvykių rašyti nebūtina)

ID yra tos elementų grupės identifikatorius (vardas), pagal kurį su atliekami veiksmai (elementų paslėpimas, teksto šrifto keitimas ir kt.)
(ID rašyti nebūtina)

Čia JavaScripto pagalba parašyta funkcija, kuri įvykus įvykiui pirmoje elementų grupėje paslepia antrą grupę.
Žemiau pateiktas visas puslapio tekstas:

<HTML>
<HEAD>
<TITLE>Pavyzdys 1.1 </TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function keistis(e){
if (e.style.display==”none”){
e.style.display = “”;
} else {
e.style.display =”none”;
}
}</SCRIPT>
</HEAD>
<BODY>

<DIV STYLE=”cursor:hand”
OnMouseOver=”keistis(document.all.YraNera);”
OnMouseOut=”keistis(document.all.YraNera);”>
Kad pamatytumėte kas atsitiks, užvažiuokite ant šios eilutės, o po to nuvažiuokite
</DIV>

<DIV STYLE=”color:blue” id=YraNera>
Tekstas dings
</DIV>
</BODY>
</HTML>

2. Teksto spalvos keitimas

Čia pateiktas labai paprastas pavyzdys. Paspaudus pelės klavišą ant teksto, tekstas pakeičia spalvą. Šis atvejis panašus į pirmus atvejus. Tik čia naudojamas deskriptorius H1. Jis taip pat susijęs su įvykiais (kitaip ir būti negali dinaminiuose HTML). Tik skirtumas čia tas, kad nenaudotas JavaScript’as (apsieita be naujos funkcijos). Tai atsitiko dėl to, kad elementų klasės įvykis keitė tos pačios klasės savybes, t.y užvažiavus ant teksto, šis pakeitė spalvą. Tada įvykis buvo apsirašytas taip:
OnClick=”this.style.color=’blue’;”

Visos programos tekstas labai paprastas:

<HTML>
<HEAD>
<TITLE>Pavyzdys 2.1</TITLE>
</HEAD>
<BODY>
<H1 OnClick=”this.style.color=’blue’;”>
Paspaudus pelės klavišą ant šio teksto, tekstas pakeis spalvą </H1>

</BODY>
</HTML>

3. Teksto šrifto keitimas

Šiame pavyzdyje keičiasi vienos eilutės teksto stilius. Užvažiavus su pele tekstas pasidaro pasviręs (italic), atitraukus pelę, tekstas pasidaro normalus. Naudotas deskriptorius H1. To sakinio struktūra tokia pati, kaip ankstesniuose pavyzdžiuose:

<H1> [style] [<įvykiai>] [id] tekstas arba kiti elementai </H1>

Panaudotos dvi funkcijos (JavaScript), viena kurių tekstą padaro pasvirusį, kita padaro jį normalų.

Štai programos tekstas:

<HTML>
<HEAD>
<TITLE>Pavyzdys 3.1</TITLE>

<SCRIPT LANGUAGE=”JavaScript”>

function makeItalic (){
ManoH1.style.fontStyle = “Italic”;
}

function makeNormal(){
ManoH1.style.fontStyle = “Normal”;
}
</SCRIPT>
</HEAD>

<BODY bgcolor=”#b1b1b1″>
<FONT SIZE=”6″ color=”#dbdbdb”>
Nevažiuokite čia Nevažiuokite čia Nevažiuokite čia Nevaž
iuokite čia Nevažiuokite čia Nevažiuokite čia Nevažiuoki
te čia Nevažiuokite čia Nevažiuokite čia Nevažiuokite či
a Nevažiuokite čia Nevažiuokite čia Nevažiuokite čia Nev
<CENTER>
<H1 id=”ManoH1″ style=”font-weight:normal;color:blue”
onMouseOver=”makeItalic();”
onMouseOut =”makeNormal();”> Užvažiuokite čia</H1>
</CENTER>
Nevažiuokite čia Nevažiuokite čia Nevažiuokite čia Nevaž
iuokite čia Nevažiuokite čia Nevažiuokite čia Nevažiuoki
te čia Nevažiuokite čia Nevažiuokite čia Nevažiuokite či
a Nevažiuokite čia Nevažiuokite čia Nevažiuokite čia Nev
ažiuokite čia Nevažiuokite čia Nevažiuokite čia
</FONT>
</BODY>
</HTML>

4. Dinaminis pozicionavimas

Dinaminis pozicionavimas yra funkcija, sukurianti nepertraukiamos animacijos efektą. Dinaminiai HTML palaiko dvimatį elementų pozicionavimą x ir y ašyse, o taip pat naudojamas z-planas trimatės animacijos imitacijai (nurodo, kokį elementą koks elementas perdengia ). Tokiu būdu Web puslapio kūrėjai gali puslapio elementus (grafiką, tekstą valdymo elementus) talpinti ten, kur reikia. Taip pat dėl šios funkcijos galima naudoti mažesnius failus (pvz. vaizdas sudarytas iš kelių failų). Tokius puslapius kraunant patogiau ir vartotojui (geriau keli maži, nei vienas didelis).
Čia pateiktas pavyzdys, kuriame išvestas tekstas ir nuotraukos. Nuotraukos yra tiek ant teksto, tiek po tekstu. Visa tai realizuojama naudojant dinaminį pozicionavimą. Naudojant deskriptorių IMG puslapio elementą galima patalpinti bet kurioje vietoje. Be to galima nustatyti koks elementas ant kokio elemento uždėtas. Apsirašoma taip:

<IMG STYLE=”position : absolute; top : skaicius_y; left : skaicius_x;
z-index : skaicius_y” SRC=”paveikslo failo pavadinimas”>

position:absolute – nurodo koordinačių sistemą (šiuo atveju absoliutinės koordinatės); top:skaicius_y – nurodo viršutinės paveikslo briaunos atstumą nuo viršaus;
left:skaicius_x – nurodo kairiosios paveikslo briaunos atstumą nuo kairės;
z – index:skaicius_z – nurodo padėtį psiaudo trimatėje erdvėje. 0 yra teksto lygis, teigiamas skaičius reiškia, kad vaizdas dengia tekstą, neigiamas – kad po tekstu. Jei vieno elemento ši reikšmė 1, o kito 2, tai antrasis elementas dengs pirmą. Jei vieno elemento ši reikšmė –1, o kito –2, tai pirmasis elementas dengs antrą, bet abu bus po tekstu.

Štai programos pavyzdys

<HTML>
<HEAD>
<TITLE>Pavyzdys1</TITLE>
</HEAD>
<BODY>
<FONT color=”#ffff77″>
<CENTER>
<BR>
<BR>
<BR>
<BR>
<BR>
<H1> Dinaminis HTML</H1>
<H3> Paveikslai yra tiek ant teksto, tiek po tekstu</H3>
</CENTER>
</FONT>
<FONT color=”#ff00ff”>
<br>
vH3>šitas tekstas yra uždengtas nuotraukos. Šitas tekstas yra uždengtas nuotraukos.<H3>
<IMG STYLE=”position:absolute; top:145; left:120; z-index:-1″ SRC=”žemė.jpg”>
<IMG STYLE=”position:absolute; top:120; left:40; z-index:1″ SRC=”žemė1.gif” height=”160″>
</BODY>
<HTML>

5. Elementų judėjimas ekrane (dvimatė grafika)

Tai duomenų pateikimo būdas, nurodant dvimates koordinates, leidžiantis judinti vieną objektą kito atžvilgiu. Be to, paprasčiausiai galima judinti objektą (elementą), kol vartotojas žiūri puslapį. Tai reiškia, kad galima sukurti Web puslapį, kuriame objektas nuvažiuotų į kito objekto vietą, be to, arba po tuo objektu, arba virš to objekto.
Pavyzdyje automobilis (nuotrauka) juda ekrane.
Šiame pavyzdyje animacija panaudotos dvi funkcijos (JavaScript). Tik užkrovus puslapį, paleista procedūra StartGlide, kuri nustato paveikslėlį į puslapio dešinį šoną ir padaro jį matomu. Funkcija Glide pastoviai perskaičiuoja elemento x padėtį (šis perpiešiamas naujoje vietoje). Elementas juda, kol pasiekia kairę ribą.

Programos tekstas:

<HTML>
<HEAD>
<TITLE>Pavyzdys 5.1</TITLE>
<SCRIPT LANGUAGE “JavaScript”>
var id;
function StartGlide() {
document.all.Banner.style.pixelLeft =
document.body.offsetWidth;
document.all.Banner.style.visibility = “visible”;
id = window.setInterval(“Glide()”, 50);
}
function Glide() {
document.all.Banner.style.pixelLeft -= 10;
if (document.all.Banner.style.pixelLeft <= 0) {
document.all.Banner.style.pixelLeft = 0;
window.clearInterval(id);
}
}
</SCRIPT>
</HEAD>
<BODY background=”pav\juda_fonas.jpg” OnLoad=”StartGlide()”>
<FONT color=”#FFFF00″>
<H1>Dinaminis HTML! Naudoja HTML 4.0</H1>
<H3>
<P>Naudojant dinamines pozicijas, galima ivairiais
budais kilnoti objektus po puslapi.
</H3>
<IMG ID=”Banner” STYLE=”position:absolute;visibility:hidden;
top:0; left:0; z-index:-1″ SRC=”pav\juda.jpg”>
</FONT>
</BODY>
</HTML>

Objekto padėties keitimą absoliutinėse koordinatėse galima naudoti ir trimatės animacijos imitacijai.

6. Įvykių apdorojimas

Kuriamuose Web puslapiuose galima patalpinti specialias paprogrames, kurios reaguotų į vartotojo veiksmus (klavišo paspaudimas, pelės žymeklio patalpinimas į tam tikrą vietą ir t.t). Kiekvienas toks veiksmas iššaukia įvykius. Puslapio kūrėjas gali parašyti paprogrames, kurios atsakytų į tuos įvykius. Tos paprogramės vadinamos įvykių operatoriais.
Pagal HTML standartą, jeigu kuriam nors elementui generuojamas įvykis ir įvykių operatorius jam nesukurtas, tai įvykis ignoruojamas. Perėmimo funkcija tuos neregistruotus įvykius perduoda tėviniam elementui. Įvykiai keliasi elementų hierarchija tol, kol jos neapdirbs, arba kol nepasieks aukščiausio elemento toje hierarchijoje (t.y. pačio dokumento).

Perėmimo funkcijų naudojimo pranašumai:

1. Kelių bendrų veiksmų centralizuotas apdirbimas;
2. Trumpesnis programinis kodas, būtinas Web puslapio įvykių apdirbimui;
3. Mažesnis pakeitimų, susijusių su dokumento modifikacija, skaičius;

Pavyzdžiui, standartiniame HTML kiekvienam objektui reikia nukopijuoti įvykių apdirbimo scenarijų (t.y. kiekvienam rašomas atskiras). O dinaminiame HTML palaikoma konteinerinė hierarchija, todėl užtenka parašyti tik vieną paprogramę paskutiniam elementui bei leisti šiam atlikti tos rūšies įvykių apdirbimą.

Šiuo metu įvykiai, kaip taisyklė, apdirbami tokiu būdu:
1. Vartotojas spaudžia klavišą ant paveikslo, arba ant jo užvažiuoja su pele.
2. Deskriptoriui <IMG> generuojamas įvykis. Kad atlikti atsakomąjį veiksmą, <IMG> deskriptoriuje turi būti numatytas to vartotojo veiksmo programinis apdirbimas.
3. Jeigu deskriptorius <IMG> patalpintas deskriptoriuje <A> bei pastarajam numatytas įvykių apdirbimas, tai būtent deskriptoriui <A> skiriamas įvykis apdirbti. Jei neegzistuoja paprogramės, vartotojo veiksmai bus ignoruojami.

Dinaminiame HTML įvykių apdirbimas atliekamas taip:

Vartotojas spaudžia klavišą ant paveikslo, arba ant jo užvažiuoja su pele.
Deskriptoriui <IMG> generuojamas įvykis, kuris apdirbti perduodamas elementui <DIV>. (Kad įvykis būtų apdirbamas tiesiai <IMG>, reikalingas operatorius
window.event.cancelbubble = true
Priklausomai nuo įvykio atliekami veiksmai.

Įvykiai ir jų atsiradimo priežastys pateikti 6.1 lentelėje:
lentelė 6.1

Įvykis Įvykio atsiradimo priežastis
OnMouseOver Pelės žymeklio patalpinimas ant elemento (įvykis atsiranda, kai susiliečia žymeklis su elementu)
OnMouseOut Kai pelės žymeklis palieka elementą (nuvažiuojame nuo elemento)
OnMouseDown Bet kurio pelės klavišo paspaudimas
OnMouseUp Bet kurio pelės klavišo atleidimas
OnMouseMove Pelės žymeklio judėjimas elementu
OnClick Kairio pelės klavišo paspaudimas
OnDblClick Dvigubas pelės klavišo paspaudimas
OnKeyPress Klavišo paspaudimas ir atleidimas (visas ciklas – paspausta ir atleista). Jei klavišas paspaustas laikomas ilgiau irgi OnKeyPress (nors ir neatleista)
OnKeyDown Klavišo paspaudimas.Įvykis vienkartinis, net jei klavišas laikomas paspaustas ilgiau
OnKeyUp Klavišo atleidimas

Šiame pavyzdyje užvažiavus ant teksto išvedamas pranešimas, kad esame ant teksto, o užvažiavus ant piešinio, išvedama, kad užvažiuota ant piešinio.
Pavyzdyje deskriptoriui <IMG> užduodamas įvykio OnMouseOver apdirbimas, nors pačiame <IMG> deskriptoriuje apdirbimo funkcija nėra aprašyta. Kiekvieną kartą, atsiradus šiam įvykiui, DHTML objektui Window sukuria specialią savybę. Tada įvykio objektas turi kontekstinę informaciją apie tą įvykį, kuris ką tik įvyko, įskaitant duomenis apie pelės padėtį, klaviatūros būseną ir duoto įvykio elementą SOURCE.(Elemente SOURCE nurodoma įvykio atsiradimo priežastis; prieinama prie jo per savybę window.event.)

Programos tekstas:

<HTML>
<HEAD>
<TITLE>Pavyzdys 6.1</TITLE>
</HEAD>
<BODY>
<FONT COLOR=”white”>
<H1>
<DIV id=”Jūs užvažiavote ant teksto” style=”background-color:green”
onMouseOver=”alert(window.event.srcElement.id);”>
Čia Dinaminis HTML

<IMG SRC=”žemė.jpg” STYLE=”position:absolute; top:270; left:120;
z-index:-1″ alt=”žemė” ID=”Tai paveikslas”>
</DIV>
</H1>
</FONT>
</BODY>
</HTML>

0 comments

Write a Comment

Fields with * are required