"Nimic nu este dat, totul este construit." (Bachelard) k4q16qn
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.
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.
2. Caracterizare
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:
Figura 1. 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.
Tabelul 1. 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.
3. 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:
<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">.
3.1 Utilizarea obiectelor navigatorului
Implementarea Netscape ofera o multitudine de obiecte predefinite, denumite
si obiecte-navigator (vezi figura 1.). 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:
Figura 2. Un document HTML si obiectele JavaScript asociate
Aceste obiecte au structura arborescenta urmatoare:
Figura 3. 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:
function vrmlScene() A 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 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 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.
3.2 HTML Dinamic si JavaScript
Odata cu generatia 4 a navigatoarelor exista posibilitatea de a dinamiza continutul
paginilor Web gratie tehnicilor specificatiei HTML Dinamic (DHTML), oferindu-se
suport avansat pentru foi de stiluri (CSS), pentru pozitionarea exacta a elementelor
si pentru incarcarea fonturilor de la distanta.
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>
Pozitionarea continutului
HTML Dinamic permite prin noul marcator <LAYER> 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 Web o ipostaza
cvasi-tridimensionala.
Exemplu
Vom defini cu ajutorul script-urilor JavaScript un strat identificat prin pictor1
si un strat pictor2 plasat cu 10 pixeli sub partea inferioara a primului strat.
<LAYER ID="pictor1">
<IMG WIDTH=100 HEIGHT=200 SRC="Dali.jpg">
<P>Salvador Dali
<P>1904-1989
</LAYER>
<LAYER ID="pictor2"
LEFT=&A"&"S;A window.document.pictor1.left S;
TOP=&A"&"S;Awindow.document.pictor1.top + document.pictor1.document.height + 10S;>
<IMG WIDTH=100 HEIGHT=100 SRC="Tuculescu.jpg">
<P>Ion Tuculescu
<P>1910-1962
</LAYER>
Stratele unui document pot fi accesate prin intermediul tabloului predefinit
layers. O parte din proprietatile unui obiect de tip Layer sint: document
(documentul cui apartine), 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().
4. 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).
5. Referinte bibliografice
M.Antar - "Writing a VRML Modeler in DHTML JavaScript", ViewSource,
Netscape Communications, jun.1999
S.koch - "JavaScript": https://www.dpunkt.de/javascript/
S.Koch - "Voodoo's Introduction to JavaScript", Mannheim University,
1997
D.Steinman - "The Dynamic Duo": https://www.dansteinman.com/dynduo/
A.Weiss - "JavaScript Tutorial for Programmers", jul.1998
* * * - "Client-Side JavaScript 1.3 Guide", Netscape Communications,
may 1999
* * * - "DevEdge": https://developer.netscape.com/library/documentation/index.html
* * * - "Dynamic HTML in Netscape Communicator", Netscape Communications,
aug.1997
* * * - "Netscape's Component Developer's Guide", Netscape Communications,
nov.1997
* * * - "VRML Forum": https://vrml.wired.com
