Limbajul Java-Script

Formulare interactive

Java Script este un limbaj de scriptare server side putand sa implementeze diferite funcii direct in pagina web. Se utilizeaza deseori pentru validari de date introduse in formulare active. Ne vom indrepta atentia in continuare asupra modului cum gestioneaza JS elementele interactive din paginile web.

Elemente pentru afisare text (continut)

Sa realizam o aplicatie in care se introduce un element interactiv de tip "span", element ce poate fi controlat de scripturi Java in vederea afisarii de continut. Aplicatia afiseaza un text intr-un element de tip . Lansarea afisarii se face prin introducerea unui element INPUT type="button" care declanseaza procedura de afisare text.
Sursa aplicatiei:

In urmatoarea aplicatie se introduce un element interactiv de tip "div", element ce poate fi controlat de scripturi Java in vederea afisarii de continut. Aplicatia afiseaza un continut intr-un element de tip "div". Lansarea afisarii se face prin introducerea unui element INPUT type="button" care declanseaza procedura de afisare continut.
Sursa aplicatiei:

Elemente de tip input text

Sa realizam o aplicatie in care se introduce un element interactiv de tip INPUT type="text", element ce poate fi controlat de scripturi Java. Aplicatia afiseaza data si ora intr-un element de tip text. Lansarea afisarii se face prin introducerea unui element INPUT type="button" care declanseaza procedura de afisare a datei si orei, procedura care dupa activare se autoinitiaza la interval de 0 secunda.
Sursa aplicatiei se poate vedea mai jos:

function af_ora(ora) {
	return (ora);
}

function pune_zero(inValue) { 
if (inValue > 9) { 
	return "" + inValue; 
} 
return "0" + inValue; 
}
 
function ampm() { 
if (now.getHours() < 12) { 
	return (" am"); 
} 
return (" pm"); 
}

function afis_t() { 
	now = new Date; 
	document.form_ceas.afisor.value ="    "+ziua+" "+tabel_luni[luna]+" "+an+" ora:"+af_ora(now.getHours()) + ":" + 
	pune_zero(now.getMinutes()) + ":" + pune_zero(now.getSeconds()) + 
	ampm(); 
	setTimeout("afis_t()",1000);
}  
var azi=new Date();
var an=azi.getFullYear();
var luna=azi.getMonth();
var ziua=azi.getDate();
var tabel_luni=new Array("Ian","Febr","Mar","Apr","Mai","Iun","Iul","Aug","Sept","Oct","Noi","Dec");
</script>

</script>
</td></tr></table></center>  
</body>
</html>

Sa reluam aplicatia pentru afisarea consumurilor lunare. In cadrul acelei aplicatii, valorile consumurilor au fost declarate implicit la inceputul programului.
Vom modifica aplicatia, astfel incat sa putem inroduce valorile consumurilor lunare. Se vor introduce elemente de tip input type="text" prin intermediul carora se vor introduce valorile consumurilor. Nmarul de astfel de elemente va trebui sa fie egal cu numarul de elemente ale vectorului. Acestea vor fi generate automat folosind o instructiune repetitiva.

<html>
<body>
<center> 
<table bgcolor="WhiteSmoke" border =1 width="700"><tr><td colspan="2">
<center>
 <font size=4 color="blue"> Consumuri energetice lunare</font> (maxim 300 Kwh)
</td></tr><tr><td>
<script type="text/javascript">
function afis_v(){
af.innerHTML = "";	
for (i=0; i < 12; i++) {
	val_c=eval('form_cons.af_cons'+i+'.value');
	if ((val_c > 300) || (val_c<0) || (val_c.trim()==""))
		consum[i]=0;
	else
		consum[i]=val_c;
		
	af.innerHTML = af.innerHTML+"<table border=1><tr><td width='100'>"+luni[i]+":"+consum[i]+"</td><td width='350'><hr color ='red' size='5' align='left' width="+consum[i]+"color ='red'></td></tr></table>";
	} 
	setTimeout("afis_v()",200);
}
var i;
luni = new Array("Ianuarie","Februarie","Martie","Aprilie","Mai","Iunie","Iulie","August","Septembrie","Octombrie","Noiembrie","Decembrie");
consum = new Array(100,123,241,107,234,75,178,221,242,77,89,109);
</script>
<table border=1><tr><td>
<FORM name="form_cons">
<table border=1>
<script>
for (i=0; i < 12; i++) {
	document.write("<tr><td> ",luni[i],"</td><td> <INPUT type=text name=\"af_cons",i,"\" size=12 value=\"",consum[i],"\"></tr></td>");
}
</script>
</table>
</td><td>
</FORM>
</td></tr></table>
</td><td>
<div id="af">
<script>afis_v()</script>;
</div>
</center>
</td></tr></table></center>  
</body>
</html>

Elemente de tip input "button"

Chiar si in aplicatia precedenta am utilizat un element de tip "button" prin intermediul caruia se declanseaza procedura de afisare.
Urmatoarea aplicatie, genereaza si afiseaza culori aleatoare folosind elemente de tip "text" si "button" controlate din JS

Dupa cum se observa, pentru a putea scrie textul:"Culoare generata aleator " s-a definit un div numit "div_cul" . Scrierea in acest "div" se face invocand metoda "innerHTML"

Elemente de tip textarea

    Sa utilizam acest element pentru a realiza un interpretor on-line pentru codul HTML
    Se va defini un div numit "div_html" . Interpretarea codului HTML se va face in acest "div" se face invocand metoda "innerHTML" si se va atribui valoarea elementului textarea, astfel se va forta interpretarea codului html scris in elementul textarea

    In macheta de jos, se poate schimba codul HTML acesta fiind interpretat on line

Interpretor HTML on line

Elemente de tip liste de selectii

Listele de selectie sunt des folosite in paginile web. Este foarte important sa avem acces la nivel de limbaj de scriptare (In cazul nostru JS) la aceste elemente in vederea validarii acestora pe partea de client side, obtinandu-se astfel aplicatii mai rapide.
Urmatoarea aplicatie utilizeaza liste de selectii controlate din JS

Dupa cum se vede, pentru afisarea numarului de selectii s-a utilizat o fereastra "alert". S-ar putea atasa un element de tip text in care sa se faca afisarea mesajelor. In acest caz sursa aplicatiei devine:

Elemente de tip checkboxes

Urmatoarea aplicatie utilizeaza elemente de tip checkboxes controlate din JS

<form action="apl_s.html" name="Form74_ck"  onsubmit="return v_form(this)" method="post">
<br>
	<I><center> Selectati disciplinele optionale </center></I><br>
	<INPUT TYPE = "CHECKBOX" NAME="ck1" VALUE = „a” > Tehnologii web<br>
	<INPUT TYPE = "CHECKBOX" NAME="ck2" VALUE = „b” > Programare C++ <br>
	<INPUT TYPE = "CHECKBOX" NAME="ck3" VALUE = „c” > Programare C# <br>
	<INPUT TYPE = "CHECKBOX" NAME="ck4" VALUE = „d” > Programare Java <br><hr>
	<input type="submit" value="Afisare selectii"> 
 	<INPUT type="text" name="af_ms" size=45 value=" ">	
 </form>
</script>
</head><body>
</form>
</td></tr></table></center>  
</body>
</html>

Pentru a afisa numarul de selectii vom folosi un contor nr_s

In cazul in care avem n butoane de tip checkboxes cu numele ck1-ckn trebuie sa folosim instructiuni de buclare in care sa folosim metode de indirectare a variabilelor . Aplicatia anterioara devine:

Elemente de tip radio-button

Urmatoarea aplicatie utilizeaza elemente de tip radio-button controlate din JS
In cazul in care avem n butoane de tip radio-button toate vor purta un singur nume. Pentru a obtine butonul selectat, pentru fiecare buton se lanseaza o functie care intoarce valoarea butonului astfel:

Pentru a afisa materia selectata, modificam sursa paginii astfel:

Validarea formularelor utilizand limbajul Java Script

Java Script fiind un limbaj de scriptare de tip "client-side" este foarte potrivit pentru a face validarea formularelor interactive direct la "client" fara a mai fi necesara trimiterea datelor spre server si acesta sa formuleze un raspuns care eventual trimite inapoi datele ce nu au fost corect completate. Procedeul de validare pe partea clientului este mult mai rapid, filtrand datele completate de client on-line, eventualele mesaje de eroare fiind afisate chiar in momentul completarii unui camp de catre client.
Se verifica de obicei:

completarea tuturor campurilor obligatorii
validitatea adreselor de mail
corectitudinea tipului de data introdus in fiecare camp
exista cifre in campurile ce reprezinta nume, prenume etc ?

Urmatoarea aplicatie verifica daca un anumite campuri a fost completate.

Sa realizam un realizam un formular ceva mai complicat, in care se verifica daca un anumite campuri a fost completate cat si daca au fost selectate checkbox-uri.

<html>
<body>
<center><table bgcolor="WhiteSmoke" border =1 width="400"><tr><td>
<script type="text/javascript">
function vld_camp(camp,mesaj){
	with (camp){
		if (value==null||value==""){
			alert(mesaj);
			return false;
		}
		else {
			return true;
		}
	}
}

function nr3_ck() {  
 var nr_s=0
  for (var i=1; i < 5; i++) {
	 elem=eval("Form3_ck.ck"+i)
     if (elem.checked==true)  nr_s++;   
     } 
	 return nr_s;
 }
</script>

<form action="apl_s.html" name="Form3_ck"  onsubmit="return vld_form(this)" method="post">
<br><I>  Completati campurile de mai jos (toate sunt obligatorii)</I> <br><hr>
	Numele : <input type="text" name="num" size="30"><br>
	Preumele:<input type="text" name="pnum" size="50"><br><br>
	<I> Selectati disciplinele optionale: </I><br><br>
	<INPUT TYPE = "CHECKBOX" NAME="ck1" VALUE = „a” > Tehnologii web<br>
	<INPUT TYPE = "CHECKBOX" NAME="ck2" VALUE = „b” > Programare C++ <br>
	<INPUT TYPE = "CHECKBOX" NAME="ck3" VALUE = „c” > Programare C# <br>
	<INPUT TYPE = "CHECKBOX" NAME="ck4" VALUE = „d” > Programare Java <br><hr>
	<input type="submit" value="Trimit"> 
 </form>
</script>
</head><body>
</form>
</td></tr></table></center>  
</body>
</html>

Mesajele de validare pot fi afisate intr-un Input type "text" daca au fost selectate checkbox-uri.

function nr4_ck() {  
 var nr_s=0
  for (var i=1; i < 5; i++) {
	 elem=eval("Form4_ck.ck"+i)
     if (elem.checked==true)  nr_s++;   
     } 
	 return nr_s;
 }
</script>

<form action="apl_s.html" name="Form4_ck"  onsubmit="return vl_form(this)" method="post">
<br><I>  Completati campurile de mai jos (toate sunt obligatorii) !</I> <br><hr>
	Numele : <input type="text" name="num" size="30"><br>
	Preumele:<input type="text" name="pnum" size="50"><br><br>
	<I><center> Selectati disciplinele optionale </center></I><br>
	<INPUT TYPE = "CHECKBOX" NAME="ck1" VALUE = „a” > Tehnologii web<br>
	<INPUT TYPE = "CHECKBOX" NAME="ck2" VALUE = „b” > Programare C++ <br>
	<INPUT TYPE = "CHECKBOX" NAME="ck3" VALUE = „c” > Programare C# <br>
	<INPUT TYPE = "CHECKBOX" NAME="ck4" VALUE = „d” > Programare Java <br><hr>
	<input type="submit" value="Trimit"> 
 	   <INPUT type="text" name="af_ms" size=45 value=" ">	
 </form>
</script>
</head><body>
</form>
</td></tr></table></center>  
</body>
</html>