Limbajul Java-Script

Limbajul Java-Script - Programare obiect

Programare obiect in JS

Elemente de programare obiect in limbajul Java Script

    In versiunile mai vechi ale limbajului Java Script nu exista o definitie explicita pentru clase astfel clasa se definea astfel:

    In versiunile actuale ale limbajului Java Script, clasa se defineste astfel:



Vom realiza in continuare o clasa "stud" si 3 instante "stud1","stud2","stud3"

<html>
<body>
<center><table bgcolor="WhiteSmoke" border =1 width="400"><tr><td>
<script type="text/javascript">
function val_rd_ob(rd1) {
	if(rd1==1)  {

document.Form_rd_ob.af_ms.value =stud1.vezi_note();
	}
	if(rd1==2)  {
		document.Form_rd_ob.af_ms.value =stud2.vezi_note();
	}
	if(rd1==3)  {
		document.Form_rd_ob.af_ms.value =stud3.vezi_note();
	}

}

// Definirea clasei "stud"

class stud  
{
	constructor(num, em)
	{
    	this.name = num;
    	this.email = em;
    	this.notele = [];
    	this.currentScore = 0;
	}
    	salv_nota(nota_n)  {
        this.notele.push(nota_n)
    }
    vezi_note()  
	{
		// Varianta I recursiva
		//var note = this.notele.length > 0 ? this.notele.join(",") : "Nu are note";
		//return this.name + " note: " + note;

// Varianta II -for
		var note="";
		if(this.notele.length == 0){
			note=" nu are note";
			return this.name + note;
		}
			
		for (i = 0; i < this.notele.length; i++) 
		{
		 if(i < this.notele.length-1){
			note=note+this.notele[i]+",";
		 }
		 else{
			note=note+this.notele[i];
		 }
		}
		return this.name + " note: " + note;
    }
    schimba_email(email_nou)  
	{
        this.email = email_nou;
        return "Noul email : " + this.email;
    }
}

// Student 1
stud1 = new stud("Ionescu", "ionescu@upm.ro"); 
stud1.schimba_email("ionescu@umfst.ro");
stud1.salv_nota(9);
stud1.salv_nota(10);

// Student 2
stud2 = new stud("Popescu", "popescu@umfst.ro");
//stud2.salv_nota(8);

// Student 3
stud3 = new stud("Georgescu", "georgescu@umfst.ro");
stud3.salv_nota(7);
stud3.salv_nota(4);
stud3.salv_nota(9);
stud3.salv_nota(8);

</script>
<Form name="Form_rd_ob">
	<I><center> Selectati studentul </center></I><br><br>
	<INPUT TYPE = "radio" NAME="rd1" onclick="val_rd_ob(this.value)"  VALUE = "1"> Ionescu <br>
	<INPUT TYPE = "radio" NAME="rd1" onclick="val_rd_ob(this.value)"  VALUE = "2"> Popescu <br>
	<INPUT TYPE = "radio" NAME="rd1" onclick="val_rd_ob(this.value)"  VALUE = "3"> Georgescu <br>
 	<br>   <INPUT type="text" name="af_ms" size=70 value=" ">
 </form>
 <script type="text/javascript">

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

Vom defini in continuare clasa cerc

Clasa binar - afisarea binara a numerelor intregi

<center><table bgcolor="WhiteSmoke" border =1 width="220"><tr><td align="center">
<center><br>Afisare binara<br><br></center> 
<canvas id="desen08" width="400" height="50" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br><br>
<input type="range" value="123" id="per3" min="0" max="65535"  onchange="set_per3()"/>   
<input id="perr3" type="text" size="2" value="123" max="65535"  onchange="set_perr3()"/>
<br>
</td></tr></table></center>
<script type="text/javascript">
var ctx8=desen08.getContext("2d");
ctx8.lineWidth = .5; 
w=desen08.width ;
h=desen08.height/2-20;

