Mala škola Java Script-a sa primerima - nastavak 2

FADE BACKGROUND ILI IGRA BOJA (POSTUPNA BROJA POZADINE)

<HTML>
<HEAD>
<TITLE>Postupna promena boje pozadine</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function DecUHexa(DecBr) {
var hexa = "0123465789abcdef";
x = Math.floor(DecBr / 16); h = hexa.charAt(x);
x = DecBr % 16; h += hexa.charAt(x);
return h; }

function HexaUDec(HexaBr) {
var hexa = "0123465789abcdef";
h = HexaBr.charAt(0); i = hexa.indexOf(h); x = i * 16;
h = HexaBr.charAt(1); i = hexa.indexOf(h); x += i
return x;
}

function menjaj_boju() {

cr = document.bgColor.substring(1,3); //intenzitet crvene boje
ze = document.bgColor.substring(3,5); //zelena
pl = document.bgColor.substring(5);   //plava boja

cr = HexaUDec(cr)+8; ze = HexaUDec(ze)+8; pl = HexaUDec(pl)+8;
if ((pl >= 255) && (ze >=255)) {ze = 0; pl = 0;}
else if (pl >= 255) {pl = 0; cr = cr - 8;}
else {cr -= 8; ze -= 8;}
cr = DecUHexa(cr); ze = DecUHexa(ze); pl = DecUHexa(pl);
document.bgColor= "#" + cr + ze + pl;
window.setTimeout("menjaj_boju()",40)
}
defaultStatus="Posmatraj kako se menja boja pozadine";
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FF0000" onLoad="menjaj_boju();">
<BR><BR>
<HR>
<H2>Koja boja pozadine je najlepsa?</H2>
<HR>
</BODY>
</HTML>

Pojavljuje se crveni ekran koji postepeno menja boju. Gornji program ilustruje više
mogucnosti JavaScript jezika. Pre svega, program koristi rukovanje dogadajima onLoad
koje se može koristiti kao atribut etikete <BODY> ili <FRAME>.

Njegova vrednost je JavaScript program koji se izvršava prilikom punjenja prozora dokumentom. U ovom
slucaju program se sastoji od samo jednog iskaza kojim se poziva funkcija
menjaj_boju() koja je definisana u izmedu etiketa <HEAD> i </HEAD>.

Funkcija menjaj_boju() menja vrednost boje pozadine dokumenta koja je
svojstvo bgColor objekta document. Pocetna vrednost ovog svojstva zadaje se u
okviru etikete <BODY> kao vrednost atributa BGCOLOR. Vrednost se zadaje kao niska
oblika #RRGGBB u kojoj se iza znaka # navodi šest heksadekadnih cifara, od
kojih prve dve specifikuju crveni spektar, druge dve zeleni a poslednje dve plavi.
U okviru funkcije menjaj_boju() boja pozadine se shvata kao jedan trocifreni broj u
brojnom sistemu sa osnovom 256. Vrednost svojstva document.bgColor uzima
redom svaku osmu vrednosti u ovom brojnom sistemu (ako bi se uzimala svaka vrednost,
prikazivanje razlicitih boja išlo bi isuviše sporo).

Funkcija menjaj_boju(), pre svega ilustruje korišcenje metode
substring() objekta tipa niska (String). Ovde se metod primenjuje na nisku
document.bgColor. Ovaj metod iz niske vadi podnisku.
Metod ima dva argumenta:
prvi je pocetna pozicija podniske u nisci, a drugi prva pozicija iza završne pozicije
podniske u nisci.
Odbrojavanje pozicija u nisci pocinje brojem 0. U nisci koja oznacava RGB zapis boje,
na poziciji 0 nalazi se znak #, a na pozicijama 1 i 2
heksadecimalni zapis crvenog spektra. Stoga su argumenti funkcije substring() za
izdvajanje heksadecimalnog zapisa crvenog spektra 1 i 3.

String objekat - podrška niskama

Konstruktor
   new String(vrednost)
   
Argumenti
   vrednost  Pocetna vrednost String objekta koji se kreira. Ovaj argument ce biti
             pretvoren u nisku ako je to potrebno.
Povratna vrednost
    Novokreirani String objekat.



Svojstva
   length Broj karaktera u nisci.
   
