Capitolul III CSS
PAGE 162
Capitolul II Limbajul Java Script
Odat cu extinderea World Wide Web-ului au aprut i limbaje
specializate care pot contribui la ameliorarea funcionalitii i
aspectului documentelor, sau care uureaz realizarea scripturilor
CGI. Cele mai utilizate limbaje aparin familiei limbajelor
interpretate, caracterizate prin faptul c aplicaiile realizate sunt
direct executabile (nu necesit compilare). Din punct de vedere al
locului n care sunt executate, aplicaiile sunt destinate fie
serverului de web (scrise n PHP, Perl sau Java) fie calculatorului
pe care ruleaz aplicaia de navigare (scrise n JavaScript sau
Java).
2.1. Prezentare general a limbajului JavaScript
JavaScript este un limbaj interpretat, avnd o sintax apropiat de
cea a limbajului C. Comenzile JavaScript sunt incluse n pagina web,
mpreun cu textul i marcajele care formeaz coninutul acesteia i sunt
interpretate de ctre browser. Nu toate programele de navigare sunt
capabile s execute comenzile JavaScript. Comenzile fiind executate
n cadrul aplicaiei de navigare, din JavaScript nu pot fi accesate
alte resurse ale calculatorului (de exemplu discul magnetic) ceea
ce confer securitate scripturilor.
JavaScript este un limbaj bazat pe obiecte. El nu este gndit s
permit crearea de clase noi sau extinderea proprietilor celor
existente, ca n cazul limbajelor destinate programrii obiectuale
(C++, Java, C# etc.) ci doar s permit apelul metodelor specifice
unor obiecte predefinite (create n momentul descrcrii paginii web
sau aparinnd aplicaiei de navigare).
JavaScript este un limbaj n care programarea este orientat pe
evenimente. O funcie scris n JavaScript poate fi lansat n execuie n
mod automat, la apariia evenimentului creia i este asociat.
Evenimentele care pot declana executarea unei funcii sunt: apsarea
butonului mouse-ului sau deplasarea cursorului acestuia, ncrcarea
paginii, apsarea unui buton al unui formular, etc.
JavaScript nu este Java. Limbajul Java, dezvoltat de Sun
Microsystems este un limbaj pentru programare orientat pe obiecte
(care permite construcia de clase) destinat realizrii de aplicaii
de sine stttoare sau realizrii de miniaplicaii (appleturi)
integrate n pagini web. JavaScript a fost dezvoltat de Netscape
pentru a mbunti funciile paginilor web. I s-a dat numele
JavaScript, pentru a-i asigura o rapid cretere a popularitii.
Pentru un studiu mai aprofundat al limbajului, o documentaie
extins poate fi gsit la adresele http://www.w3schools.com/js/
sau
http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/Exemplu:
Se consider urmtoarea pagin Web:
azi = new Date()
document.write("Astazi suntem in "+azi.getDate())
document.write("."+azi.getMonth())
document.write("
")
La ncrcarea paginii n Internet Explorer, fereastra acestuia ar
putea conine un ir de caractere ca i cel din figura 2.1.
Fig. 2.1 Pagin generat de o secven de cod JavaScriptSe observ c
n seciunea , ntre marcajele i au fost incluse cteva linii scrise n
JavaScript care realizeaz crearea unui obiect de tip Date denumit
azi i apoi afieaz un ir de caractere compus din mai multe pri, dou
dintre acestea fiind create prin apelul metodelor getDate() i
getMonth(). Dei seciunea nu conine nimic, n pagin se va afia un
text ca urmare a executrii funciilor write() definite pentru
obiectul document. Obiectul document este definit implicit i
reprezint coninutul ferestrei aplicaiei de navigare.
Marcajul poate fi plasat n seciunea , n seciunea sau n ambele.
Dac figureaz n seciunea , toate liniile de cod care pot fi
executate se vor executa naintea afirii coninutului paginii,
cuprins n seciunea . Eventualele funcii asociate evenimentelor vor
fi doar ncrcate, executarea lor realizndu-se doar la apariia
evenimentelor crora le sunt asociate.
Dac marcajele apar n seciunea ele permit o creare dinamic a unei
pri din pagin. Exemplul prezentat poate fi ameliorat plasnd codul
care afieaz data n seciunea :
Exemplu de script in JavaScript
In continuare asi vrea sa va sugerez ce ati mai putea face
azi,
azi = new Date()
document.write(azi.getDate()+"-"+azi.getMonth()+"-"+azi.getYear())
, dac aveti ceva timp liber. Dac nu, nseamn c
document.write(azi.getDate()+"-"+azi.getMonth()+"-"+azi.getYear())
este o zi grea pentru Dv.
Fig. 2.2 Fiier care conine secvene de cod JavaScript n seciunea
BODYn exemplul urmtor se genereaz automat o pagin web, coninnd o
tabel a factorialilor numerelor cuprinse ntre 1 si 9.
fact = 1;
document.write("Factoriali");
for(i = 1; i < 10; i++) {
fact=fact*i;
document.write(i + "! = " + fact);
document.write("
");
}
2.2. Reguli privind scrierea codului JavaScript
JavaScript face distincie ntre literele mari i mici. Cuvintele
cheie ale limbajului se scriu cu litere mici:
breakfalseinthisvoid
continuefornewtruewhile
deletefunctionnulltypeofwith
elseifreturnvar
Pe o linie pot fi scrise mai multe instruciuni, caracterul ';'
fiind folosit pentru a indica sfritul fiecrei instruciuni. Dac
instruciunile sunt scrise pe linii separate, caracterul separator
';' poate fi omis.
JavaScript recunoate comentarii scrise ca n C (cuprinse ntre /*
*/) dar i comentariile n linie, scrise ca i n C++, folosind //.
2.3. Elemente de baz ale limbajului
2.3.1. Literali
n JavaScript literalii se scriu folosind conveniile din C:
Exemple : 123 -423 12.456 -2.7e-12 -0176 0x12AF
Dac un numr ncepe cu 0, este scris n baza 8 iar dac ncepe cu 0x
sau 0X, este scris n baza 16. Numerele reale sunt reprezentate
implicit n dubl precizie.
irurile de caractere pot fi cuprinse ntre ghilimele sau ntre
apostroafe. Apostroful existent ntr-un ir cuprins ntre ghilimele
este interpretat ca atare.
n JavaScript exist doi literali folosii pentru valori logice:
false i true . Exemplu :
if ((conti == true) || (x b)?a:b;
relaionali < > = == != (se aplic i irurilor de
caractere);
logici && (i) || (sau) ! (not).
n JavaScript '+' este operator aritmetic (adunare), dac
operanzii sunt numere, sau operator de concatenare, dac operatorii
sunt iruri de caractere. Regulile de folosire a operatorilor pentru
iruri de caractere se pot deduce din urmtoarele exemple:
12 + 2 // Adunare. Rezultat: 14."12" + "2" // Concatenare.
Rezultat: "122"."1" + 2 // Concatenare. 2 este convertit n irul
"2". Rezultat: "12".11 < 3 // Comparare numeric. Rezultat:
false."11" < "(3("// Comparare ntre iruri. Rezultat: true."11"
< 3 // Comparare numeric; "11" este convertit n 11. Rezultat:
false.Operatorul "+" poate fi folosit cu iruri de caractere i cu
numere, dar rezultatul depinde de ordinea scrierii operanzilor
:
p = 2 + 3 + "pisici mici";
// p = "5 pisici mici"t = "numarul de pui: " + 1 + 2; // t =
"numarul de pui: 12"Prin convenie, dac primul operand al expresiei
este ir de caractere, JavaScript convertete restul literalilor n
iruri de caractere.
2.3.5. Instruciuni
Ca i alte limbaje de programare, JavaScript posed un set complet
de instruciuni care permit programarea unui algoritm.
if
Instruciunea if permite selectarea instruciunii cu care se va
continua execuia, n funcie de valoarea de adevr a unei expresii.
Exemple:
if (condiie)
{
instruiuni pentru condiie=true} else
{
instruiuni pentru condiie=false}
sau
if (condiie)
{
instruciuni pentru condiie=true}
Instruciuni de ciclare :
whileSintaxa instruciunii while este:
while (condiie)
{
instruciuni
}
Corpul ciclului este executat atta timp ct condiia este adevrat.
Exemplu :
var i = 1;
while (i 0) {
document.write(obj);
} else {
document.write("Pai n-ati scris nimic!");
}
}
Formular
n exemplul dat obj.length furnizeaz lungimea irului de caractere
obj.
O alt posibilitate de a utiliza ntr-un script un control de tip
text este aceea de a afia valori pe ecran fr a deschide o nou
fereastr (ca n cazul folosirii metodei document.write ntr-un script
plasat n HEAD).
Exemplu:
function scriu() {
var obj=formular.tx.value
if(obj.length > 0) {
document.write(obj);
} else {
formular.tx.value="Numele Dv."
}
}
Formular
Dac se terge irul i se acioneaz butonul, irul "Numele Dv." este
rescris n cmpul controlului tx.
i. Obiectul de tip textarea
Coninutul unui obiect de tip textarea poate fi testat i generat
dinamic, la fel ca i coninutul unui control de tip text.
Aplicaii (5)a. Pentru afiarea unei pagini web simple, folosii pe
rnd :marcaje HTML n fiierul c:\postuniv\farajs.html
Pagina Web
Pagina simpla
Aceasta pagina contine doar marcaje HTML !
JavaScript n seciunea HEAD n fiierul c:\postuniv\js1.html
Pagina Web
document.write("");
document.write("Pagina simpla");
document.write("");
document.write("Aceasta pagina contine JavaScript! in
HEAD");
document.write("");
JavaScript n seciunea BODY n fiierul c:\postuniv\js2.html
Pagina Web
document.write("Pagina simpla");
document.write("");
document.write("Aceasta pagina contine JavaScript! in
BODY");
HTML i JavaScipt, alternativ n fiierul c:\postuniv\js3.html
Pagina Web
document.write("");
document.write("Pagina simpla");
document.write("Aceasta pagina contine atat HTML cat si
JavaScript!");
b. Realizai o pagin web care s afieze data curent. Creai fiierul
c:\postuniv\data.html
azi=new Date()
document.write("Afisarea datei")
document.write("Printr-un JavaScript scris in sectiunea
HEAD
");
document.write("
")
document.write("Astazi suntem in "+azi.getDate());
document.write("."+(azi.getMonth()+1));
/* Lunile se numeroteaza de la 0 la 11 */
document.write("."+azi.getYear());
document.write("
");
c. Creai n directorul c:\promo fiierul curs_valutar.html, afiat
din util.html, care reprezint un convertor valutar. n textul din
prima celul a tabelului inserai data curent (cu font Arial, rou,
bold).
Fig. 2.7 Modelul fiierului curs_valutar.htmlhtml>
valuta
function calcul() {
text1=formular.valoare1.value;
text2=formular.valoare2.value;
a=parseInt(text1);
b=parseInt(text2);
rezultat=b/a;
document.formular.cat.value=rezultat;
}
Convertor valutar
Introduceti cursul pentru data
de azi=new Date() document.write(azi.getDate());
document.write("."+(azi.getMonth()+1));
document.write("."+azi.getYear());
Valoarea pe care doriti s-o transformati
Rezultat:
d. Ameliorai pagina creat anterior adugndu-i un script care
afieaz ora n mod dinamic. Scriptul se va descrca de pe situl colii
(www.infoap.utcluj.ro).
Fig. 2.8 Ceas realizat printr-un JavaScripte. Modificai fiierul
plaza.html adugndu-i un script care s permit vizitatorului sitului
s vad imagini din hotelul descris. Pentru aceasta inserai o funcie
care se execut la apasarea unui buton.
Fig. 2.9 Fiierul plaza.html modificat prin adugarea unui
JavaScriptModificri n seciunea body:
Puteti vedea imagini din hotel
Scriptul din seciunea HEAD: - Varianta 1
var v=1;
function schimba()
{
if(v==1) {
document.hotel.src="imag1.jpg";
v=2;
}
else if(v==2) {
document.hotel.src="imag2.jpg";
v=3;
}
else if(v==3) {
document.hotel.src="imag3.jpg";
v=4;
}
else {
document.hotel.src="h2_mare.jpg";
v=1;
{
}
Scriptul din seciunea HEAD: - Varianta 2
function initial()
{ i=0; }
function schimba()
{
i=i+1;
if (i>3) i=0;
nume="imag"+ i+".jpg";
document.hotel.src=nume;
}
Marcajul conine i atributul onload
Observaii:
fiierul imag0.jpg reprezint o copie a fiierului h2_mare.jpg
numele fiierului imagine care va fi afiat, este parametrizat
Munc independent:
Completai scriptul de la punctul anterior (varianta 2) astfel
nct s afieze nc trei imagini (imag4.jpg, imag5.jpg, imag6.jpg)
Descrcai un script, la alegere, din Internet i inserai-ll ntr-o
pagin a sitului.
2.5. Evenimente
Principalul motiv pentru care se integreaz ntr-o pagin web
secvene de cod scrise n JavaScript, este adugarea de funcii
suplimentare care sunt executate local, n cadrul aplicaiei folosite
la navigare. Aceste funcii sunt declanate fie la ncrcarea paginii,
fie la apariia unui eveniment generat ca urmare a unei aciuni a
operatorului. Elementele asupra crora se poate aciona sunt
controale aparinnd formularelor (butoane, casete de validare,
controale de tip text etc.) sau legturi (realizate folosind
marcajul ).
Pentru a putea asocia unor elemente din pagin funcii care sunt
declanate la interacionarea cu elementele respective, marcajelor
corespunztoare li se adug atribute suplimentare.
Exemple:
Atributul suplimentar onClick permite scrierea n continuare a
unei instruciuni sau mai multor instruciuni n JavaScript. Dac sunt
scrise mai multe comenzi, acestea vor fi separate prin ";". irul
care conine secvena de cod nu poate conine caracterul NL (la
scriere nu se va apsa tasta Enter). Dac numrul de comenzi este mai
mare, acestea vor fi organizate sub forma unei funcii plasate n
seciunea , ntre marcaje .
Unele marcaje pot avea mai multe atribute care declaneaz funcii
de tratare a evenimentelor. De exemplu un marcaj de tip TEXT poate
conine atributele suplimentare onChange, onFocus i onBlur care
declaneaz aciuni la modificarea coninutului, la intrarea cursorului
n spaiul controlului sau la ieirea cursorului din spaiul
controlului.
ObiectAtribute pentru interceptarea evenimentelor
AreaonClickonMouseOutonMouseOver
ButtononBluronClickonFocus
CheckboxonBluronClickonFocus
FileUploadonBluronChangeonFocus
FormonResetonSubmit
FrameonLoadonUnload
ImageonAbortonErroronLoad
LinkonClickonMouseOutonMouseOver
RadioonBluronClickonFocus
ResetonBluronClickonFocus
SelectonBluronChangeonFocus
SubmitonBluronClickonFocus
TextonBluronChangeonFocus
TextareaonBluronChangeonFocus
WindowonBluronErroronFocusonLoadonUnload
Evenimentele care nu necesit o aciune din partea utilizatorului
pentru a fi declanate se numesc evenimente sistem.
a. OnLoadEvenimentul sistem Load este activat dup ncrcarea
complet a unei pagini. Aciunea asociat acestui eveniment, care
trebuie realizat, este precizat n marcajul sau .Exemplu :
Funcia salut() va fi plasat ntre marcaje ... , n seciunea .b.
OnUnloadEvenimentul sistem Unload se declaneaz la prsirea paginii
creia i este asociat i este necesar pentru a nchide eventualele
ferestre care s-au deschis ca urmare a executrii unor scripturi din
sit i, eventual, pentru a transmite un ultim mesaj vizitatorului.
Aciunile asociate se precizeaz ca i n cazul evenimentului Load, n
marcajul sau .c. OnFocusEvenimentul Focus se declaneaz atunci cnd
obiectul cruia i este asociat dobndete controlul. Poate fi asociat
obiectelor de tip text, textarea, password i select.
d. OnBlurEvenimentul Blur este generat atunci cnd obiectul cruia
i este asociat pierde controlul.
e. OnChangeEvenimentul Change este generat atunci cnd obiectul
cruia i este asociat a fost modificat i apoi a pierdut controlul.
Poate fi asociat obiectelor de tip text, textarea, password i
select.
f. OnSelectOnSelect se folosete pentru obiecte de tip text,
textarea i password i funcia asociat este executat atunci cnd
utilizatorul selecteaz pri din text. Exemplu de folosire :
g. OnSubmitOnSubmit se folosete pentru marcaje pentru a declana
o aciune care de cele mai multe ori verific valorile introduse,
naintea trimiterii lor spre server. Dac funcia apelat n cazul
apsrii butonului tip submit returneaz valoarea false, datele
coninute n formular nu vor mai fi expediate.
2.6. Evenimente mouse
Evenimentele mouse sunt legate de aciunea mouse-ului asupra
obiectelor crora li s-a asociat o aciune condiionat de apariia unui
eveniment de acest tip.
a. OnClickObiectele care accept evenimente Click sunt referinele
(), casetele de validare i butoanele.
b. OnMouseOverEvenimentul OnMouseOver se declaneaz atunci cnd
cursorul mouse-ului ajunge pe obiectul cruia i este ataat. Aciunea
executat poate realiza afiarea unor explicaii legate de funciile
controlului respectiv. Exemplu:
function explain1() { window.alert("Link to the White House.");
}
function explain2 () { window.alert("Link to my Home Page.");
}
function explain3 () { window.alert("Link to yahoo.com."); }
Exemple pentru OnMouseOver
My Home Page
White House
yahoo.com
Interceptnd acelai eveniment, la trecerea cursorului mouse-ului
peste o imagine, aceasta se poate modifica prin ncrcarea altei
imagini n locul celei afiate n mod normal. Aceast tehnic permite de
exemplu schimbarea culorii unui buton naintea acionrii sale
efective.
Exemplu:
La trecerea cursorului mouse-ului peste imaginea coninut n
fiierul "piramida.jpg" aceasta este nlocuit cu imaginea coninut n
fiierul "ramses.jpg". Deplasarea cursorului n afara zonei imaginii
provoac revenirea la imaginea iniial. Selectarea cu mouse-ul a
imaginii ("ramses.jpg") provoac desigur afiarea paginii web
"egipt.html".
Observaie : atributul OnMouseOver necesit att folosirea
ghilimelelor ct i a apostrofului.
2.7. Clase i proprieti
2.7.1. Clasa Array
ncepnd cu JavaScript 1.1, n scripturi pot fi definite i
utilizate iruri (Array). Crearea unui obiect aparinnd clasei Array
numit "judet" n care vor fi adugate cteva nume de judee se
realizeaz ca n exemplul urmtor:
judet = new Array()
judet[0] = "Alba"
judet[1] = "Bacau"
judet[2] = "Braila"
Crearea unei casete combinate folosind elementele din irul
"judet" se poate realiza folosind codul urmtor :
document.write("");
document.write("(selectati judetul)");
for(i=0;i
