Knjiga html5, css3 i javascript by Casopis InfoElektronika

Sadržaj Poglavlje 1: HTML5 dokumenti 1.1 Osnovne komponente................................................................................................... 1 1.2 Kratak uvod u HTML....................................................................................................... 2 Oznake i elementi.................................................................................................................. 2 Atributi...................................................................................................................................... 3 Tradicionalni elementi.......................................................................................................... 4 1.3 Opšta struktura............................................................................................................... 5 <!DOCTYPE>........................................................................................................................... 5 <html>..................................................................................................................................... 6 <head>..................................................................................................................................... 6 <body>..................................................................................................................................... 7 <meta>.................................................................................................................................... 7 <title>....................................................................................................................................... 8 <link>........................................................................................................................................ 9 1.4 Struktura tela dokumenta........................................................................................... 10 Organizacija..........................................................................................................................11 <header>...............................................................................................................................14 <nav>.....................................................................................................................................15 <section>...............................................................................................................................16 <aside>..................................................................................................................................17 <footer>.................................................................................................................................19 1.5 Duboko unutar tela dokumenta................................................................................ 20 <article>................................................................................................................................20 <hgroup>..............................................................................................................................24 <figure> i <figcaption>......................................................................................................26 <details> i <summary>.....................................................................................................28 1.6 Novi i stari elementi..................................................................................................... 28 <mark>..................................................................................................................................29 <small>..................................................................................................................................29 <cite>......................................................................................................................................29 <address>..............................................................................................................................30 <wbr>.....................................................................................................................................30 <time>....................................................................................................................................31 <data>...................................................................................................................................31 1.7 Novi i stari atributi........................................................................................................ 32 Atribut data-*........................................................................................................................32 Atribut reversed....................................................................................................................32 v

Atributi ping i download....................................................................................................33 Atribut translate...................................................................................................................33 Atribut contenteditable......................................................................................................34 Atribut spellcheck.................................................................................................................34

Poglavlje 2: Stilizovanje u CSS-u i modeli okvira 2.1 CSS i HTML..................................................................................................................... 37 2.2 Kratak uvod u CSS......................................................................................................... 38 Pravila CSS-a.........................................................................................................................38 Svojstva..................................................................................................................................40 Umetnuti stilovi....................................................................................................................41 Ugrađeni stilovi....................................................................................................................42 Spoljne datoteke..................................................................................................................42 Reference................................................................................................................................43 Referenciranje pomoću rezervisane reči........................................................................43 Referenciranje pomoću atributa id .................................................................................44 Referenciranje pomoću atributa class............................................................................45 Referenciranje pomoću bilo kog atributa......................................................................46 Referenciranje pomoću pseudoklasa..............................................................................47 Novi selektori.........................................................................................................................50 2.3 Primena CSS-a na dokument...................................................................................... 52 Modeli okvira........................................................................................................................53 2.4 Tradicionalni model okvira......................................................................................... 53 HTML dokument...................................................................................................................54 Univerzalni selektor *..........................................................................................................56 Naslovi....................................................................................................................................57 Deklarisanje novih HTML5 elemenata...........................................................................57 Centriranje tela veb strane.................................................................................................58 Pravljenje glavnog okvira..................................................................................................58 Zaglavlje.................................................................................................................................59 Traka za navigaciju..............................................................................................................60 Elementi section i aside......................................................................................................61 Element footer......................................................................................................................63 Završni koraci........................................................................................................................64 Svojstvo box-sizing..............................................................................................................66 2.5 Fleksibilni model okvira.............................................................................................. 67 Fleksibilni kontejner.............................................................................................................68 HTML dokument...................................................................................................................68 Svojstvo display....................................................................................................................69 Ose...........................................................................................................................................69 Svojstvo flex...........................................................................................................................70 Svojstvo flex-direction........................................................................................................75 vi | Sadržaj

Svojstvo order.......................................................................................................................76 Svojstvo justify-content......................................................................................................77 Svojstvo align-items............................................................................................................80 Svojstvo align-self................................................................................................................82 Svojstvo flex-wrap................................................................................................................83 Svojstvo align-content........................................................................................................85

Poglavlje 3: Svojstva jezika CSS3 3.1 Nova pravila................................................................................................................... 89 CSS3 u novom izdanju........................................................................................................89 HTML dokument...................................................................................................................90 Svojstvo border-radius........................................................................................................91 Svojstvo box-shadow .........................................................................................................94 Svojstvo text-shadow .........................................................................................................96 Funkcija @font-face.............................................................................................................97 Linearni preliv.......................................................................................................................98 Radijalni preliv................................................................................................................... 101 Funkcija rgba..................................................................................................................... 102 Funkcija hsla...................................................................................................................... 103 Svojstvo outline................................................................................................................. 104 Svojstvo border-image.................................................................................................... 104 Svojstvo background....................................................................................................... 106 Stupci................................................................................................................................... 108 Filtri....................................................................................................................................... 109 3.2 Svojstvo transform.....................................................................................................110 transform: scale................................................................................................................. 111 transform: rotate............................................................................................................... 112 transform: skew................................................................................................................. 113 transform: translate......................................................................................................... 113 Sve transformacije odjednom........................................................................................ 114 Dinamičke transformacije.............................................................................................. 115 3D transformacije............................................................................................................. 115 3.3 Prelazi............................................................................................................................118 3.4 Animacije......................................................................................................................120

Poglavlje 4: JavaScript 4.1 Kratak uvod u JavaScript...........................................................................................123 Jezik...................................................................................................................................... 124 Promenljive......................................................................................................................... 124 Uslovi i petlje...................................................................................................................... 129 Funkcije i anonimne funkcije......................................................................................... 132 Objekti................................................................................................................................. 136 Sadržaj | vii

Konstruktori........................................................................................................................ 145 Objekat Window ............................................................................................................... 147 Objekat Document........................................................................................................... 148 4.2 Uvod u događaje.........................................................................................................148 Atributi događaja............................................................................................................. 149 Svojstva događaja............................................................................................................ 150 Metoda addEventListener()............................................................................................ 150 4.3 Upotreba JavaScripta.................................................................................................150 Metoda umetanja............................................................................................................. 151 Metoda ugrađivanja........................................................................................................ 151 Metoda spoljnih datoteka.............................................................................................. 153 4.4 Novi selektori...............................................................................................................154 querySelector().................................................................................................................. 155 querySelectorAll().............................................................................................................. 155 matchesSelector()............................................................................................................. 157 4.5 Interakcija s dokumentom........................................................................................158 Stilovi u JavaScriptu......................................................................................................... 158 Objekat classList................................................................................................................ 159 Rad sa atributima............................................................................................................. 161 Svojstvo dataset................................................................................................................ 162 Pravljenje i brisanje elemenata..................................................................................... 163 innerHTML, outerHTML i insertAdjacentHTML.......................................................... 164 4.6 Interfejsi za programiranje aplikacija (API-ji)........................................................166 Ugrađeni API-ji................................................................................................................... 167 Spoljni API-ji....................................................................................................................... 167 4.7 Greške i otklanjanje grešaka....................................................................................168 Konzola................................................................................................................................ 168 console.log()....................................................................................................................... 169 Događaj error.................................................................................................................... 170

Poglavlje 5: Obrasci i interfejs Forms 5.1 HTML obrasci...............................................................................................................173 Element <form>................................................................................................................ 173 Element <input>............................................................................................................... 174 Dodatni elementi obrazaca........................................................................................... 176 Slanje obrazaca ................................................................................................................ 177 5.2 Novi tipovi ulaznih podataka...................................................................................178 Tip email.............................................................................................................................. 178 Tip search ........................................................................................................................... 179 Tip url .................................................................................................................................. 179 Tip tel ................................................................................................................................... 179 viii | Sadržaj

Tip number ......................................................................................................................... 180 Tip range ............................................................................................................................ 180 Tip date................................................................................................................................ 180 Tip week .............................................................................................................................. 181 Tip month ........................................................................................................................... 181 Tip time ............................................................................................................................... 181 Tip datetime ...................................................................................................................... 181 Tip datetime-local ............................................................................................................ 182 Tip color .............................................................................................................................. 182 5.3 Novi atributi.................................................................................................................182 Atribut autocomplete...................................................................................................... 182 Atributi novalidate i formnovalidate........................................................................... 183 Atribut placeholder........................................................................................................... 183 Atribut required ................................................................................................................ 184 Atribut multiple ................................................................................................................ 184 Atribut autofocus ............................................................................................................. 184 Atribut pattern .................................................................................................................. 185 Atribut form ....................................................................................................................... 185 5.4 Novi elementi obrazaca.............................................................................................186 Element <datalist> .......................................................................................................... 186 Element <progress> ........................................................................................................ 186 Element <meter>.............................................................................................................. 187 Element <output>............................................................................................................ 187 5.5 Nove pseudoklase......................................................................................................187 Pseudoklase valid i invalid.............................................................................................. 187 Pseudoklase optional i required.................................................................................... 188 Pseudoklase in-range i out-of-range........................................................................... 189 5.6 Interfejs Forms............................................................................................................190 setCustomValidity().......................................................................................................... 190 Događaj invalid i metoda checkValidity().................................................................. 192 Provera ispravnosti u realnom vremenu pomoću objekta ValidityState ............ 194 Uslovi provere ispravnosti .............................................................................................. 196

Poglavlje 6: Video i audio 6.1 HTML5 i video..............................................................................................................199 Element <video> .............................................................................................................. 200 Atributi za element <video> ......................................................................................... 201 Formati video-sadržaja................................................................................................... 202 6.2 HTML5 i audio..............................................................................................................203 Element <audio> ............................................................................................................. 204

Sadržaj | ix

6.3 Skriveni titlovi .............................................................................................................205 Element <track> ............................................................................................................... 205 6.4 Programiranje plejera................................................................................................209 Projektovanje video-plejera............................................................................................ 209 Aplikacija............................................................................................................................ 212 Događaji............................................................................................................................. 213 Skript.................................................................................................................................... 213 Metode................................................................................................................................. 214 Svojstva............................................................................................................................... 215 Kako radi kôd..................................................................................................................... 216

Poglavlje 7: Interfejs TextTrack 7.1 Interfejs TextTrack.......................................................................................................221 Čitanje zapisa.................................................................................................................... 222 Čitanje markera................................................................................................................. 224 Dodavanje novih zapisa................................................................................................. 225

Poglavlje 8: Interfejs Fullscreen 8.1 Nema više prozora .....................................................................................................227 Preko celog ekrana........................................................................................................... 227 Stilovi za prikaz preko celog ekrana............................................................................. 229

Poglavlje 9: Interfejs Stream 9.1 Preuzimanje multimedijalnih sadržaja u realnom vremenu..............................231 Pristup veb kameri............................................................................................................ 232 Objekti MediaStreamTrack ............................................................................................ 233 Metoda stop()..................................................................................................................... 235

Poglavlje 10: Interfejs Canvas 10.1 Grafika za veb............................................................................................................237 Element <canvas>............................................................................................................ 237 Metoda getContext()........................................................................................................ 238 10.2 Crtanje na platnu......................................................................................................239 Crtanje pravougaonika................................................................................................... 239 Boje....................................................................................................................................... 240 Prelivi.................................................................................................................................... 241 Crtanje putanja................................................................................................................. 243 Stilovi linija......................................................................................................................... 250 Tekst...................................................................................................................................... 252 Senke.................................................................................................................................... 254 Transformacije................................................................................................................... 255

x | Sadržaj

Obnavljanje stanja........................................................................................................... 258 Svojstvo globalCompositeOperation........................................................................... 259 10.3 Obrada slika...............................................................................................................261 Metoda drawImage()....................................................................................................... 261 Podaci koji čine slike......................................................................................................... 263 Deljenje resursa iz različitih izvora................................................................................ 265 Izdvajanje podataka ....................................................................................................... 267 Šare....................................................................................................................................... 268 10.4 Animacije na platnu.................................................................................................268 Osnovne animacije........................................................................................................... 269 Profesionalne animacije.................................................................................................. 270 10.5 Obrada videa na platnu...........................................................................................274 Video na platnu................................................................................................................. 275 Praktična primena............................................................................................................ 276

Poglavlje 11: WebGL i biblioteka three.js 11.1 3D grafika na platnu................................................................................................279 11.2 Biblioteka three.js.....................................................................................................280 Modul za vizuelizaciju...................................................................................................... 280 Scena.................................................................................................................................... 281 Kamera................................................................................................................................ 282 Mreže.................................................................................................................................... 283 Geometrijska prosta tela................................................................................................. 284 Materijali............................................................................................................................. 285 Primena............................................................................................................................... 288 Transformacije................................................................................................................... 290 Svetla.................................................................................................................................... 292 Teksture............................................................................................................................... 294 UV mapiranje..................................................................................................................... 296 Teksture platna.................................................................................................................. 299 Video-teksture.................................................................................................................... 301 Učitavanje 3D modela..................................................................................................... 303 3D animacije...................................................................................................................... 306

Poglavlje 12: Interfejs Pointer Lock 12.1 Novi pokazivač miša................................................................................................319 Pamćenje poteza miša..................................................................................................... 319 Svojstvo pointerLockElement......................................................................................... 321 Svojstva movementX i movementY.............................................................................. 322

Sadržaj | xi

Poglavlje 13: Interfejs Drag and Drop 13.1 Prevlačenje mišem na vebu....................................................................................325 Događaji............................................................................................................................. 325 Objekat dataTransfer....................................................................................................... 328 Događaji dragenter, dragleave i dragend.................................................................. 329 Biranje ispravnog polaznog elementa........................................................................ 331 Metoda setDragImage().................................................................................................. 333 Datoteke.............................................................................................................................. 335

Poglavlje 14: Interfejs Web Storage 14.1 Dva sistema za skladištenje podataka.................................................................337 14.2 Sistem sessionStorage.............................................................................................338 Realizacija skladištenja podataka................................................................................ 338 Definisanje podataka...................................................................................................... 340 Očitavanje podataka....................................................................................................... 341 Brisanje podataka............................................................................................................. 342 14.3 Sistem localStorage..................................................................................................344 Događaj storage............................................................................................................... 345

Poglavlje 15: Interfejs IndexedDB 15.1 Strukturiranje podataka..........................................................................................349 Baza podataka.................................................................................................................. 349 Objekti i skladišta objekata............................................................................................ 350 Indeksi.................................................................................................................................. 352 Transakcije.......................................................................................................................... 352 Metode skladišta objekata............................................................................................. 353 15.2 Primena interfejsa IndexedDB...............................................................................353 HTML dokument................................................................................................................ 354 Otvaranje baze podataka............................................................................................... 355 Skladišta objekata i indeksi............................................................................................ 357 Dodavanje objekata......................................................................................................... 357 Učitavanje objekata......................................................................................................... 358 Dovršavanje koda i testiranje........................................................................................ 359 15.3 Dobijanje liste podataka.........................................................................................360 Kursori.................................................................................................................................. 360 Menjanje redosleda.......................................................................................................... 362 15.4 Brisanje podataka.....................................................................................................364 15.5 Pretraživanje podataka...........................................................................................365

