Narzędzia internet w 4 ID 5

Obsługa zdarzeń
" zdarzenia - wszystko co zachodzi w związku z obiektami
JavaScript (np. window) i elementami XHTML. Zdarzenia
generuje np. najechanie myszą i kliknięcie na element,
wybranie elementu formularza, koniec ładowania strony,
JavaScript - wykład 4 itp.
" kiedy zachodzi jakieś zdarzenie (ang. event)
przeglądarka mo\e wywołać odpowiednią funkcję, która je
obsłu\y (ang. event handler)
Zdarzenia i formularze
" XHTML posiada atrybuty: onclick, onmouseover,
onload, słu\ące do prostej obsługi zdarzeń i za pomocą
JavaScript pozwalają modyfikować obsługę zdarzeń
w locie
Beata Pańczyk
" Zdarzenie mo\e obsłu\yć ka\da funkcja JavaScript
" Funkcje przypisuje się do obiektów lub elementów
XHTML (przez DOM) za pomocą addEventListener()
1 element.addEventListener(funkcja, zdarzenie, kolejność) 2
Zdarzenia Mysz
" click - element został kliknięty myszą. Który
przycisk został kliknięty mo\na sprawdzić w
" Mysz
obiekcie event; zachodzi równie\ przy aktywacji
" Klawiatura elementu z klawiatury.
" dblclick - podwójne kliknięcie na element
" Logiczne
" mousedown i mouseup - bardziej szczegółowa
" Obiekt event - funkcja obsługująca
reakcja na kliknięcie - gdy przycisk został
zdarzenie jako pierwszy argument dostanie
wciśnięty i puszczony
obiekt, który zawiera szczegółowe
" mouseover i mouseout - przydatne do
pokazywania dynamicznych menu i dymków ,
informacje o zdarzeniu i pozwala
działają tylko, gdy u\ytkownik u\ywa myszy
kontrolować dalszy jego los
(niezale\ne od urządzenia są focus i blur)
3 4
Logiczne
Klawiatura
" focus i blur - to stan, gdy np. pole tekstowe czeka
" keypress - wciśnięcie klawisza
na wpisanie tekstu lub odnośnik został zaznaczony
z klawiatury. Te zdarzenia zachodzą, gdy element
(analogiczne do click); obiekt event będzie
zyskuje lub traci focus
zawierał kod wciśniętego klawisza
" load i unload - zachodzą na , gdy
" keydown i keyup - moment wciśnięcia i
dokument zostanie załadowany do końca (load) i
puszczenia klawisza (podobnie jak gdy u\ytkownik zamknie lub przejdzie do innego
dokumentu (unload); przeglądarki mogą blokować
mousedown i mouseup)
lub ograniczać działanie unload (broniąc się przed
złośliwymi skryptami), dlatego nie mo\na na nim
polegać.
" submit - wysłanie formularza
5 6
1
Obsługa zdarzeń
Funkcja obsługi zdarzenia
" Obsługa zdarzeń w ciele dokumentu
" funkcja obsługi zdarzenia - reakcja na zdarzenie
" Mo\liwość obsługi w znacznikach:
" funkcje obsługi zdarzeń wywoływane atrybutami
onEvent="kod_JavaScript"

umieszczanymi w obrębie znaczników elementów,

do których mają odnosić się śledzone zdarzenia

" funkcja obsługi zdarzenia mo\e przyjmować jedną

z dwu form:
wywołanie funkcji

kod bezpośredni

