Partea 1: Primii pasi
Ce este JavaScript
JavaScript este un nou limbaj de scripting ca este dezvoltat de Netscape. Cu ajutorul JavaScript puteti creea cu usurinta pagini web interactive. Acest tutorial va arata cateva efecte realizate cu ajutorul JavaScript - si mult mai important, cum sa realizati propriile voastre pagini cu scripturi JavaScript.
Multi oameni au impresia ca JavaScript este acelasi lucru cu Java, si aceasta din cauza similaritatii numelor. Insa nu este adevarat. Cred ca pentru moment nu trebuie sa enumeram diferentele, trebuie doar sa retineti ca JavaScript nu este Java.
Pentru mai multe informatii privind Javascript puteti consulta documentatia oferita de
Netscape
sau cartea mea de JavaScript :-)
De ce aveti nevoie pentru a rula scripturi scrise in JavaScript? Aveti nevoie de un browser care suporta JavaScript - de exemplu Netscape Navigator (incepand cu versiunea 2.0) sau Microsoft Internet Explorer (MSIE - incepand cu versiunea 3.0). De vreme ce aceste browsere sunt extrem de raspandite multi oameni au posibilitatea de a rula scripturile JavaScript. Acesta este un amanunt important in procesul de alegere a JavaScript ca limbaj de scripting pentru paginile dumneavoastra.
Bineinteles ca aveti nevoie de cunosterea - cel putin la nivel de mediu - a HTML, inainte de a incepe acest tutorial. Cel mai bine puteti efectua o cautare cu cuvantul cheie 'HTML' la Yahoo pentru a obtine mai multe informatii despre HTML.
Introducerea JavaScript in pagina HTML
Codul JavaScript este introdus direct in pagina HTML. Pentru a vedea cum functioneaza JavaScript sa ne aruncam privirile peste un exemplu usor:
<html>
<body>
<br>
Acesta este un document HTML.
<br>
<script language="JavaScript">
document.write("Acesta este JavaScript!")
</script>
<br>
Din nou cod HTML.
</body>
</html>
La prima vedere acesta bucata de cod arata ca un fisier HTML normal. Singurul lucru nou este partea:
<script language="JavaScript">
document.write("Acesta este JavaScript!")
</script>
Acesta este JavaScript! Pentru a observa modul de functionare a acestui script salvati acest fisier ca un fisier normal HTML si incarcati-l in browserul dumneavoastra ce suporta JavaScript.Trebuie sa recunosc ca acest script nu prea este folositor - acelasi rezultat il puteam obtine cu HTML mult mai simplu. Am dorit numai sa demonstrez folosirea tagului <script>. Tot ce este intre tagul <script> si tagul </script> este interpretat drept cod JavaScript. Puteti observa folosirea document.write() - una dintre cele mai importante comezi in programarea JavaScript. document.write() este folosit pentru a scrie ceva intr-un document (in acest caz in documentul HTML). Asa ca micul nostru program JavaScript scrie textul Acesta este JavaScript! in documentul HTML.
Browsere ce nu suporta JavaScript
Cum arata pagina noatra daca browserul nu intelege JavaScript? Acel browser nu va intelege tagul <script>. Ca atare, browserul ignora tagul si furnizeaza codul ca si cum ar fi simplu text. Aceasta inseamna ca utilizatorul va vedea codul JavaScript in interiorul paginii HTML. In mod sigur nu asta doream sa realizam. Exista o modalitate de a ascunde codul sursa de browserele mai vechi. Vom utiliza comentariile HTML <!-- -->. Codul sursa va arata astfel:
<html>
<body>
<br>
This is a normal HTML document.
<br>
<script language="JavaScript">
<!-- hide from old browsers
document.write("This is JavaScript!")
// -->
</script>
<br>
Back in HTML again.
</body>
</html>
Iesirea intr-un browser JavaScript va arata astfel:
This is a normal HTML document. Back in HTML again.Fara comentariul HTML rezultatul intr-un browser ce nu suporta JavaScript ar fi:
This is a normal HTML document.
document.write("This is JavaScript!")
Back in HTML again.
Va rog sa observati ca nu puteti ascunde complet codul JavaScript. Ceea ce facem cu aceste taguri este sa prevenim aparitia codului in document - dar utilizatorul poate vedea sursa prin 'View document source'. Nu exista nici o modalitate de a impiedica pe cineva de a vedea codul sursa (pentru a vedea cum a fost realizat un anumit efect).
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 Click are loc. Daca mouse-ul este deasupra unei legaturi un eveniment MouseOver are loc.
Dorim ca programul JavaScript sa reactioneze la unele evenimente. Aceasta se poate realiza cu ajutorul "event-handlers" - manageri de evenimente sau gestionar de evenimente. Un buton poate creea o fereastra atunci cand este apasat. Aceasta inseamna ca fereastra apare ca o reactie la evenimentul Click. Managerul de eveniment (event-handler) pe care trebuie sa-l utilizam este numit onClick.
Acesta spune computerului 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 acest cod - asa ca sa o luam pas cu pas. Observati ca am creeat un buton cu ajutorul unui formular (aceasta este o problema HTML asa ca nu va fi analizata aici). Noua bucata de cod este
onClick="alert('Yo')" in interiorul tagului <input>.
Asa cum am spus deja aceasta defineste ce se intampla cand butonul este apasat.
Atunci cand un eveniment Click are loc computerul executa alert('Yo'). Acesta este codul JavaScript (Va rog sa observati ca nu utilizam tagul <script> in acest caz).
alert() va permite sa creeati ferestre de avertizare (popup windows). In interiorul parantezelor trebuie sa specificati un sir. In cazul nostru acesta este 'Yo'. Acesta este un text ce va fi afisat in fereastra de avertizare. Deci scriptul nostru creeaza o fereastra cu continutul 'Yo' atunci cand utilizatorul apasa butonul.
Un lucru poate insa sa aduca confuzie. 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")" computerul ar fi fost confuzionat pentru ca nu este clar care parte apartine onClick event-handler si care nu.
Asa ca trebuie sa alternam ghilimelele. Nu conteaza ordinea in care folositi ghilimelele - mai intai cele duble si apoi cele simple sau viceversa. Puteti scrie fara nici o problema onClick='alert("Yo")'.
Exista diferite manageri de evenimente (event handler) pe care le puteti utiliza. Veti face cunostinta cu o parte in acest tutorial, dar nu cu toti. Va rog sa consultati referintele limbajului daca doriti sa aflati ce alti manageri de evenimente exista.
Daca utilizati Netscape Navigator fereastra care apare va contine textul JavaScript alert. Acesta este o restrictie din motive de securitate. Puteti creea o astfel de fereastra cu metoda promt(). Acesta fereastra accepta o intrare (un input). Un script rau intentionat ar putea imita un mesaj de sistem si ar putea cere introducerea unei parole. Textul din fereastra arata ca fereastra aparuta are ca loc de provenienta browserul si nu sistemul de operare. Deoarece este o restrictie de securitate nu puteti elimina acest mesaj.
Vom utiliza functii in cea mai mare parte a programelor noastre JavaScript. De aceea vom explora subiectul inca din primul capitol.
Functiile sunt o metoda de a lega mai multe comenzi impreuna. Sa scriem un script care furnizeaza un anumit text de trei ori consecutiv.
<html>
<script language="JavaScript">
<!-- hide
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
// -->
</script>
</html>
Acest script va scrie
Welcome to my homepage! This is JavaScript!de trei ori. Uitati-va la codul sursa - scriind de trei ori comanda ne duce la rezultatul scontat. Dar este eficient ? Nu, deci haideti sa rezolvam problema mai simplu. Ce spuneti de codul urmator care face acelasi lucru:
<html>
<script language="JavaScript">
<!-- hide
function myFunction() {
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
}
myFunction();
myFunction();
myFunction();
// -->
</script>
</html>
In acest script definim o functie. Aceasta se realizeaza cu urmatoarele linii de cod:
function myFunction() {
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
}
Comenzile din interiorul {} apartin functiei myFunction(). Aceasta inseamna ca cele doua comenzi document.write() sunt stranse impreuna si pot fi executate prin apelarea functiei. In exemplul nostru avem trei apelari ale functiei.Puteti 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. Functiile pot de asemenea sa fie folosite in combinatie cu managerii de evenimente (event-handlers). Iata un exemplu:
<html>
<head>
<script language="JavaScript">
<!-- hide
function calculation() {
var x= 12;
var y= 5;
var result= x + y;
alert(result);
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Calculate" onClick="calculation()">
</form>
</body>
</html>
Puteti testa acest exemplu:
Aceast buton apeleaza functia calculation(). Puteti observa ca aceasta functie efectueaza o serie de calcule simple. Pentru aceasta utilizam variabilele x, y si result. Putem defini variabila cu ajutorul cuvantului cheie var. Variabilele pot fi utilizate pentru a inmagazina diferite valori - numere, siruri alfanumerice etc. Linia var result= x + y; transmite browserului sa creeze o variabila result si sa o stocheze in x + y (i.e. 5 + 12). Dupa acesta operatie variabila result este 17. Comanda alert(result) este in acest caz aceeasi cu alert(17). Vom obtine o fereastra afisind numarul 17.
©1996,1997 by Stefan Koch
e-mail:skoch@rumms.uni-mannheim.de
http://rummelplatz.uni-mannheim.de/~skoch/
My JavaScript-book