xii | Sadržaj

Poglavlje 16: Interfejs File 16.1 Skladište datoteka....................................................................................................369 16.2 Obrada korisničkih datoteka..................................................................................370 HTML dokument................................................................................................................ 370 Učitavanje datoteka......................................................................................................... 371 Svojstva datoteka............................................................................................................. 373 BLOB..................................................................................................................................... 374 Događaji............................................................................................................................. 376 16.3 Pravljenje datoteka..................................................................................................377 HTML dokument................................................................................................................ 378 Čvrsti disk............................................................................................................................ 378 Pravljenje datoteka........................................................................................................... 380 Pravljenje direktorijuma.................................................................................................. 381 Lista datoteka.................................................................................................................... 381 Obrada datoteka............................................................................................................... 385 Premeštanje........................................................................................................................ 386 Kopiranje............................................................................................................................. 388 Brisanje................................................................................................................................ 389 16.4 Sadržaj datoteka.......................................................................................................390 Upisivanje sadržaja.......................................................................................................... 390 Dodavanje sadržaja......................................................................................................... 393 Učitavanje sadržaja.......................................................................................................... 394 16.5 Pristup datotekama.................................................................................................396 16.6 Praktična upotreba sistema datoteka..................................................................398

Poglavlje 17: Interfejs Geolocation 17.1 Pronalaženje lokacije...............................................................................................403 HTML dokument................................................................................................................ 404 Metoda getCurrentPosition(lokacija).......................................................................... 404 Metoda getCurrentPosition(lokacija, greška)............................................................ 405 Metoda getCurrentPosition(lokacija, greška, konfiguracija)................................. 406 Metoda watchPosition(lokacija, greška, konfiguracija).......................................... 408 Upotreba sa API-jem Google Maps............................................................................... 409

Poglavlje 18: Interfejs History 18.1 API History.................................................................................................................411 Navigacija na vebu........................................................................................................... 411 Nove metode...................................................................................................................... 412 Lažne URL adrese.............................................................................................................. 413 Svojstvo state..................................................................................................................... 415 Primer iz prakse................................................................................................................. 417 Sadržaj | xiii

Poglavlje 19: Interfejs Offline 19.1 Manifest keša.............................................................................................................421 Datoteka manifesta......................................................................................................... 422 Kategorije............................................................................................................................ 422 Komentari........................................................................................................................... 423 Upotreba datoteke manifesta....................................................................................... 424 19.2 API Offline..................................................................................................................426 Greške.................................................................................................................................. 426 Događaji online i offline.................................................................................................. 427 Keširanje.............................................................................................................................. 428 Događaj progress............................................................................................................. 429 Ažuriranje keša.................................................................................................................. 431

Poglavlje 20: Interfejs Page Visibility 20.1 Stanje vidljivosti.......................................................................................................435 Tekuće stanje...................................................................................................................... 435 Bolje iskustvo pri korišćenju veba................................................................................. 436 Otkrivanje promena......................................................................................................... 437

Poglavlje 21: Ajax Level 2 21.1 XMLHttpRequest......................................................................................................441 Preuzimanje podataka.................................................................................................... 442 Svojstva response.............................................................................................................. 444 Događaji............................................................................................................................. 445 Slanje podataka................................................................................................................ 447 Zahtevi iz više izvora........................................................................................................ 449 Učitavanje datoteka na server....................................................................................... 450 Primer stvarne aplikacije................................................................................................. 452

Poglavlje 22: Interfejs Web Messaging 22.1 Slanje poruka iz jednog dokumenta u drugi......................................................457 Slanje poruke..................................................................................................................... 457 Komunikacija sa elementom iframe............................................................................ 458 Filtri i različiti izvori........................................................................................................... 461

Poglavlje 23: Interfejs WebSocket 23.1 WebSockets...............................................................................................................465 WebSocket server.............................................................................................................. 465 Instaliranje i pokretanje WS servera............................................................................. 466 Konstruktor......................................................................................................................... 467 Metode................................................................................................................................. 468 xiv | Sadržaj

Svojstva............................................................................................................................... 468 Događaji............................................................................................................................. 468 HTML dokument................................................................................................................ 468 Pokretanje komunikacije................................................................................................ 469 Potpuna aplikacija............................................................................................................ 471

Poglavlje 24: Interfejs WebRTC 24.1 Revolucionarne promene.......................................................................................473 Stari model......................................................................................................................... 473 Novi model......................................................................................................................... 474 Zahtevi................................................................................................................................. 474 Veza ravnopravnih članova........................................................................................... 476 ICE kandidat....................................................................................................................... 476 Ponuda i odgovor............................................................................................................. 476 Opis SessionDescription.................................................................................................. 477 Protok multimedijalnih podataka................................................................................ 477 Događaji............................................................................................................................. 478 Završetak............................................................................................................................ 478 24.2 Primena API-ja WebRTC...........................................................................................478 Server za slanje signala................................................................................................... 479 ICE serveri............................................................................................................................ 480 HTML dokument................................................................................................................ 480 Kôd u JavaScriptu............................................................................................................. 481 Aplikacija za praktičnu primenu................................................................................... 486 24.3 Kanali za podatke.....................................................................................................487 Definisanje kanala za podatke...................................................................................... 487 Slanje podataka................................................................................................................ 488

Poglavlje 25: Interfejs Web Audio 25.1 Struktura čvorova audio-sistema..........................................................................493 Čvorovi audio-sistema..................................................................................................... 493 Kontekst za rad sa zvukom............................................................................................. 495 Izvori zvuka........................................................................................................................ 495 Povezivanje čvorova......................................................................................................... 497 25.2 Zvuk za veb................................................................................................................497 Dva osnovna čvora........................................................................................................... 497 Petlje i ponavljanja........................................................................................................... 499 Definisanje čvorova audio-sistema.............................................................................. 500 Interfejs AudioParam....................................................................................................... 501 Čvor GainNode.................................................................................................................. 502 Čvor DelayNode................................................................................................................ 504

Sadržaj | xv

Čvor BiquadFilterNode..................................................................................................... 505 Čvor DynamicsCompressorNode.................................................................................. 506 Čvor ConvolverNode........................................................................................................ 507 Čvor PannerNode i 3D zvuk............................................................................................ 509 Čvor AnalyserNode........................................................................................................... 512

Poglavlje 26: Interfejs Web Workers 26.1 Obavljanje najtežih poslova...................................................................................517 Definisanje veb radnika................................................................................................... 517 Slanje i primanje poruka................................................................................................. 518 Otkrivanje grešaka........................................................................................................... 521 Otkazivanje radnika......................................................................................................... 522 Sinhroni API-ji.................................................................................................................... 524 Uvoženje skriptova........................................................................................................... 524 Deljeni radnik..................................................................................................................... 525

Zaključak Raditi za ceo svet................................................................................................................531 Druge mogućnosti............................................................................................................ 531 Biblioteka Modernizr........................................................................................................ 532 Biblioteke............................................................................................................................. 533 Programski dodatak Google Chrome Frame............................................................. 535 Rad u oblaku........................................................................................................................534 API-ji koji nisu opisani.......................................................................................................536 Šta treba da znate...............................................................................................................536 Završna reč autora..............................................................................................................537

Spisak termina

539

Indeks 543

xvi | Sadržaj

Uvod

HTML5 nije nova verzija starog jezika za označavanje – čak ni poboljšanje ove „drevne“ tehnologije – nego sasvim nov koncept za izradu veb lokacija i aplikacija u vremenu mobilnih uređaja, računarstva u oblaku (engl. cloud computing) i umrežavanja. Sve je počelo davno, kada je predložena jednostavna verzija HTML-a namenjena izradi osnovne strukture veb strana, organizovanju njihovog sadržaja i deljenju informacija. Ovaj jezik i veb su i sami nastali prvenstveno zbog razmene tekstualnih informacija. Ograničena primena HTML-a motivisala je kompanije da razviju nove jezike i soft ver, kako bi se vebu dodale nove osobine i poboljšalo njegovo korišćenje. Ti početni razvojni koraci prerasli su u moćne i popularne programske dodatke. Jednostavne igrice i animirani isečci vrlo brzo su se pretvorili u sofisticirane aplikacije, s novim mogućnostima koje su zauvek promenile koncept veba. Java i Flash su donedavno bile najuspešnije od svih postojećih opcija – široko prihvaćene i posmatrane kao budućnost interneta. Broj korisnika je u međuvremenu znatno porastao, a internet prešao put od načina povezivanja ljubitelja računara do najpopularnijeg načina poslovanja i društvenih interakcija. Postojeća ograničenja Jave i Fla sha zapečatila su sudbinu ovih tehnologija. Osnovni problem sa Javom i Flashom može se opisati kao nedovoljna mogućnost integrisanja. Oba jezika su zamišljena kao programski dodaci, nešto što se umeće u određenu strukturu, ali s tom strukturom zapravo deli samo jedan deo prostora na ekranu. Između aplikacija i dokumenata nije postojala ni komunikacija ni integracija. Sve ozbiljniji problem integrisanja otvorio je put razvoju jezika koji dele prostor u dokumentu sa HTML-om, i na to ne utiču ograničenja programskih dodataka. Postalo je jasno da je JavaScript, kao interpretirani jezik ugrađen u čitače veba, bolje rešenje za poboljšanje rada korisnika i funkcionalnost veba. Međutim, tokom nekoliko godina neuspešnih pokušaja promovisanja i neodgovarajućeg korišćenja ovog jezika, tržište ga nikada nije sasvim prihvatilo i popularnost mu je opadala, a protivnici su lako nalazili razloge da se suprotstave njegovom usvajanju. U to vreme, JavaScript nije mogao da zameni Javu i Flash. Čak i kada je postalo očigledno da Java i Flash ograničavaju primenu veb aplikacija i izoluju sadržaje na vebu, popularne mogućnosti (kao što je reprodukovanje video-sadržaja u realnom vremenu) masovno su se koristile na vebu a nudile su ih, praktično, samo ove dve tehnologije.

xvii

Uprkos širokoj rasprostranjenosti, popularnost Jave je jenjavala. Složena priroda ovog jezika, spori razvoj i problem integrisanja umanjio je njegov značaj do te mere da se danas Java u najvažnijim veb aplikacijama gotovo i ne koristi. Napuštajući Javu, programeri su se okrenuli Flashu; međutim, budući da Flash ima iste osnovne osobine kao Java, velika je verovatnoća da će doživeti istu sudbinu kao i konkurent. I dok se u tišini odvijala nemilosrdna borba za prevlast, softver za pristup vebu nastavio je da se razvija. Uporedo s novim mogućnostima i bržim metodama za pristup internetu, čitači veba su unapređivali i svoje mehanizme za JavaScript. Veća moć donela je povoljne prilike, a ovaj jezik za izradu skriptova bio je potpuno spreman da ih prigrli. U određenoj fazi razvoja, nekim programerima je postalo jasno da im ni Java ni Flash neće ponuditi alatke potrebne za izradu aplikacija koje zahteva sve veći broj korisnika. Ti programeri su počeli da primenjuju JavaScript u svojim aplikacijama, i to na potpuno nov način. Nove mogućnosti i izvanredni rezultati privukli su pažnju drugih programera i uskoro se pojavio „Web 2.0“. Od tada se odnos zajednice programera prema JavaScriptu radikalno promenio. Bilo je jasno da je JavaScript omogućio programerima da na veb uvode dotad neviđene inovacije i načine rada. Tokom proteklih nekoliko godina, programeri i veb dizajneri širom sveta dobijali su neverovatne ideje kako da prevaziđu ograničenja ove tehnologije i njenih početnih nedostataka u pogledu prenosivosti. Postalo je očigledno da je JavaScript treći element u savršenoj kombinaciji jezika neophodnoj za dalji razvoj veba. HTML5 predstavlja novu fazu razvoja ove kombinacije, lepak koji elemente drži na okupu. HTML5 predlaže standarde za svaki aspekt veba i jasnu namenu svake njegove tehnologije. Danas HTML daje strukturne elemente, CSS omogućava da struktura bude atraktivna i korisna, a JavaScript je zadužen za funkcionalnost i izradu kompletnih veb aplikacija. Granice između veb lokacija i aplikacija napokon su nestale. Potrebne tehnologije su spremne. Budućnost veba obećava, a razvoj i kombinovanje tri navedene tehnologije (HTML-a, CSS-a i JavaScripta) u jednu moćnu specifikaciju pretvaraju internet u vodeću razvojnu platformu. Na tom putu predvodi HTML5. VAŽNO U vreme pisanja ove knjige nisu svi čitači veba podržavali mogućno sti jezika HTML5, a većina tih mogućnosti bila je eksperimentalna. Preporučujemo da čitate poglavlja knjige i kôd programa izvršavate u najnovijim verzijama čitača Google Chrome i Mozilla Firefox. Google Chrome je dobra platforma za testiranje. Zasniva se na WebKitu – mehanizmu čitača veba sa otvorenim kodom – i podrža va gotovo sve mogućnosti koje su već primenjene u jeziku HTML5. S druge strane, Mozilla Firefox je jedan od najboljih čitača veba za programere i takođe sadrži podr šku za HTML5. Primeri u ovoj knjizi su pripremljeni za ova dva čitača, ali su u nekim skriptovima, radi jednostavnosti, korišćene eksperimentalne metode koje podrža va samo Google Chrome. Zbog toga vam preporučujemo da kôd ispitujete u čitaču Google Chrome, a nakon toga svoj rad proširite i na druge čitače.

xviii | Uvod

Koji god čitač veba da koristite, imajte na umu da dobar programer instalira i testi ra svoj kôd u svakom programu koji je dostupan na tržištu. Testirajte kôd iz ove knji ge u svakom čitaču veba. Da biste preuzeli najnovije verzije, posetite sledeće veb lokacije: • • • • • •

www.google.com/chrome www.apple.com/safari/download www.mozilla.com windows.microsoft.com www.opera.com www.maxthon.com

U zaključku na kraju knjige istražujemo različite mogućnosti izrade veb lokacija i aplikacija kojima se može pristupiti pomoću starijih čitača veba i onih koji još nisu spremni za HTML5.

Uvod | xix

Poglavlje 1

HTML5 dokumenti

