Sunteți pe pagina 1din 13

II.5 JavaScript.

Prezentare

II.5.1 Limbajul JavaScript

JavaScript (JS) este un limbaj de programare orientat obiect bazat pe conceptul


prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile
web, codul Javascript program simplu in JavaScript.

Definirea variabilelor

In JavaScript, precum si în alte limbaje de scripting, nu este necesară declararea


tipului de date atunci cand definim o noua variabilă sau funcție. Totuși, definirea unei
noi variabile se face folosindu-ne de cuvântul cheie var, nu puteam pur și simplu sa
folosim acea variabila fara sa o fi declarat.
Exemplu de definire a variabilelor in limbajul JavaScript:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type=”text/javascript”>
var a = 1;
a = “string cu doua ghilimele”;
a = 'string cu apostroafe';
a = 2.3;
</script>
</body>
</html>

În exemplul de mai sus am creat o variabila a și i-am am atribuit pe rand 4 valori de


tip: intreg,
string, string delimitat de apostroafe și număr real. Precum majoritatea limbajelor de
scripting, JavaScript, pune la dispoziie două modalități sintactice de reprezentare a
stringurilor: forma ce face uz de ghilimele și forma ce folosește apostroafele.
Structuri decizionale în limbajul JavaScript

Din punct de vedere al structurilor decizionale JavaScript se aseamnă foarte mult cu


limbajele C, C++ si Java. Exemplul urmator demostraza modul de folosire a celor mai
frecvente structuri decizionale, și anume: if/else/elseif și switch.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type=”text/javascript”>
if(true) {
alert('ramura de adevar');
}
else if(undefined) {
alert('ramura elseif');
}
else {
alert('ramura else');
}

