IZBORNIK HOME FORUM ACCESS EXCEL WORD KAZALO
   
  Kazalo - sadržaj tema
  Uvod u JavaScript
1 Načini ispisa
2 Kontrola prozora
2a Sintaxa
3 Kontrola događaja
3a Kontrola toka
4 Detekcija podataka
5 Efekti s podlogom
6 Efekti s tekstom
7 Efekti sa slikom
8 Razna rješenja
9 Rad s formama
10 Razni primjeri
11 Ključne riječi
12 Događaji
   
 
AutoCAD tutoriali

-

-
 

Adsense sponzor



JS - JAVA SCRIPT za početnike i neznalice - JAVA SCRIPT for dummies

JS - RAZNA RJEŠENJA

Search This Web Site

Adsense sponzor






PRIHVAT PODATAKA S FORME, OBRADA I POVRAT INFORMACIJE NA FORMU

Ako koristimo usluge nekog od besplatnih Web servera za postavku svojih stranica, teško da će nam biti omogućeno da kreiramo svoje CGI scripte ili da uopće pristupamo CGI-BIN području.
Samim tim bit ćemo ograničeni u smislu interaktivne komunikacije s korisnikom. Međutim, uz malo JavaScripta stvar možemo okrenuti u svoju korist...

Način prihvata, obrade i povratka informacije najbolje ćemo vidjeti kroz jedan praktičan primjer.
Pretpostavimo da korisniku želimo dati mogućnost da upiše neka dva broja te kada klikne na gumb "ZBROJI" naša funkcija u JavaScriptu te podatke treba prihvatiti, zbrojiti i rezultat vratiti na istu formu...

Kao prvo, u svom HTML dokumentu moramo postaviti slijedeću formu:

<FORM METHOD="post" NAME="mojaforma">
    Upišite prvi broj (0-10)...: <INPUT TYPE="text" NAME="
broj1" SIZE=5>
    <br>
    Upišite drugi broj (0-10)..: <INPUT TYPE="text" NAME="
broj2" SIZE=5>
    <br><br>
    <INPUT TYPE="button" VALUE="ZBROJI" NAME="
gumb" onClick="javascript:Zbroji(this.form)">
    <br><br>
    ZBROJ TA DVA BROJA IZNOSI..: <INPUT TYPE="text" NAME="
zbroj" SIZE=5>
    <br>
    Tekstualni podatak o rezultatu: <INPUT TYPE="text" NAME="
tekst" SIZE=30>
</FORM>

Uočite da smo svakom polju u formi dali neko ime, pa su tako:

- broj1 i broj2 su polja predviđena za upis dva broja od strane korisnika
- gumb predstavlja gumb :o)
- onClick="javascript:Zbroji(this.form)" - klikom na gumb poziva funkciju Zbroji()
- zbroj je polje u koje ćemo upisati povratnu informaciju o rezultatu zbrajanja
- tekst je polje u koje ćemo upisati neko tekstualno obrazloženje rezultata

Sada još moramo definirati funkciju u JavaScriptu koja će obaviti zbrajanje i ispis:

<SCRIPT LANGUAGE="JavaScript">
<!--
function Zbroji(forma) {
    var br1 = eval(forma.broj1.value);
   //prihvat prvog broja s forme u varijablu br1

    var br2 = eval(forma.broj2.value);    
//prihvat drugog broja s forme u varijablu br2
    var ukupno = br1 + br2;
   //zbrajanje br1 + br2 u varijablu ukupno
    var poruka = "";    
//inicijalna vrijednost varijable poruka
    if (ukupno <= 0) {
     /*standardna IF...ELSE struktura*/
    poruka = "nula ili negativan!";
    }
    else {
    if (ukupno > 10)
    poruka = "veći od deset!";
    if (ukupno <= 10)
    poruka = "između 1 i 10!";
    }
    forma.zbroj.value = ukupno;    
//upis rezultata u polje "zbroj" na formi
    forma.tekst.value = "Zbroj je " + poruka;
     //upis teksta u polje "tekst" na formi
}
-->
</SCRIPT>

... i sada još samo preostaje da gornju funkciju u JavaScriptu stavimo u sekciju <HEAD>...</HEAD> a formu u <BODY>...</BODY>!

U prilogu js-vje9a.html možete vidjeti kako ovaj primjer funkcionira u praksi...


PRIHVAT PODATAKA S FORME, OBRADA I POVRAT INFORMACIJE U NOVI DOKUMENT

Naravno, ako podatke prikupljene od korisnika želite obraditi i rezultate obrade prikazati (generirati) na novoj HTML stranici, stvar nije ništa kompliciranija! Umjesto da rezultate upišete u polja forme na tekućoj stranici, kao u prethodnom primjeru - pogledajte funkciju zbroji():

forma.zbroj.value = ukupno;      //upis rezultata u polje "zbroj" na formi
forma.tekst.value = "Zbroj je " + poruka;
     //upis teksta u polje "tekst" na formi

vi umjesto toga na mjesto gornjih iskaza u funkciji zbroji() stavite ove:

document.write('<HTML><HEAD><TITLE>Zbrajanje dva broja</TITLE></HEAD>')
document.write('
<BODY BGCOLOR="blue" TEXT="#FFFFFF"><BR>')
document.write('
Zbroj brojeva iznosi: ' + ukupno + '.<BR>')
document.write('
Objašnjenje zbrajanja: Zbroj je ' + poruka + '<BR>')
document.write('
</CENTER></BODY></HTML>')

... dakle, jednostavno generirajte novi HTML dokument kombinirajući ga s varijablama.

U prilogu js-vje9b.html možete vidjeti kako funkcionira ovo rješenje...


SLANJE E-MAILA

Da bi akciju forme usmjerili na slanje e-maila, nije nam potreban JavaScript. Međutim, da vidimo kako slanje e-maila možemo kontrolirati JavaScriptom i kako sve to malo "dotjerati":

<HTML><HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="javascript">
    var ime = prompt("Upišite svoje ime:","vaše ime")
    var email = prompt("Upišite svoju e-mail adresu:", "vasa@email")
</SCRIPT>
<SCRIPT LANGUAGE="javascript">
    function
obavijest() {
        var noviWin = window.open("", "novi", "height=300,width=300");
        noviWin.document.write("
<HTML><HEAD><TITLE>Obavijest o slanju pošte</TITLE></HEAD>")
        noviWin.document.write("
<BODY BGCOLOR='FFFFCC'>")
        noviWin.document.write("
<CENTER>")
        noviWin.document.write("
Hvala, <B>" + ime + "</B> (" + email + ")<P>")
        noviWin.document.write("
Vaša poruka <P><I>" + document.dopisnaForma.Poruka.value + "</I><P>")
        noviWin.document.write("
bit će poslana na ime.prezime@domena.hr<p>")
        noviWin.document.write("
<FORM>")
        noviWin.document.write("
<INPUT TYPE='button' VALUE='Zatvori prozor' onClick='self.close()'>")
        noviWin.document.write("
</FORM>")
        noviWin.document.write("
</CENTER></BODY></HTML>")
    }
</SCRIPT>
FORM METHOD="post" ACTION="mailto:ime.prezime@domena.hr?Subject=Probni mail" ENCTYPE="text/plain" NAME="dopisnaForma"
    <B>Upišite svoju poruku:</B><BR>
    <TEXTAREA COLS="30" ROWS="5" NAME="Poruka"></TEXTAREA><P>
    <INPUT TYPE="submit" VALUE="Pošalji e-mail"
onClick="obavijest()">
</FORM>
</BODY>
</HTML>

U prilogu js-vje9c.html možete isprobati funkcionalnost ovakvog dopisa...


KONTROLA UPISANIH PODATAKA

U nekim slučajevima korisno je napraviti kontrolu upisanih podataka! Na primjer, poželjno je provjeriti da li je korisnik u svojoj e-mail adresi upisao znak @ i slično.
Donji primjer prikazuje kako se može obaviti takva kontrola a prema svojim potrebama lako ga možete i mijenjati:

<HTML><HEAD>
<SCRIPT language="JavaScript">
    <!--
    function
test1(form) { /* provjera da li je upisan podatak */
        if (form.text1.value == "")
            alert("Morate upisati podatak!")
        else {
            alert("Ako je vaše ime "+form.text1.value+", onda je upis ispravan!");
        }
    }
    function
test2(form) { /* provjera je li u e-mail upisan @ */
        if (form.text2.value == "" || form.text2.value.indexOf('@', 0) == -1)
            alert("Neispravna e-mail adresa!");
        else alert("Ako je vaša adresa " + form.text2.value + " onda je upis ispravan!");
    }
    // -->
</SCRIPT>
</HEAD>
<BODY>
<H3>Primjer kontrole upisanih podataka...</H3>

<FORM>
    Upišite svoje ime:
    <INPUT TYPE="text" NAME="
text1">
    <INPUT TYPE="button" VALUE="Testiraj"
onClick="test1(this.form)">
    <P>
    Upišite svoju e-mail:
    <INPUT TYPE="text" NAME="
text2">
    <INPUT TYPE="button" VALUE="Testiraj"
onClick="test2(this.form)">
</FORM>


</BODY>
</HTML>

U prilogu js-vje9d.html možete vidjeti kako funkcionira navedena kontrola...

 

Adsense sponzor






 Ova web stranica koristi COOKIES - COPYRIGHT - 2006 - 2017 - IvanC - ic.ims.hr