Laborator java-Script

Teme program

Instructiuni if, instructiuni repetitive

afisarea unui tabel 10 X 10 cu numere , cu patratele numerelor, cu valori aleatoare
colorarea celulelor cu numere pare
colorarea diagonalei principale, secundare, dreptunghiuri concentrice, spirala
afisarea unui tabel cu numere aleatoare
afisarea unui tabel cu celule colorate aleator

Sugestie pentru colorarea unei celule a unui tabel

<html> <body> <center> <table bgcolor="WhiteSmoke" border =1 width="400"><tr>  <script> document.write("<td style=\"background-color:rgb(123,45,199)\">--</td></tr></table>"); /*document.write("<td style=\"background-color:rgb("+Math.round(Math.random()*255)+",45,199)\">--</td></tr></table>");*/ /*document.write("<td style=\"background-color:rgb("+ Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",99)\">--</td></tr></table>");*/ /*document.write("<td style=\"background-color:rgb("+(Math.round(Math.random()*255))+","+(Math.round(Math.random()*255))+","+(Math.round(Math.random()*255))+")\">--</td></tr></table>");*/ </script> </body> </html>
afisarea unui tabel dinamic cu numere aleatoare
afisarea unui tabel dinamic cu celule colorate aleator

Sugestie pentru tabel dinamic cu o singura celula

<html> <body> <script> function t_din() { txt="<table bgcolor=\"WhiteSmoke\" border =\"1\" width=\"400\"><tr>"; txt= txt+"<td style=\"background-color:rgb("+(Math.round(Math.random()*255))+","+(Math.round(Math.random()*255))+","+(Math.round(Math.random()*255))+")\">--</td></tr></table>"; afis.innerHTML=txt; setTimeout("t_din()",1000); } </script> <div id="afis"> <script>t_din()</script> </div> </body> </html>
afisarea calendarului pe luna in curs

Matrici

generarea unui tabel n x m
afisarea unui tabel dinamic cu numere aleatoare pastrate intr-un Array
generarea unei liste (continutul listei fiind preluat dintr-un vector)
generarea unei liste pe doua nivele (continutul listei fiind preluat dintr-un Array)
generarea unei liste pe trei nivele (continutul listei fiind preluat dintr-un Array)

Formulare in JS

Introduceti trei controale de tip INPUT type="text" doua pentru operanzi si unul pentru rezultat. Afisati dinamic suma celor doi operanzi

Sugestie

<html> <body> <FORM name="form_alc">  <INPUT type=text name="op1" size=30 value="0" onkeyup="afis_r()">+<INPUT type=text name="op2" size=30 value="0" onkeyup="afis_r()">=<INPUT type=text name="rez" size=30> </FORM> <script> function afis_r() { /*form_alc.rez.value=form_alc.op1.value+form_alc.op2.value;*/ form_alc.rez.value=parseFloat(form_alc.op1.value)+parseFloat(form_alc.op2.value); /*form_alc.rez.value=Math.round((parseFloat(form_alc.op1.value)+parseFloat(form_alc.op2.value))*1000)/1000;*/ /*setTimeout("afis_r()",100);*/ } </script> </body> </html>
Realizati o aplicatie de tip calculator de buzunar
Realizati o aplicatie care afiseaza scorul la tenis de camp
Realizarea unui test grila folosind Radio - button
Realizarea unui test grila folosind Check - box
Generati din JavaScript n butoane Checkbox, realizati o functie lansata pe evenimentul "onclick" care afiseaza ce buton este selectat sau deselectat
Folosind Checkbox-uri, realizati un convertor binar, zecimal
Realizati o aplicatie ce calculeaza valoarea unei rezistente folosind codul culorilor
Realizati un convertor temperatura C,K,F
Realizati o aplicatie pentru afisarea calendarului pe luna introdusa de utilizator intr-un control tip INPUT type="text"
Introduceti un control de tip INPUT type="text". Afisati grafic dinamic cu "hr" valoarea introdusa
Introduceti trei controale de tip INPUT type="text" pentru val, min, max. Afisati grafic dinamic cu "hr" valoarea introdusa corelata cu min si max

