javascript +CSS

37
Dalibor Jablanović Napredne Internet i Web tehnologije UVOD: Šta je zapravo Javascript? Javascript je novi skript jezik za korišćenje u programiranju WWW prezentacija. Uveden je odstrane Netscapea u Netscape Navigator, počevši od verzije 2.0, uporedo sa uvođenjem podrške za Javu.Brzo je postigao veliku popularnost i raširenost, toliku da je i sam Microsoft pored uvođenja svog script jezika - Visual Basic Script, koji je kompatibilan sa Visual Basicom i Visual Basic for Aplication, uveo svoju verziju JavaScripta - JScript. Jedini razlog zašto Microsoft nije licencirao JavaScript kao takav jeste što nije dobio licencu. Javascript se uključuje u sadržaj HTML dokumenta i omogućava unapređenje HTML strana sa interesantnim efektima. Na primer, korišćenjem JavaScripta je moguće odgovarati na akcije korisnika usamom WWW čitaču. Ono što je bitno zapamtiti jeste da JavaScript program može da se izvrašava samo u okviru WWW čitača i nigde drugde.Najbolji način za upoznavanje sa jednim Internet orjentisanim jezikom, kakav JavaScript. 1

Transcript of javascript +CSS

Page 1: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

UVOD:

Šta je zapravo Javascript?

Javascript je novi skript jezik za korišćenje u programiranju WWW prezentacija. Uveden je odstrane Netscapea u Netscape Navigator, počevši od verzije 2.0, uporedo sa uvođenjem podrške za Javu.Brzo je postigao veliku popularnost i raširenost, toliku da je i sam Microsoft pored uvođenja svog script jezika - Visual Basic Script, koji je kompatibilan sa Visual Basicom i Visual Basic for Aplication, uveosvoju verziju JavaScripta - JScript. Jedini razlog zašto Microsoft nije licencirao JavaScript kao takav jeste što nije dobio licencu.Javascript se uključuje u sadržaj HTML dokumenta i omogućava unapređenje HTML strana sa interesantnim efektima. Na primer, korišćenjem JavaScripta je moguće odgovarati na akcije korisnika usamom WWW čitaču. Ono što je bitno zapamtiti jeste da JavaScript program može da se izvrašavasamo u okviru WWW čitača i nigde drugde.Najbolji način za upoznavanje sa jednim Internet orjentisanim jezikom, kakav JavaScript.

1

Page 2: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Javascript teorija:

Film ili neki komad se rade po skriptu (scenariju) - spisku akcija koje glumci treba daizvedu. Web skript predvi|a isti tip instrukcija za pretraživać Skript u JavaScriptumože delovati od jedne linije do punog opsega aplikacije. (U svakom slučaju, skriptJavaScripta se skoro uvek pokreće unutar pretraživača.)

Neki programski jezici moraju biti prevedeni u mašinski kod pre izvršavanja.JavaScript je drugačiji, on je jezik koji tumači: pretraživač izvršava svaku liniju skriptekako koja dođe do njega.Ovo je jedna od osnovnih pogodnosti u interpretaciji jezika: pisanje ili menjanje scripteje veoma jednostavno. Menjanje JavaScript skripta je veoma lako, kao menjanjetipičnog HTML dokumenta, a promena je izvršena čim se dokument ponovo učita upretraživaču.

Koje su razlike izmedju jave I javascripta?

Bez obzira na nazive, Java i JavaScript su različiti jezici. Oni predstavljaju dve različite tehnike programiranja na Internetu. Java je programski jezik. JavaScript je (kako mu i samo ime kaže) script jezik.

Razlika je u tome što sa Javom možete da kreirate prave programe, koji mogu da se izvršavaju potpuno nezavisno od WWW čitača (poput programa napisanih sa C++ ), ili Java aplete koje možete da pozivate iz HTML dokumenta i koji se dovlače preko mreže i onda izvršavaju u okviru vašeg WWW čitača. Ipak, najčešće vam za unapređenje HTML dokumenata zaista ne treba “teška artiljerija” poput Jave, jer želite da napravite neki efekat brzo, ne zamarajući se pravim programiranjem. Tu dolazimo na JavaScript, koji je jednostavan za razumevanje i upotrebu. JavaScript jeste zasnovan na Javi, ali postoje i brojne razlike Sl.1.1

