z klady programov n v javascriptu n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Základy programování v JavaScriptu PowerPoint Presentation
Download Presentation
Základy programování v JavaScriptu

Loading in 2 Seconds...

play fullscreen
1 / 89
habib

Základy programování v JavaScriptu - PowerPoint PPT Presentation

90 Views
Download Presentation
Základy programování v JavaScriptu
An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

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

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

  11. čí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())

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

  13. čí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

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

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

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

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

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

  19. 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();

  20. Pole

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

  22. 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, …

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

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

  25. funkce

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

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

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

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

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

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

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

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

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

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

  36. ú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();

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

  38. if…else

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

  40. 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: }

  41. switch

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

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

  44. cyklus for

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

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

  47. ú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áčů

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