<select> 7 8 Zdarzenie onMouseOver Funkcja obsługi zdarzenia - i onMouseOut przykład <a href="http://www.lublin.pl" onmouseover="confirm('Najpiękniejsze miasto świata!')" <a onmouseout="alert('Opuszczasz Lublin?')" > Lublin </a> href="url" onMouseOver = "kod_javascriptu" onMouseOut = "funkcja_javascriptu()" > tekst odsyłacza, który pojawi się na stronie </a> 9 10 ZdarzenieonClick Zdarzenie onLoad i unLoad <a href="http://www.lublin.pl" <body onload="alert('Witaj !!!')" onclick="confirm('Połączenie z Lublinem')"> onunload="alert('śegnaj!!!')" > Lublin </a> 11 12 Zdarzenie unload blokowane przez przeglądarki 2 ZdarzenieonFocus ZdarzenieonBlur " Wywoływane w chwili przeniesienia kursora " Wywoływane w chwili opuszczania pola tekstowego (po zdarzeniu onFocus) w pole tekstowe " Występuje przed zdarzeniemonBlur " Znaczniki: <body>, wszystkie elementy formularzy " Znaczniki: <body>, wszystkie elementy formularzy " Przykład " Przykład <input type="text" name="email" onfocus="this.value='';" <input type="text" name="email" onblur="sprawdz(this.value);"> onfocus="this.value='';"> 13 14 ZdarzenieonChange ZdarzenieonSelect " Wywoływane w chwili podświetlenia tekstu " Wywoływane w chwili opuszczania pola wewnątrz pola tekstowego (po zdarzeniu tekstowego, którego zawartość została onFocus) zmieniona (po zdarzeniuonFocus) " Elementy formularzy: select, text, textarea, " Elementy formularzy: select, text, textarea, password password " Przykład " Przykład <input type="text" name="email" <input type="text" name="email" onselect="sprawdz(this.value);"> onchange="sprawdz(this.value);"> 15 16 Odnalezienie formularza Formularze " Kolekcja document.forms zawiera wszystkie formularze na " Za pomocą JavaScript mo\na w pełni kontrolować stronie formularze na stronach: " document.forms[0] - obiekt reprezentujący pierwszy element sprawdzać poprawność danych umieszczonych <form> na stronie w formularzach " jeśli formularz ma atrybut name, to mo\na go wybrać po nazwie zmieniać zachowanie elementów formularza w kolekcji document.forms: (np. pozwalać na wpisywanie tylko cyfr w polu <form name="nazwaformularza"> ... tekstowym) document.forms['nazwaformularza'] dynamicznie pokazywać i ukrywać jego części. document.forms.nazwaformularza " Mo\na skorzystać ze zwykłych metod DOM " W starych skryptach i kursach mo\na spotkać jeszcze bardziej (getElementById(), nextSibling, itd.), ale W3C skrócony zapis document.nazwaformularza ten sposób jest DOM posiada te\ specjalne metody dostępu do niestandardowy, przestarzały i nie będzie działał w ka\dej formularzy, które w praktyce często są łatwiejsze przeglądarce 17 18 w u\yciu 3 Elementy formularza Zmienna tymczasowa document.forms, atrybut value " 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'] " var f = document.forms[0] " lub (w przeciwieństwie do formularzy w obiekcie document) " ka\dy element formularza ma pole form, które odwoływać się bezpośrednio po nazwie: wskazuje formularz, do którego element nale\y - document.forms[0].nazwaelementu szczególnie przydatne przy obsłudze zdarzeń document var textbox = document.forms[0].przykladowy_element; textbox.form.inny_element images[0] forms[0] links[1] links[0] " prawie ka\de pole formularza ma atrybut value, który zawiera jego wartość: document.forms.daneOsobowe.imie.value elements[0] elements[1] elements[2] elements[3] (odczyta zawartość pola o nazwie imie ) 20 19 Zdarzenia dla formularza Właściwości obiektu form " submit - zdarzenie generowane przez " name atrybut NAME element <form> tu\ przed wysłaniem " method atrybut METHOD formularza " action atrybut ACTION " onchange, onclick, onkey zmiany " encoding atrybut ENCTYPE " target atrybut TARGET " onfocus/onblur - aktywacja " length liczba elementów w formularzu " elements tablica elementów składowych formularza 21 22 Właściwości wszystkich elementów Obsługa formularzy formularzy " name łańcuch znaków odpowiadający nazwie elementu (atrybut NAME) " Metody obiektu form " value łańcuch znaków zawierający wartość reset() czyści zawartość wszystkich pól elementu (atrybut VALUE) formularza " type łańcuch znaków odpowiadający submit() wysyła zawartość formularza nazwie typu (atrybut TYPE) " Przykład wysłania formularza " form odwołanie do obiektu form mojFormularz (formularza), w którym dany element document.forms.mojFormularz.submit() został umieszczony " Obsługa zdarzeń: onReset,onSubmit 23 24 4 Składniki elementów formularzy Metody elementów formularzy " blur() sprawia, \e dany element przestaje " Obiekty text,password, textarea być aktywny (wszystkie elementy) defaultValue łańcuch znaków z " focus() uaktywnia dany element początkową wartością pola (wszystkie elementy) " Obiekt checkbox " click() symuluje kliknięcie myszą obiektu checked stan pola (true lub false) (button,checkbox, radio, defaultChecked stan początkowy reset,submit) " Obiekt radio length liczba opcji " select() zaznacza cały tekst w polu (password, text,textarea) checked, defaultChecked 25 26 Przykład 1 sprawdzenie Składniki elementów formularzy danych w formularzu <head> ... <script type="text/javascript" src="formularz.js"></script> " Obiekt select </head><body> length liczba opcji Skrypt sprawdza, czy odpowiednie pola zostały wypełnine oraz czy adres e-mail został poprawnie wpisany. options tablica opcji zdefiniowanych <div> znacznikiem <option> <form enctype="text/plain" method="post" selectedIndex indeks aktualnie action="mailto:beatap@pluton.pol.lublin.pl" onsubmit="return wybranej opcji validate_form()"> <table> <tbody> " Właściwości elementów tablicy options <tr> <td>E-mail:</td> <td> <input name="email" size="30" maxlength="80" text,value,selected, type="text "/> </td> defaultSelected </tr> <tr> <td> Imię/nazwisko: </td> <td> <input name="realname" size="30" maxlength="80" type="text "/> </td> 27 </tr> 28 Przykład 1 sprawdzenie Przykład 1 formularz.js function validate_form() { danych w formularzu validity = true; <tr> <td> Temat listu</td> <td> <input name="subject" size="30" if (!check_empty(document.forms[0].realname.value)) maxlength="80" type="text "/> </td> </tr> { validity = false; alert('Brakuje imienia i nazwiska...'); } <tr> <td> Treść listu</td> <td> <textarea name="tresc" cols="26" if (!check_empty(document.forms[0].subject.value)) rows="10">

{ validity = false; alert('Brakuje tematu listu'); }

if (!check_email(document.forms[0].email.value))

{ validity = false; alert('Podany adres e-mail nie jest poprawny'); }

return validity; }
function check_empty(text) { return (text.length > 0); }
type="reset"/>
function check_email(address) {

E-mail:	type="text">
Nazwisko i imię:
Adres:	type="text">

Narzędzia internet w 4 ID 5

Formularz sprawdzający poprawność

Wybierz kolor: