docWykład 4 - Republika WWW
download 
Reklamacja Transkrypt
Wykład 4 - Republika WWW
Obsługa zdarzeń
• zdarzenia - wszystko co zachodzi w związku z
obiektami JavaScript (np. window) i elementami
XHTML
• przeglądarka moŜe wywołać funkcję do obsługi
zdarzenia (ang. event handler)
• atrybuty XHTML np.: onclick, onmouseover,
onload, słuŜą do prostej obsługi zdarzeń i za pomocą
JavaScript pozwalają modyfikować obsługę zdarzeń
„w locie”
• funkcje moŜna przypisać do obiektów lub elementów
XHTML (przez DOM) za pomocą
addEventListener()
JavaScript - wykład 4
Zdarzenia i formularze
Beata Pańczyk
element.addEventListener(funkcja, zdarzenie, kolejność)
1
•
•
•
•
2
Zdarzenia
Mysz
Mysz
Klawiatura
Logiczne
Obiekt event - funkcja obsługująca
zdarzenie jako pierwszy argument dostanie
obiekt, który zawiera szczegółowe
informacje o zdarzeniu i pozwala
kontrolować dalszy jego los
• click
• dblclick
• mousedown i mouseup - bardziej
szczegółowa reakcja na kliknięcie - gdy
przycisk został wciśnięty i puszczony
• mouseover i mouseout - przydatne do
pokazywania np. dynamicznych menu i
„dymków”; działają tylko, gdy uŜytkownik
uŜywa myszy (niezaleŜne od urządzenia są
focus i blur)
3
4
Logiczne
Klawiatura
• focus i blur - to stan, gdy np. pole tekstowe czeka
na wpisanie tekstu lub odnośnik został zaznaczony
z klawiatury. Te zdarzenia zachodzą, gdy element
zyskuje lub traci focus
• load i unload - zachodzą na <body>, gdy
dokument zostanie załadowany do końca (load) i
gdy uŜytkownik zamknie lub przejdzie do innego
dokumentu (unload); przeglądarki mogą blokować
lub ograniczać działanie unload (broniąc się przed
złośliwymi skryptami), dlatego nie moŜna na nim
polegać.
• submit - wysłanie formularza
• keypress - wciśnięcie klawisza
(analogiczne do click); obiekt event będzie
zawierał kod wciśniętego klawisza
• keydown i keyup - moment wciśnięcia i
puszczenia klawisza (podobnie jak
mousedown i mouseup)
5
6
1
Funkcja obsługi zdarzenia przykład
Funkcja obsługi zdarzenia
• obsługa zdarzeń – w ciele dokumentu
• funkcja obsługi zdarzenia - reakcja na zdarzenie
• funkcje obsługi zdarzeń wywoływane atrybutami
onEvent="kod_JavaScript"
• funkcja obsługi zdarzenia moŜe przyjmować jedną
z dwu form:
– wywołanie funkcji
– kod bezpośredni
<a
href="url"
onMouseOver = "kod_javascriptu"
onMouseOut = "funkcja_javascriptu()"
>
tekst odsyłacza, który pojawi się na stronie
</a>
7
8
Zdarzenie onClick
Zdarzenie onMouseOver
i onMouseOut
<a href="http://www.lublin.pl"
onclick="confirm('Połączenie z Lublinem')">
Lublin
</a>
<a href="http://www.lublin.pl"
onmouseover="confirm('Najpiękniejsze miasto świata!')"
onmouseout="alert('Opuszczasz Lublin?')" > Lublin </a>
9
Zdarzenie onLoad i unLoad
<body
10
Zdarzenie onFocus
onload="alert('Witaj !!!')"
onunload="alert('śegnaj!!!')" >
• Wywoływane w chwili przeniesienia kursora
w pole tekstowe
• Występuje przed zdarzeniem onBlur
• Znaczniki: <body>, wszystkie elementy
formularzy
• Przykład
<input type="text" name="email"
onfocus="this.value='';">
Zdarzenie unload – blokowane przez przeglądarki
11
12
2
Zdarzenie onBlur
Zdarzenie onChange
• Wywoływane w chwili opuszczania pola
tekstowego (po zdarzeniu onFocus)
• Znaczniki: <body>, wszystkie elementy
formularzy
• Przykład
• Wywoływane w chwili opuszczania pola
tekstowego, którego zawartość została
zmieniona (po zdarzeniu onFocus)
• Elementy formularzy: select, text, textarea,
password
• Przykład
<input type="text" name="email"
onfocus="this.value='';"
onblur="sprawdz(this.value);">
<input type="text" name="email"
onchange="sprawdz(this.value);">
13
14
Formularze
Zdarzenie onSelect
• Wywoływane w chwili podświetlenia tekstu
wewnątrz pola tekstowego (po zdarzeniu
onFocus)
• Elementy formularzy: select, text, textarea,
password
• Przykład
<input type="text" name="email"
onselect="sprawdz(this.value);">
15
• Za pomocą JavaScript moŜna w pełni kontrolować
formularze na stronach:
– sprawdzać poprawność danych
– zmieniać zachowanie elementów formularza
(np. pozwalać na wpisywanie tylko cyfr w polu
tekstowym)
– dynamicznie pokazywać i ukrywać jego części.
• MoŜna skorzystać ze zwykłych metod DOM
(getElementById(), nextSibling, itd.), ale W3C
DOM posiada teŜ specjalne metody dostępu do
formularzy, które w praktyce często są łatwiejsze
w uŜyciu
Odnalezienie formularza
Elementy formularza
• Kolekcja document.forms zawiera wszystkie formularze na
stronie
• document.forms[0] - obiekt reprezentujący pierwszy element
<form> na stronie
• jeśli formularz ma atrybut name, to moŜna go wybrać po nazwie
w kolekcji document.forms:
<form name="nazwaformularza"> ...
document.forms['nazwaformularza']
document.forms.nazwaformularza
• W starych skryptach i kursach moŜna spotkać jeszcze bardziej
skrócony zapis document.nazwaformularza — ten sposób jest
niestandardowy, przestarzały i nie będzie działał w kaŜdej
przeglądarce
• Wewnątrz obiektu formularza moŜna odwoływać się do jego pól
po nazwach za pośrednictwem kolekcji elements:
document.forms[0].elements['nazwaelementu']
• lub (w przeciwieństwie do formularzy w obiekcie document)
odwoływać się bezpośrednio po nazwie:
document.forms[0].nazwaelementu
16
document
links[0]
17
images[0]
forms[0] links[1]
elements[0] elements[1] elements[2] elements[3]
18
3
Zmienna tymczasowa
document.forms, atrybut value
• var f = document.forms[0]
• kaŜdy element formularza ma pole form, które
wskazuje formularz, do którego element naleŜy szczególnie przydatne przy obsłudze zdarzeń
var textbox =
document.forms[0].przykladowy_element;
textbox.form.inny_element
• prawie kaŜde pole formularza ma atrybut value, które
zawiera jego wartość:
document.forms.daneOsobowe.imie.value
(odczyta zawartość pola o nazwie „imie”)
Zdarzenia dla formularza
• submit - zdarzenie generowane przez
element <form> tuŜ przed wysłaniem
formularza
• onchange, onclick, onkey – zmiany
• onfocus/onblur - aktywacja
19
Właściwości obiektu form
•
•
•
•
•
•
•
name
method
action
encoding
target
length
elements
20
Obsługa formularzy
atrybut NAME
atrybut METHOD
atrybut ACTION
atrybut ENCTYPE
atrybut TARGET
liczba elementów w formularzu
tablica elementów składowych
formularza
• Metody obiektu form
–reset() czyści zawartość wszystkich pól
formularza
–submit() wysyła zawartość formularza
• Przykład wysłania formularza
mojFormularz
document.forms.mojFormularz.submit()
• Obsługa zdarzeń: onReset, onSubmit
21
Właściwości wszystkich elementów
formularzy
• name
• value
• type
• form
22
Metody elementów formularzy
łańcuch znaków odpowiadający
nazwie elementu (atrybut NAME)
łańcuch znaków zawierający wartość
elementu (atrybut VALUE)
łańcuch znaków odpowiadający
nazwie typu (atrybut TYPE)
odwołanie do obiektu form
(formularza), w którym dany element
został umieszczony
sprawia, Ŝe dany element przestaje
być aktywny (wszystkie elementy)
uaktywnia dany element
• focus()
(wszystkie elementy)
symuluje kliknięcie myszą obiektu
• click()
(button, checkbox, radio,
reset, submit)
• select() zaznacza cały tekst w polu
(password, text, textarea)
• blur()
23
24
4
Składniki elementów formularzy
Składniki elementów formularzy
• Obiekt select
– length
• Obiekty text, password, textarea
łańcuch znaków
– defaultValue
z początkową wartością pola
• Obiekt checkbox
– checked
– defaultChecked
liczba opcji
tablica opcji zdefiniowanych
znacznikiem <option>
– selectedIndex indeks aktualnie wybranej opcji
– options
stan pola (true lub false)
stan początkowy
• Właściwości elementów tablicy options
• Obiekt radio
– length
– Checked
– defaultChecked
– text
– value
– selected
– defaultSelected
liczba opcji
25
26
Przykład 1a
Walidacja formularzy
http://republika.onet.pl/13965,15350,10,06-02,kursy.html#15350
Dwa sposoby walidacji:
• pierwszy - przypisanie zdarzeniu onsubmit
własnej procedury obsługi
• drugi - zastąpienie przycisku submit
własnym
27
28
Przykład 1a – plik walid1.html
<head> <title>Walidacja 1</title>
<script type="text/javascript" src="walid1.js"></script>
</head> <body>
<form name="formularz1" action="index.php" method="get">
<div>Proszę podać swoje dane:<br />
<h5>(Pola oznaczone * muszą zostać wypełnione)</h5>
</div>
<table>
<tr><td>Imię:</td> <td><input type="text" name="imie"></td></tr>
<tr><td>Nazwisko:</td> <td><input type="text" name="nazwisko">*</td>
</tr>
<tr> <td>Tel.:</td> <td><input type="text" name="tel">*</td></tr>
<tr><td></td><td align="center"> <input type="button" name="wyslij"
value="Wyślij!" onclick="sprawdz()" > </td></tr>
</table></form></body></html>
Przykład 1a – plik walid1.js
function sprawdz()
{ var brakuje_danych=false;
var formularz=document.forms[0];
var napis="";
if (formularz.nazwisko.value == "") {
if (formularz.tel.value == "")
}
{
napis += "nazwisko\n";
brakuje_danych=true;
napis += "telefon\n";
brakuje_danych=true;
}
if ( !brakuje_danych) formularz.submit();
else alert ("Nie wypełniłeś następujących pól:\n" + napis);
}
29
30
5
Przykład 2 – radio.html
Przykład 1b
Gdyby w formularzu znalazł się element submit,
naleŜałoby :
• zmienić komórkę tabeli
<td align="center"> <input type="submit"
name="wyslij" value=" Wyślij! "> </td>
• aby przechwycić zdarzenie onsubmit dla formularza,
zmodyfikować naleŜy równieŜ znacznik form:
<form name="formularz1" action="index.php"
method="get" onsubmit="return sprawdz();" >
• funkcję sprawdz() zmodyfikować do postaci:
if (!brakuje_danych) return true;
else { alert ("Nie wypełniłeś następujących pól:\n" + napis);
return false;
}
<head><script type="text/javascript" src="sprawdz.js">
</script></head>
<body>
<form action="mailto:[email protected]?subject=test"
method="post" onsubmit="return sprawdz();">
<p> <br/>Najbardziej lubisz:
<input type="radio" name="wybor" value="d"/>Delphi
<input type="radio" name="wybor" value='c' />C++
<input type="radio" name="wybor" value='j'/>Java
<input type="submit" value="wyślij"/>
</p>
</form></body></html>
31
Przykład 2 – sprawdz.js
32
Przykład 3 -wybór opcji
function sprawdz()
{ ile=document.forms[0].wybor.length;
for (i=0;i<ile;i++)
{ wybrany=document.forms[0].wybor[i].checked;
if (wybrany) break; }
if(!wybrany)
{ alert("Musisz wybrać język! ");
document.forms[0].wybor[0].focus();
return false; }
else return true;
}
33
<head><script type="text/javascript" src="js3.js"></script>
</head>
<body>
<form action="mailto:[email protected]?subject=test"
method="post" onsubmit="return wyslijDane(this)">
<h3>Wybierz kolor:</h3>
<p>
<select name="kolor">
<option value="" selected="selected">wybierz kolor</option>
<option value="czerwony">czerwony</option>
<option value="zielony">zielony</option>
<option value="niebieski">niebieski</option>
</select> <br/> <input type="submit" value="wyślij"/>
</p>
</form>
</body></html>
34
Przykład 3
Przykład 3 – plik js3.js
function wyslijDane(form)
{ wybrany=form.kolor.selectedIndex;
if (form.kolor.options[wybrany].value=="")
{ alert("Musisz wybrać kolor");
form.kolor.focus();
return false;
}
return true;
}
35
36
6
