LICEUL TEOLOGIC ADVENTIST TEFAN DEMETRESCU

LUCRARE DE ATESTAT
N INFORMATIC

Profesor coordonator: Kos Tiberiu

Nume elev: Ptracu Vlad Timotei

2013

Cuprins:
Introducere.......................................................... pag. 3
Descrierea aplicaiei web................................... pag. 4
1. JavaScript.................................................... pag. 4
2. Exemple grafice.......................................... pag. 8
3. PHP............................................................ pag. 9
4. Probleme cunoscute................................... pag. 9
Concluzii............................................................. pag. 9
Bibliografie.......................................................... pag. 10

Introducere
A. Motivaii
n zilele noastre tot mai puini oameni au timp s citeasc i implicit s-i dezvolte vocabularul i
capacitatea de a gndi ntr-un mod complex. ns dezvoltatorul de aplicaii Android LOTUM GmbH a
gsit o modalitate atractiv de a stimula gndirea i dezvoltarea vocabularului. Aa a aprut aplicaia
2

destinat sistemelor Android 4 Pics 1 Word (Patru cuvinte, o singur imagine). Aplicaia se bucur de un
real succes avnd ntre 10.000.000 i 50.000.000 de instalri. Fiind atras de ideea jocului, am cutat o
variant de browser a jocului i am fost dezamgit cnd am aflat c nc nu exist una. Aa s-a nscut
aplicaia web Un cuvnt patru imagini, o variant n romn a aplicaiei amintite.

B. Cerine hardware i software

Cerinele hardware i software sunt minime.
Procesor Intel Pentiun I (133 Mhz)
MemorieRAM 8 MB
Spaiu Hdd 1,357 KB
Plac video 1 MB
Un browser (recomandabil Mozila Firefox sau Google Chrome) cu JavaScript activat
Pagina web are dimensiunea de doar 104.3kB
Se ncarc conform http://tools.pingdom.com n 2.85s i a obinut un punctaj de 94/100

Descrierea aplicaiei web

Aplicaia Web ncarc o interfa simpl, codul HTML fiind ct mai succint. Un tabel cu patru
csue reprezint structura n care sunt amplasate patru imagini. Cele patru imagini
(300px x 175px) au un element comun care fie este evident, fie va ine utilizatorul n suspans i n ncordare
intelectual. Cele patru imagini trebuie analizate pentru a descoperi cel mai mic detaliu care s genereze
soluia. Sunt oferite 20 de litere din care utilizatorul poate s aleag. El va apsa pe ele n ordinea n care
apar n cuvant, de la stnga la dreapta. Cnd butonul corespunztor unei litere va fi apsat, litera respectiv
3

va apare n csua destinat soluiei, amplasat sub cele patru imagini. n cazul n care utilizatorul dorete
ndeprtarea unei litere, el va apsa butonul corespunztor literei, iar aceasta va fi nlocuit cu caracterul
underscore. n cazul existenei mai multor litere identice n cuvnt, prima liter de la dreapta la stnga va fi
ndeprtat, cnd butonul corepunztor ei este apsat. Pentru mbuntirea calitii interaciunii dintre
utilizator i aplicaie a fost implementat butonul Reset. Acesta va terge literele introduse pn la acel
moment, nemaifiind necesar ndeprtarea lor individual. Dup completarea tuturor spaiilor libere,
aplicaia va afia un mesaj corespunztor corectitudinii soluiei sugerat de utilizator: Mai ncearc / Eti
nemaipomenit! Dup rularea unui efect vizual, un nou cuvnt este ncrcat i alte patru imagini sunt afiate.
Utilizatorul poate vedea n orice moment la ce nivel a ajuns, prin mesajul afiat n antetul paginii. (Ex:
Cuvntul 15 )

1. Descrierea modului de lucru n codul JavaScript

Codul JavaScript este ncrcat dintr-un fiier extern, pentru a mri viteza de descrcare a resurselor
ntr-un browser ce folosete descrcri paralele. Codul JavaScript este structurat pe subprograme.
Butonul Start care este afiat iniial va apela funcia start(); la apsare. Aceasta creeaz structura HTML
prin intermediul sintaxei: document.getElementById('game').innerHTML=''; Apoi, se apeleaz funcia init(),
cu rol de a initializa variabilele, urmat de apelarea funciei game(0);
Funcia game() este:
function game(advance) {
var ajaxRequest;
try {
ajaxRequest = new XMLHttpRequest()
} catch (e) {
try {ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP")
} catch (e) {
try { ajaxRequest =
newActiveXObject("Microsoft.XMLHTTP")
} catch (e) { alert("Your browser broke!");
return false
}
}
}
ajaxRequest.onreadystatechange = function () {
if (ajaxRequest.readyState == 4) {
raspuns = ajaxRequest.responseText; actiune(raspuns);
}
}
ajaxRequest.open("GET", "/game.php?advance=" + advance, true);
ajaxRequest.send(null);
}

