6.1 Generalitati
JavaScript este un limbaj de scripting dezvoltat la origine de Netscape, permitand scrierea de secvente de program care se executa la aparitia unui eveniment utilizator. Vom prezenta in continuare fundamentele JavaScript si, mult mai important, modalitati de valorificare si integrare in propriile pagini web a tehnologiei JavaScript.
JavaScript nu este Java!
Trebuie sa facem distinctie intre limbajul de programare Java si limbajul de scripting JavaScript. Spre deosebire de JavaScript, Java este un limbaj de progrmare considerat 'de nivel inalt' (foarte aproapiat de gandirea utilizatorului si nu de arhitectura calculatorului) care permite scrierea de aplicatii de aproape orice tip si grad de complexitate. Consideram ca pentru moment nu trebuie sa enumeram diferentele, trebuie doar sa retinem faptul ca JavaScript nu este Java.
Rularea programelor JavaScript
Pentru a rula scripturi concepute in limbajul JavaScript avem in primul rand nevoie de un browser care suporta JavaScript - de exemplu Netscape Navigator (incepand cu versiunea 2.0) sau Microsoft Internet Explorer (Ms. I.E. - incepand cu versiunea 3.0). De vreme ce aceste browser-e sunt extrem de raspandite, multi utilizatori (peste 90%) au posibilitatea de a rula fara probleme programele JavaScript. Pentru a utiliza in paginile proprii evenimente tratabile prin JavaScript avem bineinteles nevoie si de cunoasterea, cel putin la nivel mediu, atat a limbajului HTML, cat si a limbajului de scripting JavaScript.
Inserarea JavaScript in documentele HTML
Codul JavaScript poate fi introdus direct in pagina HTML. Pentru a vedea cum functioneaza JavaScript, sa ne aruncam privirile peste un exemplu simplu:
<html><head><title>Pagina HTML cu JavaScript</title></head>
<body>
<br><p>
Acesta este un document HTML continand JavaScript.
</p><script language='JavaScript'>
document.write('Acesta este JavaScript!')
</script><br><p>
Din nou text si cod HTML.
<p></body></html>
La prima vedere acesta bucata de cod arata ca un fisier HTML normal. Singura noutate o constituie blocul <script></script>:
<script language='JavaScript'>
document.write('Acesta este JavaScript!')
</script>
Acesta este JavaScript-ul nostru! Pentru a observa modul de functionare a scriptului vom salva codul HTML de mai sus ca si fisier normal HTML lansand pagina HTML astfel salvata in browserul nostru cu suport JavaScript. Daca browser-ul suporta JavaScript vom vedea 3 linii:
Acesta este un document HTML continand JavaScript.
Acesta este JavaScript!
Din nou text si cod HTML.
Este adevarat ca acest script extrem de simplist nu este unul folositor - acelasi rezultat il puteam obtine utilizand cod HTML mult mai simplu. Am dorit numai sa exemplific utilizarea tag-ului <script>. Tot ce este intre eticheta <script> si eticheta </script> este interpretat drept cod JavaScript. Putem observa folosirea document.write() - una dintre cele mai importante comenzi in programarea JavaScript. 'Document.write()' este o rutina JavaScript folosita pentru a scrie text, imagini, etc intr-un document (in acest caz in documentul HTML curent). Asadar, micul nostru program JavaScript scrie textul 'Acesta este JavaScript!' in documentul HTML in care a fost inserat.
6.2 Evenimente si functii
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 crea 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 creat 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 tag-ului <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 tag-ul <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 ' '. 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'>
<!-- hidedocument.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()
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 se realizeaza cu urmatoarele linii de cod:
function myFunction()
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
6.3 Crearea ferestrelor in JavaScript
Deschiderea automata a unei noi ferestre de browser este una dintre proprietatile deosebite ale JavaScript. Putem sa incarcam in noua fereastra fie un document deja creat (de exemplu un document HTML de pe server), fie putem crea si incarca un document nou. In cele ce urmeaza vom vedea cum putem deschide o noua fereastra si incarca o pagina HTLM existenta in aceasta fereastra.
Urmatorul script deschide o noua fereastra browser si incarca o pagina oarecare:
<html>
<head>
<script language='JavaScript'>
<!-- function openWin() // -->
</script></head><body>
<form>
<input type='button' value=Deschide fereastra noua'
onClick='openWin()'>
</form></body></html>
Pagina 'fereastra.htm' este incarcata in noua fereastra prin intermediul metodei 'open()'. Putem controla modul in care apare noua ferestra. De exemplu fereastra poate avea o bara de stare, o bara de instrumente sau o bara de meniuri. Urmatorul script deschide o noua fereastra care are dimensiunile 200x300. Fereastra nu va avea o bara de stare sau o bara de instrumente, dar va avea o bara de meniuri.
<html>
<head>
<script language='JavaScript'>
<!--function openWin2()
// --></script></head><body>
<form>
<input type='button' value='Open new window'
onClick='openWin2()'>
</form></body></html>
Se poate cu usurinta constata faptul ca specificam proprietatile in sirul:
width=200,height=300,status=no,toolbar=no,menubar=yes
Observam de asemenea ca nu trebuie folosite spatii in acest sir!
6.4 Cateva exemple JavaScript
6.4.1 Afisarea datei
Acest exemplu JavaScript afiseaza data computer-ului sub forma 'Luni, 10-iulie-2001' in pagina HTML. Exemplul este integrat in codul HTML al unei pagini oarecare pentru a putea fi usor de urmarit si vizualizat.
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1252'>
<title>Exemplu JavaScript-HTML - Afisare data</title>
</head><BODY>
<SPAN id=data></SPAN>
<script language='javascript'>
<!--// puneti span-ul unde doriti sa afisati data,
// dar trebuie sa fie INAINTE de script
var DayOfWeek = new Array('Duminica','Luni','Marti','Miercuri','Joi',
'Vineri','Sambata');
var MonthName = new Array('Ianuarie','Februarie','Martie','Aprilie',
'Mai','Iunie','Iulie','August','Septembrie',
'Octombrie','Noiembrie','Decembrie');
var theDate = new Date();
data.innerHTML = '<NOBR>' +
DayOfWeek[theDate.getDay()] + ', ' +
theDate.getDate() + '-' +
MonthName[theDate.getMonth()] + '-' +
(theDate.getYear() < 1000 ? theDate.getYear() + 1900 :
theDate.getYear()) + '</NOBR>';
// data poate fi sub forma 84 sau 1984
//--></script></BODY></html>
6.4.2 Afisarea unei ferestre pop-up
Acest exemplu JavaScript va afisa intr-o noua fereastra a browser-ului o pagina de tip pop-up putand contine reclame, informatii diverse, notificari utilizator, etc. Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat.
<html>
<head>
<meta name='GENERATOR' content='Microsoft FrontPage
5.0'>
<meta name='ProgId'
content='FrontPage.Editor.Document'>
<meta http-equiv='Content-Type' content='text/html;
charset=windows-1252'>
<title>Exemplu de pop-up JavaScript</title>
<script>
function openPopup(url, windowName, width, height, popupX, popupY)
openPopup('../../bogdan_world','Bogdan',300,300,100,100);
</script>
</head>
<body>
<H3 align='right'>Pagina aceasta lanseaza un pop-up.</H3>
</body>
</html>
|
