| Kôd u HTML dokumentu | Objašnjenje | Rezultat prikazan u browser-u | ||
| <HTML>
<HEAD></HEAD> <BODY> Rezultat ispisa:<BR> <SCRIPT LANGUAGE="JavaScript">
kraj primera </BODY>
|
HTML iskazi početak Java Scripta upis u HTML...
kraj JavaScript-a
|
|
Naredbom document.write(...)
unutar Java Scripta se u dokument ispisuje HTML kod ili korisnički tekst.
U gore navedenom primeru svojstvo
document.lastModified
vraća datum i vreme poslednje izmene dokumenta.
Tekst i naredbe HTML-a se stavljaju
unutar navodnika. Funkcije Java Scripta i HTML iskazi međusobno se povezuju
znakom plus (+).
| PRIKAZ INFORMACIJA O DOKUMENTU |
Dokument se u JavaScriptu tretira kao objekat koji predstavlja sadrzaj prozora ili okvira. Ovaj objekat ima svojstva koja specifikuju informacije o dokumentu: njegov URL, njegove boje, datum kada je poslednji put modifikovan, URL dokumenta koji ga je pozvao, i slicno. Ovaj objekat ima i vise metoda koji podrzavaju dinamicko pisanje u dokument (metod document.write()koji je koriscen u prethodnom primeru), otvaranje novog dokumenta.
Sta je rezultat rada sledeceg Java Script kôda? Zašto? Otvorite dokument u FF, IE browser-u.
<HTML> <HEAD><TITLE>Primer 2</TITLE></HEAD> <body> <HR><BR><BR> Dokument: <EM><SCRIPT>document.write(document.title);</SCRIPT></EM><BR> URL: <EM><SCRIPT>document.write(document.URL);</SCRIPT></EM><BR> Poslednja izmena: <EM><SCRIPT>document.write(document.lastModified);</SCRIPT></EM><BR> </body> </HTML>
Objekat document objekat - trenutno prikazani HTML dokument
Upotreba
window.document
document
Primerak objekta tipa document je smesten u polje document objekta tipa window.
U specijalnom slucaju, kada se referise objekta tipa document tekuceg prozora (onog u
kome se izvršava JavaScript program) može se izostaviti referisanje objekta window.
Svojstva
alinkColor Niska koja specifikuje boju aktivirane veze. Može biti postavljena u
zaglavlju HTML dokumenta ili kao vrednost artibuta ALINK elementa <BODY>.
anchors[] Niz sidra u dokumentu; po jedan element za svaku vezu polaska.
anchors.length Ceo broj koji može samo da se cita i koji specifikuje broj elemenata
u nizu anchors[].
applets[] Niz Java objekata u dokumentu; po jedan element za svaki <APPLET> koji se pojavljuje u dokumentu.
applets.length Ceo broj koji može samo da se cita i koji specifikuje broj elemenata u nizu applets[].
bgColor Niska koja specifikuje boju pozadine dokumenta. Na pocetku se
postavlja kao vrednost artibuta BGCOLOR elementa <BODY>.
cookie Niska cija je vrednost 'cookie koji je pridruzen dokumentu.
domain Niska koja specifikuje Internet domen sa koga je dokument. Koristi se iz razloga bezbednosti.
embeds[] Niz Java objekata, po jedan element za svaki <EMBED> koji se
pojavljuje u dokumentu.
embeds.length Ceo broj koji može samo da se cita i koji specifikuje broj elemenata u nizu embeds[].
fgcolor Niska koja specifikuje boju teksta dokumenta. Može biti postavljena
u zaglavlju HTML dokumenta ili kao vrednost artibuta TEXT elementa <BODY>.
forms[] Niz Form objekata, po jedan element za svaki <FORM> koji se pojavljuje u dokumentu.
forms.length Ceo broj koji može samo da se cita i koji specifikuje broj elemenata u nizu forms[].
images[] Niz Image objekata, po jedan element za svaki <IMG> koji se pojavljuje u dokumentu.
images.length Broj elemenata u nizu images[].
lastModified Niska koja moze samo da se cita i koja specifikuje datum poslednje
izmene dokumenta (onaj koji prijavljuje web server).
linkColor Niska koja specifikuje boju neposecenih veza dokumenta. Moze biti
postavljena u zaglavlju HTML dokumenta ili kao vrednost artibuta LINK elementa <BODY>.
links[] Niz Link objekata, jedan za svaku hipertekstualnu vezu u
dokumentu.
links.length Ceo broj koji može samo da se cita i koji specifikuje broj elemenata
u nizu links[].
location Sinonim za svojstvo URL. Nije isto što i Objekat Locaton, window.location
plugins[] Sinonim za niz embeds[].
plugins.length Broj elemenata u nizu plugins[] ili embeds[].
referrer Niska koja može samo da se cita i koja specifikuje URL dokumenta koji je sadrzao
vezu koja je referisala tekuci dokument.
title Niska koja može samo da se cita, a koja specifikuje sadržaj etikete <TITLE> dokumenta.
URL Niska koja može samo da se cita, a koja specifikuje URL dokumenta.
vlinkColor Niska koja specifikuje boju posecene veze. Može biti postavljena u zaglavlju HTML dokumenta
ili kao vrednost artibuta VLINK elementa <BODY>.
Metode
clear() Metod koji briše sadržaj dokumenta.
close() Metod koji zatvara tok dokumenta koji je otvoren metodom open().
open() Metod koji otvara tok u koji se može upisivati sadržaj dokumenta.
write() Metod koji ubacuje specifikovanu nisku ili niske u dokument koji se
trenutno parsira ili u tok dokumenta koji otvoren metodom open().
writeln() Metod koji je identican sa write() samo što dodaje izlazu karakter za novi red.
JAVA SCRIPT poseduje izvestan skup predefinisanih objekata: Date, Array, Math. Razmotrimo ih na primeru objekta Date.
Najpre, novi objekat se kreira upotrebom operatora NEW:
danas =new Date();
Date poseduje metode koji se mogu koristiti pri manipulaciji objektom:
getHours(), setHours() za dobijanje i postavljanje casova
getMinutes(), setMinutes() za dobijanje i postavljanje minuta
getMonth(), setMonth() za dobijanje i postavljanje meseca
....
sada =new Date();
document.write("Vreme
je:" + sada.getHours() + ":" + sada.getMinutes()
+ "<br>");
document.write("Datum
je:" + sada.getDate() + "/" +
(sada.getMonth()+1)
+ "/" +(2000 + sada.getYear()));
| DANASNJI DATUM |
<HTML>
<HEAD> <TITLE>Datum i formular </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<script language="JavaScript" type="text/javascript">
//funkcija za obradu danasnjeg datuma
function Datum_danas()
{
var d = new Date(); // novi objekat Date, danasnji datum i vreme
var a =
new Array("nedelja","ponedeljak","utorak","sreda","četvrtak","petak","subota"); //novi objekat Array
i = d.getDay(); //metod za dobijanje rednog broja dana
dan_u_n = a[i]; //naziv dana u sedmici
dan_u_m= d.getDate(); // metod za dobijanje rednog broja dana u mesecu
m = d.getMonth() + 1; //metod za dobijanje rednog broja meseca
g = d.getFullYear(); //metod za dobijanje godine
document.write(dan_u_n + ", " + dan_u_m + "." + m + ". " + g + ". " );
}
</SCRIPT>
</HEAD>
<BODY>
<H2>
<script language="JavaScript" type="text/javascript">
//poziv funkcija za obradu danasnjeg datuma
Datum_danas();
</SCRIPT>
</H2>
</BODY>
</HTML>
| IZRACUNAVANJE RAZLIKE IZMEĐU DVA DATUMA U ISTOJ VREMENSKOJ ZONI |
Ako želimo da izracunamo koliko dana ima do kraja kalendarske godine, racunacemo zapravo koliko dana ima od danasnjeg dana do kraja ove godine, tj. 31.12.
<HTML>
<HEAD><TITLE>Koliko dana do kraja godine?</TITLE></HEAD>
<BODY>
<HR>
<script language="JavaScript" type="text/javascript">
danas = new Date(); // danasnje vreme i datum
kraj_god = new Date(); // kraj godine
kraj_god.setMonth(11); // je u decembru
kraj_god.setDate(31); // 31. dana u mesecu
// Koliko ima milisekundi izmedju 31.12. i danasnjeg dana
razlika = kraj_god.getTime() - danas.getTime();
// A koliko je to dana
razlika = Math.floor( razlika/ (1000*60*60*24) );
document.write("<h2 align=center>Broj dana do kraja godine je " + razlika + "!!!</h2>");
</SCRIPT>
<HR>
</BODY>
</HTML>
Prethodni JavaScript program koristi dva objekta tipa Date: danas i kraj_god. Za postavljanje datuma
kraja godine koriste se ugradjeni metodi ovog objetka, setMonth() i setDate().
Metod getTime() vraca vrednost objekta tipa Date izrazenu u milisekundama. Ona se moze koristiti za izracunavanje intervala izmedu dva datuma ili vremena koji su u istoj vremenskoj zoni.
Videli smo da se u programu koristi i specijalni objekat Math. Njegov metod floor() vrsi zaokruzivanje realnog broja na prvi manji ceo broj.
Math objekat - obuhvata matematicke funkcije i konstante
Korišcenje Math.konstanta Math.funkcija Konstante E Konstanta e, osnova prirodnog logaritma LN10 prirodni logaritam od 10 LN2 prirodni logaritam od 2 LOG10E Logaritam od e s osnovi 10 LOG2E Logaritam od e s osnovom 2 PI Konstanta pi SQRT1_2 1 kroz kvadratni koren iz 2 SQRT2 kvadtratni koren iz 2 Funkcije abs() Racuna apsolutnu vrednost acos() Racuna arc cosinus asin() Racuna arc sinus atan() Racuna arc tangens atan2() Racuna ugao izmedu x ose i tacke ceil() Zaokružuje na prvi veci celi broj cos() Racuna cosinus exp() Racuna eksponent od e floor() Zaokružuje na prvi manji celi broj log() Racuna prirodni logaritam max() Vraca veci od dva broja min() Vraca manji od dva broja pow() Racuna xy random() Racuna slucajni broj round() Zaokružuje na najbliži ceo broj sin() Racuna sinus sqrt() Racuna kvadratni koren tan() Racuna tangens
ZA samostalni rad: Napisite Java Script program koji ce u slucaju da Vam je danas rodjendan prikazati kao naslov nivoa 3 poruku "Danas mi je rođendan", a u suprotnom prikazati poruku o tome koliko dana je proteklo ili koliko koliko dana je preostalo da Vaseg rodjendana ove godine?
| DATUM ISTEKA VIDLJIVOSTI SLIKE |
Ako želimo da neka slika bude vidljiva samo do određenog datuma, onda tag za ukljucivanje slike sa, na primer nazivom, bkgr2.jpg <IMG SRC="bkgr2.jpg"> ukljucujemo AKO I SAMO AKO je tekuci datum manji o datuma isteka slike.<HTML>
<HEAD>
<SCRIPT>
<!--
var slika = '<IMG SRC="bkgr2.jpg">';
var datum = new Date(); /*danasnji datum*/
function proveraIsteka(datumIsteka){
var datIsteka = new Date(datumIsteka); /* datum isteka */
if (datum.getTime() <= datIsteka.getTime()) {
document.write(slika);
document.write("<HR>slika ce biti vidljiva do dana:<BR>" + datIsteka);
} else {
document.write("<HR>slika je bila vidljiva do dana:<BR>" + datIsteka);
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H4>Primer slike koja je vidljiva samo do odredjenog datuma...</H4>
<SCRIPT>
/* datum do kada želite da slika bude vidljiva - 30. 12. 2015.! */
proveraIsteka("December 30, 2015")
</SCRIPT></BODY>
</HTML>Datoteka pr44.htm
NAPISITE SAMI SLICAN JAVASCRIPT kôd koji će do datuma 31.12.2015. prikazivati na Web stranici sliku bkgr1.jpg, a nakon tog datuma na istom mestu će se prikazivati slika bkgr2.jpg. To je korisno, ako, na primer, radite sajt za neku firmu i ako ste sigurni da će ona do 31.12.2015. biti na lokaciji koju prikazuje slika bkgr1.jpg, a nakon 31.12.2015. na lokaciji koju prikazuje bkgr2.jpg
| VREMENSKI BACKGROUND |
Pozadina Vaše Web stranice se postavlja unutar HTML oznaka <BODY BGCOLOR="#0000FF" TEXT="#FFFFFF">II način - reakcija na događaj onLoad
gde BGCOLOR oznacava boju pozadine (od #000000 do #FFFFFF u RGB modelu boja), TEXT oznacava boju slova (od #000000 do #FFFFFF u RGB modelu boja). Obicno se za boje teksta i boju pozadine uzimaju kontrasne boje ili boje sa razlicitim brightnes tonom, npr. bela slova na crnoj pozadini, crna slova na zutoj pozadini...JavaScript Vam moze pomoci da Vasa stranica izgleda dinamicnije i da se njen izgled vise puta menja u toku poseta u okviru jednog dana, ako postignete da se boje pozadine menjaju danju, u podne, nocu, ujutru,...
Kao i u rethodnom primeru, vazno je vrednost tekuceg dana prihvatiti u neku promenljivu i onda primeniti ugradjene JavaScript funkcije za dobijanje tekuceg vremena.
POGLEDAJTE PRIMER
<HTML>
<HEAD></HEAD>
<BODY>
Primer izbora boje podloge (BODY BGCOLOR) zavisno od doba dana....<br>
<SCRIPT LANGUAGE="JavaScript">
<!--
var datum = new Date(); /* prihvatanje tekućeg datuma u promenljivu */
var sati = datum.getHours(); /* prihvat tekućeg casa u promenljivu */
if (sati > 4 && sati < 7){
document.write('<BODY BGCOLOR="#0000FF" TEXT="#FFFFFF">Sada je izmedju 5 i 6 sati ujutro...')
}
if (sati > 6 && sati < 9){
document.write('<BODY BGCOLOR="#0088FF" TEXT="#FFFFFF">Sada je izmedju 7 i 8 sati ujutro...')
}
if (sati > 8 && sati < 18){
document.write('<BODY BGCOLOR="#808080" TEXT="#FFFFFF">Sada je izmedju 9 i 17 sati...')
}
if (sati > 17 && sati < 20){
document.write('<BODY BGCOLOR="#FFA500" TEXT="#FFFFFF">Sada je izmedju 18 i 19 sati...')
}
if (sati > 19 && sati < 22){
document.write('<BODY BGCOLOR="#FF55FF" TEXT="#FFFFFF">Sada je izmedju 20 i 21 sat...')
}
if (sati > 21 || sati < 5){
document.write('<BODY BGCOLOR="#FF0000" TEXT="#FFFFFF">Sada je izmedju 22 i 4 sata...')
}
//-->
</SCRIPT>
</BODY>
</HTML>Datoteka pr26.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<title>Primer menjanja pozadine</title>
<SCRIPT language="javascript" type="text/javascript">
<!--
function boja()
{ var datum = new Date(); /* prihvatanje tekuceg datuma u promenljivu */
var sati = datum.getHours(); /* prihvat tekuceg casa u promenljivu */
if (sati > 4 && sati < 7) document.bgColor="#0000FF";
else if (sati > 6 && sati < 9) document.bgColor="#0088FF";
else if (sati > 8 && sati < 18) document.bgColor="#808080";
else if (sati > 17 && sati < 20) document.bgColor="#FFA500";
else if (sati > 19 && sati < 22) document.bgColor="#FF55FF";
else if (sati > 21 || sati < 5) document.bgColor="#FF0000";
}
-->
</SCRIPT>
</HEAD>
<BODY onLoad="boja()">
Primer izbora boje podloge (BODY BGCOLOR) zavisno od doba dana....
</BODY>
</HTML>
Pogledajte primer. Vezbe radi, propustite ovaj primer kroz W3C validator.
NAPISITE SAMI SLICAN JAVASCRIPT kôd koji će u neparne vrednosti časova ispisivati bela slova na crnoj pozadini, a u parne vrednosti časova ispisivati plava slova na zelenoj pozadini.
Objekat Date - manipulacija datumom i vremenom
Konstruktori
new Date()
new Date(milisekunde)
new Date(datumkaoniska)
new Date(godina,mesec,dan)
new Date(godina,mesec,dan,cas,minuti,sekunde)
Kada je bez argumenata, konstruktor Date() kreira objekat tipa Date koji je postavljen na tekuce vreme
i na tekuci datum (odnosno, sistemsko vreme i sistemski datum).
Date() se može koristiti i kao obicna funkcija (bez new konstruktora). Tada, ako se koristi bez argumenata,
vraca nisku koja predstavlja lokalni datum i vreme.
Argumenti
milisekunde
Broj milisekundi izmedu željenog datuma i ponoci 1. januara 1970. po grinickom vremenu.
datumkaoniska
Argument koji specifikuje datum i, eventualno, vreme kao nisku u
obliku mesec dan, godina cas:minuti:sekunde. Na primer: "May 29, 2008 22:05:18"
godina
Godina kao cetvorocifreni ceo broj.
mesec
Mesec specifikovan kao ceo broj od 0 (januar) do 11(decembar).
dan
Dan u mesecu specifikovan kao ceo broj od 1 do 31.
cas
cas specifikovan kao ceo broj od 0 (ponoc) do 23 (11 uvece).
minuti
Minuti specifikovani kao ceo broj od 0 do 59.
sekunde
Sekunde specifikovane kao ceo broj od 0 do 59.
Povratna vrednost
Novokreirani objekat tipa Data.
Primeri upotrebe konstruktora:
danas = new Date();
Dan1 = new Date("January 1, 2008 00:00:00");
Dan2 = new Date(2008, 0, 1) ;
Dan3 = new Date(2008, 0, 1, 0, 0, 0);
Metode
getDate() Vraca dan u mesecu objekta tipa Data.
getDay() Vraca dan u nedelji objekta tipa Data.
getHours() Vraca polje casova objekta tipa Data.
getMinutes() Vraca polje minuta objekta tipa Data.
getMonth() Vraca polje meseca objekta tipa Data.
getSeconds() Vraca polje sekundi objekta tipa Data.
getTime() Vraca internu reprezentaciju u milisekundama objekta tipa Data.
getTimezoneOffset() Vraca vremensku razliku u minutama izmedu datuma i GMT (grinickog vremena).
getFullYear() Vraca 4-cifreno polje godine objekta tipa Data.
parse() Parsira reprezentaciju datuma kao niske i vraca isti datum u obliku milisekundi
setDate() Postavlja polje dana u mesecu objekta tipa Data.
setHours() Postavlja polje casova objekta tipa Data.
setMinutes() Postavlja polje minuta objekta tipa Data.
setMonth() Postavlja polje meseca objekta tipa Data.
setSeconds() Postavlja polje sekundi objekta tipa Data.
setTime() Postavlja polja objekta tipa Data koriscenjem formata u obliku milisekundi.
setFullYear() Postavlja polje godine objekta tipa Data.
toGMTString() Konvertuje datum u nisku koristeci GMT vremensku zonu (grinicko vreme).
toLocalString() Konvertuje datum u nisku koristeci lokalnu vremensku zonu.
UTC() Konvertuje numericku specifikaciju datuma i vremena u format u obliku milisekundi.
| SLUČAJNI IZBOR POZADINE-PRIMER UPOTREBE OBJEKTA (Math) u Java Script-u |
Pozadina u vidu slike Vaše Web stranice se postavlja unutar HTML oznaka <BODY BACKGROUND="nazivDatotekeSlike" TEXT="#FFFFFF">
gde BACKGROUNDCOLOR oznacava putanju do slike koja se nalazi kao pozadina Vaše Web strane , TEXT oznacava boju slova (od #000000 do #FFFFFF u RGB modelu boja). Vazno je da se za boje teksta i sliku pozadine uzimaju kontrasne boje ili boje sa razlicitim svetlosnim tonom.
| Svaki element Web strane predstavlja OBJEKAT JavaScripta. Na
primer: window, document, history,...
Math objekat je ugrađen u Java Script, te se ne mora zasebno kreirati math objekat (jer postoji u svakom skriptu). Osobine math objekata su matematičke konstante, a metode objekta su matematičke funkcije. |
-
Math konstante
- Math.E - osnova prirodnog logaritma, e
- Math.PI - odnos obima kruga i prečnika ...
-
Metode
- Math.cos - računa kosinus broja
- Math.max - prihvata dva broja i vraća veći
- Math.abs - računa apsolutnu vrednost broja
- Math.round - zaokružuje na ceo broj
- Math.random - bez argumenta, vraća slučajan broj između 0 i 1 ...
Ako se želi izbeći monotonija web strane koja nema potrebe za čestim ažuriranjem, onda postoji ovakvo rešenje:<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var podloga1 = "bkgr1.jpg"; /* definisanje mogućih pozadina */
var podloga2 = "bkgr2.jpg";
var podloga3 = "bkgr3.jpg";
var slucajnibroj=Math.round(5*Math.random()); /* slučajni broj između 0 i 5 */
if (slucajnibroj < 2) /* izbor podloge zavisno o slučajnom broju */
podloga = podloga1;
else if (slucajnibroj < 4)
podloga = podloga2;
else
podloga = podloga3;
document.write('<BODY BACKGROUND="'+podloga+'">') /* postavka pozadine */
//-->
</SCRIPT>
</BODY>
</HTML>Datoteka pr25.htm