sadržaj vježbi iz programiranja za internet

Univerzitet u Zenici Filozofski fakultet Odsjek: Matematika i informatika Akademska 2013/2014.

Sadržaj vježbi iz

Programiranja za internet

Sedmica br 1-4 (Web dizain

● HTML, CSS, Adobe Dreamweaver (20 vježbi/zadataka) 3 )

Sedmica br 5-7 (Web programiranje

● JavaScript (20 vježbi/zadataka) 25 )

Sedmica broj 8-12 (Internet i baze podataka

● XML i XSLT (26 vježbi/zadataka) 44 )

Sedmica broj 13-15 (Internet programiranje

● Java (18 vježbi/zadataka) 76 )

Skripta je skinuta sa stranice pf.unze.ba/nabokov/ Za uočene greške pisati na [email protected]

http://pf.unze.ba/nabokov/�

Programiranje za internet HTML, CSS, Adobe Dreamweaver

zimski semestar 2013/2014

Zadatak broj 1 (Struktura HTML stranice)

U ovoj vježbi treba napraviti web stranicu kao na slici.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Struktura html stranice</title> </head> <body> <h1> Rođendanski dar </h1> <hr/> Sigurna sam da je izuzetno, sigurna sam da baš to želim. <hr/> </body> </html>

3

Zadatak broj 2 (Atributi za horizontalnu liniju)

U ovoj vježbi treba napraviti web stranicu kao na slici. Širina prikazane linije je 500 px.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Atributi za horizontalnu liniju</title> </head> <body> <h1> Rođendanski dar </h1> <hr width="500px" align="left"/> Sigurna sam da je izuzetno, sigurna sam da baš to želim. <hr width="500px" align="left"/> </body> </html>

4

Zadatak broj 3 (Postavljanje slike na stranicu)

U ovoj vježbi treba napraviti web stranicu kao na slici. Širina prikazane slike je 500 px.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Postavljanje slike na stranicu</title> </head> <body> <h1> Rođendanski dar </h1> <hr width="500px" align="left" color="green"/> Sigurna sam da je izuzetno, sigurna sam da baš to želim. <br/><br/> <img width="500px" src="misc04.jpg"> <hr width="500px" align="left" color="red"/> </body> </html>

5

Zadatak broj 4 (Dodavanje linka na stranicu)

U ovoj vježbi treba napraviti web stranicu kao na slici. Širina prikazane slike je 500 px. Omogućiti i to da kada se klikne na riječ "baš to želim" (vidi sliku lijevo) da se otvori nova stranica koja će sadržavati neku drugu fotografiju (vidi sliku desno).

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Dodavanje linka na stranicu</title> </head> <body> <h1> Rođendanski dar </h1> <hr width="500px" align="left" color="green"/> Sigurna sam da je izuzetno, sigurna sam da <a href="misc18.jpg">baš to želim</a>. <br/><br/> <img width="500px" src="misc04.jpg"> <hr width="500px" align="left" color="red"/> </body> </html>

6

U ovoj vježbi treba napraviti tri web stranice, koje će se redom zvati vjezba2a.html, vjezba2b.html i vjezba2c.html. vjezba2a.html treba da sadrži dva linka “Slika 1” i “Slika 2”, kao što je prikazano lijevo.

Zadatak broj 5 (Linkovi)

Kada se klikne na “Slika 1” treba da se otvori nova stranica koja će sadržavati sliku, i link sa imenom “Vrati se nazad” (vidi sliku lijevo). Dimenzije i prikazana fotografija nisu bitni. Kada se klikne na link “Vrati se nazad” treba da se otvori prethodna stranica (u ovom slučaju to je vjezba2a.html). Slična priča važi i za link “Slika 2” s tim da se poslije klika treba otvori stranica sa drugačijom slikom nego što je bio slučaj za “Slika 1”.

Rješenje:

vjezba2a.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <a href="vjezba2b.html">Slika1</a><br /> <br /><br /> <a href="vjezba2c.html">Slika2</a><br /> <br /><br /> </body> </html>

vjezba2b.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <img src="misc14.jpg" alt="slika1" /> <a href="vjezba2a.html">Vrati se nazad</a><br /> <br /><br /> </body> </html>

7

Zadatak broj 6 (Postavljanje boje pozadine stranice uz pomoć Photoshopa)

U ovoj vježbi treba napraviti web stranicu kao na slici. Širina prikazane slike je 500 px. Omogućiti i to da kada se klikne na riječ "baš to želim" da se otvori nova stranica koja će sadržavati neku drugu fotografiju. Otvoriti Adobe Photoshop, u paleti sa bojama izabrati jednu boju, pa naštimati da ta ista boja bude pozadina stranice.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Postavljanje boje pozadine stranice uz pomoc Photoshopa</title> </head> <body bgcolor=#34e6ed> <h1> Rođendanski dar </h1> <hr width="500px" align="left" color="green"/> Sigurna sam da je izuzetno, sigurna sam da <a href="misc18.jpg">baš to želim</a>. <br/><br/> <img width="500px" src="misc04.jpg"> <hr width="500px" align="left" color="red"/> </body> </html>

8

Kada se klikne na link “Slika 1” treba da se otvori nova stranica koja će sadržavati neku sliku. Dimenzije i prikazana fotografija nisu bitni. Kada se klikne na prikazanu sliku treba da se vratite na prethodnu stranicu (u ovom slučaju to je vjezba2a.html). Slična priča važi i za link “Slika 2” s tim da se poslije klika treba otvori stranica sa drugačijom slikom nego što je bio slučaj za “Slika 1”.

Vježba broj 7 (linkovi) U ovoj vježbi treba napraviti tri web stranice, koje će se redom zvati vjezba2a.html, vjezba2b.html

i vjezba2c.html. vjezba2a.html treba da sadrži dva linka “Slika 1” i “Slika 2”, kao što je prikazano na slici ispod.

Rješenje:

vjezba2a.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba 2</title> </head> <body> <a href="vjezba2b.html">Slika1</a><br /> <br /><br /> <a href="vjezba2c.html">Slika2</a><br /> <br /><br /> </body> </html>

vjezba2b.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba 2</title> </head> <body> <a href="vjezba2a.html"><img src="misc14.jpg" alt="slika1" /></a><br /> <br /><br /> </body> </html>

9

U ovoj vježbi treba napraviti sljedeće: Vježba broj 8 (linkovi)

Kada se klikne na link “Slika 1” treba da se prikaže gornja

slika. Širina prikazanih fotografija je 400px. Kada se klikne na link "Slika 2" sliku treba da se prikaže donja slika. Naslov dokumenta u oba slučaja je Vježba broj 2. Linkovi u svakom trenutku treba da rade.

Rješenje:

zadatak2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba broj 2</title> </head> <body> <font size="+1"><a href="Zadatak 2.html">Slika 1</a> <a href="Zadatak 2a.html">Slika 2</a></font> <br /> <br /> <img src="misc09.jpg" alt="sl1" width="400"/> </body> </html>

zadatak2a.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba broj 2</title> </head> <body> <font size="+1"><a href="Zadatak 2.html">Slika 1</a> <a href="Zadatak 2a.html">Slika 2</a></font> <br /> <br /> <img src="misc11.jpg" alt="sl2" width="400" /> </body> </html>

10

Zadatak broj 9 (tabela)

U ovoj vježbi treba napraviti web stranicu kao na slici. Širina tabele je 800 piksela, širina prikazane slike je 400 piksela. Tabela ima pet polja, od kojih su dva prazna. Ostala tri polja sadrže redom: naslov “Čovjek”, rečenicu “Svaki čovjek smatra da posjeduje bar jednu veliki vrlinu” i fotografiju. Prvi red u rečenici je uvučen, i ispod rečenica ima nešto praznog prostora. Vježbu snimiti pod imenom vježba1a.html. Poslije toga napraviti istu verziju ove vježbe u kojoj se ivice tabele ne vide, i snimiti pod imenom vježba1b.html.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba 1a</title> </head> <body> <table width="750" border="1"> <tr> <td colspan="3" align="center"> <h1>Čovjek</h1> </td> </tr> <tr> <td colspan="2" valign="top"> Svaki čovjek smatra da posjeduje bar jednu veliki vrlinu. Svaki čovjek smatra da posjeduje bar jednu veliki vrlinu. Svaki čovjek smatra da posjeduje bar jednu veliki vrlinu.</td> <td rowspan="2"><img src="nature10.jpg" alt="slika1" width="400" height="250" /></td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </body> </html>

11


U ovoj vježbi treba napraviti web stranicu kao na slici. Širina tabele je 700 piksela, širina prikazane slike je 400 piksela

•

. Tabela ukupno imaa šest polja, od kojih je jedano prazno. Ostalih pet polja sadrže redom:

dva polja sadrže naslov “Kupovina” centrirano (veći font)

• ,

dva polja sadrže rečenicu “Ako hoćete da kupujete, gospođo Bandini, dođite ranije. Dragi Bože, pa treba i ja nekad da odem kući.”

• jedno polje sadrži

u oba slučaja rečenica je uvučena, u prvom polju tekst je centriran, u drugom polju tekst se nalazi uz vrh ivice i

fotografiju. Dokument treba da ima naslov Vježba broj 1 a snimiti ga pod imenom Zadatak 1.

Primjetite visinu praznog polja.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba broj 1</title> </head> <body> <table width="700" border="1"> <tr> <td colspan="3" align="center"><h1>Kupovina</h1></td> </tr> <tr> <td width="284"> Ako hoćete da kupujete, dospođo Bandini, dođite ranije. Dragi Bože, pa treba i ja nekad da odem kući.</td> <td width="400" colspan="2" rowspan="3" align="right"><img src="babes14.jpg" alt="slika1" width="400"/></td> </tr> <tr> <td><br /> <br /> <br /></td> </tr> <tr> <td valign="top"> Ako hoćete da kupujete, dospođo Bandini, dođite ranije. Dragi Bože, pa treba i ja nekad da odem kući.</td> </tr> <tr> <td colspan="3" align="center"><h1>Kupovina</h1></td> </tr> </table> </body> </html>

12


U ovoj vježbi treba napraviti web stranicu kao na slici. Širina tabele je 750 piksela, širina prikazane slike je 400 piksela. Tabela ima pet polja, od kojih su dva prazna. Ostala tri polja sadrže redom: naslov “Kolonija” poravnato skroz desno, tri puta rečenicu “Da u koloniji stvari ne stoje najbolje, nema nikakve sumnje” i fotografiju. Prvi red u rečenici je uvučen, i iznad rečenica ima nešto praznog prostora

. Vježbu snimiti pod imenom vježba1a.html. Poslije toga napraviti istu verziju ove vježbe u kojoj se ivice tabele ne vide, i snimiti pod imenom vježba1b.html.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba 1a</title> </head> <body> <table width="750" border="1"> <tr> <td colspan="4" align="right"> <h1>Kolonija</h1> </td> </tr> <tr> <td colspan="2" rowspan="2" valign="top"> <img src="nature10.jpg" alt="slika1" width="400" height="250" /></td> <td> </td> <td> </td> </tr> <tr> <td colspan="2" valign="bottom"> Da u koloniji stvari ne stoje najbolje, nema nikakve sumnje. Da u koloniji stvari ne stoje najbolje, nema nikakve sumnje. Da u koloniji stvari ne stoje najbolje, nema nikakve sumnje.</td> </tr> </table> </body> </html>

13

Pomoću <div> taga napraviti izgled stranice prakazan lijevo.

Vježba broj 12 (div tagovi)

Prvi kvadrat ima širinu 200px, od vrha stranice je udaljen 50px kao i od lijeve strane prozora. Drugi, najveći, kvadrat (skroz desno) je širok 400px, od vrha je udaljen kao i prvi kvadrat a od lijeve strane 400px. Treći kvadrat je širok 300px, i njegov lijevi gornji čošak treba da se nalazi tačno na sredini slike drugog kvadrata. Vježba mora biti urađena pomoću div tagova, nikako drugačije.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba 4</title> </head> <body> <div style="background:#99FFFF; width:400px; position:absolute; top:50px; left:400px"> <h1> Kolonija</h1> <img width="400" src="nature10.jpg"> </div> <div style="background:#99FFFF; width:200px; position:absolute; top:50px; left:50px"> <h1> Kolonija </h1> <img width="200" src="nature10.jpg"> </div> <div style="background:#99FFFF; width:300px; position:absolute; top:250px; left:600px"> <h1> Kolonija </h1> <img width="300" src="nature10.jpg"> </div> </body> </html>

14

Zadatak broj 13 (div tagovi)

Pomoću <div> taga napraviti izgled stranice prakazan lijevo. Prvi kvadrat ima širinu 200px, od vrha stranice je udaljen 10px a od lijeve strane je udaljen 50px. Drugi kvadrat je širok 300px, od vrha je udaljen 200px a od lijeve strane 50px. Treći, najveći, kvadrat je širok 400px, od vrha stranice je udaljen 10px, a od lijeve strane 400px.

Svaki kvadrat ima naslov, istu sliku i pozadina kvadrata je obojena. Slika prati ivice kvadrata. Vježba mora biti urađena pomoću div tagova, nikako drugačije.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba 4</title> </head> <body> <div style="background:#da8585; width:400px; position:absolute; top:10px; left:400px"> <h1> Čovjek </h1> <img width="400" src="nature10.jpg"> </div> <div style="background:#da8585; width:200px; position:absolute; top:10px; left:50px"> <h1> Čovjek </h1> <img width="200" src="nature10.jpg"> </div> <div style="background:#da8585; width:300px; position:absolute; top:250px; left:50px"> <h1> Čovjek </h1> <img width="300" src="nature10.jpg"> </div> </body> </html>

15

Prvi pravougaonik ima širinu 500px, i sadrži rijeći u 5 veličina. Primjetite da je slovo P u zadnjoj rijeći "Pocijepati" visoko skoro kao prva tri reda iznad.

