Udruga Epsilon Posušje, 2016. god.udrugaepsilon.com/sites/default/files/Skripta-Osnove_weba.pdf · dok atribut „class“ predstavlja zajednički opis VIŠE HTML elemenata

0

Udruga Epsilon Posušje, 2016. god.

1


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


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


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


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 „“:

 Prečac s tipkovnice je: Ctrl + /

5


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 http-equiv="content-type" content="text/html; charset=UTF-8"/>

</head>

<body>

Moja prva stranica sada ima naslov i šđčćž!

</body>

</html>

6


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


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


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


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>





<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


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


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 + /

http://www.w3schools.com/cssref/css_selectors.asp

12


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


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


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

http://www.w3schools.com/cssref/default.asp

14


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


15


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:

https://fonts.google.com/

16


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


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


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>



<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


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


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.

http://jquery.com/download/

https://developers.google.com/speed/libraries/%23jquery

http://jquery.com/download/%23jquery

21


„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>



<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


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

http://www.w3schools.com/jquery/jquery_ref_events.asp

23

Documents

Udruga Epsilon Posušje, 2016. god.udrugaepsilon.com/sites/default/files/Skripta-Osnove_weba.pdf · dok atribut „class“ predstavlja zajednički opis VIŠE HTML elemenata