JavaScript - wykład 4. Zdarzenia i formularze. Obsługa zdarzeń. Zdarzenia. Mysz. Logiczne. Klawiatura. Beata Pańczyk

Transkrypt

1 Obsługa zdarzeń JavaScript - wykład 4 Zdarzenia i formularze Beata Pańczyk 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() 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 3 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) 4 Klawiatura Logiczne 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) 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 5 6 1

2 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 Funkcja obsługi zdarzenia - przykład <a href="url" onmouseover = "kod_javascriptu" onmouseout = "funkcja_javascriptu()" > tekst odsyłacza, który pojawi się na stronie </a> 7 8 Zdarzenie onmouseover i onmouseout <a href=" onmouseover="confirm('najpiękniejsze miasto świata!')" onmouseout="alert('opuszczasz Lublin?')" > Lublin </a> Zdarzenie onclick <a href=" onclick="confirm('połączenie z Lublinem')"> Lublin </a> 9 10 Zdarzenie onload i unload <body onload="alert('witaj!!!')" onunload="alert('śegnaj!!!')" > Zdarzenie onfocus Wywoływane w chwili przeniesienia kursora w pole tekstowe Występuje przed zdarzeniem onblur Znaczniki: <body>, wszystkie elementy formularzy onfocus="this.value='';"> Zdarzenie unload blokowane przez przeglądarki 2

3 Zdarzenie onblur Wywoływane w chwili opuszczania pola tekstowego (po zdarzeniu onfocus) Znaczniki: <body>, wszystkie elementy formularzy onfocus="this.value='';" onblur="sprawdz(this.value);"> Zdarzenie onchange Wywoływane w chwili opuszczania pola tekstowego, którego zawartość została zmieniona (po zdarzeniu onfocus) Elementy formularzy: select, text, textarea, password onchange="sprawdz(this.value);"> Zdarzenie onselect Wywoływane w chwili podświetlenia tekstu wewnątrz pola tekstowego (po zdarzeniu onfocus) Elementy formularzy: select, text, textarea, password onselect="sprawdz(this.value);"> 15 Formularze 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 16 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 17 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 document links[0] images[0] forms[0] links[1] elements[0] elements[1] elements[2] elements[3] 18 3

4 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 Zdarzenia dla formularza submit - zdarzenie generowane przez element <form> tuŝ przed wysłaniem formularza onchange, onclick, onkey zmiany onfocus/onblur - aktywacja (odczyta zawartość pola o nazwie imie ) Właściwości obiektu form Obsługa formularzy name method action encoding target length elements 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 wysłania formularza mojformularz document.forms.mojformularz.submit() Obsługa zdarzeń: onreset, onsubmit Właściwości wszystkich elementów formularzy name value type form ł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 Metody elementów formularzy blur() sprawia, Ŝe dany element przestaje być aktywny (wszystkie elementy) focus() uaktywnia dany element (wszystkie elementy) click() symuluje kliknięcie myszą obiektu (button, checkbox, radio, reset, submit) select() zaznacza cały tekst w polu (password, text, textarea)

5 Składniki elementów formularzy Składniki elementów formularzy Obiekty text, password, textarea defaultvalue łańcuch znaków z początkową wartością pola Obiekt checkbox checked stan pola (true lub false) defaultchecked stan początkowy Obiekt radio length liczba opcji Checked defaultchecked 25 Obiekt select length liczba opcji options tablica opcji zdefiniowanych znacznikiem <option> selectedindex indeks aktualnie wybranej opcji Właściwości elementów tablicy options text value selected defaultselected 26 Walidacja formularzy Dwa sposoby walidacji: pierwszy - przypisanie zdarzeniu onsubmit własnej procedury obsługi drugi - zastąpienie przycisku submit własnym Przykład 1a 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> 29 Przykład 1a plik walid1.js function sprawdz() { var brakuje_danych=false; var formularz=document.forms[0]; var napis=""; if (formularz.nazwisko.value == "") { napis += "nazwisko\n"; brakuje_danych=true; if (formularz.tel.value == "") { napis += "telefon\n"; brakuje_danych=true; if (!brakuje_danych) formularz.submit(); else alert ("Nie wypełniłeś następujących pól:\n" + napis); 30 5

6 Przykład 1b Przykład 2 radio.html 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; 31 <head><script type="text/javascript" src="sprawdz.js"> </script></head> <body> <form action="mailto:xx@xxxx.xx?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> 32 Przykład 2 sprawdz.js 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 Przykład 3 -wybór opcji <head><script type="text/javascript" src="js3.js"></script> </head> <body> <form action="mailto:xx@xxxx.xx?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 plik js3.js Przykład 3 function wyslijdane(form) { wybrany=form.kolor.selectedindex; if (form.kolor.options[wybrany].value=="") { alert("musisz wybrać kolor"); form.kolor.focus(); return false; return true;