Vježba broj 14 (div tagovi) Pomoću <div> taga napraviti izgled stranice prakazan ispod.

Drugi, pravougaonik (pravougaonik u sredini) je širok 600px, od vrha je udaljen 200px a od lijeve strane 350px. Za razliku od prvog pravougaonika ima crnu debelu ivicu i sve riječi su na udaljenosti 10px od ivice

Treći (zadnji) pravougaonik je širok 700px, i on je od lijeve strane stranice udaljen 150px. Nalazi se ispod drugog pravougaonika, i riječi su mu udaljene od ivica pravougaonika 30px.

Vježba mora biti urađena pomoću div tagova, nikako drugačije.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba broj 4</title> </head> <body> <div style="width:500px; background:#99CCCC"> <font size="+1">Prihvatiti poklon</font><br /> <font size="+2">Prepoznati rukopis</font><br /> <font size="+3">Kako shvatiti</font><br /> <font style="font-size:3em">Prepisati lijevom rukom</font><br /> <font style="font-size:4em">Pocijepati</font> </div> <div style="width:700px; background:#CCCCFF; position:absolute; top:400px; left:150px; border: thick solid #000000; padding:30px"> <font size="+1">Prihvatiti poklon</font><br /> <font size="+2">Prepoznati rukopis</font><br /> <font size="+3">Kako shvatiti</font><br /> <font style="font-size:3em">Prepisati lijevom rukom</font><br /> <font style="font-size:4em">Pocijepati</font> </div> <div style="width:600px; background:#99CCFF; position:absolute; top:200px; left:350px; border: thick solid #000000; padding:10px"> <font size="+1">Prihvatiti poklon</font><br /> <font size="+2">Prepoznati rukopis</font><br /> <font size="+3">Kako shvatiti</font><br /> <font style="font-size:3em">Prepisati lijevom rukom</font><br /> <font style="font-size:4em">Pocijepati</font> </div> </body> </html>

16

Vježba broj 15 (meni)

