css i javascript

V I S O K A T E H N I Č K A Š K O L A

STRUKOVNIH STUDIJA NIŠ

Seminarski rad

Tema: CSS i JavaScript

Predmet: Napredne Internet i Web tehnologije

MENTOR: STUDENT:

Mr.Veličković Zoran Bojan Jovanović, RTs 5/12

CSS i JavaScript | Napredne internet i web tehnologije Bojan Jovanović

Niš, Januar 2013. god

SADRŽAJ:

1. Uvod u CSS...........................................................................................................................3

1.1 Razvoj CSS-a....................................................................................................................4

1.2 Struktura i sintaksa CSS-a...............................................................................................4

1.3 Selektori i deklaracije......................................................................................................5

1.4 Rad sa stilskim klasama..................................................................................................5

1.5 Eksterni css stil.................................................................................................................7

1.6 Interni css stil..................................................................................................................7

1.7 Inline (linijski) css stil.....................................................................................................8

1.8 Upravljanje objektima pomoću CSS-a............................................................................9

1.8.1 CSS pozadina i boje..................................................................................................101.8.2 CSS link....................................................................................................................10

1.9 CSS alati..........................................................................................................................10

2. JavaScript..............................................................................................................................11

2.1 Sintaksa...........................................................................................................................13

2.2 JavaScript promenjljive...................................................................................................13

2.3 Tipovi podataka...............................................................................................................14

2.3.1 Celi brojevi...............................................................................................................142.3.2 Boolean.....................................................................................................................142.3.3 Stringovi...................................................................................................................14

2.4. Struktura programa u jeziku JavaScript........................................................................15

2.5. Ulaz-izlaz.......................................................................................................................15

2.6. Funkcije..........................................................................................................................15

2.7. Događaji (events) u JavaScriptu....................................................................................15

2.8. Objekti u JavaScriptu.....................................................................................................16

3. Primer web sajta....................................................................................................................174. Literatura...............................................................................................................................24

2


1. Uvod u CSS

CSS (eng. Cascading Style Sheets), odnosno kaskadni stilovi, je jezik formatiranja pomoću kog se definiše izgled elemenata web stranice. Predstavlja jednostavan mehanizam za dodavanje stilova: fontova, boja razmaka između paragrafa, uređivanje tabela. Svojim dolaskom CSS je izazvao pravu revoluciju na internetu i to zahvaljujući nizu prednosti koje ima pred tabelarnim layout-om (korišćenje tabela za uređenje stranice). Upotrebom CSS-a postalo je moguće odvojiti prezentaciju podataka i dizajn od same strukture podataka. HTML kod postaje pregledniji i manji što znači da ga je puno lakše kontrolisati, a takođe je moguće jednostavnom primenom parametara promeniti izgled stranice.

CSS je doneo čitav niz načina za uređivanje prikaza podataka koji do tada nisu postojali u samom HTML-u, a web programeri su razvili korisne tehnike kojima možete uštedeti dragoceno vreme prilikom izrade internet stranica.

Mogućnosti formatiranja HTML-a poprilično su ograničene. Kada dizajniramo izgled stranice u HTML-u, dizajn je sveden na tabele, kontrolu fontova, i nekoliko stilova teksta poput bold i italic. CSS stilovima možemo:

Pažljivo kontrolisati svaki aspekt prikaza na stranici (odrediti razmak između linija, znakova, margine stranica, pozicije slika i drugo),

Primeniti promene na celu internet stranicu,

Možemo osigurati dosledan dizajn na internet stranici tako da isti css stil koristimo za svaku pojedinačnu stranicu,

Dati internet pretraživaču instrukcije za kontrolu izgleda stranice,

Kreirati dinamične stranice.

Pomoću CSS-a definišemo pravila u stilu koji određuje kako želimo da sadržaj opisan određenim HTML kodom izgleda i povezujemo stilska pravila i HTML kod.

Korišćenjem CSS stilova možemo kontrolisati bilo koji deo segmenta na Internet stranici:

Podešavanje pozadine (boja pozadine, slike na pozadini). Opcije okvira (kontroliše okvire povezane sa stranicom, liste, tabele, slike, blok

elemente). Opcije klasifikacija (kontrolišu na koji se način elementi poput slika ponašaju na

stranici u odnosu na ostale elemente). Uređivanje listi. Uređivanje margina. Kontrola padding-a (kontrola količine praznog prostora oko bilo kojeg blok elementa

na stranici). Kontrola pozicioniranja elemenata.

3


Kontrola veličine elemenata. Uređivanje tabela. Uređivanje teksta.

1.1 Razvoj CSS-a

Prvobitno, HTML je služio da definiše kompletan izgled, strukturu i sadržaj web-stranice, ali je od verzije 4.0 HTML-a uveden CSS koji bi definisao konkretan izgled, dok je HTML ostao u funkciji definisanja strukture i sadržaja.

CSS je u određenoj formi postojao još u začecima SGML-a 1970-ih godina.

Kako je HTML postajao komplikovaniji, davao je sve više mogućnosti za definiciju izgleda elemenata, ali je istovremeno postajao nečitljiviji i teži za održavanje. Različiti web pretraživači su prikazivali dokumente na različite načine, i postojala je potreba za doslednom tehnikom definisanja prikaza elemenata na stranici.