Funcia game() primete prin intermediul parametrului advance, numrul cu care scriptul php va
incrementa variabila 'nivel' stocat prin intermediul cookie n browserul utilizatorului. Iniial, funcia game()
a fost apelat astfel: game(0). Astfel se previne utilizarea opiunii Refresh pentru a trece la urmtorul nivel.
Atunci cnd scriptul JavaScript confirm corectitudinea soluiei, el va apela game(1);
Funcia game este cea care folosete Ajax.
S nelegem un pic ce nseamn Ajax. Ajax este un acronim (denumirea prescurtat) de la
Asynchronous JavaScript And XML. n mod standard, nainte de Ajax, pentru fiecare interaciune a unei
4

aplicaii web cu serverul, pagina web trebuia complet rencrcat. Cu tehnologia Ajax pot fi ncrcate i
modificate doar anumite pri din pagin, prelucrate i generarte de server, fr a rencrca toat pagin web.
Acest lucru are ca rezultat ncrcarea mai rapid a coninutului n pagin i reducerea traficului. De
asemenea, pot fi trimise date la server, de la pagin web deschis, n timp ce utilizatorul urmrete coninutul
paginii, fr c aceast s fie afectat. Pentru Ajax nu conteaz tipul limbajului de programare folosit pe
partea de server ci conteaz ca rspunsul primit de la server s fie cu un Content-Type de tip text (plain,
XML, HTML). Ajax este suportat de majoritatea navigatoarelor web i permite realizarea comunicrii cu
serverul i afiarea datelor primite fr a fi necesar rencrcarea paginii.
Rspunsul primit de la pagina game.php va fi transmis prin parametrul 'raspuns' funciei actiune(),
cea care va interpreta rspunsul.
Funcia actiune():
function actiune(raspuns) {

if (raspuns == '-1') {
new Messi('Ai terminat
jocul.<br/>Incearca din nou peste trei
zile! <br/> Acum du-te si invata!');
}
var vars = new Array();
vars = raspuns.split('|', 3);
var images = new Array();
images = vars[1].split(',', 4);
level(vars[2]);
lungime = vars[0].length;
fill(vars[0], images[0], images[1],
images[2], images[3], lungime);
}

Capabil s interpreteze rspunsul primit, functia actiune() fie va afia un mesaj care anun
utilizatorul c a terminat jocul, fie va procesa rspunsul primit i va da valori variabilelor ce conin soluia,
identificatorii imaginilor si lungimea soluiei. De asemenea, ea va afia nivelul curent, apelnd funcia
level(). Apoi, va apela funcia fill() oferindu-i parametrii necesari ca aceasta s afieze toate elementele
grafice personalizate rspunsului primit de la server.
Funcia fill():
function fill(word, img1, img2, img3, img4, lungime) {
solutie = word;
var add = addleters(19 - lungime);
word = add + word;
litere = word.split('');
litere.sort(function () { return 0.738 - Math.random() })
/*[...] putting imgs into places using document.getElementById
[...]*/
var i; var space_lenght = 16;

space_lenght = space_lenght * lungime;

for (i = 0; i < lungime; i++)
space = space + '_ ';
document.getElementById('cuvant').value = space;
document.getElementById('cuvant').style.width =
space_lenght;
for (var i = 1; i <= 20; i++) {
t = "" + i;
document.getElementById(t).value = litere[i - 1];
}
}

Funcia fill() se ocup de partea grafic dar i de cteva lucruri eseniale, cum ar fi adugarea la
literele soulie a nc 20-n litere i apoi sortarea lor aleatoare.
n acest moment se ncheie ciclul de apelri succesive ale funciilor cu rol iniial. De acum funiile
vor fi apelate numai la aciunea utilizatorului.
Funcia touch() apelat cnd o liter este apsat este:
function
touch(n) {
if (buton[n]
== 1)
get_out_leter(n)
;
else
if (counter
< lungime)
put_leter(n);
}

n funcie de situaie, funcia apeleaz get_out_leter() respectiv put_leter(). Astfel, o litera va fi

afiat n cmpul destinat soluiei, sau va fi extras i nlocuit de caracterul underscore din cmpul destinat
soluiei. Ambele funcii ( get_out_leter i put_leter ) vor folosi sintaxa de cod JavaScript
document.getElementById('cuvant').value=str; pentru a actualiza coninutul cmpului soluiei. Alturi de
acest lucru sintaxa document.getElementById(n).style.background="green"; va schimba i culoarea literei
care a fost folosit fa de cea nefolosit.

Funciile put_leter si get_out_leter:

function put_leter(n) {
document.getElementById('mesaj').innerHTML =
"";
var test =
document.getElementById('cuvant').value;
var result = test.replace('_', litere[n - 1]);
document.getElementById('cuvant').value =
result;
document.getElementById(n).style.background =
"green";
counter++;
buton[n] = 1;
if (counter == lungime) verificare();
}
function get_out_leter(n) {
document.getElementById('mesaj').innerHTML =
"";
var str =
document.getElementById('cuvant').value;
var pos = str.lastIndexOf(litere[n - 1]);
str = str.substring(0, pos) + '_' +
str.substring(pos + 1)
document.getElementById('cuvant').value = str;
document.getElementById(n).style.background =
"#5f5f5f";
counter--;
buton[n] = 0;
}

Funcia put_leter() verific daca s-a ajuns la ultima liter si apeleaz funcia verificare()
Funcia verificare va compara cuvntul propus de utilizator cu soluia i n cazul identitii va
genera un efect vizual din librria JavaScript Jquery (shake). Dup 1250 ms, timp necesar vizualizrii
efectului, va apela funcia next. Dac utilizatorul nu a gsit cuvntul corect, este afiat un mesaj
corespunztor.
Funcia verificare():
function verificare() {
var str = " " + document.getElementById('cuvant').value;
var final = str.replace(/\s/g, '');
var result = (final == solutie);
if (result) {
$(".shake").effect("shake", {
times: 3
}, 100);
document.getElementById('mesaj').innerHTML = "<b>Esti
nemaipomenit!/b>";

setTimeout(next, 1250);
} else {document.getElementById('mesaj').innerHTML = "<b>Mai incearca!
</b>";
}
}

Funcia next() iniializeaz variabilele pentru un nou joc i apeleaz funcia game(1); Prin
parametrul level cu valoarea 1 se indic trecerea la un nou nivel.

2. Exemple grafice:
Exemplu
de
cuvnt
greit i
de
cuvnt
corect:

3. Descrierea modului de lucru n codul PHP

Scriptul PHP realizeaza urmtoarele:
-Verific exitena i n cazul inexistenei, creeaz dou variabile de tip cookie. Prima dintre ele
conine o cheie unic generat pentru fiecare utilizator n parte, care va codifica ordinea apariiei cuvintelor
n joc. Astfel se previne o contribuie ntre utilizatori, acetia avnd cuvinte diferite, chiar dac sunt la acelai
nivel. Cea de-a doua variabil de tip cookie va stoca nivelul curent al utilizatorului. Astfel, chiar i dup ce
browserul a fost nchis i redeschis, nivelul utilizatorului se va menine pn cnd acesta i va terge cookieurile din browser.
-Se conecteaz la baza de date
-n funcie de valorile din variabilele de tip cookie, scriptul acceseaza baza de date, de unde va
prelua cuvntul i locaia imaginilor corespunztoare.
-Dac utilizatorul a ajuns la finalul jocului, el returneaz valoarea '-1' care va fi interpretat
corespunztor de ctre JavaScript.
-In modul de dezvoltare, primind parametrul GET 'del', va sterge cookie-urile pentru a permite
testarea aplicaiei. (/game.php?del)

4. Probleme cunoscute
Datorit faptului c JavaScript este un limbaj ce ruleaz n browser, utilizatorul avansat i poate
accesa variabilele. Astfel, prin metoda injeciei, un utilizator va putea afla n orice moment soluia jocului
curent, prin scrierea n bara de adres a sintaxei:
javascript: alert(solutie);
Rezolvarea acestei vulnerabiliti nu este posibil n JavaScript, care rmne doar un limbaj de
programare recomandat pentru manipularea datelor neimportante.

Concluzii
JavaScript, n ciuda unor vulnerabiliti, continu rmn un limbaj de programare important n
web-design. Orice persoan care navigheaz pe Internet recunoate un site web de calitate atunci cnd l
ntlnete, pentru c acesta posed caracteristici care capteaz atenia i l fac s fie lesne de remarcat printre
celelalte situri web. Creatorii acestor situri i las pe navigatorii de Internet mui de admiraie, nu pentru c ar
folosi animaii sofisticate sau imagini provocatoare, ci utiliznd artificii subtile, cum ar fi meniurile sau
obiectele mobile, adugnd caracteristici utile n situl web, care l ajut pe utilizator s introduc informaiile
adecvate i s ndeplineasc sarcinile de lucru n mod corespunztor Jim Keogh n introducerea JavaScript
fr mistere.

Bibliografie

Programarea n PHP - Traian Anghel Editura Polirom

Javascript fr mistere - Jim Keogh Editura Rosetti Educational
http://www.lynda.com/Developer-tutorials/JavaScript-and-AJAX/114900-2.html

http://www.marplo.net/ajax/introducere.html

10