Sunteți pe pagina 1din 21

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M.

Vlada

Student: Marica Adriana


Specializare: Master TAPI, anul II

DOCUMENTATIE & CODURI SURSA

Programarea Avansata a Aplicatiilor Internet


In cadrul acestui proiect (proiect.htm) se evidentiaza utilitatea instrumentelor
oferite de limbajul JavaScript. Sunt elaborate si testate 3 aplicatii (se utilizeaza
wz_jsgraphics.js si SVG):
- o aplicatie (joc_puzzle.htm) care rezolva jocul puzzle atat cu numere, cat
si cu poze. In cazul puzzle-ului cu numere, utilizatorul poate alege
dimensiunea dorita pentru puzzle;
- o aplicatie (figuri_geometrice.htm) care deseneaza corpuri geometrice
(prisma patrulatera regulata, prisma triungiulara regulata, piramida
patrulatera regulata, con, trunchi de con si cilindru) si, pentru fiecare in
parte , calculeaza aria si volumul;
- un SVG (cniv.svg) care genereaza sigla Conferintei Nationale de
Invatamant Virtual (CNIV), utilizatorul avand posibilitatea schimbarii
parametrilor precum numar de noduri, raza, culoarea si chiar grosimea
liniilor ce sunt trasate.

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada

1) Jocul Puzzle (joc_puzzle.htm)

Utilizatorul alege tipul de puzzle printr-un


click pe imaginea corespunzatoare fiecaruia, iar
in momentul in care se apasa pe butonul Start
Joc, piesele sunt amestecate
cu ajutorul
urmatorului algoritm: in spatele fiecarei piese se
afla o valoare de la 1 la dimensiunea puzzle-ului.
Pentru piesa de pe pozitia k se genereaza aleator
un numar pana cand acel numar este diferit de
numerele generate pana la pozitia k-1.
Utilizatorul controleaza piesele prin click-uri pe piese ce au drept efect mutari sus, jos,
stanga, dreapta iar jocul se considera terminat (apare un alert in acest sens) cand pentru
fiecare piesa numarul asociat ei corespunde cu pozitia in cadrul tabelului. Se contorizeaza
si numarul de mutari efectuate de utilizator pentru a rezolva puzzle-ul.
2) Corpuri geometrice (figuri_geometrice.htm)
Corpurile geometrice au fost desenate
cu
ajutorul
librariei
grafice
"wz_jsgraphics.js". Atunci cand utilizatorul
da click pe un corp geometric, acesta este
marcat ca fiind current (este evidentiat prin
redesenarea cu alta culoare), iar in partea de
jos a paginii apare figura marita, iar
utilizatorul are posibilitatea de a introduce
dimensiunile dorite pentru calculul ariei totale
si a volumului corpului respectiv. Cursorul
este permanent insotit de o figura (poza.png) ca un corp geometric. Functia ce
configureaza acest lucru:

function ConfigureazaCursor(e)
{
if (document.layers)
{
x = e.x;
y = e.y;
}
else
if (document.all)
{
x = event.clientX;
y = event.clientY;
}
else
if (document.getElementById)
{
x = e.clientX;

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada

y = e.clientY;
}
document.getElementById("cursor").style.display=""
document.getElementById("cursor").style.left=(x+5)+"px"
document.getElementById("cursor").style.top=(y+5)+"px"

<div id="cursor"
style="position:absolute;left:0px;top:0px;width:1px;height:1px">
<img src="poza.png" border="0"></div>

3) Sigla CNIV (cniv.svg)

Aceasta aplicatie este un SVG (Scalable


Vector Graphics) prin intermediul careia s-a dorit
generarea siglei CNIV. Este necesara descarcarea
SVGview de la adresa
http://www.w3.org/2000/svg.
S-au adaugat evenimente pentru realizarea unei
interactiuni cu utilizatorul astfel:
Tasta "Up" - Mareste n
Tasta "Down" - Micsoreaza n
Tasta "Left" - Micsoreaza r
Tasta "Right" - Mareste r
Tasta "1" - Ingrosare
Tasta "2" - Subtiere
Tasta "C" - Schimba culoare

Codul Pagina principala (proiect.htm)


<html>
<head><title>Proiect Marica Adriana</title></head>
<body>
<center>
<img src="proiect.png" border="0" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="8,0,160,196"
href="puzzle/joc_puzzle.html">
<area shape="poly"
coords="830,402,773,431,739,483,720,516,730,542,731,580,728,603,717,621
,697,636,695,672,715,700,729,723,786,723,844,723,893,718,920,716,933,70
0,943,677,947,625,947,592,952,536,951,501,949,469,934,447,919,428"
href="sigla CNIV/cniv.svg">
<area shape="poly"
coords="112,370,85,414,72,443,65,469,50,498,34,543,32,595,22,628,13,671
,1,717,70,724,126,720,192,721,230,720,261,718,262,696,269,676,261,651,2
61,631" href="figuri geometrice/figuri_geometrice.html">

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada


</map>
</center>
</body>
</html>

Codul Jocul Puzzle (joc_puzzle.htm)


<html>
<head>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript">
var contor=0;
var n=0;
function Init_Numere()
{
document.getElementById("dim").innerHTML='<label>Dimensiune puzzle:
</label><input type="Text" id="val" value="4" style="height: 20px;
width: 50px"></input><br><br>';
document.getElementById("poza").innerHTML="";
document.getElementById("joc").innerHTML="";
document.getElementById("contor").innerHTML="";
document.getElementById("start").innerHTML='<input type="Button"
value="Start joc" style="height: 50px; width: 250px"
onclick="StartJoc(0)"></input>'
document.getElementById("dim").value=1;
}
function Configurare_Numere()
{
n=Number(document.getElementById("val").value);
var config="<table cellspacing=\"0\" cellpadding=\"0\">";
for (i=1;i<=n;i++)
{
config=config+"<tr>";
for(j=1;j<=n;j++)
config=config+'<td><input id="b'+((i-1)*n+j)+'"
type="Button" style="height: 50px; width: 50px;
background:rgb(0,128,255); color:#ffffff; font-weight: bold; fontsize:24" value="'+((i-1)*n+j)+'" onclick="PotMuta('+((i1)*n+j)+')"></input></td>';
config=config+"</tr>";
}
config=config+"</table>";
document.getElementById("joc").innerHTML=config;
}
function Configurare(No)
{
n=Number(4); //la poze puzzle-ul este de 4x4
document.getElementById("dim").value=0;
document.getElementById("dim").innerHTML="";
var config="<table cellspacing=\"1\" cellpadding=\"1\"
style=\"background:rgb(255,255,255)\">";

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada


for (i=1;i<=4;i++)
{
config=config+"<tr>";
for(j=1;j<=4;j++)
config=config+'<td><img id="b'+((i-1)*4+j)+'"
value="" src="puzzle'+No+'/p_'+((i-1)*4+j)+'.gif"
onclick="PotMuta('+((i-1)*4+j)+')"></img></td>';
config=config+"</tr>";
}
config=config+"</table>";
document.getElementById("joc").innerHTML=config;
document.getElementById("poza").innerHTML='<img
src="puzzle'+No+'/poza.jpg"/>'
document.getElementById("start").innerHTML='<input type="Button"
value="Start joc" style="height: 50px; width: 250px"
onclick="StartJoc('+No+')"></input>'
document.getElementById("contor").innerHTML="";
}
function StartJoc(No)
{
contor=0;
if (document.getElementById("dim").value==1)
{
n=Number(document.getElementById("val").value);
if (isNaN(n) || n<=2)
{
alert("Dimensiunea trebuie sa fie mai mare decat 2!");
document.getElementById("joc").innerHTML="";
document.getElementById("contor").innerHTML="";
}
else
Configurare_Numere();
}
document.getElementById("contor").innerHTML="Numar mutari: "+contor;
var b=new Array();
for(i=1;i<=n*n-1;i++)
{
b[i]=document.getElementById("b"+i);
b[i].value=GenereazaNumar(i);
b[i].src="puzzle"+No+"/p_"+b[i].value+".gif"
b[i].disabled=false;
}

document.getElementById("b"+(n*n)).value=" ";
document.getElementById("b"+(n*n)).src="none.gif";
document.getElementById("b"+(n*n)).disabled=true;

function GenereazaNumar(poz)
{
var nr=0;
var flag=1;
while(flag==1)
{
flag=0;
nr=1+Math.floor(Math.random()*(n*n-1));

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada


for(i=1;i<poz;i++)
if (document.getElementById("b"+i).value==nr)
flag=1;

}
return nr;

function Muta(index1,index2)
{
document.getElementById("b"+(index2)).value=document.getElementById("b"
+(index1)).value;
document.getElementById("b"+(index2)).src=document.getElementById("b"+(
index1)).src;
document.getElementById("b"+(index1)).value="";
document.getElementById("b"+(index1)).src="none.gif";
document.getElementById("b"+(index2)).disabled=false;
document.getElementById("b"+(index1)).disabled=true;
contor++;
document.getElementById("contor").innerHTML="Numar mutari: "+contor;
Castig();
}
function PotMuta(i)
{
if (i>1 && (i-1)%n!=0 && document.getElementById("b"+(i1)).disabled==true)
Muta(i,i-1);
else
if (i<n*n && i%n!=0 &&
document.getElementById("b"+(i+1)).disabled==true)
Muta(i,i+1);
else
if (i>n && document.getElementById("b"+(i-n)).disabled==true)
Muta(i,i-n);
else
if (i<=n*(n-1) && document.getElementById("b"+(i+n)).disabled==true)
Muta(i,i+n);
}
function Castig()
{
var ok=1;
for(i=1;i<=n*n-1;i++)
if (document.getElementById("b"+i).value!=i)
ok=0;
if (ok==1)
alert("Ai castigat!");
}
</script>
</head>
<body style="background:url(back.bmp)">
<p align="center">
<img src="Titlu.png" ></img>
</p>

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada


<div id="init" value="0">
<h2 align="center" style="font-style:italic">Alegeti tipul de puzzle
dorit</h2>
<p align="center">
<img src="numere.jpg" width="100" height="100" value="0"
onclick="Init_Numere()"></img>
<img src="puzzle1/poza.jpg" width="100" height="100" value="1"
onclick="Configurare(1)"></img>
<img src="puzzle2/poza.jpg" width="100" height="100" value="2"
onclick="Configurare(2)"></img>
<img src="puzzle3/poza.jpg" width="100" height="100" value="3"
onclick="Configurare(3)"></img>
<img src="puzzle4/poza.jpg" width="100" height="100" value="4"
onclick="Configurare(4)"></img>
<img src="puzzle5/poza.jpg" width="100" height="100" value="5"
onclick="Configurare(5)"></img>
<img src="puzzle6/poza.jpg" width="100" height="100" value="6"
onclick="Configurare(6)"></img>
</p>
</div>
<div id="dim" value="0" align="center">
</div>
<div id="start" align="center">
</div>
<br>
<br>
<table align="center">
<tr><td>
<div id="joc" ></div>
<div id="contor" style="font-style:italic; font-weight:bold"></div>
</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td>
<div id="poza"></div>
</td></tr>
</table>
</body>
</html>

Codul Corpuri geometrice (figuri_geometrice.htm)


<html>
<head>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript">
function ConfigureazaCursor(e)
{
if (document.layers)
{
x = e.x;

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada

y = e.y;
else

if (document.all)
{
x = event.clientX;
y = event.clientY;
}
else
if (document.getElementById)
{
x = e.clientX;
y = e.clientY;
}
document.getElementById("cursor").style.display=""
document.getElementById("cursor").style.left=(x+5)+"px"
document.getElementById("cursor").style.top=(y+5)+"px"

document.onmousemove = ConfigureazaCursor;
if(document.captureEvents) {document.captureEvents(Event.MOUSEMOVE);}
</script>
<script type="text/javascript">
<!-function ClearCanvas(Suprafata)
{
var cnv = document.getElementById(Suprafata);
cnv.innerHTML="";
}
function PregatesteSuprafata(Suprafata,Culoare) //id-ul div-ului in
care se va desena
{
ClearCanvas(Suprafata);
jg=new jsGraphics(Suprafata);
jg.setColor(Culoare);
return jg;
}
function Config(optiune)
{
document.getElementById("Optiune").value=optiune;
StergeCalcule();
var continut;
var Culoare="0000ff";
Deseneaza();
switch(optiune)
{
case 1:
DeseneazaPrismaPatrulatera("prismaP","ff0000",60,100,30,150); //o
marcheaza ca fiind curenta
DeseneazaPrismaPatrulatera("Canvas",Culoare,130,200,50,220);
continut='<label>Dati latura:</label><br><input
type="Text" id="val1" value=" " onkeydown="StergeCalcule()"></input>';

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada


continut=continut+'<br><label>Dati
inaltimea:</label><br><input type="Text" id="val2"
onkeydown="StergeCalcule()"></input>';
break;
case 2:

value=" "

DeseneazaPrismaTriunghiulara("prismaT","ff0000",70,100,30,150);
DeseneazaPrismaTriunghiulara("Canvas",Culoare,150,220,50,240);
continut='<label>Dati latura:</label><br><input
type="Text" id="val1" value=" " onkeydown="StergeCalcule()"></input>';
continut=continut+'<br><label>Dati
inaltimea:</label><br><input type="Text" id="val2" value=" "
onkeydown="StergeCalcule()"></input>';
break;
case 3:
DeseneazaPiramida("piramida","ff0000",70,120,30,150);
DeseneazaPiramida("Canvas",Culoare,150,250,40,220);
continut='<label>Dati latura:</label><br><input
type="Text" id="val1" value=" " onkeydown="StergeCalcule()"></input>';
continut=continut+'<br><label>Dati
inaltimea:</label><br><input type="Text" id="val2" value=" "
onkeydown="StergeCalcule()"></input>';
break;
case 4:
DeseneazaCon("con","ff0000",50,100,65,150);
DeseneazaCon("Canvas",Culoare,120,230,150,230);
continut='<label>Dati raza:</label><br><input
type="Text" id="val1" value=" " onkeydown="StergeCalcule()"></input>';
continut=continut+'<br><label>Dati
inaltimea:</label><br><input type="Text" id="val2" value=" "
onkeydown="StergeCalcule()"></input>';
break;
case 5:
DeseneazaTrunchiCon("trunchiCon","ff0000",50,100,30,65,150);
DeseneazaTrunchiCon("Canvas",Culoare,120,150,80,150,200);
continut='<label>Dati raza mare:</label><br><input
type="Text" id="val1" value=" " onkeydown="StergeCalcule()"></input>';
continut=continut+'<br><label>Dati raza
mica:</label><br><input type="Text" id="val2" value=" "
onkeydown="StergeCalcule()"></input>';
continut=continut+'<br><label>Dati
inaltimea:</label><br><input type="Text" id="val3" value=" "
onkeydown="StergeCalcule()"></input>';
break;
case 6:
DeseneazaCilindru("cilindru","ff0000",50,100,65,150);
DeseneazaCilindru("Canvas",Culoare,90,180,140,250);
continut='<label>Dati raza:</label><br><input
type="Text" id="val1" value=" " onkeydown="StergeCalcule()"></input>';
continut=continut+'<br><label>Dati
generatoarea:</label><br><input type="Text" id="val2" value=" "
onkeydown="StergeCalcule()"></input>';
break;
default:
break;

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada

}
document.getElementById("detalii").style.display="";
document.getElementById("Butoane").style.display="";
document.getElementById("Date").innerHTML=continut;

function StergeCalcule()
{
document.getElementById("arie").innerHTML="";
document.getElementById("volum").innerHTML="";
}
function Deseneaza()
{
var Culoare="000000";
DeseneazaPrismaPatrulatera("prismaP",Culoare,60,100,30,150);
DeseneazaPrismaTriunghiulara("prismaT",Culoare,70,100,30,150);
DeseneazaPiramida("piramida",Culoare,70,120,30,150);
DeseneazaCon("con",Culoare,50,100,65,150);
DeseneazaTrunchiCon("trunchiCon",Culoare,50,100,30,65,150);
DeseneazaCilindru("cilindru",Culoare,50,100,65,150);
}
function Efect(optiune)
{
var current=document.getElementById("Optiune").value;
if (current!=optiune)
{
switch(optiune)
{
case 1:
DeseneazaPrismaPatrulatera("prismaP","000000",60,100,30,150)
break;
case 2:
DeseneazaPrismaTriunghiulara("prismaT","000000",70,100,30,150)
break;
case 3:
DeseneazaPiramida("piramida","000000",70,120,30,150)
break;
case 4:
DeseneazaCon("con","000000",50,100,65,150)
break;
case 5:
DeseneazaTrunchiCon("trunchiCon","000000",50,100,30,65,150)
break;
case 6:
DeseneazaCilindru("cilindru","000000",50,100,65,150)
break;
default:
break;
}
}
}

10

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada


function DeseneazaPrismaPatrulatera(Suprafata,Culoare,l,h,x,y)
{
var jg=PregatesteSuprafata(Suprafata,Culoare);
var grosime;
if (Culoare!="000000")
grosime=2;
else
grosime=1;
jg.setStroke(grosime);
var a=0.5;
var b=0.5;
x1=x;y1=y;z1=l;
x2=x1+l; y2=y1;z2=z1;
x3=x2;y3=y2;z3=z2-l;
x4=x1;y4=y1;z4=z1-l;
x5=x1;y5=y1-h;z5=z1;
x6=x2;y6=y2-h;z6=z2;
x7=x3;y7=y3-h;z7=z3;
x8=x4;y8=y4-h;z8=z4;
jg.drawLine(x1+a*z1,y1+b*z1,x2+a*z2,y2+b*z2);
jg.setStroke(Stroke.DOTTED);
jg.drawLine(x2+a*z2,y2+b*z2,x3+a*z3,y3+b*z3);
jg.drawLine(x3+a*z3,y3+b*z3,x4+a*z4,y4+b*z4);
jg.drawLine(x3+a*z3,y3+b*z3,x7+a*z7,y7+b*z7);
jg.setStroke(grosime);
jg.drawLine(x4+a*z4,y4+b*z4,x1+a*z1,y1+b*z1);
jg.drawLine(x5+a*z5,y5+b*z5,x6+a*z6,y6+b*z6);
jg.drawLine(x6+a*z6,y6+b*z6,x7+a*z7,y7+b*z7);
jg.drawLine(x7+a*z7,y7+b*z7,x8+a*z8,y8+b*z8);
jg.drawLine(x8+a*z8,y8+b*z8,x5+a*z5,y5+b*z5);
jg.drawLine(x1+a*z1,y1+b*z1,x5+a*z2,y5+b*z2);
jg.drawLine(x2+a*z2,y2+b*z2,x6+a*z6,y6+b*z6);
jg.drawLine(x4+a*z4,y4+b*z4,x8+a*z8,y8+b*z8);
jg.paint();
}
function DeseneazaPrismaTriunghiulara(Suprafata,Culoare,l,h,x,y)
{
var jg=PregatesteSuprafata(Suprafata,Culoare);
var grosime;
if (Culoare!="000000")
grosime=2;
else
grosime=1;
jg.setStroke(grosime);
x1=x;y1=y;
x2=x1+l;y2=y1;
x3=x1+l/2.5;y3=y+l/2.5;
x4=x1;y4=y1-h;
x5=x2;y5=y2-h;
x6=x3;y6=y3-h;
jg.setStroke(Stroke.DOTTED);
jg.drawLine(x1,y1,x2,y2);
jg.setStroke(grosime);
jg.drawLine(x2,y2,x3,y3);
jg.drawLine(x3,y3,x1,y1);
jg.drawLine(x4,y4,x5,y5);

11

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada

jg.drawLine(x5,y5,x6,y6);
jg.drawLine(x6,y6,x4,y4);
jg.drawLine(x1,y1,x4,y4);
jg.drawLine(x2,y2,x5,y5);
jg.drawLine(x3,y3,x6,y6);
jg.paint();

function DeseneazaPiramida(Suprafata,Culoare,l,h,x,y)
{
var a=0.5;
var b=0.5;
var jg=PregatesteSuprafata(Suprafata,Culoare);
var grosime;
if (Culoare!="000000")
grosime=2;
else
grosime=1;
jg.setStroke(grosime);
x1=x;y1=y;z1=l;
x2=x1+l; y2=y1;z2=z1;
x3=x2;y3=y2;z3=z2-l;
x4=x1;y4=y1;z4=z1-l;
x5=x1+l/2;y5=y1-h;z5=z1-l/2;
jg.drawLine(x1+a*z1,y1+b*z1,x2+a*z2,y2+b*z2);
jg.setStroke(Stroke.DOTTED);
jg.drawLine(x2+a*z2,y2+b*z2,x3+a*z3,y3+b*z3);
jg.drawLine(x3+a*z3,y3+b*z3,x4+a*z4,y4+b*z4);
jg.drawLine(x5+a*z5,y5+b*z5,x3+a*z3,y3+b*z3);
jg.setStroke(grosime);
jg.drawLine(x4+a*z4,y4+b*z4,x1+a*z1,y1+b*z1);
jg.drawLine(x5+a*z5,y5+b*z5,x1+a*z1,y1+b*z1);
jg.drawLine(x5+a*z5,y5+b*z5,x2+a*z2,y2+b*z2);
jg.drawLine(x5+a*z5,y5+b*z5,x4+a*z4,y4+b*z4);
jg.paint();
}
function DeseneazaCon(Suprafata,Culoare,r,h,xx,xy)
{
var jg=PregatesteSuprafata(Suprafata,Culoare);
var grosime;
if (Culoare!="000000")
grosime=2;
else
grosime=1;
jg.setStroke(grosime);
x1=xx;y1=xy;
jg.drawEllipse(xx-r,xy-r/2,2*r,r);
jg.drawLine(xx,xy,xx,xy-h);
jg.drawLine(xx,xy-h,xx-r,xy);
jg.drawLine(xx,xy-h,xx+r,xy);
jg.paint();
}
function DeseneazaTrunchiCon(Suprafata,Culoare,r,h,r1,xx,xy)
{
var jg=PregatesteSuprafata(Suprafata,Culoare);

12

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada

var grosime;
if (Culoare!="000000")
grosime=2;
else
grosime=1;
jg.setStroke(grosime);
x1=xx;y1=xy;
jg.drawEllipse(xx-r,xy-r/2,r*2,r);
jg.drawEllipse(xx-r1,xy-h-r1/2,r1*2,r1);
jg.drawLine(xx,xy,xx,xy-h);
jg.drawLine(xx-r1,xy-h,xx-r,xy);
jg.drawLine(xx+r1,xy-h,xx+r,xy);
jg.drawLine(xx,xy,xx+r,xy);
jg.drawLine(xx,xy-h,xx+r1,xy-h);
jg.paint();

function DeseneazaCilindru(Suprafata,Culoare,r,h,x,y)
{
var jg=PregatesteSuprafata(Suprafata,Culoare);
var grosime;
if (Culoare!="000000")
grosime=2;
else
grosime=1;
jg.setStroke(grosime);
x1=x;y1=y;
jg.drawEllipse(x-r,y-r/2,2*r,r);
jg.drawEllipse(x-r,y-h-r/2,2*r,r);
jg.drawLine(x-r,y,x-r,y-h);
jg.drawLine(x+r,y,x+r,y-h);
jg.drawLine(x,y,x,y-h);
jg.drawLine(x,y,x+r,y);
jg.drawLine(x,y-h,x+r,y-h);
jg.paint();
}
function CalculeazaArie()
{
var optiune=document.getElementById("Optiune").value;
var arie=0;
switch(optiune)
{
case "1":
var l=Number(document.getElementById("val1").value);
var
h=Number(document.getElementById("val2").value);
arie=4*l*h+2*Math.pow(l,2);
break;
case "2":
var l=Number(document.getElementById("val1").value);
var
h=Number(document.getElementById("val2").value);
arie=3*l*h+2*Math.pow(l,2)*Math.sqrt(3)/4;
break;
case "3":
var l=Number(document.getElementById("val1").value);

13

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada


var
h=Number(document.getElementById("val2").value);
apotema=Math.sqrt(Math.pow(l/2,2)+Math.pow(h,2));
arie=4*l*apotema/2+Math.pow(l,2);
break;
case "4":
var r=Number(document.getElementById("val1").value);
var
h=Number(document.getElementById("val2").value);
var g=Math.sqrt(r*r+h*h);
arie=Math.PI*r*(g+r);
break;
case "5":
var r1=Number(document.getElementById("val1").value);
var
r2=Number(document.getElementById("val2").value);
var
h=Number(document.getElementById("val3").value);
var g=Math.sqrt(Math.pow(r1-r2,2)+Math.pow(h,2));
2,2);

arie=Math.PI*g*(r1+r2)+Math.PI*Math.pow(r1,2)+Math.PI*Math.pow(r

break;
case "6":
var r=Number(document.getElementById("val1").value);
var
g=Number(document.getElementById("val2").value);
arie=2*Math.PI*r*(r+g);
break;
default:
break;
}
document.getElementById("arie").innerHTML="Arie = "+arie;
}
function CalculeazaVolum()
{
var optiune=document.getElementById("Optiune").value;
var volum=0;
switch(optiune)
{
case "1":
var l=Number(document.getElementById("val1").value);
var
h=Number(document.getElementById("val2").value);
volum=Math.pow(l,2)*h;
break;
case "2":
var l=Number(document.getElementById("val1").value);
var
h=Number(document.getElementById("val2").value);
volum=Math.pow(l,2)*Math.sqrt(3)/4*h;
break;
case "3":
var l=Number(document.getElementById("val1").value);
var
h=Number(document.getElementById("val2").value);

14

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada


volum=Math.pow(l,2)*h/3;
break;
case "4":
var r=Number(document.getElementById("val1").value);
var
h=Number(document.getElementById("val2").value);
volum=Math.PI*Math.pow(r,2)*h/3;
break;
case "5":
var r1=Number(document.getElementById("val1").value);
var
r2=Number(document.getElementById("val2").value);
var
h=Number(document.getElementById("val3").value);
volum=Math.PI*h/3*(r1*r2+Math.pow(r1,2)+Math.pow(r2,2));
break;
case "6":
var r=Number(document.getElementById("val1").value);
var
g=Number(document.getElementById("val2").value);
volum=Math.PI*Math.pow(r,2)*g;
break;
default:
break;
}
document.getElementById("volum").innerHTML="Volum = "+volum;
}
//-->
</script>
</head>
<body style="background:url(back.bmp)" onload="Deseneaza()">
<center>
<p >
<img src="Titlu.png" ></img>
</p>
<h2 align="center" style="font-style:italic">Alegeti corpul geometric
dorit</h2>
<table border="0">
<tr>
<td align="center"><div id="prismaP" onclick="Config(1)"
onmouseenter='DeseneazaPrismaPatrulatera("prismaP","ff0000",65,100,30,1
50)' onmouseleave='Efect(1)'
style="position:relative;height:180px;width:150px;marginleft:5px;hover:{color:#ff0000;}"></div><br>Prisma Patrulatera</td>
<td align="center"><div id="prismaT" onclick="Config(2)"
onmouseenter='DeseneazaPrismaTriunghiulara("prismaT","ff0000",75,100,30
,150)' onmouseleave='Efect(2)'
style="position:relative;height:180px;width:150px;marginleft:5px;"></div><br>Prisma Triunghiulara</td>
<td align="center"><div id="piramida" onclick="Config(3)"
onmouseenter='DeseneazaPiramida("piramida","ff0000",75,120,30,150)'
onmouseleave='Efect(3)'
style="position:relative;height:180px;width:150px;marginleft:5px;"></div><br>Piramida</td>

15

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada


<td align="center"><div id="con" onclick="Config(4)"
onmouseenter='DeseneazaCon("con","ff0000",55,100,65,150)'
onmouseleave='Efect(4)'
style="position:relative;height:180px;width:150px;marginleft:5px;"></div><br>Con</td>
<td align="center"><div id="trunchiCon" onclick="Config(5)"
onmouseenter='DeseneazaTrunchiCon("trunchiCon","ff0000",55,100,35,65,15
0)' onmouseleave='Efect(5)'
style="position:relative;height:180px;width:150px;marginleft:5px;"></div><br>Trunchi de con</td>
<td align="center"><div id="cilindru" onclick="Config(6)"
onmouseenter='DeseneazaCilindru("cilindru","ff0000",55,100,65,150)'
onmouseleave='Efect(6)'
style="position:relative;height:180px;width:150px;marginleft:5px;"></div><br>Cilindru</td>
</tr>
</table>
<input type="Hidden" id="Optiune" value="0"></input>
<br><br><br>
<table id="detalii" border="1" style="background:ffffff"
style="display:none">
<tr>
<td>
<div id="Canvas"
style="position:relative;height:300px;width:300px;marginleft:0px;"></div>
</td>
<td width="300px" valign="top" >
<div id="Date" style="margin-left:10px"></div>
<br>
<div id="Butoane" style="display:none" style="margin-left:10px">
<input type="Button" onclick="CalculeazaArie()" value="Calculeaza
arie"></input>
<br>
<div id="arie" style="margin-left:10px"></div>
<br>
<input type="Button" onclick="CalculeazaVolum()" value="Calculeaza
volum"></input>
<br>
<div id="volum" style="margin-left:10px"></div>
</div>
</td>
</tr>
</table>
<br>
<div id="cursor"
style="position:absolute;left:0px;top:0px;width:1px;height:1px"><img
src="poza.png" border="0"></div>
</center>
</body>
</html>

16

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada

Codul Sigla CNIV (cniv.svg)

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="800" height="820"
onload="Init( evt )" >
<script type="text/ecmascript">
//<![CDATA[
var
var
var
var
var
var
var
var
var
var
var
var
var
var

svgXLink = "http://www.w3.org/1999/xlink";
svgNS = "http://www.w3.org/2000/svg";
fPlot;
cv;
legenda;
exp;
n=15;
r=200;
grosime=0.9;
red=255;
green=0;
blue=0;
left=50; //marginea din stanga
top=50; //marginea de sus

function Init(){
fPlot = document.getElementById("fplot");
cv=document.getElementById("canvas");
legenda=document.getElementById("legenda");
exp=document.getElementById("explicatii");
deseneazaSigla();
}
function deseneazaSigla()
{
var dstring=" ";
for(i=0; i <=n-1; i++)
{
fi = ( 2 * Math.PI * i ) / n ;
x = r * Math.cos(fi) ;
y = r * Math.sin(fi) ;
// se genereaza muchiile / laturile
for(j = i+1; j<=n; j++)
{
fi = ( 2 * Math.PI * j ) / n ;
xp = r * Math.cos(fi) ;
yp = r * Math.sin(fi) ;

17

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada


// se traseaza segmentul [(x,y) (xp,yp)] astfel:
se muta path-ul la x+r,y+r si se traseaza linie catre (xp+r,yp+r)
dstring=dstring+" M"+(x+r+left)+","+(y+r+top)+"
L"+(xp+r+left)+","+(yp+r+top)+" ";
}
}
fPlot.setAttribute("d", dstring);
fPlot.setAttribute( "style",
"stroke:rgb("+red+","+green+","+blue+");stroke-width:"+grosime);
cv.setAttribute("width",2*r+50);
cv.setAttribute("height",2*r+50);
legenda.setAttribute("y",top+2*r+10);
exp.setAttribute("y",top+2*r+30);
}
function MaresteN()
{
if (n<40)
n++;
deseneazaSigla();
}
function MicsoreazaN()
{
if (n>3)
n--;
deseneazaSigla();
}
function MaresteR()
{
if (r<300)
r=r+10;
deseneazaSigla();
}
function MicsoreazaR()
{
if (r>60)
r=r-10;
deseneazaSigla();
}
function MaresteGrosime()
{
if (grosime<4)
grosime=grosime+0.1;
deseneazaSigla();
}
function MicsoreazaGrosime()
{
if (grosime>0.3)
grosime=grosime-0.1;
deseneazaSigla();
}

18

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada

function GenereazaCuloare()
{
red=Math.floor(Math.random()*256)
green=Math.floor(Math.random()*256)
blue=Math.floor(Math.random()*256)
deseneazaSigla();
}
function functie(evt)
{
switch(evt.keyCode)
{
case 38: //up
MaresteN();
break;
case 40: //down
MicsoreazaN();
break;
case 39: //right
MaresteR();
break;
case 37: //left
MicsoreazaR();
break;
case 67://tasta C
GenereazaCuloare();
break;
case 49: //tasta 1
MaresteGrosime();
break;
case 50: //tasta 2
MicsoreazaGrosime();
break;
default:
break;
}

// ]]></script>
<defs>

<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0"


width="600" height="120">
result="blur"/>

<feGaussianBlur in="SourceAlpha" stdDeviation="4"


<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>

<feSpecularLighting in="blur" surfaceScale="5"


specularConstant=".75" specularExponent="20"
lighting-color="#bbbbbb" result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>

19

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada

<feComposite in="specOut" in2="SourceAlpha"


operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut"
operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
</feMerge>

<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>

</filter>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</linearGradient>
<style type="text/css"><![CDATA[
.buton {fill:url(#gradient);stroke:black;}
]]></style>
</defs>

<g filter="url(#MyFilter)">
<text x="15" y="40" style="font-size:38; stroke:url(#gradient)"
> Sigla CNIV </text>
</g>
<rect x="15" y="55" width="35" height="20" class="buton"
onclick="MaresteN()"/>
<rect x="15" y="80" width="35" height="20" class="buton"
onclick="MicsoreazaN()"/>
<rect x="15" y="105" width="35" height="20" class="buton"
onclick="MaresteR()"/>
<rect x="15" y="130" width="35" height="20" class="buton"
onclick="MicsoreazaR()"/>
<rect x="15" y="155" width="35" height="20" class="buton"
onclick="GenereazaCuloare()"/>
<text x="18" y="70" style="font-size:16" > n+</text>
<text x="18" y="95" style="font-size:16"> n-</text>
<text x="18" y="120" style="font-size:16"> r+</text>
<text x="18" y="145" style="font-size:16"> r-</text>
<text x="16" y="170" style="font-size:16">col</text>
<rect id="legenda" x="15" y="650" width="220" height="150"
class="buton" opacity="0.5" />
<text id="explicatii" x="17" y="680" style="font-size:15; fontstyle:italic">
Legenda:
<tspan x="17" dy="1em">----------------------</tspan>
<tspan x="17" dy="1em"> Tasta "Up" - Mareste n </tspan>
<tspan x="17" dy="1em"> Tasta "Down" - Micsoreaza n </tspan>
<tspan x="17" dy="1em"> Tasta "Left" - Micsoreaza r </tspan>
<tspan x="17" dy="1em"> Tasta "Right" - Mareste r </tspan>
<tspan x="17" dy="1em"> Tasta "1" - Ingrosare </tspan>

20

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada


<tspan x="17" dy="1em"> Tasta "2" - Subtiere </tspan>
<tspan x="17" dy="1em"> Tasta "C" - Schimba culoare </tspan>
</text>
<path id="fplot" style="stroke:red;stroke-width:0.9" d="" ></path>
<rect id="canvas" x="50" y="0" width="50" height="50" opacity="0"
pointer-events="visible"
onkeydown="functie(evt)"/>
</svg>

21