Uvod
Ako ste upoznati sa svijetom programiranja, znate koliko su programski jezici važni. Neki od najvažnijih i najčešće korištenih uključuju HTML, CSS, i JavaScript. Dok vam HTML i CSS pomažu u dizajniranju i strukturiranju vaše web stranice, JavaScript vam omogućuje da je učinite interaktivnom. Postoji niz JavaScript biblioteka koje možete koristiti za dodavanje jedinstvenih značajki vašem web projektu. Među njima je i jQuery biblioteka.
jQuery sam po sebi nije programski jezik. To je alat koji možete koristiti za olakšavanje web razvoja u JavaScriptu. To pomaže da zadaci budu jednostavniji i izravniji. Poznato je da se temelji na konceptu „Piši manje, radi više”. Osim što olakšava web razvoj, jQuery vam također pruža dodatnu prednost kompatibilnosti s različitim preglednicima. To znači da se kod može ispravno prikazati bez obzira na to koji se preglednik koristi za prikaz.
Kako biste bolje vizualizirali kako jQuery čini stvari sažetijima, razmotrite primjer. Recimo da pišemo program „Hello, World!”. Evo kako bi to izgledalo u JavaScriptu, odnosno jQueryju:
|
1 2 |
JavaScript document.getElementById("demo").innerHTML = "Hello, World!"; |
|
1 2 |
jQuery $("#demo").html("Hello, World!"); |
Obje ove linije koda dat će isti rezultat. Međutim, kao što vidite, jQuery čini pisanje sažetijim i izravnijim.
U ovom vodiču, naučit ćete sve o osnovama jQueryja. Alat možete preuzeti za sebe s ove web stranice. Nastavit ćemo kao da ste potpuni početnik bez ikakvog znanja o jQueryju. Ovaj vodič će vas naučiti kako instalirati jQuery i neke od temeljnih koncepata povezanih s njim. Istražit ćemo neke od uobičajenih selektora, događaja i efekata u jQueryju. Zatim ćete naučiti kako testirati razvojne koncepte poput API-ja, DOM-a i CDN-a kroz korisne primjere. Čitajte dalje kako biste se upoznali sa svijetom jQueryja.
Prije nego što počnemo
Postoje određene stvari koje će vam ići u korist ako ih znate unaprijed. Na primjer, osnovno razumijevanje načina na koji HTML i CSS rade uvelike će vam pomoći. To nećemo pokrivati u ovom vodiču. Radit ćemo pod pretpostavkom da u najmanju ruku znate kako postaviti jednostavnu web stranicu. Također biste trebali imati osnovno razumijevanje o tome kako programiranje općenito funkcionira. To ne znači nužno da morate biti stručnjak za JavaScript da biste nastavili. Dovoljno je samo osnovno poznavanje stvari kao što su logika, varijable i tipovi podataka u programiranju.
Kako postaviti jQuery na vaš sustav
Prije svega, pogledajmo kako možete postaviti jQuery na svoj sustav. jQuery je dostupan kao JavaScript datoteka budući da se radi o JavaScript biblioteci. Morate povezati ovu datoteku u HTML kodu za našu web stranicu. Postoje dva načina za to. Kao što sam već spomenuo, jedan od načina je da ga preuzmete s ovdje. Osim službene web stranice, jQuery možete pronaći i u Google Hosted Libraries upravo ovdje.
Drugi način je da koristite Content Delivery Network ili CDN za povezivanje datoteke. CDN se sastoji od skupa poslužitelja koji pomažu u lokalnoj isporuci web sadržaja. Gostovanje jQuery datoteke putem CDN-a omogućuje da sadržaj puno brže stigne do korisnika. Zato ćemo od ove točke nadalje u ovom vodiču koristiti Content Delivery Network.
In našem prvom primjeru izradit ćemo web projekt. Ovaj mali projekt sadrži style.css u css/ direktoriju. script.js se nalazi u js/ direktoriju. Na kraju, index.html je prisutan u korijenu web projekta:
Prema ovom projektu, stvorit ćemo HTML kostur. Nakon toga ćemo ga spremiti kao index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> |
Ovdje ćemo povezati jQuery datoteku. Kao što sam već rekao, povezati ćemo je putem CDN-a. Unijet ćete jQuery poveznicu prije </body> oznake. Nakon toga možete dodati svoju prilagođenu JavaScript datoteku koja je bila script.js u našem primjeru. Ne zaboravite uvijek staviti JavaScript datoteku ispod jQuery knjižnice, ovako:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> |
Što biste učinili da ste umjesto toga preuzeli lokalnu kopiju jQuery knjižnice? U tom slučaju morate spremiti jQuery datoteku u js/ mapu. Zatim je možete povezati kao js/jquery.min.js.
jQuery: Osnove
Prije nego što zaronimo u detalje, prođimo kroz neke od osnova jQueryja. Glavni zadatak jQueryja je korištenje DOM-a za povezivanje HTML elemenata u pregledniku. DOM je skraćenica za Dokumentni objektni model. To je metoda koja omogućuje JavaScriptu interakciju s HTML-om u pregledniku. DOM možete vizualizirati desnim klikom na svoju web stranicu i odabirom opcije Pregledaj (Inspect). HTML koji se pojavljuje u Razvojnim alatima (Developer Tools) je DOM.
Čvor (node) je pojedinačni HTML element u DOM-u. JavaScript može mijenjati sve te objekte ili elemente. Raspored tih objekata možete zamisliti kao strukturu stabla. <html> nalazi se u korijenu, dok se elementi dalje granaju.
Desni klik i odabir opcije Prikaži izvor stranice (View Page Source) prikazat će vam izvorni HTML web stranice. Zapamtite da to nije isto što i DOM. Dok se DOM može mijenjati, HTML izvor je potpuno statičan. Sve promjene koje napravite u JavaScriptu neće utjecati na ovu HTML datoteku. Cijeli <html> čvor je omotan vanjskim slojem koji se naziva objekt dokumenta.
Zatim ćemo vidjeti kako možete manipulirati svojom web stranicom i njezinim značajkama pomoću jQueryja. Prije toga, međutim, morate osigurati da je stranica spremna.
Upišite sljedeće nakon što izradite script.js datoteku u js/ direktoriju:
|
1 2 3 4 5 |
$(document).ready(function() { // sav prilagođeni jQuery ide ovdje }); |
Sada će sav kod koji napišete biti omotan unutar ovog koda. jQuery će otkriti spremnost koda. Kod unutar ove funkcije pokrenut će se tek kada DOM bude spreman.
Ponovno ćemo se osvrnuti na skriptu „Hello, World!” o kojoj smo govorili na početku vodiča. Pretpostavimo da želimo pokrenuti ovu skriptu. Kako bismo koristili jQuery za ispis ovog teksta u pregledniku, moramo primijeniti ID demo na prazan odlomak na razini bloka poput ovog:
|
1 2 3 4 5 6 |
... <body> <p id="demo"></p> ... |
Za pozivanje jQueryja moramo koristiti $ simbol. Možete primijeniti CSS sintaksu i metode za pristup DOM-u pomoću jQueryja. Jednostavan primjer je sljedeći:
|
1 |
$("selektor").metoda(); |
Ovo je format koji ćete koristiti s jQueryjem. Već znamo da # simbol predstavlja ID u CSS-u. Stoga možete pristupiti demo ID-u pomoću #demo.html() selektora. Ova metoda će vam omogućiti promjenu HTML-a koji se nalazi u elementu.
Sljedeći kod prikazuje kako stavljamo program „Hello, World” u jQuery datoteke script.js ready() omotač:
|
1 2 3 |
$(document).ready(function() { $("#demo").html("Hello, World!"); }); |
Morate dodati ovu liniju koda u script.js datoteku. Spremite ovu datoteku. Nakon toga možete otvoriti index.html datoteku u pregledniku. Trebali biste moći vidjeti izlaz Hello, World!. Ovo je također dobra točka za provjeru DOM-a radi boljeg razumijevanja. Desnom tipkom miša kliknite na tekst „Hello, World!”. Odaberite Pregledaj element. DOM će prikazati <p id="demo">Hello, World!</p>. S druge strane, klik na Prikaži izvor stranice prikazat će vam samo sirovi html. U ovom slučaju, to bi bilo <p id="demo"></p>.
Što su selektori?
Sada ćemo prijeći na neke od ključnih značajki u jQueryju. Među njima su selektori. jQuery selektori govore programu s kojim elementima želite raditi ili koje želite „odabrati”. Vrlo su slični selektorima koje možete koristiti u CSS-u. Evo osnovnog formata kako pristupiti selektoru u jQueryju:
|
1 |
$("selector") |
Možete koristiti jednostruke ili dvostruke navodnike, iako jQuery vodič za stil preferira potonje. Ako želite, možete pogledati cijeli popis jQuery selektora na ovoj službenoj stranici. Za vašu informaciju, evo nekih od najčešće korištenih selektora:
-
$("*")
Ovo je Wildcard (zamjenski) selektor. Odabrat će svaki element na vašoj stranici.
-
$(this)
Ovo je Current (trenutni) selektor. Odabire element na kojem trenutno radite pomoću funkcije.
-
$("p")
Ovo je Tag (oznaka) selektor. Odabire svaku instancu <p> oznake.
-
$(".example")
Ovo je Class (klasa) selektor. Odabrat će svaki pojedinačni element koji ima primijenjenu example klasu.
-
$("#example")
Ovo je Id selektor. Odabire samo jednu instancu example id-a.
-
$("[type='text']")
Ovo je Attribute (atribut) selektor. Odabrat će bilo koji zadani element koji ima text primijenjen na type atribut.
-
$("p:first-of-type")
Ovo je Pseudo Element selektor. Pomaže vam odabrati prvi <p>.
Što su događaji?
Neke se značajke web stranice učitavaju čim se stranica učita. Uzmite u obzir primjer „Hello, World”. U ovom slučaju, mogli bismo dodati kod izravno u izvorni HTML. Ali što se događa kada učitavanje značajke zahtijeva interakciju korisnika? Tu jQuery postaje koristan.
Recimo da želimo da se neki tekst pojavi nakon što korisnik klikne gumb. Da biste dodali ovu značajku, morate dodati <button> element u index.html datoteku. Ovaj gumb će osluškivati „događaj” klika:
|
1 2 3 4 5 6 |
... <body> <button id="trigger">Klikni me</button> <p id="demo"></p> |
Svaki put kada korisnik stupi u interakciju s preglednikom, to se smatra događajem. Interakcija može biti putem pokazivača miša ili tipkovnice. U gornjem primjeru, klik na gumb je naš događaj. Zato se i zove događaj klika.
Zatim moramo pozvati funkciju koja sadrži kod „Hello, World”. Da bismo to učinili, koristit ćemo click() metodu:
|
1 2 3 |
$(document).ready(function() { $("#trigger").click(); }); |
Kao što vidite, ID našeg <button> elementa naziva se trigger. Možemo ga odabrati pomoću $(“#trigger"). Svrha dodavanja click() metode je natjerati program da osluškuje događaj klika. Zatim ćemo postaviti funkciju s tekstualnim kodom unutar metode:
|
1 2 3 |
function() { $("#demo").html("Hello, World!"); } |
Naš će kod na kraju izgledati otprilike ovako:
|
1 2 3 4 5 |
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); }); |
Sada možete spremiti script.js datoteku. Osvježite index.html u pregledniku kako biste primijenili promjene. Nakon što kliknete gumb, pojavit će se testni ispis „Hello, World!”.
Postoje i druge vrste jQuery događaja osim klika. Cijeli popis ovih metoda događaja možete pogledati u ovom službenom dokumentu. Evo nekih od najčešće korištenih na koje biste mogli naići:
-
click()
Događaj click izvršava kod na jedan klik mišem.
-
hover()
Događaj hover izvršava kod kada pokazivač miša prijeđe preko elementa. Također možete odrediti pokreće li se kod ulaskom ili izlaskom miša pomoću mouseenter() and mouseleave() redom.
-
submit()
Slanje obrasca pokreće kod.
-
scroll()
Pomicanje zaslona prema dolje bit će događaj koji izvršava kod.
-
keydown()
Pritisak na tipku prema dolje na tipkovnici izvršit će kod.
What are Effects?
jQuery efekti rade zajedno s jQuery događajima. Glavna svrha efekata, kako i sam naziv kaže, jest dodavanje animacija na stranicu. Omogućuje vam manipuliranje elementima radi primjene različitih vrsta efekata. Ovi efekti mogu biti pokrenuti određenim događajima.
Kako bismo bolje razumjeli, razmotrit ćemo primjer. Recimo da želimo otvoriti i zatvoriti skočni prozor (popup overlay). Jedan od načina bio bi korištenje dvaju različitih ID-ova. Jedan bi otvorio prozor, a drugi bi ga zatvorio. Drugi način je korištenje klase za to. Prednost korištenja klase je u tome što ista funkcija može otvoriti i zatvoriti prozor.
Otvorite svoju index.html datoteku. Zatim obrišite <button> i <p> oznake iz tijela. Sada dodajte sljedeće retke koda u HTML:
|
1 2 3 4 5 6 7 8 9 10 |
... <body> <button class="trigger">Open</button> <section class="overlay"> <button class="trigger">Close</button> </section> ... |
Pogledajmo sada našu style.css datoteku. Ovdje nam je cilj upotrijebiti minimalni CSS za skrivanje prekrivnog sloja. Za to ćemo upotrijebiti display: none i centrirati ga ovako:
|
1 2 3 4 5 6 7 8 9 10 |
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; } |
Zatim ćemo koristiti metodu toggle(). Ova metoda će nam omogućiti prebacivanje svojstva display između none i block. Stoga će prekrivni sloj biti skriven i prikazan kad god kliknemo. Dodajte ovaj kod u script.js datoteku:
|
1 2 3 4 5 |
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); }); }); |
Na kraju, osvježite index.html kako biste primijenili promjene. Sada ćete moći prebacivati vidljivost modalnog prozora. Sve što trebate učiniti je kliknuti na gumbe. Postoje i drugi jQuery efekti koje možete koristiti u kombinaciji s ovim. Na primjer, možete promijeniti jednostavan toggle() u slideToggle() ili fadeToggle().
Slijedi nekoliko najčešće korištenih metoda efekata u jQueryju:
-
toggle()
Ova metoda omogućuje promjenu vidljivosti elementa. Jednosmjerni efekti povezani s njom su show() i hide().
-
fadeToggle()
Ova metoda omogućuje prebacivanje vidljivosti i neprozirnosti elementa putem animacije. Jednosmjerni efekti u ovom slučaju su fadeIn() i fadeOut().
-
slideToggle()
Ova metoda omogućuje korištenje efekata klizanja za prebacivanje vidljivosti elementa. Jednosmjerni efekti u ovom slučaju su slideUp() i slideDown().
-
animate()
Ova metoda efekta omogućuje izvođenje prilagođenih efekata animacije. Koristi CSS svojstvo zadanog elementa.
Zaključak
Nadamo se da se ovaj vodič pokazao korisnim u pružanju temeljitog uvoda u jQuery. To je nevjerojatno koristan alat koji uvelike olakšava razvoj web stranica i pisanje koda. To je osobito točno ako ste relativno novi u svijetu programiranja.
Istražili smo različite elemente koji čine osnove jQueryja. Također smo naučili kako možete odabrati i modificirati te elemente te kako dobro iskoristiti događaje i efekte. Ovladavanje alatima poput jQueryja može vam pomoći u stvaranju web stranica prepunih interaktivnih značajki koje omogućuju privlačno korisničko iskustvo.
Pogledajte neke resurse s našeg bloga koji će vam pomoći pri radu s JavaScriptom:
- Vodič za dodavanje JavaScripta u HTML
- Rad s JavaScriptom: Kako funkcioniraju klase
- Rad s JavaScriptom: Kako funkcioniraju prototipovi i nasljeđivanje
Sretno programiranje!
Komentari
Još nema komentara. Budite prvi.