Napraviti meni kao na slici desno. Uputa: Font je podebljan i tamnoplave boje, veličine 1.4em iz familije "Courier New". Pading je 7px a margine lijevo 15px. Kad se mišem dođe iznad linka, font treba da postane crven, i da se oko njega pojavi zelenkast kvadrat (vidi sliku desno). Primjetite da je link u jednoj liniji.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba 3</title> <style> ul { font-size:1.4em; font-family: "Courier New", Courier, monospace; } li { display:inline; } a { font-weight:bold; padding:7px; display:block; float:left; margin-left:15px; color:#07005E; text-decoration:none; } a:hover { background:#00FF00; color:#FF0000; } </style> </head> <body> <ul> <li><a href=" ">Ponuda</a></li> <li><a href=" ">Izbor</a></li> <li><a href=" ">Slobodna</a></li> <li><a href=" ">Kolači</a></li> </ul> </body> </html>

17

Zadatak broj 16 (meni)

Napraviti meni kao na slici ispod. Uputa: Font je crne boje, veličine 1.3em iz familije Arial. Pading je 5px a margine lijevo 15px. Kad se mišem dođe iznad linka, font treba da postane bijel, i da se pojavi plavkasti kvadrat (vidi sliku desno). Primjetite da je link u jednoj liniji.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba 3</title> <style> ul { font-size:1.3em; font-family: arial; } li { display:inline; } a { padding:5px; display:block; float:left; margin-left:15px; color:#000000; text-decoration:none; } a:hover { background:#3d11e0; color:#FFFFFF; } </style> </head> <body> <ul> <li><a href=" ">Ponuda</a></li> <li><a href=" ">Izbor</a></li> <li><a href=" ">Slobodna</a></li> <li><a href=" ">Kolači</a></li> </ul> </body> </html>

18

Napraviti meni kao na slici desno. Uputa: Font je podebljan i bijele boje, veličine 1.5em iz familije "Geneva, Arial, Helvetica, sans-serif". Boja pozadine iza fonta je #4F0000, a udaljenost teksta od ivica je 23px 20px 23px 20px. Kad se mišem dođe iznad linka, polje treba da se promjeni kao što je prikazano na slici (primjetite da se mijenja visina polja) i pozadina treba da postane #6A1906. Link je u jednoj liniji. Primjetite da su i četri data polja na udaljenosti od 2px jedan od drugog.

Vježba broj 17 (meni)

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Meni</title> <style> a { background-color:#4F0000; color: #FFFFFF; display: block; font-weight: bold; text-decoration: none; margin: 0px 2px 0px 0px; padding: 23px 20px 23px 20px; } a:hover { background: #6A1906; color: #FFFFFF; display: block; text-decoration: none; margin: 0px 2px 0px 0px; padding: 43px 20px 43px 20px; } ul { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:1.5em; margin: 0px; padding: 0px; list-style: none; } li { float: left; } </style> </head> <body> <ul> <li><a href="">Plećka</a></li> <li><a href="">Ledara</a></li> <li><a href="">Efi Hildegard</a></li> <li><a href="">Tijelo</a></li> </ul> </body> </html>

19

U ovoj vježbi treba napraviti web stranicu sa dva menija. Prvi meni, koji je prikazan u jednoj liniji, je isti kao u vježbi 15.

Vježba broj 18 (dva menija)

Drugi meni, pored načina prikaza, se razlikuje od prvog u sljedećem: Font je iz familije "Geneva, Arial, Helvetica, sans-serif" veličine 1.5em. Kad se mišem dođe iznad linka, pojavi se plavkast kvadrat. Obratiti pažnju da položaj menija bude isti kao na prikazanoj slici.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba 5</title> <style> #prvi ul{ font-size:1.4em; font-family: "Courier New", Courier, monospace;} #prvi li{ display:inline;} #prvi a { font-weight:bold; padding:7px; display:block; float:left; margin-left:15px; color:#07005E; text-decoration:none;} #prvi a:hover { background:#00FF00; color:#FF0000; } #drugi ul { font-size:1.5em; font-family: Geneva, Arial, Helvetica, sans-serif; position:absolute;} #drugi ul li { display:block; } #drugi ul li a { padding:5px; display:block; float:left; margin-left:15px; color:#000000; text-decoration:none;} #drugi ul li a:hover { background:#336666; color:#FFFFFF;} </style> </head> <body> <div id="drugi" style="position:absolute; left:500px"> <ul> <li><a href=" " >Ponuda</a></li> <li><a href=" ">Izbor</a></li> <li><a href=" ">Slobodna</a></li> <li><a href=" ">Kolači</a></li> </ul> </div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div id="prvi"> <ul> <li><a href=" ">Ponuda</a></li> <li><a href=" ">Izbor</a></li> <li><a href=" ">Slobodna</a></li> <li><a href=" ">Kolači</a></li> </ul> </div> </body> </html>

20

Zadatak broj 19 (dva menija)


Drugi meni, pored načina prikaza, se razlikuje od prvog u sljedećem: Font je iz familije "Courier New" veličine 1.5em. Kad se mišem dođe iznad linka, pojavi se zelenkast kvadrat.

Obratiti pažnju da položaj menija bude isti kao na prikazanoj slici.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vjezba 5</title> <style> #prvi ul { font-size:1.3em; font-family: arial; } #prvi ul li { display:inline; } #prvi ul li a { padding:5px; display:block; float:left; margin-left:15px; color:#000000; text-decoration:none; } #prvi ul li a:hover { background:#3d11e0; color:#FFFFFF; } #drugi ul { font-size:1.5em; font-family:"Courier New", Courier, monospace; position:absolute; } #drugi ul li { display:block; }

21

#drugi ul li a { padding:5px; display:block; float:left; margin-left:15px; color:#000000; text-decoration:none; } #drugi ul li a:hover { background:#58f15b; color:#FFFFFF; } </style> </head> <body> <div id="prvi"> <ul> <li><a href=" ">Ponuda</a></li> <li><a href=" ">Izbor</a></li> <li><a href=" ">Slobodna</a></li> <li><a href=" ">Kolači</a></li> </ul> </div> <br /><br /><br /><br /> <div id="drugi" style="position:absolute; left:350px"> <ul> <li><a href=" " >Ponuda</a></li> <li><a href=" ">Izbor</a></li> <li><a href=" ">Slobodna</a></li> <li><a href=" ">Kolači</a></li> </ul> </div> </body> </html>

22


Vježba broj 20 (dva menija)

Drugi meni, pored načina prikaza, se razlikuje od prvog u sljedećem: Pozadina iza fonta je #07456D. Kad se mišem dođe iznad linka, pozadina se promjeni u boju #6A1906, a iznad polja se pojavi bijela linija debljine 2px. Obratiti pažnju da položaj menija bude isti kao na prikazanoj slici i dodajte pravougaonik između dva menija u kojem stoji riječ Sadržaj.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dva meni</title> <style> #sa_strane ul { width:300px; font-family: Arial, Tahoma, Verdana; font-size:1.5em; margin: 0px; padding: 0px; list-style: none; } #sa_strane ul li { float: none; } #sa_strane ul li a { background-color:#07456D; color: #FFFFFF; display: block; font-weight: bold; text-decoration: none; margin: 0px 2px 0px 0px; padding: 23px 20px 23px 20px; } #sa_strane ul li a:hover { background: #6A1906; color: #FFFFFF; display: block; text-decoration: none; border-top: 2px solid #FFFFFF; }

23

#kutija ul { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:1.5em; margin: 0px; padding: 0px; list-style: none; } #kutija ul li { float: left; } #kutija ul li a { background-color:#4F0000; color: #FFFFFF; display: block; font-weight: bold; text-decoration: none; margin: 0px 2px 0px 0px; padding: 23px 20px 23px 20px; } #kutija ul li a:hover { background: #6A1906; color: #FFFFFF; display: block; text-decoration: none; margin: 0px 2px 0px 0px; padding: 43px 20px 43px 20px; } </style> </head> <body> <div id="sa_strane" style="position:absolute; top:100px; left:550px"> <ul> <li><a href="">Plećka</a></li> <li><a href="">Ledara</a></li> <li><a href="">Efi Hildegard</a></li> <li><a href="">Tijelo</a></li> </ul> </div> <div id="kutija"> <ul> <li><a href="">Plećka</a></li> <li><a href="">Ledara</a></li> <li><a href="">Efi Hildegard</a></li> <li><a href="">Tijelo</a></li> </ul> </div> <div style="position:absolute; top:112px; width:500px; height:300px; border:thick solid #000000; left: 18px;"> Sadržaj</div> </body> </html>

24

Programiranje za internet zimski semestar 2013/2014

JavaScript kroz primjere (skripta je u fazi izradi)

Sve date primjere iz ove skripte možete pogledati i skinuti u obliku web stranice sa adrese

pf.unze.ba\nabokov

25

Zadatak 1

Uz pomoć JavaScript-a ispisati rečenicu: Naš prvi program u JavaScriptu. Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Prva vježba</title> </head> <body> <script type="text/javascript">  </script> </body> </html>

Zadatak 2

Uz pomoć JavaScript-a definisati varijablu x, pridružiti joj neki broj pa onda ispisati rečenicu “x puta 5 je ___”, gdje će se na mjesto crtice nalaziti izračunata vrijednost.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Druga vježba</title> </head> <body> <script type="text/javascript">  </script> </body> </html>

26

Zadatak 3

Uz pomoć JavaScript-a ispisati sljedeću rečenicu: Napoleon je rekao: "Svijet pati mnogo. Ne zbog nasilja loših ljudi. Nego zbog šutnje dobrih

ljudi." Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Treća vježba</title> </head> <body> <script type="text/javascript">  </script> </body> </html>

Zadatak 4

Napraviti JavaScript kod da radi sljedeće: čim se otvori stranica da od korisnika traži da unese svoje ime, pa da poslije toga unese broj godina. Poslije toga u prozoru treba ispisati velikim slovima ime korisnika i koliko ima godina.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Četvrta vježba</title> </head> <body> <font size="+5"> <script type="text/javascript">  </script> </font> </body> </html>

27

Zadatak 5

Na stranicu ubaciti dugme sa natpismo „Klikni me ako si sretan“. Napraviti JavaScript kod da radi sljedeće: Poslije napravljenog klika u posebnom prozoru ispisati „Ne znam šta ću od sreće silne“. Rješenje: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Peta vježba</title> </head> <body> <script type="text/javascript">  </script> <form> <input type="button" value="Klikni me ako si sretan" onclick="dugmeJedan()" /> </form> </body> </html>

Zadatak 6

Na web stranicu postaviti dva dugmeta, redom, sa natpisima „Klikni me ako si sretan“ i „Klikni me ako si nesretan“. Napraviti JavaScript kod da nakon napravljenog klika na prvo dugme, na prozor ispod i iznad napravljenih dugmadi ispiše rečenicu: „Dešavat će se da ljudi očekuju od vas da baš vi, da baš vi, donesete kafu!“. Ako se napravi klik na drugo dugme na isto mjesto ispisati rečenicu: „Vjerovatno je rano ledeno jutro!“ Rješenje: <body> <p id="demo" style="font-size:1.5em"> </p> <script type="text/javascript">  </script> <form> <input type="button" value="Klikni me ako si sretan" onclick="MojaFunkcija()" /> <input type="button" value="Klikni me ako si nesretan" onclick="MojaFunkcija2()" /> </form> <p id="demo2" style="font-size:1.5em"> </p> </body> </html>

28

Zadatak 7

Na stranici postaviti dugme sa natpisom „Klikni me ako si sretan“. Napraviti JavaScript kod da radi sljedeće: Nakon napravljenog klika izbaciti prozor sa pitanjem „Da li ste stariji od 20 godina“ gdje se mogu kliknuti samo na dugmad OK i Cancel.

Nakon napravljenog klika na OK, iznad i ispod ubačenog dugmeta ispisati rečenicu „Dešavat će

se da ljudi očekuju od vas da baš vi, da baš vi, donesete kafu!“. Ako se klik napravi na Cancel, na ista mjesta ispisati rečenicu „Kako niste više u srodstvu sa kapetanom broda, bez položaja ste.“

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sedma vježba</title> </head> <body> <p id="demo" style="font-size:1.5em"> </p> <script type="text/javascript">  </script> <form> <input type="button" value="Klikni me ako si sretan" onclick="MojaFunkcija()" /> </form> <p id="demo2" style="font-size:1.5em"> </p> </body> </html>

29

Zadatak 8

Na web stranicu postaviti dva polja u koja se mogu ukucati riječi

i ubaciti dugme sa natpisom Spoji riječi. Napraviti JavaScript kod da radi sljedeće: Nakon napravljenog klika na dugme dvije riječi upisane u polja ispisati ispod dugmeta jednu ispod druge sa razmakom između njih. Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vježba broj 8</title> </head> <body> <form id="polja"> Prva riječ:<input type="text" value="Linearna"/><br /> Druga riječ:<input type="text" value="algebra" /><br /> <input type="button" id="kreni" value="Spoji rijeći"/> </form> <p id="demo" style="font-size:1.5em"> </p> <script type="text/javascript">  </script> </body> </html>

30

Zadatak 9

Na web stranicu postaviti pet tekstualnih polja u koja se mogu upisati brojevi a ispod njih postaviti dugme sa natpisom „Sortiraj brojeve“:

Napraviti JavaSkript kod takav da se nakon klika na dugme sortirani brojevi ispišu ispod dugmeta. Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Deveta vježba</title> </head> <body>  <!-- KOMENTAR: Bubble Sort Pseudocode ************************** The Algorithm Pseudocode: procedure bubblesort; PREPRAVI KOD (ovaj dio kometnara ispod provjeri) var j, t: integer; begin repeat t:=a[l]; for j:=2 to N do if a[j-l]>a[j] then begin t:=a[j-1]; a[j-1]:=a[j]; a[j]:=t; end until t=a[l]; end; Opis bubble sort algoritma riječima: 1. Poredi susjedne elemente. Ako je prvi veći od drugog, zamjeni ih. 2. Ponavljaj ovo za svaki par susjednih elemenata, počev od prva dva i završavajući na zadnja dva. U ovom momentu zadnje element bi trebao biti najveći.

31

3. Ponavljaj drugi korak za sve elemente osim zadnjeg. 4. Nastavljaj proceduru svaki put za jedan manje, sve dok ne bude više parova koje treba porediti. --> <form id="polja"> Prvi broj:<input type="number" name="polje1" value="4" /><br /> Drugi broj:<input type="number" name="polje2" value="6" /><br /> Treći broj:<input type="number" name="polje3" value="9" /><br /> Četvrti broj:<input type="number" name="polje4" value="5" /><br /> Peti broj:<input type="number" name="polje5" value="1" /><br /> <input type="button" id="kreni" value="Sortiraj brojeve"/> </form> <p id="demo" style="font-size:1.5em"> </p> <script type="text/javascript">  </script> </body> </html>

32

Zadatak 10

Na web stranicu postaviti dva dugmeta

Napraviti JavaSkript kod takav da se nakon klika na prvo dugme na njemu promjeni riječ, a kada se miš dovuče iznad drugog dugmeta da se natpis tog drugog dugmeta promjeni na neku novu vrijednost.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Deseta vježba</title> </head> <body> <input type="button" id="dugme2" value="Sve ove godine" /> <input type="button" id="dugme3" value="Samo dovuci miš, ne klikati" /> <script type="text/javascript">  </script> </body> </html>

33

Zadatak 11

Na web stranicu ubaciti jedno polje za upis teksta i jedno dugme pored njega

Napraviti JavaSkript kod takav da se nakon svakog napravljenog klika riječ unutar tekstualnog polja promjeni.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jedanaesta vježba</title> </head> <body> <input type="text" id="a" value="11"/> <button id="kreni">Kreni klikati dugme</button> <script type="text/javascript">  </script> </body> </html>

34

Zadatak 12

Na web stranicu postaviti 10 praznih tekstualnih polja i postaviti dugme sa natpisom „Kreni“ ispod tih polja.

Napraviti JavaSkript kod takav da se nakon napravljenog klika na dano dugme sva ubačena polja popune.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dvanaesti zadatak</title> </head> <body> <div id="moje_Vrijednosti"> <input type="text" id="a" value="" /> <input type="text" id="b" value="" /> <input type="text" id="c" value="" /> <input type="text" id="d" value="" /> <input type="text" id="e" value="" /> <input type="text" id="f" value="" /> <input type="text" id="g" value="" /> <input type="text" id="h" value="" /> <input type="text" id="i" value="" /> <input type="text" id="j" value="" /> </div> <button id="kreni">Kreni</button> <script type="text/javascript"> function ubaciBrojeve() { var brojevi = "0123456789"; var ulaz = document.getElementById("moje_Vrijednosti").getElementsByTagName("input"); for(var i=0;i<ulaz.length;i++) { var val = brojevi.charAt(i) ulaz[i].value = val=="0"?"":val; } } document.getElementById("kreni").onclick = ubaciBrojeve; </script> </body> </html>

35

Zadatak 13

Na web stranicu postaviti dva tekstualna polja i dugme ispod njih.

Napraviti JavaSkript kod takav da kada se napravi klik na dano dugme da se u dva tekstualna polja pojavi novi sadržaj .

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Trinaesta vježba</title> </head> <body> <input type="text" id="a" value="11"/> <input type="text" id="b" value="55"/> <script type="text/javascript">  </script> <form> <input type="button" value="Klikni me ako si sretan" onclick="dugme()" /> </form> </body> </html>

36

Zadatak 14

Na web stranicu postaviti šest tekstualna polja i dugme ispod njih sa natpisom „Klikni me ako si sretan“.

Napraviti JavaScript kod koji će nakon napravljenog klika popuniti dana polja a ime dugmeta preimenovati u neko novo ime.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Četrnaesta vježba</title> </head> <body> <input type="text" id="a"/> <input type="text" id="b"/> <input type="text" id="c"/> <input type="text" id="d"/> <input type="text" id="e"/> <input type="text" id="f"/> <script type="text/javascript">  </script> <form> <input type="button" value="Klikni me ako si sretan" onclick="dugmeJedan()" /> </form> </body> </html>

37

Zadatak 15

Na web stranicu postaviti jedno tekstualna polja i dugme ispod njega sa natpisom „Klikni me ako si sretan“.

Napraviti JavaScript kod koji će nakon napravljenog klika na u polje ispisati broj 987654321.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Petnaesta vježba</title> </head> <body> <input type="text" id="a" value="11"/> <script type="text/javascript">  </script> <form> <input type="button" value="Klikni me ako si sretan" onclick="dugme()" /> </form> </body> </html>

38

Zadatak 16

Na web stranicu postaviti jedno dugme sa natpisom „Klikni me ako si sretan“.

Napraviti JavaScript kod koji će na svaki klik mijenjati ime dugmeta u neko novo ime.

Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Šesnaesta vježba</title> </head> <body> <script type="text/javascript">  </script> <form> <input type="button" id="dug" value="Klikni me ako si sretan" onclick="dugme()" /> </form> </body> </html>

39

Zadatak 17

Na web stranicu postaviti deset tekstualnih polja i jedno dugme ispod njih.

Napraviti JavaScript kod koji će na napravljeni klik popuniti svih deset tekstualnih polja.

Primjetimo da je sličan zadatak već bio, a ovdje dajemo rješenje na drugačiji način. Rješenje: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sedamnaesta vježba</title> </head> <body> <input type="text" id="a" value="" /> <input type="text" id="b" value="" /> <input type="text" id="c" value="" /> <input type="text" id="d" value="" /> <input type="text" id="e" value="" /> <input type="text" id="f" value="" /> <input type="text" id="g" value="" /> <input type="text" id="h" value="" /> <input type="text" id="i" value="" /> <input type="text" id="j" value="" /> <script type="text/javascript">  </script> <form> <input type="button" value="Klikni me ako si sretan" onclick="dugmeJedan()" /> </form> </body> </html>

40

Zadatak 18

Napraviti dvije web stranice koje će imati naslov i dugme ispod naslova.

Napraviti JavaScript kod koji će na klik na dugme iz prve stranice otvoriti drugu stranicu u istom prozoru, a na napravljeni klik na dugme na drugoj stranici, vratiće se na prvu stranicu. Rješenje: 18_s1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Osamnaesta vježba</title> </head> <body> <h1>Prva stranica</h1> <button onclick="window.location.href='12_s2.html'">Otvori novu stranicu</button> </body> </html> 18_s2.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Osamnaesta vježba</title> </head> <body> <h1>Druga stranica</h1> <button onclick="history.back(-1)">Vrati se nazad</button> </body> </html>

41

Zadatak 19 (JoxView)

Ovaj primjer će prezentirati na koji način možemo koristiti gotov JavaScript paket. Sa web stranice http://yoxigen.com/yoxview/Download.aspx skinuti posljednju verziju JoxView paketa i „otpakovati“ je u svoj folder (u trenutku pisanja ovog teksta verzija je jquery.yoxview-2.21.zip). Napraviti dvije male slike unutar <div> taga <div id="yoxview" class="thumbnails"> <a href="01.jpg"><img src="01m.jpg" alt="prva" title="Prva slika" /></a> <a href="02.jpg"><img src="02m.jpg" alt="druga" title="Druga slika" /></a> </div>

U <head> tag ubaciti sljedeću naredbu <script type="text/javascript" src="yoxview/yoxview-init.js"></script>

Na kraju ispod ovoga ubaciti npr. sljedeći kod <script type="text/javascript"> $(document).ready(function(){ $("#yoxview").yoxview({ backgroundColor: "#968f9f", autoPlay: true }); }); </script>

Puno više o ovom paketu možete pronaći na stranici http://yoxigen.com/yoxview/Default.aspx

42

Zadatak 20 (FancyBox)

Ovaj primjer će prezentirati na koji način možemo koristiti gotov JavaScript paket. Sa web stranice http://fancyapps.com/fancybox/ skinuti posljednju verziju JoxView paketa i „otpakovati“ je u svoj folder (u trenutku pisanja ovog teksta verzija je fancyapps-fancyBox-v2.1.5-0-ge2248f4.zip).

Unutar <head> taga učitati sljedeće fajlove: jquery-1.10.1.min.js, jquery.mousewheel-3.0.6.pack.js, jquery.fancybox.css, jquery.fancybox.pack.js  <script type="text/javascript" src="fancyapps-fancyBox-18d1712/lib/jquery-1.10.1.min.js"></script>  <script type="text/javascript" src="fancyapps-fancyBox-18d1712/lib/jquery.mousewheel-3.0.6.pack.js"></script>  <link rel="stylesheet" href="fancyapps-fancyBox-18d1712/source/jquery.fancybox.css" type="text/css" media="screen" /> <script type="text/javascript" src="fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js"></script>

Napraviti link elemente čija će href vrijednost biti put elemenata koji želite da otvorite korištenjem fancyBox-a. <a class="fancybox" rel="group" href="01.jpg"><img src="01m.jpg" alt="Prva slika" /></a> <a class="fancybox" rel="group" href="02.jpg"><img src="02m.jpg" alt="Druga slika" /></a>

Učitati fancyBox prilikom učitavanja dokumenta tj u <head> tag ubaciti sljedeći kod <script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); </script> Puno više o ovom paketu možete pronaći na stranici http://fancyapps.com/fancybox/

43

1

Pr

ogra

mir

anje

za

inte

rnet

zi

msk

i sem

esta

r 20

13/2

014

X

ML

i XSL

T

(26

deta

ljno

urađ

enih

zad

atak

a)

44

2 U

prv

a tr

i zad

atka

dat

je is

ti do

kum

ent

• Dob

ijeni

dok

umen

t: vi

zit_

kart

e.xm

l <?xml version="1.0" encoding="utf-8"?>

<vizit_karte>

<vizit_karta>

<ime_i_prezime>Dzon Fante</ime_i_prezime>

<telefon tip="posao">+387 62 345 543</telefon>

<telefon tip="kuca" vrsta="glavni">+387 32 345 543</telefon>

<telefon tip="faks">+387 70 345 543</telefon>

<e-mail>[email protected]</e-mail>

</vizit_karta>

<vizit_karta>

<ime_i_prezime>Robert Grevs</ime_i_prezime>

<telefon tip="posao" vrsta="glavni">+387 64 221 324</telefon>

<telefon tip="kuca">+387 32 221 324</telefon>



</vizit_karta>

<vizit_karta>

<ime_i_prezime>Reinhart Diestel</ime_i_prezime>





</vizit_karta>

<vizit_karta>

<ime_i_prezime>Julia Kristeva</ime_i_prezime>





</vizit_karta>

</vizit_karte>

Čije

je st

ablo

izgl

eda:

45

3

Za

data

k br

oj 1

• D

obije

ni d

okum

ent:

vizi

t_ka

rte.

xml

<?xml version="1.0" encoding="utf-8"?>

<vizit_karte>

<vizit_karta>



<telefon tip="kuca" vrsta="glavni">+387 32 345

543</telefon>



</vizit_karta>

...

• Tra

ženi

izgl

ed u

web

bro

wse

ru (p

rikaz

viz

it ka

rti)

• Pre

prav

ljeni

XM

L do

kum

ent


<?xml-stylesheet type="text/css" href="prikaz.css"?>

<vizit_karte>...

• Jed

no o

d m

oguć

ih rj

ešen

ja: p

rikaz.css

@charset "utf-8";

/* CSS Document */

vizit_karta

{

display:block;

width:300px;

border:thick solid #000066;

float:inherit;

background:#CCFF33;

padding:10px;

margin: 25px;

} ime_i_prezime

{

font-size:1.3em;

font-family:Arial, Helvetica, sans-serif;

font-size:2em;

text-align:center;

} telefon

{

display:block;

} e-mail

{

display:none;

} telefon:before

{

content:attr(tip) ": ";

} vizit_karta:hover

{

display:block;

width:300px;

border:thick solid #000066;

float:inherit;

background:#999900;

padding:10px;

margin: 25px;

}

46

4

Za

data

k br

oj 2

• D

obije

ni d

okum

ent:

vizi

t_ka

rte.

xml


<vizit_karte>

<vizit_karta>




543</telefon>



</vizit_karta>

...

• Tra

ženi

izgl

ed u

web

bro

wse

ru (k

ućni

bro

jevi

tele

fona

i fa

ks)

• Pre

prav

ljeni

XM

L do

kum

ent


<?xml-stylesheet type="text/xsl" href="kucniBrojTelefona.xsl"?>

<vizit_karte>...

• Jed

no o

d m

oguć

ih rj

ešen

ja: k

ucni

Bro

jTel

efon

a.xs

l

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE xsl:stylesheet [

<!ENTITY nbsp " ">

<!ENTITY copy "©">

... (ovaj dio je isti kao u sljedećem zadatku)

<!ENTITY pound "£">

<!ENTITY yen "¥">

<!ENTITY euro "€">

]>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" encoding="utf-8" doctype-public="-

//W3C//DTD XHTML 1.0 Transitional//EN" doctype-

system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>

<xsl:template match="/">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-

8"/>

<title>Kucni broj telefona</title>

</head>

<body>

<table border="1" cellpadding="15">

<tr>

<td style="font-size:2em">Ime i prezime</td><td style="font-

size:2em; padding:15px">Kućni broj telefona i faks</td>

</tr>

<xsl:for-each select="vizit_karte/vizit_karta">

<tr>

<td style="font-size:1.5em"><xsl:value-of

select="ime_i_prezime"/></td>

<td>

<xsl:for-each select="telefon">

<xsl:if test="(.[contains(@tip,'kuca')])">

<xsl:value-of select="."/><br />

</xsl:if>

</xsl:for-each>

<xsl:for-each select="telefon">

<xsl:if test="(.[contains(@tip,'faks')])">

Faks: <xsl:value-of select="."/><br /><br />

</xsl:if>

</xsl:for-each>

</td>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

47

5

Za

data

k br

oj 3

• D

obije

ni d

okum

ent:

vizi

t_ka

rte.

xml


<vizit_karte>

<vizit_karta>




543</telefon>



</vizit_karta>

...

• Tra

ženi

izgl

ed u

web

bro

wse

ru (s

vi b

roje

vi te

lefo

na iz

dok

umen

ta)

• P

repr

avlje

ni X

ML

doku

men

t


<?xml-stylesheet type="text/xsl" href="sviBrojevi.xsl"?>

<vizit_karte>

...

• Jed

no o

d m

oguć

ih rj

ešen

ja: s

viB

roje

vi.x

sl


<!ENTITY nbsp " ">

<!ENTITY copy "©">

<!ENTITY reg "®">

<!ENTITY trade "™">

<!ENTITY mdash "—">

<!ENTITY ldquo "“">

<!ENTITY rdquo "”">


<!ENTITY yen "¥">


]>








<head>


8"/>

<title>Vjezba broj 3 Svi brojevi telefona</title>

</head>

<body>

<h1>Svi brojevi telefona koji se pojavljuju u dokumentu su</h1>

<font size="+2">

<xsl:for-each select="vizit_karte/vizit_karta/telefon">


</xsl:for-each>

</font>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

48

6 U

čet

vrto

m, p

etom

i še

stom

zad

atku

dat

je is

ti do

kum

ent

Dob

ijeni

dok

umen

t: cd

cata

log_

v3.x

ml

<?xml version="1.0" encoding="ISO-8859-1"?>

<katalog>

<cd>

<album>Live And Feelin' Good (The Blues Collection

Vol.68)</album>

<izvodjac>Piano Red</izvodjac>

<zemlja>USA</zemlja>

<izdavac>?</izdavac>

<cijena>4.99</cijena>

<godina>2007</godina>

</cd>

<cd>

<album>The Definitive Collection, Volume II: The Best

Of Brian (Disc 1)</album>

<izvodjac>AC/DC</izvodjac>





</cd>

…

</katalog>

Čije

je st

ablo

izgl

eda:

49

7

Pr

imje

r 4

• Dob

ijeni

dok

umen

t: cd

cata

log_

v3.x

ml


<katalog>

<cd>


Vol.68)</album>






</cd>

...

</katalog>

• Tra

ženi

izgl

ed u

web

bro

wse

ru

• P

repr

avlje

ni X

ML

doku

men

t


<?xml-stylesheet href="stil1.xsl" type="text/xsl"?>

…

• Rje

šenj

e: st

il1.x

sl


<!ENTITY nbsp " ">

<!ENTITY copy "©">

<!ENTITY reg "®">






<!ENTITY yen "¥">


]>








<head>


8"/>

<title>Vježba broj 1 - upotreba templata i CSS</title>

</head>

<body>

<xsl:apply-templates select="katalog"/>

</body>

</html>

</xsl:template>

<xsl:template match="katalog">

<xsl:apply-templates select="cd"/><br />

</xsl:template>

<xsl:template match="cd">

<div style="background:#99FFCC; width:400px; border:thick solid

#000000; padding:10px; margin:20px; text-align:center">

<font style="font-size:2em; color:#FF0000"><xsl:value-of

select="izvodjac"/></font><br />

<xsl:value-of select="album"/><br />

Godina izdanja: <xsl:value-of select="godina"/><br />

<font style="font-size:1.5em"> Cijena: <xsl:value-of

select="cijena"/> KM </font><br />

</div>

</xsl:template>

</xsl:stylesheet>

50

8

Pr

imje

r 5

• Dob

ijeni

dok

umen

t: cd

cata

log_

v3.x

ml


<katalog>

<cd>


Vol.68)</album>






</cd>

...

</katalog>

• Tra

ženi

izgl

ed u

web

bro

wse

ru

• P

repr

avlje

ni X

ML

doku

men

t



<katalog>

<cd>

…

• Rje

šenj

e: st

il2.x

sl


<!ENTITY nbsp " ">

<!ENTITY copy "©">

…

<!ENTITY yen "¥">


]>








<head>


8"/>

<title>Tri kolone ili tri div-a???</title>

</head>

<body>

<div style="width:250px; background:#99FFFF; padding:10px">

<font size="+3">Album, Zemlja i Godina izdanja</font><br /><br />

<xsl:apply-templates select="katalog/cd"/>

</div>

<div style="width:250px; background:#99CC66; padding:10px;

position:absolute; top:10px; left:310px">



</div>

<div style="width:250px; background:#CCCCFF; padding:10px;




</div>

</body>

</html>

</xsl:template>

<xsl:template match="cd">

<xsl:value-of select="album"/>,

<xsl:value-of select="zemlja"/>,

<xsl:value-of select="godina"/><br />

</xsl:template>

</xsl:stylesheet>

51

9

Pr

imje

r 6

• Dob

ijeni

dok

umen

t: cd

cata

log_

v3.x

ml


<katalog>

<cd>


Vol.68)</album>






</cd>

...

</katalog>

• Tra

ženi

izgl

ed u

web

bro

wse

ru

• P

repr

avlje

ni X

ML

doku

men

t



… • R

ješe

nje:

stil3

.xsl


<!ENTITY nbsp " ">

<!ENTITY copy "©">

<!ENTITY reg "®">






<!ENTITY yen "¥">


]>








<head>


8"/>

<title>Vježba broj 3 - tabela</title>

</head>

<body>

<h1>Albumi čija je godina izdanja između 2007-2010</h1>

<table width="700" border="1">

<tr style="font-size:2em">

<td>R.b.</td>

<td style="background:#CCFF33">Album</td>

<td style="text-align:center;">Godina izdanja</td>

<td style="text-align:center;">Cijena</td>

</tr>

<xsl:for-each select="katalog/cd[godina>2006 and 2011>godina]">

<tr style="font-size:1.4em">

<td><xsl:value-of select="position()"/>.</td>

<td style="background:#CCFF33"><xsl:value-of

select="album"/></td>

<td style="text-align:center; width:100px"><xsl:value-of

select="godina"/></td>

<td style="text-align:center; width:100px"><xsl:value-of

select="cijena"/> KM</td>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

52

10

U sl

jede

ćih

dvan

aest

zad

atak

a da

t je

isti

doku

men

t • D

obije

ni d

okum

ent:

utak

mic

e201

2.xm

l <?xml version="1.0" encoding="utf-8"?>

<utakmice total-count="5" first="1" last="5">

<predmet sadrzaj="rom_l1" status="finished" timestamp-

starts="1280156400">

<timovi>

<domacini id="tarmfcm_rom">

<ime>Targu</ime>

<punoime>FCM Targu Mures</punoime>

</domacini>

<gosti id="brasfc_rom">

<ime>Brasov</ime>

<punoime>FC Brasov</punoime>

</gosti>

</timovi>

<rezultat>0 - 1</rezultat>

<detalji>

<sadrzaj>

<takmicenje id="rom_l1">

<naslov>Romania - Liga 1</naslov>

</takmicenje>

<sezona>2010/2011</sezona>

</sadrzaj>

<oprema-info>1</oprema-info>

</detalji>

<dogadjaji>

<dogadjaj type="yellow_card" team="domacini">

<igrac>Onicas</igrac>

<minuta>22</minuta>

</dogadjaj>


<igrac>Vancea</igrac>

<minuta>27</minuta>

</dogadjaj>

<dogadjaj type="yellow_card" team="gosti">

<igrac>Hadnagy</igrac>

<minuta>29</minuta>

</dogadjaj>


<igrac>Voicu</igrac>

<minuta>34</minuta>

</dogadjaj>


<igrac>Stere</igrac>

<minuta>46</minuta>

</dogadjaj>


<igrac>Chipciu</igrac>

<minuta>52</minuta>

</dogadjaj>


<igrac>Balau</igrac>

<minuta>60</minuta>

</dogadjaj>


<igrac>Stanga</igrac>

<minuta>65</minuta>

</dogadjaj>

<dogadjaj type="goal" team="gosti">

<igrac>Badea</igrac>


<minuta>68</minuta>

</dogadjaj>

<dogadjaj type="red_card" team="gosti">

<igrac>Majernik</igrac>

<minuta>76</minuta>

</dogadjaj>

</dogadjaji>

</predmet>

<predmet sadrzaj="swe_fd" status="active" timestamp-

starts="1280163600">

<timovi>

<domacini id="hif_swe">

<ime>Helsingborg</ime>

<punoime>Helsingborgs IF</punoime>

</domacini>

<gosti id="bkh_swe">

<ime>Hacken</ime>

<punoime>BK Hacken</punoime>

</gosti>

</timovi>


<trenutno-stanje>

<poluvrijeme>first_half</poluvrijeme>

<minuta>23</minuta>

</trenutno-stanje>

<detalji>

53

11

<sadrzaj>

<takmicenje id="swe_fd">

<naslov>Sweden - First Division</naslov>

</takmicenje>

<sezona>2010</sezona>

</sadrzaj>

<oprema-info>16</oprema-info>

</detalji>

<dogadjaji>

<dogadjaj type="goal" team="gosti">

<igrac>Ostberg</igrac>


<minuta>12</minuta>

</dogadjaj>

</dogadjaji>

<dogadjaji>


<igrac>Sellman</igrac>

<minuta>3</minuta>

</dogadjaj>


<igrac>Robert</igrac>

<minuta>6</minuta>

</dogadjaj>

</dogadjaji>

</predmet>

...

</utakmice>

Čije

je st

ablo

izgl

eda:

54

12

Za

data

k br

oj 7

• D

obije

ni d

okum

ent:

utak

mic

e201

2.xm

l




starts="1280156400">

<timovi>


<ime>Targu</ime>


</domacini>


<ime>Brasov</ime>


</gosti>

</timovi>

...

• Tra

ženi

izgl

ed u

web

bro

wse

ru (r

ezul

tati

utak

mic

a, re

dni b

roj u

takm

ice,

ve

ći fo

nt, o

boje

ne ć

elije

)

• P

repr

avlje

ni X

ML

doku

men

t


<?xml-stylesheet type="text/xsl" href="stil1_zaUtakmice.xsl"?>

<utakmice total-count="5" first="1" last="5">...

• Jed

no o

d m

oguć

ih rj

ešen

ja: s

til1_zaUtakmice.xsl


<!ENTITY nbsp " ">

<!ENTITY copy "©">

<!ENTITY reg "®">






<!ENTITY yen "¥">


]>








<head>


8"/>

<title>Vjezba broj 1</title>

</head>

<body>

<h1>Rezultati utakmica</h1>

<table width="600px" border="2">

<tr><th>R.b.</th><th>Domacini</th><th>Gosti</th><th>Rezultat</th></

tr>

<xsl:for-each select="utakmice/predmet">

<tr>

<td><font size="+3"><xsl:value-of

select="position()"/>.</font></td>

<td><xsl:value-of select="timovi/domacini/punoime"/></td>

<td><xsl:value-of select="timovi/gosti/punoime"/></td>

<td><xsl:value-of select="rezultat"/></td>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

55

13

Za

data

k br

oj 8

• D

obije

ni d

okum

ent:

utak

mic

e201

2.xm

l




starts="1280156400">

<timovi>


...

• Tra

ženi

izgl

ed u

web

bro

wse

ru (ž

uti k

arto

ni sv

ih ig

rača

iz sv

ih u

takm

ica)

• P

repr

avlje

ni X

ML

doku

men

t




• Jed

no o

d m

oguć

ih rj

ešen

ja: s

til2_zaUtakmice.xsl

... Početak je isti kao u prethodnom zadatku ...



<head>


8"/>


</head>

<body>

<h1>Žuti kartoni domacih igraca</h1>



<tr><td bgcolor="#CCFFFF"><font size="+3">Utakmica</font></td><td>

<xsl:value-of select="timovi/domacini/punoime"/>

- <xsl:value-of select="timovi/gosti/punoime"/><br />

</td></tr>

<tr><td>Kartoni</td><td>

Domaci igraci:<br />

<xsl:for-each select="dogadjaji/dogadjaj">

<xsl:if test="(.[contains(@type,'yellow_card') and

contains(@team,'domacini')]

)">

Igrač <b>

<xsl:value-of select="igrac"/>

</b> je dobio žuti karton u

<b>

<xsl:value-of select="minuta"/>

</b> minuti.<br />

</xsl:if>

</xsl:for-each>

</td></tr>

<tr><td> </td><td> </td></tr>

</xsl:for-each>

</table>

<tr>

<td></td>

<td></td>


</tr>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

</xsl:template>

</xsl:stylesheet>

56

14

Za

data

k br

oj 9

• D

obije

ni d

okum

ent:

utak

mic

e201

2.xm

l




starts="1280156400">

<timovi>


...

• Tra

ženi

izgl

ed u

web

bro

wse

ru (

imen

a lig

a, ti

mov

i i n

jihov

i pun

i naz

ivi,

broj

uta

kmic

a u

doku

men

tu)

• P

repr

avlje

ni X

ML

doku

men

t




• Jed

no o

d m

oguć

ih rj

ešen

ja: s

til3_zaUtakmice.xsl

... Početak je isti kao u prethodnom zadatku ...








<head>


8"/>

<title>Vježba broj 3</title>

</head>

<body>

<h1>Neke zanimljive informacije:</h1><br />

U datom dokumentu utakmice su iz sljedećih liga:<br />

<xsl:for-each select="utakmice/predmet/detalji/sadrzaj/takmicenje">

<xsl:value-of

select="naslov"/>,

</xsl:for-each>

<br /><br />

<br />

U datom dokumentu pojavljuju se sljedeći timovi:

<xsl:for-each select="utakmice/predmet/timovi"><br />

<xsl:value-of select="domacini/ime"/> čije je puno ime <font

size="+2"><xsl:value-of select="domacini/punoime"/></font><br />

<xsl:value-of select="gosti/ime"/> čije je puno ime <font

size="+2"><xsl:value-of select="gosti/punoime"/></font>

</xsl:for-each>

<br /><br />

Ukupno ima

<xsl:for-each select="utakmice/predmet/detalji/sadrzaj/takmicenje">

<xsl:if test="position()=1">

<font size="+3"><xsl:value-of select="last()"/></font>

</xsl:if>

</xsl:for-each> utkmica.

</body>

</html>

</xsl:template>

</xsl:stylesheet>

57

15

Za

data

k br

oj 1

0 • D

obije

ni d

okum

ent:

utak

mic

e201

2.xm

l




starts="1280156400">

<timovi>


<ime>Targu</ime>


</domacini>


<ime>Brasov</ime>


</gosti>

</timovi>

...

• Tra

ženi

izgl

ed u

web

bro

wse

ru (r

ezul

tati

utak

mic

a i r

edni

bro

jevi

)

• P

repr

avlje

ni X

ML

doku

men

t




...

• Jed

no o

d m

oguć

ih rj

ešen

ja: s

til1_

zaU

takm

ice.

xsl


<!ENTITY nbsp " ">

<!ENTITY copy "©">

<!ENTITY reg "®">






<!ENTITY yen "¥">


]>








<head>


8"/>


</head>

<body>

<h1>Rezultati utakmica</h1>

<table width="600px" border="2">

<tr><th>R.b.</th><th>Domacini</th><th>Gosti</th><th>Rezultat</th></

tr>


<tr>

<td><font size="+3"><xsl:value-of

select="position()"/>.</font></td>




</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

58

16

Za

data

k br

oj 1

1 • D

obije

ni d

okum

ent:

utak

mic

e201

2.xm

l




starts="1280156400">

<timovi>


<ime>Targu</ime>


...

• Tra

ženi

izgl

ed u

web

bro

wse

ru (ž

uti k

arto

ni d

omać

ih ig

rača

iz sv

ih

utak

mic

a)

• Pre

prav

ljeni

XM

L do

kum

ent



...

• Jed

no o

d m

oguć

ih rj

ešen

ja: s

til2_

zaU

takm

ice.

xsl

...čitav početak je isti kao u prethodnom zadatku...


<head>


8"/>


</head>

<body>

<h1>Žuti kartoni domacih igraca</h1>



<tr><td bgcolor="#CCFFFF"><font size="+3">Utakmica</font></td><td>

<xsl:value-of select="timovi/domacini/punoime"/>

- <xsl:value-of select="timovi/gosti/punoime"/><br />

</td></tr>

<tr><td>Kartoni</td><td>

Domaci igraci:<br />


<xsl:if test="(.[contains(@type,'yellow_card') and

contains(@team,'domacini')]

)">

Igrač <b>

<xsl:value-of select="igrac"/>

</b> je dobio žuti karton u

<b>

<xsl:value-of select="minuta"/>

</b> minuti.<br />

</xsl:if>

</xsl:for-each>

</td></tr>

<tr><td> </td><td> </td></tr>

</xsl:for-each>

</table>

<tr>

<td></td>

<td></td>


</tr>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

59

17

Za

data

k br

oj 1

2 • D

obije

ni d

okum

ent:

utak

mic

e201

2.xm

l




starts="1280156400">

<timovi>


<ime>Targu</ime>


...

• Tra

ženi

izgl

ed u

web

bro

wse

ru (k

oja

utak

mic

a je

iz k

oje

lige

i sta

tus

utak

mic

e)

• P

repr

avlje

ni X

ML

doku

men

t



...

• Jed

no o

d m

oguć

ih rj

ešen

ja: s

til3_

zaU

takm

ice.

xsl

...početak je isti kao u svim zadacima...








<head>


8"/>


</head>

<body>

<h1>Neke zanimljive informacije</h1>


Utakmica

<font size="+2">

<xsl:value-of select="timovi/domacini/punoime"/> - <xsl:value-of

select="timovi/gosti/punoime"/>

</font>

je iz

<font size="+2">

<xsl:value-of select="detalji/sadrzaj/takmicenje/naslov"/>

</font>

lige.<br />

Utakmica

<xsl:if test="(.[contains(@status,'finished')])">

<font size="+2">je završena.</font>

</xsl:if>

<xsl:if test="(.[contains(@status,'active')])">

<font size="+2">je u toku.</font>

</xsl:if>

<xsl:if test="(.[contains(@status,'not_started')])">

<font size="+2">još nije započela.</font>

</xsl:if>

<br /><br />

</xsl:for-each>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

60

18

Za

data

k br

oj 1

3 • D

obije

ni d

okum

ent:

utak

mic

e.xm

l




starts="1280156400">

<timovi>


<ime>Targu</ime>


</domacini>


<ime>Brasov</ime>


</gosti>

</timovi>

...

• Tra

ženi

izgl

ed u

web

bro

wse

ru (p

rikaz

svih

rezu

ltata

odi

gran

ih u

takm

ica

iz d

okum

enta

u je

dnoj

tabe

li)

• P

repr

avlje

ni X

ML

doku

men

t





starts="1280156400">

<timovi>


<ime>Targu</ime>

...

• Jed

no o

d m

oguć

ih rj

ešen

ja: s

til1_

zaU

takm

ice.

xsl


<!ENTITY nbsp " ">

<!ENTITY copy "©">

<!ENTITY reg "®">






<!ENTITY yen "¥">


]>






<xsl:template match="/utakmice">


<head>


8"/>


</head>

<body>


<tr>

<th width="200">Domacin</th><th width="200">Gost</th><th

width="200">Rezultat</th>

</tr>

<xsl:for-each select="predmet">

<tr>




</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

61

19

Za

data

k br

oj 1

4 • D

obije

ni d

okum

ent:

utak

mic

e.xm

l




starts="1280156400">

<timovi>


<ime>Targu</ime>


...

• Tra

ženi

izgl

ed u

web

bro

wse

ru (p

rikaz

imen

a lig

e i s

vih

odig

rani

h ut

akm

ica

u po

sebn

im ta

bela

ma

(bez

rezu

ltata

ili s

a))

• Pre

prav

ljeni

XM

L do

kum

ent



...

• Jed

no o

d m

oguć

ih rj

ešen

ja: s

til2_

zaU

takm

ice.

xsl


<!ENTITY nbsp " ">

<!ENTITY copy "©">

...(ovaj dio je isti kao u prethodnom zadatku)


]>






<xsl:template match="/utakmice/predmet">


<head>


8"/>


</head>

<body>

<h1>

<xsl:value-of select="detalji/sadrzaj/takmicenje/naslov"/>

</h1>


<tr>



</tr>

<xsl:for-each select="timovi">

<tr>

<td><xsl:value-of select="domacini/punoime"/></td>

<td><xsl:value-of select="gosti/punoime"/></td>

<td>.</td>

</tr>

</xsl:for-each>

</table>

<br />

</body>

</html>

</xsl:template>

</xsl:stylesheet>

62

20

Za

data

k br

oj 1

5 • D

obije

ni d

okum

ent:

utak

mic

e.xm

l




starts="1280156400">

<timovi>


<ime>Targu</ime>


...

• Tra

ženi

izgl

ed u

web

bro

wse

ru (p

rikaz

rezu

ltat o

digr

anih

uta

kmic

a sa

mo

iz R

umun

ske

lige)

• P

repr

avlje

ni X

ML

doku

men

t



...

• Jed

no o

d m

oguć

ih rj

ešen

ja: s

til3_

zaU

takm

ice.

xsl


<!ENTITY nbsp " ">

<!ENTITY copy "©">

<!ENTITY reg "®">






<!ENTITY yen "¥">


]>







<h1>

Romania - Liga 1

</h1>

<xsl:apply-templates select="/utakmice/predmet"/>

</xsl:template>

<xsl:template match="/utakmice/predmet">


<head>


8"/>


</head>

<body>

<xsl:if test="detalji/sadrzaj/takmicenje[naslov = 'Romania - Liga

1']">


<tr>



</tr>

<xsl:for-each select="timovi">

<tr>

<td><xsl:value-of select="domacini/punoime"/></td>

<td><xsl:value-of select="gosti/punoime"/></td>

<td><xsl:value-of select="../rezultat"/></td>

</tr>

</xsl:for-each>

</table>

<br />

</xsl:if>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

63

21

Pr

imje

r 16

• D

obije

ni d

okum

ent:

utak

mic

e201

2.xm

l




starts="1280156400">

<timovi>


<ime>Targu</ime>


</domacini>

...

• Tra

ženi

izgl

ed u

web

bro

wse

ru

• P

repr

avlje

ni X

ML

doku

men

t


<?xml-stylesheet href="stil1_utakmice_12062013.xsl"

type="text/xsl"?>

…

• Rje

šenj

e: st

il1_u

takm

ice_

1206

2013

.xsl


<!DOCTYPE xsl:stylesheet [

<!ENTITY nbsp " ">

<!ENTITY copy "©">

…



<!ENTITY yen "¥">


]>








<head>


8"/>


</head>

<body>

<xsl:apply-templates select="utakmice"/>

</body>

</html>

</xsl:template>

<xsl:template match="utakmice">

<xsl:apply-templates select="predmet"/><br />

</xsl:template>

<xsl:template match="predmet">

<div style="background:#99FFCC; width:400px; border:thick solid

#000000; padding:10px; margin:20px; text-align:center">

<font style="font-size:2em; color:#FF0000"><xsl:value-of

select="rezultat"/></font><br />

<xsl:value-of select="timovi/domacini/punoime"/> -

<xsl:value-of select="timovi/gosti/punoime"/><br />

<font style="font-size:1.5em"> Golove dali:


<xsl:if test="(.[contains(@type,'goal')])">


</xsl:if>

</xsl:for-each>

</font>

</div>

</xsl:template>

</xsl:stylesheet>

64

22

Pr

imje

r 17

• D

obije

ni d

okum

ent:

utak

mic

e201

2.xm

l




starts="1280156400">

<timovi>


<ime>Targu</ime>


</domacini>


...

• Tra

ženi

izgl

ed u

web

bro

wse

ru (t

ri di

v-a)

• P

repr

avlje

ni X

ML

doku

men

t



type="text/xsl"?> …

• Rje

šenj

e: st

il2_u

takm

ice_

1206

2013

.xsl



<!ENTITY nbsp " ">

<!ENTITY copy "©">

<!ENTITY reg "®">

…

<!ENTITY yen "¥">


]>








<head>


8"/>

<title>Vjezba 2</title>

</head>

<body>

<div style="width:250px; background:#99FFFF; padding:10px">

<font size="+3">Timovi, rezultati i detalji</font><br /><br />

<xsl:apply-templates select="utakmice/predmet"/>

</div>

<div style="width:250px; background:#99CC66; padding:10px;




</div>

<div style="width:250px; background:#CCCCFF; padding:10px;




</div>

</body>

</html>

</xsl:template>

<xsl:template match="utakmice/predmet">

<xsl:value-of select="timovi"/>,<br />

<xsl:value-of select="rezultat"/>,<br />

<xsl:value-of select="detalji"/><br /><br /><br />

</xsl:template>

</xsl:stylesheet>

65

23

Pr

imje

r 18

• D

obije

ni d

okum

ent:

utak

mic

e201

2.xm

l




starts="1280156400">

<timovi>


<ime>Targu</ime>


</domacini>


...

• Tra

ženi

izgl

ed u

web

bro

wse

ru

• P

repr

avlje

ni X

ML

doku

men

t



type="text/xsl"?>

… • R

ješe

nje:

stil3

_uta

kmic

e_12

0620

13.x

sl



<!ENTITY nbsp " ">

<!ENTITY copy "©">

…


]>








<head>


8"/>

<title>Vjezba 3</title>

</head>

<body>