Metode
   anchor() Vraca kopiju niske u okruženju etiketa <A NAME=>.
   big()    Vraca kopiju niske u okruženju etiketa <BIG>.
   blink() Vraca kopiju niske u okruženju etiketa <BLINK>.
   bold()    Vraca kopiju niske u okruženju etiketa <B>.
   charAt() Vadi karakter sa date pozicije u nisci.
   fixed() Vraca kopiju niske u okruženju etiketa <TT>.
   fontcolor() Vraca kopiju niske u okruženju etiketa <FONT COLOR=>.
   fontsize() Vraca kopiju niske u okruženju etiketa <FONT SIZE=>.
   indexOf() Traži karakter ili podnisku u nisci.
   italics() Vraca kopiju niske u okruženju etiketa <I>.
   lastIndexOf()  Traži unazad nisku ili podnisku u nisci.
   link() Vraca kopiju niske u okruženju etiketa <A HREF=>.
   small() Vraca kopiju niske u okruženju etiketa <SMALL>.
   split() Konvertuje nisku u niz niski, koristeci neki karakter kao granicnik.
   sub() Vraca kopiju niske u okruženju etiketa <SUB>.
   substr() Vraca podnisku iz niske od pozicije 1. argumenta na duzini 2. argumenta
   substring() Vadi podnisku iz niske.
   sup() Vraca kopiju niske u okruženju etiketa <SUP>.
   toLowerCase()   Vraca kopiju niske u kojoj su sva slova pretvorena u mala slova.
   toUpperCase()   Vraca kopiju niske u kojoj su sva slova pretvorena u velika slova.






Niske koja predsavljaju heksadecimalni zapis boje, cr, ze i pl, prevode se u
decimlne vrednosti s kojima se može racunati (sabirati i oduzimati), korišcenjem funkcije
HexaUDec(). Kako se svaki spektar boje zapisuje dvocifrenom heksadecimalnom
vrednošcu, on se pretvara u decimalnu vrednost, na primer u slucaju crvenog spektra, na
sledeci nacin:
cr₁₀ = cr⁰ * 16 + cr¹


Ova funkcija ilustruje korišcenje još dve metode objekata tipa niska: to su
charAt() i indexOf(). Prva metoda izdvaja karakter iz niske na datoj poziciji koja
je argument metode, a druga sravnjuje nisku sa datim karakterom ili podniskom. 

U funkciji HexaUDec() prvo se iz niske argumenta izdvaja karakter na nultoj poziciji a zatim se
odredjuje njegova pozicija u niski koju cine sve cifre heksadecimalnog brojnog sistema,
uredjene po svojim rastucim vrednostima. Na taj nacin se, u stvari, dobija brojcana
vrednost cifre. Ova vrednost se množi s osnovom brojnog sistema 16, jer je to cifra na
poziciji 16¹. Slican postupak se ponavlja i za cifru na prvoj poziciji u nisci, koja
predstavlja cifru na poziciji 16⁰ u heksadecimalnom brojnom sistemu.

Jednom prevedene u brojeve, promenljive koje predstavljaju tekuce boje
osnovnog spektra uvecavaju se po koraku 8 - uvecavanje po manjem koraku menja
neznatno boje i promena se teško uocava. 

Boje se menjaju tako što se prvo menjaju boje samo plavog spektra, 
i tek kad se sve one iscrpe (t.j., kada se premaši vrednost 256),
menja se boja zelenog spektra s time da se boja plavog spektra vraca na pocetak (vrednost
0). 
Ceo postupak se ponavlja, sve dok se ne iscrpe sve kombinacije boja plavog i zelenog
spektra (t.j., sve dok i jedna i druga vrednost premaše vrednost 256) kada se menja boja
crvenog spektra s tim da se boje i plavog i zelenog spektra vracaju na pocetak.

Kada se u okviru if-else iskaza odrede nove decimalne vrednosti boja
osnovnog spektra treba ih ponovo pretvoriti u heksadecimalne vrednosti. To obavlja
funkcija DecUHex(). Cifra na poziciji 16¹ dobija se kao celobrojni deo kolicnika
decimalne vrednosti i broja 16 (za odredivanje celobrojne vrednosti koristi se
matematicka funkcija Math.floor), dok se cifra na poziciji 16⁰ dobija kao ostatak pri
deljenju decimalne vrednosti i broja 16 (za odredivanje ostatka pri deljenju koristi se
operator %). Ovako odredene vrednosti heksadecimalnih cifara pretvaraju se u uobicajeni
heksadecimalni zapis primenom metode charAt() na nisku hexa, koja sadrži sve cifre
heksadecimalnog brojnog sistema, uredene u rastucem redosledu. 

