Limbajul JavaScript y8f13fb
Applet-uri si servlet-uri Java

--------------------------------------------------------------------------------

1. Limbajul JavaScript
1.1 Scurt istoric
Compania Netscape ofera odata cu navigatorul Netscape 2.0 un mediu complet, orientat obiect, destinat arhitectilor de pagini WWW fara multa experienta in programare. Acest mediu este JavaScript. Fermecat de tehnologia Java de la Sun, Mark Andreesen de la Netscape cumpara licenta Java si ofera un limbaj de tip script bazat pe aceasta, denumit LiveScript. Ulterior, in luna decembrie 1996, Sun si Netscape si-au unit eforturile in dezvoltarea a celui ce avea sa fie JavaScript, interpretat de Netscape Navigator. Prima specificatie a limbajului JavaScript apare odata cu lansarea navigatorului Netscape 2.0. In cadrul versiunilor 3 ale Netscape-ului sint oferite noi facilitati, astfel aparind JavaScript 1.1. Foarte rapid, JavaScript s-a bucurat de succes, in prezent fiind la versiunea 1.3, sprijinit de multe companii de software.

Microsoft ofera propria versiune JavaScript denumita JScript (versiunea curenta fiind 5.0) disponibila in cadrul navigatorului Internet Explorer, extensiile (mai mult sau mai putin controversate) ale acesteia fiind cele legate de accesarea sistemului de fisiere, de existenta dictionarilor de termeni si conlucrarea cu VBScript. De cele mai multe ori, programele JavaScript sint incompatibile cu cele JScript, proiectantii Web trebuind sa conceapa scripturi diferite, pentru a fi rulate pe ambele platforme: Netscape Navigator si Internet Explorer.

Limbajul JavaScript este destinat pentru folosirea exclusiva in cadrul paginilor Web, codul sursa fiind interpretat de catre navigator (client) la momentul incarcarii documentului HTML ce-l contine. Netscape permite, mai nou, executia si pe partea de server a script-urilor JavaScript.

Limbajul JavaScript a stat la baza conceperii modelului de standard ECMAScript, dezvoltat de Asociatia europeana a producatorilor de calculatoare (European Computer Manufacturers Association), aprobat in luna aprilie 1998. Pentru a intelege mai usor filosofia JavaScript, vom face mai intii o prezentare a standardului ECMA.

1.2 Standardul ECMA
ECMA Script este un limbaj orientat-obiect bazat pe tehnologii ca JavaScript (Netscape Communications) si JScript (Microsoft). Fiind un limbaj de tip script, este destinat sa manipuleze, sa automatizeze si sa integreze facilitatile oferite de un anumit sistem, in acest caz cele oferite de un navigator Web. ECMA Script poate oferi capabilitatile de baza pentru o varietate de medii Web, unele din facilitatile lui fiind similare altor limbaje de programare (cum ar fi Java sau Self).

Un obiect ECMA Script este privit ca o colectie neordonata de proprietati, fiecare proprietate avind zero ori mai multe atribute. Proprietatile pot contine fie alte obiecte, fie valori primitive sau metode. O valoare primitiva este element membru al unuia dintre tipurile fundamentale Undefined, Null, Boolean, Number si String. Un obiect este membru al tipului de baza Object, iar o metoda este o functie asociata unui obiect prin intermediul unei proprietati.

ECMA Script defineste o serie de obiecte predefinite: Global, Object, Function, Array, String, Boolean, Number, Math si Date. Se defineste un set de operatori predefiniti (care pot sa nu fie functii sau metode) similari celor din limbajul JavaScript.

Tipuri de baza
Tipurile de baza sint Undefined, Null, Boolean, String, Object, Reference, List si Completion.

O variabila care nu are asignata nici o valoare este de tip Undefined. Valorile tipurilor Reference, List si Completion sint utilizate doar ca rezultate intermediare in cadrul evaluarii expresiilor si nu pot fi stocate de proprietatile vizibile ale obiectelor. Pentru tipul Number s-au definit constantele speciale: NaN (Not a Number), +Infinity si -Infinity. De asemeni sint permise valorile +0 si -0 cu semnificatia din matematica.

Tipul obiect
Un obiect este compus din proprietati, fiecare proprietate avind un nume, o valoare si o multime de atribute asociate:

propriety ::= < name, value, attributes >
Atributele proprietatilor pot fi urmatoarele:

Atribut Descriere
ReadOnly Incercarile de modificare a proprietatii respective vor fi ignorate. In cazuri speciale, o proprietate avind atributul ReadOnly poate sa-si schimbe valorile.

DontEnum Proprietatea nu poate fi enumerata de o constructie for-in.

DontDelete Incercarile de a sterge proprietatea vor fi ignorate.

Internal Proprietatile declarate Internal nu poseda nume si pot fi accesate in mod direct.

Atributele proprietatilor unui obiect
Proprietatile si metodele interne nu sint vizibile in mod normal si numele lor le vom incadra intre aa si ii. Atunci cind un algoritm utilizeaza o proprietate interna a unui obiect si obiectul nu are implementata acea proprietate, va fi generata o eroare de executie.

Proprietatile vizibile vor putea fi consultate prin intermediul metodei get si vor putea fi asignate prin put.

Obiectele native ECMA Script poseda o proprietate interna numita aaPrototypeii, valoarea acesteia este fie null, fie un obiect, cu ajutorul ei fiind implementata mostenirea. Proprietatile obiectului aaPrototypeii sint vizibile ca proprietati ale obiectului mostenitor, putindu-se doar consulta (prin get) si nu altera (cu put).

Orice obiect trebuie sa implementeze urmatoarele:

proprietatea aaClassii

metodele aaGetii, aaPutii, aaHasProprietyii, aaDeleteii, aaDefaultValueii

Operatori
Operatorii ECMA Script sint similari operatorilor care apar si in limbajele Java si JavaScript, cu urmatoarele observatii:

operatorul % (modulo) poate avea ca operanzi nu doar numere intregi, cit si valori reale;

valoarea returnata de operatorii && (si logic) si || (sau logic) nu neaparat va fi de tip Boolean, fiind intotdeauna valoarea unuia dintre cei doi operanzi.

Instructiuni
Instructiunile limbajului ECMA Script sint:

instructiunea bloc de instructiuni AS

instructiunea vida ;

instructiunea de test if

instructiunile iterative while for for-in

instructiunile de control return continue break with

1.3 Caracterizare a limbajului JavaScript
Ca si celelalte limbaje de programare, in cadrul JavaScript pot fi definite variabile, de diverse tipuri scalare sau compuse, pot fi folosite instructiuni (de atribuire, de test, de ciclare, de control), pot fi utilizate obiecte, continind metode (functii) predefinite sau descrise de programator.

variabile

In JavaScript variabilele pot fi identificatori compusi din litere, cifre si semnul de subliniere (simbolul " _ "), scopul lor putind fi local sau global. Ca si C ori Java, limbajul este case-sensitive.

tipuri de date

Tipurile predefinite includ: numerele intregi (in baza 10, 8 sau 16) si rationale (scrise in notatie zecimala sau stiintifica), tipul boolean, sirurile de caractere, tipul Object, tipul Null si tipul Undefined. Similar limbajului ECMAScript, o variabila care nu are asociata nici o valoare este de tip Undefined (nedefinit). Nu se face verificarea stricta a tipurilor, asa cum se intimpla in Pascal.

