Nauite

jQuery
V idanje
3
Izgradite interesantne, interaktivne sajtove, koristei jQuery,
automatizovanjem uobiajenih i pojednostavljivanjem
komplikovanih zadataka
adam boduch
jonathan chaffer
karl swedberg

Nauite
jQuery 3
V izdanje
Izdava: Learning jQuery 3
Fifth Edition
by Adam Boduch, Jonathan Chaffer and Karl Swedberg
ISBN 978-1-78588-298-2
Obalskih radnika 15, Beograd Copyright 2017 Packt Publishing
Fifth edition: May 2017
Tel: 011/2520272
All right reserved. No part of this book may be reproduced or
e-mail: kombib@gmail.com transmitted in any form or by means, electronic or mechanical,
including photocopying, recording or by any information storage
internet: www.kombib.rs retrieval system, without permission from the Publisher.
Autorizovani prevod sa engleskog jezika edicije u izdanju
Urednik: Mihailo J. olaji Packt Publishing, Copyright 2017.

Za izdavaa, direktor: Sva prava zadrana. Nije dozvoljeno da nijedan deo ove knjige
Mihailo J. olaji bude reprodukovan ili snimljen na bilo koji nain ili bilo
kojim sredstvom, elektronskim ili mehanikim, ukljuujui
Autori: Adam Boduch fotokopiranje, snimanje ili drugi sistem presnimavanja
informacija, bez dozvole izdavaa.
Jonathan Chaffer
Karl Swedberg Zatitni znaci
Kompjuter Biblioteka i Packt Publishing su pokuali da u ovoj
Prevod: Slavica Prudkov knjizi razgranie sve zatitne oznake od opisnih termina, pratei
stil isticanja oznaka velikim slovima.
Lektura: Milo Jevtovi Autor i izdava su uinili velike napore u pripremi ove knjige, iji
je sadraj zasnovan na poslednjem (dostupnom) izdanju softvera.
Slog: Zvonko Aleksi Delovi rukopisa su moda zasnovani na predizdanju softvera
dobijenog od strane proizvoaa. Autor i izdava ne daju nikakve
Znak Kompjuter biblioteke: garancije u pogledu kompletnosti ili tanosti navoda iz ove knjige,
Milo Milosavljevi niti prihvataju ikakvu odgovornost za performanse ili gubitke,
odnosno oteenja nastala kao direktna ili indirektna posledica
korienja informacija iz ove knjige.
tampa: Apollo Plus D.O.O.
Beograd

Tira: 500

Godina izdanja: 2017.

Broj knjige: 493

Izdanje: Prvo

ISBN: 978-86-7310-5xx-x
O autorima
Adam Boduch je u velikoj meri bio ukljuen u JavaScript razvoj skoro 10 godina. Pre nego to je
preao na eoni prikaz, radio je na nekoliko velikih proizvoda cloud raunarstva, koristei Python i
Linux. Kompleksnost mu nije strana - on ima praktino iskustvo sa stvarnim softverskim sistemima i
sa problemima koje oni izazivaju.
Adam je autor nekoliko knjiga o JavaScriptu, ukljuujui React i React Native, i veoma je zain-
teresovan za inovativna korisnika iskustva i visoke performanse.
Zahvaljujem se Johnu Resigu za kreiranje jQueryja i celoj jQuery
zajednici to su imali veoma pozitivan uticaj na veb programiranje.

Jonathan Chaffer je lan firme za veb razvoj Rapid Development Groupe, koja se nalazi u Grand
Rapidsu, u Michiganu. Njegov posao ukljuuje nadgledanje i implementaciju projekata u irokom
spektru tehnologija, sa naglaskom na PHP, MySQL i JavaScript. U zajednici otvorenog koda on je bio
veoma aktivan u Drupal CMS projektu, koji je usvojio jQuery kao svoj izborni JavaScript radni okvir.
On je tvorac Content Construction Kita koji je sada deo Drupal osnove (ona se koristi za upravljanje
strukturiranim sadrajem). Takoe je odgovoran za velike prepravke Drupalovog sistema menija i
developer API reference. U slobodno vreme projektuje drutvene igre i igre kartama za hobi trite.
ivi u Grand Rapidsu, sa svojom suprugom Jennifer.

Karl Swedberg je veb programer u Fusionary Media u Grand Rapidsu, u Michiganu, gde veinu
svog vremena provodi u pisanju JavaScripta i na strani klijenta i na strani servera. Kada ne progra-
mira, voli da provodi vreme sa svojom porodicom i da veba u lokalnoj teretani.

O recenzentu
Andrew Kurz je UI/UX dizajner i programer sa vie od 12 godina iskustva u projektovanju i izgrad-
nji veb sajtova i online aplikacija. Radio je za i mala preduzea i za velike korporacije. Uiva da
ui nove tehnologije i ceni atraktivne aplikacije jednostavne za upotrebu. ivi u Atlanti, sa svojom
suprugom i troje dece. Moete da pregledate njegov portfolio i da kontaktirate sa njim na adresi www.
kurzstudio.com.
 UVOD

Poeo sam da koristim jQuery 2007. godine i koristim ga jo uvek. Dodue, mnogo to-
ta se desilo u meuvremenu: pojavile su se nove JavaScript biblioteke, vie je dosled-
nosti izmeu pretraivaa i postignuta su poboljanja u samom JavaScriptu. Ono to se
za ovih 10 godina nije promenilo je ekspresivnost i doslednost jQuerya. Bez obzira na
postojanje odlinih naprednih tehnologija, jQuery ostaje omiljena alatka za brzo i efika-
sno izvravanje posla.
Ova knjiga ostaje netaknuta u svom petom izdanju. Ona je uspena zato to je veoma
jasna i jednostavna za praenje. Trudio sam se da sauvam sve ono to je dobro funk-
cionisalo u ovoj knjizi. Moj cilj je popularizacija uenja jQuerya za veb programiranje.

ta ObuHvata Ova knjiga