class binar{
	constructor(x,y,w,h,c)
	{
		this.x0 = x; // pozitia pe x
		this.y0 = y; // pozitia pe y
		this.wd = w; // latimea
		this.ht = h; // inaltimea
		this.cnvs=c; // canvas
	}
    	deseneaza ()  
	{
		// desenez contur
	
		this.cnvs.beginPath();
		this.cnvs.moveTo(this.x0,this.y0+2); 
		this.cnvs.strokeStyle = "rgb(0,0,255)";
		this.cnvs.lineTo(this.x0+this.wd,this.y0+2);
		this.cnvs.lineTo(this.x0+this.wd,this.y0+this.ht-4);
		this.cnvs.lineTo(this.x0,this.y0+this.ht-4);
		this.cnvs.lineTo(this.x0,this.y0+2);
		this.cnvs.stroke();
	}
	set_val (val,nrb)  
	{
	
		// Stergerea interiorului 
	
		this.cnvs.beginPath();
		this.cnvs.fillStyle = "#ffffff";
		this.cnvs.fillRect(this.x0+1,this.y0+3,this.wd-2,this.ht-8);
		this.cnvs.stroke();
	
		// afisare valoare binara
		var hb,wb,x,y,i=0,bit=0;
		wb = this.wd/ (3 * nrb);
   		hb = this.ht / 3;
   		x = this.x0 + this.wd -2* wb;
   		y = this.y0 + hb;
		this.cnvs.beginPath();

// desenare biti
	
		for (i = nrb - 1; i >= 0; i--)
		{
			bit=parseInt(val%2);
			val=parseInt(val/2);
			if(bit==1){
				this.cnvs.fillStyle = "#ff0000";
				this.cnvs.fillRect(x, y, wb, hb);
				this.cnvs.stroke();
			}
			else
			{
				this.cnvs.fillStyle = "#F0F0F0";
				this.cnvs.fillRect(x, y, wb, hb);
				this.cnvs.stroke();
			}
			x -= 3 * wb;
		}
    }
}
binar1 = new binar(10,10,380,30,ctx8); 
binar1.deseneaza();
set_per3();

function set_per3(){
  var pe = document.getElementById('per3').value;
  document.getElementById('perr3').value=parseInt(pe);
  binar1.set_val(pe,16);
}

function set_perr3(){
  var pe = document.getElementById('perr3').value;
  document.getElementById('per3').value=parseInt(pe);
  binar1.set_val(pe,16);
}

</script>

Clasa termo - Afisarea temperaturilor

<center><table bgcolor="WhiteSmoke" border =1 width="220"><tr><td align="center">
<center><br>Termometre V01<br><br></center> 
<canvas id="desen04" width="200" height="300" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br><br>
<input type="range" value="0" id="per" min="0" max="225"  onchange="set_per()"/>   
<input id="perr" type="text" size="2" value="0" max="225"  onchange="set_perr()"/>
<br>
</td></tr></table></center>
<script type="text/javascript">
var ctx4=desen04.getContext("2d");
ctx4.lineWidth = .5; 
w=desen04.width ;
h=desen04.height/2-20;
class term  
{
	constructor(x,y,w,h,c)
	{
   		this.x0 = x; // pozitia pe x
   		this.y0 = y; // pozitia pe y
   		this.wd = w; // latimea
   		this.ht = h; // inaltimea
   		this.cnvs=c; // canvas
	}

desenez(val)  
	{
		var j;
		this.cnvs.beginPath();
		this.cnvs.fillStyle = "#FFFFFF";
		this.cnvs.fillRect(this.x0-1,this.y0-1,this.wd+40,this.ht+2);
		this.cnvs.stroke();	
		// desenez contur termometru
		this.cnvs.beginPath();
		this.cnvs.moveTo(this.x0,this.y0); 
		this.cnvs.strokeStyle = "rgb(255,0,0)";
		this.cnvs.lineTo(this.x0+this.wd,this.y0);
		this.cnvs.lineTo(this.x0+this.wd,this.y0+this.ht);
		this.cnvs.lineTo(this.x0,this.y0+this.ht);
		this.cnvs.lineTo(this.x0,this.y0);
		this.cnvs.stroke();
		// desenez gradatii
		this.cnvs.beginPath();
 		this.cnvs.strokeStyle = "rgb(120,120,120)";
		this.cnvs.font = "10px Arial";
		for (j = this.ht; j >0; j -= 5)
		{
			this.cnvs.moveTo(this.x0+this.wd+2,this.y0+j); 
			if (j % 25 == 0)
			{
				this.cnvs.lineTo(this.x0 + this.wd + 12,this.y0 + j);
				this.cnvs.strokeText(this.ht-j,this.x0 + this.wd + 20,this.y0 + j+3);
			}
			else
			{
				this.cnvs.lineTo(this.x0 + this.wd + 7,this.y0 + j);
			}
		}
		this.cnvs.stroke();
		// Stergerea interiorului 
		this.cnvs.beginPath();
		this.cnvs.fillStyle = "#0000ff";
		// trasare valoare
		this.cnvs.fillRect(this.x0+1,this.y0+this.ht-val,this.wd-2,val);
		this.cnvs.stroke();
    }
}

termo1 = new term(10,10,10,275,ctx4); 
termo1.desenez(0);
termo2 = new term(100,60,10,225,ctx4); 
termo2.desenez(0);

function set_per(){
  var pe = document.getElementById('per').value;
  document.getElementById('perr').value=parseInt(pe);
  termo1.desenez(pe);
  termo2.desenez(pe);
}
function set_perr(){
  var pe = document.getElementById('perr').value;
  document.getElementById('per').value=parseInt(pe);
  termo1.desenez(pe);
  termo2.desenez(pe);
}
</script>

Vom extinde clasa pentru a afisa temperaturi negative, vom adauga metoda set_val() care va trasa valoarea temperaturii, iar metoda deseneaza va fi utilizata pentru desenarea termometrului fiind lansata o singura data la inceputul rularii script-ului.
Metoda set_val() va fi invocata de fiecare data cand se schimba temperatura. Aplicatia devine mai rapida, nefiind nevoie sa se redeseneze tot termometrul la fiecare schimbare a temperaturii

<center><table bgcolor="WhiteSmoke" border =1 width="220"><tr><td align="center">
<center><br>Termometre V02<br><br></center> 
<canvas id="desen05" width="200" height="240" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br><br>
<input type="range" value="100" id="per1" min="0" max="400"  onchange="set_per1()"/>   
<input id="perr1" type="text" size="2" value="0" max="300"  onchange="set_perr1()"/>
<br>
</td></tr></table></center>
<script type="text/javascript">
var ctx5=desen05.getContext("2d");
ctx5.lineWidth = .5; 
w=desen05.width ;
h=desen05.height/2-20;

class termo  
{
	constructor(c,x,y,w,h,vmn,vmx)
	{
		this.cnvs=c; // canvas
		this.x0 = x; // pozitia pe x
		this.y0 = y; // pozitia pe y
		this.wd = w; // latimea
		this.ht = h; // inaltimea
		this.valmin=vmn // valoarea minima
		this.valmax=vmx // valoarea maxima
	}

deseneaza()  
	{
	var j,val_a;
	this.cnvs.beginPath();
	this.cnvs.fillStyle = "#FFFFFF";
	this.cnvs.fillRect(this.x0-1,this.y0-1,this.wd+40,this.ht+2);
	this.cnvs.stroke();	
	// desenez contur termometru
	this.cnvs.beginPath();
	this.cnvs.moveTo(this.x0,this.y0); 
	this.cnvs.strokeStyle = "rgb(255,0,0)";
	this.cnvs.lineTo(this.x0+this.wd,this.y0);
	this.cnvs.lineTo(this.x0+this.wd,this.y0+this.ht);
	this.cnvs.lineTo(this.x0,this.y0+this.ht);
	this.cnvs.lineTo(this.x0,this.y0);
	this.cnvs.stroke();

// desenez gradatii

this.cnvs.beginPath();
	this.cnvs.strokeStyle = "rgb(120,120,120)";
	this.cnvs.font = "10px Arial";
	val_a=this.valmin;
	for (j = this.ht; j >=0; j -= 5)
	{
		this.cnvs.moveTo(this.x0+this.wd+2,this.y0+j); 
		if (j % 25 == 0)
		{
			this.cnvs.lineTo(this.x0 + this.wd + 12,this.y0 + j);
			this.cnvs.strokeText(val_a.toFixed(0),this.x0 + this.wd + 20,this.y0 + j+3);
			val_a=val_a+Math.round(25*(this.valmax-this.valmin)/this.ht);
		}
		else
		{
			this.cnvs.lineTo(this.x0 + this.wd + 7,this.y0 + j);
		}
	}
	this.cnvs.stroke();
	}
	set_val(val)  
	{
		// Stergerea interiorului 
		this.cnvs.beginPath();
		this.cnvs.fillStyle = "#ffffff";
		this.cnvs.fillRect(this.x0+1,this.y0,this.wd-2,this.ht);
		this.cnvs.stroke();
		// trasare valoare
		this.cnvs.beginPath();
		this.cnvs.fillStyle = "#0000ff";
		val=this.ht*(val-this.valmin)/(this.valmax-this.valmin); // scalare
		this.cnvs.fillRect(this.x0+1,this.y0+this.ht-val,this.wd-2, val);
		this.cnvs.stroke();
	}
}
term1 = new termo(ctx5,10,10,10,200,-100,300); 
term1.deseneaza();
term2 = new termo(ctx5,100,10,10,200,-100,700); 
term2.deseneaza();
set_per1();
function set_per1(){
  var pe = document.getElementById('per1').value;
  document.getElementById('perr1').value=parseInt(pe-100);
  term1.set_val(pe-100);
  term2.set_val(pe-100);
}
function set_perr1(){
  var pe = document.getElementById('perr1').value;
  document.getElementById('per1').value=parseInt(pe);
  term1.set_val(pe);
  term2.set_val(pe);
}