operatori

JavaScript include operatorii uzuali aritmetici, relationali, logici, speciali (precum typeof ori operatorul conditional ?: familiar programatorilor in C), de manipulare a obiectelor. In JavaScript 1.2 se permite utilizarea expresiilor regulate.

instructiuni

Pot fi folosite instructiunile de atribuire, bloc, de test (if-else, switch), repetitive (for, do-while, while), de control (break, continue), de manipulare a obiectelor (for-in, with). Este permisa definirea functiilor de catre utilizator pentru utilizarea lor ulterioara in cadrul paginilor Web.

obiecte

Programatorii pot sa-si defineasca propriile lor obiecte, insa puterea limbajului consta in punerea la dispozitie a unei ierarhii de obiecte predefinite, respectind modelul obiect document (DOM) pe care il vom prezenta intr-unul dintre capitolele urmatoare. Aceasta ierarhie (prezenta in navigatorul Netscape) este ilustrata de figura de mai jos:

Ierarhia JavaScript din cadrul navigatorului Netscape
Fiecare obiect poate oferi un set de proprietati (membri de tip data) calificate prin constructia NumeObiect.NumeProprietate.

Un obiect JavaScript este de fapt un tablou. Aceasta ofera o alta posibilitate de a accesa proprietatile unui obiect, folosind numele lor ca indici de tablou: NumeObiecta"NumeProprietate"i.

Metodele se apeleaza ca si functiile, precedate insa de numele obiectului caruia ii apartin.

Crearea obiectelor
Un obiect poate fi creat folosind maniera directa de specificare a unei noi instante a unui obiect, prin operatorul new, ca in exemplul urmator:

Pictor = new Object();
Pictor.nume = "Salvador Dali";
Pictor.curent = "suprarealism";
Pictor.perioada = "1904-1989";

Atasarea unei metode noi obiectului se realizeaza foarte simplu:

Pictor.afiseaza = afiseaza;

Metoda Pictor.afiseaza va fi asignata functiei afiseaza() presupusa definita in prealabil.

Prototipul unui obiect
Exista cazuri in care se doreste crearea unui "prototip" (similar constructiei template din C++) pentru un anumit obiect, specificindu-se numai structura obiectului, instantierea sa realizindu-se ulterior. Pentru aceata, initial se creeaza o functie care defineste structura obiectului dorit, functie care va functiona ca un constructor. Urmeaza un exemplu (this refera obiectul curent):

function Pictor(nume, curent, perioada)
A this.nume = nume; this.curent = curent; this.perioada = perioada;
S
...
UnPictor = new Pictor("Salvador Dali", "suprarealism", "1904-1989");
AltPictor = new Pictor ("Ion Tuculescu", "expresionism", "1910-1962");

Aceasta abordare, prin prototipuri, difera de abordarea bazate pe clasa, din Java. De fapt, exista mai multe diferente esentiale intre limbajele Java si JavaScript, sintetizate in urmatorul tabel:

Java JavaScript
Clasa si instanta reprezinta entitati distincte. Toate obiectele sint instante.
O clasa se defineste printr-o constructie de clasa, iar instantierea se face prin intermediul unui constructor. Se definesc si se creaza multimi de obiecte prin functii de tip constructori.
Un obiect unic se poate crea cu ajutorul operatorului new. Un obiect unic se poate crea cu ajutorul operatorului new.
Ierarhia de clase se realizeaza prin constructii de subclase a unei clase. Ierarhia de clase se realizeaza asignind un obiect privit ca prototip asociat unei functii de tip constructor.
Proprietatile mostenite urmeaza traseul de definire a (sub)claselor in cadrul ierarhiei. Proprietatile mostenite urmeaza traseul de definire a prototipurilor.
O definitie de clasa specifica toate proprietatile tuturor instantelor unei clase, neputindu-se adauga dinamic la momentul executiei. Functia constructor si prototipul specifica o multime initiala de proprietati. Proprietatile pot fi adaugate/sterse dinamic la momentul rularii pentru obiecte individuale sau pentru toata multimea de obiecte.

Comparatie intre Java si JavaScript
Obiecte predefinite
Sint predefinite obiectele de baza Array, Boolean, Date, Function, Math, Number, RegExp, String.

Array permite folosirea tablourilor de date in cadrul programelor JavaScript. Crearea unui tablou se realizeaza prin operatorul new, astfel:

arrayObjectName = new Array(element0, element1, ..., elementN) sau arrayObjectName = new Array(arrayLength)
Se pun la dispozitie metode de manipulare a tablourilor de date ca: concat, join, pop, push, reverse, shift, slice, sort etc.

In JavaScript sint predefinite urmatoarele tablouri de date: anchors, applets, embeds, forms, images, layers, links apartinind obiectului document (vezi mai jos), elements apartinind obiectului Form, arguments apartinind obiectului Function, frames si history care apartin obiectului window si altele.

Boolean este un obiect logic.

Date se foloseste pentru manipularea datei calendaristice si a timpului, fiind predefinite o serie de metode utile pentru setarea, consultarea si modificarea datei, in mod similar limbajelor Java si ECMAScript. Urmatorul exemplu furnizeaza timpul curent sub forma de ceas digital:

function JSClock() A var time = new Date() // timpul curent var hour = time.getHours() // ora curenta var minute = time.getMinutes() // minutele curente var second = time.getSeconds() // secundele curente var temp = "" + ((hour > 12) ? hour - 12 : hour) temp += ((minute < 10) ? ":0" : ":") + minute temp += ((second < 10) ? ":0" : ":") + second temp += (hour >= 12) ? " P.M." : " A.M."
// Post-Meridian sau Ante-Meridian? return temp
S

Function specifica un sir JavaScript sa fie executat ca o functie. O instanta a acestui obiect se creeaza in modul urmator:

functionObjectName = new Function (aarg1, arg2, ... argni, functionBody)
Math permite efectuarea de calcule matematice de precizie, fiind predefinita o serie de constante si de functii utile (PI, abs, sin, cos, tan, acos, asin, atan, log, exp, min, max, pow, round, sqrt).

Number este un obiect definind constante numerice precum MIN_VALUE, MAX_VALUE, POSITIVE_INFINITY, NEGATIVE_INFINITY, NaN conform standardului ECMAScript.

RegExp este utilizat pentru manipularea expresiilor regulate.

String permite instantierea de siruri de caractere, furnizind si metode ca: anchor, link (pentru crearea ancorelor si legaturilor HTML), big, small, sup, sub, blink, bold, italics, fixed (pentru siruri de formatare a textelor HTML, similare marcatorilor <BIG> <SMALL> <SUP> <SUB> <BLINK> <B> <I> <TT> respectiv), concat, split, substr, slice, toLowerCase, toUpperCase etc.

evenimente

Una dintre caracteristicile interesante ale limbajului JavaScript este cea referitoare la evenimente. Evenimentele sint actiuni ce pot surveni in cadrul paginilor Web, in mod uzual in urma unor operatiuni executate de utilizator sau de navigator. La aparitia unui eveniment pot fi executate instructiuni JavaScript care astfel ofera posibilitatea de concepere a unor pagini Web dinamice.

Pentru fiecare eveniment care se doreste a fi tratat, trebuie specificata o bucata de cod ce va fi executata ori de cite ori acel eveniment ca apare:

