Digital Kids

Această pagină poate fi doar citită. Poți vedea sursa, dar nu poți modifica pagina. Consultă administratorul dacă ești de părere că ceva este în neregulă.
====== 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:
<html>
<p data-height="180" data-theme-id="0" data-slug-hash="rLGHz" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/rLGHz/'>rLGHz</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</html>

Elementele unui formular se declară între etichetele **<form>** si **</form>**.

===Un formular poate conține următoarele elemente:===

*Casete pentru introducere text:
Pe o singura linie:
<code html><input type='text' /></code>
Exemplu: <html><input type='text' /></html>

Pentru a seta o valoare implicită se specifică atribitul **value** sau atributul **placeholder**:
<code html><input type='text' value='Valoare implicită' />
sau
<input type='text' placeholder='Text' />
</code>

Care este diferența dintre **value** si **placeholder**?

Pe mai multe linii:
<code html><textarea></textarea></code>
Exemplu: <html><textarea></textarea></html>

Pentru acest element valoarea implicită se setează astfel: <code html><textarea>Valoare implicită</textarea></code>
De asemenea se poate seta și atributul placeholder.

*Elemente select:
<code html>
<select>
   <option>Optiunea 1</option>
   <option>Optiunea 2</option>
</select>
</code>
Exemplu:
<html>
<select>
   <option>Optiunea 1</option>
   <option>Optiunea 2</option>
</select>
</html>

Putem selecta implicit o opțiune adăugând atributul **selected** opțiunii dorite.
<code html><option selected>Optiunea 2</option></code>

*Elemente radio:
<code html>
<input type='radio' name='grup1' /> Optiunea 1
<input type='radio' name='grup1' /> Optiunea 2
</code>
Exemplu:
<html>
<input type='radio' name='grup1' /> Optiunea 1
<input type='radio' name='grup1' /> Optiunea 2
</html>

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

*Checkbox-uri:
<code html><input type='checkbox' /></code>
Exemplu: <html><input type='checkbox' /></html>

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

===Butoane===
Sintaxă:
<code html><button>Buton</button></code>

Buton pentru resetare formular:
<code html><input type='reset' /></code>

Buton pentru trimitere formular:
<code html><input type='submit' /></code>

====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:
<code html>
<script type='text/javascript'>
function functie() {
    alert(“test”);
}
</script>
<button onClick=”functie();”>Apasă-mă</button>
</code>

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

====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:
<code html>
<div id='div-1'></div>

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

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:
<code  html>
<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>
</code>

*dacă elementul este de tipul input, textarea sau select, atunci putem folosi atributul **value** pentru a prelua sau modifica valoarea introdusă sau selectată.
Exemplu:
<html>
<p data-height="107" data-theme-id="0" data-slug-hash="GBsjg" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/GBsjg/'>GBsjg</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</html>

*atributul style ne permite modificarea proprietăților CSS.
Sintaxa este următoarea:
<code html>
element.style.proprietate_css = 'valoare_css';
</code>

Exemplu:
<html>
<p data-height="107" data-theme-id="0" data-slug-hash="Bnhry" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/Bnhry/'>Bnhry</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</html>
    
====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 descuperită! 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.
Digital Kids

Unelte utilizator

Unelte site

Unelte pagină
