Sunteți pe pagina 1din 5

Capitolul 2.

Elemente ale limbajului Javascript si Query

2.1. Elemente ale limbajului Javascript

Limbajul de programare Javascript, abreviat JS, a fost dezvoltat de catre Brenden Eich, de
la Netscape Communications Corporation, iar impreuna cu HTML si CSS formeaza
grupul celor mai utilizate tehnologii ale web-ului. Initial a avut numele de Mocha, apoi
LiveScript, a treia denumire , JavaScript fiind cea finala.
JavaScript reprezinta un limbaj de programare orientat pe obiect, un limbaj dinamic, care
utilizeaza functii in prim plan, bazandu-se pe conceptul de prototip. De asemenea,
functionalitatea limbajului are la baza evenimente.
Acest limbaj se utilizeaza in paginile web pentru a introduce functionalitati ale site-ului.
Browser-ul este cel care ruleaza acest cod JavaScript, fiecare browser avand un motor
JavaScript specific pentru a fi executat.
Asadar, JavaScript se utilizeaza in mare parte in paginile web, mai exact in crearea de
scripturi. Aceste scripturi inglobeaza anumite activitati, verificarea acestora si unele efecte
animate, carusel de imagini, slideshow, etc.
Pagina web este reprezentata sub forma unui arbore de obiecte, iar browserul memoreaza
aceasta, punand obiectele la dispozitia scripturilor JavaScript . Acestea sunt citite si
manipulate. Numele de Document Object Model (DOM) apartine arborelui de obiecte.
JavaScript este utilizat in deosebi pe partea de client a unui site web, fiind introdus in
documentele HTML prin eticheta “<script>”. Acest limbaj furnizeaza obiecte si metode,
cu ajutorul carora scripturile comunica cu mediul. Fiecarei functii apelate de JavaScript, i
se asociaza un mesaj , ceea ce produce fenomenul de “stiva de apeluri”. Aceasta stiva
cuprinde argumentele functiei si variabilele introduse, iar la finalizare, atunci cand stiva
de apeluri este goala, JavaScript trece mai departe, la urmatorul mesaj. Acest lucru indica
faptul ca JavaScript ruleaza functiile pana la finalizare, fiecare mesaj al acestora fiind
procesat integral, inainte de a trece la urmatorul mesaj.

In continuare, vor fi prezentate cateva exemple in legatura cu functionalitatea limbajului


JavaScript:
 incarcarea cuprinsului unei pagini a site-ului web fara a fi necesara reincarcarea
acesteia(refresh) – pentru aceasta se utilizeaza AJAX, despre care exista un
subcapitol separate in aceasta lucrare;
 elementele de pe pagina pot fi animate, estompate sau redimensionate pe pagina;
 se pot efectua jocuri si videoclipuri;
 in cazul unui formular pe care clientul il completeaza ( de exemplu: formular de
inregistrare, formular de contact, formular de comanda, etc.), datele introduse de
catre acesta pot fi verificate inainte de a fi trimise la server, pentru a stabili daca
sunt acceptate sau nu;

Java si JavaScript sunt doua limbaje total diferite, similar fiind doar denumirea si anumite
elemente de sintaxa. Sintaxa este asemanatoare cu cea a limbajului C, insa JavaScript are
foarte multe asemanari cu limbajul Self.
Sintaxa JavaScript este :
<script type=”text/javascript”>
// codul JavaScript
</script>
Pentru interpretarea codului continut intre tag-urile <script> se utilizeaza atributul type.
Exemplu de cod JavaScript intr-o pagina web:
<html>
<head>
<title>Codul</title>
</head>
<body>
<script type=”text/javascript”>
document.write(“Scrie textul aici”);
</script>
</body>
<html>
Pentru a afisa un text pe ecran intr-o anumita pagina, se utilizeaza comanda
“document.write”.
O alta modalitate pentru a folosi codul JavaScript este, similar cu codul CSS, scrierea acestuia
intr-un fisier separat. Astfel, pentru a fi utilizat codul, vom scrie in fisierul nostru HTML, in
sectiunea <head> linia de cod:
<script src=”javascript.js” type=”text/javascript”></script>

