Pexa-P-Jazyky-XHTLM.-CSS.-DHTML.WML---tvorba-webu---kniha

For Evaluation Only.

Copyright (c) by Foxit Software Company, 2004 - 2007Edited by Foxit PDF Editor

1. Strucnez historieinternetu 7

2. Protokolynainternetu 73. Daluitecnpojmy 74. Pomocnciprotvorbuwww strnek5. JazykXHTML, DTD 9

5.1 vvojovverzejazykaXHTML.. 95.2 StrukturavalidnhoXHTML dokllmentu ll

5.3 DTD (DocumentTypeDefinition) 115.4 ProstOlYjmen(namespace) 12

6. XHTML 1.0Transitional-prehledelementu 196.1 ZkladnkostraXHTML dokumentu- hlavickastrnky 196.2 ZkladnkostraXHTML dokumentu- telostrnky 22

7. Defincebarevnawww strnce8. Formtovntextu9. Komentre 26

10. Seznamya11. Odkazy.....12. Symboly(zstupnentity) 3013. Fotografieagrafika14. Obrazov(klikac)mapy 3315. Tabulky 3416. Rmy17. Bec18. Zvuknawebovstrnce19. Videonawebovstrnce 4220. Javaappletyv XHTML dokumentu 4521. Java scriptyv XHTML dokumentu 4622. LokalizaceXHTML objektu23. Formulre24. DynamickHTML - DHTML.. 5225. DOM - objektovmodelDHTML 5426. plnprehledobjektuDHTML 5627. CSS (CascadingStyleSheets) 84

27.1 VariantypouitCSS v XHTML dokumentu 8527.2 Komentrev CSS 8827.3 Trdy v CSS 8827.4 Identifiktory 8927.5 Pseudotrdyapseudoelementy 9027.6 Vcensobnselektory(deklaraceprovceelementusoucasne)27.7 Kontextovselektory(deklaraceprovnorenelementy) 9127.8 Kaskdovporad27.9 Dlkovjednotky 9327.10Procenta 9427.11Definicebarevv CSS

28. PrehledvlastnostCSSl

28.1 Vlastnostibarevapozad28.2 Vlastnostipsma 98

5

OBSAH

Kompletnreferencnprruckapro tvorbuwebua WAPu

ISBN 80-7232-286-9

PaedDr.PetrPexa,2006

6 JazykyXHTML. DHTML. CSSa WML ,,'()lI1pletnreferencnprruckapro tvorbuwebua WAPu

28.3 Vlastnostitextu 10028.4 Vlastnostiboxuabloku 10428.5 Klasifikacnvlastnosti 118

29. NovvlastnostiCSS2 12029.1 Rozlientypumdi 12029.2 Strnkovanmdia 12229.3 Vlastnostizvukovchstylu 12529.4 Nastavenkurzorumyi 13029.5 Novvlastnostipsma,pravidlo@font-face 13329.6 Novvlastnostitextu 13729.7 Novvlastnostiprotabulky 13729.8 Novvlastnostiprorzenpozice 139

30. Filtryv CSS 14531. RozrenCSS proMS InternetExplorer.. 14932. WAP 150

33. JazykWML 1.1 15234. WAP 2.0,jazykXHTML-MP aWAP CSS 15435. PrehledelementujazykaWML 155

35.1 ZkladnkostraWML dokumentu 15535.2 Formtovntextu 15935.3 Odkazy,casovace,promennaobrzky 16135.4 Navigacna udlostnelementy 16435.5 Vstupnelementy 168

36. CetinanaWAPu 172

Prloha1- prevodmezidestkovoua estnctkovousoustavou 177Prloha2- typykdovn(znakovsady) 178Prloha3- seznamjmenovladacuudlost... 179Prloha4 - nastavenmobilupropouitWAPu 180Prloha5- DTD projazykXHTML 1.0Transitional 181

I. STRUCNE Z HISTORIE INTERNETU

1945- 1.poctac(ENIAC, 19000elektronek,1500rel,30tun,5kHz)1969- st Arpanet(firmaArpa+US univerzity+Pentagon)1974- specifikaceprotokoluTCP/IP