<tag ... onNumeEveniment = "cod JavaScript">
Multimea de evenimente (onClick, onChange, onMouseOver, onMouseOut, onResive, onSubmit, onLoad, onUnload, onDragDrop, onKeyUp, onKeyDown, onKeyPress etc.) ce pot fi tratate este o submultime a evenimentelor specificate de modelul DOM, dar difera in functie de implementare.

1.4 Programe JavaScript in cadrul paginilor Web
Introducerea de cod sursa JavaScript in cadrul documentelor HTML se realizeaza prin intermediului marcatorului <SCRIPT>, putindu-se specifica prin atributul language versiunea JavaScript in care se scriu programele. Astfel, avem posibilitatea de a scrie parti alternative de functii JavaScript in functie de navigator sau de versiunea de JavaScript:

<script language="JavaScript"> if (navigator.userAgent.indexOf("4.0") != -1) jsVersion = "1.2"; else if (navigator.userAgent.indexOf("3.0") != -1) jsVersion = "1.1"; else jsVersion = "1.0";
</script>

Codul JavaScript poate fi stocat intr-un fisier extern .js si folosit in cadrul paginii prin constructia <script src="file.js">.

Utilizarea obiectelor navigatorului
Implementarea Netscape ofera o multitudine de obiecte predefinite, denumite si obiecte-navigator. Fiecare pagina Web poseda urmatoarele obiecte:

navigator contine proprietati care furnizeaza numele si versiunea navigatorului care proceseaza pagina Web, plus lista de module plug-in (extensii) ale acestuia.

window este obiectul aflat la nivelul cel mai inalt in ierarhia obiectelor disponibile. Proprietatile lui se aplica intregii ferestre in care se afiseaza continutul documentului. Pentru paginile avind cadre, fiecarui cadru ii corespunde un obiect window.

document poseda proprietatile bazate pe continutul documentului (titlu, fundal, legaturi, formulare etc.).

location se refera la localizarea paginii (pe baza URI-ului).

history contine proprietati reprezentind adresele Web precedente care au fost vizitate de utilizator.

Exemplu
Pentru pagina Web de mai jos se asociaza o serie de obiecte JavaScript:

Un document HTML si obiectele JavaScript asociate
Aceste obiecte au structura arborescenta urmatoare:

Structura obiectelor asociate unei pagini Web
In functie de continut, fiecare document poate avea asociate si alte obiecte.

Obiectul window
Obiectul window are predefinite metode utile precum: open (deschide o noua fereastra de navigare, putindu-se specifica marimea, localizarea etc.), close (inchide o fereastra de navigare), alert (afiseaza o fereastra de dialog continind un mesaj de alertare a utilizatorului), confirm (afiseaza o fereastra de confirmare prevazuta cu butoane OK si Cancel), prompt (afiseaza o fereastra de interogare), scrollto (efectueaza o operatiune de derulare a ferestrei). Proprietatea status poate contine un text ce va fi afisat pe linia de stare a ferestrei navigatorului.

Exemple

Pentru fiecare legatura in parte la trecerea cursorului mouse-ului peste zona senzitiva a unei imagini va fi afisat un text explicativ pe linia de stare:

<img src="Circles.jpg" width=500 height=500 border=0 usemap="#map" alt="Circles">

<map name="map">
<!-- Editor -->
<area shape="circle" coords="40,40,50" href="https://www.infoiasi.ro/Ibusaco" target="_new" onMouseOver="window.status='Initiatorul si editorul revistei'; return true">
<!-- Ultimul numar -->
<area shape="circle" coords="390,90,80" href="30/index.html" onMouseOver="window.status='Ultimul numar aparut'; return true">
<!-- Arhive -->
<area shape="circle" coords="160,150,80" href="archives/index.html" target="_new" onMouseOver="window.status='Arhivele numerelor vechi (.zip)'; return true">
<!-- Despre -->
<area shape="circle" coords="340,245,80" href="about/index.html" target="_new" onMouseOver="window.status='Despre Circles'; return true">
<!-- Contact -->
<area shape="circle" coords="405,385,80" href="mailto:busaco@infoiasi.ro?Subject=Circles" onMouseOver="window.status='Contact prin posta electronica'; return true">
</map>

In functie de plasarea mouse-ului linia de stare va afisa un anumit text.

Folosind metoda open se pot crea scene VRML "din zbor". Functia de mai jos deschide o fereastra care va incarca o lume 3D constind dintr-un cub de culoare verde (din pacate este dependenta de navigatorul utilizat):

function vrmlScene() A
// deschide o fereastra vrml = open("", "displayWindow",
"width = 500, height = 400,
// dimensiunea ferestrei status = yes, // linia de stare vizibila toolbar = no, // bara de unelte invizibila menubar = yes // bara de meniuri vizibila
");
// deschide documentul VRML ca tip MIME vrml.document.open("x-world/x-vrml"); vr = vrml.document;
// creaza o scena VRML versiunea 1 vr.writeln("#VRML V1.0 ascii");
// specificarea luminii vr.write("Separator A DirectionalLight A "); vr.write("direction 3 -1 -2.5 S ");
// directia de vizualizare vr.write("PerspectiveCamera A position -8.6 2.1 5.6 "); vr.write("orientation -0.1352 -0.9831 -0.1233 1.1417 "); vr.write("focalDistance 10.84 S ");
// cubul de culoare verde vr.write("Separator A Material A diffuseColor 0 1 0 S "); vr.write("Transform A translation
-2.4 .2 1 rotation 0 0.5 1 .9 S "); vr.write("Cube AS S S");
// inchide documentul - (nu fereastra!) vrml.document.close();
S

Obiectul document
Acest obiect este asociat fiecarei pagini Web. Metodele write si writeln genereaza cod HTML ce va fi inclus in cadrul documentului, astfel se poate modifica in mod dinamic o pagina Web.

Exemplu
Aceasta functie va afisa o bara orizontala de latime variabila:

function bar(widthPct) A document.write("<HR ALIGN='right' WIDTH=" + widthPct + "%>");
S

Apelind bar(65) va fi generat in pagina Web codul HTML <HR ALIGN=right WIDTH=65%>.

