| PROIECTARE SITE WEB > DOCUMENTATIE - JAVASCRIPT - Evenimente
si functii |
Proiectare Site si Web Design - JavaScript - Exemple
Evenimente
Evenimentele sunt foarte importante in programarea JavaScript. Evenimentele
sunt de cele mai multe ori declansate de actiuni ale utilizatorului.
Daca utilizatorul apasa un buton, un eveniment de tip "Click"
are loc. Daca mouse-ul este deasupra unei legaturi, atunci un eveniment
de tip "MouseOver" are loc.
Dorim ca programul JavaScript sa reactioneze la unele evenimente.
Aceasta se poate realiza cu ajutorul managerilor de evenimente sau
gestionarilor de evenimente - "event-handlers". Un buton
poate creea o fereastra atunci cand este apasat. Aceasta inseamna
ca fereastra apare ca o reactie la evenimentul "Click".
Managerul de evenimente (event-handler-ul) pe care trebuie sa-l utilizam
este numit "onClick". Acesta spune brwoser-ului computerului
utilizator ce sa faca atunci cand evenimentul are loc. Urmatorul cod
este un exemplu simplu de "event-handler onClick":
<form>
<input type="button" value="Click me" onClick="alert('Yo')">
</form>
Exista cateva lucruri care trebuie analizate in
codul JavaScript de mai sus
In primul rand putem observa ca am creeat un buton cu ajutorul unui
formular (aceasta este o problema de HTML asa ca nu va fi analizata
aici). Noua bucata de cod JavaScript este onClick="alert('Yo')"
in interiorul tagului <input>. Asa cum am spus deja,
codul in cauza defineste ce se intampla cand butonul este apasat.
Atunci cand un eveniment "Click" are loc, computerul executa
alert('Yo'). Acesta este codul JavaScript (se observa
ca nu utilizam tagul <script> in acest caz). "Alert()"
ne permite sa cream ferestre de avertizare (de tip popup windows).
In interiorul parantezelor trebuie sa specificam un sir. In cazul
nostru sirul este 'Yo'. Acesta este un text ce va fi afisat in fereastra
de avertizare. Deci scriptul dat ca exemplu creeaza o fereastra cu
continutul 'Yo' atunci cand utilizatorul apasa butonul.
Un lucru poate ne poate induce in eroare. In comanda document.write()
am folosit ghilimele duble " " dar in combinatie cu alert()
am folosit ghilimele simple ' '. De ce? In principiu pot fi ambele
utilizate. Dar in ultimul exemplu am scris onClick="alert('Yo')"
puteti vedea ca am folosit si ghilimele simple si duble. Daca am fi
scris onClick="alert("Yo")"
interpretorul ar fi fost indus in confuzie pentru ca nu este clar
care parte apartine de "onClick event-handler" si care nu.
Asa ca trebuie sa alternam ghilimelele. Nu conteaza ordinea in care
folosim ghilimelele - mai intai cele duble si apoi cele simple sau
viceversa. Putem scrie fara nici o problema onClick='alert("Yo")'.
Functii
Vom utiliza functii in cea mai mare parte a programelor noastre JavaScript.
De aceea vom explora subiectul inca din aceasta sectiune. Functiile
sunt o metoda profesionala de a lega mai multe comenzi impreuna. Sa
scriem un script care furnizeaza un anumit text de trei ori consecutiv:
<script
language="JavaScript">
<!-- hide
document.write("Bine
ai venit pe pagina mea!<br>");
document.write("Acesta este JavaScript!<br>");
document.write("Bine
ai venit pe pagina mea!<br>");
document.write("Acesta este JavaScript!<br>");
document.write("Bine
ai venit pe pagina mea!<br>");
document.write("Acesta este JavaScript!<br>");
//
-->
</script>
Acest script, introdus intr-un document HTML, va
scrie de trei ori:
Bine
ai venit pe pagina mea!
Acesta este JavaScript!
Analizand codul sursa observam ca scriind de trei
ori comanda ajungem la rezultatul scontat. Dar este eficient? Nu,
deci haideti sa rezolvam problema mai simplu. Ce spuneti de codul
urmator care face acelasi lucru:
<html><head></head>
<body></body>
<script language="JavaScript">
<!-- hide
function
myFunction() {
document.write("Bine ai venit pe pagina mea!<br>");
document.write("Acesta este JavaScript!<br>");
}
myFunction();
myFunction();
myFunction();
//
-->
</script>
<body></body>
</html>
In scriptul din sectiunea BODY a documentului HTML
de mai sus am definit si apelat o functie. Definirea s-a realizazt
cu urmatoarele linii de cod:
function
myFunction() {
document.write("Bine ai venit pe pagina mea!<br>");
document.write("Acesta este javascript!<br>");
}
Comenzile din interiorul {} tin de implementarea
functiei myFunction(). Aceasta inseamna ca ambele comenzi
"document.write()" vor fi executate prin apelarea functiei.
In exemplul nostru avem trei apelari ale functiei. Putem observa ca
am scris "myFunction()" de trei ori imediat sub definitia
functiei. Acestea sunt trei apelari ale functiei si au rolul de a
face ca functia sa fie executata de trei ori. Rezultatul executiei
este:
Bine
ai venit pe pagina mea!
Acesta este JavaScript!
Bine ai venit pe pagina mea!
Acesta este JavaScript!
Bine ai venit pe pagina mea!
Acesta este JavaScript!
|
Creare
si actualizare site