:
„bigred {font- size: :24pt;
color:red). :
-.littlegreen {font size: ‘Lope:
“color:green) .
i CESTI LED
function changeStyle() {
.className = “bigred";
document.all.tags("P").item(1)
.
Welcome!
cena de Cod ©
Click ee fe.
ee accentuate Nel come
8 is
Modificareai in amănunt a stilului pe
function changeStyle() ți
document.all.tags("P"). item(0
Style. fontSize = "pipi
style.color="red”;
style, fontSize = “LOpE
‘Style: color =" green
unui document. Exista peste 60 atribute de
stil, care permit controlul in detaliu al
aspectului paginii Web.
Toate tagurile HTML traditionale au
devenit obiecte DHTML. Dezvoltatorii de
DHTML trebuie sa scrie mici programe
JavaScript sau VBScript, care să permită
interactivitatea utilizatorului final (end
user) prin manipularea metodelor şi pro-
prietăților metodelor. O mare varietate de
evenimente permit selectarea dintr-o gamă
larga a opțiunii pentru declanşarea codului
care răspunde acţiunilor utilizatorului sau
evenimentelor de pe Web.
Fiecare tag DHIML are şi un corespon-
dent script. De exemplu, tagul P cores-
punde elementului P (un obiect script). Pro-
prietatea parentElement, care este
read-only, atagului P va da obiectul ime-
diat superior din ierarhia documentului -
permite introducerea unui bloc HTML
intr-un tag P. A doua metoda: InsertAdja-
cent Text va permite actualizarea continu-
tului unui paragraf, dar nu a codului
HTML.
Stiluri Dinamice
Multi dezvoltatori vor fi atrasi de DHTML
pentru ca are posibilitatea de a schimba
stilurile in functie de evenimentele de la uti-
lizator sau sistem. O cale simplă pentru a
face acest lucru este folosirea proprietăţii
className. Această proprietate se aplică
blocurilor de elemente ca și P și corespunde
atributului CLASS. Pentru a schimba stilu-
rile trebuie doar să setaţi proprietatea
className cu valoarea noului stil.
Pentru a revizui o proprietate, codul
dumneavoastră trebuie să conțină o referin-
ță spre obiectul a cărui proprietate este.
NOIEMBRIE 1997 BYTE România 29
Fundamente/Programare
HTML Dinamic pe înţelesul tuturor, Parteal
Tagul all vine să vă ușureze treaba. Puteţi
folosi tagul a] 1 pentru a marca toate ele-
mentele similare din document. Apoi fo-
losiţi metoda î tem a tagului pentru a vă
referi la instanțe specifice unui element din
document. Apoi, setați proprietatea
className a instanţei ca fiind egală cu
noua descriere de stil.
Listingul „Schimbare de stil elegantă“
din caseta „Galeria de cod“ (pagina ante-
rioară) prezintă aceste principii. Docu-
mentul HTML conţine două descrieri de
diat după încărcarea unei pagini. Dum-
neavoastră trebuie să scrieţi codurile care
să răspundă acestor evenimente. Codul de
tratare al evenimentelor poate fi scris în
European Computer Manufacturers Asso-
ciation (ECMA) JavaScript sau în Micro-
soft VBScript.
Evenimentele DHTML pot avansa de
la un nivel inferior spre unul superior in
ierarhia documentului. Acest lucru permite
evenimentelor unui obiect de la un nivel
ierarhic inferior să urce în ierarhia docu-
trolează în mod selectiv propagarea eveni-
mentelor în funcție de poziţia de pe rând
(în pagina HTML) unde se apasă cu
mouse-ul. Un clic pe linia de text, în afara
blocului B, va permite ascensiunea eveni-
mentelor în ierarhia documentului până la
nivelul BODY sau chiar mai departe. Rutina
de tratare a evenimentelor de la nivelul
BODY: setBodyStyeva modifica culoarea
celor două blocuri H1 din document.
Funcţia setBodyStyle prezintă câteva
tehnici script interesante. Mai întâi,
stil şi două blocuri paragraf. Blocul care
conţine textul „Welcome!“ are atributul
CLASS setat la valoarea ] i tt legreen, care
reprezintă o descriere de stil. Printr-un
clic în interiorul documentului se va gene-
ra un eveniment onC] î ck. Acesteveniment
va lansa funcţia JavaScript change
Style(). Aceasta folosește indecşii 0 $i 1
pentru a se referi la primul sau al doilea
paragraf. Funcţia channgeStyle setează pro-
prietatea className aparagrafelor la va-
loarea bigred respectiv littlegreen.
Segmentul de cod ,,Modificarea in ama-
nunta stilului“ din „Galeria de cod“ prezin-
tă o tehnică mai granulară pentru a obţine
acelaşi rezultat. Această versiune a funcției
changestyle() modifică proprietăţile
specifice ale obiectului style pentru un
paragraf. Când aveţi nevoie de un control
mai amănunţit decât cel permis de class -
Name, sau când doriţi să faceți nişte modi-
ficări speciale soluţia este folosirea proprie-
tatilor obiectului sty e.
Evenimente și Ascensiune
DHIML introduce un nou obiect: event,
care urmăreşte succesiunea evenimentelor.
Proprietăţile acestuia permit identificarea
elementului unde s-a produs evenimentul,
starea tastaturii, poziția mouse-ului și starea
butoanelor acestuia. De exemplu, eveni-
mentele onclick sau onmouseover reflec-
tă acţiunea cu mouse-ul relativ la tagurile
HTML, a utilizatorului final, iar eveni-
mentul on] oad altagului body apare ime-
30 BYTE România NOIEMBRIE 1997
Ascensiunea evenimentelor.
. HTML HEAD
cu aceasta secventa de cod, putem forta
executarea metodei repaint() a unui aplet.
Un exemplu simplu este realizarea unui
aplet care afişează valoarea unui contor, iar
valoarea să poată fi modificată folosind
butoane JavaScript:
import java.applet.*;
import java.awt.*;
public class count extends Applet
{
public int i;
public void init()
{
LiveConnect îmbină posibili-
tățile oferite de JavaScript, cu
cele oferite de Java.
i=0;
}
public void paint(Graphics g)
{
g.drawString("Contorul este "
053055
)
public void increment()
{
aţa
repaint();
)
public void decrement()
{
TRS
repaint();
}
)
iar documentul HTML este de forma:
In acest exemplu, apletul count.class este
inglobat in pagina HTML, sub numele ,,ap-
let“. Pentru incrementarea contorului, se
accesează direct variabila i, pentru
decrementare se apelează metoda decre-
ment() a apletului.
LiveConnect permite accesarea de către
un apleta variabilelor, funcțiilor JavaScript
din pagina. Pentru a.interactiona cu
JavaScript, un aplet va folosi clasele care
sunt furnizate de Netscape in fisierul
java_40. Principalele pachete din acest fisier
sunt:
* java
* sun
* netscape.applet
* netscape.net
* netscape.plugin
* netscape.javascript
Aceste pachete vin să extindă cele oferite
de JDK sau să le completeze pe cele cu
acelaşi nume din JDK (java, sun).
Astfel, un programator poate folosi
metoda init() a unui aplet pentru a stabili o
“legătură între aplet şi JavaScript:
public init() {
win=JSObject.getWindow(this);
apoi, poate folosi metoda mouseEnter
pentru a afișa un mesaj:
public boolean mouseEnter(Event e, int
Xe abe
win.eval("alert(\"Hello
world\") #")s
return true;
Astfel, java detecteaza intrarea mouse-u-
lui pe suprafata apletului si apeleaza meto-
da mouseEnter. De remarcat ca, pentru a
permite unui aplet, sau plug-in sa acceseze
variabilele si functiile JavaScript din pagi-
nă, trebuie să apară cuvântul cheie
MYSCRIPT în interiorul tagului