Základy programování v JavaScriptu

1. Základy programování v JavaScriptu programujeme dynamické HTML a internetové aplikace RNDr. Pavel Vlach, Ph.D.

2. Obsah vzdělávacího kurzu • co to je JavaScript, vývoj scriptovacích jazyků • jádro Javascriptu • syntaxe • datové typy, proměnné, operátory • řídící struktury, větvení programu, cykly • pole, funkce • základy objektově orientovaného programování • JavaScript v prohlížeči • integrace v HTML • objekty Window, Screen, Navigator, Location, History • objekt Document – obrázky, odkazy, záložky • formuláře a jejich prvky • DOM • Ovládání CSS pomocí scriptů • Ovladače událostí • Praktické příklady

3. JavaScript • univerzální (nezávislý na platformě) scriptovací objektově-orientovaný jazyk • představila společnost Netscape (B. Eich) • obvyklé použití – klientský scriptovací jazyk (použití přímo v prohlížeči) • vkládaný do HTML – ovládá grafické a interaktivní prvky stránky (obrázky, formuláře, odkazy, záložky) nebo vzhled stránek • syntakticky podobný C++, Java • nemá vlastní grafické nástroje (využívá HTML a CSS)

4. Co JavaScript neumí? • žádné grafické schopnosti (ale může využít grafických schopností HTML a CSS) • neumožňuje práci se soubory - velké omezení pro programovací jazyk, logické z bezpečnostních důvodů • nepodporuje práce se sítí – jen odeslání formulářů na server, přechod na adresu URL

5. Historie • 1995 – představen jako doplněk k HTML • Java v názvu – žádná příbuznost k JAVA, jen obchodní tah • 1997 – standardizace ECMA (Europen Computer Manufacturers Association) – základní standard, ze kterého vychází i např. ActionScript • 1998 – ISO standardizace × pozor na různé verze !!

6. podpora prohlížečů • odhadem 5% uživatelů nemají funkční JavaScritpové kódy – prohlížeč bez podpory (např. Lynx, prohlížeče v PDA, mobilech) nebo scripty zakázané • moderní prohlížeče všechny podporují 1.5ECMA JavaScript (nejmodernější) – od IE 5.5, Navigatoru 6.0 (tj včetně Mozilly a Firefoxu), Opera 6.0 • různá rozšíření IE (někdy je přejal i Navigator) – např. document.all, innerHTML, innerText

7. Jádro JavaScriptu základní syntaxe, datové typy, proměnné, příkazy, větvení

8. Základní syntaxe • znaková sada Unicode (2 byte – 256 znaků) • case senzitive jazyk – rozlišuje malá a velká písmena • vždy středníky za datovými a příkazovými strukturami (× jsou volitelné, ale JavaScript je implicitně sám doplňuje, což může způsobit problémy) • složené závorky pro bloky příkazů • komentáře jako v PHP, C++, Javě…

10. co něco zkusit? • document.open(); • otevírá dokument • document.write(), • zapisuje do dokumentu • alert(); • vypisuje do výstražného okna něco • Úkol • vypište něco na obrazovku • vyvolejte výstražné okno s nějakým textem

11. Datové typy • primitivní datové typy • číslo (number) • řetězec (string) • logická hodnota (boolean) • null, undefined • pole • objekty • obalové objekty (Number, String, Boolean) • funkce

12. čísla • není rozdíl mezi celočíselnými hodnotami (integer - v MySQL, C++, JAVA – int, shortint, longint) a čísly s desetinou čárkou (real – např. double) • -9007199254740992 (-253) – 9007199254740992 (253) • 64 bitová reprezentace čísla (tzn. přesnost na 15 desetinných míst) • možnost zápisu hexadecimálně (0×ff) • možnost zápisu v dalších soustavách (pomocí metody toString())

13. čísla • matematické operace s čísly – pomocí objektu Math

14. čísla – speciální hodnoty • Infinity – kladné nebo záporné nekonečno • NaN – Not A Number – nečíselná hodnota • Number.MAX_VALUE • Number.MIN_VALUE • Number.NaN • Number.POSITIVE_INFINITY • Number.NEGATIVE_INFINITY

15. řetězce – string • datový typ reprezentovaný znaky UNICODE • text uzavřený do uvozovek nebo apostrofů

16. escape sekvence • některé znaky nebo akce se musí zapisovat se zpětným lomítkem (tzv. escape sekcence)

17. spojování řetězců • provádí se pomocí znaménka + (na rozdíl od PHP)

18. příklady funkcí pro práci s řetězci

19. logické hodnoty - boolean • dvě hodnoty – true (pravda, 1), false (nepravda, 0) • tento datový typ je často výsledkem porovnání (větvení pomocí if)

