Vom formula, in continuare, o serie de sfaturi (reguli) privind scrierea judicioasa a programelor JavaScript. Suplimentar, vom mentiona diverse biblioteci utile, modalitati de testare a codului si altele de rulare a scriptu­rilor JavaScript. .


1. Aspecte importante privind filosofia limbajului

Trebuie retinute in primul rand urmatoarele aspecte :
· totul in JavaScript este considerat obiect, inclusiv functiile
· orice obiect este intotdeauna mutabil - poate fi alterat oricand (chiar si obiectele predefinite)
· operatorul"." este echivalent cu dereferentierea; astfel, constructia obiect. proprietate este similara cu obiect ["proprietate"]
· operatorul new creeaza obiecte apartinand clasei specificate de functia constructor
· functiile ascund orice este definit in interiorul lor
· cuvantul-cheie this este relativ la contextul executiei, si nu la cel al declararii
· valoarea proprietatii prototype poate fi modificata oricand

In al doilea rand, un dezvoltator de aplicatii trebuie sa adopte sau sa initieze o metodologie de redactare a codului. Astfel, programele trebuie modularizate, divizate in fisiere separate care sa fie focalizate asupra unor sarcini precise. Este necesara adoptarea unei conventii de scriere a codului, inclusiv a comentariilor, atat de utile.
Inainte de a concepe programul propriu-zis, se poate incepe cu plasarea comentariilor, conform pasilor importanti ai algoritmului de imple­mentat.

Un scenariu posibil este cel in care initial avem :
//cream un tablou de stocare a adreselor Web
// pe care le preluam din document
...
// determinam elementele <a>
...
//baleiem elementele <a> gasite
...// preluam URL-urile,
//adica valorile atributului href

Ulterior scrierii liniilor de cod, fragmentul de program poate avea forma:

//cream un tablou de stocare a adreselor Web
// pe care le preluam din document
var adrese = [];
//determinam elementele <a>
var legaturi = document.getElementsByTagName ("a")
// baleiem elementele <a> gasite
for ( var i = 0; i < legaturi.length; i++) (
// preluam URL-urile,
// adica valorile atributului href
adrese.push (legaturi[i] .getAttribute("href"));
}

Pentru o procesare eficienta a datelor XHTML/XML, elementele care prezinta interes trebuie identificate unic via atributul id si apoi referite simplu cu getElementById ( ). De asemenea, se poate folosi si atributul class pentru a opera oricand modifidiri de stil. Desigur, paginile Web si documentele XML ar trebui sa fie rational construitc, prezentand o structura clara. Scripturile nu trebuie sa se bazeze pe structuri precise de marcaj, ci este necesar sa fie dezvoltate intr-o maniera cat mai generica. Acest aspect va contribui la cresterea flexibilitatii codului.

2. Utilizarea bibliotecilor JavaScript