Tek iskaz
document.bgColor= "#" + cr + ze + pl; stvarno menja boju pozadine dokumenta.

Da se boja pozadine ne bi promenila samo jednom, vec da bi se stalno menjala u
konstantinim vremenskim intervalima koristi se metod setTimeOut() objekta
window koja izvršava neki JavaScript kod posle isteka nekog specifikovanog vremena.
Prvi argument funkcije je niska koja predstavlja JavaScript kôd koji treba izvršiti, a drugi
vremenski interval, zadat u milisekundama, posle cijeg isteka taj kod treba izvršiti. U
našem primeru, kôd koji treba izvršiti je sama funkcija menjaj_boju() u okviru koje
se i poziva metod setTimeout(). Dakle, funkcija menjaj_boju() poziva samu
sebe.

Bilo bi lepo da se ovaj vatromet boja može prekinuti. Kako?

Aktivirati editor i u JavaScript kod sadržan u dokumentu uneti izmene na sledeci nacin:
Kraj funkcije menjaj_boju() modifikovati na sledeci nacin:
    id = window.setTimeout("menjaj_boju()",40);
    return id;

Ova promena uvodi promenljivu id koja identifikuje postavljeni tajm-aut (jedan prozor
ih može imati više, za razne dogadaje). Identifikacija tajm-auta je vrednost koju vraca
poziv funkcije setTimeout(). Ovom izmenom tu istu vrednost vraca i poziv funkcije
menjaj_boju(). Na kraj dokumenta, ispred etikete </BODY> dodati sledeci sadržaj:
<h3>Klikni kada zelis da prekines vatromet</h3>
<FORM NAME='pozadina'>
<INPUT TYPE='button' VALUE='Zaustavi se'
onClick="window.clearTimeout(id);">
</FORM>

Zapamtiti izmene u novoj datoteci u poredite program sa prethodnim.
 
 Na ekranu na kome se menjaju boje pozadine uocljivo je dugme Zaustavi se. Ako se
klikne na ovo dugme, vatromet boja prestaje. Dugme za zaustavljanje je ulazno polje
formulara. Ovo ulazno polje je tipa dugme (button) i za njega je definisano atributom
onClick upravljanje dogadajem - klikom mišem. Vrednost ovog atributa je poziv
metode clearTimeout() objekta window. Ova funkcija prekida izvršavanje koda
koje je odloženo pozivom metode setTimeout(). Jedini argument funkcije
clearTimeout() je identifikacija koda cije je izvršavanje odgodjeno, a to je ona
vrednost koju vraca poziv funkcije setTimeout().

Bilo bi korisno kada bi se u trenutku zaustavljanja vatrometa, ispisala
heksadecimalna vrednost tekuce boje pozadine. Kako?

Aktivirati editor i u JavaScript kod sadržan u dokumentu uneti izmene. Na kraj odeljka <HEAD>, dodati još
jednu funkciju:

function ispisi_boju(id) {
document.pozadina.boja.value=document.bgColor;
window.clearTimeout(id);
}

U formular koji je vec uveden na kraju dokumenta, uneti još jedno ulazno polje, iza
postojeceg dugmeta:
<BR><INPUT TYPE='text' NAME='boja' VALUE=''>

Promeniti vrednost atributa onClick ulaznog polja Zaustavi se tako da sada
dobije vrednost "ispisi_boju(id);". 

Zapamtiti izmene u u novoj datoteci u poredite program sa prethodnim.

Sada se na stranici uz dugme Zaustavi me pojavljuje i jedno ulazno polje formulara
koje je sada prazno. Kada prvi put kliknete na dugme Zaustavi se ovo polje ce se
popuniti i u njemu ce biti ispisana RGB vrednost tekuce boje pozadine. Ovo je rezultat
rada funkcije ispisi_boju(). Ova funkcija ima samo dva iskaza: drugi je poziv
metode clearTimeout()objekta window, na isti nacin kao i ranije, a prvi je
postavljanje vrednosti ulaznog tekstuelnog polja formulara. 

