OBSAH WEBU
ČTĚTE!
Rozdíly
Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
|
temata:28-html-a-javascript:main [2011/02/15 13:15] sgs |
temata:28-html-a-javascript:main [2013/05/24 09:14] (aktuální) sgs [XHTML] |
||
|---|---|---|---|
| Řádek 1: | Řádek 1: | ||
| + | ~~ODT~~ | ||
| + | |||
| ====== 28 - HTML a JavaScript ====== | ====== 28 - HTML a JavaScript ====== | ||
| Řádek 37: | Řádek 39: | ||
| Součástí obsahu elementu mohou být další vnořené elementy. | Součástí obsahu elementu mohou být další vnořené elementy. | ||
| **Atributy** jsou doplňující informace, které upřesňují vlastnosti elementu. | **Atributy** jsou doplňující informace, které upřesňují vlastnosti elementu. | ||
| + | **Validita** znamená jak dokument splňuje pravidla definovaná W3C, neznamená bezproblémové zobrazovaní, vzhledem k různým implementacím. | ||
| + | |||
| + | |||
| HTML obsahuje mimo vlastní definici značkovacího jazyka jako aplikace SGML mnoho dalších formálních jazyků, | HTML obsahuje mimo vlastní definici značkovacího jazyka jako aplikace SGML mnoho dalších formálních jazyků, | ||
| Řádek 45: | Řádek 50: | ||
| ===== Struktura dokumentu ===== | ===== Struktura dokumentu ===== | ||
| - | * Deklarace DTD – je povinná až ve verzi 4.01, je uvedena direktivou <!DOCTYPE. | + | * Deklarace DTD – je povinná až ve verzi 4.01, je uvedena direktivou <!DOCTYPE. - říká jakou verzí jazyka je dokument psán |
| * Kořenový element – element html (značky <html> a </html>) reprezentuje celý dokument, vše je uvnitř. | * Kořenový element – element html (značky <html> a </html>) reprezentuje celý dokument, vše je uvnitř. | ||
| * Hlavička elementu – obsahuje metadata (ne obsah), která se vztahují k celému dokumentu. Definují např. název dokumentu, jazyk, kódování, klíčová slova, přiložené soubory (styly, javascript,...). Je uzavřena mezi značky <head> a </head>. | * Hlavička elementu – obsahuje metadata (ne obsah), která se vztahují k celému dokumentu. Definují např. název dokumentu, jazyk, kódování, klíčová slova, přiložené soubory (styly, javascript,...). Je uzavřena mezi značky <head> a </head>. | ||
| Řádek 55: | Řádek 60: | ||
| * Stylistické značky – určují vzhled elementu při zobrazení, typickým příkladem je značka pro tučné písmo (<b>). Od tohoto druhu značek se postupně upouští, trendem je používání kaskádových stylů, které vzhled popisují odděleně od obsahu dokumentu. | * Stylistické značky – určují vzhled elementu při zobrazení, typickým příkladem je značka pro tučné písmo (<b>). Od tohoto druhu značek se postupně upouští, trendem je používání kaskádových stylů, které vzhled popisují odděleně od obsahu dokumentu. | ||
| + | |||
| + | ===== XHTML ===== | ||
| + | Postupem, času vniklo XHTML, které je validní dle deifnice XML. Má striktnější pravidla, např, všechny značky musí být ukončeny atd. | ||
| + | Hlavní motto je oddělit vzhled od dat, což se docílí použítím CSS. Jě nekolik typů: Strict, Transitional,... | ||
| + | * Dokument musí začínat XML deklarací | ||
| + | * Všechny tagy malým písmem | ||
| + | * Hodnoty atributů musí být v uvozovkách | ||
| + | * Musíme posílat jiné Mime než u HTML | ||
| + | |||
| + | ===== CSS ===== | ||
| + | Cascading Style Sheets. Něco málo o CSS pro úplnost. | ||
| + | Slouží k tvorbě šablon pro dokumenty, zde jsou uloženy definice. Definujeme většinou jejich vzhled, velikosti písma, barvy, odstupy. | ||
| + | Máme tak pěkně externě uložené definice které můžeme obecně použít pro mnoho dokumentů a máme zachováno stejné formátování. | ||
| + | Možnost vložení do dokumentu, stejně jako JS viz konec. | ||
| + | I zde platí problém různé implementace u různých prohlížečů, nutné testovat ve všem. | ||
| ===== JavaScript ===== | ===== JavaScript ===== | ||
| Řádek 122: | Řádek 142: | ||
| var moje_auto = new auto("mercedes", "3A4983"); | var moje_auto = new auto("mercedes", "3A4983"); | ||
| </code> | </code> | ||
| + | Ohledně toho prototypování je to složitější (jak fungují metody, dedičnost, jedna původní třida atd), nedá se to přirovnat k žádnýmu jazyku se kterým jsme ve škole pracovali, dalo by se to tu hodně rozepsat, ale nemyslim si, že to je potřeba. | ||
| ====Klientský JavaScript==== | ====Klientský JavaScript==== | ||
| Řádek 143: | Řádek 164: | ||
| **Window jako globální objekt** | **Window jako globální objekt** | ||
| V klientském JavaScriptu je globálním objektem okno prohlížeče nazvané Window. Lze se na něj odkázat jménem window. Všechny globálně deklarované proměnné jsou proměnnými okna window. Jsou zde uvedeny pouze vlastnosti s odkazovanými typy. Většina objektů má mnohem více vlastností různých hodnotových typů. Nejpoužívanější je pravděpodobně objekt document. Tvoří podstrom objektů, které jsou dlouhodobě předmětem pokusů o standardizaci. V současnosti je již používána plně objektová verze DOM. | V klientském JavaScriptu je globálním objektem okno prohlížeče nazvané Window. Lze se na něj odkázat jménem window. Všechny globálně deklarované proměnné jsou proměnnými okna window. Jsou zde uvedeny pouze vlastnosti s odkazovanými typy. Většina objektů má mnohem více vlastností různých hodnotových typů. Nejpoužívanější je pravděpodobně objekt document. Tvoří podstrom objektů, které jsou dlouhodobě předmětem pokusů o standardizaci. V současnosti je již používána plně objektová verze DOM. | ||
| + | |||
| + | **DOM** | ||
| + | Znamená Document Object Model a umožnuje procházet dokument jako objekt. Jednotlivé zanoření elementů jsou další a další vnitřní objekty. Obsahy elementu, jejich atributy atd jsou atributy těchto objektů. | ||
| **Model programování řízený událostmi** | **Model programování řízený událostmi** | ||
| - | Předpokládá se, že okno prohlížeče bude reagovat na události vesměs způsobené uživatelem. Mohou to být stisky kláves, pohyby myší apod. Budeme programovat a registrovat u systému ovládače těchto událostí. Registrací událostí rozumíme začlenění ovládačů do modelu zobrazené stránky. | + | Aby se začal provádět nějaký kód javascriptu, musí být spušten nějakou událostí. Mohou to být stisky kláves, pohyby myší atd, anebo obecně nahrání stránky na začátku prohlížení. Budeme programovat a registrovat u systému ovládače těchto událostí. Registrací událostí rozumíme začlenění ovládačů do modelu zobrazené stránky. |
| + | |||
| + | <code> | ||
| + | <span onClick="my_fce(10);">Textovy obsah elementu</span> | ||
| + | </code> | ||
| **Události** | **Události** | ||
| Řádek 160: | Řádek 188: | ||
| * přímé vložení do programu v HTML, kde je ovládač zadaný jako hodnota nějakého atributu, např. onclick nebo onmouseover - jen pro maličkosti. | * přímé vložení do programu v HTML, kde je ovládač zadaný jako hodnota nějakého atributu, např. onclick nebo onmouseover - jen pro maličkosti. | ||
| * jako tělo adresy URL, která používá speciální protokol javascript: | * jako tělo adresy URL, která používá speciální protokol javascript: | ||
| + | |||
| + | ====AJAX==== | ||
| + | Ještě něco málo o AJAXu - zkratka pro Asynchronous JavaScipt And XML. Umožnuje komunikovat se serverem bez nutnosti nahrávat celou stránku znova. | ||
| + | Celá komunikace je obstarávána objektem XMLHTTPRequest, kterým se vyšle požadavek na server, a ten může vrácet data v Simple Text, XML, JSON atd. | ||
| + | Jde o asynchronní komunikaci, tzn. pokračuje se dál a nečeká se na odpověd od serveru. | ||
| + | |||
| + | {{tag>internet}} | ||
