KP arrow Reference arrow Dokumenty arrow Dynamicke HTML v praxi
Logo Karel Pěchovič - Kroměříž karel
pěchovič

Dynamicke HTML v praxi

UZivatel, ktery se rozhodne pro dynamicke HTML (pro neznale : dynamicke HTML je vlastne

HTML s podporou skript\i, stylu a absolutnim nzenim polohy) by mel pfedev§im vedet, Ze

vYsledkemje ho snahym Ufe (a vetSinout o tak bYva)b Yt velmi efektni zpesti'enoi bsahua hlavne

designoveU mvnes tranek.S tejnet ak tirilto mUfe vytvont str{mku,k terous i navMevrncjie ho stranek

zobrazi bud' jen s velkjmi obtiZemi a nero vtibec. Mluvim 0 tom, ze v jinych prohliZeeich net je

Microsoft Internet Explorer nejsou nektere nebo vsechny soucasti teto modernf technologie

zobrazeni dat podporovany. Dnes v prnfm dilu povidani 0 modernich webovYch technologiich bych

Vam chtel pomoci odpovedetn a par zasadnicho tlizek, ktere Vam pomohous rozhodovanimz da

DHTML pouZit nebo fie.

Co prina§i DHTML uiitecneho ? DynarnickeH TML brIo jiz od zaCatkuh lavnep rostfedkem,t edy

ne zdrojem dat. Z toho vyplyva, ze pfinliSf zejmena zvY§en! designove urovne. Nektere veci delane v

HTML vsak pnnliSi nejen hezkY vzhled ale take funkcnost. Jedna se napfiklad 0 menu, titulkove

pruhy, napovedy, multimedialni systemy atd. Dynarnicke HTML pnnliSi jednoduche regen! pro ty ,

kteff si llimou hlavu s otazkouja k vyIepsit vzhled sv'!1chs tranek.O d dob kdy svetlo svetas patfilo

HlML ubehloj iz par let a HTML je stalez llkladema alfou i omegoui nternetovehos veta.P rotoze

ale pomalu prestavalo stacit data jen nejak na str{mku dostat a zobrazit, ale brio zapotfebi je tfidit a

graficky upravovat vznikali postupne nove technologie. Prave takovou je DHTML.

Omezeni DHTML spocivaji prave v jiz zminenea verzi DHTML vucijinym prohliZecfunn ezje

Internet Explorer od Microsoftu. Faktem je, Ze finne Microsoft i roe patti jiz davno ryrazne vetsi

podil nezje tomu tak u NetscapeN avigatoro. Ikdyz existuij stovky prohliZeCuje jich podil na trhuj e

tak zanedbatelnyz, e nema,a lesponp odle mehon azoru,c enuu pravovats trfinkyv jlucne jen pro fie.

Problememje,z e kaZdyp odporojen ecoj ineho a to v dtisledkuz namenaz, ej edna castd ynamickeho

HTML by mohla jet i naj inem prohliZeCia, le dal§i cast uz fie, protoZev neron emap odporu.P otom

str{mky nepracuji takjak maji a cele se to !van tak nejak "divne". Chcete-li tomu zabranit nabizim

dye moine a nejcastejip ouZivanet echniky reseni.U pozometep orod moZnos ve nav~revm'kny a

fakt, Zes trfinky budouz qbrazenyo ptimaInej en v InternetE xploreru,n ero svym ctenaffuns ve

str{mkyo ptimalizujtei pro nejvice rozsffenyN etscapeN avigator. Pro ostatnip rohliZeceja ko je

Opera nema cena strfinky optimalizovat, protoZe potom by jste meli patnact verzi stranky a bez

pouZitin ejakep okrocilej~it echniky by zejmenaw ebmasterfuno sobnichs tranekb ehalm raz po

zadech z aktualizaci...

Jsemz asmncemp ouZiti DHTML i prest ento zminenyn edostatekN. ynejsi situacen a trhu vypadcti ak

Zes ve strankys klidem v dumn apiStep ro Internet Explorer. Atkoliv je u Netscapes nahaz lepsit

prohliZet a dostatj ej na UrovenI E, vYsledekp omd neni zda1ekata kovYj aky by mel by!' Hlavne fakt,

ZeN etscapen epodporujem odem{t echnologieja ko je XML a DHTML jsou vaZnoup fekazkou

rozvoje.

Potfebuji DHTML ? Toto je zajimava otazka, protoze odpoved' na ni Dent jednoducha a zaIeZi pfipad

od pfipadu. Nektere veci je lepe legit prostjm HTML, protoze je vjsledek pfehlednejsi a da se tim i

snareu pravovat,a le hlavnep ine splnujep oZadavkyT. ak proc nepouZitH TML. Ve vetsinep fipadu

ale pouZitim DHTML strankamp omtiZeteN. eznamm noho stninekk tere by bez DHTML vypadali

lepe. Maximalne by vypadaly stejne dobfe a nero by byl zdrojovj k6d pfehlednejsi na Ukor vnejsmo

vzhledus tranek.N ebojte se DHTML pouZit.I s malym kOdemD HTML vloZen)rmd o Vasich stranek

muzeted osahnouet fektm'hov jsledku. Krasa DH1ML Dentj en v tom co umi, ale take v tomj ak to

delft. ProtoZe se objekty a funkce DTHML ovladaji a skladaji ze skriptu (JScript, Java script) jsou

deje navic i logicke. UdAlosti se fidi funkcemi, podminkami, operatory ...DHTML muzou pouZit jak

profici tak i zacate~nicik, tefi maji znalosti HTML a chteji je ozivit necim novjm.

Jak to vlastne funguje ? Dynamicke HTML pracujen a principu spolupraceH 1'ML se

skriptovacimi technikami a multimedi!Inimi designovjmi technikami. Do teto kategorie bych zafadil

i kask!dove styly jak se u nas fik! CSS. Pozdeji se Vas budu snaZit seznamit s novjmi momostmi

CSS, ale dnes bych Vas chtel seznamit s vjstavbou strimky, ktera pouZiv! DHTML.

24.2.2002

Podivejte se na nasledujici ukazku DHTML reseni. Tento skript vloZi na stranku tlacitko, jehoz

stisknutim stranku vytiskneme. Neberte tento pfikladjako neco pro zacatecniky. Pro zacatecniky

rozhodne nelli, chci Vam hlavne ukazat vYstavbu stranky v DHTML. Pro ty zvidave -ve skriptu je

pouZito obje~ 0 tom budu psat pozdeji pokud Vas zajimaji detaily. Uvedeny pfiklad najdete

funkcni na !eto strance:

<html>

<head>

<title>Strimka s pouZitim DHTML</title>

</head>

<body>

1

<SCRIPTL anguage=J" avascript">

function printit{) {

if (NS) {

window.print{) ;

} else {

var WebBrowser = '<OBJECT ID="WebBrowserl" WIDTH=O HEIGHT=O

CLASSID="CLSID:8856F961-340A-l1DO-A96B-OOCO4FD705A2"><IOBJECT>'

document.body.insertAdjacentHTML('beforeEnWd',e bBrowser);

WebBrowserl.ExecWB(6, 2);//Use a I vs. a 2 for a prompting dialog box

WebBrowserl.outerHTML = "";

}

}

</script>

<SCRIPT Language=" Javascript">

yarNS = (nayigator.appName = "Netscape");

var VERSION = parseInt(navigator .app Version);

if (VERSION> 3) {

document. write('<foffil><input type=button yalue="Print this Page" name="Print" onClick="printit

O"></foffil>');

}

</script>

</body>

</html>

Pledchozi pfiklad toho s DHTML nema aZ tak moc spolecneho. Je v nem pouZita i metoda objektU

ActiveX, ktera zacatecnikovi mnoho nefekne, v dalsich dilech serialu se 0 ni take zminim. To

DHTML, ktere je zajimave pro zacatecnfka v modernich technologiich je videt v pouZiti skripro. Co

je na tomto pfipade zajimave ? Pfedne je to fakt, Ze je to jedna z mala forem skripro DHTML, kterj

je pouZitelny jak v Netscape Navigatoru tak v Internet Exploreru.

Pojdfe a projdeme si cely skript od zacatku. Pomineme zakladnf macenf HTML a dostavame se k

prvni nemame v~ci. Jedna se 0 vioZenY Java skript. Tag SCRIPT prohliZeei Tiki!, ze se bude

zpmcovavat zdrojovY kOd skriptovaci techniky. Pammetr language Davie upresfiuje 0 jakj skript

pujde. Skripm je vice, napt. JScript, Java script, VB script. Parametrem language upresnujeme jaky

skriptovaci jazyk hodlame pouZit.

24.2.2002

Za tagem SCRIPT nasleduje naSe prvni funkce. Funkce je neco jako seznam Ukolu, ktere mate udelat

a tyto jsou spustenyp redchozim etodou.D iky tomu lze funkce nastavitt ak aby se spustili po kliknuti

na tlacitko, nactenis trimky, odchoduz e strimkya td. MoZnostip ouZiti funkci je nekonecnem noho.

NaSe funkce ma i sve jmeno, protoZe kaZrla funkce musi mit sve jmeno aby brio jasne kterou funkci

napf. kliknutim, chcete spustit. Ta na§e se jmenuje printitO. Nazev mUie bit sloZen prakticky z

jakyhkoliv podporovanycha povolenychz nakU.R ikam povolenych,p rotoZen ejsoup ovoleny

napfiklad matematicke znaky I, * ,-, +, a take znaky vyhrazene pro system. Za nazvem funkce musi bit

O.

Funkce printit se sklaoo z podminky. Podminka IF je takovYm policistou, kterj hlida stay veci a

podle toho jedna. Podminka fika, Ze pokud je stranka zobrazena v NN bude stranka vytistena pomoci

pfikazu window.printO,jinakje volan objekt ActiveX, ale um se nyni nezabyvejme. Totoje pfiklad

kdy pfi zobrazeni strlinky v NN bude volana niz~i, jednoduzsi funkce a pfi zobrazeni v Internet

Exploreruje pouZita ponekud pokroCilej~i technika. Oboji ma za nasledek ale tu samou vec -stranka

bude vytistena na uzivatelove tiskame. Za ukoncenim tagu </skript> je i konec prvniho skriptu

pouZiteho na strance.

Nasleduje dalsi skript, kter)' narozdil od toho prvniho neupravuje to co bude vykonano, ale kdy to

bude vykonano. Ide 0 presne urCeni toho kdy se stane funkce printitO aktivni. Nejprve je pomoci

pfikazu VaT tfeba definovat promene pouZite v pfikladu. V naSem pfipadu se jedna 0 promene, ktere

urcuji 0 jaky typ prohliZece se jedna. V pfipade, ze se jedna 0 prohlizeC jehoz verze je vyssi nez 3 tj.

Netcape Navigator i Internet Explorer 4.0 a vyssi, bude na strance zobrazeno tlacitko pro vytisknuti

strfinky. Pokud fie, toto tlacitko se whec na strance neobjevi ! Ie to mome diky tomu, ze je tlacitko

do strfinky vloZeno pomoci skriptoveho pfikazu document. write(). V zavorce je psan zdrojovy k6d

cisteho HTML s tim, Ze k tlacitku je pomoci funkce onClick pnfazen Ukol zpracovat funkci printitO,

kterou jsme defmovali v predchozim skriptu. Toto je typicky. pfiklad toho, Ze i kratk-y skript mUfe

delat zajimave veci.

Zopakujme si co vlastne dela krok po kroku. Nejdfive se do pameti nacre cely skript. Jsou

definovanyp romenne.P okud vlastnitep rohliZecv erze4 .0 a vyssi buden a strancez obrazenotl acitko

pro tisk. Pokudf ie. nebudez obrazenoB. a co vic. skript nebudez pracovan,p rotoZes tarSip rohliZeCe

nepodporuji zpracovavani skriptu. Po tomto beh skriptu docasne skoncil. Ceka se na reakci uZivatele.

Kdyz uZivatel stiskne tlacitko pro tisk rozbehne se dalsi funkce naseho skriptu, ktera jedna zase v

zavislosti na verzi prohliZece jakou vlastni uZivatel -navstevnik Vasich stranek. Podle verze

prohliZeces pustif unkci tisku, kteraj e v NetscapeN avigatoro dlisnao d InternetE xploreru.

Timto clankem bych cht~l zahajit serial nejen 0 DHTML, ale postupn~ bych se chtel v~novat i jinym

modemim technologiim. Propojeni stranek s daty, jazyk XML, distribucni techniky... Je tady misto

pro Vas. V pnstim climku se seznamimeb liZe s CSSa jejich napojenimn a DHTML.

~

24.2.2002

Reference a ukázky
Úpravy fotografií
Reference
Loga - Logotypy
WWW Prezentace
3D grafika
Tlačítka, ikony
Naše nabídka
INTERNETOVÉ APLIKACE DESIGN, GRAFIKA VÝVOJ SOFTWARE DATA MANAGEMENT

Seznam všech položek




Zapomenuté heslo
Nemáte účet? Vytvořte jej!
Ke stažení
Z naší nabídky
WebDesign
WebDesign
2 000.00 CZK
Objednat

Reklamni banner Scyscraper 120*600
Reklamni banner Scyscraper 120*600
500.00 CZK
Objednat

Hosting
Hosting
1 500.00 CZK
Objednat

Fotobanka
Fotobanka
1 000.00 CZK
Objednat

Company
Company
1 000.00 CZK
Objednat

Oblíbené produkty
01 Photography studio
02 Business consulting
03 E-obchod na prání
04 FOTOdisk Nakupování
05 Company