20. Pole • indexovaný soubor datových hodnot • číslování od nuly (první prvek pole má index [0] • např: dny v týdnu, seznamy $DenvTydnu[1]=“pondělí“; $DenvTydnu[2]=“úterý“; $DenvTydnu[7]=“neděle“; • lze použít asociativní pole: $PocetObyvatel[“Blovice“]=4005; $PocetObyvatel[“Habří“]=0; • pole mohou obsahovat jakékoliv datové prvky – čísla, řetězce, jiná pole, objekty • definice pomocí konstruktoru new Array();

21. Pole

22. objekty • soubor pojmenovaných hodnot uspořáda-ných do logického celku

23. objekty • objekty se většinou stanovují obecně, pak se vytváří kopie (instance) pomocí konstruktoru a s daty v objektech se pracuje pomocí funkcí – tzv. metod • prakticky celý klientský JavaScript je založen na Objektech – i když to není zřejmé • všechny prvky na html stránce jsou podřízené objektu Window • potomky tohoto objektu (třídy) jsou Document, Frame, Field, Link, Img, Anchor, …

24. funkce • část předdefinovaného kódu JavaScriptu • je definována jen jednou, lze jí opakovaně volat • sémanticky lze rozlišit: • procedury – úseky kódu, které nemají parametr a jen vykonávají standardní věci (např. výpis části kódu) • funkce – generuje výstup závislý na vstupních parametrech

25. funkce • JavaScript obsahuje řadu přednastavených funkcí (resp. metod), pro práci s čísly (např. metody objektu Math) • uživatel může definovat řadu funkcí nebo metod – tj. funkcí vázaných k určitým objektům

26. funkce

27. obalové objekty • kolem primitivních datových typů number, string a boolean existují tzv. obalové objekty Number (), String() a Boolean () • obsahují další metody (funkce) pro práci s těmito datovými typy • objekt Date • objekt Error – při chybě, lze tak ošetřit kód nebo použít k ladění

28. Proměnné deklarace, platnost proměnných, primitivní a referenční typy, uvolňování paměti

29. deklarace • skládá se z identifikátoru (názvu) – bez $!! a hodnoty deklarace se provádí prostřednictvím slova var var pi; pi = 3.14159; var retezec = ‚ahojky‘; • použití nedeklarované proměnné způsobí chybu • lze opakovaně deklarovat proměnnou • nemusí se uvádět datový typ

30. platnost proměnných • deklarace ve funkci nebo metodě s použitím var se vytvoří lokální proměnná platná jen ve funkci • deklarací ve funkci bez použití var způsobí definici globální proměnné platné v celém dokumentu

31. primitivní typy×referenční typy • primitivní typy (cislo, boolean, string) předávají hodnotu • referenční typy předávají odkaz na místo v paměti (pole, objekt)

32. úkol • definujte různé proměnné • proveďte matematické operace s čísly a řetězci a vypište je na obrazovku • zkuste automatické přetypování pomocí čísla uzavřeného do uvozovek

33. uvolňování paměti • na rozdíl od C++ a JAVA se pamět uvolňuje automaticky • na pozadí běží proces, který neustále hledá reference nebo hodnoty, které nejsou dosažitelné, ty jsou označeny • garbage collector maže takto označená data

34. operátory • matematické + - / * % ++ -- • porovnávací == <= >= < > === • logické && || ! • unární - + • podmínkový (ternární) ? • bitové

35. Příkazy přiřazení, větvení (if, switch), cykly (while, do-while, for, for-in), break, continue, return, throw, try/catch/finally

36. přiřazení • provádí se pomocí znaku rovná se

37. úkol • napište v PSPadu script • použijte různé deklarace proměnných, operujte s nimi (pomocí operátorů a metod objektu Math) • výstup tisk (pomocí) metody alert () nebo kombinace document.open(); a document.write();

38. větvení – if…else • struktura if (výraz, podmínka) { …….. } if (výraz, podmínka) { …….. } else { ……. } if (výraz, podmínka) { …….. } else if { ……. } else { ……. } • v závorce se testuje proměnná typu boolean nebo jakýkoliv výraz pomocí porovnávacích operátorů

39. if…else

40. podmínky - úkol • vytvořte 3 scripty, které budou využívat větvení pomocí podmínky if elseif a else • v prvním skriptu testujte výraz typu boolean • v druhém skriptu testujte číselnou proměnnou pomocí operátorů <, >, <=, => • ve třetím scriptu testujte řetězce pomocí operátorů == , != a logických operátorů && a || • uložte do vaší složky

41. větvení switch • nahrazuje níže uvedenou strukturu: if (výraz1) {…………} elseif (výraz2) {…………} elseif (výrazn) {…………} else {…………………….} • má tento tvar switch (podmínka) { case výraz1: case výraz2: case výraz3: default: }

42. switch

43. úkol - switch • napište script, který podle řídící proměnné reaguje třemi způsoby • použijte výpis pomocí alert() nebo document.write() • použijte switch

44. cyklus for • cyklus s parametrem – víme, kolikrát cyklus proběhne for (i=1; i<=20; i++) { ……. } • před započetím konkrétního cyklu se vyhodnotí výraz druhý (zde i<=20) • neplatí-li podmínka, cyklus se ukončí • platí-li, cyklus pokračuje dále a provede se sekvence mezi složenými závorkamipo ukončení těla smyčky se provede třetí výraz (zde se parametr i zvýší o jedničku • vše se opakuje

45. cyklus for

46. úkol • napište script, který pomocí cyklu for vypíše do okna prohlížeče toto:

47. cyklus s podmínkou • s podmínkou na začátku : • tělo cyklu proběhne jen tehdy, je-li platná podmínka while (podmínka) {…….} • s podmínkou na konci : • tělo cyklu proběhne vždy minimálně jednou • opakuje se, pokud platí podmínka do {…….} while (podmínka)

49. úkol • modifikujte závěr příkladu, aby vypisoval, kdo vyhrál (počítač, hráč) • platí tyto podmínky: • má-li někdo součet 21 vyhrál, překročil-li někdo 21 prohrál, nikdo nevyhrál v případě rovnosti 21 nebo překročení 21 u obou hráčů

50. za určité podmínky vyhazuje výjimku – chybu throw try, catch, finally • try – obsahuje blok, který může způsobit chybu • catch – zachytává a ošetřuje výjimky • finally – kód, který se provede i v případě chyby