U Poglavlju 1, Poetak rada, upoznaete jQuery JavaScript biblioteku. Poglavlje
zapoinje opisom jQuerya i onoga to on moe da uradi za vas. Zatim ete proi kroz
korake preuzimanja i podeavanja biblioteke, kao i kroz pisanje prvog skripta.
Poglavlje 2, Selektovanje elemenata, pomoi e vam da nauite kako da upotrebite
izraze selektora jQuerya i metode za kretanje po DOM-u za pronalaenje elemenata na
stranici, gde god da se oni nalaze. Upotrebiete jQuery za primenu stilova na razliite
setove elemenata stranice.
Poglavlje 3, Obrada dogaaja, vodi vas kroz jQueryov mehanizam obrade dogaaja
za pokretanje ponaanja kada se desi dogaaj u pretraivau. Videete kako jQuery
olakava nenametljivo povezivanje elemenata, ak i pre nego to se zavri uitavanje
stranice. Osim toga, opisaemo detaljnije neke teme, kao to su bubbling dogaaja, pro-
sleivanje i imenovanje.
U Poglavlju 4, Stilizovanje i animiranje, predstaviemo vam tehnike animacije u jQu-
eryu i kako da sakrijete, prikaete i pomerate elemente na stranici pomou efekata koji
su korisni i prijatni za oko.
U Poglavlju 5, Manipulisanje DOM-om, nauiete kako da promenite stranicu po
komandi. Takoe ete nauiti kako da promenite samu strukturu HTML dokumenta i da
u njega dodate sadraj u toku rada.

1
UVOD

Poglavlje 6, Slanje podataka pomou Ajaxa, vodi vas kroz mnoge naine na koje jQu-
ery olakava pristup funkcionalnostima servera bez potrebe da se konstantno osveava
stranica. Kada budete imali osnovne komponente biblioteke pri ruci, biete spremni da
istraite kako biblioteka moe da se proiri da biste je prilagodili svojim potrebama.
U Poglavlju 7, Upotreba dodatnih modula, prikazano je kako da pronaete, instalirate
i upotrebite dodatne module, ukljuujui mone biblioteke dodatnih modula jQuery UI i
jQuery Mobile.
U Poglavlju 8, Razvijanje dodatnih modula, nauiete kako da iskoristite impresivne
mogunosti proirenja jQuerya za razvijanje sopstvenih dodatnih modula od nule. Kre-
iraete sopstvene pomone funkcije, dodaete metode jQuery objekta i otkriete kriera-
nje jQuery UI videta. Zatim ete pregledati gradivne blokove jQuerya i nauiete vie
naprednih tehnika.
Poglavlje 9, Napredni selektori i traversali, upotpunie vae znanje o selektorima i tra-
versalima, pa ete moi da optimizujete selektore za performansu manipulisanjem stekom
DOM elemenata i pisanjem dodatnih modula koji proiruju mogunosti selektovanja i
kretanja.
U Poglavlju 10, Napredni dogaaji, detaljnije ete zaroniti u tehnike kao to su pro-
sleivanje i priguivanje, to moe znatno da pobolja performansu obrade dogaaja.
Takoe ete kreirati prilagoene i specijalne dogaaje koji dodaju vie mogunosti u jQu-
ery biblioteku.
U Poglavlju 11, Napredni efekti, pokazaemo vam kako da fino podesite vizuelne
efekte jQuerya koji mogu da se obezbede kreiranjem prilagoenih funkcija i reagovanjem
na svaki korak animacije. Moi ete da manipuliete animacijama kada se one prikau i da
rasporedite akcije prilagoenim redosledom.
Poglavlje 12, Napredna DOM manipulacija, obezbeuje vam praksu modifikovanja
DOM-a pomou tehnika kao to je dodavanje proizvoljnih podataka u elemente. Takoe
ete nauiti kako da proirite nain na koji jQuery obrauje CSS svojstva u elementima.
Poglavlje 13, Napredni Ajax, pomoi e vam da bolje razumete Ajax transakcije, uklju-
ujui jQuery sistem odloenih objekata za rukovanje podacima koji mogu kasnije postati
dostupni.
U Dodatku A, Testiranje JavaScripta pomou Qunita, predstaviemo vam QUnit bibli-
oteku koja se koristi za testiranje JavaScript programa. Ova biblioteka e biti veliki doda-
tak alatima za programiranje i odravanje visokosofisticiranih veb aplikacija.
Dodatak B, Reference, sadri pregled cele jQuery biblioteke, ukljuujui svaki od
metoda i izraza selektora. Format ovog dodatka je veoma jednostavan za praenje i savr-
en je za one momente kada znate ta elite da uradite, ali niste sigurni koji je taan naziv
metoda ili selektora.

2
 ta vam je potrebno za ovu knjigu

ta vam je potrebno za ovu knjigu

Da biste pokrenuli primer koda koji je predstavljen u ovoj knjizi, potreban vam je mode-
ran veb pretraiva, kao to su Google Chrome, Mozilla Firefox, Apple Safari ili Micro-
soft Edge.
Da biste eksperimentisali sa primerima i da biste radili vebe na kraju poglavlja, takoe
vam je potrebno sledee:
osnovni editor teksta
alatke za razvoj veb aplikacija za pretraiva, kao to su Chrome Developer
Tools ili Firebug (kao to je opisano u odeljku Upotreba alatki za razvoj veb
aplikacija u Poglavlju 1, Poetak rada)
ceo paket koda za svako poglavlje, to ukljuuje kopiju jQuery biblioteke (koju
moete da vidite u odeljku Preuzimanje primera koda)
Osim toga, da biste pokrenuli neke Ajax primere u Poglavlju 6, Slanje podataka pomou
Ajaxa, i u narednim poglavljima, potreban vam je Node.js.

Za koga je ova knjiga

Ova knjiga je idealna za JavaScript programere na strani klijenta. Ne treba da imate
prethodno iskustvo sa jQueryem, ali je neophodno osnovno poznavanje JavaScript
programiranja.