1.1 Osnovne komponente HTML5 obezbeđuje tri osnovne osobine veb strana: strukturu, stil i funkcionalnost. HTML5 se nezvanično smatra proizvodom koji objedinjuje HTML, CSS i JavaScript, čak i onda kada ne sadrži pojedine interfejse za programiranje aplikacija (API‑je) u JavaScriptu, pa ni celu specifikaciju CSS3. HTML, CSS i JavaScript međusobno su za‑ visne tehnologije koje deluju kao celina organizovana u okviru specifikacije HTML5. HTML je zadužen za strukturu, CSS za prezentaciju, tj. predstavljanje strukture i sa‑ držaja veb strane na ekranu, a JavaScript završava sve ostalo, što je (videćete u nastav‑ ku knjige) izuzetno značajno. Uprkos integraciji ovih tehnologija, struktura i dalje čini osnovu dokumenta. Ona sa‑ drži elemente koji su neophodni za dodeljivanje statičkog ili dinamičkog sadržaja, a predstavlja i osnovnu platformu za aplikacije. S obzirom na to da internetu pristupaju raznovrsni uređaji i da se za interakciju s vebom koriste razne vrste interfejsa, struk‑ tura je svakako ključni deo dokumenta. Ona mora da omogući oblikovanje, organi‑ zaciju i fleksibilnost, i mora biti čvrsta poput temelja zgrade. Da bismo koristili HTML5 i pomoću njega pravili veb lokacije i aplikacije, prvo treba da naučimo kako se gradi ta struktura. Ako napravimo jake temelje, kasnije ćemo lak‑ še primeniti druge komponente i tako potpuno iskoristiti nove mogućnosti. Započnimo rad proučavanjem osnova, korak po korak. U prvom poglavlju ćete na učiti šta je HTML i kako se pravi osnovna struktura pomoću novih elemenata ovog jezika. VAŽNO Dodatne informacije ili listinge s primerima naći ćete na našoj veb l okaciji, na adresi www.minkbooks.com.

1.2 Kratak uvod u HTML Jezik za označavanje hiperteksta HTML (engl. HyperText Markup Language) jeste pro‑ gramski jezik. Za razliku od drugih jezika, HTML se ne sastoji od komandi, tj. in‑ strukcija, nego od skupa oznaka (engl. tags) koje organizuju i deklarišu namenu sa‑ držaja dokumenta. U najstrožem smislu, HTML je samo tekst napisan uz poštovanje određene sintakse koju čitač veba (engl. web browser) može da očita i primeni. Ideja za stvaranje ovog jezika zasniva se na tome da se preko interneta deli ne samo sadržaj dokumenta već i njegov format. Mogućnost da se razdvoje različiti važni delovi sadržaja dokumenta otvorila je vrata stvaranju veba kakav je danas, a to je zasluga HTML-a. VAŽNO Koncepti koji se objašnjavaju u nastavku jednostavni su, ali ključni za razumevanje primera u ovoj knjizi. Ako su vam ove informacije već poznate, slobodno preskočite delove koje ste ranije savladali.

Oznake i elementi HTML kôd nije sačinjen od niza instrukcija. HTML je jezik za označavanje, to jest, skup oznaka koje se koriste najčešće u paru i mogu da se ugnezde (potpuno umetnu unutar drugih elemenata). HTML oznake su rezervisane reči (engl. keywords) i atributi (engl. attributes), smešteni zajedno unutar ugaonih zagrada (npr., <html lang=”en”>). Pojedinačna pojavljivanja se obično nazivaju oznakama, a parovi pojedinačnih početnih (engl. opening) i završnih (engl. closing) oznaka nazivaju se elementima (engl. elements). Pogledajte sledeći primer: Listing 1-1: Primer osnovnog HTML dokumenta. <!DOCTYPE html> <html lang=”en”> <head> <title>My First HTML Document</title> </head> <body> HELLO WORLD! </body> </html>

Neki HTML elementi su pojedinačni, sastavljeni od samo jedne oznake, ali većina ima početnu i završnu oznaku. U primeru iz listinga 1-1 vidi se nekoliko oznaka koje se nalaze jedna iza druge, dok se između njih prikazuje tekst, pa čak i druge ozna‑ ke. Uporedite svaku početnu i završnu oznaku u ovom primeru i videćete da se zavr šna oznaka razlikuje po tome što sadrži kosu crtu ispred rezervisane reči. Na primer, oznaka <html> ukazuje na početak HTML koda, dok </html> obeležava njegov kraj. Sve što se nalazi između ovih oznaka, čitač veba obrađuje kao HTML kôd. 2 | Poglavlje 1 • HTML5 dokumenti

U ovom primeru kôd je jednostavan, ali je struktura već složena. Prvi red sadrži jed‑ nu oznaku sa definicijom dokumenta, iza koje sledi početna oznaka <html lang=”en”>. Između oznaka <html> umeću se druge oznake, kao što su <head> i <body>, koje predsta vljaju glavu (engl. head) odnosno telo dokumenta (engl. body). One se takođe koriste u paru i obuhvataju druge sadržaje, kao što su tekst ili drugi elementi (<title>). Kao što vidite, da bi se napravio HTML dokument, oznake se nižu jedna iza druge, če‑ sto i između drugih oznaka, a rezultat je struktura stabla (engl. tree structure), u kome oznaka <html> predstavlja koren stabla (engl. root). Uopšteno govoreći, svaki element može biti ugnežđen, to jest, može da sadrži umet‑ nute elemente ili da bude umetnut u druge elemente. Posebni strukturni elementi, kao što su <html>, <head> ili <body>, imaju određeno mesto u HTML dokumentu, dok su ostali fleksibilni, što ćete videti u nastavku ovog poglavlja. Uradite sami HTML dokument je tekstualna datoteka. Ako nemate poseban program, HTML datoteku možete napraviti u bilo kom editoru teksta, kao što je Windowsov Notepad. Napravite novu datoteku s kodom iz listinga 1-1, snimite je pod nekim imenom i sa nastavkom .html (npr., mycode.html), a zatim otvorite datoteku u svom čitaču veba (da biste datoteku otvorili u čitaču veba koji je na vašem računaru definisan kao podrazumevan, dovoljno je da je dvaput pritisnete mišem). Ako vaš editor teksta radi s različitim formatima, obavezno snimite datoteku u formatu Plain Text. VAŽNO Ako ne znate kako se pravi struktura prikazana u listingu 1-1, ne brinite. Time, kao i novim elementima strukture koje uvodi HTML5, bavićemo se u nastavku ovog poglavlja.

Atributi Verovatno ste primetili da se početna oznaka <html> iz listinga 1-1 ne sastoji samo od rezervisane reči i ugaonih zagrada, nego i od niza znakova lang=”en”. Taj niz čine atribut i njegova vrednost. Ime atributa je lang, a vrednost en se atributu dodeljuje pomoću simbola = (znaka jednakosti). Atribut sadrži dodatne informacije o HTML elementu. U ovom slučaju, atribut deklariše jezik HTML dokumenta kao engleski („English“). Atributi se uvek deklarišu unutar početne oznake i mogu imati strukturu ime/vred‑ nost, kao što je atribut lang u našem primeru, ili mogu predstavljati Bulovu (logič‑ ku) vrednost, na šta ukazuje uslov true ili false (npr., atribut disabled bez definisane vrednosti učiniće nedostupnim element obrasca). Budući da se težište HTML-a sa opšte namene premestilo na izradu strukture doku‑ menata, većina standardnih atributa više se ne koristi, a neke od njih su potpuno za‑ menila svojstva CSS-a, što ćete videti u narednim poglavljima. Međutim, nekoliko atributa i dalje je korisno, naročito četiri generička atributa koji su važni pri izradi veb lokacija i aplikacija pomoću jezika HTML5:

1.2 Kratak uvod u HTML | 3

class – Omogućava rad sa grupom elemenata koji imaju neke zajedničke osobine. Na primer, ako atribut class dobije neku vrednost, isti tip fonta i sti‑

lovi mogu se dodeliti tekstu koji se nalazi u različitim delovima dokumenta. id – Omogućava da se svakom elementu dodeli jedinstven identifikator. To

je najbolji način da se određenom elementu pristupi iz CSS-a ili JavaScripta. style – Omogućava da se svakom elementu pojedinačno dodele CSS stilovi. U poglavlju 2 ćete se uveriti da je ovaj atribut bolje izbegavati, a elementima HTML-a dodeljivati stilove pomoću atributa class i id. name – Stari atribut koji se još primenjuje pri radu sa obrascima, a deklariše proizvoljno ime za element. Više informacija naći ćete u poglavlju 5.

Osim navedenih atributa, postoje i oni specifičniji, kao što je pomenuti atribut lang za element <html>. Pažnje su vredni i atributi href za elemente <link> i <a>, kao i src za elemente multimedijalnog sadržaja poput <img>, <video>, <audio> itd. Oba atribu‑ ta ukazuju na to da putanju datoteke treba učitati ili joj treba pristupiti. Isprobajte na‑ redni primer u svom čitaču veba. Listing 1-2: Upotreba elementa <img> i atributa src za prikazivanje slike. <!DOCTYPE html> <html lang="en”> <head> <title>My Second HTML Document</title> </head> <body> <img src=”http://www.minkbooks.com/content/myimage.jpg”> </body> </html>

Podsetite se osnova Element <img> omogućava da učitate i prikažete sliku na ekranu. To je pojedinačni element bez završne oznake, a pored atributa src za deklarisanje putanje slike, može se deklarisati i njena veličina pomoću atributa width i height.

U nastavku knjige moći ćete da eksperimentišete sa ovim i drugim atributima, i da ih isprobate na praktičnim primerima.

Tradicionalni elementi Neki elementi u jeziku HTML5 prevaziđeni su, nekima se promenila namena, a uve‑ deni su i novi. Ima elemenata koji se više ne posmatraju kao deo jezika, npr. < center>, <frame> i <font>, pri čemu je poslednji verovatno i najznačajniji. Element <font>, koji je sada zamenjen elementom <span>, koristio se za prikaz teksta na ekranu sve do

4 | Poglavlje 1 • HTML5 dokumenti

v erzije HTML4. Ostali elementi, poput <i> i <b>, koji su se ranije upotrebljavali za isticanje teksta na ekranu, sada imaju drugačije značenje. Novi elementi, kao što su <mark>, <address> i <time>, uvedeni su radi boljeg opisivanja i predstavljanja sadrža‑ ja dokumenta. VAŽNO Ova knjiga se bavi prvenstveno poboljšanjima koja uvodi HTML5. Koncepti koji su u HTML-u postojali i pre verzije HTML5 biće objašnjeni samo u odeljcima Podsetite se osnova. Ako želite da saznate više o jeziku HTML i pribavite potpuni spisak važećih HTML elemenata kako biste ih koristili u svojim projektima, posetite našu veb lokaciju i pratite veze za ovo poglavlje.

1.3 Opšta struktura HTML dokumenti su precizno organizovani. Svaki deo dokumenta se izdvaja, dekla‑ riše i umeće unutar odgovarajućih oznaka. U ovom delu poglavlja naučićete kako da napravite opštu strukturu HTML dokumenta i kako je ovaj postupak izmenjen u je‑ ziku HTML5. Uradite sami Napravite nov dokument u editoru teksta kako biste testirali HTML kôd koji će biti prikazan kasnije. Tako ćete lakše zapamtiti nove oznake i navići se na njihove namene. VAŽNO Čitači veba nude osnovne stilove za HTML elemente. Da bismo na ekranu videli strukturu napravljenu pomoću HTML koda u ovom poglavlju, primenićemo CSS stilove. O CSS-u će biti reči u poglavljima 2 i 3.

<!DOCTYPE> Ukazaćemo prvo na tip dokumenta koji pravimo. Čitači veba obrađuju različite tipo‑ ve datoteka. Da bi se dokument pravilno interpretirao kao HTML kôd, njegov tip se deklariše na početku. To se u jeziku HTML5 radi jednostavno: Listing 1-3: Upotreba elementa <!DOCTYPE>. <!DOCTYPE html>

VAŽNO Ovaj red mora biti prvi u datoteci, bez prethodnih razmaka ili redova. Tako se aktivira standardni režim rada a čitačima veba se nalaže da interpretiraju HTML5 gde god je to moguće a inače da ga zanemare. Uradite sami Počnite već sada da upisujete kôd u svoju HTML datoteku, a kasnije ćete dodavati nove elemente koje naučite.

1.3 Opšta struktura | 5

<html> Nakon deklarisanja tipa dokumenta, treba napraviti strukturu stabla u HTML-u. Kao i uvek, korenski element ovog stabla je element <html>. Unutar njega biće umetnut ceo naš HTML kôd. Listing 1-4: Upotreba elementa <html>. <!DOCTYPE html> <html lang=”en”> </html>

Atribut lang u početnoj oznaci <html> jedini je atribut koji treba da definišemo u jezi‑ ku HTML5. Ovaj atribut zadaje jezik na kome je napisan sadržaj dokumenta koji pra‑ vimo – u ovom slučaju, to je en za engleski. VAŽNO HTML5 je izuzetno prilagodljiv u pogledu strukture i elemenata kojima se ta struktura gradi. Element <html> se može umetnuti bez atributa, ili čak izostaviti. Zbog kompatibilnosti, ali i drugih razloga koji se ovde neće nabrajati, preporučujemo da poštujete osnovna pravila. Naučićete da pravite HTML dokumente na način koji se danas smatra najboljim.

Da biste pronašli druge jezike atributa lang, pratite vezu www.w3schools.com/tags/ ref_language_codes.asp.

<head> Nastavimo sa izradom dokumenta. HTML kôd umetnut između oznaka <html> mora se podeliti u dva glavna odeljka (engl. sections). U skladu s ranijim verzijama HTML-a, prvi odeljak je glava, a drugi telo. Naredni korak je kodiranje ova dva odeljka pomo‑ ću poznatih elemenata <head> i <body>. Element <head> se prikazuje prvi i, kao i ostali elementi strukture, ima početnu i za‑ vršnu oznaku. Listing 1-5: Upotreba elementa <head>. <!DOCTYPE html> <html lang=”en”> <head> </head> </html>

Sama oznaka se nije menjala, a i namena joj je potpuno ista kao u prethodnim ver‑ zijama. Unutar oznaka <head> definisaćemo naslov veb strane koju pravimo, dekla‑ risati kodni raspored znakova (engl. character encoding), navesti opšte informacije o 6 | Poglavlje 1 • HTML5 dokumenti

okumentu, i navesti spoljne datoteke sa stilovima, skriptovima ili čak slikama koje d su neophodne za vizuelno predstavljanje strane. Osim naslova i pojedinih ikonica, ostale informacije uvršćene u dokument između oznaka <head>, korisnik obično ne vidi.

<body> Sledeći važan odeljak iz glavne organizacije HTML dokumenta jeste telo. Telo je vi dljivi deo dokumenta i definiše se pomoću oznake <body>. Ova oznaka je bila ista i u ranijim verzijama HTML-a. Listing 1-6: Upotreba elementa <body>. <!DOCTYPE html> <html lang=”en”> <head> </head> <body> </body> </html>

