Notice: A session had already been started - ignoring session_start() in /var/www/html/biblioteca/inceput_pag_a.php on line 2
Tehnici Web, proiecte JS

Tehnici Web

Nu esti logat.

Proiecte Javascript

Fiecare exercitiu e notat cu un punctaj, pentru a obtine punctul pe proiect trebuie sa adunati 10 puncte. Ideal, pentru examen e sa faceti toate exercitiile.

Lista e in proces de completare..............

  1. Exercitii pregatire pentru examen

    Modul de notare:

    1. Invatand din:

      Realizati urmatoarele cerinte:

      1. Se va genera dinamic un div cu un padding de 20px si un border de 1px solid si de culoare neagra(ca sa se vada mai clar). Se vor genera 3 butoane, tot dinamic, cu textele (innerHTML) 1,2,3 in interiorul divului.
      2. La click pe butonul 1 se va schimba culoarea de border a acestuia intr-o culoare random
      3. La click pe butonul 2, se va schimba culoarea de background a divului (parentNode)intr-o culoare random.
      4. La click pe butonul 3 se vor schimba culorile textului tuturor butoanelor intr-o culoare random. Acestea vor fi selectate prin getElementsByTagName.
    2. Invatand din:

      Realizati urmatoarele cerinte:

      1. Initial avem o pagina vida (nu e nimic in interiorul lui body). La click in interiorul ferestrei se va genera imaginea (centarata fata de coordonatele clickului; imaginea are dimensiunile 100px X 100px):
        rotita
      2. Imaginea se va deplasa pe verticala in sus si in acelasi timp se va roti in jurul centrului sau.
      3. Cand va ajunge la capatul din sus al ferestrei (top:0px), aceasta se va schimba(replaceChild) intr-un paragraf cu textul "poc" (care trebuie sa aiba aceeasi pozitie pe care o avea imaginea).
      4. Paragraful va ramane acolo tip de 10 secunde apoi va disparea(setTimeout, removeChild)
      5. Se pot genera mai multe imagini in acelasi timp (daca se face click in pagina cand inca nu s-au terminat animatiile anterioare)
      6. La apasarea tastei "p" (keypress) se vor opri toate imaginile (clearInterval). La apasarea tastei "p" din nou isi vor continua animatia.
    3. Invatand din:

      Realizati urmatoarele cerinte:

      1. Se va implementa un fel de joc de viteza. La inceput, pe ecran va fi un div cu 2 inputuri de tip range (intre 5 si 10) si un buton cu textul ok.
      2. Butonul de ok va fi disabled pana se schimba macar unul dintre inputurile de tip range (onchange)
      3. La click pe ok, divul dispare si e creat un tabel in mod dinamic (doar cu tbody, nu si thead, respectiv tfoot) cu numarul de randuri dat de primul input de tip range si numarul de coloane(celule) dat de al doilea input de tip range
      4. Initial toate celulele au borderul negru (se va realiza prin javascript nu prin fisier css) si backgroundul roz.
      5. Cand facem ctrl+click pe o celula aceasta isi schimba borderul in verde si backgroundul in alb.
      6. Toate celulele vor avea un timeout asociat de 30 secunde. Cand trec cele 30 de secunde acestea capata background negru. Pentru cele care insa s-a facut ctrl+click, se va da clearTimeout(nu se vor schimba)
      7. Sub tabel va exista un element meter, care porneste de la 30 si scade cu 1 la fiecare secunda pana cand ajunge la 0. Acesta va indica utilizatorului cat timp mai are ca sa faca click pe toate celulele.
      8. Cand se termina cronometrul se da un alert cu scorul (cate celule din total au fost clickaite).
      9. Daca se da click simplu pe celula, nu i se schimba culoarea si nici nu i se anuleaza timeout-ul (clearTimeout), in schimb, in interiorul ei se va afisa pe ce linie si ce coloana se afla.
      10. Daca se da click oriunde in restul paginii, se va da un alert cu "nu aici tre sa dai click". Atentie, triggerul de click al paginii nu trebuie sa fie activat cand se da click pe celula tabelului (stopPropagation)
    4. Atentie! acest exercitiu e foarte important si insist sa il faceti toti, chiar si cei care au cerinte separate pentru proiect

      Invatand din:

      Pornind de la acest fisier html, realizati urmatoarele cerinte:

      1. Se va crea la sfarsitul elementului main un div cu id-ul "rezultat". In acest div se vor afisa rezolvarile cerintelor urmatoare, care necesita o afisare. Important! Fiecare doua rezolvari vor fi separate printr-un element hr (adaugat dinamic). Inaintea afisarii cerute de cerinta se va insera si un paragraf explicativ (poate fi chiar cu textul cerintei) pentru a se vedea mai clar ce reprezinta afisarea respectiva.
      2. La apasarea tastei "t" va fi afisat un prompt. Textul introdus de utilizator in prompt va fi noul title al paginii.
      3. Sa se afiseze numarul linkurilor (tagurilor a) din pagina.
      4. Elementele care au clasa "metoda" vor avea culoare verde, iar cele cu clasa "proprietate" culoare rosie. (getElementsByClassName). De asemenea, in elementele li cu clasa "element" se va crea un textNode cu textul "element." si se va adauga la inceputul elementului li, iar in elementele li cu clasa "document" se va crea un textNode cu valoarea "document.". Daca un element apartine ambelor clase, textNode-ul va contine "document/element."
      5. La dubluclick pe orice lista din pagina, elementele sale se vor rearanja in ordine alfabetica. La ctrl+dubluclick elementele se vor aranja in ordine alfabetica inversa. Evenimentul de dubluclick se va adauga in mod dinamic, selectand toate ol-urile si ul-urile pentru a le seta acest trigger.
      6. Sa se creeze o lista cu sursele imaginilor folosite in pagina
      7. La apasarea tastei "d" sa se stearga (din arborele DOM) ultimul element al fiecarei liste din pagina (ordonata sau neordonata).
      8. La apasarea tastei "u" toate imaginile din pagina vor deveni:
        derp!
        Cand se ia degetul de pe tasta "u", imaginile revin la sursa initiala.
      9. La apasarea tastei "s" toate imaginile din pagina vor fi inlocuite cu cate un div verde de dimensiune 100px X 100px continand valoarea atributului alt a imaginilor respective. La apasarea tastei "s" din nou se va reveni la imagini.
      10. Se vor afisa toate linkurile externe (continutul href al tagului a sa nu fie catre un id din pagina ci catre un alt domeniu, deci incepand cu "http") din pagina sub forma unei liste neordonate, unde fiecare li va contine o adresa.
      11. Sa se afiseze pentru fiecare lista in parte (se vor selecta toate listele intr-o colectie, folosind o functie de selectare a elementelor DOM) numarul de children si de childNodes. Sa se explice de ce apare diferenta intre cele doua numere, intr-un paragraf sub afisarea numerelor.
      12. Se vor afisa toate numele de taguri distincte care apar in body.
      13. Se va crea un tabel cu titlurile de coloane "Tag" si "Numar aparitii" (deci tabelul va avea un thead). In tbody vor fi randurile continand in prima celula un nume de tag care apare in pagina, si in a doua celula numarul de aparitii. In tfoot va fi un rand cu o singura celula, continand numarul total de taguri care apar in pagina (in body).
      14. La apasarea tastei "c" fiecare 2 perechi de elemente din lista isi vor schimba locul. De exemplu, daca elementele listei sunt a,b,c,d, atunci vor deveni b,a,d,c (s-ai inversat a cu b si c cu d). Daca avem un numar impar de elemente, ultimul ramane neschimbat:a,b,c,d,e devine b,a,d,c,e.
      15. Se va crea o lista de definitii continand toate abrevierile din pagina (distincte), unde termenul va fi continutul lui abbr, iar definitia va consta in ce se gaseste in atributul title
      16. Cele 4 elemente de tip radio cu name="culori" sa fie inlocuite cu o lista neordonata avand cele 4 inputuri ca elemente
      17. Se va afisa numarul de elemente din pagina care au mai mult de o clasa
      18. Pentru paragraful cu id-ul "salut" sa se afiseze fiecare litera intr-o culoare random (indicatie: unui textnode nu-i putem da stil propriu, deci fiecare litera trebuie sa aiba elementul sau (un span))
      19. Se va afisa cate caractere sunt in pagina.
      20. Se va afisa lista id-urilor si numarul de astfel de id-uri care contin subsirul "out" in pagina
      21. Se va afisa continutul tuturor paragrafelor care contin un element de tip strong. Se va crea o lista pentru acest lucru, fiecare element din lista reprezentand continutul unui paragraf.
      22. Tuturor paragrafelor care sunt primul fiu in cadrul containerului li se va adauga clasa "primul" (atentie la paragrafele care indeplinesc conditia si au deja o clasa; deci folositi classList nu className)
      23. Se va afisa numarul elementelor din body care nu au o clasa setata
      24. La shift+click pe orice element din pagina se va da un alert cu ramura din arborele html care duce catre acel element, de exemplu: html->body->main->section->p->em
      25. La apasarea tastei "l", daca avem o lista pe care suntem in prezent cu cursorul, elementele din lista se vor dubla (din lista a,b,c va ajunge lista a,a,b,b,c,c). Cand se ia degetul de pe tasta "l", lista revine la forma initiala.
      26. La inceputul paginii se va insera un cuprins cu bookmark-uri (linkuri interne) catre fiecare heading din pagina. Indicatie: headingurilor care nu au id trebuie sa le alocati voi dinamic un id
      27. (Valoreaza cat trei subpuncte)Se va adauga in mod dinamic evenimentul onclick butonului care se afla imediat dupa elementul cu id-ul "cauta". Nu veti modifica html-ul, va trebui sa selectati butonul folosindu-va de o functie de selectare a elementelor DOM. La click pe acest buton se vor colora cu un background galben toate sirurile din pagina egale cu sirul dat. Atentie unele siruri pot sa fie intinse pe 2 elemente, sau pe un element parinte si un element copil. De exemplu caut sirul "bau bau", acesta va fi gasit in oricare dintre situatiile:
        • <p> ceva bau bau ceva</p>
        • <p> ceva bau <b>bau</b> ceva</p>
        • <p> ceva <i>bau</i> <b>bau</b> ceva</p>
      28. Referitor la subpunctul anterior, background-ul sirului cautat va fi setat la culoarea aleasa din grupul de radiobuttons