1981- 1.IBM PC (8088/4,77Mhz; 16-256KE RAM; 5,25"FD, MS DOS 1.0)1983- prechodnaprotokolTCP/IP (drveNCP - NetworkControlProtocol)

- ArpanetrozdelennaArpaneta vojenskMilnet1986- jazyk SGML

1989- WWW (CERN eneva),ArpanetsezmenilnaInternet1990- Internetv CR (Cesnet)1991- 1.specifikaceHTML (TmBerners-Lee)1993- faktickstartInternetu(1.prohlec- Mosaic),nvrhHTML 2.01994- prohlecNetscapeNavigator,domnaCZ1995- MS InternetExplorer,definitivnHTML 2.0,LiveScript1996- HTML 3.2,JavaScript1997- CSSl, HTML 4.01998- XML 1.0,DHTML, CSS2

1999- HTML 4.01,ECMA Script(JavaScript+MS Jscript)2000- XHTML 1.0(XML 1.0+HTML 4.01),WML 1.1(WAP 1.0)2001- XHTML 1.1(=XHTML 1.0Strict,modulrnstrukturaXHTML)

- XHTML-MP (MobileProfile),mobilntechnologieWAP 2.0- 1.nvrhCSS3 (modulrnstrukturaCSS)

2002- 1.nvrhXHTML 2.0(bezzpetnkompatibilitysestarmiverzemi)2003-2004- XHTML-Print, nvrhydalchmoduluXHTML 2.0a CSS3

2005- nvrhzatmposlednhomoduluCSS3(sloupcovsazbawebuv CSS)

Poznmka:aktulndataz vvojejednotlivchwebovchtechnologi- www.w3.org

2. PROTOKOLY NA INTERNETU

TCP/IP (TransmissionControlProtocol/InternetProtocol)- Stovvrstva(IP) - datajsourozdelenanatzv.packetyadoplnenahlavickous adresou- Transportnvrstva(TCP) - zajitujeposkldna integritudatuprjemce- Aplikacnvrstvy- FTP (FileTransferProtocol,prenossouboru)

- HTTP (HypertextTransferProtocol,prenoshypertextu)- Telnet(pripojenkevzdlenmupoctaci)- Mailto (elektronickpota)

- IRC (InternetRelayChat,on-linekomunikace- programICQ)- VoIP (VoiceoverIP, telefonovnpresinternet- programSkype)

3. DAL UITECN POJMY

IP ADRESA - 32bitovadresapoctace(napr.160.217.96.1)DNS (DomainNameSystem):IP adreseje prirazenodomnovjmno

Prklad:160.217.96.1=>http://www.pf.jcu.czl

x2/x

5.4PROSTORYJMEN (NAMESPACE)

13Kompletnreferencnprruckapro tvorbuwebua WAPu

tohle je jeden odstavec

tohle je dal odstavec

ELEMENTY, ATRIBUTY A JEJICH HODNOTY MALMI PSMENY

Pak prohlec spodporou jazyka XML pouije tento prostor jmen(http://www.w3.org/1998/Math/MathML).Z nej zjist, e elementzastupujespecilnmatematickouznackuazobrazji jakorovnicisdelenm.

Jiste bybylo velmipracna zdlouhavuvdetatributxmlns v kadmelementu,pomocn chcemezapsatrovnici sdelenm.Proto muemepostupovatnsledovne:nazactkudokumentuidentifikujemeprostorjmena oznacmehonvetm.Pak sejen natentoprostorjmen ve zbytkudokumentuodvolvmepouzeu techelementu,kterchse tentonamespacetk:

patnenapsan:

Protonynmuemeodkazynaprostorjmenmath zkrtit.Tentozpisfungujestejnejakoveuvedendelzpis,kterobsahovalsvujvlastnatributxmlns:

DTD spodporourmcu:DTD XHTML 1.0Frameset

Tret definiceDTD sloupro tvorburmu(frames).Je totonsprechodovoudefinicDTD, jednmrozdlemje, e v ttodefinici naleznememsto elementuelementya.V XHTML 1.0Strict(aXHTML 1.1)nejsourmypovolenyvubec.

12

Druhmtypemje tzv. prechodovdefiniceDTD. Ta se nejvcepribliujesoucasnmustandardujazyka XHTML. StrnkystmtotypemDTD jsou velmiben,nebotpouvajve,nacojsmez HTML zvykl, tadynapr.vechnyelementyi atributyjazykaHTML 4.01.Nepouvajsevakrmy(frames).

Poznmka:k tomutotmatujetedoporucujiprofesionlumprostudovatproblematikutzv.zobrazovacchmduprohlecu,predevmnestandardnho'quirk mdu' MS InternetExploreru(napr.nahttp://wwwjakpsatweb.cz/css/mody-prohlizecu.htmlnebonahttp://wellstyled.com/singlelang.php?lang=cs&page=html-doctype-and-browser-mode.html).

V rmciznackovachojazykaXML definujemelibovolnpocetjmenelementlla atributu,je seukldajto tzv.prostorujmen(namespace).Tentoprostorje pro danoudefiniciDTDjedinecnapri odkazunajednotlivelementyaatributyz dokumentuje prohlechledprvev tomtoprostorujmen.V XHTML dokumentupouijemeatributxmlns.ZkratkaznamenprostorjmenXML, nebolianglickyXML namespace.JehohodnotajepodobnadreseURL:

HODNOTY ATRIBUTU V uvOZOVKCH

SPRVNE VNOREN ELEMENTY

15

noshade="noshade"

nowrap="nowrap"

selected="selected"

disabled="disabled"

compact="compact"

checked="checked"

multiple="multiple"

noresize="noresize"

KompletnreferencnpNruckapro tvorbuwebua WAPu

EXPLICITN HODNOTY ATRIBUTU

V XML i XHTML je nutnobsahskriptuumstitdo sekceCDATA. Hlavnm celemsekceCDATA je ignorovatznaky, kterby byly jinak chpnyjako elementy.Jedinoddelovac,kterje rozpoznnv sekci CDATA, je "]]>", slouc jako ukoncensekceCDATA.

ELEMENT SCRIPT

checked="checked" />

}

//-->

Prehledatributu,ktermusmt v XHTML uvedenusvouhodnotu:

Jen mlo atribuUlnem vjazyce HTML svoji hodnotu.Takovtoatributyzpravidlav elementureprezentujnejakprepnacetypuzapnuto/vypnuto.V jazyceXHTML alemusmtkadatributsvouhodnotu.

patnenapsan:

Sprvnenapsan:

JazykyXHTML, DHTML, CSSa WML

Prehledvechneprovchelementuv syntaxijazyka XHTML:

14

Sprvnenapsan:

SPECILN ZNAKY

Do zdrojovhokdu webu, napsanhovjazyce XHTML, se specilnznaky, kterpotrebujemev textunastrncezobrazit,zapisujpomoctzv.zstupnchentit.Nikdy nejakoprostznak.Dvodemje nejenfakt,e tyto specilnsymbolycastojednoduenapsataninelze(napr.reckabeceda,matematicko-fyziklnsymbolyapod.),alepredevmsemnohznichtakpouvajvevlastnmprogramovmkdu- napr.ampersand(&), je vetne(, jemenne ), uvozovky,atd.Prohlecby pak mohlznakynapsando textuprmo(vizprklady)chpatnapr.jakoparametrnejakhoatributu.Kompletntabulkutechtoentitnajdetev kapitoleXHTML 1.0Transitional.

17

Abychomzachovalikompatibilitui se soucasnmiprohleci,musmeuvststejnkdovni v metahlaviccedokumentu:

VechnynzvyelementuaatributuprevedemenamalpsmenaHodnotyvechatributuuzavremedouvozovek

Vechnyneprovelementyukoncme(napr.//-->

16

VslednXHTML dokument,jak houpravil validtorTidyGUI:

19

type CDATA #REQUIREDchecked CDATA #REQUIREDname CDATA #REQUIRED >

name CDATA #REQUIREDcontent CDATA #REQUIRED >


OBSAH ZAHLA V: ELEMENTY META, TITLE, BASE, LlNK A SCRIPT

Kompletnprehledvlastnostelementu:

Pro zajmavostuvdmistarverzeDTD pro jazyk HTML 4.01:

21Kompletnreferencnprruckapro tvorbuwebua WAPu

...kratstarverze

...definicepravidelproznackovn(viz.kapitolaXHTMLlDTD aprloha- DTD)

20

...nzevdokumentu... ...titulekzobrazenv titulkovliteprohlece

...viz kapitolaJavaScriptyakapitolaDHTML

23

8. FORMTOVN TEXTU

(break) ...odrdkovn(neprovelement- nutnoukoncitlomtkem)

25

...obtkn

FYZICK VYZNACOV N..text..

tucn

kurzva

Dodtren

pevn rka

vet

men

dolnindex

hornIndex

v v

CLEAR ="left(right,all)"

COLOR ="#hexakdbarvynebojmnobarvy"

Prklad:terventerven

FACE ="nzevfontnI, nzevfontu2, ..."

Prklad:

NEUSPORDAN SEZNAM (TZV. ODRKY)

10. SEZNAMY A VCTY

9. KOMENTRE

27

...vdycslo!

...spornzobrazen

(orderedlist) ...polokyseznamu...TYPE ="a(A, i, I, I)"START ="poctecnhodnota"COMPACT= "compact"

Prklad:

seznamatlas

Prklad:

portly

seznamatlascentrum

vyhledavace

googlealtavistayahoo

Prklad:

seznamatlascentrum

(list item)... textpoloky...TYPE ="disk(circle,square)" ...tvarodrkyTYPE ="a(A, i, I, I)"VALUE ="novcslopoloky" ...cslovn


USPORDAN SEZNAM (TZV. CSLOVN)

POLOKY SEZNAMU

VICEROVNOV SEZNAM

...nefunguje...nefunguje...bezsymbolu...spornzobrazen

...predfonntovantext CLEAR ="Ieft(right,all)" obtknWIDTH ="rkabloku"


Prklad: ... text ...

Krtkcitace(v rdku) ...fungujejenv Operea Firefoxu,textjeautomatickyv uvozovkch

(bidirectoff, BiDi override)...text... ...jen MSIE aFirefoxDIR ="Itr (rtl)" ...zobrazentextuzlevanebozprava(pr.arabtina)

...neprovznackaprotextnacelstrnce,fungujejenv MS InternetExploreru

SlZE, COLOR, FACE

...odsazentext...(blokovcitace)NOWRAP ="nowrap" ...nezalamovatrdky

(unorderedlist) ...polokyseznamu...TYPE ="disk" plnkolecko.

="circle" krouekO

="square" ctverecekDINGBAT ="znakodrky"SRC ="urlobrzku"

PLAIN= "plain"COMPACT= "compact"

II jednordkov komentr v kdu CSS a JavaScript1* vcerdkov komentr v kdu CSS a JavaScript *1

Prklad:

seznamatlascentrum

26

SEZNAM DEFINIC (NAPR. SLOVNK, VYSVETLIVKY)

11. ODKAZY

29

...odkazdonovhookna

text, obrzek

...vyplnenovcepoloekmailu

text, obrzek

...mailvceadrestum

text, obrzek

...vyplnenobsahmailu

text, obrzek

...mailjakokopie(carboncopy)

text, obrzek

...vyplnensubject(predmetzprvy)

Prklad:

text odkazu ...

Prklady:text,obrzek

text, obrzek

...bcckopie (blindcarboncopy,skrytkopie)

Prklad:text ...nvetje v tomtdokumentPrklad:text ...v jinmdokumentu

TITLE =" ... text..." ...popisodkazu(titulek)jako "bublna"umyiTARGET ="nzevclovhookna" ...viz kapitolarmy

="_blank" otevresenovokno(lzepouti mimormy)=" selt' totokno

="_top" zrurmyv okne

ODKAZ NA E-MAIL

ODKAZ NA CST DOKUMENTU (NVET)

Kompletnreferencnprruckapro tvorbuwebua WAPuJazykyXHTML, DHTML, CSSa WML

...oznaccstdokumentuNAME (ID) ="nvet"

Poznmka:atributidalepodporujjen novejiprohlece,protoje vhodnpoutistarivariantuname(vizprkladne).Prklad:

... atributid podporujjen novejprohlece ... idelnvarianta

Vdenhlavn mesto Rakouska

Prklad: Odkaz na Seznam

... textovodkaz

Prklad: odkaz

...odkaznakonkrtnsoubornajinmwebu

Prklad:

." msto textovhoodkazuje obrzek

Prklad: odkaz na jin webov dokument

...odkaznakonkrtnsouborv rmcithowebu

Prklad:

Prahahlavn mesto CR

(anchor)...viditelntextneboobrzek...HREF= "url"

(definitionlist) ...polokyseznamu...COMPACTCLEAR ="left(right,all)"

pojem... definicepojmu...

28

12. SYMBOL Y (zstupnentity)

JazykyXHTML, DHTML, CSSa WML 31

FOTOGRAFIE A GRAFIKA

Znak SymbolZnakSymbolZnakSymbolA

~

rft r

eN f 6ii E ea EA e6li 6A i6ft 5JE 6a: I 6&Thorn; pU v

Poznlmka: vsymbolechserozliujvelka malpsmena!

BITMAPOV GRAFICK FORMTY PRO WEB

*.jpg - pouitvhradneufotografi(snastavenmrozlienmnejlpe72,max.96dpi!)- vlastnosti:ztrtovkomprese(menobjemdat),progresivita(prokldan,nikoliv

postupnzobrazovn)*gif - urcenpouzeprografiku

- vhody:prokldanzobrazen(tzv.interlacing),pruhlednost,animace,neztrtovkomprese(nedochzkeztrtekvality)

- nevhody:pouze256barev(8-bit),komprimacnalgoritmusnenzdanna

*.png- alternativazalicencneproblematickGIF, 24-bitbarevnhloubka,interlacing,pruhlednost(tualezatmnepodporujeMS InternetExplorer)

Poznlmka: nekterprohlecepodporujiformt *.bmp,alejehopouitje iz duvoduznacnhoobjemudat(formtnenkomprimovan)naprostonevhodn.

SW pro tvorbuwebovgrafiky:

orelPhotoPaint,AdobePhotoshop,PaintShopPro,GIMP, GifConstructionSet,atd.


SYMBOLY PRO ZNAKY S AKCENTY

13.

Znak Symbol& &

"

ZnakSymbolREL ="stylesheet".., vztahzdrojovhodokumentuk clovmuREV ="prev" ...vztahclovhodokumentukezdrojovmuTYPE ="typobsahuMIME (napr.text/css)"MEDIA="druhvstupnhozarzen- aJl,screen,print,tv,projektion,handheld"TITLE="text titulkuv menuprohlece" ...jenprotzv.alternativnstyly

Prklad:

Prklady:

...vlastnikonawebu(viz kapitolaCSS)

...pouzev ,cl vechodkazunastrnces rmyHREF= "url"TARGET ="nzevclovhookna">

ZnakledenSO70

16. RMY

Poznmka:atributnamevyuvajodkazy:

Jazyky){HTML,DHTML, CSSa WML

mesc

druhy ovoce

jablkahruky

leden5070nor60SObrezen70902. ctvrtlet

lSO240

leden5070nor6080brezen7090l. ctvrtlet

180240

celkemlOOOSOO

Prklady:

... nahrazuje v HTML kdu element(viz prklad)ROWS = "cslo, %, *"COLS = "cslo, %, *"

Prklad:

Poznmka:prkladytabuleknajdetenawww.pfJcu.czlpepelprikladyITabulky

38

17. BEC TEXT

RM UVNITR STRNKY

ZVUK NA POZAD STRNKY

41

up marqueeje posouvnazdolanahoruleftmarqueeje posouvnazpravadolevaright marqueeje posouvnazlevadoprava

loopspecifikujepocetopakovni,-1znamennekonecnousmyckuscrol1amountspecifikujepocetpixelujednohoposuvu(krokposuvu)scrol1delayspecifikujeprodlevumeziopakovnmi(vmilisekundch).

Prklad:

'" rolujc text ...

Prklad:vidi teln text

...neprov,provec1myprohleceSRC ="url"HEIGHT ="pixely"WIDTH ="pixely"AUTO START, AUTOPLA Y ="true/false"

HIDDEN ="true/false" '" objektje/nenskrytLOOP ="cslolinfinite/-l" ... pocetprehrnzvuku(-lIinfinite=stle)

...neprov,jenproMS InternetExplorerSRC ="url"

LOOP ="cslolinfinite/-l" ... pocetprehrnzvuku(-lIinfinite=stle)

Prklady:

Poznmka:praktickprkladnajdetenawww.pjjcu.cz/pepe/priklady/Zvuk.video

Poznmka:praktickprkladnajdetenawwwpfjcu.cz/pepe/priklady/Marquee

ODKAZ NA ZVUKOV SOUBOR (*.mid,*.wav,*.mp3)


18. ZVUK NA WEBOV STRNCE


ALlGN ="top(middle,bottom,right,left,texttop,absmiddle,baseline,absbottom)"BEHA VIOR ="alternate,scroll,slide"BGCOLOR ="barvapozad"DlRECTlON ="down,left,right,up"LOOP ="pocetopakovn"SCROLLAMOUNT ="krokposuvu,px"SCROLLDELA Y ="prodlevameziopakovnmi,ms"WIDTH ="poadovanrka,px"HEIGHT ="poadovanvka,px"VSPACE ="vertiklnodsazen,px"HSPACE ="horizontlnodsazen,px"

Pouit:odkazyz nhled!lvefotoalbu,diskusnfra (knihynvtev)zjinch webuapod.

Prklad:

SRC ="urlobsahurmu"NAME ="jmnormu" ... mstonameopetnelzepoutatributid!WlDTH, HEIGHT, VSPACE, HSPACE ="pixely" ... jakou obrzkuBORDERCOLOR= "barva" jakou obrzkuALlGN jakou obrzku(zarovnn+obtkn)MARGINWlDTH ="pixely" rkaokrajeMARGINHEIGHT ="pixely" .,. vkaokrajeSCROLLlNG ="yes/no/auto" ... zobrazenscrollovacchpsliFRAMEBORDER ="yes/no/OIl" ... zobrazit/vypnoutrmecek

Atributbehaviorspecifikuje,jak je marqueeodsouvnaalternateposuvalternujezlevaazpravascrol1posuvvesmeruurcenmatributemdirection,povybehnuttextuzacnposuvodzactkuslideposuvvesmeruurcenmatributemdirection,podosaenopacnhokoncerdkusetextzastavazustanezdezobrazen

directionspecifikujesmerposuvutextu:downmarqueeje posouvnazhoradolu

........text(obrzek,apod.) .

40

ODKAZ NA VIDEO SOUBOR (*.avi,*.mov,*.mpg,kodekyDivX, Xvid)

19. VIDEO NA WEBOVSTRNCE

JazykyXHTML, DHTML, CSSa WML 43

CODEBASE ="URL, kdeseappletnachz"HEIGHT ="cslo"WIDTH ="cslo"VSPACE ="cslo"HSPACE ="cslo"ALIGN (stejnparametryjako

Prklady:


...msto...msto

DATA ="jmnovkldanhosouboru"CLASSID ="jmnoJavaappletu"

Prklad:

Poznmka:msto bychommelv XHTMLji pouvatel.,praktickprkladnajdetenawww.pjjcu.cz/pepe/priklady/Zvuk.video

DYNSRC ="url"START ="mouseover" startpohybemnamypresobjekt

="fileopen" autostart="mouseover,fileopen" .., obazpusoby

CONTROLS= "controls" tlactkaplay,pause,skip,stop,atributnefungujeLOOP ="cslo/infinite/-l" pocetopakovn(-l/infinite=stle)LOOPDELAY ="cslo" prodlevameziopakovnmi(ms)HEIGHT, WIDTH, ALT

...neprov,provechnyprohleceSRC ="url"HElGHT ="cslo"WIDTH ="cslo"VSPACE ="cslo"HSPACE ="cslo"AUTO START, AUTOPLAY ="true/false"HIDDEN = "true/false"LOOP ="cslo/-I"CONTROLLER ="true/false"

Prklad: viditeln text

Prklad:

VIDEO UVNITR STRNKY PRO VECHNY PROHLECE

VIDEO UVNITR STRNKY PRO MS INTERNET EXPLORER

42

21. JAV ASCRlPTY V XHTML DOKUMENTU

:l. FORMULRE

...prvkyformulre,neprovelement

NAME ="text" ...jmnoprvku(povinn),nelzemstonamepoutatributid

47

text, tabulka, obrzek apod.

Prklad:

SPAN>

... popisvstupnchformulrovchprvkuFOR ="jmnoprvku" (pomocidentifiktoruid,nelzepoutnamel)

...oddlformulre...prvkyformulre...

... titulekoddlu,pouzeuvnitr

ALIGN ="top*,bottom*,left,right,center" ...umstentitulku,* nefunguje... text...

49

Prklad:

kodaMazda

FordTrabant

HondaSuzukiKawasakiYamaha

Prklad:

jmno

pfijmeni

vcerdkutextu(vcerdkovtextovpole)NAME ="text" povinnjmnoprvku,nelzemstonamepoutatributId!COLS ="cslo" '" rkaoblasti(pocetznakuv neproporcionlnmpsmu)ROWS ="cslo" vkaoblasti(pocetrdku)WRAP ="off' vypnutzalomentextuv poli

soft(virtual)... zalomenoveformulri,nenavstupuhard(physical)'" zalomenoveformulrii navstupu

Kompletnreferencnpl'ruckapro tvorbuwebua WAPu

listbox(menu)...definice (viz

51

Poli me

mobilu, do kterho muete pres menu zadat vlastn adresuwap strnky.

zkuste tento vborn www

Poznmka:formulrovprvky (predevmjejich velikost,napr. u

53

IInn

onsubmit

onfocus

onunload

onselect

onblur

onreset

onchange

onmousedown

onmouseuponmouseoveronmousemoveonmouseoutonclickondblclick

DYNAMICK ATRIBUTY PRKAZU JAZYKU HTML A XHTML

1'1I.~"lllka:velkmnostvdalchprkladllk tomutoi nsledujcmutmatunajdetenawwwpfjcu.cz/pepe/priklady/DHTML-skripty.

dokoncennatahovnobsahuokna(nebormcu)atributmuebtpouitv prvcchBODY aFRAMESETodstranenobsahudokumentuz okna(nebormce)atributmllebtpouitv prvcchBODY aFRAMESETpri zsknfokusu;atributmuebtpouitv prvcchLABEL,INPUT, SELECT, TEXTAREA, BUTTONpri ztrtefokusu;atributmuebtpoutv prvcchLABEL,INPUT, SELECT, TEXT AREA, BUTTONpri odeslnformulreatributmuebtpouitv prvcchFORMpri nulovnformulreatributmuebtpouitv prvcchFORMpri vberutextuv textovmpoliatributmllebtpouitv prvcchINPUT, TEXT AREApri ztrtefokusu,byla-Iihodnotaprvkuzmenena;atributmue

Ibtpouitv prvcchINPUT, SELECT, TEXT AREA

1'l'Ikladdynamckhoodkazus mencmseobrzkem(udlostonMouse) :


poznmka:vechnyuvedena dalprkladynaformulrenajdetenawww.pfjcu.cz/pepe/priklady/Formulare.

Aby byly naedokumentyopravduinteraktivn,je potreba,aby provedenurcitcstiskriptubylo vyvolnoudlost,kterouaktivovaluivatel.Udlostmuebtprejetmypresurcitelement,pohybmy,kliknutmy,"double-klik",volbaveformulriapod.

V dynamickmHTML byly vechnyprvky dokumenturozreny,aby podporovalyudlostiklvesnicea myi.Tyto udlostijsou v kadmprvkuvytvorenyprmojako tzv.dynamickatributyaumonujprmspojenmeziprvkema chovnm(podobnspojenjakou prvkusjehostylem).

(X)HTML elementymajtedysvvlastnosti,metodyareagujnaprslunudlosti.Kadprvek je schopenreagovatna jakkoliv udlostiv rmci strnky,a to praktickyi bc/skriptovn.Tm, e vechnytytoudlostijsou navcplneskriptovateln,umonujvytvorilnebvaleinteraktivnstrnky- dynamickHTML strnky.


UDLOSTI TYPU INTRlNSIC

jmno:

prjmen:

DynamickHTML je kombinac(X)HTML, CSS stylua skriptu,pricemvzhledstrnkysechovpri zobrazenidynamicky,tzn.pro zmenuvzhledunentrebaznovunactatstrnku.Proti jinm metodmm tatozejmnavhoduv prolnutttotechnologiedo celhotextustrnky.DynamickHTML se tak stvsoucsttextuna strncea mue ovlivnovatlibovolnousoucststrnky.

Z dostupnchtechnologimDHTML nejbleklasickmunvrhustrnkypomocHTML.DynamickHTML je podporovnojak NetscapeCommunicatorem,Mozillou, Firefoxem,Operou,tak MS InternetExplorerem,avakkadmjinak a v ruznmstupnirozsahu.Odlinosti jsou nejen v monostechovlivnovn prvk dokumentu,ale i v syntaxiskriptovachojazyka.

SoucstdynamickhoHTML je radastandardnchrozren.PomocdynamickhoHTMLmuemenapr. animovatobjekty,pouvatvektorovobjekty,prmo propojovattabulkysdatabzovmizdrojinebovyuvatmnohodalchefekt.

Jak i z nzvuvyplv,dynamickHTML je formoupublikovnnawebu,ktersei nadle

dynamickyvyvj. V soucasnostinejdeji jen o dynamikuvzhleduwebovstrnky,aletako dynamickouzmenuobsahustrnky.Fenomnembrzkbudoucnostise zanedlouhojistestanenovtechnologie,nazvanXML (eXtensbleMarkupLanguage).Jejm poslnmnennahraditHTML, XHTML, popr.DHTML, slouc k definovnvzhledudokumentu,aleoblastjejhopsobenje predevmlogckstrukturadokumentu.D seocekvat,eobetytotechnologiev blzkbudoucnostivzjemnedosebeprolnou.

24. DYNAMICK HTML - DHTML

52

onclick="window.open(.http://www.seznam.cz 'seznam','width=400,height=400,scrollbars=no,resizable=no,menubar=no,location=no,status=no,toolbar=no') ;return false;">

55

IIISTORY

metody:go,forward,back

OOCUMENTmetody:writevlastnosti:bgcolor,fgcolor,linkcolor,vlinkcolor,alinkcolor,location,

lastmodified

Prklad(tlactkonaotevrennovhooknaprohlece):

OBJEKT WINDOW

57

dosed - vlastnostobsahujelogickouhodnotu,udvajc,zdajeoknozavreno/ro/. crypto- vlastnostobsahujeodkaznaobjekt,obsahujcnekterbezpecnostn

metodyNetscapeNavigatoru/ro/. defaultStatus- vlastnostobsahujeretezec,kterje vypsnnastavovrdce,nen-

li vypsnstatus document- vlastnostobsahujeodkaznaobjektdokument,predstavujcHTML

dokumentnataendoaktulnhookna. frames- vlastnostobsahujepole,jehoprvkyjsou odkazynaprpadnrmy

aktulnhookna- objektywindow/ro/ history- vlastnostobsahujeodkaznaobjektHistory,vektermje uloenahistorie

obsazenaktulnhookna.

innerHeight- vlastnostudvvkuobsahuoknav pixelech,pronastavenextrmnchhodnotje trebamtzpisovprvoUniversalBrowserWrite,

innerWidth - vlastnostudvrkuobsahuoknav pixelech,pronastavenextrmnchhodnotje trebamtzpisovprvoUniversalBrowserWrite.

length- vlastnostobsahujepocetrmuaktulnhookna/ro/. location- vlastnostobsahujeodkaznaobjektLocation,kterreprezentujeadresu

nataenstrnky. locationbar.visible- vlastnostobsahujelogickouhodnotuudvajc,zdaje

zobrazenalitaprozadnadresy,pronastavenhodnotyttovlastnostije trebamtzpisovprvoUniversalBrowserWrite.

menubar.visible- vlastnostobsahujelogickouhodnotu,zdaje zobrazenoikonovmenu,pronastavenhodnotyttovlastnostije trebamtzpisovprvoUniversalBrowserWrite.

name- vlastnostobsahujejmnoaktulnhookna,jmnemhlavnhooknajeprzdnretezec.

offscreenBuffering- vlastnostobsahujelogickouhodnotuudvajc,zdajsouzobrazovandatanejdrvezapsnadobufferuapotnajednouvypsnanaobrazovku.

opener- vlastnostobsahujeodkaznaokno,kterzpusobilootevrenaktulnhookna.

outerHeight- vlastnostudvvkuoknav pixelech. outerWidth- vlastnostudvrkuoknav pixelech. pageXOffset- vlastnostudvsouradnicix bodudokumentu,kterje videtv okne

jakoprvn/ro/. pageYOffset- vlastnostudvsouradniciy bodudokumentu,kterje videtv okne

jakoprvn/ro/. parent- vlastnostobsahujeodkaznarodicovskoknovprpade,eaktulnokno

je rmemnekterhookna/ro/.

Vlastnostiobjektuwindow

otevrenoknaa rmyoken.Vechnyautomatickyvytvorenobjektywindowjsou vzjemnepropojenypomocodkazua tvor opetjakousihierarchiiobjekuwindow uvnitrhierarchieobjektuobjektovhomodeluprohlece.Hlavnoknoprohleceje prstupnpresidentifiktorwindow, pokudvakpristupujemek vlastnostemnebometodmhlavnhookna,je pouitidentifiktoruwindowji nepovinn.


PLN PREHLED OBJEKTU DHTML

DATEmetody:gethours,getminutes,getseconds,getfullyear,getmonth,

getday(denv tdnu),getdate(denv mesci)

document.write("pouvte prohlec" +navigator.appname + " " + navigator.appversion)

NAVIGATORvlastnosti:appname,appversion,cpuclass,platform

Prklad(zjitenjmnaaverzeprohlece):

document.write('pracujete v rozlien' +screen.width + 'x' + screen.height +'r V ' + screen.colordepth + '-bit barevn hloubce. ')

LOCATIONmetoda:replace


Poznmka:velkmnostvdalchpraktickchprkladunapouittechtoi nsledujcchobjekttinajdetena www.pjjCu.cz/pepe/prikladyIDHTML-skripty.

SCREENvlastnosti:width,height(px),colordepth(bitunapixel)

Prklad(zjitennastavenhorozlienabarevnhloubky):

Vpred

Zpet

Objekty window reprezentujokna prohlecea jejich prpadnrmy. Pri nataen(X)HTML dokumentudo prohlecejsou automatickyvytvorenyvechnyobjektypopisujc

26.

Prklad(tlactka'zpet'a 'vpred'v historiinavtvenchstrnek):

56

Implicitnejsou hodnotytechtoparametnlnastavenynano,pokuduvedemepouzenzevparametrubezprirazenhodnoty,nastavmetmjeho vlastnostnayes.

height =pocet-pixeluleft =pocet-pixelulocation [ =( yes I no I O 11 ) ]menubar [ =( yes I no I O 11 ) ]resizable [ =( yes I no I O 11) ]scrollbars [ =( yes I no I O 11 ) ]status [ =( yes I no I O 11 ) ]toolbar [ =( yes I no I O 11 ) ]top =pocet-pixeluwidth =pocet-pixelu

59

enableExternaICapture() - metodapovol zachytvn udlost, ktergenerujdokumenty z cizch serveru,umstenv nektermz rmll okna, pro proveden ttoakceje trebamt zpisov prvo UniversalBrowserWrite.

find([retezcov_vraz[, logick_vraz,logick_vraz])- metodaprovede hlednretezcovho_vrazuv obsahu okna, dal dva parametry,kter mus bt uvedenyspolecneudvaj, zda bude hledn citliv na velikost psmen a zda budeprobhatsmeremvzad. Pokud je hledan textnalezen,vrac metodatrue,jinak false, pokuduvedememetodubez parametru,je zobrazen dialog pro hledn.

tocus() - metodazamer okno.

forward ( ) - metodaprovede postup na dal stranuv historii obsazen okna.

handleEvent(udlost)- metodaumonuje vyvolat ovladac specifikovan udlosti. home() - metodazobraz v okne dokument s domovskou strnkou.

moveBy(cseln_vraz,cseln_vraz)- metodaposune okno o specifikovanpocet pixelu horizontlne a vertiklne, pro proveden ttoakceje v nekterchprpadech trebamt zpisov prvo UniversalBrowserWrite.

moveTo(cseln_vraz,cseln_vraz)-metoda presune lev horn roh okna naspecifikovan souradnice,pro proveden tto akceje v nekterchprpadechtrebamt zpisov prvo UniversalBrowserWrite.

navigate(retezcov_vraz) - metodazpusob nataenstrnky identifikovanadresouuvedenoujako parametrdo okna.

open(retezcov_vraz,retezcov_vraz,retezcov_vraz)- metodavytvor novokno, nathnedo nej strnkus adresouzadanoujako prvn parametrmetody,jmnookna je zadnojako druh parametr,dalm parametremje seznamparametruoddelench crkami.

print() - metodavytiskne obsah okna na tiskrne.

prompt(retezcov_vraz,retezcov_vraz)- metodazobraz okno, do kterhojemon zadatkrtk text. Prvnm parametremmetodyje npoveda,kterje

zobrazena v zhlav okna, druhm parametremje implicitn hodnotavstupu. Pokudklilmeme Storno,je vracenou hodnotou null.

releaseEvents(udlost)- metodaurc oknu, aby zachycenspecifikovan udlostipredvalo dlepodle hierarchie zachytvnudlost.

resizeBy(cseln_vraz,cseln_vraz)- metodazmen rozmery okna tak, eposune prav doln roh okna o specifikovan pocet pixelu, pro proveden tto akceje v nekterchprpadech trebamt zpisov prvo UniversalBrowserWrite.


alert(retezcov_vraz)- metodazobraz okno se zprvou zadanoujako parametr. atob(kdovan_data)- metodarozkduje datakdovan pomoc metodybtoa. back() - metodazpusob nvratv historii obsazen okna na predposledn stranu.

blur() - metodazru zamerenokna.

btoa(retezec)- metodaprovedezakdovn retezce. captureEvents(udlost)- metodaurc oknu, aby zachytvalovechny udlosti

specifikovanho typu, pro proveden tto akceje trebamt zpisov prvoUniversalBrowserWrite

clearlnterval(identifikt01-_intervalu)- metodazru naplnovn akce pomocmetody setlnterval.

clearTimeout(identi{lkace_timeoutu)- metodazru naplnovn akcepomocmetody setTimeout.

close() - metodazavre okno nad ktermje volna, pro proveden ttoakceje treba

mt zpisov prvo UniversalBrowserWrite. confirm(retezcov_vraz)- metodazobraz okno se zprvou a d o potvrzen,

zobraz tlactka OK a Cancel, pokud klikneme na OK, je vrcenahodnota true,

jinak talse.

crypto.random(pocet_bajfti)- metodavrac pseudonhodnretezecznakuspecifikovan dlky.

crypto.signText(i'etezec, asklauto,seznamJertijiktu)- metodaumonuje odeslatna serverkdovan podpis.

disableExternaICapture() - metodazamez zachytvnudlost, kter generuj

dokumenty z cizch serveru,umstenv nektermz rmu okna.


personalbar.visible - vlastnostobsahuje logickou hodnotu, udvajc, zda jezobrazeno adresrovmenu, pro nastavenhodnoty ttovlastnost je trebamt

zpisov prvo UniversalBrowserWrite. screenX - vlastnost obsahuje souradnici x hornho levho rohu okna, pro nastaven

hodnoty je trebamt zpisov prvo UniversalBrowserWrite. screenY - vlastnostobsahuje souradnici y hornho levho rohu okna, pro nastaven

hodnoty je trebamt zpisov prvo UniversalBrowserWrite. scrollbars.visible - vlastnost obsahujelogickou hodnotu, udvajc, zdaje

zobrazen posuvnk, pro nastavenhodnoty ttovlastnosti je trebamt zpisov

prvo UniversalBrowserWrite. self - vlastnost obsahujeodkaz na aktuln okno /ro/. status - vlastnostobsahuje retezec,kterje vypsn ve stavovrdce prohlece. statusbar.visible - vlastnostobsahuje logickou hodnotu,udvajc, zdaje

zobrazena stavov rdka,pro nastavenhodnoty tto vlastnosti je trebamt zpisov

prvo UniversalBrowserWrite. toolbar.visible - vlastnostobsahuje logickou hodnotu,udvajc, zda je zobrazena

nstrojov lita, pro nastavenhodnoty ttovlastnostije trebamt zpisov prvoUniversalBrowserWrite.

top - vlastnost obsahuje odkaz na nejvy okno v hierarchii rmu /ro/. window - vlastnost obsahujeodkaz na aktuln okno /ro/.

Metody objektu window

58

11'111111

111I

1:1

I,.

IIIII~

li I~I

IIIIIII!\I

I

I~III

II'

111111'1111

11111'

I11I1111

OBJEKT DOCUMENT

Objektydocumentreprezentujobsahokenprohlecenebovrstev,nejcastejitedyHTMLdokumentyneboobrzkyci prosttext.Objektdocumenttaknejcastejireprezentujepouit(X)HTML znacky.

61

alinkColor - vlastnostodpovdatributualinkznacky. anchors- vlastnostobsahujepoleodkazunaobjektyAnchor vytvorenznackou

/roj

applets- vlastnostobsahujepoleodkazunaobjektyAppletvytvorenznackou/ro/.

bgColor - vlastnostodpovdatributubgcolorznacky. classes- vlastnostobsahujepoleodkazunaobjektyStyle,kterlzevyut

uvedenmatributuclassv HTML znackch.

cookie(obsahJookie)- vlastnostobsahujetzv.cookie(vysvetlenodle). domain- vlastnostobsahujenzevdomnyserveru,naktermje dokument

umsten.

embeds- vlastnostobsahujepoleodkazunaobjektyvytvorenznackami/ro/.

fgColor - vlastnostodpovdalTbututextznacky. forms- vlastnostobsahujepoleodkazunaobjektyForm vytvorenznackami

/ro/.

height- vlastnostobsahujevkudokumentuv pixelech. ids- vlastnostobsahujepoleodkazllnaobjektyStyle. images- vlastnostobsahujepoleodkazunaobjektyImagevytvorenznackami

/ro/. lastModified- vlastnostobsahujedatum,kdybyl dokumentnaposledyzmenen

/ro/.

layers- vlastnostobsahujepoleodkazunaobjektyLayer vytvorenznackaminebo.

IinkColor - vlastnostobsahujehodnotuatributulinkznacky. links - vlastnostobsahujepoleodkazunaobjektyLink vytvorenznackami

satributemhref/ro/. plugins- vlastnostobsahujepoleodkazunaobjektyPlugin umstenv dokumentu

/ro/.

referrer- vlastnostobsahujeadresustrnky,pomocjejhoodkazubylaaktulnstrnkanataena/ro/.

tags- vlastnostosahujepoleodkazllnaobjektyStyle. title- vlastnostobsahujejmnodokumentuuvedenveznacce,pokudnen

jmnouvedeno,je hodnotouvlastnostititlehodnotavlastnostiURL /ro/. URL - vlastnostobsahujeURL dokumentu/ro/. vlinkColor - vlastnostodpovdatributuvlinkznacky. width- vlastnostobsahujerkudokumentuv pixelech.

captureEvents(udlost)- metodaurcdokumentuabyzachytvalvechnyudlostispecifikovanbotypu.

close()- metodauzavrtvorbudokumentua zobrazjej v okneprohlece.

Metodyobjektudocumentumonujdynamickyvytvretobsahdokumentuzobrazenhov okneprohlece.

Vlastnostiobjektudocument

Metodyobjektudocument

KompletnreferencnpHruckapro tvorbuwebua WAPuJazykyXHTML. DHTML, CSSa WML

resizeTo(cseln_vraz,cseln_vraz)- metodazmenrozmeryoknatak,epresunepravdolnrohoknanaspecifikovansouradnice,proprovedenttoakceje v nekterchprpadechtrebamtzpisovprvoUniversalBrowserWrite.

routeEvent(udlost)- metodapoleudlostkezpracovndalmuobjektuv hierarchiizachytvnudlost.

scroll(cseln_vraz,cseln_vraz)- metodanastavobsahoknanapoziciudanouparametryjakosouradnicemix ay, levhornrohHTML dokumentuodpovdsouradnicm[O, OJ.

scrollBy(cseln_vraz,cseln_vraz)- metodaposuneobsahoknaospecifikovanpocetpixelu.

scrollTo(cseln_vraz,cseln_vraz)- provedestejnouakcijakometodascroll(pouitdoporuceno).

setHotKeys(trueI false)- metodanastavujepovolenklvesovchzkratekv oknech,kternemajmenu,pronastavenhodnotyje trebamtzpisovprvoUniversalBrowserWrite.

setlnterval(retezcov_vraz,cseln_vraz)- metodaprovedeakciuvedenoujakoprvnparametrvdy,kdyuplynepocetmilisekunduvedenjako druhparametrmetody,metodavracidentifiktor,pomocnejlzeakcizruitmetodouclearInterval.

setResizable(logick_vraz)- metodaumonuivatelimenitvelikostokna,pokudje parametremtrne.

setTimeout(akce,prodleva)- metodanaplnujeakciuvedenoujakoprvnparametr(retezec,naprkladvolnifunkce)k vykonnpocasovprodleveuvedenv milisekundchjako druhparametr.Metodavracidentifikacitimeoutu,ji lzepoutv metodeclearTimeout.

setZOption(alwaysLoweredI alwaysRaisedI z-lock) - metodanastav,zdaoknobudestlepodci nadostatnmiokny,nebobudevestlestejnpozici.

stop() - metodazastavprveprobhajcnatahovndatdoprohlece.

Udlostigenerovanobjektywindow

dragdrop- udlostnastanepripretaenobjektunadoknoprohlece. load- udlostnastanepri nataenHTML dokumentudookna. focus- udlostnastane,vybereme-liokno. blur - udlostnastanepri zruenvybrnokna. error - udlostnastane,kdyJavaScripthlschybuprivpoctunebonatahovn

strnky. move- udlostnastanepri zmenepoziceokna. resize- udlostnastanepri zmenevelikostiokna. unload- udlostnastanepri zavrnokna.

60

II i II~i

1111.l11~I(TLOCATION

...;PATH=/novinky;

... ;DOMAIN=moje. cz;

63

CstretezcecookieobsahujcslovoDOMAIN udvrozsahplatnosticookie.Zdejemonspecifikovatinternetovoudomnu,odkudbudehodnotacookieviditeln:

Pokudje trebanekteroucookieodstranit,lzeznovunastavitjej hodnotuEXPlRES nanekterokamikv minulosti.

Hodnotacookiemnsledujcstrukturu:nzev=hodnota

[; EXPIRES=datum_GMT][;DOMAIN=nzev_domny][; PATH=cesta][; SECURE]

Nastavenhodnotacookieje viditelnprodokumentyuloenv moje.cz/novinky,cookieplatdo31.12.2000,nzevcookieje hesloahodnotoujepejsek.Posledncstretezcecookieje slovoSECURE, kter,pokudje uvedeno,urcuje,eprikomunikaciseserverembudecookieprenenazabezpecenmspojenm,implicitnenenIlItomonostpouita.

stretezcovhodnotycookiePATH pakstejneurcujeprokterdokumentybudehodnotacookieprstupnnazkladeumstendokumentuv cestevewebovdomne:

Taktonastavencookiebudeviditelnnavechstrnkchdomnymoje.cz,jejichumstenv domneodpovdnastavenv cstiPATH.

Takov zpis vytvor pouze docasnoucookie, jej hodnotabude ztracenapriukoncenprohlece.Dal cst retezcecookie je cstEXPlRES, kterznac dobuplahlOsticookie, kter je udnajako casov okamik vyjdrenformtemGMT(univerzlncas),kjehozsknje monpoutmetodutoGMTString() objektuDate:

var vyprseni=new Date("December 31,2000")document.cookie='heslo=pejsek;EXPIRES=' +

vyprseni.toGMTString()

Zklademcookieje jej povinnnzev,a povinnhodnotacookie,takenejjednoduzpiscookiemuevypadattakto:

document.cookie = "heslo=pejsek"

( lhjcktylocationreprezentujadresydokumentunataenchdo okenprohlecu,objektyI~"IIprstupnpomocvlastnostilocation objektuwindow.Nataendokumentudo okna1lIlIlilr~cceprovedemejednodueprirazenmnov hodnotydo vlastnostilocation danho,ti 1111,

KompletnreferencnpNruckapro tvorbuwebua WAPuJazykyXHTML, DHTML, CSSa WML

releaseEvents(udlost)- metodaurcdokumentu,abyzachycenspecifikovanudlostipredvaldlepodlehierarchiezachytvnudlost.

routeEvent(udlost)- metodapoleudlostkezpracovndalmuobjektuv hierarchiizachytvnudlost.

write(retezcov-vraz)- metodazapedodokumentuhodnotuzadanhoretezcovho_vrazu.

writeln(retezcov-vraz)- metodazapedodokumentuhodnotuzadanho,'etezcovho_vrazuaprejdenanovourdku.Prechodnanovourdkujeuskutecnenpouzevezdrojovmtextudokumentu,nikoliv jehozobrazenv prohleci

"text/html"- implicitnHTML formt"text/plain"- prosttext,znackyHTML seneinterpretuj"image/gif"- obrzekvefonntuGIF"image/jpeg"- obrzekvefonntuJPEG"image/x-bitmap"- obrzekveformtux-bitmap

DalmiMIME-typyjsou identifikace/ormtupro instalovanrozrenplug-in,ktersepakstarajojejich interpretacisama.

click - udlostnastanepri kliknuttlactkamyi. dblclick- udlostnastanepri dvojitmkliknuttlactkamyi.

keydown- udlostnastanepri stiskuklvesy. keypress- udlostnastanepri stisknutklvesy. keyup- udlostnastanepriuvolnenklvesy. mousedown- udlostnastanepri stisknuttlactkamyi. mouseup- udlostnastanepri uvolnentlactkamyi.

contextual(ovlivnujc_objekt_Style,ovlivnen_objekt_Style)- metodaumonovlivnitstylznacky,jestliesetatoznackanachzuvnitrznackyovlivnujc(pouitou objektllStyle).

getSelection()- metodavractext,kterbyl oznacenuivatelem. handleEvent(udlost)- metodaumonujevyvolatovladacspecifikovanudlosti. open([MIME-typJ)- metodaotevrdokumentprozpis.MIME-typ je retezcov

vraz,kterudvformtvytvrenhodokumentu:

Vlash10stcookieje dalvlastnostobjektudocument.Jde ojednoduchouretezcovouvlastnost,kter vak prohleciumonujeukldatna straneklienta data trvanlivmzpusobem,odtudnzevcookie- suenka.Vlastnostcookieumonujemanipulovatsdatymezi jednotlivmiWWW strnkami,napr.PHP (CGI) skriptna straneserverumuchodnotucookiecst i zapisovat.Mimo to, e systmcookie byl puvodnenavrenproprogramtoryCGI, je monshodnotamicookiemanipulovatprogramovetakpomocJavaScriptu.Vekermanipulacev JavaScriptutakprobihpomocctena zpisuretecov6hodnotyvlastnostidocument.cookie

Vlastnostcookie

Udlostiobjektudocument

62

lil III'

'II

lIilll

ililll'

II

II

1'111':

111'11

11,1111

11'11,11111

OBJEKT HISTORY

65

MetodyobjektuHistory

Komp/etnreferencnpl'lruckapro tvorbuwebua WAPu

appCodeName- vlastnostobsahujekdovoznacenprohlece/ro/. appName- vlastnostobsahujeaplikacnnzevprohlece/1'0/. appVersion- vlastnostobsahujeplatformua verziprohlece/1'0/. cpuClass- vlastnostobsahujetypCPU

language- vlastnostobsahqje2 nebo5znaki'lurcujcchjazykpouvanprohlecem/1'0/

mimeTypes- vlastnostobsahujepole, jehopolokyjsou odkazynaobjektyMimeType reprezentujcdaltypysoubon:'IpOdporovanchprohlecem/1'0/.

platform- vlastnostobsahujeznacenplatformy,nakterprohlecbe/ro/.

plugins- vlastnostobsahujepole,jehopolokyreprezentujinstalovanplug-insoucsti/ro/.

userAgent- vlastnostobsahujehodnotu,kterouprohlecpouvk zastoupenuivatelev HTTP dostech/ra/.

Metodyobjektunavigator

javaEnabled() - metodatestuje,zdaje povolenoprovdenJavovskchapplelt'l,vraclogickouhodnotu.

plugins.refresh(/ogick_hodnota)- metodaumonpouitnoveinstalovanchrozrenplug-ina pokudje parametremtrue,znovunactedokument.

preterence(jmno_v/astnosti[,hodnota])- metodaumoncsta nastavovat

nektervlastnostiprohlece,kterlzenastavitv menunapr.NetscapeNavigatoru,proctentechtohodnotje trebamtctecprvoUniversa/BrowserRead,prozpishodnotje trebamtzpisovprvoUniversa/BrowserWrite.

savePreterences()- metodaukldnastavenvlastnostprohlecedosouboruprefijs, proprovedenttoakceje trebamtzpisovprvoUniversalBrowserWrite.

taintEnabled()- metodatestuje,zdajepovolenouvnbezpecnostnchfunkctaint() a untaint():

back() - metodazpusobnataendokumentu,jehoadresaje v historiiuloenanansledujcpozici.

torward() - metodazpusobnataendokumentu,jehoadresaje v historiiuloenanapredchozpozici.

go(cseln_v)Jraz, l~etezcov_vraz)- metodaumot1ujenathnoutdoolmadokument,jehoadresaje uloenav historiiobsazenokna.Cselnvrazudvporaddokumentuv historii(O zpusobznovunactenaktulnstrnky),pokudjezadnretezcovvraz,hledmetodagov historiinejbliadresu,kterobsahujezadanretezecjakopodretezec.

Vlastnostiobjektunavigator

OBJEKT NAVIGATOR

Jedn existujcobjektnavigatorpopsujekonfiguraciprohlece,je prstupnpomocvlastnostinavigatorobjektuwndow.


window.location="http://www.seznam.cz"

hash- vlastnostreprezentujekotvuv dokumentu,ktermuebtsoucstURL,zacnznakem"#"

host- vlastnostreprezentujespojenhostname:port. hostname- vlastnostreprezentujejmnohostitelskhoserverua domny. href - vlastnostreprezentujekompletnURL. pathname- vlastnostreprezentujeadresrovoucestuv URL. port - vlastnostreprezentujecsloportupouithoprokomunikaci. protocol- vlastnostreprezentujeprotokol,jehospecifikaceje soucstadresy:

http,ftp, file,mai1to,news,gopher,javascript,about. search- vlastnostreprezentujedotaznaserver,ktermuebtsoucstURL,

zacnznakem"7"

reload([logic1

OBJEKT MIME TYPE

ObjektMimeTypeje objektautomatickytvorenprohlecem,popisujcMIME typ(typdat) rozpoznatelnprohlecem. Objekty MimeType jsou dostupn pomoc poleMimeTypes,kterje vlastnostobjektunavigatorneboplugin.

OBJEKT PLUGIN

Objektyplugin jsou objektyautomatickytvorenprohlecem,obsahujcinformaceorozrenchinstalovanchprozpracovnMIME typll.Objektpluginje zrovenpoleodkazunaobjektyMimeType,kterrozrenpopisovanprslunmobjektempluginzpracovv.

OBJEKT EVENT

Objektyeventjsou objektyautomatickytvorenprohlecemkdykoli nastaneudlostJavaScriptu,prslunobjekteventpakobsahujevlastnostipopisujconuudlost.Odkaznaobjekteventje predvnjakoparametrfunkceovladaceudlosti.

67

layerX- vlastnostobsahujerkuvrstvyvpixelechpri udlostiResizenebovodorovnoupozcikurzorumyinavrstve,kterudlostgeneruje,prozpisttohodnotyje trebamtzpisovprvoUniversalBrowserWrite.

layerY - vlastnostobsahujevkuvrstvyv pixelechpri udlostiResizenebosvisloupozicikurzorumyinavrstve,kterudlostgeneruje,prozpisttohodnotyje trebamtzpisovprvoUniversalBrowserWrite.

modifiers- vlastnostobsahujeretezecpopisujc,kterfunkcnklvesybylypriudlostivyvolanmyneboklvesoustisknuty(ALT_MASK, CONTROL MASK,SHIFT_MASK neboMETA_MASK) , prozpisttohodnotyje trebamtzpisovprvoUniversalBrowserWrite.

pageX- vlastnostobsahujevodorovnoupozicicikurzorumyVllCidokumentu,prozpisttohodnotyje trebamtzpisovprvoUniversalBrowserWrite.

pageY- vlastnostobahujesvisloupozicikurzorumyivucidokumentu,prozpisttohodnotyje trebamtzpisovprvoUniversalBrowserWrite.

screenX- vlastnostobsahujevodorovnoupozicikurzorumyinaobrazovce,propisttohOdnotyje trebamtzpisovprvoUniversalBrowserWrite.

screenY- vlastnostobsahujesvisloupozicikurzorumyinaobrazovce,prozpisttohodnotyje trebamtzpisovprvoUniversalBrowserWrite.

target- vlastnostobsahujeretezec,jehohodnotouje nzevprvku,kterudlostgeneroval,prozpisttohOdnotyje trebamtzpisovprvoUniversalBrowserWrite.

type- vlastnostobsahujeretezec,jehohodnotouje typudlosti,prozpisttohodnotyje trebamtzpisovprvoUniversalBrowserWrite.

which- vlastnostudvbud'poradovcslostisknuthotlactkamyineboASCllkdstisknutklvesy,prozpisttohodnotyje trebamtzpisovprvoUniversalBrowserWrite.

width- vlastnostobsahujerkuoknaprohlecev pixelech,prozpisttohodnotyje trebamtzpisovprvoUniversalBrowserWrite.

x - vlastnostobsahujerkuprvku,ktergenerujeudlostResizenebovlastnostobsahujevodorovnoupozicikurzorumyinavrstve,kterudlostgeneruje,prozpisttohodnotyje trebamtzpisovprvoUniversalBrowserWrite.

y - vlastnostobsahujevkuprvku,ktergenerujeudlostResizenebovlastnostobsahujevodorovnoupozicikurzorumyinavrstve,kterudlostgeneruje,prozpisttohodnotyje trebamtzpisovprvoUniversalBrowserWrite.

availHeight- vlastnosturcujevertiklnrozlienobrazovkyv pixelech,odcelkovhopoctupixeluje odectenavkatrvaleviditelnchobjektll(naprkladlitaWindows).

availLeft- vlastnosturcujevodorovnousouradniciprvnhopixelu,kternensoucstnekterhotrvaleviditelnhoobjektu.


Vlastnostiobjektuscreen

OBJEKT SCREEN

JavaScriptobsahujejedin vestavenobjektscreen,kter pomocnekolikavlastnostpopisujenastavenobrazovky.


Vlastnostiobjektuevent

data- vlastnostobsahujepoleretezCl!obsahujcchURL objektuktervyvolalyudlostDragDrop,proctenttohodnotyje trebamtctecprvoUniversalBrowserReadaprozpishodnotyje trebamtzpisovprvoUniversalBrowserWrite.

height- vlastnostobsahujevkuoknaprohlecev pixelech,prozpisttohodnotyje trebamtzpisovprvoUniversalBrowserWrite.

VlastnostiobjektuMimeType

description- vlastnostobsahujeretezecpopisuprslunhoMIME typuIro/: enabledPlugin- vlastnostobsahujeodkaznaobjektPlugin, kterpopisuje

rozren(Plug-In),kterje zodpovednzazpracovnprslunhoMIME typu,obsahujenull,pokuddnrozrennenkonfigurovnoIro/:

suffixes- vlastnostobsahujeretezecobsahujcprponysouboruprslunhoMIME typuIro/:

type- vlastnostobsahujeretezecudvajcjedinecnoznacenMIME typu(naprklad"text/html"nebo"video/mpeg")Irol.

VlastnostiobjektuPlugin

description- vlastnostobsahujeretezecpopisuprslunhorozrenIrol. filename- vlastnostobsahujeretezecnzvusouborurozren,jakje uloenona

diskuIro/:

length- vlastnostobsahujedlkupoleobjektuMimeType,nakterodkazujeprslunobjektPlugin Irol.

name- vlastnostobsahujeretezecnzvurozrenIrol.

66

II

IIII

OBJEKT FORM

Objektyform reprezentujiformulrev HTML dokumentuvytvorenznackamia,kterjsou zkladnmzptlsobemkomunikacemeziklentem,u kterhoje formulrzobrazen,a serverem.Formulrmue obsahovatrihn komunikacnelementy:Blltton,Checkbox,jileUpload, Hidden,Password,Radio,Reset,Select,Submit,Texta Textareaprozadvndatdo formulre.Odeslndatz formulrena serverje provedenopomocvolnmetodysubmitnadformulrem.Objektyformjsouv JavaScriptudostupnvcezptlsoby:

69

Reset- objektreprezentujetlactkoveformulri,kterpri kliknutvrac'!echnyovldacprvkyformulredopiivodnpolohy,v HTML tvorenznackou~inpllttype="reset">.

Submit- objektreprezentujetlactkoveformulri,kterpr kliknutzpu~bodeslndatz formulrenaserver,v HTML tvorenznackou.

Hidden- objektreprezentujenevditelnobjektveformulruvank Predvnnekterkonstantnhodnoty,v HTML tvorenznackou.

action- vlastnostobsahujeurlserveru,kamjsou zaslnadatapri odesll)formulre,odpovdatributuactionznacky,prouvedenmai/to:je trebamtprvouniversa/sendmail.

elements- vlastnostobsahujepoleodkazt!navechnykomunikacnele!\lentyveformulri/1'0/.

encoding- vlastnostreprezentujezpusobkdovnprenenchdat,odpovdatributuectypeznacky.

length- vlastnostobsahujedlkupolevevlastnostielementsobjektufotm/ro/.

method- vlastnostreprezentujezpsobprenosudatnaserver,implicitnejsoudataprenenajako dotazovaccsturl (zpsobget),a nebojsoudataprenetlajakosamostatnblokdat(zpsobpost),odpovdatributumethodznacky.

name- vlastnostobsahujejmnoformulre,odpovdatrbutunameznacky.

target- vlastnostobsahujejmnookna,kdebudezobrazenaodpoved'setverll,odpovdatribututargetznacky.

handleEvent(udlost)- metodaumonujevyvolatovladacspecifikovanudlosti. reset-metodazptlsobobnovenpoctecnhostavukomunikacnche1ementilformulre.

submit- metodazpllsobzaslndatz formulrenaserveruvedenv atribuhlactionznacky.

reset- udlostnastanepri kliknutnatlactkoresetveformulrineboprivolnmetodyresetnadformulrem,implicitnreakcje nvratstavukomunika~nchelementdopoctecnhostavu.

submit- udlostnastanepri kliknutnatlactkosubmit veformulrineboprivolnmetodysubmitnadformulrem,implcitnreakcje zaslndatz f~rmLllrenaserver.

VlastnostiobjektuForm

MetodyobjektuForm

IJdlostigenerovanobjektyForm


()lJjektyreset,submit, FileUpload a hiddenjsou formulrovelementyprst4pnjako1I111111latckypridvanprvkypoleelementsformulre.

1lll.lll:KTY RESET, SUBMIT, HIDDEN A FILEUPLOAD

availTop- vlastnosturcujesvislousouradniciprvnhopixelu,kternensoucstnekterhotrvaleviditelnhoobjektu.availWidth- vlastnosturcujehorizontlnrozlienobrazovkyv pixelech,odcelkovhopoctupixeluje odectenavkatrvaleviditelnchobjektu.colordepth- vlastnost,pokudjepouvnapaletabarev,urcujetatovlastnostjejbarevnoubitovouhloubku,jinakje hodnotattovlastnostiodvozenaodhodnotyvlastnostipixelDepth.height- vlastnosturcujevertiklnrozlienobrazovkyv pixelechbezohledunaviditelnobjekty,jakoje tomuuvlastnostiavailHeight.pixeIDepth- vlastnosturcujebarevnoubitovouhloubkuobrazovky.width- vlastnosturcujehorizontlnrozlienobrazovkyv pixelechbezohledunaviditelnobjekty,jakoje tomuuvlastnostiavailWidth


document.jmno_formulre

document.formulr.elements[cseln_vraz]document.formulr.elements[retezcov_vraz]

document.forms[cseln_index]document. forms [retezcov_vraz]

document.formulr.jmno_elementu

jako prvekpoleelements,kterje vlastnostobjektuForm, indexemje bud'csloporadelementuvpoli elementsnebojmnoelementudanatributemNAMEprslunznacky:

jakovlastnostobjektudocument,jmnovlastnostiodpovdatributunameznacky.

jakoprvekpoleforms,kterje vlastnostobjektudocument,indexemprvkuje bud'csloporadv poli formsnebojmnoformulredanatributemnameznacky:

Dostupnostovldacchprvku formulre

jakovlastnostobjektuForm,jmnovlastnostiodpovdatributunameprslunznacky:

68

I,

,lil

'1"11

!,

I

Ilill,

I,

'1'11111

II,

III

,'II

1,'1'"

II'

I,!''!

71

UdlostigenerovanobjektyButton

blur - udlostnastanepri ztrtezameren. cIick - udlostnastanepri kliknutnatlactkonebovolnmetodycIick( ). foeus- udlostnastanepr zsknzameren. mousedown- udlostnastanepri stisknuttlactkamyi. mouseup- udlostnastanepriuvolnentlactkamyi.

111.11':1

I IdlllostigenerovanobjektySelect

Illtlll"ob.iektuText,Textareaa Password

, IUNhwstiobjektuText,Textareaa Password

73

hhll"( ) - metodaodstranzamerenz prslunhoobjektu:fOl:lIs() - metodazamerprslunobjekt.

detaultvalue- vlastnostobsahujepoctecnhodnotuelementu,odpovdatributuva/ueznackynebotextumeziznackamia .form- vlastnostobsahujeodkaznaprslunformulr,vektermseobjektnalzIro/.

IIll1ne- vlastnostobsahujejmnoelementu,odpovdatributunameprslun'IIlHCky.

lype- vlastnostznactypelementu,odpovdatribututypeprslunznacky/rol.vlllue- vlastnosturcujehodnotuzobrazenouv textovrdcenebopoli.

blur - udlostnastv,pokudsevberstaneneaktivnm. change- udlostnastvpri zmenevybranpoloky.

focus- udlostnastv,pokudsevberstaneaktivnm.

blur( ) - metodaodstranzamerenz vberovhopolcka. focus() - metodazamervberovpolcko. handleEvent(udlost)- metodaumonujevyvolatovladacspecifikovanudlosti.

defaultselected- vlastnostobsahujelogickou_hodnotuurcujczdabylapolokaimplicitnevybrnapomocatributuselectedznacky.

index- vlastnostobsahujecselnindexvolbyvevlastnostiOptionsobjektuselect.

length- vlastnostobsahujepocetvolebvevlastnostiOptionsobjektuSelect/roj. selected- vlastnostobsahujelogickouhodnotu,zdajevolbavybrna. text- vlastnostobsahujetextvolby. value- vlastnostobsahujehodnotuvolby,odpovdatributuvalueznacky

/ro/.

MetodyobjektuSelect

VlastnostiobjektuOption

IIhkktytext,textareaa passwordreprezentujvstupnelementyformulretextovrdka,I, 'lilv,! pole a heslo, vytvorenznackami,a .Objektytext, textareaa passwordumonujvkldntextu(textje u''1' Li,) passwordzobrazovnjako radahvezdicek).Odkazy na objektytext, textareaa

I""~\\oni jsouautomatickyukldnydopoleelementsprslunhoformulre.

1111.l1':I(TY TEXT, TEXTAREA A PASSWORD


VlastnostiobjektuRadio

checked_ vlastnostobsahujelogickouhodnotu,zdaje radiotlactkovybrno. defaultChecked_ vlastnostobsahujelogickouhodnotu,zdapouitoatributu

checkedv prslunznacce. form _ vlastnostobsahujeodkaznaformulr,vektermje radiotlactkoumsteno

/ro/.

name_ vlastnostobsahujejmnoradiotlactka,odpovdatributunameznacky.

type_ vlastnostmhodnotu"radio",odpovdatribututypeznacky/1'0/. value_ vlastnostobsahujepopisekradiotlactka,odpovdatributuva/ueznacky

/roj.

OBJEKTY SELECT A OPTlON

Objekty selecta option reprezentujvberovpole a volby ve formulrchv HTMldokumentuvytvorenznackamia .Odkazna objektyselecta option jiautomatickyuloen do pole elementsprslunhoformulre.Objektyoption (jednotlivlvolbyobjektselect)lzetaktvoritdynamickypomockonstruktoruoption:

option(ltextl, hodnotal, defaultSelectedl, selected]]]])

MetodyobjektuRadio

blur() _ metodaodstranujezamerenz radiotlactka. c1ick()_ metodaumonujeprogramovekliknoutnaradiotlacitko. focus() - metodazamerujeradiotlactko. handleEvent(udlost)_ metodaumonujevyvolatovladacspecifikovanudlosti.

UdlostigenerovanobjektyRadio

blur _ udlostnastanepri ztrtezamereni. c1ick_ udlostnastanepri kliknutimynaradiotlacitko. focus_ udlostnastaneph zsknzamereni.

VlastnostiobjektuSelect

form _ vlastnostobsahujeodkaznaformulr,kdeje objektumsten/rol. length_ vlastnostobsahujepocetvolebvevberu,odpovdpoctuznacek

uvnitrznacky/1'0/. name_ vlastnostobsahujejmnovberu,odpovdhodnoteatributunameZlla~1\

.

options_ vlastnostobsahujepoleobjekti'JOption /roj. selectedindex_ vlastnostobsahujeindexvybranpoloky.

type_ vlastnostmhodnotu"select",odpovdatribututypeznacky

OBJEKT LlNK A ANCHOR

Objekty link reprezentujodkazyna jin dokumentyHTML, v dokumentudefinovanznackamia .ObjektyIink jsou dostupnpomocpoleodkazunaobjektylink, kterje vlastnostobjektudocument:

75

name- vlastnostobsahujejmnokotvy,odpovdatributuNAME znacky/1'0/.

text- vlastnostobsahujetextkotvy,odpovdtextuuvnitrznacky/1'0/.x - vlastnostudvvodorovnouvzdlenostkotvyodlevhookrajedokumentu/1'0/.

y - vlastnostudvsvislouvzdlenostkotvyodhornhookrajedokumentu/1'0/.

pomocijmnauvedenhojakohodnotaatributunameznacky.

document.jmno_obrzku

pomociretezcovhonebocselnhoindexuvpoli obrzkuHTML dokumentu_images.

document. images [retezcov_vraz]document.images[cseln_vraz]

bOl'der- vlastnostudvrkuokrajeobrzkuv pixelech,odpovdatributuborderznacky/1'0/.

complete- vlastnostobsahujelogickouhodnotu,zdabyl obrzeknataendodokumentu/ro/

height- vlastnostudvvkuobrzku,odpovdatributuheightznacky/1'0/.

hspace- vlastnostudvvelikostvodorovnhoodsazenodtextu,odpovdatributuhspaceznacky/1'0/.

lowsrc- vlastnostobsahujeadresupredbenhoobrzku,odpovdatributulowsrcznacky.

name- vlastnostobsahujejmnoobrzku,odpovdatributunameznacky/1'0/.


VlastnostiobjektuAnchor

VlastnostiobjektuImage

OBJEKT ANCHOR

Objektyanchor reprezentujikotvy v HTML dokumentuvytvorenznackou nebopomociJavaScriptovmetodystring.anchor(), objektyanchorjsou dostupnjako polokypoledocument.anchors(soucasnei document.links,jsou-Ii zrovenodkazy).Polokypoleanchorslzendexovatcslemneboretezcemobsahujcimjmnokotvy:

document.anchors[cseln_vraz]document.anchors[retezcov_vraz]

OBJEKT IMAGE

Objekty image reprezentujobrzkyumstendo strnkyznackami a jsoudostupnnekolikazpusoby:

objektlink mvechnyvlastnostiobjektulocation.target- vlastnostobsahujejmnooknanebormu,kambudenataendokumentspecifikovanatributemhrefznacky,odpovdatribututargefznacky.text- vlastnostobsahujetextzobrazenjako odkazmeziznackamia.x - vlastnostudvhorizontlnvzdlenostv pixelechodokrajedokumentu/1'0/.y - vlastnostudvvertiklnvzdlenostv pixelechodokrajedokumentu/1'0/.


blur - udlostnastane,je-li pozornostprenesenanajin objekt. change- udlostnastanepri zmeneobsahu(pouzeText aTextarea). tocus- udlostnastane,je-li pozornostprenesenanatentoobjekt. keydown-udlost nastanepri stiskuklvesy(pouzeTextarea). keypress-udlostnastanepri stisknutiklvesy(pouzeTextarea). keyup- udlostnastanepriuvolneniklvesy(pouzeTextarea). select- udlostnastane,je-li vybrnanektercsttextuuvnitrelementu(pouze

Text aTextarea).

document.links[cseln_vraz]

handleEvent(udlost)- metodaumonujevyvolatovladacspecifikovanudlosti. select() - metodavyberecelobsahtextovrdkynebopole.

indexemje poradovcsloodkazuv dokumentu

handleEvent(udlost)- metodaumonujevyvolatovladacspecifikovanudlosti.

c1ick- udlostnastanepri kliknutnaodkaz. dblclick- udlostnastanepri dvojitmkliknutnaodkaz. keydown-udlostnastanepri stiskuklvesy. keypress- udlostnastnanepristisknutklvesy. keyup- udlostnastanepri uvolnenklvesy. mousedown- udlostnastanepristisknuttlactkamyi. mouseover- udlostnastane,kdysekurzormyinachznadodkazem. mouseout- udlostnastane,kdyje kurzormyipresunutz odkazu. mouseup-udlostnastanepri uvolnentlactkamyi.

UdlostigenerovanobjektyText,Textareaa Password

UdlostigenerovanobjektyLink

VlastnostiobjektuLink

MetodyobjektuLink

74

OBJEKT STYLE

ObjektImageje monovytvorittakvolnmkonstruktoruImage,jehoparametryjsourozmeryobrzku:

ObjektystylereprezentujstylzobrazenprvkHTML zapisovanpomocJavaScriptovsyntaxejako hierarchieobjekrustyle,namstospecilnsyntaxekaskdovchstylll (viz kap.CSS).Objektystylejsou dostupnjakoprvkypol c1asses,ids atagsobjektudocument:

77

text

"pink""18pt"

"pink""18pt"

align- vlastnostobsahujeretezcovouhodnotupopisujczarovnnprvku(lefi,right,none).backgroundColor- vlastnostobsahujeretezecovouhodnotupodkladovbarvyprvku.backgroundlmage- vlastnostobsahujeURL obrzkupouithojakopozadprvku.borderBottomWidth- vlastnostobsahujerkuspodnhookrajeprvku.borderColor - vlastnostobsahujeretezcovouhodnotubarvyokrajeprvku.borderLeftWidth- vlastnostobsahujerkulevhookrajeprvku.borderRightWidth- vlastnostobsahujerkupravhookrajeprvku.borderStyle- vlastnostobsahujeretezcovouhodnotupopisujcstylokrajeprvku(double,groove,inset,none,outset,ridge,solid).borderTopWidth- vlastnostobsahujerkuhornhookrajeprvku.c1ear- vlastnostobsahujeretezcovouhodnotupopisujcstylobtknprvku(left,right,both,none).color- vlastnostobsahujeretezcovouhodnotubarvytextuprvku.

Ruov text odstavceVelk ruov

odstavce

document.classes.Ruzova.P.colordocument.ids.Specialni.fontSize

Ruov text odstavceVelk ruov text

odstavce

toto je text odstavce

obsahsouborudefinice.css:document.classes.Ruzova.P.colordocument.ids.Specialni.fontSize

VlastnostiobjektuStyle

Definice styl nemusbt, stejnejako zdrojov text JavaScriptu,uloena vjednomsouborusHTML dokumentem:

ObjektyStylejsouprstupntakpomocpol objektllStyle,kterjsou obsahemvlastnostc1assesa ids objektudocument.Styly zobrazennastavenpomocdocument.c1assesjsoupakpouityv HTML znackchhodnotoujejich atributuCLASS je jmno prsluntrdystylu,styly nastavenpomocdocumenUdspak tvor vjimky z techtotrd stylu (HTMLprvkys atributemID):


new Image(lOO, 100)"obrazek. jpg"

var ObrazekObrazek.src

handleEvent(udlost)- metodaumonujevyvolatovladacspecifikovanudlosti.


src_ vlastnostobsahujeadresuobrzku,prirazenmnovadresydottovlastnostidoclmezmenyobrzku,vlastnostodpovdatributusrcznacky.

vspace- vlastnostudvsvislodsazenodtextu,odpovdatributuvspacenacky lro/.

width- vlastnostudvrkuobrzku,odpovdatributuwidthznackylro/.

MetodyobjektuImage

document.tags.Hl.color = "red"

UdlostigenerovanobjektyImage

document.tags.p.fontSize = "18pt"document.tags.p.backgroundColor = "#COCOCO"document.tags.p.borderStyle = "outset"document.tags.p.borderwidths(50,50,50,50)

abort- udlostnastanepripreruennatahovngrafickhosouboru. error - udlostnastanepri chybenatahovngrafickhosouboru.

keydown- udlostnastanepri stiskuklvesy. keypress- udlostnastnanepristisknutklvesy. keyup- udlostnastanepriuvolnenklvesy. load- udlostnastanepri dokoncennatahovngrafickhosouboru.

Jakkoli znackaHTML tvor v takovmzaplsuobjektstyle,jeho vlastnostiobsahujhodnotypopisujcstylzobrazenprslunznacky.JavaScriptovzpisdefinicekaskdovchstyllije monvloitkromeznackyi doznacky:

Takovobrzeknensicemonzobrazitnastrncea nelzesnmprovdetdnoperace,ale vytvorenmobjektu Image je umstenpatricngrafick soubor do cachepametiprohlecea pokudje pak tentobrzekzobrazovnpomocznacky v HTMLdokumentu,nentrebagraficksouborprenetznovuposti.

76

1\,1111

OBJEKT LAYER

VlastnostiobjektuLayer

document.jmno_vrstvy

79

borderWidths(nahore,vpravo,dole,vlevo)- metodanastavrkuokrajuprvkunaspecifikovanhodnoty,metodanastavujehodnotyvlastnostborderTopWidth,borderRightWidth,borderBottomWidtha borderLeftWidthobjektuStyle.margins(nahore,vpravo,dole,vlevo)- metodanastavrkumezerkolemprvkunaspecifikovanhodnoty,metodanastavujehodnotyvlastnostmarginTop,borderRight,borderBottomaborderLettobjektuStyle.

paddings(nahore,vpravo,dole,vlevo)- metodanastavrkumstameziokrajemprvkuajehoobsahemnaspecifikovanhodnoty,metodanastavujehodnotyvlastnostpaddingTop,paddingRight,paddingBottomapaddingLettobjektuStyle.

above- vlastnostobsahujeodkaznaobjektLayer lecnadprslunouvrstvou/1'0/.

background- vlastnostobsahujeodkaznaobjektImagereprezentujcobrzekpodkladuvrstvy.

below- vlastnostobsahujeodkaznaobjektLayer lecpodprslunouvrstvou/ro/.

bgColor - vlastnostobsahujeretezecpopisujcbarvupodkladuvrstvy.

MetodyobjektuStyle


jakovlastnostobjektudocument,pojmenovanhodnotouatributuID prslunHTML znacky:

jakoprvkypoledocument.layers,cselnm(poradovcslovrstvy)neboretezcovm(hodnotaatributuID prslunHTML znacky)indexem:

document.layerS[Poradov_Cslo_vrstvy]document .layers ["jmno_ vrstvy"]

Objektylayer reprezentujvrstvyv HTML dokumentuvytvorenznackaminebo::;layer>.Objektylayer tvor vlastnhierarchiiobjektu.Kad objektlayer obsahujesvujvlastnobjektdocument,ktermvechnysvobvyklvlastnostia metody,vcetnevlastnosti11Iyers,kterobsahujeodkazynavrstvy- potomkyttovrstvy.

Objektlayer lzevytvorittakdynamickypomocJavaScriptuvolnmkonstruktorulayer,jehoprvnmparametremje rkanovvrstvya druhm,nepovinnmparametremje odkaz11

MetodyobjektuLayer

captureEvents(typ_udlosti)- metodanastavvrstvuabyzachytvalaspecifikovanudlosti.

handleEvent(typ_udlosti)- metodavyvolspecifikovanouudlost. load(zdroj_vrstvy,rka_vrstvy)- metodanahrajezdroj_vrstvya nastavnovou

rku_vrstvy.

OBJEKTAREA

81

blur - udlostnastane,je-li pozornostprenesenaz vrstvyjinam.focus- udlostnastane,je-Ii pozornostprenesenanavrstvu.

load- udlostnastanepri dokoncennatahovnobsahuvrstvy.mouseover- udlostnastane,kdysekurzormyinachznadvrstvou.mouseout- udlostnastane,kdyje kurzormyipresunutz vrstvy.

dblclick - udlostnastanepri dvojitmkliknuti nacitlivouoblast.mouseover- udlostnastanepri presunukurzorumyinadcitlivouoblast.mouseout- udlostnastanepri oputencitlivoblastkurzoremmyi.

moveAbove(vrstva)- metodapremstprslunouvrstvunadspecifikovanouvrstvu.

moveBelow(vrstva)- metodapremstprslunouvrstvupodspecifikovanouvrstvu.

moveBy(xyixelu, yyixelu) - metodapresunevrstvuo xyixelu vodorovneayyixelu svisle.

moveTo(xyixehl, yyixelu) - metodapresunelevhornrohvrstvynasouradnicexyixelu vodorovneayyixelu svislevrstvy,v n seprslunvrstvanachz.

moveToAbsolute(xyixelu, yyixelu) - metodapresunelevhornrohvrstvynasouradnicexyixelu vodorovneayyixelu svisledokumentu,v nemseprslunvrstvanachz.

releaseEvents(typ_udlosti)- metodanastavvrstvutak,abyspecifikovanudlostipredvalakezpracovndalmobjektumv objektovhierarchii.

resizeBy(rka,vka)- metodaposunepravdolnroho rkapixeludolevaavkapixelunahoru.

resizeTo(rka,vka)- metodapresunepravdolnrohtak,abyvrstvamelarozmeryrka,vka.

routeEvent(typ_udlosti)- metodapredzachycenouudlostdalmuobjektuv objektovhierarchiizpracovvnudlost.

UdlostigenerovanobjektyLayer

Kompletnreferencnprntckapro tvorbuwebua WAPu

Objektyarea reprezentujoblasticitliv na kliknut ci prejezdmyi, tvorenv HTMLdokumentuznackami a .Pro kadoucitlivou oblastvytvorenouznackouarea>je automatickyvytvorenobjektArea dostupnpomocpole document.links,kter

obsahujeodkazynavechnyobjektylink v dokumentu.

Vlastnostia metodyobjektuArea

Objektyareamajvechnyvlastnostiametodyshodns objektylinko

UdlostigenerovanobjektyArea

c1ip.bottom- vlastnostobsahujesouradnicispodnhookrajeviditelnplochyprslunvrstvy.clip.height- vlastnostobsahujevkuviditelnplochyprslunvrstvy.clip.left- vlastnostobsahujesouradnicilevhookrajeviditelnplochyprslunvrstvy.clip.right- vlastnostobsahujesouradnicipravhookrajeviditelnplochyprslunvrstvy.clip.top- vlastnostobsahujesouradnicihomhookrajeviditelnplochyprslunvrstvy.c1ip.width- vlastnostobsahujerkuviditelnplochyprslunvrstvy.document- vlastnostobsahujeodkaznaobjektdocument,kterje obsahemprslunvrstvy/ro/.left- vlastnostobsahujesouradnicilevhookrajevrstvyvucivrstve,vekterjeprslunvrstvaumstena.name- vlastnostobsahujejmnovrstvy,odpovdatributuID znacky/1'0/.

pageX- vlastnostobsahujevodorovnousouradnicilevhohornhorohuvrstvyvucidokumentu.

pageY- vlastnostobsahujesvislousouradnicilevhohornhorohuvrstvyvllCidokumentu.

parentLayer- vlastnostobsahujeodkaznaobjektLayer nebowindow,vektermje prslunvrstvaumstena/ro/.siblingAbove- vlastnostobsahujeodkaznaobjektLayer lecnadprslunouvrstvou,kterlevestejnvrstvejakoprslunvrstva/ro/.siblingBelow- vlastnostobsahujeodkaznaobjektlecpodprslunouvrstvouakterlevestejnvrstvejakoprslunvrstva/ro/.src - vlastnostobsahujeURL zdrojevrstvy,odpovdatributuSRC znacky.top- vlastnostobsahujesouradnicihornhookrajevrstvyvucivrstve,vekterjeprslunvrstvaumstena.visibility- vlastnostobsahujeretezecshow,hideneboinheriturcujczdajevrstvaviditeln,neviditelnnebodedviditelnostodvrstvy,vekterje umstena.window- vlastnostobsahujeodkaznaobjektwindow,kterprslunouvrstvuobsahuje/ro/.x - vlastnostobsahujevodorovnoupozici levhohornhorohuvrstvyvucivrstve,vekterje prslunvrstvaumstena.y - vlastnostobsahujesvisloupozici levhohornhorohuvrstvyvllcivrstve,vekterje prslunvrstvaumstena.zlndex- vlastnostobsahujecselnvyjdrenpoziceprslunvrstvynadvrstvami,kterlepodn.

JazykyXHTML, DHTML, CSSa WML80----

VESTAVEN OBJEKTY JAVA SCRIPTU

Nekter vlastnostia funkce JavaScriptunejsou vzny k dnmuobjektu a jsou

implementovnyprmodo jdrajazyka JavaScript.V ttopublikacizmnmpouzeobjektDate.

OBJEKT REGEXP

ObjektyRegExp reprezentujregulrnvrazy- vzory,slouc k prohledvnretezcLlnektermimetodamiJavaScriptu(napr String.match).Objekt RegExp obsahujeprvetakovregulrnvraza dleobsahujevlastnostia metodydleitke hledna nahrazovnretezcupodlevzoruregulrnhovrazu.

Teorieregulrnchvrazua popisemvytvrena pouvnobjektuRegExp sez duvoduomezenhorozsahuttopublikacetaknezabvm.

OBJEKTY JAVA, JAV AARRA Y, JAV ACLASS, JAV AOBJECT, JAV APACKAGE,NETSCAPE, PACKAGES A SUN

Objektyjava, JavaArray, JavaClass, JavaObject, JavaPackage,netscape,packagesasun slou ke spoluprciprogramuJavaScriptu s trdami jazyka Java uloenmi vestejnojmennchbalccch(Javapackages).

Popisemspoluprcejazyk JavaScripta Java (LiveConnect)se z dvoduomezenhorozsahuttopublikacenezabvm.

83

MetodyobjektuDatepracujzpravidlasvyjdrenmmstnhocasu,vetinametodmvak svou variantu (uvedenouna konci tohoto seznamu),kter pracuje scasemuniverzlnm(UTC neboliGMT).

Date() - konstruktorvytvrobjekt,kterreprezentujeaktulndatuma casvznikuobjektu:

Date(cseln_vraz)- konstruktorvytvorobjektreprezentujccasv milisekundchuplynulchodpoctku.

Date(rok,mesc,den[,hodina[,minuta[,sekunda[:milisekunda]]JD- konstruktorvytvorobjektreprezentujccaszadanpomocparametru.Parametryjsou cselnhodnoty.Pokudnejsouuvedenynepovinnparametry,nahradseO.

Date("mescden,rok [hodina[:minuta[:sekunda[:milisekundallJJ[GMTJ")-konstruktorvytvorobjekt,kterreprezentujedatuma casuvedenjakoparametrkonstrnktoruv naznacenmformtu.Mescmusbtvyjdrenjednoznacnmanglickmnzvem,denjevyjdrencslemz intervalu1a31,rok smbtvyjdrenplnenebosvynechnmstolet(nedoporucujese).Hodiny,minutya sekundyjsounepovinn.PokudnenuvedenoGMT, predpokldsemstncas.Pokudparametrneodpovdnaznacenmuformtu,vznikneobjektreprezentujcdatumpoctku:

MetodyobjektuDate

parse("mescden,rok[hodina[:minuta[:sekunda[:milisekundaJllJ[GMTJ")-metodavracpocetmilisekunduplynulchodpoctkudodatauvedenhojakoparametrmetody,pokudje uvedenoGMT, nelisehodnotyvracentoutometodouodhodnotvracenchmetodouUTC.

UTC(rok, mesc,den[,hodina[,minuta[,sekunda[:milisekundaJJD- metodavracpocetmilisekunduplynulchodpoctku,ktersevdychpejakogreenwichskcas.

getDate()- metodavracporadovcslodnev mesciv intervalu1a31. getDay()- metodavracporadovcslodnev tdnuv intervaluO (nedele)a6. getFullYear() - metodavracctyrmstnporadovcsloroku(doporuceno). getHours() - metodavracporadovcslohodinyvedniv intervaluO a23. getMiIliseconds()- metodavracporadovcslomilisekundy. getMnutes()- metodavracporadovcslominutyv hodinev intervaluO a59. getMonth() - metodavracporadovcslomescev rocev intervaluO (leden)a

11:

Tyto metodynejsousoucstdnhokonkrtnhoobjektudate,jsou protovolnypomocidentifiktorudate:

Specilnmetody

Objekt date,vestavendo JavaScriptu,reprezentujecasovokamik.Hodnotacasujevobjektechdate uloenajako pocet milisekundod poctku, stanovenhona 1.1.1970greenwichskhocasu(GMT - GreenwichMeridian Time), nekdy znacenhojako UTCvyjdrencasu.Konstruktoruobjektudatelzeutvcezpiisoby:

OBJEKTDATE

Kompletnreferencnprruckapro tvorbuwebua WAPuJazykyXHTML, DHTML, CSSa WML

OBJEKT APPLET

Objekty applet jsou zvltnobjekty,protoeimplicitnenemaj dnvlastnostianimetody,objektyappletsloupro spoluprciJavaScriptus appletynapsanvjazyceJava aobjektyapplettakdedvechnyverejnvlastnostia metodyprslunhoJava appletu,kterv objektovmmodeluprohlecereprezentuj.Objekty applet jsou dostupnpresodkazyuloenv poli ve vlastnostidocument.applets,poloky pole lze indexovatcselneneboretezcovmindexemvyjadrujcmjmnoobjektu(atributNAME):

document.applets[cseln_vraz]document.applets[retezcov_vraz]

OBJEKT FRAME

ObjektyFrame reprezentujrmyumstenv okneprohlecevytvorenHTML znackamia . Rmy oknaprohlecejsou vakz pohleduobjektovhomodelu

prohlecezrovenobjektywindow.ObjektyFrame (window)jsou dostupnpomocpoleframes,kterje vlastnostkadhoobjektuwindow, objektyjsou dostupnprescselniretezcovindexvyjadrujcjmnoobjektu(atributname):

window. frames [cseln_vraz]window.frames[retezcov_vraz]

82

IIIIJI1

27. CSS (CASCADINGSTYLE SHEETS)

KaskdovstylyCSS predstavujpomernejednoduchmechanizmus,umonujcautorumwebovchstrnekpripojitk XHTML dokumentumdoplnujcinformaci,tkajc se napr.pokrocilhoformtovnstrnkyci presnhoumstenobjekt(umonujtotizadvatx, ysouradnicepropozicina strnce).Ve srovnns XHTML elementya atributynabzejtedyCSS tvurcihnstrnekpodstatneirmonostidesignovni.Stylydledovolujklstnasebevrstvy textu i obrzk zadnmtret souradnicea umonuj pripravit dokumentproautomatickzobrazennaruznchtypechzarzen(monitor,tiskrna,mobilntelefon).HlavnimylenkouCSSje aleoddelenvzhledudokumentuodjehoobsahua takdokumentzobrazilv podstatekdekoliv,nejennatradicnmmonitorupoctace.

Jazyk kaskdovchstylu je dobre srozmnitelni vzhledemk podobntechnologiipouvanv desktoppubJishingu(DTP).

Poznmka:velkmnostvprkladuk tomutotmatunajdetenawww.pjjcu.czlpepelprikladyIDHTML_CSS.

85

width:500px;height:50px">

VARIANTYPOUIT cssVXHTML DOKUMENTU

DEFINICE STYLU UVNITR XHTML ELEMENTU (tzv.in-linestyly)

- atributSTYLE vetinyXHTML elementu

Prklady:

meloun

Poznmka:tutoinsledujcvariantuzatmbohuelnepodporujeMS InternetExplorer

Automaticknastavenstylupodlevstupnhozarzentzv.atrulespravidlem@media

\""!,il

III

86JazykyXHTML, DHTML, CSSa WML

nadpisodstaveca v nem

cerven modrcervenbl.

odkaz bez podtren

DEFINICE STYLU V JINM SOUBORU(tzv.propojenstyly)

HREF="urladresasouboru"TARGET="clovokno"REL ="stylesheet" ."vztahzdrojovhodokumentuk clovmuREV="prev" ...vztahclovhodokumentukezdrojovmuTYPE ="typobsahuMIME (napr.text/css)"MEDlA="druhvstupnhozarzen- all,screen,print,tv,projektion,handheld"TITLE="texttitulkuvmenuprohlece"...jenprotzv.alternativnstyly(vizdle)

Prklad:

Poznmka:v souborustyly.cssje pouzedefiniceCSSbezjakchkolivXHTML element~{.Vhodoutohotozp~{sobupnpojenstylu(a takpomocvlastnosti@import,vizdle)jekromefyzickhooddelenobsahudokumentllodjehoformtovnpredevmto,e se*css souboruklddo loklncache,nenho tedynutnznovustahovatzeserveruastrnkyse zobrazujrychleji.Jakkolivpravadesignuwebuje takproveditelnnajednommstea nikolivnakadstrncezvlt',jako uvariant1a 2.

Definiceproautomaticknastavenstylupodlevstupnhozarzenatributemmedia


Alternativnuivatelskstyly(menuZobrazit/StylvprohlecchFirefoxaOpera)

Prklad:

...parametraJternatestylesheetalevubecnepodporujeMSIE,

nesmbttakpouitatributmedia,jinaknefungujenikde

Vlastnikonawebuvadresnmrdkuprohlece

... obrzekfavicon.ico:16xl6px

KOMBINACE PREDCHOZCH2VARIANT (tzv.importovanstyly- vizCSS2)

Prklad:

Prklad:

88 JazykyXHTML, DHTML, CSSa WML Kompletnreferencnprruckapro tvorbuwebua WAPu 89

@media ty, projektion {body {background:lightblue}}

,.. zmen predchoz definici pri zobrazen napr.na tv (nefunguje v MSIE, viz CSS2)

-->

.odkaz {text-decoration: none;font-style : italic;color: it990066

}

.stin {color: darkgreen;margin-top: 50px;font-weight: bold;

font-size: 100px

27.2 KOMENTRE VCSS

1* text vcerdkovhokomentre *1

II jednordkovkomentr .

.abc {color: lightgreen;

margin-top: -110px;font-weight: bold;font-size: 110px

Prklad:

Ukzka tvorby a pouit trd v CSS ..

.de {color: it999999;

margin-top: -105px;font-size: 110px;line-height: 90px

}-->

odkaz

abc abe d e

Identifiktory maj podobn vlastnosti jako trdy, tak doplnuj nebo men vlastnosti

definovanch elementu.Jejich hlavn uit je ovem v jejich spojen s dynamickmi prvkyXHTML. Jeho podstatou je tedy jednoznacne definovat element,tzv. jej identifikovat,proto se identifiktory pouvaj obvykle pouze pro jeden urcit element v XHTML

dokumentu.Syntaxe identifiktoru je obdobn jako litrd, avak msto tecky predjmnem

7.4 IDENTIFIKTORY (ID)

... trda pouiteln u libovolnhoelementu(tzv. generick trda)

.odpoved {color: green;font-weght: light}

POUIT V HTML DOKUMENTU:

p.otazka {color: red;font-style: i talic} ... trda pro konkrtn elementp

(tzv. regulrn trda)

27.3 TRD Y V CSS

1III11

27.5PSEUDOTRDYA PSEUDOELEMENTY

je pouita zahrdka (#identifiktor {specifikace J). Voln v XHTMLdokumentuprobh pomoc atributuID tag id=" identifiktor"

Bunka s identifiktorem special

91

... definice v 1.rovni seznamu

Prklad:

a.big:visited {color:#982306; font-family: arial;font-size:14pt}

a.small:visited {color:#982306; font-family: arial;font-size:7pt}

a:hover.big {color:#552306; font-family: arial;font-size:14pt}

II Tento zpis by mel pro samostatn odkaz (bez trd), nakter najedete kurzorem, nastavit popsan vlastnosti

(melo by dojt k ignoraci csti definice "big'), protoekontext je nastaven pro samostatn element a a ne'a.big" .


27.6VCENSOBNSELEKTORY (deklaracepro vceelementusoucasne)Prklad:

III1II11

92 JazykyXHTML, DHTML, CSSa WMLKompletnreferencnprruckapro tvorbuwebua WAPu 93

01 01 li {list -style: upper-alpha} ...definiceve2.rovniseznamu-->

p {font-family: helvetica; text-align:justify}.times {font-family: times}

p.times {font-family: times}#blue {color:#OOOOff}

p#red {color:#ffOOOO; font-family: helvetica}p:first-letter {font-size:120%}

cm centimetry,lcm =O,Olm

mm

milimetry,lmm=O,lcm

in

palce,lin =2,54cm=72pt=6pc

pt

body,lpt = lI72in=1/12pc

pc

pica,lpc =12pt

Mnohoparametrunastavovanchv kaskdovchstylechjsouhodnotyudvajcmrucivzdlenost.Tyto hodnotyse zapisujjako cel ci desetinncsla (!desetinnmistaseoddelujteckou!)a mohoubtbudtokladnci zpornhodnoty.Ihnedza vlastncslicpak nsledujjednotky,ve kterchje hodnotazadna(mezera mezi temito daji jechybou!). Tyto jednotkyjsou vyjdrenydvoupsmennmizkratkami.Pokud je csliceuvedenabez jednotek,je povaovnaza hodnotuudvanouv pixelech(proto dochzk chybmpri existencimezerymezi cslic a jednotkou).Pouvanjednotkyse del naabsolutna relativn.

Absolutn jednotkyjsou takov,jejichhodnotaje presnedefinovnaaje odvoditelnod zkladnchjednotektabulkySI, presnejirecenood jednotky dlky - metru.Tytojednotkyjsou uvedenyv nsledujctabulce.Do ttoskupinybv nekdyzarazovnipixel. Pixel je vakbezrozmernajeho aktulnfyzickvelikostje zvislna nastavenparametruzobrazenmonitoru,popr.i tiskunatiskrne.

Text psan psmem Helvetica, zarovnan do blokus implicitn barvou a velikost psma. Prvn psmeno bymelo bt zveten o 20%.Text psan psmem Times New Roman,zarovnan do bloku s implicitn barvou a velikostpsma.Text psan psmem Helvetica,zarovnan do bloku s cervenou barvou a implicitnvelikost psma.Text psan psmem Times NewRoman, zarovnan do bloku s modrou barvou a implicitnvelikost psma. Dochz k ignoraci atributu CLASS.Text psan psmem Helvetica, zarovnan dobloku s modrou barvou a implicitn velikost psma. Prvnpsmeno by melo bt zveten o 20%.

27.9DLKOV JEDNOTKY

...cslovnvelkmirmskmicsly(upper-roman)

seznamat1as

port1y .., cslovnvelkmirmskmicsly

seznam ...cslovnvelkmipsmeny(upper-alpha)atlas

vyhledavace

27.8KASKDOVPORAD

V podstateplat pravidlo,e naposledydefinovanvlastnostimaj nejvyprioritu.Pokudjde o technologiivkldnstylu,pakplat,enejniprioritumajpropojenstyly(tedy styly definovanv externmsouboru).Pak nsledujglobln styly listu - stylydefinovanv hlavicceXHTML, nejvyprioritumajpakin-line styly(stylydefinovanv konkrtnmelementu).

Pokudjde o priorituelementu,nejvetprioritum identifiktor(id).Za nmnsledujetrda(class),dlepak pseudotrda(resp.pseudoprvek)a nejniprioritumaj definicezkladnchelementuXHTML. Avak urcenpriorityu elementuCSS nenvubecsnadnzleitostapri pohleduz jinhohlumuemedefinovatpriorityodline.Protonynuvedunekolik prkladu, aby bylo snzepochopiteln,jak se jednotliv prvky v ruznchkombinacchchovaj.

III1I1I1

II

111~illilllII

27.10PROCENTA

27.11DEFINICE BAREV V CSSVLASTNOST "BACKGROUND-COLOR"

95

take bude

Tatovlastnostnastavujebarvu.

Lzeji aplikovatnavechnyelementy.Vlastnostje dedicn.

Hodnotouje barvavjednomzedrveuvedenchformtu.Implicitnhodnotaje zvislnatypuanastavenprohlece.

Tatovlastnostnastavujebarvupozad.Lzeji aplikovatnavechnyelementy.Vlastnostnendedicn.

Hodnotouje barvavjednomzedrveuvedenchformtu,ci hodnota"transparent",coznamen,eelementnemdnviditelnpozad.Implicitnhodnota:"transparent".

VLASTNOSTIBAREV A POZAD

VLASTNOST "COLOR"

Prklad:

p (color: blue)div (color: #fOO)

div.hel (font-family: helvetica)

II barva je dedi6n, take tiida "div.hel" piebir barvuod "div"

Prklad - rgbhodnoty:

p.blue (color: #OOf; font-family: helvetica;text-align:justify)

p.yellow (color: #ffffOO; font-family: helvetica;text-align:justify)

p (color: rgb(O, O, O); font-family: helvetica;text-align:justify)

p.red (color: rgb(IOO%, 0%, 0%); font-family: helvetica)


Prklad:

P (background-color: blue)div (background-color: #fOO)div.hel (font-family: helvetica)

II tiida "div.hel" nededi barvu pozadi,impliCitne bez nej

28. PREHLED VLASTNOST CSSl

28.1

px pixel,1pixel=1bodobrazovky

em

vztanjednotka,odpovdrce"m"

en

vztanjednotka,odpovdrce"n"

ex

vztanjednotkaodpovdvce"x"

#rgb tri csliceHexsoustavy(#fOO- cerven)

#rrggbb

estcslicHexsoustavy(#OOOOff- modr)

rgb(r, g, b)

r, g,b- cslaDecsoustavyO- 255

rgb(r%, g%, b%)

r, g, b- procentulnvyjdrenbarevO- 100


Relativn jednotkyjsou takov,jejich hodnotanenpresnedefinovnaa zvis nanastavenjnchparametriLSeznamrelativnchjednotekje uvedenv nsledujctabulce.

Prklad:

hl (font-size: +120%; font-weight: bold)p.small (font-size: -20%; font-weight: lighter)

Prklad- nzevbarvy:p (color: blue; font-family: helvetica;

text-align:justify)

Takjakov klasickm(X)HTML mohoubti v kaskdovchstylechdlkovhodnoty(adokonce i barvy) specifikovnypomoc procent.Jejich velkou vhodou a zrovennevhodouje, e pevnenenastavujekonecnhodnoty,ale pouzeupravujeimplicitncidrve nastavenhodnoty.Nastavme-litedy velikostpsma napr. na 120%,bude seklientovintextzobrazovato 20%vetmpsmemnemnastavenov prohleci.Ve svpodstatejsouprocentapouzedalrelativnjednotkou.To tedyv prpadeprocentznamen,e dle vztanhodnoty(implicitnnastavenci predchozhodnota)dojde k odvozenabsolutnhodnoty.Taku procentmuemepredcselnouhodnotupredsaditznamnko[+/- ]. Implicitnje plus.Za cselnouhodnotupotomdosadmeznak "%". Pozor,ani meziznamnkema cslic a ani mezicslic a znakemprocentnesmbt mezery.V prpademezerypred znakemprocentby toti prohlecpriradil cslici implicitnjednotkyaprocentaby ignoroval.

94

96 JazykyXHTML, DHTML. CSSa WML

VLASTNOST "BACKGROUND-IMAGE"

Tatovlastnostvklddopozadelementugraficksoubor. Lzeji aplikovatnavechnyelementy. Vlastnostnendedicn.

Hodnotouje URL cestak souboruci "none"tedybezobrzku. Implicitnhodnota:"none".

Prklad:

p (background-image: url (nzev souboru)}div (background-image: url( ../images/l.jpg)}div.hel (font-family: helvetica)//tfida "div.hel" nededi tuto vlastnost, take pozadi

bude implicitne bez nej

VLASTNOST "BACKGROUND-REPEAT"

Tatovlastnosturcujezpusobopakovanhovkldnobrzkudopozad Lzeji aplikovatnavechnyelementy.M vaksmysldefinovatji pouzeu ele-

mentu,ukterchje nastavenavlastnost"background-image"jinak nena"none".

Vlastnostnendedicn.

Hodnoty:"repeat"(opakujesepoobouosch)I "repeat-x"(opakujesepouzevodorovne)I "repeat-y"(opakujesepouzesvisle)I "no-repeat"(nedochzk opakovanmuvkldn).

Implicitnhodnota:"repeat".

Prklad:

p {background-image: url(http://www.jpg.cz/jpg/l.jpg};background-repeat: repeat-x)

div {background-image: url( .. /l.jpg); background-repeat:no-repeat}

VLASTNOST "BACKGROUND-ATTACHMENT"

Vlastnosturcuje,zdadochzk pohybupozadselementemnebozdajepozadfixovnoapohybujesepouzeelementpopozad.

Lzeji aplikovatnavechnyelementy.M vaksmysldefinovatji pouzeuele-mentu,u kterchje nastavenavlastnost"background-image"jinaknena"none".

Vlastnostnendedicn.

Hodnoty:"scroll"(pozadsepohybujespolecneselementem)I "fixed"(pozadje fixovnoa elementsepohybujeponem).

Implicitnhodnota:"scroU"


Prklad:

p (background-image: url(http://www.jpg.cZ/jpg/l.jpg);background-attachment: fixed)

div (background-image: url( ../l.jpg); background-attachment: scroll)

VLASTNOST "BACKGROUND-POSITION"

Vlastnosturcujevchozpoziciprovkldnobrzkudopozad(udvseX aYpozice)

Lzeji aplikovatnablokovanahrazovanelementy.M vaksmysldefinovatji pouzeuelementu,u kterchje nastavenavlastnost"background-image"jinak nena"none".

Vlastnostnendedicn.

Hodnoty:dlkovjednotky(X Y) I procenta(vztahujsek velikostivlastnhoelementu)IproX pozici "lefi","center","right"IproY pozici "top","center","bot/om"

Implicitnhodnota:"0%0%"tedy"lefitop"

Prklad:

td {background-image: Url(http://www.jpg.cz/jpg/l.jpg);background-attachment: fixed; background-position: OIDO}

th (background-image: url( .. /l.jpg);background-attachment: fixed;

background-position: center bottom}

VLASTNOST "BACKGROUND"

Parametrprokomplexnnastavenvlastnostpozad.Vlastnostinastavujemev poradbackground-color,background-image,background-repeat,background-attachment,background-position(poradnenpovinnakterkolipolokamuebti vyputena)

Lze aplikovatnavechnyelementy. Vlastnostnendedicn.

Hodnotypronastavenkadvlastnostijsou totonshodnotamidanvlastnostsamostatnedefinovan.

Prklad:

p {background: red url( ../l.jpg) no-repeat fixed 50% 50%}

97

VLASTNOST "FONT-SlZE"

VLASTNOST "FONT -WEIGHT"

Prklad:

div (color: #000; font-family: serif;font-variant: small-caps)

p {color: #000; font-variant: normal;font-family: arial, sans-serif}

99

Vlastnostnastavujevelikostpsma.Lze aplikovatnavechnyelementy.Vlastnostje dedicn.

Hodnoty:"xx-smaU"I "x-smal!"I "smal!"I "medium"I "large"I "x-large"I 'x;;-large" I "larger"(vetne rodicovskpsmo)I "smaller"(menne rodi-covskpsmo) I procentulnhodnota,vztahujcse k rodicovskvelikosti(popr. k nastavenprohlece) I cseln hodnotasjednotkami (implicitnjednotkapixel)

Implicitnhodnota:"medium"resp.puvodnrodicovskhodnotaci implicitnhodnotaprohlece.

Vlastnostnastavujetzv.duktus(tlout'ku)psma.Lze aplikovatnavechnyelementy.Vlastnostje dedicn.

Hodnoty:"normal"I "bold"I "bolder"(irnerodicovskpsmo)I "lighter"(u ne rodicovskpsmo)I "100"I "200"I "300"I "400"I "500"I "600"I"700"I "800"I "900"Implicitnhodnota:"normal"="400"

VLASTNOST "FONT -VARIANT"

Vlastnostnastavujevariantupsma(normlneci kapitlky). Lze aplikovatnavechnyelementy. Vlastnostje dedicn.

Hodnoty:"normal"I "small-caps"(psmoje psankapitlkami- malpsmenajsou zapsnajako zmenenvelkpsmena,nekdynemusbtzmenen)

Implicitnhodnota:"normal"

Prklad:

div {color: #000; font-family: serif;font-variant: small-caps;font-size: SOpx}

P {color: #000; font-variant: normal;font-size: xx-large;font-family: arial, sans-serif}


serif klasickpatkovpsmo(pr.TimesNew Roman)

sans-serif

bezpatkovpsmo(pr.Arial, Helvetica)

cursive

kurzvnpsmo(pr.Zapf-Chancery)

fantasy

ozdobnpsmo(pr.Western)

monospace

neproporcionlnpsmo(pr.Courier)

Implicitnhodnotaje dnaprednastavenmprohlece.


Vlastnostnastavujestylpsma(normlne,kurzvuci sklonen). Lze aplikovatnavechnyelementy. Vlastnostje dedicn. Hodnoty:"normal"I "italic"(psmoje psnokurzvou)I "oblique"(psmoje

sklonen,unekterchpsemstejnjako "italic") Implicitnhodnota:"normal"

Tatovlastnostnastavujerodinupsem,tedyseznampsem,ktersemajpoutprozobrazentextu.

Lze aplikovatnavechnyelementy. Vlastnostje dedicn. Hodnoty:jmnopsmaci seznamnekolikapsem(drvenapsanmvyprio-

ritu).Je vhodnvkldatseznampsem,protoenevdyje zaruceno,e klientdisponujevmizvolenmpsmem.Z tohotoduvodusetakdoporucujeuvstnakonecseznamujednoz tzv.generickchjmen,ktermiCSS disponuje.Tatogenerickjmnapopisujzkladnskupinypsem,ktermiby meldisponovatkadoperacnsystm.

Prklad:

p {color: #000; font-family: Times New Roman CE,serif;}div {color: #000; font-family: Arial, sans-serif;}

Prklad:

p {color: #000; font-family: serif; font-style: oblique}div {color: #000; font-style: italic; font-family: arial,

sans-serif}

VLASTNOST "FONT-FAMILY"

VLASTNOST "FONT-STYLE"

28.2 VLASTNOSTI PSMA

98

28.3 VLASTNOSTI TEXTU

VLASTNOST "WORD-SPACING"

VLASTNOST "FONT"

VLASTNOST "L

Documents

Pexa-P-Jazyky-XHTLM.-CSS.-DHTML.WML---tvorba-webu---kniha