<h1>Utakmice</h1>


<tr style="font-size:2em">

<td>R.b.</td>

<td style="background:#CCFF33">Utakmica</td>

<td style="text-align:center;">Rezultat</td>

<td style="text-align:center;">Žuti kartoni</td>

</tr>


<tr style="font-size:1.4em">

<td><xsl:value-of select="position()"/>.</td>

<td style="background:#CCFF33"><xsl:value-of

select="timovi/domacini/ime"/> -

<xsl:value-of select="timovi/gosti/ime"/></td>

<td style="text-align:center; width:100px">

<xsl:value-of select="rezultat"/>

</td>

<td style="text-align:center; width:200px">


<xsl:if test="(.[contains(@type,'yellow_card')])">


</xsl:if>

</xsl:for-each>

</td>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

66

24

U sv

a tr

i slje

deća

zad

atka

dob

ijen

je is

ti do

kum

ent

• Dob

ijeni

dok

umen

t: ka

talo

g_bi

ljaka

.xm

l <?xml version="1.0" encoding="ISO-8859-1"?>



<KATALOG>

<BILJKA>

<NAZIV>Bloodroot</NAZIV>

<BOTANICKI>Sanguinaria canadensis</BOTANICKI>

<ZONA>4</ZONA>

<OSVJETLJENJE>Mostly Shady</OSVJETLJENJE>

<CIJENA>$2.44</CIJENA>

<DOSTUPNOST>031599</DOSTUPNOST>

</BILJKA>

<BILJKA>

<NAZIV>Columbine</NAZIV>

<BOTANICKI>Aquilegia canadensis</BOTANICKI>

<ZONA>3</ZONA>




</BILJKA>

<BILJKA>

<NAZIV>Marsh Marigold</NAZIV>

<BOTANICKI>Caltha palustris</BOTANICKI>

<ZONA>4</ZONA>

<OSVJETLJENJE>Mostly Sunny</OSVJETLJENJE>



</BILJKA>

<BILJKA>

<NAZIV>Cowslip</NAZIV>

<BOTANICKI>Caltha palustris</BOTANICKI>

<ZONA>4</ZONA>




</BILJKA>

<BILJKA>

<NAZIV>Dutchman's-Breeches</NAZIV>

<BOTANICKI>Dicentra cucullaria</BOTANICKI>

<ZONA>3</ZONA>




</BILJKA>

<BILJKA>

<NAZIV>Ginger, Wild</NAZIV>

<BOTANICKI>Asarum canadense</BOTANICKI>

<ZONA>3</ZONA>




</BILJKA>

<BILJKA>

<NAZIV>Hepatica</NAZIV>

<BOTANICKI>Hepatica americana</BOTANICKI>

<ZONA>4</ZONA>




</BILJKA>

<BILJKA>

<NAZIV>Liverleaf</NAZIV>

<BOTANICKI>Hepatica americana</BOTANICKI>

<ZONA>4</ZONA>




</BILJKA>

<BILJKA>

<NAZIV>Jack-In-The-Pulpit</NAZIV>

<BOTANICKI>Arisaema triphyllum</BOTANICKI>

<ZONA>4</ZONA>




</BILJKA>

<BILJKA>

<NAZIV>Mayapple</NAZIV>

<BOTANICKI>Podophyllum peltatum</BOTANICKI>

<ZONA>3</ZONA>




</BILJKA>

<BILJKA>

<NAZIV>Phlox, Woodland</NAZIV>

<BOTANICKI>Phlox divaricata</BOTANICKI>

<ZONA>3</ZONA>

<OSVJETLJENJE>Sun or Shade</OSVJETLJENJE>



</BILJKA>

<BILJKA>

<NAZIV>Phlox, Blue</NAZIV>

<BOTANICKI>Phlox divaricata</BOTANICKI>

<ZONA>3</ZONA>

<OSVJETLJENJE>Sun or Shade</OSVJETLJENJE>



</BILJKA>

...

<BILJKA>

<NAZIV>Cardinal Flower</NAZIV>

<BOTANICKI>Lobelia cardinalis</BOTANICKI>

...

</BILJKA>

</KATALOG>

67

25

Za

data

k br

oj 1

9 • D

obije

ni d

okum

ent:

kata

log_

bilja

ka.x

ml



<KATALOG>

<BILJKA>



<ZONA>4</ZONA>




</BILJKA>

...

</KATALOG>

• Tra

ženi

izgl

ed u

web

bro

wse

ru (b

iljke

u ta

beli

sa o

svje

tljen

jem

Sun

ny, i

bi

ljke

sa o

svje

tljen

jem

Sha

de)

• P

repr

avlje

ni X

ML

doku

men

t


<?xml-stylesheet type="text/xsl"

href="stil1_za_Katalog_biljaka.xsl"?>


<KATALOG>

...

• Rje

šenj

e: st

il1_z

a_K

atal

og_b

iljak

a.xs

l


<!ENTITY nbsp " ">

...(ovaj dio je isti kao u sljedećem zadatku)

<!ENTITY yen "¥">

<!ENTITY euro "€">]>








<head>


8"/>

<title>Katalog biljaka - Vjezba sa ispita broj 1</title>

</head>

<body>

<h2>

Biljke iz našeg kataloga koje trebaju dosta sunce su sljedeće

</h2>

<table border="1">

<tr>

<th bgcolor="#99FFFF">Naziv biljke</th>

<th bgcolor="#99FFFF">Potrebna osvjetljenost</th>

</tr>

<xsl:for-each select="KATALOG/BILJKA">

<xsl:if test="OSVJETLJENJE = 'Sunny'">

<tr>

<td><xsl:value-of select="NAZIV"/></td>

<td><xsl:value-of select="OSVJETLJENJE"/></td>

</tr>

</xsl:if>

</xsl:for-each>

</table>

<h2>

Biljke iz našeg kataloga koje mogu rasti i u hladu su:</h2>


<xsl:if test="OSVJETLJENJE = 'Shade'">

<xsl:value-of select="NAZIV"/>,

</xsl:if>

</xsl:for-each>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

68

26

Za

data

k br

oj 2

0 • D

obije

ni d

okum

ent:

kata

log_

bilja

ka.x

ml



<KATALOG>

<BILJKA>



<ZONA>4</ZONA>




</BILJKA>

...

</KATALOG>

• Tra

ženi

izgl

ed u

web

bro

wse

ru (i

men

a bi

ljaka

sa re

dnim

bro

jem

u tr

i ko

lone

)

• P

repr

avlje

ni X

ML

doku

men

t




...

• Rje

šenj

e: st

il2_z

a_K

atal

og_b

iljak

a.xs

l


<!ENTITY nbsp " ">

<!ENTITY copy "©">

<!ENTITY reg "®">






<!ENTITY yen "¥">

<!ENTITY euro "€">]>






<xsl:template match="/KATALOG">


<head>


8"/>

<title>Vjezba sa ispita broj 2</title>

</head>

<body>

<h2>U nasoj radnji mozete kupiti sljedeće biljke</h2>

<xsl:for-each select="BILJKA/NAZIV">

<xsl:value-of select="position()"/>

<xsl:value-of select="."/>

&

nbsp;

<xsl:if test="position() mod 9 = 0">

<br /><br />

</xsl:if>

<xsl:if test="position() mod 3 = 0">

<br />

</xsl:if>

</xsl:for-each>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

69

27

Za

data

k br

oj 2

1 • D

obije

ni d

okum

ent:

kata

log_

bilja

ka.x

ml



<KATALOG>

<BILJKA>



<ZONA>4</ZONA>




</BILJKA>

...

</KATALOG>

• Tra

ženi

izgl

ed u

web

bro

wse

ru (p

rve

četir

i bilj

ke iz

kat

alog

a)

• P

repr

avlje

ni X

ML

doku

men

t




...

• Rje

šenj

e: st

il3_z

a_K

atal

og_b

iljak

a.xs

l


...(ovaj dio je isti kao u prethodnom zadatku)

]>








<head>


8"/>

<title>Katalog biljaka - Vjezba sa ispita broj 3</title>

</head>

<body>

<div style="width:800px">

<h2>Biljke koje preporučujemo su</h2>


<xsl:if test="5 > position()">

<div style="color:blue; padding:4px">

<span style="font-weight:bold">

<xsl:value-of select="NAZIV"/>

</span>

- <xsl:value-of select="CIJENA"/>

</div>

<div style="color:blue; padding:4px; background:#99FFFF">

<span style="font-style:italic">

Dostupnost <xsl:value-of select="DOSTUPNOST"/>

</span>

</div>

<br />

</xsl:if>

</xsl:for-each>

</div>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

70

28

Pr

imje

r 22

• D

obije

ni d

okum

ent:

poem

.xm

l

<?xml version="1.0" encoding="iso-8859-1"?>

<poem>

<author>Rupert Brooke</author>

<date>1912</date>

<title>Hladnoca</title>

<stanza>

<line>I iznenada vjetar dolazi mekan,</line>

<line>I proljece je ovjde ponovo</line>

<line>I glog pospjeva sa pupoljkom zelenim</line>

<line>I moje srce sa pupoljkom bola.</line>

</stanza>

<stanza>

<line>My heart all Winter lay so numb,</line>

<line>The earth so dead and frore,</line>

<line>That I never thought the Spring would come again</line>

<line>Or my heart wake any more.</line>

</stanza>

...

</poem>

• Tra

ženi

izgl

ed u

web

bro

wse

ru (s

vaki

dru

gi st

ih u

vući

pet

mili

met

ara)

• P

repr

avlje

ni X

ML

doku

men

t


<?xml-stylesheet type="text/xsl" href="stil_za_pjesmu.xsl"?>

...

• Rje

šenj

e: st

il_za

_pje

smu.

xsl


<xsl:stylesheet

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

version="1.0">

<xsl:template match="poem">

<html>

<head>

<title><xsl:value-of select="title"/></title>

</head>

<body>

<xsl:apply-templates select="title"/>

<xsl:apply-templates select="author"/>

<xsl:apply-templates select="stanza"/>

<xsl:apply-templates select="date"/>

</body>

</html>

</xsl:template>

<xsl:template match="title">

<div align="center"><h1><xsl:value-of

select="."/></h1></div>

</xsl:template>

<xsl:template match="author">

<div align="center"><h2>Od <xsl:value-of


</xsl:template>

<xsl:template match="date">

<p><i><xsl:value-of select="."/></i></p>

</xsl:template>

<xsl:template match="stanza">

<p><xsl:apply-templates select="line"/></p>

</xsl:template>

<xsl:template match="line">

<xsl:if test="position() mod 2 =

0"> </xsl:if>

<xsl:value-of select="."/><br/>

</xsl:template>

</xsl:stylesheet>

71

29

Pr

imje

r 23

• D

obije

ni d

okum

ent:

poem

.xm

l


<poem>


<date>1912</date>


<stanza>





</stanza>

<stanza>





</stanza>

<stanza>

<line>But Winter's broken and earth has woken,</line>

<line>And the small birds cry again;</line>

<line>And the hawthorn hedge puts forth its buds,</line>

<line>And my heart puts forth its pain.</line>

</stanza>

</poem>

• Tra

ženi

izgl

ed u

web

bro

wse

ru (i

spis

ati b

roj i

spre

d sv

akog

stih

a u

stro

fi)

• P

repr

avlje

ni X

ML

doku

men

t


<?xml-stylesheet type="text/xsl" href="stil_fja_position.xsl"?>

...

• Rje

šenj

e: st

il_fj

a_po

sitio

n.xs

l


<!ENTITY nbsp " ">

<!ENTITY copy "©">

<!ENTITY reg "®">






<!ENTITY yen "¥">


]>








<head>


8"/>

<title>Stil sa funkcijom positionn</title>

</head>

<body>




</body>

</html>

</xsl:template>


<div align="center">

<h1><xsl:value-of select="."/></h1></div>

</xsl:template>



<h2>Od <xsl:value-of select="."/></h2></div>

</xsl:template>



</xsl:template>




</xsl:template>

</xsl:stylesheet>

72

30

Pr

imje

r 24

• D

obije

ni d

okum

ent:

poem

.xm

l


<poem>


<date>1912</date>


<stanza>





</stanza>

<stanza>





</stanza>

<stanza>

<line>But Winter's broken and earth has woken,</line>

<line>And the small birds cry again;</line>

<line>And the hawthorn hedge puts forth its buds,</line>

<line>And my heart puts forth its pain.</line>

</stanza>

</poem>

• Tra

ženi

izgl

ed u

web

bro

wse

ru (i

spis

ati b

roj s

tiha

ne ra

zdva

jaju

ći st

rofe

)

• P

repr

avlje

ni X

ML

doku

men

t


<?xml-stylesheet type="text/xsl" href="stil_fja_position_v2.xsl"?>

<poem>


...

• Rje

šenj

e: st

il_fj

a_po

sitio

n_v2

.xsl

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE

xsl:stylesheet [

<!ENTITY nbsp " ">

<!ENTITY copy "©">

<!ENTITY reg "®">






<!ENTITY yen "¥">


]>





system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd"/>



<head>

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8"/>

<title>Stil sa funkcijom position v2</title>

</head>

<body>


<xsl:for-each select="stanza/line">



</xsl:for-each>

</body>

</html>

</xsl:template>



<h1><xsl:value-of select="."/></h1></div>

</xsl:template>

</xsl:stylesheet>

73

31

Pr

imje

r 25

• D

obije

ni d

okum

ent:

cdca

talo

gv2.

xml


<catalog>

<cd>

<title>Live And Feelin' Good (The Blues Collection

Vol.68)</title>

<artist>Piano Red</artist>

<country>USA</country>

<company>?</company>

<price>4.99</price>

<year>2007</year>

</cd>

<cd>

<title>2cellos</title>

<artist>2cellos</artist>

<country>HR</country>

<company>?</company>

<price>10.99</price>

<year>2011</year>

</cd>

...

</catalog>

• Tra

ženi

izgl

ed u

web

bro

wse

ru (s

vi a

lbum

i koj

i su

skup

lji o

d 10

KM

)

• P

repr

avlje

ni X

ML

doku

men

t


<?xml-stylesheet type="text/xsl" href="Stil_za_if.xsl"?>

<catalog>

<cd>

...

• Rje

šenj

e: S

til_z

a_if.

xsl

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE

xsl:stylesheet [

<!ENTITY nbsp " ">

<!ENTITY copy "©">

<!ENTITY reg "®">






<!ENTITY yen "¥">


]>





system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd"/>



<head>

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8"/>

<title>Naredba if</title>

</head>

<body>

<h2>Moja CD kolekcija</h2>

<table border="1">

<tr bgcolor="#9acd32">

<th>Ime albuma</th>

<th>Izvođaća</th>

</tr>

<xsl:for-each select="catalog/cd">

<xsl:if test="price > 10">

<tr>

<td><xsl:value-of select="title"/></td>

<td><xsl:value-of select="artist"/></td>

</tr>

</xsl:if>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

74

32

Pr

imje

r 26

• D

obije

ni d

okum

ent:

poem

.xm

l


<poem>


<date>1912</date>


<stanza>





</stanza>

<stanza>





</stanza>

...

</poem>

• Tra

ženi

izgl

ed u

web

bro

wse

ru (s

vaki

dru

gi st

ih u

vući

pet

mili

met

ara)

• P

repr

avlje

ni X

ML

doku

men

t


<?xml-stylesheet type="text/xsl" href="stil_za_pjesmu.xsl"?>

...

• Rje

šenj

e: st

il_za

_pje

smu.

xsl


<xsl:stylesheet

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

version="1.0">


<html>

<head>

<title><xsl:value-of select="title"/></title>

</head>

<body>




<xsl:apply-templates select="date"/>

</body>

</html>

</xsl:template>


<div align="center"><h1><xsl:value-of


</xsl:template>


<div align="center"><h2>Od <xsl:value-of


</xsl:template>

<xsl:template match="date">

<p><i><xsl:value-of select="."/></i></p>

</xsl:template>



</xsl:template>


<xsl:if test="position() mod 2 =

0"> </xsl:if>


</xsl:template>

</xsl:stylesheet>

75

Programiranje za internet zimski semestar 2013/2014

Java kroz primjere

(skripta je u fazi izradi)

76

Zadatak broj 1