Imagini js

Realizati o aplicatie in care sa afisati o matrice de imagini senzitive
Realizati aplicatia: "alba neagra"
Realizati o aplicatie in care se descopera celulele cu bonusuri intr-o matrice -prin click pe celule
Realizati o aplicatie cu un help toolbox cu imagini senzitive

Grafica js

Utilizare Canvas

Exemplu de grafica realizata in Canvas

Realizati o aplicatie in care se afiseaza un cerc cu n raze echidistante
Realizati o aplicatie in care se afiseaza n cercuri concentrice
Realizati o aplicatie in care se afiseaza n dreptunghiuri concentrice
Realizati o aplicatie in care se afiseaza n dreptunghiuri aleatoare
Reluati aplicatiile anterioare si introduceti un parametru variabil

Exemplu parametru variabil :

<html>
<center><table bgcolor="WhiteSmoke" border =1 width="220"><tr><td align="center">
<center>Cercuri<br></center> 
<canvas id="desen01" width="320" height="100" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br>
<input type="range" value="1" id="ra" min="1" max="12"  onchange="set_nrc()"/>
<br>
</td></tr></table></center>

Cercuri

Programare obiect js

Folosind clasa voltm, afisati dinamic 3 valori aleatoare.
Folosind clasa afisor_xt, afisati graficul functiilor tangenta, cotangenta, x²
Folosind clasa afisor_xt, afisati graficul functiei sin(x). Numarul de perioade afisate se preia dintr-un control de tip INPUT type="text"
Folosind clasa afisor_xt, afisati graficul functiei a*sin(x).Valoarea lui a se preia dintr-un control de tip INPUT type="text".
Folosind clasa afisor_xt, afisati scalat graficul functiei a*sin(x) in functie de a astfel incat afisarea sa se faca tot timpul pe 0-400 pixeli, si sa se schimbe doar valorile afisate pe axa y.
Folosind clasa "afisor_xt" aflata in biblioteca afisor_xt.js, creati un osciloscop ce afiseaza diverse forme de unda.
Folosind clasa "afisor_xt" aflata in biblioteca afisor_xt.js, creati un osciloscop ce afiseaza 3 forme de unda simultan.
Realizati o clasa care are cel putin o metoda desenez() si o metoda set_val() care sa modifice desenul.

Sugestie:

<html> <body> <center><canvas id="desen02" width="200" height="150" style="border:1px solid #d3d3d3;"> Browser-ul d-voastra nu suporta marcatorul CANVAS.</canvas></center> <script> var d = document.getElementById("desen02"); var ctx2 = d.getContext("2d"); class dr_sh // dreptunghi sectionat orizontal { constructor(c,x,y,w,h) { this.cnvs=c; // contextul this.x0 = x; // pozitia pe x this.y0 = y; // pozitia pe y this.wd = w; // latimea this.ht = h; // inaltimea } desenez() { this.cnvs.beginPath(); this.cnvs.rect(this.x0,this.y0,this.wd,this.ht); this.cnvs.strokeStyle = '#ff0000'; this.cnvs.stroke(); } set_val(val) // val se da in procente din h { if((val>100)||(val<1)) { val=50; } this.cnvs.beginPath(); this.cnvs.fillStyle = "#FFFFFF"; this.cnvs.fillRect(this.x0+1,this.y0+1,this.wd-2,this.ht-2); this.cnvs.moveTo(this.x0+1,this.y0+this.ht*val/100); this.cnvs.lineTo(this.x0+this.wd-2,this.y0+this.ht*val/100); /*this.cnvs.strokeText(val,this.x0+5,this.y0+10);*/ this.cnvs.strokeStyle = '#0000ff'; this.cnvs.stroke(); } } dr1 = new dr_sh(ctx2,70,50,60,50); dr1.desenez(); mod_val(); var poz=3; function mod_val() { dr1.set_val(poz); poz=poz+1; if(poz >= 98) poz=3; setTimeout("mod_val()",5); } </script> </html>
- Realizati o aplicatie in care sa utilizati 3 instante ale clasei
- Realizati o aplicatie in care sa sa invocati in mod repetitiv metoda set_val()
Folosind biblioteca Chart.min.js aflata la adresa https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js , realizati o aplicatie care afiseaza graficul functiei f(x)=sin(x);
Folosind biblioteca chart.js (Documentatie: Getting started ) aflata la adresa https://cdn.jsdelivr.net/npm/chart.js
Afisati un chart de tip:
- line: Documentatie
- bar: Documentatie
- pie: Documentatie
Demo utilizare Charts

Instrumentatie virtuala js

Bazandu-va pe imaginile de jos, realizati un instrument virtual.
Introduceti un control de tip INPUT type="text" sau un control "INPUT type="range" pentru a introduce valoarea pentru afisare
Introduceti inca un control de tip "INPUT type=text" pentru setarea valorii maxime
Afisati dinamic instrumentul virtual prin generarea random a valorii de afisat

Imagini instrumentatie virtuala.

- Instrumentatie virtuala din domeniul ingineriei electrice.

- Instrumentatie virtuala din domeniul ingineriei medicale.

Folositi biblioteca Google.Chart aflata la adresa https://developers.google.com/chart/interactive/docs/gallery/gauge
- Exemplu:

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Tensiune', 80],
          ['Curent', 30],
          ['Defazaj', 10]
        ]);

var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);

setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 1300);
        setInterval(function() {
          data.setValue(1, 1, 10 + Math.round(40 * Math.random()));
          chart.draw(data, options);
        }, 2000);
        setInterval(function() {
          data.setValue(2, 1, 10 + Math.round(30 * Math.random()));
          chart.draw(data, options);
        }, 2600);
      }
    </script>
  </head>
  <body>
    <center><div id="chart_div" style="width: 400px; height: 120px;"></div></center>
  </body>
</html>

- Folosind biblioteca Chart.min.js aflata la adresa https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js , realizati o aplicatie care afiseaza graficul functiei f(x)=sin(x);
- Folosind biblioteca chart.js aflata la adresa https://cdn.jsdelivr.net/npm/chart.js ,afisati un chart de tip line;

Folositi biblioteca Widget aflata la adresa https://weatherwidget.org
- Exemplu widget:

Weather Data Source: wetter Neumarkt am Mieresch 3 tage

Utilizare AJAX

Pornind de la aplicatia de jos care afiseaza dinamic, date preluate prin tehnologia Ajax de la aplicatia https://davos.umfst.ro/~traian/web_apl/simul_date/date_01.php,
- Afisati datele preluate prin tehnologie Ajax de la aplicatia https://davos.umfst.ro/~traian/web_apl/simul_date/date_02.php aplicatie care furnizeaza date aleatoare in format text.

<html> <body> <center> <table bgcolor="WhiteSmoke" border =1 width="100"> <tr><td> <div id="loc_txt" align="center"> Date </td></tr> <tr><td align="center"> <button type="button" onclick="cer_date_t()">Start</button> </td></tr> </table> </center> <script> url='https://davos.umfst.ro/~traian/web_apl/simul_date/date_01.php'; xmlhttp=new XMLHttpRequest(); function cer_date_t() { xmlhttp.open("GET",url,false); xmlhttp.send(null); date=xmlhttp.responseText; document.getElementById('loc_txt').innerHTML=date; setTimeout("cer_date_t()",500); } </script> </body> </html>

Date
Pornind de la aplicatia de jos care afiseaza dinamic intr-un voltmetru, date preluate prin tehnologia Ajax de la aplicatia https://davos.umfst.ro/~traian/web_apl/simul_date/date_01.php,
- utilizati clasa "manom" aflata in biblioteca manom.js pentru afisarea datelor preluate

