Internet Programiranje

INTERNET PROGRAMIRANJE I X(HTML) – CSS – JAVASCRIPT

VISOKA ŠKOLA ZA EKONOMIJU I INFORMATIKU PRIJEDOR 2010

Autor: Damir Dračić

INTERNET PROGRAMIRANJE I X(HTML) – CSS – JAVASCRIPT

INTERNET PROGRAMIRANJE I | 2010

SADRŽAJ

1

UVOD................................................................................................................................................ 4 1. UVOD U SVIJET INTERNETA .......................................................................................................... 5 1.1. WEB STRANICE .......................................................................................................................... 9 1.2. HYPERTEXT ............................................................................................................................. 10 1.3. MARKUP ................................................................................................................................ 11 1.4. WEB BROWSERS ...................................................................................................................... 13 1.5. WEB SERVERS ......................................................................................................................... 14 1.6. URI/URL/URN ...................................................................................................................... 15 2. WEB STRANICE – OD ČEGA SE SASTOJE ...................................................................................... 15 2.1. HTML DOKUMENTI .................................................................................................................. 15 2.1.1. HTML ............................................................................................................................ 16 2.1.2. HEAD ............................................................................................................................ 16 2.1.3. TITLE ............................................................................................................................. 16 2.1.4. BODY ............................................................................................................................ 17 2.2. SLIKE U HTML DOKUMENTIMA .................................................................................................. 18 2.3. LINKOVI I NAVIGACIJA ............................................................................................................... 18 2.4. HTML / X(HTML) .................................................................................................................. 19 2.4.1. HTML ............................................................................................................................ 19 2.4.2. XHTML .......................................................................................................................... 19 2.4.3. SINTAKSA I PRAVILA ........................................................................................................... 19 3. KREIRANJE I RAZVOJ WEB STRANICE .......................................................................................... 23 3.1. PRIJE POČETKA RADA ................................................................................................................ 23 3.2. PLANIRANJE I DIZAJN ................................................................................................................ 24 3.3. KREIRANJE HTML KODA / OSNOVNI ELEMENTI ............................................................................. 26 3.1.1. HTML ............................................................................................................................ 26 3.1.2. HEAD ............................................................................................................................ 26 3.1.3. TITLE ............................................................................................................................. 27 3.1.4. BODY ............................................................................................................................ 29 3.4. SNIMANJE WEB STRANICE ......................................................................................................... 31 3.5. PREGLED WEB STRANICE ........................................................................................................... 32 3.6. MODIFIKACIJA WEB STRANICE.................................................................................................... 33 3.7. POSTAVLJAJNE NA INTERNTER .................................................................................................... 35 4. XHTML – OSNOVNI KOD ............................................................................................................. 36 4.1. OSNOVNI XHTML ................................................................................................................... 36 4.1.1. NASLOV .......................................................................................................................... 36 4.1.2. PARAGRAF ....................................................................................................................... 36

INTERNET PROGRAMIRANJE I | 2010

4.1.3. FORMATIRANJE TEKSTA ...................................................................................................... 38 4.1.4. BOJE............................................................................................................................... 43 4.2. STILOVI .................................................................................................................................. 45 4.3. LINKOVI.................................................................................................................................. 50 4.4. SLIKE ..................................................................................................................................... 54 5. XHTML – NAPREDNI KOD ............................................................................................................ 59 5.1 TABELE.................................................................................................................................... 59 5.2. LISTE...................................................................................................................................... 66 5.2.1. NE SORTIRANE LISTE .......................................................................................................... 67 5.2.2. SORTIRANE LISTE .............................................................................................................. 69 5.2.3. LISTE DEFINICIJA ............................................................................................................... 71 5.3. FORME................................................................................................................................... 74 5.3.1. LABEL ............................................................................................................................. 75 5.3.2. TEXTBOX ......................................................................................................................... 75 5.3.3. PASSWORD ...................................................................................................................... 75 5.3.4. CHECKBOX ....................................................................................................................... 76 5.3.5. RADIO BUTTON ................................................................................................................ 76 5.3.6. DROPDOWN LISTE ............................................................................................................. 77 5.3.7. FIELDSET ......................................................................................................................... 78 5.3.8. DUGMAD ........................................................................................................................ 78 6. CSS .............................................................................................................................................. 82 6.1. CSS I XHTML ......................................................................................................................... 82 6.2. STRUKTURA I SINTAKSA ............................................................................................................. 84 7. JAVASCRIPT .............................................................................................................................. 105 7.1. UVOD U JAVASCRIPT ........................................................................................................... 105 7.2. OSNOVNA SINTAKSA I UPOTREBA .............................................................................................. 105 7.3. VARIJABLE ............................................................................................................................ 108 7.4. ARITHMETIČKE OPERACIJE ....................................................................................................... 112 7.4.1. + (PLUS) ........................................................................................................................ 112 7.4.2. – (MINUS) ..................................................................................................................... 114 7.4.3. * (PUTA) ....................................................................................................................... 115 7.4.4. / (PODJELJENO) .............................................................................................................. 116 7.4.5. % (PROCENAT) ............................................................................................................... 117 7.4.6. ++ (AUTOMATSKO UVEĆANJE) .......................................................................................... 118 7.4.7. – (AUTOMATSKO UMANJENJE) .......................................................................................... 119 7.4.8. –VAR (POSTAVLJANJE NEGATIVNE VRIJEDNOSTI) ................................................................... 120 7.5. DODJELA VRIJEDNOSTI ............................................................................................................ 123 7.5.1. = (JEDNAKO JE)............................................................................................................... 123 7.5.2. += (PLUS JEDAKO JE) ....................................................................................................... 124 7.5.3. -= (MINUS JEDNAKO JE) ................................................................................................... 125 7.5.4. *= (PUTA JEDNAKO JE)..................................................................................................... 126 7.5.5. /= (PODJELJENO JEDNAKO JE)............................................................................................ 127 7.5.6. %= (PROCENAT JEDNAKO JE) ............................................................................................ 128 7.6. DOGAĐAJI (EVENTS) ............................................................................................................... 129

2

3

INTERNET PROGRAMIRANJE I | 2010

UVOD Dobrodošli u svijet neograničenih mogućnosti WORLD WIDE WEB-a ili u svijetu poznatijim samo kao WEB. Ako ste ikada pokušali da napravite svoju Web stranicu sigurnos te se suočili sa raznim poteškoćama i problemima. Od početka niste znali kako pristupiti samoj izradi Web stranice a onda dalje kako je promovisati i objaviti javno. U ovoj knjizi imaćete mogućnost da proučite onsovne koncepte razvoja jedne HTML stranice, te ujedno i da razumijete potrebne aspekte koji su povezani sa internet programiranjem. Imaćete mogućnost da proučite osnovne komponente programiranja jedne Web stranice i kako istu objaviti u javnosti. Nagalšavamo da ova knjiga posjeduje samo osnovne koncepte, te za naprednije koncepte i tehnologije potrebno je dodatno proučavanje drugih obalisti kao što su .NET, PHP itd.

INTERNET PROGRAMIRANJE I | 2010

Napominjemo da je HTML osnova i temelj svih naprednih tehnologija koja se koriste u današnjem svijetu Internet Programiranja.

4

1. UVOD U SVIJET INTERNETA

