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ą · Otwórz Visual Studio 2008.

stronę w Visual · Z menu wybierz File -> New -> Web Site.
Studio 2008 · Z listy Visual Studio installed templates wybierz Empty Web Site.
Express Edition · 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
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript

2. Dodaj do · Wybierz Website->Add Existing Item a następnie wskaż plik

projektu Ankieta.htm.
utworzone przez · Podobnie dodaj plik Style.css.
pracownika pliki · Wybierz prawym przyciskiem myszy plik Ankieta.htm i wybierz View in
Browser.
3. Dodaj nowy · Wybierz Website->Add New Item a następnie w oknie Add New Item:
plik, który będzie
— W obszarze Templates wybierz JScript File
zawierał kod
— W polu Name wpisz Walidacja.js
sprawdzający
· 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 · Do pliku Walidacja.js wpisz następujący kod:
funkcji walidującej function sprawdz ( form )
formularz i {
sprawdź, czy if (form.imie.value == "") {
wymagane w alert( "Proszę wprowadzić imię." );
form.imie.focus();
zadaniu pola są return false ; }
wypełnione 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ź · W pliku Walidacja.js poniżej funkcji sprawdz dodaj funkcje adresEmail
poprawność sprawdzającą przy pomocy wyrażenia regularnego poprawność
adresu e-mail 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
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ź · W pliku Walidacja.js poniżej funkcji sprawdz dodaj funkcje
poprawność kodu kodPocztowy
pocztowego 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ź · W pliku Walidacja.js poniżej funkcji sprawdz dodaj funkcje
poprawność sprawdzWzrost. Dodatkowo dodaj funkcje pomocniczą liczbaCalkowita.
wpisanej wartości function liczbaCalkowita( liczba ) {
w polu Wzrost 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ź · W pliku Walidacja.js poniżej funkcji sprawdz dodaj funkcje
poprawność sprawdzOdDo przyjmującą dwa parametry cenaOd i cenaDo
wpisanych function sprawdzOdDo( cenaOd, cenaDo) {
wartości w polach if (!liczbaCalkowita(cenaOd)) { return false ;}
Od i Do 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
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ą · Otwórz Visual Studio 2008.

stronę w Visual · Z menu wybierz File -> New -> Web Site.
Studio 2008 · Z listy Visual Studio installed templates wybierz Empty Web Site.
Express Edition · 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 · Wybierz Website->Add Existing Item a następnie wskaż plik
projektu Rejestracja.htm.
utworzone przez · Podobnie dodaj plik StyleRej.css.
pracownika pliki · Wybierz prawym przyciskiem myszy plik Rejestracja.htm i wybierz View
in Browser.
3. Umieść na · Otwórz stronę Rejestracja.htm za polem input o właściwości
formularzu pola name="nazwa" umieść następujący znacznik:
do których będą <span id="zlaNazwa"></span>
wpisywane
· Za polem input o właściwości name="haslo" umieść następujący
informacje o
znacznik:
błędach
<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 · Do pliku StyleRej.css dodaj następujący styl:
wyświetlania .wyroznienieCzerwone{
informacji o padding-left:10px;
błędach na color:Red;
stronie font-weight:600; }

Strona 3-14
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript

5. Sprawdź liczbę · Wybierz Website->Add New Item a następnie w oknie Add New Item:
znaków w nazwie — W obszarze Templates wybierz JScript File
użytkownika i — W polu Name wpisz Rejestracja.js
haśle
· 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 pliku Rejestracja.js w funkcji sprawdz powyżej linii return true
w nazwie dodaj następujący kod:
użytkownika 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ź · W pliku Rejestracja.js w funkcji sprawdz powyżej linii return true
zgodność dodaj następujący kod:
wpisanych haseł 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
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript

8. Dodaj · W pliku Rejestracja.htm do pola Input o właściwości name="haslo"

możliwość dodaj właściwość onkeyup="silaHasla(this.value)"
wyświetlania · Do pliku Rejestracja.js dodaj następująca funkcję:
informacji o sile function silaHasla( haslo ) {
hasła var punkty=0;
if (haslo.length >=7) punkty++;
if ((haslo.match(/[a-z]/)) && (haslo.match(/[A-Z]/))) punkty++;
if (haslo.match(/\d+/)) punkty++;
if (haslo.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) punkty++;
if (punkty<1) {
document.getElementById("opisHasla").innerHTML = "Bardzo
słabe";
document.getElementById("opisHasla").className =
"opisHaslaBardzoSlabe"}
else if (punkty<2) {
document.getElementById("opisHasla").innerHTML = "Słabe";
document.getElementById("opisHasla").className =
"opisHaslaSlabe"}
else if (punkty<3){
document.getElementById("opisHasla").innerHTML = "Średnie";
document.getElementById("opisHasla").className =
"opisHaslaSrednie"}
else {
document.getElementById("opisHasla").innerHTML = "Silne";
document.getElementById("opisHasla").className =
"opisHaslaSilne"} }

· Do pliku StyleRej.css dodaj następujące stylu umożliwiające

wyświetlenie w różnych kolorach informacji o sile hasła:
.opisHaslaBardzoSlabe
{ padding-left:10px;
color:Red; }

.opisHaslaSlabe
{ padding-left:10px;
color:Maroon; }

.opisHaslaSrednie
{ padding-left:10px;
color:Yellow; }

.opisHaslaSilne
{ padding-left:10px;
color:Green; }

· Zapisz plik Rejestracja.js i otwórz plik Rejestracja.htm w przeglądarce.

Sprawdź, jak zachowuje się strona przy wpisywaniu hasła. Wymyśl
hasło, które zostanie ocenione jako silne.

Strona 3-16
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript

Laboratorium rozszerzone
Twoim zadaniem jest przygotowanie i walidacja ankiety dla agencji modelek i modeli „Modelinki”.
Strona ankiety musi umożliwić pobranie od każdego chętnego do pracy w charakterze modela
następujących informacji:
· imię
· nazwisko
· adres zamieszkania
· telefon
· e-mail
· wiek
· wzrost
· waga
· kolor włosów
· kolor oczu
· rozmiar ubrania
· numer butów
· doświadczenie (wybierane od 1 do 5)
· płeć
Po wybraniu płci użytkownikowi zostaje wyświetlony albo formularz dla kobiet albo dla mężczyzn,
który umożliwia pobranie następujących informacji:
· w przypadku kobiet:
· obwód biustu
· wielkość miseczki
· talia
· biodra
· długość nogi
· w przypadku mężczyzn:
· klatka
· pas
· długość nogi
Ponieważ wszystkie pola są wymagane opracuje schemat sprawdzania pola w odpowiedniej funkcji.
Sprawdzenie poprawności wpisanych wartości ma odbywać się dla pól:
· E-mail (e-mail w formacie nazwa@serwer.domena)
· Kod pocztowy (kod odpowiedni dla naszego kraju)
· Wzrost – liczba w zakresie od 40 do 250 cm,
· Waga – liczba w zakresie od 20 do 80 kg
Wszystkie operacje sprawdzenia poprawności i wyświetlania elementów dla kobiet i mężczyzn maja
być realizowane po stronie klienta w przeglądarce!

Strona 3-17