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
[email protected] ide
faptascris
[email protected] 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
[email protected] 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
[email protected],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
