Sunteți pe pagina 1din 71

Programare webclientside,

JavaScript
Tehnologii Web

Obiective
Scopul acestui capitolnueste acela deafaceodescriere
complet aJavaScriptianoiunilor deprogramare
avansat pe carelimbajul lesuport
Exist numeroase documente icripublicate inclusiv n
limba romn careconininformaiicompleten
domeniu
Prezentmncontinuare doar otrecere nrevist a
limbajului.

Sumar

JavaScript fundamente
JavaScriptiHTML gestiunea simpl aevenimentelor
Exemple JavaScript
Maimulte despre JavaScript

JavaScript
Fundamentele Limbajului

Ce este JavaScript?
JavaScriptafost creat pentru aaduga interactivitate
paginilor HTML
JavaScripteste unlimbaj descripting
Unlimbaj descriptingeste unlimbaj deprogramare
lightweight
Deobicei,codul JavaScripteste nglobat directn
paginile HTML
JavaScripteste unlimbaj interpretat (seexecut fr
compilare)
JavaScriptpoate fi folosit fr acumpra vreo licent
http://www.w3schools.com/JS/js_intro.asp

Despre JavaScript
JavaScriptnueste Java,nici macar nrudit cuJava
Numele originalalJavaScriptafost LiveScript
Numele afost modificat cnd Javaadevenit popular
Astazi,candMicrosoftnumaiindrgeteJava, propriulnumeacordatdialectului
JavaScript esteActiveScript

Instruciunile nJavaScript seamn cu instruciuni nJavadeoarece


ambele limbaje aumprumutat multe elemente chiar dinlimbajul C
JavaScripteste relativ uordenvatpentru programatoriifamiliarizaicuJava
TotuiJavaScript esteunlimbaj desine stttor,completicomplex

JavaScripteste rar folosit pentru ascrie programe complete


Mici blocuri deinstruciuni JavaScriptsunt ngeneralfolosite pentru aaduga
funcionalitate paginilor HTML
JavaScripteste adesea folosit nconjuncie cuformulare HTML

JavaScripteste ntro bun masur independentdeplatform

Ce poate s fac JavaScript?


JavaScriptofer designerilor HTMLuntooldeprogramare
JavaScriptpoate introducetextdinamic npaginile HTML O
instruciune JavaScriptca:
document.write("<h1>"+name+"</h1>")
scrie ovariabil textntro pagin HTML
JavaScriptreacioneaz laevenimente deex,seexecut atunci
cnd utilizatorul aapsatunelementHTML
JavaScriptpoate s scrie is citeasc elemente HTML
JavaScriptpoate fi folosit pentru validarea datelor Seevit
procesarea validrilor pe server
JavaScriptpoate fi folosit pentru adetecta browserul
utilizatorului nfuncie debrowser,va ncrca opagin creat
specialpentru acel browser
JavaScriptpoate fi folosit pentru crearea decookies Un
JavaScriptpoate extrage istoca datedespre computerul
vizitatorului

Folosirea JavaScriptntrunbrowser

Pentru aafiauntextntro pagin web,codul JavaScripteste inclus ntre


taguri <script>:
<scripttype="text/javascript">
document.write("<h1>HelloWorld!</h1>");
var colour1="purple";
var colour2="pink";
document.write('<p>colour1:'+colour1+'<br>colour2:'+colour2+'</p>');
</script>

Observaii:
Atributul type permitefolosirea altorlimbaje descripting (chiar dac JavaScript este
limbajul implicit)
document.write("<h1>HelloWorld!</h1>");este echivalent cuascrie <h1>Hello
World!</h1>nacelai locndocumentul HTML
document.write este instruciunea pentru scriere
Punct ivirgul delafinalul instruciunii JavaScripteste opional
Sfritullinieimarcheaz sfritulinstruciunii,dac liniapoatefi interpretat cao
instruciune complet
Sepoatefolosipunctivirgul pentruseparareamaimultorinstruciuni ceapar pe
aceeailinie
Esteindicattotuifolosireanpermanen acaracteruluipunctivirgul

Unde sescrie codul JavaScript


Nedorim cascriptul s fieexecutat fieatunci cnd sencarc
pagina,fieatunci cnd unutilizator lanseaz uneveniment.
JavaScriptnzona <head>
Scriptul va fi ncrcat nainte deafi utilizat decineva
naceast zon ar trebui puse scripturile caretrebuie s seexecute atunci
cnd sunt apelate sau cnd este lansat uneveniment (deexemplu,funciile)
Astfel nexemplul demai jos lancrcarea paginii va aparea alerta.
<html>
<head>
<scripttype="text/javascript">
functionmessage()
{
alert("This alertboxwascalledwiththeonload event");
}
</script>
</head>
<bodyonload="message()">
</body>
</html>

Unde sescrie codul JavaScript


JavaScriptnzona <body>
naceast seciune trebuie puse scripturile careseexecut la
ncrcarea paginii
Scripturile dinaceast seciune genereaz coninutul paginii
<html>
<head>
</head>
<body>
<scripttype="text/javascript">
document.write("This messageiswrittenbyJavaScript");
</script>
</body>
</html>

Unde sescrie codul JavaScript

Daca aveinevoie s rulaiacealaicodJavaScriptpe mai multe pagini,


puteiscrie scriptul ntrunfiier extern (reutilizarea codului).
Fiierul sesalveaz cuextensia .js.
Not: Scriptul externnupoate conine tagul <script>!
Pentru autiliza scriptul extern,indicaictre fiierul .js natributul src al
tagului <script>.
<html>
<head>
<scripttype="text/javascript"src="xxx.js"></script>
</head>
<body>
</body>
</html>

Comentarii
ComentariilesuntsimilarecuceledinCsauJava:

Osingur linie :ntre //isfritul liniei


Maimulte linii:ntre /*i*/

Comentariile detipjavadoc dinJava,/** */,sunt


tratate similarcomentariilor detip/*...*/;ele nuaunici
osemnificaie special nJavaScript

Tipuri dedateprimitive
JavaScriptaretrei tipuri
primitive:number,string i
boolean
Oricealtcevaesteunobiect

Numerelesuntntotdeauna
stocatecavaloridetipfloat
Valorile boolean sunt fietrue fie
false

Numere speciale predefinite:


Infinity,Number.POSITIVE_INFINITY
rezultatul mpartirii unui numrpozitiv
lazero
Number.NEGATIVE_INFINITY rezultatul
mpririi unui numrnegativ lazero
NaN,Number.NaN (NotaNumber)
rezultatul mpartirii 0/0
NaN este diferit deorice,chiar idesine
insui
Exist ofuncie global isNaN()
Number.MAX_VALUE celmaimare
numrreprezentabil
Number.MIN_VALUE cel maimic
(apropiat dezero)numrreprezentabil

FunciaNumber

Number(value)
Convertete valoarea ntrun numr.
Dacapareoproblematuncireturneaz NaN.

FunciaparseInt

parseInt(valoare,10)
Convertetevaloareantrunnumr.
Seopretelaprimulcaractercarenuestecifr.
Sepoatespecificaibazanumrului
parseInt("08")==0
parseInt("08",10)==8
Dacnusespecificbaza, atuncinumerelecarencepcu0 sunt
considerateafinbaza8iarnumerelecarencepcu0xsuntconsideratea
finbaza16

Math
ObiectulMathestemodelatpebazaclaseiJava Math
Acestaconine
abs
floor
log
max
pow
random
round
sin
sqrt

modulul
rotunjire njos
logaritm
maxim
ridicarelaputere
numraleator
rotunjirectrecelmaiapropiatntreg
sinus
radical

Stringuri
Secveneformatedin0saumaimulte
caracterereprezentatepe16bii
Nuexistuntipseparatpentru
caractere
Caracterelesuntreprezentatecastring
uri delungime1

Stringurile nupotfimodificate
Stringurisimilarereturneaztrue la
verificareprinoperatoruldeegalitate (
== )
Stringurilepotfidelimitateprin
apostroafesaughilimele
Stringurile potconine \n (newline),
\" (doublequote),etc.

MetodeleString
charAt
concat
indexOf
lastIndexOf
match
replace
search
slice
split
substring
toLowerCase
toUpperCase

Stringlength
string.length
Proprietatea length determin numrul
caracterelorpe16biialestringului
FunciaString
String(valoare)
Convertetevaloareantrunstring.

FunciaBoolean
Boolean(valoare)
returneaz true dacvaloare esteadevrat
returneaz false dacvaloareaestefals

Variabile
Variabilele potfi declarate folosind var:
var pi=3.1416,x,y,name="Dr.Dave";
Numele devariabile trebuie s nceap cuoliter sau cuunderscore
Numele devariabile sunt casesensitive
Variabilele nu autip(ele potine valori deorice tip)