Konvencije
U ovoj knjizi pronai ete vie razliitih stilova za tekst koje sam upotrebio za razliite
vrste informacija. Evo nekih primera ovih stilova i objanjenja njihovog znaenja.
Rei koda u tekstu, nazivi tabela baze podataka, nazivi direktorijuma, nazivi fajlova,
ekstenzije fajla, nazivi putanja, kratki URL-ovi, korisniki unos i Twitter identifikatori su
prikazani na sledei nain: Kada damo instrukcije da jQuery pronae sve elemente klase
collapsible i sakrije ih, ne treba kruiti kroz svaki vraeni element.
Blok koda je postavljen na sledei nain:
body {
background-color: #fff;
color: #000;
font-family: Helvetica, Arial, sans-serif;
}
h1, h2, h3 {
margin-bottom: .2em;

3
UVOD

}
.poem {
margin: 0 2em;
}
.highlight {
background-color: #ccc;
border: 1px solid #888;
font-style: italic;
margin: 0.5em 0;
padding: 0.5em;
}

Novi termini i vane rei su napisani masnim slovima. Rei koje vidite na ekranu - na
primer, u menijima ili okvirima za dijalog, bie prikazane u tekstu na sledei nain: Kar-
tica Sources omoguava da prikaemo sadraje svih uitanih skriptova na stranici.

Upozorenja ili vane napomene e biti prikazani u ovakvom okviru.

Saveti i trikovi prikazani su ovako.

Povratne informacije od italaca

Povratne informacije od naih italaca su uvek dobrodole. Obavestite nas ta mislite o
ovoj knjizi ta vam se dopalo ili ta vam se moda nije dopalo. Povratne informacije
italaca su nam vane da bismo kreirali naslove od kojih ete dobiti maksimum.
Da biste nam poslali povratne informacije, jednostavno nam poaljite e-mail na adresu
informatori@kombib.rs i u naslovu poruke napiite naslov knjige.

4
 tamparske greke

Preuzimanje primera koda

Moete da preuzmete fajlove sa primerima koda pratei sledee korake:
1. P osetite veb stranicu knjige Nauite jQuery 3: https://goo.gl/N3Ze3M
2. Kliknite Preuzmite kod: https://goo.gl/4HgcHL
Kada su fajlovi preuzeti, ekstrahujte direktorijum, koristei najnoviju verziju:
WinRAR / 7-Zip za Windows
Zipeg / iZip / UnRarX za Mac
7-Zip / PeaZip za Linux
Kod za ovu knjigu moete da pronaete i na GitHubu na adresi https://github.com/
PacktPublishing/Learning-jQuery-3

tamparske greke
Iako smo preduzeli sve mere da bismo obezbedili tanost sadraja, greke su mogue.
Ako pronaete greku u nekoj od naih knjiga (u tekstu ili u kodu), bili bismo zahvalni
ako biste nam to prijavili. Na taj nain moete da potedite itaoce od frustracije i nama
da pomognete da poboljamo naredne verzije ove knjige. Ako pronaete neku tamparsku
greku, molimo vas da nas obavestite, tako to ete posetiti stranicu knjige: https://goo.gl/
N3Ze3M i ostaviti komentar.

Piraterija
Piraterija autorskog materijala na Internetu je aktuelan problem na svim medijima. Mi u
Packtu zatitu autorskih prava i licenci shvatamo veoma ozbiljno. Ako pronaete ile-
galnu kopiju naih knjiga, u bilo kojoj formi, na Internetu, molimo vas da nas o tome oba-
vestite i poaljete nam adresu lokacije ili naziv web sajta da bismo mogli da podnesemo
tubu.
Kontaktirajte sa nama na adresi copyright@packtpub.com i informatori@kombib.rs poa-
ljite nam link ka sumnjivom materijalu.

5
 1
Poetak rada
Dananji World Wide Web (WWW) je dinamiko okruenje i njegovi korisnici postav-
ljaju visoke zahteve to se tie stila i funkcije sajtova. Da bi izgradili interesantne i
interaktivne sajtove, programeri koriste JavaScript biblioteke, kao to je jQuery, radi
automatizovanja uobiajenih i pojednostavljivanja komplikovanih zadataka. Razlog zbog
kojeg je jQuery popularan izbor je njegova mogunost da pomogne u irokom rasponu
zadataka.
jQuery izvrava mnogo razliitih funkcija. Ipak, u dizajnu biblioteke postoje koherentnost
i simetrija; mnogi od njenih koncepata su pozajmljeni iz strukture HTML-a i Cascading
Style Sheetsa (CSS-a). Dizajn biblioteke omoguava brz poetak dizajnerima koji imaju
malo programerskog iskustva. U stvari, u ovom poetnom poglavlju emo napisati funk-
cionalni jQuery program u samo tri linije koda. Sa druge strane, iskusni programeri e
takoe ceniti ovu konceptualnu doslednost.
U ovom poglavlju emo opisati:
osnovne funkcije jQuerya
podeavanje okruenja jQuery koda
jednostavan funkcionalni primer jQuery skripta
razloge za biranje jQuerya, umesto obinog JavaScripta
uobiajene JavaScript programerske alatke

7
POGLAVLJE 1 Poetak rada

ta jQuery radi?
Biblioteka jQuery obezbeuje sloj apstrakcije opte namene za uobiajeno veb programira-
nje i zbog toga je korisna u skoro svakoj situaciji u toku programiranja. Njena proiriva pri-
roda oznaava da nikada ne moemo da obuhvatimo sve mogue naine upotrebe i funkcije
u jednoj knjizi, jer se konstantno razvijaju dodatni moduli za dodavanje novih mogunosti.
Meutim, osnovne funkcije nam pomau da izvrimo sledee zadatke:
pristupanje elementima u dokumentu - Bez JavaScript biblioteke veb
programeri esto treba da napiu mnogo linija koda da bi se kretali u Document
Object Model (DOM) stablu i locirali specifine delove strukture HTML
dokumenta. Zahvaljujui biblioteci jQuery, programeri imaju robustan i efikasan
mehanizam selektora na raspolaganju, to olakava pronalaenje odreenog dela
dokumenta koji treba da se ispita ili kojim treba da se manipulie.
$('div.content').find('p');

modifikovanje izgleda veb stranice - CSS prua moan metod za uticaj na nain
renderovanja dokumenta, ali zaostaje kada ne podravaju svi pretraivai iste
standarde. Pomou biblioteke jQuery programeri mogu da premoste ovaj jaz,
oslanjajui se na podrku istih standarda u svim pretraivaima. Osim toga,
jQuery moe da promeni klase ili individualna svojstva stila primenjene na deo
dokumenta, ak i nakon to je stranica renderovana.
$('ul > li:first').addClass('active');

menjanje sadraja dokumenta - Ne ograniavajui se samo na kozmetike

promene, jQuery moe da modifikuje i sadraj samog dokumenta uz svega
nekoliko otkucaja. Moe da bude promenjen tekst, slike mogu da budu ubaene ili
zamenjene, liste mogu da budu preorganizovane ili cela struktura HTML-a moe
da bude prepisana i proirena - sve to pomou jednog Application Programming
Interfacea (API), koji je veoma jednostavan za upotrebu.
$('#container').append('<a href="more.html">more</a>');

odgovaranje na interakciju korisnika - ak ni najsloenija i najmonija

ponaanja nisu korisna ako ne moemo da kontroliemo kada se ona deavaju.
Biblioteka jQuery omoguava elegantan nain presretanja irokog raspona
dogaaja, kao to je klik korisnika na link, bez potrebe da se sam HTML kod
proiruje funkcijama za obradu dogaaja.
$('button.show-details').click(() => {
$('div.details').show();
});

8
 Zato jQuery funkcionie dobro?

animiranje promena koje su izvrene u dokumentu - Da bi efikasno

implementirao ovakvo interaktivno ponaanje, dizajner takoe mora da obezbedi
vizuelnu povratnu informaciju korisniku. Biblioteka jQuery to olakava
obezbeivanjem niza efekata, kao to su zamraivanje i nestajanje, kao i setom
alatki za kreiranje novih efekata.
$('div.details').slideDown();

preuzimanje informacija sa servera bez osveavanja stranice - Ovaj ablon

je poznat kao Ajax, to je originalno predstavljalo skraenicu za Asynchronous
JavaScript and XML, ali sada predstavlja mnogo vei set tehnologija za
komunikaciju izmeu klijenta i servera. Biblioteka jQuery uklanja sloenost
specifinu za pretraiva iz procesa, omoguavajui programerima da se
fokusiraju na funkcionalnost na strani servera.
$('div.details').load('more.html #content');

Zato jQuery funkcionie dobro?

Zbog poveanja interesa za dinamiki HTML, dolazi do irenja JavaScript radnih okvira.
Neki su specijalizovani i fokusiraju se samo na jedan ili dva zadatka (prethodno spomenuta).
Neki pokuavaju da katalogiziraju svako mogue ponaanje i animaciju i poslue ih u
unapred kreiranim paketima. Da bi odrala irok raspon funkcija koje su prethodno opisane
i ujedno zadrala relativnu kompaktnost, biblioteka jQuery primenjuje nekoliko strategija:
iskoriavanje znanje CSS-a - Baziranjem mehanizma za lociranje elemenata
stranice na CSS selektorima jQuery nasleuje saet, ali itljiv nain izraavanja
strukture dokumenta. Biblioteka jQuery postaje ulazna taka za dizajnere koji ele
da dodaju ponaanja u svoje stranice, jer je poznavanje CSS sintakse preduslov za
profesionalno veb programiranje.
podrka za ekstenzije - Da bi izbegla lane funkcije, biblioteka jQuery
preusmerava specijalne sluajeve upotrebe dodatnih modula. Metod za kreiranje
novih dodatnih modula je jednostavan i dobro je dokumentovan, to je podstaklo
razvoj raznovrsnih inventivnih i korisnih modula. ak se veina funkcija u
osnovnom jQuery paketu interno realizuje kroz arhitekturu dodatnih modula i one
mogu da budu uklonjene ako je potrebno, to dovodi do jo manje biblioteke.

9
POGLAVLJE 1 Poetak rada

uklanjanje nepravilnosti pretraivaa - Nesrena okolnost u veb programiranju

je to svaki pretraiva ima sopstveni skup odstupanja od publikovanih standarda.
Znaajan deo svake veb aplikacije moe na drugaiji nain da se prosledi
funkcijama za obradu za svaku platformu. Iako konstantno razvijanje pretraivaa
onemoguava savrenu osnovu koda koja je neutralna za pretraiva za neke
napredne funkcije, jQuery dodaje apstrakciju sloja koja normalizuje uobiajene
zadatke, smanjujui veliinu koda i znatno ga pojednostavljujui.
korienje skupova - Kada jQueryu damo instrukcije da pronae sve elemente
klase collapsible i da ih sakrije, nema potrebe kruiti kroz svaki vraeni
element. Umesto toga, metodi kao to je .hide() namenjeni su da automatski
koriste skupove objekata, umesto pojedinanih objekata. Upotreba ove tehnike,
koja se naziva implicitna iteracija, znai da mnoge strukture kruenja postaju
nepotrebne, to znaajno skrauje kod.
omoguavanje viestrukih akcija u jednoj liniji - Da bi se izbeglo prekomerno
korienje privremenih promenljivih ili napotrebno ponavljanje, jQuery koristi za
veinu svojih metoda programski ablon pod nazivom ulanavanje. Ulanavanje
oznaava da je rezultat veine operacija na objektu sam objekat, koji je spreman
za sledeu akciju koja e na njega biti primenjena.
Ove strategije zadravaju malu veliinu fajla jQuery paketa, dok istovremeno obezbeuju
tehnike da prilagoeni kod koji koristi biblioteku ostane kompaktan.
Elegancija biblioteke se ogleda delimino u dizajnu i delimino u razvojnom procesu koji
iri zajednica korisnika i koji se iri oko projekta. Korisnici biblioteke jQuery sastaju se
i diskutuju ne samo o razvoju dodatnih modula, ve i o poboljanjima u njenoj osnovi.
Korisnici i programeri takoe pomau u kontinualnom poboljanju zvanine dokumentacije
projekta, koju moete da pronaete na adresi http://api.jquery.com.
Bez obzira na sav napor koji je potreban za kreiranje tako fleksibilnog i robusnog sistema,
krajnji proizvod je besplatno dostupan svima za korienje. Ovaj projekat otvorenog koda
je licenciran pod MIT License da bi bila dozvoljena besplatna upotreba biblioteke jQu-
ery na bilo kom sajtu i olakana upotreba ove biblioteke unutar vlasnikog softvera. Ako
projekat zahteva ovu biblioteku, programeri mogu da licenciraju jQuery pod GNU Public
License za ukljuivanje u druge projekte otvorenog koda pod GNU licencom.

ta je novo u verziji jQuery 3?

Promene koje su izvrene u verziji jQuery 3 su prilino suptilne u poreenju sa promenama
koje su uvedene u verziju jQuery 2. Veina promena izvrena je ispod haube. Videete
sada neke od promena i kako e one uticati na postojee jQuery projekte. Moete da pregle-
date detalje na adresi https://jquery.com/upgrade-guide/3.0.

10
 ta je novo u verziji jQuery 3?

Podrka pretraivaa
Najvea promena u podrci pretraivaa u verziji jQuery 3 je podrka za Internet Explo-
rer. Potreba za podrkom starijih verzija ovog pretraivaa je nona mora za svakog veb
programera. Biblioteka jQuery 3 predstavlja veliki korak napred, jer podrava samo verzije
IE9+. to se tie podrke za druge pretraivae, podrane su aktuelna i prethodna verzija.

Vreme Internet Explorera je prolo. Microsoft je promovisao naslednika

IE pretraivaa, pod nazivom Edge. Ovaj pretraiva je potpuno poseban
projekat od IE pretraivaa (nije optereen njegovim problemima). Osim
toga, najnovije verzije Microsoft Windowsa forsiraju Edge kao standardni
pretraiva; auriranja su regularna i predvidiva.

Deferred objekti
Deferred objekti su predstavljeni u verziji jQuery 1.5 kao sredstvo za bolje upravljanje
asinhronim ponaanjem. Oni su bili poput ES2015 promisa, ali se dovoljno razlikuju da se
ne mogu zameniti. Sada, kada je ES2015 verzija JavaScripta uobiajena u modernim pre-
traivaima, Deferrred objekat je potpuno kompatibilan sa izvornim Promise objektima.
To znai da se mnogo tota promenilo u staroj Deferred implementaciji.

Asinhrono ponaanje spremno za dokument

Ideja da je funkcija povratnog poziva spremna za dokument izvrena asinhrono moda
na prvi pogled izgleda kontraintuitivno. Postoji nekoliko razloga zbog kojih ova funkcija
izgleda kontraintuitivno u jQueryu 3. Prvi razlog je injenica da izraz $(() => {}) vraa
Deferred instancu, a one se onda ponaaju kao izvorni promisi. Drugi razlog je postoja-
nje jQuery.ready promisa koji se reava kada je dokument spreman. Kao to ete videti
kasnije u ovoj knjizi, moete da upotrebite ovaj promis zajedno sa drugim promisima za
izvravanje drugih asinhronih zadataka pre nego to DOM bude spreman za renderovanje.

Sve ostalo
Postoji i niz drugih promena u API-ju koje su predstavljene u verziji jQuery 3 i koje neemo
ovde opisivati. U vodiu za nadgradnju verzije koji sam ranije spomenuo detaljno su opi-
sane sve ove promene i nain kako moemo da ih izvrimo. Meutim, opisau funkcional-
nosti koje su nove ili se razlikuju u verziji jQuery 3.

11
POGLAVLJE 1 Poetak rada

Kreiranje prve veb stranice

koju pokree jQuery
Sada, kada smo opisali raspon funkcija koje su dostupne u jQueryu, moemo da istra-
imo kako se biblioteka pokree. Za poetak, potrebno je da preuzmemo kopiju biblioteke
jQuery.

Preuzimanje jQuerya
Nije potrebna instalacija. Da bismo upotrebili jQuery, potrebna nam je samo javno dos-
tupna kopija fajla, bez obzira da li se ona nalazi na eksternom ili na naem sajtu. Poto je
JavaScript interpretirani jezik, ne postoji faza kompilacije ili izgradnje, o kojoj treba da
brinemo. Kad god je potrebno da stranica ima dostupan jQuery, jednostavno emo uneti
lokaciju fajla iz elementa <script> u HTML dokumentu.
Zvanini veb sajt jQuerya (http://jquery.com/) uvek ima najaurniju stabilnu verziju bibli-
oteke, koja moe da se preuzme direktno sa poetne stranice sajta. U odreenom momentu
moe biti dostupno nekoliko verzija jQuerya; ona koja nama, kao veb programerima, naj-
vie odgovara bie najnovija nekompresovana verzija biblioteke. Ta verzija moe da se
zameni kompresovanom verzijom u proizvodnom okruenju.
Poto je popularnost jQuerya u porastu, kompanije su fajl uinile besplatno dostupnim
kroz njihove Content Delivery Networks (CDNs). Pre svega, Google (https://developers.
google.com/speed/libraries/devguide), Microsoft (http://www.asp.net/ajaxlibrary/cdn.
ashx) i sam projekat jQuery (http://code.jquery.com) nude fajl na monim, niskolatentnim
serverima, distribuiranim irom sveta za brzo preuzimanje, bez obzira na lokaciju kori-
snika. Iako kopija jQuerya hostovana na CDN-u ima pednosti u brzini, nasuprot distribuciji
servera i keiranja, u toku programiranja je najbolje da upotrebimo lokalnu kopiju. U ovoj
knjizi emo upotrebiti kopiju fajla koji se nalazi na naem sistemu, to e nam omoguiti da
pokreemo kod, bez obzira da li imamo internet konekciju ili ne.

Da biste izbegli programske greke, uvek upotrebite specifinu verziju

jQuerya - na primer, 3.1.1. Neki CDN-ovi omoguavaju povezivanje sa naj-
novijom verzijom biblioteke. Osim toga, ako koristite npm za instaliranje
jQuerya, uvek se uverite da package.json zahteva specifinu verziju.

12
 Kreiranje prve veb stranice koju pokree jQuery

Podeavanje jQuerya u HTML dokumentu

Za veinu primera upotrebe jQueryja postoje HTML dokument, CSS fajlovi za stilove i
JavaScript fajlovi za delovanje. Za na prvi primer mi emo upotrebiti stranicu sa isekom
knjige koja ima primenjen veliki broj klasa u delu stranice. Ova stranica ukljuuje referencu
ka najnovijoj verziji jQuery biblioteke, koju smo preuzeli, promenili joj naziv na jquery.js i
postavili je u lokalni direktorijum projekta:
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Through the Looking-Glass</title>

<link rel="stylesheet" href="01.css">

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

<body>
<h1>Through the Looking-Glass</h1>
<div class="author">by Lewis Carroll</div>

<div class="chapter" id="chapter-1">

<h2 class="chapter-title">1. Looking-Glass House</h2>
<p>There was a book lying near Alice on the table, and
while she sat watching the White King (for she was
still a little anxious about him, and had the ink
all ready to throw over him, in case he fainted
again), she turned over the leaves, to find some
part that she could read, <span class="spoken">
"&mdash;for it's all in some language I don't know,"
</span> she said to herself.</p>
<p>It was like this.</p>
<div class="poem">
<h3 class="poem-title">YKCOWREBBAJ</h3>
<div class="poem-stanza">
<div>sevot yhtils eht dna ,gillirb sawT'</div>
<div>;ebaw eht ni elbmig dna eryg diD</div>
<div>,sevogorob eht erew ysmim llA</div>
<div>.ebargtuo shtar emom eht dnA</div>
</div>
</div>
<p>She puzzled over this for some time, but at last
a bright thought struck her. <span class="spoken">

13
POGLAVLJE 1 Poetak rada

"Why, it's a Looking-glass book, of course! And if

I hold it up to a glass, the words will all go the
right way again."</span></p>
<p>This was the poem that Alice read.</p>
<div class="poem">
<h3 class="poem-title">JABBERWOCKY</h3>
<div class="poem-stanza">
<div>'Twas brillig, and the slithy toves</div>
<div>Did gyre and gimble in the wabe;</div>
<div>All mimsy were the borogoves,</div>
<div>And the mome raths outgrabe.</div>
</div>
</div>
</div>
</body>
</html>

Odmah nakon normalne HTML preambule, uitava se opis stilova. Za ovaj primer mi emo
upotrebiti jednostavan opis:
body {
background-color: #fff;
color: #000;
font-family: Helvetica, Arial, sans-serif;
}
h1, h2, h3 {
margin-bottom: .2em;
}
.poem {
margin: 0 2em;
}
.highlight {
background-color: #ccc;
border: 1px solid #888;
font-style: italic;
margin: 0.5em 0;
padding: 0.5em;
}

Moete da pristupite primeru koda iz GitHub skladita https://github.

com/PacktPublishing/Learning-jQuery-3.

14
 Kreiranje prve veb stranice koju pokree jQuery

Nakon to je opis stilova referenciran, ukljueni su JavaScript fajlovi. Vano je da oznaka

script za jQuery biblioteku bude postavljena ispred oznake za prilagoene skriptove; u
suprotnom, radni okvir jQuery nee biti dostupan kada kod pokua da ga referencira.

U ostatku ove knjige bie odtampani samo relevantni delovi HTML i CSS
fajlova. Kompletni fajlovi su dostupni u primerima koda za ovu knjigu:
https://github.com/PacktPublishing/Learning-jQuery-3.

Sada imamo stranicu koja izgleda ovako:

15
POGLAVLJE 1 Poetak rada

Upotrebiemo jQuery da bismo primenili novi stil za tekst pesme.

U ovom primeru je prikazana jednostavna upotreba jQuerya. U stvarnim

situacijama ovaj tip stilizovanja bi mogao da se izvri samo pomou CSS-a.

Dodavanje jQuery koda

Na prilagoeni kod e biti snimljen u trenutno prazan JavaScript fajl koji smo ukljuili iz
HTML-a pomou skripta <script src=01.js></script>. Za ovaj primer potrebne su
nam samo tri linije koda:
$(() => {
$('div.poem-stanza').addClass('highlight')
{);

Ja u koristiti noviju ES2015 sintaksu arrow funkcije za veinu funkcija

povratnih poziva u ovoj knjizi. Jedini razlog je injenica da je ova sintaksa
mnogo konciznija, nego unoenje kljune rei function u celom kodu.
Meutim, ako vama vie odgovara sintaksa function() {}, slobodno je
upotrebite.

Sada emo da pregledajmo ovaj skript, deo po deo, da bismo videli kako on funkcionie.

Pronalaenje teksta pesme

Osnovna operacija u jQueryu je selektovanje dela dokumenta pomou funkcije $(). Ova
funkcija koristi, obino, znakovni niz kao parametar, koji moe da sadri bilo koji CSS izraz
selektora. U ovom sluaju mi elimo da pronaemo sve <div> elemente u dokumentu koji
imaju primenjenu klasu poem-stanza, pa je, stoga, selektor veoma jednostavan. Meutim,
opisaemo mnogo sofisticiranije opcije kasnije u ovoj knjizi. Opisaemo mnoge naine
lociranja delova dokumenta u Poglavlju 2, Selektovanje elemenata.
Kada je pozvana, funkcija $() vraa novu instancu jQuery objekta, koja je osnovni gradivni
blok koji emo od sada koristiti. Ovaj objekat kapsulira vie DOM elemenata i omoguava
interakciju sa njima na mnogo razliitih naina. U ovom sluaju mi elimo da modifiku-
jemo izgled ovih delova stranice i to emo uraditi menjanjem klasa koje su primenjene u
tekstu pesme.

16
 Kreiranje prve veb stranice koju pokree jQuery

Injektiranje nove klase

Metod .addClass(), kao i veina jQuery metoda, ima opisni naziv; on primenjuje CSS
klasu na deo stranice koji smo selektovali. Jedini parametar ovog metoda je naziv klase
koja se dodaje. Ovaj metod i metod .removeClass() e nam omoguiti da lako pratimo
jQuery u akciji i da istraimo razliite izraze selektora koji su nam dostupni. Za sada, na
primer jednostavno dodaje klasu highlight, koja je u opisu stilova definisana kao iskriv-
ljeni tekst sa sivom pozadinom i okvirom.

Vidite da nije potrebna iteracija za dodavanje klase u sve strofe pesme.

Kao to smo ve napomenuli, jQuery koristi implicitnu iteraciju unutar
metoda, kao to je .addClass(), pa je potreban svega jedan poziv funkcije
za promenu selektovanog dela dokumenta.

Izvravanje koda
Upotrebljene zajedno, funkcije $() i .addClass() su nam dovoljne da bismo postigli na
cilj menjanja izgleda teksta pesme. Meutim, ako je ova linija koda ubaena samostalno u
zaglavlje dokumenta, nee imati uticaja na tekst. JavaScript kod je pokrenut odmah nakon
to je pronaen u pretraivau; u vreme kada je obraeno zaglavlje u stilu jo nema pri-
sutnog HTML-a. Treba da odloimo izvrenje koda, dok nam ne bude dostupan DOM za
upotrebu.
Pomou strukture $(() => {}) - prosleivanjem funkcije, umesto izraza selektora, jQu-
ery omoguava da rasporedimo pozive funkcije za pokretanje kada je DOM uitan, bez
potrebe da ekamo da slike budu u potpunosti renderovane. Iako je rasporeivanje dogaaja
mogue bez pomoi jQuerya, struktura $(() => {}) obezbeuje posebno elegantno ree-
nje izmeu pretraivaa, koje ukljuuje sledee funkcije:
Koristi izvornu implementaciju spremnu za DOM u pretraivau kada je dostupna
i dodaje funkciju za obradu dogaaja window.onload kao pomo.
Izvrava funkcije koje su prosleene u $(), ak i ako je funkcija pozvana nakon
to se ve desio dogaaj pretraivaa.
Obrauje rasporeivanje dogaaja asinhrono da bi bilo omogueno skriptovima
da budu odloeni ako je to potrebno.

17
POGLAVLJE 1 Poetak rada

Parametar funkcije $() moe da prihvati referencu za ve definisanu funkciju, kao to je

prikazano u sledeem iseku koda:
function addHighlightClass() {
$('div.poem-stanza').addClass('highlight');
}

$(addHighlightClass);
Programski kod 1.1

Meutim, kao to je prikazano u originalnoj verziji skripta i ponovljeno u programskom

kodu 1.2, metod takoe moe da prihvati anonimnu funkciju:
$(() =>
$('div.poem-stanza').addClass('highlight')
);
Programski kod 1.2

Idiom ove anonimne funkcije je pogodan za jQuery kod za metode koji koriste funkciju
kao argument kada funkcija ne moe ponovo da se upotrebi. tavie, zatvoreni izraz koji
funkcija kreira moe da bude napredna i mona alatka. Ako koristite arrow funkcije, takoe
ete imati leksiku vezu this kao kontekst, pa neete morati da povezujete funkcije. Meu-
tim, ako niste paljivi, povezivanje funkcija takoe moe pretrpeti neeljene posledice zbog
upotrebe memorije.

Zavren proizvod
Sada, kada je postavljen JavaScript, stranica izgleda ovako:

18
 Kreiranje prve veb stranice koju pokree jQuery

Stihovi pesme su sada ispisani kosim slovima i obuhvaeni su u okvir, kao to je specifi-
kovano u opisu stila 01.css, zahvaljujui klasi highlight koja je dodata u JavaScript kod.

19
POGLAVLJE 1 Poetak rada

Obian JavaScript, nasuprot jQuerya

ak i zadatak koji je jednostavan, kao to je ovaj, moe da bude komplikovan bez upotrebe
jQuerya. U obinom JavaScriptu moemo da dodamo klasu highlight na sledei nain:

window.onload =
function() {
const divs = document.getElementsByTagName('div');
const hasClass = (elem, cls) =>
new RegExp(` ${cls} `).test(` ${elem.className} `);

for (let div of divs) {

if (hasClass(div, 'poem-stanza') && !hasClass(div,
'highlight')) {
div.className += '
highlight';
}
}
};
Programski kod 1.3

Bez obzira na duinu, u ovom reenju nee biti obraene mnoge situacije o kojima brine
jQuery u programskom kodu 1.2:
Neophodno je pravilno potovanje drugih funkcija za obradu dogaaja window.
onload.
jQuery deluje im je DOM spreman.
jQuery optimizuje preuzimanje elementa i druge zadatke pomou modernih DOM
metoda.
Moemo da vidimo da je kod koji pokree jQuery laki za pisanje, jednostavniji za itanje i
bri za izvravanje od obinog JavaScript koda.

Upotreba programerskih alatki

Kao to i poreenje koda prikazuje, jQuery kod je, obino, krai i jasniji od njegovog
osnovnog JavaScript ekvivalentnog koda. Meutim, to ne znai da emo uvek pisati kod
koji nema programske greke ili da emo uvek intuitivno razumeti ta se deava na stra-
nicama. Programiranje jQuery je mnogo jednostavnije kada se vri pomou standardnih
programerskih alatki.

20
 Upotreba programerskih alatki

U svim modernim pretraivaima dostupne su veoma kvalitetne programerske alatke. Slo-

bodno moemo da upotrebimo okruenje koje nam najvie odgovara. Opcije ukljuuju
sledee:
Microsoft Edge (https://developer.microsoft.com/en-us/microsoft-edge/platform/
documentation/f12-devtools-guide/)
Internet Explorer Developer Tools (http://msdn.microsoft.com/en-us/library/
dd565628.aspx)
Safari Web Development Tools (https://developer.apple.com/safari/tools/)
Chrome Developer Tools (https://developer.chrome.com/devtools)
Firefox Developer Tools (https://developer.mozilla.org/en-US/docs/Tools)
Svaki od ovih skupova alatki prua sline programerske funkcije, ukljuujui:
istraivanje i modifikovanje aspekata DOM-a
istraivanje meusobnog odnosa izmeu CSS-a i njegovog efekta na prezentaciju
stranice
pogodno traenje izvrenja skripta kroz specijalne metode
pauziranje u toku izvrenja pokrenutih skriptova i istraivanje vrednosti
promenljivih
Iako detalji ovih funkcija variraju od jedne alatke do druge, osnovni koncepti ostaju isti.
U ovoj knjizi neki primeri e zahtevati upotrebu jedne od tih alatki; mi emo upotrebiti
Chrome Developer Tools za ove prikaze, mada su i programerske alatke drugih pretrai-
vaa dobra alternativa.

Chrome Developer Tools

Aurne instrukcije za pristup i upotrebu alatke Chrome Developer Tools moete pronai na
stranicama dokumentacije projekta na adresi https://developer.chrome.com/devtools. Bilo
bi previe da u ovoj knjizi detaljno opisujemo ove alatke, pa emo da opiemo neke od
najkorisnijih funkcija.

Razumevanje ovih snimaka ekrana

Chrome Developer Tools je projekat koji se veoma brzo razvija, tako da
se sledei snimci ekrana moda nee u potpunosti podudarati sa vaim
okruenjem.

21
POGLAVLJE 1 Poetak rada

Kada je aktiviran Chrome Developer Tools, bie prikazan novi panel koji prua informa-
cije o aktuelnoj stranici. Na standardnoj Elements kartici ovog panela moemo da vidimo
prikaz strukture stranice sa leve strane i detalje selektovanog elementa (kao to su CSS
pravila koja su primenjena) sa desne strane. Ova kartica je posebno korisna za istraivanje
strukture stranice i ispravljanje CSS greaka:

22
 Upotreba programerskih alatki

Kartica Sources omoguava da pregledamo sadraje svih uitanih skriptova na stranici.

Desnim klikom na broj linije moemo da postavimo taku prekida, da podesimo uslovnu
taku prekida ili da podesimo da se skript nastavlja u toj liniji nakon to je postignuta jo
jedna taka prekida. Take prekida su efikasan nain za pauziranje pri izvrenju skripta
i ispitivanje ta se deava na nain korak-po-korak. Sa desne strane stranice moemo da
unesemo listu promenljivih i izraza za koje elimo da znamo vrednosti u bilo koje vreme:

Karticu Console emo najee koristiti dok uimo jQuery. Polje na dnu panela omoguava
da unesemo bilo koji JavaScript iskaz, a rezultat iskaza e biti prikazan u panelu.

23
POGLAVLJE 1 Poetak rada

U ovom primeru izvriemo isti jQuery kao to je onaj koji je prikazan u programskom
kodu 1.2, ali neemo izvravati nikakve akcije na selektovanim elementima. ak i uz takvo
ogranienje, iskaz nam daje interesantne informacije - vidimo da je rezultat selektora jQu-
ery objekat koji pokazuje ka dva .poem-stanza elementa na stranici. Moemo da upotre-
bimo ovu funkciju konzole da bismo brzo isprobali jQuery kod u bilo koje vreme direktno
unutar pretraivaa:

Osim toga, moemo da vrimo interakciju sa ovom konzolom direktno iz koda, koristei
metod console.log():
$(() => { console.log('hello');
console.log(52);
console.log($('div.poem-stanza'));
});
Programski kod 1.4

U ovom kodu ilustrovano je da moemo da prosledimo bilo koju vrstu izraza u metod
console.log(). Jednostavne vrednosti, kao to su znakovni nizovi i brojevi, odtampane
su direktno, a komplikovanije vrednosti, kao to su jQuery objekti, lepo su formatirane za
ispitivanje:

24
 Rezime

Ova funkcija console.log(), koja funkcionie u programerskim alatkama svih pretrai-

vaa koje smo ranije pomenuli, predstavlja odgovarajuu alternativu za JavaScript funkciju
alert() i bie veoma korisna prilikom testiranja jQuery koda.

Rezime
U ovom poglavlju ste nauili kako da uinite jQuery dostupnim u JavaScript kodu na veb
stranici, da koristite funkciju $() za lociranje dela stranice koja ima odreenu klasu, da
pozovete funkciju .addClass() da biste primenili stil za ovaj deo stranice i da pozovete
funkciju $(() => {}) da bi bila izvrena prilikom uitavanja stranice. Takoe smo istra-
ili programerske alatke koje se koriste za pisanje, testiranje i ispravljanje greaka u jQuery
kodu.
Sada razumete zato bi programer radije izabrao da koristi JavaScript radni okvir, umesto
da pie ceo kod od nule, ak i za najosnovnije zadatke. Takoe ste videli neke od naina
isticanja jQuerya kao radnog okvira, razloge zato bismo ga izabrali umesto drugih opcija,
i generalno, zadatke koje jQuery olakava.
U jednostavnom primeru koji smo upotrebili prikazano je kako funkcionie jQuery, ali ovaj
primer nije mnogo koristan u stvarnim situacijama. U sledeem poglavlju emo proiriti
kod istraivanjem sofisticiranog jezika selektora jQuerya, traei praktinu upotrebu za ovu
tehniku.

25