JavaScript 101. "Trocha života do statických stránek"

Rozměr: px

Začít zobrazení ze stránky:

Download "JavaScript 101. "Trocha života do statických stránek""

Antonie Holubová
před 5 lety
Počet zobrazení:

1 JavaScript 101 "Trocha života do statických stránek"

2 Nacionále: JavaScript 101 Vznik: Netscape, 1995 Původně Mocha, později LiveScript, nakonec z marketingových důvodů přejmenován na JavaScript

3 JavaScript 101 JavaScript NENÍ Java!

4 JavaScript standardizován organizací ECMA 1998 standard ISO Standardizovaná verze: ECMAScript (původně ECMA-262, dnes ECMAScript 5) Dialekty a odvozeniny: JScript (Microsoft), ActionScript (Flash) Každý si jej implementuje lehce odlišně!

5 JavaScript 101 Programovací jazyk: - interpretovaný - dynamický - slabě typovaný - objektově orientovaný (!) - objekty pomocí rozšíření asociativních polí o prototyp -...

6 JavaScript 101 Programovací jazyk: - funkcionální: - funkce jsou "1st class citizen" ("funkce první třídy") - funkce je i hodnota - anonymní funkce - funkce jako konstruktor objektu

7 JavaScript 101 Syntax podobná jako v C/Javě (C-like): bloky pomocí složených závorek ukončování příkazů středníkem ale NENÍ TO C ani JAVA!

8 JavaScript 101 Citace: JavaScript je prasárna JavaScript je pomalý JavaScript je koncepčně špatný JavaScript je špatná kopie C Společným jmenovatelem: Nepochopení a fakt, že JS není C / Java

9 JavaScript - základy Jednoduché typy: číslo (1, 42, -26, 3.5, , 1e6,...) (JS interně pracuje s čísly float) řetězec ("ahoj", 'svete') logická hodnota (true, false) nic (null)

10 JavaScript - základy Automatická konverze mezi typy "Ahoj" => "100Ahoj" "10" + 20 => "1020" "10" * 1 => "" => "10" Duck typing: "Vypadá to jako číslo a je to tam, kde může být číslo, tak to asi bude číslo"

11 JavaScript - základy Pole: var a = [10, 20, 30, 40, 50] Přístup: a*0+.. a*4+ Počet položek: a.length (=>5)

12 JavaScript - základy Objekt: var o = {prvni: 10, druhy:20, treti:30} (dvojice klíč:hodnota) Přístup jako k objektu: o.prvni, o.druhy, o.treti Přístup jako k poli: o*"prvni"+ Jednotlivé prvky procházíme konstrukcí for (key in o) {... }

13 JavaScript - základy Uvedené informace jsou jen naprosté základy! Celá problematika je mnohem složitější

14 JavaScript - základy Funkce: function add (x,y) { return x+y; } var x = soucet(10, 20); var y = soucet("ahoj", 42);

15 JavaScript - základy Funkce jsou hodnota, takže je můžeme přiřadit proměnné: var add = function(x,y) { return x+y; } Tento zápis je funkčně identický s předchozím

16 JavaScript - základy Třídy jako v Javě Nejsou! Dědičnost jako v Javě Není! Viditelnost (private...) Není!

17 JavaScript - základy Jak se tedy řeší OOP konstrukce? Prototypováním funkcí (pokročilé téma, pro zájemce:

18 JavaScript - základy Viditelnost proměnných: 1. Pomocí "var" definujeme lokální proměnnou pro blok (funkci, tělo smyčky,...) var a = 10; function x() { var a = 20; //zde má a hodnotu 20 } x(); //zde má a hodnotu 10

19 JavaScript - základy Viditelnost proměnných: 2. Není-li lokální definice, použije se globální var a = 10; function x() { a = 20; //bez VAR!!! //zde má a hodnotu 20 } x(); //zde má a hodnotu 20 ve funkci jsme si ji přepsali

20 JavaScript - základy Viditelnost proměnných: Test co vypíše alert()? var a = 10; function x() { alert(a); var a; a = 20; } x();

21 JavaScript - základy Důkaz místo slibů...

22 JavaScript - základy Viditelnost proměnných: 3. V bloku se nejprve vytvoří všechny proměnné, pak teprve vykonává kód var a = 10; function x() { alert(a); //UNDEFINED! var a; a = 20; }

23 JavaScript - základy Jazykové konstrukce if (podmínka) {...} if (podmínka) {...} else {...} while (podmínka) {...} for (iniciace;podmínka;aktualizace) {...} for (var i=0; i<10; i++) {alert(i);} for (klic in objekt) {...}

24 JavaScript + HTML Do stránky lze vložit několika způsoby: 1. Přímo: <script>... </script> 2. Odkazem na soubor: <script src="/js/skript.js">

25 JavaScript + HTML 3. Přímo jako obsluhu událostí <a href="#" onclick="alert(1)">klikni sem!</a>

26 Události? HTML elementy mohou reagovat na akce uživatele (nejčastěji myš, klávesnice, dotyková gesta) a vyvolat "událost", kterou lze pomocí skriptu obsloužit Akce: kliknutí (onclick, ondblclick), najetí myší (onmouseover), odjetí myší (onmouseout), aktivace (onfocus), deaktivace (onblur), stisk klávesy (onkeypress), puštění klávesy (onkeyup), změně hodnoty (onchange), výběru textu (onselect)...

27 JavaScript + HTML Ukázka: <!doctype html> <html> <head>... </head> <body> <button id="tlacitko">tlačítko</button> </body> </html>

28 JavaScript + HTML Ukázka, která i něco dělá:... <body> <button id="tlacitko" onclick="alert('ahoj')"> Tlačítko </button> </body> </html>

29 JavaScript + HTML <script> function pozdrav() { alert("ahoj"); } </script> </head> <body> <button id="tlacitko" onclick="pozdrav()">tlačítko</button>

30 JavaScript + HTML <script> var pocet = 0; function pozdrav() { pocet++; alert("stisknuto "+pocet+"-krát"); } </script>

31 JavaScript + HTML Hezké, ale co dál...?...víc po přestávce!

Podobné dokumenty

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 14 VY 32 INOVACE 0101 0314

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace Šablona 14 VY 32 INOVACE 0101 0314 VÝUKOVÝ MATERIÁL Identifikační údaje školy Číslo projektu Název projektu Číslo a název šablony Autor