Programare Web Client Side, JavaScript

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>
functionmessage()
{
alert("This alertboxwascalledwiththeonload event");
}
</script>
</head>
<bodyonload="message()">
</body>
</html>

JavaScriptnzona <body>
naceast seciune trebuie puse scripturile careseexecut la
ncrcarea paginii
Scripturile dinaceast seciune genereaz coninutul paginii
<html>
<head>
</head>
<body>
document.write("This messageiswrittenbyJavaScript");
</script>
</body>
</html>
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
dedezvoltare
Browserele ngeneralnuraporteaz erori

Nuv ateptais primiicevamesajeajuttoarecares v ajutenmunca
dedepanareacoduluiJavaScript
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)
evenimente(2)
evenimente(3)
evenimente(4)
evenimente(5)
evenimente(6)
Exemple
Obinerea datei
var d=newDate()
document.write(d.getDate()+"/")
document.write((d.getMonth()+1)+"/")
document.write(d.getFullYear())
</script>
7/11/2012
Formatarea datei
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>
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.
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.
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

Programare Web Client Side, JavaScript

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Programare Web Client Side, JavaScript

Încărcat de

Drepturi de autor:

Formate disponibile

Programare webclientside,

Instruciunile nJavaScript seamn cu instruciuni nJavadeoarece

JavaScripteste rar folosit pentru ascrie programe complete

JavaScripteste ntro bun masur independentdeplatform

Ce poate s fac JavaScript?

Pentru aafiauntextntro pagin web,codul JavaScripteste inclus ntre

Unde sescrie codul JavaScript

Unde sescrie codul JavaScript

Unde sescrie codul JavaScript

Daca aveinevoie s rulaiacealaicodJavaScriptpe mai multe pagini,

Osingur linie :ntre //isfritul liniei

Comentariile detipjavadoc dinJava,/** */,sunt

Numere speciale predefinite:

Exist doardou scopurialevariabilelor:localiglobal

Variabilele potfi declarate implicitprin simpla adugare aunei

Exist dou valorispecialepentruvariabile:null iundefined

JavaScriptlucreaz cuobjectliterals,scrise conformurmtoarei sintaxe:

Unvectorpoate conine datedetipuri diferite

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

Putetifolosinew pentruacreaunobiectblank cruias i

Totui,osingur virgul lafinaleste ignorat

Patru moduri deacrea unarray

PutetifolosinewArray() cudou saumaimulteargumente

Lungimea unui array

Arrayurile sunt risipite,spaiul este alocat pentru

Nuexist arrayuribidimensionale,dar exist arrayde

with (object)statement ;foloseteobject caprefiximplicitalvariabilelor

Instruciuneawith esteutil atuncicndaveidefcutmultemanipulri

JavaScriptnu este Java

Funciile trebuie definitenseciunea <head>apaginiiHTMLpentruaasigurafaptulc ele

Parametrii simpli sunt transmiiprin valoare,obiectele sunt transmise prin referin

Browserele ngeneralnuraporteaz erori

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

Browserele nuseamn nicicndvinevorbadetipurilede

Majoritateahandlerelor apeleaz ofunciencareseproducetoat

nJavaScript,acestea trebuie scrise culitere mici

Cuvntul cheiethis permitescriptuluispasezeovaloareuneifunciipebazacontextuluincare

Pentru asolicita selectarea deopiuni

Pentru asolicita selectarea deopiuni

function validform(passForm) estedefinitfunciavalidform,careopereazpebaza

Lucrul cu butoanele radio

Lucrul cu butoanele radio

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

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

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

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

return true doardacoptionesterealeas,nseamncutilizatorulaalesunmodelde

function validEmail(emailAdr){ definiipentrunceputofunciecreiasipasai

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

Maimulte despre JavaScript

Cuvinte rezervate (1)

Cuvinte rezervatre (2)

Notatii expresii regulate

Notatii expresii regulate(2)

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