U današnjem poslovnom svijetu skoro pa je nazamišljiv rad i funkcionalnost jedne ozbilje organizacije bez Interneta i servisima koje ono pruža. U jednom ozbiljnom preduzeću ili ozbiljnoj instituciji ili čak i u kućnim okruženjima skoro pa je nepojmljiv način života bez upotrebe Web pretraživača, Email-a, YouTube-a, Facebook-a i ostalih elemenata koje se oslanjaju na sam internet Ne postoji jedna definicija Interneta ali se za Internet može reći da je Interner „mreža svih mreža“ Interner se sastoji om velikog broja manjih mreža koje komuniciraju pomoću protokla koji spadaju u grupu TCP/IP protokola. U globalnom pogledu Internet je mreža koja povezuje nacionalnie, akademske, naučne, komercijalne i druge svjetske mreže. Sam nastanak internet je proizašo kao rezultat potrebe za komunikaciju koja neće biti oštećena ili prekinuta prilikom atomske eksplozije. Pristup ovom vidu razmišljnja o načinu komunikaicje počelo je zajedno sa početkom hladnog rada 1950ih godina. Kao što smo već naveli, Internet služi kao podloga za razne vrste komunikaicja kao što su Elektronske pošte, fajl arhiva, hipertekst dokumenata, baza podataka i mogobrojnih drugih resursa. Svi ovi resursi komuniciraju na specifičan njima prilagođen način. Ovi načini se u stuci nazavaju protokilima (eng. Protocols). Sva komunikacija na interentu spadaju u familiju protokola koji se nazviju TCP/IP (Transmission Control Protocol/Internet Protocol). TCP/IP se sastoji od velikog broja drugih protokola:  BGP: Border Gateway Protocol  FTP: File Transfer Protocol  HTTP: HyperText Transfer Protocol

INTERNET PROGRAMIRANJE I | 2010

 ICMP: Internet Control Message Protocol

5

 IP: Internet Protocol  OSPF: Open Shortest Path First  MIME: Multi-Purpose Internet Mail Extension  SMTP: Simple Mail Transport Protocol  SNMP: Simple Network Management Protocol  TCP: Transmission Control Protocol  UDP: User Datagram Protocol

Istoriski pokazatelj razvoja interneta i same internet komunikaicje je dostigao najveći uspon od 90-ih godina prošlog vijeka. Mora se istaći da jedan od ključnih uticaja na veoma brz razvoj Interneta i relativno veliko povećanje Internet korisnika jeste reltivno smanjenje cijena hardversih kompomenata, te samim tim i cijena računara.

Istorija razvoja internteta:  1950 - hladni rat: SAD – SSSR  Potreba za komunikacijskim sistemom otpornim na nuklearni napad  1968 - DARPA (Defense Advanced Research Projects Agency) zajedno sa BBN (Bolt, Beranek & Newman) realizuje ARPAnet  1970 – Prvih pet čvorova:  UCLA  Stanford  UC Santa Barbara  U of Utah, and  BBN  1974 - TCP specifikacija, Vint Cerf  1984 – 1. Januara, Internet sa 1000 hostova počinje da koristi TCP/IP za prenos poruka  1986 - NSFNET povezuje sve glavne istraživačke centre i ARPANET  1987 - u mrežu se povezuju i mreže velikih kompanija  1992 - počinje povezivanje i mreža izvan SAD

Po posljedim statistiakama procjenjeno je da na dan 01.06.2010 godine ina 1,966,514,816 hostova (Tabela 01-01). Trend razvoja interneta:  1977: 111 hosts  1981: 213 hosts  1983: 562 hosts

INTERNET PROGRAMIRANJE I | 2010

 1995 - javljaju se komercijalni ISP (InternetService Provider)

6

 1984: 1,000 hosts  1986: 5,000 hosts  1987: 10,000 hosts  1989: 100,000 hosts  1992: 1,000,000 hosts  2000: 360,985,492 hosts  2010: 1,966,514,816 hosts

Internet korisnika Dec. 31, 2000

Internet Korisnika Posljednji podaci

Upotreba (% Populacija)

Populacija 2010 Procjena

Afrika

1,013,779,050

4,514,400

110,931,700

10.9 %

2,357.3 %

Azija

3,834,792,852

114,304,000

825,094,396

21.5 %

621.8 %

Evropa

813,319,511

105,096,093

475,069,448

58.4 %

352.0 %

Bliski istok

212,336,924

3,284,800

63,240,946

29.8 %

1,825.3 %

Sjeverna Amerika

344,124,450

108,096,800

266,224,500

77.4 %

146.3 %

Južna Amerika

592,556,972

18,068,919

204,689,836

34.5 %

1,032.8 %

Okeanija

34,700,201

7,620,480

21,263,990

61.3 %

179.0 %

UKUPNO

6,845,609,960

360,985,492

1,966,514,816

INTERNET PROGRAMIRANJE I | 2010

Tabela 01-01 Statistika internet korisnika i svjetske populacije

7

Porast 2000-2010

KONTINENTI

28.7 %

444.8 %

Kada kažemo internet, svi posmatramo internet kao skup Web stranica koje koristimo za prikupljanje informacija, media i drugih resursa. U jednu ruku ova izjava je tačna međutim Internet se posmatra kao jedna tehnologija koja posjeduje svoje tehnološke alate. Bez ovih tehnoloških alata skoro pe je nemoguća upotreba Interneta. Ključni aspteki interneta ili ključni tehnološki alati koji se koriste u Internet tehnologijama su  Web stranice  Hypertext  Markup  Web browsers / Web pretraživači  Web serveri

INTERNET PROGRAMIRANJE I | 2010

 URL

8

1.1. Web stranice Web stranice su vizalni dio Interneta i ujedno i jedan od osnovnih aspekata komunikacije i prenosa podataka i informacija. Web stranica može da primi više vrsta sadržaja kao što je tekst, grafike, forme, audio i video datoteke, te interaktivne igre. Pretraživanjem Web-a primjetićete da se na Internetu nude razne informacije u raznim oblicima. Svaki Web sajt je drugačiji, ali većina imaju jednu zajedničku stvar, to jere HTML (Hipertekt Markup Language). Takođe ćete se susreti sa XHTML i CSS (Cascading Stile Sheets) koji su u današenjm dobu prilično zastupljeni. Bilo koju informaciju Web strana sadrli, svaka Veb stranica je kreirana u HTML (ili neke drugim jezicima). HTML je temelj Web strane gdje grafikama, sadržaj i ostale informacije se mogu posmatrati kao nadogradnja. CSS govori Web stranici kako treba da izgleda kada se prikazuje na ekranu. HTML datoteke koje proizvode Web stranice su samo tekstualni dokumenti, kao što su isto XHTML i CSS datoteke. Ovo je jedan od ključnih razloga zbog čeba Web stranice funkcionišu tako dobro. Tekst je univerzalan jezik za računare. Bilo koju tekst datoteku koji ste kreirali na računaru pod Windows okruženjem (uključujući i HTML, XHTML, CSS datoteke) radiće podjednako dobro na računaru pod Mac okruženjem ili bilo kojim drugim operativnim sistemom. Web stranice nisu samo tekstualna dokumenata. Oni su napravljeni sa pažljivo razcijenim i logički podržavnim tehnologijama koje mi nazivamo HTML, XHTML, ili CSS. Svaka od ovih tehnologija posjeduje svoje sintakse, pravila i standarde koji zajeno sa sadržajem, grafikama i drugim komponentama sačinjavaju i definišu izgled Web stranice.

INTERNET PROGRAMIRANJE I | 2010