2

Page 3: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Sl.1.1 Tabela razlike.

Kako pokrenuti program pisan u JavaScriptu?

JavaScript bez problema izvršavaju Netscape Navigator (od verzije 2.0 gde je i uveden i to na svim platformama) i Internet Explorer (od verzije 3.0), ali će bez sumnje biti podržan i od ostalih čitača Mozila i Google hrome.

Da bi programirali u JavaScriptu morate imati osnovno poznavanje HTML-a, a ne samoJavaScripta.

Pozivanje programa unutar HTML dokumenta:

Ceo program se smešta unutar HTML dokumenta, unutar SCRIPT elementa. Atribut elementa SCRIPT je LANGUAGE, kojim se tačno određuje o kom se skript jeziku radi. Danas postoje dva script jezika na WWW: JavaScript (Netsape) i VisualBasic Script (Microsoft).

Primer 1: Jednostavni javascript program.

<HTML><HEAD><TITLE>Jednostavan JavaScript</TITLE></HEAD><BODY>Ovde ce biti prikazan tekst na uobičajan način: Dalibor Jablanović.<BR><SCRIPT LANGUAGE=”JavaScript”>document.write(“<B>Tekst prikazan iz JavaScripta.</B>”)</SCRIPT>

3

Page 4: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

</BODY></HTML>

JavaScript se unutar HTML dokumenata uvek mora naći unutar SCRIPT elementa. Obratite pri tome pažnju da ako HTML dokument sa JavaScriptom pokušamo da pogledamo sa nekim WWW čitačom koji nema ugrađenu podršku za JavaScript, gornji dokument će se nepravilno prikazati.

Varijable, tipovi podataka, konverzije i operatori

NAZIVI VARIJABLI

prvi znak mora biti slovo engleske abecede ili znak potcrtavanja ("_") mogu sadržavati brojeve i slova engleske abecede velika i mala slova se razlikuju, no, uobičajeno je da se pišu malim slovima! ključne riječi (for, if, else, class, byte, int...) ne mogu se koristiti u imenu

TIPOVI PODATAKA

brojevni (npr: 42, 3.14159 ...) logički (Boolean) - (true / false) stringovi (npr: "Dobar dan!") null (specijalne ključne riječi s null vrijednošću)

SPECIJALNI KARAKTERI

U stringovima možete koristiti sljedeće specijalne karaktere:  \b = jedno mjesto lijevo (backspace)  \f = jedan red dolje (form feed)  \n = na početak novog reda (new line character)

4

Page 5: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

 \r = return (carriage return)  \t = tabulator (tab)

KONVERZIJA PODATAKA

Javascript je slobodni tip jezika i ne zahtijeva posebno deklariranje tipa podataka,pa će se konverzija obaviti automatski.Principijelno, varijable deklariramo na slijedeći način:var broj1 = 42var tekst = "Dobar dan!"ali možemo i ovako:broj1 = 42tekst = "Dobar dan!"Generalno, u kombinaciji broja i stringa Javascript konvertira broj u string. Na primjer:x = "Upisali ste broj " + 42y = 42 + " je vaš odgovor."Za konverziju stringa u broj koristimo sljedeće funkcije: EVAL - procjenjuje string i ako je moguće pretvara ga u broj; parseINT - konvertira string u integer specificirane base, ako je moguće; parseFLOAT - konvertira string u floating-point broj, ako je moguće.

5

Page 6: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Kontrola izvršavanja programa:

JavaScript podržava kontrolne strukture poznate većini programera iz drugih jezika, poput:

•while petlje, iz koje možemo izaći sa break (primer izračunava sumu svih brojeva od 0 zaključno sa 10)

{n=0;Suma=0while (n<=10){n++;Suma+=n}}

• for petlja (primer ispisuje svih šest nivoa naslova):

{for(i=1;i<=6;i++){document.write(“<H”+i+”> Naslov nivoa “ i “</H”+i+”>”)}}

