Obsah

28 - HTML a JavaScript

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. 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ů, 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. - říká jakou verzí jazyka je dokument psán
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.

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 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

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:

// 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");

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

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.

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 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.

<span onClick="my_fce(10);">Textovy obsah elementu</span>

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:

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.

internet