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
Comentarii
Greseala de tiparire:
"Sa folosim si un fisier extern (exemplu2.js)
Fisierl HTML are codul de mai jos"
Cum pot pune un cod...care atunci cand tin mouseul pe o poza..sa apara un text..care dispare cand iau mouseul?
Va rog raspundeti.
Vezi http://etutoriale.tutorialehtml.com/articles/2150/1/Elemente-de-pagina-(partea-3)/ !!!
De aici poti sa adaptezi si sa faci cea ce zici tu: sa apara un text cand treci cu mouse-ul peste poza.
Din tutorialul ala trebuie sa iei doar functia javascript si sa nu uiti sa incluzi paragraful cu id-ul corespunzator : descriere
<p id="descriere"></p>
Nu uita nici de onMouseover care sa adreseze functia Showtext
cum pot deschide dintr-un index.html, alte pagini html, apasand combinatii de taste (ex. "ctrl+p")? (fara mouse)
nu inteleg exact ce vrei sa spui. Da un exemplu detaliat.
cand intru pe site sa imi apara o pagina de vot(site care vreau eu sa fie votat).cum fac?
Buna... :D eu vreau sa stiu cum pot creea un site care sami apara pe net. Adica eu il fac html si nu stiu ce cod sa pun sami apara pe net (intelegeti ce vreau sa spun?)Sa-mi apara pe net adica ii pun un URL www.suteul meu.html si vreau sa pot intra pe browser, sa pun URL-ul de mai sus si da-mi intre pe site:D astept raspunsuri multumesc.
Of cand ma uit a commurile astea imi amintesc de mine :)) acum 3 luni cand am inceput sa invatz HTML. acu stiu si HTML si JS si PHP si putzin CSS :)) .. Auzi cum sa pui un site pe web e ff simplu .. cumperi un domain :)) preturile variaza de la domain la domain :P
Are cineva idee cam cum arata un script care sa schimbe un text sau o poza la o anumita ora... spre ex un site al unui post de radio: de la ora 8:00 la 10:00 sa afiseze "Acum asculti matinalul" iar de la 10:00 la 12:00 sa afiseze Acum asculti emisiunea de pranz...
Asta poti sa o faci cu PHP (si probabil cu o bdd mysql - daca vrei sa editezi direct din browser programul si pozele sau textul care vrei sa fie afisat).
Pentru mai multe detalii poti sa postezi aici detaliile de contact (nu le afisam) si o sa facem un tutorial pentru asa ceva.
Vreau si eu un tutorial Javascript sau Flash foarte usor de inteles va rog mult. Vreau sa invat! Cunosc deja HTML. Am si un site: www.nmariuscostel.ilive.ro
Va multumesc anticipat!
Voteaza acest articol!
Trimite un comentariu!
