doc1 Politechnika Poznańska Instytut Automatyki i Inżynierii
download 
Reklamacja Transkrypt
1 Politechnika Poznańska Instytut Automatyki i Inżynierii
Politechnika Poznańska
Instytut Automatyki i Inżynierii Informatycznej
Zakład Bezpieczeństwa Systemów Informatycznych
przedmiot:
PROGRAMOWANIE W SIECI WWW - laboratorium
grupa docelowa:
INFORMATYKA, semestr 7, dzienne I-stopnia
Temat: JavaScript, jQuery
Teoria (obowiązkowa):
JavaScript: http://www.w3schools.com/js/default.asp
jQuery:
http://jquery.com/ (wybrane fragmenty)
Cel:
Celem laboratorium jest zapoznanie się z podstawami języka JavaScript oraz biblioteki
jQuery realizujących określone zadania po stronie klienta.
Zadanie 1 (Formularz):
1. Stwórz poprawny dokument XHTML (poprawny czyt. valid XHTML 1.1) z
formularzem zgłoszeniowy zawierający pola: adresat, firma, e-mail, kod pocztowy,
ulica, miasto reprezentant firmy. Nazwij go np. PwS_3_form.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PwS lab 3 - Formularz zgłoszeniowy</title>
</head>
<body>
<form action="">
<table cellpadding="3" cellspacing="3" width="30%">
<tr>
<td>Wyślij do:</td>
<td>
<select name="sendTo">
<option value="sekretariat">sekretariat</option>
<option value="dział sprzedaży">dział sprzedaży</option>
<option value="dział techniczny">dział techniczny</option>
</select>
</td>
</tr>
<tr>
<td>Firma:</td>
<td><input type="text" name="company" /></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="emailAddress" /></td>
1
</tr>
<tr>
<td>Kod pocztowy:</td>
<td><input type="text" name="zip maxlength="6" /></td>
</tr>
<tr>
<td>Miasto</td>
<td><input type="text" name="city" /></td>
</tr>
<tr>
<td>Ulica</td><td><input type="text" name="street" /></td>
</tr>
<tr>
<td>Reprezentant firmy:</td>
<td><input type="text" name="contactName" /></td>
</tr>
<tr>
<td>Wiadomość</td>
<td><textarea rows="7" cols="20" name="message"></textarea></td>
</tr>
<tr>
<td>Wyrażam zgodę na przetwarzanie danych umieszczonych w formularzu. </td>
<td>
<input type="radio" name="agree" value="Yes" />Tak <br/>
<input type="radio" name="agree" value="No" />Nie
</td>
</tr>
<tr>
<td></td>
<td><input type="button" id="sendButton" value="Wyślij" /></td>
</tr>
</table>
</form>
</body>
</html>
2. Stwórz w tym samym katalogu dokument tekstowy jsValidator.js w którym zostaną
umieszczone funkcję sprawdzające poprawność wprowadzonych danych. Weryfikacji
powinna podlegać długość przekazanych tekstów, poprawność formatu adresu e-mail i
kodu pocztowego, nazwisko reprezentanta jest opcjonalne, reszta pól jest
obligatoryjna. Przycisk Wyślij powinien się pojawiać dopiero po akceptacji „Zgody na
przetwarzanie danych” (zostanie to zrealizowane w ostatnim etapie).
3. We
wcześniej
przygotowanym
pliku
jsValidator.js
umieść
prostą
funkcję
sprawdzającą długość przekazanego parametru:
function emptyCheck( param ){
if ( param.length == 0 ){
return true
}else {
return false
}
}
4. Następnie przygotuj funkcję która będzie sprawdzać czy konkretne (np. firma) pole
zostało wypełnione zgodnie z teorią z którą się zapoznałeś we wstępie do elementów
2
formularza
można
odwoływać
się
w
następujący
sposób
form.elements["company"].value lub form.company.value
function validate( form ){
if (emptyCheck ( form.elements["company"].value ) ){
alert("Nie poprawne dane w polu FIRMA")
return false
}else {
return true
}
}
5. Plik z tak przygotowanymi funkcjami należy podlinkować do pliku z formularzem
umieszczając w nagłówku HTML kod:
<script type="text/javascript" src="jsValidator.js"></script>
6. Kod JS można również umieszczać bezpośrednio w tagach <script> np.:
<script type="text/javascript" >
function boo(){
return true
}
</script>
7. Następnie należy zdefiniować akcję wywołujący walidacje formularza, w tym celu w
elemencie o id=”sendButton”, dopisz wewnątrz tego elementu (zwróć uwagę ze
format onClick nie jest valid xhtml 1.1 należy stosować onclick):
onclick="return validate( this.form )"
8. Po wykowaniu w/w czynności sprawdź działanie formularza w przeglądarce. Po
próbie wysłania formularza powinno pojawić się okienko z komunikatem: „Nie
poprawne dane w polu FIRMA”
9. Sprawdź czy zostanie zwrócony błąd gdy wprowadzisz białe znaki.
10. Przygotuj funkcję która będzie sprawdzać pole pod kątem zastosowania białych
znaków, wykorzystaj w tym celu metodę indexOf()1 oraz charAt()2:
function whiteSpaceCheck( param ) {
var pat = "\t\n\r "
for ( i = 0; i < param.length; i++ ) {
var c = param.charAt( i )
if ( pat.indexOf( c ) == -1 )
return false
}
return true
}
1
2
http://www.w3schools.com/jsref/jsref_IndexOf.asp
http://www.w3schools.com/jsref/jsref_charAt.asp
3
11. Zmodyfikuj funkcję validate( form ) tak aby sprawdzane było pole z wykorzystaniem
nowej funkcji, wykonaj to samodzielnie i sprawdź czy walidacja działa poprawnie.
12. Przygotuj funkcję która będzie sprawdzać poprawność kodu miasta (format 00-000).
Wykonaj z wykorzystaniem wyrażenia regularnego (w tym celu wykorzystaj metody:
test()3 lub match()4 ).
Function zipCodeCheckByRegExp( param ){
var pat = /^[0-9]{2}-[0-9]{3}$/
if (pat.test(param.value) ){
return true;
}else{
return false;
}
}
13. Przetestuj działanie formularza, następnie zmodyfikuj go taka by weryfikacja kodu
pocztowego odbywała się po każdym wprowadzonym znaku, w tym celu dopisz w
elemencie:
onkeyp="zipCodeCheckByRegExp( this );
14. Za elementem input odpowiedzialnym za kod pocztowy umieść napis który będzie
informować o poprawności wprowadzonych danych:
<span id="zip_err"> </span>
15. Natomiast samą funkcję zipCodeCheckByRegExp() zmodyfikuj w następujący sposób:
function checkZIPCodeRegExp(param){
var pat = /^[0-9]{2}-[0-9]{3}$/
if ( pat.test(param.value) ){
document.getElementById("zip_err").innerHTML = "poprawny kod";
document.getElementById("zip_err").className = "zip_ok";
return true;
}else{
document.getElementById("zip_err").innerHTML = "niepoprawny kod";
document.getElementById("zip_err").className = "zip_bad";
return false;
}
}
16. Po przygotowaniu funkcji należy je odpowiednio wywołać w funkcji validate(form)
function validate( form ) {
if ( emptyCheck( form.elements["company"].value ) || whiteSpaceCheck( form.elements["company"].value ){
alert("Błędne dane firmy")
return false
}else{
zipCodeCheck( form.elements["zip"].value )
}
}
3
4
http://www.w3schools.com/jsref/jsref_regexp_test.asp
http://www.w3schools.com/jsref/jsref_match.asp
4
17. Następnie przygotuj funkcję sprawdzającą poprawność adresu e-mail i odpowiednio
dodaj do funkcji validate(form) wywołanie:
function emailCheckByRegExp( param ){
var pat = /[a-zA-Z_0-9\.]+@[a-zA-Z_0-9\.]+\.[a-zA-Z][a-zA-Z]+/
if (pat.test( param )){
return true;
}else{
alert("Niepoprawny adres e-mail");
return false
}
}
18. Dla wygody przygotuj funkcje weryfikująca string i zwracającą komunikat w
przypadku błędu, wykorzystać wcześniejsze funkcje:
function stringCheck( param, msg ) {
if (emptyCheck( param ) || whiteSpaceCheck( param ) ) {
alert( msg )
return false
}else{
return true
}
}
19. Zmodyfikuj funkcje validate(form) do sprawdzania nazwy firmy, ulicy, miasta i
wiadomości:
function validate(form){
return (
stringCheck( form.elements["company"].value, 'Błąd w polu FIRMA' ) &&
zipCodeCheckByRegExp ( form.elements["zip"]) &&
emailCheckByRegExp ( form.elements["emailAddress"].value ) &&
stringCheck ( form.elements["street "].value,'Błąd w polu ULICA’ ) &&
stringCheck ( form.elements["city"].value,'Błąd w polu MIASTO' ) &&
stringCheck ( form.elements["city"].value,'Brak wiadomości )
)
}
20. W celu poprawy prezentacji informacji o błędzie, zastąp wyskakujące okienko JS,
poprzez zmianę koloru etykiety pola które zostało błędnie wprowadzone w tym celu,
etykiety pól obligatoryjnych opatrz znacznikiem span z odpowiednim unikalnym np.
id=”company_err”:
<span id="company_err" >Firma</span>
21. Następnie stwórz nową klasę w jsValidator.js która będzie pobierać obiekt (nie tylko
jego wartość), sprawdzała jego poprawność, wyszukiwała odpowiednią etykietę i
zmieniała jej nazwę stylu (nie zapomnij o zdefiniowaniu wyglądu dla stylu „bad” oraz
„ok”).
function checkString_2( obj ){
var param = obj.value
5
var errFieldName = obj.name.substr(0) + "_err"
if ( emptyCheck ( param ) || whiteSpaceCheck ( param ) ){
document.getElementById( errFieldName ).className = "bad"
obj.focus()
return false
}
else {
document.getElementById( errFieldName ).className = "ok"
obj.focus()
return true
}
}
22. Zmodyfikuj również sprawdzanie e-mail i zipka by finalnie wyglądały tak:
function checkEmailRegExp(param){
var email = /[a-zA-Z_0-9\.]+@[a-zA-Z_0-9\.]+\.[a-zA-Z][a-zA-Z]+/
if (email.test(param)){
document.getElementById("email_err").innerHTML = "E-mail [poprawny])";
document.getElementById("email_err").className = "ok";
return true;
}else{
document.getElementById("email_err").innerHTML = "E-mail [błedny]";
document.getElementById("email_err").className = "bad";
return false;
}
}
function checkZIPCodeRegExp(param){
var pat = /^[0-9]{2}-[0-9]{3}$/
if (pat.test(param) ){
document.getElementById("zip_err").innerHTML = "Kod pocztowy";
document.getElementById("zip_err").className = "ok";
return true;
}else{
document.getElementById("zip_err").innerHTML = "Kod pocztowy [błedny]";
document.getElementById("zip_err").className = "bad";
return false;
}
}
23. Następnie zmodyfikuj funkcje validate(form) aby wyskakiwało ogólne okienko z
błędem a następnie podświetliły się etykiety:
function validate(form){
var check = true
if ( !( checkString_2(form.elements["company"]) ) ){
check = false;
}
if ( !( checkString_2(form.elements["street"]) ) ){
check = false;
}
if ( !( checkString_2(form.elements["city"]) ) ){
check = false;
}
if ( !( checkString_2(form.elements["message"]) ) ){
check = false;
}
if ( !( checkEmailRegExp(form.elements["email"].value) ) ){
check = false;
}
if ( !( checkZIPCodeRegpEx(form.elements["zip"] ) ) ){
6
check = false;
}
if (check == false){
alert ('Błąd w zaznaczonych polach');
return false
}
}
24. W następnym kroku zmodyfikuj formularz w taki sposób aby przycisk „wyślij” był
niewidoczny i pojawił się w momencie, gdy użytkownik wyrazi zgodę na
przetwarzanie danych osobowych, w tym celu umieść w nagłówku pliku z
formularzem następujący kod:
<script type="text/javascript">
function showElement( ele ){
document.getElementById(ele).style.visibility = 'visible';
}
function hideElement( ele ){
document.getElementById(ele).style.visibility = 'hidden';
}
</script>
25. Dodaj również w elemencie o id=”sendButton” kod:
style="visibility:hidden"
26. Nastepnie w radio buttonach wstaw odpowiednio:
onclick="showElement( 'sendButton' );
onclick="hideElement( 'sendButton' );
27. Przedstaw wyniki pracy prowadzącemu.
ZADANIE 2 (jQuery – do samodzielnego wykonania)
1. Zapoznaj się z biblioteką jQuery i wykorzystaj 2-3 (lub więcej) gotowych pluginów na
swojej stronie, którą przygotowałeś w ramach pierwszego samodzielnego zadania na
laboratoriach numer 1 w celu jej uatrakcyjnienia.
2. Opcjonalnie (dla chętnych): przygotuj kaskadowy arkusz styli dla formularza z
zadania 1 formatujący wygląd wszystkich jego elementów, sprawdź wygląd i
zachowanie formularza pod różnymi przeglądarkami, następnie z wykorzystaniem
JavaScript (w tym również biblioteki jQuery) wykonaj ujednolicenie wyglądu pod
wszystkimi przeglądarkami – udokumentuj swoją pracę.
7