Obiectul Forms
Pentru fiecare formular prezent intr-o pagina Web va fi disponibil un obiect Forms. Elementele unui formular (butoane, comutatoare, liste de selectie etc. vor putea fi accesate prin tabloul elements. Astfel, primul element al primului formular va fi referit prin document.Formsa0i.elementsa0i.

Folosind aceasta facilitate, putem scrie o functie JavaScript care va redirecta browserul Web catre o alta pagina, prin intermediul unui meniu de navigare rapida. In antetul paginii, vom defini urmatoarea functie:

<script language="javascript">
<!-- pentru ascunderea codului la navigatoarele vechi function formHandler() A var URL = document.form.site.optionsadocument.form.site.selectedIndexi.value; if (URL!= "")
window.location.href = URL;
S
//-->
</script>

Aceasta functie va fi apelata de catre navigatorul Web la aparitia evenimentului onChange (vezi mai jos) in cadrul formularului continind lista de pagini pe care le poate incarca utilizatorul (asemenea abordare a fost folosita pentru navigarea facila prin paginile site-ului Facultatii de Informatica):

<form name="form" id="form">
<select name="site" size="1" onChange="formHandler()">
<option value="">Go to...</option>
<option value="structure.html">Structure</option>
<option value="admissions.html">Admissions</option>
<option value="departments.html">Departments</option>
<option value="plan.html">Curricula</option>
<option value="events.html">Events</option>
<option value="research.html">Research</option>
<option value="publications.html">Publications</option>
<option value="graduates.html">Graduates</option>
<option value="contact.html">Contact</option>
</select>
</form>

1.5 HTML Dinamic si JavaScript
Odata cu generatia 4 a principalelor navigatoare (Netscape Communicator si Internet Explorer) exista posibilitatea de a conferi paginilor Web un continut dinamic gratie tehnicilor descrise de specificatia DHTML (Dynamic HTML), oferindu-se, printre altele, suport pentru foi de stiluri (CSS), pentru pozitionarea exacta a elementelor HTML si pentru incarcarea fonturilor de la distanta.

DHTML consta de fapt dintr-o serie de facilitati oferite de navigatoarele actuale care permit conceperea de pagini Web dinamice. Din pacate, aceste facilitati sint dependente in mare masura de agentul-utilizator si de cele mai multe ori trebuiesc scrise variante specifice fiecarui navigator in parte. Tehnologia DHTML este implementata diferit in cadrul browserelor si in prezent se pare ca Internet Explorer ofera mai mult decit Netscape Communicator.

DHTML in Netscape 4 sau ulterior
HTML Dinamic in Netscape este prezent prin intermediul utilizarii tag-ului <layer>. Se permit, prin acest nou marcator, pozitionarea absoluta sau relativa a datelor intr-o pagina Web, folosind conceptul de strat (layer). Un strat poate fi facut invizibil, poate decupa continutul unui document sau poate fi suprapus peste alte strate, conferind paginilor WWW o ipostaza cvasi-tridimensionala.

Pozitionarea continutului
Exemplu
Vom defini cu ajutorul script-urilor JavaScript un strat identificat prin pictor1 si un strat pictor2 plasat cu 50 de pixeli sub partea inferioara a primului strat.

<layer id="pictor1" style="left:50;top;30">
<img width=180 height=135 src="Ernst.jpg">
<h5>Max Ernst (1891-1976)</h5>
</layer>

<layer id="pictor2" left=&A"&"S;A window.document.pictor1.left S; top=&A"&"S;Awindow.document.pictor1.top + document.pictor1.document.height + 50S;>
<img width=70 height=107 src="Dali.jpg">
<h5>Salvador Dali (1904-1989)</h5>
</layer>

Efectul codului de mai sus in Netscape Communicator poate fi vizualizat in figura urmatoare:

Stratele suprapuse asa cum pot fi vizualizate cu Netscape
Acelasi cod incarcat in Internet Explorer va avea urmatorul efect (se remarca faptul ca elementul <layer> este ignorat, nefiind inteles):

Stratele suprapuse asa cum pot fi vizualizate cu Internet Explorer
Atributele elementului <layer> sint sintetizate in urmatorul tabel:

Atribut Descriere id numele stratului, utilizat pentru specificarea unui strat particular left pozitia (pe coordonata 0x) a stratului top pozitia (pe coordonata 0y) a stratului
width latimea unui strat (in pixeli sau procente) height inaltimea unui strat (in pixeli sau procente) bgcolor culoarea de fundal a stratului background imaginea de fundal a stratului src documentul HTML extern care poate fi continut de un strat

Toate atributele unui strat pot fi atit accesate, cit si modificate de un program JavaScript.

Urmatorul exemplu muta un text dintr-o parte a alta a ferestrei:

<html>
<head><title>Strate in NS 4</title></head>
<body bgcolor="white" text="black">
<layer id="textlayer" width="200" height="50" bgcolor="#DDFFDD">
<h2 align="center">Salutari din Netscape...!</h2>
<hr size="4">
</layer>
<script language="JavaScript1.2">
// functia de mutare la stinga a stratului function move_back() A document.textlayer.left -= 5; if (document.textlayer.left < 5) setTimeout("move_ahead()", 50); else setTimeout("move_back()", 50);
S
// functia de mutare la dreapta a stratului function move_ahead() A document.textlayer.left += 5; if (document.textlayer.left < 400) setTimeout("move_ahead()", 50); else setTimeout("move_back()", 50);
S move_ahead();
</script>
</body>
</html>

Un instantaneu al executiei acestui cod este dat mai jos:

Executia scriptului de mutare a unui strat
Continutul dinamic al paginilor in Netscape 4 sau ulterior
Stratele sint tratate ca obiecte distincte, separate de celelalte obiecte ce compun un document HTML (vezi si capitolul despre DOM). Astfel, putem modifica in maniera dinamica un anumit strat.

Iata un exemplu care schimba, la fiecare 5 secunde, continutul stratului definit astfel:

<layer id="strat" width="100%" height="33"></layer>

Documentul inclus intr-un strat poate fi accesat in JavaScript prin contructia document.identificator_strat.document. Codul complet al paginii Web este urmatorul:

<html>
<head><title>Strate in NS 4 (partea a 2-a)</title></head>
<body bgcolor="white" text="black">
<layer id="strat" width="100%" height="30" bgcolor="lightblue">
</layer>
<script language="JavaScript1.2"> var continut = new Array(); // tabloul cu textele alternative continuta0i = "Bine ati venit"; continuta1i = "la cursul de"; continuta2i = "<b>Tehnologii Web</b>"; var index = 0; // indica textul ce va fi afisat

// functia de scriere alternativa a textelor function scrie() A document.strat.document.write(continutaindexi); document.strat.document.close(); if (index == 2) // urmatorul text din tablou index = 0; else index++; setTimeout("scrie()", 5000);
S
// activeaza functia la incarcarea paginii
window.onload = scrie;
</script>
</body>
</html>

Dupa cum se observa, se pot include si marcaje HTML in cadrul tabloului continind textele alternative. Efectele executiei scriptului prezentat mai sus sint ilustrate in continuare:

Vizualizarea alternativa a textelor
Stratele unui document pot fi accesate prin intermediul tabloului predefinit layers. Un strat particular este accesat, dupa cum am vazut, prin numele sau, stabilit de atributul id. O parte din proprietatile unui obiect de tip Layer sint: document (documentul pe care-l contine), name (identificatorul stratului), left, top (pozitia), zIndex (ordinea de afisare), visibility (vizibilitatea) etc.

Metodele predefinite sint cele specificind deplasarea stratului (moveBy, moveTo, moveToAbsolute. moveAbove, moveBelow), redimensionarea (resizeBy, resizeTo) sau incarcarea (load).

Ca la oricare obiect, se poate crea un nou strat prin constructia StratNou = new Layer().

Stratele pot fi manipulate si emulate si prin intermediul proprietatilor din CSS nivelul 2.

Foi de stiluri accesate prin JavaScript
Proprietatile tag-urilor HTML modificate conform specificatiilor CSS se pot altera folosind obiectele predefinite in JavaScript. Urmatoarele forme sint astfel echivalente, conducind la afisarea in verde a tuturor paragrafelor:

<style type="text/css">
P A color: green S
</style>

<style type="text/javascript"> tags.P.color = green
</style>

DHTML in Internet Explorer 4 sau ulterior
Implementarea DHTML in Internet Explorer se bazeaza in principal pe existenta noii proprietati style atasata fiecarui element HTML al unui document si pe o pleiada de alte obiecte care pot fi accesate via JScript.

De obicei, un strat din Netscape poate fi emulat prin intermediul tag-ului div caruia ii putem asocia un identificator unic:

<div id="identificator"></div>

Astfel, putem manipula proprietatile de stil ale acestuia prin constructia identificator.style. In Internet Explorer nu exista tabloul de obiecte Layers.

Cele mai importante proprietati de stil (inspirate din CSS) sint date in urmatorul tabel:

Proprietate Descriere backgroundColor culoarea de fundal a unui element backgroundImage imaginea de fundal a unui element color culoarea unui element cursor forma cursorului mouse-ului position tipul de pozitionare (valorile valide fiind absolute si relative) pixelWidth latimea care o va ocupa un element (in pixeli) pixelHeight inaltimea care o va ocupa un element (in pixeli) pixelLeft pozitia (pe coordonata Ox) a unui element pixelTop pozitia (pe coordonata Oy) a unui element

Folosind aceste proprietati putem modifica infatisarea oricarui element prezent intr-un document HTML. Proprietatile pot fi atit consultate, cit si modificate.

Iata un exemplu (unde utilizam tag-ul <span>) care schimba culoarea de fond si culoarea de afisare a unui text, atunci cind plasam cursorul mouse-ului deasupra lui:

<span id="text" onMouseover="text.style.color='green'; text.style.backgroundColor='yellow';text.style.cursor='help'" onMouseout="text.style.color='black'; text.style.backgroundColor='white';text.style.cursor='default'">

Stai peste mine!...
</span>

Folosind aceste proprietati, putem modifica dimensiunile unor imagini atunci cind intervin anumite evenimente sau la momente stabilite. Imaginile isi schimba dimensiunile la cerere, ceea ce numai in JavaScript nu se putea realiza fara a reincarca documentul:

<img id="logo" src="fcs-logo.jpg"
width="238" height="50" onMouseover="micsoreaza()" onMouseout="revine()">
<script language="JavaScript1.2">
// micsoreaza dimensiunile imaginii function micsoreaza() A logo.style.pixelWidth = 170; logo.style.pixelHeight = 33;
S
// revine la forma originala function revine() A logo.style.pixelWidth = 238; logo.style.pixelHeight = 50;
S
</script>

Executia acestui script poate fi urmarita in urmatoarele doua figuri:

Inainte de a plasa mouse-ul peste imagine

La plasarea mouse-ului deasupra imaginii
Continutul dinamic in Internet Explorer 4 si ulterior
Reluind exemplul de mutare a unui text pe ecran, in varianta Internet Explorer scriptul va fi cel de mai jos:

<div id="movedtext" style="position: relative; background: lightgreen">
Salutari din IE 5!
<hr>
</div>
<script language="JavaScript1.2">
// functia de mutare la stinga a elementului function move_back() A movedtext.style.pixelLeft -= 5; if (movedtext.style.pixelLeft < 10) setTimeout("move_ahead()", 50); else setTimeout("move_back()", 50);
S
// functia de mutare la dreapta a elementului function move_ahead() A movedtext.style.pixelLeft += 5; if (movedtext.style.pixelLeft < 400) setTimeout("move_ahead()", 50); else setTimeout("move_back()", 50);
S move_ahead();
</script>

Functiile move_ahead() si move_back pot transla orice element. Incercati, de exemplu, ca in loc de div sa inserati un tabel identificat tot prin movedtext.

Pentru exemplul referitor la alternarea unor siruri de caractere in fereastra navigatorului, scriptul care rezolva problema in Internet Explorer este urmatorul:

<div id="textul"></div>

<script language="JavaScript1.2"> var continut = new Array(); // tabloul cu textele alternative continuta0i = "Bine ati venit"; continuta1i = "la cursul de"; continuta2i = "<b>Tehnologii Web</b>"; var index = 0; // indica textul ce va fi afisat

// functia de scriere alternativa a textelor function scrie() A textul.innerHTML = continutaindexi; if (index == 2) // urmatorul text din tablou index = 0; else index++; setTimeout("scrie()", 5000);
S
// activeaza functia la incarcarea paginii
window.onload = scrie;
</script>

Aici am folosit proprietatea innerHTML care este asociata elementelor <span> si <div> si care identifica de fapt continutul acestora.

Scrierea de scripturi pentru orice tip de browser
Dupa cum am vazut in cele de mai sus, mijloacele de realizare a documentelor dinamice difera in functie de navigator utilizat. Daca in Netscape putem folosi stratele, in Internet Explorer avem la dispozitie diverse proprietati asociate in principal elementelor <span> si <div>.

In Netscape Communicator, un element <div> pozitionat la coordonate absolute se comporta aproape la fel ca un strat specificat prin <layer>. Astfel, utilizind in cadrul documentelor HTML constructia:

<div id="identificator" style="position: absolute">

vom obtine (aproape) aceleasi efecte indiferent de agentul-utilizator folosit. Mai ramine doar sa se identifice browserul in care va rula scriptul si in cazul Netscape sa se specifice elementul dinamic prin document.identificator, iar in cazul Internet Explorer prin identificator.

Din pacate, in Netscape comportamentul lui <div> nu este 100% compatibil cu <layer> si programele JavaScript pot cauza, pe neasteptate, blocarea sau terminarea executiei aplicatiei.

Identificarea navigatorului se poate realiza urmind "reteta" urmatoare (ideea este sa verificam existenta unor obiecte particulare, specifice fiecarui tip de navigator):

// este Netscape Communicator 4 sau ulterior daca suporta straturi ns4 = (document.layers) ? true : false

// este Internet Explorer 4 sau ulterior daca suporta proprietatea 'all' ie4 = (document.all) ? true : false

// verificam daca este Internet Explorer 5
// (IE 5 se da drept IE 4, pentru compatibilitate cu versiunile vechi) if (ie4)
A if (navigator.userAgent.indexOf('MSIE 5') > 0) ie5 = true; else ie5 = false;
S else
A ie5 = false;
S

O alta solutie este sa consultam metoda appVersion a obiectului predefinit navigator, executind pentru afisare metoda predefinita alert():

<form>
<input type="button" value="Afla versiunea" onclick="javascript:alert(navigator.appVersion)">
</form>

Verificarea existentei browserului Internet Explorer 5 poate fi realizata si prin comentariile conditionale if:

<!--aif IE 5i>
Sinteti in IE 5!
<!aendifi-->

<!aif ! IE 5i>
Nu sinteti in IE 5...
<!aendifi>

Astfel, pot fi afisate diverse informatii ori pot fi utilizate caracteristici particulare (e.g. tag-ul <marquee> sau proprietati DHTML) numai daca navigatorul este Internet Explorer 5 sau ulterior.

3.6 Citeva exemple de programe JavaScript
In mod uzual, programele JavaScript vor fi scrise intre <script> si </script>, definitiile de obiecte si de functii fiind incluse in antetul paginii Web.

Hello, world!

<p>Clasicul mesaj:</p>
<script> document.write("Hello, world!");
</script>

Inserarea de marcaje HTML cu JavaScript

<html>
<head>
<script>
// functie de trasare a unei linii orizontale function myline() A document.write("<hr align='center' width=75%>");
S
// functie de afisare titluri function myheading(type, header, message) A document.write("<h" + type + ">" + header + "</h" + type + "><p>" + message);
S
</script>
</head>
<body>
<script> myline(); myheading(2, "JavaScript", "Hello, world!");
</script>
</body>
</html>

Recursivitate in JavaScript

<html>
<head>
<script> function factorial(n) A // calculam factorialul if ((n == 0) || (n == 1)) return 1; else A fact = n * factorial(n - 1); return fact;
S
S
</script>
</head>

<body>
<script>
// se afiseaza factorialul numerelor de la 0 la 9 for (i = 0; i < 10; i++) A document.write("factorial de " + i + " este egal cu ", factorial(i)); document.write("<br>");
S
</script>
</body>
</html>

Interactivitate cu utilizatorul

<head>
<script>
// calculeaza aria unui cerc function area(obiect) A obiect.suprafatacerc.value =
3.1415 * obiect.razacerc.value * obiect.razacerc.value;
S
</script>
</head>

<body>
<form name="calculcerc">

<p>Raza cercului:
<input type=text name=razacerc size=25>
<input type=button name=buton value="Calculeaza!" onclick="area(this.form)">
<p>
Suprafata: <input type=text name=suprafatacerc size=30>
</p>

</form>
</body>

Incercati acest exemplu:

Raza cercului:

Suprafata:

Evaluarea expresiilor cu eval()

<head>
<script> function calcul(obiect) A obiect.rezultat.value = eval(obiect.expr.value);
S
</script>
</head>

<body>
<form name="evaldinamic">
<p>
Expresia dorita (introduceti numai valori numerice):
<input type=text name=expr size=40>
<input type=button name=buton value="Calculeaza!" onclick="calcul(this.form)">

<p>
Rezultatul este: <input type=text name=rezultat size=20>
</form>
</body>

Experimentati acest exemplu (de exemplu, introduceti (1+1)-(2*3)*3 sau -1/0):

Expresia dorita (introduceti numai valori numerice):

Rezultatul este:

Modificarea culorilor de fundal

In acest exemplu se foloseste facilitatea limbajului de a realiza temporizari prin intermediul functiei predefinite settimeout():

<head>
<script language="javascript"> var color= new array(16); // aloca un obiect array colora 1i = "ff"; // continind codurile de culori colora 2i = "ee"; colora 3i = "dd"; colora 4i = "cc"; colora 5i = "bb"; colora 6i = "aa"; colora 7i = "99"; colora 8i = "88"; colora 9i = "77"; colora10i = "66"; colora11i = "55"; colora12i = "44"; colora13i = "33"; colora14i = "22"; colora15i = "11"; colora16i = "00";

function fadein(where) A if (where >= 1) A
// seteaza culoare de fundal document.bgcolor="#" + colorawherei +"0000";
where -= 1; settimeout("fadein("+where+")", 15);
S else A settimeout('fadeout(1)', 15);
S
S function fadeout(where) A if (where <=16) A
// seteaza culoarea de fundal document.bgcolor="#" + colorawherei +"0000";
where += 1; settimeout("fadeout("+where+")", 15);
S else A settimeout("fadein(16)",15);
S
S
</script>
<body onload="fadein(16)">
<p>hello...</p>
</body>

Un exemplu gresit de folosire a metodei write()

Atunci cind apelam metoda write(), ea deschide si sterge documentul, daca acest document nu exista in cadrul procesului de deschidere si procesare atunci cind este apelata write(). Urmatorul exemplu ilustreaza un script care intentioneaza sa afiseze timpul curent o data la fiecare minut, dar esueaza dupa prima rulare deoarece se sterge pe el insusi:

<HTML>
<HEAD>
<SCRIPT> function singOut() A var theMoment = new Date(); var theHour = theMoment.getHours(); var theMinute = theMoment.getMinutes(); var theDisplacement = (theMoment.getTimezoneOffset() / 60); theHour -= theDisplacement; if (theHour > 23) A theHour -= 24
S document.write(theHour + " hours, " + theMinute + " minutes, Coordinated Universal Time.");
window.setTimeout("singOut()", 60000);
S
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT> singOut();
</SCRIPT>
</BODY>
</HTML>

Dupa prima apelare a functiei singOut() daca incercam sa reincarcam documentul vom obtine un mesaj de eroare. Pentru a vedea despre ce este vorba putem scrie javascript: in bara de adrese a navigatorului Netscape pentru a apela consola JavaScript sau sa apasam icoana documentului in bara de stare a navigatorului Internet Explorer.

Consola JavaScript pentru afisarea erorilor din cadrul scripturilor (in Netscape Communicator 4.7x)

Semnalarea erorilor in Internet Explorer 5.x
Daca utilizam metoda alert() in locul lui write() pentru a afisa date, atunci scriptul de mai sus ruleaza corect:

window.alert(theHour + " hours, " + theMinute + " minutes, Coordinated Universal Time.");
window.setTimeout("singOut()", 60000);

Schimbarea unei imagini atunci cind mouse-ul trece deasupra ei

Functiile de mai jos, facind parte din proiectul AIpaedia, au fost concepute de absolventul Ovidiu Gheorghies:

function LiveButton(src1, src2, destination, x, y, z) A
// 'src1', 'src2' sint sursele (URL-urile) a doua imagini ce vor fi
// interschimbate atunci cind mouse-ul va trece peste ele
// imaginile vor fi afisate la coordonatele absolute (x, y) cu z-index = z
// se va crea si o legatura la un document aflat la adresa 'destination' this.mouseOver = LiveButton_mouseOver; // initializeaza metodele obiectului this.mouseOut = LiveButton_mouseOut;

this.src1 = src1; // stocheaza numele imaginilor ce vor alterna this.src2 = src2; this.x = x; // si pozitia absoluta a lor this.y = y;

this.images = new Array(2); // memoreaza imaginile in vectorul 'images' this.imagesa0i = new Image(); this.imagesa0i.src = src1; this.imagesa1i = new Image(); this.imagesa1i.src = src2;

this.layerIndex = document.layers.length;
// se utilizeaza un strat pentru pozitionarea absoluta a imaginilor document.write('<LAYER left=' + x + ' top=' + y + 'z-index=' + z + '>');

this.imageIndex = document.layersathis.layerIndexi.document.images.length;
// ne bazam pe evenimentele onMouseOver si onMouseOut document.write(' <A HREF= "' + destination + '" ' +
'onMouseOver = "document.layersa' + this.layerIndex + 'i.document.imagesa' + this.imageIndex + 'i.listener.mouseOver(); return true;"' +
'onMouseOut = "document.layersa' + this.layerIndex + 'i.document.imagesa' + this.imageIndex + 'i.listener.mouseOut(); return true;"' +
'>' );
// se afiseaza imaginea document.write('<IMG SRC="' + src1 + '" BORDER=0>'); document.write(' </A>');

