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 12:31] 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 ===== | ||
| - | JavaScript je interpretovaný programovací jazyk s objektově orientovanou koncepcí. Klientská verze tohoto jazyka je součástí většiny všeobecně rozšířených prohlížečů. | + | JavaScript je interpretovaný programovací jazyk s objektově orientovanou koncepcí. Klientská verze tohoto jazyka je součástí většiny všeobecně rozšířených prohlížečů. První verze od firmy Netscape. Běží na straně klienta, ne serveru. |
| Jádro jazyka (tj. část univerzální nezávislá od prohlížečů) je syntakticky velmi podobná C++. | Jádro jazyka (tj. část univerzální nezávislá od prohlížečů) je syntakticky velmi podobná C++. | ||
| - | Podobnost však končí na úrovni syntaxe. **Nemá nic společného s javou**. JavaScript je jazykem, který má potlačenu typovou kontrolu. Dále jde o | + | Podobnost však končí na úrovni syntaxe. **Nemá nic společného s javou**. |
| - | interpretovaný jazyk, který mnohé myšlenky přebírá z jazyka Perl. Příklady jsou přejatých pojmů jsou regulární výrazy | + | Přebírá mnoho z jazyka Perl, např. regulární výrazy či práci s polem. |
| - | nebo práce s poli. | + | |
| **Vlastnosti** | **Vlastnosti** | ||
| Řádek 70: | Řádek 89: | ||
| * syntakticky podobný C, C++ nebo Javě | * syntakticky podobný C, C++ nebo Javě | ||
| * má potlačenu typovou kontrolu | * má potlačenu typovou kontrolu | ||
| - | * JavaScript není zjednodušenou verzí Javy | ||
| - | * vznikal pod názvem LiveScript | ||
| - | * ne zcela ustálený název a ne zcela ustálená definice | ||
| - | * JavaScript se asi vžil nejvíce | ||
| * univerzální část JavaScriptu se vžil název jádro JavaScriptu | * univerzální část JavaScriptu se vžil název jádro JavaScriptu | ||
| Řádek 80: | Řádek 95: | ||
| * písmena anglické abecedy, podtržítko a dolar | * písmena anglické abecedy, podtržítko a dolar | ||
| * dále i číslice | * dále i číslice | ||
| - | * rozpoznává se plná délka identifikátorů | ||
| **Omezení:** | **Omezení:** | ||
| Řádek 109: | Řá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 130: | Řá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 147: | Řá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}} | ||
