Evenimente JavaScriptcontează dacă se scrie cu litere mari (ONCLICK), cu litere mici (onclick) sau...

Pagini Web cu JavaScript Diana Elena Diaconu 94

Capitolul 7.

Evenimente JavaScript

7.1. Introducere Atât evenimentele cât şi tratarea evenimentelor sunt acŃiuni declanşate de către

utilizatori şi pot fi interpretate cu ajutorul funcŃiilor JavaScript. Evenimentele declanşate de către utilizatori, cum sunt: click-stânga de mouse, mişcarea mouse-ului, operaŃia drag-and-drop sau operaŃii ale sistemului, cum sunt: încărcarea unui document sau a unei imagini, sunt incidente comune.

Cel mai des, evenimentele sunt declanşate de către un formular, cum ar fi: click sau dublu-click de mouse pe un buton, click pe butonul Reset, selectarea unui text dintr-un câmp de tip text sau textarea. Totuşi, nu numai formularele pot apela funcŃii cu ajutorul evenimentelor. Important de reŃinut este faptul că orice element poate avea asociat un evenimet cu ajutorul căruia să apeleze o funcŃie.

Evenimentele JavaScript nu trebuie scrise neapărat între etichetele <script language=”JavaScript”> şi </script>, deoarece fac parte din HTML. Totuşi, numai cu HTML, nu se poate scrie o funcŃie care să fie acŃionată de către un eveniment.

Un alt element important este felul în care se scrie evenimentul. În HTML, nu contează dacă se scrie cu litere mari (ONCLICK), cu litere mici (onclick) sau cu litere mari la începutul cuvântului (onClick, onDblClick). O convenŃie este totuşi scrierea evenimentelor cu literă mare la fiecare cuvânt ce îl conŃine.

FuncŃiile se scriu de obicei înaintea apelării lor de către evenimente, dar nu vor fi executate înaintea tratării evenimentelor respective.

7.2. Evenimentele şi tratarea evenimentelor

În această carte se utilizează două noŃiuni pentru a defini diferite acŃiuni ale utilizatorilor şi anume: evenimente (events) şi tratarea evenimentelor (event handlers). Evenimentele sunt: Click (click de mouse), MouseOver (cursorul mouse-ului trece peste un anumit element), KeyDown (este apăsată o tastă), iar tratarea evenimentelor reprezintă acŃiunea ce urmează la acŃionarea evenimentului, cum ar fi: onClick, onMouseOver, onKeyDown. AcŃionarea sau tratarea unui eveniment, aduce după sine acŃionarea unei funcŃii JavaScript ce va prelua efectiv sarcina atribuită evenimentului.

De exemplu, dacă se dă click pe un buton dintr-un formular, se poate acŃiona o funcŃie ce va realiza: încărcarea unei pagini Web, a unei imagini, va deschide sau va închide o fereastră, va face divese calcule, va trimite un e-mail.

7.3. Tratarea evenimentelor - clasificare

Evenimentele pot fi acŃionate de diferite elemente, cum ar fi: Tratarea evenimentelor de către sistem onError AcŃiune ce va fi declanşată în urma eşecului încărcării unei imagini sau a unui

document. onLoad AcŃiune ce va fi declanşată la încărcarea unui document. onUnLoad AcŃiune ce va fi declanşată atunci când un document nu se încarcă.

Obiective: - să înŃeleagă noŃiunea de eveniment JavaScript - să poată utiliza un eveniment JavaScript acolo unde este necesar - să înŃeleagă noŃiunile de eveniment şi tratarea evenimentelor - să poată crea un script ce utilizează evenimente JavaScript


Tratarea evenimentelor de către un formular onBlur AcŃiune ce va fi declanşată când se pierde focalizarea de pe un element. onChange AcŃiune ce va fi declanşată la schimbarea unui element. onFocus AcŃiune ce va fi declanşată de focalizarea asupra unui element. onReset AcŃiune ce va fi declanşată când va fi acŃionat butonul Reset al unui formular. onSelect AcŃiune ce va fi declanşată atunci când se selectează un element. onSubmit AcŃiune ce va fi declanşată când va fi acŃionat butonul Submit al unui formular.

Tratarea evenimentelor de către tastatură onKeyDown AcŃiune ce va fi declanşată când se apasă o tastă. onKeyPress AcŃiune ce va fi declanşată când se apasă şi se eliberează o tastă. onKeyUp AcŃiune ce va fi declanşată când se eliberează o tastă.

Tratarea evenimentelor de către mouse onClick AcŃiune ce va fi declanşată când se dă click stânga pe mouse. onDblClick AcŃiune ce va fi declanşată când se dă dublu click stânga pe mouse. onMouseDown AcŃiune ce va fi declanşată când un buton al mouse-ului este apăsat. onMouseMove AcŃiune ce va fi declanşată când se mişcă cursorul mouse-ului. onMouseOut AcŃiune ce va fi declanşată când cursorul mouse-ului se deplasează în afara

elementului sau a suprafeŃei delimitate. onMouseOver AcŃiune ce va fi declanşată când cursorul mouse-ului se deplasează peste un

element sau peste suprafaŃa delimitată. onMouseUp AcŃiune ce va fi declanşată când butonul mouse-ului este eliberat.

7.3.1. Tratarea evenimentelor de către sistem

onError va acŃiona în urma unei erori de încărcare a unei imagini sau a unui document. Pentru a utiliza acest eveniment, se apelează o funcŃie JavaScript ce va realiza o acŃiune ca urmare a producerii unei erori. FuncŃiei respective i se va transmite un mesaj, URL-ul la care s-a produs mesajul şi numărul liniei de cod. onError este eevveenntt hhaannddlleerr pentru obiectele: Image şi Window.

Exemplu În acest exemplu, avem un formular ce conŃine butonul cu numele Apasati!. În urma acŃionării prin click de mouse asupra acestui buton, se apelează funcŃia f(), ce conŃine o eroare (în loc de writeln, am scris writteln). Fiind în interiorul scriptului JavaScript, va acŃiona onError, prin apelarea funcŃiei MesajEroare. FuncŃia aceasta, primeşte prin cei trei parametri: mesaj, url şi linie, datele de identificare ale erorii care s-a produs. Toate aceste informaŃii se vor afişa într-o fereastră, prin intermediul metodei alert().

<html> <head> <title> onError </title> <script type="text/javascript"> onerror=MesajEroare var x="" function MesajEroare(mesaj,url,linie) { x="Este o eroare pe aceasta

pagina!\n\nEroare: "+mesaj+"\n"; x+="URL: " + url + "\n"; x+="Line: " + linie + "\n\n"; x+="Dati click pentru a

continua!\n\n"; alert(x); return true;


} function f() { document.writteln("Nu o sa ma

vedeti ;)"); } </script> </head> <body> <form> <input type="button" value="Apasati!" onclick="f()"> </form> </body> </html>

onLoad va acŃiona în urma încărcării unui document, a tuturor cadrelor dintr-o etichetă FRAMESET sau a unei imagini. Pentru a utiliza acest eveniment, apelăm o funcŃie JavaScript ce va realiza o acŃiune ca urmare a încărcării unei imagini sau a unui document. De obicei, onLoad se utilizează pentru a verifica tipul de browser al vizitatorilor şi versiunea pentru a încărca un document corect pe baza acestei informaŃii. onLoad este eevveenntt hhaannddlleerr pentru obiectele: Image, Layer şi Window. Exemplu <html> <head> <title> onLoad </title> <script type="text/javascript"> function g() { alert("Salut!"); } </script> </head> <body onLoad="g()"> </body> </html>

onUnload va acŃiona în momentul în care utilizatorul părăseşte documentul afişat în fereastra curentă. onUnLoad este eevveenntt hhaannddlleerr pentru obiectul: Window. Exemplu În acest exemplu este un formular ce permite selectarea unei variante corecte. În

urma alegerii făcute, va apărea un mesaj afişat într-o fereastră acŃionată de către metoda alert. La închiderea paginii, acŃionează evenimentul onUnload, ce apelează funcŃia g(), care afişează mesajul “La revedere!”.


<html> <head> <title>onUnload</title> <script type="text/javascript"> function g() { alert("La revedere!"); } function f(raspuns) { if (raspuns==1) alert("Corect!\n\nFelicitari!!"); else alert("Nu prea va pricepeti :("); } </script> <style type="text/css"> .anunt {font-family: Geneva, Arial;

font-size: 18px; font-weight: bolder; color: #FF0000; letter-spacing: 0.3em; }

.titlul {font-family: Geneva, Arial;

font-size: 18px; font-weight: bold; color: #0000CC; border-bottom-width: thin; border-bottom-style: ridge; border-bottom-color: #0000CC; background-color: #00FFFF; border-top-style: ridge; border-top-width: thin; }

</style> </head> <body onUnload="g()"> <form> <p class="anunt">Alegeti varianta

corecta! </p> <p class="titlul">Cand ai nevoie de

dragoste </p> cand ai nevoie de dragoste nu ti se

da dragoste.<br /> cand trebuie sa iubesti nu esti

iubit.<br /> cand esti singur nu poti sa scapi

de singuratate.<br /> cand esti nefericit nu are sens sa o

spui. <p><input type="submit" name="Submit"

value="Mircea Cartarescu" onClick="f(1)">

<input type="submit" name="Submit2" value="Alexandru Andries" onClick="f(2)">

</p> </form> </body> </html>


7.3.2. Tratarea evenimentelor de către un formular

onBlur va acŃiona în urma pierderii focalizării asupra unui element. Se utilizează în special în formulare, când acŃionăm asupra unui buton, după care ne focalizăm pe alt buton sau undeva în afara lui, unde dăm click. onBlur este eevveenntt hhaannddlleerr pentru obiectele: Button, Checkbox, FileUpload, Layer, Password,

Radio, Reset, Select, Submit, Text, Textarea, Window. Exemplu În exemplul de mai jos, am utilizat o funcŃie care preia o valoare introdusă în formular,

o verifică şi afişează un mesaj corespunzător. Dacă nu a fost introdus un număr, funcŃia isNaN() va returna valoarea “true”, iar pe monitor va apărea mesajul “IntroduceŃi un număr!”. Mesajele afişate vor apare pe ecran numai dacă introducem altceva decât un număr pozitiv. Evenimentul onBlur îşi face efectul, adică transmite valoarea introdusă de către utilizator, funcŃiei verificare, dacă dăm click în afara zonei de text a formularului.

<html>

<head>

<title>

onBlur

</title>

<script type="text/javascript">

function verificare(form)

{

var x=0;

x=document.formular.date.value;

y=isNaN(x);

if (y==true)

alert("Introduceti un numar!");

else

if (x<0)

{

alert("Va rog sa introduceti un numar

pozitiv!");

}

}

</script>

</head>

<body>

<H3>Introduceti un numar pozitiv:</H3>

Pentru verificare, puteti introduce altceva

<br />

<form name="formular">

<input type="text" name="date" value=""

size="20" onBlur='verificare(this.form)'>

</form>

</body>

</html>


onChange va acŃiona în urma pierderii focalizării asupra unui element şi a modificării conŃinutului unui câmp. onChange este eevveenntt hhaannddlleerr pentru obiectele: FileUpload, Select, Text, Textarea. Exemplu În exemplul de mai jos, am utilizat o funcŃie care preia şirul de caractere introdus în

formular şi îl transformă în şir scris cu majuscule. <html> <head><title>onChange</title> <script type="text/javascript"> function majuscule(a) { a.value = a.value.toUpperCase(); } </script> </head> <body> <H3>Introduceti numele si prenumele:</H3> <form name="formular"> <table> <tr> <td>Numele:</td> <td><input type="text" name="x" value="" size="20" onChange="majuscule(this)"></td> </tr> <tr> <td>Prenumele:</td> <td><input type="text" name="y" value="" size="20" onChange="majuscule(this)"></td> </tr> </table> </form> </body> </html>

onFocus va acŃiona în urma focalizării asupra unui element cum ar fi: o fereastră, un frame, un element dintr-un formular. onFocus este eevveenntt hhaannddlleerr pentru obiectele: Button, Checkbox, FileUpload, Layer, Password,

Radio, Reset, Select, Submit, Text, Textarea şi Window.

Exemplu În exemplul de mai jos, am utilizat o funcŃie care verifică dacă în şirul de caractere introdus de la tastatură se află caracterul @, ce intră în componenŃa unei adrese de e-mail validă.

<html> <head> <title> Adresa email </title> <script type="text/javascript" language="JavaScript"> this.formular.email.focus(); this.formular.email.select(); function verificare() { x = new String(); x = this.formular.email.value;

if (x.match("@"))


alert("Foarte bine!"); else alert("Va rog sa verificati adresa

introdusa!"); }

</script> <style type="text/css"> body { font-family: Geneva, Arial, Helvetica; font-size: 14px; font-weight: bolder; color: #008080; background-color: #B7F0FF; cursor: text; } </style> </head> <body> <H3>Introduceti adresa de e-mail:</H3> <form name="formular"> <INPUT TYPE="text" VALUE="" NAME="email" size="30" onFocus="verificare(this.value)"> </form> </body> </html>

onReset va acŃiona în urma executării unui click de mouse pe un buton de tip Reset, al unui formular. onReset este eevveenntt hhaannddlleerr pentru obiectul: Form.

Exemplu În exemplul de mai jos, am creat un formular mai complex, care verifică date introduse în toate câmpurile. După scrierea formularului, am introdus un script de verificare, ce apelează diverse

funcŃii poziŃionate în antetul paginii. De exemplu, am creat o funcŃie ce permite atenŃionarea utilizatorilor în cazul în care au lăsat anumite câmpuri necompletate. Una dintre acestea este apelată de către: VerificareFormular.VerifDistinct("utilizator","cerinta","Introduceti numele de utilizator!");

În codul sursă al formularului, am introdus nume sugestive atât pentru variabile, cât şi pentru funcŃii şi mai multe rânduri cu scurte comentarii, utile pentru înŃelegerea corectă a scriptului.

Butonul Reset are ca scop golirea câmpurilor completate greşit de către utilizator. Mai jos, am afişat câteva dintre mesajele de eroare care apar, dacă nu sunt

completate corect câmpurile formularului. De exemplu, dacă pentru numele de utilizator introducem mai puŃin de 3 caractere, intrăm în contradicŃie cu condiŃia pusă în apelul de mai jos: VerificareFormular.VerifDistinct("utilizator","LungimeMin=3");


Mesaje de eroare

VerificareFormular. VerifDistinct("utilizator", "LungimeMin=3");

Apelul: VerificareFormular. VerifDistinct("utilizator","CazUtilizator"); Cazul: case "CazUtilizator":


Apelul: VerificareFormular. VerifDistinct("Varsta","MaiMareDecat"); Cazul: case "MaiMareDecat":

<html> <head> <title>onReset</title> <script language="JavaScript" type="text/javascript"> function verificare(NumeFormular) { this.ValFormTrimis=document.forms[NumeFormular]; if(!this.ValFormTrimis)

//daca nu ati introdus numele formularului, va aparea un mesaj... { alert("BUG: Nu ati introdus numele obiectului Form: "+NumeFormular); return; } if(this.ValFormTrimis.onsubmit) { this.ValFormTrimis.onsubmit=null; } this.ValFormTrimis.onsubmit=TrimisFormular; this.VerifDistinct = VerifVal; this.AVF=VF; this.CL = Curata; } function VF(NumeFunctie) { this.ValFormTrimis.VerifPlus = NumeFunctie; } function Curata()

//functia care curata campurile formularului { for(var i=0;i < this.ValFormTrimis.elements.length;i++) { this.ValFormTrimis.elements[i].SetValidare = null; } } function TrimisFormular() { for(var i=0;i < this.elements.length;i++) { if(this.elements[i].SetValidare && !this.elements[i]. SetValidare.

valid()) { return false; } } if(this.VerifPlus) { xS =" var ret = "+this.VerifPlus+"()"; eval(xS); if(!ret) return ret; }


return true; } function VerifVal(xN,xD,MesEroare)

//functia care verifica valorile introduse in formular //valorile introduse sunt transmise prin variabilele xN,xD,MesEroare { if(!this.ValFormTrimis) { alert("BUG: Obiectul Form nu este setat corect!"); return; } var xO = this.ValFormTrimis[xN]; if(!xO)

//daca nu ati scris numele unui element din formular, cum ar fi: numele, prenumele, telefon... { alert("BUG: Nu ati introdus numele obiectului denumit: "+xN); return; } if(!xO.SetValidare) { xO.SetValidare = new SetValidare(xO); } xO.SetValidare.add(xD,MesEroare); } function VerifDes(xi,desc,xEroare) { this.desc=desc; this.xEroare=xEroare; this.xO = xi; this.valid=vdesc_valid; } function vdesc_valid() { if(!VerificareaDatelor(this.desc,this.xO,this.xEroare)) { this.xO.focus(); return false; } return true; } function SetValidare(xi) { this.VectorS=new Array(); this.add= ADV; this.valid= VerifVectorS; this.xO = xi; } function ADV(desc,xEroare) { this.VectorS[this.VectorS.length]= new VerifDes(this.xO,desc,xEroare); } function VerifVectorS() { for(var i=0;i<this.VectorS.length;i++) { if(!this.VectorS[i].valid()) { return false; } } return true; }


function VerificareEmail(email) {

//funcŃie de verificare a câmpului pentru e-mail if(email.length <= 0) { return true; } var Impartit = email.match("^(.+)@(.+)$"); if(Impartit == null) return false; if(Impartit[1] != null ) { var xU=/^\"?[\w-_\.]*\"?$/;

//variabila pentru verificarea numelui de utilizator din adresa de e-mail if(Impartit[1].match(xU) == null) return false; } if(Impartit[2] != null) { var xDomeniu=/^[\w-\.]*\.[A-Za-z]{2,4}$/;

//variabila pentru verificarea numelui de domeniu din adresa de e-mail if(Impartit[2].match(xDomeniu) == null) { var xIP =/^\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\]$/; if(Impartit[2].match(xIP) == null) return false; } return true; } return false; } function VerificareaDatelor(VValid,ValoareOb,SirEroare)

//functie pentru verificarea datelor { var vp = VValid.search("="); var comanda = ""; var ValoareComanda = ""; if(vp >= 0) { comanda = VValid.substring(0,vp); ValoareComanda = VValid.substr(vp+1); } else { comanda = VValid; } switch(comanda) { case "cerinta":

//verifica daca a fost introdusa informatia ceruta { if(eval(ValoareOb.value.length) == 0) { if(!SirEroare || SirEroare.length ==0) { SirEroare = ValoareOb.name + " : Introduceti informatia

ceruta!"; } alert(SirEroare); return false; } break; } case "LungimeMax":

//verifica daca se respecta lungimea maxima impusa pentru sirul de caractere { if(eval(ValoareOb.value.length) > eval(ValoareComanda)) { if(!SirEroare || SirEroare.length ==0) { SirEroare = ValoareOb.name + " : "+ValoareComanda+"


characters maximum "; } alert(SirEroare + "\n[Lungimea curenta= " +

ValoareOb.value.length + " ]"); return false; } break; } case "LungimeMin":

//verifica daca se respecta lungimea minima impusa pentru sirul de caractere { if(eval(ValoareOb.value.length) < eval(ValoareComanda)) {if(!SirEroare || SirEroare.length ==0) {SirEroare = ValoareOb.name + " : " + ValoareComanda + " caractere

minim "; } alert(SirEroare + "\n[Lungimea curenta= " +

ValoareOb.value.length + " ]"); return false; } break; } case "numeric":

//verifica daca au fost introduse cifre { var PozitieCaracter = ValoareOb.value.search("[^0-9]"); if(ValoareOb.value.length > 0 && PozitieCaracter >= 0) { if(!SirEroare || SirEroare.length ==0) {SirEroare=ValoareOb.name+": Sunt permise numei cifre!"; } alert(SirEroare + "\n [Eroare caracter la pozitia: " +

eval(PozitieCaracter+1)+"]"); return false; } break; } case "Alfabet":

//verifica daca au fost introduse caractere din alfabet { var PozitieCaracter = ValoareOb.value.search("[^A-Za-z]"); if(ValoareOb.value.length > 0 && PozitieCaracter >= 0) { if(!SirEroare || SirEroare.length ==0) { SirEroare = ValoareOb.name+": Sunt permise numai caractere

din alfabet "; } alert(SirEroare + "\n [Eroare caracter la pozitia: " +

eval(PozitieCaracter+1)+"]"); return false; } break; } case "CazUtilizator":

//verifica daca a fost introdus corect numele de utilizator { var PozitieCaracter = ValoareOb.value.search("[^A-Za-z0-9\-_]"); if(ValoareOb.value.length > 0 && PozitieCaracter >= 0) { if(!SirEroare || SirEroare.length ==0) { SirEroare = ValoareOb.name+": Caracterele permise sunt: A-

Z,a-z,0-9,- si _"; } alert(SirEroare + "\n [Eroare caracter la pozitia: " +

eval(PozitieCaracter+1)+"]"); return false; } break; } case "email":

//verifica daca a fost completat corect campul pentru e-mail {


