BluePink
XHost

Gazduire site-uri web nelimitata ca spatiu si trafic lunar la doar 15 eur / an. Inregistrare domenii .ro .com .net .org .info .biz .com.ro .org.ro la preturi preferentiale. Pentru oferta detaliata accesati site-ul BluePink

13. JavaScript

13. 1. Ce este JavaScript

In acceptiunea Microsoft, un script (sau program batch) este un set de instructiuni ce trebuie executate de o aplicatie (cum ar fi un browser de internet) sau un program utilitar (precum cmd - command prompt - din Windows). Regulile dupa care este construit scriptul formeaza limbajul scriptului si depind de aplicatia in cauza.

JavaScript este un limbaj de script destinat browserelor de internet, permitand imbunatatirea aspectului paginilor web si adaugarea de continut interactiv. JavaScript este cel mai popular limbaj de script din internet si functioneaza in majoritatea browserelor, precum: Internet Explorer, Mozilla Firefox, Netscape, Opera.

Instructiunile scriptului se executa imediat ce sunt citite de browser - de aceea spunem ca limbajul JavaScript este unul interpretat. In limbajele compilate, programul se executa numai dupa ce a fost citit in intregime si compilat ("inteles" de catre calculator).

JavaScript este un limbaj client-side - in cazul unei comunicari client-server, instructiunile sunt executate local in calculatorul clientului - si nu server-side (pe server).

Limbajul Netscape JavaScript este diferit de urmatoarele:

Java, creat de Sun Microsystems - un limbaj de programare compilat, mult mai complex si puternic, din aceeasi categorie cu C si C++. JavaScript este mai accesibil incepatorilor, putand fi folosit fara cunostinte avansate de programare.
VBScript, JScript, create de Microsoft - limbaje de script similare JavaScript din punct de vedere al conceptiei si domeniului de aplicare, permit crearea de pagini web interactive.

JavaScript a fost creat de catre Brendan Eich de la Netscape sub numele de Mocha, apoi LiveScript. Dupa aparitia revolutionarului limbaj Java (mai 1995), Netscape a lansat o noua versiune a browserului Netscape Navigator (2.0, in decembrie 1995), care putea rula si aplicatii Java si a redenumit LiveScript in JavaScript, in speranta ca programatorii il vor folosi alaturi de Java. Atat Java, cat si JavaScript au o sintaxa apropiata de cea a limbajului C.

Ce putem face cu JavaScript ? Dintre cele mai frecvente utilizari ale limbajului JavaScript, mentionam:

Afisarea unor texte in pagina HTML - cum ar fi: nume de persoane, data si ora exacta, etc.
Executarea unui JavaScript ca reactie la anumite evenimente - de exemplu, cand mouse-ul este deasupra unei imagini din pagina, se schimba imaginea cu alta sau apare un anumit mesaj.
Schimbarea continutului paginilor web - ca raspuns la anumite actiuni ale utilizatorului si/sau introducerea anumitor date.
Validarea datelor - se poate verifica daca datele introduse de vizitator intr-un formular sunt corecte, asigurandu-ne ca serverul va accepta aceste date.
Detectarea browserului vizitatorului - permite afisarea unei anumite versiuni a paginii web, adaptata browserului folosit de vizitator.
Crearea de cookies - mici fisiere text stocate pe harddisk-ul vizitatorului de catre browser, atunci cand JavaScript ii cere sa faca acest lucru. Un cookie contine diferite informatii: numele vizitatorului, browserul, preferinte de navigare, etc. Acestea permit personalizarea paginii pentru fiecare vizitator in parte. La urmatoarea vizitare a paginii, browserul citeste fisierul cookie de pe harddisk si poate afisa, de exemplu, un mesaj de bun venit.

Daca, din motive de securitate, JavaScript este dezactivat in browser, activarea JavaScript se face astfel:

