Zklady programovn v Java Scriptu programujeme dynamick HTML

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

Obsah vzdělávacího kurzu • • co to je Java. Script, vývoj scriptovacích jazyků jádro Javascriptu – – – • Java. Script v prohlížeči – – • • syntaxe datové typy, proměnné, operátory řídící struktury, větvení programu, cykly pole, funkce základy objektově orientovaného programování 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

Java. Script • 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)

Co Java. Script neumí? • žádné grafické schopnosti (ale může využít grafických schopností HTML a CSS) • neumožňuje práci se soubory - velké omezení 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

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ř. Action. Script • 1998 – ISO standardizace × pozor na různé verze !!

podpora prohlížečů • odhadem 5% uživatelů nemají funkční Java. Scritpové 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. 5 ECMA Java. Script (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, inner. HTML, inner. Text

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

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 Java. Script 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ě…

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

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

čísla • není rozdíl mezi celočíselnými hodnotami (integer - v My. SQL, 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 to. String())

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

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

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

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

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

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

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

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

Pole

objekty • soubor pojmenovaných hodnot uspořádaných do logického celku

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ý Java. Script 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, …

funkce • část předdefinovaného kódu Java. Scriptu • 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

funkce • Java. Script 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

funkce

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í

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

deklarace • skládá se z identifikátoru (názvu) – bez $!! a hodnoty deklarace se provádí prostřednictvím slova 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

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

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)

ú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

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

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

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

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

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

větvení – if…else • struktura 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ů

if…else

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

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

switch

ú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

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ávorkami po ukončení těla smyčky se provede třetí výraz (zde se parametr i zvýší o jedničku • vše se opakuje

cyklus for

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

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)

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

throw • za určité podmínky vyhazuje výjimku – chybu 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

throw, try, catch, finally

Objekty vytváření objektů, metody

objekty • soubor pojmenovaných hodnot uspořádaných do logického celku • objekty se vytváří zvláštní funkcí, tzv. konstruktorem - ten vytváří novou instanci objektu

objekty • definice „objektu“ tvoří prototyp, jakýsi obecný model pro tvorbu kopií (instancí) • prototypovým objektům lze přiřadit funkce, které automaticky dopočítají hodnoty daným objektům nebo pracují z daty => metody • metody jsou dostupné automaticky všem kopiím (instancím) objektů • POZOR!! • pole (Array) nebo řetězce (String) jsou v jistém slova smyslu objekty – lze jim přiřazovat nové prototypové metody, které fungují u všech instancí typu pole nebo string

objekty

objekty • nové instance se vytváří pomocí konstruktoru: mujobdelnik = new Obdelnik (10, 10); výpis se provede definovanou metodou to. String(); mujobdelnik. to. String();

Pole struktura polí metody pro práci s poli

Pole

metody pro práci s poli

metody pro práci s poli

metody pro práci s poli

metody pro práci s poli

metody pro práci s poli • v dokumentu jsou pole obrázků, odkazů, kotev, formulářů apod.

Regulární výrazy vyhledávání řetězců nahrazování znaků zobecnění řetězců

Regulární výrazy • objekt popisující vzor znaků • používá se na vyhledávání znaků v řetězcích • regulární výrazy se zapisují pomocí lomítek var regular = /. $/ //budou se hledat řetězce, které končí tečkou var find = /ss/ //budou se hledat místa se dvěma mezerami

Regulární výrazy

Regulární výrazy

Klientský Java. Script v prohlížeči

objektová struktura • nezapomeňte, že vše probíhá v okně (objekt Window), ve kterém je dokument (objekt Document), který je tvořen Formuláři (Forms), Odkazy (Links), obrázky (Links), záložkami (Anchor) a dalšími prvky

ovladače událostí? • dynamické znamená měnící se • interaktivní znamená reagující na činnost uživatele • události v okně nastávají v případech – změní se velikost, nahraje se dokument, kurzor najede nad prvek, něco se změní… • ovladače událostí – syntaxe, které sledují výše uvedené změny

implementace do HTML • pomocí tagu <script></script> • pro validitu je lepší uvést tento kód <script type=„text/javascript“. kód. </script> • je možné vládat soubor typu. js <script type=„text/javascript“ src=„soubor. js></script>

objekt window okna, jejich vlastnosti a metody práce s okny

window - vlastnosti • okna, ve kterém se otevírá dokument

window - metody

window – metody open(), blur(), focus() • set. Interval() – spouští činnosti v určitém intervalu • set. Timeout() – spuští činnost po určité době

set. Interval

metody scroolby(), move. By(), resize. By();

window – ovladače událostí

ovladač události onerror • nastane-li chyba vyhodí chybu • funguje jen v některých prohlížečích – v IE se primárně spouští vlastní chybové okno

onerror – implementace do HTML

document dokument v okně, vlastnosti, metody práce s dokumenty, ovladače událostí

document

links[] • pole obsahující všechny odkazy v html dokumentu

úkol • změňte výše uvedenou funkci tak, aby nejen vypisovala odkazy, ale učinila je skutečnými odkazy

img [] • pole obsahující všechny obrázky • new Image(x, y). src=url; – konstruktor objektu Image – neumístí se na obrazovku, ale načte se do paměti – urychlí se nahrávání

implementace do html

forms[] • pole, které obsahu všechny formuláře v dokumentu • pole forms[] obsahují prvky elements[] • na prvky polí se lze odkazovat i pomocí pojmenovaných atributů • u tagů zavedeme atribut name=„“ a poté se odkazujeme: document. [nazevprvku]. value

úkol • zapište příklad a modifikujte jej – místo pole použijte atributy name

hodiny