Kao i u drugim slučajevima, novina u jeziku HTML5 vezana za ovaj element jeste po‑ jednostavljenje. Nova oznaka meta za kodni raspored znakova kraća je i jednostavnija. Naravno, vrednost utf-8 možete promeniti, u skladu s kodnim rasporedom koji pri‑ menjujete, a mogu se dodavati i druge oznake meta, npr. description ili keywords, što će biti prikazano u narednom primeru.

1.3 Opšta struktura | 7

Listing 1-8: Dodavanje elemenata <meta>. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8”> <meta name=”description” content=”This is an HTML5 example”> <meta name=”keywords” content=”HTML5, CSS3, JavaScript”> </head> <body> </body> </html>

Podsetite se osnova Postoji nekoliko oznaka <meta> koje se u dokumentu mogu koristiti za deklarisanje opštih informacija, ali se te informacije ne prikazuju u prozoru čitača veba; one su važne samo za pretraživače i uređaje koji daju prethodni prikaz ili sažetak važnih podataka iz našeg dokumenta. Već je pomenuto da, osim naslova i određenih ikonica, korisnik ne vidi većinu informacija umetnutih između oznaka <head>. U kodu iz listinga 1-8, atribut name unutar oznake <meta> zadaje njen tip, a atribut content deklariše njenu vrednost, ali se nijedna od tih vrednosti ne prikazuje na ekranu. Da biste naučili više o oznakama <meta>, posetite našu veb lokaciju i pratite veze za ovo poglavlje.

U jeziku HTML5 nije neophodno da se pojedinačne oznake zatvaraju pomoću kose crte upisane na kraju, ali je možete pisati zbog kompatibilnosti. Prethodni kôd se može napisati i na sledeći način: Listing 1-9: Zatvaranje pojedinačnih oznaka. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8” /> <meta name=”description” content=”This is an example” /> <meta name=”keywords” content=”HTML5, CSS3, JavaScript” /> </head> <body> </body> </html>

<title> Oznaka <title>, kao i uvek, definiše naslov dokumenta, i u vezi s njom nema nika‑ kvih novina i izmena.

8 | Poglavlje 1 • HTML5 dokumenti

Listing 1-10: Upotreba elementa <title>. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8”> <meta name=”description” content=”This is an HTML5 example”> <meta name=”keywords” content=”HTML5, CSS3, JavaScript”> <title>This text is the title of the document</title> </head> <body> </body> </html>

Podsetite se osnova Tekst između oznaka <title> predstavlja naslov celog dokumenta koji pravimo. Čitač veba prikazuje ovaj tekst najčešće pri vrhu prozora.

U verziji HTML5 više ne mora da se definiše vrsta opisa stila koja se umeće, i zato se atribut type izbacuje. Za povezivanje datoteka sa stilovima potrebna su nam samo dva atributa: rel i href. Atribut rel zadaje vezu između dokumenta i datoteke koja se in‑ korporira. U ovom slučaju, atribut rel ima vrednost stylesheet koja čitaču veba ka‑ zuje da je mystyles.css CSS datoteka sa stilovima potrebnim za prikazivanje date veb strane na ekranu. 1.3 Opšta struktura | 9

Atribut href, kao što je ranije opisano, deklariše putanju datoteke koja treba da se uči‑ ta. Sadržaj te datoteke mora biti u skladu s vrednošću atributa rel. U ovom slučaju, putanja ukazuje na CSS datoteku koja sadrži stilove za dokument (vrednost stylesheet). Podsetite se osnova Opis stila (engl. style sheet) jeste grupa pravila za formatiranje, koja nam pomaže da promenimo izgled dokumenta – na primer, veličinu i boju teksta. Bez tih pravila, tekst i bilo koji drugi element prikazao bi se na ekranu pomoću standardnih pravila čitača veba (podrazumevanih veličina, boja itd.). Stilovi su jednostavna pravila, često sastavljena od samo nekoliko redova koda koji se mogu deklarisati u istom dokumentu. Kasnije ćete videti da se ove informacije ne moraju dobijati iz spoljnih datoteka, ali vam to preporučujemo kao najbolji način rada. Učitavanje CSS pravila iz spoljnog dokumenta (druge datoteke) omogućava da organizujemo glavni dokument, povećamo brzinu učitavanja veb lokacije i iskoristimo nove mogućnosti verzije HTML5. VAŽNO U poglavlju 2 bavićemo se CSS-om i napraviti datoteku mystyles.css, pomoću koje ćemo definisati stil našeg dokumenta.

Nakon poslednjeg umetanja sadržaja, zaglavlje dokumenta je završeno. Pozabaviće‑ mo se telom dokumenta.

1.4 Struktura tela dokumenta Telo dokumenta (kôd između oznaka <body>) formira vidljivi deo dokumenta. To je kôd pomoću kojeg se proizvodi naša veb strana. HTML je uvek nudio različite načine za formiranje i organizovanje informacija u telu dokumenta. Jedan od prvih elemenata za ovu namenu bila je tabela (<table>). Tabele omogućavaju da se podaci, tekst, slike i alatke rasporede u redove i kolone ćelija, čak i onda kada nisu predviđene za tu namenu. U prvim danima veba, tabele su predstavljale veliki korak napred u vizuelnom pred‑ stavljanju dokumenata i načinu rada korisnika. Vremenom su drugi elementi poste‑ peno zamenili tabelu jer se pomoću njih radilo brže i sa manje programskog koda, što je olakšavalo izradu, prenosivost i održavanje dokumenata. Element <div> je počeo da dominira u ovoj oblasti. Kada se javila potreba za interak‑ tivnijim veb aplikacijama i objedinjavanjem jezika HTML, CSS i JavaScript, upotre‑ ba elementa <div> postala je uobičajena. Međutim, elementi <div> i <table>, ne daju mnogo informacija o delovima tela koje element predstavlja. Sve – od slika do meni‑ ja, teksta, veza, skriptova, obrazaca itd. – moglo je da se umetne između početnih i za‑ vršnih oznaka <div>. Drugim rečima, rezervisana reč div definiše samo odeljak u telu dokumenta, poput ćelije u tabeli, ali ne kazuje ništa o tome o kojoj vrsti odeljka je reč, koja je njegova namena i šta se u njemu nalazi.

10 | Poglavlje 1 • HTML5 dokumenti

Poglavlje 2

Stilizovanje u CSS-u i modeli okvira

2.1 CSS i HTML Nova specifikacija za HTML ne podrazumeva samo oznake i sam jezik HTML. Veb zahteva odgovarajući dizajn i funkcionalnost, a ne samo organizaciju strukture i definisanje odeljaka. U takvom novom modelu, HTML se integriše sa CSS-om i Java Scriptom u jedinstvenu novu tehnologiju. Do sada smo govorili o mogućnostima svakog pojedinačnog jezika i uveli nove elemente strukture HTML dokumenta; sada ćemo proučavati važnost CSS-a u ovom strateškom savezu, i njegov uticaj na prikazivanje HTML dokumenata. Zvanično, CSS nema nikakve veze s jezikom HTML5. CSS nije deo specifikacije, niti je to ikada bio: on je dopuna koja treba da prevaziđe ograničenja HTML-a i smanji njegovu složenost. U početku, atributi unutar HTML oznaka definisali su osnovne stilove svih elemenata, ali kako se jezik razvijao, kôd je postajao sve komplikovaniji za pisanje i održavanje, pa sâm HTML više nije mogao da zadovolji zahteve veb dizajnera. Zbog toga je usvojen CSS, kao način razdvajanja strukture od prezentacije. Od tada se CSS razvija uporedo, usmeren pre svega na dizajnere i njihove potrebe, a ne na to da po svaku cenu bude deo razvoja HTML-a. Najnovija verzija CSS-a, CSS3, sledi isti put, ali uz mnogo više kompromisa. Specifikacija za HTML5 razvila se tako što se implicitno podrazumevalo da je CSS zadužen za dizajn. Zbog toga je integracija jezika HTML i CSS3 sada ključna za razvoj veba, pa svako pominjanje jezika HTML5 istovremeno upućuje i na CSS3, iako su to zvanično dve nezavisne tehnologije. Mogućnosti jezika CSS3, zajedno sa ostatkom specifikacije, danas se implementiraju i ugrađuju u čitače veba kompatibilne sa HTML5. U ovom poglavlju naučićete osnovne koncepte CSS-a i nove metode jezika CSS3 za predstavljanje i strukturiranje. Upoznaćete i nove selektore i pseudoklase pomoću kojih se HTML elementi lakše biraju i identifikuju.

VAŽNO Sledi kratak uvod u CSS stilove. Pominjemo samo one metode i svojstva koji su neophodni za razumevanje primera u ovoj knjizi. Ako nemate nikakvog iskustva sa CSS-om, mogu vam pomoći priručnici na vebu. Naći ćete ih na našoj veb lokaciji ako pratite veze za ovo poglavlje.

2.2 Kratak uvod u CSS CSS je jezik koji zajedno sa HTML-om definiše vizuelne stilove za elemente dokumenta, kao što su veličina, boja, pozadine, ivice itd. Iako čitači veba podrazumevano dodeljuju stilove HTML elementima, ti stilovi ne moraju odgovarati idejama dizajnera ili željama korisnika. Dizajneri i programeri često moraju da primenjuju sopstvene stilove kako bi veb lokacija imala odgovarajući izgled na ekranu. U ovom delu poglavlja, prikazaćemo stilizovanje pomoću CSS-a i objasniti osnovne metode za definisanje strukture dokumenta. VAŽNO Neki koncepti koji će biti objašnjeni u narednim pasusima treba da uvedu početnike u CSS i osnove stilizovanja. Ako su vam ove informacije poznate, slobodno preskočite delove koje ste već savladali.

Pravila CSS-a CSS definiše kako će se HTML elementi prikazivati na ekranu. Za prikazivanje stilova u CSS-u koriste se svojstva (engl. properties) i vrednosti (engl. values). Ta sintaksa se zove deklaracija (engl. declaration), a sadrži dvotačku iza imena svojstva, i red zatvoren tačkom i zarezom. Listing 2-1: Deklarisanje svojstava CSS-a. color: #FF0000;

U primeru iz listinga 2-1, svojstvu color dodeljena je vrednost #FF0000. Ako se ovo svojstvo primeni na HTML element, on će se na ekranu prikazati u crvenoj boji. Podsetite se osnova Boje u CSS-u definišu se pomoću kombinacije tri osnovne boje: crvene, zelene i plave. Možemo ih predstaviti pomoću heksadecimalnih brojeva (od 00 do FF) ili decimalnih brojeva (od 0 do 255). Ako boju izražavamo heksadecimalnim brojem, na početak stavljamo znak za povisilicu (tarabu), kao u primeru iz listinga 2-1. Za decimalne brojeve dostupna je funkcija rgb, a boje se deklarišu pomoću sintakse rgb(255, 0, 0). O funkciji rgb() i sličnim funkcijama govorićemo u nastavku knjige.

38 | Poglavlje 2 • Stilizovanje u CSS-u i modeli okvira

