Curs-7-javascript

Curs 7 Web

JAVASCRIPT1. Proiectare Site si Web Design - JavaScript - Generalitati..................................................................12. JavaScript – Evenimente - Exemple...................................................................................................33. Ierarhii.................................................................................................................................................64. Ferestre Cadru (Frames).....................................................................................................................95. JavaScript - Crearea Ferestrelor........................................................................................................126. JavaScript - Obiecte Predefinite........................................................................................................157. JavaScript. Validarea Datelor din Formularele HTML....................................................................18

1. Proiectare Site si Web Design - JavaScript - 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. 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.

1

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

2

caz in documentul HTML curent). Asadar, micul nostru program JavaScript scrie textul "Acesta este JavaScript!" in documentul HTML in care a fost inserat.

2. JavaScript – Evenimente - 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

3

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!

5

3. 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>

6

<center><a href="http://www.afaceri-online.net">Pagina demo</a></center>

</body></html>

Iata o imagine a paginii (am adaugat cateva adnotatii cu culoarea rosie):

Avem doua imagini (sigla si bara de jos), o legatura ("Pagina de inceput") si un formular cu doua campuri text (Nume / E-mail), respectiv un buton (Trimite). Din punctul de vedere al mecanismelor JavaScript, fereastra browserului este un obiect "window". Acest obiect (fereastra browser asimilata si ca fereastra principala) contine unele elemente ca, de exemplu, bara de stare (status bar) din partea cea mai de jos a ferestrei browserului. In interiorul ferestrei principale putem incarca un document (pagina) HTML (sau un fisier de alt tip - ne vom limita pentru moment la fisiere de tip HTML). Aceasta pagina odata incarcata este asadar un obiect document. Aceasta inseamna ca obiectul document este chiar pagina HTML incarcata la un anumit moment in browser. Obiectul document este un obiect foarte important in JavaScript - se foloseste extrem de frecvent. O proprietate a obiectului document este, de exemplu, culoarea de fundal a paginii. Mai important este faptul ca toate obiectele HTML sunt proprietati ale obiectului document. Un obiect HTML este, spre exemplu, o legatura sau un formular, ca in cazul ilustratiei noastre.

7

Urmatoarea imagine arta ierarhia creata de pagina noastra:

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.

8

4. Ferestre Cadru (Frames)

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%">

9

<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. Urmatoarea imagine arata ierarhia aferenta primului exemplu:

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 frame-uri 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:

10

frame2.document.write("A message from the parent window.");

Iata si o ilustrare a exemplului:

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://...";

Iata si o ilustrare a exemplului:

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 intr-o pagina numita "page1.htm" reprezentand un frame copil? In

11

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.");

Iata si ilustrarea acestui exemplu:

5. JavaScript - 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:

13

width=200,height=300,status=no,toolbar=no,menubar=yes

Observam de asemenea ca nu trebuie folosite spatii in acest sir!

Iata o lista a proprietatilor (impreuna cu domeniul de valori) pe care o fereastra le poate avea:

directories yes / no

height number of pixels

location yes / no

menubar yes / no

resizable yes / no

scrollbars yes / no

status yes / no

toolbar yes / no

width number of pixels

alwaysLowered yes / no

alwaysRaised yes / no

dependent yes / no

hotkeys yes / no

innerWidth number of pixels

innerHeight number of pixels

outerWidth number of pixels

outerHeight number of pixels

screenX position in pixels

screenY position in pixels

titlebar yes / no

z-lock yes / no

6. JavaScript - Obiecte Predefinite

14

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.

15

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;

17

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;

7. JavaScript. 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>

Rezultatul este urmatorul:

Introduceti numele dumneavoastra:

Introduceti adresa dumneavostra de email:

18

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 e-mail 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>

19

<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.

20

Curs-7-javascript

Documents

limbajul javascript

scripting javascript

mecanismelor javascript

functioneaza javascript

tehnologiei javascript

inserarea javascript

rularea programelor

java este