JavaScript
Odporúčané tutoriály:
http://www.jakpsatweb.cz/javascript/
http://www.w3schools.com/jsref/
Predpoklad pre ďalšie čítanie tohto dokumentu je orientačná znalosť HTML, CSS a jazyka Java. V ďalšom
budeme používať miesto JavaScript skratku JS.
Čo je JS a načo sa používa
-
klientský skriptový jazyk, teda vykonáva sa len na strane prehliadača,
-
vytvorený na oživenie webových stránok, môže byť priamo v HTML kóde, ošetruje udalosti klienta,
-
interpretovaný – nekompiluje sa, premenné sú beztypové (pri deklarácii sa neuvádza typ),
-
case sensitive, syntax podobná jazykom C, Java, v žiadnom prípade to ale nie je Java,
-
objektový, vrátane využívania objektov prehliadačov a vďaka DOM aj s RW prístupom na elementy
HTML súboru (dokonca vrátane CSS selektorov),
-
funguje len v prehliadači, dokonca na rôznych prehliadačoch môže fungovať inak (prípadne
nefungovať), používateľ ho v prehliadači môže vypnúť,
-
kvôli bezpečnosti nevie pristupovať k súborom na počítači (okrem ukladania textových informácií cookies) a má aj obmedzenie na prístup do clipboardu.
Zapojenie JS do HTML
JS je podobne ako CSS v samostaných súboroch (prípona .js) alebo priamo v HTML kóde – vtedy je
v elemente script. Obvykle je umiestnený v elemente head, ale môže byť teoreticky všade v kóde.
<script type="text/javascript" src="tmp.js"></script> <!—prilinkovanie -->
<script type="text/javascript"> <!—- priamo v kóde -->
function tmp() { ...
}
</script>
JS ako programovací jazyk
Syntax je podobná jazyku Java, takže príkazy sa končia bodkočiarkou, komentáre sú // alebo /* */, bloky sa
zapisujú v {}, parametre funkcií v(). Stringy sa môžu písať vnútri úvodzoviek alebo apostrofov.
Typy
JS je beztypový, teda jednej premennej vieme priradiť v jednom príkaze číslo a ďalšom povedzme string
alebo objekt a nebude to žiadna chyba. Ale aj tak tu máme typy – jednoduché (číslo, boolean), polia
a samozrejme objekty. Niektoré z objektov:
String
- vlastnosti: length (dĺžka stringu, pozor, na rozdiel od Javy je to vlastnosť),
-
niektoré funkcie: charAt (znak na pozícii), concat (spájanie stringov), indexOf, lastIndexOf
(vyhľadávanie reťazca), toLoweCase, toUpperCase (zmena na malé, veľké písmená), split
(rozdelenie do položiek poľa)
Pole
-
rôzne definície:
var pole = new Array();
var auta = ["skoda", "fiat", "volvo"]; //3 prvky v poli
auta[auta.length] = "audi"; //aj tak sa dá pridať na koniec poľa
var pole2 = new Array(1, 2, 3, 4); //4 prvky v poli
var pole3 = new Array(2); //veľký pozor, jedno číslo hovorí o dĺžke poľa
-
vlastnosti: length (dĺžka poľa),
-
niektoré funkcie: concat (pripojenie poľa), join (spojenie prvkov poľa do stringu) ...
Math
Práca s matematickými a goniometrickými funkciami.
Number
Práca s číslami (presnosť na desatinné miesta, exponenciálny tvar výpisu a podobne)
Date
new Date() vyrobí objekt obsahujúci aktuálny dátum a čas, inak je práca podobná ako s Date v Jave, pozor,
mesiace sa číslujú od 0 do 11. Tiež sa tu pracuje s milisekundami od 1. 1. 1970.
Premenné
Deklarujú sa kľúčovým slovom var, definovať sa dá aj bez deklarácie. Case sensitive. Boolean hodnoty sú
true a false. Premenným sa priraďuje hodnota pomocou =. Príklady:
var x; // deklarácia premennej, hodnota nie je definovaná
var y, z = "js"; //deklarácia dvoch premenných, hodnota z je string js
b = false; //definovanie premennej bez deklarácie, hodnota false
Operátory
Veľmi podobné jazyku Java.
-
číselné operátory sú +, -, *, /, dajú sa použiť aj kombinácie ako += (pripočítanie), -=, *=, /=, ++ a –
(pripočítanie a odpočítanie 1).
-
stringové operátory: konkatenácia dvoch stringov je pomocou +. Výsledkom konkatenácie stringu
a čísla alebo boolean hodnoty je string,
-
logické operátory sú == (rovnosť), != (nerovnosť), <, <=, >=, > aritmetické porovnávanie, ! (negácia),
&& (a), || (alebo), ? : (podmienkový výber, ternárny operátor).
Podmienky a vetvenie
Rovnako ako v Java, používame if (podmienka) {...} else {}, prípadne kombináciu switch – case – break.
Cyklus
Rovnako ako v Java, používame for / while / do - while cykly. Prerušenie cyklu je takisto kľúčovým slovom
break, pokračovanie continue.
Špecialitou je cyklus pre prechod poľom for – in (niečo podobné ako v Java 5+).
Globálne JS vlastnosti a funkcie
Vlastnosti (sú to vlastne akoby kľúčové slová)
Infinity (nekonečno), NaN (nie je číslo), undefined (nedefinovaná hodnota)
Funkcie
- decodeURI, encodeURI, escape, unescape (zakódovanie a odkódovanie URI cesty, stringu),
-
parseFloat, parseInt – vyrobenie čísel zo stringu,
-
eval – strig bude rozparsovaný a vykonaný ako JS príkaz,
-
isFinite, isNaN – test na konečnosť a validnosť čísla.
JS, prehliadač a operačný systém
Základným objektom na prístup k informáciám o klientskom OS a používanom prehliadači je objekt
window. Nie je súčasťou štandardov, ale podporujú ho všetky majoritné prehliadače (IE, FF, Opera, Chrome,
Safari). Niektoré funkcie a vlastnosti nefungujú všade, pri týchto bude skratka ZOP (závislé od prehliadača).
window
Reprezentuje okno prehliadača (iframe má vlastné window). Keďže je to objekt, má podobjekty, funkcie
a properties:
Funkcie:
- open (otvorenie nového okna prehliadača), close (zatvorenie okna),
-
alert (zobrazenie oznamu), confirm (položenie otázky s A/N možnosťami odpovede), prompt
(zobrazenie inputboxu pre zadanie hodnoty používateľom),
-
focus, blur (aktivovanie a deaktivovanie okna),
-
setInterval, setTimeout (nastavenie opakovania js kódu v istom intervale alebo jednorazovo, teda
akoby vypustenie ďalšieho threadu), clearInterval, clearTimeout (zrušenie vykonania),
-
resizeBy, resizeTo (zmena veľkosti o istý počet pixelov, na presný počet pixelov), moveBy, moveTo
(posun okna), scrollBy, scrollTo (naskrolovanie obsahu),
Properties (vlastnosti):
- screenLeft, screenX (obe hovoria o x-ovej pozícii okna na obrazovke), screenTop, screenY (obe
hovoria o y-ovej pozícii okna na obrazovke), ZOP,
-
parent, top, self, opener (rodičovské okno, okno najvyššie v hierarchii, okno samotné, okno, ktoré
ma otvorilo),
-
name (názov okna),
-
frames (pole všetkých frame-ov a iframe-ov, teda pole okien vnorených v okne),
-
closed (či je okno zatvorené),
-
status (oznam v lavom dolnom rohu prehliadača)
Objekty window:
navigator
Obsahuje informácie o prehliadači: kódové meno, názov a verzia prehliadača, či sú povolené cookies a java
a userAgent – súčasť hlavičky requestu, ktorý prehliadač zasiela na server (takto na servri vieme určiť, aký
prehliadač používateľ používa a podľa toho prípadne upraviť výstup, teda response).
screen
Zaujímavý je len pre získanie rozmerov obrazovky.
history
Pohyb v histórii navštívených stránok
location
Obsahuje informácie o URL (protokol, host, port, cesta...).
document
Základ pre prácu s obsahom HTML dokumentu. Obsahuje:
-
polia objektov (collections): anchors (odkazy), forms (formuláre), images (obrázky) a links (linky).
-
vlastnosti, napríklad URL, title, cookie (všetky dvojice kľúč/hodnota),
-
metódy zápisu – open, write, writeln, close,
-
metódy na prístup k elementom – getElementById, getElementsByName,
getElementsByTagName. Vďaka nim máme možnosť meniť nielen obsah elementov, ale napríklad
aj štýlov.
DOM – document object model
http://www.w3.org/TR/REC-DOM-Level-1/idl-definitions.html
Ide o štandardizovný W3C interface, ktorým sa pristupuje k elementom v HTML, XHTML a XML
dokumentoch. V JS je tento interface tiež imlementovaný a hojne využívaný. Popíšeme len úplné základy:
Node
Uzol v stromovej štruktúre dokumentu. Od neho sú odvodené nielen elementy, ale aj komentáre, obyčajný
text a podobne.
Atribúty:
- nodeName, nodeType, nodeValue, ownerDocument,
-
parentNode, childNodes (pole, resp. NodeList), firstChild, lastChild, previousSibling, nextSibling,
-
attributes
Metódy
- insertBefore, replaceChild, removeChild, appendChild – manipulácia s detskými nodmi,
-
hasChildNodes (má detské nody?), cloneNode (vytvorenie kópie),
Element
Je odvodený od Node, jeho nodeType je ELEMENT_NODE. Jediný atribút je teda tagName.
Metódy (výber)
- getAttribute, setAttribute, removeAttribute – prístup k atribútom (pozor, hodnota atribútu je typu
string),
-
getElementsByTagName – detské elementy podľa tagName
Document
Je tiež odvodený od Node. Má už spomínanú metódu getElementsByTagName a ešte create metódy (napr.
createElement, createTextNode, createComment...). Má pár vlastností - napríklad doctype,
documentElement... Od neho je odvodený HTMLDocument - v našom prípade je totožný
s window.document, ktorý bol popísaný vyššie.
HTMLElement
Je odvodený od Element-u. Keď sa pozrieme na jeho atribúty, zistíme, že sme doma: id, title, lang, dir,
className. Všetky ďalšie HTML elementy sú odvodené od tohto HTMLElementu. Každý z nich má svoje
špecifické vlastnosti a metódy.
Eventy
Event = udalosť. Eventy sú objekty, ktoré nesú informáciu o tom, čo sa s dokumentom a jeho elementami
práve deje, čo s nimi robí a akým spôsobom používateľ. Tu je zoznam štandardných a ďalších, obvykle
používaných (a nie všade fungujúcich) eventov:
-
na dokumente onload, onunload (natiahnutie a vymazanie dokumentu z okna prehliadača),
-
zmena veľkosti a posun – onresize, onscroll,
-
získanie a strata fokusu – onfocus, onblur,
-
stlačenie a pustenie tlačidiel myši – onmousedown, onmouseup, onclick, ondblclick,
-
pohyb myšou - onmousemove, onmouseout, onmouseover,
-
klávesy: onkeydown, onkeyup, onkeypress,
-
selekcia v dokumente – onselect, zmena hodnoty (napríklad inputu) – onchange,
-
formulárové – onsubmit, onreset,
-
ďalšie – onerror, onabort (prerušenie načítania napríklad obrázku), oncopy, onpaste, oncut,
oncontextmenu...
Spravidla platí, že žiaden prehliadač nepodporuje všetko a úplne, preto treba stránky robiť čo
najjednoduchšie. Samozrejme s nástupom nových verzií sú podporené aj nové veci, ale rovnaké to asi
nebude nikdy. Špecialnym je IE, ktorý podporuje dosť veľa neštandardných eventov a ich vlastností.
Základné atribúty eventov
-
type (o aký event ide),
-
pozícia kurzora myši – clientX, clientY, screenX, screenY, button,
-
ktorý kláves myši bol stlačený – button,
-
ktoré kontrolné klávesy sú stlačené – altKey, shiftKey, ctrKey,
-
ktoré klávesy sú stlačené – keyCode, charCode,
-
bublanie (firovanie eventu na rodičovskom elemente) – závislé od prehliadača.
Pripojenie eventu k elementu
Priamo v HTML to je jednoduché:
<button onclick=’onClickHandler(event, this)’>Stlač ma</button>
Tento príklad demonštruje viac vecí – v prvom rade, že sa očakáva existencia metódy onClickHandler.
Prvým parametrom tejto metódy je samotný event – takto zapísané to bude fungovať v majoritných
browsroch. Druhý parameter je this, teda element, na ktorom bola udalosť vyvolaná.
Pridanie udalosti na element dynamicky je o dosť zložitejšie a je pri tom problém s parametrami funkcie,
ktorá by sa mala vyvolať, takže ak sa dá, treba sa tomu vyhnúť. Príklad napojenia jednoduchej funkcie fn:
function cmn_addEventSimple(element, evt, fn, useCapture) {
if (element.addEventListener) { //standard, funguje vo FF
element.addEventListener(evt, fn, useCapture);
} else if (element.attachEvent) { //v IE
element.attachEvent("on" + evt, fn);
}
}
Táto problematika je široká, viac napríklad na http://www.w3.org/TR/DOM-Level-3-Events .
Vyššia škola JS
Exception
Podobne ako v Java – obalenie rizikového kódu umožní pokračovanie a nezamrznutie aplikácie:
try {
...
} catch (e) {
alert ("nastala chyba");
}
Zmena štýlu a hodnoty
Príklad: jednoduchaZmena.html
Objekty
Nové objekty sa v JS definujú ako funkcia. Príklad: objektPublicPrivate.html
Prototypy (dedičnosť, prekrývanie, public a private metódy a vlastnosti)
Prototyp je „predok“ objektu. Príklad: objektPrototyp.html
Detekcia browsra
Existujú rôzne spôsoby. Príklad: browserDetect.js, použitie v common.js. Do html treba tieto dva súbory
pripojiť v uvedenom poradí.
Download

Použitie ARIA property vo WebUI