Capitolul I

JavaScript in simple probleme matematice

1. Primele 20 numere ale sirului Fibonacci

Fibonacci (1170 - 1240) este considerat ca unul dintre cei mai mari matematicieni
europeni ai Evului Mediu. S-a nascut in Pisa, oras italian faimos pentru turnul sau inclinat,
care parca sta sa cada. Tatal sau a fost ofiter vamal in orasul din Africa de Nord numit
Bougie, asa incat Fibonacci a crescut in mijlocul civilizatiei nord-africane, facand, insa, multe
calatorii pe coastele Mediteranei. A cunoscut, astfel, multi negustori arabi si indieni si a
deprins stiinta lor aritmetica, precum si scrierea cifrelor arabe. Fibonacci este cunoscut ca
fiind unul dintre primii care au introdus cifrele arabe in Europa, cifre pe care le folosim si in
zilele noastre : 0, 1, 2, 3, ... , 9.
Sirul lui Fibonacci este o secventa de numere in care fiecare numar se obtine din suma
precedentelor doua din sir. Primele 2 numere sunt predefinite, iar restul se obtin in mod
recursiv, din suma precedentelor doua. Astfel problema se va rezolva foarte usor in JavaScript
prin predefinirea primelor 2 numere ale sirului, prin variabilele a0(=1) respectiv a1(=1).
Celelalte numere ale sirului se vor afla prin folosirea unei structuri repetitive, in cazul de fata
For-ul, alaturi de o a treia variabila a2 pentru calcularea sumei precedentelor.
</script><script>
document.write('Sirul lui Fibonaci an=a(n-1)+a(n-2)','<br>');
var a0=1, a1=1, a2=a0+a1;
var i;
document.write(a0,'<br>',a1,'<br>',a2,'<br>');
for (i=3;i<20;i++)
{
a0=a1;
a1=a2;
a2=a0+a1
document.write(a2,'<BR>');
}
</script>

7
 2. Maximul (Minimul) a 3 numere

Ideea de rezolvare a urmatoarei probleme este foarte simpla : daca unul dintre numere
este mai mare (mai mic) decat celelalte doua atunci el este maximul (minimul). Rezolvarea
presupune declararea celor 3 variabile, citirea lor si compararea fiecarui numar cu celelalte 2,
cu ajutorul a 3 If-uri.
Pentru calcularea minimului se schimba doar conditiile in If-uri.
</script><script>
var a,b,c;
a=prompt('Introdu o valoare','150');
b=prompt('Introdu o valoare','250');
c=prompt('Introdu o valoare','500');
if (a>b && a>c)
{
document.write('Maximul este <b>a</b> cu valoarea ' +a);
}
if (b>a && b>c)
{
document.write('Maximul este <b>b</b> cu valoarea ' +b);
}
if (c>a && c>b)
{
document.write('Maximul este <b>c</b> cu valoarea ' +c);
}
</script>

3. Suma a n numere

Se va incepe prin declararea si citirea variabilei n, pentru a sti cate numere avem de
adunat, urmand apoi citirea numerelor propriu-zise si adaugarea lor intr-un vector.
Cu ajutorul unei structuri repetitive se pargurge vectorul de la primul element pana la
ultimul si se va adauga fiecare variabilei s (initial avand valoarea 0), suma in cazul de fata.

8
</script><script type="text/javascript">
var i,n,z;
var s=0;
var a=new Array;
z=prompt("Cate numere vrei sa aduni?","2");
n=parseInt(z);
for (i=0;i<n;i++)
{
aux=prompt('Introduceti termeni pentru adunare','10');
a[i]=parseInt(aux);
}
for(i=0;i<a.length;i++)
{
document.write((a[i]),'<br>');
}
for(i=0;i<a.length;i++)
{
s=s+a[i];
}
document.write('suma este=',s);
</script>

4. Generator de operatii matematice (adunari si scaderi)

Probabil foarte folositor pentru cineva care are un copil in clasa I, scriptul urmator este
de fapt un generator de operatii matematice elementare (adunare si scadere) sub forma unor
ecuatii de genul : “4+5 = ..”, in limita unor praguri ce pot fi indicate.
Pentru a face posibila folosirea JavaScriptului in aceasta problema trebuie in primul
rand sa putem genera numere aleatorii. JavaScript are inclusa o functie special pentru asta,
functia Math.Random(), insa aceasta genereaza numere doar in intervalul 0..1.
Avand nevoie deci de numere intregi, vom folosi o a doua functie, Math.Floor(), care
returneaza un intreg cat mai apropiat de valoarea lui, dar nu mai mare, astfel, pentru a genera
de exemplu numere intregi intre 0 si 9 vom folosi functie in felul urmator : (math.floor
(math.random()*10)).
9
 Scriptul ofera posibilitatea de a limita dificultatea ecuatiilor prin folosirea unor praguri
