Uvod v JavaScript

7.del

Obrazci za vnos podatkov (form input) so pomembne sestavine Web-strani. Vnos v obrazec je pogosto poslan nazaj do strežnika. JavaScript vam omogoča preverjanje vnosa, preden je ta poslan strežniku. Najprej si bomo ogledali, kako se pregleduje vnose v obrazce. Nato si bomo ogledali možnosti pošiljanja informacij nazaj strežniku s pomočjo JavaScript-a in HTML.

Sprva bomo kreirali preprost program, ki bo vseboval dva tekst-elementa (obrazca). Uporabnik mora vpisati ime v prvi in e-mail naslov v drugi obrazec. V obrazce lahko vnesete karkoli, nato pa kliknite na gumb. Poskusite tudi klikniti na gumb, ne da bi kaj vpisali.

Pri prvem vnosu boste dobili opozorilno sporočilo, če ne boste vpisali ničesar. Vsak vnos pa je veljaven.Drugi obrazec je nekoliko bolj dodelan. Poskusite vnesti navaden tekstovni podatek - na primer vaše ime. Ne bo delovalo. Kriterij za sprejem vnosa kot veljaven e-mail naslov je, da vnos vsebuje znak @.

In kako izgleda skripta za gornji primer...

<html>
<head>
<script language="JavaScript">
<!-- skrivanje

function test1(obrazec) {
  if (obrazec.tekst1.value == "")
    alert("Prosimo vpisite podatek!")
  else { 
   alert("Zivjo "+obrazec.tekst1.value+"! Vnos je veljaven!");
  }
}

function test2(obrazec) {
  if (obrazec.tekst2.value == "" || 
      obrazec.tekst2.value.indexOf('@', 0) == -1) 
        alert("E-mail naslov ni veljaven!");
  else alert("OK!");
}
// -->
</script>
</head>

<body>
<form name="prvi">
Ime in priimek:<br>
<input type="text" name="tekst1">
<input type="button" name="gumb1" value="Test vnosa" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="gumb2" value="Test vnosa" onClick="test2(this.form)">
</body>

Sprva si oglejte HTML kodo v <body> sekciji. Kreirali smo dva obrazca in dva gumba. Gumba kličeta funkciji test1(...) in test2(...). this.form podamo funkciji zato, da lahko kasneje v funkcijah naslovimo prave elemente.
Funkcija test1(obrazec) preverja, če je vnos prazen - if (obrazec.tekst1.value=="")... .'obrazec' je spremenljivka, ki pri klicu funkcije prevzame vrednost 'this.form' (ta.obrazec). 'Vrednost' vnosa dobimo z uporabo 'value' s kombinacijo obrazec.tekst1. Da preverimo, če je vnos prazen, ga primerjamo z "". Če je vnos enak "", pomeni, da nismo vnesli ničesar. Uporabnik bo dobil opozorilno sporočilo.Funkcija test2(obrazec) spet primerja vnos z "". A k if-ukazu smo dodali OR-operator ( || ). Tega smo spoznali že v šestem delu.
If-ukaz preveri, če velja prva ali druga izjava. Če je vsaj ena od njiju resnična, se bo sledeči ukaz izvršil. To pomeni, da boste dobili opozorilno sporočilo, če ne boste vnesli ničesar ali če ne boste vnesli znaka @.

Za pošiljanje vnosa v obrazec imamo več možnosti. Najlažja možnost je, da vnos pošljemo preko e-maila. To metodo si bomo ogledali malce pobliže. Če želite dobiti odgovor brez e-maila in bi radi, da bi strežnik obdelal vnos avtomatično, boste zaenkrat morali uporabiti CGI. CGI bi na primer potrebovali, če bi želeli narediti iskalni stroj (search engine), kot je Yahoo - kjer uporabnik dobi rezultat takoj po vnosu.Z JavaScript-om tega ne moremo narediti (ne moremo doseči, da bi strežnik avtomatično dodal informacije v obstoječo HTML-stran).Zaenkrat lahko to dosežemo le s CGI. Lahko pa kreirate imenik (guestbook) z uporabniki, ki pošiljajo e-mail. A odgovore boste morali napisati ročno. Seveda če ne pričakujete 1000 odgovorov dnevno.
Ta skripta je v navadnem HTML jeziku. JavaScript-a ne potrebujemo! Razen seveda, če želite preveriti vnos, preden je ta poslan strežniku.

<FORM METHOD=POST ACTION="mailto:tvoj_email@gre.sem">
<H3>Ti je vsec ta stran?</H3>
  <INPUT NAME="izbira" TYPE="RADIO" VALUE="1">Sploh ne.<BR>
  <INPUT NAME="izbira" TYPE="RADIO" VALUE="2" CHECKED>Zguba casa.<BR>
  <INPUT NAME="izbira" TYPE="RADIO" VALUE="3">Najvecji izmecek na Web-u.<BR>
  <INPUT NAME="predlozi" TYPE="SUBMIT" VALUE="Poslji">
</FORM>

Tako boste dobili odgovor preko e-maila. Edini problem je, da boste dobili pošto, ki bo na prvi pogled bolj čudna. Včasih so namesto presledkov '+', včasih pa '%20'. Tako+bi+to+lahko+izgledalo+takole. Na mreži boste našli programe, ki to bolj elegantno izpeljejo.

Vaše obrazce lahko naredite bolj prijazne do uporabnika, če določite, kateri del naj bo aktiven na začetku (focus). Ali pa naročite brskalniku, naj določi za aktivni del tisto mesto, kjer je uporabniški vnos nepravilen. To pomeni, da brskalnik postavi kurzor v določen obrazec, tako da uporabniku ni treba klikati pred vpisom. To dosežete s sledečim programom:

function fokusiraj() {
        document.prvi.tekst1.focus();
        return;
}

Ta primer bi določil za aktivno mesto prvi tekst-element v skripti zgoraj. Določiti morate ime celotnega obrazca (form) - ki se tu imenuje prvi - in ime elementa - tu tekst1. Če želite 'fokusirati' na ta element, ko naložite stran, lahko dodate v <body> tag dogodek onLoad. Primer:

<body onLoad="fokusiraj()">

avtor: Žiga Mahkovec
november, 1998