document.write('</LAYER>');

this.image = document.layersathis.layerIndexi.document.imagesathis.imageIndexi; document.layersathis.layerIndexi.document.imagesathis.imageIndexi.listener = this;
S

/* functie apelata atunci cind mouse-ul e deasupra imaginii */ function LiveButton_mouseOver() A this.image.src = this.src2; // modifica imaginea ce va fi afisata
S

/* functie apelata atunci cind mouse-ul iese */ function LiveButton_mouseOut() A this.image.src = this.src1; // modifica imaginea din nou
S

Pentru utilizare efectiva, putem include intr-un document HTML o declaratie JavaScript de genul:

var btclick = LiveButton("ButtonOff.gif", "ButtonOn.gif", "click-me.html", 300, 90, 2);

O enciclopedia in domeniul inteligentei artificiale: AIpaedia
Din pacate, codul de mai sus nu este portabil, fiind rulabil numai sub navigatorul Netscape.

1.7 Concluzii
JavaScript este o alternativa la limbajul Java in ceea ce priveste conceperea de pagini Web cu continut dinamic, dar nu poate fi folosit decit in contextul unui anumit navigator, coexistind cu documentele HTML. JavaScript poate fi utilizat pentru emularea ierarhiei de obiecte a modelului DOM.

Utilizarea cea mai spectaculoasa a stratelor definite de DHTML JavaScript este animatia paginilor WWW, programatorii avind posibilitatea de a proiecta si implementa diverse prezentari multimedia (insa nu atit de flexibile precum cele scrise in SMIL).

2. Applet-uri si servlet-uri Java
2.1 Scurt istoric al limbajului Java
Foarte tinar, limbajul Java a fost proiectat, impreuna cu mediul lui de dezvoltare si de executie, pentru dezvoltarea de aplicatii performante destinate aparatelor electronice de larg consum (portabile, distribuite, lucrind in timp real), ulterior influientind semnificativ Internetul. Firma Sun, care s-a concentrat in proiectarea acestui nou limbaj, a pornit initial la drum cu limbajul C, dar din cauza complexitatii ridicate a inceput sa dezvolte un descendent mai flexibil, mai facil, mai portabil. Creatorul limbajului a fost James Gostling, de asemeni autor al binecunoscutului program de editare emacs din mediile UNIX si al sistemului de ferestre NeWS. Desi proiectul, denumit initial Oak de la copacul din fata biroului parintelui sau, a debutat in 1990, specificatia noului limbaj s-a publicat abia in anul 1995 la conferinta SunWorld din San Francisco. Descoperindu-se ca numele limbajului era deja utilizat, Oak s-a transformat in Java, devenind deliciul programatorilor iubitori de cafenele si de exotice arome. Din 1995 si pina in prezent, lumea Java traieste intr-o continua agitatie, aparind alte si alte inovatii si modificari ale limbajului, noi trasaturi si medii de dezvoltare, alaturi de JDK (Java Development Kit) pus la dispozitie de compania Sun: Visual Java (Microsoft), Visual Cafe for Java (Symantec), Visual Age for Java (IBM), SuperCede for Java (Asymetrix) etc.

O parte din proiectantii de pagini Web au ramas reticienti la noul limbaj, obiectind fie complexitatea suficient de ridicata, fie faptul ca nu oferea toate facilitatile prezente in C++ din care se tragea. Astfel, Netscape ofera un mediu orientat-obiect, inglobat in navigatorul propriu, acest mediu fiind JavaScript, pe care l-am prezentat in sectiunea precedenta.

Aceasta sectiune nu se doreste a fi o prezentare exhaustiva a limbajului Java, pentru mai multe amanunte putindu-se consulta cursul electronic disponibil la urmatoarea adresa Web: https://www.infoiasi.ro/Istefan/java/index.html, intocmit de dl.Stefan Andrei.

2.2 Caracterizare a limbajului
Trasaturile importante ale limbajului sint urmatoarele:

simplitatea

Java incearca sa ramina un limbaj usor de utilizat chiar si de catre programatorii neprofesionisti, fiind indepartate aspecte derutante ca supraincarcarea operatorilor si mostenirea multipla. De asemeni, lipseste adresarea prin intermediul pointerilor.

portabilitatea

Limbajul Java este independent de masina pe care lucreaza (suport pentru portabilitate si independenta hardware). In loc sa genereze cod nativ pentru o platforma particulara, compilatorul va genera o secventa de instructiuni ale unei masini virtuale Java (Java Virtual Machine - JVM), executia aplicatiilor fiind interpretata. Astfel, compilatorul Java nu traduce Java in limbaj masina, ci intr-un limbaj pseudo-masina denumit cod binar (byte code) Java. Codul binar este limbajul masina pentru calculatorul Java imaginar. Pentru a se putea rula cod binar Java pe un calculator particular, trebuie sa se instaleze masina virtuala Java pe acel calculator. Anumite JVM-uri pot traduce codul binar in limbaj masina imediat, fiind numite compilatoare Just-In-Time (JIT). De asemeni, sint dezvoltate procesoare noi pentru a implementa JVM direct in hardware, pentru a nu mai exista penalizari de perfomanta.

Navigatoarele Web actuale poseda implementate JVM-uri cu ajutorul carora pot rula asa-numitele applet-uri Java, programe Java care sint apelate din cadrul paginilor WWW.

orientare-obiect

In Java se pot crea clase de obiecte si instante ale lor, se pot incapsula informatiile, suportindu-se mostenirea simpla etc. Java insa nu ofera mosteniri multiple, suplinite de o facilitate denumita interfata care permite definirea unui anumit comportament pentru o clasa de obiecte, altul decit cel specificat de clasa de baza.

distribuirea

Java este un limbaj distribuit, avind implementate biblioteci pentru lucrul in retea (suport la nivel inalt pentru socket-uri si RMI - Remote Method Invocation). Exista posibilitatea de a concepe aplicatii care lucreaza cu mai multe fire de executie (thread-uri); exista desigur primitive de sincronizare, independente de (ori bazate pe) sistemul de operare (Unix, OS/2, Windows NT ofera suporta pentru fire de executie multiple).

Setul de caractere al limbajului este Unicode (pe 16 biti), mai flexibil decit setul ASCII (pe 8 biti). Aceasta facilitate ofera si posibilitatea de internationalizare a codului.

Tipurile primitive sint urmatoarele:

Tip Valori Cuvint cheie boolean true, false boolean caracter cod Unicode char
intreg octet 8 biti byte scurt 16 biti short propriu-zis 32 biti int lung 64 biti long real flotant 32 biti float dublu 64 biti double

Tipurile primitive in limbajul Java
Tipurile referinta sint folosite pentru a referi un obiect din interiorul altui obiect:

referinta catre o clasa

referinta catre o interfata

referinta catre un tablou

Desigur, operatorii sint similari celor din C si nu vom mai insista asupra prezentarii lor. Exceptie fac operatorii de concatenare si asignare de siruri care sint cei naturali (+ si =), in limbajul C/C++ fiind implementati ca functii standard de biblioteca (strcat() si, respectiv, strcmp()).

Instructiuni

blocuri de instructiuni delimitate intre A si S

declaratii de variabile locale

atribuirea

instructiuni conditionale: if, switch

instructiuni de ciclare: while, do, for

instructiuni de salt: break, continue

instructiuni de retur: return, throw

instructiuni de protectie si de sincronizare: try, catch, finally, syncronized

Clase

Puterea limbajului Java rezida in faptul ca se ofera o serie de clase predefinite, grupate, sau incapsulate, in pachete, din care utilizatorul poate deriva propriile sale clase, mostenind cele de baza. Pachetele pot avea nume ierarhice, urmind structura de directoare in care sint stocate clasele compilate.

Astfel, in distributia Java 1.1.6, sint puse la dispozitie urmatoarele pachete, continind peste 450 de clase si interfete:

java.applet java.awt.datatransfer java.awt.event java.awt java.awt.image java.beans java.io java.lang java.lang.reflect java.math java.net

java.rmi.dgc java.rmi java.rmi.registry java.rmi.server java.security.acl java.security java.security.interfaces java.sql java.text java.util java.util.zip

