Návrh a tvorba WWW Přednáška 10

1. Návrh a tvorba WWWPřednáška 10 Úvod do JavaScriptu

2. Historie JavaScriptje objektově orientovaný skriptovací jazyk, který vyvinul ve společnost NetscapeBrendanEich. Formalizován je jako ECMAScript a primárně je určen pro skriptování na straně klienta. Jeho implementaci můžeme nalézt de-facto v každém moderním webovém prohlížeči, přičemž je nutné si uvědomit, že v každém je rozsah implementace jiný. JavaScriptje jazyk, který je case-sensitive. Syntaxe JavaScriptu je ovlivněna jazykem C. Jmennou konvenci sice částečně přebírá z jazyku Java, má však odlišnou sémantiku a nijak spolu nesouvisí. Klíčové principy návrhu jsou převzaty z jazyků „Self“ a „Schemeprograminglanguages“. V dnešní době už JavaScript není v prostředí webových technologií vnímán pouze jako jazyk definovaný v ECMA-262, ale jako soubor • ECMAScriptu, • DOMu • a BOMu.

3. DOM DocumentObjectModel (DOM)je standardizované rozhraní, které vyvinula organizace W3C a které umožňuje přístup k jednotlivým objektům XML či HTML prostřednictvím objektové reprezentace dokumentu. V dnešní doně existují čtyři úrovně DOMu (DOM level 0-3), přičemž například třetí úroveň podporuje XPath výrazy. Podpora DOMu je v prohlížečích problematická a nedá se na ní plně spolehnout, protože většina prohlížečů nemá implementovánu podporu všech verzí DOMu.

4. BOM BOM (Browser Object Model) poskytuje metody a rozhraní pro interakci s prohlížečem. Jde například o vytváření pop-up oken, změna velikosti a pohybování s oknem prohlížeče, poskytování informací o navigaci, lokaci či rozlišení obrazovky, apod. BOM byl vždy problematický, protože nebyl normován a tak si každá firma v této oblasti vytvářela a zaváděla co chtěla a to bez ohledu na ostatní. Naštěstí se situace obrací k lepšímu a to díky příchodu jazyka HTML5, který se snaží většinu v BOM začlenit jako část své formální specifikace.

5. Objektový model Objektový model HTML stránky Objektový model v prohlížeči

6. Použití ve WWW stránce Umístění do stránky • pomocí tagu<script> • přilinkovat externího souboru • přímý zápis v atributu elementu (např. onClick, onChange, on Load apod.) Protože JavaScript nemusí být v prohlížeči podporován (případně může být v prohlížeči vypnut), je dobré tuto situaci obsloužit tagem <noscript>. Do tohoto tagu lze uvést informace, které budou uživateli zobrazeny pouze v případě, že JavaScript nebude dostupný

7. Příklad použití

8. Komentáře Komentáře v JavaScriptu lze používat dvojího typu. Řádkový komentář uvozen // a víceřádkový komentář označen /* …*/.

9. Escapování znaků V JavaScriptu provádíme escapování znaků pomocí zpětného lomítka (\). Zpětné lomítko spolu se znaky, které následují, značí interpretu, že se bude jednat o znak (případně výraz), který je skutečnou další částí právě zjišťovaného řetězce. Například pokud bychom chtěli v řetězci, který je uveden v uvozovkách použít znak uvozovek, interpret by nedokázal takovéto uvozovky rozpoznat od těch, které ohraničují řetězec. V tomto případě proto musíme uvozovky escapovat. V následujícím výčtu je uvedeno několik běžně používaných escapovacích sekvencí.

10. Proměnné Definování proměnné provádíme pomocí operátoru var, za kterým následuje jméno proměnné. Ve chvíli, kdy definujete proměnou, můžete dle libosti proměnné přiřadit hodnotu. Pomocí operátoru var definujeme proměnné v určitém prostoru, proto pokud bychom například definovali proměnnou uvnitř funkce, bude se jednat pouze o lokální proměnnou, která mimo tuto funkci nebude platná.

11. Datové typy V ECMAScriptu nelze definovat vlastní datové typy. Musíme se proto omezit pouze na vestavěné typy a to jsou jednak jednoduché datové typy (tzv. primitivní typy) • Undefined, • NULL, • Boolean, • Number • a String a dále komplexní datový typ • Objekt.

12. Datový typ undefined Nedefinovaný typ má pouze jednu hodnotu a to undefined. Proměnná může být tohoto datového typu ve chvíli, kdy jsme proměnnou deklarovali, ale neinicializovali. Dalším případem může být stav, když proměnné přímo přiřadíme hodnotu undefined. Posledním případem může být stav, kdy proměnná nebyla deklarována, což může být trochu matoucí.

13. Datový typ NULL Datový typ Null je druhým datovým typem, který má pouze jednu hodnotu a to hodnotu null. Hodnota null je prázdný objekt, ukazatel.

14. Datový typ boolean Datový typ Boolean nabývá pouze dvou hodnot a to true a false. Pokud bychom chtěli převést jakou jakoukoliv proměnou na datový typ Boolean, je to možné a to pomocí funkce Boolean();

15. Datový typ number Datový typ Number lze rozdělit na číslo celé (integer) s rozsahem od -253 do 253 a na číslo desetinné (floating-point). S čísli lze provádět běžné operace jako sčítání (+), odčítání (-), násobení (*), dělení (/) a celočíselné dělení (%). Pro datový typ Number existuje jedna speciální hodnota a to NaN (Not a Number). Pokud chceme otestovat, zda hodnota proměnné je číslo, nebo by bylo možné hodnotu na číslo převést, lze použít funkci isNaN(). Pro převod hodnoty proměnné na datový typ Number, můžeme použít funkce Number(), parseInt() a parseFloat().

16. Datový typ string Datový typ String představuje posloupnost 16-bitových znaků Unicode. Řetězce vymezujeme buď uvozovkami (") nebo apostrofy ('). Řetězce tohoto typu můžeme libovolně spojovat a to pomocí operátoru +. Pokud chceme k již existujícímu řetězci přidat další řetězec, může využít konstrukci +=.:

17. Datový typ object Objekt je souhrn vlastností a metod do jednoho datového prvku. Nové instance objektů vytváříme pomocí operátoru new. Každá instance objektu má následující vlastnosti a metody: • constructor— funkce použita při vytvoření instance objektu • hasOwnProperty(propertyName) — určuje, zda daná instance objektu disponuje specifikovanou vlastností • isPrototypeOf(object) — určuje, zda objekt je prototypem jiného objektu. • propertyIsEnumerable(propertyName) —určuje, zda specifikovaná vlastnost může být vyjádřena pomocí for-in výrazu • toLocaleString() — vrátí řetězec, který je vhodný pro lokální prostředí • toString() — vrátí řetezec objektu. • valueOf() — vrátí řetězec, číslo nebo logickou hodnotu ekvivalentní objektu

18. Operátory Unární operátory ++ Inkrementace -- dekrementace Operátory porovnání == rovnost < menší > Větší <= menší rovno >= větší rovno != nerovnost Logické operátory AND && logický součin OR || logický součet NOT ! negace

19. Větvení programu If, else Switch

20. Cykly For While For … in

21. Funkce Funkce v JavaScriptu deklarujeme pomocí klíčového slova function za kterým uvádíme jméno funkce a případně vstupní parametry. Tělo funkce se uvádí do složených závorek. Proměnné, které deklarujeme ve funkci klíčovým slovem var, jsou proměnné lokální. Jejich rozsah platnosti je pouze uvnitř funkce. V opačném případě se bude jednat o proměnné globální.