Limbajul Java-Script

Limbajul Java-Script - Utilizare obiecte

Aplicatii cu obiecte in JS

Combinand termo si afisor x-t obtinem:

<html>
<center><table bgcolor="WhiteSmoke" border =1 width="220"><tr><td align="center">
<center><br>Virtual instruments<br><br></center> 
<canvas id="desen06" width="600" height="340" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br><br>
<input type="range" value="21" id="per2" min="0" max="500"  onchange="set_per2()"/>   
<input id="perr2" type="text" size="2" value="21" max="500"  onchange="set_perr2()"/>
<INPUT onclick=grafic() type=button value=Start>
<br>
</td></tr></table></center>
<script type="text/javascript">
var ctx6=desen06.getContext("2d");
ctx6.lineWidth = .5; 
w=desen06.width ;
h=desen06.height/2-20;
val_max=500;
valls = [];
nrv=400;
ht=300;
val_min=0;
xmin=0;
xmax=300;
for(i=0;i<nrv;i++){
	//vals[i]=Math.round(ht*Math.random());
	valls[i]=0;
}

oscil = new afisor_xt(ctx6,120,10,nrv,ht,val_max,val_min,xmax,xmin);
function grafic(){

for(i=1;i<nrv;i++){
		valls[i-1]=valls[i];
	}

var pe = document.getElementById('per2').value;
	valls[nrv-1]=pe;
	
	oscil.deseneaza(valls,nrv);
	oscil.set_val(valls,nrv,250,0,0);

term3.set_val(pe,"Magenta");
 	document.getElementById('perr2').value=parseInt(pe);
	setTimeout("grafic()",100);
}

term3 = new termo(ctx6,10,60,10,250,0,500); 
term3.deseneaza();
set_per2();
function set_per2(){
  var pe = document.getElementById('per2').value;
  document.getElementById('perr2').value=parseInt(pe);
  term3.set_val(pe,"Magenta");

}
function set_perr2(){
  var per = document.getElementById('perr2').value;
  document.getElementById('per2').value=parseInt(per);
  term3.set_val(per,"Magenta");
 
}
</script>

Afisare sinus

<center><table bgcolor="WhiteSmoke" border =1 width="220"><tr><td align="center" colspan="4">
<center><canvas id="desen91" width="330" height="300" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas></center>
</td></tr><tr>
	<td width="25"><font color="red">Frecv:</font</td>
	<td width="150"><input type="range" value="50" id="fr_id" min="10" max="200"  onchange="set_fr()"/></td>   
	<td width="50"><span id="fr_t"></span></td>
	<td width="40"><INPUT onclick=graf91() type=button value=Start></td>
</td></tr></table>
</center>
<script type="text/javascript">
var fr,rx,up;
var ctx91=desen91.getContext("2d");
ctx91.lineWidth = .5; 
w=desen91.width ;
h=desen91.height/2-20;
vals = [];
nrv=400;
ht=250;
pas=0.06;
vmax=5;
vmin=-5;
xmax=nrv*pas;
xmin=0;
for(i=0;i<nrv;i++){
	 vals[i]=Math.round(ht/2);
}

function set_fr(){
  fr = document.getElementById('fr_id').value;
  fr_t.innerHTML=fr;
}

function graf91() {
 
	// sinus de frecventa variabila
	vl=-4;
	vh=4;
	alfa=0;
	for(i=0;i<nrv;i++){
		vals[i]=(vh-vl)*(Math.sin(alfa))/2;
		alfa+=(fr/100)*pas;
	}
 
 	osci91.deseneaza();
	osci91.auto_sx(xmax*fr/100,xmin);
	osci91.set_val(vals,nrv,255,0,0);

set_fr();
 setTimeout("graf91()",100);
}
osci91 = new afisor_xt(ctx91,25,10,nrv,ht,vmax,vmin,xmax,xmin);
</script>

Pentru a afisa mai multe canale, putem folosi acceasi clasa afisor_xt

<center><table bgcolor="WhiteSmoke" border =1 width="220"><tr><td align="center" colspan="3">
<center><canvas id="desen92" width="330" height="300" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas></center>
</td></tr><tr>
	<td width="25"><font color="red">Frecv:</font</td>
	<td width="150"><input type="range" value="50" id="fr92_id" min="10" max="200"  onchange="set_fr92()"/></td>   
	<td width="50"><span id="fr92_t"></span></td>
</td></tr><tr>
	<td width="25">Ampl:</td>
	<td width="150"><input type="range" value="30" id="ampl_id92" min="1" max="50"  onchange="set_ampl92()"/></td>   
	<td width="50"><span id="ampl92_t"></span></td>
</td><tr><td align="center" colspan="3">
	<INPUT onclick=graf92() type=button value=Start></td>
</td></tr></table>
</center>
<script type="text/javascript">
var fr92,ampl92,up;
var ctx92=desen92.getContext("2d");
ctx92.lineWidth = .5; 
w=desen92.width ;
h=desen92.height/2-20;
vals = [];
nrv=400;
ht=250;
pas=0.06;
vmax=25;
vmin=-25;
xmax=nrv*pas;
xmin=0;
for(i=0;i<nrv;i++){
	 vals[i]=Math.round(ht/2);
}

function set_fr92(){
  fr92 = document.getElementById('fr92_id').value;
  fr92_t.innerHTML=fr92;
} 
function set_ampl92(){
  ampl92 = document.getElementById('ampl_id92').value;
  ampl92_t.innerHTML=ampl92;
}