Kada kažemo (X) HTML, mi zaista govorimo o HTML i XHTML zajedno. Iako oni nisu identični, oni su dovoljno isti kako bi se primjenili u ovu korist referenciranja, te da isti ima smisla.

9

1.2. Hypertext Posebna uputstva u HTML dozvoljavaju određenoj liniji teksta da pokazuju (linkuju) na nešto drugo ili neki drugi resurs u svijetu interneta. Takvi pokazivači se nazivaju hyperlinks (hiperveze) . Hyperlinks se matraju ljepilom koji drži World Wide Web zajedno. U Web pretraživaču, hyperlinks se obično pojavljuju u plavoj boj te su i podvučeni. Kada kliknete na jedan od njih, to vodi na neko drugo mjestu prema nekoj drugoj Web stranici ili nekom drugom resursu. Hypertext (hipertekst) ili ne, Web stranica je tekstualna datoteka, što znači da možete da kreirate i uređujete Web stranice u bilo kojoj aplikaciji koja kreira čisti tekst (kao što je Notepad ili TextEdit). Neki softverski alati nude napredne opcije i aplikaicje (Microsoft Visual Studio, Macromedia Dreamweaver) koji će pomoći i olakšati kreiranje Web stranice, ali oni generišu iste tekst datoteke koje se kreiraju sa čistim tekst editorima. Stručno mišljenje, oni koji tek počinju sa HTML-om, je najbolje da se služe jednostavnim tekst editorom. Samo otvorite Notepad i spremni ste za internet programiranje. Prilikom kreiranja HTML stranica, klonite se tekstualnih procesora kao što su WordPad ili Microsoft Word. Oni uvode dodatne vrste pomoćnog koda i sintakse koje na Web stranicama mogu proizvesti nepoželjne rezultate.

INTERNET PROGRAMIRANJE I | 2010

World Wide Web u prevodu svjetski rasporstranjena mreža zaista opravdava svoj naziv. To je doslovno rečeno Online mreža koja se sastoji od welikog brjoa Web stranica i resursa koji su Hostovani na Web serverima širom svijeta, povezani u bilionima od načina pomoću hiperveza koje vežu jednu za drugu. Bez takve veze, Web bi izgledao kao veliki broj samostalnih Web stranica.

10

1.3. Markup Web pretraživači su posebno kreirani u svrhu čitanja HTML uputstva (poznat kao Markup kod) i rikazivanje istih rezultata na Web stranicu. Markup kod se nalazu u tekstualnu datoteku (sa sadržajem Web sajte) te isti daje naredbe Web pretraživaču.

INTERNET PROGRAMIRANJE I | 2010

Na primjer, pogledajte Web stranicu prikazanu na Slici 01-01. Možete videti kako je Web stranica sačinjena i kako je oblikovan pogledom u HTML kod koji sačinjava istu stranicu.

11

