Curs-7-javascript

Curs 7 Web

JAVASCRIPT 1. Proiectare Site si Web Design - JavaScript - Generalitati................................................................... Generalitati ................................................................... 1 2. JavaScript – Evenimente - Exemple........... Exemple..................... .................... ..................... ..................... ..................... ..................... .................................... .......................... 3 3. Ierarhii................................................................................................................................................. Ierarhii................................................................................................................................................. 6 4. Ferestre Cadru (Frames)...................................................................................................................... (Frames) ...................................................................................................................... 9 5. JavaScript - Crearea Ferestrelor  ................................ ..................... ..................... .................... ..................... ..................... ..................... ............................... .................... 12 6. JavaScript - Obiecte Predefinite Predefinite........................................................................................................ ........................................................................................................ 15 7. JavaScript. Validarea Datelor din Formularele HTML..................................................................... HTML ..................................................................... 18

1. Proiectare Site si Web Design - JavaScript Generalitati JavaScript est estee un lim limbaj baj de scr script ipting ing dezv dezvolt oltat at la ori origin ginee de Net Netsca scape, pe, per permit mitand and scrierea de secvente de program care se executa la aparitia unui eveniment utilizator. Vom prezen prezenta ta in continuare fundamentele fundamentele JavaS JavaScript cript si, mult mai impor important, tant, modalitati modalitati de valorificare si  integrare in propriile pagini we b 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. Conside Cons ideram ram ca pent pentru ru mom moment ent nu tr trebui ebuiee sa enu enumer meram am dif difere erente ntele, le, tre trebui buiee doar sa retinem faptul ca JavaScript nu este Java. Pentru mai multe informatii privind limbajele Profesional" nal" oferita de Java si JavaScript va recomandam lucrarea "Java, JavaScript - Profesio 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 pri mul ran rand d nevo nevoie ie de un bro browse wserr car caree sup suport ortaa Jav JavaSc aScrip riptt - de exem exemplu plu Net Netsca scape pe Navigat Navi gator or (i (incep ncepand and cu ver versiu siunea nea 2.0 2.0)) sau Mic Micros rosoft oft Int Intern ernet et Expl Explore orerr (Ms (Ms.. I.E 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 Ja Codul JavaS vaScr crip iptt po poat atee fi in intr trodu oduss di dire rect ct in pa pagi gina na HT HTML ML.. Pe Pent ntru ru a ve vede deaa cu cum m functioneaza JavaScript, haideti sa ne aruncam privirile peste un exemplu simplu:



 

HTML

 

cu

Acesta   este   un   document   HTML   continand   JavaScript.

<script   d oc oc um u m e n t . wr w r i t e ( "A "A ce ce s ta ta

Din   n ou

 

l angu ag e= "J av aS c ri pt"> e s te te   J a va v a S c ri ri p t! t! " )

 

text

 

si

 

c od

 

HTML.

La prima vedere acesta bucata de cod arata ca un fisier HTML normal. Singura noutate o constituie blocul <script>...:

<script   d oc oc um u m e n t . wr w r i t e ( "A "A ce ce s ta ta

 

l angu ag e= "J av aS c ri pt"> e s te te   J a va v a S c ri ri p t! t! " )

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   J a va Sc ri p t! 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 este interpretat inter pretat drept cod JavaS JavaScript cript.. Putem observa folos folosirea irea 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 - "eventhandlers". Un buton poate creea o fereastra atunci cand este apasat. Aceasta inseamna ca fereastra apare ca o reactie la evenimentul "Click". Managerul de evenimente (eventhandler-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":

 

value="Click

 

me"

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

Acest script, introdus intr-un document HTML, va scrie de trei ori:

Bine   ai   venit Acesta este JavaScript!

 

pe

 

pagina

 

mea!

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:

<script  

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("Bin e   ai   venit   pe   pagina   mea!
"); d oc um en t. wr it e( "A ce st a   e st e   j av as cr ip t! ") ; } 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 Acesta Bine Acesta Bine Acesta

 

ai

 

venit     este   ai   venit     este   ai   venit   este JavaScript!

pe

   

pe

   

pe

 

pagina   mea! JavaScript! pagina   mea! JavaScript! pagina   mea!

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:



  s r c =" . . /. . / im a g es / s ea r c h_ l o go . g if "   height="85">

Nume: < i np u t   t y pe = "t ex t "   n a me =" nu m e"   v a lu e= " "> < br > E-mail:

 

6

Pagina   demo 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 document.images[0]. apel   JavaScript   cu   ajutorul   sintaxei: 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;

8

Sirul este inmagazinat in variabila name. Putem de acum incolo sa lucram cu aceasta variabila.

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 d e 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: si . O pagina HTML care creaza doua frame-uri poate arata astfel:

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 . Acest atribut ne va ajuta sa accesam frame-urile cu ajutorul JavaScript.

Iata un exemplu:

9

Putem fixa dimensiunile marginii prin intermediul proprietatii (atributului) "border" din eticheta . "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 a rata ierarhia aferenta primului exemplu:

In varful iererhiei este fereastra browser. Aceasta fereastra este impartita in doua frameuri. 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"

10

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

11

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 d oua? Ce comanda sa folosim intr-o 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."); 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

12

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:

<script language="JavaScript">

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.

<script language="JavaScript">
13

// -->

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! Iata o lista a proprietatilor (impreuna cu domeniul d e 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

14

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

15

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:55 Date: 12/8/3903 Codul arata astfel:

<script language="JavaScript"> 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

16

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:

<script Language="JavaScript">

Time: 17


Date:

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 . 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" + minutes else 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 email. 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:

18

Introduceti numele dumneavoastra:

Introduceti adresa dumneavostra de email:

Rezultatul este urmatorul:

Introduceti numele dumneavoastra: þÿ

Introduceti adresa dumneavostra de email: þÿ

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:

<script language="JavaScript">

Enter your name:

Enter your e-mail address:
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 cazu l nostru.

20

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.

21