Pachetele de clase Java 1.1.6
2.3 Scrierea de applet-uri Java
Asa cum am vazut mai sus, applet-urile Java sint mici aplicatii Java care sint apelate dintr-un document HTML, fiind incarcate in momentul accesarii paginii Web de pe server si executate (interpretate) pe masina clientului. Fiecare applet are rezervata o fereastra prin care comunica cu utilizatorul, definita de marcatorul <applet>.

Sa presupunem ca dorim sa scriem un applet care sa afiseze mesajul Hello, world! in pagina Web:

// importa pachetele AWT (Abstract Window Toolkit) si Applet import java.awt.Graphics; import java.applet.Applet;

public class HelloWorldApplet extends java.applet.Applet
A // mostenitor private String str; public void init() // metoda de initializare
A str = getParameter("msg");// memoreaza parametrul if (str == null) A // daca nu exista, se ia unul implicit str = "Hello, world!";
S resize(150, 100); // aloca zona de desenare
S

public void paint(Graphics gr) // scrie un sir de caractere
A // la coordonatele specificate gr.drawString(str, 50, 50);
S
S

Pentru a vedea efectiv rezultatele rularii applet-ului, scriem o pagina minimala care va apela applet-ul de mai sus. In prealabil, applet-ul va trebui compilat cu un compilator Java (i.e. javac) care va genera un fisier byte cod Java cu extensia .class.

<html>
<head>
<title>Hello world!</title>
</head>
<body>
<p>Un mesaj:
<applet code="HelloWorldApplet.class" width=150 height=150>
</applet>
</body>
</html>

Applet-ul definit mai sus poate accepta si parametri (sirul de afisat) care trebuie specificati de tag-ul <param>. De exemplu, in loc de "Hello, world!" putem specifica "Hello, Faculty of Computer Science!" incluzind dupa <applet> si:

<param name="msg" value="Hello, Faculty of Computer Science!">
Executia unui applet este marcata de o serie de evenimente generate de catre navigator. Cind acesta intilneste <applet>, va porni incarcarea (folosind tot protocolul HTTP) codului necesar rularii applet-ului, cod aflat pe server si care va fi executat pe calculatorul client, odata ce a fost incarcat complet. Dupa incarcare, applet-ul este apelat pentru initializare (pregatirea parametrilor si obtinerea de resurse sistem). Dupa aceasta etapa, navigatorul trimite catre applet o comanda de pornire si applet-ul intrat in functiune va interactiona cu utilizatorul.

Interactiunea clasica server-client Web si interactiunea prin intermediul unui applet
incarcat de pe serverul java.sun.com
Un applet ruleaza atita vreme cit navigatorul este activ. La schimbarea paginii, applet-urile din vechea pagina nu dispar, ci primesc o comanda de suspendare (pe care pot s-o ignore).

Avantajul folosirii applet-urilor rezida in posibilitatea de a crea pagini Web dinamice sau care sa se modifice in functie de preferintele si interactiunea utilizatorului, de a partaja diferite applet-uri utile la nivel mondial. Iata un exemplu in care un applet, implementind functiile unui program de calcul tabelar (spreadsheet) poate fi rulat de mai multe navigatoare, pe diverse platforme, aflate la diverse adrese Internet:

Un applet folosit in mai multe pagini Web procesate de diverse navigatoare
2.4 Servlet-uri Java
Inainte de a prezenta servlet-urile, trebuie amintit mediul de utilitare JavaServer Toolkit (JST), bazat pe JDK, care ofera urmatoarele facilitati:

un cadru de lucru cu reteaua si cu firele de executie suportind protocoalele UDP si TCP;

administrare de la distanta prin Web;

controlul accesului pe baza de identitati;

suport pentru servlet-uri Java;

suport pentru protocolul SSL (Secure Socket Layer) utilizat pentru autentificare si confidentialitate;

securitate a serverului pentru module incarcate dinamic de pe retea.

JST ofera pachete pentru:

infrastructura serviciilor: se ofera implementari ale algoritmilor multi-fire de executie si de management al conexiunii;

administrare bazata pe Web: se ofera o serie de clase applet care faciliteaza generarea de interfete standard de administrare a serviciilor (applet-urile vor fi incarcate folosind HTTP si utilizeaza protocolul POST pentru a contacta servlet-uri ce manipuleaza entitatile reale aflate pe server);

functionalitate a protocolului de transfer hipertext HTTP: sint suportate specificatiile HTTP/1.0 care pot fi extinse folosind servlet-uri;

compilarea paginilor Web: posibilitatea de includere de cod Java in paginile HTML statice si apoi sa se compileze aceste pagini, rezultind servlet-uri Java pentru a crea un continut multimedia dinamic;

servlet-uri

utilitare: sint oferite unelte pentru urmarirea cererilor si a erorilor, pentru managementul memoriei, pentru generarea de alarme etc.

Daca applet-urile erau aplicatii Java incarcate in cadrul paginilor Web, rulind pe calculatorul client, servlet-urile se vor executa pe server, reprezentind o solutie de rezolvare a problemelor de comunicare in retea pe partea de server. Servlet-urile pot fi privite ca obiecte conformindu-se unei interfete standard, instalate pe un server bazat pe Java.

Ca exemplu de utilizare se poate mentiona generarea de documente HTML dinamice.

Avantajele folosirii servlet-urilor sint urmatoarele:

sint mai rapide si mai sigure decit script-urile CGI;

folosesc o interfata de programare standardizata (Servlet API);

mostenesc avantajele limbajului Java (e.g. portabilitatea);

se pot usor configura prin intermediul utilitarelor JST;

pot fi inlantuite (un servlet poate apela unul sau mai multe servlet-uri, in mod secvential);

sint apelate dinamic din cadrul paginilor Web prin folosirea unor etichete speciale.

Biblioteca de dezvoltare a aplicatiilor JavaServer asigura independenta de protocol, poate fi extinsa (mostenindu-se functionalitatea claselor de baza care pot fi dezvoltate ulterior de programatori) si este simpla. De asemeni, exista posibilitatea de a fi utilizate o serie de servlet-uri interne (predefinite), cum ar fi: SSInclude Servlet, File Servlet, Invoker Servlet, Admin Servlet, Cgi Servlet, Imagemap Servlet.

Componentele interfetei de programare a serverului Java
2.5 Dezvoltarea aplicatiilor Java
In cadrul mediului de dezvoltare a aplicatiilor Java JDK (Java Development Kit), firma Sun ofera o serie de unelte software utile, dintre care mentionam:

javac

Compilator Java pentru a genera cod binar Java.

java

Interpretor Java pentru a rula codul binar produs de javac.

jre

Interpretor Java folosit de utilizatorii finali pentru executia programelor Java (mai simplu decit aplicatia java).

jdb

Depanator simbolic Java, foarte asemanator cu depanatorul standard dbx din mediile UNIX.

javadoc

Generator de documentatie HTML pentru codul sursa Java.

appletviewer

Vizualizator de applet-uri, fara a necesita prezenta unui navigator Web.

native2ascii

Convertor de fisiere scrise in cod non-Unicode Latin-1 in fisiere Unicode Latin-1.

jar

Arhivator de fisiere .class, imagini si sunet intr-o singura arhiva Java (JAR) pentru a micsora timpul de transfer (se asigura astfel o unica tranzactie HTTP pentru a aduce de pe retea toate fisierele necesare rularii applet-urilor).

2.6 Prezent si viitor
In ciuda