(variabila subprag), dar si de a tipari sau nu solutiile la sfarsitul generarii ecuatiilor (variabila
cusaufara).
Cu limitarea pragului la 1000, de exemplu, tabelul cu ecuatiile si cu solutiile arata in
felul urmator :
Prag : 1000
1. 720 + 5 = ... 480 + ... = 831 94 - 28 = ... 495 - ... = 85 ... - 27 = 256
2. 1 + 339 = ... 486 + ... = 693 770 - 383 = ... 846 - ... = 398 ... - 22 = 950
3. 118 + 286 = ... 502 + ... = 786 774 - 134 = ... 791 - ... = 491 ... - 55 = 546
4. 234 + 506 = ... 645 + ... = 961 11 - 11 = ... 966 - ... = 646 ... - 907 = 66
5. 272 + 252 = ... 752 + ... = 987 977 - 431 = ... 998 - ... = 451 ... - 11 = 542
6. 861 + 112 = ... 427 + ... = 848 480 - 203 = ... 762 - ... = 207 ... - 49 = 186
7. 643 + 194 = ... 935 + ... = 972 147 - 54 = ... 992 - ... = 478 ... - 405 = 295
8. 822 + 113 = ... 945 + ... = 988 390 - 98 = ... 71 - ... = 69 ... - 440 = 412
9. 168 + 649 = ... 711 + ... = 786 721 - 188 = ... 781 - ... = 1 ... - 771 = 30
1 489 + 126 = ... 854 + ... = 991 763 - 685 = ... 236 - ... = 87 ... - 507 = 294
0
Solutii coloana 1: 725, 340, 404, 740, 524, 973, 837, 935, 817, 615.
Solutii coloana 2: 351, 207, 284, 316, 235, 421, 37, 43, 75, 137.
Solutii coloana 3: 66, 387, 640, 0, 546, 277, 93, 292, 533, 78.
Solutii coloana 4: 410, 448, 300, 320, 547, 555, 514, 2, 780, 149.
Solutii coloana 5: 283, 972, 601, 973, 553, 235, 700, 852, 801, 801.

<script language="JavaScript" type="text/javascript">

function nra(subprag,cusaufara){
// nra = adica numar (nr) aleator (a)
if(cusaufara==0)
return Math.floor(Math.random()*(subprag+1));
else
return 1+Math.floor(Math.random()*subprag);
}
function tabelMate(prag,cusolutie){
tabel = "";
nr_tip_probleme = 5;
nr_exercitii = 10;
solutii = new Array(nr_tip_probleme);
for(i=1;i<=nr_tip_probleme;i++)
solutii[i]=new Array(nr_exercitii);
10
 tabel += "<table align=center cellpadding=10 cellspacing=0 border=1>";
tabel += "<tr bgcolor=#f0f0f0><td colspan="+(nr_tip_probleme+1)+"
align=center><b>PRAG: "+prag+"</b></td></tr>";
for(i=1;i<=nr_exercitii;i++){
tabel += "<tr><td align=right>"+i+".</td>";
x = nra(prag,0);
y = nra(prag-x,0);
tabel += "<td>"+x+" + "+y+" = ...</td>";
solutii[1][i] = x+y;
x = nra(prag,0);
y = nra(prag-x,0);
tabel += "<td>"+x+" + ... = "+(x+y)+"</td>";
solutii[2][i] = y;
x = nra(prag,0);
y = nra(x,0);
tabel += "<td>"+x+" - "+y+" = ...</td>";
solutii[3][i] = x-y;
x = nra(prag,0);
y = nra(x,0);
tabel += "<td>"+x+" - ... = "+(x-y)+"</td>";
solutii[4][i] = y;
x = nra(prag,0);
y = nra(x,0);
tabel += "<td>... - "+y+" = "+(x-y)+"</td>";
solutii[5][i] = x;
tabel += "</tr>";
}
if(cusolutie){
tabel += "<tr><td>&nbsp;</td><td colspan="+nr_tip_probleme+">";
for(i=1; i<=nr_tip_probleme; i++){
tabel += "Solutii coloana "+i+": ";
for(j=1; j<=nr_exercitii; j++){
tabel += solutii[i][j];
if(j!=nr_exercitii)
tabel += ", ";
11
 }
tabel += ".<br>";
}
tabel += "</td></tr>";
}
tabel += "</table>";
return tabel;
}
function cereTabel(form){
prag = 0;
for (i=0; i<document.formular.prag.length; i++) {
if (document.formular.prag[i].checked) {
prag = document.formular.prag[i].value;
}
}
solutii = (document.formular.solutii.checked?1:0);
text = tabelMate(prag-0,solutii-0);
document.getElementById("matematica").innerHTML = text;
return false;
}
</script>

Capitolul al II-lea

12
 Problema damelor modelata in Javascript

Sa se aseze n dame pe o tabla de sah n×n incat ele sa nu se atace doua cate doua.
Principii de lucru
Orice camp al tablei de sah poate fi indicat prin perechea (row, col) indicand respectiv
linia si coloana care se intersecteaza pe acel camp. Dar nu este necesar sa implicam un tablou
bidimensional, fiindca putem asocia implicit valorile col cu indicii de acces intr-un vector
unidimensional, iar valorile row cu valorile existente in acest vector.
Vom considera un vector ROW[n] in care pentru fiecare indice i_col = 0..n-1 avem
ROW[i_col] == i_row <=> exista o dama in pozitia (i_row, i_col).
Doua dame ROW[i] si ROW[j] (cu i ≠ j) se ataca <=>
ROW[i] == ROW[j] (sunt pe o aceeasi linie), sau
|i - j| == |ROW[i] - ROW[j]| (sunt pe o aceeasi diagonala).
Solutie a problemei va fi orice vector ROW[] care satisface conditia ca damele
ROW[i] si ROW[j] sa nu se atace (pentru i, j = 0..n-1). Nu vom "afisa" vectorul-solutie
ROW[] ca atare, ci (vizand o aplicatie pentru browser) vom implica obiectele DOM necesare
pentru a reprezenta chiar tabla de sah corespunzatoare solutiei ROW[].
Putem alege intre mai multe metode sau algoritmi de rezolvare, in functie de ce sau cat
vrem sa obtinem: pentru o solutie, metoda randomizarii ar fi suficienta; daca vrem toate
solutiile - atunci putem folosi metoda backtracking. Pe de alta parte, problema poate fi
interpretata ca fiind o problema de colorare pe un anumit graf.
In practica de masa a rezolvarilor expeditive se obisnuieste sa se evidentieze doar
aspectele algoritmice; se neglijeaza faptul ca algoritmul respectiv angajeaza proprietati ale
unor anumite obiecte definite anterior. De exemplu, algoritmul de rezolvare a ecuatiei de
gradul intai este unul singur, daca se constientizeaza faptul ca el se bazeaza pe cutare si cutare
proprietate a clasei de obiecte din care sunt individualizati coeficientii ecuatiei (fie numere
reale, fie numerele complexe, matricele patratice, clasele de resturi modulo n, etc.).
In principiu, lucram cu trei fisiere-text: unul in care definim obiectele Javascript
necesare rezolvarii, un altul pentru a defini stilurile CSS convenabile prezentarii solutiei si al
treilea reprezentand la nivel text un document HTML (acesta va fi primul incarcat de browser
si va trebui sa contina specificatiile de legatura necesare pentru incarcarea celorlalte fisiere,
etc.).

O modalitate de modelare obiectuala

13
 Componentele problemei noastre ar putea fi sintetizate astfel:
Queens(N, DEST) {
N indica dimensiunea tablei de sah
ROW[] vector unidimensional pentru constituirea solutiei
DEST indica locul in care sa fie prezentata solutia

show_solution() prezinta solutia la DEST, intr-o forma sau alta

is_good() testeaza daca in ROW[] avem o solutie corecta
gen_solutions() genereaza solutii, intr-un mod sau altul
}

In Javascript putem considera intai un sablon al proprietatilor de baza:

function Queens(n) {
this.Dim = n > 3 ? n : 4;
this.Row = new Array(n);
}

Invocand aceasta functie prin intermediul operatorului new, vom putea crea obiecte
individuale (avand propriile valori Dim si Row, fiindca new asociaza this cu obiectul
construit):
var obj1 = new Queens(5);
var obj2 = new Queens(7);
alert(obj1.Dim + '\n' + obj2.Dim);

Angajand proprietatea prototype prevazuta obiectelor Javascript, vom putea extinde sablonul
initial Queens adaugand alte proprietati sau metode:
Queens.prototype.Dest = function(id_dom) {
return "obiectul din document cu ID=id_dom"; // return
document.getElementById(id_dom);
}
alert(obj1.Dim + '\n' + obj1.Dest("diagrama1"));

14
 Metoda randomizarii

Putem obtine o solutie a unei probleme combinatoriale oarecare folosind urmatoarea

idee:
REPETA {
genereaza_aleatoriu componentele solutiei
}
PANA CAND vectorul generat satisface_conditiile de a fi o solutie a problemei

function Queens(n, odom) { // 'odom' refera un obiect existent in DOM-ul documentului

this.n = n > 3 && n < 10 ? n : 4; // n = 10 este deja prohibitiv ca timp (Firefox)
this.row = new Array(n);
this.odom = odom;
}

Queens.prototype.is_good = function() {
var n = this.n, row = this.row;
for(var i = 0; i < n - 1; i++)
for(var j = i + 1; j < n; j++)
if(row[i] == row[j] || Math.abs(row[i] - row[j]) == j - i)
return 0;
return 1;
};

Queens.prototype.set_queen = function() { // implementare a randomizarii

var n = this.n, row = this.row; // insuficient elaborata
do { // (deja n = 10 ia prea mult timp)
for(var i = 0; i < n; i++)
row[i] = Math.round(1000 * Math.random()) % n;
} while(!this.is_good());
};

Queens.prototype.show_table = function() {
var n = this.n, row = this.row, diw = this.odom;
var diag = document.createElement('table');
15
 diag.setAttribute('class', 'diag');

var TR = document.createElement('tr'); // noduri care vor fi apoi clonate,

var TH = document.createElement('th'); // evitand recrearea lor
var TD = document.createElement('td');
var SQ = document.createElement('img');
SQ.setAttribute('src', "static/wqueen.png");
var DIV = document.createElement('div');

var drow, cell, dsq, i, j;

var tbody = document.createElement('tbody'); // fara sectiuni THEAD, TFOOT (merge asa

in IE?)
for(i = 0; i < n; i++) {
drow = TR.cloneNode(true);
for(j = 0; j < n; j++) {
cell = TD.cloneNode(true);
dsq = DIV.cloneNode(true);
dsq.setAttribute('class', ((i + j) & 1 ? 'BlackField' : 'WhiteField'));
if(row[j] == i)
dsq.appendChild(SQ.cloneNode(true));
cell.appendChild(dsq);
drow.appendChild(cell);
}
tbody.appendChild(drow);
}
diag.appendChild(tbody);
diw.appendChild(diag);
};

Queens.prototype.run = function() { // un shortcut pentru lansarea rezolvarii

this.set_queen();
this.odom.innerHTML="";
this.show_table();
}
16
 Fisierul "js" redat mizeaza pe existenta unor definitii CSS pentru redarea unei
diagrame de sah (fiind putine la numar, ele pot fi incluse direct in sectiunea de <head> a
fisierului HTML, sub tagul <style>):
table.diag { border: 4px solid silver; background-color: #fff; }
td { text-align:center; }
.WhiteField { background: #f8f0ff; padding: 2px; width: 32px; height: 32px; }
.BlackField { background: #f8f0ff url("static/hash5.gif") 50% 50%;
padding: 2px; width: 32px; height: 32px; }
Fisierul HTML va trebui sa contina in <body>:
n = <input id="en_ul" type="text" value="5" size="2" />  
<input type="button" value=" Show diagramm "
onclick="var n = document.getElementById('en_ul').value;
var dame = new Queens(n,document.getElementById('diagrama1'));
dame.run();" />

<div id="diagrama1"> </div>

permitand astfel utilizatorului sa introduca o valoare "n" si sa declanseze prin click pe butonul
"Show" seria de actiuni specificata de onclick (in urma careia se va prezenta o solutie in
diviziunea cu ID="diagrama1").

Metoda backtracking

Trebuie doar sa extindem obiectul Queens definit mai sus, cu o noua metoda
"is_good" (fiindca prima opereaza pe intregul vector ROW[], ori acum trebuie sa testam
fiecare solutie "partiala") si cu o metoda care sa asigure mecanismul backtracking:
Queens.prototype.is_good_back = function(col) {
var row = this.row;
if(col == 0) return 1;
for(var i = 0; i < col; i++)
if(row[i] == row[col] || Math.abs(row[i] - row[col]) == col - i)
return 0;
return 1;
};

Queens.prototype.back = function(col) {
17
 for(var to = 0; to < this.n; to++) {
this.row[col] = to;
if(this.is_good_back(col)) {
if(col == this.n - 1)
this.show_table();
else this.back(col + 1);
}
}
}
Desigur ca trebuie sa adaptam si fisierul HTML, iar aceasta se poate face in multe
variante (depinzand de imaginatia si inspiratia fiecaruia, dar... sa ne gandim totdeauna si la
"bun gust"!). O modalitate didactica, vizand completarea fata de HTML-ul anterior ar fi
urmatoarea:
n = <input id="en_ul" type="text" value="5" size="2" />  
<input type="button" value=" Show diagramm "
onclick="var n = document.getElementById('en_ul').value;
var dame = new Queens(n, document.getElementById('diagrama1'));
dame.run();

var dame_bk = new Queens(n, document.getElementById('diagrama_bk'));

dame_bk.back(0);" />

<div id="diagrama1"> </div>

<div id="diagrama_bk"> </div>

De data aceasta, onclick va determina constructia unui al doilea obiect "Queens",
dame_bk si pentru acesta este invocata apoi metoda "back" - ceea ce va duce la inserarea in
diviziunea cu ID="diagram_bk" a diagramelor corespunzatoare solutiilor (una sub cealalta).

Capitolul al III-lea
18
19