Inainte de aparitia limbajului JavaScript, chiar si cele mai simple pagini interactive necesitau interactiunea cu un program CGI dintr-un server. JavaScript a permis crearea de site-uri dinamice, în care interactiunea este tratata integral pe partea de client, fara a mai necesita trecerea pe server, dînd posibilitatea crearii de interactiuni între diversele elemente dintr-o pagina web. Totusi, programarea interactiva în JavaScript are cîteva limitari. Astfel, versiunile recente de de la Netscape si Microsoft pot schimba continutul paginii în mod dinamic, fara a reveni la server, datorita lui DHTML si a foilor de stil în cascada (CSS). Aceste standarde sunt însa în curs de stabilire, si deci sunt implementate doar partial. Astfel, pot aparea anumite limitari în ceea ce priveste versiunile de browser în care ruleaza scripturile JavaScript.
Realizarea paginilor interactive
In ciuda inconvenientelor enumerate mai sus, scripturile JavaScript pot fi utilizate în combinatie cu HTML pentru a crea pagini Web cu un mare grad de interactivitate. In principiu, exista la ora actuala o mare varietate de activitati pe care diversele categorii de scripturi le pot efectua:
Parte din aceste posibilitati au fost ilustrate deja ; în continuare vom prezenta alte exemple în acest sens. Astfel, un exemplu de efect vizual care poate fi obtinut printr-o cantitate relativ redusa de cod JavaScript în cadrul unei pagini HTML este urmatorul:
 |
