zad.pdf

(326 KB) Pobierz
Piotr Bubacz
Moduł 3
ITA-103 Aplikacje Internetowe
Podstawy JavaScript
Laboratorium podstawowe
Problem 1 (czas realizacji 20 min)
Jesteś właścicielem niewielkiej firmy i Twój pracownik przygotował prostą ankietę w języku HTML
umożliwiającą pobranie od użytkownika podstawowych informacji dotyczących imienia, adresu,
wzrostu i zakresu cen. Ankieta została przedstawiona na Rys. 4.
Rys. 4 Ankieta
Niestety klient zażyczył sobie aby dodać sprawdzenie danych po stronie przeglądarki:
Pola wymagane:
Imie
E-mail
Cena od i do
Sprawdzenie poprawności wpisanych wartości dla pól:
E-mail (e-mail w formacie nazwa@serwer.domena)
Kod pocztowy (kod odpowiedni dla naszego kraju)
Wzrost (zakres od 40 do 250 cm)
Wartości w polach od i do wpisane odpowiednio
Twoim zadaniem jest przygotowanie odpowiednich skryptów w języku JavaScript umożliwiających
spełnienie oczekiwań klienta.
Zadanie
Tok postępowania
1. Utwórz nową
stronę w Visual
Studio 2008
Express Edition
Otwórz Visual Studio 2008 .
Z menu wybierz File -> New -> Web Site .
Z listy Visual Studio installed templates wybierz Empty Web Site .
Z listy Location wybierz File System , a w polu obok określ lokalizację dla
pliku w dowolnym miejscu na dysku.
Kliknij OK .
Strona 3-11
936832803.045.png 936832803.046.png 936832803.047.png 936832803.048.png 936832803.001.png 936832803.002.png 936832803.003.png
 
Piotr Bubacz
Moduł 3
ITA-103 Aplikacje Internetowe
Podstawy JavaScript
2. Dodaj do
projektu
utworzone przez
pracownika pliki
Wybierz
Website -> Add
Existing
Item
a
następnie
wskaż
plik
Ankieta.htm .
Podobnie dodaj plik Style.css .
Wybierz prawym przyciskiem myszy plik Ankieta.htm i wybierz View in
Browser .
3. Dodaj nowy
plik, który będzie
zawierał kod
sprawdzający
Wybierz Website -> Add New Item a następnie w oknie Add New Item :
— W obszarze Templates wybierz JScript File
—
W polu Name wpisz Walidacja.js
Otwórz plik Ankieta.htm i z okna Solution Explorer przeciągnij plik
Walidacja.js do środka znacznika head na stronie.
Zapisz zmiany.
4. Dodanie
funkcji walidującej
formularz i
sprawdź, czy
wymagane w
zadaniu pola są
wypełnione
Do pliku Walidacja.js wpisz następujący kod:
function sprawdz ( form )
{
if (form.imie.value == "") {
alert( "Proszę wprowadzić imię." );
form.imie.focus();
return false ; }
if (form.email.value == "") {
alert( "Proszę wprowadzić adres email." );
form.email.focus();
return false ; }
if (form.cenaOd.value == "") {
alert( "Proszę wprowadzić wartość od." );
form.cenaOd.focus();
return false ; }
if (form.cenaDo.value == "") {
alert( "Proszę wprowadzić wartość do." );
form.cenaDo.focus();
return false ; }
return true ; }
W pliku Ankieta.htm do znacznika form dodaj właściwość
onsubmit="return sprawdz(this)" tak, aby znacznik wyglądał jak
poniżej
<form name="ankietaSklepu" onsubmit="return sprawdz(this)">
Zapisz oba pliki i otwórz plik Ankieta.htm w przeglądarce. Sprawdź, czy
możesz wysłać formularz (wcisnąć przycisk Wyślij ) bez wypełnienia pól
wymaganych.
5. Sprawdź
poprawność
adresu e-mail
W pliku Walidacja.js poniżej funkcji sprawdz dodaj funkcje adresEmail
sprawdzającą
przy
pomocy
wyrażenia
regularnego
poprawność
wpisanego adresu E-mail wpisz:
function adresEmail( adres ) {
var regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+
[a-zA-Z0-9.-]{2,4}$/;
return regex.test(adres); }
W funkcji sprawdz powyżej linii return true wpisz:
if (!adresEmail(form.email.value)) {
alert( "Proszę wprowadzić poprawny adres email \n w formacie:
nazwa@serwer.domena." );
form.email.focus();
return false ; }
Strona 3-12
936832803.004.png 936832803.005.png 936832803.006.png 936832803.007.png 936832803.008.png 936832803.009.png 936832803.010.png 936832803.011.png 936832803.012.png
 
Piotr Bubacz
Moduł 3
ITA-103 Aplikacje Internetowe
Podstawy JavaScript
Zapisz plik Walidacja.js i otwórz plik Ankieta.htm w przeglądarce.
Sprawdź,
czy
możesz
wysłać
formularz
(wcisnąć
przycisk
Wyślij
wypełniając pole E-mail w złym formacie.
6. Sprawdź
poprawność kodu
pocztowego
W
pliku
Walidacja.js
poniżej
funkcji
sprawdz
dodaj
funkcje
kodPocztowy
function kodPocztowy( kod ) {
var regex = /^[0-9]{2}\-[0-9]{3}$/;
return regex.test(kod); }
W funkcji sprawdz powyżej linii return true wpisz:
if (!kodPocztowy(form.kodPocztowy.value)) {
alert( "Proszę wprowadzić poprawny kod pocztowy." );
form.kodPocztowy.focus();
return false ; }
Zapisz plik Walidacja.js i otwórz plik Ankieta.htm w przeglądarce.
Sprawdź,
czy
możesz
wysłać
formularz
(wcisnąć
przycisk
Wyślij
wypełniając pole Kod pocztowy w złym formacie.
7. Sprawdź
poprawność
wpisanej wartości
w polu Wzrost
W pliku Walidacja.js poniżej funkcji sprawdz dodaj funkcje
sprawdzWzrost . Dodatkowo dodaj funkcje pomocniczą liczbaCalkowita .
function liczbaCalkowita( liczba ) {
var regex = /^[\-]{0,1}[0-9]{1,8}$/;
return regex.test(liczba); }
function sprawdzWzrost( liczba ) {
if (!liczbaCalkowita(liczba)) { return false ;}
var wzrost=parseInt(liczba);
if((wzrost<40) || (wzrost>250)) {return false;}
return true; }
W funkcji sprawdz powyżej linii return true wpisz:
if (!sprawdzWzrost(form.wzrost.value)) {
alert( "Proszę wprowadzić poprawny wzrost w cm. (zakres 40-
250cm)" );
form.wzrost.focus();
return false ; }
Zapisz plik Walidacja.js i otwórz plik Ankieta.htm w przeglądarce.
Sprawdź,
czy
możesz
wysłać
formularz
(wcisnąć
przycisk
Wyślij
wypełniając pole Wzrost w złym formacie.
8. Sprawdź
poprawność
wpisanych
wartości w polach
Od i Do
W
pliku
Walidacja.js
poniżej
funkcji
sprawdz
dodaj
funkcje
sprawdzOdDo przyjmującą dwa parametry cenaOd i cenaDo
function sprawdzOdDo( cenaOd, cenaDo) {
if (!liczbaCalkowita(cenaOd)) { return false ;}
if (!liczbaCalkowita(cenaDo)) { return false ;}
var zakres=parseInt(cenaDo)-parseInt(cenaOd);
if(zakres<0){return false;}
return true; }
W funkcji sprawdz powyżej linii return true wpisz:
if (!sprawdzOdDo(form.cenaOd.value,form.cenaDo.value)) {
alert( "Proszę wprowadzić poprawny zakres cenowy" );
form.wzrost.focus();
return false ; }
Strona 3-13
936832803.013.png 936832803.014.png 936832803.015.png 936832803.016.png 936832803.017.png 936832803.018.png 936832803.019.png 936832803.020.png 936832803.021.png
 
Piotr Bubacz
Moduł 3
ITA-103 Aplikacje Internetowe
Podstawy JavaScript
Zapisz plik Walidacja.js i otwórz plik Ankieta.htm w przeglądarce.
Sprawdź, czy możesz wysłać formularz (wcisnąć przycisk Wyślij
wypełniając pole od i do wartościami innymi niż liczba oraz umieszczając
w polu od większą wartość niż w polu do.
Problem 2 (czas realizacji 25 min)
Zbliża się termin oddania projektu dla ważnego klienta, gdy nagle okazuje się, że brakuje istotnego
elementu jakim jest formularz rejestracji nowego użytkownika na stronie. Formularz ma zawierać
jedynie trzy pola nazwa i dwa razy hasło, jednak klient zażyczył sobie następującą funkcjonalność
realizowaną w przeglądarce:
nazwa użytkownika ma mieć co najmniej 5 znaków, nie więcej jednak jak 10 i może zawierać
tylko litery
hasło ma mieć co najmniej 7 znaków i ma być wyświetlana informacja o sile hasła.
Dodatkowo hasło powinno posiadać możliwość określenia poziomu jego zabezpieczenia – podczas
tworzenia użytkownik ma być powiadamiany o sile hasła. Wszystkie informacje mają pojawiać się
obok pola do wpisywania.
Zadanie
Tok postępowania
1. Utwórz nową
stronę w Visual
Studio 2008
Express Edition
Otwórz Visual Studio 2008 .
Z menu wybierz File -> New -> Web Site .
Z listy Visual Studio installed templates wybierz Empty Web Site .
Z listy Location wybierz File System , a w polu obok określ lokalizację dla
pliku w dowolnym miejscu na dysku.
Kliknij OK .
2. Dodaj do
projektu
utworzone przez
pracownika pliki
Wybierz
Website -> Add
Existing
Item
a
następnie
wskaż
plik
Rejestracja.htm .
Podobnie dodaj plik StyleRej.css .
Wybierz prawym przyciskiem myszy plik Rejestracja.htm i wybierz View
in Browser .
3. Umieść na
formularzu pola
do których będą
wpisywane
informacje o
błędach
Otwórz
stronę
Rejestracja.htm
za
polem input
o
właściwości
name="nazwa" umieść następujący znacznik:
<span id="zlaNazwa"></span>
Za polem input o właściwości name="haslo" umieść następujący
znacznik:
<span id="opisHasla"></span>
Za polem input o właściwości name="haslo2" umieść następujący
znacznik:
<span id="zgodneHasla"></span>
Zapisz zmiany.
4. Dodaj styl do
wyświetlania
informacji o
błędach na
stronie
Do pliku StyleRej.css dodaj następujący styl:
.wyroznienieCzerwone{
padding-left:10px;
color:Red;
font-weight:600; }
Strona 3-14
936832803.022.png 936832803.023.png 936832803.024.png 936832803.025.png 936832803.026.png 936832803.027.png 936832803.028.png 936832803.029.png 936832803.030.png 936832803.031.png 936832803.032.png 936832803.033.png 936832803.034.png 936832803.035.png 936832803.036.png
 
Piotr Bubacz
Moduł 3
ITA-103 Aplikacje Internetowe
Podstawy JavaScript
5. Sprawdź liczbę
znaków w nazwie
użytkownika i
haśle
Wybierz Website -> Add New Item a następnie w oknie Add New Item :
—
W obszarze Templates wybierz JScript File
—
W polu Name wpisz Rejestracja.js
Otwórz plik Rejestracja.htm i z okna Solution Explorer przeciągnij
dodany plik do środka znacznika head na stronie.
W
pliku
Rejestracja.htm
do
znacznika
form
dodaj
właściwość
onsubmit="return sprawdz(this)" .
Zapisz zmiany.
W pliku Rejestracja.js dodaj następujący kod:
function sprawdz (form){
var user=form.nazwa.value;
if ((user.length<5) || (user.length>10)) {
document.getElementById("zlaNazwa").innerHTML = "Nazwa
użytkownika może mieć od 5 do 10 liter";
document.getElementById("zlaNazwa").className =
"wyroznienieCzerwone";
form.nazwa.focus;
return false; }
else { document.getElementById("zlaNazwa").innerHTML = "";}
if (form.haslo.value.length < 7) {
document.getElementById("opisHasla").innerHTML = "Proszę
wprowadzić hasło co najmniej 7 literowe.";
document.getElementById("opisHasla").className =
"wyroznienieCzerwone";
form.haslo.focus();
return false ; }
return true;
Zapisz plik Rejestracja.js i otwórz plik Rejestracja.htm w przeglądarce.
Sprawdź, czy możesz wysłać formularz (wcisnąć przycisk Wyślij . Wpisz
nazwę użytkownika i hasło zawierające odpowiednią liczbę znaków.
6. Sprawdź znaki
w nazwie
użytkownika
W pliku Rejestracja.js w funkcji sprawdz powyżej linii return true
dodaj następujący kod:
if (!((user.match(/[a-z]/)) || (user.match(/[A-Z]/)))) {
document.getElementById("zlaNazwa").innerHTML = "Nazwa
użytkownika zawierać tylko litery";
document.getElementById("zlaNazwa").className =
"wyroznienieCzerwone";
form.nazwa.focus;
return false; }
else { document.getElementById("zlaNazwa").innerHTML = ""; }
Zapisz plik Rejestracja.js i otwórz plik Rejestracja.htm w przeglądarce.
Sprawdź, czy możesz wysłać formularz (wcisnąć przycisk Wyślij . Wpisz
nazwę użytkownika zawierające inne znaki niż małe czy duże litery.
7. Sprawdź
zgodność
wpisanych haseł
W pliku Rejestracja.js w funkcji sprawdz powyżej linii return true
dodaj następujący kod:
if (form.haslo.value!=form.haslo2.value) {
document.getElementById("zgodneHasla").innerHTML = "Hasła nie są
zgodne!";
document.getElementById("zgodneHasla").className =
"wyroznienieCzerwone";
return false; }
Zapisz plik Rejestracja.js i otwórz plik Rejestracja.htm w przeglądarce.
Sprawdź, czy możesz wysłać formularz (wcisnąć przycisk Wyślij . Wpisz
różne hasła w polach.
Strona 3-15
936832803.037.png 936832803.038.png 936832803.039.png 936832803.040.png 936832803.041.png 936832803.042.png 936832803.043.png 936832803.044.png
 

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin