Programare Web: JavaScript

Lectură obligatorie

Lectura obligatorie în vederea rezolvării laboratorului de JavaScript: http://www.w3schools.com/js/default.asp. Se vor parcurge toate secțiunile din meniul din stânga, cu excepția JS AJAX și JS jQuery.

Cerințe de implementare

IMPORTANT: Cerințele de mai jos se vor rezolva obligatoriu toate:

  • fără utilizarea librăriilor externe (de exemplu, jQuery)
  • fără utilizarea selectorilor specifici jQuery (de tip $), chiar dacă aceștia sunt permiși de sintaxa JavaScript

1. Formulare și validare

Identificați în cadrul aplicației web dezvoltate minimum 3 pagini web, fiecare conținând câte un formular pentru introducerea datelor. Dacă este necesar, adăugați pagini și/sau formulare noi aplicației. Formularele trebuie să conțină, în total, minimum 20 de elemente variate, precum:

  • input-uri (text, password, radio, checkbox, date, file, etc.)
  • textarea
  • select și option

Observație: 20 de option-uri nu înseamnă respectarea cerinței de mai sus :).

Se vor valida datele introduse de utilizator folosind JavaScript la submit-ul formularelor. Controalele completate incorect (de exemplu: vârsta = -1 sau vârsta = „abc”) vor fi evidențiate vizual folosind CSS (de exemplu, contur roșu).

2. Dependențe între câmpuri

Implementați cel puțin 2 funcționalități în care valoarea unui element de introducere a datelor depinde de alt element.

Exemple:

  • a) Un input de tip text pentru vârstă care condiționează valorile acceptate într-un input de tip date
  • b) Două elemente de tip select:
    • primul conține, de exemplu, județele din România
    • al doilea va fi populat dinamic în funcție de selecția din primul (localități corespunzătoare)

Datele vor fi definite într-un fișier JavaScript separat, sub formă de variabile sau structuri JSON.

3. Carousel (carusel)

Implementați la nivelul aplicației dezvoltate un carousel care conține minimum 4 slide-uri, ce se derulează automat la un interval de 3 secunde.

Carouselul va fi definit printr-un tablou JavaScript care conține, pentru fiecare element:

  • link
  • textul asociat linkului
  • imaginea de fundal

Funcționalitate:

  • derulare automată înainte
  • navigare manuală înainte/înapoi prin butoanele „<” și „>”, afișate peste container

Elementele carouselului trebuie să fie relevante pentru tema aplicației (spre exemplu o aplicație care permite contractarea locurilor din cămine, va prezenta poze și facilități dintr-un cămin studențesc).

4. Tabel și sortare

a) Tabel clasic

Afișați un set de date sub formă de tabel (minimum 3 coloane). Dacă nu există deja o astfel de funcționalitate la nivelul aplicației dezolvate, creați una. Datele vor proveni dintr-un array/variabilă definită într-un fișier JavaScript separat (la laboatoarele viitoare acestea vor fi preluate de pe backend).

Implementați:

  • sortarea tabelului la click pe antet (header)
  • indicarea vizuală a coloanei după care se face sortarea

Celulele din antetul (header-ul) tabelului vor indica faptul că la click pe ele se poate face sortarea, precum și faptul ca tabelul este sortat după o anumita coloană. Se va folosi CSS în acest sens.

b) Tabel vertical

Implementați aceeași funcționalitate pentru o versiune „verticală” a tabelului:

  • prima coloană reprezintă antetul
  • la click pe o celulă din antet se vor sorta coloanele tabelului

5. Liste imbricate (colapsabile)

Implementați la nivelul aplicației dezvoltate o funcționalitate în care afișați anumite valori sub forma de listă (ul sau ol) ale cărei elemente (li) conțin alte liste (ul sau ol). Implementați un mecanism prin care:

  • elementele listei principale pot fi expandate/colapsate
  • sublistele devin vizibile/invizibile

Se va utiliza CSS pentru:

  • ascunderea sublistelor
  • indicarea vizuală a elementelor expandabile (care se pot expanda)

6. Funcționalitate originală

Implementați o funcționalitate originală („creativă”), folosind JavaScript, în funcție de specificul aplicației voastre. Evaluarea acestei cerințe va fi realizată de cadrul didactic, în funcție de complexitatea implementării.

Reminder

Cerințele de mai sus se vor rezolva obligatoriu:

  • fără utilizarea librăriilor externe (ex: jQuery)
  • fără utilizarea selectorilor specifici jQuery (de tip $)