====== Lecția 8: JavaScript Continuare ====== ====Tutorial==== În această lecție vom învăța despre formulare, butoane, despre evenimentul onClick și funcția getElementById. ====Formulare==== Formularele sunt modalități prin care utilizatorul poate interacționa cu pagina HTML. Un exemplu de formular este următorul:

See the Pen rLGHz by andreea (@andreeas) on CodePen.

Elementele unui formular se declară între etichetele **
** si **
**. ===Un formular poate conține următoarele elemente:=== *Casete pentru introducere text: Pe o singura linie: Exemplu: Pentru a seta o valoare implicită se specifică atribitul **value** sau atributul **placeholder**: sau Care este diferența dintre **value** si **placeholder**? Pe mai multe linii: Exemplu: Pentru acest element valoarea implicită se setează astfel: De asemenea se poate seta și atributul placeholder. *Elemente select: Exemplu: Putem selecta implicit o opțiune adăugând atributul **selected** opțiunii dorite. *Elemente radio: Optiunea 1 Optiunea 2 Exemplu: Optiunea 1 Optiunea 2 Pentru a selecta implicit una din opțiuni putem folosi atributul **checked** pentru opțiunea dorită. *Checkbox-uri: Exemplu: Dacă dorim ca checkbox-ul să fie implicit bifat, putem folosi atributul **checked**. ===Butoane=== Sintaxă: Buton pentru resetare formular: Buton pentru trimitere formular: ====Evenimentul onClick==== Evenimentul **onClick** specifică ce trebuie să se întâmple atunci când se apasă pe un element din pagina HTML. El se specifică sub forma unui atribut al elementului pentru care dorim să modificăm comportamentul în momentul în care se apasă pe elementul respectiv, iar în interiorul său se introduce cod Javascript, cel mai adesea se apelează o funcție. Exemplu: sau ====Funcția getElementById==== Funcția Javascript **document.getElementById** este folosită pentru a putea prelua în variabile Javascript date din pagina HTML. Pentru a putea accesa un element din pagină, elementul respectiv trebuie să conțină atributul **id**. Exemplu:
După preluarea elementului putem accesa următoarele proprietăți: *dacă elementul este de tipul div, p, span sau alte elemente care conțin text, putem folosi atributul innerHTML pentru a prelua sau modifica conținutul elementului. Exemplu:
Text implicit
 *dacă elementul este de tipul input, textarea sau select, atunci putem folosi atributul **value** pentru a prelua sau modifica valoarea introdusă sau selectată. Exemplu:

See the Pen GBsjg by andreea (@andreeas) on CodePen.

*atributul style ne permite modificarea proprietăților CSS. Sintaxa este următoarea: element.style.proprietate_css = 'valoare_css'; Exemplu:

See the Pen Bnhry by andreea (@andreeas) on CodePen.

====Task-uri==== Creați un formular cu o tematica aleasă de voi care să conțină: * 2 casete cu o singura linie și 1 casetă cu mai multe linii * pentru fiecare casetă folosiți un buton pentru a afișa conținutul într-o fereastra **alert** * 1 element radio și un checkbox unul cu text și celălalt cu imagini * un buton care schimba culoarea unui text ales de voi în galben * un element select care contine 3 culori, prin care se alege culoarea unui text ales de voi ====Task-uri suplimentare (lectia 8)==== 1. Verificați dacă string-ul tastat într-o fereastră este numele vostru. Dacă da, afișați un mesaj de întâmpinare 2. Creați o căsuță pentru parolă și un buton. Apăsând pe buton, preluați parola și afișați un mesaj de într-o fereastră alert cu mesajul: "Parola ta a fost descoperită! Parola este ... ". 3. Creați un buton care schimbă culoarea, fontul și pune margini unui paragraf ales de voi. 4. Creați un buton care înlocuiește un text ales de voi. ====Task-uri recapitulative (lecția 7)==== 1. Folosiți instrucțiunea **switch** pentru a afișa un mesaj în funcție de ziua în care ne aflăm. Folosiți următoarea secvență pentru a prelua numărul zilei curente: var d = new Date() var ziua = d.getDay() 2. Creați un array în care să treceți numele colegilor voștrii și să-i afișați pe cei care au prima literă a numelui "A". Folosiți-vă de metoda **substring** pentru a rezolva. 3. Creați o funcție care să calculeze produsul a 3 elemente date și să afișeze rezultatul doar dacă este par. 4. Creați o functie care afiseaza toate elementele unui vector de string-uri care încept cu "ba". 5. O functie care afiseaza cel mai mare element dintr-o multime. 6. O functie care afiseaza daca un element dat exista în vector. 7. O functie care genereaza o parola random pe baza unei lungimi date.