in Internet Explorer: Tools > Internet Options >Security > Custom Level > in lista de optiuni derulam in jos pana la Scripting > Active Scripting si bifam Enable (in Internet Explorer);
in Netscape: Edit > Preferences > Advanced Category > Scripts & Plug-ins > Enable JavaScript > OK.

13. 2. Obiecte, proprietati, metode si evenimente

In sens filozofic, un obiect este orice lucru, entitate sau fiinta. In informatica, obiectul este un ansamblu de informatii digitale, cu care se poate lucra intr-un anumit scop. Exemple: documente, formulare, butoane, ferestre si altele. Fiecare obiect detine anumite proprietati si metode.

Proprietatea este o caracteristica asociata obiectului si are o anumita valoare. De exemplu, proprietatile unui buton si valorile respective pot fi: lungimea = 50 pixeli, latimea = 16 pixeli, culoarea = "white", eticheta (textul de pe buton) = "Apasa aici", etc.

Metoda asociata obiectului este o operatie ce se poate efectua cu sau de catre acel obiect. De exemplu, asupra unei ferestre se poate efectua operatia "inchidere" - aceasta este o metoda asociata obiectului fereastra.

Pentru a stabili in mod clar carui obiect apartin proprietatile si metodele, denumirea acestora este formata, in ordine, din: numele obiectului, un punct si numele proprietatii / metodei respective. Exemple:

document.write() este metoda write a obiectului document (folosita pentru a scrie ceva in document);
adresa_textfield.value este proprietatea value a obiectului adresa_textfield (adica textul din caseta text adresa_textfield)

Mai mult, deoarece un obiect poate contine alte obiecte (exemplu: formularul "frm" contine caseta text "adresa_textfield"), uneori sunt necesare referiri de genul: frm.adresa_textfield.focus(), ceea ce inseamna: "metoda focus() a obiectului adresa_textfield, din obiectul frm".

Un eveniment este o actiune care poate fi detectata de catre JavaScript. Exemple: clic cu mouse-ul, dublu clic, plasarea mouse-ului deasupra unei imagini, apasarea unei taste, scrierea intr-o caseta text dintr-un formular, activarea unui element (focus) si altele.

Elementele HTML din paginile web au asociate evenimente care pot declansa functii JavaScript, prin asa-numitele atribute "event handler". Un atribut HTML de tip "event handler" ("gestionar de evenimente") trateaza un eveniment prin asocierea cu o functie JavaScript, care se executa la aparitia evenimentului (exemplu: la clic pe un buton, este afisat un mesaj). Datorita detectarii si tratarii evenimentelor de catre JavaScript, paginile web devin dinamice si interactive.

Dintre atributele "event handler" uzuale, mentionam:

• onClick - pentru clic pe elementul HTML respectiv. Se foloseste in majoritatea etichetelor HTML.
• onDblClick - pentru dublu clic pe elementul HTML respectiv. Se foloseste in majoritatea etichetelor HTML.
• onMouseOver - pentru plasarea mouse-ului deasupra elementului respectiv. Se foloseste in majoritatea etichetelor HTML.
• onSubmit - pentru apasarea butonului "submit" (trimitere) dintr-un formular. Se foloseste numai in etichetele <FORM> şi <BODY>.
• onReset - pentru apasarea butonului "reset" (anulare) dintr-un formular. Se foloseste numai in etichetele <FORM> şi <INPUT>.
• onKeyPress - pentru apasarea unei taste. Se foloseste in majoritatea etichetelor HTML.

13. 3. Cum se insereaza un JavaScript

Scriptul se insereaza in pagina incadrat intre etichetele <script> ... </script>. Exemplu:

<html> <body>
<script type="text/javascript">
document.write("Bine ati venit !")
</script>
</body> </html>

In pagina va apare textul: "Bine ati venit !", datorita instructiunii JavaScript document.write.

Nu este obligatoriu sa scriem instructiunile scriptului pe linii separate, dar daca scriem mai multe instructiuni pe aceeasi linie, acestea se separa printr-o semicoloana (caracterul ";"). De asemenea, putem insera spatii in plus, pentru a usura citirea codului (de exemplu: rez = x * y in loc de rez=x*y) - JavaScript le va ignora.

