JavaScript 2

Transkrypt

JavaScript 2

Ćwiczenie 5
Temat:
Zawansowane
skrypty JavaScript
Cel ćwiczenia:
W ramach ćwiczenia student rozszerzy swoją wiedzę o obsłudze
formularzy o techniki ich weryfikacji przed wysłaniem do serwera. W celu
ułatwienia analizy wypełnionego formularza zastosowane zostaną wyrażenia
regularne.
Druga część ćwiczenia dotyczy sposobów obsługi zdarzeń czasowych,
klawiatury i myszy, które pozwalają uzyskać bardziej interaktywne strony
WWW.
Weryfikacja zawartości formularza
Obiekt formularz posiada zdarzenie onSubmit wywoływane tuż przed jego wysłaniem na
serwer (WWW, email) po naciśnięciu przycisku Submit. JavaScript umożliwia nie tylko reakcję
na zdarzenie, ale pozwala także w przypadku części zdarzeń blokadę akcji przez nie
reprezentowanych. W przypadku zdarzenia onSubmit możemy zablokować za pomocą
skryptu wysłanie formularza.
Przykład
<html>
<head>
<title>OstrzeŜenie</title>
</head>
<body>
<form action="Oblicz.php" onsubmit="return confirm('Jesteś pewien ?');">
Promień <input name="r" type="text" />
<input type="submit" value="Oblicz" />
</form>
</body>
</html>
W powyższym przykładzie, jeżeli funkcja confirm po decyzji użytkownika zwróci fałsz, to całe
zdarzenie zwróci taką wartość i akcja wysłania zostanie zablokowana.
W trakcie weryfikacji zawartości formularza do jego elementów możemy odwoływać się przy
pomocy metod obiektu document, takich jak: getElementById (jeżeli element posiada
atrybut id) lub getElementsByName (jeżeli element posiada atrybut name).
Przykład
<html>
<head>
<title>Kontrola</title></head>
<script type="text/javascript">
function Sprawdz()
{
if (isNaN(document.getElementById('promien').value))
{
alert(Number(document.getElementById('promien').value));
return false;
}
if (Number(document.getElementsByName('r')[0].value) < 0)
{
alert('Promień jest mniejszy 0');
return false;
}
return true;
}
Przykład
30
</script>
<body>
<form id="f1" action="Oblicz.php" onsubmit="return Sprawdz();">
Promień <input id="promien" name="r" type="text" />
<input type="submit" value="Oblicz" />
</form></body></html>
Wyrażenia regularne
Wyrażenia regularne to wzorce, które opisują łańcuchy symboli. Stanowią doskonały sposób
na sprawdzanie i modyfikowanie tekstu. Wzorzec opisujemy za pomocą znaków
standardowych i symboli, które w elastyczny sposób opisują fragmenty tekstu. Tabela
poniżej zawiera podstawowy zestaw symboli.
Symbol
Opis
Przykład
Ciągi zgodne
Ciągi niezgodne
^
Początek ciągu
^kot
kot, kotka, kotwa
pies, pokot
$
Koniec ciągu
$a
Ania, kotka
Jan, kot
.
Jeden dowolny znak
.asia
Kasia,Basia
Ela, Joasia
[…]
Jeden z wymienionych
k[oa]t
kot,kat
kit, koat, kotek
Z[0-5]
Z2,Z4
Zx,Z9
k[^oa]t
kit,ket
kat, kot, kotek
znaków
[^…]
Jeden z
niewymienionych
[…|...]
Jeden z ciągów
[B||Jo|Mich]asia
Basia, Michasia
Kasia, Ela
?
Zero lub jeden znak
list?owy
lisowy, listowy
listy, lisa
+
Jeden lub wiele znaków
[A-Z][a-z]+
Joanna, Kamil
anna, 123, kot
*
Zero lub wiele znaków
ko*t
kt,kot,koooot
lot,gyy
{n}
Dokładnie n znaków z
[0-9]{2}-[0-9]{7}
32-6034111
32-603, 997
[A-Z][a-z]{3,}
Janek,Ania
Ola, Ela
zakresu: tutaj [0-9]
{n,}
Co najmniej n znaków z
zakresu: tutaj [0-9]
{n,m}
Pomiędzy n i m znaków
[0-9]{2,4}
12, 432, 4223
4, 12345
\d
Cyfra
\d{3}
123, 223
A21, 1234
\D
Znak niebędący cyfrą
\D+
Asad, ada
Sdd1, 123
Przykład
31
\w
Litera, cyfra, _
\w{3}
A12,123, 1_2
1+3
\W
Znak niebędący literą,
\W{3}
+!!, ---
Ala, 123
Jan\sKowalski
Jan Kowalski
Jan-Kowalski
\S+
Jan, 1234, Jaks
Jan Kowalski
([A-Z][a-z]+)(-[A-
Kowalski, Kowalski-
Kow2,
Z][a-z]+)*
Nowak
cyfrą, _
\s
Spacja, tabulacja, nowa
linia
\S
Każdy znak niebędący
spacją, tabulacją i nl
(…)
Blok znaków
Kowalski—Nowak
Ponieważ część znaków ma specjalne znaczenie, to wypadku gdy potrzebujemy ich we
wzorcu w ich znaczeniu pierwotnym używamy następujących symboli:
\.
\*
\/
\\
\?
\:
\^
\+
\\
\=
\|
W JavaScript istnieją dwa podstawowe sposoby definiowania wyrażeń regularnych. Oba
sprowadzają się w rzeczywistości do utworzenia obiektu klasy RegExp.
var wyrazenie = /[a-z]+/g
var wyrazenie = new RegExp("[a-z]+", "g")
Symbol "g” na końcu wyrażenia to jedna z flag oddziałujących na wyszukiwanie wzorców:
Flaga
Opis
g
Ignorowania wielkości liter
i
Wyszukiwanie wszystkich pasujących fragmentów, a nie pierwszego
Obiekt klasy RegExp udostępnia bardzo przydatną metodę test, która sprawdza, czy dany
ciąg jest zgodny z wyrażeniem regularnym. Jeżeli taka zgodność ma miejsce metoda zwraca
prawdę logiczną.
Przykład – kontrola zgodności ze wzorcem
<html>
<head>
<title>Kontrola imienia</title>
</head>
function Sprawdz()
{
var tekst = document.getElementById('imie').value;
var wyrazenie = /^[A-Z][a-z]+$/;
if (wyrazenie.test(tekst))
Przykład – kontrola zgodności ze wzorcem
32
{ return true; }
else { alert('Imię niepoprawne'); return false;
}
}
</script>
<body>
<form id="f1" action="Baza.aspx" onsubmit="return Sprawdz();">
Imię <input id="imie" type="text" />
<input type="submit" value="Dodaj" />
</form>
</body>
</html>
Także obiekty klasy String (ciągi tekstowe) udostępniają metody oparte na wyrażeniach
regularnych. Metoda match pozwala wyszukać wystąpienia wzorca w tekście i zwraca ich
tablicę. W wypadku braku wystąpień metoda zwraca wartość pustą null.
Przykład – wyszukiwanie wzorca
<html>
<head>
<title>Wyszukiwanie</title>
</head>
function Szukaj()
{
var tekst = document.getElementById('dane').value;
var wyrazenie = /\d+/g;
wynik = tekst.match(wyrazenie);
liczby = '';
for (i = 0; i < wynik.length; i++)
liczby += wynik[i] + ' ';
alert(liczby);
}
</script>
<body>
<textarea id="dane"></textarea> <br />
<input type="button" value="Szukaj liczb" onclick="Szukaj();"/><br />
</body>
</html>
33
Metoda replace obiektu String umożliwia odszukanie i podmianę fragmentów tekstu
zgodnych ze wzorcem. W tekście zastępującym możemy używać symboli $1 $2, które
oznaczają odszukane fragmenty wzorca umieszczone w blokach ().
<html>
<head>
<title>Zastępowanie</title>
</head>
function Zastap()
{
var tekst = document.getElementById('dane').value;
var wyrazenie = /(\d+)/g;
wynik = tekst.replace(wyrazenie, '<b>$1</b>'); //wytłuszczenie
linii
wynik = wynik.replace(/\n/g, '<br />'); //rozdział na line
document.getElementById('dane2').innerHTML=wynik;
}
</script>
<body>
<textarea id="dane" rows="5"></textarea> <br />
<input type="button" value="Zastąp" onclick="Zastap();"/><br />
<div id="dane2" style="background: yellow; width: 200px;
height:100px"></div>
</body>
</html>
W przykładzie widzimy (przy rozdziale na linie), że istnieje możliwość zdefiniowania
wyrażenia regularnego bezpośrednio w wywołaniu metody.
Zadanie 1
1. Przygotuj formularz, jak na rysunku poniżej. Formularz ma być wysyłany metodą get
pod adres http://www.polsl.pl po naciśnięciu przycisku „Dodaj do bazy”.
34
2. Zablokuj możliwość wysłania formularza, jeżeli użytkownik nie wprowadził poprawnie
jednoczłonowego imienia zaczynającego się z dużej litery. Pozwól na spacje przed i za
imieniem.
3. Zablokuj możliwość wysłania formularza, jeżeli użytkownik nie wprowadził poprawnie
jedno lub wieloczłonowego nazwiska, w którym człony są rozdzielane myślnikiem.
Pozwól na spacje przed i za imieniem.
4. Zablokuj możliwość wysłania formularza, jeżeli użytkownik nie wprowadził numeru
telefonu w formacie (0xx) xxx-xx-xx (np. (032) 204-32-22)
5. Uzupełnij weryfikację formularza o wyświetlanie okienka informacyjnego i
automatyczne przejście do błędnego pola formularza (metoda focus).
6. Rozszerz kontrolę imienia o uwzględnienie płci osoby przyjmując, że imiona żeńskie
kończą się literą "a” a męskie nie.
Zdarzenia czasowe
Obiekt window modelu DOM udostępnia zestaw metod pozwalających zautomatyzować
działanie skryptu w oparciu o zdarzenia czasowe.
Metoda
Opis
setTimeout(kod, czas)
Zlecenie jednokrotnego wykonania kodu JavaScript po określonej liczbie
milisekud. Metoda zwraca identyfikator zlecenia.
clearTimeout(id)
Anuluwanie zlecenia jednokrotnego wykonania kodu o podanym
identyfikatorze
setInterval(kod, okres)
Zlecenie wielokrotnego wykonania kodu JavaScript co podany okres (w
milisekudach). Metoda zwraca identyfikator zlecenia.
clearInterval(id)
Anuluwanie zlecenia wielokrotnego wykonania kodu o podanym
35
identyfikatorze
Przykład – wykonanie polecenia JavaScript z opóźnieniem
<html>
<head>
<title>Automatyczne przejście</title>
var t = setTimeout('navigate("http:\\\\www.onet.pl\")', 5000);
</script>
</head>
<body >
Za pięć sekund opuścisz tą stronę, chyba Ŝe naciśniesz ten przycisk
<input type="button" value="Zostaję" onclick="clearTimeout(t);" />
</body>
</html>
Przykład – animacja w JavaScript
<html>
<head>
<title>Animacja</title>
var t;
var x = 200, y = 200; //pozycja piłki
var dx = -5, dy = -7; //wektor przesunięcia
function Przesun() {
x+=dx;
y+=dy;
if (x<0 || x>200) dx=-dx; //zmiana kierunku poziomego
if (y<0 || y>200) dy=-dy; //zmiana kierunku pionowego
document.getElementById('pingpong').style.left=x;
document.getElementById('pingpong').style.top=y;
}
</script>
</head>
<body>
<img id="pingpong" src="pingpong.JPG" style="position:absolute; left:200px;
top:200px;" />
<input type="button" value="Start"
onclick="t=setInterval('Przesun();',50);"/>
<input type="button" value="Stop" onclick="clearInterval(t);"/>
</body>
</html>
36
Zadanie 2
1. Opracować skrypt, który zmieni kolor tła strony na niebieski po 5 sekundach od
załadowania strony.
2. Oprogramować wyświetlanie aktualnego czasu (raz na sekundę) w elemencie DIV
osadzonym bezwzględnie w lewym górny roku strony.
Zdarzenia myszy
Obiekt document i obiekty elementów HTML obsługują zdarzenia generowane przez mysz.
Można je wykorzystać do zaawansowanej obsługi interfejsu użytkownika.
Zdarzenie
Opis
Onclick
Zachodzi w chwili kliknięcia myszką
Ondblclick
Zachodzi w chwili podwójnego kliknięcia myszką
onmousedown
Zachodzi w chwili naciśnięcia przycisku myszy
Onmouseup
Zachodzi w chwili zwolnienia przycisku myszy
Onmousemove
Zachodzi w chwili przesunięcia kursora myszy
Onmouseover
Zachodzi w chwili najechania kursorem myszy nad obiekt
Onmouseout
Zachodzi w chwili opuszczenia obiektu przez kursor myszy
Poza faktem wystąpienia zdarzenia, często potrzebujemy dodatkowych informacji.
Parametry zdarzenia dostarcza nam poprzez swoje właściwości obiekt event.
Właściwość
Opis
clientX, clientY
Współrzędne kursora względem naroża okna
screenX,screenY
Współrzędne kursora względem naroża ekranu
Button
Numer naciśniętego przycisku
Przykład – reakcja na ruch myszy
<html>
Przykład – reakcja na ruch myszy
37
<head>
<title>Obraz z kursorem</title>
function Przesun() {
x=event.clientX;
y=event.clientY;
document.getElementById('pingpong').style.left=x;
document.getElementById('pingpong').style.top=y;
}
</script>
</head>
<body onmousemove="Przesun();">
<img id="pingpong" src="pingpong.JPG" style="position:absolute; left:200px;
top:200px;" />
</body></html>
Zdarzenia klawiatury
Zdarzenie
Opis
onkeydown
Zachodzi w chwili naciśnięcia klawisza. Właściwość
event.keyCode zawiera kod reprezentujący położenie
klawisza
onkeyup
Zachodzi w chwili zwolnienia klawisza. Właściwość
event.keyCode zawiera kod reprezentujący położenie
klawisza
onkeypress
Zachodzi pomiędzy wcześniejszymi zdarzeniami.
Właściwość keyCode obiektu ewent zawiera kod ASCII
klawisza.
Przykład
<html>
<head>
<title>Filtracja znaków</title>
function Filtr() {
var znak = String.fromCharCode(event.keyCode);
//dopuść tylko duŜe litery
if (znak >= 'A' && znak <= 'Z') return true;
else return false;
}
</script>
</head>
<body>
<input onkeypress="return Filtr();" />
</body>
</html>
Zadanie 3
Przykład
38
1. Umieścić na stronie element DIV, jak na rysunku.
2. Przygotować funkcję DuzeMenu, która podmieni (wykorzystując właściwości
innerHTML) pierwotną zawartość DIV na poniższą. Przetestować działanie funkcji na
zdarzeniu click przycisku button.
3. Przygotować funkcje MaleMenu, która przywróci pierwotną zawartość DIV.
Przetestować funkcje na drugim przycisku button.
4. Wykorzystując odpowiednie zdarzenia myszy obiektu DIV uzyskać następując
funkcjonalność: po najechaniu kursorem napisu MENU pojawia się spis trzech
hiperłączy. Po opuszczeniu spisu przez kursor powraca pierwotny wygląd DIV.
Przykład
39

JavaScript 2

Transkrypt

Podobne dokumenty

Kolor tła: Kolor tła obrazkowy: <body

Wprowadzenie do języka html

script type="text/javascript"

Tagi HTML

Proste menu wyboru linków html-a.

ELEMENTY ANALIZY ALGORYTMÓW 1. Każdy algorytm powinien

Pobierz

i-lekcja

Pakiet webMathematica jako narzędzie wspomagające proces

Tagi HTML Przykład Rozwiązaniem zadania powinien być program