<html> <body> <center> <table bgcolor="WhiteSmoke" border =1 width="400"> <tr><td> <canvas id="desen04" width="400" height="220" style="background-color:#ffffff;border:1px solid #c3c3c3; "> Your browser does not support the HTML5 canvas tag. </canvas> </td></tr> <tr><td align="center"> <button type="button" onclick="cer_date()">Start</button> </td></tr> </table></center> <script> var ctx04=desen04.getContext("2d"); voltm04 = new voltm(ctx04,20,10,360,0,1200,20); url='https://davos.umfst.ro/~traian/web_apl/simul_date/date_01.php'; xmlhttp=new XMLHttpRequest(); function cer_date() { xmlhttp.open("GET",url,false); xmlhttp.send(null); date=xmlhttp.responseText; voltm04.set_val(date); setTimeout("cer_date()",500); } </script> </body> </html>
Pornind de la aplicatia de jos pentru afisarea valorii preluate prin tehnologie Ajax de la aplicatia https://davos.umfst.ro/~traian/web_apl/simul_date/date_01.php.
- utilizati clasa afisor_xt.js pentru afisarea valorilor preluate prin tehnologie Ajax de la aplicatia: https://davos.umfst.ro/~traian/web_apl/simul_date/date_02.php.

<html> <head> <script type="text/javascript" src="afisor_xt.js"></script> </head> <br><br> <center> <table bgcolor="WhiteSmoke" border=1 width="320"> <tr><td align="center"colspan="2"> <canvas id="desen05" width="325" height="280" style="background-color:#ffffff;border:1px solid #c3c3c3; "> Your browser does not support the HTML5 canvas tag. </canvas> </td></tr> <tr> <td align="center"><button type="button" onclick="cer_date05()">Start</button></td> <td width="220"><div id="loc_txt05" align="left"> Date: </div></td> </tr> </table> </center> <script type="text/javascript"> var ctx5=desen05.getContext("2d"); ctx5.lineWidth = .5; w=desen05.width ; h=desen05.height/2-20; vals = []; nrv=300,ht=250,vmax=1000,vmin=0,xmax=300,xmin=0;; var val_ac=0; for(i=0;i<nrv;i++){ vals[i]=Math.round(ht/2); } url='https://davos.umfst.ro/~traian/web_apl/simul_date/date_01.php' //url='https://davos.umfst.ro/~traian/web_apl/web_senzor/read_val.php?id=2' xmlhttp=new XMLHttpRequest(); function cer_date05() { xmlhttp.open("GET",url,false); xmlhttp.send(null); val_ac=xmlhttp.responseText; document.getElementById('loc_txt05').innerHTML="Valoarea achizitionata:"+val_ac; graf05() setTimeout("cer_date05()",500); } function graf05() { // shift-are stanga for(i=0;i<nrv-1;i++){ vals[i]=vals[i+1] } vals[nrv-1]=val_ac; osci.deseneaza(); osci.set_val(vals,nrv,255,0,0); } osci = new afisor_xt(ctx5,25,10,nrv,ht,vmax,vmin,xmax,xmin); </script>

Date:
Utilizati clasa "binar" aflata in biblioteca binar.js pentru afisarea sub forma binara a unei valori preluate prin tehnologie Ajax de la aplicatia https://davos.umfst.ro/~traian/web_apl/simul_date/date_01.php.
Utilizare claselor "barometer", "voltm" si "binar" pentru afisarea mai multor valori trimise de aplicatia https://davos.umfst.ro/~traian/web_apl/simul_date/date_02.php si preluate prin tehnologie Ajax.
Utilizare clasa "afisor_xt", pentru a afisa evolutia in timp a valorii trimise de aplicatia https://davos.umfst.ro/~traian/web_apl/web_senzor/read_val.php?id=1.
Utilizare claselor "barometer", "voltm" si "binar" pentru afisarea mai multor valori trimise de aplicatia https://davos.umfst.ro/~traian/web_apl/web_senzor/read_mas.php?id=1 si preluate prin tehnologie Ajax.
Realizarea unei aplicatii web pentru monitorizare proces tehnologic pornind de la datele trimise de aplicatia https://davos.umfst.ro/~traian/web_apl/simul_date/S1200.php
Primite de la sistemul Siemens S1200 avand urmatorul format:,Plc_cnt,AI0,AI1,AI2,AI3,Digi,Com,AO0,AO1,Conn_cnt,.


	Date: