1 / 89

Základy programování v JavaScriptu

Základy programování v JavaScriptu. programujeme dynamické HTML a internetové aplikace RNDr. Pavel Vlach, Ph.D. 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

habib
Télécharger la présentation

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related