Svojstva se mogu grupisati pomoću vitičastih zagrada. Takva grupa od jednog ili više svojstava naziva se pravilo (engl. rule) i identifikuje se pomoću imena, tj. selektora (engl. selector), predstavljajući element ili grupu elemenata na koje će pravilo uticati. Broj pravila koje možemo napisati je neograničen. Listing 2-2: Deklarisanje pravila CSS-a. p { color: #FF0000; font-size: 24px; }

U listingu 2-2 vidite dva svojstva (color i font-size) navedena u zagradama, sa odgovarajućim vrednostima. Ovo pravilo se identifikuje pomoću imena p. U ovom slučaju, ime pravila referencira elemente <p>. Ako ga primenimo na naš dokument, sadržaj svakog elementa <p> biće crvene boje i veličine 24 piksela. U CSS pravilu možemo deklarisati neograničen broj selektora. Treba samo da navedemo njihova imena i razdvojimo ih zarezima. Listing 2-3: Deklarisanje pravila CSS-a. p, span { color: #FF0000; font-size: 24px; }

U primeru iz listinga 2-3, pravilo utiče na sve elemente <p> i <span> u dokumentu. Možemo referencirati i samo one elemente koji se nalaze unutar određenog elementa, nabrajajući ih i razdvajajući razmacima. Na primer, elementi <span> koji predsta vljaju decu elementa <p>: Listing 2-4: Deklarisanje pravila CSS-a. p span { color: #FF0000; font-size: 24px; }

Postoje različite metode za referenciranje HTML elemenata iz CSS-a. Ona koju smo primenili u prethodnom primeru koristi samo ime tipa elementa na koji se pravilo primenjuje. To je opšta referenca, ali postoje i specifične reference o kojima ćemo uskoro govoriti.

2.2 Kratak uvod u CSS | 39

Svojstva Svojstva čine jezgro CSS-a. Ima ih mnogo, a u svaku verziju jezika dodavana su nova. Neka od njih primenićemo kroz praktične primere u nastavku knjige. Sledi spisak najčešćih svojstava (uključujući i ona koja se koriste od prve verzije CSS-a): font – Omogućava da deklarišemo stilove za tekst, kao što su intenzitet, ve-

ličina, porodica fontova itd. Vrednosti moraju biti razdvojene razmacima i deklarisane određenim redosledom (npr., font: bold 24px arial,sans-serif). Svaki stil možemo deklarisati i nezavisno, pomoću pojedinačnih svojstava font-style, font-variant, font-weight, font-size, line-height i font-family (npr., font-size: 24px). color – Deklariše boju elementa. Vrednost se može izraziti heksadecimalnim brojevima (npr., color: #FF0000;) ili decimalnim brojevima (npr., color: rgb(255, 0, 0);). background – Omogućava da na pozadinu elementa primenimo stilove, kao

što su boja, slika, ponavljanje itd. Zadate vrednosti se moraju razdvojiti razmacima (npr., background: #0000FF url(‘bricks.jpg’) no-repeat;). Svaki stil se može deklarisati i nezavisno, pomoću pojedinačnih svojstava. Ova i sva pridružena svojstva detaljnije ćemo proučavati u poglavlju 3. width – Deklariše širinu elementa (npr., width: 200px). height – Deklariše visinu elementa (npr., height: 200px).

margin – Deklariše spoljnu marginu elementa koja predstavlja prostor oko elementa. Ona može imati četiri vrednosti: gore, desno, dole i levo, koje se navode tim redosledom i razdvojene razmacima (npr., margin: 10px 30px 10px 30px;). Međutim, ako se deklariše samo jedan, dva ili tri parametra, ostalima se dodeljuju iste vrednosti (npr., margin: 10px 30px). I ove vrednosti se mogu deklarisati nezavisno, pomoću pojedinačnih svojstava margin-top, margin‑right, margin-bottom i margin-left (npr., margin-left: 10px;). padding – Deklariše unutrašnju marginu elementa, koja predstavlja prostor oko sadržaja unutar ivica elementa – na primer, prostor između naslova i ivice virtuelnog okvira, formiranog pomoću elementa <h1> koji sadrži taj naslov. Vrednosti se deklarišu na isti način kao za svojstvo margin. I ove vrednosti se mogu deklarisati nezavisno, upotrebom svojstava padding-top, padding-right, padding-bottom i padding-left (npr., padding-top: 10px;). border – Omogućava da deklarišemo širinu, stil i boju ivice elementa (npr., border: 1px solid #990000;). Moguće vrednosti za stil su none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset i inherit. I ovo svojstvo ima pojedinačna svojstva za svaku stranu elementa: border-top, border-bottom, border-left i border-right. Svakoj strani nezavisno možemo dodeliti i vrednosti za širinu, stil i boju, pri čemu se ime dodaje na kraju svojstva. Ivicu uvek

40 | Poglavlje 2 • Stilizovanje u CSS-u i modeli okvira

moramo deklarisati pre nego što je na bilo koji način izmenimo (npr., border-style: solid; border-top-width: 10px;). text-align – Poravnava element unutar njegovog roditelja. Moguće vrednosti su left, right, center, justify i inherit. VAŽNO Ovo nisu jedina dostupna svojstva CSS-a. U ovoj knjizi primenićemo samo nekoliko postojećih svojstava i proučavati nova koja su ugrađena u CSS3. Da biste naučili više, posetite našu veb lokaciju i pratite veze za ovo poglavlje.

Umetnuti stilovi Primena stilova na HTML elemente menja način njihovog prikazivanja na ekranu. Pomenuli smo da čitači veba podrazumevano definišu skup stilova koji, u većini slučajeva, ne zadovoljavaju potrebe dizajnera. Pomoću različitih metoda, te stilove možemo zanemariti i zameniti sopstvenim stilovima. Jedna od tih metoda dodeljuje stilove unutar elementa u obliku atributa. Listing 2-5 prikazuje jednostavan HTML kôd u kome je na element <p> primenjen atribut style sa dodeljenom vrednošću font-size: 20px. Ovo svojstvo redefiniše podrazumevanu veličinu teksta unutar elementa <p> tako da je nova veličina 20 piksela. Listing 2-5: CSS stilovi unutar HTML oznaka. <!DOCTYPE html> <html lang=”en”> <head> <title>This text is the title of the document</title> </head> <body> <p style=”font-size: 20px”>My text</p> </body> </html>

Uradite sami U praznu tekstualnu datoteku kopirajte HTML kôd i otvorite datoteku u svom čitaču veba da biste proverili kako radi. Ime datoteke mora imati nastavak .html da bi se pravilno otvorila (npr., myfile.html).

Navedena metoda korišćenja umetnutih ili rednih stilova (engl. inline styles) dobar je način za testiranje stilova i proveru rezultata, ali se ne preporučuje u većim projektima. Razlog je jednostavan: ona zahteva da se svaki stil upisuje i ponavlja za svaki element, što znatno povećava dokument i može onemogućiti njegovo ažuriranje i održavanje. Na primer, ako biste odlučili da veličina teksta u svakom elementu <p> umesto 20 piksela bude 24 piksela, morao bi da se promeni svaki stil u svakoj oznaci <p> u celom dokumentu, kao i u svakom dokumentu vaše veb lokacije.

2.2 Kratak uvod u CSS | 41

Ugrađeni stilovi Bolje rešenje od prethodnog jeste umetanje stilova u glavu dokumenta, nakon čega se na odgovarajuće HTML elemente može uticati pomoću referenci. Listing 2-6: Stilovi u glavi dokumenta. <!DOCTYPE html> <html lang=”en”> <head> <title>This text is the title of the document</title> <style> p { font-size: 20px } </style> </head> <body> <p>My text</p> </body> </html>

Element <style> omogućava programerima da CSS stilove umeću u dokumente. U ranijim verzijama HTML-a morala se definisati vrsta stilova koja se umeće; u jeziku HTML5, podrazumevani stil je CSS, pa stoga početnoj oznaci <style> ne moraju da se dodaju atributi. Podebljan kôd listinga 2-6 ima istu namenu kao i red koda u listingu 2-5, ali u ovom primeru stil ne mora da se upisuje unutar svake oznake <p> u dokumentu, jer su svi elementi <p> već stilizovani. Ovom metodom skraćuje se kôd i dodeljuje odgovarajući stil odgovarajućim elementima pomoću referenci.

Spoljne datoteke Deklarisanjem stilova u glavi dokumenta štedi se prostor, pa je kôd konzistentniji i lakše se održava, ali zahteva kopiranje stilova u svaki dokument veb lokacije. Problem ponavljanja može se rešiti tako što se svi stilovi premeste u spoljnu datoteku, a ta datoteka zatim, pomoću elementa <link>, umetne u svaki dokument koji treba stilizovati. Ova metoda omogućava i to da se ceo skup stilova izmeni upotrebom druge datoteke. Tako se naši dokumenti mogu izmeniti ili prilagoditi svakoj okolnosti i svakom uređaju, o čemu ćemo govoriti pri kraju ove knjige. U poglavlju 1 razmotrili smo oznaku <link> i naučili da umećemo CSS datoteke u dokumente. Pomoću reda <link rel=”stylesheet” href=”mystyles.css”> naložili smo čitaču veba da učita datoteku mystyles.css, koja sadrži sve stilove potrebne za prikazivanje stranice na ekranu. To je praksa velikog broja dizajnera koji već koriste HTML5. Oznaka <link> koja referencira CSS datoteku biće umetnuta u svaki dokument kome trebaju dati stilovi. 42 | Poglavlje 2 • Stilizovanje u CSS-u i modeli okvira

Listing 2-7: Primena CSS stilova iz spoljne datoteke. <!DOCTYPE html> <html lang=”en”> <head> <title>This text is the title of the document</title> <link rel=”stylesheet” href=”mystyles.css”> </head> <body> <p>My text</p> </body> </html> Uradite sami CSS stilove dodavaćemo datoteci mystyles.css. Ovu datoteku morate napraviti u istom direktorijumu u kome je i HTML datoteka, i u nju kopirati CSS stilove da biste videli kako rade. Podsetite se osnova CSS datoteke su obične tekstualne datoteke. I njih, kao i HTML datoteke, možete praviti pomoću bilo kojeg editora teksta, kao što je Windowsov Notepad.

Reference Sve stilove koje koristite možete grupisati u jednu spoljnu datoteku, koju ćete povezati sa svojim dokumentima. Ovo rešenje je praktično, ali nam trebaju mehanizmi za uspostavljanje posebnih odnosa između tih stilova i elemenata unutar dokumenata na koje će se oni primenjivati. U prethodnim primerima primenili smo jednu moguću metodu za dodeljivanje stilova elementu. Na primer, stil koji menja veličinu fonta u listingu 2-6 referencirao je svaki element <p> pomoću rezervisane reči p. Kao rezultat, stil umetnut između oznaka <style> dodelio je taj CSS stil svakom elementu <p> u dokumentu. Postoje tri osnovne metode za biranje HTML elementa na koji će se primeniti CSS pravilo: • pomoću rezervisane reči elementa • pomoću atributa id • pomoću atributa class Međutim, kasnije ćemo videti da je CSS3 prilagodljiv, i da obuhvata nove i specifičnije načine primene CSS pravila.

Referenciranje pomoću rezervisane reči Deklarisanje CSS pravila pomoću rezervisane reči elementa uticaće na svaki element tog tipa u dokumentu. Na primer, naredno pravilo menja stilove elemenata <p>:

2.2 Kratak uvod u CSS | 43

Listing 2-8: Referenciranje pomoću rezervisane reči. p { font-size: 20px }

Kada se rezervisana reč p nalazi ispred pravila, nalažemo čitaču veba da se ono mora primeniti na svaki element <p> u HTML dokumentu. Kao rezultat, ceo tekst unutar oznaka <p> biće veličine 20 piksela. Ovo može da se primeni i na sve druge HTML elemente u dokumentu. Na primer, ako smo umesto p definisali rezervisanu reč span, svaki tekst između oznaka <span> biće 20 piksela. Listing 2-9: Referenciranje pomoću druge rezervisane reči. span { font-size: 20px }

Ali šta ako hoćemo da referenciramo samo jednu oznaku? Treba li da koristimo atribut style unutar te oznake? Odgovor je odričan. Pomenuli smo da se metoda umetnutih stilova (koja koristi atribut style unutar HTML oznaka) smatra prevaziđenom i da je treba koristiti samo za testiranje. Da biste izabrali određeni HTML element iz pravila u CSS datoteci, možete upotrebiti dva različita atributa: id i class.

Referenciranje pomoću atributa id Atribut id više liči na ime i predstavlja identifikaciju elementa; to znači da vrednost ovog atributa mora biti jedinstvena u celom dokumentu. Da biste određeni element iz naše CSS datoteke referencirali pomoću atributa id, pravilo morate deklarisati tako da ispred vrednosti za identifikaciju stavite znak tarabe (#). Listing 2-10: Referenciranje elementa pomoću vrednosti atributa id. #text1 { font-size: 20px }

Pravilo iz listinga 2-10 primeniće se na HTML element identifikovan pomoću atributa id=”text1”. HTML kôd sada izgleda ovako: Listing 2-11: Identifikovanje elementa <p> pomoću njegovog atributa id. <!DOCTYPE html> <html lang=”en”> <head> <title>This text is the title of the document</title> <link rel=”stylesheet” href=”mystyles.css”>

44 | Poglavlje 2 • Stilizovanje u CSS-u i modeli okvira

</head> <body> <p id=”text1”>My text</p> </body> </html>

Kad god u CSS datoteci referenciramo neki element pomoću identifikatora text1, element s tom id vrednošću se menja, ali ostali elementi <p>, kao i drugi elementi u dokumentu, ostaju nepromenjeni. Ovaj način referenciranja je krajnje specifičan i koristi se uglavnom za opštije elemente, kao što su strukturne oznake. Atribut id i njegova specifičnost više odgovaraju referenciranju elemenata iz JavaScripta, o čemu će biti reči u narednim poglavljima.

Referenciranje pomoću atributa class Često je bolje da, umesto atributa id, za stilizovanje koristite atribut class. On je prilagodljiviji i može se dodeliti svim HTML elementima u dokumentu koji imaju zajedničke stilove. Listing 2-12: Referenciranje pomoću vrednosti atributa class. .text1 { font-size: 20px }

Da bismo koristili atribut class, moramo da deklarišemo pravilo tako da stavimo tačku ispred njegovog imena. Prednost ove metode je to što je umetanje atributa class, koji ima vrednost text1, dovoljno da se to isto pravilo dodeli bilo kom izabranom elementu. Listing 2-13: Dodeljivanje stilova pomoću atributa class. <!DOCTYPE html> <html lang=”en”> <head> <title>This text is the title of the document</title> <link rel=”stylesheet” href=”mystyles.css”> </head> <body> <p class=”text1”>My text</p> <p class=”text1”>My text</p> <p>My text</p> </body> </html>

2.2 Kratak uvod u CSS | 45

Elementi <p> u prva dva reda listinga 2-13 imaju atribut class s vrednošću text1. Pomenuli smo da se isto pravilo može primeniti na različite elemente u istom dokumentu. Stoga prva dva elementa imaju iste stilove i na oba se primenjuje pravilo iz listinga 2-12. To ne utiče na poslednji element <p>, koji se prikazuje s podrazumevanim stilovima. Pravila dodeljena pomoću atributa class nazivaju se klasama. Istom elementu može se dodeliti više klasa, samo treba deklarisati imena klasa razdvojena razmacima (npr., class=”text1 text2”). Klasa se može deklarisati isključivo za određene tipove elemenata, i to tako što se ispred tačke doda selektor. Listing 2-14: Deklarisanje klase samo za elemente <p>. p.text1 { font-size: 20px }

Listing 2-14 sadrži pravilo koje referencira klasu pod imenom text1, ali samo za elemente <p>. Ako bilo koji drugi element bude imao isto ime za svoj atribut class, na njega se ovo pravilo neće primeniti.

Referenciranje pomoću bilo kog atributa Opisane metode za referenciranje mogu se primeniti na razne slučajeve, ali ponekad nisu dovoljne za pronalaženje elementa koji želimo da stilizujemo. Najnovije verzije CSS-a sadrže nove načine za referenciranje HTML elemenata. Jedan od njih je selektor atributa (engl. attribute selector). Sada element može da se referencira ne samo pomoću atributa id i class, nego i pomoću bilo kog drugog atributa. Listing 2-15: Referenciraju se samo elementi <p> koji imaju atribut name. p[name] { font-size: 20px }

Pravilo iz listinga 2-15 menja samo one elemente <p> koji imaju atribut pod imenom name. Da bismo pokazali šta radimo sa atributima id i class, možemo navesti i vrednost atributa. Listing 2-16: Referenciraju se elementi <p> koji imaju atribut name s vrednošću mytext. p[name=”mytext”] { font-size: 20px }

CSS3 omogućava da kombinujemo simbol „=“ sa ostalima, kako bismo napravili precizniju selekciju:

46 | Poglavlje 2 • Stilizovanje u CSS-u i modeli okvira

Listing 2-17: Novi selektori u jeziku CSS3. p[name^=”my”] { font-size: 20px } p[name$=”my”] { font-size: 20px } p[name*=”my”] { font-size: 20px }

Ako su vam već poznati regularni izrazi (engl. regular expressions) iz drugih jezika, poput JavaScripta ili PHP-a, prepoznaćete selektore iz listinga 2-17 – oni u jeziku CSS3 daju slične rezultate: • Pravilo koje sadrži selektor ^= dodeliće se svakom elementu <p> čija vrednost atributa name započinje podnizom “my” (npr., mytext, mycar). • Pravilo koje sadrži selektor $= dodeliće se svakom elementu <p> čija se vrednost atributa name završava podnizom “my” (npr., textmy, carmy). • Pravilo koje sadrži selektor *= odgovaraće svakom elementu <p> čija vrednost atributa name sadrži podniz “my” (u ovom slučaju, podniz se može nalaziti i u sredini – na primer, textmycar). U navedenim primerima koristili smo element <p>, atribut name i slučajno izabran tekst kao što je “my”, ali se ista metoda može upotrebiti sa svakim atributom i vrednošću. Da biste referencirali bilo koji HTML element, upišite ime atributa i vrednost koju tražite unutar uglastih zagrada.

Referenciranje pomoću pseudoklasa Pseudoklase omogućavaju da referenciramo HTML elemente pomoću njihovih osobina, kao što su položaj u kodu ili aktuelna stanja. CSS3 sadrži nove pseudoklase koje još preciznije referenciraju elemente. Primenićemo nekoliko njih u jednostavnom dokumentu, a ostale obraditi kasnije u drugim praktičnim primerima. Listing 2-18: HTML dokument za testiranje pseudklasa. <!DOCTYPE html> <html lang=”en”> <head> <title>This text is the title of the document</title> <link rel=”stylesheet” href=”mystyles.css”> </head> <body> <div id=”wrapper”> <p class=”mytext1”>My text1</p> <p class=”mytext2”>My text2</p> <p class=”mytext3”>My text3</p> <p class=”mytext4”>My text4</p> </div> </body> </html> 2.2 Kratak uvod u CSS | 47

Poglavlje 4

JavaScript

4.1 Kratak uvod u JavaScript HTML5 možemo posmatrati kao građevinu koju podupiru tri stuba: HTML, CSS i JavaScript. Analizirali smo elemente ugrađene u HTML i nova svojstva koja CSS čine idealnom alatkom za dizajnere, a sada ćemo upoznati i jedan od najjačih „stubova“: JavaScript. JavaScript je interpretirani jezik koji ima više namena, a do sada se posmatrao samo kao dopuna HTML-a i CSS-a. Jedna od inovacija koja je pomogla da se pogled na JavaScript promeni bio je novi mehanizam čitača veba namenjen ubrzavanju obrade skriptova. On je pretvarao skriptove u mašinski kôd da bi brzina izvršavanja bila poput onih u samostalnim aplikacijama. Ove poboljšane mogućnosti znatno poboljšavaju performanse JavaScripta i pretvaraju ga u najbolju opciju kodiranja za veb. Za izvršavanje JavaScript koda neophodno je hosting okruženje, ali je zahvaljujući novim interpreterima i kompajlerima poput Googleovog V8, on postao nezavisan i moćan jezik koji može da radi u gotovo svim okruženjima. Zaslužan je za revoluciju na internetu i procvat tržišta mobilnih uređaja. Da bi se potpuno iskoristila napredna arhitektura JavaScripta, poboljšane su mogućnosti prenosivosti i integracije. Osim toga, u sve čitače veba podrazumevano su ugrađeni svi interfejsi za programiranje aplikacija (engl. application programming interfaces, APIs) koji dopunjavaju JavaScript osnovnim mogućnostima. Ovi novi API-ji (kao što su Web Storage, Canvas i drugi) predstavljaju interfejse za biblioteke ugrađene u čitače veba. Osnovna zamisao je da te moćne osobine budu svuda dostupne preko jednostavnih standardnih metoda za programiranje, proširujući opseg delovanja jezika i olakšavajući izradu atraktivnog i korisnog softvera za veb. JavaScript je danas najpopularniji i najperspektivniji jezik, a HTML5 ga pretvara u osnovnu alatku programera za veb i mobilne uređaje. U ovom poglavlju upoznaćete osnovne koncepte JavaScripta, naučiti kako se ugrađuju skriptovi u HTML dokumente i primenjuju najnovije izmene u jeziku, što će vas pripremiti za ostale sadržaje u knjizi.

123

VAŽNO U ovoj knjizi predstavljen je uvod u JavaScript. Radićemo s jednostavnim i složenim osobinama, ali ćemo primenjivati samo osnovne koncepte neophodne za savladavanje novina u jeziku HTML5. Da biste proširili znanja u ovoj oblasti, posetite našu veb lokaciju i pratite veze za ovo poglavlje. Ako su vam ove informacije poznate, slobodno preskočite delove koje ste već savladali.

Jezik JavaScript je programski jezik koji se potpuno razlikuje od HTML-a i CSS-a. HTML je jezik za označavanje, poput koda koji čitač veba interpretira kako bi organizovao informacije, a CSS se može posmatrati kao lista stilova (premda ga je nova specifikacija pretvorila u alatku koja je u većoj meri dinamička). S druge strane, JavaScript je jezik za pisanje skriptova, ali se može uporediti s drugim, „pravim“ programskim jezicima, kao što su C++ ili Java. Jedina važna razlika između drugih programskih jezika i JavaScripta jeste njegova priroda. Za razliku od savremenih jezika koji su objektno orijentisani, JavaScript je jezik za pisanje skriptova zasnovan na prototipovima što ga, paradoksalno, mnogo više usmerava na objekte nego druge jezike, u šta ćete se i sami uveriti. JavaScript može da obavlja brojne zadatke – od davanja instrukcija do izračunavanja složenih algoritama – ali njegova najvažnija osobina, kao i drugih programskih jezika, jeste sposobnost memorisanja i obrade podataka, što se postiže pomoću promenljivih.

Promenljive Memorija računara ili mobilnog uređaja liči na ogromno saće, s milionima ćelija u koje se smeštaju podaci. Te ćelije imaju adrese, tj. brojeve koji ih identifikuju. Ćelije imaju ograničen prostor, a za smeštanje veće količine podataka najčešće je potrebna grupa od nekoliko ćelija. Rad sa takvim prostorom za čuvanje podataka je složen, i zato programski jezik sadrži promenljive (engl. variables) koje olakšavaju identifikaciju vrednosti u memoriji. Promenljive su imena dodeljena „ćeliji“ ili grupi „ćelija“ u kojima će se podaci čuvati. Na primer, da bismo u memoriju smestili vrednost 5, treba da znamo gde se taj broj čuva kako bi se kasnije mogao preuzeti. Promenljive omogućavaju da se taj prostor identifikuje pomoću odgovarajućeg imena i da se, upotrebom tog imena, preu zme sadržaj „ćelije“. Da bi deklarisao promenljivu, JavaScript upotrebljava rezervisanu reč var. Listing 4-1: Deklarisanje promenljive u JavaScriptu. <script> var mynumber = 2; </script> 124 | Poglavlje 4 • JavaScript

Podsetite se osnova Oznake <script> javljaju čitaču veba da je izvorni kôd koji je umetnut između njih, napisan na JavaScriptu. To je jedan od načina da JavaScript kôd ugradite u HTML dokument, a uskoro ćemo analizirati i alternativna rešenja.

U listingu 4-1 pravimo promenljivu mynumber i u nju smeštamo vrednost 2. Kažemo da je vrednost dodeljena (engl. assigned) promenljivoj. Prema tome, „dodelili smo vrednost 2 promenljivoj mynumber”. JavaScript rezerviše prostor u memoriji, upisuje broj 2, pravi referencu na taj prostor i dodeljuje je imenu mynumber. Kad god upotrebimo tu referencu (ime mynumber), dobijamo broj 2. Listing 4-2: Upotreba sadržaja promenljive. <script> var mynumber = 2; alert(mynumber); </script>

U listingu 4-2 pravimo promenljivu i dodeljujemo joj vrednost 2 (sadržaj promenljive mynumber ima vrednost 2). Pomoću metode alert() sadržaj ove promenljive prikazuje se na ekranu. Podsetite se osnova Metoda alert() je unapred definisana metoda JavaScripta, koja generiše iskačuće prozore i prikazuje određene informacije na ekranu. U prozoru se prikazuju vrednosti deklarisane u zagradama (npr., alert(“Hello World”);). Kasnije ćemo proučiti ovu metodu i druge koje su joj slične. Uradite sami Za testiranje koda JavaScripta ne moramo praviti celu HTML strukturu. Izvorni kôd iz listinga 4-2 dovoljan je da čitači veba interpretiraju JavaScript. Kopirajte taj izvorni kôd u praznu tekstualnu datoteku, snimite je sa odgovarajućim imenom i nastavkom .html (npr., jscode.html), i otvorite je u svom čitaču veba. Videćete iskačući prozor koji prikazuje vrednost 2.

Promenljive se tako nazivaju zato što nisu stalne. Vrednost koja im je dodeljena možemo menjati kad god poželimo, što i jeste njihova najvažnija osobina. Listing 4-3: Dodeljivanje nove vrednosti promenljivoj. <script> var mynumber = 2; mynumber = 3; alert(mynumber); </script>

4.1 Kratak uvod u JavaScript | 125

Nakon što smo u listingu 4-3 napravili promenljivu mynumber, dodelićemo joj novu vrednost. Sada metoda alert() prikazuje broj 3. Rezervisana reč var ne mora da se koristi, jer se ovde nova vrednost dodeljuje samo pomoću imena promenljive i znaka =. U stvarnim situacijama, vrednost promenljive obično koristimo za izvršavanje neke operacije i dodeljivanje rezultata toj istoj promenljivoj: Listing 4-4: Upotreba vrednosti promenljive. <script> var mynumber = 2; mynumber = mynumber + 1; alert(mynumber); </script>

U ovom primeru, vrednost 1 dodaje se važećoj vrednosti promenljive mynumber, a rezultat se dodeljuje istoj promenljivoj. To je isto kao da ste sabrali 2 + 1, s tom razlikom što upotreba promenljive umesto broja omogućava da vrednost kasnije, tokom izvršavanja koda, promenite. Ako primenimo prethodni postupak i umesto broja 2 u promenljivu upišemo broj 5, rezultat sabiranja biće 6, a ne 3. Ovo ilustruje kolika je moć promenljivih. Ako izvršimo bilo koju matematičku operaciju ili spajanje teksta, promenljiva uvek zadržava poslednju vrednost koja joj je dodeljena. Podsetite se osnova Osim operatora +, JavaScript sadrži brojne druge operatore. Najčešće se koriste operatori + (sabiranje), – (oduzimanje), * (množenje) i / (deljenje), ali postoje i logički operatori, kao što su && (i) i || (ili), operatori poređenja, kao što su == (jednako), != (nije jednako), < (manje od), > (veće od), i mnogi drugi. Neke od njih upotrebićete u nastavku ove knjige, a ceo spisak potražite na našoj veb lokaciji (pratite veze za ovo poglavlje).

Promenljive mogu da sadrže brojeve, tekst i unapred definisane vrednosti (kao što su logičke vrednosti true ili false), ili osnovne vrednosti (kao što su null ili undefined). Brojevi se izražavaju kao i u prethodnim primerima, a tekst se mora nalaziti u polunavodnicima ili navodnicima. Listing 4-5: Dodeljivanje znakovnog niza promenljivoj. <script> var mytext = “Hello World!”; alert(mytext); </script>

126 | Poglavlje 4 • JavaScript

Promenljive mogu da sadrže i nekoliko vrednosti istovremeno. Za to se koriste strukture koje se zovu nizovi (engl. arrays) i koji su višedimenzionalne promenljive. Nizovi se definišu pomoću jednostavne notacije sa uglastim zagradama, unutar kojih se vrednosti razdvajaju zarezima. Te vrednosti se kasnije identifikuju pomoću indeksa, počevši od vrednosti 0. Listing 4-6: Pravljenje višedimenzionalne promenljive. <script> var myarray = [“red”, “green”, “blue”]; alert(myarray[0]); </script>

U listingu 4-6 pravimo niz myarray koji sadrži tri vrednosti: red, green i blue. JavaScript automatski dodeljuje indeks 0 za prvu vrednost, 1 za drugu i 2 za treću. Da bismo preuzeli ove informacije, treba da navedemo indeks kad god koristimo niz. To se radi tako što se broj indeksa stavi u uglaste zagrade iza imena promenljive. Na primer, da bismo dobili prvu vrednost niza myarray, pišemo myarray[0], kao u našem primeru. Nizovi, kao i promenljive, mogu da sadrže bilo koji tip vrednosti. Možemo da napravimo niz poput onog iz listinga 4-6, koristeći brojeve, znakovne nizove, logičke vrednosti, a vrednost možemo da deklarišemo i kao praznu (null) ili nedefinisanu (undefined). Listing 4-7: Upotreba različitih tipova vrednosti. <script> var myarray = [“red”, , 32, null, “HTML5 is awesome!”]; alert(myarray[1]); </script>

Podsetite se osnova Vrednosti null i undefined ugrađene su u JavaScript. Obe predstavljaju odsustvo vrednosti, ali undefined može da označava i stanje kada neko svojstvo objekta ili neki element niza nisu definisani. U primeru iz listinga 4-7, drugi element niza nije definisan. Ako pokušamo da učitamo ovaj element, dobićemo vrednost undefined. Uradite sami Kopirajte kôd iz listinga 4-7 u praznu tekstualnu datoteku, snimite je sa odgovarajućim imenom i nastavkom .html (npr., jscode.html), i otvorite datoteku u svom čitaču veba. Menjajte indeks tako da prikažete svaku vrednost niza.

Nad nizovima možemo da izvršavamo operacije i memorišemo rezultat, kao što smo radili i s pojedinačnim promenljivama.

4.1 Kratak uvod u JavaScript | 127

Listing 4-8: Rad sa nizovima. <script> var myarray = [“red”, 32]; alert(myarray[0]); myarray[0] = myarray[0] + “ color”; myarray[1] = myarray[1] + 10; alert(myarray[0] + “ “ + myarray[1]); </script>

Pomoću skripta iz listinga 4-8 naučili smo kako se menja vrednost niza, ali i kako se spaja tekst. Nizovi se ponašaju isto kao i pojedinačne promenljive, s tom razlikom što navodimo indeks kad god ih koristimo. Ako upotrebimo izraz myarray[1] = myarray[1] + 10, naložićemo interpreteru JavaScripta da preuzme važeću vrednost niza myarray sa indeksom 1 (32), da toj vrednosti doda 10 i sačuva rezultat (42) u istom nizu i sa istim indeksom; vrednost myarray[1] biće 42. Operator + koristi se sa brojevima i znakovnim nizovima (tekstom); u slučaju znakovnih nizova, on spaja tekst i generiše nov znakovni niz koji sadrži obe vrednosti. U našem primeru, vrednost myarray[0] bila je „red“, ali je kasnije dodat znakovni niz „color“ i sada je vrednost niza myarray sa indeksom 0 „red color“. Podsetite se osnova Na kraju poslednjeg skripta, metoda alert() prikazuje obe vrednosti niza razdvojene razmacima. Vrednosti i razmak povezuje operator +. Ovaj operator se koristi ne samo za izvršavanje operacija, nego i za spajanje (nadovezivanje) vrednosti i znakovnih nizova radi stilizovanja (brojevi se automatski prevode u znakovne nizove).

JavaScript pruža jednostavan način za rad sa nizovima. Vrednosti možemo izdvajati ili dodavati pomoću narednih metoda: push(vrednost) – Pomoću ove metode se dodaje nova vrednost na kraj niza. Atribut vrednost je vrednost koja se dodaje. shift() – Pomoću ove metode uklanja se i vraća prva vrednost niza. pop() – Pomoću ove metode uklanja se i vraća poslednja vrednost niza. Listing 4-9: Dodavanje vrednosti u niz i njeno izdvajanje iz niza. <script> var myarray = [“red”, 32]; myarray.push(‘car’); alert(myarray[2]); alert(myarray.shift()); </script>

128 | Poglavlje 4 • JavaScript

Vrednost dodata metodom push() dodeljuje se sledećem dostupnom indeksu u nizu. U listingu 4-9, vrednost koja se umeće metodom push() dobija indeks 2. Nakon toga, taj indeks omogućava da se ista vrednost prikaže na ekranu. Na kraju skripta izdvajamo i prikazujemo prvu vrednost niza na ekranu. Vrednosti izdvojene metodama shift() i pop() nisu više deo niza. Nakon izvršavanja skripta u ovom primeru, u nizu preostaju samo dve vrednosti: 32 i car.

Uslovi i petlje U računarskim programima često se koriste uslovi i složeni ciklusi obrade. JavaScript sadrži ukupno četiri naredbe za obradu koda zavisno od uslova koje je odredio programer: if, switch, for i while. Listing 4-10: Provera uslova naredbom if. <script> var myvariable = 9; if(myvariable < 10) { alert(“the number is smaller than 10”); } </script>

Podsetite se osnova Preporuka je da se svaki red u JavaScriptu zatvori tačkom i zarezom, što nije neophodno nakon bloka naredaba (bloka koda koji se nalazi unutar vitičastih zagrada).

Naredbom if proverava se izraz u zagradama i obrađuju instrukcije u vitičastim zagradama ako je uslov tačan. U skriptu iz listinga 4-10, vrednost 9 dodeljuje se promenljivoj myvariable, a zatim se naredbom if promenljiva poredi sa brojem 10. Ako je vrednost promenljive manja od 10, metoda alert() prikazuje poruku na ekranu. Ova naredba ima važan dodatak koji omogućava da izvršimo neku akciju bez obzira na to da li je uslov ispunjen ili nije. Naredbom if else proverava se uslov u zagradama, i – bilo da je uslov ispunjen ili nije – izvršava se određena (različita) akcija. Listing 4-11: Provera dva uslova pomoću naredbe if else. <script> var myvariable = 9; if(myvariable < 10) { alert(“the number is smaller than 10”); }else{ alert(“the number is 10 or bigger”); } </script> 4.1 Kratak uvod u JavaScript | 129

U sledećem primeru, skript proverava dva uslova: kada je broj manji od 10, i kada je broj jednak ili veći od 10. Za proveru više uslova, u JavaScriptu se koristi naredba switch. Listing 4-12: Upotreba naredbe switch. <script> var myvariable = 9; switch(myvariable) { case 5: alert(“the number break; case 8: alert(“the number break; case 10: alert(“the number break; default: alert(“the number } </script>

is five”); is eight”); is ten”); is “ + myvariable);

Naredba switch izračunava izraz (obično je to samo jedna promenljiva), uparuje rezultat s naredbama case u vitičastim zagradama i, u slučaju uspeha, izvršava instrukcije deklarisane za taj slučaj. U primeru iz listinga 4-12, naredba switch izračunava vrednost promenljive myvariable. Ta vrednost se poredi sa svakim pojedinačnim slučajem (engl. case). Na primer, ukoliko je vrednost 5, kontrola se prenosi u prvi slučaj (case), a metoda alert() na ekranu prikazuje tekst „the number is five“. Ako prvi slučaj (case) ne odgovara vrednosti promenljive, izračunava se sledeći slučaj, i tako dalje. Ukoliko nijedan uslov ne odgovara zadatoj vrednosti, izvršiće se podrazumevane instrukcije u slučaju označenom sa default. Kôd u svakom uslovu case mora da se završi instrukcijom break. Ona obaveštava interpreter JavaScripta da ne mora da izvršava ostale naredbe. Naredbe switch i if su korisne, ali obavljaju jednostavan zadatak: izračunavaju izraz, izvršavaju grupu instrukcija zavisno od rezultata i nakon toga vraćaju kontrolu skriptu. Postoje situacije u kojima to nije dovoljno. Instrukcije ponekad treba izvršiti po nekoliko puta za isti uslov, a ponekad se uslov mora ponovo izračunati nakon moguće izmene tokom procesa. U takvim slučajevima možemo koristiti dve naredbe: for i while.

130 | Poglavlje 4 • JavaScript

Listing 4-13: Upotreba naredbe for. <script> var myvariable = 9; for(var f = 0; f < myvariable; f++) { alert(“The current number is “ + f); } </script>

Naredba for izvršava kôd u vitičastim zagradama sve dok je ispunjen uslov koji je deklarisan kao drugi parametar. Sintaksa ove naredbe je for(inicijalizacija; uslov; inkrement). Prvi parametar definiše početne vrednosti za petlju; drugi parametar definiše uslov koji se proverava; poslednji parametar definiše kako se početne vrednosti menjaju u svakom ciklusu. U skriptu iz listinga 4-13 deklarišemo promenljivu f i dodeljujemo joj početnu vrednost 0. Zatim se ispituje ispunjenost uslova, tj. da li je vrednost promenljive f manja od vrednosti promenljive myvariable. Ako jeste, izračunava se kôd u vitičastim zagradama. Nakon toga, interpreter JavaScripta izvršava poslednji parametar naredbe for i ponovo proverava uslov. Ako je uslov ispunjen, instrukcije se izvršavaju još jednom. Petlja se nastavlja sve dok uslov ne postane neistinit. Promenljiva f inicijalizuje se vrednošću 0. Po završetku prvog ciklusa, instrukcija f++ uvećava vrednost promenljive f za 1, a uslov se ponovo proverava. U svakom ciklusu vrednost promenljive f povećava se za 1. Proces se nastavlja sve dok promenljiva f ne postigne vrednost 9, kada uslov postaje neistinit (9 nije manje od 9), i petlja se prekida. Podsetite se osnova Operator JavaScripta ++ služi i za sabiranje. On vrednosti promenljive dodaje vrednost 1 i rezultat vraća u promenljivu, što se može izraziti kao variable = variable + 1.

Naredba for je korisna kada možemo unapred da odredimo uslove, kao što je početna vrednost petlje, ili kako će se te vrednosti kretati. Kada uslovi nisu jasni, možemo koristiti naredbu while. Listing 4-14: Upotreba naredbe while. <script> var myvariable = 9; while(myvariable < 100) { myvariable++; } alert(“The final value of myvariable is “ + myvariable); </script>

4.1 Kratak uvod u JavaScript | 131

Naredba while zahteva samo deklaraciju uslova, navedenu u zagradama, i kôd koji se izvršava, naveden u vitičastim zagradama. Petlja se izvršava sve dok je uslov istinit. Ako je rezultat prvog izračunavanja uslova false, kôd se nikada ne izvršava. Da bi se instrukcije izvršile bar jednom, bez obzira na rezultat uslova, koristi se naredba do while. Listing 4-15: Upotreba naredbe do while. <script> var myvariable = 9; do{ myvariable++; }while(myvariable > 100); alert(“The final value of myvariable is “ + myvariable); </script>

U primeru iz listinga 4-15 menjamo uslov u „myvariable veće od 100“. Početna vrednost dodeljena promenljivoj bila je 9 pa ovaj uslov nije ispunjen. Ako upotrebimo naredbe do while, kôd unutar petlje izvršiće se bar jednom pre izračunavanja uslova. Iskačući prozor na kraju prikazuje vrednost 10 (9 + 1 = 10).

Funkcije i anonimne funkcije Do sada smo radili u globalnom prostoru. To je glavni prostor u kome se kôd obrađuje u isto vreme kada ga interpreter očitava. Instrukcije se izvršavaju sekvencijalno, po redosledu kojim su navedene u kodu, ali to možemo promeniti upotrebom funkcija. Funkcija je blok koda koji se identifikuje pomoću imena. Postoji nekoliko prednosti deklarisanja koda unutar funkcije nad deklarisanjem u globalnom prostoru. Najvažnija je to što se funkcije deklarišu ali se ne izvršavaju sve dok se ne pozovu pomoću imena. Listing 4-16: Deklarisanje funkcija. <script> function myfunction(){ alert(“I’am a function”); } myfunction(); </script>

Podsetite se osnova U JavaScriptu, znakovni niz se može deklarisati pomoću navodnika ili polunavodnika (npr., “Hello” ili ‘Hello’). Ako znakovni niz sadrži isti tip navodnika koji se koristi za njegovo deklarisanje, moramo ga napisati uz korišćenje izlazne sekvence, tj. pomoću obrnute kose crte (npr., ‘I\’m Tom’).

132 | Poglavlje 4 • JavaScript

Funkcije se deklarišu pomoću rezervisane reči function, imena i koda u vitičastim zagradama. Da biste pozvali funkciju (to jest, izvršili je), morate upotrebiti njeno ime i par zagrada na kraju, kao što je prikazano u listingu 4-16. Kao i u slučaju promenljivih, interpreter JavaScripta učitava funkciju, smešta njen sadržaj u memoriju i dodeljuje referencu imenu funkcije. Kada pozovemo funkciju, interpreter proverava referencu i učitava funkciju iz memorije. To omogućava da pozivamo funkciju više puta, kad god nam zatreba, čime funkcije pretvaramo u moćne jedinice za obradu podataka. Listing 4-17: Obrada podataka pomoću funkcija. <script> var myvariable = 5; function myfunction(){ myvariable = myvariable * 2; } for(var f = 0; f < 10; f++){ myfunction(); } alert(“The value of myvariable is now “ + myvariable); </script>

U primeru iz listinga 4-17 kombinuju se različite naredbe koje smo već proučavali. U njemu se deklariše promenljiva i dodeljuje joj se vrednost 5. Zatim se funkcija, pod imenom myfunction(), deklariše, ali se ne izvršava. Naredba for definiše petlju koja će se izvršavati dok god je vrednost promenljive f manja od 10. Na kraju, poslednja vrednost smeštena u promenljivoj myvariable prikazaće se na ekranu. Kôd unutar petlje poziva funkciju, pa će svaki ciklus petlje izvršavati funkciju myfunction(). Ona množi vrednost promenljive myvariable sa 2 i smešta rezultat u istu promenljivu. Kad god se funkcija izvrši, vrednost promenljive myvariable se uvećava. Iz toga se vidi kako rade funkcije kao jedinice obrade: deklarišemo ih jednom, damo im ime radi referenciranja i nakon toga možemo da ih koristimo kad god poželimo. Funkciju možemo deklarisati i pomoću anonimne funkcije koja se dodeljuje promenljivoj. Ime promenljive je ono koje kasnije koristimo za pozivanje funkcije. Pomoću ove metode funkcije se mogu definisati unutar drugih funkcija, pretvarati u konstruktore objekata ili se mogu praviti složeni programski obrasci, što ćete naučiti u nastavku. Listing 4-18: Deklarisanje funkcija pomoću anonimnih funkcija. <script> var myvariable = 5; var myfunction = function(){ myvariable = myvariable * 2;

4.1 Kratak uvod u JavaScript | 133

Poglavlje 10

Interfejs Canvas

10.1 Grafika za veb Na početku knjige pomenuli smo da HTML5 zamenjuje ranije dodatne programe, kao što su Flash ili Java apleti. Da bi veb postao nezavisan od tehnologija drugih pro izvođača, trebalo je razmotriti bar dva važna aspekta: obradu video-sadržaja i grafič ke aplikacije. Video-sadržaji se uspešno obrađuju pomoću elementa <video> i API-ja analiziranih u prethodnim poglavljima, ali oni nisu namenjeni za grafiku. HTML5 je uveo interfejs Canvas, koji veoma efikasno radi s grafikom – možete da crtate, prika zujete grafiku, animirate i obrađujete slike i tekst. Zajedno sa ostalim API-jima, Can vas učestvuje u izradi aplikacija, čak i 2D i 3D video-igrica za veb.

Element <canvas> Element <canvas> generiše na veb strani prazan pravougaoni prostor, u kome se pri kazuju rezultati metoda API-ja Canvas. Prostor je bela površina, slična onoj koju daje prazan element <div>, ali potpuno drugačije namene. Listing 10-1: Upotreba elementa <canvas>. <!DOCTYPE html> <html lang=”en”> <head> <title>Canvas API</title> <script src=”canvas.js”></script> </head> <body> <section id=”canvasbox”> <canvas id=”canvas” width=”500” height=”300”></canvas> </section> </body> </html>

237

Za ovaj element potrebno nam je samo nekoliko atributa, što se vidi iz listinga 10-1. Atributi width i height deklarišu veličinu okvira. Oni su neophodni, jer će svaki sadr žaj prikazan pomoću ovog elementa imati te dimenzije. Namena elementa <canvas> u osnovi je izrada praznog okvira na ekranu. Samo kroz JavaScript, kao i nove metode i svojstva koje uvodi API Canvas, ova površina postaje funkcionalna i može se upotrebiti u praktične svrhe. VAŽNO Ukoliko API Canvas nije dostupan u čitaču veba, sadržaj naveden između oznaka <canvas> prikazuje se na ekranu radi kompatibilnosti.

Metoda getContext() Metoda getContext() prva je koju moramo da pozovemo kako bi element <canvas> bio spreman za rad. Ona generiše kontekst za crtanje koji se dodeljuje platnu. Zahva ljujući njemu moći ćemo da primenimo ostale mogućnosti API-ja. Listing 10-2: Pravljenje konteksta za crtanje na platnu. function initiate(){ var elem = document.getElementById(‘canvas’); var canvas = elem.getContext(‘2d’); } addEventListener(“load”, initiate);

U listingu 10-2, referenca na element <canvas> smešta se u promenljivu elem, a kon tekst se pravi pomoću metode getContext(‘2d’). Ova metoda može imati dve vred nosti: 2d i webgl (za dvodimenzionalno i trodimenzionalno okruženje). U vreme pisa nja ove knjige, vrednost 2d je dostupna u svakom čitaču veba koji je kompatibilan sa HTML5, a vrednost webgl samo u čitačima koji primenjuju biblioteku WebGL za ge nerisanje 3D grafike. O biblioteci WebGL govorićemo u narednom poglavlju. Kontekst za crtanje na 2D platnu biće pomoćna mreža piksela rapoređenih u redove i kolone odozgo nadole i sleva udesno, pri čemu je koordinatni početak (piksel 0, 0) smešten u gornji levi ugao kvadrata. Uradite sami Kopirajte HTML dokument iz listinga 10-1 u novu praznu datoteku. Napravite i datoteku sa imenom canvas.js i kopirajte u nju sve skriptove, počevši od listinga 10‑2. Svaki primer u ovom poglavlju nezavisan je i zamenjuje prethodni.

238 | Poglavlje 10 • Interfejs Canvas

10.2 Crtanje na platnu Kada pripremimo element <canvas> i kontekst platna, možemo da napravimo i obra dimo grafiku. Spisak alatki koje interfejs Canvas nudi za ovu namenu veoma je dug i pomoću njih se može napraviti mnogo toga – od jednostavnih oblika i crteža, do teksta, senki ili složenih transformacija. U ovom odeljku razmotrićemo sve pomenu te tehnike pojedinačno.

Crtanje pravougaonika Najčešće programer mora prvo da pripremi sadržaj koji se crta, i tek nakon toga da ga pošalje u kontekst (što ćemo uskoro videti), ali postoji i nekoliko metoda za direktno cr tanje na platnu. Te metode su specifične za pravougaone oblike, i jedine mogu da gene rišu prost geometrijski oblik. (Da bismo dobili druge oblike, moramo da kombinujemo druge metode za crtanje i složene putanje.) Slede raspoložive metode: fillRect(x, y, širina, visina) – Iscrtava pun pravougaonik. Gornji levi ugao smešta se na položaj zadat atributima x i y. Atributi širina i visina deklarišu veličinu pravougaonika. strokeRect(x, y, širina, visina) – Slično prethodnoj metodi, ova iscrtava prazan pravougaonik, tj., samo konturu. clearRect(x, y, širina, visina) – Koristi se za oduzimanje piksela od oblasti koju zadaju atributi metode. Ponaša se slično kao pravougaoni brisač. Listing 10-3: Crtanje pravougaonika. function initiate(){ var elem = document.getElementById(‘canvas’); var canvas = elem.getContext(‘2d’); canvas.strokeRect(100, 100, 120, 120); canvas.fillRect(110, 110, 100, 100); canvas.clearRect(120, 120, 80, 80); } addEventListener(“load”, initiate);

Ova funkcija je ista kao ona iz listinga 10-2, ali s nekoliko novih metoda koje zaista crtaju na platnu. Kontekst se dodeljuje promenljivoj canvas, pa se sada ona koristi za referenciranje konteksta u svakoj metodi. Prva metoda, strokeRect(100, 100, 120, 120), crta prazan pravougaonik u gornjem levom uglu na poziciji 100, 100, i u veličini od 120 piksela. Druga metoda, fill Rect(110, 110, 100, 100), crta pun pravougaonik počevši od pozicije 110, 110.

10.2 Crtanje na platnu | 239

Poslednjom metodom, clearRect(120, 120, 80, 80), prostor kvadratnog oblika od 80 piksela na kraju se uklanja iz sredine prethodnog pravougaonika.

Slika 10-1: Prikaz platna i pravougaonici nacrtani pomoću koda iz listinga 10-3.

Na slici 10-1 predstavljeno je ono što ćete videti kada se izvrši kôd iz listinga 10-3. Ele ment <canvas> se prikazuje kao pomoćna mreža, čiji je koordinatni početak u gor njem levom uglu, a veličina zadata atributima. Pravougaonici se na platnu crtaju na poziciji zadatoj atributima x i y, jedan preko drugog, u skladu s redosledom iz izvor nog koda. (Prvi se crta onaj pravougaonik koji je prvi naveden u izvornom kodu; dru gi se crta preko prvog, itd.) Postoji metoda kojom se crtanje oblika može prilagođava ti, ali o njoj ćemo govoriti kasnije.

Boje Do sada smo podrazumevano koristili crnu boju. Boju zadajemo pomoću CSS sin takse i sledećih svojstava: strokeStyle – Definiše boju linija oblika. fillStyle – Definiše boju unutrašnjosti oblika. globalAlpha – Ne zadaje boju, nego providnost za sve oblike nacrtane na

platnu.

240 | Poglavlje 10 • Interfejs Canvas

Listing 10-4: Dodavanje boje. function initiate(){ var elem = document.getElementById(‘canvas’); var canvas = elem.getContext(‘2d’); canvas.fillStyle = “#000099”; canvas.strokeStyle = “#990000”; canvas.strokeRect(100, 100, 120, 120); canvas.fillRect(110, 110, 100, 100); canvas.clearRect(120, 120, 80, 80); } addEventListener(“load”, initiate);

Boje u listingu 10-4 deklarisane su pomoću heksadecimalnih brojeva. Možemo da ko ristimo i funkcije poput rgb(), ili čak da zadamo providnost oblika pomoću funkcije rgba(). Vrednosti koje se prosleđuju metodama stavljaju se u navodnike – na primer, strokeStyle = “rgba(255, 165, 0, 1)”. Kada se boja zadaje pomoću ovih metoda, ona postaje podrazumevana i za ostale crteže. Čak i kada se može koristiti funkcija rgba(), postoji svojstvo globalAlpha za defini sanje nivoa providnosti. Njegova sintaksa je globalAlpha = vrednost, gde je vrednost broj između 0.0 (potpuna neprovidnost) i 1.0 (potpuna providnost).

Prelivi Prelivi su danas veoma važni u programima za crtanje, pa ni API Canvas nije izuzetak. Kao i u CSS3, prelivi na platnu mogu biti linearni ili radijalni, i možemo da definiše mo graničnike (engl. stop points) kako bismo kombinovali boje. createLinearGradient(x1, y1, x2, y2) – Pomoću ove metode pravi se na plat

nu objekat s linearnim prelivom. createRadialGradient(x1, y1, r1, x2, y2, r2) – Pomoću ove metode pravi

se objekat s radijalnim prelivom, koji se na platnu realizuje pomoću dva kru ga. Vrednosti predstavljaju poziciju središta svakog kruga i njegov poluprečnik. addColorStop(pozicija, boja) – Pomoću ove metode zadaju se boje za pra vljenje preliva. Pozicija je vrednost između 0.0 i 1.0, i određuje početak slablje nja date boje.

10.2 Crtanje na platnu | 241

Listing 10-5: Primena linearnog preliva na platno. function initiate(){ var elem = document.getElementById(‘canvas’); var canvas = elem.getContext(‘2d’); var grad = canvas.createLinearGradient(0, 0, 10, 100); grad.addColorStop(0.5, ‘#00AAFF’); grad.addColorStop(1, ‘#000000’); canvas.fillStyle = grad; canvas.fillRect(10, 10, 100, 100); canvas.fillRect(150, 10, 200, 100); } addEventListener(“load”, initiate);

U listingu 10-5 pravimo objekat s prelivom od položaja 0, 0 do položaja 10, 100, pri čemu je preliv neznatno nagnut u levu stranu. Boje se zadaju pomoću metoda addCo lorStop(), a završni preliv se primenjuje na svojstvo fillStyle, kao obična boja.

Slika 10-2: Linearni preliv za platno.

Obratite pažnju na to da su pozicije preliva date u odnosu na platno, a ne u odnosu na oblike koje menjamo. To znači sledeće: ako pravougaonike pomerite na nov polo žaj na ekranu, njihovi prelivi će se promeniti. Uradite sami Radijalni preliv je sličan kao u jeziku CSS3. Linearni preliv u kodu iz listinga 10-5 pokušajte da zamenite radijalnim prelivom pomoću izraza kao što je createRadialGradient(0, 0, 30, 0, 0, 300). Eksperimentišite i sa položajem pravougaonika da biste videli kako se preliv primenjuje.

242 | Poglavlje 10 • Interfejs Canvas

Crtanje putanja Pomoću metoda koje smo do sada proučavali crta se direktno na platnu, ali ne mora uvek biti tako. Oblike i slike često moramo obraditi u pozadini, a zatim rezultat poslati u kontekst u kome se iscrtava. API Canvas ima nekoliko metoda za generisanje putanja. Putanja se može posmatrati kao linija neke skice koju pero treba da prati. Kada zada mo putanju, ona se šalje u kontekst i trajno iscrtava na platnu. Putanja može da sa drži različite vrste linija, kao što su prave linije, lukovi, pravougaonici i druge linije za crtanje složenih oblika. Postoje dve metode za započinjanje i zatvaranje putanje: beginPath() – Započinje opis novog oblika. closePath() – Zatvara putanju, generišući pravu liniju iz poslednje tačke do početne. Ona se može izostaviti kada vam treba otvorena putanja, ili kada se putanja crta pomoću metode fill().

Postoje i tri metode za crtanje putanje na platnu: stroke() – Iscrtava putanju kao konturu. fill() – Iscrtava putanju kao oblik punog tela. Kada se koristi ova metoda, putanja se ne mora zatvoriti metodom closePath(), jer se ona zatvara auto

matski pravom linijom od poslednje do prve tačke. clip() – Zadaje novu površinu za isecanje (engl. clipping area) u datom kon

tekstu. Kada se kontekst inicijalizuje, površina za isecanje je cela oblast koju zauzima platno. Metoda clip() menja površinu za isecanje u nov oblik i tako pravi masku. Sve što se nalazi izvan maske neće se nacrtati. Listing 10-6: Započinjanje i završavanje putanje. function initiate(){ var elem = document.getElementById(‘canvas’); var canvas = elem.getContext(‘2d’); canvas.beginPath(); // ovde dolazi putanja canvas.stroke(); } addEventListener(“load”, initiate);

Podsetite se osnova Komentari se mogu umetati u JavaScript kôd pomoću dve kose crte za komentare u jednom redu (// komentar), dok se za komentare u više redova koristi kombinacija kose crte i zvezdice (/* komentari */).

10.2 Crtanje na platnu | 243

Kôd iz listinga 10-6 započinje putanju za kontekst platna i iscrtava je pomoću meto de stroke(). Da bismo definisali putanju i nacrtali odgovarajući oblik, na raspolaga nju nam je nekoliko metoda: moveTo(x, y) – Pomera pero na zadatu poziciju. Omogućava da započnemo

ili nastavimo putanju iz različitih tačaka pomoćne mreže, čime se izbegava ju neprekidne linije. lineTo(x, y) – Generiše pravu liniju od tekuće pozicije pera do nove pozici je zadate atributima x i y. rect(x, y, širina, visina) – Generiše pravougaonik ali, za razliku od rani

je opisanih metoda, ovaj pravougaonik je deo putanje (ne crta se direktno na platnu). Atributi imaju istu namenu kao i u prethodnim metodama. arc(x, y, poluprečnik, početniUgao, završniUgao, smer) – Generiše lûk ili krug, čije se središte nalazi na koordinatama x i y, dok su poluprečnik, uglo vi i smer crtanja zadati ostalim atributima. Smer mora biti zadat kao true ili false (prva vrednost ukazuje na smer kretanja kazaljke na satu, a druga na

obrnuti smer). quadraticCurveTo(cpx, cpy, x, y) – Generiše kvadratnu Bezjeovu krivu koja počinje od tekuće pozicije pera, a završava na poziciji zadatoj pomoću atribu ta x i y. Atributi cpx i cpy zadaju kontrolnu tačku koja oblikuje krivu. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) – Metoda slična prethodnoj, s

tim što ima još dva atributa za generisanje kubne Bezjeove krive. Sada za oblikovanje krive u pomoćnoj mreži imamo dve kontrolne tačke deklarisane vrednostima cp1x, cp1y, cp2x i cp2y. Razmotrimo jednostavnu putanju da bismo razumeli ove metode. Listing 10-7: Crtanje putanje. function initiate(){ var elem = document.getElementById(‘canvas’); var canvas = elem.getContext(‘2d’); canvas.beginPath(); canvas.moveTo(100, 100); canvas.lineTo(200, 200); canvas.lineTo(100, 200); canvas.stroke(); } addEventListener(“load”, initiate);

244 | Poglavlje 10 • Interfejs Canvas

Preporučuje se da se početna pozicija pera zada odmah nakon započinjanja putanje. U skriptu iz listinga 10-7 prvo pomeramo pero na poziciju 100, 100, a zatim od te tač ke crtamo liniju do tačke 200, 200. Pero je sada u tački 200, 200, a naredna linija is crtava se od nje do tačke 100, 200. Na kraju se putanja iscrtava kao kontura pomo ću metode stroke().

Slika 10-3: Otvorena putanja.

Na slici 10-3 je otvoreni trougao nacrtan pomoću skripta iz listinga 10-7. Ovaj trougao se raznim metodama može zatvoriti, ili čak ispuniti, kao u narednim primerima: Listing 10-8: Dovršavanje trougla. function initiate(){ var elem = document.getElementById(‘canvas’); var canvas = elem.getContext(‘2d’); canvas.beginPath(); canvas.moveTo(100, 100); canvas.lineTo(200, 200); canvas.lineTo(100, 200); canvas.closePath(); canvas.stroke(); } addEventListener(“load”, initiate);

Metoda closePath() dodaje putanji pravu liniju od završne do početne tačke, i tako zatvara oblik.

10.2 Crtanje na platnu | 245

Slika 10-4: Zatvorena putanja.

Koristeći metodu stroke() na kraju naše putanje, nacrtali smo na platnu prazan tro ugao. Ako želimo popunjen trougao, upotrebićemo metodu fill(). Listing 10-9: Crtanje popunjenog trougla. function initiate(){ var elem = document.getElementById(‘canvas’); var canvas = elem.getContext(‘2d’); canvas.beginPath(); canvas.moveTo(100, 100); canvas.lineTo(200, 200); canvas.lineTo(100, 200); canvas.fill(); } addEventListener(“load”, initiate);

Na ekranu je sada popunjen trougao. Metoda fill() automatski zatvara putanju, pa ne moramo više da koristimo metodu closePath().

Slika 10-5: Zatvorena putanja i popunjen trougao.

246 | Poglavlje 10 • Interfejs Canvas

Jedna od ranije predstavljenih metoda za crtanje putanje na platnu bila je metoda clip(). Pomoću nje se ništa ne crta, nego se pravi maska u obliku putanje i tako se bira šta će se crtati, a šta ne (sve što se nalazi izvan maske neće biti nacrtano). Listing 10-10: Upotreba trougla kao maske. function initiate(){ var elem = document.getElementById(‘canvas’); var canvas = elem.getContext(‘2d’); canvas.beginPath(); canvas.moveTo(100, 100); canvas.lineTo(200, 200); canvas.lineTo(100, 200); canvas.clip(); canvas.beginPath(); for(var f = 0; f < 300; f = f + 10){ canvas.moveTo(0, f); canvas.lineTo(500, f); } canvas.stroke(); } addEventListener(“load”, initiate);

Da bismo pokazali kako radi metoda clip(), u listingu 10-10 pravimo petlju for za ge nerisanje horizontalnih linija na svakih 10 piksela. Linije se na platnu kreću sleva ude sno, ali se prikazuju samo delovi koji su obuhvaćeni maskom u obliku trougla.

Slika 10-6: Površina za isecanje.

Naučili smo da crtamo putanju, i vreme je da se upoznamo sa alternativnim načinima izrade oblika. Znamo kako se generišu prave linije i kvadratni oblici. Za kružne obli ke API nudi tri metode: arc(), quadraticCurveTo() i bezierCurveTo(). Prva je relativno jednostavna i može da generiše delimične ili pune krugove, kao u narednom primeru: 10.2 Crtanje na platnu | 247