DHTML Jan Felger
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Úvod Tato prezentace zobrazuje pouze zcela základní minimum znalostí, které jsou nutné k testu V původní učebnici s názvem DHTML.DOC najdete další informace, příklady a ukázky
Kapitola 0: Základní tagy Základy HTML © Jan Felger DHTML DHTML – dynamické HTML Standardní HTML zobrazuje v podstatě pouze statické informace výjimkou jsou vložené animace, videa a tag MARQUEE DHTM rozšiřuje tyto možnosti o interaktivitu a to včetně animací Tohoto cíle je dosahováno různými postupy a technikami: Java Script (dále jen JS) VB Script PHP Macromedia Flash aj.
Kapitola 0: Základní tagy Základy HTML © Jan Felger Možnosti DHTML Webová stránka chovající se jako program (tlačítka, textová pole, interaktivní animace…), např. kalkulačka Výpočet ceny objednaného zboží Komunikace serveru s klientem (např. pomocí formuláře) Internetové hry Aj.
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Java Script V našem kurzu se budeme věnovat hlavně standardní technice DHTML – Java Scriptu Java Script – vestavěný scriptovací jazyk Spouští se na straně klienta – je součástí webové stránky, kterou si uživatel stáhne do prohlížeče
Další tagy HTML
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Tag IFRAME Umožňuje vložit na webovou stránku okno, ve kterém se zobrazuje jiný dokument Zkuste si:
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Atributy tagu IFRAME AtributHodnotaVýznam SRC URLAdresa souboru, který se má v okně zobrazit NAME jméno Název okna, např. pro ovládání pomocí JS MARGINHEIGHT čísloVzdálenost mezi rámečkem okna a obsahem okna ve svislém směru MARGINWIDTH čísloVzdálenost mezi rámečkem okna a obsahem okna ve vodorovném směru FRAMEBORDER yes no Zobrazení okraje okna SCROLLING yes no auto Zobrazení posuvníků (ano, ne, automaticky dle potřeby) WIDTH čísloŠířka okna v obrazovkových bodech nebo v procentech HEIGHT čísloŠířka okna v obrazovkových bodech nebo v procentech ALIGN left right top bottom middle baseline Zarovnání okna vůči okolí.
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Cvičení Vytvořte webovou stránku s mnohařádkovým textem a tagem IFRAME s následujícími vlastnostmi: Obsah: Šířka i výška: 50% Zarovnání: doprava Rámeček: ano Rolování obsahu v okně: ano
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Přesná pozice IFRAME Použijeme k tomu CSS u tagu Tento postup lze použít pro libovolný objekt (obrázek, tabulku, tlačítko…)
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Rolující pozadí Již víme, že opakovaný obrázek na pozadí zapíšeme do tagu BODY takto: Takto zapsané pozadí se pohybuje při rolování stránky spolu s textem
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Nerolující pozadí Zkuste: Tento zápis zajistí, že pozadí zůstane při rolování textu statické
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Směr opakování pozadí Obrázek na pozadí je standardně vyplní celé jako dlaždice Je možno nastavit směr opakování obrázku: <BODY BACKGROUND=obr.gif" STYLE="background-repeat: no-repeat"> bez opakování <BODY BACKGROUND="obr.gif" STYLE="background-repeat: repeat-x"> opakování vodorovně <BODY BACKGROUND="obr.gif" STYLE="background-repeat: repeat-y"> opakování svisle
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Nastavení okrajů stránky LEFTMARGIN – levý okraj TOPMARGIN – horní okraj RIGHTMARGIN – pravý okraj BOTTOMMARGIN – dolní okraj Vyzkoušejte si:
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Okraje objektu Vlastnosti okrajů objektu (např. odstavce textu) ukazuje následující obrázek:
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Nastavení okrajů objektu Přesné nastavení okrajů provedeme pomocí CSS Předvedeme si to u obecného tagu DIV (kontejner) Vytvořte webovou stránku obsahující tag DIV s textem, např. takto: Toto je nějaký text. Toto je odstavec tag DIV. Toto je nějaký text.
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Styl pro nastavení okrajů Do stránky vložte styl CSS, např. takto: DIV{ border-width: 20px; border-style: ridge; border-color: lightblue; padding: 50px; margin: 20px; width: 50% }
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Animace pomocí HTML
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 DHTML pomocí MARQUEE Některé dynamické efekty je možno vytvořit i pomocí běžného HTML Např. tag MARQUEE nám dovoluje animovat nejen text, ale libovolný objekt – obrázek, tabulku apod. Zkuste si např.:
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Atributy tagu MARQUEE AtributHodnotyVýznam ALIGN top middle Bottom Zarovn á n í vůči okol í BEHAVIOR scroll slide Alternate Typ animace BGCOLOR jm é no barvyBarva pozad í CLASS jm é no tř í dyTř í da CSS DIRECTION left right up Down Směr rolov á n í HEIGHT Č í sloVý š ka objektu MARQUEE HSPACE Č í sloHorizont á ln í odsazen í objektu MARQUEE od okol í LOOP Č í sloPočet opakov á n í animace SCROLLAMOUNT Č í slo Počet pixelů posunu SCROLLDELAY Č í sloRychlost rolov á n í STYLE atributy CSS Atribut pro vložen í vlastnost í CSS VSPACE Č í sloVertik á ln í odsazen í objektu MARQUEE od okol í WIDTH Č í slo Ší řka objektu MARQUEE
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Cvičení 1 Vytvořte webovou stránku s rámečkem uprostřed Pomocí tagu Marquee zajistěte, aby v rámečku přejely 3 libovolné fotografie zleva doprava opakovaně 3x Zajistěte, aby se před každou fotografií zobrazil popisek
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Cvičení 2 Vytvořte webovou stránku se Pomocí obrázku a dvou tagů Marquee, které přesně umístíte a nastavíte jim přesnou velikost pomocí CSS vytvořte animovaný rámeček
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Odkazy Jak již víme, jako odkaz (tag A HREF) lze použít nejen text, ale např. obrázek (ale i animaci, video…), např. takto:
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Cvičení Vytvořte webovou stránku Stránka bude obsahovat 3 obrázky webů (např. Seznam, Ječná, Hokej) Obrázky si upravíte ve Photoshopu tak, aby měly prostorový vzhled (pomocí Layer Style) Obrázky použijete na své stránce jako tlačítka – odkazy na příslušné weby
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Animace odkazů pomocí CSS Vytvořte stránku alespoň s několika odkazy, např. takto: Webovka 1 Webovka 2 Webovka 3 Webovka 4
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Styly odkazů Přidejte do stránky styly pro nastavení barev odkazů, např. takto: A:ACTIVE {color: gold; background-color: black; font-size: 25} A:HOVER {color: red; background-color: lightblue; font-size: 35; font-weight: bold} A:LINK {color: blue; background-color: white; font-size: 25} A:VISITED {color: gray; background-color: gold; font-size: 25}
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Popis stylů odkazů ACTIVE – právě aktivní, stisknutý HOVER – odkaz, na kterém je kurzor myši LINK – odkaz VISITED – již navštívený odkaz
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Cvičení Vytvořte webovou stránku nejméně se 4 odkazy Zajistěte nastavení vlastností odkazů takto: Odkaz: tmavozelené písmo Arial na světlezeleném pozadí o velikosti 12 bodů Odkaz, na kterém je myš: světlezelené písmo Arial na tmavozeleném pozadí o velikosti 12 bodů, tučné Navštívený odkaz: tmavošedé písmo Arial na světlešwedém pozadí o velikosti 12 bodů
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Formuláře v HTML
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Formuláře (forms) Budeme je často používat při práci s Java Scriptem Jedná se o běžné konstrukce jazyka HTML, ale nejčastěji se využívají právě pro dynamické akce Příklad: na webu vyplněný formulář je odeslán na ovou adresu webmastera Popíšeme si nejpoužívanější konstrukce U většiny z nich je možno použít další atributy (např. name), popíšeme je dále dle potřeby Podrobněji viz
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Tlačítko (button) <input type="button" value="popisek " onclick="akce"> Kurzívou jsou vyznačeny volitelné části syntaxe onclick – parametr určující, co se stane při stisknutí tlačítka – zde místo akce doplníme vhodný Java Script Příklad: <input type="button" value="Stiskni mě!" onclick="alert('Ahoj')"> Odkaz na webovkuwebovku
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Textové pole (řádek textu) Zde se onclick většinou neuvádí; ke zpracování obsahu textového pole slouží obvykle nějaké tlačítko Parametrem size nastavíme šířku pole ve znacích: Příklad: Odkaz na webovkuwebovku
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Textarea (víceřádkové textové pole) Zde piš! Příklad: Zde piš! Odkaz na webovkuwebovku
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Checkbox (zaškrtávací políčko) Toto je první zaškrtávací políčko Zde atribut value určuje, kolikáté je to políčko Tvar políčka: čtvereček Může být zatrženo více políček z jedné skupiny zároveň Odkaz na webovkuwebovku
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Radiobutton (výlučné zaškrtávací políčko) Toto je první vylučovací políčko Zde atribut value určuje, kolikáté je to políčko Tvar políčka: kroužek Může být zatrženo pouze jedno políčko z jedné skupiny zároveň Pro funkčnost přepínání tlačítek je nutný atribut name (stejný pro všechna políčka skupiny) Odkaz na webovkuwebovku
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Pole pro procházení souborů Pole pro procházení souborů Umožňuje procházet strukturou souborů na disku Odkaz na webovkuwebovku
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Tlačítko pro výmaz <input type="reset" value="Vymaž formulář"> Vymaže všechna textová pole ve formuláři Navrátí se k původním hodnotám, které určuje atribut value Rozsah formuláře určují tagy a Odkaz na webovku s ukázkouwebovku
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Tlačítko pro odeslání formuláře <input name="odesli" type="submit" value="Odeslat"> Odešle všechny informace z textových polí a dalších objektů formuláře daného tagy a Je nutno mít speciálním způsobem definován tag Syntaxi funkčního formuláře viz na webovkách školy Odkaz na webovkuwebovku
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Java Skripty – úvod
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Java Script u tagu Už známe: Klikni na mě! Pozor, důležité! Na rozdíl od jazyka HTML u Java Scriptu záleží na velikosti písmen! Proto např. následující řádek by nefungoval: Klikni na mě!
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Java Script v dokumentu alert("Ahoj") Java Script v dokumentu Spustí se po nahrání stránky (není-li nastaven jinak)
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Java Script v externím souboru 1 Musí mít příponu JS Script s webovkou propojíme takto (tohle napíšeme do webovky): Tedy se zde vlastně jedná o odkaz na vnější soubor skript.js se skriptem Samozřejmě musí souhlasit název skriptu (jinak dojde k chybě)
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Java Script v externím souboru 2 – příklad Webovka (např. soubor webovka.htm):
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Java Script v externím souboru 3 – příklad Skript (soubor info.js): alert("ahoj")
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Vyzkoušejte si Vytvořte webovku s různými objekty (obrázek, nadpis, tlačítko) Zajistěte, aby se při kliknutí na objekt objevil příslušný nápis např. „Kliknul jsi na obrázku“ Úkol řešte pomocí skriptu u tagu pomocí konstrukce alert
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Confirm 1 Základní syntaxe: confirm("Nazdar Karle!")
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Confirm 2 Na rozdíl od alert obsahuje dvě tlačítka, OK a Storno Můžeme naprogramovat chování programu při stisknutí každého tlačítka
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Confirm 3 Různé chování programu při stisku různých tlačítek hlaska=confirm("Chceš poznat sladké tajemství?") if (hlaska) document.write("Odmocnina z 5 je "+Math.sqrt(5)) else document.write("No tak ti ho neřeknu!") Zápis na novou prázdnou webovku Výpočet druhé odmocniny z 5
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Prompt 1 Základní syntaxe: hlaska=prompt("Napiš své jméno:","vstup") if (hlaska) document.write("Jmenuješ se "+hlaska+"!") else document.write("Chudáčku, ty nemáš jméno!")
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Prompt 2 Prompt umožňuje zápis textu do pole, dále obsahuje tlačítka OK a Storno Text zapsaný uživatelem do vstupního pole můžeme dále pomocí programu zpracovat Zpracování si ukážeme později, až toho budeme umět více
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Výstup do nového okna document.write("Nazdar Karle!") Textu uvedený v uvozovkách se zapíše do nového okna.
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Nové okno přesněji Ukázka syntaxe (podrobněji později): window.open("web2.htm","okno","scrollbars, width=300, height=100") V závorce jsou tyto parametry: Adresa zobrazeného webu Název okna Parametry: Srollbars – rolovací lišty Width, height – šířka a výška
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Systémové datum dnes=new Date() document.write(dnes) Vypíše aktuální datum v systémovém tvaru, např.: Tue Sep 7 20:44:47 UTC
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Datum a čas lépe dnes=new Date() rok=dnes.getFullYear() mesic=dnes.getMonth() den=dnes.getDay() hodina=dnes.getHours() minuta=dnes.getMinutes() sekunda=dnes.getSeconds() document.writeln("Dnešní datum: " +den+". "+mesic+". "+rok+" ") document.writeln("Aktuální čas: "+ hodina+":"+minuta+":"+sekunda)
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Komentář Komentář je konstrukce Java Scriptu, která se na webové stránce nezobrazuje Slouží k popisu zdrojového kódu pro potřeby programátora (-ů) //Toto je komentář Java Scriptu
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Proměnné Proměnné jsou konstrukce, které umožňují uchovávat hodnoty různého typu (text, čísla, data) Proměnné je třeba pojmenovat Název proměnné nesmí být stejný jako vnitřní příkaz JS Název proměnné musí začínat písmenem Název proměnné nesmí být přerušen mezerou (pro víceslovné názvy použijte podtržítko či pomlčku) Obsah proměnných se může za chodu programu měnit
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Práce s proměnnými 1 //Program na sečtení dvou čísel cislo1=2 cislo2=3 soucet=cislo1+cislo2 document.write(cislo1+"+"+cislo2+"="+soucet)
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Práce s proměnnými 2 Nevýhoda uvedeného programu: sečte pouze čísla zapsaná ve zdrojovém kódu JS Často však potřebujeme pracovat s čísly či jinými údaji, které zadá uživatel z klávesnice Pro takový případ použijeme již probrané formulářové konstrukce, kterés i pro další práci pojmenujeme pomocí atributu NAME
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Práce s proměnnými 3 + function secti() {vysledek.value= eval(cislo1.value)+eval(cislo2.value)} Program sečte dvě čísla zadaná uživatelem z klávesnice Textové pole bude prázdné
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Poznámky k programu Program obsahuje tři pojmenovaná textová pole cislo1, cislo2 a vysledek Program obsahuje nepojmenované tlačítko, které aktivuje funkci Java Scriptu s názvem secti() Tato funkce provede výpočet součtu a zobrazí ho v textovém poli vysledek Použitá systémová funkce eval převádí textovou hodnotu na číslo
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Cvičení Upravte předchozí program tak, aby po zadání dvou čísel uživatelem z klávesnice program vypsal výsledky všech čtyř základních operací (+, –,., :) Vytvořte program, který po zadání čísla uživatelem z klávesnice vypočítá jeho druhou a třetí mocninu Upravte předchozí program tak, aby po zadání čísla uživatelem z klávesnice vypočítal jeho druhé a třetí mocniny a odmocniny Poznámky: druhou odmocninu vypočítáme pomocí funkce Math.sqrt(číslo) libovolnou mocninu čísla vypočítáme pomocí funkce Math.pow(x, y) – vypočte hodnotu výrazu Při výpočtu vyšších odmocnin je převádějte na mocniny pomocí vzorce
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Podmínky Rozhodovací příkaz větví činnost programu do dvou nebo více akcí O tom, která větev programu bude realizována, rozhoduje podmínka Syntaxe: if (a>b) document.write(a „je větší než“ b) else document.write(a „je menší než“ b)
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Cyklus Cyklus je konstrukce, která provádí nějaký příkaz (příkazy) v programu opakovaně.
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Syntaxe: for (proměnná=hodnota; relační výraz; krok) příkaz Syntaxe FOR cyklu Počáteční hodnotaPodmínka ukončení cyklu Krok cyklu
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Více příkazů v cyklu Pokud potřebujeme v cyklu opakovat více příkazů, uzavřeme je do složených závorek takto: for (proměnná=hodnota; relační výraz; krok) { příkaz1 Příkaz2 příkaz3… }
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Relační výrazy – přehled OperátorVýznam a == ba je rovno b a!= ba není rovno b a < ba je menší než b a > ba je větší než b a <= ba je menší nebo rovno b a >= ba je větší nebo rovno b
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Lichá čísla do tisíce Lichá čísla do 1000 //Program pro výpis lichých čísel od 1 do 1000 for (i=1; i<1000; i+=2) document.write(i+" ")
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Popis programu Krok cyklu: Chceme lichá čísla, tedy krok je po 2 Můžeme ho zapsat dvěma způsoby: i=i+2 nebo i+=2 jako zde Výstup programu na obrazovku použili jsme konstrukci: document.write(i+" ") ta zapíše výstup (hodnotu proměnné i) do aktuálního dokumentu a za každým zapsaným číslem udělá mezeru
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Mocniny a odmocniny Mocniny a odmocniny čísel od 1 do 10 //Program pro výpis mocnin a odmocnin čísel od 1 do 10 for (i=1; i<=10; i+=1) { document.write("Číslo "+i+" "+" ") document.write("Číslo na druhou "+Math.pow(i,2)+" "+" ") document.write("Odmocnina z čísla "+Math.sqrt(i)+" "+" ") }
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Popis programu Demonstruje použití více příkazů v cyklu V programu byly použity vestavěné matematické funkce: pow(x,y) – vypočítá x na y, tj. sqrt(x) – vypočítá odmocninu z x tj., Všimněte si: funkce a proměnné se zapisují bez uvozovek textové konstanty zapisujeme v uvozovkách spojování těchto objektů v jednom příkazu write provádíme pomocí operátoru plus
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Cvičení Vytvořte web se scriptem, který vypočítá: sudá čísla od 100 do 500 násobky pěti od 1 do 1000 třetí mocniny a odmocniny čísel od 1 do 50 Prvních deset členů posloupnosti (n se tedy bude měnit od 1 do 10) Hodnotu výrazu, (tedy délku přepony pravoúhlého trojúhelníka), kde hodnoty a a b zadá uživatel z klávesnice
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005
Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005