Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

JavaScript knjižnice (Frameworks)

Napredno JavaScript programiranje je lahko zelo težavno in časovno potratno. Za pomoč pri JavaScript programiranju so bile razvite mnoge knjižnice, ki jih angleško mnogokrat imenujemo tudi Frameworks. Vse te knjižnice imajo vgrajene funkcije, ki so v pomoč JavaScript opravilom, kot npr. animacijam, HTML DOM manipulacijam, AJAX opravilom...

Najpopularnejše JavaScript knjižnice so:

  • jQuery
  • Prototype
  • MooTools

Seznam knjižnic je objavljen na Wikipediji.

jQuery

jQuery je knjižnica z JavaScript funkcijami, ki omogočajo:

  • izbiro in manipulacijo s HTML elementi
  • manipulacijo z dogodki na spletni strani
  • premikanje po HTML DOM modelu in manipulacijo z njegovimi objekti
  • manipulacijo z elementi jezika CSS
  • uporabo že pripravljenih efektov in animacij
  • asinhrono komunikacijo med odjemalcem in strežnikom (AJAX)
  • različna druga podporna orodja

Vključitev knjižnice jQuery na spletno stran

Knjižnico jQuery najdemo na spletnem naslovu http://jquery.com/ v obliki JavaScript datoteke. Vsaka različica knjižnice jQuery je navadno izdana v minimizirani (»minimized«, optimizirani za čim krajše prenose) in razhroščevalni obliki (»debug«, berljiva končnemu uporabniku).

jQuery uporabimo na spletni strani, tako da dodamo v glavo spletne strani sledeč HTML element:

<script src="jquery.js"></script>

Knjižnico jQuery lahko uporabimo tudi, če je ne prenesemo na lokalni računalnik. To storimo tako, da uporabimo enega izmed gostiteljev knjižnice jQuery, na primer Microsoft ali Google. Primer:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Uporaba knjižnice jQuery

Osnovni ukaz za delo s knjižnico jQuery ima sledečo obliko:

$(selektor).dejanje()

Pri tem je:

  • $ - znak, ki nakazuje, da se sklicujemo (uporabljamo) knjižnico jQuery
  • selektor - izraz, ki izbere nek HTML element
  • dejanje() - funkcija knjižnice jQuery, ki izvede neko dejanje na izbranem elementu

Tako na primer ukaz $("p").hide() skrije vse odstavke na spletni strani.

Vsi ukazi za delo s knjižnico jQuery so navadno vključeni v ukaz, ki preprečuje izvajanje jQuery funkcij, preden se spletna stran ne naloži v celoti:

$(document).ready(function() {

	// moja jQuery koda

});

Primera kode, ki ne bi delovala, ko stran še ni naložena, sta:

  • skrivanje elementa, ki še ne obstaja
  • branje velikosti slike, ki še ni naložena

Selektorji knjižnice jQuery

jQuery uporablja selektorje jezikov CSS in XPath. Primera:

  • $("img.mojaSlika")- izbere vse slike, ki so uvrščene v razred mojaSlika
  • $("[href$='.jpg']")- izbere vse elemente z atributom href, katerega vrednost se konča z ".jpg"

Za spreminjanje stila, ki je na spletni strani določen z jezikom CSS uporabimo lastnost css. Spodnji ukaz tako spremeni barvo ozadja v vseh odstavkih na spletni strani: 

$("p").css("background-color","green");

Več primerov uporabe selektorjev najdemo na spletnem naslovu w3schools.

Dogodki knjižnice jQuery

Podobno kot običajne JavaScript funkcije so tudi funkcije knjižnice jQuery klicane, ko se zgodi nek dogodek, povezan s spletno stranjo. Spodnji primer prikazuje uporabo dogodka klik na elementu spletne strani button:

$("button").click(function(){
  
	// kaj se zgodi?
    
});

Več primerov uporabe dogodkov najdete na spletnem naslovu w3schools.

Efekti in povratni klici knjižnice jQuery

Knjižnica jQuery ponuja tudi široko izbiro pripravljenih efektov, ki jih najdete na spletni strani w3schools.

Povratni klici so uporabni pri animacijah. Povratni klic se izvede, ko se animacija konča. Primer povratnega klica najdete na w3schools.

Nazaj
Naprej