OBSAH WEBU
ČTĚTE!
Toto je starší verze dokumentu!
Obsah
28 - HTML a JavaScript
Značkovací jazyky
Značkovací jazyky (markup languages - ML) jsou speciálním typem programovacích jazyků. Slouží hlavně pro popis dokumentů. Jsou definovány gramatikou – gramatika je založena na konečné množině gramatických pravidel, které generují řetězce daného jazyka.
Procedurální značkování
Značky mají pevný význam (sémantiku). Ztrácí se informace o sémanticky rozdílných, avšak formátem stejných atributech dokumentu (chceme-li centrovat nadpis a popis obrázku, označíme oba stejně; tyto dva typy textu nelze pak v dokumentu odlišit). Je to obdobné klasickému programovacímu jazyku, jehož gramatika je pevná a předem známá. Použito v HTML.
Univerzální značkování
- Značkování popisuje strukturu dokumentu a jeho sémantické atributy.
- Povoluje se hierarchická struktura dokumentů.
- Značkování by mělo být přesné, aby bylo možné používat techniky vhodné pro zpracování přesně definovaných objektů.
- Značky nemají přesně definovanou sémantiku. Ta je dána až interpretací značek v procesu zpracování. Použito v XML.
SGML
SGML (Standard Generalized Markup Language) je univerzální značkovací metajazyk, který umožňuje definovat značkovací jazyky jako své vlastní podmnožiny. SGML je komplexní jazyk poskytující mnoho značkovacích syntaxí, ale jeho složitost brání většímu rozšíření. Jazyky původně založené na SGML nebo jako jeho aplikace jsou například HTML nebo DocBook. SGML umožňuje na rozdíl od XML pomocí DTD vymezit elementy, které se nesmí vyskytovat pod daným elementem. Základní vlastnosti tohoto metajazyka jsou:
- Zdůrazňuje univerzální značkování před procedurálním.
- Umožňuje deklarovat typy dokumentů.
- Je nezávislý na technickém vybavení, kde je program v tomto jazyce používán.
HTML
Zkratka pro HyperText Markup Language. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu. Jazyk je aplikací dříve vyvinutého rozsáhlého univerzálního značkovacího jazyka SGML. Vývoj HTML byl ovlivněn vývojem webových prohlížečů, které zpětně ovlivňovaly definici jazyka. Jazyk HTML je od verze 2.0 aplikací SGML (připravovaná verze HTML5 ale již závislost na SGML obsahovat nebude). Je charakterizován množinou značek a jejich atributů definovaných pro danou verzi. Mezi značky se uzavírají části textu dokumentu a tím se určuje význam (sémantika) obsaženého textu. Názvy jednotlivých značek se uzavírají mezi úhlové závorky (< a >). Část dokumentu tvořená otevírací značkou, nějakým obsahem a odpovídající ukončovací značkou tvoří tzv. element (prvek, tag) dokumentu. Součástí obsahu elementu mohou být další vnořené elementy. Atributy jsou doplňující informace, které upřesňují vlastnosti elementu.
HTML obsahuje mimo vlastní definici značkovacího jazyka jako aplikace SGML mnoho dalších formálních jazyků, které musejí být vysvětleny zvlášť. Z těch nejrozsáhlejších jsou to:
- skriptovací jazyky a převážně klientský JavaScript
- kaskádové styly dokumentů CSS
- případně jiné méně rozsáhlé jako jsou různá kódování (jazyků apod.)
Struktura dokumentu
- Deklarace DTD – je povinná až ve verzi 4.01, je uvedena direktivou <!DOCTYPE.
- Kořenový element – element html (značky a ) 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>.
- Tělo dokumentu – obsahuje vlastní text dokumentu. Vymezuje se značkami <body> a </body> = to co je vidět.
Druhy značek
- Strukturální značky – rozvrhují strukturu dokumentu, příkladem jsou odstavce (<p>), nadpisy (<h1>, <h2>). Dodávají dokumentu formu.
- Popisné (sémantické) značky – popisují povahu obsahu elementu, příkladem je nadpis (<title>) nebo adresa (<address>). Současný trend je orientován právě na sémantické značky, které usnadňují automatizované zpracovávání dokumentů a vyhledávání informací v záplavě dokumentů na webu.
- 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.
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čů. 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++. Podobnost však končí na úrovni syntaxe. Nemá nic společného s javou. Přebírá mnoho z jazyka Perl, např. regulární výrazy či práci s polem.
Vlastnosti
- interpretovaný jazyk s objektově orientovanou koncepcí – nemusí se kompilovat
- objektový – využívá objektů prohlížeče a zabudovaných objektů
- závislý na prohlížeči – funguje ale ve většině prohlížečů
- klientská verze u většiny internetových prohlížečů
- syntakticky podobný C, C++ nebo Javě
- má potlačenu typovou kontrolu
- univerzální část JavaScriptu se vžil název jádro JavaScriptu
Identifikátory a klíčová slova:
- case-sensitive
- písmena anglické abecedy, podtržítko a dolar
- dále i číslice
Omezení:
- uživatel může JavaScript zakázat
- existují různé odlišné verze jazyka i prohlížečů, což vede k častým chybám, je těžké zajistit stejnou funkčnost všude
- neumí přistupovat k lokalním ani serverovým souborům (kromě cookies - lokální) ani k žádným jiným systémovým zdrojům (tiskárna např.)
- neumí žádná data uložit (kromě cookies)
Cookies Umožnuje uložit data k uživateli, můžou se opět použít při přístí návštěvě. Uživatel může zakázat. Mají nastavitelnou dobu expirace, je omezena jejich delka i jejich počet.
Příkazy jazyka Obecně pro řízení stejné jako v C++ - cykly, podmínky, switche, bloky, break, continue, vyjímky, with, návěstí
Objektový model
JavaScript je objektový jazyk. V praxi často znamená „objektovost“ JavaScriptu vlastně jenom to, že všechny vlastnosti a příkazy jsou uspořádány podle nějakého systému. Objektový model je způsob, jak pojmenovat jednotlivé prvky okna prohlížeče a dokumentu, aby se s nimi dalo pracovat. Studium JavaScriptu je vlastně studium objektového modelu prohlížeče a dokumentu; je třeba se naučit, jak se které prvky zapisují.
- javaScript je objektove orientovany a to včetně jednoduché dědičnosti
- neexistují třídy jako u ostatních ovšem existuji Konstruktory
- konstruktor je definovan jinym a to Function (cili jsou to funkce)
- základní konstruktor Object – vse je z něj děděno
Javascript umí přistupovat:
- k objektům okna prohlížeče (objekt window)
- a přes něj i k prvkům stránky (window.document), které mají úzkou vazbu na jazyk HTML
- k zabudovaným objektům (Date, Math, string).
- k vytvořeným objektům
Klientský JavaScript
Pojem klientský JavaScript vznikne integrací JavaScriptu do internetového prohlížeče. Klientský JavaScript používá kromě univerzálních rysů jazyka i objektový model dokumentů DOM. Jejich spojením lze dosáhnout dynamického chování webových stránek, pro něž se vžil název Dynamic HTML (DHTML). Organizace Word Web Consorcium ( http://www.w3c.org ) publikovala specifikaci DOM, kterou by měly webové prohlížeče ctít. Bohužel tomu dosud tak není a programování produktů v klientském JavaScriptu je často problematické z důvodů několika větví programu vhodných pro různé prohlížeče. Kromě využití klientského JavaScriptu lze jádro jazyka obohacené o další knihovny (zejména pro práci se soubory) používat i mimo prohlížeče, např. formou tzv. Scrip Hostingu. Vlastnosti:
- integrace JavaScriptu do internetového prohlížeče
- kromě univerzálních rysů jazyka i objektový model dokumentů DOM
- lze dosáhnout dynamického chování webových stránek, pro něž se vžil název Dynamic HTML (DHTML)
- Word Web Consorcium (http://www.w3c.org/DOM) publikovala specifikaci DOM
- kromě využití klientského JavaScriptu lze jádro jazyka obohacené o další knihovny (zejména pro práci se soubory) používat i mimo prohlížeče, např. formou tzv. Script Hostingu.
Klientský JavaScript je provozován v prostředí webového prohlížeče. Oproti jádru jazyka využívá následujících styčných bodů s prohlížečem:
- globálním objektem je okno prohlížeče Window
- je k dispozici model dokumentu document stránky ve struktuře DOM.
- prohlížeč generuje události, které indikují chování okna, případně aktivity uživatele a mohou řídit vykonávání programů v JavaScriptu.
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.
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.
Události
- onClick - kliknutí
- onMouseOver - najeti kurzorem myši
- onMouseOut - odjetí kurzorem myši
- onLoad - nahráni stránky
… a další , cca 20
Vkládání JavaScriptu do HTML
Programy v JavaScriptu je třeba nějak spojit s programy v HTML. Existuje pro to několik způsobů:
- přímé vložení programu mezi dvojici značek <script> a </script>.
- připojení externího souboru pomocí atributu src značky <script> - nejčastěji.
- 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:
