Java SJava Scriptcript

JavaScript
Introducere 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. Pentru mai multe informatii privind limbajele Java si JavaScript va recomandam lucrarea "Java, JavaScript - Profesional" oferita de site-ul nostru in cadrul pachetului de carti electronice generic intitulat "Internetul pentru Afaceri". Rularea programelor JavaScript De ce avem nevoie 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 browsere 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 cunosterea - 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, haideti 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 browserul 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 uzand de cod HTML mult mai simplu. Am dorit numai sa exemplificam utilizarea tagului <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.
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 "eventhandler 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"></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"></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!
Ierarhii JavaScript organizeaza toate elementele unei pagini web intr-o ierarhie de obiecte. Practic toate elementele sunt vazute ca obiecte. Fiecare obiect are anumite proprietati si metode prin care poate fi manipulat. Cu ajutorul JavaScript putem lucra cu usurinta cu obiectele componente ale unei pagini web. Pentru a putea face acest lucru este foarte importanta intelegerea ierarhiei obiectelor HTML. Vom intelege mai bine mecanismul de functionare printr-un exemplu. Codul urmator este o pagina HTML simpla: <html><head><title>Pagina mea</title></head><body bgcolor=#ffffff> <center><img border="0" src="../../images/search_logo.gif" width="225" height="85"></center> <p><center><form name="Formular">Nume: <input type="text" name="nume" value=""><br>E-mail:<input type="text" name="email" value=""><br><br><input type="button" value="Trimite" name="Trimitere" onClick="alert('activare trimitere')"></form></center></p> <p><center><img border="0" src="../../images/linie.gif" width="207" height="11"><br> </center></p> <center><a href="http://www.afaceri-online.net">Pagina demo</a></center> </body></html>
Dorim acum sa obtinem informatii despre obiecte si sa manipulam aceste obiecte. Pentru a putea face acest lucru trebuie sa putem accesa diferite obiecte in cadrul ierarhiei. Putem vedea numele obiectelor in imaginea de mai sus a ierarhiei. Daca dorim sa adresam prima imagine din pagina HTML trebuie sa ne uitam in ierarhie. Vom incepe intotdeauna cu nivelul cel mai de sus. Primul obiect (nivelul 0) este denumit document. Prima imagine este reprezentata prin images[0], fiind situata pe nivelul 1 (imediat inferior). Aceasta inseamna ca putem accesa acest obiect particular prin intermediul unui apel JavaScript cu ajutorul sintaxei: document.images[0].
Daca, de exemplu, dorim sa stim ce introduce utilizatorul in al doilea camp din formular, trebuie sa accesam acest obiect. Din nou pornim din varful ierarhiei. Urmarim calea pana la obiectul numit elements[1] specificand toate obiectele intermediare pe masura ce le depasim. Aceasta inseamna ca putem accesa primul element (elements[1]) prin apelul: document.forms[0].elements[1] Putem afla si ce text a fost introdus? Desigur, insa pentru a sti ce metode si proprietati ofera obiectul, va trebui sa cercetam cu atentie documentatia JavaScript (ne referim atat la documentatia de la Netscape cat si la alte documentii bune aparute pe piata - 3 astfel de documentatii fiind oferite de site-ul Afaceri-Online ca anexa la cartea electronica "Java, JavaScript Profesional"). Mentionam in cazul exemplului nostru faptul ca in referinte vom putea constata ca un element text are proprietatea value. "Value" este practic textul introdus in elementul text. Putem citi aceasta valoare cu ajutorul urmatoarei linii de cod: name= document.forms[0].elements[1].value; Sirul este inmagazinat in variabila name. Putem de acum incolo sa lucram cu aceasta variabila.
Ferestre Cadru O intrebare frecventa este cum interactioneaza frame-urile (cadrele) si JavaScript. Mai intai trebuie sa explicam ce sunt frame-urile si la ce pot fi folosite. Fereastra browserului poate fi impartita in mai multe frame-uri (cadre, ferestre). Aceasta inseamna ca un frame reprezinta o parte din suprafata ferestrei browserului. Fiecare cadru (frame) incarca in el un document (de cele mai multe ori de tip HTML). De exemplu putem creea doua cadre astfel: in primul frame putem incarca pagina de deschidere a site-ului Netscape iar in cel de-al doilea pagina principala a site-ului Microsoft. Desi crearea de frame-uri este o problema HTML, dorim sa descriem in cele ce urmeaza cateva lucruri de baza. Pentru crearea de cadre se folosesc doua taguri: <frameset> si <frame>. O pagina HTML care creaza doua frame-uri poate arata astfel: <html><frameset rows="50%,50%"> <frame src="page1.htm" name="frame1"> <frame src="page2.htm" name="frame2"> </frameset> </html> Aceasta secventa de cod produce doua frame-uri. Remarcam utilizarea proprietatilor "rows" in tagul FRAMESET. Aceasta inseamna ca cele doua cadre create cu tagul FRAME se afla unul deasupra celuilalt. Frame-ul de sus incarca pagina HTML "page1.htm" iar frame-ul de jos prezinta documentul "page2.htm". Daca dorim sa avem coloane in loc de randuri trebuie sa scriem "cols" in loc de "rows" inauntrul tagului FRAMESET. Partea "50%,50%" specifica in procente ecran cat de mari sunt cele doua ferestre. Putem de asemenea sa scriem "50%,*" daca nu dorim sa calculam cat de larga trebuie sa fie cea de-a doua fereastra pentru a ajunge la 100% din spatiul ramas. Putem de asemenea specifica dimensiunea in pixeli omitand simbolul %.
Fiecare frame are un nume unic specificat cu ajutorul atributului "name" din eticheta <frame>. Acest atribut ne va ajuta sa accesam frame-urile cu ajutorul JavaScript. Iata un exemplu: <frameset cols="50%,50%"> <frameset rows="50%,50%"> <frame src="cell.htm"> <frame src="cell.htm"> </frameset> <frameset rows="33%,33%,33%"> <frame src="cell.htm"> <frame src="cell.htm"> <frame src="cell.htm"> </frameset> </frameset> Putem fixa dimensiunile marginii prin intermediul proprietatii (atributului) "border" din eticheta <frameset>. "Border=0" inseamna ca nu vom avea margine la cadru (atributul nu functioneaza cu Netscape 2.x). Frame-urile si JavaScript Acum putem sa ne dam seama cum vede JavaScript frame-urile intr-o fereastra a browserului. Pentru aceasta vom utiliza cele 2 cadre create in primul exemplu. Am vazut ca JavaScript organizeaza toate elementele de pe o pagina intr-o ierarhie. Aceasta se pastreaza si pentru frame-uri. In varful iererhiei este fereastra browser. Aceasta fereastra este impartita in doua frame-uri. Fereastra mare (implicita) a browserului este "parinte" in aceasta ierarhie iar cele doua frameuri sunt "copiii". Putem sa dam celor doua fram-euri numele "frame1" si "frame2". Cu ajutorul acestor nume putem schimba informatii intre cele doua frame-uri. Trebuie sa analizam trei cazuri: 1. "parent window/frame" acceseaza "child frame" 2. "child frame" acceseaza "parent window/frame" 3. "child frame" acceseaza un alt "child frame" Din punct de vedere al ferestrei parinte cele doua frame-uri copil se numesc "frame1" si "frame2". Putem vedea in imaginea de mai sus ca exista o conexiune directa intre fereastra parinte si fiecare frame copil in parte. Deci daca avem un script in fereastra parinte - in pagina care creaza frame-urile - si dorim sa accesam prin intermediul acestuia frame-urile (continutul unuia dintre ele) pentru a scrie date, trebuie doar sa folosim numele frame-ului. De exemplu putem scrie: frame2.document.write("A message from the parent window."); Cateodata putem dori sa accesam fereastra parinte dintr-un frame pentru a rescrie (spre exemplu) continutul acesteia, indepartand structura de frame-uri la reaccesarea paginii parinte pornind dintr-un frame copil. Asadar acest procedeu poate fi util atunci cand dorim sa eliminam pe cat posibil frame-urile la accesari repetate. Eliminarea structurii de cadre inseamna doar incarcarea unei pagini noi in locul paginii (ferestrei) parinte care a creeat frame-urile. Putem accesa fereastra parinte ("parent frame") din interiorul ferestrelor copil cu ajutorul cuvantului predefinit "parent". Pentru a incarca un nou document trebuie sa furnizam un nou URL parametrului "location.href". Deoarece dorim sa eliminam frame-urile trebuie sa utilizam obiectul locatie al ferestrei parinte. Vom avea o locatie obiect pentru fiecare frame,
inclusiv pentru frame-ul parinte apelat din frame-urile copil. Putem incerca o noua pagina in fereastra parinte cu comanda: parent.location.href= "http://..."; Foarte des ne vom pune problema accesarii unui frame copil din alt frame copil. Cum putem influenta din interiorul primei ferestre continutul celei de-a doua? Ce comanda sa folosim intro pagina numita "page1.htm" reprezentand un frame copil? In imaginea aferenta exemplului folosit de noi pana acum putem vedea ca nu exista legatura directa intre cele doua frame-uri. Aceasta inseamna ca nu putem apela "frame2" din "frame1" deoarece frame-urile nu se cunosc intre ele (nu stie unul de existenta celuilalt). Ele sunt conectate indirect, prin intermediul ferestrei parinte. Din punct de vedere al ferestrei parinte (parent), cea de-a doua fereastra (frame2) este vazuta copil, in timp ce fereastra browserului este vazuta ca parinte de catre primul frame (frame1). Deci in primul frame trebuie sa scriem urmatoarea referire pentru a avea acces la obiectul document al celui de-al doilea frame (frame2): parent.frame2.document.write("Hi, this is frame1 calling.");
Crearea Ferestrelor 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"></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"></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!
Bara de Stare Programele dumneavoastra JavaScript pot scrie in bara de stare a browserului - acea bara din partea de jos a ferestrei dumneavoastra de browser. Tot ce aveti de facut este sa dati o valoare-sir lui "window.status". Urmatorul exemplu creaza doua butoane care pot fi folosite pentru a scrie un text oarecare pe bara de stare iar apoi pentru stergerea acestui text. Scriptul arata astfel: <html><head><script language="JavaScript"></script></head><body> <form><input type="button" name="look" value="Write!" onClick="statbar('Salut! Aceasta este bara de stare!');"><input type="button" name="erase" value="Erase!" onClick="statbar('');"></form> </body></html> Creem un formular cu doua butoane. Ambele butoane apeleaza functia "statbar()". Putem vedea ca apelarea functiei - initiata de apasarea butonului "Scrie!" - arata astfel: statbar('Salut! Aceasta este bara de stare!'); In interiorul parantezelor specificam sirul "Salut! Aceasta este bara de stare!", ceea ce inseamna ca sirul este trimis functiei statbar(). Am definit functia "statbar()" astfel: function statbar(txt) {window.status=txt;} Ceea ce aduce nou exemplul de fata este folosirea "txt" in interiorul parantezelor din declararea functiei. Aceasta inseamna ca sirul pe care il transmitem este inmagazinat intr-o variabila "txt". Transmiterea valorilor catre functii este deseori folosita pentru a face functiile mai flexibile. Putem transmite mai multe valori functiilor - trebuie doar sa le separam prin virgule.
Sirul "txt" este afisat pe bara de stare prin intermediul "window.status=txt". Stergerea textului de pe bara de stare se face prin definirea unui sir gol pentru "window.status". Afisarea textului pe bara de stare poate fi usor utilizata in combinatie cu legaturile hipertext. In loc ca bara de stare sa afiseze locatia web a paginii din link, este posibil ca pe bara de stare sa avem o descriere a paginii. Codul pentru acest exemplu arata astfel: <A onmouseover= "window.status='Don\'t click here!'; return true;" onmouseout= "window.status='';" href="http://www.afaceri-online.net">Acest link</A> Aici utilizam onMouseOver si onMouseOut pentru a detecta cand pointerul mouse-ului trece pe deasupra legaturii (linkului). Probabil va intrebati de ce trebuie sa scriem "return true" in interiorul proprietatii "onMouseOver". Aceasta inseamna ca browserul nu va executa codul sau propriu ca reactie la evenimentul "onMouseOver". In mod obisnuit browserul afiseaza pe bara de stare URL-ul (adresa de Internet) spre care trimite legatura. Daca nu utilizam "return true", browserul va scrie pe bara de stare textul sau implicit (adresa de web) imediat ce codul nostru a fost executat - deci va sterge textul nostru instantaneu si utilizatorul nu il va putea citi. In general putem suprima actiunile browserului folosind "return true" in managerul de evenimente. "OnMouseOut" nu exista in JavaScript 1.0. Daca folosim Netscape Navigator 2.x putem obtine rezultate diferite pe platforme diferite. Pe platformele Unix textul dispare chiar daca browserul nu cunoaste "onMouseOut". Pe platformele Windows textul nu dispare. Daca dorim ca scriptul nostru sa fie compatibil cu Netscape 2.x pentru Windows, putem scrie de exemplu o functie care afisaza textul pe bara de stare si il sterge periodic dupa o anumita bucata de timp. Efectul este realizat cu ajutorul unei intreruperi - pauza (timeout). Acest aspect este analizat in cartea electronica "Java, JavaScript - Profesional" oferita de site-ul nostru in cadrul pachetului de carti electronice "Internetul Pentru Afaceri" si al carei cuprins va invitam sa il examinati indeaproape.
In scriptul exemplificat mai sus putem vedea inca un lucru - cateodata vom dori sa afisam in textul de iesire (output) ghilimele simple. Daca dorim sa afisam textul "Don't click me", conform sintaxei JavaScript folosim gilimele simple (apostroafe) deorece specificam sirul in interiorul unui manager de evenimente "onMouseOver". Dar cuvantul "Don't" foloseste inca o ghilimea simpla! Browserul este practic ametit daca scriem direct "Don't ...". Pentru a rezolva problema, putem sa utilizam "\" (backslash) inaintea ghilimelelor - ceea ce inseamna ca urmarea apartine iesirii de la terminal (textului pur afisat ca mesaj pe monitor). Evident, putem folosi acelasi procedeu si cu ghilimele duble.
Obiecte Predefinite Java Script ne permite sa folosim cateva obiecte predefinite. Acestea sunt, de exemplu, obiectele Data (Date), Matrice (Array) sau Matematic (Math). Exista si alte obiecte - putem apela documentatia oferita de Netscape pentru informatii complete. Vom examina obiectul "Date"
Dupa cum sugereaza si numele, acest obiect ne permite sa lucram cu data si ora din calculator putand cu usurinta, spre exemplu, sa calculam cate zile au mai ramas pana la Craciunul urmator. Sau putem adauga ora exacta documentului nostru HTML. Sa incepem cu un exemplu care afiseaza ora exacta. Trebuie creeat mai intai un nou obiect de tip "Date". Petru aceasta folosim un nou operator. Sa fim putin atenti la urmatoarea linie de cod: today=new Date() Aceasta creeaza un nou obiect de tip "Date" - "today". Daca nu specificam o anumita data si ora cand cream un nou obiect "Date", atunci data si ora existente vor fi cele folosite. Acasta inseamna ca dupa executarea "today=new Date()", noul obiect Date - "today" va reprezenta data si ora din momentul prezent. Tipul Date ofera cateva metode care pot fi folosite cu obiectul "today" Se pot folosi getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth() si asa mai departe. Puteti gasi documentatia completa asupra obiectului "Date" si asupra metodelor sale in anexa lucrarii "Java, JavaScript - Profesional" (oferita de site-ul nostru in cadrul pachetului de carti electronice "Internetul Pentru Afaceri"), al carei cuprins va invitam sa il examinati indeaproape. Sa observam ca obiectul de tip "Date" reprezinta numai o data sau o ora "statica". Nu este vorba de un ceas care arata trecerea fiecarei secunde sau milisecunde automat. Pentru a obtine o noua data si o noua ora trebuie folosita o alta constructie (este vorba de tipul "Date" apelat printr-un nou operator in momentul constructiei obiectului): today= new Date(1997, 0, 1, 17, 35, 23) Aceasta secventa de cod va creea un obiect Date cu proprietatile "Ianuarie 1997, ora 17:35 si 23 secunde". Deci trebuie specificata data si ora dupa tiparul: Date(year, month, day, hours, minutes, seconds) Observam ca trebuie sa folosim "0" pentru Ianuarie - si nu "1", asa cum am fi putut presupune. "1" este folosit pentru Februarie, 2 pentru Martie s.a.m.d. Acum putem realiza un script care sa furnizeze data si ora actuala. Rezultatul ar arata astfel: Time: 21:55Date: 12/8/3903 Codul arata astfel: <script language="JavaScript"></script> Aici trebuie sa folosim metode ca getHours() pentru a afisa data si ora specificate in obiectul de tip "Date". Putem observa ca am adaugat 1900 anului. Metoda get Year() returneaza numarul anului incepand cu 1900. Asadar, daca anul prezent ar fi 1997 metoda va returna 97; daca anul prezent ar fi 2010 va returna 110 - nu 10! Daca adaugam 1900 scapam de problema anului 2000. Acest script nu verifica daca numarul minutelor este mai mic dacat 10 pentru a-l afisa corespunzator, in formatul ":0x". Aceasta inseamna ca s-ar putea obtine ceva sub forma 14:3 care de fapt inseamna 14:03. Vom vedea in urmatorul exemplu cum se poate rezolva aceasta problema. Sa aruncam asadar o privire asupra unui script care afiseaza un ceas functional: <html><head> <script Language="JavaScript"></script></head> <body onLoad="clock()"> <form name="clock">Time:<input type="text" name="time" size="8" value=""><br>Date:<input type="text" name="date" size="8" value=""></form> </body></html> Folosim metoda setTimeout() pentru a stabili ora si data in fiecare secunda. Deci creem in fiecare secunda un nou obiect de tip "Data" cu ora exacta. Putem vedea ca functia Clock() este apelata de un "onLoad event-handler" in tagul <body>. In partea de continut a paginii HTML avem doua elemente de text. Functia "clock()" scrie data si
ora in aceste doua elemente in formatul corespunzator. Putem vedea ca folosim doua siruri in acest scop: "timeStr" si "dateStr". Am afirmat mai devreme ca exista o problema cu minutele mai mici de 10 - acest script o rezolva cu ajutorul urmatoarei linii de cod: timeStr+= ((minutes < 10) ? ":0" : ":") + minutes; Aici numarul de minute este adaugat sirului "timeStr". Daca numarul minutelor este mai mic de 10 trebuie sa adaugam 0. Desi codul acesta poate parea straniu, il putem scrie si in modul de mai jos care l-ar putea face sa para mai familiar: if (minutes < 10) timeStr+= ":0" + minuteselse timeStr+= ":" + minutes;
Validarea Datelor din Formularele HTML Formularele (Forms) sunt foarte des intalnite pe Internet. Datele introduse in formular (input) sunt de regula trimise catre server sau prin posta electronica spre un cont de e-mail. Dar putem fi siguri ca datele intoduse de catre utilizator in formular pentru a fi trimise sunt si corecte? Cu ajutorul JavaScript datele introduse intr-un formular pot fi cu usurinta verificate inainte de a fi transmise prin Internet. Dorim sa demonstram in aceasta sectiune cum pot fi formularele verificate (validate). Mai intai sa creem un script simplu. Formularul din pagina HTML va contine 2 campuri text. Utilizatorul trebuie sa introduca numele in primul camp si adresa de email in cel de-al doilea. Putem introduce orice in formular si apoi avem grija sa apasam butonul de trimitere. De asemenea putem incerca sa nu introducem nimic si sa apasam butonul. Codul este urmatorul: <FORM name=first>Introduceti numele dumneavoastra:<BR><INPUT name=text1> <INPUT onclick=test1(this.form) type=button value="Test Input" name=button1> <P>Introduceti adresa dumneavostra de email:<BR><INPUT name=text2> <INPUT onclick=test2(this.form) type=button value="Test Input" name=button2> </P></FORM> In cazul primului element de formular se va returna un mesaj de eroare daca nu este nimic introdus. Desigur, acest tip de verificare insa nu impiedica utilizatorul sa introduca un nume fictiv! Browserul accepta si numere. Asa ca daca veti introduce "17" va fi returnat mesajul "Hi 17!". Se pare ca nu este cel mai bun mod de verificare. Cel de-al doilea element de formular este mai sofisticat. Incercati sa introduceti un sir simplu - numele dumneavostra de exemplu - in casuta pentru e-mail. Nu o sa treaca testul (decat daca ati avea caracterul "@" in numele dumneavostra). Criteriul de baza pentru a accepta datele introduse ca si adresa de e-mail este ca aceste date trebuie sa contina caracterul "@". Un sigur "@" ajunge dar, desigur, nu este o conditie suficienta ci numai necesara. Toate adresele de email contin "@" asa ca este normal sa cautam "@" in adresa (printre altele). Cum arata scriptul pentru aceste doua elemente? Iata-l: <html><head><script language="JavaScript"></script></head> <body><form name="first">Enter your name:<br><input type="text" name="text1"><input type="button" name="button1" value="Test Input" onClick="test1(this.form)"><P>Enter your e-mail address:<br><input type="text" name="text2"><input type="button" name="button2" value="Test Input" onClick="test2(this.form)"> </body></html> Mai intai sa ne uitam putin la codul HTML din corpul documentului. Este vorba doar de creerea a doua elemente text si doua butoane. Butoanele apeleaza functiile test1(...) sau test2(...) in functie de ce buton este apasat. Transmitem this.form catre functii pentru a adresa elementele din functii. Functia test1(form) verifica daca sirul este gol. Aceasta se realizeaza prin intermediul secventei "if (form.text1.value == "")...", "form" fiind variabila care primeste valoarea "this.form". Putem obtine valoarea elementului introdus prin folosirea "value" in combinatie cu "form.text1". Pentru a vedea daca sirul este gol il comparam cu "". Daca datele introduse sunt egale cu "" atunci nu a fost introdus nimic. Utilizatorul va primi un mesaj de eroare. Daca ceva este introdus, utilizatorul va primi un mesaj OK. Problema care poate aparea aici este ca utilizatorul poate introduce numai spatii. Acestea sunt consemnate ca un input valid! Daca doriti, puteti verifica aceste posibilitati si sa le excludeti. Credem ca este destul de simplu tinand cont de restrictiile prevazute in cazul nostru. Sa aruncam o privire si peste functia test2(form). Aceasta functie compara sirul de intrare cu un sir gol "" pentru a fi siguri ca a fost introdus ceva. Dar mai trebuie ceva adaugat comenzii "if". Anume operatorul "||" numit si operatorul OR. In acest fel comanda "if" verifica daca prima sau cea de-a doua comparare este adevarata. Daca cel putin una dintre ele este adevarata, atunci comanda "if" primeste valoarea "adevarat" si urmatoarea comanda este executata. Asadar vom obtine un mesaj de eroare numai daca sirul este gol sau daca nu exista caracterul @ in sirul nostru.
Obiectul Image Vom examina in continuare obiectul Image ce a aparut odata cu JavaScript 1.1 (deci cu Netscape Navigator 3.0). Cu ajutorul obiectului "Image" putem schimba imaginile din pagina web in functie de evenimentele utilizator. Astfel avem posibilitatea sa creem animatii interactive in paginile web. Mentionam ca browserele mai vechi (Netscape Navigator 2.0 si Microsoft Internet Explorer 3.0) folosesc JavaScript 1.0 si nu pot sa ruleze scripturile implicand lucrul cu obiecte de tip "Image".
Toate imaginile dintr-o pagina web sunt reprezentate si evidentiate in JavaScript printr-o matrice. Aceasta matrice este numita "images". Practic, matricea "images" este o proprietate a obiectului "document". Fiecare imagine de pe o pagina web are atribuit un anumit numar de ordine. Prima imagine are numarul 0, cea de-a doua imagine are numarul 1 si asa mai departe. Adresam deci prima imagine cu document.images[0]. Fiecare imagine dintr-un document HTML este considarata un obiect Image. Un obiect "Image" are o serie de proprietati care pot fi accesate prin JavaScript. De exemplu putem vedea ce dimensiuni are o imagine folosind proprietatile "width" si "height". Concret: document.images[0].width furnizeaza latimea (in pixeli) a primei imagini din pagina web. Daca avem prea multe imagini pe o singura pagina devine din ce in ce mai greu sa le tinem pe toate sub observatie. Atribuirea de nume fiecarei imagini rezolva aceasta problema. Daca declaram o imagine prin tagul: <img src="img.gif" name="myImage" width=100 height=100> o putem adresa apoi din JavaScript utilizand fie sintaxa: "document.myImage", fie: "document.images["myImage"]".
Incarcarea imaginii noi Desi este de dorit cate o data sa stim care sunt dimensiunile unei imagini pe o pagina web, nu prea avem neaparat nevoie de acest lucru. Dorim sa putem schimba imaginile pe pagina in functie de evenimentele utilizator (de exemplu trecerea mouse-ului peste imagine). Pentru aceasta folosim proprietatea "src". La fel ca in tagul <img>, proprietatea "src" reprezinta si in JavaScript adresa imaginii afisate. Cu JavaScript 1.1 putem da o noua adresa unei imagini deja incarcate (suprascriind practic aceasta imagine). Rezultatul este ca imaginea de la noua adresa va fi si ea incarcata. Aceasta noua imagine inlocuieste vechea imagine de pe pagina web la declansarea evenimentului utilizator. Iata si un exemplu: <img src="imagine-javascript.gif" name="myImage" width=100 height=100> Imaginea img1.gif este incarcata si ia numele "myImage". Urmatoarea linie de cod inlocuieste fosta imagine "imagine-javascript.gif" cu o noua imagine "imagine-2-javascript.gif": document.myImage.src= "imagine-2-javascript.gif"; Noua imagine are intotdeauna aceleasi dimensiuni ca si vechea imagine. Nu putem schimba suprafata de afisare a imaginii.
Preincarcarea imaginilor Unul dintre neajunsuri este ca noua imagine este incarcata dupa ce a fost atribuita o noua valoare (adresa) proprietatii "src". Daca imaginea ce urmeaza sa se suprapuna peste vechea
imagine la declansarea evenimentului utilizator nu a fost deja incarcata pe calculatorul utilizatorului la incarcarea paginii in browser, este necesara o perioada suplimentara de timp pentru incarcarea imaginii din Internet atunci cand aceasta este solicitata. In unele cazuri acest fenomen nu creeaza probleme - dar exista si situatii in care astfel de intarzieri sunt inacceptabile. Deci ce putem face? Solutia este preincarcarea imaginilor. Pentru aceasta creem un nou obiect "Image". Haideti sa vedem si codul: hiddenImg= new Image();hiddenImg.src= "img3.gif"; Prima linie creeaza un nou obiect "Image". A doua linie defineste adresa imaginii care va fi reprezentata de obiectul "hiddenImg". Am vazut deja ca atribuirea unei noi valori-adresa atributului "src" forteaza browserul sa incarce imaginea de la adresa indicata. Deci imaginea "imagine-2-javascript.gif" este deja incarcata cand cea de-a doua linie de cod este executata. Asa cum sugereaza cuvantul standard "hiddenImg", browserul va presupune ca imaginea nu este afisata dupa ce s-a terminat incarcarea paginii impreuna cu toate elementele sale (text, grafica, javascript, etc...). Imaginea este pastrata in memoria temporara a browserului in vederea unei utilizari ulterioare, cel maiprobabil la declansarea unui eveniment utilizator. Pentru a afisa noua imagine putem sa folosim urmatoarea linie de cod: document.myImage.src= hiddenImg.src; Acum imaginea este preluata din memoria cache si afisata imediat. Deja noi avem incarcata imaginea. Bineinteles ca browserul trebuie sa fi terminat incarcarea fisierului (fara ca utilizatorul sa supravegheze procesul) pentru a putea afisa imaginea fara intarzieri. Daca avem un numar mare de imagini pe care le preincarcam este posibil sa avem intarzieri in afisare. Trebuie sa avem intotdeauna in vedere viteza conexiunii, preincarcarea imaginilor nu face ca imaginile sa fie incarcate mai repede, ci doar sa fie incarcate inainte de a fi afisate la declansarea evenimentului utilizator. Schimbarea imaginii ca urmare a unor actiuni initiate de utilizator Putem creea efecte deosebite prin schimbarea imaginilor ca urmare a unor evenimente. Spre exemplu, putem schimba imaginile la trecerea mouseului deasupra unei zone a paginii. Codul sursa al acestui exemplu arata astfel: <A href="http://www.afacerionline.net"onmouseover="document.myImage2.src='../../images/imagine-2-javascript.gif'" onmouseout="document.myImage2.src='../../images/imagine-javascript.gif'"><img src="../../images/imagine-javascript.gif" name="myImage2" width=120 height=38 border=0></A> Aceasta secventa de cod cauzeaza unele probleme atunci cand: 1. Utilizatorul nu foloseste un browser compatibil JavaScript 1.1. 2. Cea de-a doua imagine nu a fost inca preincarcata. 3. Trebuie rescris codul pentru fiecare imagine in parte.4. Dorim sa avem un script cu un grad mare de generalitate, asadar care sa poata fi folosit in multe pagini fara modificari substantiale.
Este de dorit sa avem un script care sa poata fi folosit in mai multe pagini, in situatii diverse implicand imagini mai mari sau mai mici, mai multe sau mai putine, plasate ca meniuri in tabele sau constituindu-se ca butoane interactive izolate. Practic sunt trei puncte care trebuie avute in vedere pentru a avea un script flexibil: Numarul de imagini - nu conteaza daca sunt 10 sau 100 imagini.Positionarea imaginilor - nu conteaza ca sunt butoane singulare sau meniuri.Ordinea imaginilor - trebuie sa fie posibila schimbarea ordinii imaginilor fara a fi necesara modificarea codului. In cartea electronica "Java, JavaScript - Profesional" se prezinta un script complet ce rezolva elegant aceste probleme. Scriptul este mai lung dar universal (cu grad mare de generalitate), aplicabil asadar fara adaptari ulterioare unei game largi de situatii concrete.

Java SJava Scriptcript

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Java SJava Scriptcript

Încărcat de

Drepturi de autor:

Formate disponibile

JavaScript

S-ar putea să vă placă și