Slika 01-01 Ekološko Društvo Korara (http://www.edkozaraprijedor.org) Kao što možete primjetiti, prikazana Web stranica se sastoji od mnogih komponenata i elemenata. Neke od njih su naslovi, tekst u formatu paragrafa, liste, slike.

INTERNET PROGRAMIRANJE I | 2010

Isto tako svki komponent i element Web stranice ima sopstven način izgleda, tako da je na primjer naslov „EKOLOŠKO DRUŠTVO KOZARA“ znatno veće i znatno više naznačeno nego tekst koji se nalazi ispod naslova. Isto tako format hiperlinkova je znatno drugačiji nego formt teksta definisanim kao paragraf.

12

1.4. Web browsers

Web browses ili Web pretraživači ili Internet pretraživač je softverska aplikaciJa za preuzimanje, predstavljanje i pregledanja raznih izvora informacija na World Wide Web-u ili internetu. Izvor informaciJa je identifikovan pomoću Uniform Resource Identifier (URI) ili Uniform Resource Locator (URL), i može da bude Web stranica, slika, video ili druga vrsta sadržaja sadržaja. Hiperveze koje se nalaze u resursima omogućavaju korisnicima laku navigaciju predtaživača ka povezanim resursima. Iako su pretraživači prvenstveno namenjeni za pristup svetskoj komunikacionoj mreži ili internetu, oni se takođe mogu koristiti za pristup informacijama od strane Web servera u privatnim mrežama ili datotekama u sistemima datoteka. Neki pretraživači se takođe mogu koristiti da sačuvaju resurse na sistem datoteka. Dostupni Web pretraživači se razlikuju u sadržaju funkcija od minimalnih funkcija, tekstualno baziranog korisničkog interfejsa za osnovnu podršku, te HTML bogatih korisničkih interfejsa koji podržavaju širok spektar formata i protokola. Pretraživači koji uključuju dodatne komponente za podršku e-pošte ili email-a, Usenet News i Internet Relai Chat (IRC), ponekad nazivaju "internet apartman" nego samo "Web pretaživač". Svi glavni Web pregledači dozvoljavaju korisniku da otvore više izvora informacija u isto vrijeme, bilo u različitim prozorima pregledača ili u različitim karticama u istom prozoru pretraživača. Glavni pregledači takođe uključuJu pop-up bloker za sprečavanje neželjenih prozora koji "niču" bez dozvole korisnika.

INTERNET PROGRAMIRANJE I | 2010

Većina velikih internet pretraživača su ove elemente korisničkog interfeJsa zaJedničko:

13

 Napred i nazad tastere da biste se vratili na prethodni resurs i napred opet.  Lista istorije, resursi prethodno posećeni u listi (obično, lista nije vidljiva sve vreme i treba da bude pozvana)  Osveži taster da ponovo učitava trenutni resurs.  Stop da biste otkazali opterećenja resursa. U nekim pregledačima, dugme Stop je sastavni dio Reload dugmeta.  Home taster za povratak na početnu stranu korisnika.  Address Bar za unos Uniform Resource Identifier (URI) od željenog izvora i resursa. Glavni pregledači takođe poseduju inkrementalni pretraživačke funkcije za pretraživanje u okviru stranice.

1.5. Web servers

Web server je računarski program koji pruža (služi), sadržaj, kao što su Web stranice, koristeći Hipertekt Transfer Protocol (HTTP), preko World Wide Web-a ili interneta. Termin Web server takođe može da se odnosi na računar ili virtuelnu mašinu na kojoj je istalirain i koja pokreće program. Osnovna funkciJa Web servera je da isporuči Web stranice klijentima. To znači isporuku HTML dokumenata i bilo kog dodatnog sadržaja ili resursa koji može biti uključen u dokumentu, kao što su slike, filmovi, JavaScript itd. Klijent, obično internet pretraživač, inicira komunikaciju tako što zahteva određene resurse pomoću HTTP protokola. Server odgovara sa sadržajem tog izvora, ili poruku o grešci ako nije u stanju da to uradi. Resurs je obično prava datoteka na sekundarnoj memoriji servera, ali to nije stalan slučaj, te zavisi od toga kako je Web server implementiran.

INTERNET PROGRAMIRANJE I | 2010

Web serveri se uvijek ne koriste za prikazivanje Web stranica i sadržaja na internetu. Isti se mogu se naći ugrađeni u uređajima kao što su štampači, ruteri, Web kamere i služe samo za lokalnu mrežu. Web server može biti korišten kao dio sistema za nadzor i / ili sistema za upravljanje uređaja u pitanju. To obično znači da nema potrebe za instalaciju dodatnog softvera na računar klijenta, jer je samo potrebno imati Web pretraživač (koji je sada uključen u većini operativnih sistema).

14

1.6. URI/URL/URN U svijetu računara, Uniform Resource Identifier (URI) je niz znakova koji se korisei za identifikaciju imena ili resurs na Internetu. Takva identifikaciJa omogućava interakciju sa lokacijama izvora preko mreže (obično World Wide Web ili Interneta) koristeći specifične protokole. Šeme navođenja konkretne sintakse i pratećih protokola definišete svaku URI. URI se mogu klasifikovati lokatori (URL), ili kao imena (URN), ili kao oboje. Uniform Resource Name (URN) funkcija je kao što je ime osobe, dok Uniform Resource Locator (URL) prestavlja ulicu i broj te osobe. Drugim rečima: URN definiše identitet stavke, a URL obezbeđuje adresu za pronalaženje. Uniform Resource Name (URN) je Uniform Resource Identifier (URI), koji koristi URN šemu, i ne podrazumeva dostupnost identifikovanih resursa. Oba URN (imena) i URL (lokatori) su URI, gdje URI može biti ime i lokator u isto vreme. Funkcionalni zahtevi za Uniform Resource Name (URN) su opisani u RFC 1737. URN su dio arhitekture Internet informacija koji se sastoji od URN, Uniform Resource Characteristics (URCs), i lokatora internet adrese (URL). Svaka igra posebnu ulogu:

INTERNET PROGRAMIRANJE I | 2010

 URN se koriste za identifikaciju,  URCs za uključuJući i meta-informacije.  URL za lociranje i pronalaženje resursa. Primjer URI

15

http://www.int-ware.com/news/images/slika.jpg  http://  URC  Protocol - protokl koji se koristi  U većini slučajeva početna linija URL-a  https, ftp...  www.int-ware.com  URL  Domain  /news/images/  URI  Path – Putanja do resursa  Slika.jpg  File Name – Naziv resursa 2. WEB STRANICE – OD ČEGA SE SASTOJE 2.1. HTML dokumenti

Web stranice su u stvarnosti HTML dokumenti koji se kreiraju i razvijaju, pomoću raznih markup i programerskih jezika, kako bi se razvili Web projekti. Web stranice su vizalni dio Interneta i ujedno i jedan od osnovnih aspekata komunikacije i prenosa podataka i informacija. Web stranica može da primi više vrsta sadržaja kao što je tekst, grafike, forme, audio i video datoteke, te interaktivne igre. Web stranice se tekstualni dokumenti, što implicira se sadržaju definišu pomoći rječi. Uzimajući u obzir ovu činjenicu može se predpostaviti da su pojedine rječi rezervisane. Skup rezervisanih rječi se naziva sintaksom, te se iste koriste kako bi se objasnilo analitičkim analizorima šta je potrebno učiniti. U slučaju Web stranica koristi se X(HTML) sintaksa, gdje Web pretraživači su analitički analizori. HTML dokumenti moraju da ispoštuju minimalne zahtjeve standarda. Standardi se primjenjuju kako bi se korisnicima ili posjetiocima stranica olakšao pregled sadržaja iste stranice ali isto tako i ispošovali definisane strukture i sintakse koje Web pretraživači koriste prilikom prevođenja Web stranica. Ovi ključni elementi koje svaka stranica mora da posjeduje su:    

HTML HEAD TITLE BODY

2.1.1. HTML

2.1.2. HEAD U zagljave dokumenata stavljaja se elemeni koji se koristi kako bi se opsao sadržaj ili naslov web stranice, naveli stilovi koje će se koristiti na stranici (css), isprogramirale potrebne funkcije koje će se izvršavati na web stranici (javascript, .asp, itd.), povezali drugi dokumnti čiji sadržaj bi koristila Web stranica. Element HEAD se definiše unutar HTML elemta. 2.1.3. TITLE

INTERNET PROGRAMIRANJE I | 2010

Definiše da je dokument web stranice. Ujek se nalazi na počektu tekstulnog sadržaja web stranice. HTML sadži određene dodatne atribute i elemnte kako bi detaljnije obrazložio i pojasnio sintaksu web stranice.

16

TITLE definiše naslov web stranice. Ovaj naslov je ključan iz nekoliko razloga. Naslov definiše i opisuje sadržaj vaše web stranice. Prilikom učitavanja Web stranica, Web pretaživači koriste naslove kako bi iste podtke snimili u globalnu bazu podataka. Ova baza podataka se koristi prilikom pretraživanja web stranica putem pretraživačkih web servisa kao što su google.com. Element TITLE se nalzi unutar elemnta HEAD.

2.1.4. BODY BODY element se sastoji od sadržaja koji će se prikazati na Web stranici. BODY se obično stati od mnogih drugih elemenata koji se koriste kako bi se prikazali naslovi, paragrafi, liste, tabele, slike, veze sa drugim dokumentima itd.

INTERNET PROGRAMIRANJE I | 2010

Body elemnt se nalzi unutar HTML elemnta.

17

2.2. Slike u HTML dokumentima Dodavnje slika u HTML dokumenta je veoma lako. Slike su česta pojava na Web stranicama ali je potrebno detaljno planiranje kako bi se isti implementirali na Web strnaici. Ključno je znati kako se slike prikazuju na Web strnaici i koja je njigova stvarna veličina (Kb ili Mb). Stvarna veličina slika može da ima veliki uticaj prilikom učivanja Web stranice, kako vremenski uticaj tako i vizualni. Slike se nalaze unutar BODY elementa.

2.3. Linkovi i navigacija

INTERNET PROGRAMIRANJE I | 2010

Linkovi su kritični faktor Web stranica. Linkovi pružaju mogućnost prelaza sa jedne Web stranice na drugu Web stranicu, drugim rječina pružaju navigaciju kroz cijeli sadržaj Web stranice. Linkovi ne samo da vežu Web strnaice koje su sastavni dio jednog projekta, Već isto tako mogu da pokazuju ka drugim resursima na interntu.

18

2.4. HTML / X(HTML)

2.4.1. HTML Kao što smo već naveli sintaksa koja se koristi za razvoj Web strnaice se naziva HTML. HTML je drugom rječima jezik koji se koristi da be se objasnio sadržaj Web stranica. HTML nije PROGRAMERSKI jezik već je dio porodice MARKUP jazika što bi u prevodu značilo OZNAČAVAJUĆIH jezika. HTML je skraćnica za Hyper Text Markup Language. HTML je nasljednik markup jezika SGML Standard Generalized Markup Language U istoriji ravoja interneta, došlo do razvoja mnogobrojnih Web pretraživača. Svaka promjena tehnologija, mjenjala je načine rada određnih stuktura tehnologija, gjde su se neke oblasti širile a druge povremeno gasile. Zajedno sa napredovanjem tehnologija Web pretaživača mjenjala se sisntaksa HTML jezika kako bi se prilagodila globalnim zahtjevima koji su nastajali. Obično su to bile dorade već postojećih elemnata ili implementacija novih. HTML se koristi kako se na Web stranica prikazali, i ujedno formatirali, sadržaji kao što su tekst, slike, tabele, liste i mnogobojni drugi sadržaji koje jedna Web stranica može da posjeduje.

2.4.2. XHTML

INTERNET PROGRAMIRANJE I | 2010

XHTML je naslednik HTML markup jezika. XHTML je takođe MARKUP jezik ali posjeduje dodatne standarde koje se primjenjuju unutar sintakse jezika. XHTML je mnogo čistiji i struktuisan jezik, gdje HTML je potpuna suprostnost, te ne posjeduje satndarne stuktuisanja i definisanja. XHTML je skraćenica za EXtensible Hyper Text Markup Language.

19

XHTML jezik je skoro pa identičan HTML jeziku verzije 4.1. XHTML je 26. Janura 2000.godine posta svjetski standard koji se primjenjuje i predlaže ze upotebu prilikom razvoja Web stranica. U daljem kontekstu, ove knjige, svi primjeti će koristiti sintaksa XHTML-a. XHTML je razvijan na osnovu sintaksa XML te pripadaju istoj familiji jezika. HTML se koristi kako se na Web stranica prikazali, i ujedno formatirali, sadržaji kao što su tekst, slike, tabele, liste i mnogobojni drugi sadržaji koje jedna Web stranica može da posjeduje.

2.4.3. Sintaksa i pravila

HTML  Neke nepravilnosti koje mogu da dovedu softver za čitanje HTML-a (Web pretraživače) u problem.  Princip starijih thenologija.  Nedostaci u sintaksi programerskog jezika.  Tagovi mogu biti nepravilno ugneždeni.  Tagovi NE moraju uvijek biti zatvoreni.  Tagovi MOGU biti u velikim slovima. XHTML       

Koristi struktuisani jezik pogodan za softver za čitanje HTML-a. Princip nove tehnologije. Ispravka nedostakata u HTML jeziku. Tagovi ne mogu biti nepravilno ugneždeni. Tagovi moraju uvijek biti zatvoreni. Tagovi NE MOGU biti u velikim slovima. Radi na stadardima XML-a.

2.4.3.1. Elementi Elementi su sastvani i ključni dijelovi web strnaica. Elementi se koriste da se definiše način prikazivanja sadržaja na Web stranici. Elementi se definišu korištenjem TAG elementa. TAG-ovi sa svojim sadržajem su jedan vid prevodioca. Čitaju šta je programer napisao i govore Web pretraživačima kako da prikazuju sadržaj. TAG-ovi se dijele na dvije vrste: ZATVORENI TAG-ovi OTVORENI TAG-ovi

Zatvoreni TAG-ovi Zatvoreni TAG-ovi se sastoje od dva elemnta. Jedan element definiše gdje TAG počinje a drugi elemnet govori gdje se isti TAG zatvara. Zatvoreni tagovi izgledaju ovako: ... Kao što se vidi u primjeru gore element početni element govori Web pretraživači gdje TAG počinje dok zatvarajući element govori Web pretraživaču da se isti TAG završio. Sadržaj je ono što se nalazi između dva elementa.

INTERNET PROGRAMIRANJE I | 2010

 

20

U praksi najčešće korišten otvoreni TAG jeste paragraf. Paragraf se definiše pomoću zatvorenog TAG-a ... . Sadržaj koji se nalazi između tagova prikazaće se kao paragraf.

Otvoreni TAG-ovi Otvoreni TAG-ovi se sastoje od jednog elemnta. Jedan jedini element definiše gdje TAG počinje ali isto tako gdje se isti TAG zatvara. Otvoreni ne posjeduju sadržaj zato se isti zove prazni TAG-ovi. Otvoreni TAG-ovi izgledaju ovako: U praksi najčešće korišten zatvorni TAG jeste TAG koji se koristi za sliku. Slika se definiše pomoću otvorenog TAG-a .

Nestovani TAG-ovi

Neki TAG-ovi se mogu naći samo unutar drugih TAG-ova. Ova vrsta TAG-ova se nazivaju nestovani TAG-ovi. U primjeni, nestovani TAG-ovi se sastoje od zatvorenih tagova koji se sastoje od jednog ili više, kako otvorenih tako i zatvorenih TAG-ova ... ...

INTERNET PROGRAMIRANJE I | 2010

Ili

21



2.4.3.2. Atributi

Atributi se nalaze unutar tagova, otovrenih i zatvorenih. Atributi služe da dodatno definišu elemente, njihove sadržaje i prezentuju internet pretraživače sa dodatnim informacijama o elementima. Atributi se nalaze unutar početnog TAG elementa kada su u pitanju zatvoreni tagovi ili unurat samog otvorenog elementa TAG-a. Svaki element da bi bio od koristi internet pretraživaču što implicira da elementi dolaze zajedno u parau sa vrijednostima. Elementi mogu da sadrže jeda, više ili ni jedan atribut unurat svojih TAG-ova. Otvoreni TAG sa elementom: ... ... Sadržaj koji se nalazi između ovih zatvorenih TAG-ova će biti prikazan kao paragraf, te će isti tekst biti poravnat s ljeva. Zatvoreni TAG sa elementom: Slika koja ima atribute

Prilikom razvoja Web stranica, a naročito X(HTML) stranica potrebno je imati u vidu i poznavati određena pravila, to jeste pravila sintakse koja se moraju ispoštovati. Neka od tih pravila, a koja su vezana za elemente i atribute su: TAG-ovi bi uvijek trebali biti definisani malim slovima Pratiti kada se koji tag otvara, te kada se isti zatvara Atributi da su malim slovima Znak = se nalazi neposredno poslije naziva atributa Vrijednost atributa se nalazi neposredno poslije znaka = i unutar navodnih znakova "..." INTERNET PROGRAMIRANJE I | 2010

    

22

3. KREIRANJE I RAZVOJ WEB STRANICE 3.1. Prije početka rada Kada se razvoja Web stranica, nije dobro upaliti neki od alata za razvoj Web stranica kao što su Microsoft Webdeveloper, Macromedio Dreamviewer ili čak notepad, već je poželjno da se počne od papira i olovke. Veoma je bitno da se obave određenje radnje ili bolje rečeno analize prije nego što se uopšte pređe na sam dizan i/ili razvoj Web stranice. Pitanja koja bi se trebala postviti prije samog početka planiranja i dizajna su:      



INTERNET PROGRAMIRANJE I | 2010



23

Ko je naručilac ili budući vlasnik Web stranice? Koje su minimalne potrebe naručioca ili budućeg vlasnika Web stranice? Koje su maksimalne potrebe naručioca ili budućeg vlasnika Web stranice? Ko su potencijalni posjetioci? Koja je tema Web stranice i njenog sadržaja? Koje su to ključne boje?  Boje sa koje na nalaze na log-u!  Boje koje asociraju sa predmet ili sadržaj Web stranice! Da li postoji potreba za dinamičnost Web stranice?  Konstantno mjenjenje sadržaja na Web strnaici!  Vijesti  Slike/Galerije  Obavještenja  Ažuriranje resursa pristupnih na Web stranicic! Da li ima potrebe za prikazivanje grafičkih resursa?  Logo!  Slike!  Banneri/Reklame!

Na osnovu odgovora na gore navedena pitanja možemo da pristupimo sledećim fazama samog razvoja Web stranice.

3.2. Planiranje i dizajn Uzimajući u obzir odgovore iz predhodne faze moguće je zaključiti:     

Minimalni obuhvat Web stranice. Maksimalni obuhvat Web stranice. Ciljnu grupu. Sadržaj i kontekst sadržaja. Željeni izgled.

Kao što smo Već naveli, sam početak ili inicijalni razvoja Web stranice bi trebao biti na papirnom formatu koji ćemo kasnije pretvoriti u elektronski format ili bolje rečeno u samu Web stranicu. Uzimajući u obzir obuhvat Web strnice, ciljnu grupu posjetioca, boje i grafički sadržaj Web stranice možemo definisati osnovne smjernice za dizajn Web stranice. Da bi se pristupilo istom dizajnu poželjno je definisati neke vizulane standarde koji će imati uticaj na sam sadržaja Web stranice. Ovi standardi se poštuju kako bi se posjetiocima olakšao sam pregled sadržana koji se nalazi na Web stranici.

Tijelo Web stranice čini sadržaj koji će se nalaziti na samoj Web stranici. U sadržaju možemo imati razne komponente kao što su naslovi, paragrafi (tekst), liste, tabele, slike, vido i audio zapisi, te mnogobrojne druge, koje će zajendo prikazivati i imati veliki uticaj na koji način su prezentovane informacije. Sam kontekst sadržaj bi trebao igrati veliki ulogu kako će iste komponente biti poredane i prikazane na stranici. Izgled tijela se mjenja od zavisnoti od sadržaja, tako da unutar jedne Web stranice svi linkovi ne moraju imati isti vizulani izgled. Naslovi treba da budu eksplicitno definisani sa prilagođenim formatima. Naslovi treba da su decidno precizirani o sadržaju koje oni predstavljaju. Podnožje Web stranice se obično sačinjava od sadržaja ko je vlasnik Web stranice, ko je odgovoran za sam ravoj Web stranice, te neke druge ključne informacije koje asociraju direktno na Web stranice, ne toliko na sam sadržaj iste. Navigacije na web stranicama treba da budu jasno definisane, te pregledne za korisnika kako bi se jednostvanim pregledom došlo do željenih ingormacija. Kao što smo Već

INTERNET PROGRAMIRANJE I | 2010

U praksi sadržaj Web stranice se dijelu u tri dijela zaglavlje, tijelo i podnožje. U zagljavu Web stranice, u većini slučajeva, nalazi se banner zajedno sa meni-om ili navigacijom. Banner se koristi kako bi nam predstavio šadržaj cijele Web stranice i šta možemo očekivati od iste. Meni ili navigacija nam služi kako bi mogli lakše da se krećemo kroz sadržaj Web strnaice. Poželjno je da zaglavnje bude jedna konstanta koja će se replicirati i biti identična kroz sav sadržaj Web stranice. Ovim putem ćemo obezbjediti lakši pristup pronalaženju željenih informacija i samu navigaciju.

24

naveli poželjno je da se navigacije nalaze u samom zagljavju Web stranice i da se repliciraju kroz sav sadržaj. U fazi planiranja potrebno je znati tačno koji linkovi će se nalaziti na Web stranici, te iste logički povezati jedne sa drugim.

INTERNET PROGRAMIRANJE I | 2010

Ako se dobro definišu svi ključni elementi Web strnaice, napravi se nacrt istih na papru, može se pristupiti samom dizajnu iste web stranice, gdje će se uzeti u obzir boj i grafički sadržaj. U svijetu interneta postoje mnogobrojni Web dizajneri koji koriste razne tehnologije prilikom dizajniranja Web stranice. Dizajn Web stranice je profesio umjetničke prirode kao što je slikanje i književnost. Web dizajneri su obično ljudi sa umjetničkim duhom ali veoma često ne i sa prirodno-matematičim koji je potreban da se posato dobar programer.

25

3.3. Kreiranje HTML koda / Osnovni elementi Nakon detlajnog planiranja i dizajna Web stranice, može se pristupiti izradi ili programiranju sadržaja Web stranice. U drugom poglavlju definisali smo štu to minimalni razvojni sadržaj same Web stranice, a to su elementi HTML, HEAD, TITLE i BODY.

3.1.1. HTML HTML element je početni element u samom razvoju. On se deifniše pomoću dva TAG-a. Prvi TAG je vrste otvorenog TAG-a !DOCUMENTYPE html, dok je drugi tag vrste zatvorenog TAG-a html. INTWARE : bjela pozdina i crna slova test test test test test test test test test test test test test test test test test test test test test test test test test. Paragaf sa crvenom pozdinom i plavim slovimatest. U ovom paragrafu je podeseno tako da svu sva slova (mala i velika) prikazana kao stampana velika slova.

INTERNET PROGRAMIRANJE I | 2010



48

PRIMJER 7 :: Korištenje naprednih atributa STYLE atributa STYLE Pozadniska boja je plava Ispisani tekst "float" desno Tackasti okvir "border-style:dotted;" Puni okvir plave boje "border-style:solid; border-color:Blue;" Gornja linija "border-top-style:groove;" Razmak izmedju slova "letter-spacing:12px" Velicina slova "font-size:larger;" Pozicioniranje teksta "text-align:center" Promjena kursora "cursor:hand" Stil ispisa fonta "font-style:oblique;" Desna linija okvira "border-right:solid;"

INTERNET PROGRAMIRANJE I | 2010

Izgled fonta "font-family:Jokerman;"

49

Uvucen tekst 15px "text-indent:15px;" Nevidljiv tekst Lijeva linija okvira "border-left-style:ridge;"

4.3. Linkovi Jedna od ključnih elememanta (X)HTML programerskog jezika. Povezuje web stranice sa sadržajem unutar istog dokumenta, unutar jende lokacije, unutar više lokacija, sa lokacijama unutar mreže, sa lokacijama na internetu. Pomoću linkova ili tačnije rečeno hiperlinkova možemo povezati Web stranicu sa ostalim resursima kao što su slike, dokumenti, arhivski fajlovi, te ostalim resursima na internetu. Linkovi se difinišu pomoću zatvorenih TAG-ova ... . Prilikom definisanja linkova potrebno definisati naj manje jedan atribut kako bi isti bio od koristi. Obično je taj atribut href koji definiše lokaciju na koju želimo da odemo, te je njegova vrijednost logička putanja. Hiperlink unutar jedne lokacije KONTAKT INFORMACIJE Hiperlink unutar više lokacija SLIKA 01 Hiperlink na lokaciju unutar mreže SLIKA 01 Hiperlink na lokaciju na internetu INT-WARE

Postoje mnogi drugi atributi koji se mogu koristiti sa elementom A. Jedan od njih je atribut name. Pomoću ovog atributa moguće je krećati se kroz sadržaj jedne stranice. Da bi radio, vrijednost atributa name mora početi sa znakom tarabe (#). Početna ... ... ... ... ...

INTERNET PROGRAMIRANJE I | 2010

SLIKA POZADINE

50

Nazad na početak Atribut target služi kako bi se definisao način otvranja linka, da li unutar istog prozora Web pretraživača ili da se otovori novi prozor. Ako ne postji definisani stilovi za linkove, onda će oni linkovi koji nisu posjećeni biti plave boje i podvučeni, posjećeni linkovi biti ljubičaste boje i podvučeni a aktivni linkovi biti crvene boje i podvučeni. Pored linkova koji se koriste kako si korisnik preusmjerio na dalju lokaciju, postoje još jedna vrsta hiperlinkova, a to su hiperlinkovi za email. Ova vrsta hiperlinkova se definiše na identičan način kao obični hiperlinkovi samo sto atribut href počinje rječom mailto: zatim slijedi email adresa. Nakon što se izabere ovaj hiperlink od strane korisnika, otvoriće se defoltna email aplikacije sa popnjenim podacima za slanje email-a. Jedna email adresa INTERNET PROGRAMIRANJE Jedna email adresa sa predmetom INTERNET PROGRAMIRANJE Više email adresa

INTERNET PROGRAMIRANJE I | 2010

OPIS

51

PRIMJER 8 :: Korištenje hiperlinkova unutar dokumenta Untitled Page NASLOV H1

INTERNET PROGRAMIRANJE I | 2010

Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test NAZAD NA POCETAK

52

PRIMJER 9 :: Korištenje hiperlinkova sa internim i eksternim resursima HIPERLINKOVI NASLOV H1 Slika koja se nalazi na istoj lokaciji kao i stanica Slika u unutar foldera slike koji se nalazi na istoj lokaciji kao i stanica Slika u unutar foldera slike koji se za jedan nivo iznad lokaciji kao i stanica Int-Ware Kompjuterski Inženjering Nazad na pocetak

INTERNET PROGRAMIRANJE I | 2010



53

4.4. Slike Dodavnje slika u HTML dokumenta je veoma lako. Slike su česta pojava na Web stranicama ali je potrebno detaljno planiranje kako bi se isti implementirali na Web strnaici. Ključno je znati kako se slike prikazuju na Web strnaici i koja je njigova stvarna veličina (Kb ili Mb). Stvarna veličina slika može da ima veliki uticaj prilikom učivanja Web stranice, kako vremenski uticaj tako i vizualni. Slike se nalaze unutar BODY elementa. Definiše se pomoću otvorenog TAG-a moze da posjeduje razne elemente. Kljčni ili osnovni atribut TAG-a je atribut src. Atribut src se koristi kako bi se definisala fizička lokacija slike. Fizička lokacija se sastoji od putanje i naziva dadoteke, to jeste naziva slike. Vrijednost atribura src ili drugom rječima lokacija slike se definiše unutar navodnih znakova src=“slike/slika1.jpg“ Slike se mogu nalaziti na raznim lokacijama, te samim tim i vrijednost atributa src može da pokazuje ka raznim putanjama i lokacijama:    

U istom folderu kao i Web stranica Na lokalnom računaru Na lokalnoj mreži Na internetu

 Slika se nalazi u istom folderu u kome je i HTML dokument, koji je poziva. src=“slika.jpg“  Slika se nalazi u folderu ispod HTML dokumenta koji je poziva. src= "slike/slika.jpg"  Slika u folderu iznad HTML dokumenta koji je poziva. src="../slika.jpg"  Slika dva foldera iznad HTML dokumenta koji je poziva. src="../../slika.jpg"  Slika jedan folder gore, pa jedan dole u odnosu na HTML dokument. src="../folder/slika.jpg"  Slika koja se nalazi domain adresi www.int-ware.com u folderu slike pod nazivom slika.jpg. src="http://www.int-ware.com/slike/slika.jpg" Unutar element IMG, mogu se definisati dodatni atrubuti kao što su alt, width, height, align i style.

INTERNET PROGRAMIRANJE I | 2010

Primjeri kako se pozivaju različite lokacije gdje:

54

Atribut alt definiše alternativni tekst koji će se prikazati u sličaju da se slika ne učita prilikom prevođenja Web stranice od strane Web pretraživača. Željeni tekst se stavlja u navedne znake i predstavlja vrijednost atributa alt. Atribut width definiše širinu slike kojom će se učitati prilikom prevođenja Web stranice od strane Web pretraživača. Željena širina se postavlja u pikeslima, te se stavlja u navedne znake i predstavlja vrijednost atributa width. Atribut height definiše visinu slike kojom će se učitati prilikom prevođenja Web stranice od strane Web pretraživača. Željena visina se postavlja u pikeslima, te se stavlja u navedne znake i predstavlja vrijednost atributa height. Atribut align definiše fizičku lokaciju slike gdje će se slika učitati prilikom prevođenja Web stranice od strane Web pretraživača. Željena visina se stavlja u navedne znake i predstavlja vrijednost atributa align. Moguće vrijednosti atributa align su bottom, top i middle. Atribut style definiše fizičke atritube slike. Primjenjuje se na identičan način kao što je objašnjeno prvom dijelu kada su u pitanju tekstualna formatiranja. Može da se sastoji od raznih atributa, jedan atribut atributa style se ističe ispred svih. Riječ je atributu float. Ovaj atribut nam omogućava da podesimo sliku unutar teksta, te da se ista slika integrira unutar teksta. Atribut float može da posjeduje dvije vrijednosti, a to su left i right.

INTERNET PROGRAMIRANJE I | 2010

Slika koja se nalazi na lijevoj strani i koja je okužena tekstom.

55

Tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst Slika koja se nalazi na desnoj strani i koja je okužena tekstom. Ovo je javascpit kod koji se nalazi unutar elementa P"); document.write("Ovo je javascpript kode koji unutar elementa BODY "); document.write("Naslov javascript"); document.write("Ovo je javascript kod koji se nalazi unutar elementa P");

INTERNET PROGRAMIRANJE I | 2010



107

7.3. Varijable

Varijable ili promjenjljive su rezervisani prostor memorije. Naziv varijable se definiše kako bi se na logički način, jednostavniji i prepoznatljiviji način programera, moglo dodi do rezervisane lokacije. Varijable se koriste kako bi se snimila željena vrijednost, arithmetička ili tektstualna, te ista bila dostupna za dalju upotrebu ili manipulaciju sa drugim funkcijama i operacijama. Varijable se mogu koristiti za arithmetičke i matematičke funkcionalnosti ali isto tako i za povezivanje tekstualnih nizova. Definisanje varijabli se se izvršava unutar elementa SCRPIT. Komanda var, koja je prefiks nazivu varijable, definiše da je u pitanju varijabla. Nazivi varijabli nebi trebali da sadrže razmake, slova ščdžŠĐČDŽ ili samo brojeve. Poženo je nazvati varijable tako što de naziv iste adekvatno predstavljati sadržaj koji se nalazi u istoj varijabli.



Vrijednost ili sadržaj varijabli se može definisati na dva načina. Prvi način je definisanje sadržaja prilikom inicijalnog definisanja varijable.

var nazivVarijable = vrijednostVarijable; // -->

Drugi način je definisanje sadržaja nakon što je definisana varijabla.

INTERNET PROGRAMIRANJE I | 2010



Sadržaj varijable se može prikazati pomoću funkcije document.write.

INTERNET PROGRAMIRANJE I | 2010



109

Nakon što su vatijable definisane, iste se mogu pozvati, promjeniti ili iskoristiti sa drugim operacijama bilo gdje na Web stranici.



INTERNET PROGRAMIRANJE I | 2010



110

PRIMJER 32 :: Osnovne funkcije javascpir programerskog jezika i upotreba varijabli

INTERNET PROGRAMIRANJE I | 2010

JAVASCRIPT var naslov; naslov = "Javascpit stranica"; var podnaslov = "Pod naslov H3"; var sadrzaj; sadrzaj = "Dobdrodosli na moju javascipt stranicu." document.write(naslov); document.write(podnaslov); document.write(sadrzaj);

111

7.4. Arithmetičke operacije Arithemtiče opracije se najčešde izvršavaju nad varijablama ili u kombinaciji varijabli i teksta.

7.4.1. + (plus) Sabira dva ili više broja.

Sabira varijable.

Spaja tekstualne vrijednosti.

INTERNET PROGRAMIRANJE I | 2010



112



INTERNET PROGRAMIRANJE I | 2010



113

7.4.2. – (minus) Oduzima dva ili više broja.



Oduzima varijable.

INTERNET PROGRAMIRANJE I | 2010



114

7.4.3. * (puta) Množi dva ili više broja.



Množi varijable.



115

7.4.4. / (podjeljeno) Dijeli dva ili više broja.

Dijeli varijable.

116

7.4.5. % (procenat) Preračunava preostalu razliku između dva broja nakon prvog djeljenja. Preračunava preostalu razliku između dvije varijable nakon prvog djeljenja.

117

7.4.6. ++ (automatsko uvećanje) Povećava vrijednost broja za jedan.

Povećava vrijednost varijable za jedan.

118

7.4.7. – (automatsko umanjenje) Umanjuje vrijednost broja za jedan.

Umanjuje vrijednost varijable za jedan.

119

7.4.8. –var (postavljanje negativne vrijednosti) Negira virjednost varijable.

INTERNET PROGRAMIRANJE I | 2010



120

PRIMJER 33 :: Arithmatičke funkcije ARITHMETIČKE FUNKCIJE var broj11 = 15; var broj12 = 13; var rezultat11 = broj11 + broj12; var broj21 = 35; var broj22 = 13; var rezultat21 = broj21 - broj22; var broj31 = 8; var broj32 = 7; var rezultat31 = broj31 * broj32; var broj41 = 64; var broj42 = 8; var rezultat41 = broj41 / broj42; var broj51 = 28; var broj52 = 5; var rezultat51 = broj51 % broj52; var broj61 = 18; var rezultat61 = ++broj61;

INTERNET PROGRAMIRANJE I | 2010

var broj71 = 18; var rezultat71 = --broj71;

121

var broj81 = 18; var rezultat81 = -broj81; document.write("Rezutat operacije + : " + rezultat11 + ""); document.write("Rezutat operacije - : " + rezultat21 + ""); document.write("Rezutat operacije * : " + rezultat31 + "");

INTERNET PROGRAMIRANJE I | 2010

document.write("Rezutat operacije / : " + rezultat41 + ""); document.write("Rezutat operacije % : " + rezultat51 + ""); document.write("Rezutat operacije ++ : " + rezultat61 + ""); document.write("Rezutat operacije -- : " + rezultat71 + ""); document.write("Rezutat operacije - : " + rezultat81 + "");

122

7.5. Dodjela Vrijednosti Dodjela vrijednosti se odnosi na dodjelu sadržaja definisanim varijablma.

7.5.1. = (jednako je)

Dodjeljuje vrijednost ili tekst sa desne strane varijabli definisanoj na ljevoj strani. Numerička vrijednost.

Tekstutalni sadržak

123

7.5.2. += (plus jedako je)

Sumira ili povezuje dvije varijable ili varijablu i neku vrijednost, te dobijeni rezultat dodjeljuje varijabli sa ljeva. Numberička vrijednost.

Tekstualni sadržaj

INTERNET PROGRAMIRANJE I | 2010



124

7.5.3. -= (minus jednako je) Oduzima dvije varijable ili varijablu i neku vrijednost, te dobijeni rezultat dodjeljuje varijabli sa ljeva. Numberička vrijednost.

INTERNET PROGRAMIRANJE I | 2010



125

7.5.4. *= (puta jednako je) Množi dvije varijable ili varijablu i neku vrijednost, te dobijeni rezultat dodjeljuje varijabli sa ljeva. Numberička vrijednost.

126

7.5.5. /= (podjeljeno jednako je) Dijeli dvije varijable ili varijablu i neku vrijednost, te dobijeni rezultat dodjeljuje varijabli sa ljeva. Numberička vrijednost.

INTERNET PROGRAMIRANJE I | 2010



127

7.5.6. %= (procenat jednako je) Kalkuše preostalu virjednosti dviju varijable ili varijablu i neku vrijednost nakon prvog djeljenja, te dobijeni rezultat dodjeljuje varijabli sa ljeva. Numberička vrijednost.

128

PRIMJER 34 :: Arithmatičke funkcije i funkcije dodjele vrijednosti JAVASCRIPT var broj11 = 15; var broj12 = 13; broj11 += broj12; var str11 = "OVO JE"; var str12 = " JAVASCRIPT KOD"; str11 += str12; var broj21 = 35; var broj22 = 13; broj21 -= broj22; var broj31 = 8; var broj32 = 7; broj31 *= broj32; var broj41 = 64; var broj42 = 8; broj41 /= broj42;

INTERNET PROGRAMIRANJE I | 2010

var broj51 = 28; var broj52 = 5; broj51 %= broj52;

129

document.write("Rezutat operacije += : " + broj11 + ""); document.write("Rezutat operacije += : " + str11 + ""); document.write("Rezutat operacije -= : " + broj21 + ""); document.write("Rezutat operacije *= : " + broj31 + ""); document.write("Rezutat operacije /= : " + broj41 + ""); document.write("Rezutat operacije %= : " + broj51 + ""); 7.6. Događaji (events) Poziva javascript funkcije koje su definisane ili na sanmoj Web stranici ili u eksternoj

javascpirt datoteci. Definiše se unutar elementa te se isti događaj izvršava u ovisnosti od trigera za koji je definisan.



 onload o Funkcija da se pokrene kada se dokument učitava  onunload o Funkcija da se pokrene kada se izlazi iz dokumenta  onblur o Funkcija da se pokrene kada se izgubi fokus elementa  onchange o Funkcija da se pokrene kada promjene elementa  onfocus o Funkcija da se pokrene kada elementa dobije fokus  onreset o Funkcija da se pokrenu kada se forma resetuje  onselect o Funkcija da se pokrenu kada je izabrana elementa  onsubmit o Funkcija da se pokrene kada se podnosi forma  onabort o Funkcija da se pokrene kada se učitavanje slika je prekinuta  onkeydown o Funkcija da se pokrenu kada se pritisne taster  onkeypress o Funkcija da se pokrenu kada se pritisne i pui taster  onkeyup o Funkcija da se pokrene kada se putsi taster  onclick o Funkcija da se pokrene na klik miša  ondblclick o Funkcija da se pokrene na dupli klik miša  onmousedown o Funkcija da se pokrene kada se pritisne dugme miša  onmousemove o Funkcija da se pokrene kada se pređe mišom preko definisanog elementa  onmouseout o Funkcija da se pokrene kada se skloni miš sa definisanog elementa  onmouseover o Funkcija da se pokrene kada se pređe mišom preko definisanog elementa  onmouseup o Funkcija da se pokrene kada se pusti dugme miša

INTERNET PROGRAMIRANJE I | 2010

Trigeri događaja

130

PRIMJER 35 :: Funkcije i događaji

INTERNET PROGRAMIRANJE I | 2010



131

FORME function proba() { alert(mojaForma.hd1.value); alert(document.getElementById("area1").value); var myselect = document.getElementById("slc1"); myselect.remove(myselect.length - 1); myselect.add(new Option("ZADNJI", myselect.length), null); alert(document.getElementById("slc1").value); myselect.selectedIndex = myselect.length - 1; alert(document.getElementById("slc1").value); } function sadrzaj(elemID) { var elem = document.getElementById(elemID); var elemVal = elem.value; alert(elemVal); } function stil() { document.getElementById("fld1").style.backgroundColor = "Red" } Text box1: Text box2: Password: Chekcbox1 Chekcbox2 Chekcbox3

Radiobutton1-1 Radiobutton1-2 Radiobutton1-3 Radiobutton2-1 Radiobutton2-2 Radiobutton2-3 SELECT 1 : OPT1 OPT2 OPT3 SELECT 2 : OPT1 OPT2 OPT3

INTERNET PROGRAMIRANJE I | 2010



132