Radna grupa za CSS je počela da radi na problemima koji nisu bili obuhvaćeni CSS-om verzije 1, koji se tako razvio u CSS2, 4. novembra 1997. Objavljen je kao zvanična verzija 12. maja 1998.

CSS3, čiji je razvoj započet 1998. se još uvek razvija. Svaka od ovih verzija donosi neke novine i postavlja standarde u pisanju stilova.

1.2 Struktura i sintaksa CSS-a

CSS stilovi sačinjeni su od stilskih pravila. Svako pravilo ima dva dela:

Selektor: Određuje element na koji se stilsko pravilo odnosi

Deklaracija: Određuje kako izgleda sadržaj opisan CSS-om

Koristimo se sa setom interpunkcijskih i posebnih znakova kako bi definisali stilsko pravilo. Sintaksa za stilska pravila uvek sledi sledeći primer:

selektor {deklaracija;}

Deklaracija se deli na dve stavke:

1. Properties (aspekti kako da web pretraživač prikaže tekst i grafiku).

2. Values (vrednosti koje određuju kako će elementi izgledati na stranici).

Properties se od vrednosti (value) u deklaraciji odvaja dvotačkom, a svaka deklaracija završava tačka-zarezom:

selector {property: value;}

4


CSS specifikacija sadrži listu svih opcija s kojima možemo raditi u svojim stilskim pravilima, kao i vrednosti koje pravila mogu zauzeti.

1.3 Selektori i deklaracije

Za jedan selektor možemo napraviti nekoliko stilskih pravila, svaki s jednom deklaracijom:

hl {color: red;}hl {font-family: Arial;}hl {font-size: 36px;}

Međutim, tako velika kolekcija stilskih pravila postaje teška za upotrebu. CSS dozvoljava grupisanje nekoliko deklaracija u jedno stilsko pravilo koje utiče na karakteristike prikaza pojedinog selektora:

hl {color: red; font-family: Arial; font-size: 36px;}

Sve deklaracije za h1 selektor su unutar istih vitičastih zagrada ({}) i odvojene su tačka-zarezom (;). Možemo upotrebiti veliki broj deklaracija u stilsko pravilo, samo je potrebno da svaku deklaraciju završimo tačka-zarezom.

Možemo iskoristiti mogućnost da se isti set deklaracija odnosi na celu grupu selektora. Selektore je potrebno odvojiti zarezima. Sledeće stilsko pravilo uređuje deklaracije za boju teksta, font i veličinu fonta:

hl, h2, h3 { color: red; font-family: Arial; font-size: 36px; }

CSS dozvoljava kombinovanje selektora, tako da možemo imati definisane vrednosti za element koji se nalazi u okviru nekog drugog, recimo tabela se nalazi u odeljku klase element i želimo da ona ima crni okvir:

