Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.
Both sides previous revision Previous revision Next revision | Previous revision | ||
module:11-basic-web-dev:lectie-08 [2014/10/31 21:11] astoican |
module:11-basic-web-dev:lectie-08 [2014/11/08 11:02] (curent) gchelu [Task-uri suplimentare (lectia 8)] |
||
---|---|---|---|
Linia 26: | Linia 26: | ||
<input type='text' placeholder='Text' /> | <input type='text' placeholder='Text' /> | ||
</code> | </code> | ||
+ | |||
+ | Care este diferența dintre **value** si **placeholder**? | ||
Pe mai multe linii: | Pe mai multe linii: | ||
Linia 103: | Linia 105: | ||
====Funcția getElementById==== | ====Funcția getElementById==== | ||
Funcția Javascript **document.getElementById** este folosită pentru a putea prelua în variabile Javascript date din pagina HTML. | 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** | + | Pentru a putea accesa un element din pagină, elementul respectiv trebuie să conțină atributul **id**. |
Exemplu: | Exemplu: | ||
<code html> | <code html> | ||
Linia 111: | Linia 114: | ||
var element = document.getElementById('div-1'); | var element = document.getElementById('div-1'); | ||
</script> | </script> | ||
- | <code> | + | </code> |
După preluarea elementului putem accesa următoarele proprietăți: | După preluarea elementului putem accesa următoarele proprietăți: | ||
Linia 124: | Linia 127: | ||
</code> | </code> | ||
- | *dacă elementul este de tipul input, textarea sau select, atunci putem folosi atributul value pentru a prelua sau modifica valoarea introdusă sau selectată. | + | *dacă elementul este de tipul input, textarea sau select, atunci putem folosi atributul **value** pentru a prelua sau modifica valoarea introdusă sau selectată. |
Exemplu: | Exemplu: | ||
<html> | <html> | ||
Linia 145: | Linia 148: | ||
====Task-uri==== | ====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. | ||
+ | <note tip>Folosiți următoarea secvență pentru a prelua numărul zilei curente: | ||
+ | var d = new Date() | ||
+ | var ziua = d.getDay() | ||
+ | </note> | ||
+ | |||
+ | 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". | ||
+ | <note tip>Folosiți-vă de metoda **substring** pentru a rezolva.</note> | ||
+ | |||
+ | 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. | ||