zadania 22 marca


1. Pobierz kod HTML z http://pastebin.com/KW5ysHSg i dodaj obsługę formularza:
a) Niech zatwierdzenie formularza sprawi, ze do tabeli zostanie dodany wiersz z
wartościami z pól formularza. Po dodaniu wiersza niech wszystkie pola formularza się
wyczyszczą. Zabezpiecz formularz przed domyślną akcją czyli wysłaniem.
b) Na początku dodaj wszystkim elementom .form-group klasę .has-error oraz dodaj
przyciskowi atrybut disabled. W kolejnych krokach zaimpementujemy walidację
formularza.
c) Napisz funkcję refreshButton(), która będzie włączała przycisk formularza, gdy
wszystkie pola będą uzupełnione prawidłowo, i wyłączała w przeciwnym wypadku.
Porada: elementy div, zawierające nieprawidłowo uzupełnione pola, będą miały klasę
has-error.
d) Dodaj funkcję isCorrectPesel(pesel), która sprawdza poprawność PESEL-u. Użyj
funkcji napisanej na zajęciach 16 marca.
e) Napisz funkcję isCorrectAge(age), która sprawdzi, czy podana wartość jest
prawidłowym wiekiem (same cyfry, od 1 do 120).
f) Napisz funkcję isCorrect($input), która sprawdzi, czy input jest wypełniony
prawidłowo. Jeśli input ma id name lub surname, funkcja powinna sprawdzać, czy
wartość nie jest pusta. Jeśli input ma id age, powinna użyć funkcji isCorrectAge(). Jeśli
input ma id pesel, powinna użyć funkcji isCorrectPesel().
g) Niech na zdarzenie onchange każdego inputa ustawia się odpowiednio klasa has-error
elementu o klasie form-group. Następnie niech atrybut disabled przycisku ustawia się
odpowiednio.
h) Niech po dodaniu nowej osoby przycisk się wyłącza, a pola znów zaznaczają się jako
niewypełnione.
2. Stwórz możliwość edycji pól tabeli:
a) niech każda komórka wewnątrz tbody, która nie zawiera przycisku, po kliknięciu
zamienia się w input;
b) niech po stworzeniu się inputa natychmiast zaznaczy się wpisany w nim tekst;
c) po opuszczeniu inputa niech z powrotem zamieni się on w zwykłą komórkę;
d) zmodyfikuj skrypt w taki sposób, by komórka nie zmieniała szerokości, gdy dodawany
jest do niej input  w tym celu po kliknięciu zamroz jej szerokość, a po zakończeniu
edycji ustaw szerokość automatyczną.
3. Stwórz klasę Person za pomocą funkcji konstruktora. Konstruktor powinien przyjmować
cztery argumenty: name, surname, age i pesel.
a) Dodaj do klasy Person metodę fullName(), która zwróci imię i nazwisko rozdzielone
spacją.
b) Dodaj do klasy Person metodę gender(), która zwróci  Kobieta , jeśli imię kończy się
literą  a , a  Mężczyzna w przeciwnym wypadku.
c) Dodaj do klasy Person metodę getBornYear(), która zwróci rok urodzenia na podstawie
pola age.
d) Dodaj do klasy Person metodę getAsTr(), która zwróci obiekt wiersza tabeli,
reprezentujący dane osoby.
e) Dodaj do klasy Person metodę isCorrectPesel(), która w zależności od tego, czy pesel
jest prawidłowy, wypisuje na konsolę tekst  Posiadam prawidłowy PESEL lub
 Posiadam nieprawidłowy PESEL .
f) Zmodyfikuj zdarzenie submit formularza tak, by funkcja używała klasy Person.


Wyszukiwarka

Podobne podstrony:
zadania 21 marca
zadania 23 marca
zadania 19 marca
Dodatkowe zadania do sprawdzianu zadania 20 do 22
Zadania domowe ISD kolokwium nr 22
RP II Zadania serie 01 22 02 p23
[ZADANIE][MI][22]
zadania od 22 do 25

więcej podobnych podstron