.element table { border: 1px solid #000; }

Sve ostale tabele na ovakvoj stranici imaće podrazumevane vrednosti, ukoliko nije drugačije definisano.

1.4 Rad sa stilskim klasama

CSS dopušta specifikaciju informacija na nekoliko načina:

• unutar jednog HTML elementa,• unutar <head> elementa,• u posebnom css dokumentu.

Takođe je moguće referencirati više css dokumenata unutar jednog HTML dokumenta.

5


U slučaju upotrebe višestrukih stilova, svi će stilovi biti kaskadno poređani unutar novog virtualnog stila po sledećim pravilima:

• Browser default (podrazumevane vrednosti web pretraživača)• External style sheet (eksterni css stil)• Internal style sheet (unutar <head> tag-a)• Inline (linijski) style (unutar HTML elementa)

Stilska pravila odnose se na određene delove HTML koda. Ako želimo da odredimo deo koji se odnosi samo na paragrafe koji u sebi sadrže npr. autorska prava, potreban je način na koji ćemo reći web pretraživaču da to pravilo ima ograničen prostor delovanja.

Kako bi se bliže odredila stilska pravila, kombinovaćemo class atribut sa elementima u HTML kodu. Sledeći primeri prikazuju HTML kod u web pretraživaču za dve vrste paragrafa:

Slika 1. Elementi na stranici bez CSS koda

Odgovarajuć HTML kod je:

<html> <head><title>Rad sa stilskim klasama</title></head> <body><h1>Naslov</h1> <p>Ovo je paragraf.</p> </body> </html>

Slika 2. Elementi na stranici sa CSS kodom

Odgovarajuć HTML kod je:

<html> <head><style> p.copyright {font-family: Arial;font-size: 12px;color: white; background: green;} </style>

<title>Rad sa stilskim klasama </title></head> <body><h1>Naslov</h1> <p class="copyright">Ovo je paragraf sa definisanom klasom</p></body> </html>

6

Ovo stilsko pravilo određuje da svi paragrafi klase copyright prikažu beli tekst, na zelenoj pozadini, arial fontom, veličine 12 px.

1.5 Eksterni css stil

Eksterni css stil sadrži sva stilska pravila u zasebnom tekst dokumentu a koji se možete referencirati sa bilo koje HTML datoteke na sajtu.

Eksterni css stil je idealan kada se stil primenjuje na više stranica, tako da eksternim stilom možemo promeniti izgled cele Internet stranice promenom samo jedne vrednosti. Svaka stranica se povezuje upotrebom <link> tag-a. Tag ide unutar <head> dela HTML dokumenta ili unutar procesne instrukcije u XML dokumentu.

<html> <head><title>Eksterni css stil</title><link rel="stylesheet" type="text/css" href="mojstil.css" /><head> <body></body> </html>

Web pretraživač će čitati definicije iz datoteke mojstil.css i formatiraće HTML dokument skladno njemu. Eksterni css stil može biti napisan u bilo kojem editoru. Takva datoteka ne sme sadržati niti jedan HTML ili XML tag. Datoteka mora biti sačuvana sa .css ekstenzijom.

href atribut u <link> elementu može sadržati:

relativni link (css stil na istom serveru) apsolutni link (css stil koji se nalazi na nekom drugom serveru)

1.6 Interni css stil

Interni css stil smešten je unutar HTML stranice. Za prikaz stila na stranici, potrebno je dodati stilska pravila unutar <style> elementa u zagavlju HTML dokumenta.

Primer:

<html> <head><title>Interni css stil</title><style type="text/css"> body {background: black;color: white;font-size: 16px;font-family: Arial;margin-left: 72px;margin-right: 72px;margin-top: 72px;} hl, h2, h3 {color: teal;font-family: Arial;font-size: 36px;}

7


p.copyright { font-family: Arial; font-size: l2px; color: yellow; background: black;}p.warning {font-family: Arial; font-size: l6px; color: red;}</style> <head><body><h1>Naslov definisan h1 tagom</h1> <h2>Podnaslov definisan h2 tagom</h2> <h3>Podnaslov definisan h3 tagom</h3><p class="copyright">Paragraf sa atributom <i>copyright</i></p> <p class="warning">Odlomak sa atributom <i> warning</i></p></body> </html>

Daje rezultat u web pretraživaču:

Slika 3. Primena internog css stila

Prednost internog css stila je pogodnost da se stilska pravila koja se nalaze u istoj datoteci kao i HTML kod mogu brzo prilagođavati. Međutim, ako želimo isti stil da upotrebimo na više stranica, potrebno ga je premestiti u zasebnu datoteku, odnosno možemo upotrebiti eksterni css stil.

1.7 Inline (linijski) css stil

Inline css stil koristi se za određivanje formata teksta za pojedini odlomak, deo odlomka, reč ili slovo. Ovaj način formatiranja teksta je lošiji za generalno formatiranje teksta na celoj stranici, jer se koristi samo u određenom tagu, ali je primenljiv ukoliko nad nekim elementom želimo da primenimo stil koji nije definisan u css datotekama.

Može da sadrži sva svojstva CSS-a.

<html> <head><title>Inline css stil</title><head> <body><h1 style="border-bottom: 1px solid green; color: blue;">Primer inline css stila</h1> <p style="font-size:13px; font-weight:bold;">Tekst koji će poprimiti svojstva inline css stila</p>

8


</body> </html>

Rezultat u web pretraživaču bi bio isti kao kada bi ove stilove bilo integrisali u zaglavlje HTML dokumenta, bilo da se oni nalaze u eksternoj css datoteci.

1.8 Upravljanje objektima pomoću CSS-a

CSS možemo korisiti kako bi pozicionirali elemente na stranici tako da se slike ili blokovi teksta pojave tačno tamo gde ih želimo i stanu tačno unutar prostora koji želimo da zauzmu. CSS nam pruža nekoliko načina kojim možemo odrediti gde će se element pojaviti na stranici.

Kod pozivanja atributa možemo koristiti class (.) ili id(#) atribut. Atribut class nam omogućuje da navedemo celu vrstu elementa uz pomoć samo jedne reference, a id se može odnositi na samo jednu instancu elementa.

Identifikacioni element se piše sa id (ili velikim slovima ID) u HTML kodu unutar tagova kao atribut. Identifikacioni element se definiše samo jednom unutar CSS koda, znači mora biti jedinstven unutar CSS koda. To jest može postojati samo jedan identifikacioni element sa određenom identifikacionom vrednošću. Identifikaciona vrednost (u našem slučaju ispod smo je imenovali sa prvi) se imenuje sledećim pravilima:

Vrednost mora početi slovom

Nakon početnog slova mogu da slede brojevi, slova, ili razne kombinacije slova sa brojevima ili znacima kao što su: Znak minus "-", donja crta "_", dve tačke ":", i tačka "."

Vrednosti su osetljive na mala i velika slova.

Sledi primer identifikacionog elementa sa vrednošću prvi:

#prvi {color: red; text-align: center}

Kao što vidimo CSS identifikacioni element se definiše tako što prvo pišemo znak tarabu, pa onda vrednost identifikacionog elementa i zatim u vitičastim zagradama pišemo svojstva. Unutar HTML tagova, identifikacioni element postaje kao atribut, odnosno pišemo:

<p ID="prvi">Moj prvi CSS kod</p>

A može se dodati i nekom drugom tagu u istom HTML dokumentu:

<div id="prvi">Moj prvi CSS kod</div>

Ovaj će, dakle, opis uticati na sve HTML tagove koji imaju id="prvi".

9


1.8.1 CSS pozadina i boje

U HTML-u pozadina može se definisati za celu stranu, zatim u table, td i tr tagovima tabela, odeljcima, paragrafima... Pozadina može biti u boji ili u slici. CSS uvodi još neke nove atribute vezane za pozadinu, a samim tim i još neke mogućnosti i efekte. Na primer u CSS možemo postaviti pozadinu i u tekstualnoj liniji. Zapravo CSS može postaviti pozadinu takoreći gde god želimo, odnosno gde postoji vizuelna mogućnost.

Heksadecimalni zapis koristi 6 znakova. To je kombinacija slova i brojeva kako bi se definisala boja. Ako znamo hex kod neke boje, to je sve što nam treba da je postavimo na stranicu. Dok koristimo hex kod kako bi definisali znak, uvek ispred koda treba stajati znak #.

<style type="text/css"> #w1 {background-color: #c5def7;} </style>

Takođe se mogu koristiti i imena boja na engleskom jeziku, kao i decimalne RGB vrednosti umesto heksadecimalnih.

1.8.2 CSS link

Linkovi se u CSS dekorišu najčešće pomoću 4 pseudo klasa. Te 4 klase se međusobno najčešće definišu različitim atributima da bi link imao vizuelno lep efekat, ali mogu i dva po dva imati iste atribute. Sintaksa za upotrebu pseudo klase za link:

a:link { } - klasa koja definiše izgled linka koji nikad nije posećen od strane posetioca; a:visited { } - izgled linka nakon klika na njega; a:hover { } - izgled linka kad se predje mišem preko njega; a:active { } - izgled linka u trenutku klika.

Sve 4 klase mogu sadržati bilo koji css atribut.

U radu sa CSS stilovima najčešće se koriste još i selektori za uređivanje fontova, teksta, listi, okivra, tabela.

1.9 CSS alati

CSS dokumenti se mogu napisati koristeći jednostavni tekstualni editor poput Notepada. Danas postoji puno programa koji služe baš za pisanje CSS-a, ali korišćenje Notepada najbolje će vas naučiti kako pravilno pisati CSS kod.

Macromedia Dreamweaver ima jednostavan sistem za izradu CSS stilova. Stilovi su već definisani od strane programa, a korisnik samo određuje njihovu vrednost odabirom iz padajućih menija. Umetanje CSS klasa je takođe vrlo jednostavno i izvodi se s dva-tri klika mišem.

Postoji nekoliko alata koji su namenjeni isključivo pisanju CSS-a. Jedan od boljih je TopStyle. TopStyle ima sve napredne opcije koje imaju moderni editori i još puno više.

StyleWorx je sasvim zadovoljavajući za početnike, označava sintaksu, ima podršku za CSS1 i CSS2 stilove.

10


2. JavaScript

U prvim danima World Wide Web-a, HTML je bio prilično jednostavan i bilo je lako naučiti gotovo sve što je potrebno za izradu web stranica.

Kako se web razvijao, tako su rasle i aspiracije web dizajnera, a njihovi zahtevi za većom kontrolom nad izgledom stranice uslovili su da se HTML menja i postane složeniji.

Budući da je web dinamičan medijum, dizajneri stranica su želeli da njihove stranice takođe budu i interaktivne za korisnike, tako da je uskoro postalo očigledno da HTML nije dovoljan da se ispune ovi zahtevi. Netscape je uveo JavaScript kao način za kontrolu pretraživača i web stranicama dodao dinamičnost i interaktivnost.

Od svog nastanka, JavaScript je prilično evoluirao (mada povremeno u različitim pravcima, sve u zavisnosti od pretraživača).

JavaScript je interpretativni (skript) jezik namenjen programiranju Web prezentacija, odnosno proširenje mogućnosti jezika HTML, posebno u interakciji s korisnikom.

Program u jeziku JavaScript se izvršava uz pomoć interpretera ugrađenog u web pretraživač. Originalnu verziju jezika JavaScript razvila je firma u Netscape, a verzija pod nazivom JScript ugrađena je u web pretraživač Internet Explorer firme Microsoft.

Uprkos imenu, JavaScript i Java nemaju skoro ništa zajedničko. Java je programski jezik, koji je za tržište razvila kompanija Sun Microsystems. Glavna namena Jave na strani klijenta, odnosno u pretraživaču korisnika, jeste da napravi aplete, male programe koji se učitavaju i izvršavaju unutar web pretraživača. Programski jezik Java se može prevesti u mašinski kod i izvršavati potpuno samostalno ili u obliku koda koji se pokreće iz web pretraživača. Java je objektno orijentisan jezik, ima objekte, klase, nasleđivanje, strogu tipizaciju promenljivih i druge kontrole u toku prevođenja programa.

JavaScript je objektno orijentisani jezik. To znači da za JavaScript postoje objekti kojima on rukuje u okviru web pretraživača, kao što su prozori, obrasci i elementi određenog obrasca, kao što su dugmad i polja za potvrđivanje. Objekti imaju svojstva. Ono što objekti mogu da rade naziva se metodama. Objekti JavaScripta imaju metode: dugmad click(), prozori open(), a tekst može da bude izabran selected(). Zagrade označavaju da je u pitanju metoda.

Zajedničko za oba jezika je da nemaju mehanizme za upis na disk.

Za izradu programa u jeziku JavaScript neophodno je osnovno poznavanje HTML-a. Programski kod se može ugraditi u HTML dokument uz pomoć HTML elementa SCRIPT, koji ima atribut LANGUAGE za definisanje programskog jezika skripta, koji ne mora biti samo JavaScript.

Postoji mnogo toga što možete da uradite pomoću JavaScripta, kako biste poboljšali interaktivnost svojih web stranica i ostvarili bolji i mnogo uzbudljiviji utisak za korisnike. JavaScript vam dopušta da napravite aktivni korisnički interfejs, dajući korisnicima povratne informacije dok se kreću kroz stranice. Na primer, verovatno ste videli lokacije sa dugmadima

11


koja se ističu dok pomerate pokazivač miša preko njih. To se postiže preko JavaScripta, pomoću tehnike koja se naziva reakcija na prelazak mišem (engl. roll-over).

Slika 4. Reakcija na prelazak mišem predstavlja sliku koja se menja kada se pokazivač miša postavi iznad nje.

JavaScript možete koristiti kako biste obezbedili da korisnici unose ispravne informacije u obrasce, što može uštedeti vreme i novac pri poslovanju. Ukoliko vaši obrasci zahtevaju izračunavanja, možete ih izvršavati u JavaScriptu na mašini korisnika, bez bilo kakve obrade na strani servera.

Primer jednostavnog JavaScript programa:

<html><head><title> Primer jednostavnog JavaScript skripta </title></head><body>tekst iz html-a.<br><script language="javascript">document.write("<b>tekst iz javascript-a.</b>")</script></body></html>

Kada čitač prilikom prikazivanja HTML dokumenta na ekranu pronađe skript, izvršava ga i rezultat se pojavljuje na ekranu. U ovom jednostavnom primeru, metod write objekta document (to je tekući HTML dokument, odnosno stranica) ispisuje HTML tekst, koji se nakon evaluacije ispisuje masnim slovima (oznaka bold).

Na slici je prikaz ove HTML stranice, zajedno sa rezultatom izvršavanja JavaScript koda:

Slika 5. Prikaz jednostavnog Javascript primera

12


2.1 Sintaksa

Sintaksa jezika JavaScript je slična velikom broju viših programskih jezika nastalih po ugledu na jezike C/C++.

Osnovni elementi sisntakse su identifikatiri, konstante, promenljive, izrazi, osnovne naredbe, upravljačke strukture (iteracija i selekcija), funkcije i definicije objekata.

Prema sintaksi JavaScripta imena promenljivih se sastoje od niza malih i velikuh slova (a..z, A..Z), cifara (0..9) i donje crte (_). Ispravni naziv promenljivih je npr. Ukup_vrednost.

Nazivi promenljivih, funkcija, metoda ili objekata moraju biti različiti od rezervisanih reči jezika JavaScrip.

2.2 JavaScript promenjljive

U JavaSript razlikujemo formalne, i nazovimo, neformalne tipove podataka. Formalni podaci su oni koje programer definiše u promenjljive, a neformalni su oni koji se razmenjuju izmedju JavaScript koda i web pretraživača. Na primer ako postoji JavaScript naredba koja kontroliše kliktanje na neko dugme, onda kad se klikne web pretraživač i JavaScript razmenjuju neformalne podatke o kliktanju.

Formalni tipovi podataka su:

String- niz znakova unutar navodnika Brojevi- bilo koji broj koji nije pod navodnicima Boolean- logiĉko istinito(true) ili neistinito(false) Null- lišeno vrednosti Object- sva svojstva i metodi koji pripadaju objektu ili nizu Function- definicija funkcije

Najpogodniji način za rad sa podacima u skriptu je dodeljivanje podataka promenljivima. Promenljiva se u JavaScript-u definiše metodom dodeljivanja. Na primer promenjljivoj pod nazivom brojUcenika dodelimo vrednost 30:

brojUcenika = 30

Promenjljivoj koja je deklarisana unutar funkcije može se pristupiti samo unutar te funkcije. Kada se funkcija napusti, promenljiva prestaje da važi. Ovakve promenljive se nazivaju lokalne i može postojati više lokalnih promenljivih sa istim imenom u različitim funkcijama. Ako je promenljiva deklarisana van funkcije tada je slobodna za pristup svim funkcijama sa stranice, ali koje su ispod promenjljive u kodu. Oblast važenja ovih promenljivih tzv. globalnih, počinje od mesta gde su deklarisane pa sve do kraja koda.

13


2.3 Tipovi podataka

2.3.1 Celi brojevi

Celi brojevi u JavaScript-u mogu biti predstavljeni u tri formata: u decimalnom (baza 10), u oktalnom (baza 8) i heksadecimalnom (baza 16). Decimalni celi brojevi se predstavljaju kao niz cifara (0-9) bez vodeće nule. Oktalni celi brojevi se predstavljaju kao niz cifara (0-7) predvođen sa nulom (“0”). Heksadecimalni celi brojevi se predstavljaju kao niz cifara (0-9) i slova (a-f ili A-F) predvođen sa nulom koju sledi slovo x (“0x” ili “0X”). Primer prestavljanja decimalnog celog broja deset (10) u tri brojna sistema je:

decimalnom: 10. oktalnom: 012. heksadecimalnom: 0xA.

2.3.2 Boolean

Boolean tip podataka može imati samo dve vrednosti: true (tačno) i false (netačno).

2.3.3 Stringovi

Stringovi su znakovni podaci smešteni izmedju dvostrukih ili jednostrukih navodnika. Stringovi mogu biti tekstovi, brojevi, ili bilo koji znaci ali isključivo smešteni unutar navodnika. Evo par primera stringova:

"string" "12cc34ccc" "PRVA LINIJA druga linija"

U JavaScript stringovima možete koristiti i sledeće specijalne tekst oznake:

\b - pomeraj za jedno mesto ulevo (backspace), \f - pomeraj jedan red dole (form feed), \n - pomeraj na početak novog reda (new line), \r - povratak (carriage return), \t - tabulator (tab).

Takođe je često neophodno koristiti navodnike unutar samih navodnika koji definišu string. Korišćenje navodnika unutar stringa možete realizovati upotrebom obrnute kose crte ispred navodnika. Na primer:

navod = "<p>JavaScript je vrlo moćno <b>\"oružje\"</b>."

Kao što je prikazano u ovom primeru, moguće je kombinovati JavaScript i HTML kod.

14


2.4. Struktura programa u jeziku JavaScript

Osnovna jedinica strukture programa je naredba ili izraz, koji se završava sa tačkom- zarezom (C/C++):

document.writeln("Pocetak<BR>");

U komandi se koristi metod writeln(, koji je deo objekta document (tačka-zarez označava kraj komande). JavaScript komanda se može rasporediti u više redova, sve do znaka tačka-zarez, a mogu se i više naredbi naći u jednom redu, sve do znaka tačka-zarez.

U definiciji funkcija i upravljačkim strukturama, naredbe se mogu grupisati u blokove odvojene velikim zagradama:

{document.writeln("Ispis 1 ");document.writeln("Ispis 2<BR>");}

2.5. Ulaz-izlaz

U jeziku JavaScript izlaz se može usmeriti na nekoliko mesta, npr. u trenutni prozor dokumenta i pop-up dijalog.

Osnovni izlaz je preusmeravanje prikaza teksta u prozor Web klijenta prosleđivanjem HTML koda. Rezultujući tekst se interpretira kao HTML kod i prikazuje u prozoru klijenta.

Metodi koji se koriste su write, alert()i prompt().

2.6. Funkcije

Funkcija u jeziku JavaScript predstavlja skup naredbi koje realizuju neki određeni zadatak i može da vrati neku vrednost, koja može biti podatak ili objekt.

Definicija funkcije počinje od rezervisane reči function, iza koga je ime funcije, lista parametara funkcije, koji su odvojeni zarezima i zatvoreni u malu zagradu i skupom JavaScript naredbi koje čine telo funkcije zatvorenih u velike zagrade.

2.7. Događaji (events) u JavaScriptu

Događaji su pojave koje generiše web pretraživač, a nastaju obično kao rezultat akcija korisnika (npr. događaj je klik mišem, premeštanje fokusa na elemenat forme i slično).

JavaScript programi se većinom pokreću događajima (event-driven), tako što koriste mehanizme za rukovanje događajima (eng. event handler) ugrađene u JavaScript, pomoću kojih se aktiviraju sopstvene funkcije za obradu određenog događaja.

Događaje vezujemo za sledeće HTML elemente:

15


događaji Focus, Blur, Change: tekst polja forme, textarea i selekcije,događaj Click: tasteri, hiperveze, polja za izbor, polja za selekciju,događaj Select: tekst polja forme, textarea,događaj MouseOver: hiperveze

Naječešće korišćenih događaji omogućavaju programu da odgovori na neke sistemske događaje (OnLoad, OnUnload) i neke akcije korisnika (OnClick, OnFocus, OnBlur, OnChange, OnSelect, OnSubmit, OnMouseOver i OnMouseOut).

2.8. Objekti u JavaScriptu

Objektno orijentisano programiranje (eng. Object Oriented Programming, skraćeno OOP) je pristup programiranju kod koga su povezani koncepti grupisani zajedno, tako što se strukture podataka i funkcije koje manipulišu tim podacima grupišu zajedno u jednu celinu koja se naziva objekt.

JavaScript podržava objekte, koji sadrže podatke, osobine objekta kao celine (properties), koji se u jeziku JavaScript tretiraju kao promenljive i metode objekta (methods), koji u jeziku JavaScript predstavljaju funkcije.

Jezik JavaScript ima određen broj ugrađenih objekata. Programer takođe može definisati svoje objekte.

Objekt u jeziku JavaScript ima osobine, kojima se može pristupiti na uobičajen način:

NazivObjekta.NazivOsobine

U nazivima objekata i osobina objekata razlikuju se mala i velika slova.

Metod je funkcija pridružena objektu. Programer definiše metod na isti način kao što definiše funkciju. Potom tu funkciju pridruži objektu na sledeći način:

NazivObjekta.NazivMetoda = NazivFunkcije

gde je NazivObjekta postojeći objekat, NazivMetoda je naziv koji dodeljujemo metodu, a NazivFunkcije je naziv funkcoje koju povezujemo sa objektom. Metod se koristi navođenjem naziva objekta i naziva metoda:

NazivObjekta.NazivMetoda(parametri);

Osobinama objekta dodeljuju se vrednosti na standardni način:

NazivObjekta.NazivOsobine = vrednost;

Rezervisana reč this se koristi kao referenca na trenutno aktivni objekt (dokument, forma, polje). Npr. funkcija Granice() za proveru granica unesenih numeričkih vrednosti može se pozvati u svakom elementu forme na događaj OnChange, koristeći this za prosleđivanje konkretnog elementa forme:

<INPUT TYPE="text" NAME="broj" SIZE=13OnChange="Granice(this,1,100)">

16


3. Primer web sajta

U ovom delu prikazaćemo konkretan primer web sajta koji sadrži pomenute tehnike i jezike.

Tema web sajta je video klub, koji svojim korisnicima nudi iznajmljivanje filmova putem interneta.

Za izradu ovog web sajta korišćeni su programi Notepad2 editor, Dreamweaver, Photoshop, a sajt sadrži elemente HTML-a, CSS-a, multimedije i JavaScript-a.

Početna stranica izgleda ovako i nosi naziv index.html. Ovako nazvana stranica je u web pretraživačima označena kao početak sajta, kao stranica koja se prva otvara prilikom odlaska web pretraživača na adresu sajta (domen).

Slika 6. Početna (index.html) web stranica Online Video Rent Klub-a

HTML kod počinje definicijom tipa dokumenta, DOCTYPE, koji web pretraživaču određuje koju verziju markerskog jezika treba da očekuje. Ovaj primer sajta koristi verziju DTD XHTML 1.0 Transitional, i uključuje i elemente koji su nekim kasnijim revizijama izbačeni iz upotrebe.

17


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Zaglavlje sajta definiše tip kodiranja stranica (UTF-8), ključne reči, opis, naslov i uključuje eksterni css stil. Ovi elementi se nalaze između <head> i </head> tagova.

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="Video, Rent, prodavnica, online"><meta name="description" content="Video prodavnica"><title>Online Video Rent Klub | Bojan Jovanovic RTs 5/12</title><link rel="stylesheet" type="text/css" href="dizajn.css"></head>

Tagom <body> počinje deo koda koji će biti vidljiv na web stranici.

Tag body je definisan css stilom - pozadina ima početnu sliku (slika.jpg), koja se ne ponavlja, boja pozadine je crna, tekst na stranici beo ispisan familijom fontova sans-serif.

body {background-color:#000000;background-image: url(slike/back.jpg) ;background-repeat:no-repeat;color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;}

Glavnu osnovu čini odeljak (div) containter, u okviru koga se nalaze svi ostali elementi koji čine sadržaj sajta. On je bliže definisan kao identifikator (id) u css stilu. Njima je određena je širina sajta, udaljenost od gornje margine, boja pozadine i unutrašnji prostor.

HTML kod:

<div id="container">...</div>

CSS kod:

#container{width:980px;margin:20px auto 0 auto;background-color:#777777;padding: 5px;

}

U okviu odeljka container se nalaze četiri odeljka:

header - u kome je definisana slika logo-a, topbar - u kome je definisana animacija u flash-u, navbar - u kome je definisan horizontalni css meni, main - koji je podeljen na 3 nova odeljka - leva kolona, desna kolona i footer.

#header {background-image: url(slike/header.png); height:90px; background-repeat:no-repeat}#topbar{width:auto; display:block; height:380px;}#navbar{width:auto; display:block; height:auto;}

18


U okviru odeljka navbar je definisan horizontalni meni - boja teksta, boja pozadine, unutrašnji prostor između elemenata, visina, poravnanje.

HTML kod menija:

<div id="navbar"><table width="100%" cellpadding="2" border="0" style="background-color: #CCC"> <tbody><tr> <td width="75%"> <ul class="menu"> <li><a href="index.html">Početna</a></li> <li><a href="top3.html">Top 3</a></li> <li><a href="trejleri.html">Trejleri</a></li> <li><a href="#">Naruči</a></li> <li><a href="registracija.html">Registracija</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul></td> <td width="25%" align="center"></td> </tr></tbody></table></div>

CSS kod menija:

ul.menu { list-style:none; /* uklanjanje bullets-a */ background:#999; overflow:auto; padding:0; margin:0; height:100%; /*ie6 fix */ }

ul.menu li { display:inline; /* redjanje elemenata horizontalno */ padding:0; margin:0; }

ul.menu li a { padding:10px 20px; background:#999; color:#fff; text-decoration:none; display:block;float:left; /* poravnjanje elemanta na levo */ }

ul.menu li a:hover { background:#777; }

Odeljak označen kao main čine tri odeljka, od čega je odeljak sa id-jem kolona_levo nosilac sadržaja. Tu se nalaze naslovi h1 i h2, koji su takođe uobličeni css kodom:

h1 {border-bottom: 1px solid #ccc; font-size:18px;}h2 {border-bottom: 1px solid #ccc; font-size:16px;}

Odeljak koji nosi klasu prikaz definiše izgled opisa jednog filma. U konkretnom slučaju se odeljak sa klasom prikaz ponavlja tri puta, jer web sajt preporučuje tri filma za iznajmljivanje, međutim, ova (kao i svaka druga) klasa se može ponoviti koliko god puta je to potrebno. HTML kod zavisi od samog sadržaja (naslov filma, slika, opis), dok je CSS kod isti.

19


.prikaz {padding:10px; border: 1px dashed #ccc; height: 270px;}

Odeljak koji sadrži id kolona_desno, sastoji se od dva odeljka, citati i teme.

Na dnu stranice se nalazi odeljak sa klasom footer u kojem su definisani izgledi i ponašanje linkova, njihova veličina i boje prilikom prelaska mišem.

.footer{width:auto; display:block; height:64px; font-size:10pt; font-family:Arial, Helvetica, sans-serif; background-color:#222; padding:15px;}.footer a:visited, .footer a:active, .footer a {color: #CCCCCC; text-decoration:none}.footer a:hover {color: #fff; text-decoration:none}

Sledeća stranica Top3, predstavlja JavaScript galeriju sa slide-show-om. I ova stranica, kao i sve ostale, ima zaglavlje u kojem su definisani parametri kao i na indeksnoj stranici.

Slika 7. Slideshow galerija u JavaScript-u

Galerija ima id slideshow, koji je definisan u css-u i Javascript kodu. Skripta učitava funkcije i parametre iz eksternih javascript fajlova i poziva ih u web pretraživač, gde se izvršavaju. Parametri definišu brzinu menjanja slajda, način na koji se slajdovi menjaju, funkcije prilikom klika mišem na strelice. Slike imaju opis koji se pojavljuje prilikom prelaska mišem (hover).

$('slideshow').style.display='none';$('wrapper').style.display='block';var slideshow=new TINY.slideshow("slideshow");window.onload=function(){

slideshow.auto=true;slideshow.speed=5;slideshow.link="linkhover";

20


slideshow.info="information";slideshow.thumbs="slider";slideshow.left="slideleft";slideshow.right="slideright";slideshow.scrollSpeed=4;slideshow.spacing=5;slideshow.active="#fff";

slideshow.init("slideshow","image","imgprev","imgnext","imglink");}

Trejleri stranica obuhvata video i audio plejer, koji omogućava korisniku da pregleda video sadržaj ili posluša muziku.

Slika 8. Stranica web sajta sa video i audio sadržajem

Video sadržaj se nalazi u datoteci . FLV formata, i za pregledanje ovakvih video sadržaja potrebna je samo podrška za Adobe-ov Flash. S obzirom na eventualne probleme prilikom reprodukcije video sadržaja (ne mogu svi pretraživači da reprodukuju .AVI), a da je ova podrška najzastupljenija među korisnicima i prisutna u svim web pretraživačima, odlučili smo se za ovaj format kako bi osigurali kompatibilnost pregleda. Kod daje podršku i za web pretraživače koji su bazirani na Active-X tehnologiji (Internet Explorer, Chrome) i za web pretraživače bazirane na Plug-in tehnologiji (Firefox, Safari). U kodu se definiše veličina prozora u kojem će se video reprodukovati, mod plejera, mogućnost prikaza videa na celom ekranu, auto start...

21


error = "Niste uneli lozinku.\n"; } else if ((fld.value.length < 7) || (fld.value.length > 15)) { // ispitivanje broja karaktera u lozinci error = "Lozinka je kratka. Mora biti najmanje 7 karaktera \n"; fld.style.background = 'Yellow'; } else if (illegalChars.test(fld.value)) { error = "Lozinka sadrzi nedozvoljene karaktere.\n"; fld.style.background = 'Yellow'; } else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) { error = "Lozinka mora sadrzati najmanje 1 broj.\n"; fld.style.background = 'Yellow'; } else { fld.style.background = 'White'; } return error;}

Slika 9. Verifikacija polja u registracionoj formi

Od elemenata koji su korišćeni u izradi ovog sajta, a koje nismo detaljnije objasnili, izdvojićemo par njih:

hr - horizontalna crta (eng. horizontal rule), koristi se radi vizuelnog razdvanja celina klasa spacer - obično se koristi da razdvoji dva odeljka i da spreči haotičan raspored

na sajtu klasa dugme - dizajn ovog elementa je lična stvar dizajnera, u ovom slučaju je to

dugme sa određenim dimenzijama, bojom, i koje se menja prilikom prelaska mišem, a koristiće se prilikom narudžbine korisnika.

Ovako dizajniran web sajt predstavlja odličnu osnovu za dalje nadograđivanje funckionalnosti, upotrebom PHP jezika i korišćenjem MySQL baze podataka. Baza podataka omogućuje skladištenje informacija korisnika, kao i usluga na sajtu, dok će nam PHP omogućiti prikaz traženih informacija u web pretraživaču.

23


4. Literatura

1. CSS antologija, Rachel Andrew - Mikro knjiga 2009. god.

2. JavaScript za World Wide Web, Tom Negrino, Dori Smith - CET 2005. god.

3. Javascript za 24h, Michael Moncur - Kompjuter biblioteka, 2003

4. Wikipedia, internet enciklopedija

24

http://www.delfi.rs/ka1fi5di1302/delfi_knjige_autor_dori_smith.html

http://www.delfi.rs/ka1fi5di1301/delfi_knjige_autor_tom_negrino.html

css i javascript

Documents