Biblioteci reprezentative
Atunci cand prelucrarile sunt mai complexe, cea mai buna solutie este sa se recurga la o biblioteca ]avaScript specifica. Recomandam folosirea si aprofundarea bibliotecilor :
· Dojo desemneaza un complex toolkit de dezvoltare, oferind pe baza unui sistem de pachete (module), fiecare identificat unic de un spatiu de nume, facilitati pentru realizarea unor interactiuni Web conduse de evenimente. Desigur, exista suport si pentru realizarea altor sarcini. Suplimentar, pune la dispozipe.un sistem de creare (inclusiv decla­rativa) a componentelor Web de interfata (widget-uri) si un API referitor la realizarea unor elemente de grafica 2D, independenta de browser.
Pentru amanunte, exemple si documentatii, vizitati adresa http://dojotoolkit.org
· Prototype reprezinta una dintre cele mai populare biblioteci JavaScript, fiind bazata pe paradigma obiectuala si oferind facilitati in special pentru procesari XML. A fost dezvoltata initial pentru mediul Ruby on Rails, din care sunt inspirate unele caracteristici ale sale. Biblioteca Prototype si documentatia aferenta sunt disponibile la adresa http://www.prototypejs.org/
· Script.aculo.us este o extensie a bibliotecii Prototype, mai ales in directia realizari unor efecte vizuale - multe dintre ele, bazate pe animatie si a sabloanelor de interactiune cu utilizatorul (e.g., autocompletare, editare dinamica, drag & drop etc.)
Se faciliteaza, de asemenea, manipu­larea arborilor DOM.
Detalii la http://script.aculo.us/
· Yahoo! User Interface (YUI) reprezinta o biblioteca atent testata, focallzata asupra interactiunii cu utilizatorul;
de exemplu, pot fi folosite diverse controale (meniuri, vizualizari arborescente, calendare etc.).
Situl YUI este disponibil la adresa http://developer.yahoo.com/yui/
· MochiKit faciliteaza scrierea - independenta de navigator - a diverselor scripturi, oferind module specializate pentru indeplinirea de activitati de baza (MochiKit.Base), a procesarilor DOM (MochiKit.DOM), a trans­ferurilor asincrone de date (MochiKit.Async), a tratarii evenimentelor (MochiKit.Signal) sau a realizarii de efecte vizuale (MochiKit. Visual).
Detalii si documentatii sunt disponibile la adresa http://mochikit.com/
· jQuery este conceputa pe un mecanism de extensii (plugins), API-ul oferit fiind bazat pe tehnologii precum CSS3 sau XPath, facilitand selectia sofisticata a nodurilor – vizitati http://visualjquery.com/
· Microsoft Ajax Library reprezinta o biblioteca oferita de Microsoft pentru facilitarea implementarii la nivel de client a aplicatiilor bazate pe suita de tehnologii AJAX. Desi face parte din extensia AJAX ASP.NET (ex-Atlas), poate fi utilizata liber si independent de mediul .NET.
Pentru exemplificari si documentatii, puteti consulta http://ajax.asp.net/

Exemplificari

Vom ilustra in continuare o serie de facilitatzi oferite de bibliotecile amintite mai sus.
Asfel realizarea unei cererei asincrone in stilul AJAX poate fi mult simplificata de YUI:

// stabileste functiile ce vor trata
//situatiile de succes/esec al transferului
var tratament = {
success: function (obiect) {
// proceseaza obiect.responseText
},
failure: function (obiect)
// trateaza esecul
}
}
// formulam cererea GET in mod asincron YAHOO.util.asyncRequest("GET","http://www.pinguin.info/serviciu/", tratament, null);

Pentru actualizarea periodica a continutului preluat de pe server, vom putea recurge la urmatorul cod JavaScript, bazat pe biblioteca Prototype:

/* cod JavaScript folosit pentru actualizarea continutului in stilul AJAX (se bazeaza pe Prototype)
*/

// linii executate la incarcarea documentului
window.onload = function ( ) {
var executant;
//numarul de actualizari observate
var contor = 0;
if ($("numere")) {
// instantiem un executant periodic
executant = new PeriodicalExecuter( function() (
//continutul va fi actualizat cu datele primite
//de pe server de la aleatoriu.php
new Ajax.Updater("numere", "aleatoriu.php",
{
//actiunea de inserare a continutului
//intr-un element <div>
insertion: function (obj; txt) {
$ ("numere") .innerHTML += txt + " "
} ,

// actiunea de finalizare a actualizarii
onComplete: function (request)
contor++
// informam utilizatorul cate actualizari
// s-au efectuat
$ ("mesaj") .innerHTML ="Actualizarea cu numarul " + contor
}
}
}, 7); // o periodicitate de 7 sec.
}
} ;


Constructia $ ( ) este 0 prescurtare pentru getElementById ( ) . Com­ponenta de actualizare Ajax.Updater ( ) are asociate doua comporta­mente - unul referitor la inserarea de valori, celalalt la finalizarea unei actualizari. Codul va altera continutul paginii Web in care va rula scriptul. Periodicitatea este realizata cu ajutorul unui alt obiect Prototype: PeriodicalExecuter.
Documentul XHTML are urmatoarea structura (fisierul actualizator. js include tocmai codul precizat anterior):

<html>
<head>
<title>Actualizari periodice ale continutului</title>
<script src="/prototype.js"
type="text/javascript"></script>
<script src="/actualizator.js"
type="text/javascript"></script>
</head>
<body>
<p>Numerele generate, preluate de pe server:
<span id="numere"></span>
</p>
<div id="mesaj"></div>
</body>
</html>

Datele periodic actualizate vor fi furnizate de un program PHP. Inspectarea - e.g., cererea realizata, raspunsul primit, valorile timpilor de transfer etc. - se poate realiza tot prin intermediul extensiei Firebug