switch(variabila) {
case true:
alert('cazul de adevar');
break;
default:
alert('nicio ramura nu a fost acoperita');
</script>
</body>
</html>

În exemplul de mai sus am introdus o strucura decizională de tip if/elseif/else ce


apeleaza funcția alert, pasându-i ca și argumente stringurile: 'ramura de adevar',
'ramura elseif', 'ramura else', în funcție de ramura pe care se afla fluxul de execuție.

În cazul celui de al doilea exemplu, în care folosim structura switch, vom apela funcția
alert pasându-i ca și argument stringul 'cazul de adevar', atunci cand fluxul de
executie se afla in cazul in care valoarea variabilei variabila este true.

Structuri repetitive

Precum și in limbajul de programare C, limbajul JavaScript pune la dispozitie 3


structuri repetitive principale: do/while, while, for.
În exemplul urmator voi prezenta fiecare din cele 3 structuri repetitive:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type=”text/javascript”>
do {
alert(i);
i++;
} while(i < 10);

while(i > 8) {
alert(i);
i--;
}

for(var i = 0; i < 20; i++) {


alert(i);
}
</script>
</body>
</html>

Bucla do/while va rula pana cand valoarea varieabilei i va fi mai mare decat 10, la
fiecare iterație se afișează valoarea variabilei i și se incrementează cu o unitate.

Bucla while va rula pană când valoarea ei va fi mai mica de 8, la fiecare iterație a
buclei se va afișa valoarea variabilei prin intermediul functiei alert, iar valoarea
variabilei i va fi decrementată cu o unitate.

Bucla for va rula până când valoarea variabilei i va fi mai mare de 20, la fiecare iterație
a buclei valoarea variabilei va fi incrementata cu o unitate, iar valoarea acesteia va fi
afișată într-o căsuța de dialog prin intermediul funcției alert.

Definirea functiilor

Limbajul JavaScript pune la dispoziție doua modalități de definire a funcțiilor, prima


asemănându-se foarte mult cu modul de definire a funcțiilor din limbajul php.
Exemplul următor ilustreaza modul de utilizare a celor doua modalități.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type=”text/javascript”>
function f() {
alert('f');
}
var g = function() {
alert('g');
}

</script>
</body>
</html>

Prima modalitate definește o funcție f ce va afișa o casuță de dialog cu textul f atunci


cand este apelată, iar a doua definește o variabila g caruia îi este atribuită valoarea unei
funcții anonime ce afișează o casuta de dialog cu textul g.

II.5.2 Prezentarea bibliotecii JQuery

Pentru a prelucra elementele DOM-ului prin intermediul JavaScript simplu vom


întampina o serie de dificultati, întrucat funcțiile folosite pentru realizarea acestor
lucruri sunt implementate diferit de producatorii de browsere, iar API-ul nativ pus la
dispozitie de un browser pentru efectuarea acestui lucru ofera o interfata neprietenoasa.
Pentru a usura procesul de selectare si modificare a elementelor DOM-ului vom folosi
o biblioteca denumita JQuery.

Selectarea elementelor dupa id

Pentru a modifica elementele unui document HTML este nevoie de o modalitate de a


le accesa, interfata pusă la dispoziție de JQuery se asemană foarte mult cu modul în
care selectăm elementele HTML din limbajul CSS. În exemplul urmator voi selecta
tagul <p> cu id-ul paragraf si voi adauga in interiorul acestuia textul text.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type=”text/javascript”>
$(document).ready(function() {
$('#paragraf').append('text');
});
</script>
<div>
<p id=”paragraf”> </p>
</div>
</body>
</html>

Se observa apelul la metoda ready a documentului, scopul acestei acțiuni este de a


executa cod JavaScript decat dupa ce browserul a terminat de incărcat pagina
complet. Folosind metoda append aplicataă asupra elementului cu id-ul paragraf vom
adauga textul text în interiorul acestui element.

Tratarea evenimentelor

JQuery ne permite să legăm diferite evenimente de elemente din fisierul HTML.


Spre exemplu, atunci când se face click pe un buton va fi apelat evenimentul click.
JQuery ne permite să executam porțiuni de cod la executarea unui astfel de eveniment.

In exemplul de mai jos voi afisa o casuta de dialog de fiecare data cand se face click
pe un buton ce are atributul class egal cu “buton”.

<!DOCTYPE html>
<html>
<head></head>
<body>
<script type=”text/javascript”>
$('.buton').click(function() {
alert('ati apasat butonul');
});
</script>
<div>
<button type=”button” class=”buton”> Buton </button>
</div>
</body>
</html>

II.6 Limbaje de scripting

II.6.1 Python. Prezentare

Python este un limbaj de programare dinamic multi-paradigmă, creat în 1989 de


programatorul olandez Guido van Rossum. Van Rossum este și în ziua de astăzi un lider
al comunității de dezvoltatori de software care lucrează la perfecționarea limbajul
Python și implementarea de bază a acestuia, CPython, scrisă în C. Python este un limbaj
multifuncțional folosit de exemplu de către companii ca Google sau Yahoo pentru
programarea aplicațiilor web, însă există și o serie de aplicații științifice sau de
divertisment programate parțial sau în întregime în Python. Popularitatea în creștere, dar
și puterea limbajului de programare Python au dus la adoptarea sa ca limbaj principal de
dezvoltare de către programatori specializați și chiar și la predarea limbajului în unele
medii universitare. Din aceleași motive, multe sisteme bazate pe Unix, inclusiv Linux,
BSD și Mac OS X includ din start interpretatorul CPython.

Python pune accentul pe curățenia și simplitatea codului, iar sintaxa sa le permite


dezvoltatorilor să exprime unele idei programatice într-o manieră mai clară și mai
concisă decât în alte limbaje de programare ca C. În ceea ce privește paradigma de
programare, Python poate servi ca limbaj pentru software de tipul object-oriented, dar
permite și programarea imperativă, funcțională sau procedurală. Sistemul de tipizare este
dinamic iar administrarea memoriei decurge automat prin intermediul unui serviciu
„gunoier” (garbage collector). Alt avantaj al limbajului este existența unei ample
biblioteci standard de metode.

Implementarea de referință a Python este scrisă în C și poartă deci numele de CPython.


Această implementare este software liber și este administrată de fundația Python
Software Foundation.

Structuri de date

Python oferă tipuri tradiționale de date, cum ar fi numărul întreg (integer, int) sau cel
rațional (float), dar introduce totodată și concepte noi.

De exemplu, un grad mare de flexibilitate îl oferă listele (tablourile) în Python.


Acestea nu sunt statice, ci pot conține orice tipuri de date (în cadrul aceleiași liste) și
pot fi modificate pe loc adăugând și eliminând elemente fără a declara sau utiliza
funcții de manipulare a memoriei.

lista_mea = [10, "șir de caractere", variabilă, ["altă", "listă"], chiar_și_o_funcție]

Alte structuri de date sunt tuplurile/perechile (tuples) și dicționarele (dictionaries,


mappings). Tuplurile sunt liste care au un număr prestabilit de elemente, și nu pot fi
modificate parțial. Tuplurile pot fi utilizate în cazuri în care este nevoie de o anumită
structură de date specializată, de exemplu coordonate în spațiul cartezian. Dicționarele
sunt liste neordonate în care fiecare element are asociat o cheie, care poate fi număr sau
șir de caractere. Dicționarele au foarte multe aplicații, inclusiv crearea structurilor de
tip hash-tables.

Stil

Python este un limbaj multi-paradigmă, concentrându-se asupra programării


imperative, orientate pe obiecte și funcționale, ceea ce permite o flexibilitate mai mare
în scrierea aplicațiilor. Din punctul de vedere al sintaxei, Python are un număr de
contrucții și cuvinte cheie cunoscute oricărui programator, dar prezintă și un concept
unic: nivelul de indentare are semnificație sintactică. Blocurile de cod sunt delimitate
prin simplă indentare.

În C un astfel de blocuri sunt deseori desemnte prin acolade, {<cod>}, dar în Python
nu este nevoie de astfel de construcții. Nivelele de indentare îndeplinesc această
funcție. Această importanță a indentării este foarte suprinzătoare pentru mulți
utilizatori noi ai limbajului Python chiar dacă sunt programatori cu experiență. Dar o
astfel de utilizare a indentării permite codului să fie mai ușor de citit și mai compact.
Programatorii cu experiență vor indenta implicit codul sursă, oricare ar fi limbajul,
fiindcă astfel se permite structurarea codului sursă și evidențierea funcționalității.
Python face din această deprindere folositoare în acest sens o cerință strictă.

O impunere similară există și în limbajul de programare Java, care forțează


programatorii să delimiteze clasele în fișiere aparte, din motive de organizare și sporire
a eficienței de scriere a softului în echipe.

Biblioteci și Extindere

Includerea tuturor acestor structuri, precum și a funcțiilor ce permit manipularea și


prelucrarea lor, precum și multe alte biblioteci de funcții sunt prezente datorită
conceptului “Batteries Included”, ce poate fi explicat prin faptul că Guido van Rossum
și comunitatea ce s-a format în jurul limbajului cred că un limbaj de programare nu
prezintă utilitate practică dacă nu are un set de biblioteci importante pentru majoritatea
dezvoltatorilor.

Din acest motiv Python include bibioteci pentru lucrul cu fișiere, arhive, fișiere XML
și un set de biblioteci pentru lucrul cu rețeaua și principalele protocoale de comunicare
pe internet (HTTP, Telnet, FTP). Un număr mare de platforme Web sunt construite cu
Python. Abilitățile limbajului ca limbaj pentru programarea CGI sunt în afara oricăror
dubii. De exemplu YouTube, unul din site-urile cu cea mai amplă cantitate de trafic din
lume, este construit pe baza limbajului Python.

Totuși, Python permite extinderea funcționalității prin pachete adiționale programate


de terți care sunt axate pe o anumită funcționalitate. De pildă, pachetul wxPython
conține metodele și structurile necesare creării unei interfețe grafice.

Popularitatea limbajului este în creștere începând cu anul 2000, datorită faptului că


Python permite crearea mai rapidă a aplicațiilor care nu cer viteze înalte de procesare a
datelor. De asemenea este util ca limbaj de scriptare, utilizat în cadrul aplicațiilor scrise
în alte limbaje Dupa cum vedeți, este necesară importarea clasei Flask și a funcției
render_template. Variabila app va fi inițializată drep un obiect de tip Flask, acest
obiect va conține toate datele ce țin de configurarea aplicatiei.

Functia render_template va procesa templateul al cărui nume îi este pasat ca și


argument si va returna sub forma unui string conținutul acestuia. Motivul folosirii unei
astfel de metode este pentru a permite utilizarea structurilor de control ce permit
crearea templateurilor într-un mod dinamic.

Folosind decoratorul app.route înregistram funcția index drept un view. Astfel,


funcția index va fi apelată de fiecare dată cand un client solicită resursa /index.

De asemenea, Flask permite si introducerea variabilelor în URL si selectarea metodei


aferente unei rute. Exemplul urmator demonstreaza aceste lucruri:

from flask import Flask


from flask import render_template

app = Flask(__name__)

@app.route('/utilizator/<int:id>', methods=['GET', 'POST'])


def utilizator():
return render_template('pagina_utilizator.html')

Din exemplul prezentat mai sus putem observa ca ruta utilizator contine in URL o
variabila de tip integer ce semnifica id-ul utilizatorului. De asemenea, puteam observa
ca metodele aferente acestei rute sunt GET si POST. In mod standard, fiecare ruta
permite accesul doar prin metoda GET, folosirea metodei post este necesara decat dacă
dorim sa procesăm un formular.
II.6.3 Administrarea bazelor de date cu SQLAlchemy
SQLAlchemy este un ORM(Object Relational Mapper) ce permite efectuarea de interogări
fara a mai scrie cod SQL. Folosind SQLAlchemy se va crea o relatie intre baza de date si
modul in care sunt reprezentate atributele clasei ce mosteneste clasa pusa la dispozitie de
SQLAlchemy.

Crearea tabelelor în SQLAlchemy

În SQLAlchemy tabelele sunt reprezentate de clase ce moștenesc clasa db.Model.

Astfel, la rularea scriptului ce se ocupa de crearea bazei de date, SQLAlchemy, va crea


tabelele în funcție de clasele ce mostenesc clasa db.Model.

Pentru a defini câmpurile unui tabel vom inițializa fiecare atribut al clasei ce moștenește clasa
db.Model cu instanțe ale clasei db.Column. class Utilizator(db.Model)

id = db.Column(db.Integer, primary_key=True)

nume = db.Column(db.String, nullable=False)

prenume = db.Column(db.String, nullable=False)

parola = db.Column(db.Srtring, nullable=False)

def __init__(self, nume, prenume, parola):

self.nume = nume

self.prenume = prenume

self.parola = parola

După cum se poate vedea, definim o clasa denumita Utilizator ce moștenește clasa
db.Model. Clasa Utilizator contine urmatoarele atribute: id – contine o instanta a clasei
db.Column create pentru un câmp de tip întreg ce este și cheie primară, nume – ce contine o
instanță a clasei db.Column inițializată pentru un camp de tip string a cărui valoare nu poate fi
nulă, prenume - ce conține o instanța a clasei db.Column inițializată pentru un camp de tip
string ce nu poate conține o valoare nulă, parola – conține o instanță a clasei db.Column
inițializată pentru un element de tip string ce nu poate conține o valoare nula.

Un alt avanatj al SQLAlchemy este faptul că nu constrânge utilizatorul la folosirea unui


anumit sistem de management al bazelor de date. In general, utilizatorii SQLAlchemy folosesc
PostgreSQL.

Executarea interogarilor

Avand in vedere faptul ca clasele ce moștenesc clasa db.Model sunt reprezentarile tabelelor
din baza de date, acestea conțin și metode speciale folosite pentru a efectua interogari.

Urmatorul exemplu ilustreaza conceptele explicate mai sus Exemplul următor demonstreaza
cele mai frecvent utilizate meode pentru efectuarea unei interogări:

utilizatori = Utilizator.query.all()

george = Utilizator.query.filter_by(name='geroge').first()

utilizatorul1 = Utilizator.query.get(1)

În primul exemplu atribuim variabilei utilizatori o lista ce va conție toate obiectele de tip
Utilizator din baza de date.

În al doilea exemplu atribuim variabilei george ca și valoare obiectul returnat de efectuarea


unei interogări după câmpul nume.
În al treilea exemplu atribuim vaiabilei utilizatorul1 valorea returnată de interogarea efectuata
cu scopul de a obține elementul cu id-ul 1.

Pentru a adăuga informații noi în baza de date va trebui sa adăugam obiectul modificat sau
nou creat in sesiunea pusa la dispozitie de SQLALchemy dupa ce am terminat de adaugat
elementele noi sau modificate în sesiune va trebui sa confirmăm schimbarea.

Exemplul următor ilustreaza introducerea unui nou utilizator în baza de date

utilizator = Utilizator(nume='David', prenume='laurentiu', parola='123444')

db.session.add(utilizator)

db.session.commit()

Apelul la metoda db.session.commit arată acordul nostru cu privire la introducerea noului


utilizator adaugat în sesiune în baza de date.