Lecția 8: JavaScript Continuare

În această lecție vom învăța despre formulare, butoane, despre evenimentul onClick și funcția getElementById.

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

• Casete pentru introducere text: Pe o singura linie:

  <input type='text' />

  Exemplu:

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.

• Elemente select:

  <select>
     <option>Optiunea 1</option>
     <option>Optiunea 2</option>
  </select>

  Exemplu: Optiunea 1 Optiunea 2

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

<option selected>Optiunea 2</option>

• Elemente radio:

  <input type='radio' name='grup1' /> Optiunea 1
  <input type='radio' name='grup1' /> 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:

  <input type='checkbox' />

  Exemplu:

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

Sintaxă:

<button>Buton</button>

Buton pentru resetare formular:

<input type='reset' />

Buton pentru trimitere formular:

<input type='submit' />

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 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 div, p, span sau alte elemente care conțin text, putem folosi atributul innerHTML pentru a prelua sau modifica conținutul elementului. Exemplu:

  <div id='div-2'>Text implicit</div>
   
  <script type='text/javascript'>
  var element = document.getElementById('div-2');
  element.innerHTML = “Conținut ce va fi afișat în div”;
  </script>

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

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

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.

1. Folosiți instrucțiunea switch pentru a afișa un mesaj în funcție de ziua în care ne aflăm.

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

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.