function graf92() {
 
	// sinus de frecventa variabila
	vl=-5;
	vh=5;
	alfa=0;
	for(i=0;i<nrv;i++){
		vals[i]=(vh-vl)*(Math.sin(alfa))/2;
		alfa+=(fr92/100)*pas;
	}
 
 	osci92.deseneaza();
	osci92.auto_sx(xmax*fr92/100,xmin);
	osci92.set_val(vals,nrv,255,0,0);

// sinus de amplitudine variabila

alfa=0;
	for(i=0;i<nrv;i++){
		vals[i]=ampl92*(Math.sin(alfa))/2;
		alfa+=pas;
	}
 osci92.set_val(vals,nrv,0,255,0);
 set_fr92();
 set_ampl92();
 setTimeout("graf92()",100);
}
osci92 = new afisor_xt(ctx92,25,10,nrv,ht,vmax,vmin,xmax,xmin);
</script>

Determinarea coordonatelor mouse-ului

Putem adauga un cursor la pozitia mouse-ului

<center><table bgcolor="WhiteSmoke" border =1 width="350"><tr><td align="center" colspan="3">
<center><canvas id="desen93" onmousemove="coord_mouse(event)"  onmouseout="mouse_out()" onclick="coord_click(event)" width="330" height="300" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas></center>
</td></tr><tr>
	<td width="25"><font color="red">Frecv:</font</td>
	<td width="150"><input type="range" value="50" id="fr93_id" min="10" max="200"  onchange="set_fr93()"/></td>   
	<td width="50"><span id="fr93_t"></span></td>
</td></tr><tr>
	<td width="25">Ampl:</td>
	<td width="150"><input type="range" value="30" id="ampl_id93" min="1" max="50"  onchange="set_ampl93()"/></td>   
	<td width="50"><span id="ampl_t"></span></td>
</td><tr><td align="center" colspan="3">
	<p id="af_01">Coordonate mouse:</p>
</td></tr>
<tr><td align="center" colspan="3">
<p id="af_02">Coordonate click:</p>
</td><tr><td align="center" colspan="3">
	<INPUT onclick=graf93() type=button value=Start></td>
</td></tr></table>
</center>
<script type="text/javascript">
var fr93,ampl,up,xm,ym;
var ctx93=desen93.getContext("2d");
ctx93.lineWidth = .5; 
w=desen93.width-20 ;
h=desen93.height/2-20;
x0=25;
y0=10;
vals = [];
nrv=400;
ht=250;
pas=0.06;
vmax=25;
vmin=-25;
xmax=nrv*pas;
xmin=0;
for(i=0;i<nrv;i++){
	 vals[i]=Math.round(ht/2);
}
function coord_mouse(e) {
		var x = event.offsetX;
		xm=x;
		var y = event.offsetY;
		ym=y;
		document.getElementById("af_01").innerHTML = "Coordonate mouse: (" + x + "," + y + ")";		
}
function coord_click(e) {
		var x = event.offsetX;
		var y = event.offsetY;
		document.getElementById("af_02").innerHTML = "Coordonate click: (" + x + "," + y + ")";
}
function mouse_out() {
		document.getElementById("af_01").innerHTML = "Coordonate mouse: ( , )";
}
function set_fr93(){
  fr93 = document.getElementById('fr93_id').value;
  fr93_t.innerHTML=fr93;
} 
function set_ampl93(){
  ampl = document.getElementById('ampl_id93').value;
  ampl_t.innerHTML=ampl;
}

function graf93() {
 
	// sinus de frecventa variabila
	vl=-5;
	vh=5;
	alfa=0;
	for(i=0;i<nrv;i++){
		vals[i]=(vh-vl)*(Math.sin(alfa))/2;
		alfa+=(fr93/100)*pas;
	}
 
 	osci93.deseneaza();
	osci93.auto_sx(xmax*fr93/100,xmin);
	osci93.set_val(vals,nrv,255,0,0);

// sinus de amplitudine variabila

alfa=0;
	for(i=0;i<nrv;i++){
		vals[i]=ampl*(Math.sin(alfa))/2;
		alfa+=pas;
	}
 osci93.set_val(vals,nrv,0,255,0);
 // cursor
 if((xm>x0)&&(xm<w)&&(ym>y0)&&(ym<ht)){
 	ctx93.beginPath();
	ctx93.strokeStyle = "rgb(0,0,255)";
	ctx93.moveTo(x0,ym); 
	ctx93.lineTo(w+x0,ym);
	ctx93.moveTo(xm,y0); 
	ctx93.lineTo(xm,ht+y0);
	ctx93.stroke();
}
 set_fr93();
 set_ampl93();
 setTimeout("graf93()",100);
}
osci93 = new afisor_xt(ctx93,x0,y0,nrv,ht,vmax,vmin,xmax,xmin);
</script>

Utilizarea tehnologiei Ajax

     AJAX este un acronim care provine din JavaScript si XML. Nu este un nou limbaj sau o noua tehnologie, este doar un nou mod de a utiliza standardele existente. Tehnologia AJAAX ofera posibilitatea de a transfera spre pagina clientului numai o parte din pagina fara a fi nevoie sa transfere intreg continutul paginii.
    Vom crea obiectul xmlhttp=new XMLHttpRequest() pentru a aduce date care vor fi afisate utilizand diverse instrumente virtuale. Datele sunt furnizate de o aplicatie pe partea se server aflata la adresa: https://davos.umfst.ro/~traian/web_apl/simul_date/date_01.php

    Am putea afisa valoarea primita pe un voltmetru.