Nacrtati kocku. (Zanimljiv teži problem za razmišljanje: Nacrtat kocku čije će dimenzije zavisiti od veličine otvorenog prozora (platna)). Rješenje: /* * Nacrtati kocku. * (Zanimljiv tezi problem za razmisljanje: * Nacrtat kocku cije ce dimenzije * zavisiti o velicini otvorenog prozora (platna)). * */ import acm.graphics.*; import acm.program.*; public class Vjezba1 extends GraphicsProgram { public void run() { //Cekaj na klik waitForClick(); //definisanje objekta koji ce sadrzavati liniju GLine linija; //crtanje linija linija=new GLine(150,20,450,20); add(linija); linija=new GLine(50,100,350,100); add(linija); linija=new GLine(150,20,50,100); add(linija); linija=new GLine(450,20,350,100); add(linija); linija=new GLine(150,320,450,320); add(linija); linija=new GLine(50,400,350,400); add(linija); linija=new GLine(150,320,50,400); add(linija); linija=new GLine(450,320,350,400); add(linija); linija=new GLine(50,100,50,400); add(linija); linija=new GLine(350,100,350,400); add(linija); linija=new GLine(150,20,150,320); add(linija); linija=new GLine(450,20,450,320); add(linija); } }

77

Zadatak broj 2

Napisati program koji će čitavo platno, od lijevog gornjeg, do desnog donjeg čoška, prekriti elipsama dimenzija 75 puta 25 piksela.

Rješenje: /* * * Program koji ce citavo platno, od lijevog gornjeg, * do desnog donjeg coska, prekriti * elipsama dimenzija 75 puta 25 piksela. * * */ import acm.graphics.*; import acm.program.*; public class zadatak01 extends GraphicsProgram { public void run() { waitForClick(); int sirina=0; int visina=0; sirina=getWidth(); visina=getHeight(); int pozicijaX=1; int pozicijaY=1; while(pozicijaY <= visina) { while(pozicijaX < sirina) { GOval prav=new GOval(pozicijaX,pozicijaY,75,25); add(prav); pozicijaX=pozicijaX+75; } pozicijaY=pozicijaY+25; pozicijaX=1; } } }

78

Zadatak broj 3

Napisati program koji ce od lijevog gornjeg čoška, dijagonalno prko platna nacrtati kvadrate dimenzija 40 puta 40 piksela. Nacrtani kvadrati trebaju biti obojeni. Program se neće početi izvršavati dok se ne napravi klik mišem.

Rješenje: /* * * Program koji ce od lijevog gornjeg coska, * dijagonalno prko platna nacrtati kvadrate * dimenzija 40 puta 40 piksela. * Nacrtani kvadrati trebaju biti obojeni. * Program se nece poceti izvrsavati dok se ne napravi klik misem. * */ import java.awt.*; import acm.graphics.*; import acm.program.*; public class vjezbaBroj1 extends GraphicsProgram { public void run() { //Cekaj na klik waitForClick(); //definisi dvije promjenjive cija ce vrijenost biti //sirina i visina prozora int sirinaProzora=1, visinaProzora=1, i=1; sirinaProzora=getWidth(); visinaProzora=getHeight(); //definisi i dodaj prvi kvadrat //dimenzija 40 puta 40 piksela GRect kvadrat; kvadrat=new GRect(0,0,40,40); kvadrat.setFilled(true); kvadrat.setFillColor(Color.GRAY); add(kvadrat); //Ispisi kvadrate preko dimenzija prozora while(true) { kvadrat=new GRect(i*40,i*40,40,40); kvadrat.setFilled(true); kvadrat.setFillColor(Color.GRAY); add(kvadrat); if(sirinaProzora<i*40) break; if(visinaProzora<i*40) break; i=i+1; } } }

79

Zadatak broj 4

Program koji će od lijevog gornjeg čoška, dijagonalno prko platna nacrtati kvadrate dimenzija 40 puta 40 piksela. Svaki parni kvadrat treba biti obijen crvenom bojom a svaki neparni žutom bojom. Program se neće početi izvršavati dok se ne napravi klik mišem.

Rješenje: /* * * Program koji ce od lijevog gornjeg coska, * dijagonalno prko platna nacrtati kvadrate * dimenzija 40 puta 40 piksela. * Svaki parni kvadrat treba biti obijen crvenom * bojom a svaki neparni žutom bojom. * Program se neće početi izvršavati dok se ne napravi klik mišem. * */ import java.awt.*; import acm.graphics.*; import acm.program.*; public class vjezbaBroj1 extends GraphicsProgram { public void run() { //Cekaj na klik waitForClick(); //definisi dvije promjenjive cija ce vrijenost biti //sirina i visina prozora int sirinaProzora=1, visinaProzora=1, i=1; sirinaProzora=getWidth(); visinaProzora=getHeight(); //definisi i dodaj prvi kvadrat //dimenzija 40 puta 40 piksela GRect kvadrat; kvadrat=new GRect(0,0,40,40); kvadrat.setFilled(true); kvadrat.setFillColor(Color.YELLOW); add(kvadrat); //Ispisi kvadrate preko dimenzija prozora int oboji=0; while(true) { kvadrat=new GRect(i*40,i*40,40,40); kvadrat.setFilled(true); kvadrat.setFillColor(Color.YELLOW); if(oboji%2==0) kvadrat.setFillColor(Color.RED); add(kvadrat); if(sirinaProzora<i*40) break; if(visinaProzora<i*40) break; i=i+1; oboji=oboji+1; } } }

80

Zadatak broj 5

Napisati program koji će od desnog gornjeg čoška, dijagonalno prko platna nacrtati kvadrate dimenzija 40 puta 40 piksela. Svaki parni kvadrat treba biti obijen crvenom bojom a svaki neparni žutom bojom. Program se neće početi izvršavati dok se ne napravi klik mišem.

Rješenje: /* * * Program koji ce od desnog gornjeg coska, * dijagonalno prko platna nacrtati kvadrate * dimenzija 40 puta 40 piksela. * Svaki parni kvadrat treba biti obijen crvenom * bojom a svaki neparni žutom bojom. * Program se neće početi izvršavati dok se ne napravi klik mišem. * */ import java.awt.*; import acm.graphics.*; import acm.program.*; public class vjezbaBroj1 extends GraphicsProgram { public void run() { //Cekaj na klik waitForClick(); //definisi dvije promjenjive cija ce vrijenost biti //sirina i visina prozora int sirinaProzora=1, visinaProzora=1, i=1; sirinaProzora=getWidth(); visinaProzora=getHeight(); //definisi i dodaj prvi kvadrat //dimenzija 40 puta 40 piksela GRect kvadrat; kvadrat=new GRect(sirinaProzora-40,0,40,40); kvadrat.setFilled(true); kvadrat.setFillColor(Color.YELLOW); add(kvadrat); //Ispisi kvadrate preko dimenzija prozora int oboji=0; while(true) { kvadrat=new GRect(sirinaProzora-(i+1)*40,i*40,40,40); kvadrat.setFilled(true); kvadrat.setFillColor(Color.YELLOW); if(oboji%2==0) kvadrat.setFillColor(Color.RED); add(kvadrat); if(sirinaProzora<i*40) break; if(visinaProzora<i*40) break; i=i+1; oboji=oboji+1; } } }

81

Zadatak broj 6

Napisati program koji će čitavo platno, od lijevog gornjeg, do desnog donjeg čoška, prekriti krugovima dimenzija 25 puta 25 piksela. Krugovi na dijagonali trebaju biti obojeni.

Rješenje: /* * * Program koji ce citavo platno, od lijevog gornjeg, * do desnog donjeg coska, prekriti * krugovima dimenzija 25 puta 25 piksela. Krugovi na * dijagonali trebaju biti obojeni * */ import java.awt.Color; import acm.graphics.*; import acm.program.*; public class zadatak01 extends GraphicsProgram { public void run() { waitForClick(); int sirina=0; int visina=0; sirina=getWidth(); visina=getHeight(); int pozicijaX=1; int pozicijaY=1; while(pozicijaY <= visina) { while(pozicijaX < sirina) { GOval prav=new GOval(pozicijaX,pozicijaY,25,25); if(pozicijaX==pozicijaY) { prav.setColor(Color.RED); prav.setFilled(true); } add(prav); pozicijaX=pozicijaX+25; } pozicijaY=pozicijaY+25; pozicijaX=1; } } }

82

Zadatak broj 7

Nacrtati program koji će čitavo platno prekriti koncentričnim krugovima (svi krugovi imaju isti zajednički centar). Razmak između ivica krugova je 20 piksela. Svaki paran krug je obojen.

Rješenje: /* * Nacrtati program koji će čitavo platno prekriti koncentričnim krugovima * (svi krugovi imaju isti zajednički centar). * Razmak između ivica krugova je 20 piksela. Svaki paran krug je obojen. * * */ import java.awt.Color; import acm.graphics.*; import acm.program.*; public class vjezba4 extends GraphicsProgram { public void run() { waitForClick(); int sirina=0, visina=0; sirina=getWidth(); visina=getHeight(); int k; k=(sirina/2)/10; GOval krug; for(int i=k; i>=1; i--) { krug=new GOval(sirina/2-20*i,visina/2-20*i,40*i,40*i); krug.setFilled(true); if(i%2==1) krug.setFillColor(Color.WHITE); else krug.setFillColor(Color.RED); add(krug); } } }

83

Zadatak broj 8

Napisati program koji će animirati crtanje piramide pomoću pravougaonika (čije su dimenzije 20 puta 60 piksela), na način koji je dat na slici desno (baza piramide ima 8 pravougaonika).

Rješenje: /* * * Program koji ce animirati crtanje piramide * pomocu pravougaonika (cije su dimenzije 20 puta 60 piksela), * na nacin koji je dat na slici (baza piramide ima * 8 pravougaonika). Prvi ispisan pravougaonik je pravougaonik na vrhu piramide. * */ import acm.graphics.*; import acm.program.*; public class zadatak02 extends GraphicsProgram { public void run() { GRect pravoug=new GRect(1,1,20,60); while(true) { for(int j=8;j>0;j--) for(int i=9-j;i>0;i--) { pravoug=new GRect(j*30,i*60+30*j,20,60); add(pravoug); pause(40); } pause(340); removeAll(); } } }

84

Zadatak broj 9

Napraviti animaciju za crtanje kvadratića kao što je prikazano na slici.

Rješenje: /* * Napraviti animaciju za crtanje kvadrata kao * sto je prikazano na slici. */ import java.awt.Color; import acm.graphics.*; import acm.program.*; public class Vjezba2 extends GraphicsProgram { public void run() { //Cekaj na klik waitForClick(); //definisi krug GRect pravougaonik; //postavi beskonacnu petlju while(true) { //postavi dvije for petlje za ispisivanje //zeljenog oblika for(int i=1;i<=10;i++) { pravougaonik=new GRect(50+40*i,50+40,40,40); pravougaonik.setFilled(true); pravougaonik.setFillColor(Color.YELLOW); add(pravougaonik); pause(100); } for(int i=2;i<=10;i++) { pravougaonik=new GRect(450,50+40*i,40,40); pravougaonik.setFilled(true); pravougaonik.setFillColor(Color.YELLOW); add(pravougaonik); pause(100); } for(int i=1;i<10;i++) { pravougaonik=new GRect(450-40*i,450,40,40); pravougaonik.setFilled(true); pravougaonik.setFillColor(Color.YELLOW); add(pravougaonik); pause(100); } for(int i=1;i<10;i++) { pravougaonik=new GRect(50+40,450-40*i,40,40); pravougaonik.setFilled(true); pravougaonik.setFillColor(Color.YELLOW); add(pravougaonik); pause(100); } pause(1000); removeAll(); } } }

85

Zadatak broj 10

Napisati program koji će animirati crtanje piramide pomoću pravougaonika (čije su dimenzije 20 puta 60 piksela), na način koji je dat na slici desno (baza piramide ima 8 pravougaonika).

Rješenje: /* * * Program koji ce animirati crtanje piramide * pomocu pravougaonika (cije su dimenzije 20 puta 60 piksela), * na nacin koji je dat na slici (baza piramide ima * 8 pravougaonika). * * */ import acm.graphics.*; import acm.program.*; public class zadatak02 extends GraphicsProgram { public void run() { GRect pravoug=new GRect(1,1,20,60); while(true) { for(int j=0;j<8;j++) for(int i=0;i<8-j;i++) { pravoug=new GRect(j*20,i*60+30*j,20,60); add(pravoug); pause(40); } pause(340); removeAll(); } } }

86

Zadatak broj 11

Napisati program koji ce animirati crtanje pravouglog trougla pomoću krugova (čije su dimenzije 40 puta 40 piksela), na način koji je dat na slici (hipotenuza kao i katete trougla imaju po 10 krugova). Prvi ispisan krug je krug u lijevom gornjem čošku.

Rješenje: /* * * Program koji ce animirati crtanje pravouglog trougla * pomocu krugova (cije su dimenzije 40 puta 40 piksela), * na nacin koji je dat na slici (hipotenuza kao i katete trougla * imaju po 10 krugova). Prvi ispisan krug je krug u * lijevom gornjem cosku. * */ import acm.graphics.*; import acm.program.*; public class vjezbaBroj2 extends GraphicsProgram { public void run() { //Cekaj na klik waitForClick(); //definisi krug GOval krug; //postavi beskonacnu petlju while(true) { //postavi dvije for petlje za ispisivanje //zeljenog oblika for(int j=0; j<11; j++) for(int i=1;i<11-j;i++) { krug=new GOval(50+40*i+40*j,50+40*j,40,40); add(krug); pause(100); } pause(1000); removeAll(); } } }

87

Zadatak broj 12

Program koji ce animirati crtanje pravouglog trougla pomoću krugova (cije su dimenzije 40 puta 40 piksela), na način koji je dat na slici (hipotenuza kao i katete trougla imaju po 10 krugova). Prvi ispisan krug je krug u lijevom gornjem čošku. Krugovi u prvom, trećem, petom, sedmom i devetom redu trebaju biti obojeni.

Rješenje: /* * * Program koji ce animirati crtanje * pravouglog trougla pomocu krugova (cije * su dimenzije 40 puta 40 piksela), * na nacin koji je dat na slici (hipotenuza * kao i katete trougla imaju po 10 * krugova). Prvi ispisan krug je krug u * lijevom gornjem cosku. Krugovi u * prvom, trećem, petom, * sedmom i devetom redu trebaju biti * obojeni. * */ import java.awt.Color; import acm.graphics.*; import acm.program.*; public class vjezbaBroj2 extends GraphicsProgram { public void run() { //Cekaj na klik waitForClick(); //definisi krug GOval krug; //postavi beskonacnu petlju while(true) { //postavi dvije for petlje za ispisivanje //zeljenog oblika for(int j=0; j<11; j++) for(int i=1;i<11-j;i++) { krug=new GOval(50+40*i+40*j,50+40*j,40,40); add(krug); if(j%2==0) { krug.setFilled(true); krug.setFillColor(Color.YELLOW); } pause(100); } pause(1000); removeAll(); } } }

88

Zadatak broj 13

Program koji će animirati crtanje prikazanog znaka pomoću krugova (dimenzije krugova su 40 puta 40 piksela), na način koji je dat na slici. Prvi ispisan krug je krug u lijevom gornjem čosku. Svi krugovi su obojeni žutom bojom.

Rješenje: import java.awt.Color; import acm.graphics.*; import acm.program.*; public class vjezbaBroj2 extends GraphicsProgram { public void run() { //Cekaj na klik waitForClick(); //definisi krug GOval krug; //postavi beskonacnu petlju while(true) { //postavi dvije for petlje za ispisivanje //zeljenog oblika for(int i=1;i<5;i++) { krug=new GOval(50+40*i,50+40,40,40); krug.setFilled(true); krug.setFillColor(Color.YELLOW); add(krug); pause(100); } for(int i=1;i<9;i++) { krug=new GOval(50+40*5,50+40*i,40,40); krug.setFilled(true); krug.setFillColor(Color.YELLOW); add(krug); pause(100); } for(int i=1;i<6;i++) { krug=new GOval(50+40*4+i*40,50+40*9,40,40); krug.setFilled(true); krug.setFillColor(Color.YELLOW); add(krug); pause(100); } for(int i=1;i<9;i++) { krug=new GOval(50+40*4+5*40-i*40,50+40*9-i*40,40,40); krug.setFilled(true); krug.setFillColor(Color.YELLOW); add(krug); pause(100); } pause(1000); removeAll(); } } }

89

Zadatak broj 14

Napisati program koji će crtati krugove različitih i veličina na platno, svaki put na slučajno odabrano mjesto na platnu sve dok se ne napravi klik miša. Na klik miša izbrisati sve nacrtane krugove i početi crtanje iznova.

Rješenje: /* * Napisati program koji će crtati krugove različitih * boja i veličina na platno, svaki put na slučajno odabrano mjesto * na platnu sve dok se ne napravi klik miša. Na klik miša * izbrisati sve nacrtane krugove i početi crtanje iznova. * */ import java.awt.Color; import java.awt.event.MouseEvent; import acm.graphics.*; import acm.program.*; import acm.util.RandomGenerator; public class Vjezba_2 extends GraphicsProgram { public void init() { addMouseListeners(); } public void mouseClicked(MouseEvent e) { removeAll(); } public void run() { waitForClick(); int sirina=0, visina=0; sirina=getWidth(); visina=getHeight(); int x=gen.nextInt(3,(sirina+visina)/2); int y=gen.nextInt(3,(sirina+visina)/2); int r=gen.nextInt(3,(sirina+visina)/8); Color boja=gen.nextColor(); GOval krug=new GOval(x,y,r,r); while(true) { x=gen.nextInt(3,(sirina+visina)/2); y=gen.nextInt(3,(sirina+visina)/2); r=gen.nextInt(3,(sirina+visina)/8); boja=gen.nextColor(); krug=new GOval(x,y,r,r); krug.setFilled(true); krug.setFillColor(boja); add(krug); pause(500); } } private RandomGenerator gen=RandomGenerator.getInstance(); }

90

Zadatak broj 15

Napisati program koji će na klik miša (pritisne i pusti dugme misa sa kratkim vremenom između) na platno učitati sliku pod imenom sapa.png. Učitana slika treba da bude dimenzija 100 puta 100 piksela. Slika treba da sadrzi crtež životinjske šape (skicu šape nacrtati npr. u Photoshopu). Poslije izvršenog klika centar slike treba da bude na poziciji klika, a ne na čošku slike. Omogučiti i to da se učitana slika moze pomjerati.

Rješenje: /* * Program koji ce na klik misa (pritisne i * pusti dugme misa sa kratkim vremenom izmedu) * na platno ucitati sliku pod imenom sapa.png. * Ucitana slika treba da bude dimenzija 100 puta * 100 piksela. Slika treba da sadrzi crtez zivotinjske * sape (skicu sape nacrtati npr. u Photoshopu). Poslije * izvrsenog klika centar slike treba da bude na * poziciji klika, a ne na cosku slike. Omoguciti i to * da se ucitana slika moze pomjerati. */ import acm.graphics.*; import acm.program.*; import java.awt.event.*; public class zadatak03 extends GraphicsProgram { public void init() { addMouseListeners(); } public void mouseClicked(MouseEvent e) { GImage sapa=new GImage("sapa.png"); add(sapa, e.getX()-50, e.getY()-50); } public void mousePressed(MouseEvent e) { tackaKlika=new GPoint(e.getPoint()); objekatZaPomjeranje=getElementAt(tackaKlika); } public void mouseDragged(MouseEvent e) { if(objekatZaPomjeranje!=null) { objekatZaPomjeranje.move(e.getX()-tackaKlika.getX(), e.getY()-tackaKlika.getY()); tackaKlika = new GPoint(e.getPoint()); } } private GPoint tackaKlika; private GObject objekatZaPomjeranje; }

91

*/

Zadatak broj 16

Napisati program koji će na svaki paran klik miša na platno učitati sliku pod imenom slika1.png, a na svaki neparan klik miša na platno učitati neku drugu sliku pod imenom slika2.png. Učitana slika treba da bude dimenzija 100 puta 100 piksela. Slike nacrtati npr. u Photoshopu. Poslije izvršenog klika centar slike treba da bude na poziciji klika, a ne na cosku slike (tj. kursor miša nakon izvršenog klika treba da se nalazi na sredini slike). Omogučiti i to da se učitana slika može pomjerati. Rješenje: /* * Program koji ce na svaki paran klik misa * na platno ucitati sliku pod imenom slika1.png, * a na svaki neparan klik misa na platno ucitati neku * drugu sliku pod imenom slika2.png. * Ucitana slika treba da bude dimenzija 100 puta * 100 piksela. Slike nacrtati npr. u Photoshopu. * Poslije izvrsenog klika centar slike treba da bude na * poziciji klika, a ne na cosku slike (kursor misa nakon izvrsenog * klika treba da se nalazi na sredini slike). Omoguciti i to * da se ucitana slika moze pomjerati.

import acm.graphics.*; import acm.program.*; import java.awt.event.*; public class vjezbaBroj3 extends GraphicsProgram { public void init() { addMouseListeners(); } public void mouseClicked(MouseEvent e) { i=i+1; GImage slika; if(i%2==0) { slika=new GImage("slika1.png"); add(slika,e.getX()-50,e.getY()-50); } if(i%2==1) { slika=new GImage("slika2.png"); add(slika,e.getX()-50,e.getY()-50); } } public void mousePressed(MouseEvent e) { tackaKlika=new GPoint(e.getPoint()); objekatZaPomjeranje=getElementAt(tackaKlika); } public void mouseDragged(MouseEvent e) { if(objekatZaPomjeranje!=null) { objekatZaPomjeranje.move(e.getX()-tackaKlika.getX(), e.getY()-tackaKlika.getY()); tackaKlika = new GPoint(e.getPoint()); } } int i=0; private GPoint tackaKlika; private GObject objekatZaPomjeranje; }

92

Zadatak broj 17

Napraviti animaciju za crtanje krugova u kružnom obliku. Uputa: Iskoristiti znanje polarnih koordinata. Prisjetimo se:

Polarne koordinate imaju oblik x=r cos(fi) y=r sin(fi) gdje je fi ugao izmedju nula i 2pi, Math.cos(3.1416) kao

rezultat daje kosinus broja pi, Math.sin(3.1416) kao rezultat daje kosinus broja pi, (na prikazanoj slici je nacrtano 50 krugova poluprecnika 80 piksela). Rješenje: /* * Napraviti animaciju za crtanje krugova * u kruznom obliku. * Uputa: Iskoristiti znanje polarnih koordinata. * Prisjetimo se: Polarne koordinate imaju oblik * x=r cos(fi) * y=r sin(fi) * fi je ugao izmedju nula i 2pi * Math.cos(3.1416) kao rezultat daje kosinus broja pi * Math.sin(3.1416) kao rezultat daje kosinus broja pi * (na prikazanoj slici je nacrtano 50 krugova poluprecnika * 80 piksela). */ import acm.graphics.*; import acm.program.*; public class Vjezba3 extends GraphicsProgram { public void run() { //Cekaj na klik waitForClick(); //definisi krug GOval krug; int sirinaProzora=1, visinaProzora=1, i=1; sirinaProzora=getWidth(); visinaProzora=getHeight(); int centarX=1, centarY=1; centarX=sirinaProzora/2; centarY=visinaProzora/2; for(i=1;i<50;i++) { krug=new GOval(centarX+80*Math.cos((3.1416/25)*i), centarY+80*Math.sin((3.1416/25)*i),40,40); add(krug); pause(100); } } }

93

Zadatak broj 18

Čitavo platno isputniti krugovima prečnika 50 piksela kao na slici. Uputa: Iskoristiti znanje polarnih koordinata. Prisjetimo se: Polarne koordinate imaju oblik

• x=ro cos(fi) • y=ro sin(fi) gdje je fi ugao između nula i 2pi.

Math.cos(3.1416) kao rezultat daje kosinus broja pi, Math.sin(3.1416) kao rezultat daje sinus broja pi. Rješenje: /* * * Čitavo platno isputniti krugovima prečnika 50 piksela kao na slici. * Uputa: Iskoristiti znanje polarnih koordinata. Prisjetimo se: Polarne koordinate imaju oblik * x=r cos(fi) * y=r sin(fi) * gdje je fi ugao između nula i 2pi. * Math.cos(3.1416) kao rezultat daje kosinus broja pi, * Math.sin(3.1416) kao rezultat daje sinus broja pi. * */ import java.awt.Color; import java.awt.event.MouseEvent; import acm.graphics.*; import acm.program.*; import acm.util.RandomGenerator; public class vjezba5 extends GraphicsProgram { public void run() { waitForClick(); int sirina=0, visina=0; sirina=getWidth(); visina=getHeight(); GOval krug; double x=1, y=1; krug=new GOval(1,1,50,50); add(krug); for(int j=1; j<=((sirina+visina))/50; j++) for(int i=0; i<=5*j; i++) { x=50*j*Math.cos((3.1416/(10*j))*(i)); y=50*j*Math.sin((3.1416/(10*j))*(i)); krug=new GOval(x,y,50,50); add(krug); } } }

94

sadržaj vježbi iz programiranja za internet

Documents