• for .. in, pomoću nje možemo proći kroz sve osobine (properties) nekog objekta. Koliko jedan objekat ima osobina, toliko puta će se izvršiti ova for petlja.

{for (prom in obj){proveri()}}

• break, prekida izvršavanje for ili while petlje i nastavlja se izvršenje skripta posle petlje koja jeprekinuta:

{while(i<5){

6

Page 7: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

if(i==2){break}}}

• continue, prekida izvršavanje bloka naredbi u petlji i nastavlja izvršavanje petlje u sledećoj iteraciji:

{while(i<5){if(i==2){continue}}}

• if..else, poznato svima odranije, može postojati samo u obliku if(uslov){} kao u ilustraciji naredbe

continue ili if(uslov){ } else { }:if (n>2){Uvod u JavaScript Srđan Pantić, [email protected](“N je veće od 2”)}else {document.write(“N je manje ili jednako 2”)}

7

Page 8: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Da bi smo mogli da počnemo sa pisanjem programa u JavaScriptu, potrebno je da smo upoznati sa osnovnom strukturom i sintaksom naredbi JavaScripta.

Naredbe i struktura JavaScripta veoma podsećaju na onu korišćenu u jezicima Java, C++ i C.

JavaScript program je izgrađen iz funcija i naredbi, operatora i izraza. Osnovna jedinica je naredba iliizraz koji se završava sa tačkom-zarezom.

document.writeln("Ovo radi!<BR>");

Gornja komanda poziva writeln() metod, koji je deo document objekta. Tačka-zarez ukazuje na kraj komande. JavaScript komanda se može rasprostreti na više redova, sve dok se završava sa tačkom-zarezom. Isto tako, može se više naredbi naći u jednom redu, sve dok se završava sa tačkomzarezom.

Komandni blokovi

Možemo grupisati naredbe u blokove naredbi, izdvojenih velikim zagradama:

{document.writeln("Da li ovo radi? ");document.writeln("Radi!<BR>");}

Blokovi naredbi se koriste u definiciji funkcija i kontrolnim strukturama

Izlaz iz JavaScripta

Jedna od osnovnih mogućnosti svakog programskog jezika je da pošalje tekst na izlaz. Ni JavaScript nije izuzetak. U JavaScriptu izlaz može biti preusmeren na nekoliko mesta uključujući trenutni prozor dokumenta i pop-up dijalog.Osnovni izlaz je preusmeravanje teksta u prozor WWW klijenta, što se obavlja prosleđivanjemHTML koda. Rezultujući tekst će biti interpretiran kao HTML kod i prikazan u prozoru WWW klijenta. To ostvarujemo sa metodima write (šalje tekst u prozor WWW čitača bez pomeranja) I writeln (isto kao write(), s tim što se posle ispisa teksta kurzor pomera u sledeći red) objektadocument:

document.write("Test");

8

Page 9: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

document.writeln('Test');

Događaji u JavaScriptu:

JavaScript programi su većinom pokretani događajima (event-driven). Događaji su akcije koje se pojavljuju, obično, kao rezultat nečega što korisnik uradi. Na primer, događaj je kliktanje mišem, kada elemenat forme dobije fokus i slično.

Koristeći obrađivače događaja (eng. event handler) ugrađene u JavaScript, mogu se pisati funkcije koje se aktiviraju kada se određeni događaj desi.Obrađivači događaja su predstavljeni kao specijalni atributi koji modifikuju ponašanje HTML elemenata u okviru koji se nalaze

Na primer:

<body OnLoad="alert(Dobrodošli!)">

U gornjem primeru, oznaci početka tela HTML dokumenta dodat je atribut OnLoad, koji obrađuje događaj učitavanja HTML dokumenta. U konkretnom slučaju, kada se učitavanje HTML dokumenta završi, izvršiće se naredba JavaScripta dodeljena atributu OnLoad, u prozoru će se ispisati poruka “Dobrodošli”.Generalno, sintaksa za upotrebu obrađivača događaja je:

<HTML_Oznaka Ostali_atributi eventHandler="JavaScript program">

