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:02] 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 103: | Řádek 123: | ||
| * k vytvořeným objektům | * k vytvořeným objektům | ||
| + | Objekty jsou vlastně asociativní pole. - obj.x = 10 a obj["x"] = 10 je to stejné. | ||
| + | |||
| + | **Prototypy** | ||
| + | Přestože JavaScript nedisponuje klasickým konceptem třída-instance, typickým pro objektově orientované jazyky, disponuje rysem, který tento mechanismus částečně nahrazuje – prototypováním. Díky prototypování je dále JavaScript schopen simulovat mnoho principů a vlastností třídově založených mechanismů, například dědičnost, která je u JavaScriptu nazývána právě jako dedičnost prototypová, která je vysvětlena na příkladu níže. | ||
| + | |||
| + | **Funkce jako konstruktory objektů** | ||
| + | Funkce tedy mají v JavaScriptu kromě své běžné role význam jako konstruktory objektů. Voláním konstruktoru pomocí operátoru new se pak vytvoří nový objekt (instance). Vlastnost objektu se deklaruje přes klíčové slovo this. Přímo při vytváření objektu lze tedy přejímáním parametrů volaného konstruktoru inicializovat jednotlivé proměnné. Atribut prototype dané funkce potom určuje prototyp nové vytvořeného objektu. Příklad konstruktoru třídy auto: | ||
| + | |||
| + | |||
| + | <code> | ||
| + | // Definice konstruktoru | ||
| + | function auto(znacka, spz) { | ||
| + | this.znacka = znacka; | ||
| + | this.spz = spz; | ||
| + | this.vypisZnacku = function(){alert(this.znacka); }; | ||
| + | } | ||
| + | //vytvoření nového auta | ||
| + | var moje_auto = new auto("mercedes", "3A4983"); | ||
| + | </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 124: | Řá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 141: | Řá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}} | ||