2.1.1. Tehnica Asynchronous JavaScript and XML ( AJAX)


Tehnica Asynchronous JavaScript and XML ( AJAX) reprezinta o tehnica interactive de
construire a paginilor web, prin concretizarea unor cereri HTTP, in fundal, fara a avea
nevoie de restabilirea paginii web. Astfel, se actualizeaza doar anumite portiuni.
Este o tehnica noua, introdus in anul 2005 de catre Jesse James Garret in articolul “Ajax:
A New Approach to Web Applications”.
Construirea interfetei web are loc intr-un timp scurt, raspunsul fiind mic.
Operatia de incarcare a unei pagini HTML este costisitoare ca timp, asadar prin tehnica
AJAX aceasta este inlaturata.

Functionarea tehnicii AJAX:


1. Un eveniment are loc într-o pagină web (pagina este încărcată, se face clic pe un buton)
2. Un obiect XMLHttpRequest este creat de JavaScript
3. Obiectul XMLHttpRequest trimite o solicitare către un server web
4. Serverul procesează solicitarea
5. Serverul trimite un răspuns înapoi la pagina web
6. Răspunsul este citit de JavaScript
7. Acțiunea corectă (precum actualizarea paginii) este realizată de JavaScript

2.2. Elementele ale limbajului jQUERY

Introdusa in anul 2006 de catre John Resig, jQuery este o biblioteca JavaScript, foarte
populara si extrem de extinsa.
Pentru a simplifica utilizarea JavaScript pe site-ul web, indeosebi scripturile de pe partea de
client, executate prin intermediului codului HTML, putem utiliza jQuery, o aplicatie usoara,
care se bazeaza pe principiul “scrie mai putin, face mai mult”.
Majoritatea functiilor care necesita multe linii de cod JavaScript sunt inglobate in metode care
sunt apelate printr-o singura linie de cod. Prin jQuery sunt simplificate,de asemenea, apelurile
AJAX si manipularea DOM(Document Object Model.

Printre caracteristicile principale ale bibliotecii jQuery se numara : manipularea


HTML/DOM, manipularea CSS, metodele de eveniment HTML, efectele si animatiile,
modificarea aspectului unei pagini, cat si continutul acesteia, in mod dinamic. Cu toate
acestea, cea mai importanta facilitate oferita de jQuery este utilizarea plugin-urilor
( extensiile).
Plugin-ul reprezinta o componenta software, care atribuie o specificatie aparte unui program
deja existent, fenomen care produce personalizarea acestui program.
Astfel, se pot dezvolta subaplicatii, care sporesc cele mai importante functii jQuery.
Pentru a adauga jQuery in site-ul web, se utilizeaza 2 metode:
1. Se poate descarca biblioteca jQuery de pe jQuery.com
2. Se poate include jQuery de pe un CDN, cum ar fi Google
Pentru descarcarea JQuery exista 2 versiuni disponibile.
Prima versiune, si anume versiunea de productie este pentru site-ul live, care a fost
comprimat.
A doua versiune, cea de dezvoltare, este pentru testare.
De asemenea, pentru a include biblioteca jQuery , vom adauga in sectiunea <head> eticheta
<script>, astfel:
<head>
<script src=”jquery-3.4.1.min.js”></script>
</head>
Totodata, se poate include jQuery de pe CDN ( Content Delivery Network) - de exemplu
Google sau Microsoft. Pentru asta, se utilizeaza urmatoarele linii de cod in sectiunea <head>:
a. Pt Google
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
</head>
b. Pt Microsoft
<head>
<scriptsrc=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery/jquery-3.4.1.min.js”></script>
</head>
Pentru interactionarea cu elementele HTML din pagina web, codul jQuery se scrie in
interiorul unei functii denumite “document ready”, instructiunile introduse in script fiind
execute dupa incarcarea paginii.
Exemplu pentru sintaxa de introducere a codului jQuery este urmatorul:
<script type=”text/javascript”>
$(document).ready(function() {
//Exemplu de cod jQuery
});
</script>