Mala škola Java Script-a sa primerima - ispis

ISPIS U DOKUMENT
 
Kôd u HTML dokumentu Objašnjenje Rezultat prikazan u browser-u
<HTML>
<HEAD></HEAD>
<BODY>

Rezultat ispisa:<BR>

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Datum poslednje izmene:"
+document.lastModified+"<BR>")
-->
</SCRIPT>

kraj primera

</BODY>
</HTML>
 

HTML iskazi

početak Java Scripta

upis u HTML...
 

kraj JavaScript-a
 
 
Rezultat ispisa:

Datum poslednje izmene: 10/20/2003 15:50:23

kraj primera

Naredbom document.write(...) unutar Java Scripta se u dokument ispisuje HTML kod ili korisnički tekst.
U gore navedenom primeru funkcija 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 (+).
 
 

ISPIS U POLJE FORMULARA
Nakon što je učitana Web strana, ponekad je zgodno omogućiti posetiocu povratnu informaciju na toj strani. (Na primer,  omogućiti posetiocu sabiranje brojeva:)

<HTML>

<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
        function izracunaj(nazivForme) {
            if (confirm("Da li zelite racunanje?"))  /* ako korisnik na upit odgovori s "Yes" */
                form.rezultatPolje.value = eval(form.upisnoPolje.value) /* upis rezultata u polje formulara */
            else
              alert("Hvala, zbogom do naredne posete!")   /* u suprotnom, daje ovu poruku... */
        }
    </SCRIPT>
</HEAD>

<BODY>
    <FORM>
        Unesiteizraz:
        <INPUT TYPE="text" NAME="upisnoPolje" SIZE=15 >
        <INPUT TYPE="button" VALUE="Izracunaj" onClick="izracunaj(this.form);return true;">
        <BR>
        Rezultat izraza:
        <INPUT TYPE="text" NAME="rezultatPolje" SIZE=15 >
        <BR>
    </FORM>
</BODY>
</HTML>

U gornjem primeru funkcija Java Scripta označena je crvenom bojom, a forma iz koje se ta funkcija poziva - zelenom bojom.
Uocite kako se definiše funkcija (izracunaj).
CONFIRM predstavlja dijalog s upitom koji se javlja nakon klika na taster "Izracunaj" a ALERT predstavlja dijalog za odgovor koji se javlja ukoliko u CONFIRM dijalogu posetilac odogovori negativno (sa "No").

Gornji kod rezultira formom i poljima:

Unesite izraz: 
Rezultat izraza: 
ISPIS U STATUSNU LINIJU
Statusna linija predstavlja deo područja u dnu navigatora u kom su vidljive informacije o URL nekog linka i slično.
Kako statusna linija jeste objekt navigatora, onda se njom može upravljati, odnosno u nju upisivati podatke.
U sledećem primeru istovremeno se ispisuju podaci i u statusnu liniju i u polje formulara:

<HTML>
<HEAD>
    <SCRIPT language="JavaScript">
        <!--
        function ispisi(tekst, forma) {
           window.status = tekst;      /* ispis u statusnu liniju */
           forma.ispisnoPolje.value = tekst;     /* ispis u polje formulara */
          setTimeout("obrisi()",5000);      /* poziv funkcije "obrisi" nakon 5 sec */
        }
        function obrisi() {
           window.status="";      /*briše ispis u statusnoj liniji */
           mojaForma.ispisnoPolje.value = "";     /*briše ispis u polju forme */
          alert("Prošlo je 5 sekundi i tekst je obrisan\niz statusne trake i polja forme!");
                                                                      /* parametar \n određuje prelaz u novi red! */
        }
        // -->
    </SCRIPT>
</HEAD>

<BODY>
    <FORM NAME="mojaForma">
        <INPUT TYPE="button" VALUE="Ispis u statusnu liniju i polje formulara" onClick="ispisi('Pozdrav!',this.form);return true;">
        <INPUT TYPE="text" NAME="ispisnoPolje" SIZE=15 >
    </FORM>
</BODY>
</HTML>

Naredbom window.status = "..." ispisuje se podatak u statusnu liniju.
Funkcijom setTimeout("obrisi()",5000) zadržava se dalje izvršenje za 5 sekundi, nakon čega se poziva funkcija obrisi().
 
 
 

ALERT, PROMPT, CONFIRM
ALERT i CONFIRM dijalozi su već prikazani u prethodnim primerima. Dakle, njihova svrha je dijalog s korisnikom, u smislu da korisniku u posebnom dijalogu (izvan web stranice) se pruža neka informacija.
Ako od korisnika (izvan polja formulara na web stranici) se želi prihvatiti neki podatak, tada se koristiti PROMPT.
U sledećem primeru zastupljena su sva tri navedena objekta:
<HTML>
<HEAD></HEAD>
<BODY>
    <FORM>
        Primjer poziva različitih vrsta dijaloga:<br>
        <INPUT TYPE="button" VALUE="Dijalog PROMPT!" ONCLICK="prompt('Ovo je dijalog PROMPT!\nUnesite svoje ime:')">
        <INPUT TYPE="button" VALUE="Dijalog ALERT!" ONCLICK="alert('Ovo je dijalog ALERT!')">
        <INPUT TYPE="button" VALUE="Dijalog CONFIRM!" ONCLICK="confirm('Ovo je dijalog CONFIRM!\n Nastavak?')">
        <BR>
    </FORM>
</BODY>
</HTML>
Primer poziva različitih vrsta dijaloga:

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 upisuju se link na .html stranicu koju se želi otvoriti (ili ostavimo prazno za blank);
- unutar drugog para navodnika upisujemo opcionalni naziv stranice (nije obavezno);
- unutar trećeg para navodnika upisujemo objekte 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) heigh - 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) - premjesti prozor NA x,y screen.availHeigh - preostala moguća visina
window.resizeBy(x,y) - povećaj prozor ZA x,y pix. screen.availWidth - preostala moguća širina
setTimeout("funkcija()",50) - poziv funkcije nakon 50 ms href="javascript:funkcija()" - poziv funkcije kao linka
Primer otvaranja proyora:

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
  <!--
    function otvoriProzor() {
        window.open("", "", "toolbar=no, location=no, directories=no, status=no, scrollbars=no,  width=400, height=100");
        return false;
    }
    -->
</SCRIPT>
</HEAD>
<BODY>
Ovo je primjer <A HREF="" onClick = "return otvoriProzor()">otvaranja prozora.</A>
</BODY>
</HTML>

Dakle, u gornjem primjeru 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">
    <!--
    function otvoriProzor() {
        noviProzor = window.open(""', ""', "toolbar=no, location=no, directories=no, status=no, width=400, height=100");
        text = "Prvi red teksta u novom prozoru.<BR><B>Drugi red teksta.</B><BR>Treći red..."
        noviProzor.document.write(text);
        return false;
    }
    -->
</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 prikayano 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">
    <!--
    var noviProzor;
    function slozeniProzor(mojTekst, slikaPozadine, bojaTeksta, vrstaSlova, velicinaSlova) {
        var ime = prompt("Upiši svoje ime:", "xxx")
        noviProzor = window.open('', '', 'toolbar=no, location=no, directories=no, status=no, scrollbars=yes, resizable=yes, copyhistory=no, width=400, height=200');
        text = "<HTML><HEAD><TITLE>Primjer SLOŽENOG prozora</TITLE></HEAD>";
        text +="<BODY BACKGROUND='" + slikaPozadine + ">";
        text +="<CENTER>";
        text +="<H1>Bok, " + ime + "</H1><HR>";
        text +="<FONT FACE='" + vrstaSlova + "'";
        text +=" SIZE='" + velicinaSlova + "'";
        text +=" COLOR='" + bojaTeksta + "'>";
        text += mojTekst
        text +="</CENTER></FONT>";
        text += "</BODY></HTML>";
        noviProzor.document.write(text);
        noviProzor.focus();
        noviProzor.document.close();
        return false;
    }
    -->
</SCRIPT>
</HEAD>

<BODY>
Primer otvaranja <A HREF="" onClick="return slozeniProzor('Tekst u novom prozoru...', 'js-bkgr1.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:

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>
<title>DOPISNA ŠKOLA Java Scripta --- Vježba 2.d</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<SCRIPT LANGUAGE="JavaScript">
    function zatvoriProzor() {
        mojProzor = this.window;
        mojProzor.close();
        return false;
    }
    function otvoriProzor() {
        window.open("js-vje2d.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>
 
 

e-mail: Jelena Grmusa


Poslednja izmena: oktobar 2003.
URL: http://www.matf.bg.ac.yu/~jelenagr/matematicka/novoteh