Putem adauga comentarii la script - linii care nu sunt considerate instructiuni - cu rol explicativ. Precedam fiecare comentariu cu un dublu slash "//".

Atentie - JavaScript este case-sensitive (face diferenta intre litere mici si majuscule) ! Aceasta inseamna ca numele obiectelor (liste, functii, variabile, etc.), trebuie pastrat intocmai in tot codul JavaScript. De exemplu, "OptionList" este altceva decat "Optionlist".

In unele cazuri (foarte rare), anumite browsere mai vechi afiseaza in pagina instructiunile scriptului in loc sa le execute. Pentru a evita aceasta neplacere, inchidem instructiunile scriptului intre comentarii HTML, ca in urmatorul exemplu:

Aici, cele doua slash-uri "//" reprezinta un comentariu JavaScript si au rolul de a impiedica interpretarea acestei linii de catre JavaScript.

13. 4. Unde se insereaza un JavaScript

Exista trei locuri in care se declara un JavaScript:

In sectiunea body a paginii se declara cu predilectie scripturi care se executa automat la incarcarea paginii (desi ele functioneaza la fel de bine si din sectiunea head).
In sectiunea head a paginii se declara functii JavaScript, care urmeaza sa se execute numai ca raspuns la un anumite evenimente sau cand sunt apelate. Declararea functiei in head asigura citirea ei de catre browser inainte de a fi apelata. In exemplul urmator, la trecerea cu mouse-ul peste imaginea unui hotel, apare un mesaj:
<html><HEAD> <title>hoteluri venus</title>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">

</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="hotel_vulturul.gif" ALT="hotel Vulturul" onMouseOver=mesaj()>
</body>
</html>
Atributul onMouseOver din eticheta <IMG> este de tip "event handler". El asociaza evenimentul "mouseover" (trecerea mouse-ului peste imagine) cu functia mesaj(), care afiseaza mesajul din figura.
Intr-un fisier extern - un fisier text cu extensia .js, daca dorim rularea scriptului in mai multe pagini, fara a declara scriptul in fiecare dintre ele. Aceasta metoda are si avantajul ca instructiunile scriptului raman ascunse (nu apar in codul sursa HTML al paginii), iar codul paginii este mai scurt. Pentru aceasta se creaza cu Notepad un fisier .js care contine numai instructiunile respective (neincadrate intre <script>...</script>) si/sau declaratii de functii si se apeleaza scriptul din pagina, din locul unde ar fi trebuit sa existe in mod normal, dupa modelul:
<script src="xxx.js"></script>
Astfel, codul din exemplul de mai sus devine:
<html> <HEAD> <title>hoteluri venus</title>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="script_pentru_mesaj.js">
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="hotel_vulturul.gif"ALT="hotel Vulturul" onMouseOver=mesaj()>
</body>
</html>
Aici, fisierul extern care contine scriptul este "script_pentru_mesaj.js" si contine numai declaratia functiei mesaj():

In plus, functia mesaj() poate fi apelata din orice alta pagina care inglobeaza scriptul extern cu <script src="script_pentru_mesaj.js">.

13. 5. Variabile

Programele lucreaza cu date stocate in anumite locuri din memoria calculatorului. O variabila de program este o locatie de memorie creata de un program, pentru a stoca date de un anumit tip (numere, texte, valori logice, etc.) - pe scurt, un "container" de date. Orice variabila este simbolizata printr-un nume si contine o anumita valoare, care se poate schimba pe parcursul executarii programului. La terminarea programului, variabila dispare.

Numele variabilei este case-sensitive (se tine cont de litere mici si de majuscule, de exemplu: a si A sunt variabile diferite !) si incepe obligatoriu cu o litera sau cu caracterul "_" (underscore).

