Popis a použití knihovny JS
Připravená jednoduchá JS knihovna umožňuje zařadit do stránek jednoduchá dinamické části.
Připojení knihovny do stránek se provádí elementem script v hlavičce stránky viz:
<script src="knihovnaJS.js" type="text/javascript"></script>
Při použití je pak možné přidat do elementů atributy, který příslušný JS kód spustí.
Těmto atributům se říká události a jde o následující:
- onClick - po kliknutí myši
- onLoad - po načtení prvku (stránky)
- onDblClick - po dvojkliku
- onMouseOver - po najetí myši
- onMouseOut - po odjetí myši
- oMouseUp - po puštění tlačítka myši
- onMouseDown - po zmáčknutí tlačítka myši
- onFofus - po vybrání tabulátorem
- onBlur - po odebrání aktivity tabulátorem
Hodnotou těchto atributů může být obecně JavaScript kód.
Při přilinkované knihovně funkcí, je pak možné spouštět připravené funkce.
Pro obarvení pozadí aktuálního prvku po kliknutí myši je možné použít tento kód:
onClick="obarvi_pozadi(this,'red')"
Volá se tedy funkce obarvi_pozadi(), která má dva paramery. První s hodnotou this říká, že se obarvý aktuální prvek. Druhý pak obsahuje zápis barvy jak jej známe z CSS.
Pokud by se měl obarvit jiný prvek, je třeba jej identifikovat. To lze udělat pomocí funkce "najdi_prvek(ID)", které se předá jako parametr hodnota atribudu "id" daného elementu.
Pro obarvení prvku s názvem "menu" se napíše následující kód:
onDblClick="obarvi_text(najdi_prvek('menu'),'blue'); "
V knihovně jsou připravenz následující funkce (s popisem):
- obarvi_pozadi(prvek,barva); /*obarvi predany prvek - pozadi*/
- obarvi_text(prvek,barva); /*obarvi predany prvek - barva textu*/
- skrytID(ID); /*skryje predany prvek (ID) */
- zobrazID(ID); /*zobrazi predany prvek (ID) (blokovy element) */
- zobrazit_skrytID(ID); /*opakovane zobrazuje a skryva predany prvek jako ID (blokovy element)*/
- prepinej_barvu(prvek, barva1, barva2); /*opakovane meni barvu predaneho prvku (text) (blokovy element)*/
- prepinej_pozadi(prvek, barva1, barva2); /*opakovane meni barvu predaneho prvku (text) (blokovy element)*/
- najdi_prvek(ID); /*najde prvek podle ID a vrátí odkaz na prvek*/
- dejID(ID) ; /*stejné jako najdi_prvek(ID)*/
- nastav_vlastnost(prvek,vlastnost, hodota); /*nastavi danou vlastnost na hodnotu*/
- prepinej_vlastnost(prvek,vlastnost, hodnota1, hodnota2); /*prepina danou vlastnost mezi dvema hodnotami*/
- nastav_tridu(prvek, hodota) /*nastavi v HTML atribut class na danou hodnotu*/
- nastav_atribut(prvek,atribut, hodota) /*nastavi v HTML zvoleny atribut na danou hodnotu*/
- prepinej_tridu(prvek, hodnota1, hodnota2) /*Přepíná u prvk dvě třídy CSS*/
- prepinej_atribut(prvek,atribut, hodnota1, hodnota2) /*Přepíná hodnotu zvoleného atributu*/