if(!VerificareEmail(ValoareOb.value)) { if(!SirEroare || SirEroare.length ==0) {SirEroare = ValoareOb.name+": Introduceti o adresa de email

corecta!"; } alert(SirEroare); return false; } break; } case "MaiMareDecat":

//verifica daca a fost introdusa varsta corect { var ValoareComanda=7; if(isNaN(ValoareOb.value)) { alert(ValoareOb.name+": Ar trebui sa fie un numar!"); return false; } if(eval(ValoareOb.value) <= eval(ValoareComanda)) { if(!SirEroare || SirEroare.length ==0) { SirEroare = ValoareOb.name + " : Valoarea ar trebui sa fie

mai mare decat: "+ ValoareComanda; } alert(SirEroare); return false; } break; } case "SelectatNu":

//verifica daca a fost selectata o optiune pentru judet { if(ValoareOb.selectedIndex == null) { alert("BUG: Nu a fost selectat!"); return false; } if(ValoareOb.selectedIndex == eval(ValoareComanda)) { if(!SirEroare || SirEroare.length ==0) { SirEroare = ValoareOb.name+": Selectati o optiune!"; } alert(SirEroare); return false; } break; } } return true; } </script> </head> <body> <form action="" name="formular" > <table cellspacing="3" cellpadding="3" border="0" align="center"> <tr> <td align="right">Nume de utilizator*:</td> <td><input type="text" name="utilizator" size="26"></td></tr> <tr> <td align="right">Numele*:</td> <td><input type="text" name="numele" size="26"></td> </tr> <tr> <td align="right">Prenumele*:</td> <td><input type="text" name="prenumele" size="26"></td> </tr> <tr>


<td align="right">Telefon:</td> <td><input type="text" name="telefon" size="26"></td> </tr> <tr> <td align="right">Adresa:</td> <td><textarea cols="20" rows="5" name="adresa"></textarea></td> </tr> <tr> <td align="right">Adresa de e-mail*:</td> <td><input type="text" name="Email" size="26"></td> </tr> <tr> <td align="right">Varsta*:</td> <td><input type="text" name="Varsta" size="26"></td> </tr> <tr> <td align="right" size="26">Judet*:</td> <td> <select id="Judet" name="Judet"> <option value="" selected>Alegeti! <option VALUE="AB">ALBA</option> <option VALUE="AR">ARAD</option> <option VALUE="AG">ARGES</option> <option VALUE="BC">BACAU</option> <option VALUE="BH">BIHOR</option> <option VALUE="BN">BISTRITA-NASAUD</option> <option VALUE="BT">BOTOSANI</option> <option VALUE="BR">BRAILA</option> <option VALUE="BV">BRASOV</option> <option VALUE="B">BUCURESTI</option> <option VALUE="BZ">BUZAU</option> <option VALUE="CL">CALARASI</option> <option VALUE="CS">CARAS-SEVERIN</option> <option VALUE="CJ">CLUJ</option> <option VALUE="CT">CONSTANTA</option> <option VALUE="CV">COVASNA</option> <option VALUE="DB">DAMBOVITA</option> <option VALUE="DJ">DOLJ</option> <option VALUE="GL">GALATI</option> <option VALUE="GR">GIURGIU</option> <option VALUE="GJ">GORJ</option> <option VALUE="HR">HARGHITA</option> <option VALUE="HD">HUNEDOARA</option> <option VALUE="IL">IALOMITA</option> <option VALUE="IS">IASI</option> <option VALUE="IF">ILFOV</option> <option VALUE="MM">MARAMURES</option> <option VALUE="MH">MEHEDINTI</option> <option VALUE="MS">MURES</option> <option VALUE="NT">NEAMT</option> <option VALUE="OT">OLT</option> <option VALUE="PH">PRAHOVA</option> <option VALUE="SJ">SALAJ</option> <option VALUE="SM">SATU-MARE</option> <option VALUE="SB">SIBIU</option> <option VALUE="SV">SUCEAVA</option> <option VALUE="TR">TELEORMAN</option> <option VALUE="TM">TIMIS</option> <option VALUE="TL">TULCEA</option>


<option VALUE="VL">VALCEA</option> <option VALUE="VS">VASLUI</option> <option VALUE="VN">VRANCEA</option> </select> </td> </tr> <tr> <td align="right"> </td> <td><input type="submit" value="Apasati!"> <input name="reset" type="reset" value="Reset"> </td> </tr> <tr> <td colspan="2"> <br /> <p align="right"> Campurile cu * sunt obligatorii!</p> </td> </tr> </table> </form> <script language="JavaScript" type="text/javascript"> var VerificareFormular = new verificare("formular"); VerificareFormular.VerifDistinct("utilizator","cerinta","Introduceti

numele de utilizator!"); VerificareFormular.VerifDistinct("utilizator","LungimeMax=10", "Lungimea

maxima pentru numele de utilizator este 10"); VerificareFormular.VerifDistinct("utilizator","LungimeMin=3"); VerificareFormular.VerifDistinct("utilizator","CazUtilizator"); VerificareFormular.VerifDistinct("numele","cerinta","Introduceti

numele!"); VerificareFormular.VerifDistinct("numele","LungimeMax=20", "Lungimea

maxima pentru nume este 20"); VerificareFormular.VerifDistinct("numele","LungimeMin=3"); VerificareFormular.VerifDistinct("numele","Alfabet"); VerificareFormular.VerifDistinct("prenumele","cerinta", "Introduceti

prenumele!"); VerificareFormular.VerifDistinct("prenumele","LungimeMax=30", "Lungimea

maxima pentru prenume este 30"); VerificareFormular.VerifDistinct("prenumele","LungimeMin=3"); VerificareFormular.VerifDistinct("prenumele","Alfabet"); VerificareFormular.VerifDistinct("telefon","LungimeMax=50", "Introduceti

telefonul!"); VerificareFormular.VerifDistinct("telefon","numeric"); VerificareFormular.VerifDistinct("adresa","LungimeMax=50", "Introduceti

adresa!"); VerificareFormular.VerifDistinct("Email","LungimeMax=50"); VerificareFormular.VerifDistinct("Email","cerinta"); VerificareFormular.VerifDistinct("Email","email"); VerificareFormular.VerifDistinct("Varsta","cerinta","Introduceti

varsta!"); VerificareFormular.VerifDistinct("Varsta","MaiMareDecat"); VerificareFormular.VerifDistinct("Varsta","LungimeMax=3", "Lungimea maxima

pentru varsta este 3"); VerificareFormular.VerifDistinct("Varsta","LungimeMin=1"); VerificareFormular.VerifDistinct("Judet","SelectatNu=0"); </script> </body> </html>


onSelect va acŃiona în urma selectării uneia dintre opŃiunile dintr-un câmp de tip text sau textarea dintr-un formular. onSelect este eevveenntt hhaannddlleerr pentru obiectele: Text, Textarea. Exemplu În următorul exemplu, am utilizat o funcŃie care afişează un mesaj, în cazul în care

selectăm caracterele scrise într-un câmp de tip text. <html> <head> <title>onSelect</title> </head> <script type="text/javascript" language="JavaScript"> function f() { alert("Felicitari! \nAti selectat

textul."); } </script> <body> <H3>Selectati textul de mai jos!</H3> <form name="formular"> <input type="text" name="data"

value="Textul de mai jos :)" size=20 onSelect='f()'>

</form> </body> </html>

onSubmit este utilizat pentru a executa un cod JavaScript, atunci când utilizatorul dă click pe butonul Submit al unui formular. Se poate anula trimiterea informaŃiilor din formular către server, dacă se pune return false ca ultimă instrucŃiune în secvenŃa de tratare a evenimentului. onSubmit este eevveenntt hhaannddlleerr pentru obiectul: Form. Exemplu În exemplul de mai jos, am utilizat o funcŃie care verifică dacă este selectat un buton

de tip checkbox. În cazul în care este selectat, formularul permite continuarea comenzii, altfel apare un mesaj de atenŃionare. Butonul Continuati comanda este de tip submit, iar în momentul în care este acŃionat, formularul declanşează onSubmit="return verifica(this)". În final, onSubmit apelează funcŃia verifica.

<html> <head> <title>onSubmit</title> <style> body { font-family: Geneva, Arial; font-size: 12px; color: #0000CC; background-color: #A8A8FF; text-align: center; } .titlul { font-family: Verdana, Arial; font-size: 18px; font-weight: bolder; color: #000066; text-align: center; } </style> <script type="text/javascript"


language= "JavaScript"> function verifica(f) { if(f.DeAcord.checked == false ) {alert(‘Selectati butonul inainte

de a continua!'); return false; } else { var tit=f.carte.value;

var aut=f.autor.value; var can=f.cantitate.value; alert("Ati comandat:\nTitlul: "+tit+"\nAutor: "+aut+"\nCantitate: "+can); return true;

} } </script> </head> <body> <p align="center" class="titlul">Comanda de carti</p> <form action="/pagina.html" method="POST" onSubmit="return verifica(this)"> <table width="400" border="0"> <tr> <td>Titlul cartii</td> <td>Autor</td> <td>Cantitate</td></tr> <tr> <td><select name="carte"> <option selected="">Alegeti

cartea!</option> <option value="Carte 1">Carte

1</option> <option value="Carte 2">Carte

2</option> <option value="Carte 3">Carte

3</option> </select> </td> <td><select name="autor"> <option selected="">Alegetii

autorul!</option> <option value="Autor1">Autor

1</option> <option value="Autor2">Autor

2</option> <option value="Autor3">Autor

3</option> </select></td> <td><input type="text" name="cantitate" size="15" value=""></td></tr> </table ><br /><br /> Acceptati comanda:


<input type="checkbox" value="0" name=" DeAcord "> <input type="submit" value="Continuati comanda"> <input type="button" value="Iesire" onClick="document.location.href='/index.html';"> </form> </body> </html>

7.3.3. Tratarea evenimentelor de către tastatură

onKeyDown va acŃiona în urma apăsării unei taste de către utilizator. Evenimentul KeyDown îl precede pe KeyPress. onKeyDown este eevveenntt hhaannddlleerr pentru obiectele: Document, Image, Link şi Textarea. Exemplu În acest exemplu, avem un formular în care introducem numele şi adresa de e-mail,

iar la apăsarea unei taste de către utilizator, se afişează un mesaj cu datele introduse. În cazul în care nu s-a introdus nimic în câmpurile formularului, ne atenŃionează printr-un mesaj în legătură cu această lipsă.

<html> <head> <title>onKeyDown</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body,td,th { color: #006600; font-size: 14px; } body { background-color: #AEFFAE; font-size: 18px;


font-weight: bolder; text-align: center; } .interior { color: #006633; background-color: #E1E1E1; } </style> </head> <body> <script language="JavaScript"> function f() { a=document.form1.t1.value; b=document.form1.t2.value; if (((a==null)||(a.length==0))&& ((b==null)||(b.length==0))) document.writeln("Nu ati introdus numele, si e-mail-ul!"); else document.writeln("Numele introdus este: ", a, " si e-mail-ul este: ",b); } </script> <form name="form1"> Formular<br /><br /> <table width="417" border="1"> <tr> <td width="150">Numele si prenumele:</td> <td width="251"><input name="t1" type="text" size=40 maxlength=40

class="interior"></td> </tr> <tr> <td>E-mail: </td> <td><input type="text" name="t2" size=40 maxlength=40

class="interior"></td> </tr> <tr> <td colspan="2"><div align="center"> <input type="Button" name="buton" value="Apasati!"

onKeyDown="f(this.form)"> </div></td></tr> </table> </form> </body> </html>

onKeyPress va acŃiona în urma apăsării scurte sau apăsării îndelungate a unei taste de către utilizator. onKeyPress este eevveenntt hhaannddlleerr pentru obiectele: Document, Image, Link şi Textarea. Exemplu În acest exemplu, avem un formular ce permite introducerea unor caractere diferite de

caracterele speciale, cum ar fi !@#$%^&*. Dacă încercăm să introducem aceste caractere, ele pur şi simplu nu vor fi acceptate.

<html> <head> <title>onKeyPress</title> <script type="text/javascript" language= "JavaScript"> function f() { if ((event.keyCode > 32 &&

event.keyCode < 48) || (event.keyCode > 57 && event.keyCode < 65) ||


(event.keyCode > 90 && event.keyCode < 97)) event.returnValue = false; }

</script> </head> <body> <center> <form onSubmit="return false;"> Introduceti un text, care nu contine

caracterele: !@#$%^&* <br> <textarea rows=2 cols=20

name=comments onKeyPress="f()"></textarea>

</form> </center> </body> </html>

onKeyUp va acŃiona în urma eliberării unei taste de către utilizator, după ce aceasta a fost apăsată. onKeyUp este eevveenntt hhaannddlleerr pentru obiectele: Document, Image, Link şi Textarea. Exemplu În acest exemplu, avem un formular ce permite introducerea unor litere din

componenŃa unor culori şi sugerează completarea cuvântului, pe baza unui vector ce conŃine culorile respective. În partea dreaptă, avem o legătură realizată pe cuvântul Completeaza, ce permite completarea numelui culorii. De exemplu, dacă se tastează litera a, formularul ne sugerează cuvântul alb. Pentru a nu mai scrie toate literele, dăm click pe cuvântul completează şi va completa automat formularul cu cuvântul alb.

<html> <head> <title>onKeyUp</title> <script type="text/javascript" > culori = new Array("alb", "albastru", "argintiu", "caramiziu", "crem",

"galben", "gri", "maron", "mov", "negru", "pastel", "portocaliu", "rosu", "roz", "verde", "violet", "visiniu" );

var s1 = ""; var sd = ""; function OCuloare() { var intrare = document.forms['formular'].culoare.value; var lungime = intrare.length; sd = ""; s1 = ""; if (intrare.length) { for (xc in culori) { if (culori[xc].substr(0,lungime).toLowerCase() ==

intrare.toLowerCase()) { sd = intrare + culori[xc].substr(lungime); s1 = culori[xc]; break; }


} } document.forms['formular'].cul.value = sd; if (!s1.length || intrare == sd) document.getElementById('s1b').style.display = "none"; else document.getElementById('s1b').style.display = "block"; } function SetareCuloare() { document.forms['formular'].culoare.value = s1; ascund(); } function ascund() { document.forms['formular'].cul.value = ""; document.getElementById('s1b').style.display = "none"; } </script> <style type="text/css"> body { background-color: #BFBFFF; } body,td,th { color: #0000FF; font-weight: bold; } </style> </head> <body> <div style="width: 202px; margin: 100px auto 0 auto;"> <form name="formular"> <div>Introduceti o culoare:</div> <div style="position: relative; margin: 5px 0 5px 0; height: 30px;"> <div style="position: absolute; top: 0; left: 0; width: 200px; z-index:

1;"> <input type="text" name="cul" style="background-color: #fffff; border:

1px solid #aaaaaa; width: 200px; padding: 2px" disabled /> </div> <div style="position: absolute; top: 0; left: 0; width: 200px; z-index:

2;"> <input autocomplete="off" type="text" name="culoare" style="background:

none; color:#39f; border: 1px solid #999; width: 200px; padding: 2px" onFocus="OCuloare()" onKeyUp="OCuloare()" />

</div> <div id="s1b" style="position: absolute; top: 5px; right: 5px; z-index:

3; display: none;"> <a href="#" onClick="SetareCuloare()"> <img src="completeaza.gif" border="0" align="textbottom"> </a> </div> </div> </form> </div> </body> </html>


7.3.4. Tratarea evenimentelor de către mouse

onClick va acŃiona în urma unui click stânga de mouse dat de către utilizator pe un obiect specificat dintr-un formular. onClick este eevveenntt hhaannddlleerr pentru obiectele: Button, Checkbox, Document, Link, Radio, Reset şi

Submit. Exemplu În acest exemplu, avem un formular de contact în care se pot introduce numele,

adresa de e-mail şi comentarii. În momentul în care vrem să introducem ceva în formular, se va evidenŃia zona respectivă. Pentru evidenŃiere am utilizat onBlur şi onFocus, deoarece atunci când introducem ceva într-un câmp, acŃionează onFocus, iar când ne îndepărtăm, acŃionează onBlur.

După ce se introduc date în formularul de contact, se dă click pe butonul Apasati! şi

se vor afişa pe ecran informaŃiile care au fost introduse.

<html> <head> <title>onClick</title> <style type="text/css"> fieldset { width: 400px; border: medium outset #277627; } legend { color: #277627; font-weight: bolder; font-size: 18px; }


.textInput,textarea { width: 200px; font-family: arial; background-color: #FFFFFF; border: 1px solid #000; } .NEvid { width: 200px; background-color: #66CC66; color: #000; border: 1px solid #000; } </style> <script type="text/javascript" language="JavaScript"> var IntrareCurenta = false; var NumeStilIntrCurenta = false; function f() {

var n=document.formular.nume.value; var e=document.formular.email.value; var c=document.formular.comentariu.value; document.writeln("Numele introdus: ", n,"<br>E-mail: ",

e,"<br>Comentariul: ", c); } function IntrEvidentiata() { if(IntrareCurenta) { IntrareCurenta.className = NumeStilIntrCurenta; } NumeStilIntrCurenta = this.className; this.className = 'NEvid'; IntrareCurenta = this; } function IntrBlur() { this.className = NumeStilIntrCurenta; } function Evidentiat() { var etichete = ['INPUT','TEXTAREA']; for(i=0;i<etichete.length;i++){ var intrari = document.getElementsByTagName(etichete[i]); for(var no=0;no<intrari.length;no++) { if(intrari[no].className && intrari[no].className=='x')continue; if(intrari[no].tagName.toLowerCase()=='textarea'||(intrari[no].tagName.

toLowerCase()=='input' && intrari[no]. type. toLowerCase() =='text'))

{ intrari[no].onfocus = IntrEvidentiata; intrari[no].onblur = IntrBlur; } } } } </script> </head> <body> <form method="post" action="#" name="formular"> <fieldset> <legend>Formular de contact </legend> <table>


<tr> <td><label for="nume">Numele si prenumele: </label></td> <td><input class="textInput" type="text" name="nume" id="nume"></td> </tr> <tr> <td><label for="email">Adresa de e-mail: </label></td> <td><input class="textInput" type="text" name="email" id="email"></td> </tr> <tr> <td><label for="comentariu">Comentarii:</label></td> <td><textarea id="comentariu" name="comentariu" rows="3"></textarea></td> </tr> <tr> <td colspan="2"> <input type="submit" onClick="f()" value="Apasati!"> </td> </tr> </table> </fieldset> </form> <script type="text/javascript"> Evidentiat(); </script> </body> </html>

onDblClick este o acŃiune ce va fi declanşată dacă utilizatorul efectuează dublu click stânga de mouse pe un obiect specificat dintr-un formular. onDblClick este eevveenntt hhaannddlleerr pentru obiectele: Document şi Link. Exemplu În exemplul de mai jos, am utilizat o funcŃie care permite alegerea unui stil propriu de

afişare a paginii. De exemplu, dacă dăm dublu click pe butonul Stil 3, conŃinutul paginii se va afişa cu textul alb pe fundal albastru, iar titlul paginii va fi: Fundal albastru.

<html> <head> <title>onDblClick</title> <script type="text/javascript" language="javascript"> function f(stil) { switch(stil) { case 1: { document.bgColor='yellow'; document.title='Fundal galben'; document.fgColor='#663300';}


break; case 2: { document.bgColor='red'; document.title='Fundal rosu'; document.fgColor='blue'; } break; case 3: { document.bgColor='blue'; document.title='Fundal albastru'; document.fgColor='white'; } break; case 4: { document.bgColor='green'; document.title='Fundal verde'; document.fgColor='yellow'; } break; default: document.bgColor='white'; }} </script> </head> <body> <div align="center"> Dati dublu click pentru a alege un stil pentru pagina <form> <input type="button" value="Stil 1" onDblclick="f(1)"> <input type="button" value="Stil 2" onDblclick="f(2)"> <input type="button" value="Stil 3" onDblclick="f(3)"> <input type="button" value="Stil 4" onDblclick="f(4)"> </form> </div> </body> </html>

onMouseDown este o acŃiune ce va fi declanşată dacă utilizatorul apasă unul dintre butoanele mouse-ului. onMouseDown este eevveenntt hhaannddlleerr pentru obiectele: Button, Document şi Link. Exemplu În exemplul de mai jos, se utilizează o funcŃie care verifică dacă a fost apăsat butonul

dreapta al mouse-ului. Dacă a fost apăsat, se vor afişa pe rând, două mesaje de atenŃionare.

<html> <head> <title>onMouseDown</title> <style type="text/css"> body { font-family: Georgia, "Times New Roman"; font-size: 18px; font-weight: bold; color: #660000; background-color: #FFFFCC; } </style>


<script type= "text/javascript" language="javascript"> var mesaj1 = "Nu puteti, nu-i asa?"; var mesaj2="Incercati sa tineti apasat butonul din stanga, \ndupa care pe cel din dreapta, \nsi le eliberati pe rand: stanga, dreapta"; function f() { if (document.all) { if (event.button==2) { alert(mesaj1); alert(mesaj2); return false; } } } </script> </head> <body> Incercati sa dati click dreapta de mouse! <BR> <script type= "text/javascript" language="javascript"> document.onmousedown=f; </script> </body> </html>

onMouseMove este o acŃiune ce va fi declanşată de mişcarea cursorului mouse-ului. Exemplu În exemplul de mai jos, am utilizat o funcŃie care permite afişarea coordonatelor

cursorului unui mouse în mişcare. <html> <head> <title>Coordonatele cursorului</title> </head> <body> <pre> <form name=formular> Coordonatele cursorului<br /><br /> X <input type=text name=x value=""><br /> Y <input type=text name=y value=""> </form> </pre> <script type=text/javascript> var InternetExplorer = document.all?true:false; if (!InternetExplorer) document.captureEvents(Event.mousemove); document.onmousemove = pozitie; function pozitie(poz) { var x; var y; if (!InternetExplorer) { x = poz.pageX; y = poz.pageY; } if (InternetExplorer)


{ x = event.clientX + document.body.scrollLeft; y = event.clientY + document.body.scrollTop; } document.formular.x.value=x; document.formular.y.value=y; return true; } </script> </body> </html>

onMouseOut este o acŃiune ce va fi declanşată în momentul în care părăsim cu mouse-ul o zonă dintr-o hartă sau când ne îndepărtăm de textul ce conŃine legături către alte pagini. onMouseOut este eevveenntt hhaannddlleerr pentru obiectele: Layer şi Link. Exemplu În exemplul de mai jos, am realizat un tabel în care se schimbă culoarea celulelor la

trecerea mouse-ului pe deasupra lor.

<html> <head> <title>onMouseOut</title> <style> .citat { font-size: 14px; font-style: italic; font-weight: normal; color: #000066; } .autor { color: #000066; font-size: 16px; font-weight: bolder; } .legatura { font-size: 12px; font-family: Georgia, "Times New Roman", Times; color: #000066; font-weight: bolder; text-decoration: none; } </style> </head> <body> <center> <table border=0 cellpadding=1 cellspacing=1> <tr> <td onMouseOver="bgColor='#AAAAFF'" onClick="window.location='index.html'"

style="cursor:hand" onMouseOut= "bgColor= '#DDDDFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center"><b><font color="#D5D5D5">

<a href="index.html" class="legatura">Acasa</a></font></b></td> <td width="1" align="center">|</td> <td onMouseOver="bgColor='#AAAAFF'"

onClick="window.location='pagina2.html'" style="cursor:hand"onMouseOut="bgColor='#DDDDFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center"><b><font color="#D5D5D5">

<a href="pagina2.html" class="legatura">Pagina 2</a></font></b></td>


<td width="1" align="center">|</td> <td onMouseOver="bgColor='#AAAAFF'"

onClick="window.location='pagina3.html'" style="cursor:hand" onMouseOut="bgColor='#DDDDFF'" bgcolor="#FFFFFF" width="100" align="center" valign="center"><b><font color="#D5D5D5">

<a href="pagina3.html" class="legatura">Pagina 3</a></font></b></td> </tr> </table> <p class="citat">Nici un lucru maret in lume nu a fost realizat fara

pasiune.</p> <p class="autor">Georg Wilhelm </p> </center> </body> </html> onMouseOver este o acŃiune ce va fi declanşată în momentul în care cursorul mouse-ului pătrunde peste o zonă delimitată sau peste un obiect definit, venind din afara lor. onMouseOver este eevveenntt hhaannddlleerr pentru obiectele: Layer şi Link. Exemplu În exemplul de mai jos, se afişează un mesaj în momentul în care trecem cu mouse-ul

pe deasupra imaginii de mai jos. Când ne îndepărtăm cu mouse-ul de imagine, mesajul dispare (va fi ascuns).

<html> <head> <title>onMouseOver</title> <style type="text/css"> .unu { position:absolute; visibility:hidden; clip:rect(0 200 50 0); width:200px; background-color:#C99AB5; z-index:10; color: #5B3149; } .doi { cursor: hand; } .text { border:1px solid #5b3149; } </style> <script type="text/javascript" language="javascript"> function f(a1,eveniment,textul) { if (document.all&&document.readyState=="complete")


{ document.all.x.innerHTML='<marquee class="text">'+textul+'</marquee>' document.all.x.style.pixelLeft=event.clientX+document.body.scrollLeft+10 document.all.x.style.pixelTop=event.clientY+document.body.scrollTop+10 document.all.x.style.visibility="visible" } } function g() { if (document.all) document.all.x.style.visibility="hidden" } </script> </head> <body> <div id="x" class="unu"></div> <div align="CENTER" onMouseover="f(this,event,'Sunt cam grele cartile.');" onMouseout="g();" class="doi"> <IMG SRC="printesa.JPG" WIDTH="121.4" HEIGHT="171.2" BORDER="0"> </div> </body> </html> onMouseUp este o acŃiune ce va fi declanşată în momentul în care cursorul mouse-ului este eliberat. onMouseUp este eevveenntt hhaannddlleerr pentru obiectele: Button, Document şi Link. Exemplu În exemplul de mai jos, se afişează un mesaj în momentul în care eliberăm cursorul

mouse-ului, după ce am dat click pe o suprafaŃă din interiorul paginii. Captura de mai jos este de fapt un tabel cu trei coloane şi cu o imagine ce conŃine trandafiri albi ca fundal, iar pentru titlu şi autor am utilizat un stil special creat, pentru a se potrivi cu fundalul.

<html> <head> <title>onMouseUp</title> <script type="text/javascript" language="javascript"> function Eveniment(e) { var x1 if (!e) var e = window.event if (e.target) x1 = e.target else if (e.srcElement) x1 = e.srcElement if (x1.nodeType == 3) x1 = x1.parentNode var y y=x1.tagName alert("Ati dat click pe elementul " + y ) } </script> <style type="text/css"> .titlul { font-family: "Aldine721 Lt BT", "Adolescence", "Alexei Copperplate"; font-size: 16px; font-weight: bolder;


color: #660000; } </style> </head> <body onMouseUp="Eveniment(event)"> <table border="0" background="tr_albi.jpg" valign="middle" height="263" width="430" id="tr"> <tr> <td width="30"> </td> <td > <div class="titlul" align="center">Când ai nevoie de dragoste </div> <p>...........................<br /> fii tu lângă mine, gândeşte-te la mine.<br /> poartă-te tandru cu mine, nu mă chinui, nu mă face

gelos,<br /> nu mă părăsi, căci n-aş mai suporta

încă o ruptură.<br /> fii lângă mine, ţine cu mine.<br /> .............................</p> <div class="titlul" align="right">Mircea Cartarescu </div> </td> <td width="30"> </td> </tr> </table> </body> </html>


7.4. AplicaŃii cu evenimente

Sortare tabel Aici avem o aplicaŃie ceva mai complexă, deoarece am utilizat stiluri pentru

elementele HTML, dar şi pentru diverse elemente din pagină, am apelat funcŃii ce permit ordonarea elementelor din tabel şi am tratat multe evenimente necesare utilizării aplicaŃiei.

Metoda de ordonare utilizată se numeşte Bubble Sort. <html> <head> <title>Sortare tabel</title> <style> body { color: white; font-size: 10pt; font-family: Georgia, "Times New Roman", Times, serif; } table { color :#000066; font-size:10pt; font-style:normal; font-weight:normal; display:block; font-family: Georgia, "Times New Roman", Times, serif; } .titlul { color :#000066; font-family: Georgia, "Times New Roman", Times, serif; font-size: large; font-weight: bolder; text-align: center; } .capTabel { background-color:#5197FF; layer-background-color:#7073FE; border-style:outset; border-width:1px; border-left-color:white; border-top-color:white; border-bottom-color:black; border-right-color:black; color: #000066; } .fundalTabel { background-color:#9BEBFF; layer-background-color: #FCFE52; } </style> <script language="JavaScript"> var d = document; var a1=null; var a2=null; var mod=true; var b=false; function masiv(cell) { var r1=cell.parentElement.parentElement.rows; var t1=r1.length; var t2=new Array(t1-1); a1=new Array(t1-1); if (!isNaN(Date.parse(r1.item(1).cells.item(cell.cellIndex).innerText))) b=true; for(var i=1;i<t1;i++) a1[i-1]=i;


for(var i=1;i<t1;i++) { t2[i-1]=r1.item(i).cells.item(cell.cellIndex).innerText; } sortareTabel(t2); } function sortareTabel(array) { var vector=array; var s1=a1; rest=array.length; for(var i=rest-1;i>=0;i--) { for(var j=0;j<=i;j++) { if (b) { if(Date.parse(vector[j+1])<Date.parse(vector[j])) {var temp=vector[j]; vector[j]=vector[j+1]; vector[j+1]=temp; var temp=s1[j]; s1[j]=s1[j+1]; s1[j+1]=temp; } } else { if(vector[j+1]<vector[j]) { var temp=vector[j]; vector[j]=vector[j+1]; vector[j+1]=temp; var temp=s1[j]; s1[j]=s1[j+1]; s1[j+1]=temp; } } } } } function randuri(form) { var rows = form.parentElement.parentElement.rows; var corpTab=form.parentElement.parentElement; var c1=rows.item(0).cells.length; var tdO = null; var trA=new Array(a1.length); var trO=null; if(corpTab.rows.length>0) { for(var i=0;i<a1.length;i++) { tr = d.createElement("TR"); for(var y=(c1-1);y>=0;y--) { td = d.createElement("TD"); tr.insertBefore(td, tdO); td.className = 'fundalTabel'; td.className = rows.item(a1[i]).cells.item(y).className; td.innerText = rows.item(a1[i]).cells.item(y).innerText; tdO=td; } tdO=null; trA[i]=tr; } stergeRand(corpTab); if(mod) { for(var i=trA.length-1;i>=0;i--) { corpTab.insertBefore(trA[i],trO);


trO=trA[i]; } } else { for(var i=0;i<trA.length;i++) { corpTab.insertBefore(trA[i],trO); trO=trA[i]; } } } a1=null; b=false; } function stergeRand(corpTab) { for(var i=corpTab.rows.length-1;i>0;i--) corpTab.deleteRow(i); } function sortare(form) { if (a2==form) mod=!(mod); masiv(form); randuri(form); a2=form; return mod; } function efect (form, ef) { if (ef == 1) { form.style.color = '#9BEBFF'; } else if (ef == 2) { form.style.color = '#000066'; } } function stil(form, name, value) { form.style[name] = value; } function antet(form, type) { type = parseInt(type); if (isFinite(type)) { if (type == 1) { stil(form, 'border', 'outset'); stil(form, 'borderWidth', '1px'); stil(form, 'borderRightColor', 'black'); stil(form, 'borderBottomColor', 'black'); } else { stil(form, 'border', 'inset'); stil(form, 'borderWidth', '1px'); stil(form, 'borderLeftColor', 'black'); stil(form, 'borderTopColor', 'black'); stil(form, 'borderRightColor', 'white'); stil(form, 'borderBottomColor', 'white'); } } }


</script> </head> <body bgcolor="#FFFFFF"> <div class="titlul"> Tabel nominal </div> <TABLE CELLPADDING=1 CELLSPACING=1 BORDER=1 WIDTH=80%> <TBODY> <tr> <td ALIGN=CENTER CLASS="capTabel" onMouseOver="efect(this, 1)"

onMouseOut="efect(this, 2)" onMouseDown="antet(this, 0);" onMouseUp="antet(this, 1);" onClick="sortare(this);"><B>Nume si prenume</B></td>

<td ALIGN=CENTER CLASS="capTabel" onMouseOver="efect(this, 1)" onMouseOut="efect(this, 2)" onMouseDown="antet(this, 0);" onMouseUp="antet(this, 1);" onClick="sortare(this);"><B>Oras</B></td>

<td ALIGN=CENTER CLASS="capTabel" onMouseOver="efect(this, 1)" onMouseOut="efect(this, 2)" onMouseDown="antet(this, 0);" onMouseUp="antet(this, 1);" onClick="sortare(this);"><B>Data nasterii</B></td></tr>

<tr> <td CLASS="fundalTabel">Ionescu Daniel</td> <td CLASS="fundalTabel">Bucuresti</td> <td CLASS="fundalTabel">1/09/1976</td> </tr> <tr> <td CLASS="fundalTabel">Popescu Corina </td> <td CLASS="fundalTabel">Ploiesti</td> <td CLASS="fundalTabel">04/06/1975</td> </tr> <tr> <td CLASS="fundalTabel">Enescu Bogdan </td> <td CLASS="fundalTabel">Targoviste</td> <td CLASS="fundalTabel">03/17/1985</td> </tr> <tr> <td CLASS="fundalTabel">Coman Cristina </td> <td CLASS="fundalTabel">Iasi</td> <td CLASS="fundalTabel">03/02/1970</td> </tr> <tr> <td CLASS="fundalTabel">Chivu Ingrid </td> <td CLASS="fundalTabel">Brasov</td> <td CLASS="fundalTabel">29/07/1975</td> </tr> <tr> <td CLASS="fundalTabel">State Gabriela </td> <td CLASS="fundalTabel">Cluj</td> <td CLASS="fundalTabel">17/24/1976</td> </tr> <tr> <td CLASS="fundalTabel">Nedelcu Mihaela </td> <td CLASS="fundalTabel">Pascani</td> <td CLASS="fundalTabel">11/01/1973</td> </tr> </TBODY> </TABLE> </body> </html>


Formular numai cu cifre Am creat un formular ce verifică pe rând toate caracterele introduse şi ne permite

doar introducerea cifrelor. În primul câmp putem introduce numere cu zecimale, iar în al doilea câmp putem introduce numai numere fără zecimale.

FuncŃia cifre, apelată la acŃionarea evenimentului onKeyPress primeşte pe rând caracterele introduse de la tastatură, verifică dacă am introdus cifre şi returnează numai cifre (câmpul 2) sau cifre şi semnul “.”(punct). Odată introdus caracterul punct (.), I i se atribuie variabilei punct valoarea 1, fapt ce nu va mai permite reafişarea acestui caracter. <html> <head> <title> Formular numai cu cifre </title> <style> body { color: #000099; font-family: Georgia, "Times New Roman", Times, serif; background-color: 9BEBFF; } .titlul { font-size: 18pt; letter-spacing: 0.4em; text-align: center; font-weight: bold; } </style> </head> <body> <div class="titlul">Introduceti numai cifre </div> <br /> <form> cu zecimale <INPUT name=CuZecimale TYPE=text size=10 onKeyPress="return

cifre(event,'Zecimale') "> <br /> fara zecimale <INPUT name=FaraZecimale TYPE=text size=10 onKeyPress="return

cifre(event,'fara_zecimale') "> <br />


<input type="submit" name="Submit" value="Curata!" id="Submit" onclick()="">

</form> <script language="javascript"> var InternetExplorer = document.all?true:false; function cifre(e,zec) { var tasta = (InternetExplorer) ? window.event.keyCode : e.which; var obiect = (InternetExplorer) ? event.srcElement : e.target; var numar = (tasta > 47 && tasta < 58) ? true:false; var punct = (tasta==46 && zec=='Zecimale' && (obiect.value.indexOf(".")<0 || obiect.value.length==0)) ? true:false; if(tasta < 32) return true; return (numar || punct); } </script> </body> </html>

Contorizare caractere În exemplul de mai jos am creat o funcŃie ce contorizează cuvintele introduse de un

utilizator într-un câmp de tip textarea. DistanŃa dintre cuvinte este dată de un spaŃiu. În momentul în care dăm click în afara zonei de introducere a textului, putem vedea rezultatul afişat. <html> <head> <title> Contorizare caractere </title> <script language="javascript"> function f(x) { var i=0; var NrCuv=1; while(i<=x.length) { if (x.substring(i,i+1) == " ") {


NrCuv++; i++; } if (x.substring(i,i+1) == "\n") { NrCuv++; i++; } i++; } return NrCuv; } </script> </head> <body> Scrieti un text, dupa care dati click in afara zonei in care scrieti <br /> si dati click pentru a afisa numarul de cuvinte, urmat de numarul <br /> de caractere introduse. <form> <textarea cols=40 rows=6 onChange= "this.form.caracter.value =

this.value.length; this.form.cuvant.value=f(this.value)"> </textarea> <br /> <input name=cuvant value=0 size=4> cuvinte, <input name=caracter value=0 size=4> caractere </form> </body> </html>


Formular de calcul instantaneu În exemplul de mai jos am creat un formular ce permite calcularea unei sume, pe

măsură ce sunt introduse cifrele în câmpurile formularului. <html> <head> <title>Exemplu de formular</title> <style> body { background-color: #B3FFB3; } .titlul { font-family: "Aldine721 Lt BT", Adolescence, "Alexei Copperplate"; font-size: 18px; font-weight: bolder; color: #006600; } </style> <script type="text/javascript" language="JavaScript"> function PornireCalculare() { interval = setInterval("Calculare()",1); } function Calculare() { primul = document.adunare.x1.value; alDoilea = document.adunare.x2.value; document.adunare.x3.value = (primul * 1) + (alDoilea * 1); } function Oprire() { clearInterval(interval); } </script> </head> <body> <span class="titlul">Introduceti numere, pentru a le aduna </span><br /> <form name="adunare"> <input type=text name="x1" value="" onFocus="PornireCalculare();" onBlur=

"Oprire();" size="10"> + <input type=text name="x2" value="" onFocus="PornireCalculare();" onBlur=

"Oprire();" size="10"> = <input type=text name="x3" size="10"> </form> </body> </html>


Evaluare

1. EnumeraŃi şi descrieŃi evenimentele JavaScript. 2. Care este diferenŃa dintre evenimente şi tratarea evenimentelor? 3. RealizaŃi o pagină ce conŃine trei imagini care dacă dăm click pe ele se schimbă culoarea

fundalului. 4. Care sunt evenimentele declanşate de către mouse?


Capitolul 8.

Obiecte JavaScript

8.1. Introducere Pentru a nu creea confuzii, trebuie să plecăm de la ideea că JavaScript nu este Java.

Java este un limbaj de programare orientat-obiect sau OOP (Object Oriented Programming), iar JavaScript este bazat pe obiecte. DefiniŃie

Un obiect este o colecŃie de proprietăŃi şi metode reŃinute sub un singur nume. De exemplu, am putea avea obiectul televizor. Un televizor are câteva proprietăŃi:

data fabricaŃiei, marca, culoarea, modelul şi metode: porneşte(), seOpreşte(). Toate aceste proprietăŃi şi metode definesc obiectul televizor. Ele pot face parte şi din caracteristicile altui obiect, dar luate împreună definesc obiectul televizor. JavaScript permite crearea unor obiecte cu caracteristici proprii, dar are şi obiecte predefinite, cum ar fi: Anchor, Area, Applet, Form, Image, pe care o să le studiem în acest capitol.

ProprietăŃile sau atributele unui obiect descriu caracteristicile speciale şi identitatea. Metodele sau funcŃiile unui obiect sunt vizibile din exterior. Cu ajutorul lor putem crea

obiecte sau le putem modifica. Pentru a realiza mai uşor şi mai eficient scripturi JavaScript, este bine să utilizăm

obiectele deja existente şi să creăm altele noi doar dacă este strict necesar.

Anchor Obiectul Anchor este un loc dintr-o pagină (un şir de caractere sau o imagine) care

reprezintă Ńinta unei legături de tip hipertext. ProprietăŃi: accessKey, charset, coords, href, id, innerHTML, name, rel, rev, shape, target, type. Metode: blur(), focus(). Evenimente: onBlur, onFocus.

Proprietate Descriere

accessKey Setează o tastă pentru a realiza accesul către o legătură de tip hipertext.

charset Setează un set de caractere pentru a realiza accesul către diverse resurse prin legături de tip hipertext.

coords Setează o listă de coordonate separate prin virgulă, pentru a defini o anumită regiune activă.

href Setează un URL pentru a realiza accesul către diverse resurse prin legături de tip hipertext.

id Setează un id pentru o legătură de tip hipertext. innerHTML Setează un text pentru o legătură de tip hipertext. name Returnează numele unei legături de tip hipertext. rel Setează relaŃia dintre documentul curent şi Ńinta URL. rev Setează relaŃia dintre documentul curent şi Ńinta URL.

Obiective: - să înŃeleagă noŃiunea de obiect JavaScript. - să poată utiliza un obiect JavaScript acolo unde este necesar. - să poată crea un script ce utilizează obiecte JavaScript.


shape Setează o suprafaŃă activă. Coordonatele sunt definite cu ajutorul proprietăŃii coords.

target Setează unde anume se va deschide Ńinta URL. type Setează tipul MIME al unei legături de tip hipertext.

Metodă Descriere

blur() Înlătură focalizarea de pe o legătură de tip hipertext. focus() Oferă focalizare asupra unei legături de tip hipertext.

Eveniment Descriere

onblur AcŃiune ce va fi declanşată când se pierde focalizarea de pe o legătură de tip hipertext.

onfocus AcŃiune ce va fi declanşată de focalizarea asupra unei legături de tip hipertext.

Exemplu În acest exemplu, am utilizat obiectul Anchor, cu proprietarea accessKey pentru a

obŃine accesul la o legătură de tip hipertext cu ajutorul tastelor. În funcŃia f() am definit tastele a şi b pentru accesul cu ajutorul lor la site-urile : www.didactic.ro şi www.olimpiada.info. În exemplul de mai jos am utilizat Mozilla Firefox

<html> <head> <title>Array cu accessKey</title> <script type="text/javascript"> function f() { document.getElementById('ancora1').accessKey="a"; document.getElementById('ancora2').accessKey="b"; } </script> <style type="text/css"> .titlul { font-family: Georgia, "Times New Roman", Times; font-size: 18px; font-weight: bolder; text-transform: uppercase; color: #006633; border-bottom-width: thin; border-bottom-style: outset; border-bottom-color: #006633; } </style> </head> <body onLoad="f()"> <span class="titlul">Selectati tastele: </span>

<br /><br /> Alt+a pentru a vizita site-ul <a id="ancora1"

href="http://www.didactic.ro"> didactic.ro</a><br />sau<br /> Alt+b pentru a vizita site-ul <a id="ancora2"

href="http://www.olimpiada.info"> olimpiada.info</a><br /> </body> </html>

Exemplu În acest exemplu, am utilizat obiectul Anchor, cu proprietarea innerHTML pentru a obŃine accesul la două legături diferite de tip hipertext, prin apăsarea butonului


SchimbaŃi legatura. După cum se poate vedea din exemplu, dacă dăm click pe butonul din pagină, se schimbă legătura de la www.didactic.ro, la www.olimpiada.info. În exemplul de mai jos am utilizat Mozilla Firefox.

<html> <head> <title>Anchor cu innerHTML</title> <script type="text/javascript" language="javascript"> function f() {

document.getElementById('legatura').innerHTML="Olimpiada de informatica"

document.getElementById('legatura').href="http://www.olimpiada.info"

} </script> </head> <body> <a id="legatura" href="http://www.didactic.ro">Portalul profesorului modern</a> <br /><br /> <input type="button" onClick="f()" value="Schimbati legatura"> </body> </html>

Exemplu În acest exemplu, am utilizat obiectul Anchor, pentru a obŃine accesul la o pagină în

care am scris mai multe strofe din poeziile poetului Lucian Blaga. Strofele vor apărea într-o fereastră de dimensiunile: lăŃime 350 / înălŃime 150.

<html> <head> <title>Anchor</title> <script type="text/javascript" language="javascript"> function f(n) {

fereastra=open("strofe.html","","scrollbars=yes,width=350, height=150"); if (fereastra.document.anchors.length >= n) fereastra.location.hash=n; else alert("Aceasta ancora nu exista!")


} </script> <link href="StilBlaga.css" rel="stylesheet" type="text/css"> </head> <body> <span class="titlul">Lucian Blaga</span> <form> Apăsaţi pe un buton, pentru a citi o strofă dintr-o poezie. <br /><br /> <input id="legatura" type="button" value="1" name="buton"

onClick="f(this.value)" class="b"> Eu nu strivesc corola de minuni a lumii <br />

<input type="button" value="2" name="buton" onClick="f(this.value)" class="b"> Lumina<br />

<input type="button" value="3" name="buton" onClick="f(this.value)" class="b"> Din părul tău<br />

<input type="button" value="4" name="buton" onClick="f(this.value)" class="b"> Linişte<br />

<input type="button" value="5" name="buton" onClick="f(this.value)" class="b">

</form> </body> </html> Pagina strofe.html conŃine Ńinta care va fi activată în momentul în care se dă click pe un buton. Dacă dăm click pe butonul 1, din pagina principală, se va deschide fereastra de mai jos.

Dacă dăm click pe butonul 5, se va deschide o fereastră în care se specifică faptul că

nu există ancoră pentru acest buton, ca în imaginea de mai jos.

<html> <head><title>Strofe</title> <link href="StilBlaga.css" rel="stylesheet" type="text/css"> </head> <body> <A name="1" class="titlul">Eu nu strivesc corola de minuni a lumii</A> <br /><br /> <span class="vers">Eu nu strivesc corola de minuni a lumii<br /> şi nu ucid<br /> cu mintea tainele, ce le-ntâlnesc<br /> în calea mea<br /> în flori, în ochi, pe buze ori morminte.<br /> </span>


<br /><br /><br /> <A name="2" class="titlul">Lumina</A> <br /> <br /> <span class="vers">Lumina ce-o simt <br /> năvălindu-mi în piept când te vad, <br /> oare nu e un strop din lumina <br /> creată în ziua dintâi,<br /> din lumina aceea-nsetată adânc de viaţă?</span><br /> <br /><br /><br /><br /> <A name="3" class="titlul">Din părul tău</A> <br /> <br /> <span class="vers">Înţelepciunea unui mag mi-a povestit odată

<br /> de-un val prin care nu putem străbate cu privirea,<br /> păienjeniş ce-ascunde pretutindeni firea,<br /> de nu vedem nimic din ce-i aievea.<br /> </span><br /><br /><br /><br /><br /> <A name="4" class="titlul">Linişte</A> <br /> <br /> <span class="vers">Atâta linişte-i în jur de-mi pare că

aud<br /> cum se izbesc de geamuri razele de lună.<br /> În piept<br /> mi s-a trezit un glas străin<br /> şi-un cântec cânta-n mine-un dor<br /> ce nu-i al meu.</span><br /><br /> </body> </html> Fişierul StilBlaga.css, ce conŃine stilurile necesare afişării plăcute a versurilor. body { font-family: Verdana, Arial, Helvetica, sans-serif; color: #006600; font-size: 12px; } .b { font-family: Verdana, Arial, Helvetica, sans-serif; color: #006600; background-color: #C1FFC1; height: 20px; width: 20px; border-top-color: #6FFF6F; border-right-color: #6FFF6F; border-bottom-color: #6FFF6F; border-left-color: #6FFF6F; } .titlul { font-family: Verdana, Arial, Helvetica, sans-serif; color: #006600; font-size: 14px; font-weight: bolder; } .vers { font-family: Verdana, Arial, Helvetica, sans-serif; color: #006600; font-size: 12px; font-style: italic; } Applet


Obiectul Applet permite includerea applet-urilor Java într-o pagină web. ProprietăŃi: toate proprietăŃile publice ale unui applet Java. Metode: toate metodele publice ale unui applet Java.

Area

Obiectul Area defineşte o suprafaŃă dintr-o pagină Web. SuprafaŃa poate fi aria unei imagini sau a unei hărŃi de imagini. Atunci când utilizatorul dă click pe acea suprafaŃă delimitată, este încărcată o nouă fereastră sau pagină Web. ProprietăŃi: length.


length Reprezintă numărul de argumente ale funcŃiei. Exemplu În acest exemplu, am utilizat obiectul Area, pentru a defini trei suprafeŃe: zona

capului, zona cărŃilor şi zona fetiŃei. Zona fetiŃei cuprinde celelalte două zone. În momentul în care utilizatorul trece cu mouse-ul pe deasupra zonelor definite sau părăseşte aceste zone, vor apărea diverse mesaje scrise într-o zonă te tip text şi în bara de stare.

Am utilizat pentru delimitare cele trei tipuri de suprafeŃe: � shape ="circle" COORDS="44,16,15" -> suprafaŃa unui cerc � shape="rect" coords="40,40,80,75" -> suprafaŃă dreptunghiulară � shape="poly" coords="25,1,25,135,75,135,80,1" ->suprafaŃă poligonală

<html> <head> <title>Obiectul Area</title> <script type="text/javascript" language="javascript"> function f(x) { switch (x) { case 1: { self.status='Sunteti in zona capului'; formular.text.value='Sunteti in zona capului'; return true; }; break; case 2: { self.status='Sunteti in zona cartilor'; formular.text.value='Sunteti in zona cartilor'; return true; }; break; case 3: {


self.status='Sunteti in zona fetitei'; formular.text.value='Sunteti in zona fetitei'; return true; }; break; default: { self.status='Nu sunteti in zona imaginii'; formular.text.value='Nu sunteti in zona imaginii'; return true; }; } } function g(y) { switch (y) { case 1: { self.status='Ati parasit zona capului'; formular.text.value='Ati parasit zona capului'; return true; }; break; case 2: { self.status='Ati parasit zona cartilor'; formular.text.value='Ati parasit zona cartilor'; return true; }; break; case 3: { self.status='Ati parasit zona fetitei'; formular.text.value='Ati parasit zona fetitei'; return true; }; break; default: { self.status='Nu sunteti in zona imaginii'; formular.text.value='Nu sunteti in zona imaginii'; return true; }; } } </script> </head> <body> <form name="formular"> <MAP name="O_fetita_cu_carti"> <AREA name="cap" shape ="circle" COORDS="44,16,15" HREF="Cap" alt="cap" onMouseOver="f(1)" onMouseOut="g(1)"> <AREA name="carti" coords="40,40,80,75" href="Carti" alt="carti" onMouseOver="f(2)" onMouseOut="g(2)"> <AREA name="fetita" shape="poly" coords="25,1,25,135,75,135,80,1" href="Fetita"

alt="o fetita cu carti" onMouseOver="f(3)" onMouseOut="g(3)"> </MAP> <IMG SRC="Printesa.jpg" align="top" height="140" width="100" USEMAP="#O_fetita_cu_carti" > <br /> <input type="text" name="text" value="" size="25"> </form> </body> </html>

Array


Obiectul Array seamănă cu noŃiunea Array (tablou), întâlnită mai des în programare. Un tablou poate fi unidimensional, atunci când unei singure variabile i se asociază un set de valori de acelaşi tip, sau cu mai multe dimensiuni. În JavaScript discutăm despre array, ca despre un tablou unidimensional, care are mai multe proprietăŃi şi metode. ProprietăŃi: constructor, index, input, length, prototype. Metode: concat, join(), pop(), push(), reverse(), shift(), slice(), splice(), sort(), toSource(),

toString(), unshift(), valueOf(). Pentru a înŃelege mai bine proprietăŃile şi metodele, am să le explic în câteva cuvinte,

în tabelele următoare: Proprietate Descriere

constructor Specifică funcŃia care crează prototype unui obiect. index Pentru un Array dintr-o expresie, şirul începe de la zero. input Specifică şirul original. length Numărul elementelor dintr-un Array. prototype Permite adăugarea unor proprietăŃi obiectului Array.

Metodă Descriere

concat() Lipeşte două Array într-unul singur. join() Alătură toate elementele dintr-un Array, într-un string. pop() Înlătură ultimul element dintr-un Array şi returnează acel

element. push() Adaugă unul sau mai multe elemente la sfârşitul unui Array şi

returnează o nouă lungime. reverse() Inversează elementele unui Array, în aşa fel încât primul va

deveni ultimul şi ultimul va deveni primul. shift() Înlătură primul element dintr-un Array şi returnează acel

element. slice() Extrage o porŃiune dintr-un Array şi returnează un nou Array. splice() Adaugă sau înlătură elemente dintr-un Array. sort() Sortează elementele dintr-un Array. toSource() Returnează un şir ce reprezintă codul sursă al unui Array. toString() Returnează un şir ce reprezintă un Array şi elementele sale. unshift() Adaugă unul sau mai multe elemente în prima parte a unui

Array şi returnează noua lungime a acelui Array. valueOf() Returnează prima valoare a unui Array. Exemplu În acest exemplu, am utilizat obiectul Array(), pentru a reŃine cele 4 anotimpuri.

Variabila anotimpuri, datorită faptului că am declarat-o Array, poate reŃine mai multe valori, cum ar fi : « Primavara », « Vara », « Toamna » şi « Iarna ». Prima valoare pe care o poate reŃine, se va duce pe prima poziŃie, adică anotimpuri[0]. (Pentru cei care cunosc limbajele C sau Java, este mult mai uşor). Dacă nu cunoaştem numărul de valori reŃinute în anotimpuri, putem utiliza anotimpuri.length care ne va returna numărul de elemente reŃinute în anotimpuri.

<html> <head> <title>Obiectul Array</title> <script type="text/javascript" language="javascript"> function f() {

var anotimpuri = new Array() anotimpuri[0] = "Primavara"


anotimpuri[1] = "Vara" anotimpuri[2] = "Toamna" anotimpuri[3] = "Iarna" for (i=0;i<anotimpuri.length;i++)

{ document.write(anotimpuri[i] + "<br />") } } </script> </head> <body onLoad="f()"> </body> </html>

Exemplu Acelaşi exemplu, ca cel de mai sus, dar puŃin mai complicat, în sensul că am utilizat

funcŃia g() pentru a pune în valoare metoda sort() şi funcŃia h() pentru a pune în valoare metoda concat(). Fiecare dintre metodele de mai sus, pot fi utilizate cu obiectul Array().

<html> <head> <title> Obiectul Array </title> <script type="text/javascript" language="javascript"> var anotimpuri = new Array() anotimpuri[0] = "Primavara" anotimpuri[1] = "Vara" anotimpuri[2] = "Toamna" anotimpuri[3] = "Iarna" var culori=new Array("Alb", "Negru", "Rosu"); function f() { for (i=0;i<anotimpuri.length;i++) { document.write(anotimpuri[i]); if (i<anotimpuri.length-1) document.write(", "); } } function g() { document.write(anotimpuri.sort()); } function h() { document.write(anotimpuri.concat(culori)); } </script> </head> <body> <form name="formular" method="post" action="" > Anotimpurile.<br /> <input type="submit" name="x1"

value="Apasati!" onclick="f()"><br /> Anotimpurile in ordine alfabetica.<br />

Dacă apăsaŃi primul buton, se va afişa:

Dacă apăsaŃi al doilea buton, se va afişa:

Dacă apăsaŃi al treilea buton, se va afişa:


<input type="submit" name="x2" value="Apasati!" onclick="g()"><br />

Denumirile anotimpurilor, lipite de denumirile culorilor. <br />

<input type="submit" name="x3" value="Apasati!" onclick="h()">

</form> </body> </html>

Exemplu În acest exemplu, am utilizat obiectul Array(), în care am introdus perechi de numere

ce reprezintă porŃiuni din codul hexazecimal, ce reprezintă o culoare. <html> <head> <title>Exemplu_Array</title> <script type="text/javascript" language="javascript"> var culoare= new Array("00","11","22","33","44","55","66","77","88","99","AA","BB","CC","DD","EE","FF"); function efect_fundal(x) { if (x >= 1) { document.bgColor="#"+"00"+culoare[x]; document.fgColor="#"+culoare[x+8]+"0000"; x -= 1; setTimeout("efect_fundal("+x+")", 50); } else { setTimeout('efect_invers(1)', 50); } } function efect_invers(x) { if (x <=16) { document.bgColor="#"+"0000"+culoare[x]; document.fgColor="#"+culoare[x+8]+"0000"; x += 1; setTimeout("efect_invers("+x+")", 50) } else { setTimeout("efect_fundal(16)", 50); } } </script> </head> <body > <form> Dati click pe buton, <br /> pentru ca fundalul si textul <br /> sa-si schimbe culoarea.<br /> <input name="" type="button" onClick="efect_fundal(16)" value="Efect"> </form> </body> </html>


Boolean Obiectul Boolean este utilizat pentru a transforma o variabilă care nu aparŃine acestui

tip într-o valoare de tip boolean. O variabilă de tip boolean poate avea două valori: true sau false. ProprietăŃi: constructor, prototype. Metode: toSource(), toString(), valueOf().


constructor Specifică funcŃia care creează prototype unui obiect. prototype Permite adăugarea unor proprietăŃi obiectului Boolean.

Metodă Descriere

toSource() Returnează un şir care reprezintă codul sursă al unui Array. toString() Returnează un şir ce reprezintă un Array şi elementele sale. valueOf() Returnează prima valoare a obiectului Boolean. Exemplu În acest exemplu, am utilizat obiectul Boolean(), pentru a evidenŃia elementele pentru

care se obŃin valorile de adevăr true şi false. <html> <head> <title> Obiectul Boolean </title> <script type="text/javascript" language="JavaScript"> x1 = new Boolean(); x2 = new Boolean(0); x3 = new Boolean(null); x4 = new Boolean(""); x5 = new Boolean(false); document.writeln("new Boolean()= "+x1+"<br />"); document.writeln("new Boolean(0)= "+x2+"<br />"); document.writeln("new Boolean(null)= "+x3+" <br

/>"); document.writeln('new Boolean("")= '+x4+"<br />"); document.writeln("new Boolean(false)= "+x5+" <br

/>"+"<br />"); y1 = new Boolean(true); y2 = new Boolean(1); y3 = new Boolean("true"); y4 = new Boolean("false"); y5 = new Boolean("Diana"); document.writeln("new Boolean(true)= "+y1+" <br />"); document.writeln('new Boolean(1)= '+y2+"<br />"); document.writeln('new Boolean("true")= '+y3+" <br />"); document.writeln('new Boolean("false")= '+y4+" <br />"); document.writeln('new Boolean("Diana")= '+y5+" <br />"); </script> </head> <body> </body> </html>


Button Obiectul Button este un buton care poate fi acŃionat de către evenimentele asociate

din formularul HTML şi care execută un anumit script specificat. ProprietăŃi: form, name, type, value. Metode: blur(), click(), focus(). Evenimente: onBlur, onClick, onFocus.


form Obiectul form care include butonul. name Numele butonului. type Tipul obiectului, care poate fi: Button, Submit sau Reset. value Valoarea butonului, care apare afişată pe buton.

Metodă Descriere

blur() Înlătură focalizarea de pe obiectul specificat. click() Această funcŃie acŃionează dacă utilizatorul dă click pe obiectul

specificat dintr-un formular. focus() Dă focalizare asupra unui obiect specificat.

Eveniment Descriere

onBlur Execută codul JavaScript în momentul în care se înlătură focalizarea de pe obiectul specificat.

onClick Execută codul JavaScript în momentul în care efectuăm click de mouse pe obiectul specificat dintr-un formular.

onFocus Execută codul JavaScript în momentul în care are loc evenimentul focus, adică atunci când o fereastră, un frame sau un frameset primeşte un focus.

Exemplu În acest exemplu, am utilizat obiectul Button, pentru a realiza un test cu mai multe

variante de răspuns corecte.

<html> <head> <title>Obiectul Button</title> <style type="text/css"> body { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 18px; color: #0000FF; background-color: #DDDDFF; font-weight: bolder; } .buton { color: #0000FF; background-color: #DDDDFF; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px }


</style> <script type="text/javascript" language="JavaScript"> function Opreste() { document.muzica.stop() } function Porneste() { document.muzica.play() } function schimba() { if (document.formular.B1.value=='Opreste muzica') { document.formular.B1.value='Porneste muzica'; Opreste() } else { document.formular.B1.value='Opreste muzica'; Porneste() } } </script> </head> <body> <embed name="muzica" src="RichardClayderman.mp3" width="128" height="128"

hidden> <br /> <form name="formular"> Richard Claiderman<br /><br /> <input type="button" value="Opreste muzica" name="B1" onClick="schimba()"

class="buton"> </form> </body> </html>

Checkbox Obiectul Checkbox este o casetă de validare ce permite utilizatorului să o selecteze

prin executarea unui click de mouse în interiorul ei. Caseta va avea valoarea true sau false în funcŃie de opŃiunea utilizatorului. ProprietăŃi: checked, defaultChecked, form, name, type, value. Metode: blur(), click(), focus(). Evenimente: onBlur, onClick, onFocus.

Proprietate Descriere checked Returnează valoarea logică true dacă este selectat un obiect

checkbox, altfel returnează false. defaultChecked Returnează valoarea logică true dacă starea iniŃială a unui

obiect checkbox este selectată, altfel returnează false. form Specifică referinŃa unui obiect dintr-un formular ce conŃine un

buton. name Reprezintă un şir ce specifică valoarea atributului name. type Specifică tipul elementelor unui formular. value Valoarea butonului, care apare afişată.

Metodă Descriere


blur() Înlătură focalizarea de pe checkbox dintr-un formular. click() Această funcŃie acŃionează dacă utilizatorul dă click pe butonul

checkbox dintr-un formular. focus() Dă focus asupra unui checkbox dintr-un formular.

Eveniment Descriere onBlur Execută codul JavaScript în momentul în care se înlătură

focalizarea de pe obiectul specificat. onClick Execută codul JavaScript în momentul în care efectuăm click de

mouse pe obiectul specificat dintr-un formular. onFocus Execută codul JavaScript în momentul în care are loc

evenimentul focus, adică atunci când o fereastră, un frame sau un frameset primeşte un focus.

Exemplu În acest exemplu, am realizat un formular care selectează toate butoanele de validare

chekbox.

<html> <head> <title> Obiectul Checkbox </title> <style type="text/css"> body { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #006600; background-color: #BFFFBF; } .titlul { font-size: 16px; font-weight: bolder; text-align: center; } .buton { font-size: 14px; color: #006600; font-weight: bolder; background-color: #BFFFBF; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: ridge; border-right-style: ridge; border-bottom-style: ridge;


border-left-style: ridge; border-top-color: #006600; border-right-color: #BFFFBF; border-bottom-color: #006600; border-left-color: #BFFFBF; } </style> <script type="text/javascript" language="JavaScript"> var verificare = "false"; function f(x) { if (verificare == "false") { for (i = 0; i < x.length; i++) { x[i].checked = true; } verificare = "true"; return "Deselectate"; } else { for (i = 0; i < x.length; i++) { x[i].checked = false; } verificare = "false"; return "Selectate"; } } </script> </head> <body> <span class="titlul">Ce imi place </span><br /><br /> <table> <tr> <td> <form name="formular" > <input type="checkbox" name="valoare" value="1"> Să navighez pe

Internet<br /> <input type="checkbox" name="valoare" value="2"> Să creez site-uri<br /> <input type="checkbox" name="valoare" value="3"> Să realizez scripturi JavaScript<br /> <input type="checkbox" name="valoare" value="4"> Să ascult

muzică<br /><br /> <input type="button" value="Apasati!" onClick="this.value=

f(this.form.valoare)" class="buton"> </form> </td> </tr> </table> </body> </html>


Date Obiectul Date este utilizat în lucrul cu ore şi date calendaristice. Atunci când lucrăm

cu acest obiect, data şi ora computerului client sunt cele la care se raportează scriptul JavaScript când este executat. Data este măsurată în milisecunde începând cu 1 ianuarie 1970. O zi are 86.400.000 milisecunde. Pentru a realiza calcule corecte, trebuie să specificăm anul în întregime, nu prescurtat, adică 1989 nu 89. ProprietăŃi: constructor, prototype. Metode: getDate(), getDay(), getFullYear(), getHours(),(), getMilliseconds(), getMinutes(),

getMonth(), getSeconds(), getTime(), getTimezoneOffset(), getUTCDate(), getUTCDay(), getUTCFullYear(), getUTCHours(), getUTCMilliseconds(), getUTCMinutes(), getUTCMonth(), getUTCSeconds(), getYear(), parse(), setDate(), setFullYear(), setHours(), setMilliseconds(), setMinutes(), setMonth(), setSeconds(), setTime(), setUTCDate(), setUTCFullYear(), setUTCHours(), setUTCMilliseconds(), setUTCMinutes(), setUTCMonth(), setUTCSeconds(), setYear(), toGMTString(), toLocaleString(), toSource(), toString(), toUTCString(), UTC(), valueOf().


constructor Specifică funcŃia care creează prototype unui obiect. prototype Permite adăugarea unor proprietăŃi obiectului Date.

Metodă Descriere

getDate() Returnează o valoare numerică din intervalul 1-31, ce reprezintă ziua dintr-o dată specificată, conform timpului local.

getDay() Returnează o valoare numerică din intervalul 0-6, ce corespunde unei zile din săptămână, dintr-o dată specificată, conform timpului local.

getFullYear() Returnează anul întreg dintr-o dată specificată, conform timpului local.

getHours() Returnează o valoare numerică din intervalul 0-23, ce corespunde unei ore din zi, dintr-o dată specificată, conform timpului local.

getMilliseconds() Returnează o valoare numerică din intervalul 0-999, ce corespunde unei milisecunde, dintr-o dată specificată, conform timpului local.

getMinutes() Returnează o valoare numerică din intervalul 0-59, ce corespunde unui minut dintr-o oră, dintr-o dată specificată, conform timpului local.

getMonth() Returnează o valoare numerică din intervalul 0-11, ce corespunde unei luni din an, dintr-o dată specificată, conform timpului local.

getSeconds() Returnează o valoare numerică din intervalul 0-59, ce corespunde unei secunde dintr-un minut, dintr-o dată specificată, conform timpului local.

getTime() Returnează o valoare numerică în milisecunde începând din 1 ianuarie 1970 00:00:00, conform timpului local.

getTimezoneOffset() Returnează diferenŃa între GMT şi ora locală. getUTCDate() Returnează o valoare numerică din intervalul 1-31, ce

corespunde unei zile din lună, dintr-o dată specificată, conform timpului universal.

getUTCDay() Returnează o valoare numerică din intervalul 0-6, ce corespunde unei zile dintr-o săptămână, dintr-o dată specificată, conform timpului universal.


getUTCFullYear() Returnează un număr absolut corespunzător unui an, dintr-o dată specificată, conform timpului universal.

getUTCHours() Returnează o valoare numerică din intervalul 0-23, ce corespunde unei ore dintr-o zi, dintr-o dată specificată, conform timpului universal.

getUTCMilliseconds() Returnează o valoare numerică din intervalul 0-999, ce corespunde unei milisecunde, dintr-o dată specificată, conform timpului universal.

getUTCMinutes() Returnează o valoare numerică din intervalul 0-59, ce corespunde unui minut, dintr-o oră, dintr-o dată specificată, conform timpului universal.

getUTCMonth() Returnează o valoare numerică din intervalul 0-11, ce corespunde unei luni, dintr-un an, dintr-o dată specificată, conform timpului universal.

getUTCSeconds() Returnează o valoare numerică din intervalul 0-59, ce corespunde unei secunde, dintr-un minut, dintr-o dată specificată, conform timpului universal.

getYear() Returnează anul dintr-o dată specificată, conform timpului local. parse() Returnează un număr de milisecunde dintr-o dată, ca diferenŃă

dintre 1 ianuarie 1970 00:00:00 şi data respectivă. setDate() Returnează ziua din lună pentru o dată specificată, conform

timpului local. setFullYear() Setează un an întreg pentru o dată specificată, conform

timpului local. setHours() Setează ora pentru o dată specificată, conform timpului local. setMilliseconds() Setează milisecundele pentru o dată specificată, conform

timpului local. setMinutes() Setează minutele pentru o dată specificată, conform timpului

local. setMonth() Setează luna pentru o dată specificată, conform timpului local. setSeconds() Setează secundele pentru o dată specificată, conform timpului

local. setTime() Setează valoarea obiectului Date, conform timpului local. Se

utilizează metoda setTime pentru a ajuta la atribuirea datei şi a timpului către alt obiect Date.

setUTCDate() Setează ziua dintr-o lună pentru o dată specificată, conform timpului universal.

setUTCFullYear() Setează un an întreg pentru o dată specificată, conform timpului universal.

setUTCHours() Setează ora pentru o dată specificată, conform timpului universal.

setUTCMilliseconds() Setează milisecundele dintr-o dată specificată, conform timpului universal.

setUTCMinutes() Setează minutele dintr-o dată specificată, conform timpului universal.

setUTCMonth() Setează luna dintr-o dată specificată, conform timpului universal.

setUTCSeconds() Setează secundele dintr-o dată specificată, conform timpului universal.

setYear() Setează anul pentru o dată specificată, conform timpului local. toGMTString() Transformă o dată într-un şir de caractere, folosind convenŃiile

GMT.


toLocaleString() Transformă o dată într-un şir de caractere, folosind convenŃiile locale curente.

toLocaleDateString() Returnează o porŃiune date dintr-un şir de caractere al unui obiect Date specificat, folosind convenŃiile locale curente.

toLocaleTimeString() Returnează o porŃiune time dintr-un şir de caractere al unui obiect Date specificat, folosind convenŃiile locale curente.

toSource() Returnează un obiect literal reprezentând un obiect Date specificat.

toString() Returnează un şir de caractere al unui obiect Date specificat. toUTCString() Returnează un şir de caractere al unui obiect Date specificat,

folosind convenŃia UTC pentru timpul universal. UTC() Returnează un număr în milisecunde dintr-o dată folosind timpul

GMT. valueOf() Returnează valoarea primitivă a unui obiect Date. Exemplu În acest exemplu, am realizat un formular care permite introducerea unor numere ce

reprezintă o dată aleasă de către utilizator şi returnează ziua din săptămâna respectivă. Pentru aceasta am utilizat metoda getDay.

<html> <head> <title>Obiectul Date</title> <style type="text/css"> body { background-color: #FFE8C4; } .titlul { font-size: 18px; font-weight: bolder;


color: #DD8500; text-align: center; } .text { font-size: 14px; color: #DD8500; } .buton { font-size: 14px; font-weight: bolder; background-color: #FF9900; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: outset; border-right-style: outset; border-bottom-style: outset; border-left-style: outset; border-top-color: #FF9900; border-right-color: #FFDBA6; border-bottom-color: #FF9900; border-left-color: #FFDBA6; } </style> <script type="text/javascript" language="JavaScript"> function f() { var x1=formular.zi.value; var x2=formular.luna.value; var x3=formular.an.value; var x4=formular.ora.value; var x5=formular.minut.value; var x6=formular.secunda.value;

//ziua if(isNaN(x1)) { alert(x1+": Ar trebui sa introduceti un numar!"); } else if ((x1>=1)&&(x1<=31)) document.writeln("Ati ales ziua: "+x1); else document.writeln("Introduceti un numar intre 1 si 31.");

//luna document.writeln(", luna: "+x2);

//anul if(isNaN(x3)) { alert(x3+": Ar trebui sa introduceti un numar!"); } else if (x3>=1970) document.writeln(", anul: "+x3); else document.writeln("Introduceti un numar pozitiv.");

//ora


if(isNaN(x4)) { alert(x4+": Ar trebui sa introduceti un numar!"); } else if ((x4>=0)&&(x4<=23)) document.writeln(", ora: "+x4); else document.writeln("Introduceti un numar intre 0 si 23.");

//minut if(isNaN(x5)) { alert(x5+": Ar trebui sa introduceti un numar!"); } else if ((x5>=0)&&(x5<=60)) document.writeln(", minutul: "+x5); else document.writeln("Introduceti un numar intre 0 si 60.");

//secunda if(isNaN(x6)) { alert(x6+": Ar trebui sa introduceti un numar!"); } else if ((x6>=0)&&(x6<=60)) document.writeln(", secunda: "+x6); else document.writeln("Introduceti un numar intre 0 si 60.");

//afişare var ziua=new Date(x2+" "+x1+", "+x3+" "+x4+":"+x5+":"+x6); document.writeln("<br />In data de "+x1+" "+x2+" "+x3+", orele:

"+x4+":"+x5+":"+x6); document.writeln(" este ziua a-"+ziua.getDay()+"a din saptamana"); } </script> </head> <body> <form name="formular" method="post" action=""> <table width="30%" border="0" cellspacing="1" cellpadding="1" > <tr> <td colspan="4" class="titlul">Alegeti o data calendaristica</td> </tr> <tr > <td class="text">Ziua:</td> <td><input type="text" name="zi" size="10" value=""></td> <td class="text">Ora:</td> <td><input type="text" name="ora" size="4" ></td> </tr> <tr> <td class="text">Luna:</td> <td><select name="luna"> <option selected value="January">Ianuarie</option> <option value="February">Februarie</option> <option value="March">Martie</option> <option value="April">Aprilie</option> <option value="May">Mai</option> <option value="June">Iunie</option> <option value="July">Iulie</option>


<option value="August">August</option> <option value="September">Septembrie</option> <option value="October">Octombrie</option> <option value="November">Noiembrie</option> <option value="December">Decembrie</option> </select></td> <td class="text">Minutul:</td> <td><input type="text" name="minut" size="4"></td> </tr> <tr> <td class="text">Anul:</td> <td><input type="text" name="an" size="10"></td> <td class="text">Secunda:</td> <td><input type="text" name="secunda" size="4"></td> </tr> </table> <br /> <input name="Submit" type="submit" class="buton" onClick="f()"

value="Apasati!"> </form> </body> </html>

Document

Obiectul Document conŃine informaŃii despre documentul curent. ProprietăŃi: alinkColor, anchors, bgColor, cookie, domain, embeds, fgColor, formName, forms,

height, ids, images, lastModified, layers, linkColor, links, plugins, referrer, tags, title, URL, vlinkColor, width.

Metode: close(), getElementById(), open(), write(), writeln(). Evenimente: onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown,

onMouseUp.

Proprietate Descriere alinkColor Reprezintă un şir de caractere care specifică ce culoare are

link-ul activ. anchors Reprezintă un masiv de obiecte ce corespunde numelui

ancorei. bgColor Reprezintă un şir de caractere ce setează culoarea fundalului

documentului. cookie Este utilizat pentru a identifica valoarea unui cookie. domain Reprezintă numele de domeniu al unui document de pe un

server. embeds Un array ce conŃine toate plugin-urile dintr-un document. fgColor Reprezintă un şir de caractere care specifică ce culoare are

textul dintr-un document. formName Reprezintă numele unui formular. forms Reprezintă un masiv ce conŃine o intrare pentru fiecare formular

din document. height Reprezintă un şir ce specifică înălŃimea unei imagini, în pixeli. lastModified Reprezintă un şir ce reprezintă data când a fost modificat

documentul pentru ultima oară. linkColor Reprezintă culoarea legăturilor de tip hipertext nevizitate dintr-

un document. links[] Un array ce conŃine toate legăturile de tip hipertext dintr-un

document.


plugins Un array ce conŃine toate plugins dintr-un document. referrer Un string ce specifică URL-ul în care utilizatorul ajunge printr-o

legătură de tip hipertext. title Specifică titlul unui document URL Un string ce specifică un URL complet dintr-un document. vlinkColor Specifică culoarea legăturilor de tip hipertext vizitate dintr-un

document. Metodă Descriere

close() Închide documentul deschis cu document.open(). getElementById(“ID”) O metodă de accesare a unui element dintr-o pagină prin

atributul “ID”. open() Deschide o fereastră nouă. write()

Realizează scrierea într-un document HTML a unui şir de caractere.

writeln() Realizează scrierea într-un document HTML a unui şir de caractere, după care trece la linie nouă.

Eveniment Descriere

onClick Execută codul JavaScript în momentul în care efectuăm click de mouse pe un obiect specificat.

onDblClick AcŃiune ce va fi declanşată când se dă dublu click stânga de mouse pe un obiect specificat.

onKeyDown AcŃiune ce va fi declanşată când se apasă o tastă. onKeyPress AcŃiune ce va fi declanşată când se apasă şi se eliberează o

tastă. onKeyUp AcŃiune ce va fi declanşată când este eliberată o tastă. onMouseDown AcŃiune ce va fi declanşată când un buton al mouse-ului este

apăsat. onMouseUp AcŃiune ce va fi declanşată când butonul mouse-ului este

eliberat. Exemplu În acest exemplu, am utilizat obiectul Document pentru a deschide o nouă fereastră în

care am scris un mesaj. Fereastra am deschis-o cu window.open şi am scris în ea cu document.write.

<html> <head> <title>Obiectul Document</title> <style type="text/css"> .mesaj { font-size: 14px; color: #A60029; background-color: #FFC1D1; border: thin groove; } </style> </head> <body> <script type="text/javascript" language="JavaScript"> function f()

{ msgWindow=window.open ("", "displayWindow", "toolbar=no, width=250, height=15,directories=no,status=no,scrollbars=yes,resize=yes,


menubar=yes") msgWindow.document.write ("<head><title>Salutari! </title></head>") msgWindow.document.write ("<body bgcolor=#FFC1D1 text=#A60029>Aici sunt

intr-o noua fereastra. ") } </script> <form> <INPUT type="button" value="Apasati!" onclick=f(this.form) name="buton" alt="mesaj" class="mesaj"> </form> </body> </html>

Event Obiectul Event este creat automat de JavaScript la întâlnirea unui eveniment.

ProprietăŃi: altKey, ctrlKey, shiftKey, button, clientX, clientY, fromElement, toElement, keyCode, offsetX, offsetY, returnValue, srcElement, type.

Metode: preventDefault(), stopPropagation().

Proprietate Descriere altKey, ctrlKey, shiftKey ProprietăŃi ce indică momentul când sunt apăsate tastele Alt,

Ctrl şi Shift în timpul declanşării unui eveniment. button Un număr întreg ce arată când este apăsat sau eliberat un

buton al mouse-ului. Numerele sunt 1 – pentru butonul din stânga, 2 – dreapta, 4 – mijloc. Dacă sunt apăsate mai multe butoane, valoarea rezultată este suma acelor butoane. De exemplu, 3 înseamnă că au fost apăsate butoanele 1 şi 2, adică stânga şi dreapta.

clientX, clientY Returnează coordonatele mouse-ului. fromElement, toElement Pentru evenimenele mouseOver şi mouseOut, aceste

proprietăŃi indică momentul când elementele mouse-ului părăsesc sau se deplasează pe deasupra obiectului respectiv.

keyCode Indică codul Unicode pentru tasta apăsată. offsetX, offsetY Returnează coodonatele mouse-ului relativ la elementul de


origine. returnValue Setează false pentru a anula orice acŃiune iniŃială a

evenimentului. srcElement Elementul asupra căruia acŃionează evenimentul curent. type Un şir de caractere ce indică tipul evenimentului, cum ar fi :

« click », « mouseover ». Metodă Descriere

preventDefault() Setează true pentru a anula orice acŃiune iniŃială a evenimentului.

stopPropagation() Setează true pentru a preveni propagarea evenimentului. Exemplu În acest exemplu, am realizat o bară verticală pe care glisează un dreptunghi. Pe

măsură ce dreptunghiul îşi schimbă poziŃia, va fi afişată noua valoare.

<html> <head> <title>Exemplu cu Event</title> <style type="text/css"> *.Orizontal { color: #333; width: 120px; float: left; margin: 0; line-height: 0px; font-size: 0px; text-align: left; padding: 4px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; } *.IntVertical { color: #333; padding: 3px 6px 15px 6px; width: 24px; height: 100px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; }


*.Orizontal *.Intr { background-color: #333; color: #ccc; width: 110px; height: 3px; line-height: 0px; position: absolute; z-index: 1; margin-top: 4px; margin-right: 4px; margin-bottom: 2px; margin-left: 4px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #aaa; border-right-color: #eee; border-bottom-color: #eee; border-left-color: #aaa; } *.IntVertical *.Intr { background-color: #000; color: #333; width: 2px; height: 100px; position: absolute; margin: 4px 10px 4px 10px; padding: 4px 0 1px 0; line-height: 0px; font-size: 0; } *.Orizontal *.bara { width: 16px; color: #333; position: relative; margin: 0; height: 9px; z-index: 1; text-align: left; } *.IntVertical *.bara { width: 20px; background-color: #666; color: #333; position: relative; margin: 0; height: 9px; z-index: 1; line-height: 0px; font-size: 0px; text-align: left; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px;


border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #aaa; border-right-color: #444; border-bottom-color: #444; border-left-color: #aaa; } *.DrAfis { color: #333; width: 35px; margin: 0; float: left; height: 20px; text-align: right; padding-top: 0; padding-right: 2px; padding-bottom: 0; padding-left: 0; } .AfisBara { color: #006600; padding: 3px 1px 0 0; width: 30px; text-align: right; font-size: 11px; line-height: 10px; font-family: verdana, arial, helvetica, sans-serif; font-weight: bold; border: 0; cursor: default; } </style> <script type="text/javascript" language="javascript"> var LungineB = 100 var Orientare = 'horizontal' var NumeBara = 'bara' var AfisBr = 'AfisBara' function NumeStil(className) { var ElemStil = new Array(); var Xe = document.getElementsByTagName("*"); var LumgimeXe = Xe.length; var Xa = new RegExp("\\b" + className + "\\b") for (i = 0, j = 0; i < LumgimeXe; i++) { if ( Xa.test(Xe[i].className) ) { ElemStil[j] = Xe[i]; j=j+1; } } return ElemStil; } function Stanga(Xel, Xp) { if (!(Xel = document.getElementById(Xel)))


return 0; if (Xel.style && (typeof(Xel.style.left) == 'string')) { if (typeof(Xp) == 'number') Xel.style.left = Xp + 'px'; else { Xp = parseInt(Xel.style.left); if (isNaN(Xp)) Xp = 0; } } else if (Xel.style && Xel.style.pixelLeft) { if (typeof(Xp) == 'number') Xel.style.pixelLeft = Xp; else Xp = Xel.style.pixelLeft; } return Xp; } function Sus(Xel, Xp) { if (!(Xel = document.getElementById(Xel))) return 0; if (Xel.style && (typeof(Xel.style.top) == 'string')) { if (typeof(Xp) == 'number') Xel.style.top = Xp + 'px'; else { Xp = parseInt(Xel.style.top); if (isNaN(Xp)) Xp = 0; } } else if (Xel.style && Xel.style.pixelTop) { if (typeof(Xp) == 'number') Xel.style.pixelTop = Xp; else Xp = Xel.style.pixelTop; } return Xp; } function Miscare(Eveniment) { if (!Eveniment) Eveniment = window.event; else Eveniment = Eveniment; if (mouseover) { x = Xms.startOffsetX + Eveniment.screenX y = Xms.startOffsetY + Eveniment.screenY if (x > Xms.xMax) x = Xms.xMax if (x < 0) x = 0


if (y > Xms.yMax) y = Xms.yMax if (y < 0) y = 0 Stanga(Xms.id, x) Sus(Xms.id, y) ValoareXms = x + y PozitieXms = (Xms.distance / display.valuecount) * Math.round(display.valuecount * ValoareXms / Xms.distance) v = Math.round((PozitieXms * Xms.scale + Xms.from) * Math.pow(10, display.decimals)) / Math.pow(10, display.decimals) display.value = v return false } return } function Ms(Eveniment) { if (!Eveniment) Eveniment = window.event; if (Eveniment.target) Xms = Eveniment.target else Xms = Eveniment.srcElement; dist = parseInt(Xms.getAttribute('distance')) if (dist) Xms.distance = dist; else Xms.distance = LungineB ori = Xms.getAttribute('orientation') if (ori == 'vertical') orientation = ori; else orientation = Orientare; displayId = Xms.getAttribute('display') display = document.getElementById(displayId) display.sliderId = Xms.id dec = parseInt(display.getAttribute('decimals')) if (dec) display.decimals = dec; else display.decimals = 0; val = parseInt(display.getAttribute('valuecount')) display.valuecount = val ? val : Xms.distance + 1 from = parseFloat(display.getAttribute('from')) from = from ? from : 0 to = parseFloat(display.getAttribute('to')) to = to ? to : Xms.distance Xms.scale = (to - from) / Xms.distance if (orientation == 'vertical') { Xms.from = to Xms.xMax = 0 Xms.yMax = Xms.distance Xms.scale = -Xms.scale } Xms.startOffsetX = Stanga(Xms.id) - Eveniment.screenX Xms.startOffsetY = Sus(Xms.id) - Eveniment.screenY mouseover = true


document.onmousemove = Miscare document.onmouseup = sliderMouseUp return false } function sliderMouseUp() { if (mouseover) { v = (display.value) ? display.value : 0 Xp = (v - Xms.from)/(Xms.scale) if (Xms.yMax == 0) { Xp = (Xp > Xms.xMax) ? Xms.xMax : Xp Xp = (Xp < 0) ? 0 : Xp Stanga(Xms.id, Xp) } if (Xms.xMax == 0) { Xp = (Xp > Xms.yMax) ? Xms.yMax : Xp Xp = (Xp < 0) ? 0 : Xp Sus(Xms.id, Xp) } } mouseover = false } function Afisare(Eveniment) { if (!Eveniment) Eveniment = window.event; if (Eveniment.target) display = Eveniment.target; else display = Eveniment.srcElement; incuiat = display.getAttribute('typelock') display.blur() return } window.onload = function() { Xs = NumeStil(NumeBara) for (i = 0; i < Xs.length; i++) { Xs[i].onmousedown = Ms } Afisari = NumeStil(AfisBr) for (i = 0; i < Afisari.length; i++) { Afisari[i].onfocus = Afisare } } </script> </head> <body> <br /><br /> <div class="IntVertical" style="height: 50px; background-color: #fff;

border-color: #fff;"> <div class="Intr" style="height: 50px; "> </div> <div class="bara" id="linie" orientation="vertical" distance="50"

display="Afis"


style="top: 25px; background-color: #7a7; border-color: #ada #474 #474 #ada;"> </div>

</div> <div class="DrAfis" style="background-color: #fff; border-color: #fff;"> <input class="AfisBara" id="Afis" style="background: #fff;"

type="text" from="-500" to="500" valuecount="50" value="0" typelock="on" decimals="2"/>

</div> </div> </div> </body> </html>

FileUpload

Obiectul FileUpload este o proprietate a obiectului Form. El permite utilizatorilor să Upload-eze fişiere de pe computerul client. ProprietăŃi: form, name, type, value.. Metode: blur(), focus(). Evenimente: onBlur, onChange, onFocus.

Proprietate Descriere form Obiectul Form, care include obiectul fileUpload. name Numele elementului fileUpload, care nu este acelaşi cu numele

fişierului care este Upload-at. type Tipul elementului, care este: file. value Reprezintă valoarea iniŃială a numelui fişierului care este

Upload-at. Metodă Descriere

blur() Înlătură focalizarea de pe formular. focus() Se focalizează asupra unui formular.

Eveniment Descriere

onblur AcŃiune ce va fi declanşată când se pierde focalizarea de pe elementele unui formular.

onChange AcŃiune ce va fi declanşată la schimbarea unui element dintr-un formular.

onfocus AcŃiune ce va fi declanşată de focalizarea asupra unui element din formular.

Exemplu În acest exemplu, am utilizat obiectul FileUpload, pentru a face upload la fişiere cu

anumite extensii. Dacă încercăm să trimitem fişiere cu alte extensii, va apare o fereastră cu un mesaj de atenŃionare.


<html> <head> <title>Obiectul fileUpload</title> <style type="text/css"> .scris { font-size: 14px; color: #0000FF; background-color: #D7D7FF; } </style> <script type="text/javascript" language="javascript"> ExtensiiFisiere = new Array(".doc", ".txt", ".pdf"); function f(form, file) { Accept = false; if (!file) return; while (file.indexOf("\\") != -1) file = file.slice(file.indexOf("\\") + 1); Extensie = file.slice(file.indexOf(".")).toLowerCase(); for (var i = 0; i < ExtensiiFisiere.length; i++) { if (ExtensiiFisiere[i] == Extensie) { Accept = true; } } if (Accept) form.submit(); else alert("Puteti trimite fisiere numai cu extensiile: " + (ExtensiiFisiere.join(" ")) ); } </script> </head> <body class="scris"> Alegeti un fisier de tip<br /> <script> document.write(ExtensiiFisiere.join(" ")); </script> <FORM method="post" NAME="formu1ar" action="/cgi-bin/un script.cgi" enctype="multipart/form-data"> <input type="file" NAME="fisier" size="30"><br /><br /> <input type="submit" name="Submit" value="Trimiteti!" onClick="f(this.form, this.form.fisier.value)" class="scris"> </FORM> </body> </html>


Form Obiectul Form permite utilizatorilor să introducă elemente cum ar fi listele de selecŃie,

butoanele radio, checkboxes. Cu JavaScript se pot trimite date către un server. ProprietăŃi: action, elements, encoding, length, method, name, target. Metode: handleEvent(), reset(), submit(). Evenimente: onReset, onSubmit.

Proprietate Descriere action Specifică adresa URL către care vor fi trimise datele introduse

în formular. elements Specifică elementele unui formular în ordinea în care sunt în

sursă, similar unui masiv. Ne putem referi la elementele dintr-un formular utilizând elementele unui masiv.

encoding Returnează un şir de caractere care specifică un cod MIME dintr-un formular.

length Returnează numărul de elemente dintr-un formular. method Specifică modalitatea în care datele introduse în formular vor fi

trimise către server. Cele două posibilităŃi sunt: get sau post. name Returnează numele unui formular. target Returnează fereastra target către care este trimis un răspuns

de către elementul submit al unui formular. Metodă Descriere

handleEvent() Specifică handlerul de eveniment pentru un anumit eveniment specificat.

reset() Resetează valorile iniŃiale dintr-un formular. Acest buton este utilizat cu butonul Reset dintr-un formular.

submit() Trimite valorile dintr-un formular. Acest buton este utilizat cu butonul Submit dintr-un formular.

Eveniment Descriere

onReset Este utilizat pentru a executa un anumit cod JavaScript după ce s-a dat click pe butonul Reset din formular.

onSubmit Este utilizat pentru a executa un anumit cod JavaScript după ce s-a dat click pe butonul Submit din formular.

Exemplu În acest exemplu, s-a utilizat obiectul Form, pentru ca utilizatorul să poată realiza

anumite calcule matematice simple, dând click pe diverse butoane. Am utilizat funcŃii diferite ce realizează diverse operaŃii: funcŃia Operatia pentru înmulŃire, împărŃire, adunare, scădere, funcŃia PozNeg pentru a realiza calcule cu semn, funcŃia Procent pentru a calcula procentul dintr-un număr introdus de către utilizator, funcŃia Cifra pentru a introduce cifrele necesare calculelor.

<html> <head> <title>Exemplu_Calculator</title> <style type="text/css"> .calc { font-size: 14px; font-weight: bolder; color: #000066; background-color: #B9B9FF; }


.buton { color: #3737FF; background-color: #E1E1FF; width: 30px; border: thin outset #9F9FFF; font-weight: bolder; text-align: center; } </style> </head> <body> <center> <FORM name="formular" > <TABLE border="2" width="50" height="60" cellpadding="1" cellspacing="4"

class="calc"> <tr> <td colspan="6">Calculator de buzunar</td> </tr> <tr> <td align="center" colspan="3"> <input name="Citire" type="Text" size=18 value="0" width="100%"> </td> <td> <input name="Curata_" type="Button" value="C" onClick="Curata()"

class="buton"> </td> <td> <input name="CurataIntr_" type="Button" value="CE"

onClick="CurataIntr()" class="buton"> </td> </tr> <tr > <td align="center" colspan="1" > <input name="unu" type="Button" value=" 1 " onClick="Cifra(1)"

class="buton"> </td> <td align="center" colspan="1" > <input name="doi" type="Button" value=" 2 " onClick="Cifra(2)"

class="buton"> </td> <td align="center" colspan="1"> <input name="trei" type="Button" value=" 3 " onClick="Cifra(3)"

class="buton"> </td> <td align="center" colspan="1"> <input name="Inmultit" type="Button" value="*" onClick="Operatia('*')"


class="buton"> </td> <td align="center" colspan="1"> <input name="Impartit" type="Button" value="/" onClick="Operatia('/')"

class="buton"> </td> </tr> <tr> <td align="center" colspan="1"> <input name="patru" type="Button" value=" 4 " onClick="Cifra(4)"

class="buton"></td> <td align="center" colspan="1"> <input name="cinci" type="Button" value=" 5 " onClick="Cifra(5)"

class="buton"></td> <td align="center" colspan="1"> <input name="sase" type="Button" value=" 6 " onClick="Cifra(6)"

class="buton"></td> <td align="center" colspan="1"> <input name="Negativ" type="Button" value=" +/- " onClick="PozNeg()"

class="buton"></td> <td align=middle> <input name="Procent" type="Button" value=" % " onClick="Procent()"

class="buton"></td> </tr> <tr> <td align="center" colspan="1"> <input name="sapte" type="Button" value=" 7 " onClick="Cifra(7)"

class="buton" ></td> <td align="center" colspan="1"> <input name="opt" type="Button" value=" 8 " onClick="Cifra(8)"

class="buton"></td> <td align="center" colspan="1"> <input name="noua" type="Button" value=" 9 " onClick="Cifra(9)"

class="buton"></td> <td align="center" colspan="1"> <input name="Plus" type="Button" value=" + "

onClick="Operatia('+')" class="buton"> </td> <td align="center" colspan="1"> <input name="Minus" type="Button" value=" - " onClick="Operatia('-

')" class="buton"></td> </tr> <tr> <td align="center" colspan="1"> <input name="zero" type="Button" value=" 0 " onClick="Cifra(0)"

class="buton"></td> <td align="center" colspan="1"> <input name="zero_zero" type="Button" value=" 00 "

onClick="Cifra00(0)" class="buton"> </td> <td align="center" colspan="1"> <input name="PunctZecimal" type="Button" value=" . "

onClick="Zecimal()" class="buton"> </td> <td colspan="1"></td> <td> <input name="Egal" type="Button" value=" = " onClick="Operatia('=')"

class="buton"> </td> </tr> </TABLE> </TABLE> </FORM>


</center> <script type="text/javascript" language="javascript"> var Valformular = document.formular; var VarOp = 0; var Nr = false; var Liber = ""; function Cifra (Numar) { if (Nr) { Valformular.Citire.value = Numar; Nr = false; } else { if (Valformular.Citire.value == "0") Valformular.Citire.value = Numar; else Valformular.Citire.value += Numar; } } function Cifra00 (Numar) { if (Nr) { Valformular.Citire.value = Numar; Nr = false; } else { if (Valformular.Citire.value == "00") Valformular.Citire.value = Numar; else Valformular.Citire.value += Numar; Valformular.Citire.value += Numar; } } function Operatia (XOpr) { var Citire = Valformular.Citire.value; if (Nr && Liber != "="); else { Nr = true; if ( '+' == Liber ) VarOp += parseFloat(Citire); else if ( '-' == Liber ) VarOp -= parseFloat(Citire); else if ( '/' == Liber ) VarOp /= parseFloat(Citire); else if ( '*' == Liber ) VarOp *= parseFloat(Citire); else VarOp = parseFloat(Citire); Valformular.Citire.value = VarOp; Liber = XOpr;


} } function Zecimal () { var VarZec = Valformular.Citire.value; if (Nr) { VarZec = "0."; Nr = false; } else { if (VarZec.indexOf(".") == -1) VarZec += "."; } Valformular.Citire.value = VarZec; } function CurataIntr () { Valformular.Citire.value = "0"; Nr = true; } function Curata () { VarOp = 0; Liber = ""; CurataIntr(); } function PozNeg () { Valformular.Citire.value = parseFloat(Valformular.Citire.value) * -1; } function Procent () { Valformular.Citire.value = (parseFloat(Valformular.Citire.value) / 100) * parseFloat(VarOp); } </SCRIPT> </font> </body> </html>

Frame Obiectul Frame permite utilizarea mai multor ferestre în acelaşi timp. Fiecare dintre

aceste ferestre poate avea propriul URL.

Exemplu În acest exemplu, am utilizat obiectul Frame, pentru ca utilizatorul să poată vedea în partea din dreapta a paginii, adică în cadrul din dreapta, o poezie pe care o alege.

Pagina principală : <html> <head> <title>Obiectul Frame</title> </head> <frameset cols="20%,80%" framespacing="1" frameborder= "yes" border="1"> <frame src="stanga.htm" name="stanga" scrolling="no" noresize > <frame src="dreapta.htm" name="dreapta" scrolling="yes">


</frameset> <body> </body> </html>

Pagina din stânga: <html> <head> <title>Lucian Avramescu</title> <link href="StilPoezie.css" rel="stylesheet" type="text/css"> </head> <body> <span class="titlul">Lucian Avramescu </span><br /><br /> <a href="poezia1.html" target="dreapta" >Despre ambitia cuiva de a face alt om din mine </a><br /><br /> <a href="poezia2.html" target="dreapta">Singurul lucru care conteaza </a><br /><br /> <a href="poezia3.html" target="dreapta">Niciodata, iubito</a> <br /><br /> <a href="poezia4.html" target="dreapta">Ia aminte </a> </body> </html>

Pagina din dreapta: <html> <head> <title>Obiectul Frame</title> <link href="StilPoezie.css" rel="stylesheet" type="text/css"> </head> <body> <span class="titlul">Despre ambitia cuiva de a face alt om din mine </span> <br /><br /> da-ma la remaiat,<br /> du-ma la intors, tese-ma din nou,<br /> zugraveste-ma, pune-mi alt guler,<br /> alta manseta, alt zbenghi,<br /> da-mi alt numar la pantofi,<br /> toaca-ma marunt<br /> si umple-ma cu condimentele moralei tale,<br /> impunge-ma cu o mie de sfaturi,<br /> imprastie-ma in patru vanturi<br /> si vei observa ca acolo unde cad<br /> se umple locul de mine<br /> </body> </html>


Stilul extern : StilPoezie.css body { color: #FF0000; background-color: #FFFFAE; text-decoration: none; } .titlul { font-size: 16px; font-weight: bolder; color: #FF0000; text-align: center; font-style: normal; text-decoration: none; }

Function

Obiectul Function specifică un şir de cod JavaScript ce poate fi compilat ca o funcŃie. ProprietăŃi: arguments, arguments.callee, arguments.caller, arguments.length, arity, constructor,

length, prototype. Metode: apply(), call(), toSource(), toString(), valueOf().


arguments Reprezintă un masiv ce corespunde argumentelor unei funcŃii. arguments.callee Returnează corpul funcŃiei care se execută. arguments.calleer Specifică numele funcŃiei care este invocată la executarea

funcŃiei curente. arguments.length Specifică numărul de argumente pe care le are funcŃia. arity Specifică numărul de argumente aşteptate de către funcŃie. constructor Specifică funcŃia care creează prototype unui obiect. length Reprezintă un întreg ce specifică numărul de elemente ale unui

masiv. prototype Permite adăugarea de proprietaŃi tuturor obiectelor.

Metodă Descriere

apply() Permite aplicarea metodei unui obiect diferit, în alt context. call() Permite executarea metodei de către un alt obiect, într-un

context diferit. toSource() Returnează un şir de caractere ce reprezintă codul sursă al

funcŃiei. toString() Returnează un şir de caractere ce reprezintă codul sursă al

funcŃiei. valueOf() Returnează un şir de caractere ce reprezintă codul sursă al

funcŃiei.

Exemplu În acest exemplu, am utilizat obiectul Function pentru a putea adăuga pagina preferată la favorite.

<html> <head> <title>Obiectul Function</title> <script type="text/javascript" language="JavaScript"> function f() { if (document.all) window.external.AddFavorite("http://pagina.html/","Exemplu")


} </script> </head> <body> <form name="formular" onClick="f()"> Adaugati pagina la "Pagini Favorite"<br /><br /> <input name="" type="button" value="Apasati!"> </form> </body> </html>

Hidden Obiectul Hidden este o proprietate a obiectului Form şi specifică un şir de cod

JavaScript ce poate fi compilat ca o funcŃie. Ceea ce se scrie în formularul ce conŃine un obiect Hidden este invizibil pentru utilizatori, dar informaŃiile pe care le conŃin proprietăŃile name şi value sunt transmise odată cu formularul din care face parte. ProprietăŃi: form, name, type, value.


form Reprezintă formularul care conŃine câmpul Hidden. name Reprezintă numele câmpului Hidden. type Reprezintă tipul elementului Hidden. value Reprezintă un şir de caractere care specifică o valoare a

câmpului Hidden.

Exemplu În acest exemplu, am utilizat obiectul Hidden pentru a reŃine un anumit şir de caractere ce va fi transmis unui script JavaScript. Scriptul utilizează şirul primit pentru a face o afişare. Exemplul s-ar putea schimba, în aşa fel încât informaŃiile deŃinute de elementul value al obiectului Hidden, să fie transmise către server fără ca utilizatorul să fie informat în legătură cu acest lucru.

<html> <head> <title>Obiectul Hidden</title> <style type="text/css"> .a {font-family: Georgia, Times, serif; font-size: 14px; font-weight: bold; color: #FF0000; background-color: #CCCCFF; text-align: center; border: thin inset #0000FF; } </style> <script type="text/javascript" language="JavaScript"> function f(x) { alert('Ati completat cu: '+x); } </script> </head> <body> <form name="formular" class="a"> <input type="hidden" name="x"


value="None"><br /> Completati cu impresiile

dumneavoastra:<br /><br /> <textarea name="text" value=""

onMouseOut="document.formular.x.value=this.value">

</textarea><br /><br /> <input type="submit" name="Submit"

value="Apasati!" onClick="f(document.formular.x.value)" class="a"><br />

<br /> </form> </body> </html>

History

Obiectul History este o proprietate a obiectului Window. Cu ajutorul lui, putem ajunge la URL-urile vizitate, într-un mod similar cu butonul Back al browser-ului. ProprietăŃi: current, length, next, previous. Metode: back(), forward(), go().


current Reprezintă URL-ul documentului curent. length Reprezintă numărul de intrări în obiectul History. next Reprezintă URL-ul documentului următor din obiectul History. previous Reprezintă URL-ul documentului anterior din obiectul History.

Metodă Descriere

back() Ne trimite la intrarea (URL) anterioară din lista History, similar cu butonul Back din browser.

forward() Ne trimite la intrarea (URL) următoare din lista History, similar cu butonul Forward din browser.

go() Ne trimite la intrarea (URL) pe care o dorim din lista History, dacă menŃionăm a câta pagină a fost vizitată înainte sau în urmă. De exemplu: go(-2) sau go(+3).

Exemplu În acest exemplu, am utilizat obiectul History pentru a afişa numărul de elemente din

lista History.


<html> <head> <title> Obiectul History </title> <style type="text/css"> .s { font-size: 14px; color: #009900; background-color: #CAFFCA; } .b { font-size: 12px; color: #CAFFCA; background-color:#009900; } </style> <script type="text/javascript" language="JavaScript"> function f(x,y) { alert(x+y); } </script> </head> <body> <form name="formular"> <table border="0" cellspacing="1" cellpadding="1" class="s"> <tr> <td>Numarul de elemente din lista History: </td> <td><input type="hidden" name="h1" value="Numarul de elemente din lista

History: "> <input name="button" type="button" onClick=

"f(document.formular.h1.value,history.length)" value="Apasati!" class="b">

</td> </tr> <tr> <td>Inapoi la URL-ul trecut: </td> <td><input name="button2" type ="button" onClick="history.back()"

value="Inapoi" class="b"> </td> </tr> </table> </form> </body> </html>


Image Obiectul Image este o imagine dintr-un formular.

ProprietăŃi: border, complete, height, hspace, lowsrc, name, prototype, src, vspace, width. Evenimente: onAbort, onError, onKeyDown, onKeyPress, onKeyUp, onLoad.


border Reprezintă un număr întreg care specifică dimensiunea bordurii imaginii, în pixeli.

complete Reprezintă o valoare de tip boolean, care specifică momentul în care imaginea s-a încărcat complet.

height Reprezintă înălŃimea imaginii. hspace Reprezintă spaŃiul pe orizontală de la stânga spre dreapta

imaginii. lowsrc Reprezintă un şir de caractere ce specifică versiunea URL de

slabă rezoluŃie a unei imagini, pentru a fi afişată într-un document.

name Reprezintă numele imaginii. prototype Este utilizat pentru a adăuga proprietăŃi specifice unei imagini. src Reprezintă URL-ul unei imagii, pentru a fi afişată. vspace Reprezintă spaŃiul pe verticală în jurul imaginii. width Reprezintă lăŃimea imaginii în pixeli.

Eveniment Descriere

onAbort AcŃiune ce va fi declanşată în urma renunŃării la download-area unei imagini.

onError AcŃiune ce va fi declanşată în urma eşecului încărcării unei imagini sau a unui document.

onKeyDown AcŃiune ce va fi declanşată când se apasă o tastă. onKeyPress AcŃiune ce va fi declanşată când se apasă şi se eliberează o

tastă. onKeyUp AcŃiune ce va fi declanşată când este eliberată o tastă. onLoad AcŃiune ce va fi declanşată in urma unui download complet al

unei imagini.

Exemplu În acest exemplu, am utilizat obiectul Image pentru a afişa o imagine. Imaginea se deplasează pe suprafaŃa disponibilă a browser-ului. Putem opri imaginea, dacă dăm click pe ea.

<html> <head> <title>Obiectul Image</title> <style type="text/css"> body { font-size: 18px; font-weight: bolder; color: #FF00FF; background-color: #FFCAFF; text-align: center; } </style> </head> <body> Zambila<br /><br /> <div id="img" style="position:absolute;">


<img src="zambila.gif" onMouseDown="PauzaC();" width="138" height="134" alt="Zambila" name="floare" border="1"> </div> <script type="text/javascript" language= "JavaScript"> var height = 0; var ina = 0; var lat = 0; var y = 0; var x = 0; var pauza = true; var interval; var Xo = 880; var Yo = 0; var pas = 1; var timp = 10; function PozitiePoza() { latime = document.body.clientWidth; inaltime = document.body.clientHeight; ina = img.offsetHeight; lat = img.offsetWidth; img.style.left = Xo + document.body.scrollLeft; img.style.top = Yo + document.body.scrollTop; if (y) { Yo+= pas; } else { Yo -= pas; } if (Yo < 0) { y = 1; Yo = 0; } if (Yo >= (inaltime - ina)) { y = 0; Yo = (inaltime - ina); } if (x) { Xo += pas; } else { Xo -= pas; } if (Xo < 0) { x = 1; Xo = 0; } if (Xo >= (latime - lat)) { x = 0; Xo = (latime - lat); } } function start() { img.visibility = "visible"; interval = setInterval('PozitiePoza()',timp); } function PauzaC() { if(pauza) { clearInterval(interval); pauza = false; } else


{ interval = setInterval('PozitiePoza()',timp); pauza = true; } } start(); </script> </body> </html>

Java

Java este un obiect de nivel înalt şi este utilizat pentru a accesa orice clasă Java din package java.

JavaArray

JavaArray este un masiv ce poate fi accesat din interiorul unui script JavaScript ProprietăŃi: length; Metode: toString;


length Reprezintă numărul de elemente ale masivului Java, reprezentat de JavaArray.

Metodă Descriere

toString() Returnează un şir de caractere ce reprezintă elementele JavaArray.

JavaClass

JavaClass reprezintă o trimitere către o clasă Java.

JavaObject JavaObject reprezintă o instanŃă a unei clase Java, creată cu ajutorul unui script

JavaScript.

JavaPackage JavaPackage reprezintă o colecŃie de clase sau de Java packages.

Layer Obiectul Layer oferă posibilitatea de a poziŃiona diferite blocuri cu gradele de

transparenŃă dorite, într-o pagină HTML. ProprietăŃi: above, background, bgColor, below, clip.bottom, clip.height, clip.left, clip.right,

clip.top, clip.width, document, left, name, pageX, pageY, parentLayer, siblingAbove, siblingBelow, src, top, visibility, window, x, y, zIndex.

Metode: captureEvents(), handleEvent(), load(), moveAbove(), moveBelow(), moveBy(), moveTo(), moveToAbsolute(), releaseEvents(), resizeBy(), resizeTo(), routeEvent().

Evenimente: onBlur, onFocus, onLoad, onMouseOut, onMouseOver.

Proprietate Descriere above Obiectul Layer permite crearea mai multor straturi, poziŃionate

unul deasupra celuilalt. Când utilizăm mai multe layer-e, trebuie să specificăm care dintre ele se află deasupra (above) şi care se află în spate (below).

background Reprezintă fundalul unui layer.


bgColor Reprezintă culoarea de fundal a unui layer. below Specifică faptul că layer-ul respectiv se află în spatele altui

layer. clip.bottom Reprezintă partea de jos a unui dreptunghi vizibil. clip.height Reprezintă înălŃimea dreptunghiului vizibil. clip.left Reprezintă partea din stânga a unui dreptunghi vizibil. clip.right Reprezintă partea din dreapta a unui dreptunghi vizibil. clip.top Reprezintă partea de sus a unui dreptunghi vizibil. clip.width Reprezintă lăŃimea dreptunghiului vizibil. document Reprezintă documentul asociat unui layer. left Reprezintă poziŃia pe orizontală, dinspre stânga, măsurată în

pixeli. name Reprezintă un şir de caractere ce se asociază numelui unui

layer. pageX Reprezintă poziŃia pe orizontală a unui layer, relativ la pagină,

măsurată în pixeli. pageY Reprezintă poziŃia pe verticală a unui layer, relativ la pagină,

măsurată în pixeli. parentLayer Reprezintă un layer care se consideră layer de referinŃă pentru

alte layer-e. siblingAbove Reprezintă o referinŃă pentru obiectul Layer de deasupra unui

layer specificat în z-order, printre mai multe layer-e ce împart acelaşi parent layer.

siblingBelow Reprezintă o referinŃă pentru obiectul Layer de sub un layer specificat în z-order, printre mai multe layer-e ce împart acelaşi parent layer.

src Un şir de caractere ce specifică URL-ul si conŃinutului layer-ului. top PoziŃia pe verticală, din partea de sus a unui layer, în pixeli,

relativ la origina parent layer. visibility Reprezintă starea de vizibilitate sau invizibilitate a unui layer. window Obiectele Window sau Frame care conŃin un layer în relaŃie cu

alte layer. x PoziŃia pe orizontală dinspre stânga a unui layer, în pixeli,

relativ la parent layer. y PoziŃia pe verticală dinspre stânga a unui layer, în pixeli, relativ

la parent layer. zIndex Returnează z-order relativ la un layer specificat în relaŃia cu

orice sibling layers. Metodă Descriere

captureEvents() Setează fereastra sau documentul pentru a captura toate evenimentele unui tip specificat.

handleEvent() Invocă un handler pentru un eveniment specificat. load() Schimbă sursa unui layer, către conŃinutul unui fişier specificat. moveAbove() Blochează un layer deasupra unui layer specificat, fără

schimbarea poziŃiei. moveBelow() Blochează un layer sub un layer specificat, fără schimbarea

poziŃiei. moveBy() Schimbă poziŃia unui layer, prin specificarea numărului de pixeli

pe orizontală şi verticală. moveTo() Schimbă coordonatele colŃului din stânga-sus al unui layer.


moveToAbsolute() Schimbă coordonatele poziŃiei absolute a unui layer specificat (colŃul din stânga-sus).

releaseEvents() Setează fereastra sau documentul pentru a elibera toate evenimentele unui tip specificat.

resizeBy() Redimensionează un layer prin specificarea valorilor în pixeli, pentru înălŃime şi lăŃime.

resizeTo() Redimensionează un layer să aibă o înălŃime şi o lăŃime specificată.

routeEvent() Trimiterea evenimentului capturat în faŃa evenimentului ierarhic.

Eveniment Descriere onBlur AcŃiune ce va fi declanşată când se pierde focalizarea de pe un

element. onFocus AcŃiune ce va fi declanşată de focalizarea asupra unui element. onLoad AcŃiune ce va fi declanşată la încărcarea unui document. onMouseOut AcŃiune ce va fi declanşată când cursorul mouse-ului se

deplasează în afara elementului sau a suprafeŃei delimitate. onMouseOver AcŃiune ce va fi declanşată când cursorul mouse-ului se

deplasează peste un element sau peste suprafaŃa delimitată.

Exemplu În acest exemplu, am utilizat obiectul Layer pentru a afişa şi a ascunde două pătrate de dimensiuni diferite.

<html> <head> <title>Obiectul Layer</title> <style type="text/css"> #strat1 { background-color: red; left: 170; position: absolute; top: 20; visibility: hidden; font-size: 14px;


font-weight: bold; color: #FFFFFF; border: medium outset #B90000; text-align: center; height: 100px; width: 100px; } #strat2 { background-color: blue; left: 210; position: absolute; top: 60; visibility: hidden; font-weight: bolder; color: #FFFFFF; text-align: center; border: medium groove #0000A6; height: 200px; width: 200px; } </style> <script type="text/javascript" language="JavaScript1.2"> var layer = new String(); var style = new String(); function VerifBrowser() { if(navigator.userAgent.indexOf("MSIE") != -1) { layer = ".all"; style = ".style"; } else if(navigator.userAgent.indexOf("Nav") != -1) { layer = ".layers"; style = ""; } } function f(Xstrat, Xstare) { eval("document" + layer + "['" + Xstrat + "']" + style + ".visibility =

'" + Xstare + "'"); } function g(Ystrat, Ystare) { eval("document"+ layer + "['" + Ystrat + "']" + style + ".visibility =

'" + Ystare + "'"); } </script> </head> <body onload="VerifBrowser()"> <form name="formular"> <table> <tr> <td><div name="strat1" id="strat1"> Stratul 1 </div> <input type="button" name="buton1" value="Strat 1"

onClick="f('strat1','visible')"><br /> </td> <td><input type="button" name="buton2" value="Ascunde"


onClick="f('strat1','hidden')"><br /> </td> </tr> <tr> <td><div name="strat2" id="strat2"> Stratul 2 </div> <input type="button" name="buton3" value="Strat 2"

onClick="g('strat2','visible')"><br /> </td> <td> <input type="button" name="buton4" value="Ascunde"

onClick="g('strat2','hidden')"><br /> </td> </tr> </table> </form> </body> </html>

Exemplu În acest exemplu, am utilizat obiectul Layer pentru a afişa şi a ascunde elementele

unui meniu orizontal, cu submeniuri. <html> <head> <title>Exemplu de meniu cu Layer</title> <style type="text/css"> .MeniuVertical { border-top: 1px ridge #0000FF; border-bottom: 3px ridge #0000FF; border-left: 1px ridge #0000FF; border-right: 3px ridge #0000FF; background-color: #9797FF; layer-background-color: #999999; z-index: 60; visibility: hidden; width: 91px; position: absolute; color: #0000FF; padding: 3px; } .MeniuCuOptiuni { border-top: 1px ridge #0000FF; border-bottom: 3px ridge #0000FF; border-left: 1px ridge #0000FF; border-right: 3px ridge #0000FF; background-color: #9797FF; width: 90px; padding: 3px; } .MeniuOrizontal { color: #DFDFFF; font-family: Geneva, Arial, Helvetica, sans-serif; text-decoration: none; outline: none;


font-size: 14px; font-weight: bolder; } .MeniuVerticalLink { color: #0000FF; text-decoration: none; outline: none; font-weight: bold; } A.MeniuVerticalLink:hover { color: #DFDFFF; text-decoration: none; } #MeniuCuOptiuni1 { font-size: 14px; left: 60px; position: absolute; top: 20px; } #MeniuCuOptiuni2 { font-size: 14px; left: 150px; position: absolute; top: 20px; } #MeniuVertical1 { font-size: 14px; left: 60px; position: absolute; top: 44px; } #MeniuVertical2 { font-size: 14px; left: 150px; position: absolute; top: 44px; height: 61px; } #ContinutDiv { font-size: 14px; left: 60px; position: absolute; top: 70px } </style> <script type="text/javascript" language="JavaScript"> function Vizibilitate(IdMeniu, Viz) { var StilMeniu = document.all(IdMeniu).style; if(StilMeniu) { StilMeniu.visibility = Viz; return true;


} else { return false; } } function FMeniuVertical(nr, eveniment) { AscundeMeniuVertical(); var IdMeniuVertical = 'MeniuVertical' + nr; if(Vizibilitate(IdMeniuVertical, 'visible')) { var MeniuCuOptiuni = document.all('MeniuCuOptiuni' + nr).style; MeniuCuOptiuni.backgroundColor = '#0000FF'; eveniment.cancelBubble = true; return true; } else { return false; } } var NrMeniuVertical = 2; function AscundeMeniuVertical() { for(i = 1; i <= NrMeniuVertical; i++) { Vizibilitate('MeniuVertical' + i, 'hidden'); var MeniuCuOptiuni = document.all('MeniuCuOptiuni' + i).style; MeniuCuOptiuni.backgroundColor = '#9797FF'; } } document.onclick = AscundeMeniuVertical; </script> </head> <body bgcolor="#DFDFFF"> <div class=MeniuVertical id=MeniuVertical1 onclick=event.cancelBubble ='true;"'> <A class=MeniuVerticalLink href="pagina1.html">Pagina 1</A><br /> <A class=MeniuVerticalLink href="pagina2.html">Pagina 2</A><br /> </div> <div class=MeniuVertical id=MeniuVertical2 onclick="event.cancelBubble = true;"> <A class=MeniuVerticalLink href="pagina3.html">Pagina 3</A><br /> <A class=MeniuVerticalLink href="pagina4.html">Pagina 4</A><br /> <A class=MeniuVerticalLink href="pagina5.html">Pagina 5</A> </div> <div class=MeniuCuOptiuni id=MeniuCuOptiuni1> <A class=MeniuOrizontal onmouseover="return !FMeniuVertical('1', event);">Optiune 1</A> </div> <div class=MeniuCuOptiuni id=MeniuCuOptiuni2> <A class=MeniuOrizontal onmouseover="return !FMeniuVertical('2', event);">Optiune 2</A> </div> <div id=ContinutDiv>Pagina principala. </div> </body> </html>

Link


Obiectul Link este un şir de caractere, o imagine sau o porŃiune dintr-o imagine prin intermediul cărora se poate crea o legătură către un alt document sau URL. ProprietăŃi: hash, host, hostname, href, pathname, port, protocol, search, target, text, x, y. Metode: handleEvent(). Evenimente: onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown,

onMouseOut, onMouseOver, onMouseUp. Proprietate Descriere

hash Reprezintă un şir de caractere ce începe cu caracterul # (hash) ce specifică numele unei ancore.

host Este un şir de caractere ce reprezintă denumirea host, numele de domeniu sau adresa IP a unui host dintr-o reŃea.

hostname Specifică porŃiunea host:port a unui URL. href Reprezintă întregul URL. pathname Este un şir de caractere ce reprezintă o porŃiune dintr-un URL

ce specifică modalitatea în care pot fi accesate diverse resurse particulare.

port Este un şir de caractere ce specifică portul pe care îl utilizează server-ul.

protocol Este un şir de caractere ce specifică începutul unui URL şi include prima coloană ( :), ce reprezintă metoda de accesare a URL-ului.

search Este un şir de caractere ce conŃine o întrebare. target Este un şir de caractere ce specifică locul unde se va deschide

fereastra în urma acŃionării unui link. text Este un şir de caractere ce conŃine textul ce corespunde

etichetei « A ». x Reprezintă poziŃia pe orizontală, dinspre stânga, în pixeli, relativ

la partea din stânga a documentului. y Reprezintă poziŃia pe verticală, dinspre partea de sus a paginii,

în pixeli, relativ la partea de sus a documentului. Metodă Descriere

handleEvent() Invocă handler pentru un eveniment specificat.

Eveniment Descriere onClick AcŃiune ce va fi declanşată când se dă click stânga pe mouse. onDblClick AcŃiune ce va fi declanşată când se dă dublu click stânga pe

mouse. onKeyDown AcŃiune ce va fi declanşată când se apasă o tastă. onKeyPress AcŃiune ce va fi declanşată când se apasă şi se eliberează o

tastă. onKeyUp AcŃiune ce va fi declanşată când este eliberată o tastă. onMouseDown AcŃiune ce va fi declanşată când un buton al mouse-ului este

apăsat. onMouseOut AcŃiune ce va fi declanşată când cursorul mouse-ului se

deplasează în afara elementului sau a suprafeŃei delimitate. onMouseOver AcŃiune ce va fi declanşată când cursorul mouse-ului se

deplasează peste un element sau peste suprafaŃa delimitată. onMouseUp AcŃiune ce va fi declanşată când butonul mouse-ului este

eliberat.


Exemplu În acest exemplu, am utilizat obiectul Link pentru a realiza meniul de mai sus. <html> <head> <title> Obiectul Link</title> <style type="text/css"> a.one:link { color: #0000FF; text-decoration: none; background: #C6C6FF; font-family: "Georgia", "Times New Roman", "Times"; font-weight: bold; font-size: 14px; } a.one:visited { color: #0000CE; text-decoration: none; background: #C6C6FF; font-family: "Courier New", "Courier"; font-size: 14px; text-align: center; } a.one:hover { color: #FF9900; text-decoration:underline overline; font-size: 16px; background: #FFE7C1; text-align: center; } .stil { background-color: #0000FF;


text-align: center; border: 2px outset #0000A6; visibility: visible; height: 350px; width: 300px; position: absolute; left: 40px; top: 20px; } .as { color: #0000FF; background-color: #C6C6FF; visibility: hidden; position: absolute; left: 45px; top: 88px; width: 207px; height: 135px; } .titlul { font-size: 18px; font-weight: bolder; color: #FFFFFF; text-align: center; visibility: visible; position: absolute; left: 46px; top: 19px; width: 213px; height: 20px; } .s { text-align: left; font-style: italic; } </style> <script type="text/javascript" language="JavaScript"> var layer = new String(); var style = new String(); function VerifBrowser() { if(navigator.userAgent.indexOf("MSIE") != -1) { layer = ".all"; style = ".style"; } else if(navigator.userAgent.indexOf("Nav") != -1) { layer = ".layers"; style = ""; } } function f(strat,viz) { eval("document" + layer + "['" + strat + "']" + style + ".visibility =


'" + viz + "'"); } </script> </head> <body onload="VerifBrowser()"> <div class="stil"><br /> <div class="titlul">Mihai Eminescu</div><br /><br /> <div class="as" id="unu"> Diana<br /><br /> <div class="s">Ce cauti unde bate luna<br /> Pe-un alb izvor tremurător<br /> Si unde păsările-ntruna<br /> Se-ntrec cu glas ciripitor?<br /> <br /> N-auzi cum frunzele-n poiană<br /> Soptesc cu zgomotul de guri<br /> Ce se sărută, se hârjoană<br /> În umbr-adâncă de păduri?<br /> </div> </div> <a class="one" href="diana.html" target="_blank" onMouseOver=

"f('unu','visible')" onMouseOut="f('unu','hidden')"> Diana</a> <div class="as" id="doi"> Si dacă... <br /><br /> <div class="s">Si dacă ramuri bat în geam<br /> Si se cutremur plopii,<br /> E ca în minte să te am<br /> Si-ncet să te apropii.<br /><br /> Si dacă stele bat în lac<br /> Adâncu-i luminându-l,<br /> E ca durerea mea s-o-mpac<br /> Înseninându-mi gândul.<br /> </div></div> <a class="one" href="SiDaca.html" target="_blank" onMouseOver=

"f('doi','visible')" onMouseOut="f('doi','hidden')">Si dacă... </a>

<div class="as" id="trei"> Te duci... <br /><br /> <div class="s">Te duci si ani de suferintă<br /> N-or sa te vază ochi-mi tristi,<br /> Înamorati de-a ta fiintă,<br /> De cum zâmbesti, de cum te misti.<br /><br /> Si nu e blând ca o poveste<br /> Amorul meu cel dureros,<br /> Un demon sufletul tău este<br /> Cu chip de marmură frumos.<br /> </div></div> <a class="one" href="TeDuci.html" target="_blank" onMouseOver=

"f('trei','visible')" onMouseOut="f('trei','hidden')">Te duci... </a>

</div> </body> </html>

Location

Obiectul Location este o proprietate a obiectului Window şi conŃine URL-ul complet al obiectului Window sau, dacă nu este specificat, al obiectului Window curent. Poate fi utilizat pentru a controla afişarea paginii web de către browser. ProprietăŃi: hash, host, hostname, href, pathname, port, protocol, search. Metode: reload(), replace().


Proprietate Descriere hash Reprezintă un şir de caractere ce începe cu caracterul # (hash)

ce specifică numele unei ancore. host Este un şir de caractere ce reprezintă denumirea host-ului,

numele de domeniu sau adresa IP a unui host dintr-o reŃea. hostname Specifică porŃiunea host:port a unui URL. href Reprezintă întregul URL. pathname Este un şir de caractere ce reprezintă o porŃiune dintr-un URL

ce specifică modalitatea în care pot fi accesate diverse resurse particulare.

port Este un şir de caractere ce specifică portul pe care îl utilizează server-ul.

protocol Este un şir de caractere ce specifică începutul unui URL şi include prima coloană ( :), ce reprezintă metoda de accesare a URL-ului.

search Este un şir de caractere ce conŃine o întrebare. Metodă Descriere

reload() Specifică faptul că fereastra curentă este reîncărcată. replace(URL) Metoda replace are nevoie de URL ca parametru şi încarcă

documentul de la URL-ul specificat în partea de sus a documentului curent.

Exemplu În acest exemplu, am utilizat obiectul Location, care a permis reîncărcarea paginii

documentului de mai sus. <html> <head> <title>Obiectul Location</title> <style type="text/css"> body { background-color: #D7D7FF; } a.stil:link { color: #0000FF;


background-color: #AEAEFF; font-size: 16px; text-decoration: none; font-weight: bolder; height: 18px; width: 30px; } a.stil:visited { color: #0066FF; background-color: #AACCFF; font-size: 16px; text-decoration: none; font-weight: bolder; height: 18px; width: 30px; } a.stil:hover { font-size: 18px; color: #000066; background-color: #7D7DFF; text-decoration: blink; font-weight: bolder; height: 21px; width: 33px; } .as { color: #0000FF; background-color: #C6C6FF; visibility: hidden; position: absolute; left: 444px; top: 213px; width: 116px; height: 46px; font-size: 16px; font-weight: bolder; text-align: center; border: 1px groove #7171FF; } .titlul { font-size: 20px; font-weight: bolder; color: #0000FF; text-align: center; } .buton { color: #0000FF; background-color: #C6C6FF; font-size: 14px; font-weight: bolder; text-align: center; border: 1px groove #7171FF; width: 180px; }


</style> <script type="text/javascript" language="JavaScript"> var layer = new String(); var style = new String(); function VerifBrowser() { if(navigator.userAgent.indexOf("MSIE") != -1) { layer = ".all"; style = ".style"; } else if(navigator.userAgent.indexOf("Nav") != -1) { layer = ".layers"; style = ""; } } function f(strat,viz) { eval("document" + layer + "['" + strat + "']" + style + ".visibility =

'" + viz + "'"); } var imagini = new Array ("zambila_alba.jpg", "zambila_albastra.jpg",

"zambila_roz.jpg"); var nr = 0; var nrTot = imagini.length; function inapoi() { if (document.images) { if (nr > 0) nr-- else nr = nrTot-1 document.images.slides.src = imagini[nr] switch(nr) { case 0: {f('unu','visible'); f('doi','hidden'); f('trei','hidden');}break; case 1: {f('unu','hidden'); f('doi','visible'); f('trei','hidden');}break; case 2: {f('unu','hidden'); f('doi','hidden'); f('trei','visible');}break; } } } function inainte() { if (document.images){ if (nr < nrTot-1) nr++ else nr = 0 document.images.slides.src = imagini[nr] switch(nr) { case 0: {f('unu','visible'); f('doi','hidden');


f('trei','hidden'); }break; case 1: {f('unu','hidden'); f('doi','visible'); f('trei','hidden'); }break; case 2: {f('unu','hidden'); f('doi','hidden'); f('trei','visible'); }break; } } } </script> </head> <body onload="VerifBrowser()"> <div class="titlul">Zambile frumoase<br /><br /> <div class="as" id="unu"> <br />Zambilă albă </div> <div class="as" id="doi"> <br />Zambilă albastră </div> <div class="as" id="trei"> <br />Zambilă roz </div> <IMG SRC="zambila_alba.jpg" NAME="slides"> <br /><br /><br /><br /> <A HREF="javascript:inapoi()" class="stil">Inapoi</A> <A HREF="javascript:inainte()" class="stil">Inainte</A> <br /> <br /> <input type="button" value="Reincarcati pagina" onClick=

"window.location.reload()" class="buton"> </div> </body> </html>

Math

Obiectul Math este printre cele mai importante obiecte JavaScript şi permite efectuarea unor calcule matematice cu ajutorul unor proprietăŃi şi metode JavaScript. ProprietăŃi: E, LN10, LN2, LOG10E, LOG2E, PI, SQRT1_2, SQRT2. Metode: abs(), acos(), asin(), atan(), atan2(), ceil(), cos(), exp(), floor(), log(), max(), min(),

pow(), random(), round(), sin(), sqrt(), tan().

Proprietate Descriere E Reprezintă constanta lui Euler, care este aproximativ 2.7182. LN10 Este o constantă ce reprezintă logaritm natural din 10, care este

aproximativ 2.3025. LN2 Este o constantă ce reprezintă logaritm natural din 2, care este

aproximativ 0.6931. LOG10E Este o constantă ce reprezintă logaritm în baza 10 din e, care

este aproximativ 0.4342. LOG2E Este o constantă ce reprezintă logaritm în baza 2 din e, care

este aproximativ 1.4426. PI Este o constantă denumită pi ce reprezintă rezultatul împărŃirii

lungimii cercului la diametru, care este aproximativ 3.1415.. SQRT1_2 Este o constantă ce reprezintă radical pătrat din ½, care este

aproximativ 0.7071. SQRT2 Este o constantă ce reprezintă radical pătrat din 2, care este

aproximativ 1.4142.


Metodă Descriere abs() Returnează valoarea absolută dintr-un număr. acos() Returnează valoarea arccosinusului în radiani a unui număr. asin() Returnează valoarea arcsinusului în radiani a unui număr. atan() Returnează valoarea arctangentei în radiani a unui număr. atan2() Returnează o valoare numerică (cuprinsă între –pi şi pi ce

reprezintă unghiul dintre axa OX şi punctul (x,y)), ce reprezintă arctangentul unui număr.

ceil() Returnează cel mai apropiat întreg mai mare sau egal cu numărul respectiv.

cos() Returnează valoarea cosinusului unui număr, adică un număr cuprins între -1 şi 1.

exp() Returnează enumăr, unde număr este argument şi e este constanta lui Euler, baza logaritmilor naturali.

floor() Returnează cel mai mare întreg care e mai mic sau egal cu un număr dat.

log() Returnează logaritm natural (în baza e) a unui număr. max() Returnează cel mai mare număr dintre două numere date. min() Returnează cel mai mic număr dintre două numere date. pow() Returnează un număr ridicat la o putere, adică bazaexponent random() Returnează un număr aleator între zero şi unu. round() Returnează o valoare numerică rotunjită către cel mai apropiat

întreg. sin() Returnează sinusul unui număr. sqrt() Returnează o valoare numerică pozitivă ce reprezintă rădăcina

pătrată (radical) dintr-o valoare numerică. tan() Returnează tangentul unui număr.

Exemplu În acest exemplu, am utilizat obiectul Math pentru a efectua câteva calcule

matematice, cum ar fi: calcularea valorii absolute, a arccosinusului şi a arcsinusului unui număr introdus de către utilizator.

<html> <head> <title>Obiectul Math</title> <script type="text/javascript" language="JavaScript"> function Ec_abs(x) { var x document.formular.val2.value=Math.abs(x) } function Ec_acos(x)


{ var x document.formular.val4.value=Math.acos(x) } function Ec_asin(x) { var x document.formular.val6.value=Math.asin(x) } </script> </head> <body> Calcule matematice<br /> <form name="formular" method="post" action=""> abs ( <input type="text" name="val1" value="">) <input type="Button" name="ex1" value="=" onClick= "Ec_abs

(this.form.val1.value)"> <input type="text" name="val2" value=""><br /> acos(<input type="text" name="val3" value="">) <input type="Button" name="ex2" value="=" onClick= "Ec_acos

(this.form.val3.value)"> <input type="text" name="val4" value=""> <br /> asin (<input type="text" name="val5" value="">) <input type="Button" name="ex3" value="=" onClick="Ec_asin

(this.form.val5.value)"> <input type="text" name="val6" value=""> </form> </body> </html>

MimeType

Obiectul MimeType este o proprietate a obiectului navigator şi permite accesarea unor informaŃii despre tipurile MIME (Multipart Internet Mail Extension) suportate de client. ProprietăŃi: description, enabledPlugin, suffixes, type.

Proprietate Descriere description Reprezintă descrierea tipului MIME. enabledPlugin Reprezintă obiectul Plugin pentru tipul MIME. suffixes Reprezintă extensia numelui pentru tipul MIME. type Reprezintă tipul MIME.

Exemplu În acest exemplu, am utilizat browser-ul Netscape şi obiectul MimeType pentru a afişa informaŃii despre tipul MIME al computerului client.

<html> <head> <title>Obiectul MimeType</title> </head> <body> Informatii despre tipul MIME al computerului client.<br /><br />


<script type="text/javascript" language="JavaScript"> document.writeln("tip=",navigator.mimeTypes[0].type, "<br />descriere=",navigator.mimeTypes[0].description, "<br />sufix=",navigator.mimeTypes[0].suffixes, "<br />enabledPlugin=",navigator.mimeTypes[0].enabledPlugin.name); </script> </body> </html>

Navigator

Obiectul Navigator conŃine informaŃii cu privire la versiunea browser-ului pe care îl foloseşte utilizatorul. ProprietăŃi: appCodeName, appName, appVersion, language, mimeTypes, platform, plugins,

userAgent. Metode: javaEnabled(), plugins.refresh, preference, savePreference, taintEnabled.

Proprietate Descriere appCodeName Este un şir de caractere ce reprezintă numele de cod al

browser-ului. appName Este un şir de caractere ce returnează numele browser-ului. appVersion Este un şir de caractere ce returnează informaŃii cu privire la

versiunea browser-ului. language Este un şir de caractere format din două litere, ce conŃine

informaŃii cu privire la limba utilizată de browser. mimeTypes Reprezintă un array ce conŃine toate tipurile MIME suportate de

către client. platform Este un şir ce specifică tipul computerului pe care browser-ul a

fost compilat. plugins Reprezintă un array ce conŃine toate plugins instalate pe

computerul client. userAgent Este un şir ce specifică valoarea user-agent header trimis de

client către server prin protocolul HTTP.

Metodă Descriere javaEnabled() Testează dacă pe computerul client sunt sau nu permise

applet-uri Java. plugins.refresh Face să fie disponibilă instalarea celor mai noi plugins. preference Permite scripturilor să seteze preferinŃele browser-ului. savePreference Salvează preferinŃele browser-ului într-un fişier local prefs.js. taintEnabled Specifică dacă sunt permise date nesigure (posibil infectate).


Exemplu În acest exemplu, am utilizat obiectul Navigator pentru a afişa informaŃii despre permisiunile setate pe computerul client.

<html> <head> <title>Obiectul Navigator</title> <script type="text/javascript" language="JavaScript"> function informatii() { if (navigator.taintEnabled()) { alert("Browser-ul permite trecerea informatiilor nesigure."); } else alert("Browser-ul nu permite trecerea informatiilor nesigure."); } </script> </head> <body> <form name="formular" method="post" action=""> Apasand pe butonul de mai jos, aflati informatii despre permisiunile de pe

computerul dumneavoastra.<br /><br /> <input type="submit" name="Submit" value="Apasati!" onClick=

"informatii()"> </form> </body> </html>

Netscape

Obiectul Netscape este utilizat pentru a accesa clase Java din pachetul netscape.

Number Obiectul Number permite lucrul cu valori numerice.

ProprietăŃi: constructor, MAX_VALUE, MIN_VALUE, NaN, NEGATIVE_INFINITY, POSITIVE_INFINITY, prototype.

Metode: toSource(), toString(), valueOf().

Proprietate Descriere constructor Reprezintă funcŃia ce creează prototype unui obiect. MAX_VALUE Specifică cea mai mare valoare numerică reprezentabilă în

JavaScript. MIN_VALUE Specifică cea mai mică valoare numerică reprezentabilă în

JavaScript. NaN Specifică o valoare numerică ce reprezintă NaN (nici un

număr). NEGATIVE_INFINITY Specifică o valoare ce reprezintă minus infinit (-Infinity). POSITIVE_INFINITY Specifică o valoare ce reprezintă plus infinit (Infinity). prototype Specifică prototipul pentru un obiect şi permite adăugarea unor

proprietăŃi sau metode tuturor instanŃelor unei clase.

Metodă Descriere toSource() Returnează un şir de caractere ce reprezintă codul sursă al

obiectului. toString() Returnează un şir de caractere ce reprezintă obiectul Number

specificat. valueOf(). Returnează un şir de caractere ce reprezintă valoarea primitivă

a obiectului Number.


Exemplu În acest exemplu, am utilizat obiectul Number pentru a face o comparaŃie între un număr obŃinut prin împărŃirea a două numere introduse de către utilizator şi elementele MIN_VALUE, respectiv MAX_VALUE.

<html> <head> <title>Obiectul Number</title> <script type="text/javascript" language="JavaScript"> function Calcul() { y1=formular.x1.value; y2=formular.x2.value; var s=y1/y2; if (s<Number.MIN_VALUE) document.writeln(" x1 / x2 = ",s,"<br />si este mai mic decat

Number.MIN_VALUE."); else if ((s>Number.MIN_VALUE)&&(s<Number.MAX_VALUE)) document.writeln(" x1 / x2 = ",s,"<br />si este mai mare decat

Number.MIN_VALUE si mai mic decat Number.MAX_VALUE"); else document.writeln(" x1 / x2 = ",s,"<br />si este mai mare decat

Number.MAX_VALUE"); } </script></head> <body> <form name="formular"> Introduceti doua numere:<br> x1 = <input type="text" name="x1" value="" size="15"><br> x2 = <input type="text" name="x2" value="" size="15"><br> <input type="button" name="buton" value="x1 / x2"

onClick="Calcul(this.form)"> </form> </body></html>

Object

Obiectul Object este un tip de obiect primitiv, din care se obŃin toate celelalte obiecte. ProprietăŃi: constructor, prototype. Metode: eval(), toSource(), toString(), unwatch(), valueOf(), watch().

Proprietate Descriere constructor Reprezintă funcŃia ce creează prototype unui obiect şi este

moştenit de către toate obiectele. prototype Specifică prototipul pentru un obiect şi permite adăugarea unor


proprietăŃi sau metode oricărui obiect.

Metodă Descriere eval() Această metodă este utilizată pentru a evalua un şir de

caractere dintr-un cod JavaScript, în cadrul unui obiect specificat.

toSource() Poate fi utilizat pentru a crea un nou obiect. toString() Returnează un şir de caractere ce reprezintă un obiect

specificat. unwatch() Înlătură watchpoint din proprietatea obiectului, cu ajutorul

metodei watch. valueOf() Returnează o valoare primitivă a obiectului specificat. watch() Adaugă un watchpoint proprităŃii obiectului.

Exemplu În acest exemplu am creat un obiect ce reŃine diverse informaŃii despre mai multe

persoane. <html> <head> <title>Object</title> <style type="text/css"> body { font-size: 14px; color: #5B5BFF; background-color: #D2D2FF; } .titlul { font-family: “Georgia”, "Times"; color: #0000FF; font-size: 18px; text-align: center; font-weight: bolder; } </style> <script language="JavaScript" type= "text/javascript"> function DatePersonale() { x1 = "<b>Nume: </b>" + this.nume + "<br>\n"; x2 = "<b>Prenume: </b>" + this.prenume +

"<br>\n"; x3 = "<b>Telefon: </b>" + this.telefon +

"<br>\n"; x4 = "<b>Oras: </b>" + this.oras + "<br>\n"; x5 = "<b>Tara: </b>" + this.tara + "<hr>\n"; document.write(x1, x2, x3, x4, x5); } function

Structura(nume,prenume,telefon,oras,tara) { this.nume = nume; this.prenume = prenume; this.telefon = telefon; this.oras = oras; this.tara = tara;


this.DatePersonale = DatePersonale; } </script> </head> <body> <div class="titlul">Continutul

obiectului</div><br /> <br /> <script language="JavaScript" type=

"text/javascript"> chivu = new Structura("Chivu", "Ingrid",

"0212111111", "Bucuresti", "Romania"); nemtanu = new Structura("Nemtanu", "Mihaela",

"0327111111", "Pascani", "Romania"); diaconu = new Structura("Diaconu", "Inda",

"0245111111","Targoviste", "Romania"); chivu.DatePersonale(); nemtanu.DatePersonale(); diaconu.DatePersonale(); </script> </body> </html>

Option Obiectul Option este o opŃiune dintr-o listă de selecŃie.

ProprietăŃi: defaultSelected, index, length, selected, text, value.

Proprietate Descriere defaultSelected Este o valoare de tip Boolean, ce arată când o opŃiune a fost

declarată cu atributul HTML SELECTED. index Este o valoare de tip Boolean, ce arată când o opŃiune este

selectată, returnând true dacă este selectată şi false dacă nu. length Reprezintă numărul de elemente din select.options array. selected Specifică starea curentă a selecŃiei unei opŃiuni. text Specifică textul pentru opŃiune. value Specifică valoarea care este returnată către server când

opŃiunea este selectată şi este trimis formularul.

Exemplu În acest exemplu am utilizat obiectul Option pentru a afişa o listă de selecŃie ce conŃine mai multe opŃiuni. Exemplu permite dezactivarea listei de selecŃie şi reactivarea lui, înlăturarea unui element din listă şi afişarea unui element selectat din listă, într-un câmp de tip text.

<html> <head> <title> Obiectul Option </title> </head> <style type="text/css"> body { color: #006600; background-color: #E6FFE6; font-size: 18px; font-weight: bolder;


text-align: center; } .buton { color: #006600; background-color: #CAFFCA; width: 80px; } </style> <script type="text/javascript" language= "JavaScript"> function Dezactiveaza() { document.getElementById("Flori").disabled=true } function Activeaza() { document.getElementById("Flori").disabled=false } function Stergere() { var x=document.getElementById("Flori") x.remove(x.selectedIndex) } function Afisare() { var x=document.getElementById("Flori") document.formular.afis.value=

x.options[x.selectedIndex].text } </script> <body> Alegeti o floare <br /><br /> <form name="formular"> <select id="Flori"> <option>Trandafir</option> <option>Zambila</option> <option>Violeta</option> <option>Bujor</option> <option>Liliac</option> <option>Narcisa</option> <option>Lacramioara</option> </select>       <input type="text" name="afis" size="15"

class="buton"> <br /><br /> <input type="button" onclick="Dezactiveaza()"

value="Dezactivati" class="buton"><br /> <input type="button" onclick="Activeaza()"

value="Activati" class="buton"><br /> <input type="button" onclick="Stergere()"

value="Inlaturati" class="buton"><br /> <input type="button" onclick="Afisare()"

value="Afisati" class="buton"> </form> </body> </html>


Packages Obiectul Packages permite accesarea metodelor şi claselor Java din interiorul unui

cod JavaScript. ProprietăŃi: className, java, netscape, sun.

Proprietate Descriere className Reprezintă numele clasei Java din packages. java Reprezintă orice clasă din Java package java.*. netscape Reprezintă orice clasă din Java package netscape.*. sun Reprezintă orice clasă din Java package sun.*.

Password Obiectul Password reprezintă un câmp de tip password dintr-un formular HTML.

Caracterele pe care utilizatorul le introduce în acest câmp sunt ascunse prin afişarea unor

caractere sub forma unor buline •. ProprietăŃi: defaultValue, form, name, type, value. Metode: blur(), focus(), handleEvent(), select(). Evenimente: onBlur, onFocus.

Proprietate Descriere defaultValue Setează şi returnează valoarea iniŃială a câmpului password. form Aceasta este o referinŃă către formularul din care face parte

obiectul Password. name Reprezintă atributul name al obiectului Password. type Reflectă tipul oricărui obiect din formular. În cazul obiectului

Password type=”password”. value Reprezintă valoarea introdusă în câmpul password de către

utilizator.

Metodă Descriere blur() Înlătură focalizarea de pe un obiect. focus() Dă focalizare asupra unui obiect. handleEvent() Apelează handler pentru un eveniment specificat. select() Permite selectarea cu ajutorul cursorului a obiectului Password.

Eveniment Descriere onBlur AcŃiune ce va fi declanşată când se pierde focalizarea de pe o

legătură de tip hipertext. onFocus AcŃiune ce va fi declanşată de focalizarea asupra unei legături

de tip hipertext.

Exemplu În acest exemplu am utilizat obiectul Password pentru a introduce şi a verifica datele de autentificare introduse de către utilizator. Dacă utilizatorul nu introduce corect parola, apare un mesaj de atenŃioare în acest sens.

<html> <head> <title>Obiectul Password</title> <style type="text/css"> body { font-size: 18px; font-weight: bolder; color: #BF2600; background-color: #FFD5CA;


} .buton { color: #BF2600; background-color: #FFD5CA; text-align: center; } .x1 { position: absolute; height: 30px; width: 164px; left: 102px; top: 10px; } .x2 { position: absolute; height: 30px; width: 164px; left: 102px; top: 46px; } .t { font-family: Geneva, Arial, Helvetica, sans-serif; color: #BF2600; font-size: 14px; background-color: #FF8A6C; border: 1px outset #FF3300; position: absolute; height: 159px; width: 283px; left: 9px; top: 57px; } </style> <script type="text/javascript" language="JavaScript"> function Autentificare() { var utiliz=document.Aut.utiliz.value; var parola=document.Aut.parola.value; utiliz=utiliz.toLowerCase(); parola=parola; if (utiliz=="diana") if (parola=="pAROla") { window.location="diana.html"; } else alert("Nu ati introdus corect\n parola!"); else alert("Nu ati introdus corect\n numele de utilizator!"); } </script> </head> <body> <form name="Aut" method="post" > Introduceti datele de autentificare!<br />


<div class="t"> <br />  Utilizator:<br /><br /> <div class="x1"><input type=”text” name=utiliz> </div>   Parola:<br /><br /><br /> <div class="x2"><input type=”password” name=parola> </div> <br />   <input type=button value="Autentificare!" onClick="Autentificare()" class="buton"> </div> </form> </body> </html>

Plugin Obiectul Plugin este o proprietate a obiectului Navigator şi reprezintă un modul

instalat pe computerul client. ProprietăŃi: description, filename, length, name.

Proprietate Descriere description Reprezintă descrierea plug-in. filename Reprezintă numele fişierului plug-in. length Reprezintă numărul de elemente din masivul plug-in al

obiectului MimeType.

Radio Obiectul Radio este un buton individual, care face parte dintr-un grup de butoane de

tipul “radio”, cu aceleaşi nume, creat cu ajutorul etichetei <INPUT> din limbajul HTML. Din grupul de butoane cu acelaşi nume, se poate selecta unul singur. ProprietăŃi: checked, defaultChecked, form, name, type, value. Metode: blur(), click(), focus(), handleEvent(). Evenimente: onBlur, onClick, onFocus.

Proprietate Descriere checked Reprezintă o valoare individuală de tip Boolean, ce reflectă

când un buton radio a fost selectat (returnând true) sau nu (returnând false).

defaultChecked Reprezintă selectarea iniŃială a unui buton radio.


form Reprezintă formularul din care face parte grupul de butoane radio ce au acelaşi nume.

name Reprezintă atributul name al unui singur buton radio. type Reprezintă tipul butonului, în cazul nostru fiind vorba despre

“radio”. value Reprezintă valoarea care va fi trimisă de către formular, în cazul

în care a fost selectat butonul radio respectiv.

Metodă Descriere blur() Înlătură focalizarea de pe un buton radio din lista de selecŃie. click() AcŃionează asupra unui buton radio, în momentul în care se

declanşează evenimentul onClick. focus() Dă focalizare asupra unui buton radio din lista de selecŃie. handleEvent() Invocă handler pentru un eveniment specificat.


legătură de tip hipertext. onClick AcŃiune ce va fi declanşată când se dă click stânga pe mouse. onFocus AcŃiune ce va fi declanşată de focalizarea asupra unei legături

de tip hipertext.

Exemplu În acest exemplu am utilizat obiectul Radio pentru a selecta culori pentru fundalul şi textul unei pagini Web.

<html> <head> <title>Obiectul Radio</title> <style>


.titlul { font-size: 20px; font-weight: bolder; text-align: center; } .s_t { font-size: 18px; font-weight: bolder; text-align: center; } .stil1 { font-size: 14px; position: absolute; visibility: visible; height: 400px; width: 275px; left: 160px; top: 60px; } .stil11 { font-size: 14px; position: absolute; visibility: visible; height: 277px; width: 130px; left: 0px; top: 108px; } .stil12 { font-size: 14px; position: absolute; visibility: visible; height: 267px; width: 130px; left: 144px; top: 108px; } .stil2 { font-size: 14px; position: absolute; visibility: visible; height: 400px; width: 275px; left: 550px; top: 60px; } .stil21 { font-size: 14px; position: absolute; visibility: visible; height: 277px; width: 130px; left: 0px; top: 108px; } .stil22 { font-size: 14px; position: absolute; visibility: visible; height: 267px; width: 130px; left: 144px; top: 108px; } </style> <script type="text/javascript" language="JavaScript"> function CuloareF(form, CFundal)


{ var ValCuloare = " "; if (CFundal == 'aquamarine') ValCuloare = "#7FFFD4"; if (CFundal == 'azure') ValCuloare = "#F0FFFF"; if (CFundal == 'black') ValCuloare = "#000000"; if (CFundal == 'blue') ValCuloare = "#0000FF"; if (CFundal == 'brown') ValCuloare = "#A52A2A"; if (CFundal == 'chocolate') ValCuloare = "#D2691E"; if (CFundal == 'coral') ValCuloare = "#FF7F50"; if (CFundal == 'cyan') ValCuloare = "#00FFFF"; if (CFundal == 'gold') ValCuloare = "#FFD700"; if (CFundal == 'gray') ValCuloare = "#808080"; if (CFundal == 'green') ValCuloare = "#008000"; if (CFundal == 'indigo') ValCuloare = "#4B0082"; if (CFundal == 'ivory') ValCuloare = "#FFFFF0"; if (CFundal == 'khaki') ValCuloare = "#F0E68C"; if (CFundal == 'magenta') ValCuloare = "#FF00FF"; if (CFundal == 'maroon') ValCuloare = "#800000"; if (CFundal == 'navy') ValCuloare = "#000080"; if (CFundal == 'orange') ValCuloare = "#FFA500"; if (CFundal == 'pink') ValCuloare = "#FFC0CB"; if (CFundal == 'purple') ValCuloare = "#800080"; if (CFundal == 'red') ValCuloare = "#FF0000"; if (CFundal == 'royalblue') ValCuloare = "#4169E1"; if (CFundal == 'silver') ValCuloare = "#C0C0C0"; if (CFundal == 'skyblue') ValCuloare = "#87CEEB"; if (CFundal == 'snow') ValCuloare = "#FFFAFA"; if (CFundal == 'tomato') ValCuloare = "#FF6347"; if (CFundal == 'turquoise') ValCuloare = "#40E0D0"; if (CFundal == 'violet') ValCuloare = "#EE82EE"; if (CFundal == 'white') ValCuloare = "#FFFFFF"; if (CFundal == 'yellow') ValCuloare = "#FFFF00"; document.bgColor = CFundal; form.CName.value = CFundal; form.CValue.value = ValCuloare; } function CuloareT(form, CText) { var ValCuloare = " "; if (CText == 'aquamarine') ValCuloare = "#7FFFD4"; if (CText == 'azure') ValCuloare = "#F0FFFF"; if (CText == 'black') ValCuloare = "#000000"; if (CText == 'blue') ValCuloare = "#0000FF"; if (CText == 'brown') ValCuloare = "#A52A2A"; if (CText == 'chocolate') ValCuloare = "#D2691E"; if (CText == 'coral') ValCuloare = "#FF7F50"; if (CText == 'cyan') ValCuloare = "#00FFFF"; if (CText == 'gold') ValCuloare = "#FFD700"; if (CText == 'gray') ValCuloare = "#808080"; if (CText == 'green') ValCuloare = "#008000"; if (CText == 'indigo') ValCuloare = "#4B0082"; if (CText == 'ivory') ValCuloare = "#FFFFF0"; if (CText == 'khaki') ValCuloare = "#F0E68C"; if (CText == 'lime') ValCuloare = "#00FF00"; if (CText == 'magenta') ValCuloare = "#FF00FF"; if (CText == 'maroon') ValCuloare = "#800000"; if (CText == 'navy') ValCuloare = "#000080"; if (CText == 'orange') ValCuloare = "#FFA500"; if (CText == 'pink') ValCuloare = "#FFC0CB";


if (CText == 'purple') ValCuloare = "#800080"; if (CText == 'red') ValCuloare = "#FF0000"; if (CText == 'royalblue') ValCuloare = "#4169E1"; if (CText == 'silver') ValCuloare = "#C0C0C0"; if (CText == 'skyblue') ValCuloare = "#87CEEB"; if (CText == 'snow') ValCuloare = "#FFFAFA"; if (CText == 'tomato') ValCuloare = "#FF6347"; if (CText == 'turquoise') ValCuloare = "#40E0D0"; if (CText == 'violet') ValCuloare = "#EE82EE"; if (CText == 'white') ValCuloare = "#FFFFFF"; if (CText == 'yellow') ValCuloare = "#FFFF00"; document.fgColor=CText; form.TName.value = CText; form.TValue.value = ValCuloare; } </script> </head> <body> <div class="titlul">Alegeti o culoare pentru fundal!</div> <FORM name=Fundal method=post class="stil1"> <span class="s_t">Fundal</span><br /><br /> Culoarea aleasa: <INPUT size=21 value="aquamarine" name=CName> Valoarea: <INPUT size=12 value=#7FFFD4 name=CValue><br /> <div class="stil11"> <INPUT onclick="CuloareF(this.form, 'aquamarine')" type="radio"

name="Fundal">aquamarine<br /> <INPUT onclick="CuloareF(this.form, 'azure')" type="radio"

name="Fundal">azure<br /> <INPUT onclick="CuloareF(this.form, 'black')" type="radio"

name="Fundal">black<br /> <INPUT onclick="CuloareF(this.form, 'blue')" type="radio"

name="Fundal">blue<br /> <INPUT onclick="CuloareF(this.form, 'brown')" type="radio"

name="Fundal">brown<br /> <INPUT onclick="CuloareF(this.form, 'chocolate')" type="radio"

name="Fundal">chocolate<br /> <INPUT onclick="CuloareF(this.form, 'coral')" type="radio"

name="Fundal">coral<br /> <INPUT onclick="CuloareF(this.form, 'cyan')" type="radio"

name="Fundal">cyan<br /> <INPUT onclick="CuloareF(this.form, 'gold')" type="radio"

name="Fundal">gold<br /> <INPUT onclick="CuloareF(this.form, 'gray')" type="radio"

name="Fundal">gray<br /> <INPUT onclick="CuloareF(this.form, 'green')" type="radio"

name="Fundal">green <br /> <INPUT onclick="CuloareF(this.form, 'indigo')" type="radio"

name="Fundal">indigo<br /> <INPUT onclick="CuloareF(this.form, 'ivory')" type="radio"

name="Fundal">ivory<br /> <INPUT onclick="CuloareF(this.form, 'khaki')" type="radio"

name="Fundal">khaki <br /> <INPUT onclick="CuloareF(this.form, 'magenta')" type="radio"

name="Fundal">magenta<br> </div> <div class="stil12"> <INPUT onclick="CuloareF(this.form, 'maroon')" type="radio"

name="Fundal">maroon<br /> <INPUT onclick="CuloareF(this.form, 'navy')" type="radio"


name="Fundal">navy<br /> <INPUT onclick="CuloareF(this.form, 'orange')" type="radio"

name="Fundal">orange<br /> <INPUT onclick="CuloareF(this.form, 'pink')" type="radio"

name="Fundal">pink<br /> <INPUT onclick="CuloareF(this.form, 'purple')" type="radio"

name="Fundal">purple<br /> <INPUT onclick="CuloareF(this.form, 'red')" type="radio"

name="Fundal">red<br /> <INPUT onclick="CuloareF(this.form, 'royalblue')" type="radio"

name="Fundal">royalblue<br /> <INPUT onclick="CuloareF(this.form, 'silver')" type="radio"

name="Fundal">silver<br /> <INPUT onclick="CuloareF(this.form, 'skyblue')" type="radio"

name="Fundal">skyblue<br /> <INPUT onclick="CuloareF(this.form, 'snow')" type="radio"

name="Fundal">snow<br /> <INPUT onclick="CuloareF(this.form, 'tomato')" type="radio"

name="Fundal">tomato<br /> <INPUT onclick="CuloareF(this.form, 'turquoise')" type="radio"

name="Fundal">turquoise<br> <INPUT onclick="CuloareF(this.form, 'violet')" type="radio"

name="Fundal">violet<br /> <INPUT onclick="CuloareF(this.form, 'white')" type="radio"

name="Fundal">white<br /> <INPUT onclick="CuloareF(this.form, 'yellow')" type="radio"

name="Fundal">yellow </div> </FORM><br /> <FORM name=Text method=post class="stil2"> <span class="s_t">Text</span><br /><br /> Culoarea aleasa: <INPUT size=21 value="aquamarine" name=TName> Valoarea: <INPUT size=12 value=#7FFFD4 name=TValue><br /> <div class="stil21"> <INPUT onclick="CuloareT(this.form, 'aquamarine')" type="radio"

name="Text">aquamarine<br /> <INPUT onclick="CuloareT(this.form, 'azure')" type="radio"

name="Text">azure<br /> <INPUT onclick="CuloareT(this.form, 'black')" type="radio"

name="Text">black<br /> <INPUT onclick="CuloareT(this.form, 'blue')" type="radio"

name="Text">blue<br /> <INPUT onclick="CuloareT(this.form, 'brown')" type="radio"

name="Text">brown<br /> <INPUT onclick="CuloareT(this.form, 'chocolate')" type="radio"

name="Text">chocolate<br> <INPUT onclick="CuloareT(this.form, 'coral')" type="radio"

name="Text">coral<br /> <INPUT onclick="CuloareT(this.form, 'cyan')" type="radio"

name="Text">cyan<br /> <INPUT onclick="CuloareT(this.form, 'gold')" type="radio"

name="Text">gold<br /> <INPUT onclick="CuloareT(this.form, 'gray')" type="radio"

name="Text">gray<br /> <INPUT onclick="CuloareT(this.form, 'green')" type="radio"

name="Text">green <br /> <INPUT onclick="CuloareT(this.form, 'indigo')" type="radio"

name="Text">indigo<br /> <INPUT onclick="CuloareT(this.form, 'ivory')" type="radio"


name="Text">ivory<br /> <INPUT onclick="CuloareT(this.form, 'khaki')" type="radio"

name="Text">khaki <br /> <INPUT onclick="CuloareT(this.form, 'magenta')" type="radio"

name="Text">magenta<br /> </div> <div class="stil22"> <INPUT onclick="CuloareT(this.form, 'maroon')" type="radio"

name="Text">maroon<br /> <INPUT onclick="CuloareT(this.form, 'navy')" type="radio"

name="Text">navy<br /> <INPUT onclick="CuloareT(this.form, 'orange')" type="radio"

name="Text">orange<br /> <INPUT onclick="CuloareT(this.form, 'pink')" type="radio"

name="Text">pink<br /> <INPUT onclick="CuloareT(this.form, 'purple')" type="radio"

name="Text">purple<br /> <INPUT onclick="CuloareT(this.form, 'red')" type="radio"

name="Text">red<br /> <INPUT onclick="CuloareT(this.form, 'royalblue')" type="radio"

name="Text">royalblue<br /> <INPUT onclick="CuloareT(this.form, 'silver')" type="radio"

name="Text">silver<br /> <INPUT onclick="CuloareT(this.form, 'skyblue')" type="radio"

name="Text">skyblue<br /> <INPUT onclick="CuloareT(this.form, 'snow')" type="radio"

name="Text">snow<br /> <INPUT onclick="CuloareT(this.form, 'tomato')" type="radio"

name="Text">tomato<br /> <INPUT onclick="CuloareT(this.form, 'turquoise')" type="radio"

name="Text">turquoise<br /> <INPUT onclick="CuloareT(this.form, 'violet')" type="radio"

name="Text">violet<br /> <INPUT onclick="CuloareT(this.form, 'white')" type="radio"

name="Text">white<br /> <INPUT onclick="CuloareT(this.form, 'yellow')" type="radio"

name="Text">yellow </div> </FORM> </body> </html>

RegExp Obiectul RegExp conŃine structura unei expresii regulate şi este utilizat pentru a găsi

şi pentru a înlocui şiruri de caractere. ProprietăŃi: constructor, global, ignoreCase, input, lastIndex, lastMatch, lastParen, multiline,

prototype, source. Metode: compile(), exec(), test(), toSource(), toString(), valueOf().

Proprietate Descriere constructor Specifică funcŃia ce creează prototype unui obiect. global Se utilizează pentru a testa dacă un caracter se găseşte sau nu

într-un şir de caractere. ignoreCase Returnează true dacă se utilizează în cadrul unei expresii şi

false în cazul în care nu se utilizează. input Este un şir de caractere care specifică dacă un caracter se

găseşte sau nu la sfârşitul unui şir de caractere. De exemplu


/r$/ găseşte caracterul r în şirul « mar ». lastIndex Returnează un întreg care specifică poziŃia care urmează

imediat după un subşir pe care îl căutăm în cadrul unui şir de caractere dat.

lastMatch Returnează ultima potrivire a caracterelor. lastParen Returnează ultima potrivire a caracterelor care se află între

paranteze. multiline Returnează true dacă facem o căutare într-un şir cu mai multe

linii şi false dacă avem o singură linie. prototype Reprezintă prototipul pentru această clasă şi permite

adăugarea propriilor proprietăŃi şi metode tuturor obiectelor. source ConŃine codul sursă al unei expresii obişnuite.

Metodă Descriere compile() Compilează o expresie în timpul execuŃiei unui script. exec() Execută şi caută un subşir într-un şir de caractere. test() Testează dacă se găseşte un subşir într-un şir de caractere şi

returnează true sau false. toSource() Returnează un şir de caractere ce reprezintă codul sursă al

obiectului RegExp. toString() Returnează un şir de caractere ce reprezintă şirul obiectului

specificat. valueOf() Returnează un şir de caractere ce reprezintă valoarea primitivă

a obiectului RegExp.

Exemplu În acest exemplu am utilizat obiectul RegExp pentru a afişa poziŃia imediat următoare subşirului “ci” în cadrul şirul iniŃial.

<html> <head> <title>Obiectul RegExp</title> <script type="text/javascript" language= "JavaScript"> str = "unu_doi_trei_patru_cinci"; expr=/ci*/g; masiv=expr.exec(str); document.writeln("<b>Sirul initial este:</b> "+str+"<br />"); document.writeln("Subsirul <b>"+ masiv[0]+"</b> se regaseste in sirul initial la pozitia: <b>" + expr.lastIndex+"</b>"); </script> </head> <body> </body></html>

Exemplu În acest exemplu am utilizat obiectul RegExp pentru a testa dacă am utilizat g pentru

o căutare globală a caracterului “a” în şirul de caractere dat. Dacă rezultatul căutării este pozitiv, metoda global returnează true, altfel returnează false.

<html> <head> <title>Obiectul RegExp</title> <script type="text/javascript" language= "JavaScript"> expr = /a*/g;


str = "unu_doi_trei_patru_cinci"; masiv=expr.exec(str); document.writeln("<b>Sirul initial este: </b>"+str+"<br />"); if (expr.global) document.writeln("Se utilizeaza g pentru prelucrarea sirului de caractere.<br />"); else document.writeln("Nu se utilizeaza g.") </script> </head> <body> </body> </html>

Reset Obiectul Reset este un buton de tipul “reset”, creat cu ajutorul etichetei <INPUT> din

limbajul HTML. Cu acest buton, se aduc toate elementele din formular la valoarea iniŃială. ProprietăŃi: form, name, type, value. Metode: blur(), click(), focus(), handleEvent(). Evenimente: onBlur, onClick, onFocus.

Proprietate Descriere form Reprezintă formularul din care face parte butonul reset. name Reprezintă atributul name al butonului reset. type Reprezintă tipul butonului, în cazul nostru fiind vorba despre

“reset”. value Reprezintă valoarea care va fi trimisă de către formular, în cazul

în care a fost selectat butonul reset respectiv.

Metodă Descriere blur() Înlătură focalizarea de pe butonul reset. click() AcŃionează asupra butonului reset, în momentul în care se

declanşează evenimentul onClick. focus() Se focalizează asupra butonului reset. handleEvent() Invocă handler pentru un eveniment specificat.

Eveniment Descriere onBlur AcŃiune ce va fi declanşată când se pierde focalizarea de pe

butonul reset. onClick AcŃiune ce va fi declanşată când se dă click stânga de mouse

pe butonul reset. onFocus AcŃiune ce va fi declanşată de focalizarea asupra unui buton

reset.

Exemplu În acest exemplu am utilizat obiectul Reset în cadrul unui formular pentru a putea anula, dacă dorim informaŃiile scrise în formular, înainte de a le trimite.

<html> <head> <title>Obiectul Reset</title> <style> body { background-color: #D7FFD7;


color: #003300; text-align: center; } </style> <script type="text/javascript" language="JavaScript"> function Verifica() { fereastra = window.document; nume = fereastra.formular.nume.value mail = fereastra.formular.mail.value comentariu = fereastra.formular.comentariu.value fereastra.open(); fereastra.write("<html><head><title>Verificare</title><style>body{

background-color: #AAFFAA; color:#006C00; text-align: center;}</style></head><body>");

fereastra.write("Multumesc!<br /><br />"); fereastra.write("" + nume + ", verificati daca sunt corecte

informatiile! <br /><br />"); fereastra.write("<table border=0><tr><td>Nume: " + nume + "<br>E-mail: "

+ mail + "<br>Comentarii: " + comentariu + "</td></tr></table><br />");

fereastra.write("<form method=post action='mailto: enctype='text/plain'><input type=submit value=Submit></body></html>");

} </script> </head> <body> Trimiteti impresiile dumneavoastra <FORM name=formular> <table> <tr> <td> Numele: </td> <td><INPUT size=25 name="nume"></td> </tr> <tr> <td> E-mail:</td> <td><INPUT size=25 name="mail"></td> </tr> <tr> <td vAlign=center> Comentarii:</td> <td><TEXTAREA name="comentariu" rows=3 cols=25> </TEXTAREA></td> </tr> <tr align="center"> <td align=middle colSpan=2 > <INPUT type="reset" value="Reset"> <INPUT onclick=Verifica() type="button" value="Verificati"></td> </tr> </table> </FORM> </body> </html>


Screen Obiectul Screen permite ajustarea culorilor şi dimensiunii ecranului.

Metode: availHeight(), availWidth(), colorDepth(), height(), pixelDepth(), width().

Metodă Descriere availHeight() Returnează înălŃimea ecranului, în pixeli, din care se scade

dimensiunea componentelor interfeŃei sistemului de operare. availWidth() Returnează lăŃimea ecranului, în pixeli, din care se scade

dimensiunea componentelor interfeŃei sistemului de operare. colorDepth() Returnează calitatea culorilor, în bit (ex: 16 bit, 32 bit..). height() Returnează înălŃimea ecranului, în pixeli. pixelDepth() Returnează rezoluŃia culorilor ecranului, în bit / pixel. width() Returnează lăŃimea ecranului, în pixeli.

Exemplu În acest exemplu am utilizat obiectul Screen în cadrul unui formular pentru a putea

afişa câteva din proprietăŃile ecranului.


<html> <head> <title>Obiectul Screen</title> <style type="text/css"> body { font-size: 14px; color: #990000; background-color: #FFE6E6; } .titlul { font-size: 18px; font-weight: bolder; text-align: center; } </style> <script language="JavaScript"> function Proprietati(x) { switch(x) { case 1: formular.text.value=screen.width+" pixeli"; break; case 2: formular.text.value=screen.height+" pixeli"; break; case 3: formular.text.value=screen.width+"x"+ screen.height+" pixeli";

break; case 4: formular.text.value=screen.colorDepth+" bit"; break; } } </script> </head> <body> <form name="formular" method="post" action=""> <table border="0" cellspacing="1" cellpadding="1"> <tr> <td colspan="2" class="titlul">Afisati proprietatile ecranului:<br /><br

/></td> </tr> <tr> <td>Latimea ecranului:</td> <td><input type="Button" name="ex1" value="Apasati!"

onClick="Proprietati(1)" title="Dati click pentru a afisa latimea ecranului."></td>

</tr> <tr> <td>Inaltimea ecranului:</td> <td><input type="Button" name="ex2" value="Apasati!"

onClick="Proprietati(2)" title="Dati click pentru a afisa inaltimea ecranului."></td>

</tr> <tr> <td>Rezolutia ecranului:</td> <td><input type="Button" name="ex3" value="Apasati!"

onClick="Proprietati(3)" title="Dati click pentru a afisa rezolutia ecranului."></td>

</tr> <tr> <td>Paleta de culori:</td> <td><input type="Button" name="ex4" value="Apasati!"


onClick="Proprietati(4)" title="Dati click pentru a afisa paleta de culori."></td>

</tr> </table><br /> <textarea name="text" cols="25" rows="3"></textarea> </form> </body> </html>

Select Obiectul Select permite selectarea unor elemente ce se află într-o listă de selecŃie,

creată cu ajutorul etichetei <SELECT> din limbajul HTML. ProprietăŃi: form, length, name, options, selectedIndex, type. Metode: blur(), focus(), handleEvent(). Evenimente: onBlur, onChange, onFocus.

Proprietate Descriere form Reprezintă formularul din care face parte lista de selecŃie. length Reprezintă numărul de opŃiuni din lista de selecŃie. name Reprezintă atributul name al listei de selecŃie. options Reprezintă un element al unui masiv ce conŃine toate opŃiunile

listei de selecŃie şi se încadrează între etichetele <option> şi </option>.

selectedIndex Reprezintă un întreg ce corespunde elementului sau elementelor selectate dintr-o listă de selecŃie. Elementele din lista de selecŃie sunt numerotate începând de la zero (0).

type Reprezintă tipul obiectului Select, în cazul nostru fiind vorba despre “select-one”, atunci când poate fi selectat un singur element sau “select-multiple”, atunci când putem selecta mai multe elemente.

Metodă Descriere

blur() Înlătură focalizarea de pe lista de selecŃie. focus() Se focalizează asupra unui element din lista de selecŃie. handleEvent() Invocă handler pentru un eveniment specificat.


listă de selecŃie. onChange AcŃiune ce va fi declanşată la schimbarea unui element dintr-un

formular. onFocus AcŃiune ce va fi declanşată de focalizarea asupra unei liste de

selecŃie.

<html> <head> <title>Obiectul Select</title> <style type="text/css"> .titlul { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-weight: bolder; color: #006600;


background-color: #DFFFDF; text-align: center; } </style> <script type="text/javascript" language="JavaScript"> function f(i) { var s=1; var x1=formular.test1.selectedIndex; var x2=formular.test2.selectedIndex; var x3=formular.test3.selectedIndex; var x4=formular.test4.selectedIndex; var x5=formular.test5.selectedIndex; var x6=formular.test6.selectedIndex; var x7=formular.test7.selectedIndex; var x8=formular.test8.selectedIndex; var x9=formular.test9.selectedIndex; if (x1==1) s=s+1; if (x2==0) s=s+1; if (x3==1) s=s+1; if (x4==3) s=s+1; if (x5==2) s=s+1; if (x6==2) s=s+1; if (x7==0) s=s+1; if (x8==3) s=s+1; if (x9==1) s=s+1; formular.text.value=s } </script> </head> <body> <form name="formular" method="post" action="" > <table border="0" cellspacing="1" cellpadding="1"> <tr> <td colspan="2" class="titlul">Alegeti raspunsurile corecte la intrebarile de mai jos<br /> </td> </tr> <tr> <td>In interiorul caror etichete se incadreaza codul sursa JavaScript?</td> <td><select name="test1" id="s1"> <option value="o1" selected>< js >< /js ></option> <option value="o2">< script >< /script ></option> <option value="o3">< JavaScript >< /JavaScript ></option> <option value="o4">< java >< /java ></option> </select></td> </tr> <tr> <td>Unde este corect sa pozitionam codul JavaScript?</td> <td><select name="test2" id="select"> <option value="o5" selected>In sectiunile: < head > sau < body ></option> <option value="o6">In sectiunea < title ></option> <option value="o7">In sectiunea < head ></option> <option value="o8">In sectiunea < body ></option> </select></td> </tr> <tr>


<td>Operatorii unari sunt: </td> <td><select name="test3" id="select2"> <option value="o9" selected> + / %</option> <option value="o10"> + -</option> <option value="o11"> * /</option> <option value="o12"> + - %</option> </select></td> </tr> <tr> <td>Cum afisam pe ecran: "Salutari!"? </td> <td><select name="test4" id="select3"> <option value="o13" selected>writeln("Salutari!")</option> <option value="o14">document.writeln(Salutari!)</option> <option value="o15">alert("Salutari!")</option> <option value="o16">document.writeln("Salutari!")</option> </select></td> </tr> <tr> <td>Cum afisam intr-un buton alert: "Salutari!"?</td> <td><select name="test5" id="select4"> <option value="o17" selected>writeln.alert("Salutari!")</option> <option value="o18">msgBox("Salutari!")</option> <option value="o19">alert("Salutari!")</option> <option value="o20">alert.writeln("Salutari!")</option> </select></td> </tr> <tr> <td>Cum scriem: "Daca x este mai mic decat y, atunci minim=x, altfel minim=y"?</td> <td><select name="test6" id="select5"> <option value="o21" selected>if(x < y) then minim=x else minim=y</option> <option value="o22">(x < y)?minim=x:minim=y</option> <option value="o23">minim=(x < y)?x:y</option> <option value="o24">if x< y minim=x else minim=y</option> </select></td> </tr> <tr> <td>Cum apelam functia cu numele f, de parametrii x si y?</td> <td><select name="test7" id="select6"> <option value="o25" selected>f(x,y)</option> <option value="o26">f parametrii x, y</option> <option value="o27">function f(x,y)</option> <option value="o28">f(x and y)</option> </select></td> </tr> <tr> <td>Cum cream o functie cu numele f de parametri x si y?</td> <td><select name="test8" id="select7"> <option value="o29" selected>function:x,y</option> <option value="o30">function=f(x, y)</option> <option value="o31">function f(var x, var y)</option> <option value="o32">function f(x, y)</option> </select></td> </tr> <tr> <td> Care dintre urmatoarele functii evalueaza un string?</td> <td><select name="test9" id="select8">


<option value="o33" selected>String()</option> <option value="o34">eval()</option> <option value="o35">Number()</option> <option value="o36">parseFloat()</option> </select></td> </tr> <tr> <td colspan="2" class="titlul"><input name="button" type="button" onClick="f(this.form)" value="Verificati!" checked></td> </tr> <tr> <td colspan="2" align="center">Nota este: <input type="text" name="text" value="" size="10"></td> </tr> </table> </form> </div> </body> </html>

String Obiectul String reprezintă o serie de caractere dintr-un string pe care îl încadrăm între

ghilimele simple sau duble. ProprietăŃi: constructor, length, prototype. Metode: anchor(), big(), blink(), bold(), charAt(), charCodeAt(), concat(), fixed(), fontcolor(),

fontsize(), fromCharCode(), indexOf(), italics(), lastIndexOf(), link(), match(), replace(), search(), slice(), small(), split(), strike(), sub(), substr(), substring(), sup(), toLowerCase(), toSource(), toString(), toUpperCase(), valueOf().

Proprietate Descriere constructor Specifică funcŃia care creează prototype unui obiect. length Reprezintă lungimea unui şir de caractere. prototype Permite adăugarea unor proprietăŃi şi metode unui obiect.


Metodă Descriere anchor() Este utilizată pentru a crea o ancoră HTML. big() Returnează şiruri de caractere cu font mare, ca şi etichetele

<big> şi </big> din HTML. blink() Returnează şiruri de caractere care clipesc, ca şi etichetele

<blink> şi </blink> din HTML. bold() Returnează şiruri de caractere îngroşate, ca şi etichetele <b> şi

</b> din HTML. charAt() Returnează un caracter din indexul specificat. charCodeAt() Returnează un număr care indică valoarea Unicode a unui

caracter din indexul specificat. concat() Concatenează textul conŃinut în două şiruri de caractere,

returnând un alt şir de caractere. fixed() Returnează şiruri de caractere într-un format diferit, ca şi

etichetele <tt> şi </tt> din HTML. fontcolor() Afişează şiruri de caractere într-o culoare specificată, ca şi

etichetele <FONT COLOR=”culoare”> şi </FONT> din HTML. fontsize() Afişează şiruri de caractere de o dimensiune specificată, ca şi

etichetele <FONT SIZE=”dimensiune font”> şi </FONT> din HTML.

fromCharCode() Returnează un şir de caractere format în urma transformării valorilor Unicode.

indexOf() Returnează indicele primei apariŃii a unui caracter într-un şir de caractere sau -1 dacă nu este găsit caracterul respectiv.

italics() Returnează şiruri de caractere înclinate, ca şi etichetele <I> şi </I> din HTML.

lastIndexOf() Returnează indicele ultimei apariŃii a unui şir de caractere într-un şir de caractere sau 1 dacă nu este găsit şirul căutat.

link() Creează o legătură de tip hipertext către un alt URL. match() Caută o expresie într-un şir de caractere şi returnează expresia

respectivă sau “null” dacă nu este găsită. replace() Caută un subşir în cadrul unui şir. După ce acesta a fost găsit, îl

înlocuieşte cu un alt subşir. search() Caută o expresie într-un şir de caractere şi returnează poziŃia în

cadrul şirului. slice() Extrage un subşir dintr-un şir de caractere şi returnează noul

şir. small() Returnează şiruri de caractere cu fonturi mici, ca şi etichetele

<small> şi </small> din HTML. split() Împarte un şir de caractere într-un array de şiruri prin separarea

şirului iniŃial în subşiruri. strike() Returnează şiruri de caractere tăiate, ca şi etichetele <strike> şi

</strike> din HTML. sub() Returnează şiruri de caractere sub formă de indice (subscript),

ca şi etichetele <sub> şi </sub> din HTML. substr() Returnează caracterele dintr-un şir, începând dintr-un anumit

loc, până la un număr specificat de caractere. substring() Returnează caracterele dintr-un şir de caractere aflate între doi

indici transmişi ca parametri. sup() Returnează şiruri de caractere sub formă de putere

(superscript), ca şi etichetele <sup> şi </sup> din HTML. toLowerCase() Returnează şirul apelat scris cu litere mici (Lower Case).


toSource() Returnează un şir care reprezintă codul sursă al obiectului String.

toString() Returnează un şir care reprezintă obiectul specificat. toUpperCase() Returnează şirul apelat scris cu litere mari (Upper Case). valueOf() Returnează un şir de caractere ce reprezintă valoarea primitivă

a obiectului String.

Exemplu În acest exemplu am utilizat obiectul String pentru a formata un text.

<html> <head> <title>Obiectul String</title> <script type="text/javascript" language="JavaScript"> function Efect () { culoarea=" color='#0000FF'"; dimensiunea=" size='10'"; fontul="font" + culoarea+dimensiunea; text = this.toString(); start = "<" + fontul +">"; stop = "</" + fontul +">"; return start + text + stop; } String.prototype.formatare = Efect; document.write ("Text formatat.".formatare()); </script> </head> <body> <br />Text neformatat. </body> </html>

Exemplu În acest exemplu am utilizat obiectul String pentru a afişa indicele unui subşir într-un şir dat, lungimea şirului.

<html>


<head> <title>Obiectul String</title> <style type="text/css"> body { color: #663300; background-color: #FFEBD7; } .titlul { font-size: 20px; font-weight: bolder; } </style> </head> <body> <pre> <div class="titlul">Sirul dat este:</div> <script type="text/javascript" language="JavaScript"> var sir="Pierdut e totu-n zarea tineretii Si muta-i gura dulce-a altor

vremuri."; document.writeln("<I>"+sir+"</I><br /><br />"); document.writeln("Indicele primului sir <I>'ti'</I> este: "+

sir.indexOf("ti")); document.writeln("Indicele primului sir <I>'yyy'</I> este: "+

sir.indexOf("yyy")); document.writeln("Indicele ultimului sir <I>'ti'</I> este: "+

sir.lastIndexOf("ti")); document.writeln("Sirul cautat <I>'ti'</I> este pe pozitia: "+

sir.search("ti")); document.writeln("Match <I>'zti'</I> este: "+sir.match("zti")); document.writeln("Lungimea sirului este: "+sir.length); </script></pre> </body></html>

Style Obiectul Style specifică stilul elementelor HTML.

ProprietăŃi: align, backgroundColor, backgroundImage, borderBottomWidth, borderColor, borderLeftWidth, borderRightWidth, borderStyle, borderTopWidth, clear, color, display, fontFamily, fontSize, fontStyle, fontWeight, lineHeight, listStyleType, marginBottom, marginLeft, marginRight, marginTop, paddingBottom, paddingLeft, paddingRight, paddingTop, textAlign, textDecoration, textIndent, whiteSpace, width.

Metode: borderWidths(), margins(), paddings().

Proprietate Descriere align Specifică alinierea unui element în HTML. backgroundColor Specifică o culoare pentru fundalul documentului. backgroundImage Specifică imaginea pentru fundalul documentului. borderBottomWidth Specifică dimensiunea părŃii de jos a bordurii elementului

specificat. borderColor Specifică o culoare pentru bordura elementului specificat. borderLeftWidth Specifică dimensiunea părŃii din stânga a bordurii elementului

specificat. borderRightWidth Specifică dimensiunea părŃii din dreapta a bordurii elementului

specificat.


borderStyle Specifică stilul bordurii elementului specificat. borderTopWidth Specifică dimensiunea părŃii de sus a bordurii elementului

specificat. clear Specifică latura pe care nu sunt permise layer-e. color Specifică o culoare pentru textul elementului. display Specifică dacă un element va fi afişat sau nu, iar dacă va fi

afişat, care este modalitatea de afişare a lui. fontFamily Specifică fontul cu care va fi afişat şirul de caractere. fontSize Specifică dimensiunea cu care va fi afişat şirul de caractere. fontStyle Specifică stilul cu care va fi afişat şirul de caractere. fontWeight Specifică grosimea cu care va fi afişat un şir de caractere,

Ńinând cont că grosimea normală este 400 şi Bold este 700. lineHeight Specifică înălŃime liniei pe care este poziŃionat textul. listStyleType Specifică tipul listei cu care va fi formatat textul, cum ar fi: disc,

circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.

marginBottom, marginLeft, marginRight, marginTop

Specifică dimensiunea marginilor de jos, stânga, dreapta şi sus dintre bordura elementului setat şi alt element.

paddingBottom, paddingLeft, paddingRight, paddingTop

Specifică dimensiunea marginilor de jos, stânga, dreapta şi sus dintre conŃinutul elementului setat şi bordura lui (sau marginea lui, în cazul în care nu are bordură).

textAlign Specifică tipul de aliniere a şirului de caractere specificat. textDecoration Specifică adăugarea de anumite decoraŃiuni unui şir de

caractere, cum ar fi: underline (subliniat), overline (o linie deasupra textului), line-through (o linie peste text), blink (clipeşte textul) sau none. Şirul de caractere obişnuit este setat iniŃial None, iar legăturile de tip hipertext, sunt setate Underline.

textIndent Specifică valoarea cu care va fi indentată prima linie din şirul de caractere.

whiteSpace Specifică spaŃiul alb din element, dacă elementul se află între etichetele <pre> şi </pre>.

Width şi Height Specifică lăŃimea şi înălŃimea elementului respectiv.

Metodă Descriere borderWidths() Returnează dimensiunea bordurii elementului respectiv. margins() Returnează dimensiunea marginilor de jos, stânga, dreapta şi

sus dintre bordura elementului setat şi alt element. paddings() Returnează dimensiunea marginilor de jos, stânga, dreapta şi

sus dintre conŃinutul elementului setat şi bordura lui (sau marginea lui, în cazul în care nu are bordură).

Exemplu În acest exemplu am utilizat obiectul Style pentru a afişa o imagine care are în fundal

altă imagine, cu borduri de dimensiuni şi culori diferite. Ca fundal al paginii, avem un gradient de culoare de la galben la roşu.

<html> <head> <title>Obiectul Style</title> <style type="text/css"> .imagine { font-size: 20px; font-weight: bolder;


background-image: url(trandafir1.gif); border-top: 1px outset #0000FF; border-right: 3px outset #FFFF00; border-bottom: 5px outset #00CC00; border-left: 7px outset #FF0000; text-align: center; clear: left; height: 200px; width: 350px; vertical-align: middle; display: ; text-decoration: overline; margin: 1px; } .strat { background-color: #FF0000; height: 15px; width: 140px; left: 0px; top: 0px; font-size: 18px; color: #FFFF00; margin: 50px 10px; text-decoration: blink; white-space: nowrap; font-weight: bolder; font-family: Georgia, "Times New Roman", “Times”, “serif”; font-style: normal; text-align: center; display: block; list-style-type: square; text-transform: lowercase; } </style> </head> <body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='red',

startColorstr= 'yellow', gradientType='0');"> <div class="imagine"><br /><br /><br /> <img src="printesa.JPG" width="150" height="184" border="0" > <pre> <div class="strat">trandafiri rosii</div> </pre> </div> </body> </html>


Submit Obiectul Submit este un buton creat cu eticheta <INPUT type=”SUBMIT”> şi poate fi

acŃionat de către evenimentele asociate din formularul HTML care execută un anumit script specificat. ProprietăŃi: form, name, type, value. Metode: blur(), click(), focus(), handleEvent(). Evenimente: onBlur, onClick, onFocus .


form Obiectul form care include butonul de tip “submit”. name Numele butonului. type Tipul obiectului, care poate fi: Button, Submit sau Reset, în

cazul nostru: Submit. value Valoarea butonului, care apare afişată pe buton.

Metodă Descriere

blur() Înlătură focalizarea de pe butonul “Submit” specificat. click() Această funcŃie acŃionează dacă utilizatorul dă click pe butonul

“Submit” specificat dintr-un formular. focus() Se focalizează asupra butonului “Submit” specificat. handleEvent() Invocă handlerul pentru un anumit eveniment specificat.

Eveniment Descriere

onBlur Execută codul JavaScript în momentul în care se înlătură focalizarea de pe butonul “Submit”.

onClick Execută codul JavaScript în momentul în care efectuăm click de mouse pe butonul “Submit” dintr-un formular.

onFocus Execută codul JavaScript în momentul în care are loc evenimentul focus, adică atunci când o fereastră, un frame sau un frameset primeşte un focus.


Exemplu În acest exemplu, am utilizat obiectul Submit, pentru a realiza un test cu mai multe variante de răspuns corecte.

<html> <head> <title>Test</title> <style type="text/css"> body { font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #D2D2FF; } .buton


{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #0000FF; background-color: #D2D2FF; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: outset; border-right-style: outset; border-bottom-style: outset; border-left-style: outset; border-top-color: #7777FF; border-right-color: #CACAFF; border-bottom-color: #7777FF; border-left-color: #CACAFF; } .titlul { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bolder; color: #0000FF; border-bottom-width: thin; border-bottom-style: groove; border-bottom-color: #0000FF; } .test_e { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #3E3EFF; } </style> <script language="JavaScript"> var x1=0,x2=0,x3=0,x4=0,x5=0,x6=0,x7=0,x8=0,x9=0,x10=0,x11=0,x12=0,s=0; function f() { s=1; s=s+x2; if ((x5==1)&&(x8==1)) {s=s+3;} if (x10==1) {s=s+3;} alert("Total="+s); } </script> </head> <body > <p class="titlul"> Răspundeţi prin alegerea variantei<br /> sau variantelor corecte</p> <form> <p class="test_e">1. Un site Web este:</p> <p class="test_e">     <input name="checkbox" type="checkbox" onClick="x1=0" /> o mulţime de pagini Web<br />     <input name="checkbox2" type="checkbox" onClick="x2=3" />


mai multe pagini Web legate intre ele prin legături de tip hipertext sau hipermedia<br />

    <input name="checkbox2" type="checkbox" onClick="x3=0" /> mai multe pagini Web care au o temă comună<br />     <input name="checkbox2" type="checkbox" onClick="x4=0" /> mai multe pagini Web legate intre ele numai prin legături de tip

hipertext</p> <br /> <p class="test_e">2. Organizarea liniară a informaţiilor dintr-un

site presupune:</p> <p class="test_e">     <input name="checkbox2" type="checkbox" onClick="x5=1" /> scrierea lor intr-o anumită ordine stabilită de către

autor<br />     <input name="checkbox2" type="checkbox" onClick="x6=0" /> structurarea informaţiilor şi organizarea lor intr-o anumită

ordine pe niveluri sau capitole<br />     <input name="checkbox2" type="checkbox" onClick="x7=0" /> scrierea informaţiilor similar cu gandirea umană

asociativă<br />     <input name="checkbox2" type="checkbox" onClick="x8=1" /> parcurgerea informaţiilor in totalitate, de la inceput pană la

sfarşit</p> <p class="test_e">3. HTML reprezintă:</p> <p class="test_e">     <input name="checkbox3" type="checkbox" onClick="x9=0" /> un limbaj de marcare a textelor<br />     <input name="checkbox3" type="checkbox" onClick="x10=1" /> Hypertext Markup Language<br />     <input name="checkbox3" type="checkbox" onClick="x11=0" /> Hipermedia Markup Language<br />     <input name="checkbox3" type="checkbox" onClick="x12=0" /> Hypertext Markup Landscape</p> <input name="button" type="submit" onclick="f()" value="Apasati!"

class="buton"/> </form> </body> </html>

Sun Obiectul Sun este utilizat pentru a accesa clase Java din pachetul sun.

Text Obiectul Text este un câmp de tip text în care utilizatorul poate introduce date şi este

creat cu eticheta <INPUT type=”TEXT”>, care aparŃine unui formular HTML. ProprietăŃi: defaultValue, form, name, type, value. Metode: blur(), focus(), handleEvent(), select(). Evenimente: onBlur, onChange, onFocus, onSelect.


Proprietate Descriere defaultValue Setează şi returnează valoarea iniŃială a câmpului de tip text. form Obiectul form care include câmpul de tip text. name Numele butonului. type Tipul obiectului, care în cazul nostru este: Text. value Valoarea obiectului Text.

Metodă Descriere

blur() Înlătură focalizarea de pe câmpul de tip text specificat. focus() Dă focalizare asupra câmpului de tip text specificat. handleEvent() Invocă handlerul pentru un anumit eveniment specificat. select() Permite selectarea cu ajutorul cursorului a întregului şir de

caractere care a fost introdus în câmpul de tip text.


focalizarea de pe câmpul de tip text. onChange AcŃiune ce va fi declanşată la schimbarea unui element dintr-un

formular. onFocus Execută codul JavaScript în momentul în care are loc


onSelect Execută codul JavaScript în momentul în care are loc evenimentul select.

Exemplu În acest exemplu, am utilizat obiectul Text, pentru a realiza o pagină cu un buton, în

care utilizatorul scrie textul ce va fi afişat pe buton, va alege culorile pentru: fundalul şi textul paginii şi al butonului. Exemplul se poate extinde prin adăugarea mai multor culori.

<html> <head> <title>Obiectul Text</title> <style type="text/css"> body { font-family: "Georgia", "Times New Roman";


color: #003300; background-color: #C4FFC4; } .titlul { font-weight: bolder; font-size: 20px; text-align: center; } </style> <script type="text/javascript" language="JavaScript"> function f() { document.writeln("<html><head><title>buton</title></head><body text="

formular.culori1.value +" bgcolor='"+formular.culori.value+"'>Ati introdus: <input type='button' name='buton' value='"+formular.text.value+"' style='color="+formular.culori3.value+";background-color="+formular.culori2.value+"'></body></html>");

} </script> </head> <body> <form name="formular" method="post" action=""> <div class="titlul">Construiti un buton</div><br /><br /> <table border="0" cellspacing="1" cellpadding="1"> <tr> <td>Alegeti culoarea pentru fundal:</td> <td><select name="culori" > <option value="azure" selected>Albastru azur</option> <option value="red">Rosu</option> <option value="yellow">Galben</option> <option value="blue">Albastru</option> <option value="green">Verde</option> </select></td> </tr> <tr> <td>Alegeti culoarea pentru text:</td> <td><select name="culori1" > <option value="azure" selected>Albastru azur</option> <option value="red">Rosu</option> <option value="yellow">Galben</option> <option value="blue">Albastru</option> <option value="green">Verde</option> </select></td> </tr> <tr> <td>Introduceti numele butonului:</td> <td><input type="text" name="text" size="15"></td> </tr> <tr> <td>Alegeti culoarea pentru fundalul butonului:</td> <td><select name="culori2" > <option value="azure" selected>Albastru azur</option> <option value="red">Rosu</option> <option value="yellow">Galben</option> <option value="blue">Albastru</option> <option value="green">Verde</option> </select></td>


</tr> <tr> <td>Alegeti culoarea pentru textul butonului:</td> <td><select name="culori3" > <option value="azure" selected>Albastru azur</option> <option value="red">Rosu</option> <option value="yellow">Galben</option> <option value="blue">Albastru</option> <option value="green">Verde</option> </select></td> </tr> <tr bgcolor="#6CFF6C"> <td >si dati click: </td> <td><input type="submit" name="Submit" value="Click!" onClick="f()"></td> </tr> </table> <br /></p> </form> </body> </html>

Textarea Obiectul Textarea este un câmp de tip text ce poate avea mai multe linii, în care

utilizatorul poate introduce date şi este creat cu eticheta <TEXTAREA>, care aparŃine unui formular HTML. ProprietăŃi: defaultValue, form, name, type, value. Metode: blur(), focus(), handleEvent(), select(). Evenimente: onBlur, onChange, onFocus, onKeyDown, onKeyPress, onKeyUp, onSelect.


defaultValue Setează şi returnează valoarea iniŃială a câmpului de tip textarea.

form Obiectul form, care include câmpul de tip textarea. name Numele butonului. type Tipul obiectului, care în cazul nostru este: Textarea. value Valoarea obiectului Textarea.

Metodă Descriere

blur() Înlătură focalizarea de pe câmpul de tip textarea specificat. focus() Dă focalizare asupra câmpului de tip textarea specificat. handleEvent() Invocă handlerul pentru un anumit eveniment specificat. select() Permite selectarea cu ajutorul cursorului a întregului şir de

caractere care a fost introdus în câmpul de tip textarea.


focalizarea de pe câmpul de tip textarea. onChange AcŃiune ce va fi declanşată la schimbarea unui element dintr-un

formular. onFocus Execută codul JavaScript în momentul în care are loc



onKeyDown Execută codul JavaScript în momentul în care are loc evenimentul KeyDown.

onKeyPress Execută codul JavaScript în momentul în care are loc evenimentul KeyPress (se apasă o tastă).

onKeyUp Execută codul JavaScript în momentul în care are loc evenimentul KeyUp (se eliberează o tastă).

onSelect Execută codul JavaScript în momentul în care are loc evenimentul select.

<html> <head> <title>Obiectul Textarea</title> <style type="text/css"> body { font-size: 18px; color: #FF0000; background-color: #FFD5D5; text-align: center; } .vers { color: #FF0000; } </style> <script type="text/javascript" language="JavaScript"> function vector(n) { var i; this.length=n; for(i=1; i<=n; i++) { this[i]=null; }


return this } function strofe(Mpoezie) { Mpoezie.pz.value="Poezii."; Mpoezie.optiune.selectedIndex="0"; } var poezie=new vector(4); var ax1="Floare albastra\r\n\r\n- Iar te-ai cufundat in stele\r\n"; var ax2="Si in nori si-n ceruri nalte?\r\n"; var ax3="De nu m-ai uita incalte,\r\n"; var ax4="Sufletul vietii mele." ; var bx1="Singuratate\r\n\r\nCu perdelele lasate,\r\n"; var bx2="Sed la masa mea de brad,\r\n"; var bx3="Focul pilpiie in soba,\r\n"; var bx4="Iara eu pe ginduri cad." ; var cx1="Sonete\r\n\r\nAfara-i toamna, frunza-mprastiata,\r\n"; var cx2="Iar vintul zvirle-n geamuri grele picuri;\r\n"; var cx3="Si tu citesti scrisori din roase plicuri\r\n"; var cx4="Si intr-un ceas gindesti la viata toata."; poezie[0]="Selectati o poezie."; poezie[1]=ax1+ax2+ax3+ax4; poezie[2]=bx1+bx2+bx3+bx4; poezie[3]=cx1+cx2+cx3+cx4; function F(Mpoezie) { if (document.Mpoezie.optiune.selectedIndex==0) { document.Mpoezie.pz.value="Selectati o poezie."; return } var nr=document.Mpoezie.optiune.selectedIndex document.Mpoezie.pz.value=poezie[nr] } </script> </head> <body> Mihai Eminescu<br /><br /> <FORM name="Mpoezie" size="4"> <SELECT name="optiune"> <option selected>Selectati o poezie</option> <option>Floare albastra</option> <option>Singuratate</option> <option>Sonete</option> </SELECT> <br /><br /> <TEXTAREA name=pz rows=7 wrap=physical cols=45 class="vers">Poezii </TEXTAREA><br /><br /> <INPUT onclick=F(this.form) type="button" value="Afiseaza" name="Afiseaza"> <INPUT onclick=strofe(this.form) type="button" value="Curata"> </FORM> </body> </html>


Window Obiectul Window poate fi fereastra unui browser sau frame, creat cu etichetele

<body> sau <frameset> din HTML. ProprietăŃi: closed, crypto, defaultStatus, document, frames, history, innerHeight, innerWidth,

length, location, locationbar, menubar, name, offscreenBuffering, opener, outerHeight, outerWidth, pageXOffset, pageYOffset, parent, personalbar, screenX, screenY, scroolbars, self, status, statusbar, toolbar, top, window.

Metode: alert(), atob(), back(), blur(), btoa(), captureEvents(), clearInterval(), clearTimeout(), close(), confirm(), crypto.random(), crypto.signText(), disableExternalCapture(), enableExternalCapture(), find(), focus(), forward(), handleEvent(), home(), moveBy(), moveTo(), open(), print(), prompt(), releaseEvents(), resizeBy(), resieTo(), routeEvent(), scroll(), scrollBy(), scrollTo(), setHotKeys(), setInterval(), setResizable(), setTimeout(),stop().

Evenimente: onBlur, onDragDrop, onError, onFocus, onLoad, onMove, onResize, onUnload.

Proprietate Descriere closed Returnează o valoare de tip Bolean, care pentru valoarea true,

determină dacă fereastra a fost închisă, iar pentru false dacă este deschisă.

crypto Returnează browser-ului obiectul crypto, ce poate fi utilizat pentru a accesa diverse servicii criptografice, care pot proteja utilizatorii împotriva site-urilor web răuvoitoare.

defaultStatus Reprezintă mesajul care este afişat iniŃial în bara de jos a ferestrei.

document Reprezintă obiectul document conŃinut de fereastră. frames Reprezintă un array ce conŃine referinŃe către toate frame-urile

conŃinute de fereastra curentă. history ConŃine detalii despre URL-urile vizitate din fereastra

respectivă. innerHeight, innerWidth Reprezintă dimensiunile (înălŃime şi lăŃime) interioare ale unei

suprafeŃe din fereastră. length Reprezintă numărul de frame-uri conŃinute de către fereastră. location Returnează detalii cu privire la URL-ul curent al ferestrei. locationbar Returnează detalii cu privire la URL sau bookmark. menubar Returnează detalii cu privire la meniuri (File, Edit, View). name Returnează numele ferestrei. offscreenBuffering Returnează o valoare de tip boolean, care specifică momentul

când fereastra este închisă, înainte de a fi vizibilă utilizatorului. opener Returnează detalii cu privire la fereastra sursă, când este

utilizată în fereastra destinaŃie. outerHeight, outerWidth Determină dimensiunile în pixeli, ale marginilor exterioare,

incluzând toate elementele de interfaŃă ale ferestrei. pageXOffset, pageYOffset Returnează poziŃiile X şi Y ale paginii curente relativ la colŃul din

stânga al suprafeŃei afişate ale ferestrei. parent Reprezintă o referinŃă către fereastra sau frame-ul care apeleză

alte frame-uri. personalbar Reprezintă personal bar al browser-ului. screenX, screenY Specifică coordonatele ferestrei: x şi y relativ la ecranul

monitorului utilizatorului. scroolbars Reprezintă scrollbar orizontal şi vertical al browser-ului. self Reprezintă o referinŃă pentru fereastra curentă activă sau

pentru frame.


status Defineşte mesajul care poate fi afişat în status bar al browser-ului.

statusbar Reprezintă status bar al browser-ului. toolbar Returnează o valoare de tip Boolean care determină când bara

de instrumente a browser-ului este vizibilă şi când nu este. top Reprezintă o referinŃă pentru fereastra browser-ului. window Reprezintă o referinŃă pentru fereastra curentă sau pentru

frame. Metodă Descriere

alert() Afişează o fereastră de dialog cu un mesaj şi cu un buton OK. atob() Decodifică un şir de caractere ce a fost codificat utilizând baze-

64 (cu metoda btoa()). back() Încarcă documentul (URL-ul) anterior din lista History. blur() Înlătură focalizarea de pe fereastra curentă. btoa() Creează un cod ASCII base-64 dintr-un şir de caractere. captureEvents() Capturează toate evenimentele de un anumit tip. clearInterval() Anulează timpul setat cu metoda setInterval. clearTimeout() Anulează timpul setat cu metoda setTimeout. close() Închide fereastra specificată. confirm() Afişează o fereastră de dialog Confirm ce conŃine butoanele:

OK şi Cancel. crypto.random(), Returnează un şir de caractere aproximativ aleator, a cărui

lungime are un anumit număr de byte specificaŃi. crypto.signText(), Returnează un şir de caractere cu date codificate. disableExternalCapture(), enableExternalCapture(),

Dezactivează sau activează capturarea evenimentelor externe.

find() Descoperă un şir de caractere în conŃinutul unei ferestre specificate.

focus() Dă focalizare asupra ferestrei specificate. forward() Punctează browser-ul către URL-ul următor din lista History,

similar cu butonul Forward al browser-ului. handleEvent() Invocă handlerul pentru un anumit eveniment specificat. home() Punctează browser-ul către URL-ul setat de către utilizator ca

home page, similar cu butonul Home al browser-ului. moveBy() Mută fereastra cu un anumit număr de pixeli. moveTo() Mută colŃul din stânga-sus al ferestrei la numite coordonate

specificate ale ecranului. open() Deschide o nouă fereastră a browser-ului web. print() Printează conŃinutul ferestrei. prompt() Afişează o fereastră de dialog Prompt ce conŃine un mesaj şi un

câmp în care utilizatorii pot introduce date. releaseEvents() Setează fereastra sau documentul pentru a elibera

evenimentele capturate, de un anumit tip. resizeBy() Redimensionează fereastra mutând colŃul din dreapta la o

anumită poziŃie specificată, în pixeli. resieTo() Redimensionează fereastra la o anumită dimensiune

specificată, în pixeli. routeEvent() Trimite un eveniment capturat de-a lungul ierarhiei obişnuite a

evenimentelor. scroll() Permite utilizarea scroll într-o fereastră, la anumite coordonate

specificate.


scrollBy() Permite utilizarea scroll într-o anumită suprafaŃă specificată dintr-o fereastră.

scrollTo() Permite utilizarea scroll într-o fereastră, între anumite coordonate specificate.

setHotKeys() Activează sau dezactivează anumite taste dintr-o fereastră care nu are meniuri.

setInterval() Evaluează o expresie sau apelează o funcŃie la anumite intervale specificate, în milisecunde.

setResizable() Specifică momentul în care unui utilizator i se permite să redimensioneze o fereastră.

setTimeout() Evaluează o expresie sau apelează o funcŃie după un anumit număr de milisecunde specificat.

stop() Permite oprirea acŃiunii de download curente, similar cu butonul Stop al browser-ului.

Eveniment Descriere

onBlur Execută codul JavaScript în momentul în care se înlătură focalizarea de pe fereastra specificată.

onDragDrop Execută codul JavaScript în momentul în care are loc evenimentul DragDrop.

onError Execută codul JavaScript în momentul în care are loc evenimentul Error, adică în urma eşecului încărcării unei ferestre.

onFocus Execută codul JavaScript în momentul în care are loc evenimentul focus, adică atunci când o fereastră primeşte un focus.

onLoad Execută codul JavaScript în momentul în care are loc evenimentul Load, adică la încărcarea unei ferestre.

onMove Execută codul JavaScript în momentul în care are loc evenimentul Move, adică la mişcarea cursorului pe suprafaŃa ferestrei specificate.

onResize Execută codul JavaScript în momentul în care are loc evenimentul Resize, adică la redimensionarea ferestrei specificate.

onUnload Execută codul JavaScript în momentul în care are loc evenimentul Unload, adică atunci când o fereastră nu se încarcă.

Exemplu În acest exemplu, am utilizat obiectul Window, pentru a afişa o ferestră cu

dimensiunile alese de către utilizator.

<html>


<head> <title>Textarea</title> <style type="text/css"> body { color: #990000; background-color: #FFD2D2; } .stil1 { background-color: #FF9D9D; text-align: center; font-size: 19px; font-weight: bolder; } </style> <script type="text/javascript" language="JavaScript"> function f(stanga, sus, latime, inaltime) { var fereastra="location=no,scrollbars=yes,menubars=yes,toolbars=no,

resizable=yes"+",left="+ stanga + ",top=" + sus + ",width=" + latime + ", height=" + inaltime;

var URL = "http://www.manuscris.html"; popup = window.open(URL,"Meniu",fereastra); } </script> </head> <body> <FORM name="formular"> <table> <tr> <td colspan="2" class="stil1"> Stabiliti dimensiunile si pozitia unei ferestre<br /><br /></td> </tr> <tr> <td>Distanta de la coltul din stanga: </td> <td><input type="text" maxLength=4 size=4 name="stanga"> pixeli</td> </tr> <tr> <td>Distanta de la coltul de sus: </td> <td><input type="text" maxLength=4 size=4 name="sus"> pixeli</td> </tr> <tr> <td>Latimea ferestrei:</td> <td><input type="text" maxLength=4 size=4 name="latime"> pixeli</td> </tr> <tr> <td>Inaltimea ferestrei: </td> <td><input type="text" maxLength=4 size=4 name="inaltime"> pixeli</td> </tr> <tr> <td colspan="2" class="stil1"><INPUT onclick="f(this.form.stanga.value, this.form.sus.value, this.form.latime.value, this.form.inaltime.value)" type="button" value="Apasati!"></td> </tr> </table> </FORM> </body> </html>


Evaluare

5. EnumeraŃi şi descrieŃi trei dintre cele mai importante obiecte JavaScript. 6. Care expresie returnează numărul de elemente ale masivului anotimpuri, de mai jos?

var anotimpuri = new Array() anotimpuri[0] = "Primavara" anotimpuri[1] = "Vara" anotimpuri[2] = "Toamna" anotimpuri[3] = "Iarna" a) anotimpri.length; b) element.anotimpuri.array; c) anotimpuri[3]; d) constructor.anotimpuri;

7. Care dintre următoarele metode returnează ziua dintr-o dată specificată, conform timpului local: a) getDay(); b) getDate(); c) getTime(); d) getUTCDate;


Bibliografie

1. Diana Elena Diaconu, Cristian Morărescu, JavaScript prin exemple, Editura Printech, 2005

2. Marin Vlada, Informatică: Windows, Word, Excel, Internet, Editura UniversităŃii din Bucureşti, 2000

3. Marin Vlada, Birotică. Tehnologii multimedia, Editura UniversităŃii din Bucureşti, 2004

4. Emanuela Cerchez, Internet, Editura Polirom, 2000 5. Tudor Sorin, Vlad HuŃanu, Tehnologia informaŃiei şi a comunicaŃiilor,

Editura L&S Infomat, 2004 6. Dan Somnea, IniŃiere în JavaScript şi tehnologiile Netscape, Editura

Tehnică, 1998 7. Richard Wagner, R. Allen Wyke, JavaScript, Editura Teora, 2001 8. Tom Negrino, Dori Smith, JavaScript pentru World Wide Web, Editura

Corint, 2004 9. Hakon Wium Lie, Bert Bos, Cascading Style Sheets, United States of

America, Editura Addison-Wesley, 1999 10. Tom Negrino, Dori Smith, JavaScript pentru World Wide Web, Editura

Corint, 2004 11. Jim Keogh, JavaScript fără mistere. Ghid pentru autodidacŃi, Editura

Rosetti EducaŃional, 2006 12. Calin Marin Văduva. Programarea în Java, Editura Albastră, 2002 13. Teodoru Gugoiu, HTML, XHTML, CSS şi XML prin Exemple. Ghid practic,

Editura Teora, 2005 14. Sabin Burada, Proiectarea siturilor Web. Design şi funcŃionalitate, Editura

Polirom, 2002 15. Ştefan Tanasă, Cristian Olaru, Dezvoltarea aplicaŃiilor Web folosind

Java, Editura Polirom, 2005 16. Mihaela Brut, Instrumente pentru e-Learning. Ghidul informatic al

profesorului modern, Editura Polirom, 2006


Resurse Web

1. Denumire organizatie/resursa - http://www.darpa.mil 2. ISOC, The Internet Society (ISOC) - http://www.isoc.org 3. http://www.ietf.org 4. http://w3c.org 5. http://docs.sun.com/app/docs 6. http://javascript.internet.com/ 7. http://www.htmlgoodies.com/ 8. http://www.w3schools.com


Glosar

Download – reprezintă procesul prin care un fişier este transferat la distanŃă de pe un computer pe computerul client.

MIME – Multipurpose Internet Mail Extensions Pagină Web – un singur document Web. O pagină Web este tot ceea ce se afişează în

fereastra unui browser la un moment dat, inclusiv ceea ce se vede dacă utilizăm scroll.

URL – Uniform Resource Locator este o adresă Web. Ea este compusă din patru părŃi: numele protocolului (Ex: HTTP, scriem http://), locaŃia site-ului (Ex: WWW), numele organizaŃiei care Ńine site-ul (Ex: google), sufixul care identifică tipul organizaŃiei (Ex: .com). Pentru exemplul dat, introducem adresa: http://www.google.com

Web Browser – un program ce rulează pe computerul utilizatorului şi permite vizualizarea paginilor Web.

Web Server – un computer ce stochează mai multe pagini Web pe care le trimite clienŃilor care le cer. De exemplu, un Web Browser face o cerere către un Web Server pentru a afişa utilizatorului o pagină Web care este stocată în Web Server.

Web Site – un set de pagini Web legate între ele prin legături de tip hipertext sau hipermedia. De regulă, paginile Web dintr-un site Web au aceeaşi structură şi aspect asemănător.

Cuprins

Introducere...................................................................................................................... Capitolul 1 Internet............................................................................................................................. 1.1. Scurt istoric ………………………………………………………………………... ......... 1.2. ReŃea de calculatoare ……………………………………………………………........... 1.3. Ce este Internetul ………………………………………………………………….......... Evaluare.......................................................................................................................... Capitolul 2 W.W.W……………………………………………………...................................................... 2.1. World Wide Web ……………….…………………………………………………………. 2.2. Cum funcŃionează paginile Web …………………………………………………………. 2.3. Construirea site-urilor Web……………………………………………………………….. Evaluare.............................................................................................................................

2 3 3 4 5 6 7 7 8 9 9


Capitolul 3 HTML................................................................................................................................. 3.1. Introducere………………………………………………………………………………..... 3.2. Cum se realizează o pagină Web cu HTML…………………………………………..... 3.3. Elementul Meta…………………………………………………………………………...... 3.4. Culori………………………………………………………………………………………… 3.5. Elementul BODY………………………………………………………………………....... 3.6. Formatarea textelor………………………………………………………………………… 3.7. Formatarea paragrafelor………………………………………………………………...... 3.8. Preformatarea textului…………………………………………………………………...... 3.9. Liste……………………………………………………………………………………......... 3.10. Tabele……………………………………………………………………………………... 3.11. Legături HTML…………………………………………………………………………..... 3.12. Cadre HTML…………………………………………………………………………….... 3.13. Formulare HTML………………………………………………………………………….

3.13.1. Elementul form……………………………………………………………………… 3.13.2. Elementul input…………………………………………………………………….. 3.13.3. Elementul textarea…………………………………………………………………. 3.13.4. Elementul label……………………………………………………………………… 3.13.5. Elementul fieldset…………………………………………………………………... 3.13.6. Elementul legend…………………………………………………………………… 3.13.7. Elementul select……………………………………………………………………. 3.13.8. Elementul optgroup………………………………………………………………… 3.13.9. Elementul option……………………………………………………………………. 3.13.10. Elementul button…………………………………………………………………..

3.14. Imagini HTML…………………………………………………………………………….. 3.14.1. Elementul img………………………………………………………………………. 3.14.2. Elementul map……………………………………………………………………… 3.14.3. Elementul area………………………………………………………………………

3.15. Fundal HTML……………………………………………………………………………… 3.16. Fonturi HTML……………………………………………………………………………… 3.17. Trucuri cu HTML………………………………………………………………………….. Evaluare............................................................................................................................

10 10 11 12 13 13 14 16 16 17 19 21 23 25 25 26 27 27 27 28 28 29 29 29 30 30 31 31 32 34 35 35

Capitolul 4 CSS 4.1. Cascading Style Sheet……………………………………………………………………

4.1.1. Elementul style……………………………………………………………………… 4.1.2. Elementul link………………………………………………………………………. 4.1.3. Elementul div……………………………………………………………………….. 4.1.4. Elementul span…………………………………………………………………….. 4.1.5. Elementul font………………………………………………………………………. 4.1.6. Elementul basefont…………………………………………………………………. 4.1.7. Elementul center…………………………………………………………………….

4.2. Atribute CSS……………………………………………………………………………… 4.3. AplicaŃii interesante cu CSS……………………………………………………………. Evaluare........................................................................................................................... Capitolul 5 JavaScript 5.1. Introducere………………………………………………………………………………..

36 37 40 41 41 42 42 43 44 46 49

50 50


5.2. Unde scriem script-urile JavaScript……………………………………………………. 5.3. Operatori JavaScript

5.3.1. Operatori aritmetici……………………………………………………………….... 5.3.2. Operatori de incrementare / decrementare…………………………………....... 5.3.3. Operatori de comparaŃie…………………………………………………………... 5.3.4. Operatori logici (booleeni)……………………………………………………….... 5.3.5. Operatori logici pe biŃi (bitwise)........................................................................ 5.3.6. Operator pentru şiruri de caractere (string)...................................................... 5.3.7. Operatori de atribuire....................................................................................... 5.3.8. Operatorul condiŃional...................................................................................... 5.3.9. Operatorul typeof............................................................................................. Evaluare…………………………………………………………………………………….

5.4. InstrucŃiuni................................................................................................................ 5.4.1. InstrucŃiuni primitive......................................................................................... 5.4.2. InstrucŃiuni de decizie....................................................................................... 5.4.3. InstrucŃiuni repetitive........................................................................................

Evaluare.......................................................................................................................... Capitolul 6 FuncŃii JavaScript 6.1. Introducere……………………………………………………………………………….. 6.2. Definirea funcŃiilor……………………………………………………………………….. 6.3. Apelarea funcŃiilor................................................................................................... 6.4. Parametrii funcŃiilor................................................................................................. 6.5. FuncŃii predefinite................................................................................................... 6.6. FuncŃii şi stiluri........................................................................................................ Evaluare......................................................................................................................... Capitolul 7 Evenimente JavaScript 7.1. Introducere……………………………………………………………………………….. 7.2. Evenimente şi tratarea evenimentelor…………………………………………………. 7.3. Tratarea evenimentelor – clasificare…………………………………………………….

7.3.1. Tratarea evenimentelor de către sistem (onError, onLoad, onUnload) 7.3.2. Tratarea evenimentelor de către un formular (onBlur, onChange, onFocus,

onReset, onSelect, onSubmit) ....................................................................... 7.3.3. Tratarea evenimentelor de către tastatură (onKeyDown, onKeyPress,

onKeyUp)...................................................................................................... 7.3.4. Tratarea evenimentelor de către mouse (onClick, onDblClick,

onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp). 7.4. AplicaŃii cu evenimente (sortare tabel, formular numai cu cifre, contorizare

caractere, formular de calcul instantaneu ) ...................................………………… Evaluare………………………………………………………………………………………… Capitolul 8 Obiecte JavaScript 8.1. Introducere………………………………………………………………………………….

Anchor……………………………………………………………………………………… Applet………………………………………………………………………………………. Area………………………………………………………………………………………… Array……………………………………………………………………………………….. Boolean……………………………………………………………………………………. Button………………………………………………………………………………………

51 52 52 52 53 54 56 58 59 60 60 61 61 61 63 67 73

75 75 75 76 78 80 87 93

94 94 94 94 95

98

111

115

132

133 133 138 138 140 143 144


Checkbox………………………………………………………………………………….. Date………………………………………………………………………………………… Document…………………………………………………………………………………. Event………………………………………………………………………………………. FileUpload………………………………………………………………………………… Form………………………………………………………………………………………. Frame……………………………………………………………………………………… Function…………………………………………………………………………………… Hidden…………………………………………………………………………………….. History……………………………………………………………………………………… Image……………………………………………………………………………………… Java………………………………………………………………………………………… JavaArray………………………………………………………………………………….. JavaClass…………………………………………………………………………………. JavaObject………………………………………………………………………………… JavaPackage……………………………………………………………………………… Layer……………………………………………………………………………………….. Link………………………………………………………………………………………… Location…………………………………………………………………………………… Math………………………………………………………………………………………... MimeType…………………………………………………………………………………. Navigator………………………………………………………………………………….. Netscape………………………………………………………………………………….. Number……………………………………………………………………………………. Object……………………………………………………………………………………… Option……………………………………………………………………………………… Packages………………………………………………………………………………….. Password………………………………………………………………………………….. Plugin………………………………………………………………………………………. Radio………………………………………………………………………………………. RegExp……………………………………………………………………………………. Reset………………………………………………………………………………………. Screen…………………………………………………………………………………….. Select……………………………………………………………………………………… String………………………………………………………………………………………. Style………………………………………………………………………………………... Submit……………………………………………………………………………………… Sun…………………………………………………………………………………………. Text………………………………………………………………………………………… Textarea…………………………………………………………………………………… Window…………………………………………………………………………………….

Evaluare……………………………………………………………………………………….. Bibliografie……………………………………………………………………………………… Resurse web…………………………………………………………………………………… Glosar…………………………………………………………………………………………… Cuprins…………………………………………………………………………………………..

145 148 153 155 162 164 168 170 171 172 174 176 176 176 176 176 176 183 186 190 192 193 194 194 195 197 199 199 201 201 207 209 211 213 216 219 222 225 225 228 231 235

236 237 238 239

Date post:	06-Feb-2020
Category:	Documents
Upload:	others
View:	73 times
Download:	0 times

Evenimente JavaScriptcontează dacă se scrie cu litere mari (ONCLICK), cu litere mici (onclick) sau...

Documents