Formular je nazvan pozadina (to je vrednost atributa NAME etikete <FORM>), a ovo novo ulazno
tekstuelno polje je nazvano boja (to je vrednost atributa NAME etikete <INPUT>). Da bi
se postavila vrednost tog polja koristi se njegovo svojstvo value, a samo polje se
referiše hijerarhijski: polje boja unutar formulara pozadina koji je u tekucem
dokumentu document.

Ova kreirana stranica bila bi još korisnija ako bi posle prekida vatromet mogao da
se nastavi. Kako?


Aktivirati editor i u JavaScript kod sadržan u dokumentu uneti
izmene. 

Na kraj dokumenta, ispred etikete </BODY>, dodati sledeci sadržaj:

<h3>Klikni kada zelis da nastavis vatromet</h3>
<INPUT TYPE='button' VALUE='Nastavi'
onClick="menjaj_boju();"><BR>

Zapamtiti izmene u novoj datoteci i poredite programe. 
 
 Sada se na stranici pojavljuje još jedno dugme: Nastavi. 
 I za njega je definisano rukovanje dogadajem u slucaju klika
mišom koje se sastoji u ponovnom pozivu funkcije menjaj_boju(). 
Isprobati naizmenicno dugmad Zaustavi se i Nastavi.


Ovaj program bi bio još korisniji ako bi se u nekom manjem prozoru cuvala
prethodno izabrana boja, tako da se može uporediti sa drugim bojama koje se pojavljuju
na ekranu. Kako?

Aktivirati editor i u JavaScript kod sadržan u dokumentu uneti
izmene. U funkciju ispisi_boju(), ispred iskaza kojim se tajm-aut anulira, dodati
sledece iskaze:


win = window.open("","mali","status,resizable,width=300,height=200");
var d = win.document;

d.write("<BODY BGCOLOR='" + document.bgColor + "'>");
d.write("<B>RGB = " + document.bgColor + "</B>");
d.close();


Otkucani tekst zapamtiti u novoj datoteci i pratite izmene.

 Izgled ekrana je na pocetku nepromenjen. Kada se prvi put klikne na dugme
Zaustavi me otvorice se novi, mali prozor. (Ovaj prozor ce možda odmah biti spušten
u liniju poslova i da bi ga videli na ekranu treba ga podici.) Boja pozadine tog prozora
bice ista kao na prvobitnom prozoru - to je izabrana boja. Ako se pritisnete na dugme
Nastavi boja na velikom prozoru pocinje da se menja, dok boja malog prozora ostaje
nepromenjena. Pored vec poznatih stvari, ovaj deo programa koristi metod close()
objekta document. Ovaj metod prikazuje ceo sadržaj dokumementa koji je vec napisan,
a još nije prikazan. Kada se ceo html-dokument ispisuje koriseci metod
document.write(), neophodno je koristiti document.close()da bi njegov
sadržaj bio prikazan.


Još korisnije bi bilo ako bi se u manjem prozoru prikazivalo više izabranih boja, a
ne samo jedna. U tom cilju mogu se koristiti okviri. Kako?

Aktivirati editor i u JavaScript kod sadržan u dokumentu uneti izmene. 
Na sam pocetak dokumenta, odmah iza <HEAD> etikete dodati sledece iskaze:
<SCRIPT>
// otvori novi prozor
win = window.open("","mali","status,resizable,width=300,height=200");
// dinamicki kreiraj okvire u tom novom prozoru
// koristi se specijalni about:blank URL da bi se dobili prazni
// okviri
win.document.write('<FRAMESET rows="50%,50%" cols="50%,50%">');
win.document.write('<FRAME NAME="f1" SRC="about:blank">');
win.document.write('<FRAME NAME="f2" SRC="about:blank">');
win.document.write('<FRAME NAME="f3" SRC="about:blank">');
win.document.write('<FRAME NAME="f4" SRC="about:blank">');
win.document.write('</FRAMESET>');
// niz okvira kroz koji se kruzi
okviri = new Array(win.f1, win.f2, win.f3, win.f4);
// tekuci broj brojaca okvira
f = 0;
</SCRIPT>

Uneti izmene i u funkciju ispisi_boju(). Izbaciti iskaz kojim se otvara novi prozor
(iskazi kojima se otvara novi, mali, prozor su sada odmah na pocetku dokumenta). Iskaze
koji ispisuju sadržaj dokumenta malog prozora (to su iskazi d.write()) zameniti
sledecim iskazima:

okviri[f].document.write("<BODY BGCOLOR='" + document.bgColor +"'>");
okviri[f].document.write("<B>RGB = " + document.bgColor + "");
okviri[f].document.close();
f = (f + 1) % 4; // Uvecaj brojac okvira

Otkucani tekst zapamtiti u novoj datoteci.


 Izgled ekrana je na pocetku nepromenjen, osim što se mali prozor izdeljen na cetiri
okvira pojavljuje odmah na pocetku (to je rezultat premeštanja iskaza za otvaranje
prozora na pocetak dokumenta). Okviri su na pocetku prazni i beli. Kada se prvi put
klikne na dugme Zaustavi se prvi okvir ce dobiti izabranu boji i u njemu ce se
ispisati RGB vrednost te boje. Kada se sledeci put klikne na ovo dugme drugi okvir ce
ispisati vrednost tekuce boje i tako redom. Prikazivanje boja u okvirima vrti se u krug,
tako da kada se peti put klikne na dugme Zaustavi se boja se prikazuje u prvom
okviru, šesti put u drugom i tako dalje.
Ovaj dokument koristi JavaScript program koji dinamiški generiše okvire u
novom, malom prozoru. To se postiže višestrukom primenom metode write za
dokument (document) u novom prozoru (win). Svaki od novogenirisanih okvira dobija
ime kroz vrednost atributa NAME: f1, f2, f3, f4. Okviri su na pocetku prazni, to jest ne
sadrže nikakav dokument, jer je vrednost atributa SRC specijalni URL about:blank.
U programu se zatim uvodi niz okviri koji sadrži reference otvorenih okvira: win.f1,
win.f2, win.f3 i win.f4. Specijalna promenljiva f sadržace u toku rada programa
indeks tekuceg okvira u nizu okviri.

U funkciji ispisi_boju() se sada metod write primenjuje na dokument iz
tekuceg okvira koji se referiše preko odgovarajuceg elementa niza okviri[f]. Brojac
okvira uvecava se iskazom f = (f + 1) % 4. U ovom iskazu primenjuje se operator
% koji racuna ostatak pri celobrojnom deljenju. Tako kada brojac f dostigne vrednost 3, a
to je indeks cetvrtog okvira u nizu okviri, ovaj iskaz izracunava kao novu vrednost
brojaca 0.

Šta je rezultat rada narednog primera?

Pogledajte primer:

<html>
<head>
<script>
function promeniBoju() {
	var r = document.getElementById('crveno').value;	
	var g = document.getElementById('zeleno').value;	
	var b = document.getElementById('plavo').value;	

	var color;
	if (document.getElementById('d').checked) {
		color = 'rgb(' + r + ',' + g + ',' + b + ')'
	} else {
		color = '#' + uDvocifreno(r) + uDvocifreno(g) + uDvocifreno(b);
	}	
	document.body.style.backgroundColor = color;
}

function uDvocifreno(str) {
	return (str.length < 2) ? ('0' + str) : str;
}

</script>
</head>
<body>
<table>
<tr>
<td>Crveno:</td>
<td><input type='text' id='crveno' value='0'></td>
</tr>
<tr>
<td>Zeleno:</td>
<td><input type='text' id='zeleno' value='0'></td>
</tr>
<tr>
<td>Plavo:</td>
<td><input type='text' id='plavo' value='0'></td>
</tr>
</table>

Decimal <input type='radio' name='dh' value='d' id='d' checked='checked'>
Hexadecimal <input type='radio' name='dh' id='h' value='h'>
<br>

<input type='button' value='PROMENITE BOJU' 
 onClick="promeniBoju()">
</body>
</html>

Array objekat - ugradjena podrška nizovima


Konstruktori
   new Array()
   new Array(vel)
   new Array(element0,element1,...,elementn)
Argumenti
    vel                     Potreban broj elemenata u nizu. Vrednost svojstva length konstruisanog niza 
                             postavlja se na vel.
element0,element1,...,elementn   Lista od dve ili više proizvoljnih vrednosti. Kada se konstruktor
                                 Array poziva sa ovakvim argumentima onda ce elementi
                                  novokreiranog niza imati redom vrednosti koje su zadate listom
                                 argumenata a svojstvo length ce imati vrednost broja argumenata u listi.
Povratna vrednost
     Novokreiran i inicijalizovan niz. Kada se Array() poziva bez argumenata svojstvo length niza
      koji se kreira postavlja se na 0.
      
      
Svojstva
   length         Ceo broj koji se može citati i u koji se može pisati koji specifikuje broj
                  elemenata niza, a kada niz nema kontingentnih elemenata, onda broj za
                  jedan veci od indeksa poslednjeg elementa niza.
                  
                  
Metode
      join      Konvertuje sve lemente niza u nisku i vrši njihovu konkatenaciju.
      reverse   Obrce na licu mesta sve elemente niza.
      sort      Sortira na licu mesta sve elemente niza

POGODITE OMILJENI GRAD - objekti String, Math, Array

Pogledajte primer:

<HTML>
<HEAD>
<TITLE>Array Object, Math Object</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-2">
<SCRIPT language=javascript>
<!--
     var gradovi = new Array()
     gradovi[0] = "SU";
     gradovi[1] = "NS";
     gradovi[2] = "BG";
     gradovi[3] = "KG";
     gradovi[4] = "NI";
     var num = 0;
     
	function izaberigrad()
	    {
	       num = Math.floor(Math.random()*5);
		}

	function pogodigrad()
		{
			izaberigrad(); //generisanje omiljenog grada generisanjem slucajanog broja num
			pokusaj = "**"; //inicijalna vrednost polja za unos pokusaja
			while (gradovi[num] != pokusaj.toUpperCase())
			 {
			 	pokusaj = prompt("Omiljeni grad: SU, NS, BG, KG, ili NI?","**");
	
				if (pokusaj.toUpperCase() == gradovi[num])
					{
					alert("Pogodili ste moj omiljeni grad!");
					}
				else
					{
					alert("Netacno! Pokusajte ponovo.");
					}
			}
		}
//-->
</SCRIPT>

</HEAD>
<BODY>
<FORM><INPUT onclick=pogodigrad() type=button value="Pogodite omiljeni grad?"> 
</FORM>
</BODY>
</HTML>

OTVARANJE PROZORA I OBJEKTI UNUTAR NJEGA

Kontrola otvaranja prozora se realizuje na sledeći način:
window.open("proba.htm", "naziv", "menubar=no, toolbar=no, location=no, directories=no, status=no, scrollbars=yes, resizable=yes, copyhistory=no, width=400, height=100");
Unutar window.open(...) postoje tri para navodnika (označeni različitim bojama), unutar kojih se nalaze sledeći podaci:
- unutar prvog para navodnika upisuje se putanja do .html stranice koja se želi otvoriti (ili se ostavi prazno za blank);
- unutar drugog para navodnika upisuje se opcionalni naziv stranice (nije obavezno);
- unutar trećeg para navodnika upisuju se objekti browsera koje želimo uključiti (=yes) ili isključiti (=no), te definišemo veličinu novog prozora. Evo popisa nekih od tih objekata:

OBJEKT OBJAŠNJENJE OBJEKT OBJAŠNJENJE

menubar - meni u browseru (File, Edit...) scrollbars - klizači unutar prozora

toolbar - funkcijske ikonice u navigatoru resizable - mogućnost promene veličine

location - prozorčić za upis lokacije copyhistory - praćenje kretanja (history)

directories - meni za direktorijume width - širina prozora (u pixelima)

status - statusna linija (dole) height - visina prozora (u pixelima)

Postoji i određeni broj funkcija pomoću kojih se mogu saznati neki podaci ili postaviti određeni parametar:

FUNKCIJA OBJAŠNJENJE FUNKCIJA OBJAŠNJENJE

window.location - lokacija dokumenta screen.height - visina prozora

window.resizeTo(x,y) - povećaj prozor DO x,y screen.width - širina prozora

window.moveTo(x,y) - premesti prozor NA x,y screen.availHeigh - preostala moguća visina

window.resizeBy(x,y) - povećaj prozor ZA x,y pixela screen.availWidth - preostala moguća širina

setTimeout("funkcija()",50) - poziv funkcije nakon 50 ms href="javascript:funkcija()" - poziv funkcije kao linka

Primer otvaranja prozora:
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
Ovo je primer <A HREF="" onClick = "return otvoriProzor()">otvaranja prozora.</A>
</BODY>
</HTML>
Dakle, u gornjem primeru definisana je funkcija otvoriProzor() koja otvara prozor veličine 400x100 pixela, bez toolbara, scrollbara, prozora za lokaciju i statusne trake...
Samu funkciju pozivamo sa onClick="return otvoriProzor()" unutar <A HREF=...> (onClick svojstvo se aktivira kada kliknemo mišem na dati link).

OTVARANJE PROZORA I ISPIS U NJEGA

Naravno, od samog otvaranja prozora i ne bi imali neke koristi ako u njega ne bi mogli nešto i upisati...
Podatke upisujemo naredbom:
document.write("...tekst ili html naredbe...");
Primer otvaranja prozora i upisa u njega:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
    
</SCRIPT>
</HEAD>
<BODY>
Ovo je primer otvaranja <A HREF="" onClick="return otvoriProzor()">prozora</A> i upis podataka u njega.
</BODY>
</HTML>
U gornjem primeru željeni tekst (u kombinaciji s HTML kodom!) je najpre postavljen u promenljivu text, a potom ispisan funkcijom noviProzor.document.write(text)...

PRIMER SLOŽENIJEG PROZORA

Ono što je do sada prikazano ukazuje i kako napraviti i nešto nalik na CGI-BIN skript...
Evo jednog primera u kom se prikazuje kako otvoriti složeniji prozor, prenositi parametre, itd:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
    
</SCRIPT>
</HEAD>
<BODY>
Primer otvaranja <A HREF="" onClick="return slozeniProzor('Tekst u novom prozoru...', 'nekaslika.jpg', '#000000', 'Times New Roman', 5)">složenijeg</A> prozora.<BR><BR>
</BODY>
</HTML>
U gornjem primeru onClick poziva funkciju slozeniProzor() i prenosi joj sledeće parametre (označene zelenom bojom), redom:

mojTekst - tekst koji će se pojaviti u novom prozoru

slikaPozadine - slika za podlogu novog prozora

bojaTeksta - boju teksta u novom prozoru

vrstaSlova - vrstu slova u novom prozoru

velicinaSlova - veličinu slova u novom prozoru

Nadalje, prompt upit u funkciji slozeniProzor() omogućava nam da od korisnika prihvatimo neki podatak i potom ga ispišemo u naš dokument.

PRIMER UPISA IZ TEKSTUALNE DATOTEKE I ZATVARANJA PROZORA

Primer u kom se može videti kako u prozor učitati tekst iz neke datoteke i kako prozor zatvoriti:

<HTML>
<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<SCRIPT LANGUAGE="JavaScript">
    function zatvoriProzor() {
        mojProzor = this.window;
        mojProzor.close();
        return false;
    }
    function otvoriProzor() {
        window.open("datoteka.txt", "", "toolbar=no, location=no, directories=no, status=no, menubar=no, scroolbars=yes, width=400, height=200")
        return false;
    }
</SCRIPT>
</HEAD>
<BODY>
Primer otvaranja i zatvaranja prozora...<br><br>
<A HREF="" onClick="return otvoriProzor()">Otvori novi prozor</A><BR><BR>
<A HREF="" onClick="return zatvoriProzor()">Zatvori glavni prozor</A><BR><BR>
</BODY>
</HTML>

OBJEKT	OBJAŠNJENJE	OBJEKT	OBJAŠNJENJE
menubar	- meni u browseru (File, Edit...)	scrollbars	- klizači unutar prozora
toolbar	- funkcijske ikonice u navigatoru	resizable	- mogućnost promene veličine
location	- prozorčić za upis lokacije	copyhistory	- praćenje kretanja (history)
directories	- meni za direktorijume	width	- širina prozora (u pixelima)
status	- statusna linija (dole)	height	- visina prozora (u pixelima)

FUNKCIJA	OBJAŠNJENJE	FUNKCIJA	OBJAŠNJENJE
window.location	- lokacija dokumenta	screen.height	- visina prozora
window.resizeTo(x,y)	- povećaj prozor DO x,y	screen.width	- širina prozora
window.moveTo(x,y)	- premesti prozor NA x,y	screen.availHeigh	- preostala moguća visina
window.resizeBy(x,y)	- povećaj prozor ZA x,y pixela	screen.availWidth	- preostala moguća širina
setTimeout("funkcija()",50)	- poziv funkcije nakon 50 ms	href="javascript:funkcija()"	- poziv funkcije kao linka