</script>

Clasa "voltm" : afisarea valoarii instantanee a semnalelor

<center><table bgcolor="WhiteSmoke" border =1 width="220"><tr><td align="center">
<center><font color="blue" size="5"> Voltmetru <br></font> </center> 
<canvas id="desen09" width="420" height="250" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br><br>
<input type="range" value="0" id="per9" min="0" max="250"  onchange="set_per9()"/>   
<input id="perr9" type="text" size="2" value="0" max="250"  onchange="set_perr9()"/>
<br>
</td></tr></table></center>
<script type="text/javascript">
var ctx9=desen09.getContext("2d");
ctx9.lineWidth = .5; 
w=desen09.width ;
h=desen09.height/2-20;

class voltm  
{
	constructor(c,x,y,w,vm)
	{
		this.cnvs=c; // canvas
		this.x0 = x; // pozitia pe x
		this.y0 = y+20; // pozitia pe y
		this.wd = w; // latimea
		this.ht = w/2+10; // inaltimea
		this.vmax=vm // valoarea maxima
		var alfa_r=0; // ungji in radiani
		var alfa_gr=0; // ungji in grade
	}

set_val(val_gr)  
	{
		var lt = 15;
		var lg = 22;
		var lv = 17;
		var x1, x2, xt, y1, y2, yt;
		var xc = this.x0 + this.wd / 2;
		var yc = this.y0 + this.wd / 2;
		var raza = this.wd / 2;
		var nrd=0;
		var val_a=0,alfa_r=0,alfa_gr=0;		
		// Stergerea interiorului
		
		this.cnvs.beginPath();
		this.cnvs.fillStyle = "#ffffff";
		this.cnvs.fillRect(this.x0+1,this.y0-20,this.wd-2,this.ht+10);
		this.cnvs.stroke();
		
		// desenez contur voltmetru
		
		this.cnvs.beginPath();
		this.cnvs.moveTo(this.x0,this.y0-20); 
		this.cnvs.strokeStyle = "rgb(255,0,0)";
		this.cnvs.lineTo(this.x0+this.wd,this.y0-20);
		this.cnvs.lineTo(this.x0+this.wd,this.y0+this.ht);
		this.cnvs.lineTo(this.x0,this.y0+this.ht);
		this.cnvs.lineTo(this.x0,this.y0-20);
		this.cnvs.stroke();
		
		// desenez gradatii
		this.cnvs.beginPath();
		this.cnvs.strokeStyle = "rgb(120,120,120)";
		this.cnvs.font = "10px Arial";
		alfa_r=0;		
		alfa_gr = 140;//  unghiul in grade
		while (alfa_gr >=40)
		{
		alfa_r = 2 * Math.PI * (alfa_gr) / 360;// unghiul in radiani
		if (nrd % 5 == 0)
		{
			x1 = xc + (raza-lt) * Math.cos(alfa_r);
			y1 = yc - (raza-lt) * Math.sin(alfa_r);
			xt = xc-5 + raza * Math.cos(alfa_r);
			yt = yc - raza * Math.sin(alfa_r);
			this.cnvs.strokeText(val_a.toFixed(0),xt,yt);
			val_a = val_a + this.vmax /10;
		}
		else
		{
			x1 = xc + (raza - lg) * Math.cos(alfa_r);
			y1 = yc - (raza - lg) * Math.sin(alfa_r);
		}
		x2 = xc + (raza - 2 * lt) * Math.cos(alfa_r);
		y2 = yc - (raza - 2 * lt) * Math.sin(alfa_r);
		//zona_des.DrawLine(creion, x1, y1, x2, y2);
		this.cnvs.moveTo(x1,y1);
		this.cnvs.lineTo(x2,y2)
		alfa_gr -= 2;
		nrd++;
		}
		this.cnvs.stroke();
	
		// alfa_gr unghiul in grade
	
		val_gr=140-100*val_gr/this.vmax // scalare
		alfa_r = 2 * Math.PI * (val_gr) / 360;// unghiul in radiani
		var x = xc + (raza - 2 * lv) * Math.cos(alfa_r);
		var y = yc - (raza - 2 * lv) * Math.sin(alfa_r);
		this.cnvs.beginPath();
		this.cnvs.strokeStyle = "rgb(0,0,255)";
		this.cnvs.moveTo(xc,yc);
		this.cnvs.lineTo(x,y);
		this.cnvs.stroke();
	}
	