Crearea unei variabile JavaScript se numeste declarare. Iinstructiunea de declarare are forma: var nume_variabila = valoare (sau direct: nume_variabila = valoare), unde valoare este valoarea initiala care dorim sa o aiba variabila nou creata. In functie de tipul de data al valorii (numar, text, etc.) programul determina automat si fixeaza tipul de data al variabilei (de exemplu, prin instructiunea var a = 5, se declara variabila a, de tip intreg - deoarece 5 este un numar intreg).

Instructiunea de atribuire permite schimbarea valorii unei variabile si are forma: nume_variabila = valoare.

In exemplul urmator, numerele introduse de utilizator sunt retinute de doua variabile x si y, iar rezultatul inmultirii acestora in variabila rez:

<html> <head> <title>Exemplificare variabile</title> </head> <body>
<script type="text/javascript">
var x = parseInt(prompt("x = ","0"))
var y = parseInt(prompt("y = ","0"))
rez=x*y //rez este automat creata ca variabila de tip numeric
alert("x*y = "+parseInt(rez))
document.write("Gata. Apasati Refresh pentru a incerca din nou ...")
</script>
</body> </html>

In loc de x, y si rez puteam folosi o singura variabila nr:

<html> <head> <title>Exemplificare variabile</title> </head> <body>
<script type="text/javascript">
var nr = parseInt(prompt("x = ","0")) //variabila nr primeste ca valoare primul numar introdus
nr = nr * parseInt(prompt("y = ","0")) //nr primeste ca valoare, vechea valoare a lui nr inmultita cu al doilea numar introdus
alert("x*y = "+parseInt(nr))
document.write("Gata. Apasati Refresh pentru a incerca din nou ...")
</script>
</body> </html>

13. 6. Instructiunea conditionala IF

Instructiunea conditionala IF determina executarea uneia sau alteia dintre doua variante ale programului, in functie de indeplinirea sau nu a unei conditii. Ea are una din formele:

if (conditie)
{ instructiuni1 }
else
{ instructiuni2 }

sau

if (conditie)
{ instructiuni1 }

Initial se evalueaza expresia conditionala dintre paranteze. Daca rezultatul este TRUE (adevarat), se trece la executarea instructiunilor din prima ramura a if-ului (instructiuni1). In caz contrar, se executa instructiunile din ramura else (instructiuni2) sau, daca ramura else nu exista, se trece mai departe la urmatoarea instructiune de dupa if (cazul al doilea de mai sus)

Pentru exemplificare, vezi "Detectarea browserului vizitatorului" in capitolul urmator.

13. 7. Instructiuni de ciclare

Prin ciclare intelegem repetarea uneia sau mai multor instructiuni. Ciclarea este de trei tipuri: cu contor, cu test initial si cu test final.

1. CU CONTOR: repetarea se face de un numar fixat de ori (stabilit dinainte). Se foloseste o variabila numita contor. Se executa instructiunea (instructiunile) pentru fiecare din valorile contorului, intre o valoare initiala si una finala. Pentru ciclarea cu contor se foloseste o instructiune for, de forma:

for (i = valoare_initiala; i <= valoare_finala; i++)
{ instructiuni }

Pentru exemplificare, vezi "tabla inmultirii cu 9", prezentata la "Functii" in acest capitol.

2. CU TEST INITIAL: instructiunile se repeta cat timp o anumita conditie este indeplinita. Se foloseste instructiunea while, care are forma:

while ( conditie )
{ instructiuni }

Astfel: mai intai se evalueaza rezultatul expresiei logice (conditie). Daca acesta este TRUE (adevarat), se executa instructiunile indicate, dupa care se evalueaza din nou expresia. Daca rezultatul este FALSE, se trece la urmatoarea instructiune din program, de dupa while.

Exemplu: se cere utilizatorului sa introduca prima litera a alfabetului. Daca litera introdusa este "a" (sau "A"), se afiseaza mesajul " >>> CORECT !"; in caz contrar, se afiseaza " ... gresit ! " si se reia introducerea.

<html> <head> <title>Exemplificare ciclu while</title> </head> <body>
<script type="text/javascript">
var litera = prompt("Alfabetul incepe cu: ","x")
var lmica = litera.toLowerCase()
document.write("Prima litera a alfabetului este:")
document.write("<br>")
while(lmica != "a")
{
   document.write(litera + " ... gresit ! ")
   litera = prompt("Alfabetul incepe cu: ","x")
   lmica = litera.toLowerCase()
}
document.write(litera + " >>> CORECT !")
</script>
</body> </html>

In exemplul de mai sus, se folosesc variabilele de tip sir de caractere litera si lmica. Prima contine litera introdusa de utilizator, iar a doua, aceeasi litera transformata in litera mica (cu ajutorul metodei toLowerCase() a obiectului litera). Cu ajutorul expresiei logice (lmica != "a") se verifica daca lmica este diferita de "a", caz in care se executa cele 3 instructiuni din ciclul while. Cand utilizatorul introduce "a" sau "A", conditia de dupa while nu mai este indeplinita si se continua cu urmatoarea instructiune de dupa ciclul while - si anume document.write("\n"+litera+" >>> CORECT !").

3. CU TEST FINAL: instructiunile se repeta pana cand o anumita conditie este indeplinita. Se foloseste instructiunea do ... while, care are forma:

do
{ instructiuni }
while (conditie)

Ciclul cu test final este asemanator celui cu test initial, diferenta fiind ca evaluarea conditiei de continuare se face dupa executarea instructiunilor, si nu inainte, ca la ciclul cu test initial.

In practica, putem folosi oricare din cele doua tipuri de ciclu (initial si final). Totusi, se recomanda ciclul cu test final daca se doreste executarea instructiunilor cel putin o data. In cazul ciclului cu test initial, este posibil ca instructiunile sa nu se execute niciodata (daca din start conditia nu este indeplinita !).

Vom relua in continuare exemplul de mai sus, folosind de aceasta data ciclul cu test final:

<html> <head> <title>Exemplificare ciclu while</title> </head> <body>
<script type="text/javascript">
var litera, lmica
document.write("Prima litera a alfabetului este:")
document.write("<br>")
do
{
   litera = prompt("Alfabetul incepe cu: ","x")
   lmica = litera.toLowerCase()
   if (lmica != "a")
   {
      document.write(litera+" ... gresit ! ")
   }
}
while(lmica != "a")
document.write(litera+" >>> CORECT !")
</script>
</body> </html>

13. 8. Functii JavaScript

Cand browserul citeste codul HTML al paginii, el executa imediat toate instructiunile JavaScript intalnite intre etichetele <script> si </script>, cu exceptia instructiunii "function", care semnifica o declaratie de functie. Functiile sunt secvente de instructiuni care se executa numai daca se comanda acest lucru. O declaratie de functie este de forma:

function nume_functie(parametri)
{
instructiuni
}

function nume_functie()
{
instructiuni
}

dupa cum functia are parametri, respectiv nu are.

Comanda de executare a functiei JavaScript se gaseste fie intr-o instructiune JavaScript, fie intr-o eticheta HTML si se numeste apelul functiei. Apelul functiei este format din numele acesteia, urmat de lista parametrilor actuali intre paranteze (daca exista) sau doar de paranteze daca functia nu are parametri: nume_functie(parametri) respectiv nume_functie().

Parametrii functiei sunt anumite valori sau variabile cu care lucreaza functia. Mai multe despre parametrii, apelul si rezultatul unei functii aflam studiind exemplul urmator. In acest exemplu, pentru a afisa tabla inmultirii cu 9, este apelata de zece ori o functie cu parametri, care inmulteste doua numere:

<html>
<head>
<title>Exemplificare functie cu parametri - tabla inmultirii cu 9</title>
<script type="text/javascript">
   function inm(x,y)
   {
      rez=x*y
      return rez
   }
