Limbajul JavaScript

JavaScript - Noțiuni de bază

JavaScript a fost dezvoltat prima dată de către firma Netscape, cu numele de Live Script, un limbaj de script care extindea capacitățile HTML, oferă o alternativă parțială la utilizarea unui număr mare de scripturi CGI pentru prelucrarea informaţiilor din formulare și care adaugă dinamism în paginile web. După lansarea limbajului Java, Netscape a început să lucreze cu firma Sun, cu scopul de a crea un limbaj de script cu o sintaxă și semantică asemanatoare cu a limbajului Java, și din motive de marketing numele noului limbaj de script a fost schimbat în "JavaScript". JavaScript a apărut din nevoia ca logica și inteligența să fie și pe partea de client, nu doar pe partea de server. Dacă toată logica este pe partea de server, întreaga prelucrare este facută la server, chiar și pentru lucruri simple, asa cum este validarea datelor. Astfel, JavaScript îl înzestrează pe client și face ca relația să fie un adevarat sistem client-server. Limbajul HTML oferă autorilor de pagini Web o anumită flexibilitate, dar statică. Documentele HTML nu pot interacționa cu utilizatorul în alt mod mai dinamic, decât pune la dispoziția acestuia legături la alte resurse (URL-uri). Crearea de CGI-uri (Common Graphics Interface) - [programe care ruleaza pe serverul Web și care accepta informatii primite din pagina de web și returneaza cod HTML] - a dus la îmbogăţirea posibilităţilor de lucru. Astfel, un pas important spre interactivizare a fost realizat JavaScript, care permite inserarea în paginile web a script-urilor care se executa în cadrul paginii web, mai exact în cadrul browser-ului utilizatorului, usurand astfel și traficul dîntre server și client. De exemplu, într-o pagina pentru colectarea de date de la utilizator se pot adauga scripturi JavaScript pentru a valida corectitudinea introducerii și apoi pentru a trimite serverului doar date corecte spre procesare. JavaScript conține o listă destul de amplă de funcții și comenzi menite să ajute la operaţii matematice, manipulări de şiruri, sunete, imagini, obiecte și ferestre ale browser-ului, link-urile URL și verificari de introduceri ale datelor în formulare. Codul necesar acestor actiuni poate fi inserat în pagina web și executat pe calculatorul vizitatorului. După lansarea sa, în decembrie 1995, JavaScript și-a atras sprijinul principalilor distribuitori din domeniu, cum sunt Apple, Borland, Informix, Oracle, Sybase, HP sau IBM. S-a dezvoltat în continuare, obtinand recunoastere majoritatii browserelor. Intelegand importanta scripting-ului web, Microsoft s-a dorit sa ofere suport și pentru JavaScript. Netscape a preferat să acorde licența de tehnologie companiei Microsoft în loc sa o vinda, astfel Microsoft a analizat JavaScript, și bazandu-se pe documentatia publica a creat propria sa implementare, "Jscript", care este recunoscuta de Microsoft Internet Explorer. Jscript 1.0 este aproximativ compatibil cu JavaScript 1.1, care este recunoscut de Netscape Navigator. Totusi, versiunile ulterioare de JavaScript și diversele diferente specifice platformelor de operare au inceput sa dea destule probleme programatorilor web și astfel Netscape, Microsoft și alti distribuitori au fost de acord sa predea limbajul unei organizații internaționale de standardizare - ECMA ; aceasta a finalizat o specificatie de limbaj, cunoscuta ca ECMAScript, recunoscuta de toti distribuitorii. Deși standardul ECMA este util, atit Netscape cat și Microsoft au propriile lor implementari ale limbajului și continua sa extinda limbajul dincolo de standardul de baza. Pe lângă Jscript, Microsoft a introdus și un concurent pentru JavaScript, numit VBScript, realizat pentru a usura patrunderea pe web a programatorilor VB. VBScript este un subset al limbajului Visual Basic. Cu toate acestea JavaScript a devenit cunoscut ca limbajul de scripting standard pentru web. În general se consideră că există zece aspecte fundamentale ale limbajului JavaScript pe care orice programator în acest limbaj ar trebui să le cunoască :

JavaScript poate fi introdus în HTML - De obicei codul JavaScript este gazduit în documentele HTML și executat în interiorul lor. Majoritatea obiectelor JavaScript au etichete HTML pe care le reprezintă, astfel încât programul este inclus pe partea de client a limbajului. JavaScript foloseste HTML pentru a intra în cadrul de lucru al aplicațiilor pentru web.
JavaScript este dependent de mediu - JavaScript este un limbaj de scriptare; software-ul care ruleaza de fapt programul este browser-ul web (Firefox, Opera, Netscape Navigator, Internet Explorer, Safari, etc.) Este important să luăm în considerare această dependență de browser atunci când utilizăm aplicații JavaScript.
JavaScript este un limbaj în totalitate interpretat - codul scriptului va fi interpretat de browser înainte de a fi executat. JavaScript nu necesită compilări sau preprocesări, ci rămane parte integranta a documentului HTML. Dezavantajul acestui limbaj este că rularea durează ceva mai mult deoarece comenzile JavaScript vor fi citite de navigatorul Web și procesate atunci când user-ul apelează la acele funcții (prin completare de formulare, apăsare de butoane, etc). Avantajul principal este faptul că putem mult mai ușor să actualizăm codul sursă.
JavaScript este un limbaj flexibil - în aceasta privință limbajul diferă radical de C++ sau Java. În JavaScript putem declara o variabilă de un anumit tip, sau putem lucra cu o variabilă deși nu-i cunoaștem tipul specificat înainte de rulare.
JavaScript este bazat pe obiecte - JavaScript nu este un limbaj de programare orientat obiect, ca Java, ci mai corect, este "bazat pe obiecte"; modelul de obiect JavaScript este bazat pe instanță și nu pe moștenire.
JavaScript este condus de evenimente - mare parte a codului JavaScript răspunde la evenimente generate de utilizator sau de sistem. Obiectele HTML, cum ar fi butoanele, sunt îmbunătățite pentru a accepta handlere de evenimente.
JavaScript nu este Java - Cele doua limbaje au fost create de companii diferite, motivul denumirii asemănătoare este legat doar de marketing.
JavaScript este multifuncțional - limbajul poate fi folosit într-o multitudine de contexte pentru a rezolva diferite probleme: grafice, matematice, și altele.
JavaScript evoluează - limbajul evoluează, fapt pozitiv care însă poate genera și probleme, programatorii trebuind să verifice permanent ce versiune să folosească pentru ca aplicațiile să poată fi disponibile unui numar cât mai mare de utilizatori de browsere diferite.
JavaScript acoperă contexte diverse - programarea cu acest limbaj este îndreptată mai ales către partea de client, dar putem folosi JavaScript și pentru partea de Server. JavaScript este limbajul nativ pentru unele instrumente de dezvoltare web, ca Borland IntraBuilder sau Macromedia Dreamweaver.

Inserarea scripturilor JavaScript

Pentru a insera cod JavaScript într-un document HTML, folosim tagul <script> şi respectiv </script>. Deci tagurile <script> şi </script> marchează locul în care începe, respectiv se sfîrşeşte scriptul.

Obs: În exemplele vechi se utiliza atributul type pentru a defini limbajul în care este scris scriptul. Atributul type nu este necesar, JavaScript este limbajul de scripting implicit în HTML.

Pentru inserarea script-urilor în documente HTML pot fi folosite cele 4 metode prezentate mai jos:

Metoda 1 – plasarea script-ului în antet-ul paginii (între <head> şi </head>);
Metoda 2 – plasarea script-ului în corpul paginii (între <body> şi </body>);
Metoda 3 – utilizarea fişierelor sursă externe;
Metoda 4 – crearea unui gestionar de evenimente.

Scripturi în antetul paginii

Scripturile care trebuie executate cînd sunt apelate sau cînd are loc un eveniment, trebuie scrise în secţiunea head. În acest fel, scriptul va fi sigur încărcat înainte de a fi utilizat.

Scripturi în corpul paginii

Scripturile care trebuie executate cînd pagina se incarcă trebuie scrise în secţiunea body şi vor genera conţinutul paginii.

Exemplu

Scripturi în fişier extern

Dacă dorim să utilizăm acelaşi script în mai multe pagini web fără a rescrie codul, trebuie să scriem scriptul JavaScript într-un fişier extern. Fişierul trebuie să aibă extensia .js şi nu poate conţine tagul <script>. Pentru a utiliza fişierul extern, indicăm numele fişierului în atributul src al tagului <script>.

Exemplu

Conţinutul fişierului functie.js

Crearea unui gestionar de evenimente

Nu este obligatoriu ca toate script-urile JavaScript să se găsească în interiorul tag-urilor <script> ... </script>. Puteţi apela, de asemenea la script-uri sub forma gestionarilor de evenimente, care indică navigatorului cum să reacţioneze atunci când se produc anumite evenimente.

În exemplu de mai jos s-a creat un script care afişează un mesaj cu ajutorul gestionarului de evenimente onClick.

Exemplu

Browsere care nu recunosc JavaScript

Dacă browserul nu recunoaşte JS, liniile de cod vor fi afişate ca atare în pagină. Pentru a evita acest lucru, scriptul ar trebui „ascuns” în taguri de comentariu. În exemplul următor, scriptul este scris între tagurile de comentariu

Ultimele două caractere // reprezintă simbolul JS pentru comentariu şi sunt scrise pentru a impiedica JS să execute tagul -->.

Afişarea datelor în JavaScript

În limbajul JavaScript datele pot fi afişate în 4 moduri diferite:

Afișarea în fereastra de alertare, folosind window.alert ().
Afișarea în documentul HTML folosind document.write ().
Afișarea într-un element HTML, folosind innerHTML.
Afișarea în consola browser-lui, folosind console.log ().

Utilizarea window.alert ()

Putem folosi o fereastră de alertare pentru a afișa date.

Exemplu

Utilizarea document.write ()

Pentru testare se recomandă de folosit metoda document.write ().

Exemplu

Utilizarea metodei document.write () după ce este complet încărcat un document HTML, șterge toate elementele HTML existente:

Exemplu

Obs: document.write () este o metodă ce ar trebui să fie folosită numai pentru testare.

Utilizarea innerHTML

Pentru a accesa un element HTML, JavaScript poate utiliza metoda document.getElementById (id). Atributul id definește elementul HTML. Proprietatea innerHTML definește conținutul HTML:

Exemplu

Utilizarea console.log ()

În browser-ul dvs., puteți utiliza metoda console.log () pentru a afișa date. Activați consola browserului cu F12, și selectați "Console" din meniu.

Exemplu

Comentarii JavaScript

Comentariile pot fi adăugate pentru a explica codul sau a-l face mai uşor de citit. Comentariile care se scriu pe o singură linie încep cu //.

În exemplul următor, comentariile tip linie sunt folosite pentru a explica codul:

Comentarii multi-linie

Aceste comentarii încep cu /* şi se încheie cu */, ca în exemplul următor:

Folosirea comentariilor pentru a preveni execuţia

În exemplul următor, comentariul este utilizat pentru a impiedica executarea unei linii de cod (metoda poate fi utilizată pentru a depăna codul):

În exemplul următor, comentariul este utilizat pentru a impiedica execuţia unui bloc de cod (util pentru depănarea codului):

În exemplul următor, comentariul este plasat la sfîrşitul liniei de cod:

Tipuri de date JavaScript

În JavaScript există 5 tipuri de date diferite care pot conține valori:

Number
String
Boolean
Object
Function

Exista 3 tipuri de obiecte:

Object
Date
Array

Şi 2 tipuri de date care nu pot conține valori:

Null
Undefened

Date numerice

Limbajul JavaScript permite specificarea datelor numerice în patru formate diferite: întreg, virgulă flotană, octal şi hexazecimal.

Prin definiţie, numerele în octal şi în hexazecimal sunt numere întregi care sunt exprimate într-un sistem de numeraţie cu baza 8, respectiv baza 16. În JavaScript un număr întreg octal este precedat de zero iar un număr hexazecimal este precedat de caracterele ”0x” sau ”0X”.

Observaţii:

JavaScript recunoaşte numerele întregi (în baza 10, pozitive sau negative) cuprinse între: +/–1.7976931348623157 E 308 şi +/–5 E – 324.
Un număr întreg hexazecimal (hexadecimal, în limba engleză) începe în mod obligatoriu cu 0X sau 0x şi este compus din următoarele simboluri: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Putem utiliza majuscule sau minuscule.
Un număr întreg octal începe obligatoriu cu 0 (zero) şi este compus din următoarele simboluri:0, 1, 2, 3, 4, 5, 6, 7
Un număr în virgulă flotantă este în baza 10. El poate fi pozitiv sau negativ şi poate conţine zecimale. El poate de asemenea include un exponent pozitiv sau negativ, prin E. Separatorul zecimal este întotdeauna punctul. JavaScript recunoaşte numerele cuprinse între: +/–1.7976931348623157 E 308 şi +/–5 E –324.

Şir de caractere

Un şir de caractere (string, în limba engleză) este compus din litere, cifre, simboluri, caractere speciale şi secvenţe de ieşire. Conţinutul unui şir de caractere este considerat tot timpul ca fiind text, chiar dacă el constă din cifre şi simboluri numerice. Un şir de caractere este încadrat de ghilimele simple sau duble. Un şir de caractere încadrat de ghilimele duble poate fi inclus într-un şir încadrat de ghilimele simple şi vice versa.

Valori logice sau booleene

Ele sunt în număr de două: true (adevărat) şi false (fals). Cele două valori se folosesc pentru a indica dacă rezultatul evaluării unei condiţii este adevărat sau nu.

Variabile JavaScript

De obicei, limbajele de programare cer să definiţi tipul de date pe care-l va reprezenta o variabilă, în plus se generează o eroare atunci când încercaţi să-i atribuiţi variabilei un alt tip de date. Din fericire, aşa ceva nu se întâmplă în JavaScript, care este un limbaj flexibil. Variabilele JavaScript pot accepta oricând un nou tip de date, fapt care duce la modificarea tipului variabilei.

Reguli pentru numele variabilelor JavaScript:

Numele este case-sensitive (y şi Y sunt două variabile diferite)
Numele trebuie să înceapă cu o literă sau cu liniuţa de subliniere (underscore)

Exemplu
Valoarea unei variabile se poate modifica în timpul execuţiei scriptului. Putem referi variabila prin nume pentru a-i afişa sau modifica conţinutul, ca în exemplul următor:

Declararea variabilelor JavaScript

Putem crea variabile cu sintaxa:

var nume_variabila;

După declarare, variabila nu conţine valori (este vidă). Puteţi să iniţializaţi o variabilă chiar în momentul declarării:

var x=8;
var prenume="Matei";

Obs: cînd atribuiţi unei variabile o valoare de tip text, textul trebuie scris între ghilimele.

Dacă atribuiţi valori unei variabile care nu a fost încă declarată, ea va fi declarată automat.

Declaraţiile:

x=8;
prenume="Matei";

au acelaşi efect cu declaraţiile:

var x=8;
var prenume="Matei";

Dacă redeclaraţi o variabilă JavaScript, ea va păstra valoarea iniţială:

var x=7;
var x;

După execuţia instrucţiunilor de mai sus, variabila x are valoarea 7 care nu a fost resetată la redeclarare.

Operatori JavaScript

Operatorii aritmetici

Sunt folosiţi pentru a efectua operaţii aritmetice cu variabile şi/sau valori.
Dacă y=5, tabelul următor prezintă operatorii aritmetici:

Operator	Descriere	Exemplu	Rezultat
+	adunare	x=y+2	x=7
-	scădere	x=y-2	x=3
*	inmulţire	x=y*2	x=10
/	impărţire	x=y/2	x=2.5
%	modulo (restul impărţirii întregi)	x=y%2	x=1

Operatorii de atribuire

Sunt folosiţi pentru a atribui valori variabilelor JavaScript. Dacă x=10 şi y=5, tabelul următor prezintă operatorii de atribuire:

Operator	Exemplu	Echivalent cu	Rezultat
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

Operatorul + utilizat pentru şiruri de caractere

Acest operator poate fi utilizat şi pentru a concatena variabile tip şir de caractere (string sau text).

Exemplu:

Adunarea şirurilor şi a numerelor

Regulă: Dacă adunaţi un număr cu un şir de caractere, veţi obţine un şir de caractere.

Exemplu:

Operatori de incrementare / decrementare

Operatorii se mai clasifică şi în functie de operatia pe care o efectuează şi anume în:

operatori de incrementare – creşte valoarea variabilei cu o unitate
operatori de decrementare – scade valoarea variabilei cu o unitate;

Acestea la rindul lor sunt de două feluri:

prefixată – operatorul se scrie inaintea operandului. Operatia de incrementare (sau decrementare) se efectuează inainte de a se efectua operatiile expresiei în care se află.
De exemplu, dacă initial a=1 şi x=++a; vom avea la final x=2 şi a=2, adică se incrementează variabila a cu o unitate inainte de a i se atribui variabilei x valoarea variabilei a.
postfixată – operatorul se scrie după operand. Operatia de incrementare (sau decrementare) se efectuează după ce se efectuează operatiile expresiei în care se află.
De exemplu, dacă initial a=1 şi x=a++; vom avea la final x=1 şi a=2, adică se incrementează variabila a cu o unitate după ce i se va atribui variabilei x valoarea variabilei a.

Operator	Tip de operator	Descriere	Exemplu
++	incrementare	incrementare prefixată	++x sau x=x+1
		incrementare postfixată	x++ sau x=x+1
--	decrementare	decrementare prefixată	--x sau x=x-1
		decrementare postfixată	x-- sau x=x-1

Exemplu

Operatorii de comparare

Operatorii de comparare sunt utilizaţi în construcţii logice pentru a verifica egalitatea sau diferenţa dîntre două variabile sau valori. Dacă x=5, tabelul următor prezintă operatorii de comparare

Operator	Descriere	Exemple
==	Egal cu	x==5 este fals
===	Este egal exact (valoare şi tip)	x===5 este adevărat x==="5" este fals
!=	Diferit	x!=8 este adevăra
>	Mai mare decit	x>8 este fals
<	Mai mic decit	x<8 este adevărat
>=	Mai mare sau egal cu	x>=8 este fals
<=	Mai mic sau egal cu	x<=8 este adevarat

Operatorii logici

Operatorii logici sunt utilizaţi pentru a determina relaţia logică dîntre variabile sau valori.
Dacă x=6 şi y=3, tabelul următor prezintă operatorii logici:

Operator	Descriere	Exemple
&&	și	(x < 10 && y > 1) este adevărat
\|\|	sau	(x==5 \|\| y==5) este fals
!	not	!(x==y) este adevărat

Operatorul condiţional(ternar)

Acest operator atribuie o valoare unei variabile în funcţie de o anumită condiţie.

Sintaxă:

variabila=(conditie)?valoare1:valoare2

Exemplul 1:

Exemplul 2:

Operatorul typeof

Operatorul typeof returnează tipul de date continut de operandul său. Tipurile de date pe care le poate returna sunt:

string – pentru şiruri de caractere
number – pentru numere
function – pentru functiile JavaScript
object – pentru obiectele JavaScript

Exemplu:

Inserarea caracterelor speciale

Pentru a insera într-un şir caractere speciale, cum ar fi apostrof, ghilimele, întrerupere de linie etc., se foloseşte caracterul backslash (\).

Fie următorul cod JavaScript:

În JavaScript, un şir de caractere începe şi termină cu apostrof sau cu ghilimele. Asta inseamnă că şirul de mai sus va fi trunchiat la: Noi suntem echipa

Pentru a rezolva această problemă, trebuie să inseraţi caracterul backslash (\) inaintea fiecărui caracter special care trebuie afişat, ca în exemplul următor:

Tabelul următor prezintă caracterele speciale ce pot fi inserate într-un text cu ajutorul caracterului backslash:

Cod	Ieşire
\'	apostrof
\"	ghilimele
\&	ampersand
\\	backslash
\n	linie nouă
\r	retur de car
\t	tab
\b	backspace
\f	form feed

Casete Popup

JavaScript are trei tipuri de casete popup: caseta Alert, caseta Confirm şi caseta Prompt.

Caseta Alert

O casetă de alertă se utilizează atunci doriţi să fiţi siguri că o anumită informaţie ajunge în atenţia utilizatorului. cînd o casetă de alertă este afişată, utilizatorul va trebui să acţioneze butonul "OK" pentru a putea continua.

Sintaxă:

Exemplu:

Caseta Confirm

O casetă de confirmare se utilizează atunci cînd doriţi ca utilizatorul să verifice sau să accepte ceva. Cînd caseta de confirmare este afişată, utilizatorul va trebui să acţioneze butonul "OK" sau butonul "Cancel" pentru a putea continua. Dacă utilizatorul acţionează butonul "OK", caseta returnează valoarea true, dacă acţionează butonul "Cancel", caseta returnează valoarea false.

Sintaxă:

Exemplu:

Caseta Prompt

Această casetă se utilizează atunci cînd doriţi ca utilizatorul să introducă o anumită valoare inainte de a accesa pagina. Cînd caseta prompt este afişată, utilizatorul va trebui să acţioneze butonul "OK" sau butonul "Cancel" pentru a putea continua după ce introduce valoarea solicitată. Dacă utilizatorul acţionează butonul "OK", caseta returnează valoarea true, dacă acţionează butonul "Cancel", caseta returnează valoarea false.

Sintaxă:

Exemplu:

Obs. Dacă doriţi ca textul dintr-o casetă să fie afişat pe mai multe linii, procedaţi ca în exemplul următor:

Instrucţiuni JavaScript

JavaScript este o secvenţă de declaraţii, instrucţiuni şi comenzi care vor fi executate de către browser. Spre deosebire de HTML, JavaScript este case-sensitive, deci aveţi grijă cînd scrieţi instrucţiuni, declaraţi variabile sau apelaţi funcţii. O instrucţiune JavaScript este o comandă către browser şi are rolul de a spune browserului ce trebuie să facă. Următoarea instrucţiune JavaScript spune browser-ului să scrie în pagină textul "Buna ziua":

document.write("Buna ziua");

Fiecare instrucţiune se încheie cu punct şi virgulă (;).
Codul JavaScript este o secvenţă de instrucţiuni JavaScript. Fiecare instrucţiune este executată de browser în ordinea în care a fost scrisă.
Exemplul următor va scrie un titlu şi două paragrafe într-o pagină web:

Blocuri JavaScript

Instrucţiunile JavaScript pot fi grupate în blocuri care se scriu între acolade. Instrucţiunile dintr-un bloc vor fi executate împreună.
În acest exemplu, instrucţiunile care scriu un titlu şi două paragrafe, au fost grupate împreună într-un bloc.

În mod normal, un bloc este folosit pentru a grupa un grup de instrucţiuni într-o funcţie sau într-o condiţie (blocul va fi executat dacă o anumită condiţie este satisfăcută).

