Professional Documents
Culture Documents
JS, Jquery, Ajax PDF
JS, Jquery, Ajax PDF
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
<html> element je korijenska oznaka svakog dokumenta unutar kojeg se nalaze svi ostali
elementi. Navedena oznaka se nalazi na samom početku dokumenta, a njegova je uloga davati
upute web pregledniku o tome koja je verzija HTML-a na kojoj je stranica napisana.
1
Unutar <html> elementa nalaze se i <head> element te <body> element. <head> element
predstavlja zaglavlje HTML dokumenta u kojemu se najčešće definiraju jezične značajke
dokumenta kao i sam naslov stranice. Pomoću određenih HTML elemenata unutar zaglavlja
dodaju se i stilska obilježja stranice, bila ona direktno ugrađena (eng. embedded) ili dodana kao
referenca na vanjsku CSS datoteku.
Često se unutar zaglavlja definiraju i skripte kreirane u JavaScript jeziku. U <body> elementu
kreira se sadržaj HTML dokumenta, odnosno, stranice koju on prezentira.
HTML je prošao više razvojnih etapa, obzirom na svoje dugogodišnje postojanje. Trenutna
verzija je HTML 5.2 koja je objavljena 14. prosinca 2017.
JavaScript
JavaScript (skraćeno JS) je interpretirani skriptni programski jezik visoke razine koji se
izvršava u web pregledniku na strani korisnika. Izvorno se JavaScript trebao zvati LiveScript,
no kako bi se time potaklo korištenje novog jezika, nazvan je slično popularnom programskom
jeziku Javi.
U okviru JavaScript-a imamo 7 tipova podataka. Podaci se mogu podijeliti u dvije grupe:
2
● number,
● boolean,
● undefined,
● null,
● symbol.
Svakom objektu ili svojstvu pristupa se kroz ovakav model, tj. document je osnovni objekt
preko kojeg se pristupa svim drugim objektima dokumenta.
Na primjer, u dokumentu koji sadrži ovaj programski kôd:
<form action="">
Unesite ime: <input type="text" value="" />
<input type="submit" value="Pošalji" onclick="return provjeri();" />
</form>
Primjer. Forma
3
document.forms[0].elements[0].value
Vidljivo je da je tekstni objekt prvi u polju elemenata koji se nalaze u prvom obrascu. Da bi se
programiranje pojednostavilo, omogućeno je imenovanje pojedinih objekata. Na primjer,
dodavanjem naziva obrascu (name="formaProvjera") i dodavanjem naziva tekstnom polju za
unos imena (name="ime") dobije se:
<form name="formaProvjera">
Unesite ime: <input type="text" value="" name="ime"/>
<input type="submit" value="Pošalji" onclick="return provjeri();" />
</form>
Primjer. Forma
document.formaProvjera.ime.value
<form name="formaProvjera">
Unesite ime: <input type="text" value="" name="ime" id="ime"/>
<input type="submit" value="Pošalji" onclick="return provjeri();" />
</form>
Primjer. Forma
document.getElementById(‘ime’).value
Atribut name i dalje treba biti naveden zbog načina na koji se obrađuju obrasci.
Objekt window također je važan objekt pomoću kojeg se upravlja prozorom preglednika. Dvije
često korištene funkcije vezane uz objekte su document i window:
4
● document.write – funkcija koja upisuje niz znakova koji se proslijedi kao prvi argument
u HTML-dokument na mjestu gdje se funkcija poziva,
● window.alert – funkcija ispisuje niz znakova koji se proslijedi kao prvi argument u
zasebnom prozoru i ne dopušta nastavak izvršavanja programa dok se ne zatvori.
<script>
console.log(“Hello world!”);
</script>
<script>
document.getElementById("p1").innerHTML = "Hello world!";
</script>
Drugi način je referenciranje na pojedinu datoteku koja sadrži JavaScript kôd, odnosno u
HTML dokumentu se navodi samo lokacija JavaScript datoteke. Datoteka obično ima
ekstenziju .js i sadrži čisti JavaScript kôd bez <script> elementa. Navedeni način se preferira
jer pojednostavljuje HTML datoteku te smanjuje njenu veličinu što uvelike povećava brzinu
preuzimanja s poslužitelja. Također, ukoliko se neka JS funkcija koristi u više HTML
dokumenata, poziva se jedna datoteka što pojednostavljuje održavanje. Kada se više puta
upotrebljava datoteka JavaScripta, ona se učitava u preglednik samo prilikom prve uporabe.
Nakon toga se datoteka lokalno sprema na disk i svakog sljedećeg puta interpretira iz lokalne
datoteke.
Aritmetički operatori
5
x+y zbrajanje
x-y oduzimanje
x*y množenje
x/y dijeljenje
Relacijski operatori
x == y jednako
x != y različito
6
koristi se kada korisnik pošalje formu, odnosno
onSubmit
pritisne dugme submit
Node.js je specifičan jer je to radno okruženje JavaScript programskog jezika koje se koristi na
strani web servera. JavaScript se tradicionalno koristi na strani klijenta - tzv. front-end razvoj,
a Node je omogućio da se JS koristi i za back-end razvoj odnosno serversko izvršavanje koda.
7
jQuery
jQuery je višeplatformska JavaScript biblioteka dizajnirana u svrhu pojednostavljenja
korištenja JavaScript-a. Radi se o besplatnoj biblioteci otvorenog koda licenciranoj MIT
licencom. Prva verzija jQuery-a izašla je 2006. godine i od tad je jedna od najzastupljenijih i
najkorištenijih biblioteka JavaScripta.
Međutim, postoji i jedan nedostatak – minimizirani kôd teško je čitati pa ako postoji potreba
za upoznavanjem s bibliotekom jQuery, preporučava se korištenje neminimizirane inačice.
jQuery se najčešće koristi tako da se za određene elemente dokumenta definiraju određene
akcije.
8
U jQueryju se elementi određuju CSS-selektorima, odnosno na isti način kao i u CSS-u. U
sljedećem primjeru se može vidjeti kako koristiti jQuery pomoću funkcije jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery primjer 1</title>
</head>
<body>
<h3 id=”prviNaslov”>Naslov</h3>
<ul>
<li>stavka 1</li>
<li>stavka 2</li>
<li>stavka 3</li>
<li>stavka 4</li>
<li>stavka 5</li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
jQuery('li').on('click', function(){
jQuery('li').css('color', 'green');
});
</script>
</body>
</html>
$('li').on('click', function(){
$('#prviNaslov').css('color', 'green');
});
U prepravljenom primjeru pokazano je kako se identificiraju elementi pomoću atributa id. Ako
je potrebno identificirati elemente kojima je atribut class postavljen na određenu vrijednost, to
se postiže ovako:
9
$('li').on('click', function(){
$('.naslov').css('color', 'green');
});
Metoda $(document).ready() ili skraćeno $(function()) omogućava nam
izvršavanje funkcija tek kada se stranica u potpunosti učita.
.blur() .bind()
.change() .delegate()
.click() .die()
.contextmenu() .error()
event.currentTarget .live()
event.data .die()
event.isDefaultPrevented() .toggle()
event.isPropagationStopped() .unbind()
event.preventDefault() .undelegate()
.focus() .unload()
.hover()
.off()
.on()
.ready()
.resize()
.scroll()
.select()
.submit()
.trigger()
10
Ajax i JSON
Ajax (eng. asynchronous JavaScript and XML) je skup tehnologija koje zajedno funkcioniraju
u svrhu stvaranja brže web aplikacije uz pomoć XML-a, HTML-a, CSS-a i JavaScript-a.
Omogućuje asinkronu razmjenu podataka s poslužiteljem preko XMLHttpsRequest objekta bez
ponovnog učitavanja stranice. Ajax nudi veću interaktivnost, bolje performanse i manju
potrošnju resursa jer se razmjenjuju potrebne informacije, a ne kompletna web stranica. Iako
sadrži XML u svom imenu, sam XML nije neophodan za korištenje Ajax-a, čak se u najvećem
broju slučajeva koristi JSON format.
JSON (eng. JavaScript Object Notation) je format datoteka otvorenog standarda za razmjenu
podatkovnih objekata koji se sastoji od parova atribut-vrijednost ili nizova.
data: Podaci za slanje na poslužitelj. Tip podataka je array objekt ili string. Ako se već ne radi
o stringu, jQuery vrši u konverziju podataka u query string format (primjer.
param=value¶m1=value1).
dataType: Tip podataka koji se očekiva kao rezultat. Ukoliko se ne navede, jQuery će pokušati
zaključiti na temelju MIME tipu odgovora. (XML će dat XML, JSON će vratit JS objekt,
HTML vraća HTML...).
method: HTTP metoda koja će se koristit za upit (default metoda je GET metoda, POST
metodu potrebno posebno naglasiti)
url: String koji sadrži URL skripte gdje se šalje upit.
.done: povratni poziv koji se aktivira nakon uspješnog izvršavanja Ajax-a.
.fail: povratni poziv koji se aktivira nakon neuspješnog izvršavanja Ajax-a.
$.ajax({
url: "ajax.php",
data: { name: name, userid: userid },
method: "GET",
dataType: 'json',
contentType: 'application/json'
})
.done(successCallback)
.fail(errorCallback)
11
Literatura
[1.] Chapman, S. What is JavaScript, About Tech, July 2016. Dostupno na:
http://javascript.about.com/od/reference/p/javascript.htm
[2.] w3schools. Dostupno na: https://www.w3schools.com/
[3.] Stančer, D. Osnove JavaScripta Dostupno na:
https://www.srce.unizg.hr/files/srce/docs/edu/osnovni-tecajevi/c501_polaznik.pdf
[4.] Javascript, Dostupno na: https://www.javascript.com/
12