</script>
</head>
<body>
<font color="#990033"><b>Tabla inmultirii cu 9:</b></font><br>
<script type="text/javascript" language="javascript">
   for(i=1;i<=10;i++)
   {
      document.write("9 x "+parseInt(i)+" = "+parseInt(inm(9,i)))
      document.write('<br>');
   }
</script>
</body>
</html>

Parametrii unei functii sunt de doua feluri: formali si actuali. Parametrii formali apar in declaratia functiei si au rolul de a descrie operatiile ce trebuie efectuate. Parametrii actuali apar in apelul functiei si sunt valorile cu care lucreaza efectiv functia.

Parametrii formali din declaratia functiei inm sunt x si y. Acestia se inmultesc, iar rezultatul se atribuie variabilei rez ( rez=x*y).

Parametrii actuali sunt 9 si i si se transmit functiei inm in momentul apelului inm(9,i). Cu alte cuvinte, x si y devin, pe rand (respectiv): 9 si 1, 9 si 2, ... , 9 si 10 (deoarece i ia pe rand valorile: 1, 2, ..., 10). Apelul inm(9,i) se realizeaza in total de zece ori, iar rezultatele returnate de functie sunt: 9, 18, ..., 90 si sunt afisate cu document.write.

Nu toate functiile returneaza valori. Daca functia returneaza o valoare (ca in cazul nostru), se introduce in declaratie instructiunea return valoare (aici, return rez), iar apelul functiei semnifica rezultatul acestui apel, care este folosit mai departe. Astfel, inm(9,i) este rezultatul inmultirii lui 9 cu i; el este folosit in functia parseInt, care transforma numarul inm(9,i) in sirul de caractere parseInt(inm(9,i)), care este afisat cu document.write("9 x "+parseInt(i)+" = "+parseInt(inm(9,i))).

Incercati:

1. In interiorul carei etichete HTML se insereaza un JavaScript ?

a) <head>
b) <body>
c) ambele variante
d) nici una din variantele de mai sus

2. Care din instructiunile de mai jos scrie "Bine ati venit" in pagina ?

a) alert("Bine ati venit")
b) document("Bine ati venit")
c) alert="Bine ati venit"
d) message("Bine ati venit")
e) nici una din variantele de mai sus

3. Cum folosim in pagina un script extern aflat in fisierul "mesaj.js" ?

a) <script href="mesaj.js">
b) <script name="mesaj.js">
c) <script src="mesaj.js">
d) nici una din variantele de mai sus

4. Un fisier JavaScript extern trebuie sa contina eticheta <script> ?

a) da
b) nu

5. Cum scriem cele doua versuri pe doua randuri, intr-o caseta de mesaj (vezi figura) ?

a) alert("La steaua care-a rasarit\nE-o cale-atat de lunga ...")
b) alert("La steaua care-a rasarit"+"E-o cale-atat de lunga...")
c) alert("La steaua care-a rasarit" +"/nE-o cale-atat de lunga ...")
d) alert="La steaua care-a rasarit"+"E-o cale-atat de lunga ..."
e) nici una din variantele de mai sus

6. Cum se declara corect functia f() ?

a) function f()
b) function:f()
c) function=f()
d) nici una din variantele de mai sus

7. Cum se apeleaza corect functia f() ?

a) f()
b) execute f()
c) run f()
d) call f()
e) nici una din variantele de mai sus

8. In care din variantele urmatoare se executa instructiunea alert("Ai nota 10") numai daca variabila nota are valoarea 10 ?

a) if (nota=10){alert("Ai nota 10")}
b) if nota=10 then {alert("Ai nota 10")}
c) if (nota==10){alert("Ai nota 10")}
d) if (nota==10) then {alert("Ai nota 10")}
e) nici una din variantele de mai sus

9. Cum afisam in pagina textul "JavaScript" (puteti alege mai multe variante corecte, una singura sau nici una) ?

a) document.write("JavaScript")
b) var text="Java"
text+="Script"
document.write(text)
c) alert("Java"+"Script")
d) nici una din variantele de mai sus