Exist doardou scopurialevariabilelor:localiglobal


Variabileledeclaratentrofunciesuntlocalerespectiveifuncii
(accesibilenumaidininteriorulrespectiveifuncii)
Variabileledeclaratenafarauneifunciisuntglobale(accesibiledeoriunde din
pagin)

Variabilele potfi declarate implicitprin simpla adugare aunei


valori unor variabile
Variabilele declarate implicitsunt ntotdeauna globale

Exist dou valorispecialepentruvariabile:null iundefined

Operatori (1)
Foarte asemntor cusintaxa dinJava
Operatoriaritmetici(toatenumerelesuntnvirgulmobil):
+ */%++
Operatori decomparaie:
<<===!=>=>
Operatori logici:
&&||!
Operatori lanivel debii:
&|^~<<>>>>>
Operatori deasignare:
+==*=/=%=<<=>>=>>>=&=^=|=

Operatori (2)
Operator laniveldestringuri:
+ concatenare
Operatorul decondiie:
condition?value_if_true :value_if_false
Teste deegalitate:
== i!= ncearc convertirea operatorilor laacelai
tipinaintea efectuarii testului
===verific egalitatea exact (atttip,ctivaloare)

Instructiuni (1)
Atribuirea:greeting="Hello,"+name;
Instruciunea compus:
{statement;...;statement}
Instruciunea If:
if(condition)statement;
if(condition)statement;elsestatement;
Instruciuni deiterare:
while(condition)statement;
dostatementwhile(condition);
for(initialization;condition;increment)
statement;

Instructiuni (2)
Instruciunea switch:
switch(expression){
caselabel:statement;
break;
caselabel:statement;
break;
...
default:statement;
}

Obiecte

nJavaclaseledescriuobiecteitoateobiecteleaceleiaiclase auexact
aceleaicmpuri imetode
Obiectele JavaScriptsunt mai flexibile dectobiectele Java

JavaScriptlucreaz cuobjectliterals,scrise conformurmtoarei sintaxe:


{name1:value1,...,nameN :valueN }

Unvectorpoate conine datedetipuri diferite


Exemplu :
car={myCar:"Saturn",7:"Mazda",
getCar:CarTypes("Honda"),special:Sales}
Campurile sunt myCar,getCar,7(estechiar unnume legaldecmp)ispecial
"Saturn"si"Mazda"suntcmpuridetipString
CarTypes esteunapel defuncie
Saleseste ovariabil ce afost definit anterior

Exemplu defolosire:document.write("I owna"+car.myCar);

Treimodurideacreaunobiect
Puteifolosiunobjectliteral:
var course={number:"CIT597",teacher:"Dr.Dave"}

Putetifolosinew pentruacreaunobiectblank cruias i


adaugaicmpuriulterior:
var course=newObject();
course.number ="CIT597";
course.teacher ="Dr.Dave";

Puteiscrieifolosiunconstructor:
functionCourse(n,t) {//functionsshouldbedefinedin<head>
this.number =n;//keyword"this"isrequired,notoptional
this.teacher =t;
}
var course=newCourse("CIT597","Dr.Dave");

Vectori
Vectorii nJavaScriptsunt arrayliterals,scriicuparanteze
drepte ivirgule
Exemplu:color=["red","yellow","green","blue"];
Arrayurile sunt iniializate delapoziia 0:color[0]este "red
Dac puneidou virgulesuccesive,arrayulvaavea un
elementempty laacea poziie
Exemplu:color=["red",,,"green","blue"];
colorare5elemente

Totui,osingur virgul lafinaleste ignorat

Exempul:color=["red",,,"green","blue,]; aretot5elemente

Patru moduri deacrea unarray


Puteifolosiunarrayliteral:
var colors=["red","green","blue"];
PuteifolosinewArray() pentruacreaunarraygol:
var colors=newArray();
Sepotaduga elemente ulteriorlaacel array:
colors[0]="red";colors[2]="blue";colors[1]="green";
PuteifolosinewArray(n) cuunsingurargumentnumericpentru a
creaunarray derespectivadimensiune
var colors=newArray(3);

PutetifolosinewArray() cudou saumaimulteargumente


pentru acrea unarrayconinnd respectivele valori:
var colors=newArray("red","green","blue");

Lungimea unui array


Dac myArray esteunarray lungimea acestuia este
ntoars dectre myArray.length
Dimensiuneaunuiarraypoatefimodificat prinadugarea
deelemente peste lungimea curent aacestuia
Exemplu:var myArray =newArray(5);
myArray[10]=3;

Arrayurile sunt risipite,spaiul este alocat pentru


elementelecroraleafostcuadevaratasignat ovaloare
Exemplu:myArray[50000]=3; esteperfect OK
Indiciitrebuies fientre0si2321

Nuexist arrayuribidimensionale,dar exist arrayde


array:myArray[5][3]

Arrayuri iobiecte
Arrayurile sunt obiecte
car={myCar:"Saturn",7:"Mazda"}
car[7]esteechivalent cu car.7
car.myCar esteacelasi cucar["myCar"]

Dac cunoateinumeleuneiproprieti
puteifolosinotaiacupunct:car.myCar
Dacanucunoastetinumeleproprietiidar l
aveintrovariabil (saulputeicalcula),
puteifolosi notaia detiparray:
car["my"+"Car"]

Funciiaplicabile arrayurilor
Dac myArray este unarray:
myArray.sort()sorteaz arrayul alfabetic
myArray.sort(function(a,b){returna b;})sorteaz
numeric
myArray.reverse()inverseaz elementele arrayului
myArray.push() adaug orice numrdeelemente la
finalularrayuluiicretedimensiuneaacestuia
myArray.pop()nltur intoarceultimulelemental
arrayului idecrementeaz dimensiunea acestuia
myArray.toString()ntoarceunstringconinnd
valoarile elementelor arrayului,separateprin virgul

Instruciunea forin
Similar instruciuniiiterativedinJavafor(type var:collection)
Puteiiteraprinproprietileunuiobiectfolosind
for(variable inobject)statement;
Exemplu:for(varprop incourse){
document.write(prop +":"+course[prop]);
}
Posibiloutput:teacher:Dr.Dave
number:CIT597
Proprietilesuntaccesatentroordinenedefinit
Dacaadugaisautergeiproprietiobiectuluidinloop ,estenedefinitdac
instruciuneaiterativ vatraversaiproprietilenoudefinitesaunu
Arrayurile suntobiecte;aplicat unuiarray,forinvavizita proprietatile 0,1,2,
Observaic course["teacher"]esteechivalentcucourse.teacher
Trebuies folosiiparantezedreptedac numeleproprietiiestentrovariabil

Instruciunea with

with (object)statement ;foloseteobject caprefiximplicitalvariabilelor


dinstatement
Dac cmpurileaccesatenuexist prefixulnuvafifolosit

Deexemplu,urmtoarelesuntechivalente:
with (document.myForm){
result.value =compute(myInput.value);
}
document.myForm.result.value =
compute(document.myForm.myInput.value);

Instruciuneawith esteutil atuncicndaveidefcutmultemanipulri


asupraunuiacelaiobiect
Instruciuneawith poateficonfuzant idinacestmotivtrebuiefolosit cu
discernmnt

JavaScriptnu este Java


JavaScript areuneleconstruciiceseamn cuconstruciile
corespondentedinJava:
JavaScript areObiecteitipuridedateprimitive

JavaScript arenumecalificate;deexemplu,document.write("Hello
World");
JavaScript areevenimenteigestiuneaevenimentelor(eventhandlers)
GestiuneaexcepiilornJavaScript estesimilar cuceadinJava

TotuiJavaScript areuneleconstruciidiferitedeceledinJava:
Numeledevariabilenuautip: tipuluneivariabiledepindede valoarea
curent pecarerespectivavariabil odeine
Obiecteleiarrayurile suntdefinitentromanier diferit deceadin
Java
JavaScript areinstruciuneawith ionou form ainstruciuniifor

Funcii

FunciilesuntfoartedesfolositenJS.Ofuncie esteunsetdeinstruciunidinlimbajul
JavaScriptcareefectueazosarcin.

Funciile trebuie definitenseciunea <head>apaginiiHTMLpentruaasigurafaptulc ele


suntncrcate primele.

Funciilepotfiapelatedeorictdemulteoriestenecesarntimpulrulriiscriptului.Elesunt
utilizatepentruaevitaredundaa codului!!!

Ofuncieecompusdincuvntulcheiefunction,urmatdenumelefunciei.Numelefunciei
esteurmatntotdeaunadeunsetdeparanteze(),dupcareseafloacoladdedeschidere.
Instruciunilecarecompunfunciasuntplasatepernduridiferiteiarlasfritfunciaeste
finalizatcuoacoladdenchidere. Sintaxa pentru definirea unei funciieste:
functionname(arg1,,argN){statements}
Funciapoatesaibparametrii arg1,,argN
Funcia poate conine instruciuni detipul returnvalue;
Oricevariabil declarat ninterioruluneifunciiestelocal respectivei funcii

Fiecreifunciitrebuiesisealoceunnume,iareapoatefiinvocatsauapelatprin
intermediulacestuinumedinoriceparteascriptului.Sintaxa pentru apelarea unei funcii
este
name(arg1,,argN)

Parametrii simpli sunt transmiiprin valoare,obiectele sunt transmise prin referin

Expresii regulate

Scopuluneiexpresiiregulateeste
aceladeadefinipatternuri
folositepentruafacecomparaii
cuunstring
Sintaxapentrucreareaunei
expresiiregulateeste:
//Shortcut syntax
varre=/pattern/[g|i|gi];
//Formalconstructor
varre=new RegExp(["pattern",
["g"|"i"|"gi"]]);

string.match(regexp)areroluldea
cutanString apariiialeregexp
ntoarcenull dac nuestegsit
nimic
Dac regexp aresetatflagul g
(globalsearch),match ntoarceun
array cutoatesubstringurile cese
potrivescexpresiei
Dacag nuestesetat,match
ntoarceunarray alcruielementde
pepoziia0reprezint textulcese
potriveteexpresiei

Atenionri
JavaScript esteunlimbajmare,complex
Amprezentatdoarelementedelasuprafaaacestuia
EuordepornitcuJavaScript,dardac aveinevoies lfolosiintro
manier maicomplex trebuies v faceitimppentrualnvacu
adevrat
Scriereaitestareaprogramelornecesit unpicdeefortdinparteaechipei
dedezvoltare

JavaScript nuestetotalindependentdeplatform
Trebuiesav ateptaicapediversebrowsere coduls secomporten
moddiferit
Scriereaitestareaprogramelornecesit unpicdeefortdinparteaechipei
dedezvoltare

Browserele ngeneralnuraporteaz erori


Nuv ateptais primiicevamesajeajuttoarecares v ajutenmunca
dedepanareacoduluiJavaScript
Scriereaitestareaprogramelornecesit unpicdeefortdinparteaechipei
dedezvoltare

JavaScriptsi HTML
Gestiunea evenimentelor

JavaScriptiDOM

JavaScript sebazeaz pe unDocumentObject Model(DOM)ce descrie structura paginii


web
Nu reprezint acelailucru caXMLDOM

Putetifacemultelucrurintelegndunpicconceptul deDOM
PutetifolosiDOMpentruaaccesaelementelepaginiiweb
getElementById()
getElementByTagName()
Puteicaptaevenimentefr safiidelocfamiliarizai cuconceptul DOM
AveinevoiedeDOMpentruafaceeventualemodificri n pagina web

http://www.w3schools.com/htmldom/default.asp

Evenimente
Unele(darnutoate)elemente alepaginiiwebrspundla
interactivitateadinparteautilizatorului(keystrokes,mouse clicks)
princreareadeevenimente
Diversetipurideelementeproducevenimentediferite

Browserele nuseamn nicicndvinevorbadetipurilede


evenimentepecareleproduc
Nevomconcentrapeevenimenteceindeelementelespecifice
unorformulareHTML

Puteifolosihandlere asociateunorelementedeformulareHTML
Dac evenimentulnuestegenerathandlerul nufacenimic
Unhandler artrebuisafiefoartereduscadimensiune

Majoritateahandlerelor apeleaz ofunciencareseproducetoat


funcionalitateaspecific evenimentului

Unhandlerdeevenimente simplu
<formmethod="post"action="">
<inputtype="button"
name="myButton"
value="Clickme"
onclick="alert('You clickedthe
button!');">
</form>

Butonulesteincorporatntrunformular
method specificacumsunttrimisedatele
formularului;
action specificaundesunteletrimise

Tagulesteinput,avndatributul
type="button
Atributulvalue vaapreapebuton
onclick estenumeleevenimentuluicese
vreaafigestionat
Valoareaelementuluionclick estecodul
JavaScript carevafiexecutat
alert areroluldeadeclanaofereastr de
popup de tipalert cuunmesajfurnizatca
argument

Evenimente obinuite
Majoritatea elementelor HTMLproduc urmtoarele evenimente:
onClick elementul respectiv este clicked
onDblClick peelementulrespectivseexecut dubluclickntro
succesiune rapid
onMouseDown butonul demouseeste apsatcnd cursorul era
deasupra elementului
onMouseOver cursoul mouseului este mutat deasupra elementului
onMouseOut cursorul mouseului este scos nafara ariei elementului
onMouseUp butonul mouseului este eliberat cnd cursorul eranc
deasupra elementului
onMouseMovemouseul este mutat

nJavaScript,acestea trebuie scrise culitere mici

Exemplu:rollover
Urmatorul codva facetextul Hellored atunci cand cursorul
mouseului trece deasupra lui si blue atunci cand cursorul
mouseului iese dinsuprafata elementului
<h1onMouseOver="style.color='red';"
onMouseOut="style.color='blue';">Hello
</h1>

Evenimentesigestionarede
evenimente(1)

Evenimentesigestionarede
evenimente(2)

Evenimentesigestionarede
evenimente(3)

Evenimentesigestionarede
evenimente(4)

Evenimentesigestionarede
evenimente(5)

Evenimentesigestionarede
evenimente(6)

Exemple

Obinerea datei
<scripttype="text/javascript">
var d=newDate()
document.write(d.getDate()+"/")
document.write((d.getMonth()+1)+"/")
document.write(d.getFullYear())
</script>

7/11/2012

Formatarea datei
<scripttype="text/javascript">
var d=newDate()
var weekday=newArray("Sunday","Monday","Tuesday","Wednesday",
"Thursday","Friday","Saturday")
var monthname=newArray("Jan","Feb","Mar","Apr","May","Jun","Jul",
"Aug","Sep","Oct","Nov","Dec")
document.write(weekday[d.getDay()]+",")
document.write(monthname[d.getMonth()]+""+d.getDate()+",")
document.write(d.getFullYear())
</script>

Tuesday,Oct16,2012

Afiaremesaj laclick
<html>
<head>
<scripttype="text/javascript">
functiongetValue(){
var x=document.getElementById("myHeader");
alert(x.innerHTML);
}
</script>
</head>
<body>
<h1id="myHeader"onclick="getValue()">Thisismyheader</h1>
<p>Clickontheheadertoalertitsvalue</p>
</body>
</html>

Lucrulcutextarea

Sedoretecanmomentulncareseapas(onclick)ncsuadetextarea,textuliniialsdispar

Cuvntul cheiethis permitescriptuluispasezeovaloareuneifunciipebazacontextuluincare


esteutilizat.nexempluldemaisus,this estefolositninteriorulunuielement<textarea>,decithis
esteunobiect detiptextarea.

Pentru asolicita selectarea deopiuni

Spresupunemcunutilizatordoretescumpereomainaiaredealesdintre3culori.De
aceeatrebuiesaverificmdacutilizatorulchiaraselectatcevadinmeniuldeculoriinua
sritpurisimplupesteacestpas.

Pentru asolicita selectarea deopiuni

function validform(passForm) estedefinitfunciavalidform,careopereazpebaza


coninutuluiformularului.
culoareAleasa=passForm.color.selectedIndex Variabila culoareAleasa primete unrezultat
numeric,nfunciedeculoareaaleasdeutilizator.Dacacestanuaselectatnimiceavafi
zero,culoarearoucorespundevalorii1,negrului2ialbastrului3.Numrulsereferp la
ordineanmeniuaopiuniirespective.
if(culoareAleasa==0) {alert(Trebuie salegeioculoare)returnfalse} nfunciede
valoareavariabileiculoareAleasaverificmdacutilizatorulaalesntradevroculoare.Dac
elnuaselectatnimic(valoareaeste0)atunciformularulitrimiteunmesaj.
return true >ncazcontrarlucrurilesuntnregul.
onsubmit=returnvalidForm(this) rutina detratare aevenimentului onsubmit este
apelatatuncicndutilizatorultrimiteformularulprinapsareabutonuluiSubmit.Formatul
rutineidetratareaevenimentuluinugenereazerorintructfunciaapelatntoarce
valoareaadevratsaufals.Dacfunciantoarcetrue,paroleleaucoincisiarformularuleste
transmisserverului.Dacfunciantoarcefalse,onsubmitintercepteazeroareaioprete
procesuldetrimitereaformularului.AstfelJavascriptpermitecaeroareasfieidentificatla
nivelclientside(peparteadeclient),iarserverulnuvatrebuistiecutilizatorulaavuto
ncercarenereuitdetrimitere.

Ceestethis
Cuvntul cheieJavaScript this ipermitescriptuluis
pasezeovaloareuneifunciipebazacontextuluin
careesteutilizat.nexemplulanterior,this este
folositninteriorulunuitag form,decithis esteun
obiectdetipformular.
nexempleleulterioare,lveivedeapethis utilizat
naltecontexteivatrebuisputeisiidentificai
sensulpebazacontextuluincareestepasatunei
funcii.

Lucrul cu butoanele radio

Butoaneleradiopermitutilizatoruluisselectezeoopiune(inumaiunasingur)dintrun
grupdeposibiliti.
Spresupunemcunutilizatortrebuiesaleagntreunautomobilcu2uiiunulcu4ui.
nfiecarecaz,acestapoatealegeosinguropiuneitrebuieneapratsaleagoopiune.

Lucrul cu butoanele radio

function validform(passForm){ doorOption=1estedefinitfunciavalidform,care


opereazpebazaconinutuluiformularului. Variabila doorOption primeste valoarea 1care,
nmodevidentnureprezintunnumrvaliddeuidemain.

for(i=0;i<passForm.DoorCt.length; i++) sepornetestructurarepetitiv.Variabilacontori


iavaloareazeroiesteincrementatcuounitatedectreoperatorul++ atttimpctieste
maimicdectnumruldebutoaneradiodinformular.

if(passForm.DoorCt[i].checked) {doorOption=i} acesta este testul dincadrul buclei:dac


butonulradioesteselectat,doorOption iavaloarealuii.

if(doorOption ==1) {alert(Youmustchoose2or4doors)returnfalse} dacajungein


acestpunctivaloareavariabileidoorOption estenc1,formularulafieazocutiede
dialogdeavertizarecarelinformeazpeutilizatorctrebuiesaleagunmodel.

return true doardacoptionesterealeas,nseamncutilizatorulaalesunmodelde


main.Scriptul ntoarceunrezultattrue iiesedinscript.

Corelarentrecmpuri

nformularealeseveiobserva
deseoricoopiunealeasde
utilizatorvadictavaloareaaltor
cmpuridinformular.Deexemplu,
spresupunemcopiuneade
maindecapotabilestevalabil
numaipentrumodeleledemaini
cu2ui.Exist2opiuni:

Puteiverificaintrareailansao
avertizarenmomentulncare
utilizatorulselecteazoopiune
contradictoriecuceledeja
introduse
Undesignmaisofisticatimplic
nsselectareaopiunii
corespunztoarenlocul
utilizatorului.Astfeldacun
utilizatoralegeopiunea
decapotabil,scriptulselecteaz
automatbutonulradio
corespunztoruneimainicu2ui.

Corelarentrecmpuri

Trebuiesvasigurai,pentrunceput,cutilizatorulaalesunanumitnumrdeui.Prima
parteacoduluiesteidenticcuceaprezentatnseciuneaanterioar;vomexplicanumai
codulinedit.
if(passForm.DoorCt[doorOption].value==fourDoor &&passForm.sunroof.checked){
alert(The sunroof is only available on the two door model) return false}returntrue
Poriuneadecodestedestuldeclar.DacvaloareabutonuluiradioestefourDoor ieste
selectatcasetadevalidarecorespunztoaremainiidecapotabile,vaapreaunmesajde
eroare.ncazcontrartotulestenregul.
Parteaurmtoareascriptului introducevalorilencmpurinloculutilizatorului.
function doorSet(sunroofField){ cadeobicei,incepeti prin adefini funcia
if(sunroofField.checked){for(i=0;i<document.formular1.DoorCt.length;i++){ n
continuare,dacesteselectatopiuneadecapotabil,ncepeiobuclprincaretreceiprin
toatecmpurileDoorCt.
if(document.formular1.DoorCt[i].value==twoDoor){ cutaicmpulcorespunztor
opiuniicudouui
document.formular1.DoorCt[i].checked=true odatcelati identificat,selectail
atribuinduivaloareaadevrat.
<inputtype=checkbox name=sunroof value=Yes onclick=doorSet(this)> n
seciuneabodyapaginiiHTMLtrebuieintrodusoporiunemicdecodlacmpulcaseteide
validarepentrudecapotabil.Rutinadetratareaevenimentuluionclick apelez funcia
doorSet,creiaipaseazvaloareathis.Funciaestedeclanatdebifareacaseteide
validare.

Validareaadreselordeemail

AdreseledeInternetpot
puneproblemelatastare,
maialesutilizatorilor
nceptori.Puteisiajutai
naceastproblem
parcurgndadresadeemail
pecareautastatoi
verificnduivaliditatea.De
exemplu,puteiverificadac
semnul@este prezentat o
singurdatidacnuau
fostintrodusecaractere
nepermise(ex/).
Evident,este imposibil s
interceptmgreelilede
scriere,aacdac
utilizatoruladoritsscrie
popescu@yahoo.com ide
faptascris
popesc@yahoo.com greeala
nuvaputeaidentificat.

Validareaadreselordeemail

function validEmail(emailAdr){ definiipentrunceputofunciecreiasipasai


coninutulcmpuluidinemaildinformular.
invalidChars =/:,; creaiovariabil,invalidChars,ceconinecelecincicaractereinterzise
ntroadresdeemail.
if(emaiAdr ==){returnfalse dacconinutulluiemailestevid(gol),rezultatulestefals.
for(i=0;i<invalidChars.length;i++){ ncepeiostructurrepetitivdetipulforcareparcurge
iruldecaractereinvalidChars.Iniializaivariabilacontori cuzeroi,atttimpctiestemai
micsauegalculungimeairului,incrementailcuounitatecuoperatorul++.
badChar =invalidChars.charAt(i);if(emailAdr.indexOf(badChar,0)>1){returnfalse}
Variabila badChar salveazpoziiacaracteruluiilegaldinirulinvalidChars (amintiivc
JavaScript ncepenumrtoareadelazero).indexOfcautpoziiaunuicaracternir.Dac
rezultatulapeluluifuncieieste1,caracterulnuseaflnirulrespectivinuprimii
rezultatulfalse.
atPos=emailAdr.indexOf(@,1);if(atPos ==1){returnfalse Variabila atPos reprezint
poziiasemnului@.Folosind funcia indexOf,scriptulcautprimaapariieasemnului@,
ncepndcualdoileacaracterdinadres.Semnificaiarezultatului1esteabsena
caracterului@dinadresa deemail,ceea ce reprezintoproblem.
if(emailAdr.indexOf(@,atPos+1)>1) {returnfalse scriptul seasiguracumcafost
introdusunsingurcaracter@irespingeoriceadresceconinemaimultdeunsingur@,
verificnd caractereledinirulcarencepelauncaracterdupprimul@gsit.

Validareaadreselordeemail

periodPos=emailAdr.indexOf(.,atPos);if(periodPos ==1){returnfalse verificmacum


dacexistvreunpunctdupsemnul@.ncazulncarenuexist,funciavantoarcefalse.
if(periodPos+3>email.length){returnfalse}returntrue nceledinurmscripulnecesit
prezenaaminim2caractereduppunctuldinadres.Dacaiajunsattdedepartefrs
primiiniciunrezultatfalse,valoareafuncieivalidEmail estetrue,ceeacenseamnc
adresaemailintrodusestecorect.
function validForm(passForm){
if(!validEmail (passForm.email.value)){
alert(Adresa deemailinvalida)
passForm.email.focus()
passForm.email.select()
returnfalse}
returntrue
DupceaidefinitfunciavalidForm,expresiacondiionalspunec,dacvariabilaboolean
validEmailnuarevaloareaadevrat,utilizatorulvaprimiunmesajdeavertizarecutextul
Adresa deemailinvalida.Cndutilizatoruldclick pebutonulOKalcaseteidedialogde
avertizare,princomandafocus() scriptul ntoarcecursorulncmpulemailalformularului,
numitemail.Selecteazapoiconinutulcmpuluiemailcucomandaselect().

Maimulte despre JavaScript

Cuvinte rezervate (1)

Cuvinte rezervatre (2)

JavaScriptescapesequences

Notatii expresii regulate

Notatii expresii regulate(2)

Ce NUputeti face
Pentruproteciavizitatorilorlapaginilevoastre,folosind JavaScript
nuputei:
Executa alte programe
S v conectailaaltecomputere,exceptnddownloadul altor pagini
HTMLsau trimiterea deemail
S determinaicealtesiteuriavizitatutilizatorul
Citiisau scrie fiiere

Vizitaisiteurileurmtoarepentru
informaiisuplimentare
www.javascriptgate.com/
www.gatescript.com/
www.biblioscript.com/
www.w3schools.com/
www.siteexperts.com/
developer.irt.org/script/script.htm
www.wsabsract.com/cutpastejava.shtml