Základy programování v JavaScriptu

Slides:



Advertisements
Podobné prezentace
Web Michal Žůrek Jak se na něj dívám já..
Advertisements

Pro začátek něco lehčího
Orbis pictus 21. století Tato prezentace byla vytvořena v rámci projektu.
ŘÍDÍCÍ STRUKTURY - PODMÍNKY
Programování v C jazyku - SEMINÁŘ
Vlastní skript může být umístěn: v hlavičce stránky v těle stránky
Dynamické dokumenty na straně klienta Informatika pro ekonomy II.
Vstupy a výstupy v JavaScriptu Vstup: použitím metody prompt objektu window čtením hodnot z položek formuláře Výstup : použitím metody alert objektu window.
Dynamické dokumenty na straně klienta Informatika pro ekonomy I přednáška 5, 6.
Dynamické dokumenty na straně klienta Informatika pro ekonomy I přednáška 5, 6.
VISUAL BASIC Práce se soubory.
C# pro začátečníky Mgr. Jaromír Osčádal
If-else, do-while, switch, operátory
Programování v C++ Cvičení.
Algoritmizace a programování
Druhé cvičení Vytváření identifikátorů Datové typy
Programování v Pascalu Přednáška 7
Materiály k přednášce Úvod do programování Ondřej Čepek.
PHP PHP – základy syntaxe (část 1) - 03 Mgr. Josef Nožička IKT PHP
Informatika I 3. přednáška
Procedury a funkce Základní charakteristika a použití v programu.
Orbis pictus 21. století Tato prezentace byla vytvořena v rámci projektu.
Vyučovací hodina 1 vyučovací hodina: Opakování z minulé hodiny 5 min Nová látka 20 min Procvičení nové látky 15 min Shrnutí 5 min 2 vyučovací hodiny: Opakování.
OSNOVA: a) Řetězce v C b) Funkce stdio.h pro řetězce c) Funkce string.h pro řetězce d) Příklad Jiří Šebesta Ústav radioelektroniky, FEKT VUT v Brně Počítače.
A1PRG - Programování – Seminář Ing. Michal Operátory (2. část) 4 Verze
PHP – Základy programování
Datové typy a práce s nimi
ActionScript Moderní počítačové aplikace. Charakteristika Je odvozen od JavaScriptu Integruje do Flashe interaktivní ovládání Umožňuje vytvořit přehledné.
Počítače a programování 1
Maturitní okruh 22: Úvod do HTML. Značkovací a klasické jazyky Klasické: převládá strukturovaný text (programovací kód), skripty jsou prováděny na straně.
Proměnné v PHP Každý programovací jazyk pracuje s nějakými hodnotami. To, do čeho se tyto hodnoty ukládají, se nazývá proměnné. Každý programovací jazyk.
Cvičení.
3. Příkazy  Příkazy dělíme na jednoduché a strukturované.  Jednoduché příkazy - žádnou jejich dílčí částí neni příkaz - přiřazovací, vstupu a výstupu,
Návrh a tvorba WWW Cvičení 4
5. Procedury a funkce Procedura je samostatně odladěný algoritmus, v programu může být volána vícekrát. Dvojí terminologie - rozlišujeme procedury a funkce.
Datové typy a struktury
Návrh a tvorba WWW Přednáška 5 Úvod do jazyka PHP.
Hlášky Hlášky v JavaScriptu jsou trojího typu: Hlášky v JavaScriptu jsou trojího typu: Alert Alert Prompt Prompt Confirm Confirm Alert – zobrazí upozorňovací.
Orbis pictus 21. století Tato prezentace byla vytvořena v rámci projektu.
AJAX nejmodernější webová technologie… seminář pro učitele ZŠ a SŠ Mgr. Marek Osuchowski Ostravská univerzita © 2011.
Úvod do JavaScriptu JavaScript je p JavaScript je programovací jazyk, který se používá na webových stránkách. JavaScript je typu KLIENT - KLIENT To znamená,
7. Typ soubor Souborem dat běžně rozumíme uspořádanou množinu dat, uloženou mimo operační paměť počítače (na disku). Pascalský soubor je abstrakcí skutečného.
Základy syntaxe jazyka PHP PHP JE TECHNOLOGIE BĚŽÍCÍ NA SERVERU. PHP JE TECHNOLOGIE BĚŽÍCÍ NA SERVERU. Typický PHP skript obsahuje: Typický PHP skript.
Šesté cvičení Výjimky Balíky.
A1PRG - Programování – Seminář Ing. Michal Řízení běhu programu 5 Verze
PROGRAMOVÁNÍ V PHP PERSONAL HOME PAGES CYKLY V PHP.
STRING A UKAZATELE. Co to je řetězec? Řetězec v Javě je samostatný objekt. Je konstantní, co znamená, že jednou vytvořený řetězec nelze změnit. Chceme-li.
Počítače a programování 1 7.přednáška. Základy Pole ve třídách a metodách Pole Arrays.
Datové typy a operátory. Co jsou datové typy  Charakterizují proměnnou nebo konstantu – jaká data obsahuje  Data jsou v počítači ukládána jako skupiny.
ZÁKLADNÍ POJMY. ZDROJOVÝ TEXT PROGRAMU Tvoří: klíčová slova komentáře identifikátory.
Jazyk C A0B36PRI - PROGRAMOVÁNÍ Část II.
PHP Programy pro tvorbu WWW stránek - 01
Počítače a programování 1 2.přednáška. Základní lexikální struktura programu Program v jazyce Java je tvořen symboly a oddělovači Program Java je psán.
Podprogramy (subroutines) Pojmenované kousky programu, které –tvoří logicky ucelené části –se v programu opakují Jsou zapsány na jednom místě a v případě.
Úvod do programování2 Vyučující: Mgr. Vítězslav Jersák Web: xjv.webnode.cz.
JavaScript úvod. Jazyky webového vývojáře Dynamická stránka  aktivně mění svůj obsah v reakci na činnost uživatele  zpracování na straně serveru (PHP,
Jaroslav BURDYS 4IT.  Čistě OOP jazyk (objektově orientovaný programovací jazyk)  Objekty založeny na tzv. objektových typech: Struktura (struct)
Programování KONSTANTY, ČTENÍ PO JEDNOM ZNAKU GETCHAR() FORMÁTOVANÝ VÝSTUP POMOCÍ PRINTF, VÝVOJOVÉ DIAGRAMY, CYKLY.
Programovací jazyk C# 2. část. Datové typy C# rozeznává dva druhy datových typů, hodnotové a referenční. Hodnotové datové typy Proměnné hodnotového datového.
Praha & EU: Investujeme do vaší budoucnosti Evropský sociální fond Gymnázium, Praha 10, Voděradská 2 Projekt OBZORY Datové typy a operátory Základní programové.
NÁZEV ŠKOLY: S0Š Net Office, spol. s r.o., Orlová-Lutyně AUTOR: Ing. Adéla Tomalová NÁZEV: Podpora výuky v technických oborech TEMA: Objektově orientované.
Programování ÚVOD, PROMĚNNÉ, OPERÁTORY A PODMÍNĚNÝ PŘÍKAZ ERIK KRÁL.
Programování ENUM, SWITCH,pole jednorozměrná a vícerozměrná, deklarace, inicializace, kopírování, porovnání Erik Král.
Internetové publikování Dynamické HTML
Programování v jazyce C++
TNPW1 JavaScript Ing. Jiří Štěpánek.
Opakování základních příkazů a syntaxí v programovacím jazyce Pascal
C# přehled vlastností.
Opakování ze 4. cvičení int a; printf("Zadej číslo: ");
CU01 Informatika II 2/13 Základy algoritmizace
Transkript prezentace:

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

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)

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

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 !!

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

základní syntaxe, datové typy, proměnné, příkazy, větvení Jádro JavaScriptu 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 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ě…

co něco zkusit? document.open(); document.write(), alert(); Úkol 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 pole objekty čí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 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())

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

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

ř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 $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();

Pole

objekty soubor pojmenovaných hodnot uspořáda-ný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ý 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, …

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

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

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 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í) + - / * % ++ -- porovnávací == <= >= < > === logické && || ! unární - + podmínkový (ternární) ? bitové

Příkazy přiřazení, větvení (if, switch), cykly (while, do-while, for, 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) { …….. } 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: má tento tvar 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: }

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 for (i=1; i<=20; i++) { ……. } 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 try, catch, finally 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

vytváření objektů, metody 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 toString(); mujobdelnik.toString();

struktura polí metody pro práci s poli 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.

vyhledávání řetězců nahrazování znaků zobecnění řetězců 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 = /\s\s/ //budou se hledat místa se dvěma mezerami

Regulární výrazy

Regulární výrazy

JavaScript v prohlížeči Klientský JavaScript JavaScript 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>

okna, jejich vlastnosti a metody práce s okny 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() setInterval() – spouští činnosti v určitém intervalu setTimeout() – spuští činnost po určité době

setInterval

metody scroolby(), moveBy(), resizeBy();

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