zadanie3.pdf

(308 KB) Pobierz
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Aplikacje internetowe - laboratorium
JĘzyk JavaScript
Celem ćwiczenia jest przygotowanie formularza HTML z wykorzystaniem języka JavaScript.
Formularz ten będzie sprawdzany pod względem zawartości przed wysłaniem do serwera.
Formularz będzie miał charakter dynamiczny, tzn. niektóre jego elementy będą zmieniać swój
stan pod wpływem działań użytkownika. Do wykonania ćwiczenia potrzebny jest dowolny
edytor plików tekstowych oraz przeglądarka.
1. Stwórz dwa pliki tekstowe znajdujące się w tym samym katalogu dyskowym:
formularz.html i form_check.js .
2. Formularz ma służyć do wprowadzania danych potrzebnych do rejestracji
użytkownika w serwisie internetowym. Potrzebne informacje to przede wszystkim
dane osobowe. W celu utworzenia formularza wykorzystaj element FORM języka
HTML. Formularz o nazwie dane_osobowe powinien umożliwiać wprowadzanie
następujących danych: imię, nazwisko, płeć (wybór jednej z opcji), nazwisko
panieńskie, e-mail, ulica, kod pocztowy, miasto, uwagi (pole tekstowe). Dla lepszej
wizualizacji formularza pola można umieścić w komórkach tabeli. Zawartość pliku
formularz.html powinna być następująca:
<html>
<head>
<title>Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body>
<form name="dane_osobowe">
<table border=0>
<tr><td>Imię</td><td><input type=text name="f_imie"></td></tr>
<tr><td>Nazwisko</td><td><input type=text name="f_nazwisko"></td></tr>
<tr><td>Płeć</td><td>
<input name="f_plec" value="f_k" checked type="radio"/>kobieta<BR>
<input name="f_plec" value="f_m" type="radio"/>męŜczyzna</td></tr>
<tr><td>N.panieńskie</td><td><input type=text name="f_nazwisko_p"></td></tr>
<tr><td>E-mail</td><td><input type=text name="f_email"></td></tr>
<tr><td>Kod pocztowy</td><td><input type=text name="f_kod"></td></tr>
<tr><td>Ulica/Osiedle</td><td><input type=text name="f_ulica"></td></tr>
<tr><td>Miasto</td><td><input type=text name="f_miasto"></td></tr>
<tr><td>Uwagi</td><td>
<textarea rows="5" cols="15" name="uwagi"></textarea></td></tr>
<tr><td colspan="2" align="center">
<input type="button" value="Przeslij"></td></tr>
</table>
</form>
</body>
</html>
848175286.020.png 848175286.021.png 848175286.022.png
 
Plik jest wyświetlany przez przeglądarkę w następujący sposób
3. W pliku form_check.js zostaną umieszczone definicje funkcji, które będą
sprawdzały elementarne warunki, jakie powinny spełniać wartości wprowadzane do
formularza. Sprawdzana powinna być długość napisu, format kodu pocztowego oraz
adresu poczty internetowej. Początkowo, plik zawiera jedną funkcję sprawdzającą, czy
pole jest puste.
// zwraca wartosc true jesli przekazany argument to pusty lancuch
function isEmpty(str)
{
if (str.length == 0)
{
return true
}
else
{
return false
}
}
848175286.001.png 848175286.002.png 848175286.003.png
 
4. Dodaj do powyższego kodu funkcję, która sprawdzi, czy zgłaszając formularz
użytkownik wypełnił wymagane pole „Imię”
function validate(form)
{
if (isEmpty(form.elements["f_imie"].value))
{
alert("Podaj imię!")
return false
}
else
{
return true
}
}
5. Dodaj do nagłówka HTML w pliku formularz.html odwołanie do zewnętrznego
pliku ( form_check.js) zawierającego skrypt w języku JavaScript:
<html>
<head>
<title>Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<script src="form_check.js"></script>
</head>
<body>
...
6. Dodaj do przycisku obsługę zdarzenia naciśnięcia przycisku. Właściwy fragment kodu
powinien mieć postać:
<input type="button" value="Przeslij"
onClick="return validate(this.form)" >
848175286.004.png 848175286.005.png 848175286.006.png 848175286.007.png 848175286.008.png 848175286.009.png 848175286.010.png
 
7. Uruchom formularz w przeglądarce. Przetestuj działanie formularza próbując zgłosić
formularz bez wypełnienia pola ”Imię”.
8. Formularz nadal można łatwo oszukać, wpisując do pola „Imię” ciąg białych znaków.
Dodaj do pliku form_check.js funkcję sprawdzającą, czy podany łańcuch znaków
nie składa się w całości z białych znaków.
// zwraca wartosc true jesli przekazany argument
// to ciag bialych znakow
function isWhiteSpace(str)
{
var ws = "\t\n\r "
for (i = 0; i < str.length; i++)
{
var c = str.charAt(i)
if ( ws.indexOf(c) == -1)
return false
}
return true
}
848175286.011.png 848175286.012.png 848175286.013.png 848175286.014.png
 
9. Zmodyfikuj funkcję validate() w taki sposób, aby przy sprawdzaniu imienia
uwzględnić także funkcję isWhiteSpace() .
function validate(form)
{
if (isEmpty(form.elements["f_imie"].value) ||
isWhiteSpace(form.elements["f_imie"].value))
{
alert("Podaj imię!")
return false
}
else
return true
}
10. Sprawdź, czy walidacja działa poprawnie.
11. W kolejnym kroku dodamy funkcję weryfikującą poprawność wprowadzonego kodu
pocztowego. Musimy zapewnić, że kod pocztowy składa się z samych cyfr i że jest w
poprawnym formacie 99-999. Dodaj do pliku form_check.js poniższe funkcje.
// zwraca wartosc true jesli przekazany argument to cyfra
function isDigit(c)
{
return ((c >= "0") && (c <= "9"))
}
// zwraca wartosc true jesli przekazany argument
// to poprawny kod pocztowy
function checkZIPCode(str)
{
if (str.length == 6 )
{
if ( (str.charAt(2)) == "-" )
{
if ( isDigit(str.charAt(0)) && isDigit(str.charAt(1)) &&
isDigit(str.charAt(3)) && isDigit(str.charAt(4)) &&
isDigit(str.charAt(5)) )
{
return true
}
else
alert("Zły kod pocztowy")
return false
}
else
alert("Zły kod pocztowy")
return false
}
else
alert("Zły kod pocztowy")
return false
}
848175286.015.png 848175286.016.png 848175286.017.png 848175286.018.png 848175286.019.png
 

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin