JavaScript 101 "Trocha života do statických stránek"
Nacionále: JavaScript 101 Vznik: Netscape, 1995 Původně Mocha, později LiveScript, nakonec z marketingových důvodů přejmenován na JavaScript
JavaScript 101 JavaScript NENÍ Java!
JavaScript 101 1997 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ě!
JavaScript 101 Programovací jazyk: - interpretovaný - dynamický - slabě typovaný - objektově orientovaný (!) - objekty pomocí rozšíření asociativních polí o prototyp -...
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
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!
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
JavaScript - základy Jednoduché typy: číslo (1, 42, -26, 3.5, 3.1415, 1e6,...) (JS interně pracuje s čísly float) řetězec ("ahoj", 'svete') logická hodnota (true, false) nic (null)
JavaScript - základy Automatická konverze mezi typy 100 + "Ahoj" => "100Ahoj" "10" + 20 => "1020" "10" * 1 => 10 10 + "" => "10" Duck typing: "Vypadá to jako číslo a je to tam, kde může být číslo, tak to asi bude číslo"
JavaScript - základy Pole: var a = [10, 20, 30, 40, 50] Přístup: a*0+.. a*4+ Počet položek: a.length (=>5)
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) {... }
JavaScript - základy Uvedené informace jsou jen naprosté základy! Celá problematika je mnohem složitější
JavaScript - základy Funkce: function add (x,y) { return x+y; } var x = soucet(10, 20); var y = soucet("ahoj", 42);
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
JavaScript - základy Třídy jako v Javě Nejsou! Dědičnost jako v Javě Není! Viditelnost (private...) Není!
JavaScript - základy Jak se tedy řeší OOP konstrukce? Prototypováním funkcí (pokročilé téma, pro zájemce: http://zdrojak.root.cz/serialy/oop-vjavascriptu/)
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
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
JavaScript - základy Viditelnost proměnných: Test co vypíše alert()? var a = 10; function x() { alert(a); var a; a = 20; } x();
JavaScript - základy Důkaz místo slibů...
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; }
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) {...}
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">
JavaScript + HTML 3. Přímo jako obsluhu událostí <a href="#" onclick="alert(1)">klikni sem!</a>
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)...
JavaScript + HTML Ukázka: <!doctype html> <html> <head>... </head> <body> <button id="tlacitko">tlačítko</button> </body> </html>
JavaScript + HTML Ukázka, která i něco dělá:... <body> <button id="tlacitko" onclick="alert('ahoj')"> Tlačítko </button> </body> </html>
JavaScript + HTML <script> function pozdrav() { alert("ahoj"); } </script> </head> <body> <button id="tlacitko" onclick="pozdrav()">tlačítko</button>
JavaScript + HTML <script> var pocet = 0; function pozdrav() { pocet++; alert("stisknuto "+pocet+"-krát"); } </script>
JavaScript + HTML Hezké, ale co dál...?...víc po přestávce!