Instrucţiunile condiţionale

Adesea, cînd scrieţi cod JavaScript, trebuie să realizaţi operaţii diferite în funcţie de decizii diferite. Pentru a realiza acest lucru, folosiţi în cod instrucţiunile condiţionale.

În JavaScript există următoarele instrucţiuni condiţionale:

if – folosiţi această instrucţiune dacă un cod trebuie executat cînd o condiţie este adevărată
if...else - folosiţi această instrucţiune pentru a executa un cod cînd o condiţie este adevărată şi alt cod dacă condiţia este falsă
if...else if....else – folosiţi această instrucţiune pentru a selecta unul din mai multe blocuri de cod pentru a fi executat
switch - folosiţi această instrucţiune pentru a selecta unul din mai multe blocuri de cod pentru a fi executat

Instrucţiunea if

Sintaxă:

Exemplu:

Instrucţiunea if…else
Sintaxă:

Exemplu:

Instrucţiunea if...else if...else
Sintaxă:

Exemplu:

Exemplu:

Link-ul din exemplul următor va deschide Google sau Yahoo

Instrucţiunea switch

Sintaxă:

Exemplu:

Exerciții:
1. Să se afle minimum şi maximum din trei numere date a, b, c, cu ajutorul instrucțiunii if else.
2. Sunt date trei numere a, b, c. De afişat numerele în ordine crescătoare(descrescătoare).

Instrucţiuni repetitive

Instrucţiunile repetitive sunt utilizate pentru a executa o secvenţă de cod în mod repetat. În JavaScript putem folosi urmatoarele instrucţiuni repetitive:

for – repetă o secvenţă de cod de un număr precizat de ori
for...in – parcurge elementele unui tablou sau a enumera proprietăţile unui obiect
while – repetă o secvenţă de cod cît timp o condiţie este adevărată
do...while – întîi execută o dată secvenţă de cod apoi o repetă cît timp o condiţie este adevărată

Instrucţiunea for

Instrucţiunea for se utilizează cînd se cunoaşte dinainte numărul de iteraţii dorit pentru secvenţa de cod.

Sintaxă:

Exemplu:

În exemplul următor, instrucţiunea for începe cu i=0, corpul instrucţiunii se repetă cît timp i≤50 şi contorul i este incrementat cu 2 la fiecare iteraţie. Vor fi afişate numerele pare ≤50.

Obs: Valoarea increment poate fi şi negativă şi comparaţia se poate realiza şi cu orice alt operator de comparare.

Exemplu: În acest exemplu, instrucţiunea for este utilizată pentru a afişa cele 6 titluri HTML.

Instrucţiunea for...in

Această instrucţiune este utilizată pentru a parcurge elementele unui tablou sau a enumera proprietăţile unui obiect.

Sintaxă:

Obs: Codul din corpul instrucţiunii este executat cîte o dată pentru fiecare element din tablou sau proprietate.

Obs: Argumentul variabila poate fi o variabilă, un element de tablou sau o proprietate a unui obiect.

Exemplu:

Instrucţiunea for..in este utilizată pentru a parcurge elementele unui tablou:

Exemplu:

Instrucţiunea for..in este utilizată pentru a parcurge proprietăţile unui obiect:

Instrucţiunea while

Instrucţiunea execută în mod repetat o secvenţă de cod, cît timp o condiţie este adevărată.

Sintaxă:

Obs: Operatorul <= poate fi înlocuit cu orice alt operator de comparare.

Exemplu:

Instrucţiunea do...while

Instrucţiunea do...while este o variantă a instrucţiunii while. Secvenţa de instrucţiuni va fi executată în mod sigur o dată, apoi în mod repetat, cît timp condiţia specificată este adevărată.

Sintaxă:

Exemplu:

În acest exemplu vor fi afişate numerele impare ≤50.

Exerciții:
1. Sunt date numerele K şi N(N>0). De afişat de N ori numărul K;
2. De elaborat un script ce va afişa tabla înmulțirii;
3. De elaborat un script ce va afişa tabla de şah;
4. De elaborat un script ce va calcula n!;
5. De elaborat un script ce va calcula numărul exact de ani, luni şi zile de la ziua de naştere.
6. Să se scrie un program care să afişeze următoarele valori:
1*9 + 2 = ?
12*9 + 3 = ?
123*9 + 4 = ?
.................
123456789*9 + 10 = ?
7. Să se scrie un program care să afişeze următoarea "piramidă" de numere:
1
1 2 3
1 2 3 4 5
..............
1 ......(2n-1)

Instrucţiunile break şi continue

Instrucţiunea break

Este utilizată pentru a întrerupe în mod forţat execuţia unei bucle. În exemplul următor, bucla va fi întreruptă cînd i=3.

Instrucţiunea continue

Instrucţiunea întrerupe execuţia iteraţiei curente şi sare la următoarea iteraţie. În exemplul următor, valoarea 3 nu va fi afişată (este sărită cu instrucţiunea continue).

Instrucţiunea with

Instrucţiunea with simplifică scrierea programelor JavaScript sau reduce pe cât posibil cantitatea de cod JavaScript. Instrucţiuneawith permite specificarea unui obiect şi este urmat de un bloc de instrucţiuni plasat între acolade. Pentru fiecare din instrucţiunile blocului, proprietăţile menţionate fără ca obiectul corespunzător să fie indicat se referă la obiectul specificat prin with.

Sintaxă:

with (obiect) {
cod JavaScript
}

Exemplu 1:

În următorul exemplu este apelată metoda document.write() de patru ori

Exemplu 2:

Acelaş exemplu, numai că cuvântul cheie with elimină referinţele multiple la obiectul document

Obs: Pentru un cod scurt interesul utilizării instrucţiunii with nu este evident, dar când trebuie să accesăm acelaşi obiect în cadrul unei proceduri sau când utilizăm un obiect predefinit precum Math, with vă ajută să câştigaţi foarte mult timp.

Funcţii

O funcţie va fi executată cînd are loc un eveniment sau cînd este apelată. Dacă doriţi ca browserul să nu execute un script atunci cînd pagina se incarcă, puteţi scrie scriptul într-o funcţie. O funcţie poate fi apelată din orice punct al paginii, sau chiar din alte pagini, dacă funcţia este scris într-un fişier JS extern. Funcţiile JS pot fi scrise în secţiunea <head> sau în secţiunea <body> a documentului. Totuşi, pentru a fi siguri că funcţia este încărcată în browser inainte de a fi apelată, este recomandat să o scrieţi în secţiunea <head>.

Definirea unei funcţii

Sintaxă:

Parametrii var1, var2, etc. sunt variabile sau valori transmise funcţiei. Acoladele marchează inceputul şi sfirşitul corpului funcţiei.

Obs: Chiar dacă funcţia nu are parametri, parantezele rotunde de după numele funcţiei trebuie să fie prezente.

Exemplu:

Dacă linia de cod alert("Bine ati venit!") din exemplul anterior nu ar fi fost scrisă în corpul unei funcţii, codul ar fi fost executat imediat ce linia respectivă ar fi fost încărcată în browser. Deoarece codul a fost inclus într-o funcţie, el nu va fi executat decit atunci cînd utilizatorul acţionează butonul şi este apelată funcţia afiseaza_mesaj().

Instrucţiunea return

Instrucţiunea return este folosită pentru a specifica valoarea returnată de o funcţie şi trebuie inclusă în orice funcţie care returnează o valoare.

În exemplul următor, funcţia suma returnează suma celor doi parametri de intrare:

Durata de viaţă a variabilelor JavaScript

Dacă declaraţi o variabilă în interiorul unei funcţii, ea poate fi accesată numai din interiorul funcţiei. Cînd funcţia se incheie, variabila este distrusă. Variabilele declarate în corpul unei funcţii se numesc variabile locale. Puteţi avea variabile locale cu acelaşi nume în funcţii diferite, deoarece fiecare variabilă locală este recunoscută numai în interiorul funcţiei în care este declarată. Dacă declaraţi o variabilă în afara tuturor funcţiilor (variabilă globală), ea poate fi accesată de toate funcţiile din pagină. O variabilă globală este distrusă numai atunci cînd pagina este inchisă.

Exemple:

Exemplul 1

Ilustrează cum se poate transmite o variabilă unei funcţii şi cum poate fi folosită respectiva variabilă în corpul funcţiei.

Exemplul 2

Ilustrează cum poate fi folosit rezultatul returnat de o funcţie.

Exemplul 3

Evenimentele JavaScript. Conceptul de eveniment şi gestionar de evenimente

Un eveniment este o acţiune care se produce în raport cu un element (fereastră, document, buton, etc.) el poate fi detectat şi prelucrat de către un script care va declanşa o acţiune. Script-ul este executat dacă evenimentul se produce pe obiectul căruia îi este asociat.

Reacţia la un eveniment este cunoscută sub numele de prelucrarea evenimentului, iar codul JavaScript corespunzător este cunoscut sub numele de gestionar de evenimente.

Un gestionar de evenimente este o metodă puţin specială care va fi apelată în mod automat de către browser ori de câte ori va surveni un eveniment particular.

Gestionarii de evenimente sunt funcţii JavaScript. Aceştia sunt uşor de programat, de multe ori este suficientă o singură instrucţiune pentru a putea fi creaţi.

Acţiunile utilizatorilor sunt cele mai frecvente evenimente. Însă acestea nu sunt singurele. De exemplu evenimentul load este declanşat automat de către browser atunci când este încheiată încărcarea unui document.

De obicei evenimentele sunt provocate de utilizator prin efectuarea unui click sau introducerea unor date.

Fiecare eveniment are un nume prestabilit care în acelaşi timp este şi parametrul unui tag. Acest parametru stabileşte care eveniment anume trebuie procesat – glisarea mouse-ului, introducerea textului, încărcarea paginii, etc. Valoarea parametrului este acţiunea care trebuie îndeplinită:

<tag gestionar_evenimente=”cod JavaScript (descrierea acţiunii)”> conţinut </tag>

Petru a defini un gestionar de evenimente se adaugă prefixul on la numele evenimentului.

Toate evenimentele procesate de browser pot fi împărţite în patru grupuri în dependenţă de elementul ce le provoacă: evenimente provocate de mouse, de tastatură, de elementul formularului, şi de ferestre.

Evenimente provocate de mouse

onclick - are loc cand se da click pe un element
ondblclick - are loc cand se da dublu click pe un element
onmousedown - are loc cand este apasat click-ul
onmousemove - are loc cand se misca cursorul în interiorul unui element
onmouseover - are loc cand se pune cursorul deasupra unui element
onmouseout - are loc cand cursorul iese din cadrul unui element
onmouseup - are loc cand se elibereaza click-ul

Exemple:

Exemplul 1

Exemplul 2

În exemplul de mai jos, am utilizat o functie care permite afişarea coordonatelor cursorului unui mouse în mişcare.

Evenimente provocate de tastatură

onkeydown - are loc cand se apasa o tasta
onkeypress - are loc cand este apasata o tasta
onkeyup - are loc cand este eliberata o tasta

Exemple:

Exemplul 1

Exemplul 2

Exemplul 3

Functia urmatorul(elment,text), are doua argumente: element (care, prin apel, se referă la caseta input) şi text (se referă la valoarea casetei). În apelul funcţiei: urmatorul(this,this.value), this se referă la obiectul curent (reprezintă primul argument) iar al doile argument this.value reprezintă valoarea obiectului curent (valoarea din cîmp). Observaţi folosirea evenimentului onKeyup, pentru a se trece la urmatorul cîmp atunci cînd s-a completat ultimul caracter din caseta precedentă.

Pentru a înţelege mai bine puteţi să înlocuiţi onkeyup cu onkeydown pentru a vedea diferenţa.

Evenimente provocate de ferestre

onabort - are loc în momentul în care se se întrerupe încarcarea ferestrei
onerror - are loc în momentul în care o imagine nu se încarcă corect (pentru object, body şi frameset)
onload - are loc în momentul în care se termină încarcarea ferestrei
onresize - are loc cînd este modificată dimensiunea ferestrei
onscroll - are loc în momentul în care se derulează bara de scroll
onunload - are loc în momentul în care nu se încarcă fereastra

Exemplu

Evenimente provocate de formular

onblur - are loc în momentul în care cursorul este scos din casuta respectiva (se dă click în alta parte)
onchange - are loc în momentul în care se schimbă conţinutul din casuţa respectivă
onfocus - are loc în momentul în care se pune cursorul în casuţa respectivă
onreset - are loc cînd este apasat butonul reset din formular
onselect - are loc în momentul în care se selectează un text din cîmpul respectiv
onsubmit - are loc în momentul în care se apasă butonul de submit din formular

Exemple:

Exemplul 1

Î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, functia isNaN() va returna valoarea true, iar pe monitor va apărea mesajul Introduceti 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.

Exemplul 2

În exemplul de mai jos, am utilizat o functie care preia şirul de caractere introdus în formular şi il transformă în şir scris cu majuscule.

Exemplul 3

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

Exemplul 4

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

Exemplul 5

În exemplul de mai jos am creat un formular ce permite transmiterea unui comentariu. La activarea butonului de expediere a datelor apare o caseta de alertare.

Obiectele JavaScript

JavaScript este un limbaj de programare orientat pe obiecte (POO). Un limbaj POO vă permite să vă definiţi propriile obiecte şi propriile tipuri de variabile.

Obiectele JavaScript sunt de trei tipuri:

– Obiecte interne(integrate) – fac parte din limbajul JavaScript și anume Array, Boolean, Date, Function, Math, Number, Object, RegExp, String şi Arguments.
– Obiectele navigatorului – nu fac parte din limbajul JavaScript, dar sunt recunoscute de navigatoare.
– Obiecte personalizate – obiecte create de utilizator.

Crearea propriilor obiecte va fi explicată mai tirziu. Vom începe prin a examina obiectele încorporate în JavaScript şi cum sunt ele utilizate.

Trebuie de reţinut că un obiect este de fapt, un tip special de date care are proprietăţi şi metode.

Proprietăţi

Proprietăţile sunt valori asociate cu un obiect.

În exemplul următor, utilizăm proprietatea length a obiectului String (şir de caractere) pentru a determina numărul de caractere memorate într-un şir:

Codul de mai sus va afişa valoarea: 15

Metode

Metodele sunt acţiuni ce pot fi realizate cu un obiect.

În exemplul următor, utilizăm metoda UpperCase() a obiectului String pentru a afişa un text cu litere mari:

Codul de mai sus va afişa şirul: BINE ATI VENIT!

Obiectul String

Obiectul String este folosit pentru a manipula secvenţe de caractere (text). Un obiect String este creat cu instrucţiunea new String().

Sintaxa:

var txt = new String(string);

sau mai simplu:

var txt = string;

Proprietăţile obiectului String

Proprietate	Descriere
constructor	Returnează funcţia care a creat prototipul obiectului String
length	Returnează lungimea şirului
prototype	Permite adăugarea de proprietăţi şi metode unui obiec

Metodele obiectului String

Metodă	Descriere
charAt()	Returnează caracterul cu indexul specificat
charCodeAt()	Returnează codul Unicode al caracterului cu indexul specificat
concat()	Concatenează două sau mai multe şiruri şi returnează şirul obţinut
fromCharCode()	Converteşte valori Unicode în caractere
indexOf()	Returnează poziţia primei apariţii a unui subşir într-un şir
lastIndexOf()	Returnează poziţia ultimei apariţii a unui subşir оntr-un şir
match()	Caută potrivirile dîntre un subşir şi un string şi returnează subşirul sau null (dacă subşirul nu este găsit)
replace()	Caută toate apariţiile unui subşir într-un şir şi le inlocuieşte cu un nou subşir
search()	Caută potrivirea dîntre un subşir şi un şir şi returnează poziţia în care apare potrivirea
slice()	Elimină o porţiune din şir şi returnează şirul extras
split()	Imparte un şir în subşiruri pe baza unui caracter separator
substr()	Extrage dintr-un şir secvenţa de caractere care începe într-o anumită poziţie şi are o anumită lungime
substring()	Extrage dintr-un şir caracterele situate între două poziţii
toLowerCase()	Converteşte un şir în litere mici
toUpperCase()	Converteşte un şir în litere mari
valueOf()	Returnează valoarea primară a unui obiect String

Metode împachetate în taguri HTML

Aceste metode returnează şirul împachetat în tagurile HTML potrivite.

Metodă	Descriere
anchor()	Creează o ancoră
big()	Afişează şirul cu font mare
blink()	Afişează un şir care clipeşte
bold()	Afişează şirul cu font bold
fixed()	Afişează şirul cu un font cu pas fix
fontcolor()	Afişează şirul folosind o anumită culoare
fontsize()	Afişează şirul cu o anumită dimensiune a fontului
italics()	Afişează şirul cu font italic
link()	Afişează şirul ca hiperlegătură
small()	Afişează şirul cu font mic
strike()	Afişează şirul ca tăiat
sub()	Afişează şirul ca subscript (indice)
sup()	Afişează şirul ca superscript (exponent)

Exemple:

Exemplul 1

Ilustrează utilizarea proprietăţii length pentru a determina lungimea unui şir.

Exemplul 2

Ilustrează cum se utilizează tagurile HTML pentru a stiliza un şir.

Exemplul 3

Ilustrează cum se utilizează metoda concat() pentru a concatena şiruri.

Concatenarea a două şiruri:

Concatenarea a trei şiruri:

Exemplul 4

Ilustrează cum se utilizează metoda indexOf() pentru a determina poziţia primei apariţii a unei valori într-un şir.

Valorile afişate sunt: 0 -1 5.

Obs. Dacă valoarea nu apare în şir, valoarea returnată este -1. Şirurile sunt indexate de la 0.

Exemplul 5

Ilustrează cum se utilizează metoda match() pentru a căuta un subşir într-un şir. Metoda returnează subşirul, dacă este găsit, sau valoarea null, dacă subşirul nu este găsit în şir.

Exemplul 6

Ilustrează cum se utilizează metoda replace() pentru a înlocui o secvenţă din şir cu altă secvenţă.

Exemplul 7

Ilustrează cum se foloseşte metoda slice() pentru a extrage dintr-un şir o secvenţă. Metoda returnează şirul extras sau valoarea -1. În mod normal are două argumente: poziţia din care începe extragerea (primul caracter are indexul 0) şi, opţional, poziţia în care se încheie extragerea. Dacă al doilea argument lipseşte, se vor extrage toate caracterele dîntre poziţia de început şi sfirşitul şirului. Dacă se folosesc valori negative, extragerea se va face numărînd înapoi de la sfîrşitul şirului.

Exemplul 8

Ilustrează utilizarea metodei split() pentru a împărţi un şir în subşiruri pe baza unui caracter separator. Dacă caracterul separator este omis, se va returna întreg şirul. Dacă caracterul este şirul vid, şirul va fi împărţit caracter cu caracter. Opţional, se poate preciza şi numărul maxim de împărţiri.

Obiectul Date

Obiectul Date este utilizat pentru a lucra cu date calendaristice şi ore. Un obiect de tip Date este creat cu instrucţiunea new Date(). Sunt patru metode de a instanţia un obiect Date:

   1) var d = new Date();
   2) var d = new Date(milisecunde);
   3) var d = new Date(dataString);
   4) var d = new Date(an, luna, zi, ore, minute, secunde, milisecunde);

Setarea datei

Putem manevra uşor datele calendaristice folosind metodele obiectului Date.

În exemplul următor, data este setată la 19 februarie 2010:

În exemplul următor, data este setată la şapte zile în viitor:

Compararea a două date calendaristice

Exemplul următor compară data curentă cu 19 februarie 2010:

Metodele obiectului Date

Metodă	Descriere
getDate()	Returnează ziua din lună (între 1 şi 31)
getDay()	Returnează ziua din săptămînă (0-6)
getFullYear()	Returnează anul (patru cifre)
getHours()	Returnează ora (0-23)
getMilliseconds()	Returnează milisecundele (0-999)
getMinutes()	Returnează minutele (0-59)
getMonth()	Returnează luna (0-11)
getSeconds()	Returnează secundele (0-59)
getTime()	Returnează numărul de milisecunde scurse de la 1.01.1970
getTimezoneOffset()	Returnează diferenţa dîntre GMT şi timpul local, în minute
parse()	Analizează(parsează) o dată ca şir de caractere şi returnează numărul de milisecunde scurse de la 1.01.1970
setDate()	Setează data din lună (1-31)
setFullYear()	Setează anul (patru cifre)
setHours()	Setează ora (0-23)
setMilliseconds()	Setează milisecundele (0-999)
setMinutes()	Setează minutele (0-59)
setMonth()	Setează lunile (0-11)
setSeconds()	Setează secundele (0-59)
setTime()	Setează o dată şi o oră adunînd sau scăzînd un anumit număr de milisecunde la/din 1.01.1970
toDateString()	Converteşte porţiunea corespunzătoare datei calendaristice dintr-un obiect Date într-un şir de caractere
toString()	Converteşte un obiect Date într-un şir de caractere
toTimeString()	Converteşte porţiunea corespunzătoarea timpului dintr-un obiect Date într-un şir de caractere
valueOf()	Returnează valoarea primară a unui obiect Date

Exemple:

Exemplul 1

Ilustrează utilizarea metodei Date() pentru a obţine data curentă.

Exemplul 2

Ilustrează utilizarea metodei getTime() pentru a calcula anii scurşi din 1970 pină în prezent.

Exemplul 3

Ilustrează utilizarea metodei setFullYear() pentru a seta o dată specifică.

Exemplul 4

Ilustrează utilizarea metodei toString() pentru a converti data curentă într-un şir de caractere.

Exemplul 5

Ilustrează utilizarea metodei getDay() şi a unui tablou pentru a scrie denumirea zilei din săptămâna curentă.

Exemplul 6

Ilustrează cum se poate afişa un ceas într-o pagină web.

Obiectul Array

Un tablou este o variabilă specială care poate păstra la un moment dat mai multe valori de un anumit tip. Dacă aveţi o listă de elemente, animale de companie de exemplu, aţi putea păstra valorile în variabile simple, ca în exemplul următor:

Desigur, problema se complică dacă aveţi de memorat zeci, sau sute de valori. Cea mai bună soluţie este să folosiţi tablouri. Un tablou poate reţine toate valorile sub un singur nume şi puteţi accesa fiecare valoare stocată în tablou folosind numele tabloului şi indexul valorii.

Crearea unui tablou

Un tablou poate fi definit în trei moduri:

Obs: Dacă în tablou stocaţi valori numerice sau logice, tipul tabloului va fi Number sau Boolean, în loc de String.

Accesarea elementelor dintr-un tablou

Puteţi accesa un element dintr-un tablou precizînd numele tabloului şi indexul elementului. Primul element din tablou are indexul 0.

Următoarea linie de cod

document.write(pets[0]);

va afişa şirul: Caine

Modificarea valorilor dintr-un tablou

Pentru a modifica o valoare dintr-un tablou, este suficient să atribuiţi o nouă valoare elementului respectiv, ca în exemplul următor:

pets[0]="Iguana";

Proprietăţile obiectului Array

Proprietatea	Descriere
constructor	Returnează funcţia care a creat prototipul obiectului Array
length	Setează sau returnează numărul elementelor stocate în tablou
prototype	Permite adăugare de proprietăţi şi metode unui obiect

Metodele obiectului Array

Metodă	Descriere
concat()	Concatenează două sau mai multe tablouri şi returnează tabloul obţinut
join()	Concatenează toate elementele unui tablou într-un şir de caractere
pop()	Inlătură ultimul element dintr-un tablou şi returnează respectivul element
push()	Adaugă noi elemente la sfirşitul unui tablou şi returnează noua lungime a tabloului
shift()	Inlătură primul element dintr-un tablou şi returnează respectivul element
unshift()	Adaugă noi elemente la începutul unui tablou şi returnează noua lungime a tabloului
reverse()	Răstoarnă ordinea elementelor dintr-un tablou
slice()	Selectează o parte dintr-un tablou şi returnează elementele selectate
sort()	Sortează elementele unui tablou
splice()	Adaugă/Înlătură elemente dintr-un tablou
toString()	Converteşte un tablou în şir de caractere şi returnează rezultatul
valueOf()	Returnează valoarea primară a unui tablou

Exemple:

Exemplul 1

Ilustrează crearea unui tablou, atribuirea de valori şi afişarea elementelor tabloului.

Exemplul 2

Ilustrează utilizarea instrucţiunii for...in pentru a parcurge elementele unui tablou.

Exemplul 3

Ilustrează utilizarea metodei concat() pentru a concatena trei tablouri.

Exemplul 4

Ilustrează utilizarea metodei join() pentru a concatena toate elementele unui tablou într-un şir de caractere.

Exemplul 5

Ilustrează utilizarea metodei pop() pentru a înlătura ultimul element dintr-un tablou.

Exemplul 6

Ilustrează utilizarea metodei push() pentru a adăuga noi elemente la sfîrşitul unui tablou. Pot fi adăugate mai multe valori simultan. Valorile trebuie separate prin virgulă.

Exemplul 7

Ilustrează utilizarea metodei reverse() pentru a inversa ordinea elementelor dintr-un tablou.

Exemplul 8

Ilustrează utilizarea metodei shift() pentru a elimina primul element dintr-un tablou.

Exemplul 9

Ilustrează cum se selectează elementele unui tablou cu metoda slice(). Metoda are două argumente: primul precizează poziţia de început a secvenţei selectat, iar al doilea poziţia de sfîrşit. Dacă al doilea argument lipseşte, se vor selecta toate elementele pînă la sfîrşitul tabloului. Dacă argumentul este negativ, se vor selecta elementele de la sfirşitul şirului către început.

Exemplul 10

Ilustrează utilizarea metodei sort() pentru a sorta alfabetic crescător un tablou de şiruri de caractere. Metoda sortează implicit în ordine alfabetică crescătoare.

Exemplul 11

Ilustrează utilizarea metodei sort() pentru a sorta descendent un tablou de numere. Numerele nu vor fi sortate corect. Trebuie adăugată o funcţie care să compare numerele.

Exemplul 12

Ilustrează utilizarea metodei splice() pentru a adăuga un element în poziţia 3 din tablou. Metoda are trei argumente: primul, obligatoriu precizează poziţia în care vor fi adăugate/şterse valori, al doilea, obligatoriu, reprezintă numărul de valori care vor fi şterse (dacă are valoarea 0, nu se vor şterge ci se vor insera valori) şi, al treilea, opţional, care reprezintă noile valori adăugate în tablou.

Exemplul 13

Ilustrează utilizarea metodei toString() pentru a converti un tablou într-un şir de caractere. Metoda returnează şirul de caractere, valorile fiind separate prin virgulă.

Exemplul 14

Ilustrează utilizarea metodei unshift() pentru a adăuga noi valori la începutul unui tablou

Obiectul Boolean

Obiectul Boolean este utilizat pentru a converti o valoare ne-booleană într-o valoare booleană (cu valoarea true sau false).

Crearea unui obiect boolean poate fi realizată ca în secvenţa de cod următoare:

var sem=new Boolean();

Obs: Dacă obiectul Boolean nu are valoare iniţială sau are una din valorile 0, -0, null, "", false, undefined, sau NaN(Not a Number), obiectul este iniţializat cu valoarea false. În caz contrar, valoarea obiectului va fi true.

Toate declaraţiile din liniile următoare de cod creează un obiect boolean iniţializat cu false:

var sem=new Boolean();
var sem=new Boolean(0);
var sem=new Boolean(null);
var sem=new Boolean("");
var sem=new Boolean(false);
var sem=new Boolean(NaN);

Toate declaraţiile din liniile următoare de cod crează un obiect boolean iniţializat cu true:

var sem=new Boolean(true);
var sem=new Boolean("true");
var sem=new Boolean("false");
var sem=new Boolean("home");

Proprietăţile obiectului Boolean

Proprietate	Descriere
constructor	Returnează funcţia care a creat prototipul obiectului
prototype	Permite adăugarea de proprietăţi şi metode unui obiect

Metodele obiectului Boolean

Metodă	Descriere
toString()	Converteşte o valoare booleană în şir de caractere şi returnează rezultatul
valueOf()	Returnează valoarea primară a unui obiect Boolean

Exemplu

Ilustrează cum se verifică valoarea unui obiect Boolean.

Obiectul Math

Obiectul Math permite realizarea prelucrărilor matematice. Obiectul include constante matematice şi metode. Obiectul nu are constructor. Toate proprietăţile şi metodele pot fi utilizate fără a crea efectiv un obiect.

Sintaxa de utilizare:

var pi=Math.PI;
var x=Math.sqrt(16);

Constante matematice

În JavaScript se pot utiliza opt constante matematice accesibile prin obiectul Math. Ele pot fi utilizate cu următoarea sintaxă:

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

Metode matematice

Exemplul următor ilustrează utilizarea metodei round() pentru a rotunji un număr la cel mai apropiat întreg:

Exemplul următor utilizează metoda random() pentru a genera un număr aleator cuprins între 0 şi 1:

Exemplul următor utilizează metodele floor() şi random() pentru a genera un număr aleator cuprins între 0 şi 10:

Proprietăţile obiectului Math

Proprietate	Descriere
E	Returnează constanta lui Euler (cca. 2.718)
LN2	Returnează logaritm natural din 2 (cca. 0.693)
LN10	Returnează logaritm natural din 10 (cca. 2.302)
LOG2E	Returnează logaritm în baza 2 din E (cca. 1.442)
LOG10E	Returnează logaritm în baza 10 din E (cca. 0.434)
PI	Returnează PI (cca. 3.14159)
SQRT1_2	Returnează rădăcina pătrată din 1/2 (cca. 0.707)
SQRT2	Returnează rădăcina pătrată din 2 (cca. 1.414)

Metodele obiectului Math

Metodă	Descriere
abs(x)	Valoarea absolută a lui x
acos(x)	Arccosinus de x, în radiani
asin(x)	Arcsinus de x, în radiani
atan(x)	Arctangentă de x ca valoare numerică între -PI/2 şi PI/2 radiani
ceil(x)	Rotunjeşte x la întreg prin adaos
cos(x)	Cosinus de x (x în radiani)
exp(x)	Valoarea lui E^x
floor(x)	Rotunjeşte x la întreg prin lipsă
log(x)	Logaritm natural din x
max(x,y,z,...,n)	Valoarea maximă din şir
min(x,y,z,...,n)	Valoarea minimă din şir
pow(x,y)	Valoarea lui x la puterea y
random()	Un număr aleator între 0 şi 1
round(x)	Rotunjeşte x la cel mai apropiat întreg
sin(x)	Sinus de x (x în radiani)
sqrt(x)	Rădăcină pătrată din x
tan(x)	Tangenta unui unghi

Exemple:

Exemplul 1

Ilustrează utilizarea metodei max() pentru a determina maximul a două sau mai multe valori.

Exemplul 2

Ilustrează utilizarea metodei min() pentru a determina minimul a două sau mai multe valori.

Exemplul 3

Convertirea gradelor din Celsius în Fahrenheit şi reciproc:

Obiectul RegExp

Obiectul RegExp este folosit pentru a realiza căutări şi înlocuiri într-un text. RegExp este prescurtarea pentru expresie regulată. Cînd realizaţi căutări într- un text, puteţi defini modele de căutare cu ajutorul obiectului RegExp.

Un model simplu poate fi un singur caracter. Un model mai complicat conţine mai multe caractere şi poate fi utilizat pentru a analiza, verifica formatul, înlocui etc. O expresie regulată este un obiect care descrie modelul căutat în text.

Definire

Un obiect RegExp poate fi definit cu una din următoarele forme:

var txt=new RegExp(pattern,modifiers);

sau, mai simplu:

var txt=/pattern/modifiers;

pattern specifică modelul căutat
modifiers specifică dacă cătarea este globală, case-senzitivă etc.

Următoarea linie de cod defineşte un obiect RegExp numit m1 cu modelul "d":

var m1=new RegExp("d");

Cînd folosiţi obiectul m1 ca să căutaţi într-un şir, va fi găsită litera "d".

Modificatorii

Modificator	Descriere
i	Caută potrivirea fără a face diferenţa între literele mici şi mari
g	Realizează o căutare globală (găseşte toate potrivirile, nu numai prima)
m	Caută potrivirea pe mai multe linii

Parantezele pătrate

Sunt utilizate pentru a defini un şir de caractere.

Expression	Descriere
[abc]	Găseşte orice caracter precizat între paranteze
[^abc]	Găseşte orice caracter diferit de cele precizate
[0-9]	Găseşte o cifră între 0 şi 9
[a-z]	Găseşte orice literă mică
[A-Z]	Găseşte orice literă mare
[a-Z]	Găseşte orice literă, mare sau mică
[red\|blue\|green]	Găseşte oricare dîntre alternativele specificate

Metacaracterele

Sunt caracterele care au o semnificaţie specială:

Metacaracter	Descriere
.	Găseşte un singur caracter (orice caracter diferit de linie nouă şi sfirşit de linie).
\w	Caută un caracter de cuvînt (litere mici sau mari, cifre şi underscore)
\W	Găseşte un caracter care nu este de cuvînt
\d	Găseşte o cifră
\D	Găseşte un caracter care nu este cifră
\s	Caută un spaţiu alb
\S	Caută un caracter diferit de spaţiu
\b	Caută o potrivire la începutul/sfîrşitul unui cuvînt
\B	Caută o potrivire care nu este la începutul/sfîrşitul unui cuvînt
\0	Caută un caracter NUL
\n	Caută un caracter linie nouă
\f	Caută un caracter form feed
\r	Caută un caracter retur de car
\t	Caută un caracter tab
\v	Caută un tab caracter

Cuantificatori

Cuantificator	Descriere
n+	Caută orice şir care conţine cel puţin un caracter n
n*	Caută orice şir care conţine 0 sau mai multe apariţii ale caracterului n
n?	Caută orice şir care conţine 0 sau o apariţie a caracterului n
n{X}	Caută orice şir care conţine o secvenţă de X caractere n
n{X,Y}	Caută orice şir care conţine o secvenţă de X sau Y caractere n
n{X,}	Caută orice şir care conţine o secvenţă de cel puţin X caractere n
n$	Caută orice şir care se incheie cu caracterul n
^n	Caută orice şir care începe cu caracterul n
?=n	Caută orice şir care este urmat de şirul n
?!n	Caută orice şir care nu este urmat de şirul n

Proprietăţile obiectului RegExp

Proprietate	Descriere
global	Specifică dacă modificatorul "g" este setat
ignoreCase	Specifică dacă modificatorul "i" este setat
lastIndex	Specifică indexul de la care începe căutarea următoarei potriviri
multiline	Specifică dacă modificatorul "m" este setat
source	Textul din modelul RegExp

Metodele obiectului RegExp

Obiectul RegExp are trei metode: test(), exec() şi compile().

Metoda test()

Caută într-un şir un model şi returnează true sau false.

Exemplu:

Deoarece modelul "e" apare în şir, metoda va returna valoarea true care va fi afişată.

Metoda exec()

Caută în text un model şi returnează modelul, dacă acesta este găsit, sau valoarea null, dacă modelul nu apare în text.

Exemplu:

Deoarece modelul "e" apare în şir, metoda va returna valoarea e care va fi afişată.

Puteţi adăuga al doilea parametru obiectului RegExp, pentru a specifica modul de căutare. Spre exemplu, dacă doriţi să găsiţi toate apariţiile unui caracter, puteţi folosi parametrul "g" ("global").

Cînd utilizaţi parametrul "g", metoda exec() lucrează astfel:

Găseşte prima apariţie a modelului "e" şi îi memorează poziţia
Dacă executaţi din nou metoda exec(), căutarea va începe de la poziţia memorată anterior ş.a.m.d.

Exemplu:

Deoarece modelul "e" apare de şase ori în text, programul de mai sus va afişa secvenţa:eeeeeenull

Metoda compile()

Este utilizată pentru a modifica conţinutul obiectului RegExp.

Metoda poate schimba modelul căutat şi poate adăuga sau elimina al doilea parametru.

Exemplu:

Deoarece modelul "e" apare în şir, dar modelul "d" nu apare, programul anterior va afişa valorile: truefalse

Exemple:

Exemplul 1

Ilustrează utilizarea metodei match() a obiectului String pentru a găsi toate caracterele precizate în model cu ajutorul parantezelor pătrate.

Programul va afişa rezultatul: e,a,f,a,c

Exemplul 2

Ilustrează utilizarea metodei match() a obiectului String pentru a găsi toate caracterelor diferite de cele din model.

Programul anterior va afişa rezultatul: C, ,m,i, ,i,?

Exemplul 3

Ilustrează cum se poate construi un model care să găsească toate secvenţele în care un caracter poate avea orice valoare.

Programul va găsi toate ecvenţele de trei caractere în care primul şi ultimul caracter este „a”.

Rezultatul afişat pentru şirul de mai sus este: ana,ata

Exemplul 4

Ilustrează cum se poate construi un model care să găsească toate caracterele care nu fac parte dintr-un cuvînt.

Programul anterior va afişa rezultatul: , ,%,!

Exemplul 5

Ilustrează cum se poate construi un model cu care să înceapă sau să se sfirşească un cuvînt.

Dacă nu este găsit nici-un cuvînt care începe sau se sfîrşeşte cu modelul dat, metoda match() va returna valoarea null. Pentru exemplul considerat anterior, există în text un cuvînt care se potriveşte şi metoda returnează modelul.

Rezultatul afişat este: Go

Exemplul 6

Ilustrează cum se pot găsi toate secvenţele dintr-un text, în care un anumit caracter apare cel puţin o dată.

Programul anterior va determina toate secvenţele din text în care caracterul „e” apare cel puţin o dată (în poziţii consecutive).

Rezultatul afişat de program este: ee e e e e null

Exemplul 7

Ilustrează cum se pot găsi secvenţele de text în care un anumit caracter apare de minim x ori.

Programul anterior afişează rezultatul: 100,1000,10000, adică secvenţele care conţin cel puţin trei cifre zecimale.

Exemplul 8

Ilustrează cum se pot găsi toate subşirurile dintr-un text, care sunt urmate de un subşir dat.

Programul anterior determină toate şirurile „eu” care sunt urmate de şirul „am”.

Rezultatul afişat este: eu,eu

Obiectul Number

Obiectul Number este un container pentru valorile numerice de bază.

Obiectele Number sunt create cu următoarea sintaxă:

var nume = new Number(valoare);

Obs: Dacă parametrul valoare nu poate fi convertit într-un număr, va fi returnată valoarea NaN (Not-a-Number).

Proprietăţile obiectului Number

Proprietate	Descriere
constructor	Returnează funcţia care a creat prototipul obiectului
MAX_VALUE	Returnează cel mai mare număr posibil în JavaScript
MIN_VALUE	Returnează cel mai mic număr posibil în JavaScript
NEGATIVE_INFINITY	Reprezintă infinitul negativ (returnat la depăşire)
POSITIVE_INFINITY	Reprezintă infinitul pozitiv (returnat la depăşire)
prototype	Permite adăugarea de proprietăţi şi metode

Metodele obiectului Number

Metodă	Descriere
toExponential(x)	Converteşte numărul într-o notaţie exponenţială
toFixed(x)	Formează un număr cu x cifre după virgulă
toPrecision(x)	Formează un număr cu lungimea x
toString()	Converteşte un obiect Number în şir de caractere. Dacă metoda are parametru, acesta precizează baza în care este reprezentat numărul convertit în şir.
valueOf()	Returnează valoarea primară a obiectului

Exemple:

Exemplul 1

Ilustrează cum se afişează cel mai mare număr din JavaScript.

Exemplul 2

Ilustrează cum se stabileşte numărul de zecimale afişate.

Exemplul 3

Ilustrează cum se stabileşte precizia numărului afişat (numărul total de cifre afişate).

Exemplul 4

Ilustrează cum se converteşte în şir un număr, folosind diferite baze de numeraţie.

Obiectul Navigator

Obiectul Navigator conţine informaţii despre browserul vizitatorului. Aproape orice exemplu din acest curs funcţionează în browserele care recunosc JavaScript. Totuşi, unele exemple nu funcţionează în anumite browsere, în special în cele vechi. De aceea, uneori este foarte util să determinaţi browserul utilizat de vizitator pentru a-i putea furniza informaţiile potrivite. Cea mai bună metodă este să vă proiectaţi paginile web să se comporte diferit, în funcţie de browserul vizitatorului. Obiectul Navigator poate fi utilizat în acest scop, deoarece conţine informaţii despre numele şi versiunea browserului vizitatorului.

Proprietățile obiectului Navigator

Proprietate	Descriere
appCodeName	Returnează codul browserului
appName	Returnează numele browserului
appVersion	Returnează informaţii despre versiunea browserului
cookieEnabled	Determină dacă are cookies activate
platform	Returnează pentru ce platformă este compilat browserul

Exemple:

Exemplul 1

Variabila "browser" din exemplul următor memorează numele browserului. Proprietatea appVersion returnează un şir de caractere care conţine mult mai multe informaţii, nu numai numărul versiunii. Deoarece ne interesează numai versiunea, pentru a o extrage din şir, se utilizată o funcţie numită parseFloat(), care extrage din şir şi returnează prima secvenţă care arată ca un număr zecimal.

Exemplul 2

Ilustrează cum pot fi afişate diferite mesaje, în funcţie de tipul şi versiunea browserului.

Exemplul 3

Ilustrează cum pot fi afişate mai multe detalii despre browserul vizitatorului

Obiectele browserului

Obiectul window

Acest obiect reprezintă o fereastră deschisă în browser. Dacă conţine cadre (tagurile <frame> sau <iframe>), browserul creează un obiect window pentru documentul HTML, şi cîte un obiect window pentru fiecare cadru.

Proprietăţile obiectului window

Proprietate	Descriere
closed	Returnează o valoare booleană care indică dacă fereastra a fost închisă sau nu
defaultStatus	Setează sau returnează textul implicit din bara de stare a ferestrei
document	Returnează obiectul Document al ferestrei
frames	Returnează un tablou cu toate cadrele din fereastra curentă
history	Returnează obiectul History al ferestrei
innerHeight	Setează sau returnează înălţimea interioară a zonei de conţinut a ferestrei
innerWidth	Setează sau returnează lăţimea interioară a zonei de conţinut a ferestrei
length	Returnează numărul de cadre (inclusiv cele inline) din fereastră
location	Returnează obiectul Location al ferestrei
name	Setează sau returnează numele ferestrei
opener	Returnează referinţa care a creat fereastra
outerHeight	Setează sau returnează înălţimea exterioară a ferestrei (inclusiv toolbars/scrollbars)
outerWidth	Setează sau returnează lăţimea exterioară a ferestrei (inclusiv toolbars/scrollbars)
pageXOffset	Returnează numărul de pixeli cu care documentul curent a fost derulat orizontal, în raport cu colţul stinga sus al ferestrei
pageYOffset	Returnează numărul de pixeli cu care documentul curent a fost derulat vertical, în raport cu colţul stinga sus al ferestrei
parent	Returnează fereastra părinte a ferestrei curente
screenLeft	Returnează coordonata x a ferestrei, relativ la ecran
screenTop	Returnează coordonata y a ferestrei, relativ la ecran
screenX	Returnează coordonata x a ferestrei, relativ la ecran
screenY	Returnează coordonata y a ferestrei, relativ la ecran
self	Returnează fereastra curentă
status	Setează textul din bara de stare a ferestrei
top	Returnează cea mai din vîrf fereastră deschisă în browser

Metodele obiectului window

Metodă	Descriere
alert()	Afişează o casetă de alertare care conţine un mesaj şi un buton OK
blur()	Îndepărtează focus-ul de la fereastra curentă
clearInterval()	Resetează timer-ul setat cu setInterval()
clearTimeout()	Resetează timer-ul setat cu setTimeout()
close()	Închide fereastra curentă
confirm()	Afişează o casetă de dialog care conţine un mesaj şi butoanele OK şi Cancel
createPopup()	Creează o fereastră Pop-up
focus()	Fixează focus-ul pe fereastra curentă
moveBy()	Mută fereastra, relativ la poziţia ei curentă
moveTo()	Mută fereastra într-o nouă poziţie
open()	Deschide o nouă fereastră în browse
print()	Tipăreşte conţinutul ferestrei curente
prompt()	Afişează o casetă de dialog care cere utilizatorului să introducă anumite informaţii
resizeBy()	Redimensionează fereastra la dimensiunea specificată în pixeli
resizeTo()	Redimensionează fereastra la înălţimea şi lăţimea specificate
scrollBy()	Derulează conţinutul ferestrei cu numărul specificat de pixeli
scrollTo()	Derulează conţinutul ferestrei pînă la coordonatele specificate
setInterval()	Apelează o funcţie sau evaluează o expresie la intervale specificate de timp (în milisecunde)
setTimeout()	Apelează o funcţie sau evaluează o expresie dupa un număr specificat de milisecunde

Exemplul 1

Ilustrează utilizarea metodelor open() şi focus()

Exemplul 2

În acest exemplu, funcţia clock() este apelată la fiecare 1000 milisecunde şi actualizează ceasul afişat. Ceasul poate fi oprit prin apăsarea unui buton

Exemplul 3

Ilustrează mutarea ferestrei curente cu 250 pixeli relativ la poziţia ei curentă

Exemplul 4

Ilustrează redimensionarea ferestrei curente

Exemplul 5

Ilustrează utilizarea metodei blur() pentru a trimite o fereastră în background.

Obiectul screen

Acest obiect conţine informaţii despre ecranul vizitatorului.

Proprietăţile obiectului screen

Proprietate	Descriere
availHeight	Returnează înălţimea ecranului (fără Taskbar)
availWidth	Returnează lăţimea ecranului (fără Taskbar)
colorDepth	Returnează numărul de biţi din paleta de culori folosită pentru afişarea imaginilor
height	Returnează înălţimea totală a ecranului
pixelDepth	Returnează rezoluţia culorii ecranului (în biţi/pixel)
width	Returnează lăţimea totală a ecranului

Exemplu următor ilustrează utilizarea tuturor proprietăţilor obiectului screen pentru a obţine informaţii despre ecranul vizitatorului:

Obiectul history

Acest obiect conţine URL-urile vizitate de utilizator (într-o fereastră de browser). Obiectul history face parte din obiectul window şi este accesat prin proprietatea window.history.

Proprietăţile obiectului history

Proprietate	Descriere
length	Returnează numărul de URL-uri din lista history

Metodele obiectului history

Metodă	Descriere
back()	Încarcă URL-ul anterior din lista history
forward()	Încarcă URL-ul următor din lista history
go()	Încarcă un anumit URL din lista history

Obiectul location

Obiectul location conţine informaţii despre URL-ul curent. Obiectul location este parte a obiectului window şi este accesat prin intermediul proprietăţii window.location.

Proprietăţile obiectului location

Proprietate	Descriere
hash	Returnează porţiunea de ancoră din URL
host	Returnează hostname-ul şi port-ul URL-ului
hostname	Returnează hostname-ul URL-ului
href	Returnează întregul URL
pathname	Returnează numele căii URL-ului
port	Returnează numărul de port pe care serverul îl utilizează pentru URL
protocol	Returnează protocolul URL-ului
search	Returnează porţiunea query din URL

Metodele obiectului location

Metodă	Descriere
assign()	Încarcă un nou document
reload()	Reincarcă documentul curent
replace()	Înlocuieşte documentul curent cu un alt document

Exemplu

Ilustrează utilizarea metodei assign()

Cookies

Un cookie este o variabilă păstrată în calculatorul vizitatorului. De fiecare dată cînd calculatorul respectiv cere browserului o pagină, el va trimite şi cookie-ul respectiv. Cu JavaScript, puteţi crea şi extrage cookies.

Exemple de cookies:

1. Numele utilizatorului – Prima dată cînd utilizatorul vă vizitează pagina trebuie să-şi completeze numele. Numele este stocat într-un cookie. Următoarea dată cînd vizitatorul ajunge la pagina dvs., puteţi să-l întimpinaţi cu un mesaj de genul "Bine ai venit........!" Numele este recuperat dintr-un cookie.

2. Parolă – Prima dată utilizatorul vă vizitează pagina trebuie să completeze o parolă. Parola este memorată într-un cookie. Data viitoare cînd vizitatorul ajunge în pagină, parola poate fi recuperată dintr-un cookie.

3. Data calendaristică – Prima dată cînd utilizatorul vă vizitează pagina, data curentă este memorată într-un cookie. Data viitoare cînd utilizatorul vă vizitează pagina, puteţi să afişaţi un mesaj de genul "Ultima dvs. vizita a fost in data de .........." Această dată este recuperată dintr-un cookie.

Crearea şi memorarea unui cookie

În acest exemplu vom crea un cookie care memorează numele vizitatorului, apoi vom folosi numele memorat în variabila cookie pentru a afişa un mesaj de bun venit. Prima dată vom crea o funcţie care memorează numele vizitatorului într-o variabilă cookie:

Parametrii funcţiei reprezintă numele şi valoarea cookie-ului şi numărul de zile pînă cînd acesta expiră. Funcţia converteşte numărul de zile într-o dată validă şi apoi adaugă numărul de zile după care va expira cookie-ul. Apoi, numele şi valoarea cookie-ului şi data expirării sunt memorate într-un obiect document.cookie.

În continuare, vom crea o funcţie care verifică dacă cookie-ul a fost setat:

Funcţia verifică mai întii dacă în obiectul document.cookie este memorat vre-un cookie. În caz afirmativ, verificăm dacă este memorat cookie-ul dorit. Dacă cookie-ul este găsit, îi returnăm valoarea, în caz contrar returnăm un şir vid. În cele din urmă, vom crea funcţia care afişează un mesaj de bun venit dacă cookie-ul este setat şi o casetă prompt care cere numele vizitatorului, în caz contrar:

Programul complet este:

Exemplul prezentat execută funcţia checkCookie() cînd pagina se încarcă.

Obiectul Form

Formularele sunt elemente HTML care dau viata unor pagini statice deoarece asigura o interfata prin care vizitatorii pot interactiona, cu ajutorul controalelor (elemente ale formularului).

Obiectul Form este mijlocul prin care se poate interactiona cu acest element HTML in scripturile JavaScript.

Metode și proprietati ale obiectului Form

Proprietatile obiectului Form

Proprietate	Descriere
action	Contine atributul "action" din eticheta <form>, specifica adresa URL unde este trimis formularul
elements	Matricea care contine toate elementele din <form>
encoding	Contine atributul "enctype" din <form>, specifica o codificare MIME a formularului
length	Numarul de elemente continute in formular method - contine atributul "method" din <form>, defineste felul in care formularul este trimis serverului (get sau post)
name	Contine atributul "name" al unei etichetei <form>
target	Contine atributul "target" al etichetei <form>, specifica fereastra in care serverul ar trebui sa returneze informatiile. Daca nu este specificata, serverul afiseaza Rezultatele in fereastra care a expediat formularul

Metodele obiectului Form

Proprietate	Descriere
handleEvent()	Apeleaza handlerul de eveniment specificat
reset()	Readuce elementele formularului la valorile prestabilite
submit()	Declanseaza un eveniment "submit" care trimite datele spre programul specificat in atributul "action" al etichetei <form>

Trimiterea formularelor spre server

Limbajul JavaScript permite prelucrarea datelor introduse in formular inainte ca acestea sa fie trimise spre procesare la programul (scriptul) de pe server. Puteti expedia dadele unui formular utilizand una din cele doua modalitati:

- Prin apelarea metodei "submit()" a obiectului "Form".
- Prin click pe un buton Submit care trimite automat datele din formularul de care apartine.

Multe din proprietatile obiectului "Form" se ocupa de informatiile suplimentare care sunt trimise la server prin intermediul formularului. Aceste proprietati sunt:

- action - specifica adresa URL a programului catre care vor fi trimise datele din formular

Exemplu:

Pentru formularele care folosesc metoda "post" puteti preciza in atributul "action" ca datele sa fie trimise prin e-mail, folosind urmatoarea sintaxa:

Cînd expediati formularul, se va deschide un client de e-mail ce contine, printre altele, și perechile de "nume-valoare" ale elementelor (casetelor) cuprinse in formular.

- enctype - specifica o codificare MIME a formularului, valoarea prestabilita este "application/x-www-form-urlencode".

O metoda de verificare a acestei codificari este urmatoarea:

if (f1.enctype == "application/x-www-form-urlencode") {
alert("Tipul de codificare e normal");
}

Un alt tip de codificare des folosit este "text/plain".

Iata un exemplu:

Proprietatea enctype="text/plain" este folosita pentru a trimite text neformatat. Prin aceasta, mailul va fi mai usor de citit, in cadrul mesajului va apare optiunea aleasa. Fara specificarea acestei proprietati mailul va avea ca atasament un fisier cu optiunea aleasa.

- method - defineste modul in care datele formularului sunt expediate. Se poate folosi valoarea "get" sau "post".

Pentru formularele care folosesc metoda "get", in majoriatea site-urilor este disponibil un program CGI de testare, numit "test-cgi" furnizat impreuna cu serverul (locatia fisierului "test-cgi" poate fi diferita, intrebati administratorul serverului). Folositi urmatoarea sintaxa:

Veti primi o pagina care va contine, printre altele, și valorile elementelor din formular. Pentru incepatori, mai putin cunoscatori, și pentru folosirea cu scripturi PHP, este recomandata metoda "post". Pentru formularele care folosesc metoda "post", in majoriatea site-urilor este disponibil un program CGI de testare, numit "post-query" furnizat impreuna cu serverul (locatia acestuia poate fi diferita, intrebati administratorul serverului). Daca doriti sa verificati ce date trimite formularul, folositi urmatoarea eticheta:

Cind trimiteti formularul veti primi, printre altele, și perechile de "nume-valoare" corespunzatoare elementelor din formular. Puteti verifica tipul metodei de trimitere a datelor și cu un script JavaScript, ca in exemplul urmator:

Daca doriti sa faceti o verificare a datelor din formular inainte ca acestea sa fi expediate la server, puteti folosi evenimentul "onSubmit".

onSubmit - este folosita pentru a valida formularul inainte de a fi trimis.

Metoda "onSubmit" se introduce in interiorul etichetei <form>, ca in exemplul urmator:

Validarea formularelor

JavaScript poate fi utilizat pentru a valida formularele HTML înainte de a fi trimise către server.

Datele verificate uzual cu JavaScript pot fi:

au rămas cîmpuri obligatorii necompletate?
adresa de e-mail este validă?
data calendaristică este validă?
s-a introdus text într-un cimp numeric?
ş.a.

Cîmpuri obligatorii

Exemplul următoar utilizeaza o funcţie care verifică dacă un cîmp obligatoriu a rămas necompletat. În caz afirmativ, o casetă de alertare afişează un mesaj şi funcţia returnează valoarea false. Dacă cîmpul a fost completat, funcţia returnează valoarea true şi data este considerată validă:

Validarea adresei de e-mail

Exemplul următoar utilizează o funcţie care verifică dacă cîmpul respectă sintaxa generală a unei adrese de e-mail. Asta înseamnă că date respectivă trebuie să conţină cel puţin caracterul @ şi un punct. De asemenea, @ nu poate fi primul caracter din şir, iar ultimul punct trebuie să fie cel puţin la un caracter distanţă de @:

Validarea Butoanelor Radio şi Checkbox

În caz că sunt mai multe variante de răspuns la o întrebare şi doriţi să se poată alege doar una este suficient să daţi nume identice butoanelor radio care sunt cuprinse în acea întrebare. Vom folosi JavaScript pentru a ne asigura că formularul nu va fi trimis fără să fie bifat un răspuns la fiecare întrebare.

Întroducem funcţia check_buttons care va indica spre fişierul care să preia datele din formular numai în cazul în care s-a răspuns la fiecare rubrică. Vom verifica asta cu IF, parcurgînd înainte fiecare buton ca pe un array cu FOR.

Animaţie

Puteţi folosi JavaScript pentru a crea imagini animate. Secretul este să lăsaţi scriptul să afişeze imagini diferite pentru evenimente diferite.

În exemplul următor vom adăuga o imagine care se va comporta ca un link în pagina web. Vom adăuga apoi un eveniment onMouseOver şi un eveniment onMouseOut care vor apela două funcţii JavaScript ce vor comuta între două imagini.

Codul HTML arată astfel:

Observaţi că imaginea a primit un id, pentru ca JavaScript să poată referi imaginea în diferite puncte din script. Evenimentul onMouseOver va spune browserului că, în momentul în care mouse-ul trece peste imagine, trebuie apelată o funcţie care să schimbe imaginea. Evenimentul onMouseOut va spune browserului că, atunci cînd mouse-ul se îndepărtează de imagine, trebuie apelată o funcţie care va afişa din nou imaginea iniţială.

Codul celor două funcţii este:

Funcţia mouseOver() va determina afişarea imaginii "img1.gif", iar funcţia mouseOut() va determina afişarea imaginii "img2.gif". Efectul de animaţie este mai vizibil dacă cele două imagini sunt foarte asemănătoare, diferind spre exemplu prin culoare.

Codul întregului program este:

Imagini mapate

O imagine mapată (image-map) este o imagine care are zone ce pot fi acţionate cu mouse-ul. În mod normal, fiecare zonă are un hiperlink asociat. În tagurile <area> din imaginea mapată pot fi adăugate evenimente care apelează funcţii JavaScript. Tagul <area> suportă evenimentele onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus şi onBlur.

Exemplul următor ilustrează utilizarea unei imagini mapate într-un program HTML:

Programarea evenimentelor

Codurile JavaScript pot fi execute la intervale de timp programate. Programarea evenimentelor JavaScript se realizează uşor cu ajutorul următoarelor două metode:

setTimeout() – execută un cod cîndva în viitor
clearTimeout() – anulează programările realizate cu setTimeout()

Obs: Ambele metode aparţin obiectului Window din HTML DOM.

Metoda setTimeout()

Sintaxă:

var t=setTimeout("declaraţie javascript", milliseconds);

Metoda setTimeout() returnează o valoare care este memorată în variabila t declarată mai sus. Dacă doriţi să anulaţi programarea, o puteţi face folosind variabila asociată. Primul argument al metodei este un şir de caractere care conţine o declaraţie JavaScript care poate fi, de exemplu, un apel de funcţie sau instrucţiunea de afişare a unei casete de mesaj. Al doilea parametru precizează numărul de milisecunde (începind de acum) după care va fi executat primul parametru.

Obs: O secundă are 1000 de milisecunde.

Exemplul 1

În exemplul următor, cînd butonul este apăsat, o casetă de alertare va fi afişată după 7 secunde.

Exemplul 2

Pentru a repeta la infinit o secvenţă de cod, trebuie să scriem o funcţie care se autoapelează. În exemplul următor, cînd butonul este apăsat, un cîmp de intrare dintr-un formular va începe să numere, plecînd de la zero, secundele scurse, fără să se oprească. A fost inclusă şi o funcţie care verifică dacă numărătorul funcţionează deja, pentru a nu crea un alt numărător dacă butonul este apăsat de mai multe ori.

Metoda clearTimeout()

Sintaxă:

clearTimeout(variabila_setTimeout)

În exemplul următor utilizăm numărătorul infinit din exemplul următor şi adăugăm o funcţie care va opri numărătorul la apăsarea unui buton:

Exemplu

Acest exemplu ilustrează crearea unui ceas cu ajutorul evenimentelor programate.

Depanarea aplicaţiilor JavaScript

Instrucţiunea try...catch

Cînd navigăm prin paginile web de pe internet, pot să apară mesaje de eroare la încărcarea unei pagini. În acest caz, uzual, apare o casetă de alertare JavaScript care ne anunţă că s-a detectat o eroare de execuţie (runtime error) şi ne întreabă dacă dorim să depanăm codul paginii. Aceste mesaje sunt utile pentru proiectanţii paginilor web, nu şi pentru vizitatori care, de obicei, părăsesc pagina respectivă.

În acest capitol veţi invăţa cum să gestionaţi mesajele de eroare JavaScript, astfel încît să nu vă pierdeţi audienţa.

Instrucţiunea try...catch vă permite să testaţi blocurile de cod pentru a depista erorile. Blocul try conţine codul ce trebuie executat, iar blocul catch conţine codul ce va fi executat dacă apare o eroare.

Sintaxă:

try {
codul ce trebuie executat
}
catch(err) {
gestionarea erorilor
}

Exemple

În exemplul următor ar trebui afişată o casetă de alertare cu mesajul "Bine ati venit!" cînd butonul este acţionat. Totuşi, în corpul funcţiei mesaj() există o eroare, cuvîntul rezervat alert este scris greşit. Această eroare va fi detectată de JS. Blocul catch sesizează eroarea şi execută un cod special pentru a o rezolva. Acest cod afişează un mesaj de eroare pentru a informa utilizatorul ce se întimplă. Dacă utilizatorul apasă butonul OK, încărcarea paginii va continua fără probleme:

În exemplul următor alert este de asemenea scris greşit. Blocul catch utilizează o casetă de confirmare pentru a afişa un mesaj care informează utilizatorii că pot apăsa OK pentru a continua să viziteze pagina în care a fost depistată eroarea sau pot apăsa Cancel dacă doresc să se întoarcă la pagina principală (homepage). Dacă metoda confirm returnează false (utilizatorul a acţionat butonul Cancel), atunci utilizatorul este redirectat. Dacă confirm returnează true, codul din blocul catch nu are nici-un efect:

Instrucţiunea throw

Această instrucţiune vă permite să creaţi o excepţie. Dacă o utilizaţi împreună cu instrucţiunea try...catch, puteţi controla execuţia programului şi afişa mesaje de eroare adecvate.

Sintaxă:

throw(exceptie)

Argumentul exceptie poate fi un şir de caractere, un număr întreg, o valoare booleană sau un obiect.

Examplu:

Exemplul următor testează valoarea variabilei x. Dacă valoarea este mai mare decit 0, mai mică decit 10 sau nu este un număr, blocul throw aruncă o eroare. Această eroare este prinsă de blocul catch care afişează un mesaj corespunzător:

Examplu:

Exemplul următor ilustrează utilizarea evenimentului onerror

Crearea obiectelor proprii

Obiectele sunt utile pentru a organiza informaţia. În completarea obiectelor predefinite în JavaScript, cum ar fi String, Date, Array, etc., vă puteţi crea propriile obiecte.

Un obiect este doar un tip particular de date, cu o colecţie de proprietăţi şi metode. Spre exemplu, o persoană este un obiect inzestrat cu proprietăţi cum ar fi: nume, virstă, inălţime, greutate, culoarea ochilor etc. Proprietăţile au anumite valori, care diferă de la o persoană la alta. Metodele sunt acţiuni care pot fi realizate cu un obiect. Pentru obiectul persoana, acestea ar putea fi: mananca(), munceste(), doarme(), scrie(), citeste() etc.

Proprietăţile

Pentru a accesa o proprietate a unui obiect sintaxa este:

nume_obiect.nume_proprietate

Puteţi adăuga proprietăţi unui obiect prin simpla atribuire de valori. Dacă presupunem că obiectul persoana există deja, putem să-i adăugăm proprietăţi prin atribuiri, ca în exemplul următor:

Codul de mai sus va afişa rezultatul: Popescu

Metodele

Pentru a accesa o metodă a unui obiect sintaxa este:

Nume_obiect.nume_metoda()

Obs: Dacă metoda are parametri, ei vor fi scrişi între paranteze.

Un obiect poate fi creat în trei moduri:

1. Crearea directă a unui obiect

Secvenţa următoare de cod creează un obiect şi ii adaugă proprietăţi:

persoana=new Object();
persoana.nume="Popescu";
persoana.prenume="Andrei";
persoana.varsta=25;
persoana.ochi="verzi";

Adăugare unei metode se face simplu, ca în exemplul următor:

persoana.scrie=scrie;

2. Crearea şablonului unui obiect

Şablonul defineşte structura unui obiect:

function persoana(nume,prenume,varsta,ochi)
{
this.nume=nume;
this.prenume=prenume;
this.varsta=varsta;
this.ochi=ochi;
}

Observaţi că şablonul este doar o funcţie. În interiorul funcţiei trebuie să faceţi atribuiri pentru this.nume_proprietate. Construcţia "this" se referă la instanţa curentă a obiectului.

După ce aţi construit şablonul obiectului, puteţi crea noi instanţe după modelul următor:

tata=new persoana("Marcu","Ion",40,"verzi");
mama=new persoana("Marcu","Maria",38,"negri");

Adăugarea de metode obiectului persoana se realizează tot în interiorul şablonului:

function persoana(nume,prenume,varsta,ochi)
{
this.nume=nume;
this.prenume=prenume;
this.varsta=varsta;
this.ochi=ochi;

this.numenou=numenou;
}

Observaţi că metodele sunt funcţii ataşate obiectului. Acum va trebui scrisă

funcţia numenou():
function numenou(str)
{
this.nume=str;
}

Puteţi folosi metoda astfel: mama.numenou(”Georgescu”);

Proprietăţi şi metode globale

Aceste proprietăţi şi metode pot fi folosite pentru orice variabile, din acest motiv se numesc globale.

Proprietăţile

Proprietate	Descriere
Infinity	O valoare numerică care reprezintă infinitiv pozitiv/negativ
NaN	O valoare "Not-a-Number"
undefined	Indică o variabilă căreia nu i-a fost atribuită o valoare

Exemplul 1

Ilustrează utilizarea proprietăţii NaN:

Exemplul 2

Ilustrează utilizarea proprietăţii undefined:

Metodele

Funcţie	Descriere
escape()	Codează caracterele speciale dintr-un şir de caractere astfel incit şirul devine portabil în reţea către orice calculator care suportă codurile ASCII
eval()	Evaluează un şir de caractere şi, dacă şirul conţine o secvenţă de cod JavaScript, execută secvenţa
isFinite()	Determină dacă valoarea este un număr valid, finit
isNaN()	Determină dacă valoarea este un număr invalid
Number()	Converteşte valoarea unui obiect în număr
parseFloat()	Converteşte un şir într-un număr zecimal
parseInt()	Converteşte un şir într-un număr întreg
String()	Converteşte valoarea unui obiect într-un şir
unescape()	Decodează un şir codat

Exemplul 1

Ilustrează utilizarea metodei eval():

Exemplul 2

Ilustrează utilizarea metodei Number():

Exemplul 3

Ilustrează utilizarea metodei parseFloat() pentru a extrage valoarea dintr-un şir ca număr zecimal:

Obs. Metoda verifică dacă primul caracter din şir poate apare în scrierea unei valori zecimale şi, în caz afirmativ continuă construirea acestui număr pină la intilnirea primului caracter care nu poate apare în scrierea unui număr.

Exemplul 4

Ilustrează utilizarea metodei parseInt() pentru a extrage valoarea dintr-un şir ca număr întreg:

Obs. Dacă numărul începe cu 0 va fi interpretat ca fiind scris în baza 8, iar dacă începe cu 0x ca fiind scris în baza 16. Baza poate fi specificată şi prin adăugarea celui de-al doilea parametru în metodă. Conversia se încheie la întilnirea primului caracter din şir care nu poate aparea în scrierea unui număr întreg.

Exemple de coduri practice folosind JavaScript

Exemplul #1: Tabel multiplicat

Crearea unui tabel simplu de multiplicat solicitând utilizatorului numărul de rânduri și coloane pe care le dorește.

Exemplul #2: Formular

Crearea unui formular care colectează numele, prenumele, e-mailul, id-ul de utilizator și parola. Toate intrările sunt obligatorii iar adresa de e-mail introdusă trebuie să fie în format corect. De asemenea, valorile introduse în câmpurile de parolă și de confirmare a parolei trebuie să fie aceleași. La trecerea în alt câmp se face validarea folosind JavaScript afișinduse mesaje de eroare în culoarea roșie, lângă caseta de text în care există o eroare și se va afișa mesajul OK în caz că corespunde.

Exemplul#3: Mesaj POPUP

Afișarea unui mesaj simplu "Bun venit!" pe pagina dvs. și atunci când utilizatorul se deplasează peste mesaj, trebuie să apară un pop-up cu mesajul "Bine ați venit pe pagina mea web !!!".