Tehnici Web

Idei exercitii test Javascript

(Deadline: -)

Daca nu sunteti logati exercitiile nu se mai afiseaza.

  1. Veti folosi fiserele html si css din folder.

    Unele exercitii au la final, in paranteza, o lista de obiective. Ideal ar fi sa va uitati direct pe obiective si sa decideti daca vreti sa va apucati de acel exercitiu sau nu. Nu este obligatoriu sa rezolvati un exercitiu trecand prin obiectivele din paranteza (poate fi indicata acolo o proprietate/metoda dar voi sa rezolvati folosind alta proprietate/metoda).

    1. (Obligatoriu!)Se va realiza totul intr-un fisier JS extern. Toate functiile asociate evenimentelor se vor adauga dinamic. Fisierul HTML nu va fi modificat decat daca se precizeaza in mod explicit acest lucru.
    2. Scrieti o functie, numita init, care sa se apeleze la incarcarea paginii. Aceasta va crea un paragraf la inceputul paginii (deci inaintea tuturor celorlalte elemente) in care va afisa data curenta
    3. Tot la incarcarea paginii se va realiza un tabel cu 4 randuri si 4 coloane, avand id-ul "tabel". Acesta va fi inserat imediat dupa divul cu id-ul "vorbe".
    4. Se va adauga si un fragment de cod care sa faca tabelul cu id-ul "tabel" sa aiba border (intre celule), si sa afiseze celulele chiar si daca acestea nu au continut. (se va realiza totul in javascript, nu in css)
    5. La click pe butonul cu id-ul atribuie_clase trebuie sa se atribuie clasa ok elementelor din lista "ac", care au sufixul "ac" si notok celor care nu au. La click pe butonul sterge_clase, elementele vor "pierde" clasele respective.
    6. Tot la click pe butonul cu id-ul atribuie_clase elementelor de pe pozitiile pare li se va atribui clasa "par" iar celor de pe pozitiile impare, clasa "impar".
    7. In functia atribuie_clase (care se apeleaza la click pe butonul cu acelasi id) sa se adauge cod javascript astfel incat cand venim cu cursorul pe elementele din clasa ok, sa apara in interiorul elementului un span cu textul "-> bun", respectiv in dreptul celor din clasa notok textul "- > Da' tu ce cauti aici?". Cand se ia cursorul de pe ele, span-ul dispare. Atentie la cum scrieti caracterul ">"
    8. Cand se vine cu cursorul pe lista cu id-ul "ac" va fi creat si afisat in dreptul cursorului un div cu cate elemente au clasa "ok" si cate clasa "notok" (se vor numara cu ajutorul lui getElementsByClassName). Divul va urmari cursorul pe masura ce acesta se misca, avand o pozitie cu 3px in jos si in stanga fata de coordonatele cursorului. Cand se iese cu cursorul de pe lista divul va fi sters (nu ascuns). Se va realiza prin mouseenter si mouseleave, pentru a nu se activa si cand se intra sau se iese cu cursorul pe elementele listei, deoarece aceastea sunt elemente-fii ai listei
    9. De asemenea, in functia atribuie_clase sa se adauge cod javascript astfel incat cand apasam tasta "i" (fara a lua degetul de pe ea), elementele din clasa "impar" sa isi schimbe culoarea in mod aleator (la fiecare keydown)iar cand se ia degetul de pe tasta "i" sa revina la culoarea neagra. Acelasi lucru sa se intample cu tasta "p" si elementele din clasa "par". Cum ati fi rezolvat acest exercitiu fara clasele "impar" si "par" (schimbarea culorii s-ar fi realizat pentru elementele pare si impare, fara sa ne ajutam de clase)? Realizati rezolvarea alternativa intr-un comentariu.
    10. Inlocuiti lista neordonata cu id-ul "ac" cu o lista ordonata cu acelasi id, aceeasi clasa si aceleasi elemente.
    11. In interiorul paragrafului cu id-ul "test" sa se afiseze, pentru primul paragraf cu clasa "cuvinte" cate caractere nu apar in niciun tag (adica nici in elemente de tip i si nici b), cate caractere se afla in elementele de tip b si cate caractere se afla in elementele de tip i. De asemenea, sa se afiseze si care e numarul total de caractere.
    12. La click pe primul paragraf cu clasa "cuvinte", se va crea o lista care va fi adaugata la sfarsitul paginii, continand elementele de tip b si i care apar in paragraf, in ordinea aparitiei. In lista vor fi incluse tot ca elementele de tip b si i. Se va adauga dinamic un eveniment pe aceasta lista: la dubluclick lista se va ordona crescator, la dubluclick din nou descrescator, apoi iar crescator si tot asa.
    13. Se va putea face drag&drop pe orice doua elemente li din pagina. Daca face drag pe un element li si drop pe altul, textele lor se interschimba. In cazul listei cu elementele b si i, se va schimba textul din elementele b si i, nu direct din li.
    14. La schimbarea inputului de tip range cu id-ul numere se vor genera numere aleatoare care vor fi puse in tabelul cu id-ul tabel. Numerele vor fi generate intre valoarea minima a range-ului si valoarea efectiva selectata.
    15. In cazul in care radiobutton-ul pentru numere naturale e bifat, numerele generate la punctul anterior vor fi naturale. Daca, in schimb, e selectat cel pentru "reale", numerele din tabel pot fi si cu virgula.
    16. La fiecare minut va aparea un paianjen in coltul din dreapta jos al ferestrei. Va sta timp de 5 secunde si apoi va disparea:
      paianjen. In momentul diparitiei, in consola se va afisa "A disparut painjenul".
    17. Daca utilizatorul misca mouse-ul cat timp paianjenul e pe ecran, dispar toate elementele de pe pagina (inclusiv paianjenul, insa fara sa se mai afiseze in consola mesajul) si ecranul se face negru, iar apoi apare un alert in care scrie "Ai fost prins de paianjen Buahahaha!". Nu va mai aparea paianjenul in minutul urmator.
    18. In selectul cu id-ul "litere" avem 3 optiuni: litere mici, mari si medii. Prin javascript, in functia init va fi selectata optiunea litere "medii". La selectarea literelor mici, font-size-ul se va seta la jumatate din font-size-ul setat in stylesheet (exista o functie cu care se preia de acolo). La selectarea literelor mari, se va seta dublu fata de cate e scris acolo (atentie, nu il hardcodati). Pentru literele medii va fi chiar dimensiunea din stylesheet.
    19. In functia init: Pentru elementele care se afla intr-un div (unul dintre stramosii lor, nu neaparat parintele direct, e un div) si au clasa "cuvinte", elementele-copil vor primi un border albastru
    20. La apasarea unei taste (afisabile) oriunde in pagina, caracterul corespunzator ei e adaugat in textarea
    21. La ctrl+click pe textarea, aceasta se goleste
    22. Sa se adauge cod in functia init, astfel incat in exteriorul divului cu id-ul patrat se vor crea 10 divuri, fiecare avandu-l ca fiu pe anteriorul. Cel mai din interior fiu va fi chiar divul initial. Cele 10 divuri vor avea toate proprietatile css ale primului div, mai putin widthul si heightul setat.
    23. Se va crea o functie care va fi folosita la dublu-click pe aceste patrate. Cand este activata functia, creste o variabila globala, sa-i zicem nr, si seteaza culoarea de background a divului care a apelat-o la rgb(255,255, nr*25). De asemenea numarul va fi afisat in fiecare div. Cand ajunge la ultimul div catre care s-a transmis evenimentul, prin capturing sau bubbling, contorul nr e resetat la 0.
    24. Daca checkbox-ul de langa divuri e bifat, transmiterea evenimentului se face prin bubbling, altfel prin capturing.
    25. Dupa ce a fost colorat si ultimul div, si dupa ce au mai trecut inca 10 secunde de la acel moment, se reseteaza background-ul tuturor divurilor la alb.
    26. Daca se da dublu-click in timp ce e apasata tasta x, atunci divul cu pricina capata un border albastru si bubblingul nu se propaga mai departe de elementul pe care s-a dat dublu-click. Va exista un buton care reseteaza acest lucru (introdus de voi in html)
    27. Cand se apasa butonul de mouse pe un div dintre cele create anterior, se creeaza un text node (inaintea fiului sau div) cu numarul de ordine al divului (divul cel mai mare va fi 0, iar cel mai mic va fi numarul 10). Cand se ia degetul de pe butonul de mouse (oriunde in pagina), textnode-ul dispare
    28. La incarcarea paginii, in formularul din josul paginii se vor crea dinamic labeluri pentru cele 3 inputuri cu atributul name setat (un input text si 2 range). Continutul labelului va fi continutul name al inputurilor. Atentie, labelurile trebuie sa fie asociate inputurilor (atentie mare la proprietatea corespunzatoare atributului for).. De asemenea inputurilor de tip range li se vor seta proprietatile min si max la 0, respectiv 300.
    29. Se vor adauga in formular, prin html un input de tip submit si unul de tip reset. Inputul de tip submit este initial disabled.
    30. La focus pe inputul de tip text, inputul de tip submit devine enabled. La blur pe inputul de tip text, daca inputul de tip text e gol, inputul de tip submit devine disabled.
    31. Tot in formularul din josul paginii se vor crea dinamic un grup de radio buttons cu culori si un select multiplu cu nume de imagini. Culorile si imaginile vor fi preluate din xml-ul de aici (dati view page source ca sa il vedeti in formatul xml). Initial vor fi preluate in cate un Array: vector_culori si vector_imagini, si apoi acesti vectori vor fi parcursi pentru a crea selectul si inputurile). Nu salvati xml-ul local, deoarece apelurile AJAX locale nu merg decat in firefox (in Chrome veti primi o eroare CORS). Cererea AJAX se va crea prin new Object().
    32. Cand se selecteaza elemente sau se deselecteaza din selectul multiplu, apar sau dispar imaginile corespunzatoare (in dreapta selectului multiplu, in interiorul formularului).
    33. La click pe o imagine apare un alert cu a cata imagine din formular este. La click pe formular, background-ul formularului se va seta la o culoare aleatoare. Atentie, cand se face click pe o imagine, nu trebuie sa se schimbe si culoarea formularului(cu toate ca elementele imagini sunt fii ai formularului)
    34. Cand se da submit in formular, daca checkboxul e bifat, imediat sub el se va crea un iframe de dimensiune 400*400px. Targetul formularului va fi setat astfel incat pagina care preia datele sa fie deschisa in iframe. Pagina deschisa va fi "pisoiasi.html". Daca checkboxul nu e bifat, atunci pagina se deschide intr-o fereastra noua.
    35. Daca se apasa pe butonul de reset, mai intai va fi intrebat utilizatorul printr-un confirm daca vrea intr-adevar sa reseteze formularul, si, daca da, se reseteaza, iar daca raspunde nu, nu se reseteaza
    36. In fisierul javascript asociat fisierului pisoiasi.html, va exista o clasa Pisoias care va avea proprietatile publice: imagine (continand obiectul DOM asociat, Data_aparitie. Va avea si proprietatea privata vorba cu un getter si un setter asociat; si metoda miauna() care va da un alert cu proprietatea vorba. Toate aceste proprietati + metoda vor fi definite in interiorul clasei. Va exista un consructor care va primi valori pentru proprietatile imagine si pentru vorba. In constructor se va seta data curenta in Data_aparitie. Se va defini o metoda cu prototype toString(), care va transforma un obiect de tip Pisoias intr-un string care contine toate informatiile astfel incat sa poata fi refacut obiectul. Se va defini si o metoda statica fromString(sir) care primeste un sir si returneaza obiectul descris de acel sir. De asemenea vom avea si o proprietate statica care numara cate obiecte au fost create cu ajuorul constructorului.
    37. In fisierul javascript asociat fisierului pisoiasi.html, la incarcarea paginii se vor prelua datele transmise prin formular, din location-ul documentului, si se va crea un obiect pisoias cu o imagine asociata care va fi afisata la coordonatele date in inputurile range.
    38. In cazul in care pisoiasi.html a fost deschis intr-o fereastra noua, la resize pe aceasta pagina, daca dimensiunile noi sunt sub 400*400 (latimea e mai mica decat 400, sau inaltimea e mai mica de 400) atunci se va redimensiona fereastra la 400*400. Altfel daca latimea si inaltimea sunt mai mari de 400, fereastra va ramane la dimensiunile noi in urma resize-ului.
    39. In fisierul pisoiasi.html va fi creat dinamic un div 300px X 300px cu border negru si cu id-ul "pisoiasi". Sub el va fi creat un buton cu textul "clear" care va goli interiorul divului si localStorage-ul.
    40. In interiorul divului se va gasi o imagine cu o pisica, corespunzatoare setarilor din formular (cu top-ul, left-ul, sursa imaginii, border-ul dat si in plus o proprietate dataObj avand ca valoare obiectul Pisoias asociat. La click pe o astfel de imagine, se va apela metoda miauna() a obiectului Pisoias asociat. In momentul crearii imaginii, se apeleaza si metoda toString() a obiectului asociat si se salveaza sirul rezultat in localStorage. In div, in afara de imaginea creata prin datele transmise din formular, vor mai fi si imaginile create in dati anterioare, incarcate din localStorage. Tot in pagina, langa buton se va afisa si de cate ori a fost deschisa pagina (fapt memorat tot in localStorage).
    41. La alt+click pe o imagine-pisoias aceasta se va deplasa pana la 0,0 al divului moment in care va fi stearsa din div, dar si din localStorage.
    42. La shift+click pe o imagine-pisoias se va afisa un prompt care va permite sa schimbam valoarea proprietatii vorba a obiectului asociat.