<html>
<head>
<title>Efecte vizuale cu JavaScript</title>
<script language="JavaScript">
function change_col(i)
function change_col_back(i)
</script>
</head>
<body>
<table border="1" cellpadding="0"
cellspacing="1"
background="lblue028.jpg">
<tr>
<td id="td_1"
width="70" heigth="30" align="center"
valign="center"
onmouseover="javascript:change_col(1)"
onmouseout="javascript:change_col_back(1)">2222</td>
<td id="td_2"
width="70" heigth="30" align="center"
valign="center"
onmouseover="javascript:change_col(2)"
onmouseout="javascript:change_col_back(2)">2222</td>
<td id="td_3" width="70"
heigth="30" align="center" valign="center"
onmouseover="javascript:change_col(3)"
onmouseout="javascript:change_col_back(3)">3333</td>
<td id="td_4"
width="70" heigth="30" align="center"
valign="center"
onmouseover="javascript:change_col(4)"
onmouseout="javascript:change_col_back(4)">4444</td>
<td id="td_5"
width="70" heigth="30" align="center"
valign="center"
onmouseover="javascript:change_col(5)"
onmouseout="javascript:change_col_back(5)">5555</td>
</tr>
</table>
</body>
</html>
Un alt exemplu, care prezinta o pagina web realizata în scopul prezentarii produselor si serviciilor unei companii este ilustrat mai jos. Pagina foloseste numai JavaScript si HTML ; exemplul se doreste a fi ilustra capabilitatile limbajului JavaScript pentru realizare de pagini dinamice folosind numai prelucrare pe partea de client.
Se observa ca se folosesc cadre (frames): cadrul din stînga, pentru butoane, cadrul de sus pentru sigla companiei respectiv cadrul central pentru afisarea informatiilor solicitate pe baza selectiei butoanelor corespunzatoare.
Codul paginii de baza al acestei aplicatii, aflat în fisierul index_0.htm este urmatorul:
<html>
<head>
<title>Company name</title>
<head>
<script language="javascript">
lang="ro";
</script>
<frameset id="baseFrame" rows="120,*" cols="*"
framespacing="0"
frameborder="NO" border="0" >
<frame
src="includes/topframe.htm" name="topFrame"
scrolling="NO"
noresize >
<frameset id="subFrame"
rows="*" cols="152,*" framespacing="0\"
frameborder="NO" border="0">
<frame
src="includes/leftframe.htm" name="leftFrame"
scrolling="NO" noresize >
<frame
src="includes/languages/ro/mainframe.htm"
name="mainFrame" >
</frameset>
</frameset>
</head>
<body>
</body>
</html>
In scopul realizarii acestei pagini, fisierele care compun pagina sunt grupate într-o structura de directoare astfel:
Se observa ca pagina este generata static, practic JavaScript nu este utilizata decît pentru a seta în mod corespunzator variabila lang="ro"; aceasta variabila este utilizata pentru pastrarea limbii curente în care se afiseaza pagina, în acest caz implicit romana. In versiunea statica de mai sus, limba nu se poate schimba, decît intervenind la nivel de cod, ceea ce reduce în mod substantial generalitatea implementarii.
Din acest motiv, aceeasi pagina poate fi generata si în mod dinamic, folosind JavaScript, si anume metoda write a obiectului document. Elementele sunt aceleasi, aspectul paginii este identic, generarea paginii însa se realizeaza în mod dinamic (fisierul index.htm):
<html>
<head>
<title>Company name</title>
<script language="javascript">
function frame_init()
frame_init();
</script>
</head>
<body>
</body>
</html>
Astfel, functia frame_init() seteaza parametrul lang la valoarea dorita, si afiseaza în mod în mod dinamic pagina, furnizînd elementele HTML de afisat ca parametru al metodei document.write. Utilizarea acestei metode este esentiala în generarea dinamica a elementelor dintr-o pagina HTML. Intrucît metoda document.write primeste ca parametru un sir de caractere între ghilimele, ghilimelele care apar în interiorul sirului trebuie prefixate cu \ . De asemenea, concatenarea sirurilor de caractere se realizeaza cu +.
Avantajele unei astfel de abordari sunt evidente: se observa ca parametrul lang se utilizeaza pentru a stabili calea spre fisierul care trebuie afisat în cadrul central al paginii, functie de valoarea acestuia. Astfel, textul va aparea în limba stabilita în functie de valoarea parametrului lang.
Generarea în forma de mai sus a unei pagini are sens numai în masura în care continutul paginii se doreste sa fie modificat în mod dinamic. De exemplu, pentru fisierul topframe.htm codul este urmatorul:
<html>
<body vlink="#CCCCCC" alink="#CCCCCC"
link="#CCCCCC" leftmargin="0" topmargin="0"
rightmargin="0" bottommargin="0" marginwidth="0"
marginheight="0">
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr >
<td width="150"
height="120" ><img src="images/picture1.jpg"
width="150"
height="120" border="1"></a></td>
<td width="100%"
height="120" border="1">
<table border="0"
width="100%" height="120"
background="images/lblue028.jpg">
<tr>
<td width="100%"
height="60"></td>
</tr>
<tr>
<td width="100%"
height="24">
<img
src="images/picture2.jpg" width="100%"
height="24"></td>
</tr>
<tr>
<td width="100%"
height="100%"></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Se observa în acest caz ca avem de-a face cu HTML static întrucît continutul frame-ului de sus nu se modifica. S-a folosit însa în acest caz un tablou HTML; în cea de-a doua celula a acestuia a fost inclus un alt tablou, pentru o mai buna aliniere a elementelor afisate. Utilizarea tablourilor (împreuna cu subtablourile incluse în acest mod) ofera o maniera simpla de aliniere si aranjare a elementelor multiple care apar în paginile complexe.
O abordare asemanatoare a fost aleasa si în constructia fisierului leftframe.htm. Elementele acestuia sunt de asemenea organizate cu ajutorul unei structuri de tablou. Codul html al paginii este urmatorul:
<body vlink="#CCCCCC" alink="#CCCCCC" link="#CCCCCC" leftmargin="0"
topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0"
marginheight="0">
<table id="tab_mare" height="100%" border="0"
cellspacing="0"
cellpadding="0" background="images/lblue028.jpg">
<tr valign="top" >
<td colspan=3 >
<table id="tabel" width="100%" border="0" cellspacing="0"
cellpadding="0"
background="images/lblue028.jpg" > <tr>
<script
language="javascript">
putButtons();</script>
</tr>
<tr valign="top">
<td
width="150" height="100%"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Se observa ca afisarea butoanelor din cadrul paginii este realizata în mod dinamic, folosind functia JavaScript putButtons(). Daca acest apel este comentat (incercati!), atunci pagina apare în aceeasi forma, lipsind însa butoanele. Functia JavaScript care realizeaza afisarea butoanelor este urmatoarea:
function putButtons()
}
Se observa în cadrul acesteia utilizarea unui ciclu for pentru afisarea în mod repetat a cîte un buton. Imaginea asociata butoanelor este aceeasi, si se gaseste în subdirectorul images a directorului curent (images/buton1.gif); însa caracteristicile fiecarui buton afisat, adica textul de deasupra butonului si link-ul asociat sunt determinate prin intermediul functiei getItem(i) pentru fiecare buton i. Functia getItem(i) se bazeaza pe limba curenta precum si pe pozitia butonului pentru a genera corect textul aferent. Astfel, se creaza un tip obiect buttonItem si apoi se creaza doua tabele de obiecte texte_ro respectiv texte_en care pasteaza informatia atasata fiecarui buton, folosind obiectul predefinit Array:
function buttonItem(aCaption, aHref) //crearea tipului obiect buttonItem
texte_en=new Array(); //tablou texte limba engleza
texte_en[0]=new
buttonItem("Home","languages/en/about.htm");
texte_en[1]=new
buttonItem("Systems","languages/en/systems.htm");
texte_en[2]=new
buttonItem("Software","languages/en/software.htm");
texte_en[3]=new
buttonItem("Services","languages/en/services.htm");
texte_en[4]=new buttonItem("Contact","languages/en/contact.htm");
texte_ro=new Array(); //tablou texte limba romana
texte_ro[0]=new
buttonItem("Home","languages/ro/about.htm");
texte_ro[1]=new
buttonItem("Sisteme","languages/ro/systems.htm");
texte_ro[2]=new
buttonItem("Software","languages/ro/software.htm");
texte_ro[3]=new
buttonItem("Servicii","languages/ro/services.htm");
texte_ro[4]=new
buttonItem("Contact","languages/ro/contact.htm");
function getItem(n)
else
else
}
}
Referirea top.lang din cadrul functiei getItem se refera la variabila lang definita în fereastra de cel mai înalt nivel (top), în cazul nostru index.htm.
Din pacate, abordarea din index.htm este incompleta, întrucît nu permite schimbarea limbii din cadrul paginii. Pentru a realiza acest lucru, care sa permita sa beneficiem de flexibilitatea obtinuta pîna în acest moment, trebuie modificata aceasta varianta prin adaugarea de exemplu unui link suplimentar în acest scop. Varianta leftframe_1.htm realizeaza acest lucru prin modificarea liniei:
<td width="150" height="100%"></td>
cu
<td width="150" height="100%" align="center">
<a href="#" onClick="javascript:change_lang();"><h4>
<script language="javascript">put_lang();</script></a></h4></td>
In cadrul acesteia, s-a creat un link cu textul generat de functia put_lang(); de asemenea, functia change_lang() este asociata cu evenimentul onClick, avînd ca rezultat schimbarea limbii curente. Codul acestor functii este urmatorul:
function change_lang()
function put_lang()
Orice schimbare realizata în cadrul unei pagini HTML va fi vizibila numai dupa reîncarcarea paginii; în consecinta, ultima linie din cadrul functiei change_lang are ca efect reîncarcarea întregii pagini pentru ca modificarile realizate sa fie vizibile. Acest lucru se realizeaza folosind metoda reload() a obiectului location (top.document.location). Functia put_lang afiseaza un text diferit pe link-ul de schimbare a limbii, functie de limba curenta, introducînd în acest mod un nou element de dinamism în pagina.
Se observa ca în varianta index_1 a aplicatiei date utilizeaza un fisier cookie pentru pastrarea variabilei lang corespunzatoare limbii curente. In acest caz, numele variabilei cookie este fav_lang. Astfel, valoarea variabilei cookie fav_lang este utilizata în fisierul index_1.htm pentru a seta initial limba curenta (variabila lang):
var lang_cookie=GetCookie("fav_lang"); //cautarea variabilei cookie fav_lang
if (lang_cookie!=null)
//daca
exista stabileste valoarea variabilei lang la valoarea acesteia
lang=lang_cookie;
else
lang="en"; //nu exista, implicit "en"
Setarea variabilei cookie fav_lang se realizeaza de fiecare data cînd se schimba limba folosita; mai precis, în cadrul functiei change_lang din fisierul leftframe_1.htm:
top.SetCookieEZ("fav_lang",top.lang);
//functia SetCookieEZ din pagina de pe nivelul superior (top), variabila lang din aceeasî pagina
In concluzie, se pot observa din acest exemplu simplu cîteva tehnici utilizate pentru generarea de pagini dinamice pe partea de client. Se poate observa maniera în care JavaScript se îmbina cu HTML-ul pentru a asigura mai multa interactivitate paginilor web statice.
In general se spune ca un document este constient de date (data-aware) daca este asociat cu o sursa de date. Acest lucru permite ca documentul sa aiba permanent acces la datele respectivei surse de date. Crearea unui formulare care prezinta date într-o pagina Web se poate realiza folosind numai HTML; totusi, de cele mai multe ori interactivitatea necesara unui astfel de formular poate fi realizata utilizînd un limbaj de scriptare, de exemplu JavaScript. Un obiect specific de date este referit ca o inregistrare (record). HTML dispune de etichete caracteristice afisarii unor astfel de surse de date. Daca datele rezida pe calculatorul clientului (cazul unor date de dimensiuni reduse), o varianta simpla de a fi patrate o reprezinta crearea unui fisier text. Fiecare linie din cadrul fisierului identifica o înregistrare; prima linie reprezinta un antet care contine informatii de antet pentru sursa de date: numele cimpurilor si tipul acestora (pe care browser-ul îl utilizeaza ) pentru a prezenta datele respective).
Un exemplu de fisier text simplu pentru pastrarea informatiilor referitoare la studentii unei sectii este urmatorul (fisierul listastud.txt):
nume,prenume:INT,anul,grupa:INT
Ionescu,Florin,3,1733
Popescu,Ion,5,1753
Avramescu,Silviu,4,1742
Baciu,Dorin,2,1722
Popovici,Liviu,1,1712
Comanescu,Doina,3,1733
Popescu,Calin,5,1753
Avramescu,Liviu,4,1742
Baciu,Dana,2,1722
Popovici,Silvia,1,1712
Se observa în cadrul acestuia ca informatiile din cadrul unei înregistrari sunt separate prin virgula. Numele cîmpurilor este dat în antet: nume, prenume, anul si grupa pentru fiecare student.
Pentru a adauga constientizarea datelor unei pagini Web, se poate folosi o pereche de etichete <object> , cu toate atributele corespunzatoare, prin intermediul carora sa se precizeze informatii legate de sursa de date; în plus, va trebui utilizat un control ActiveX specific (care începînd cu versiunea 4.0 este livrat împreuna cu Internet Explorer ; daca nu, trebuie descarcat de pe Internet ) si care ofera proprietatea de constientizare a datelor unei pagini Web prin Internet. Atributul classid este utilizat în scopul specificarii controlului respectiv, astfel:
<object id="listastud"
//identificatorul sursei de date
classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
border="0"
width="0"height="0">
<param name="dataurl"
value="listastud.txt"> //fisierul cu
date
<param name="useheader"
value="true"> //cu header
</object>
Obiectul de mai sus trebuie inclus în cadrul sectiunii <body> a documentului, înainte de utilizarea datelor din sursa de date. Cu acesta se pot accesa datele din cadrul fisierului sursei de date, în acest caz fisierul liststud.txt. In rest, documentul mai contine doua functii JavaScript, forwClick() respectiv backClick() cu ajutorul carora, prin intermediul butoanelor > si < se realizeaza deplasarea înainte respectiv înapoi în cadrul fisierului. Amplasamentul elemenelor din pagina este realizat folosind tabele.
<html>
<head>
<title>Studenti</title>
</head>
<body>
<h2>Lista studentilor sectiei Calculatoare</h2>
<hr>
<p>Utilizati butoanele de mai jos pentru a vizualiza lista studentilor:
<table>
<tr>
<td align=right><input
type=button id=back value=" < "
onClick="backClick()"></td>
<td><input type=button
id=forw value=" > "
onClick="forwClick()"></td> //butoane inainte/inapoi
</tr>
</table>
<br>
<table border="0" align="left" cellpadding="0"
cellspacing="0" >
<tr>
<td align="right"
valign="top"><label for=nume>Nume: </label></td>
<td align="left"
valign="top" width="10"></td>
<td align="left"
valign="top"><input id=nume type=text
datasrc=#listastud datafld="nume"></td> //sursa date si cimpul nume
</tr>
<tr>
<td align="right"
valign="top"><label for=prenume>
Prenume: </label></td>
<td align="left"
valign="top" width="10"></td>
<td align="left"
valign="top"><input id=prenume type=text
datasrc=#listastud datafld="prenume"></td> //sursa date si cimpul prenume
</tr>
<tr>
<td align="right"
valign="top"><label for=prenume>
Anul: </label></td>
<td align="left"
valign="top" width="10"></td>
<td align="left"
valign="top"><input id=grupa type=text
datasrc=#listastud datafld="anul"></td> //sursa date si cimpul anul
</tr>
<tr>
<td align="right"
valign="top"><label for=prenume>
Grupa: </label></td>
<td align="left"
valign="top" width="10"></td>
<td align="left"
valign="top"><input id=grupa type=text
datasrc=#listastud datafld="grupa"></td> ////sursa date si cimpul grupa
</tr>
</table>
<script language="JavaScript">
function backClick() // inapoi
else alert("Primul
student!!");
}
function forwClick() //inainte
else alert("Ultimul
student!!");
}
</script>
</body>
</html>
O alta aplicatie utila în contextul paginilor dinamice constiente de date o reprezinta generarea dinamica a tabelelor. Generarea dinamica a tabelelor reprezinta o maniera extrem de des utilizata atunci cînd pagina lucreaza cu o sursa de date de lungime variabila. In acest caz, adaugarea/stergerea de inregistrari are ca efect expandarea în mod dinamic a tabelului pentru a rînduri în plus sau în minus functie de schimbarile din sursa de date. Acest lucru este ilustrat de exemplul urmator :
<html>
<head>
<title>Studenti</title>
</head>
<body>
<h2>Lista studentilor sectia Calculatoare</h2>
<h6><i>Click pe titlul coloanei pentru sortare (NU
prenume!)</i></h6>
<hr>
<object id="listastud" //obiectul de control al datelor (ActiveX)
classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
align="baseline"
border="0" width="0"height="0">
<param name="dataurl"
value="listastud.txt">
<param name="useheader"
value="true">
</object>
<table border="1" id="elemtbl" datasrc="#listastud"
cellpadding="3" cellspacing="3>
<thead>
<tr>
<td><b><u><div
id=nume onclick="javascript:NumeSort()">
Numele</div></u></b></td>
<td><b><u><div
id=prenume >Prenumele</div></u></b></td>
<td><b><u><div
id=anul onclick="javascript:AnulSort()">
Anul</div></u></b></td>
<td><b><u><div
id=grupa onclick="javascript:GrupaSort()">
Grupa</div></u></b></td>
</tr>
</thead>
<tr>
<td><div
datafld="nume"></div></td>
<td><div
datafld="prenume"></td>
<td><div
datafld="anul"></td>
<td><div
datafld="grupa"></td>
</tr>
</table>
<script
language="JavaScript">
function NumeSort()
function AnulSort()
function GrupaSort()
</script>
<hr>
</body>
</html>
Se observa ca tabloul are asociata o sursa de date datasrc="#listastud". Asocierea datelor se realizeaza într-o maniera similara cu cea de la exemplul anterior. Se observa utilizarea etichetelor <thead></thead> pentru definirea capului de tabel. De asemenea, cimpurile de date sunt referite folosindu-se proprietatea datafld sub forma datafld ="nume_cimp" In plus, datele din cadrul tabelului pot fi sortate dind click pe capul coloanei functie de care se doreste sa fie realizata sortarea. In acest scop se utilizeaza functiile JavaScript NumeSort(), GrupaSort, AnulSort().
De retinut faptul ca JavaScript nu are capacitatea de a realiza fisiere I/O si de a face apeluri catre sistemul de operare. Cu toate ca la prima vedere aceste par a fi slabiciuni ale limbajului, în realitate aceste restrictii sunt de fapt limitari ce au fost introduse în mod intentionat pentru lucru la nivelul clientului; în felul acesta se îmbunatateste securitatea limbajului.
Astfel, scripturile JavaScript la nivelul clientului, sunt securizate în raport cu marea majoritate a clientilor de pe web. De asemenea, portabilitatea ar putea fi o problema pentru JavaScript. Cele doua browsere larg utilizate (de la Netscape si de la Microsoft) au implementat versiuni ale limbajului usor diferite. Sunt diferente în modelul obiect document, în manevrarea sirurilor, si în modul în care un script comunica cu applet-urile java.
The European Computer Manufacturer's Association (ECMA) a aprobat recent o versiune standardizata a limbajului, ECMAScript, ce va fi folosita în versiunile urmatoare ale browser-elor.
Pîna la standardizarea completa a limbajului, este foarte important sa se testeze scripturile elaborate pe multiple browsere, cu diferite versiuni si pe diferite platforme. Aceasta problema de portabilitate nu se mai pune pentru anumite aplicatii Internet în care se pot controla browser-ul si platforma.
Totusi, cel mai important rol pentru JavaScript este îmbunatatirea pe care o aduce interfetei cu utilizatorul; aceasta se realizeaza prin asigurarea help-ului pentru utilizator, prin validarea form-urilor de intrare, prin calcularea rezultatelor form-urilor, prin manipularea imaginilor. JavaScript îmbunatateste HTML-ul prin interactivitate. Lucreaza la nivelul clientului, eliberând în felul acesta serverul.
Obiectele ferestre JavaScript pentru acces la browser prin modelul obiectului document îi asigura un control suplimentar prin interfata web. În particular, o scriptare buna poate îmbunatati în mod substantial experienta utilizatorului cu form-urile HTML.
Ca si dezavantaje ale utilizarii JavaScript sunt timpii aditionali necesari pentru a-l descarca, precum si nesiguranta de rulare pe toate browser-ele.
Anumite aplicatii Intranet sunt mai pretabile utilizarii capabilitatilor JavaScript decât Internetul; aceasta întrucât, în general, Intranet-ul limiteaza paleta browser-elor, a versiunilor si a platformelor necesare de suportat. Aceasta reduce problemele de portabilitate ale limbajului. De exemplu, o companie trebuie sa stie daca toate computerele sale ruleaza Netscape Navigator, si ce versiune anume. O alta companie poate avea toate computerele sale de tip Pentium ce ruleaza versiuniele 3.0 si 4.0 ale lui Internet Explorer. In aceste situatii se obtine avantaj maxim în utilizarea lui JavaScript la nivel de client, fara a avea probleme legate de incompatibilitatea browser-ului.
Informatii detaliate despre sintaxa completa a limbajului JavaScript si a obiectelor predefinite se gasesc la urmatoarele adrese (si nu numai):
https://www.javascriptkit.com/
https://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/
https://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/
|
