Documente Academic
Documente Profesional
Documente Cultură
3. Spatiile libere - JavaScript ignora spatiile libere, tab-urile si liniile libere care
apar n instructiuni, acestea sunt utile pentru a face codul mai bine structurat si
usor de citit. Recunoaste doar spatiile care apar n string-uri (sirurile de
caractere). Exemplu: "var1 = 2 ;" este la fel cu "var1=2;".
4. Ghilimelele - Ghilimelele simple ('') si duble ("") sunt folosite pentru a delimita
sirurile de caractere (string). (Exemplu: "Invat JavaScript" sau 'Invat JavaScript').
\b - backspace
\f - indica o pagina noua
\n - linie noua
\r - indica un retur de car
\t - indica o apasare a tastei TAB
\\ - caracter backslash
\' - indica un apostrof (ghilimele simple)
\" - indica ghilimele duble
o
- De exemplu, daca dorim sa afisam un text,
folosind document.write(), iar acel text trebuie sa contina ghilimele si
caracter backslash "\", si anume textul (Curs "JavaScript" \ MarPlo.net),
pentru a nu "deruta" scriptul in interpretarea codului, deoarece
ghilimelele si backslash fac parte din sintaxa, adaugam \ in fata acestor
caractere din interiorul sirului. Comanda de afisare a sirului va fi
astfel: document.write("Curs \"JavaScript\" \\ MarPlo.net");
Notiuni de baza
In aceasta lectie veti invata notiunile de baza ale programari, care sunt necesare
pentru a scrie un script. Aceste notiuni sunt similare cu cele din PHP si alte
limbaje de programare.
1. Folosirea variabilelor
Intr-un script (sau program) se folosesc date constante dar si date variabile care isi
schimba valorile in timpul executei programului. Aceste date se numesc variabile.
Modul cel mai simplu de a folosi si a face referire la o astfel de data variabila este de a o
denumi. Numele variabilei permite accesul la valoarea ei precum si schimbarea valorii daca
este necesar.
Se poate crea o variabila si sa-i atribuim o valoare prin doua metode:
- Cu declaratia var
nume = valoare
- Unde 'nume' este numele variabilei iar 'valoare' este valoarea pe care i-o atribuim.
Tipuri de variabile - Spre deosebire de alte limbaje (cum sunt Pascal sau C), JavaScript nu
are tipuri fixe de date, adica permite schimbarea tipului unei variabile in cadrul scriptului,
acesta poate recunoaste singur cand datele sunt de tip "sir", numerice sau alt tip.
De exemplu:
var x = "xyz";
x = 8;
- Observati ca valorile de tip 'sir' (formate din litere) se scriu intre ghilimele, iar cele
'numerice' pot fi scrise si fara ghilimele.
Durata de viata a unei variabile - O variabila scrisa in cadrul unei functii este o variabila
locala, valoarea ei fiind recunoscuta numai in cadrul acelei functii, cand se iese din functie
variabila este distrusa. Astfel, o alta functie poate declara si folosi o variabila cu acelasi
nume, JS (Java Script) trateaza cele doua variabile ca fiind diferite (functiile si lucrul cu
acesta vor fi explicate in lectiile urmatoare).
Se pot declara si variabile, in afara oricarei functii, care sa fie folosite de toate functiile,
acestea se numesc variabile globale si sunt valabile de la incarcarea paginii web pana la
inchidere, in orice script JS.
2. Operatori
Pentru a lucra cu datele introduse intr-un script si a manipula valorile variabilelor se
folosesc operatori
Operatorii sunt simboluri si identificatori care determina felul in care sunt modificate datele
si modul in care este evaluata o combinatie de expresii si variabile.
JavaScript recunoaste :
Operatori aritmetici
Operatori de atribuire
Operatori de comparare
Operatori logici (numiti si booleeni)
Operatori pentru siruri
Operatori typeof
Operator conditional ?
1. Operatori aritmetici
Putem spune ca operatorii aritmetici sunt principalii operatori folositi cu numere, acestia
efectueaza operatiile aritmetice
cunoscute: adunare (+), scadere (-), inmultire (*), impartirere (/). Pe langa acesti
patru operatori, in programare sunt folositi inca trei operatori aritmetici :
8%3 da rezultatul 2
10%2 da rezultatul 0
Incrementare (++) - Acest operator creste valoarea cu o unitate, este des folosit
in programare, in lucrul cu variabile.
x = 7;
x++;
rezultatul va fi x = 8
x = 7;
x--;
rezultatul va fi x = 6
Cei doi operatori de incrementare (++) respectiv decrementare (--) pot fi folositi
atat ca prefix (in fata variabilei) ++i respectiv --i cat si ca sufix (dupa numele
variabilei) i++ respectiv i--. Valoarea obtinuta este aceeasi, insa ordinea operatiei
si rezultatul atribuirii valorii sunt diferite.
In cazul folosirii operatorului ca sufix, intai este atribuita valoarea variabilei si apoi
variabila este incrementata (sau decrementata).
2. Operatori de atribuire
In cazul acestui operator JavaScript actioneaza mereu de la dreapta la stanga ; se
evalueaza operandul din dreapta iar valoarea se atribuie variabilei din stanga semnului "="
.
Mai jos puteti vedea un tabel din care puteti intelege modul de lucru si actiune al
operatorilor de atribuire
Operator
Exemple
Este acelasi cu
x=y
x=y
+=
x += y
x = x+y
-=
x -= y
x = x-y
*=
x *= y
x = x*y
/=
x /= y
x = x/y
x %= y
x = x%y
%=
3. Operatori de comparare
Expresiile care folosesc acesti operatori pun o intrebare despre doua valori pe care le
compara. Raspunsul poate fi TRUE sau FALSE.
Un operator de comparatie des folosit este operatorul de identitate (egalitate), reprezentat
prin doua semne egal "==". Este diferit de simplul "=", operatorul '==' compara doua
valori determinand daca acestea sunt identice, adica egale atat ca valoare cat si ca tip.
Operatori de comparatie sunt prezentati in tabelul urmator:
Operator
Semnificatie
Exemple
==
Egal
3 == 8 returneaza FALSE
!=
Diferit
3 != 8 returneaza TRUE
>
Mai mare
<
Mai mic
>=
<=
&& - si (and) - Compara doua expresii si returneaza TRUE daca amandoua sunt
adevarate, in caz contrar returneaza FALSE.
Exemplu:
o
|| - sau (or) - Compara doua expresii si returneaza TRUE daca cel putin una din ele
este adevarata, in caz contrar returneaza FALSE.
Exemplu:
o
x=5
y=8
x<7 && y>3
(returneaza TRUE)
x=5
y=8
x>7 || y<3
(returneaza FALSE)
! - not - este operator unar, foloseste o singura expresie si returneaza TRUE daca
expresia este falsa, daca expresia este adevarata returneaza FALSE.
Exemplu:
o
x=5
y=8
!(x==y)
(returneaza TRUE deoarece 'x' nu este egal cu'y')
Observati ca nu este saptiu intre 'zi' si 'frumoasa'. Pentru a adauga spatiu intre siruri, sunt
doua modalitati:
6. Operatorul typeof
Acest operator returneaza tipul de date continut la momentul respectiv de operandul
sau. Este util in special pentru a determina daca o variabila a fost definita cu un anumit tip
de date.
Studiind tabelul urmator puteti intelege modul de operare al acestuiai operator :
Operator
Descriere
typeof parseFloat
typeof 33
typeof true
typeof window
nume_functie()
1. Un operator care ar trebui cunoscut bine este punctul "." , numit operator pentru
membrul unei structuri. Acesta ne permite sa ne referim la un membru ( variabila ,functie
sau obiect ) care apartine obiectului specificat.
Sintaxa este urmatoarea :
numeObiect.nume_Variabila
numeObiect.nume_Functie()
numeObiect.alt_Obiect
nume_tablou[cheie]
variabila = (conditie)?val1:val2
Modul de operare este urmatorul - se evalueaza conditia, daca este adevarata atunci
variabila ia valoarea 'val1', altfel ia valoarea 'val2'.
Iata un exemplu:
<script type="text/javascript">
vizitator = "barbat"
mesaj = (vizitator=="barbat")?"Stimate domn":"Stimata doamna"
document.write(mesaj) </script>
Daca variabila "vizitator" este egala cu 'barbat', variabila "mesaj" primeste valoarea 'Stimate
domn", altfel primeste valoarea "Stimata doamna". Iar instructiunea de afisare
"document.write()" va afisa valoarea lui "mesaj".
10. Precedenta operatorilor
Cand in expresii se folosesc mai multi operatori, JavaScript tine cont de precedenta
(importanta) predefinita a fiecarui operator. Precum in aritmetica, intr-o ecuatie cu adunare
si inmultire ( 2+3*4 ), daca nu sunt paranteze, se executa intai inmultirea, aceasta avand
precedenta superioara fata de adunare. La fel e si cu operatorii in programare.
Daca apar mai multi operatori cu aceeasi precedenta, JavaScript ii va evalua de la stanga
spre dreapta.
In tabelul urmator sunt prezentati operatorii in ordinea precedentei lor, unde operatorii din
partea de sus a tabelului au precedenta maxima :
Operator
Nume operator
() [] .
! ++ -* / %
de negare, incrementare
de inmultire, impartire
+ -
de adunare, scadere
de comparatie
de egalitate
&&
SI logic
||
SAU logic
?:
conditionnal
= += -= *= /=
%=
,
de atribuire
virgula
Instructiuni conditionale
Partea cea mai interesanta, dar si dificila, in scrierea unui script este proectarea
acestuia astfel incat sa ia decizii in timp ce este executat.
Cu ajutorul instructiunilor conditionale putem face programele sa testeze diferite conditii
dupa care sa decida modul de executie a datelor.
In Java Script sunt urmatoarele instructiuni conditionale:
if ... else - executa anumite comenzi cand o conditie este adevarata si alte
comenzi cand aceasta este falsa.
1. Instructiunea "if"
Se poate spune ca instructiunea "if" este una din cele mai des folosite.
Forma generala a acestei instructiuni este urmatoarea :
if (conditie) {
codul care va fi executat daca este adevarata conditia
}
if (conditie) {
codul care va fi executat daca este adevarata conditia
}
else {
codul care va fi executat daca conditia este falsa
}
switch (expresie) {
case valoare1:
cod executat daca
break
case valoare2:
cod executat daca
break
case valoare3:
cod executat daca
break
default :
cod executat daca
valoare3
}
expresie = valoare1
expresie = valoare2
expresie = valoare3
expresie e diferit de valoare1, valoare2 sau
- Prima data este evaluata expresia scrisa intre paranteze rotunde, apoi valoarea expresiei
este comparata pe rand cu fiecare valoare determinata de "case". Daca se gaseste o
identitate se executa codul asociat acelui "case". Apoi se iese din instructiunea "switch".
Daca, parcurgand fiecare "case", nu se gaseste o egalitate, se executa codul de dupa
"default".
Prin folosirea lui "break" se opreste parcurgerea corpului instructiunii atunci cand s-a gasit o
valoare egala cu 'expresie' si se iese din "switch".
Iata un exemplu de script care afiseaza un mesaj in functie de zilele saptamanii:
<script type="text/javascript">
<!-var d = new Date()
var ziua = d.getDay()
switch (ziua) {
case 5:
document.write("Astazi e vineri");
break
case 6:
document.write("Astazi e sambata");
break
case 0:
document.write("Astazi e duminica");
break
default:
document.write("Mai e pana sambata");
}
//-->
</script>
- Am definit variabila 'd' a carei valoare este data curenta, apoi variabila 'ziua' care preia
numarul zilei din variabila 'd' (duminica = 0, luni = 1, ...). Se intra in corpul instructiunii
"switch" si se verifica, pe rand, fiecare valoare "case" cu valoarea variabilei 'ziua', cand se
gaseste egalitatea se executa comanda asociata acelui 'case' si se iese din "switch".
Daca nici una din valorile 'case' nu este egala cu valoarea variabilei 'ziua', se va executa
comanda de dupa 'default', care afiseaza mesajul: "Mai e pana sambata".
Iata inca un exemplu cu "case", de data aceasta foloseste valori de tip sir (string).
<script type="text/javascript">
<!-var nume = "Marius";
switch (nume) {
case "Cristi":
document.write("Coleg");
break
case "Marius":
document.write("Frate");
break
case "Maria":
document.write("Sora");
break
default:
document.write("Altcineva");
}
//-->
</script>
Va returna Frate.
Dar in general "case" e recomandat sa fie folosit cu valori numerice.
1. Instructiunea for
Aceasta are urmatoarea forma generala:
este
este
este
este
1
2
3
4
- Unde "nume_ proprietate" este un literal de tip sir generat de JavaScript. Pentru fiecare
repetare a executiei instructiunii, lui "nume_proprietate" i-se atribuie urmatorul nume de
proprietate continut in "obiect", pana cand sunt folosite toate.
3. Instructiunea while
Aceasta instructiune repeta un cod atata timp cat conditia este adevarata.
Comanda actioneaza similar cu instructiunea "for", dar nu include functiile de initializare si
incrementare a variabilelor.
Instructiunea "while" are urmatoarea forma generala:
while (conditie) {
codul care va fi executat
}
Iata exemplu anterior, de la instructiunea "for", aici este scris in varianta instructiunii
"while":
<script type="text/javascript">
<!-var x = 1;
while (x<5) {
document.write("<br /> x este "+x);
x++;
}
//-->
</script>
- Prima data am declarat variabila 'x' dandu-i valoarea 1.
Instructiunea "while" verifica conditia (aici x<5) care este adevarata si permite executarea
corpului functiei dintre acolade care afiseaza "x este 1" si incrementeaza valoarea lui 'x' cu o
unitate. Acum 'x' are valoarea 2, se verifica conditia, care este adevarata si se executa iar
codul dintre acolade, ..., si tot asa pana cand la verificarea conditiei rezultatul este FALSE,
moment in care se termina rularea instructiunii "while".
Acest script va afisa urmatorul rezultat:
x
x
x
x
este
este
este
este
1
2
3
4
do {
codul care va fi executat
}
while (conditie)
Asemanatoare in mare parte cu instructiunea "while", instructiunea "do ... while" intai
executa codul din corpul instructiunii, dupa care verifica conditia, apoi il repeta pana cant
conditia returnbeaza FALSE. Astfel corpul functiei este executat cel putin o data, chiar daca
conditia nu este adevarata.
Iata un exemplu din care puteti intelege mai bine aceasta instructiune:
<script type="text/javascript">
<!-var x = 8;
do {
document.write("<br /> x este "+x);
x++;
}
while (x<5)
//-->
</script>
- Aceasta functie afiseaza "x este 8".
Observati ca desi conditia este falsa (x<5), codul dintre acolade este totusi executat o
singura data.
Instructiuni complementare
Pe langa instructiunile "for" si "while" avem si alte instructiuni 'complementare' care pot
fi executate impreuna cu acestea.
continue - sare peste instructiunile care au mai ramas din ciclul respectiv.
Cand este folosita o instructiune ciclica, aceasta continua sa se repete pana cand
conditia este FALSE. Aceasta excutie poate fi schimbata cu ajutorul
instructiunilor break si continue, care dau posibilitatea intreruperii ciclului sau iesirea din
acesta inainte de a se ajunge la sfarsit (la ultima acolada).
Iata un exemplu din care puteti intelege modul de lucru a lui break:
<script type="text/javascript">
for (x=1; x<10; x++) {
document.write("<br /> X este "+x);
if (x==3) {
break;
}
}
</script>
Acest script va afisa urmatorul rezultat:
X este 1
X este 2
X este 3
- Dupa cum puteti observa, nu au fost executate toate ciclurile instructiunii "for", conform
conditiei (pana cand 'x' ar fi avut valoarea 10), executia se intrerupe cand 'x' are valoarea 3.
este
este
este
este
este
1
2
4
6
7
- Observati ca atunci cand 'x' are valoarea 3 sau 5, prin instructiunea "continue" se intrerupe
executia codului care urmeaza dupa aceasta (aici "document.write("<br /> X este "+x);")
din repetarea curenta, dar se continua cu verificare conditiei instructiunii "for" si executia
ciclului.
2. Instructiunea eticheta (label)
Instructiunea label poate fi folosita impreuna cu "break" sau "continue". Aceasta este
utilizata atunci cand folosim instructiuni ciclice imbricate, permitand controlul oricarei
instructiuni care imbrica alte instructiuni.
Studiind exemplul urmator, puteti intelege mai bine modul de utilizare a unei
instructiuni label:
<script type="text/javascript">
loopX:
for (x=1; x<=5; x++) {
for (y=3; y<8; y++) {
document.write("X este "+x+" - Y este "+y+" --" );
if (x==4) {
break loopX;
}
}
document.write("<br />")
}
</script>
- Am etichetat o serie de instructini ciclice imbricate (aici doua "for") cu eticheta "loopX",
care va fi folosita in a doua instructiune "for" imbricata, impreuna cu "break".
Acest script va afisa urmatorul rezultat:
X este 1 este 7 -X este 2 este 7 -X este 3 este 7 -X este 4 -
Y este 3 --X este 1 - Y este 4 --X este 1 - Y este 5 --X este 1 - Y este 6 --X este 1 - Y
Y este 3 --X este 2 - Y este 4 --X este 2 - Y este 5 --X este 2 - Y este 6 --X este 2 - Y
Y este 3 --X este 3 - Y este 4 --X este 3 - Y este 5 --X este 3 - Y este 6 --X este 3 - Y
Y este 3 --
- Observati ca desi "break" este inclus in interiorul celei dea doua instructiune "for", prin
specificarea lui "loopX", care este eticheta intregului ansamblu de instructiuni imbricate, se
va intrerupe executia intregului ansamblu, nu numai instructiunii "for" unde este adaugat
"break". Daca eliminati eticheta "loopX" veti vedea diferenta.
3 Instructiunea with
Aceasta comanda se foloseste pentru a evita referirea in mod repetat la un obiect,
atunci cand ii accesam metodele sau proprietatile de mai multe ori. Orice metoda sau
proprietate dintr-un bloc "with" pe care JavaScript nu o recunoaste va fi asociata cu
obiectul specificat pentru acel bloc.
Sintaxa acestei instructiuni este :
with (obiect) {
instructiuni
}
- Unde "obiect" specifica referirea la obiect care trebuie folosita, daca aceasta nu exista in
blocul "instructiuni". Ajuta mult cand se utilizeaza de mai multe ori functii matematice
avansate, prin intermediul obiectului "Math". (Acest obiect va fi explicat mai tarziu).
In exemplul urmator este prezentat modul de folosire a instructiunii "with" :
<script type="text/javascript">
<!-with(document) {
write("Salut");
write("Acum nu mai este necesara folosirea obiectului ca prefix al functiei");
}
//-->
</script>
Acest script va afisa :
Salut
Acum nu mai este necesara folosirea obiectului ca prefix al functiei
In mod normal, pt. a afisa un text folosim sintaxa "document.write("text ...")", dar aici, prin
folosirea lui 'with' impreuna cu obiectul "document", nu mai este necesara adaugarea
acestuia la metoda "write", astfel se scurteaza codul scriptului.
Alert, Prompt si Confirm sunt ferestre predefinite de dialog, acestea apartin direct
obiectului "Window" (despre obiecte si ierarhia acestora puteti invata in Lectia 12).
1. Fereastra Alert
Probabil ati intalnit pana acum, de mai multe ori exemple cu "Alert".
Fiind un element simplu si deja cunoscut, voi face o scurta prezentare a sintaxei acestuia.
Crearea ferestrelor alert se face cu sintaxa:
window.alert("mesaj")
2. Fereastra Prompt
window.prompt("mesaj", "default")
- Unde "mesaj" este un text care va apare in fereastra, deasupra unei casute de text input;
iar "default" este textul care va apare in casuta input.
Urmatorul exemplu deschide o fereastra "Prompt".
<script type="text/javascript">
<!-window.prompt("Scrieti numele", "Nume");
//-->
</script>
In browser va apare o fereastra ca in imaginea urmatoare
Textul pe care utilizatorul il adauga in campul din fereastra prompt poate fi preluat intr-o
variabila si folosit apoi in script.
Iata un exemplu in care atribuim deschiderea ferestrei Prompt unei variabile (aici "nume"),
care va prelua sirul adaugat in caseta de text, apoi valoarea acestei variabile o introducem
in mesajul unei ferestre Alert:
<script type="text/javascript">
<!-var nume = window.prompt("Scrieti numele", "Nume");
alert("Salut "+nume+"\n Bine ai venit.");
//-->
</script>
- Dupa ce utilizatorul scrie numele in fereastra Prompt si apasa OK se va deschide o
fereastra Alert care contine in mesaj numele adaugat de utilizator.
- Am folosit "\n" pentru a adauga o linie noua, dupa "nume", in textul care apare in fereastra
Alert.
- Incercati si singuri acest exemplu.
3. Fereastra Confi rm
Fereastra de confirmare se creaza cu sintaxa:
window.confirm("intrebare")
if (intrebare) alert("Corect");
else alert("Incorect");
//-->
</script>
In browser va apare o fereastra ca in imaginea urmatoare
Functii - 1
Functiile ajuta la divizarea mai multor sarcini pe care trebuie sa le faca un program.
O functie poate contine mai multe instructiuni si comenzi care ulterior pot fi utilizate usor si
de mai multe ori prin apelarea functiei care le contine.
Daca un program necesita multe linii de cod, folosind functiile putem imparti codul in parti
mai mici pe care le putem utiliza separat acolo unde este nevoie.
Pot fi doua feluri de functii:
Create de programator
o
Argumentele sunt variabile folosite de functie si a caror valoare este preluata la apelarea
functiei.
Atributele nu sun obligatorii, o functie poate fi definita si fara argumente, dar se pastreaza
parantezele rotunde, astfel sintaxa unei functii fara argumente este urmatoarea:
function nume_functie() {
codul care va fi executat
}
2. Instructiunea return
O functie care returneaza un rezultat foloseste pentru aceasta instructiunea return.
Aceasta specifica valoarea pe care o returneaza functia cand este apelata.
Iata un exemplu din care pouteti intelege modul de aplicare a instructiunii return:
function suma(x, y) {
z = x+y;
return z
}
- "suma" reprezinta numele functiei (puteti da orice nume care respecta regulile limbajuli si
nu sunt identice cu cele rezervate, cum ar fi "function"), "x, y" reprezinta argumentele
functiei a caror valoare este data cand functia este apelata. Intre acolade avem codul care
trebuie executat si care, prin instructiunea "return" va returna valoarea lui "z" care
reprezinta suma lui "x" si "y". Astfel valoarea returnata de functia "suma()" va fi valoarea pe
care o are "z".
3. Apelarea functiilor
Dupa ce am creat o functie, pentru a fi folosita, fuctia trebuie apelata.
- O functie care contine argumente se apeleaza in felul urmator:
nume_functie()
</body>
</html>
- Observati ca functia "exemplu1" a fost definita in sectiunea head a documentului HTML si
apoi a fost apelata in sectiunea "body", unde va afisa textul "Bine ati venit!"
- Exemplu 2 - functie cu un argument
Urmatorul exemplu prezinta un script care la apasarea unui buton deschide o fereastra
"alert" care va afisa un text in functie de argumentul transmis.
Specificatie - Sintaxa generala a functiei "alert" din JavaScript este: alert('Text'), aceasta
deschide o fereastra de atentionare in care este afisat mesajul dintre paranteze "Text".
<html>
<head>
<script type="text/javascript">
<!-function exemplu2(text) {
alert(text);
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onclick="exemplu2('Buna dimineata!')" value="dimineata" />
<input type="button" onclick="exemplu2('Buna ziua!')" value="ziua" />
</form>
</body>
</html>
Acest cod va afisa in pagina HTML urmatorul rezultat:
<html>
<head>
<script type="text/javascript">
<!-function exemplu3(x,y) {
var z = 0;
z = x+y;
return alert("Suma lui "+x+" si "+y+" este: "+z)
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onclick="exemplu3(7, 8)" value="Suma" />
</form>
</body>
</html>
Acest cod va afisa in pagina HTML urmatorul rezultat:
- Studiati cu atentie scriptul, modul in care au fost combinate: "alert()", sirul si valoarea
argumentelor "x, y", variabila "z" si modul in care functia "exemplu3" este apelata.
Cand apasati pe buton, veti obtine suma numerelor 7 si 8.
In interiorul functiei pot fi folosite instructiuni complexe, cum ar fi "for", "if", "while"; care pot
lua decizii diferite in functie de argumentele functiei. Depinde doar de cunostintele si
imaginatia dv..
Functii - 2
In aceasta lectie vor fi prezentate trei exemple de scripturi care folosesc functii mai
complexe decat cele prezentate in lectia anterioara.
1. Modifi carea numarului argumentelor
Cand creem o functie ii definim si numarul de argumente pe care le accepta, lucru de
care se tine cont in momentul apelarii ei.
Sunt situatii in care dorim sa transmitem functiei un numar diferit de argumente, care
poate fi mai mic sau mai mare decat numarul de argumente pe care le are functia la
construirea ei.
Intr-o astfel de situatie putem folosi o valoare prestabilita in interiorul functiei, pentru cazul
in care nu sunt transferate argumente.
In continuare va fi prezentat un script care afiseaza un mesaj de salut atunci cand
utilizatorul ajunge la o pagina web. Programul afiseaza un anumit mesaj daca recunoaste
sau nu numele vizitatorului. Daca "utilizator" nu este "null" variabila a fost definita. Acest
lucru este posibil doar daca o valoare, ca " Media", este transferata functiei. Daca variabila
"utilizator" este egal cu "null" atunci scriptul evita folosirea variabilei in mesajul de salut.
<html>
<head>
<script type="text/javascript">
<!-function mesaj(utilizator) {
if (utilizator!=null) {
document.writeln("Salut "+utilizator);
}
else {
document.writeln("Bine ati venit pe site!");
}
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!-document.writeln("Prima apelare a functiei mesaj() <br />");
mesaj("Media");
document.writeln("<br />A doua apelare a functiei mesaj() <br />");
mesaj();
//-->
</script>
</body>
</html>
Acest script va afisa in pagina urmatorul rezultat:
Prima apelare a functiei mesaj()
Salut Media
A doua apelare a functiei mesaj()
Bine ati venit pe site!
- Studiati codul functiei si observati diferenta mesajelor din cele ddoua apelari.
In unele situatii unei functii ii sunt transferate mai multe argumente decat au fost specificate
la crearea ei. Valorile argumentelor suplimentare nu sunt pierdute, acestea se stocheaza
intr-un tablou (sau "matrice") numit "arguments" , care exista implicit pentru orice functie.
Toate argumentele sunt pastrate in acest tablou si pot fi extrase in interiorul corpului
functiei.
Argumentele functiei "mesaj" sunt stocate in tabloul "mesaj.arguments". Stocarea se face
intr-o ordine asigurata de o "cheie" a carei prima valoare este 0.
Pentru a extrage primul element din tabloul "arguments" al functiei "mesaj" folosim sintaxa
"arg1 = mesaj.arguments[0]", pentru al doilea "arg2 = mesaj.arguments[1]".
Toate tablourile JavaScript sunt indexate pornind de la 0. Pentru a gasi numarul total de
argumente din tablou putem folosi o instructiune speciala "length" care returneaza
lungimea (nr. de elemente) unui tablou (numit si "matrice").
Urmatorul exemplu atribue variabilei "nrArg" o valoare care reprezinta numarul de
argumente (elemente) din tabloul "mesaj.arguments":
nrArg = mesaj.arguments.length
Folosind instructiunile prezentate mai sus (legate de tabloul "arguments"), putem crea o
noua versiune a scriptului din primul exemplu. Aceasta versiune raspunde mai corect in
functie de cunoasterea sau nu a numelui utilizatorilor.
<html>
<head>
<script type="text/javascript">
<!--
function mesaj(utilizator) {
if (utilizator!=null) {
document.writeln("Salut "+utilizator);
}
else {
document.writeln("Bine ati venit pe site");
}
numarArgumente=mesaj.arguments.length;
if(numarArgumente>1) {
for (var i=1; i<numarArgumente; i++) {
document.writeln(mesaj.arguments[i]);
}
}
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!-var utilizator="Marius", extraMesaj="Bine ai revenit";
var utilizator2=null;
var extraMesaj1="Vrei sa devii membru ?";var extraMesaj2="Te poti inscrie online";
mesaj(utilizator,extraMesaj);
document.writeln("<hr>");
mesaj(utilizator2,extraMesaj1,extraMesaj2);
//-->
</script>
</body>
</html>
Acest exemplu va afisa in pagina web urmatorul rezultat:
Salut Marius Bine ai revenit
Bine ati venit pe site Vrei sa devii membru ? Te poti inscrie online
2. Functii recursive
O functie JavaScript poate fi recursiva, adica se poate autoapela.
O metoda buna de a demonstra capacitatea recursiva a functiilor este rezolvarea unei
ecuatii factoriale.
In exemplul urmator avem o functie JavaScript recursiva care afla factorialul unui numar
precizat "n" (aici 7):
<html>
<head>
<script type="text/javascript">
<!-document.writeln("Calculeaza factorialul de 7 prin functie recursiva")
function factorial(n) {
var rezultat;
if (n>0) {
rezultat = n*factorial(n-1);
}
else if (n==0) {
rezultat = 1;
}
else {
rezultat = null;
}
return(rezultat)
}
//-->
</script>
</head>
<body>
<form>
<input type = "button" value = "Factorial 7" onclick="alert(factorial(7))" >
</form>
</body>
</html>
In fereastra browser-ului va apare urmatorul rezultat:
Calculeaza factorialul de 7 prin functie recursiva
- Functia verifica intai daca "n" este mai mare decat 0, apoi in caz afirmativ, "n" se
inmulteste cu rezultatul returnat de auto-apelarea functiei cu argumentul "n-1". Cand "n"
ajunge 0, aparitia cea mai imbricata a functiei se incheie si returneaza prima valoare.
JavaScript incheie fiecare functie imbricata pana ce ajunge la apelarea initiala a functiei
"factorial", apoi intoarce rezultatul final.
Pentru inceput trebuie sa stiti ce sunt obiectele in programare si care sunt conceptele
fundamentale ale programarii orientate spre obiecte (OOP).
JavaScript nu este un program orientat pe obiecte (OO), cum sunt C++ sau Java, dar este
bazat pe obiecte.
In lumea din jurul nostru obiectele sunt de exemplu: o carte, o masina, un televizor; in
JavaScript obiectele sunt de exemplu: un formular, o fereastra, butoane, imagini ...
Toate elementele dintr-o pagina sunt vazute de JavaScript ca fiind obiecte.
Obiectele au anumite proprietati, de exemplu in lumea reala televizoarele au butoane,
masinile au roti; asa si in JavaScript obiectele au proprietati: formularele au buton,
ferestrele au titluri.
Pe langa obiecte si proprietati, in JavaScript avem si termenul "metode".
Metodele reprezinta functiile pe care un obiect poate sa le faca. Ferestrele se deschid cu
metoda "open()", butoanele au metoda "click()". Parantezele rotunde "()" arata ca se face
referire la o metoda, nu la o proprietate.
obiect.prorietate
obiect.metoda()
Astfel avem mai multe tipuri de obiecte care pot fi folosite, pentru incepatori e bine de stiut
in principal obiectele pe partea de client si cele esentiale, cum sunt: "string", "math" sau
cele care vin de la etichetele HTML.
Mai multe astfel de obiecte pot forma o celula (o grupa) numita "clasa", astfel, diferite
obiecte incorporate pentru o executie comuna formeaza un "set de clase" care se mai
numeste si "biblioteca de clase", iar mai exact pentru limbajul JavaScript "biblioteca de
obiecte JavaScript", si pot fi refolosite.
JavaScript are urmatoarele obiecte esentiale, predefinite:
1
2
3
4
5
String
Math
Date
Array
Global
1. Obiectul string
String (sau sir) se foloseste pentru a prelua text.
Proprietatea acestui obiect este:
document.write(sir);
//-->
</script>
- In acest exemplu avem variabila "sir" ce contine sirul complet si o variabila "sablon" ce
contine o expresie regulata care reprezinta toate caracterele non-numerice, \D fiind
echivalent cu [^0-9] (mai multe detalii despre expresiile regulate gasiti la: RegExp
Javascript).
- Expresia sir.replace(sablon, '') inlocuieste cu '' (adica nimic) caracterele din "sir" care se
incadreaza in "sablon".
- document.write(sir) va afisa sirul care a ramas, adica 12378
2. Obiectul Array (tablou sau matrice)
Obiectul Array (numit si matrice sau tablou de date) se foloseste pentru a stoca mai
multe valori intr-un singur nume de variabila.
Fiecare valoare stocata devine un element al tabloului, acesta are asociat un "numar
index" (sau cheie). Cu ajutorul acestei chei se poate face referire la oricare element din
tablou.
Cu operatorul new se poate crea o "instanta" (incepere) a obiectului Array, ca in exemplul
urmator:
- Unde intre parantezele rotunde este trecut numarul de elemente ale tabloului, aici 4.
Numarul de elemente, cheile, incep implicit de la 0.
Pentru a da valori elementelor din tablou, se scrie numele tabloului urmat de o pereche de
paranteze patrate, in interiorul carora se adauga cheia specifica fiecarui element, apoi
semnul egal si valoarea dorita. Dupa cum puteti vedea in urmatorul exemplu:
nume_colegi[0]
nume_colegi[1]
nume_colegi[2]
nume_colegi[3]
=
=
=
=
"Cristi"
"Ion"
"Simona"
"Adi"
coleg = nume_colegi[0]
colega = nume_colegi[2]
Astfel, variabila "coleg" va avea valoarea "Cristi" si variabila "colega" valoarea "Simona".
Pentru a afla numarul de elemente ale unui Array, se foloseste proprietatea "length", ca in
exemplu urmator:
nr_colegi = nume_colegi.length
Urmatorul exemplu foloseste o instructiune "for" care parcurge un tablou (aici tabloul
"nume_colegi"), extrage valoarea fiecarui element si o afiseaza.
<script type="text/javascript">
<!-var nume_colegi = new Array();
nume_colegi[0] = "Cristi";
nume_colegi[1] = "Ion";
nume_colegi[2] = "Simona";
nume_colegi[3] = "Adi";
var nr_elemente = nume_colegi.length;
Iata un alt exemplu din care puteti intelege cum se aplica metoda "sort()" si efectul acesteia.
Folosim acelasi exemplu de mai sus.
"sort()" sorteaza elementele din Array in ordine alfabetica (sau crescatoare in cazul valorilor
numerice).
<script type="text/javascript">
<!-var nume_colegi = new Array();
nume_colegi[0] = "Cristi";
nume_colegi[1] = "Ion";
nume_colegi[2] = "Simona";
nume_colegi[3] = "Adi";
var nr_elemente = nume_colegi.length;
// Afla nr. elemente din matrice
nume_colegi.sort();
// Aranjeaza elementele in ordine crescatoare, alfabetic
data.getDate()
Se pot crea si altfel obiecte Date, care pot afisa data si ora intr-un mod specificat:
new
new
new
new
new
- Unde: Month=luna, dd=ziua (cu 2 caractere), y=anul (yy e afisat cu 2 caractere iar yyyy cu
4), h=ora, m=minute, s=secunde, milliseconds=milisecunde.
Astfel se pot crea variabile de data pt. fiecare obiect Date de mai sus, ca in exemplu
urmator:
var
var
var
var
var
data=new
data=new
data=new
data=new
data=new
getDay() - Returneaza ziua dintr-un obiect Date (intre 0-6; 0=Duminica, 1=Luni,
etc.)
Pentru a intelege mai bine obiectul Date si modul de lucru cu metodele lui, studiati si
urmatorul exemplu:
<script type="text/javascript">
<!-var d = new Date()
nr_aleator = Math.random()
PI - Returneaza PI
ceil(x) - Returneaza cel mai apropiat intreg mai mare sau egal cu x
floor(x) - Returneaza cel mai apropiat intreg mai mic sau egal cu x
Iata si un exemplu practic, urmatorul script rotunjeste o valoare (aici 8.35) la cel mai
apropiat intreg:
<script type="text/javascript">
document.write("8.35 rotunjit este: " + Math.round(8.35));
</script>
Dupa ce este adaugat intr-un document HTML, in sectiunea BODY, acest script va afisa:
8.35 rotunjit este: 8
Obiecte de tip Global
Obiectele de tip Global grupeaza proprietatile si metodele de nivel cel mai inalt, fara un
obiect parinte, cum sunt functiile.
Obiectul Global are trei proprietati:
escape() - Intoarce un obiect sir in care toate caracterele non alfa-numerice sunt
transformate in echivalentele lor numerice
eval() - Accepta un sir de instructiuni Java Script si il evalueaza ca fiind cod sursa
Pentru a intelege mai bine, studiati urmatorul exemplu. Aici este folosita de doua ori metoda
"eval()", acesta transforma si interpreteaza argumentul primit in cod JavaScript.
<script type="text/javascript">
function calculeaza(form) {
form.rezultat.value = eval(form.expresie.value);
}
eval("alert('Bine ati venit pe site!')");
</script>
<form>
<p>Introduceti o expresie matematica (adunare, scadere, inmultire, impartire), de
exemplu (7*8 sau 3+8/2): </p>
<input type="text" name="expresie" size="35" >
<input type="button" name="calc" value="Calculare" onclick="calculeaza(this.form)">
<br>
Rezultatul este:
<input type="text" name="rezultat" size="18">
</form>
Acest cod afiseaza la inceput o fereastra Alert apoi in browser va fi afisat urmatorul rezultat:
Introduceti o expresie matematica (adunare, scadere, inmultire, impartire), de exemplu (7*8
sau 3+8/2):
Rezultatul este:
Dupa apasarea butonului "Calculare", prin "onclick" este accestata functia "calculeaza()".
Scriptul JavaScript din HEAD, transfera in campul cu nmele "rezultat", din FORM, valoarea
obtinuta prin evaluarea expresiei adaugate in campul "expresie", calcularea expresiei fiind
posibila datorita folosirii metodei "eval()".
JavaScript organizeaza toate elementele unei pagini web intr-o ierarhie. Toate
elementele sunt vazute ca obiecte si fiecare obiect are anumite proprietati si metode sau
alte obiecte.
Cu JavaScript putem manipula usor obiectele. Pentru aceasta este importanta intelegerea
ierarhiei obiectelor HTML.
1. Obiectul document
Acesta este unul din obiectele cele mai importante in JavaScript, este folosit foarte des.
Obiectul Window lasa continutul unui document web in grija obiectului Document, acesta
este responsabil de continutul afisat pe o pagina si se poate lucra cu el pentru afisarea de
paginii HTML dinamice.
Obiectul document contine mai multe proprietati, cum ar fi culoarea de fundal a paginii
(bgcolor) sau alte obiecte, cum sunt tag-urile HTML. De retinut ca toate elementele HTML
sunt proprietati ale obiectului document, si la randul lor acestea sunt obiecte. Un obiect
HTML este de exemplu un formular, o eticheta DIV sau un link.
Pentru a desemna obiectul sau proprietatea curenta pe care dorim sa o folosim, adaugam
cuvantul this urmat de caracterul punct (.) si numele proprietatii, dupa cum vedeti in
urmatoarea sintaxa:
this.nume_proprietate
formName - specifica instanta "Form" care este accesata prin folosirea valorii
atributului "name" din eticheta <form>
contextual() - permite sa aplicam in mod selectiv un stil unui element HTML care
apare intr-un anumit context specific
writeln() - adauga text si un caracter linie noua in document (textul pe linia lui)
In urmatorul exemplu puteti vedea cum au fost folosite proprietatile obiectului document
pentru stabilirea culorii de fundal, a textului, link-urilor si titlul unei pagini web:
<script type="text/javascript">
<!-document.bgColor = '#eaeafe'
document.fgColor = '#fe1111'
document.linkColor = '#01ff01'
document.title = "Lectie JavaScript"
//-->
</script>
Acest script seteaza culoarea de fundal a pagini "#eaeafe" (un albastru desechis), culoarea
textului rosu, a legaturilor verde si titlul "Lectie Java Script".
2. Obiectul document si Formulare
Formularele de asemenea pot fi considerate si tratate ca obiecte dintr-un document
HTML, acestea fiind sub-obiecte ale obiectului "document", astfel se apeleaza impreuna cu
acesta.
Penru a intelege mai bine lucrul cu obiectul document si cum se lucreaza cu ierarhia
obiectelor, studiati si urmatorul exemplu:
<html>
<head>
<script type="text/javascript">
<!-function afisare()
{
nume = document.nume_form.nume_camp.value;
return nume
}
//-->
</script>
</head>
<body >
<form name="nume_form">
Name: <input type="text" name="nume_camp" value=""><br>
<input type="button" value="Apasa" name="Buton" onClick="alert('Salut ' +afisare())">
</form>
</body>
</html>
Acest cod va afisa in pagina urmatorul formular:
Name:
Dupa ce scrieti in campul "Name" un nume si apasati butonul "Apasa" va apare o vereastra
Alert cu mesajul "Salut "nume" ".
Ierarhia obiectelor din pagina afisata de acest exemplu este urmatoarea:
document (pagina HTML) -> Forms[0] (sau numele formularului din "name"
- intregul formular) -> {Element[0] (primul camp din
formular), Element[1] (butonul din formular)}
Daca de exemplu doriti sa aflati ce se introdce in primul element din formular, trebuie sa va
ganditi cum sa accesati acest obiect.
Pornim din vrful ierarhiei "document", urmarim calea catre primul formular "forms[0]" pana
la obiectul numit "elements[0]" (se adauga toate numele obiectului pe masura ce le
depasim). Astfel putem accesa primul element prin :
document.forms[0].elements[0]
Pentru a afla ce text a fost introdus, apelam valoarea acelui element. Pentru elemente din
formular (tip "input") se foloseste proprietatea "value". Acesta arata valoarea casetei "input"
respective (aici textul introdus in campul de text). Acum putem afla valoarea cu ajutorul
urmatoruli cod:
name = document.forms[0].elements[0].value;
<form name="nume_form">
Nume: <input type="text" name="nume_element" value="">
go(x) - incarca o adresa URL, echivalenta cu un salt la numarul "x" (pozitiv sau
negativ) din lista istoric
Daca dorim intoarcerea inapoi cu 3 pagini in lista istoric, putem folosi o functie si obiectul
"History" ca in exemplul urmator:
<script type="text/javascript">
<!-function inapoi3 {
window.history,go(-3);
}
//-->
</script>
- Unde "inapoi3" este numele functiei si (-3) reprezinta numarul de pagini la care se face
saltul, pornind de la pagina curenta, negativ face saltul inapoi iar daca numarul dintre
paranteze este pozitiv face saltul inainte in lista istoric.
3. Obiectul Location
Acest obiect contine date despre originea unei pagini web, stocheaza informatii despre
o adresa URL dintr-o fereastra specifica.
- Proprietatile obiectului "location" sunt urmatoarele"
De exemplu, daca doriti sa preluati intr-un script JS parti din adresa URL, si anume domeniul
si calea catre pagina curenta sau toata adresa (fara protcol, care de obicei e "http:" ori
"https":), puteti folosi modelul urmator:
<script type="text/javascript">
<!-function get_url() {
var domeniu = window.location.hostname;
// Preia numele domeniului din adresa
URL
var cale = window.location.pathname;
pagina curenta
var url = domeniu+cale;
(fara protocol)
2. Obiectul Plughin
La fel ca si "Mimetype", nici obiectul Plughin nu este recunoscute de Internet
Explorer.
Acest obiect face referire la modulele plugin instalate pentru browser si contine un tablou
de elemente si tipuri MIME tratate de fiecare modul plugin instalat.
Obiectul "Plugin" are o singura metoda legata direct de el : metoda "plugins.refresh()",
care apartine de obiectul "navigator". Aceasta metoda permite reconstruirea tabloului de
module plugin.
Proprietatile obiectului "Plugin" sunt urmatoarele :
3. Obiectul Anchor
Acest obiect este un text sau o imagine in pagina HTML care poate fi tinta unei legaturi
hipertext. "Anchor" este un obiect JavaScript foarte putin important si folosit rar, totusi e
bine sa-l cunoasteti
Proprietatie obiectului "Anchor" sunt urmatoarele :
4. Obiectul Area
Obiectul Area permite sa definim o suprafata dintr-o imagine ca fiind o harta de
imagini. Atributul "href" al unui obiect "<area>" este incarcat intr-o fereastra tinta atunci
cand vizitatorul executa click pe o locatie specificata.
Mai multe detalii despre hartile de imagini HTML gasiti la pagina Harti de imagini.
Acest obiect are o singura metoda:
hash - portiunea de adresa URL care este ancora, inclusiv semnul diez ( # )
host - numele calculatorului gazda (adresa IP) si portul specificat in adresa URL
hostname - numele calculatorului gazda specificat in adresa URL
href - intreaga adresa URL
pathname - calea fisierului specificat in adresa URL, incepand cu simbolul /
port - portul specificat in adresa URL
protocol - protocolul specificat in adresa URL, inclusiv caracterul doua puncte
(:)
search - partea de cautare a adresei URL, inclusiv caracterul initial semnul
intrebarii (? )
target - numele ferestrei tinta in care ar trebui afisata adresa URL
text - textul care apare intre etichetele <area> si </area>
x - coordonata x a suprafetei
y - coordonata y a suprafetei
5. Obiectul Applet
Obiectul Applet reprezinta echivalentul JavaScript al etichetei HTML <applet>.
Acest obiect adreseaza un applet Java. Aceste obiecte JavaScript nu au metode proprii, dar
in practica putem folosi JavaScript ca sa accesam metodele unui anumit applet scris in
limbajul Java.
Proprietatile obiectului "Applet" sunt toate campurile publice ale respectivului applet Java,
iar metodele sunt toate metodele publice ale acestuia.
6. Obiectul Layer
Si acesta este un obiect cu anumite particularitati, este recunoscut doar de browserele
Netscape, Mozilla si permite limbajului JavaScript sa acceseze straturile din interiorul
documentului.
Utilizarea acestui obiect necesita cunostinte DHTML.
Proprietatie obiectului "Layer" sunt urmatoarele :
2. Obiectul Checkbox
Acest obiect reprezinta caseta de validare HTML dintr-un "Form", care permite
vizitatorului sa specifice o valoare "DA" sau "NU", ori "true" sau "false".
Proprietati ale obiectului "Checkbox" sunt urmatoarele :
checked - returneaza o valoare booleana care determina daca este bifata caseta
de validare
defaultChecked - returneaza o valoare booleana care pastreaza starea initiala a
casetei de validare. Este stabilita cu atributul "checked"
form - returneaza obiectul Form al casetei de validare
name - returneaza sirul specificat in atributul name al etichetei HTML <input>
type - returneaza sirul specificat in atributul type al etichetei HTML <input>
value - returneaza o valoare returnata cand formularul este inaintat
3. Obiectul FileUpload
Acest obiect este echivalentul elementului folosit pentru incarcarea fisierelor.
Cu Java Script nu se poate face prea multe cu acest obiect decat facand referire la
proprietatile sale.
Proprietati ale obiectului "FileUpload" sunt urmatoarele :
4. Obiectul Hidden
Acest obiect se foloseste pentru stocarea anumitor date care vor fi transferate unei
prelucrari pe server. Datele stocate in obiectul "hidden" sunt ascunse, nu apar vzibile in
browser.
Proprietati ale obiectului "Hidden" sunt urmatoarele :
5. Obiectul Password
Obiectul password este asemanator cu obiectul "text", diferenta fiind ca toate
caracterele introduse in cazeta "Password" sunt afisate cu "*" pentru a nu se vedea textul
introdus.
Proprietati ale obiectului "Password" sunt urmatoarele :
6. Obiectul Radio
Butoanele radio sunt controale dintr-un formular HTML care se anuleaza reciproc, astfel
daca este selectat un buton radio, toate celelalte butoane din set sunt neselectate. Setul
de butoane se defineste avand aceasi proprietate "name" pentru toate butoanele radio.
Proprietati ale obiectului "Radio" sunt urmatoarele :
checked - retrneaza o valoare care determina daca este bifat obiectul radio
defaultChecked - returneaza o valoare care pastreaza starea initiala a obiectului
Radio, care se stabileste cu atributul "checked" al etichetei <input> respective
form - returneaza obiectul Form ce contine obiectul Radio
name - contine sirul specificat in atributul name al etichetei <input>
2. Obiectul Submit
Acest obiect este asociat butonului "submit" dintr-un formular HTML, cand butonul este
actionat trimite datele din formular spre calea specificata in atributul "action" din eticheta
<form>, pentru a fi procesate (de exemplu, la un script PHP).
Proprietati ale obiectului "Submit" sunt urmatoarele :
3. Obiectul Select
Acest obiect face referire la caseta cu lista de selectare si lista derulanta dintr-un
formular HTML, ambele permit utilizatorului selectarea unor valori dintr-o lista predefinita.
Dintr-o lista derulanta se poate selecta numai o singura valoare iar dintr-o caseta cu lista
de selectare se pot selecta mai multe valori.
. Obiectul select poate apare ca lista derulanta (in mod initial) sau ca lista de selectare
daca se specifica proprietatea "multiple" ca adevarata (true).
Proprietati ale obiectului "Select" sunt urmatoarele :
4. Obiectul Text
Acest obiect este reprezentarea casetei de tip "text" dintr-un formular HTML.
Obiectul text serveste ca unealta de capturare a datelor dintr-o caseta de tip "text".
Proprietati ale obiectului "Text" sunt urmatoarele :
5. Obiectul Textarea
Asemanator cu obiectul "Text", obiectul Textarea este reprezentarea casetei de tip
"textarea" dintr-un formular HTML. Aceasta caseta permite adaugarea mai multor linii de
text in acelasi camp (caseta).
Proprietati ale obiectului "Textarea" sunt urmatoarele :
Evenimente JavaScript
- "onChange" este atribut al etichetei <input>, a carui valoare, intre ghilimele, este functia
"nume_functie()". In locul functiei dintre ghilimele putem sa scriem direct tot codul din
functie, separand prin caracterul ; comenzile JavaScript (acest lucru este nerecomandat in
cazul unui cod mare).
1. Evenimentele JavaScript
In continuare este prezentata o lista cu evenimentele care pot fi folosite in programarea
JavaScript:
onmousedown
onmouseup
onmousemove
onmouseover
onmouseout
ondblclick
onclick
onload
onunloavd - onresize: (in Netscape)
onmove
onabort
onerror
onfocus
onblur
Evenimente de mouse:
o
onsubmit
onreset
onchange
onselect
onclick
onblur
onfocus
- onkeydown
- onkeyup
- onkeypress
1. - Exemplu "onClick"
Daca dorim executia unei anumite actiuni la apasarea unui click de mouse, folosim
"onClick".
<form>
<input type="button" value="Apasa" onClick="alert('Salut')" />
</form>
Acest exemplu deschide o fereastra alert cand este apasat butonul "Apasa".
<html>
<head>
<script type="text/javascript">
function setfocus() {
document.form2.camp.select();
}
</script>
</head>
<body>
<br>
<a href="http://www.marplo.net"
OnMouseOver="this.style.color='red';"
OnMouseOut="alert('Fereastra deschisa cu onMouseOut')">
Apasa aici pentru a vizita MarPlo.net!
</a>
<form name="form2">
<input type="text" name="camp" size="30" value="orice text">
<input type="button" value="Selecteaza" onclick="setfocus()">
</form>
</body>
</html>
Pagina HTML rezultata din acest cod va afisa urmatorul rezultat:
- Cand se pozitioneaza mouse-ul pe legatura "Apasa aici pentru a vizita MarPlo.net!",
culoarea textului devine rosu (datorita expresiei "this.style.color='red'" - "this" face referire
la obiectul curent care e actionat).
Dupa ce mutati mouse-ul de pe link, se va deschide (prin evenimentul "onMouseOut") o
fereastra Alert.
Cand apasati butonul "Selecteaza", va fi selectat textul din campul de text.
3. - Exemplu "onKeyUp"
Acest script foloseste evenimentul "onKeyUp" pentru a muta cursorul in alt camp dupa ce a
fost tastat ultimul caracter permis in caseta.
<html>
<head>
<script type="text/javascript">
<!-function urmatorul(elment,text) {
if (text.length==elment.maxLength) {
next=elment.tabIndex;
if (next<document.form3.elements.length) {
document.form3.elements[next].focus();
}
}
}
//-->
</script>
</head>
<body>
- Cursorul se muta automat in urmatoarea caseta atunci cand s-a completat tot campul
precedent (cand se ajunge la lungimea stabilita a campului, aici 4 caractere) <br>
<form name="form3">
<input size="4" tabindex="1" name="field" maxlength="4"
onkeyup="urmatorul(this,this.value)">
<input size="4" tabindex="2" maxlength="4" onkeyup="urmatorul(this,this.value)">
<input size="4" tabindex="4" maxlength="4" onkeyup="urmatorul(this,this.value)">
</form>
</body>
</html>
- Functia "urmatorul(elment,text)", are doua argumente: "element" (care, prin apel, se refera
la caseta "input") si "text" (se refera la valoarea casetei).
In apelul functiei: "urmatorul(this,this.value)", "this" se refera la obiectul curent (reprezinta
primul argument) iar al doile argument "this.value" reprezinta valoarea obiectului curent
(valoarea din camp).
Observati folosirea evenimentului onKeyup, pentru a se trece la urmatorul camp atunci
cand s-a completat ultimul caracter din caseta precedenta.
Pentru a intelege mai bine puteti sa inlocuiti "onkeyup" cu onkeydown pentru a vedea
diferenta.
Pagina HTML rezultata din acest cod va afisa urmatorul rezultat:
- Cursorul se muta automat in urmatoarea caseta atunci cand s-a completat tot campul
precedent (cand se ajunge la lungimea stabilita a campului, aici 4 caractere)
Obiectul image - 1
document.image[0].height
Daca sunt mai multe imagini pe o singura pagina, e mai dificil sa se lucreze cu ele folosind
numarul indexului, de aceea se poate atribui fiecarei imagini cate un nume (cu atributul
"name").
O alta metoda este folosirea proprietatii "getElementById("id_element"), unde
"id_element" este id-ul imaginii dat cu atributul "id="..."", ca in exemplu urmator:
document.nume_img.height
o
sau
document.getElementById("id_img").height
Border - poate fi doar citita si este latimea marginii din jurul imaginii specificata
n pixeli
Alt - specifica textul care va fi afisat in locul imaginii(daca nu poate fi vizualizata
de browser)
Iata inca un exemplu in care avem o pagina HTML cu doua link-uri (legaturi) care, printr-un
script JS schimba afisarea mai multor imagini in acelasi loc. Imaginile sunt declarate si
stocate intr-o variabila tablou "imagini". Pentru schimbarea imaginilor se folosesc 2 functii:
"gonext" si "goback".
<html>
<head>
<title>Titlu</title>
<script type="text/javascript">
<!-imagini = new Array("img1.jpg","img2.jpg","img3.jpg");
nr = 0;
function goback() {
- Un dezavantaj al scripturilor din aceste doua exemple poate fi faptul ca dupa apasarea
butonului "Schimba imaginea" sau a link-ului "urmatoarea >>", afisearea imagini noi poate
intarzia deoarece aceasta trebuie sa fie incarcata de browser dupa apasarea butonului (sau
a link-ului). In lectia urmatoare veti invata cum sa evitati acest lucru prin "preincarcarea
imaginilor".
Obiectul image - 2
<a href="#"
onMouseOver="document.Imgs.src='img1.jpg'"
onMouseOut="document.Imgs.src='img2.jpg'">
<img src="img3.jpg" name="Imgs" width="155" height="155" border="0"></a>
- Dupa cum observati, "onMouseOver" si "onMouseOut" au fost adaugate in interiorul
etichetei <a>, e gresit daca le adaugati in eticheta <img>. Imaginile nu pot reactiona la
evenimentele "MouseOver" si "MouseOut", trebuie sa punem o eticheta de legatura (link)
langa imagini.
Acest exemplu va afisa in browser urmatorul rezultat:
- Initial este afisata imaginea "img3.jpg", cand pozitionati mouse-ul deasupra imaginii va fi
afisata "img1.jpg" iar dupa ce departati mouse-ul, va apare imaginea "img2.jpg".
Daca doriti ca efectul de schimbare a imaginii sa apara cand pozitionati mouse-ul pe un link
si nu pe imagine, puteti modifica exemplul astfel (<img> va fi adaugat in afara etichetei
"<a>...</a>"):
<a href="#"
onMouseOver="document.Imgs.src='img1.jpg'"
onMouseOut="document.Imgs.src='img2.jpg'">Legatura</a><br>
<img src="img3.jpg" name="Imgs" width="155" height="155" border="0">
- Acest exemplu este mai mult de studiu pentru a intelege procedeul de utilizare a efectelor
"mouse-over". Nu este potrivit pentru adaugarea intr-o pagina web profesionala deoarece
cauzeaza unele probleme:
Daca vom folosi mai multe seturi de imagini trebuie scris codul JavaScripty pentru
fiecare separat.
Iata un script complet care evita problemele de mai sus, desi este mai lung, o data scris
poate fi folosit cu usurinta si pt. alte pagini web si cu un numar mai mare de imagini.
<html>
<head>
<script type="text/javascript">
<!-// Daca browserul suporta JavaScript
// Creaza matricea care va stoca imaginile, in variabila pics
browserOK = true;
Obiectul Form - 1
Formularele sunt elemente HTML care dau viata unor pagini statice deoarece asigura o
interfata prin care vizitatorii pot interactiona, cu ajutorul controalelor (elemente ale
formularului).
Obiectul Form este mijlocul prin care se poate interactiona cu acest element HTML in
scripturile JavaScript.
1. Metode si proprietati ale obiectului form
Dupa cum ati invatat in lectiile precedente, obiectele JavaScript au proprietati si
metode.
Proprietatile obiectului "Form" sunt urmatoarele:
action - contine atributul "action" din eticheta <form>, specifica adresa URL
unde este trimis formularul
elements - matricea care contine toate elementele din <form>
encoding - contine atributul "enctype" din <form>, specifica o codificare MIME a
formularului
length - numarul de elemente continute in formular
method - contine atributul "method" din <form>, defineste felul in care
formularul este trimis serverului (get sau post)
name - contine atributul "name" al unei etichetei <form>
2. - Prin click pe un buton Submit care trimite automat datele din formularul de
care apartine.
Multe din proprietatile obiectului "Form" se ocupa de informatiile suplimentare care sunt
trimise la server prin intermediul formularului. Aceste proprietati sunt:
- action - specifica adresa URL a programului catre care vor fi trimise datele din formular
Exemplu:
Pentru formularele care folosesc metoda "post" puteti preciza in atributul "action" ca datele
sa fie trimise prin e-mail, folosind urmatoarea sintaxa:
Veti primi o pagina care va contine, printre altele, si valorile elementelor din formular.
Pentru incepatori, mai putin cunoscatori, si pentru folosirea cu scripturi PHP, este
recomandata metoda "post".
Pentru formularele care folosesc metoda "post", in majoriatea site-urilor este disponibil un
program CGI de testare, numit "post-query" furnizat impreuna cu serverul (locatia acestuia
poate fi diferita, intrebati administratorul serverului). Daca doriti sa verificati ce date trimite
formularul, folositi urmatoarea eticheta:
Daca doriti sa faceti o verificare a datelor din formular inainte ca acestea sa fi expediate la
server, puteti folosi evenimentul "onSubmit". - onSubmit - este folosita pentru a valida
formularul inainte de a fi trimis.
Metoda "onSubmit" se introduce in interiorul etichetei <form>, ca in exemplul urmator:
<script type="text/javascript">
<!-// Verifica daca input OK
function validare() {
if (inputOK) return true;
else return false;
}
//-->
</script>
...
<form method="post" name="nume_form" action="script.php" onSubmit="return
validare()">
...
- Despre validarea datelor dintr-un formular veti putea invata mai multe in lectia urmatoare.
Apoi, salvati scriptul dumneavoastra sub forma de fisier text, in directorul "www" din
"wamp", cu un nume care respecta urmatoarele reguli:
Este recomandat ca numele fisierului sa fie alcatuit numai din caractere minuscule,
cifre si liniute. Utilizarea de spatii, majuscule si alte caractere ar putea crea
probleme pe sisteme de operare diferite.
Extensia numelui fisierelor trebuie sa fie .php.
Asigurati-va ca ati ales un nume semnificativ, care sa descrie functia scriptului
dumneavoastra, astfel incat sa-l puteti identifica rapid dupa saptamani sau chiar
luni de la crearea acestuia. Veti descoperi ca liniutele sunt utile pentru separarea
cuvintelor care alcatuiesc numele fisierului, marind astfel lizibilitatea acestuia. De
exemplu, un fisier care contine un script PHP ce va permite sa vizualizati salariile
angajatilor poate primi numele "saarii-angajati.php". Chiar si la mult timp dupa
crearea fisierului respectiv, nu veti avea probleme in a determina scopul acestuia.
3. Afi sarea datelor de iesire intr-un browser Web
Programele PHP executa trei categorii de operatii elementare:
Obtin date de la un utilizator.
Executa prelucrari ale datelor, respectiv obtine accesul la datele stocate in fisiere si
baze de date si le manipuleaza.
Afiseaza date astfel incat un utilizator sa le poata vizualiza.
Primele doua operatii sunt oarecum mai dificil de realizat decat cea de-a treia. Totusi,
afisarea datelor astfel incat acestea sa fie vizibile utilizatorului este o operatie foarte
simpla. Asa cum paragrafele unui text scris sunt compuse din propozitii, programele PHP
sunt alcatuite din instructiuni. Regulile care controleaza formarea propozitiilor se numesc
sintaxa. Acelasi termen este folosit si pentru a desemna regulile care guverneaza formarea
instructiunilor PHP.
Iata un exemplu pentru crearea instructiunii PHP care trimite date de iesire la un browser
Web, astfel incat acestea sa fie vizibile pentru un utilizator:
<?php
echo "scrieti aici un text oarecare";
?>
Observati ca instructiunea incepe cu un cavant "echo" si se incheie cu un caracter
punct si virgula (;).
Constructia echo trimite datele de iesire care vor fi afisate de browser.
Ghilimelele duble se folosesc pentru delimitarea unei expresii de tip text, in cazul nostru
"scrieti aici un text oarecare" (se pot folosi si ghilimele simple).
In locul propozitiei "scrieti aici un text oarecare" puteti plasa aproape orice text, cu
exceptia altor ghilimele. Totusi, pentru moment, trebuie sa includeti numai litere, cifre,
spatii si semne de punctuatie folosite in alfabetul latin, precum virgula, caracterul punct si
virgula, punctul, semnul de intrebare si semnul exclamarii. De asemenea, puteti include
caracterele < >, folosite pentru delimitarea etichetelor HTML, respectiv caracterul /, folosit
pentru a indica membrul de inchidere al unei perechi de etichete HTML.
De exemplu, iata o instructiune PHP care are drept date de iesire un fragment dintr-un vers
din Scrisoarea a III-a de Eminescu:
<?php
echo "<h2> Iata vine-un sol de pace</h2>";
?>
- Ca sa vedeti rezultatul, salvati fisierul cu acest cod in directorul www din "wamp", de
exemplu cu denumirea teste.phpsi apelati in browser
adresa http://localhost/teste.php (programul WampServer trebuie sa fie pornit).
Perechea de etichete H2 determina formatarea datelor de iesire ca titlu HTML de nivel 2.
Scripturile PHP pot fi incluse si in fisiere cu cod HTML, ca in urmatorul exemplu (dar salvate
cu extensia ".php"):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test PHP</title>
</head>
<body>
<?php
echo "<h4> Exemplu de script PHP inclus in HTML</h4>" ;
?>
</body>
</html>
In browser va aparea :
Exemplu de script PHP inclus in HTML
Pot fi incluse si scripturi mai complicate ce contin zeci sau chiar sute de linii, atata timp
cat acestea sunt incluse intre cele doua linii specifice limbajului PHP:
<?php
?>
4. Documentarea unui script PHP
In afara de a furniza nume descriptive fisierelor ce contin scripturile dumneavoastra
PHP, e necesar sa includeti in interiorul fiecarui script atat comentarii care sa permita unui
cititor sa determine cu usurinta utilitatea scriptului, cat si alte informatii referitoare la
script. De exemplu, puteti include un comentariu care precizeaza numele autorului
scriptului si ce face acesta.
Iata un model sintactic pentru comentariile PHP:
// Scrieti aici comentariul dumneavoastra (pe o singura linie)
Dupa cum se poate vedea, un comentariu incepe cu doua caractere slash, urmate de un
spatiu. n continuare, linia contine comentariul dumneavoastra, care poate include orice
caractere doriti, inclusiv caractere speciale.
Iata un exemplu simplu de script PHP care include comentarii:
<?php
// Script de la MarPlo.net
// Acest script afiseaza un mesaj vizibil pentru utilizator.
echo "Acesta este un script foarte simplu.";
?>
Nota: Fiecare linie a comentariului trebuie sa inceapa cu doua caractere slash //.
Totusi, puteti crea un comentariu din mai multe linii si in alte moduri. Iata un exemplu:
/*
Acesta este un comentariu pe mai multe linii.
Poate fi alcatuit dintr-un numar oricat de mare de linii.
*/
Pentru a adauga un comentariu alcatuit din mai multe linii, scrieti la inceput
caracterele /*, iar la sfarsit trebuie sa se incheie cu caracterele */. Intre cele doua perechi
de caractere, puteti scrie orice text doriti, folosind oricate linii doriti.
5. Executarea unui script PHP
Dupa ce ati creat un script PHP, veti dori sa-l executati.
Sa luam un alt exemplu, ce contine cod HTML si comentarii:
Deschideti editorul dumneavoastra de texte si introduceti urmatoarele linii :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test PHP</title>
</head>
<body>
<?php
// Script test
// Acest script afiseaza un mesaj vizibil pentru utilizator.
echo "Primul meu script PHP.";
?>
</body>
</html>
Salvati fisierul cu numele test-script.php
Daca ati instalat un server de PHP pe calculatorul dumneavoastra, salvati fisierul in
directorul www al serverului.
Deschideti browserul si scrieti adresa URL http://localhost/test-script.php
Daca nu aveti instalat un server de PHP pe calculator, incarcati (prin FTP) fisierul testscript.php pe un server pe web unde este instalat PHP.
Dupa ce v-ati incarcat fisierul cu scriptul, sunteti pregatit pentru a obtine accesul la acesta.
Deschideti browserul Web si apelati adresa URL asociata scriptului dumneavoastra. Adresa
URL trebuie sa fie alcatuita din adresa URL identificata de administratorul serverului unde
ati incarcat scriptul, urmata de un slash (/), urmata de numele fisierului care contine
scriptul dumneavoastra. Daca adresa URL se incheie deja cu un caracter slash, nu trebuie
sa mai inserati inca un asemenea caracter inainte de numele scriptului dumneavoastra.
De exemplu, daca domeniul serverului unde ati incarcat scriptul
e http://www.marplo.net/ ca adresa URL a catalogului care contine scripturile
dumneavoastra PHP, puteti obtine accesul la scriptul dumneavoastra prin intermediul
adresei URL http://www.marplo.net/test-script.php
Daca ati tastat corect adresa URL a scriptului dumneavoastra, iar scriptul respectiv nu
contine erori, veti vedea datele de iesire ale scriptului dumneavoastra. Felicitari! Ati
devenit programator PHP!
In browser va aparea:
1. Tipul boolean
Variabilelele de tipul boolean pot lua doar doua valori : FALSE sau TRUE
Variabilele de alt tip decat boolean pot fi convertite la tipul boolean prin operatorul
cast (bool) sau (boolean), plasate inaintea valorilor, desi in general nu e nevoie de
aceasta converrire, valoarea fiind automat recunoscuta de PHP.
. Tipul integer
PHP foloseste doua categorii de numere: ntregi (tipul integer) si duble, cu virgula (tipul
float)
Variabilele integer reprezinta numerele intregi, ele pot fi specificate in format zecimal,
hexazecimal sau octal.
Numerele ntregi reprezinta numerele fara parte fractionara folosite la numarare, plus zero
si numerele negative. Cu alte cuvinte, n PHP termenul de ntreg are aceeasi semnificatie
ca si n matematica. De exemplu, numarul 100 poate fi reprezentat n PHP sub forma de
ntreg.
Scrierea numerelor PHP este simpla. Un ntreg PHP se obtine prin scrierea cifrelor care i
alcatuiesc valoarea. Daca valoarea este negativa, scrieti un semn minus imediat la stnga
numarului. Evitati sa scrieti spatii sau virgule ca parte a unui ntreg PHP.
Iata cteva exemple de numere PHP ntregi :
215678 - Numar in reprezentare zecimala
0x1A8;
- Numar in reprezentare hexazecimala (reprezinta: 1*16*16 + 10*16 +
8 = 424 (in zecimal))
067
- Reprezinta: 6*8 + 7 = 55 (in zecimal)
Valorile minime, respectiv maxime pe care le poate lua o variabila de tip integer depind de
sistemul de operare pe care ruleaza modulul PHP. De exemplu pentru un sistem Windows
valoarea unui integer se memoreaza pe 32 de biti: 31 bit pentru numar si un bit pentru
semn. In acest caz valorile unui intreg se afla in intervalul :-2 31 repectiv: 231. Daca incercam
sa folosim un integer cu valori care ies din acest inteval vor avea de-a face cu un fenomen
de depasire :integer overflow. In acest caz interpretorul PHP converteste acesta valoare
intr-o valoare de tip float (care are un interval mai extins de valori).
In PHP simpla impartire a doua valori intregi va produce ca rezultat o variabila de tip
float. Pentru a obtine doar partea intreaga acestui rezultat putem folosi operatorul
cast (int) in fata rezultatului.
Ex.: echo (int)8.7; (va returna 8)
Pentru a rotunji rezultatul la intregul cel mai apropiat de valoarea reala se poate folosi
functia round(), unde intre paranteze se adauga valoarea.
Ex.: echo round(8.7); (va returna 9)
3. Tipul float
Reprezinta variabile de tip real [numerele cu virgula], (n lb. engleza se foloseste
punctul zecimal n loc de virgula). De exemplu 2.5
In general, numerele duble (tipul float) sunt stocate folosindu-se formatul standard IEEE64, care furnizeaza 64 de biti. Acest format va permite sa stocati valori care pot merge
pna la 1,8 x 10 la puterea 308 sub forma de numere duble si furnizeaza aproximativ 14
cifre dupa punctul zecimal (sau cifre semnificative) de precizie.
Iata cteva exemple de numere duble (tipul float)
123.4567
1.2e3;
4. Tipul string
Reprezinta o insiruire de caractere, fiecare caracter este memorat pe 1 byte; setul de
caractere este limitat la 256 valori distincte. Dimensiunea sirurilor poate fi oricat de mare
in PHP, nu exista specificatii care sa limiteze numarul maxim de caractere dintr-un sir.
Spre deosebire de ntregi si de numere float, care contin cifre, sirurile pot contine orice
caracter. Ca atare, sirurile sunt utile pentru stocarea datelor care nu pot fi calculate,
precum nume, fraze si adrese.
In PHP, un sir poate fi declarat in mai multe feluri:
1) Un mod simplu de a declara un sir este prin delimitarea cu ghilimele simple ('
')
Daca dorim ca sirul sa contina caracterul ' va trebui sa inseram inaintea lui caracterul
escape \. Daca dorim ca sirul sa contina caracterul \ va trebui sa dublam acest caracter.
Acest comportament este exemplificat in exemplul urmator:
<?php
$var1 = 'Acesta este un sir de test';
echo 'Curs \'PHP\'';
echo '<br />Vrei sa stergi C:\\*.* ?';
echo '<br />Variabila var1=$var1';
echo "<br />Variabila var1=$var1";
?>
In browser va aparea:
Curs 'PHP'
Vrei sa stergi C:\*.* ?
Variabila var1=$var1
Variabila var1=Acesta este un sir de test
Observati diferenta dintre ultimile doua linii!
In penultima linie, unde s-a folosit gilimele simple pentru delimitarea sirului, variabila
$var1 nu este expandata adica nu este afisat valoarea variabilei var1=Acesta este un
sir de test ci exact textul scris (numele ei). Pentru a realiza afisarea valorii variabilei si
nu numele acesteia, se folosesc ghilimelele duble, precum in ultima linie a exemplului de
mai sus.
5. Tipul array
Reprezinta un vector de valori (care creaza o matrice, vezi Lectia 9 despre matrice),
fiecare element al matricei are asociat o cheie. Aceasta cheie va fi folosita ulterior la
identificarea unui element specific at matricei. In PHP tipul array se mai numeste si
tip map ordonat, deoarece elemente vectorului sunt ordonate dupa campul cheie.
Variabilele de tip array si lucrul cu acestea vor fi prezentate mai detaliat in lectiile
urmatoare. Iata un exemplu simplu de variabile array:
<?php
$fructe[0] = 'mere';
$fructe[1] = 'caise';
$fructe[2] = 'piersici';
?>
6. Tipul object
Reprezinta de fapt instanta unei clase declarate in PHP. O clasa este o structura care
contine variabile membru si functii membru.
Variabilele de tip object si lucrul cu acestea vor fi prezentate detaliat in lectiile urmatoare.
7. Tipul resource
Este un tip special de variabila care pastreaza o legatura spre resurse externe. Exemple
de resurse externe: manipulatori pentru deschidere de fisiere, conectare la baze de date,
compresia fisierelor, resurse COM, etc...
8. Tipul NULL
Reprezinta varibilele care nu au inca atribuita o valoare.
O variabila se considera a avea valoarea Null daca:
- este setata explicit prin atribuirea valorii NULL
- nu a fost asignata inca o valoare acestei variabile
- variabila a fost stearsa prin functia unset();
Putem afla tipul unei variabile folosind functia gettype() care returneaza un string (sir)
continand tipul variabilei cercetate.
Observati si studiati exemplul de mai jos
<?php
$var1 = TRUE;
$var2 = 100;
$var3 = 23.88;
$var4 = "Nume";
$var[5] = "fructe";
echo gettype($var1);
echo '<br />'.gettype($var2);
echo '<br />'.gettype($var3);
echo '<br />'.gettype($var4);
echo '<br />'.gettype($var[5]);
echo '<br />'.gettype($var6);
?>
In browser va aparea:
boolean
integer
double
string
string
NULL
echo $castigator;
?>
Rezultatul afisat va fi:
Cosmin
Exista si un alt tip de atribuire valoare de la o variabila la alta, denumita atribuire prin
referinta (folosind si caracterul "&"), aceasta de fapt leaga cele doua variabile, vedeti
tutorialul: Atribuire valoare prin referinta .
Forma valorii unei variabile se numeste tipul variabilei. Tipul unei variabile se poate modifica
daca atribuiti variabilei o valoare de un tip diferit fata de cel al valorii curente a variabilei.
De exemplu, instructiunea de atribuire
$x = 3;
Atribue variabilei $x tipul integer.
Daca instructiunea de atribuire
$x = 3.5;
va fi executata ulterior, variabila $x devine de tip float.
Desi instructiunile de atribuire din limbajul PHP si ecuatiile matematice folosesc ambele
semnul egal, cele doua notiuni sunt foarte diferite, deoarece atribuirea nu este acelasi
lucru cu egalitatea. Atribuirea este o operatie care inlocuieste o valoare cu o alta. Pe de
alta parte, egalitatea este o relatie intre doua valori. Cand doua valori sunt egale, acestea
raman egale pentru totdeauna. Totusi, puteti atribui o valoare unei variabile si ulterior
puteti atribui aceleiasi variabile o alta valoare. Cu alte cuvinte, egalitatea este
permanenta; atribuirea nu este.
Variabilele declarate mai sus sunt definite de utilizator. In PHP exista si alte variabile
numite "variabile predefinite" care rezida in nucleul PHP, sunt alocate automat de catre
modulul PHP, si sunt accesibile in program.
In continuare enumeram citeva dintre aceste "Variabile Superglobale" (accesibile din toate
scripturile PHP):
$GLOBALS contine referinte la variabilele globale disponibile in scriptul curent.
$_SERVER variabile definite de server sau relative la contextul in care se executa
scriptul curent
$_GET variabile furnizate scriptului prin adresa URL
$_POST variabile furnizate scriptului prin metoda HTTP POST (in general prin
formulare)
$_COOKIE variabile furnizate scriptului prin HTTP cookie
$_FILES furnizeaza scriptului fisierele uploadate
$_SESSION variabile care sunt inregistrate in sesiunea scriptului
2. Operatori
Pentru a va ajuta sa efectuati calcule si prelucrari ale datelor, PHP include o diversitate
de operatori si functii utile. Cand combinati valorile literale si variabilele cu operatori si
functii, construiti ceea ce este cunoscut sub numele de expresii.
Operatorii sunt simboluri specifice care realizeaza o actiune specifica in cadrul unei
expresii.
Operatorii actioneaza asupra variabilelor prezente in expresie. De exemplu in cadrul
expresiilor matematice vom folosi operatori aritmetici.
$a + $b
Adunare : a+b
$a - $b
Scadere : a-b
$a * $b
Inmultire: a*b
$a / $b
Impartire: a/b
$a%$a
$a +=$b
Echivalent cu: $a = $a + $b
$a -=$b
Echivalent cu: $a = $a - $b
$a *=$b
Echivalent cu: $a = $a * $b
$a /=$b
Echivalent cu: $a = $a / $b
$a++
Incrementare ; Ecivalent cu $a = $a +1
$a--
Decrementare; Echivalent cu $a = $a -1
3. Functii
In afara de operatori, PHP include functii care executa operatii utile. Iata unele exemple
de functii:
abs(x) - Returneaza valoarea absoluta a lui 'x'
ceil(x) - Returneaza valoarea 'x', rotunjita la intregul imediat superior
floor(x) - Returneaza valoarea 'x', rotunjita la intregul imediat inferior
max(x,y,...) - Returneaza valoarea maxima a unui set de valori
min(x,y,...) - Returneaza valoarea minima a unui set de valori
pow(x,n) - Returneaza numarul 'x', ridicat la puterea specificata 'n'
strftime(f) - Returneaza data curenta, formatata conform continutului parametrului
'f'
sqrt(x) - Returneaza radacina patrata a lui 'x'
- In afara de acestea, PHP include multe alte functii. Consultati site-ul www.php.net.
Majoritatea functiilor necesita una sau mai multe valori de intrare, cunoscute sub numele de
argumente. De exemplu, functia "sqrt" necesita un argument (aici este 'x') care specifica
valoarea a carei radacina patrata trebuie calculata.
Unele functii, precum min() si max(), preiau un numar nedefinit de argumente. Alte
functii nu necesita nici un fel de argumente. Pentru a putea folosi o functie in mod
corespunzator, trebuie sa cunoasteti:
Numele functiei
Actiunea functiei si valoarea returnata de aceasta, daca exista
Numarul argumentelor preluate de functie
Semnificatia fiecarui argument
Iata un exemplu simplu care foloseste o functie pentru calculul lungimii laturilor unui
patrat, daca este cunoscuta aria patratului:
$latura=sqrt($arie);
Retineti modul in care argumentul functiei este inclus intre paranteze, precum si modul
in care functia si argumentul sau sunt folosite intr-un mod asemanator cu o valoare literala
sau o variabila.
Iata un exemplu care prezinta modul de utilizare a functiei "max", care preia mai multe
argumente:
$punctaj_maxim=max($punctaj1, $punctaj2, $punctaj3);
Trmite formular
prelucreaza.
- Metoda GET trimite toate informatiile adunate ca parte a adresei URL; aceste informatii
sunt vizibile pentru utilizator.
- Metoda POST transmite informatia intr-o maniera invizibila pentru utilizator si poate
transmite o cantitate mai mare de date decat GET.
Folosind exemplul de formular de mai sus, metoda GET va transmite serverului o adresa
URL ca cea de mai jos:
http://www.marplo.net/script.php?nume=Popescu
iar in cazul folosirii metodei POST, in URL va aparea doar:
http://www.marplo.net/script.php
Metoda GET permite transmiterea unui volum limitat de informatii catre server; de
asemenea nu este recomandata folosirea acestei metode in cazul in care dorim sa
transmitem date personale(de exemplu parolele introduse intr-un formular pot fi vizualizate
de oricine in browserul de Web).
4. Receptionarea datelor de la un formular HTML
In general datele din formular sunt preluate de scriptul PHP prin urmatoarea formula:
$_POST['nume'] - daca este folosit method="post"
$_GET['nume'] - daca este folosit method="get"
- unde "nume este valoarea atributului name al elementului din formularul HTML.
Sa luam un exemplu practic de formular HTML care trimite date (prin method="post") la un
script PHP unde acestea vor putea fi vizualizate.
Salvam scriptul de mai jos intr-un fisier pe care-l numim "test-form.php"
<?php
$nume = $_POST['nume'];
$email = $_POST['email'];
$parola = $_POST['parola'];
echo "Nume = $nume";
echo "<br />E-mail = $email";
echo "<br />Parola = $parola";
?>
Scriem urmatorul cod HTML intr-un alt fisier "form.html", pe care-l salvam in acelasi director
cu scriptul PHP de mai sus.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> Test-Form </title>
</head>
<body>
Nume:
Email:
Parola:
Trmite datele
Daca doriti sa trimiteti unui script, prin intermediul adresei sale URL, caractere speciale
precum un semn al intrebarii, un semn egal sau un ampersand, se poate crea confuzie.
Pentru a functiona corect, un sir trebuie sa fie codificat URL. Pentru a codifica URL un sir,
caracterele speciale se nlocuiesc cu echivalentele lor hexazecimale, precedate de un
simbol procent (%). Pentru alte detalii, consultati lectia despre Utilizarea caracterelor speciale,
subtitlul 4 ( Conversia adreselor URL).
De exemplu, forma codificata URL a sirului "la multi ani!" este %22la multi ani%21%22.
Adresa URL rezultanta se numeste "sir de interogare" si nu poate contine spatii. Daca doriti
sa trimiteti un spatiu ca parte a unui sir de interogare, trimiteti n locul spatiului un semn
plus (+). Iata un exemplu de sir de interogare care codifica numele autorului acestui site:
http://www.marplo.net/script.php?autor=Mar+Plo
Unele dintre cele mai comune caractere speciale si echivalentele lor codificate URL sunt
prezentate n tabelul de mai jos:
Caracter special
*%2e
>
%3e
%5e
%7e
%2b
%2c
%2f
%3a
%3b
%3c
%3d
>
%3e
%5b
%5c
%5d
%5f
%7b
%7c
%7dc
tab
%09
spatiu
%20
%21
%22
%23
%24
%25
&
%26
%27
%28
%29
%40
%60
Variabila de mediu
Descriere
CONTENT_LENGTH
CONTENT_TYPE
DOCUMENT_ROOT
HTTP_HOST
HTTP_REFERER
HTTP_USER_AGENT
PATH
QUERY_STRING
REMOTE_ADDR
REMOTE_HOST
REMOTE_PORT
REQUEST_METHOD
REQUEST_URI
SCRIPT_FILENAME
SCRIPT_NAME
SERVER_ADMIN
SERVER_HOST
SERVER_PORT
SERVER_PROTOCOL
Puteti obtine accesul la variabila de mediu folosind variabila $_SERVER care este de
fapt un Array in care cheile elementelor sunt numele variabilelor de mediu
n aceasta lectie vom discuta despre constante si variabile dinamice. Puteti scrie
programe PHP utile si complexe fara a utiliza constante sau variabile dinamice. Daca
utilizarea constantelor poate facilita citirea programelor dumneavoastra, variabilele
dinamice au un efect contrar. Din acest motiv, n general se recomanda evitarea
variabilelor dinamice, mai ales de catre programatorii PHP ncepatori. Totusi, va puteri afla
n situatia de a lucra la un program PHP scris de o persoana care foloseste aceste variabile;
prin urmare, trebuie sa aveti cunostinte despre variabilele dinamice, indiferent daca le
folositi sau nu n propriile dumneavoastra programe.
1. Utilizarea constantelor
O constanta este pur si simplu o valoare care este... constanta, cu alte cuvinte o valoare
care nu se modifica, n acest sens, constantele sunt opusele variabilelor, deoarece
valoarea unei variabile se poate modifica pe durata executiei unui program.
Pentru a defini o constanta, folositi functia define().
Sa consideram urmatorul exemplu:
define("PI", 3.14159);
- Aceasta instructiune defineste constanta "PI", atribuindu-i valoarea 3.14159. Dupa ce a fost
definita, o constanta se poate folosi n cadrul unei expresii.
De exemplu, puteti calcula aria unui cerc dupa cum urmeaza:
$arie = PI * $raza * $raza;
- Observati ca referintele la o constanta nu folosesc simbolul dolarului. Astfel, o constanta
poate fi cu usurinta deosebita de o variabila. Multi programatori scriu numele constantelor
folosind numai majuscule, ceea ce le face si mai simplu de identificat.
O functie conexa, defined(), poate determina daca o anumita constanta a fost definita.
De exemplu, cu ajutorul urmatoarei instructiuni PHP puteri determina daca fost definita
constanta Pi:
echo defined("PI");
- Retineti ca numele care va fi testat este delimitat prin ghilimele duble.
Functia defined() returneaza valoarea 1 (unu) daca respectiva constanta a fost specificata;
n caz contrar, returneaza zero
In acest exemplu, instructiunea echo va afisa valoarea 1.
O variabila dinamica este denumita folosind doua simboluri ale dolarului ($$) si este
asociata cu o variabila obisnuita care are un nume similar si include un singur simbol al
dolarului.
In exemplul de mai sus, variabila dinamica $$film este asociata cu variabila obisnuita, dar
cu aceasi nume, $film.
Valoarea unei variabile obisnuite da numele (fara un simbol al dolarului) unei a doua
variabile ordinare, n exemplu nostru, a doua variabila obisnuita este $oameni_buni.
Valoarea acestei a doua variabile obisnuite este valoarea variabilei dinamice: n exemplu,
aceasta este valoarea 12. Deci valoarea variabiei dinamice $$film, si care va fi afisata de
functia "echo" este 12.
O variabila dinamica nu contine, practic, propria sa valoare. n schimb, contine
amplasamentul unde se poate gasi valoarea; cu alte cuvinte, numele unei alte variabile.
Daca variabilele dinamice vi se par derutante, asa e, variabilele dinamice sunt derutante.
Sunt rar folosite, uneori este posibila reducerea dimensiunilor unui program folosind una
sau mai multe variabile dinamice.
3. Lucrul cu tipuri de variabile
In lectia 2 ati invatat despre tipul variabilelor: Boolean, Integer, Float, String, Array,
Object, Resource, Null.
. O consecinta a caracterului dinamic al tipurilor de variabile din limbajului PHP este aceea
ca nu trebuie sa specificati tipul variabilelor. PHP determina tipul variabilei n functie de
tipul ultimei valori atribuite variabilei. Cu toate acestea, caracterul dinamic al tipurilor nu
va scuteste de problemele legate de tipuri. Trebuie sa cunoasteti tipurile acceptate si ceea
ce se ntmpla cnd n cadrul expresiilor se folosesc doua sau mai multe tipuri.
Sa luam n considerare urmatorul script PHP scurt:
$x = 1;
$y = 2.5;
$z = $x+$y;
echo $z;
- Instructiunea de atribuire care stocheaza o valoare n variabila $z este interesanta,
deoarece expresia din membrul drept include un operand Integer (ntreg) si un operand de
tip float. Ce valoare va aparea la iesire? Raspunsul corect este 3.5, o valoare de tip float.
Cnd o expresie aritmetica foloseste mai multe tipuri de variabile, PHP executa conversia
automata a tipului. Daca unul dintre operanzi este de tip float, PHP trateaza ceilalti operanzi
ca si cum ar fi de tip float, executa calculele si returneaza rezultatul ca valoare de tip float.
Este important sa ntelegeti faptul ca prin conversia de tip nu se modifica tipurile variabilelor
unei expresii; acestia sunt pur si simplu tratati ca si cum ar fi fost de un alt tip.
In cadrul exemplului, variabila $x ramne de tip nteger, chiar daca PHP o trateaza ca o
valoare de tip float pentru a executa calculele.
Sirurile (variabilele de tip string) pot fi de asemenea supuse unei conversii de tip. Sa
examinam urmatorul exemplu:
$x = 1;
$y = $x+ "inca 1";
echo $y
Rezultat
- Conversie fortata la ntreg
(real), (double),
- Conversie fortata la dublu
(float)
(string)
(array)
(object)
<?php
$x = 1.5;
$y = intval($x);
echo $x;
echo "<br />$y";
?>
Rezultatul afisat va fi:
1.5
1
Valoarea 1.5 este afisata ca valoare a variabilei $x, iar valoarea l este afisata ca valoare a
variabilei $y.
Tabelul urmator prezinta si alte functii foosite pentru a trata o variabila ca si cum ar fi de alt
tip.
Functie
Operatie
doubleval(),
floatval()
intval()
strval()
Nici conversia normala si nici cea fortata nu modifica tipul unei variabile. Ambele
mecanisme determina tratarea variabilelor doar in expresia respectiva ca si cum ar fi de un
alt tip.
Totusi, modificarea tipului unei variabile este posibila prin utilizarea functiei settype().
Acest procedeu este ilustrat n urmatorul exemplu:
$x = 1.5;
settype($x,"integer");
echo $x; // Va afisa valoarea 1
- Tipul variabilei $x va fi schimbat in "integer", astfel valoarea afisata a variabilei $x este 1,
deoarece fractia zecimala se pierde atunci cnd functia settype() converteste valoarea
float la o valoare ntreaga.
Valorile posibile pentru al doilea argument al functiei settype(), si anume argumentul care
specifica tipul dorit, sunt:
"integer"
"double"
"string"
"array"
"object"
Sa ne amintim din lectia 2 ca exista o functie conexa, gettype(), care returneaza un
sir care indica tipul variabilei specificate. Scriptul urmator afiseaza "integer", care indica
tipul variabilei $x:
$x = 1;
echo gettype($x);
1. empty($var)
- Returneaza TRUE daca variabila "$var" e considerata goala sau cu valoare vida, altfel,
FALSE. Functia "empty()" va returna TRUE, daca $var are una din urmatoarele valori: 0, "",
"0", NULL, FALSE, array().
<?php
$var = '0';
if (empty($var)) {
echo '$var are valoare nula sau zero';
}
?>
2. floatval($var)
- Returneaza valoarea float (numar cu zecimale) a lui "$var", care poate fi numar,
ecuatie sau sir. Similara este si functia "doubleval()".
<?php
$var = '123.456';
echo floatval($var);
?>
// 123.456
3. get_defined_vars()
- Returneaza un array multidimensional ce contine o lista cu toate variabilele definite.
<?php
$arr = get_defined_vars();
print_r($arr["_POST"]);
// Returneaza toate variabilele $_POST
?>
4. get_resource_type(resursa)
- Returneaza un sir cu tipul resursei din parametru.
<?php
$c = mysql_connect();
echo get_resource_type($c);
$fp = fopen("marplo.net", "w");
echo get_resource_type($fp);
?>
// mysql link
// file
5. gettype($var)
- Returneaza tipul variabilei "$var". Un sir cu unul din urmatoarele tipuri: boolean,
integer, double, string, array, object, resource, NULL, unknown type.
<?php
$var1 = 8;
echo gettype($var1);
// integer
$var2 = "8";
echo gettype($var2);
// string
$var3 = array(8=>'http://www.marplo.net');
echo gettype($var3);
// array
$var4 = true;
echo gettype($var4);
?>
// boolean
6. intval($var)
- Transforma valoarea variabile "$var" in numar natural.
<?php
$var1 = 8.9;
echo intval($var1);
// 8
$var2 = "08";
echo intval($var2);
// 8
$var3 = -7.8;
echo intval($var3);
?>
// -7
7. is_array($var)
- Returneaza TRUE daca "$var" e o matrice (Array), in caz contrar, FALSE.
<?php
$lectii = array('http://www.marplo.net', 'php', 'html', 'css');
if (is_array($lectii)) {
echo '$lectii e o matrice';
}
?>
8. is_bool($var)
- Returneaza TRUE daca "$var" e de tip "boolean", in caz contrar, FALSE.
<?php
$var = true;
if (is_bool($var)) {
echo '$var e de tip boolean';
}
?>
9. is_float($var)
- Returneaza TRUE daca "$var" e un numar cu virgula (cu zecimale), in caz contrar,
FALSE. Acelasi rezultat il dau si functiile "is_double()" si "is_real()".
<?php
$nr = 78.9;
if (is_float($nr)) {
echo '$nr e un numar cu zecimale';
}
?>
10. is_int($var)
- Returneaza TRUE daca "$var" e un numar natural (fara zecimale), in caz contrar,
FALSE. Acelasi rezultat il dau si functiile "is_integer()" si "is_long()".
<?php
$nr = 78;
if (is_int($nr)) {
echo '$nr e un numar natural';
}
?>
11. is_null($var)
- Returneaza TRUE daca "$var" are valoarea nula, in caz contrar, FALSE.
<?php
$var = null;
if (is_null($var)) {
echo '$var are valoarea NULL';
}
?>
12. is_numeric($var)
- Returneaza TRUE daca "$var" e un numar (cu sau fara zecimale), in caz contrar,
FALSE.
<?php
$nr = 078.9;
if (is_numeric($nr)) {
echo '$nr e un numar';
}
?>
13. is_object($var)
- Returneaza TRUE daca "$var" e o variabila de tip obiect, in caz contrar, FALSE.
<?php
// Se creaza o functie de lucru
function get_vars($obj) {
// Daca variabila $obj e un obiect, returneaza tipul de valori din ea
if (is_object($obj)) {
return var_dump($obj->get_vars);
}
else {
return '$obj nu e de tip obiect';
}
}
// Defineste o clasa si-i adaga un eveniment cu apel la functie
$obj = new stdClass();
$obj->get_vars = array('cursuri', 'tutoriale', 'jocuri')
// Afiseaza rezultatul apelarii functiei cu $obj
echo get_vars($obj);
// array(3) { [0]=> string(7) "cursuri" [1]=> string(9)
"tutoriale" [2]=> string(6) "jocuri" }
?>
14. is_string($var)
- Returneaza TRUE daca "$var" e un sir, in caz contrar, FALSE.
<?php
$var = 'sir test';
if (is_string($var)) {
echo '$var e un sir';
}
?>
15. isset($var)
- Returneaza TRUE daca "$var" e setata (exista in domeniul de lucru, indiferent de
valoarea ei), in caz contrar, FALSE.
<?php
$v = '';
if (isset($v)) {
echo 'Variabila exista';
}
?>
16. print_r(array)
- Afiseaza un sir care prezinta cheile si elementele dintr-o matrice (array). Daca
parametru "array" e un sir sau numar, va afisa valoarea lui.
<?php
$aray = array('site'=>'www.marplo.net', 'php'=>'tutoriale');
print_r($aray);
// Array ( [site] => www.marplo.net [php] => tutoriale )
$var = 'Un sir oarecare';
print_r($var);
// Un sir oarecare
?>
17. serialize($var)
- Stocheaza valoarea /valorile variabilei "$var" intr-un sir. Variabila din parametru poate
fi si de tip Array sau Object. Aceasta functie este utila mai ales pentru stocarea ori
transmiterea datelor unei matrice sau obiect, mentinandu-le structura.
- In cazul obiectelor, se face "serialize" la instanta obiectului (vezi exemplul urmator, de la
"unserialize()"), si sunt salvate in sir variabilele si valorile lor dar nu si metodele (functiile),
ci doar numele lor.
<?php
$aray = array('site'=>'www.marplo.net', 'php'=>'tutoriale');
// Transforma si adauga elementele /valorile variabilei $aray intr-un sir specific
$sir_var = serialize($aray);
echo $sir_var;
// a:2:
{s:4:"site";s:14:"www.marplo.net";s:3:"php";s:9:"tutoriale";}
// Creaza o variabila cu sirul serialized identic de mai sus
$sir_serialized = 'a:2:{s:4:"site";s:14:"www.marplo.net";s:3:"php";s:9:"tutoriale";}';
// Transforma acest sir in tipul initial de variabila
$get_var = unserialize($sir_serialized);
print_r($get_var);
// Array ( [site] => www.marplo.net [php] => tutoriale )
?>
18. unserialize(sir)
// double
20. strval($var)
- Preia intr-un sir valoarea variabilei "$var".
<?php
$var = 7*8;
echo strval($var);
?>
// 56 (sir)
21. unset($var)
- Distruge variabila "$var".
<?php
$aray = array('key'=>'test', 'php'=>'functii');
print_r($aray);
// Array ( [key] => test [php] => functii )
// Distruge un element din matrice
unset($aray['key']);
print_r($aray);
// Array ( [php] => functii )
?>
22. var_dump($var)
- Afiseaza informatii detaliate despre variabila din parametru, cum ar fi: tipul ei,
numarul de elemente si valoarea (valorile) din ea.
<?php
$aray = array('key'=>'test', 'php'=>'functii');
var_dump($aray);
// array(2) { ["key"]=> string(4) "test" ["php"]=> string(7)
"functii" }
$sir = 'Sir test';
var_dump($sir);
?>
// 'Sir test'