Cuprins

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 <form> si </form>.

Un formular poate conține următoarele elemente:

Pentru a seta o valoare implicită se specifică atribitul value sau atributul placeholder:

<input type='text' value='Valoare implicită' />
sau
<input type='text' placeholder='Text' />

Care este diferența dintre value si placeholder?

Pe mai multe linii:

<textarea></textarea>

Exemplu:

Pentru acest element valoarea implicită se setează astfel:

<textarea>Valoare implicită</textarea>

De asemenea se poate seta și atributul placeholder.

Putem selecta implicit o opțiune adăugând atributul selected opțiunii dorite.

<option selected>Optiunea 2</option>

Pentru a selecta implicit una din opțiuni putem folosi atributul checked pentru opțiunea dorită.

Dacă dorim ca checkbox-ul să fie implicit bifat, putem folosi atributul checked.

Butoane

Sintaxă:

<button>Buton</button>

Buton pentru resetare formular:

<input type='reset' />

Buton pentru trimitere formular:

<input type='submit' />

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:

<script type='text/javascript'>
function functie() {
    alert(“test”);
}
</script>
<button onClick=”functie();”>Apasă-mă</button>

sau

<button onClick=”alert('test');”>Apasă-mă</button>

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:

<div id='div-1'></div>
 
<script type='text/javascript'>
var element = document.getElementById('div-1');
</script>

După preluarea elementului putem accesa următoarele proprietăți:

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

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ă:

* pentru fiecare casetă folosiți un buton pentru a afișa conținutul într-o fereastra alert

* un buton care schimba culoarea unui text ales de voi în galben

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.