Tutorial complet JavaScript (prima parte)
Sa spun cate ceva si despre FUNCTII javascript:
Sintaxa pentru crearea unei functii este urmatoarea:
| function NumeFunctie(var1,var2,...,varX) { ceva cod } |
In caz ca nu are parametrii numele functiei va trebui urmat de paranteze ( ).
| function NumeFunctie() { ceva cod } |
Iata un exemplu soarte simplu de functie fara parametrii:
| <html> <head> <script type="text/javascript"> function ScrieText() { alert("Text de PROBA"); } </script> </head> <body> <form> <input type="button" value="Apasa" onclick="ScrieText()" > </form> </body> </html> |
In acest exemplu nu am mai folosit fisier JS extern si am definit functia in zona de <HEAD> a documentului HTML. La apasarea butonului se va executa functia ScrieText. Inlocuiti codul intr-un fisier .txt, schimbati extensia fisierului in .html si observati cum functioneaza.
Functiile cu parametri sunt si ele foarte utile. Sa presupunem ca avem nevoie de o functie care sa faca anumite operatii cu anumiti parametrii. Nu vom sta sa scriem functia de cate ori avem nevoie sa efectuam operatia asupra altor parametrii, ci vom folosi doar o alta adresare a functiei, folosind parametrii.
| function prod(a,b) { x=a*b; return x; } |
Functia face produsul a doua numere. Ca sa atribuim unei variabile produsul a doua numere este suficient sa adresam functia prod (pe care am definit-o) si sa indicam si cele 2 numere intre paranteze.
| produs=prod(5,10); // face produsul celor 2 nr. |
Pentru o mai buna intelegere a functiilor trebuie sa lucram mai mult. Voi incerca sa explic mai multe despre functii pe masura ce vom avansa in tutorial..
Link-uri inteligente javascript
Cu ajutorul Javascript putem sa facem link-urile mai "destepte", adica sa primim mesaje de avertizare, sa duca la o pagina sau la alta in fuctie de anu ite conditii, s.a.m.d.
Exemplul urmator este un exemplu de link "destept" dar si un bun exercitiu de lucru cu functii.
Pentru a putea sa controlezi un link cu javascript trebuie sa folosim o metoda de marcare a link-ului respectiv. Cel mai uzual este sa folosim un ID si apoi, in Javascript, sa folosim document.getElementById("") .
Sa zicem ca dorim sa controlam un link din urmatoarea pagina:
<html> <h1> Exemplu link destept </h1> <h2 align="center"> <a href="index.html " id="redirect"> Link "destept" JavaScript </a> </h2> </body> |
Link-ului destept i-am atasat un ID, putand astdel sa-l folosim in fisierul javascript. Vom incerca sa controlam accesul la pagina spre care face link-ul trimitere. Codul din fisierul script.Js:
window.onload = functieI; /* Dupa ce se incarca pagina se trimite la funtia functieI pe care o vom defini mai jos in script */ function functieI() { document.getElementById("redirect").onclick = controlClick; /* cauta in document elementul care are id-ul redirect, actiunea este onclick (cand se face click pe elementul respectiv) si trimite la functia controlClick */ } function controlClick() { alert("Link controlat!! Atentie!!"); return false; /* nu ne lasa sa mergem mai departe. Daca puneam return true ne lasa sa trecem la pagina la care trimite link-ul */ } |
Exemplu cu return false Exemplu cu return true
Daca dorim ca utilizatorii care au JS activat sa ajunga pe o pagina si cei care-l au dezactivat pe alta pagina cam asta trebuie sa facem:
window.onload = functieI; function functieI() { document.getElementById("redirect").onclick = controlClick;} function controlClick() { window.location = "paginajs.html"; return false; } |
Cei care au JS activat vor fi directionati de catre link pe pagina paginajs.html iar cei care nu au JavaScript activat vor ajunge pe pagina care este trecuta in html, adica index.html. De explicat nu este prea mult de explicat... , daca in browser nu este JavaScript activat sau nu este suportat, acesta nu va putea sa interpreteze codul JS si-l va executa doar pe cel html.
Am mai gasit un exemplu care poate fi util. De exemplu daca doriti sa primiti mesaj de avertizare atunci cand se face click pe un link care nu duce la o pagina de pe domeniul vostru, asta tebuie sa faceti:
Fisierul html (am schimbat decat link-ul):
<html> <h1> Exemplu link destept </h1> <h2 align="center"> <a href="www.google.com" id="redirect"> Link "destept" JavaScript </a> </h2> </body> |
Fisierul JavaScript:
window.onload = functieI; function functieI() { document.getElementById("redirect").onclick = controlClick;} function controlClick() { if(this.toString().indexOf("etutoriale") < 0) { alert("Nu suntem responsabile de continutul acestui site. Aceasta pagina este in afara domeniului nostru!!"); } } |
Exemplu
Dupa cum se poate observa, in acest exemplu au aparut multe noutati. Cea mai importanta dintre ele ar fi Keyword-ul this.
This este un keyword care depinde de context. De obicei se refera la un obiect in functie de metoda care cheama functia sau structura in care intra this. In cazul nostru se refera la un link si ne dam seama de asta pentru ca functia este chemata de onclick, care se aplica link-ului. Sincer imi e foarte greu sa explic cum se foloseste this, asa ca voi incerca sa exemplific cat mai mult si poate o sa va prindeti singuri :).
|
Articole asemanatoare
» Upload de fisiere cu PHP
» Validare de Formulare cu Javascript
» Dezactivare Dreapta Click