	deseneaza()
	{
	
		// desenez contur voltmetru
		
		this.cnvs.beginPath();
		this.cnvs.moveTo(this.x0,this.y0-20); 
		this.cnvs.strokeStyle = "rgb(255,0,0)";
		this.cnvs.lineTo(this.x0+this.wd,this.y0-20);
		this.cnvs.lineTo(this.x0+this.wd,this.y0+this.ht);
		this.cnvs.lineTo(this.x0,this.y0+this.ht);
		this.cnvs.lineTo(this.x0,this.y0-20);
		this.cnvs.stroke();
	}
}

voltm1 = new voltm(ctx9,10,10,400,250); 
voltm1.deseneaza();
set_per9();
function set_per9(){
  var pe = document.getElementById('per9').value;
  document.getElementById('perr9').value=parseInt(pe);
  voltm1.set_val(pe);
  //voltm1.set_val();
}
function set_perr9(){
  var pe = document.getElementById('perr9').value;
  document.getElementById('per9').value=parseInt(pe);
  voltm1.set_val(pe);
  //voltm1.set_val();
}

</script>

Clasa "afisor_xt" - afisarea evolutiei in timp a semnalelor

Clasa afisor_xt poate fi folosita pentru afisarea oricarei functii matematice. Vom mai adauga parametrii x_max si x_min pentru a putea afisa valoarea lui x abscisa. Vom mai adauga metoda auto_sx pentru a putea afisa dinamic valorile lui x in cazul ca domeniul in care x ia valori, este varibil. Vom folosi apoi clasa afisor_xt pentru a afisa un sinus de frecventa variabila.

<html>
<center><table bgcolor="WhiteSmoke" border =1 width="220"><tr><td align="center">
<center> Afisor_xt <br></center> 
<canvas id="desen07" width="500" height="350" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas>
<INPUT onclick=graf() type=button value=Start>

</td></tr></table></center>
<script type="text/javascript">
var ctx7=desen07.getContext("2d");
ctx7.lineWidth = .5; 
w=desen07.width ;
h=desen07.height/2-20;
vals = [];
nrv=400;
ht=300;
vmin=0;
vmax=100;
xmin=0;
xmax=100;
f=1;
for(i=0;i<nrv;i++){

vals[i]=Math.round(vmax/2);
}
			
class afisor_xt
{
	constructor(c,pozx, pozy, n_maxx, n_maxy, val_max, val_min, x_max, x_min)
	{
		this.cnvs=c; // canvas
		this.x0 = pozx;// pozitia pe x
		this.y0 = pozy;// pozitia pe y
		this.w = n_maxx; // latimea
		this.h = n_maxy;// inaltimea
		this.v_max = val_max; // valoarea maxima
		this.v_min = val_min // valoarea minima
		this.x_mx = x_max; // x maxim
		this.x_mn = 0 // x minim
	}
	auto_sx(x_maxim, x_minim)
	{
            if (x_maxim - x_minim != 0)
            {
                this.x_mx = x_maxim;
                this.x_mn = x_minim;
            }
            else
            {
                this.x_mx = this.w;
                thisx_mn = 0;
            }
	}
	deseneaza()  
	{
	
	var i,j,ps,v_g,fs;
	
	// sterg continut
	
	this.cnvs.beginPath();
	this.cnvs.fillStyle = "#FFFFFF";
	this.cnvs.fillRect(this.x0-30,this.y0-10,this.x0+this.w+10,this.y0+this.h+30);
	this.cnvs.stroke();	
	
	//chenar
	
	this.cnvs.beginPath();
	this.cnvs.moveTo(this.x0,this.y0); 
	this.cnvs.strokeStyle = "rgb(0,0,255)";
	this.cnvs.lineTo(this.x0+this.w,this.y0);
	this.cnvs.lineTo(this.x0+this.w,this.y0+this.h);
	this.cnvs.lineTo(this.x0,this.y0+this.h);
	this.cnvs.lineTo(this.x0,this.y0);
	this.cnvs.stroke();

// grid orizontal minor
			
	this.cnvs.beginPath();
	this.cnvs.strokeStyle = "rgb(200,200,200)";
	this.cnvs.font = "10px Arial";
	for (j = this.h-10; j >=0; j -= 10)
	{
		this.cnvs.moveTo(this.x0,this.y0+j); 
		this.cnvs.lineTo(this.x0 + this.w, this.y0 + j);
	}
	
	// grid vertical minor
	
	for (j = 10; j<=this.w-10; j += 10)
	{
		this.cnvs.moveTo(this.x0+j,this.y0+1); 
		this.cnvs.lineTo(this.x0 + j ,this.y0+ this.h+1);
	}
	this.cnvs.stroke();

// grid vertical major
			
	this.cnvs.beginPath();
   	this.cnvs.strokeStyle = "rgb(150,150,150)";
	ps=(this.v_max-this.v_min)/this.h*50;
	v_g=this.v_min;
    	for (j = this.h; j >=0; j -= 50)
    	{
		this.cnvs.moveTo(this.x0,this.y0+j); 
		this.cnvs.lineTo(this.x0 + this.w ,this.y0 + j);
		this.cnvs.strokeText(v_g.toFixed(0),this.x0-20,this.y0 + j);
		v_g=v_g+ps;
    	}

// grid orizontal major

ps=(this.x_mx-this.x_mn)/this.w*50;
	v_g=this.x_mn;
	for (j = 0; j<this.w; j += 50)
	{
		this.cnvs.moveTo(this.x0+j,this.y0); 
		this.cnvs.lineTo(this.x0 + j ,this.y0+ this.h-1);	
		this.cnvs.strokeText(v_g.toFixed(2),this.x0 + j,this.y0 + this.h+10);
		v_g=v_g+ps;
	}
	this.cnvs.moveTo(this.x0+j,this.y0); 
	this.cnvs.stroke();
	}

set_val(vls, nv,r,g,b)  {
		var val_v, val ,i ,j,fs,transl;
		fs= this.h / (this.v_max-this.v_min); // factorul de scala
		transl=fs*(0-this.v_min); // translatia
		val_v = transl+fs*vls[1] ;

// trasez graficul

this.cnvs.beginPath();
		this.cnvs.strokeStyle = "rgb("+r+","+g+","+b+")";
		this.cnvs.moveTo(this.x0,this.y0+this.h-val_v); 
	 	for (i = 0; i<=nrv; i +=1){
			val = transl+fs*vls[i]; //scalare
			this.cnvs.lineTo(this.x0 + i ,this.y0+ this.h-val);
	 	}
		this.cnvs.stroke();
	}	
}

osci = new afisor_xt(ctx7,50,10,nrv,ht,vmax,vmin,xmax,xmin);

function graf(){

// total aleator
	/*
	for(i=0;i<nrv;i++){
		vals[i]=Math.round(ht*Math.random());
	}
	*/
	// aleator continuu
	for(i=1;i<nrv;i++){
		vals[i-1]=vals[i];
	}
	k=Math.round(4*Math.random())
	if(k==0)
		f=1;
	if(k==1)
		f=-1;
	if(k==2)
		f=10;
	if(k==3)
		f=-10;

vals[nrv-1]=vals[nrv-2]+f;

if(vals[nrv-1]>vmax)
		vals[nrv-1]=vmax/2;
	if(vals[nrv-1]<=0)
		vals[nrv-1]=vmax/2;

osci.deseneaza();
	osci.set_val(vals,nrv,100,0,250);
	setTimeout("graf()",100);
}

</script>