Događaji su signali koji se generišu kada se odigra određena akcija. JavaScript može da detektuje te signale i mogu da se pišu programi koji reaguju na te događaje.

Događaji u WWW čitaču su kada korisnik klikne na hipertekst link, kada se promeni podatak uulaznoj polji forme ili kada se završi učitavanje WWW dokumenta.

Vrste dogadjaja cu vam pokazati u tabeli Sl.1.2

9

Page 10: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Sl.1.2 vrste dogadjaja

Događaje vezujemo za sledeće HTML elemente:

• Focus, Blur, Change događaji: tekst polja forme, textarea i selekcije,• Click događaj: dugmad, linkove, polja za izbor, polja za selekciju,• Select događaj: tekst polja forme, textarea,• MouseOver događaj: linkovi.

10

Page 11: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Objekti u JavaScriptu

Objektno orijentisano programiranje (eng. Object Oriented Programming, skraćeno OOP) je, u osnovi, stil programiranjakod koga su povezani koncepti grupisani zajedno. Ukoliko imate, recimo, pet podataka i tri funkcije koje manipulišu nad tim podacima, tada te podatke i funkcije grupišete zajedno u generički kontejner poznat pod imenom objekt. JavaScript takođe podržava objekte. Objekti sadrže podatke, osobine objekta (eng. properties), koji su JavaScript promenljive. Funkcije objekta su poznate kao metodi objekta (eng. methods). JavaScript ima takođe određen broj ugrađenih funkcija.Takođe, skoro svaki HTML element je dodeljen nekom JavaScript objektu. Ti objekti su razvrstani u logičkoj hijerarhiji koja ima oblik stabla direktorijuma.Programer takođe može definisati svoje objekte.

Browser može kreirati objekte bazirane na sadržaju stranice, npr.:

document.mojaforma //forma document.mojaforma.Check1 //check polje na formi document.mojaforma.Button1 //gubm na formi

Oni mogu imati svojstva kao što su:

document.mojaforma.action = "http://url.com/obr.htm"document.mojaforma.method = getdocument.mojaforma.length = 5document.mojaforma.Button1.value = "Klikni ovde"document.mojaforma.Button1.name = Gumb1document.mojaforma.text1.value = "sadržaj tekst polja"document.mojaforma.text1.name = TekstPolje1document.mojaforma.Check1.defaultChecked = truedocument.mojaforma.Check1.value = ondocument.mojaforma.Check1.name = CheckPolje1

11

Page 12: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

JavaScript praktični primeri:

Primer 1: Ovo je primer iz lekcije dogadjaji u Javascriptu:

<html><head><title>Dogadjaji u JavaScript</title></head>

<body>

<img border= "0" alt="Visit W3Schools!" src="Dalibor.jpg" id="b1" onmouseOver="mouseOver()" onmouseOut="mouseOut()" /></a>

<script type="text/javascript">function mouseOver(){document.getElementById("b1").src ="Dalibor.jpg";}function mouseOut(){document.getElementById("b1").src ="Dalibor1.jpg";}</script>

<blockquote>&nbsp;</blockquote></body></html>

</body></html>

Kao izlaz dobija se Sl.2.1:

12

Page 13: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Sl.2.1 Izlaz programa

Kad se prodje misem preko slike dobija se Sl.2.2:

13

Page 14: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Primer 2: Evo primera kako mozemo kontrolisati onClick dogadjaj unutar <a href…>I <input…>

<html><head><title>JavaScript - OnClick</title>

<script language=JavaScript> <!--function dajPoruku1() {ime = prompt("Upišite svoje ime:","Vaše ime je ?")alert("Bok, " + ime)return false;}function dajPoruku2() {alert("Ovo je dijalog ALERT!") }--></script></head>

<body>Evo nekoliko načina upotrebe onClick: <hr>

Klikom <A onclick="return dajPoruku1()"

14

Page 15: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

href="http://www.knowledge-reactor.hr">ovde</A> otvarate PROMPT i

potom ALERT dijalog! <BR><BR>Kliknite na gumb <INPUT onclick=dajPoruku2() type=button value="Dijalog ALERT!"> <BR><BR>Klikom

<A href="javascript:dajPoruku2()">ovde</A> otvarate ALERT dijalog!

</body>

</html>

Na izlazu programa dobija se sl.2.3:

Sl.2.3

Ako kliknete na ovde dobija se slika:

15

Page 16: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Primer 3: U ovom primeru cu vam prikazati kako se pomocu javascript menja boja pozadine(bgcolor) prelaskom misa preko teksta:

<html><head> </head><body>

<script language=JavaScript><!—<p>[<a href="/"onmouseover="document.bgColor='green'">Zelena</a>]<br>[<a href="/"onmouseover="document.bgColor='Crvena'">Red</a>]<BR>[<a href="/"onmouseover="document.bgColor='pink'">Roza</a>]<br>[<a href="/"onmouseover="document.bgColor='blue'">Plava</a>]<br>[<a href="/"onmouseover="document.bgColor='royalblue'">Nezno plava</a>]<br>

16

Page 17: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

[<a href="/"onmouseover="document.bgColor='yellow'">Zuta</a>]<br>[<a href="/"onmouseover="document.bgColor='brown'">Braon</a>]<br>[<a href="/"onmouseover="document.bgColor='white'">Bela</a>]<BR>[<a href="/"onmouseover="document.bgColor='black'">Crna</a>]<br>[<a href="/"onmouseover="document.bgColor='orange'">Orange</a>]<br></body></html>-->

</body></html>

Izlaz ovog programa bi bio, napominjem da svaki tekst u redu znaci boju:

Sl.2.4 Prelazak misa preko teksta gde pise zelena boja

17

Page 18: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Sl.2.5 Prelazak preko teksta Bela

Primer 4. Jedan primer pokretnog teksta u javascriptu:

<html><head></head><body><!-- javascript-->

<marquee direction="left"><marquee direction="right">Student: Dalibor Jablanović RTs 9-11</marquee></marquee>

<marquee direction="up"><marquee direction="right">Napredne internet i Web tehnologije</marquee></marquee>

<marquee direction="right">Profesor: Mr.Zoran Veličković</marquee>

<marquee direction="down"><marquee direction="right">Seminarski Javascript</marquee></marquee><br />

18

Page 19: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

</body></html>

Izlaz bi bio Sl.2.6

Sl.2.6 tekst se pomera u vremenu

Sledeći neki period u toku vremena bi bio:

19

Page 20: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Sl.2.7 Sledeci period, sto znaci da se slika kreće u vremenu

Primer 5. Dugmići (batton) u javascript:

20

Page 21: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

<html><head></head>

<body<script language="JavaScript">

function surfto(form) { var myindex=form.dest.selectedIndex window.open(form.dest.options[myindex].value,"main","menubar=1,toolbar=0,location=0,directories=0,status=1,copyhistory=0,width=235,height=235");}//--></SCRIPT><CENTER><FORM NAME="myform"> <SELECT NAME="dest" SIZE=1> <OPTION VALUE="http://www.vtsnis.edu.rs/">VTŠ Niš <OPTION VALUE="http://160.99.37.123/Radovi/GENERACIJA_2011_12/Dalibor%20Jablanovic%20RTs%209-11/Sajt/index1.html">Moj projekat <OPTION VALUE="http://www.infostud.com/">Poslovi Infostud </SELECT><P><INPUT TYPE="BUTTON" VALUE="Go !" onClick="surfto(this.form)"></FORM></CENTER>

</body></html>

Izlaz programa bi bio slika 2.8:

21

Page 22: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Sl.2.8 kombo box sadrzi jos nekoliko ponudjenih opcija

Kada kliknemo na dugme Go! Otvara se novi prozor tj adresa na kojoj je VTŠ Niš

CSS22

Page 23: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Kao prvo i osnovno, da bi učenje CSS -a imalo nekog smisla morate znati HTML.

CSS (Cascading Style Sheets) je jezik formatiranja pomoću koga definišemo izgled internet strana.

Kad se pojavio internet jedino je HTML definisao kompletan izgled, strukturu i sadržaj web stranica. Kada su u HTML 3.2 dodati tagovi poput <font> počinju poteškoće za web programere, jer HTML dokumenti počinju bivati sve veći, i vrlo je teško bilo snalaziti se u njima. Da bi se uprostio takav HTML dokument od verzije HTML 4.0 uveden je CSS. Sa uvodjenjem CSS web dokumenti se dele na:

1. HTML deo koji definiše sadržaj internet stranice, 2. CSS deo koji definiše izgled i strukturu internet stranice (kao na primer boja

slova, pozadine, margine i tako dalje).

Šta je to magično postignuto u CSS što uprošćava web programiranje? Kao što znamo da bi definisali na primer boju teksta moramo upotrebiti tag <font> sa atributom COLOR. E sad ako imamo 100 ili 1000 stranica onda to znači da na svaku stranu moramo upotrebiti tag FONT kako bi smo definisali boju. Znaži 1000 stranica daje 1000 upotrebe taga FONT sa svim parametrima koje on poseduje. Na svakoj stranici pored <font> taga postoje u proseku još 100 taga koji definišu izgled tablica, margina itd itd, što daje preko 10 000 tagova. E sad to sve pomnožimo u proseku sa oko 20 znaka kojim je ispisan svaki tag sa svojim atributima, što daje preko 200 000 znaka. To je negde oko 200 Kb. To je možda čak i 10% od samog tekstualnog sadržaja web sajta.

E sad tu stupa na scenu CSS da nam olakša i pisanje stranica ali što je još važnije da nam štedi prostor na hostu. Naime, sve te stilske osobine tekstova, slika, pozadina, tabela itd. definišemo samo jednom u fajlu pod nazivom na primer stil.css. Taj CSS fajl zatim ubacujemo u HEAD sekciju svakog HTML dokumenta kao link. Sve to rezultira definisanju izgleda web strana samo na jednom mestu u tom CSS fajlu. Taj CSS fajl može se pozivati neograničen broj puta.

Medjutim CSS ima daleko veće dizajnerske mogućnosti od čistog HTML-a. Zato je danas CSS gotovo nezamenjljiv u dizajniranju internet stranica.

CSS atributi, vrednosti i jedinice mere

23

Page 24: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Neke od CSS atributa možemo kategorisati u sledeće grupe:

definicija pozadine elementa ivica

okvir

prikaz

dimenzije

font

generisani sadržaj

margine

unutrašnji prazan prostor

pozicija

izgled pripadajućeg teksta

Vrednosti atributa mogu biti:

predefinisane ključne reči brojevne vrednosti

Primeri predefinisanih ključnih reči su recimo "scroll" - da se kreće uvek zajedno sa sadržajem elementa, ili "fixed" - da stoji uvek na istom mestu bez obzira na kretanje sadržaja.

Brojevne vrednosti se mogu zadavati na nekoliko načina:

zadajući samo brojevnu vrednost zadajući brojevnu vrednost navodeći i jedinicu veličine (px, em, pt, ...)

Ako zadajemo samo brojevnu vrednost, imamo mogućnost da je pišemo na dva načina:

u dekadnom sistemu u heksadekadnom sistemu (#a4fde3), a ovaj sistem se najviše koristi u definiciji

boje

Određena CSS svojstva kao što smo napisali, imaju vrednost u odredjenim jedinicama mere. CSS jedinice mere su:

px - piksel, označava broj tačkica na ekranu

24

Page 25: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

pt - point, najčešće se koristi za zadavanje veličina slova (ovo je jedinica mere koja odgovara veličini slova u Word-u). Inače, 1pt = 1/72 inča.

pc - pika, jedinica mere koja se ređe zadaje. 1pc = 12pt.

mm, cm, in - milimetri, centimetri ili inči se retko zadaju za stilove koji se prikazuju na ekranu, ali su korisni kada se dokument priprema za štampanje

% - procenti predstavljaju relativnu jedinicu mere. Kada se zada npr. veličina nekog bloka u procentima, njegova veličina će biti podešena kao npr. 60% od rezolucije ekrana ili bloka u kome se to što se definiše nalazi.

em - relativna mera u odnosu na trenutnu veličinu fonta. Ako je font veličine 12pt, onda će 2em predstavljati veličinu od 24pt.

ex - još jedna relativna mera u odnosu na veličinu slova, 1ex je otprilike jednak polovini veličine fonta.

U praksi se najčešće zadaju px, pt ili procenti.

CSS i font

Neki FONT atributi imaju za vrednosti predefinisane ključne reči, a nekima se vrednost zadaje kao numerička vrednost. Numeričke vrednosti su praćene mernom jedinicom (px, pt, %...). Jedinica se navodi bez razmaka, npr: "15px". Imamo sledeće atribute fonta:.

font-family - naziv fonta, zadaje se unutar navodnika ako font ima razmake. Moguće je zadati nekoliko fontova odvojenih zarezom, pri čemu web čitač pokušava da učita prvi, pa ako ne uspe drugi, itd. Kao vrednost font-familiy mogu da se zadaju na primer vrste slova kao što je Arial, Times New Roman, Century, itd. Medjutim osim vrste slova mogu se zadavati i varijacije izabrane vrste slova: serif, sans-serif, cursive, fantasy, monospace. Detaljnije videćemo u primeru.

font-size - veličina fonta, zadaje se na više načina. Postoje i ovde kao vrednosti predefinisane ključne reči, iako se ređe zadaju:

o xx-small

o x-small

o small

o medium

o large

25

Page 26: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

o x-large

o xx-large

o smaller

o larger

Ali kao najčešća vrednost zadaje se broj koji definiše fiksnu veličinu slova u pikselima, milimetrima, santimetrima i ostalim CSS veličinama. Moguće je i procentualno definisanje veličine fonta (%) - koji definiše procentualno veličinu slova u odnosu na zadatu veličinu okolnih slova. Mi nećemo moći sve prikazati primerima ali nije loše Vi da izvrtite sve varijante jer tako ćete dobiti predstavu o kakvim veličinama slova se radi, a ujedno i da stičete rutinu u pisanju CSS.

font-style - definiše dodatno oblik slova u smislu normalnog ili iskošenog itd. Vrednosti: normal, italic, oblique.

font-variant - ispis slova. Vrednosti: normal, small-caps.

font-weight - obična ili masna slova (debljina slova). Vrednosti: normal, bold, bolder, lighter, 100, 200, ..., 900.

Ubacivanje jednog CSS stila :

<html>

<style type="text/css"><!-- .style1 {color: #006400 } .style5 {

color: #006400; font-size: 32px;

font:"Lucida Sans Unicode", "Lucida Grande", sans-serif; }

body {background-image: url(prepravljena%20daska.gif);color: #D6D6D6;

}--></style></head>

26

Page 27: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

<body><center>

<span class="style5">Chat Soba</span>

</body></html>

Kao izlaz ovoga koda dobijamo:

Sl.3.1 CSS kaskadni stil

27

Page 28: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Zaljučak:

Iz ovog izlaganja sam zakljucio da je javascript je programski jezik koji opsluzuje korisnika, da nije javascripta nasa HTML stranica bi bila dosta primitivna, to jest bez raznih aplikacija, ustanovili smo da javascript moze da obraduje dogadjaje sto smo i prestavili sa praktčnim primerima, mogu da se urade razni efekti sa slovima, bojama, slikama, pozadinom. Moguce je ubacivanje razjnoraznih aplikacija na nasu HTML stranicu. Lako ga je umetnuti u HTML stranicu.Iz izlaganja se vidi da je danasnja html stranica nezamisliva i bez CSS kaskadnih stilova koji sluze za ulepsavanje teksta, dodavanje pozadine tekstu, i niz mogucnosti. CSS stilovi su veoma pogodni za definisanje velikog broja elemenata unapred. To znači, da jedan CSS stil može da definiše više elementa, i da to važi za sve elemente celog dokumenta koji su pod tim stilom, odnosno u nekoj klasi

28

Page 29: javascript +CSS

Dalibor Jablanović Napredne Internet i Web tehnologije

Literatura:

http://tutoriali.org/AJAX_i_JavaScript.html

http://www.ic.ims.hr

http://www.javascriptfreecode.com

http://www.osnove-programiranja.com

29