0
Udruga Epsilon Posušje, 2016. god.
1
Udruga Epsilon Posušje, 2016. god.
SADRŽAJ
1. OSNOVE HTML-a .................................................................. 2
o Osnovni dijelovi HTML stranice: ................................................................................... 2
o <head> tag: ....................................................................................................................... 5
o <body> tag: ....................................................................................................................... 6
2. OSNOVE CSS-a ..................................................................... 7
o Upotreba CSS-a: ............................................................................................................... 7
o „id“ i „class“ atributi....................................................................................................... 10
o CSS „Model kutije“ ......................................................................................................... 12
o Osnovna CSS svojstva ................................................................................................... 13
o „Google Fonts“ ................................................................................................................ 15
3. OSNOVE JavaScript-a ......................................................... 18
o JavaScript varijable ........................................................................................................ 19
4. OSNOVE jQuery-ja .............................................................. 20
o Zapis jQuery-ja ................................................................................................................ 21
o jQuery akcije .................................................................................................................... 22
2
Udruga Epsilon Posušje, 2016. god.
1. OSNOVE HTML-a
HTML jezik je opisan je HTML oznakama (eng. tag = oznaka), tj. tagovima (ovaj
naziv ćemo koristiti u nastavku) koji se pišu malim slovima.
Jako je važno paziti na zatvaranje i otvaranje tag-ova, jer bez toga može vrlo lako
doći do toga da se HTML dokument pogrešno učita u web pregledniku. U novijim
web preglednicima (Chrome, Mozzila Firefox, Opera i sl.) izostavljanje zatvarajućeg
taga nema veliki značaj jer će se željeni element ipak ispravno prikazati na stranici,
ali se preporuča njihovo korištenje.
o Osnovni dijelovi HTML stranice:
Definicija:
HTML (eng. „Hyper Text Markup Language“) je prezentacijski jezik za izradu web
dokumenata, odnosno web stranica.
Definicija:
Tag (tj. oznaka) služi za oblikovanje stranice i piše se između znakova „<“ i „>“.
Tagovi najčešće dolaze u parovima, pa imamo dvije vrste:
Otvarajući tagovi – uvijek postoje i pišu se prvi, npr.: <html>
Zatvarajući tagovi – dolaze na kraju (nisu nužni), npr.: </html>
3
Udruga Epsilon Posušje, 2016. god.
Na prethodnoj slici su prikazani osnovni dijelovi HTML stranice, a ispravan zapis
njihovih tagova je prikazan ispod:
TAG DEFINICIJA
<!DOCTYPE html> Radi se o HTML5 dokumentu (najnovija verzija HTML-a)
<html> </html> Opisuje HTML dokument
<head> </head> Daje informacije o dokumentu („glava“ HTML dokumenta)
<body> </body> Vidljivi sadržaj web stranice („tijelo“ HTML dokumenta)
Naravno, ovako napisani HTML kôd ništa ne predstavlja ako nije napisan u HTML
dokumentu. Da bi to napravili, potrebno je otvoriti bilo koji uređivač teksta
(Notepad, Notepad++, Sublime i sl.) koji ima mogućnost spremanja HTML
dokumenata (tj. da podržava ekstenziju .html, npr. index.html). U našem slučaju
ćemo koristiti Sublime 3 uređivač teksta kojeg smo prethodno instalirali, gdje je
potrebno napisati navedeni HTML kôd, te nakon toga spremiti dokument kao
HTML (File -> Save As… -> index.html ). Dokument se može spremiti na bilo kojoj
lokaciji na računalu, ali zbog jednostavnosti pristupa, poželjno je spremiti na radnu
površinu. Sada dokument u Sublime-u izgleda kao na slici ispod:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Moja prva stranica!
</body>
</html>
4
Udruga Epsilon Posušje, 2016. god.
Sada se na radnoj površini treba nalaziti dokument „index.html“, koji ima
ikonu kao Vaš zadani web preglednik (poželjno je Chrome imati), te
naziv „indeks“ kao na slici desno:
Dvostrukim klikom na ikonu će se otvoriti Vaša prva web stranica koja treba
izgledati kao na slici ispod:
Upravo ste napravili Vašu prvu web stranicu. Čestitamo!!!
Dodatak:
Komentari u HTML-u se ne prikazuju na stranici, a služe za kao pomoć kod
pisanja HTML kôda. Komentari se pišu između znakova „<!--„ i „-->“:
<!-- Moj komentar --> Prečac s tipkovnice je: Ctrl + /
5
Udruga Epsilon Posušje, 2016. god.
o <head> tag:
Unutar „head“-a se učitavaju podaci koji opisuju naš HTML dokument, a to su:
TAG OPIS
<title> Definira naslov dokumenta
<link> Definira vezu između HTML-a i vanjskih CSS izvora
<meta> Definira metapodatke o HTML dokumentu (informacije o
autoru, koji oblik znakova koristiti, pomaže kod „search“-a i sl.)
<script> Definira JavaScript dokumente na strani klijenta
<style> Definira CSS stilove za HTML stranicu
U našem primjeru ćemo koristiti za početak samo <title> tag za definiranje naslova
dokumenta koji će pisati u kartici na web pregledniku, te <meta> tag za
omogućavanje korištenja hrvatskih znakova.
Rezultat prethodnog primjera prikazan je na slici ispod:
<!DOCTYPE html>
<html>
<head>
<title>Moj Blog</title>
<!-- meta tag za hrv jezik (ovaj komentar se ne prikazuje) -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
</head>
<body>
Moja prva stranica sada ima naslov i šđčćž!
</body>
</html>
6
Udruga Epsilon Posušje, 2016. god.
o <body> tag:
Sav vidljivi sadržaj na stranici se nalazi između <body> i </body> tagova.
TAG OPIS
<h1> </h1> Naslovi („headings“) koji mogu biti: h1, h2, h3, h4, h5 i h6
(gdje h1 najveći i najvažniji naslov, a h6 najmanji)
<p> </p> Paragrafi („paragraphs“)
<br> Novi red
<hr> Horizontalna linija
<div> </div> Predstavlja blok unutar kojeg se nalaze drugi HTML
elementi radi lakšeg grupiranja i manipuliranja s CSS-om
<span> </span> Obuhvaća određeni dio teksta s kojim želimo
manipulirati CSS-om
<header> </header> Zaglavlje („header“) HTML dokumenta
<footer> </footer> Podnožje („footer“) HTML dokumenta
<section> </section> Odjeljak („section“) određenog dijela HTML dokumenta
<ul> <li>Lista</li> </ul> Neuređena lista („unordered list“) <li> elemenata
<li> </li> Element liste („bullet“), nalazi se unutar <ul> tagova
<a href=“#“> </a> Veza („link“) koja povezuje dvije web stranice ili iste
stranice. „href“ atribut predstavlja URL druge stranice
<img src=“slika.png“> Slika („image“) čiji se link nalazi u „src“ atributu
(obavezan). Česti su još „alt“, „width“ i „height“ atributi
<b> </b> Sadržaj između <b> tagova je podebljan
<i> </i> Sadržaj između <i> tagova je u kurzivu (nakošen)
<q> </q> Stavljanje navodnika na kraju teksta unutar <q> taga
<input type=“text“>
Unos koji ovisi o tipu („type“), može biti text, number,
email i sl. „required“ označava da ga je nužno ispuniti,
„placeholder“ je tekst koji piše kad je input prazan
<textarea> </textarea> Element za unos veće količine teksta. „rows“ atribut
definira početnu veličinu polja.
<button>Pošalji</button> Tipka/gumb s tekstom „Pošalji“
<form> </form> Tag koji se koristi za slanje podataka. Može sadržavati:
<input>, <textarea>, <button>, <select>, <option> i sl.
7
Udruga Epsilon Posušje, 2016. god.
2. OSNOVE CSS-a
NAZIV DEFINICIJA
selektor Pokazuje na HTML element kojeg želimo oblikovati
deklaracija
Određuje kako izgleda sadržaj opisan CSS-om i nalazi se unutar
vitičastih zagrada. Sastoji se od imena svojstva i vrijednosti. Svaka
deklaracija se odvaja točka-zarezom od ostalih deklaracija
svojstvo Naziv CSS svojstva koje se odvaja dvotočkom od svoje vrijednosti
vrijednost Vrijednost CSS svojstva. Završava točka-zarezom
o Upotreba CSS-a:
Definicija:
CSS (eng. „Cascading Style Sheets“) je stilski jezik koji opisuje kako će se HTML
elementi prikazivati na ekranu.
Opći zapis:
CSS se sastoji od dva dijela:
selektor { selektor {
deklaracija; svojstvo1: vrijednost1;
} svojstvo2: vrijednost2;
⁞
}
Upotreba:
Postoje 3 načina „ubacivanja“ CSS-a:
1) Kao „style“ atribut HTML taga (unutar jedne linije)
2) CSS u <style> tagu unutar istog dokumenta
3) Vanjski CSS dokument
8
Udruga Epsilon Posušje, 2016. god.
1. način - „style“ atribut HTML taga
Za bilo koji tag, točnije HTML element, moguće je dodati „style“ atribut, gdje ćemo
nakon znaka „=“ unutar navodnika (mogu biti jednostruki i dvostruki) napisati
željenu CSS deklaraciju. Valja primijetiti da kod ovakvog načina zapisa nije potrebno
pisati CSS selektor, već samo deklaracije odvojene točka-zarezom, jer se
podrazumijeva da je element, čiji „style“ atribut uređujemo, ujedno i selektor.
2. način – CSS u <style> tagu
Unutar <style> taga se pišu CSS stilovi kako smo prethodno definirali, zajedno sa
selektorima i deklaracijama. <style> tag se može nalaziti bilo gdje unutar <html>
taga, što znači da se može nalaziti i u <head> tagu.
<body>
<h1 style="color: red;">Crveni naslov</h1>
<p style="text-align: center;">Paragraf na sredini stranice</p>
</body>
<body>
<h1>Crveni naslov</h1>
<p>Paragraf na sredini stranice</p>
<style type="text/css">
h1 {
color: red;
}
p {
text-align: center;
}
</style>
</body>
9
Udruga Epsilon Posušje, 2016. god.
3. način – vanjski CSS dokument
Može se primijetiti da je ovaj način dosta sličan prethodnome, jer smo zapravo samo
CSS kôd iz <style> taga kopirali u novi, vanjski CSS dokument kojeg smo nazvali
„stil.css“ (kako spremiti dokument s ekstenzijom .css vrijedi isto kao i za spremanje
.html dokumenta što smo odradili u prethodnoj cjelini).
Također ne smije se zaboravit <link> tag u „head“-u HTML dokumenta.
<!DOCTYPE html>
<html>
<head>
<title>Moj Blog</title>
<!-- meta tag za hrv jezik (ovaj komentar se ne prikazuje) -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type ="text/css" href="stil.css">
</head>
<body>
<h1>Crveni naslov</h1>
<p>Paragraf na sredini stranice</p>
</body>
</html>
h1 {
color: red;
}
p {
text-align: center;
}
Napomena:
Lokacija vanjskog CSS dokumenta mora biti u istoj mapi gdje se nalazi
i html dokument!
Naziv vanjskog
CSS dokumenta
index.html
stil.css
10
Udruga Epsilon Posušje, 2016. god.
o „id“ i „class“ atributi
Jedni od najvažniji atributa HTML koji se često koriste u CSS-u su: „id“ i „class“.
Vidimo da navedeni primjer radi istu zadaću kao i prošli primjer (uz centriranje
naslova), pa se postavlja pitanje zašto uopće uvoditi atribude „id“ i „class“?
Naime, atribut „id“ predstavlja jedinstveni identitet samo JEDNOG HTML elementa,
dok atribut „class“ predstavlja zajednički opis VIŠE HTML elemenata.
Zaključujemo da „id“ istog naziva može imati samo jedan HTML element, dok „class“,
tj. klasu istog naziva mogu imati svi HTML elementi.
Definicija:
ID (eng. „Identity“) je jedinstveni identifikacijski atribut HTML elementa.
Oznaka: #mojID = obavezan znak „#“ i naziv ID-a (bez razmaka)
Class je HTML atribut koji omogućava definiranje jednakih CSS stilova za veći
broj HTML elemenata (za sve one koji imaju isto ime klase, vrijedi jednak CSS
definiran tom klasom).
Oznaka: .mojaKlasa = obavezan znak „.“ i naziv klase (bez razmaka)
<body>
<h1 id="naslov" class="centrirano">Crveni naslov</h1>
<p class ="centrirano">Paragraf na sredini stranice</p>
</body>
#naslov {
color: red;
}
.centrirano {
text-align: center;
}
index.html
stil.css
11
Udruga Epsilon Posušje, 2016. god.
U sljedećoj tablici su prikazani načini ispravnog korištenja kombiniranja naziva
tagova HTML elemenata i njihovih atributa „id“ i „class“ uz još neke selektore.
SELEKTOR PRIMJER OPIS
element h1 Odabir svih <h1> elemenata
.class .mojaKlasa Odabir SVIH elemenata s klasom „mojaKlasa“
#id #mojID Odabir JEDNOG elementa s id-om „mojID“
* * Odabir svih elemenata
element element div h1
Odabir svih <h1> naslova koji se nalaze unutar <div>
elementa. Umjesto elemenata mogu biti klase ili id-
ovi s odgovarajućim znakovima (RAZMAK obavezan!)
element.class h1.centar Odabir svih <h1> elemenata koji imaju klasu „centar“
(za id vrijedi # znak umjesto točke . )
element, element p, h1 Odabir svih <p> i <h1> elemenata (ZAREZ obavezan,
razmak nije obavezan)
:last-child div:last-child Odabir svih <div> elemenata koji su zadnje dijete od
svojeg roditelja
:hover a:hover Odabir svih <a> elemenata na prijelaz miša
:focus input:focus Odabir <input> elementa na kojem je fokus
[atribut] [placeholder] Odabir svih elemenata koji imaju atribut „placeholder“
U prikazanoj tablici su navedeni samo selektori koje ćemo koristiti kroz projekt „Moj
prvi web“. Za pregled svih selektora i primjera njihovog korištenja, može se pogledati
na stranici:
http://www.w3schools.com/cssref/css_selectors.asp
Dodatak:
Komentari u CSS-u se ne prikazuju na stranici, a služe za kao pomoć kod
pisanja CSS stilova. Komentari se pišu između znakova „ /* „ i „ */ “:
/* Moj CSS komentar */ Prečac s tipkovnice je: Ctrl + /
12
Udruga Epsilon Posušje, 2016. god.
o CSS „Model kutije“
Kod stiliziranja HTML elemenata, važno je u glavi vizualizirati kako web preglednik
„čita“ sve HTML elemente. Dakle, nije bitno da li se radi o nekom naslovu, paragrafu,
listi podataka ili pak nekom kvadratu koji samo služi kao uređena pozadina za sve
ostale HTML elemente koji se nalaze unutar njega, jer za sve HTML elemente vrijedi
„model kutije“ koji je prikazan na slici. Vidimo da se sastoji od 4 dijela:
Naziv dijela „kutije“ Opis
Content Sadržaj HTML elementa (npr. nekakav tekst, slika ili prazno)
Padding „Čisti“ područje oko sadržaja sve do rubova (prozirni dio)
Border Rubovi koji obuhvaćaju sadržaj i padding
Margin „Čisti“ područje izvan rubova sve do sljedećeg HTML
elementa (prozirni dio)
U svakom modernom web pregledniku je moguće pregledati HTML elemente i CSS
stilove koji su za njih vezani na bilo kojoj web stranici. Za takve mogućnosti osmišljen
je pregled web stranice za programere kojem se pristupa klikom na tipku F12 na
bilo kojoj web stranici. U tom pregledu se može odmah uočiti „model kutije“ s
prethodne slike. Kroz predavanja će se ovaj pristup često koristiti radi lakšeg
dizajniranja u željenim mjerama, a svatko može individualno istraživati i „igrati se“ s
CSS-om i HTML-om koristeći taj pregled.
13
Udruga Epsilon Posušje, 2016. god.
o Osnovna CSS svojstva
U sljedećoj tablici ćemo prikazati osnovna CSS svojstva koja će se koristiti kroz
projekt „Moj prvi web“. Ostala CSS svojstva je moguće pronaći na web stranici:
http://www.w3schools.com/cssref/default.asp
CSS svojstvo Primjer Opis
color color: red; color: #ff0000; Definira boju teksta
opacity opacity: 0.5; Definira razinu neprozirnosti
elementa (od 0 do 1)
background background: url(slika.png) center;
Skraćeni zapis za definiranje svih
svojstava pozadine u jednoj liniji
(deklaraciji)
background-color background-color: rgb(0, 80, 100); Određuje boju pozadine
elementa
backgroud-size background-size: cover; Određuje veličinu slike pozadine
border border: 3px solid #ffffff; Određuje sva svojstva rubova u
jednoj liniji (deklaraciji)
border-radius border-radius: 50%;
Skraćeni oblik za određivanje svih
svojstava zakrivljenosti rubova u
jednoj liniji
display display: block; Definira kako će se određeni
HTML prikazati na stranici
float float: left; Određuje da li će „kutija“ „plutati“
(eng. float)
height height: 100px; Određuje visinu sadržaja
elementa
left left: 20%; Određuje odaljenost od lijeve
strane pozicioniranog elementa
margin margin: 20px; Određuje sva svojstva margina u
jednoj liniji (deklaraciji)
max-width max-width: 200px; Određuje maksimalnu širinu
elementa
max-height max-height: 80%; Određuje maksimalnu visinu
elementa
overflow overflow: hidden;
Definira što će se dogoditi ako
sadržaj izlazi („prelijeva se“) izvan
granica „kutije“
padding padding: 10px 5px; Određuje sva svojstva „padding“-
a u jednoj liniji
14
Udruga Epsilon Posušje, 2016. god.
position position: relative;
Definira tip pozicioniranja kojeg
koristi element (static, relative,
absolute ili fixed)
right right: 10px; Definira desnu udaljenost od
pozicioniranog elementa
top top: 50%; Definira gornju udaljenost od
pozicioniranog elementa
widht width: 50px; Određuje širinu elementa
vertical-align vertical-align: middle; Određuje vertikalno
pozicioniranje elementa
z-index z-index: 2; Određuje redoslijed slaganja
elemenata po z-osi
line-height line-height: 15px; Određuje visinu retka teksta
text-align text-align: center; Definira horizontalno
poravnavanje teksta
text-transform text-transform: uppercase; Upravlja velikim i malim slovima
teksta
text-decoration text-decoration: underline; Definira dekoraciju teksta
font-size font-size: 24px; Definira veličinu fonta
font-family font-familiy: 'Arial', sans-serif; Definira oblik fonta
font-weight font-weight: bold; Definira „debljinu“ fonta
list-style-type list-style-type: disc; Definira izgled grafičke oznake
cursor cursor: pointer; Definira koji oblik pokazivača
(kursora, miša) će se prikazati
box-sizing box-sizing: border-box;
Govori web pregledniku koje će
dijelove „kutije“ uključiti za visinu
i širinu elementa
transition transition: transform 1.8s; Skraćeni oblik određivanja
svojstava tranzicije
transform transform: rotate(180deg); Primjenjuje 2D i 3D
transformacije na element
transform-style transforma-style: preserve-3d; Određuje kako će se grupirani
elementi ponašati u 3D prostoru
outline outline: none; Određuje sva svojstva obrisa u
jednoj liniji (deklaraciji)
15
Udruga Epsilon Posušje, 2016. god.
o „Google Fonts“
Mnoge web stranice danas koriste različite vrste fontova kako bi više naglasile tekst
ili ga jednostavno bolje uklopile u cijelu temu. Za omogućavanje se jako često koriste
Google fontovi, koji se mogu pronaći na web stranici:
https://fonts.google.com/
U našem primjeru želimo koristiti font „Ubuntu“, pa je potrebno na navedenoj
stranici u gornjem desnom kutu unutar pretraživanja upisati „Ubuntu“ kao što je
prikazano na slici:
Od ponuđenih fontova, potrebno je odabrati prvi ponuđeni, obični „Ubuntu“ font,
kliknuti na znak „+“ i otvoriti crni izbornik na dnu stranice kako je prikazano:
16
Udruga Epsilon Posušje, 2016. god.
Nakon toga, postoje 2 načina kako uključiti odabrani font na našu web stranicu:
1. način: Download i instalacija željenog fonta
Za download „Ubuntu“ fonta je potrebno kliknuti na download ikonu:
Nakon što „skidanje“ dokumenta završi, u donjem lijevom kutu web preglednika
je dovoljan dvostruki klik na kompresirani (.rar) dokument i odabrati željeni font:
Dvostrukim klikom na željeni dokument se otvara prozor za instalaciju koju je
potrebno kratko pričekati i nakon toga imamo instalirani „Ubuntu“ na računalu.
17
Udruga Epsilon Posušje, 2016. god.
2. način: Uključivanje u <head> HTML dokumenta
Kako uključiti font „Ubuntu“ u <head> tag HTML dokumenta i kako ga zapisati
u našem konkretnom primjeru je prikazano na slici:
Na ova dva prikazana načina se mogu instalirati i koristiti bilo koji Google fontovi.
Prikazali smo kako se to radi za konkretan primjer, a preporuča se da se istražuju
fontovi na navedenoj stranici kako bi se mogao odrediti i prilagoditi font temi i
dizajnu bilo koje druge web stranice.
18
Udruga Epsilon Posušje, 2016. god.
3. OSNOVE JavaScript-a
JavaScript kôd se izvodi samo jedanput i to liniju po liniju, te ukoliko dođe do
pogreške, zaustavlja se izvođenje kôda.
Postoje 2 načina uključivanja JavaScript kôda u HTML kôd:
1. način: Pozivanjem vanjske JavaScript datoteke
U navedenom primjeru smo korištenjem jednostavnog JavaScript kôda definirali
boju naslova bez korištenja CSS stiliziranja.
Definicija:
JavaScript je kompaktni, objektno-orijentirani skriptni jezik za razvoj web
stranica i web aplikacija koji programira njihovo ponašanje.
JavaScript kôd se izvodi na lokalnom računalu, a ne na serveru.
<!DOCTYPE html>
<html>
<head>
<title>Moj Blog</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="stil.css">
<script src="skripta.js" type="text/javascript"></script>
</head>
<body>
<h1 id="naslov">Crveni naslov</h1>
</body>
</html>
document.getElementById("naslov").style.color = "red";
Naziv vanjskog
JavaScript dokumenta
index.html
scripta.js
19
Udruga Epsilon Posušje, 2016. god.
2. način: Unutar <script> taga
Tag <script> se može nalaziti u <body> ili <head> tagu, baš kao i <style> tag
kojeg smo objasnili u prošloj cjelini.
o JavaScript varijable
JavaScript je vrlo snažan programski jezik, ali u ovom projektu se nećemo njime
puno baviti jer učenje njegovih osnovnih funkcija zahtjeva dosta vremena, pa smo
samo spomenuli način njegove implementacije u HTML kôd i primjenu varijabli koja
će nam trebati u nastavku.
<body>
<h1 id="naslov">Crveni naslov</h1>
<script type="text/javascript">
document.getElementById("naslov").style.color = "red";
</script>
</body>
Upotreba:
Varijable u JavaScript-u služe za spremanje vrijednosti podataka. Za njihovu
deklaraciju se koristi ključna riječ „var“, nakon koje slijedi proizvoljni naziv
varijable. Za pridjeljivanje vrijednosti nekoj varijabli koristi se znak „=“, nakon
kojega slijedi vrijednost koju želimo spremiti i točka-zarez na kraju. Primjer:
var broj = 6;
Vrijednosti koje varijabla može spremiti mogu biti 4 tipa:
Brojevi – npr. 20 ili 2.16
Logičke vrijednosti – true ili false (istina ili laž)
Tekst (eng. string) – „Pozdrav!“ (navodnici su obavezni!)
Null – nulta vrijednost, prazno
20
Udruga Epsilon Posušje, 2016. god.
4. OSNOVE jQuery-ja
Za omogućavanje korištenja jQuery funkcija potrebno ih je dodati na svojoj web
stranici. Sve informacije o početku korištenja jQuery-ja se nalaze na stranici:
http://jquery.com/download/
Postoje 2 načina omogućavanja jQuery-ja na web stranici:
1. način: Uključivanje unutar <head> taga pomoću CDN link-a
Potrebno je pristupiti stranici:
https://developers.google.com/speed/libraries/#jquery
Nakon toga kopirati označeni dio kôda sa slike u <head> HTML dokumenta:
2. način: Download i uključivanje dokumenta u <head> tag
Najjednostavnije je pristupiti link-u:
http://jquery.com/download/#jquery
Download jQuery datoteke je prikazan na slici:
Definicija:
jQuery je JavaScript biblioteka čija je svrha omogućavanje jednostavnijeg
korištenja JavaScript-a na web stranicama.
21
Udruga Epsilon Posušje, 2016. god.
„Skinuti“ dokument je potrebno premjestiti u mapu gdje se nalazi i HTML
dokument, te ga u <head> tag uključiti kao što smo prethodno pokazali za
vanjski JavaScript dokument:
o Zapis jQuery-ja
Primjer korištenja jQuery zapisa unutar JavaScript dokumenta:
Prikazani primjer prvo pričeka da se učita cijeli HTML dokument koristeći funkciju
„$(document).ready()“, nakon čega se pozadina <html> taga oboji u zelenu boju,
element s id-om „skriven“ se odmah sakrije, a svi elementi s klasom imena „pokazi“
se otkriju polako.
<head>
<title>Moj Blog</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="stil.css">
<script src="skripta.js" type="text/javascript"></script>
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
</head>
Zapis:
Osnovni zapis jQuery-ja ima oblik: $(selector).action( );
Opis sintakse:
Znak „ $ “ definira pristup jQuery-ju
Dio „ (selector) “ traži upit da HTML elemente koji su zapisani u selektoru
Dio „ .action( ) “ određuje koja će se akcija izvršiti na odabranom elementu
$(document).ready(function(){
$("html").css("background-color", "green");
$("#skriven").hide();
$(".pokazi").fadeIn("slow");
})
scripta.js
22
Udruga Epsilon Posušje, 2016. god.
o jQuery akcije
Akcija Primjer Opis
.ready(function(){ })
$(document).ready(function(){
$(„h1“).fadeIn();
})
Nakon učitavanja cijele
web stranice, svi <h1>
elementi se polako pojave
.click(function(){ })
$(„p“).click(function(){
$(this).hide();
})
Klikom na <p> element ga
sakrijemo (samo kliknuti
<p>, ne sve)
.submit(function(){ })
$(„form“).submit(function(event){
event.preventDefault();
})
Na „submit“ (potvrdu)
forme se neće osvježiti
stranica
.animate({params}, speed)
$(„#blok“).animate({
height: '100px'
}, „slow“);
Animacija elementa s id-
om „blok“ da mu visina
bude 100px
.each(function(){ })
$(„li“).each(function(){
$(this).css(„color“, „red“);
})
Koristeći „each“ funkciju
prolazimo kroz sve <li>
elemente i bojimo ih u
crvenu boju
.addClass() $(„p“).addClass(„klasa“);
Svim elementima <p> se
dodjeljuje klasa imena
„klasa“ (nema točke
ispred!)
.removeClass() $(„p“).removeClass(„klasa“);
Svim elementima <p> se
briše klasa imena „klasa“
(nema točke ispred!)
.val() $(„input“).val(); Dohvaća podatke koji si
upisani u <input>
.not() $(„li“).not(„:last-child“);
Uključuje iznimku da se
dohvate svi <li> elementi
osim zadnjega
.children() $(„ul“).children(„li#prvi“);
Dohvaćanje <li> elementa
s id-om „prvi“ koji je dijete
<ul> elementa
.attr() $(„section“).attr(„id“); Dohvaća id atribut od
<section> elementa
.offset() $(„#test“).offset();
Objekt koji sadrži „top“ i
„left“ udaljenosti elementa
s id-om „test“ od rubova
ekrana
U navedenoj tablici smo prikazali samo jQuery akcije koje će se koristiti kroz projekt
„Moj prvi web“. Ostale jQuery akcije je moguće pronaći na link-u:
http://www.w3schools.com/jquery/jquery_ref_events.asp
23
Udruga Epsilon Posušje, 2016. god.