Podstawy programowania w języku JavaScript Część trzecia Funkcje i programowanie sterowane zdarzeniami Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi uważnego w nim uczestnictwa. Opracowanie to jest chronione prawem autorskim. Wykorzystywanie jakiegokolwiek fragmentu w celach innych niż nauka własna jest nielegalne. Dystrybuowanie tego opracowania lub jakiejkolwiek jego części oraz wykorzystywanie zarobkowe bez zgody autora jest zabronione.
Zanim zaczniemy przydatne funkcje obsługi okien dialogowych Funkcja alert ( tekst ) wyprowadza okno powiadomienia wyświetlający tekst i przycisk OK, którym użytkownik zamyka okno. alert( "Tu okno powiadomie ń, naci ś nij OK" ); Copyright Roman Simiński Strona : 2
Zanim zaczniemy przydatne funkcje obsługi okien dialogowych Funkcja confirm ( tekst ) wyprowadza okno powiadomienia wyświetlający tekst oraz przyciski OK i Cancel (Anuluj). Rezultatem jest true gdy naciśnięto OK, false gdy naciśnięto Cancel. if( confirm( "Naci ś nij OK aby poznać nasz ą ofert ę " ) ) document.write( "Zapraszamy do przegl ą du oferty" ); else document.write( "Szkoda, mo ż e kiedy indziej" ); Copyright Roman Simiński Strona : 3
Zanim zaczniemy przydatne funkcje obsługi okien dialogowych Funkcja prompt ( tekstpodpowiedzi, tekstdomyślny ) wyprowadza okno wczytywania danych wyświetlające tekstpodpowiedzi oraz pole tekstowe o wartości domyślnej tekstdomyślny. Rezultatem funkcji jest wprowadzony tekst po naciśnięciu przycisku OK, wartość null po naciśnięciu przycisku Cancel (Anuluj). var surfername = prompt( "Jak Ci ę mam nazywać:", "" ); if( surfername!= null && surfername!= "" ) document.write( "Witaj " + surfername + "!" ); else document.write( "Witaj nieznajomy!" ); Copyright Roman Simiński Strona : 4
Definiowanie funkcji function nazwafunkcji( parametr1, parametr2,..., parametrn ) kod funkcji function powitanie() alert( "Witaj serferze :)" ); Proste funkcje bezparametrowe o charakterze procedur function powitanie() var surfername = prompt( "Jak Ci ę mam nazywać:", "" ); if( surfername!= null && surfername!= "" ) document.write( "Witaj " + surfername + "!" ); else document.write( "Witaj nieznajomy!" ); Copyright Roman Simiński Strona : 5
Wywoływanie funkcji Funkcje można wywoływać w zwykły sposób podając nazwę i ewentualne parametry. powitanie(); Bardzo często wywołanie funkcji jest wynikiem zaistnienia pewnego zdarzenia na stronie. Funkcja wywoływana po zaistnieniu zdarzenia nazywana jest funkcją obsługi zdarzenia (ang. event handler). Typowe ale nie wszystkie obsługiwane zdarzenia: onclick, onload, onmouseover, onmouseout, onunload. Copyright Roman Simiński Strona : 6
Wywoływanie funkcji obsługa onload Funkcja obsługi zdarzenia onload jest wywoływana po kompletnym załadowaniu strony (znacznik body), rysunku (znacznik img) lub ramki (znacznik frame). <html> <head> function powitanie() var surfername = prompt( "Jak Ci ę mam nazywać:", "" ); if( surfername!= null && surfername!= "" ) document.write( "Witaj " + surfername + "!" ); else document.write( "Witaj nieznajomy!" ); </head> <body onload = "powitanie()"> </body> </html> Copyright Roman Simiński Strona : 7
Wywoływanie funkcji obsługa onunload Funkcja obsługi zdarzenia onunload jest wywoływana natychmiast po akcji opuszczenia strony. <html> <head> var surfername; //... function pozegnanie() alert( surfername + " pa, pa!" ) </head> <body onunload = "pozegnanie()"> </body> </html> Copyright Roman Simiński Strona : 8
Wywoływanie funkcji obsługa onload i onunload Teoretycznie to powinno działać ale nie działa :( <html> <head> var surfername = ""; function powitanie() surfername = prompt( "Jak Ci ę mam nazywać:", "" ); if( surfername!= null && surfername!= "" ) document.write( "Witaj " + surfername + "!" ); else document.write( "Witaj nieznajomy!" ); function pozegnanie() alert( surfername + " pa, pa!" ) </head> <body onload="powitanie()" onunload="pozegnanie()" > </body> </html> Copyright Roman Simiński Strona : 9
Wywoływanie funkcji obsługa onmouseover i onmouseout Wykorzystanie zdarzeń mouseover i mouseout: <html> <head> function darkcolor() document.bgcolor='#9f9f9f'; function lightcolor() document.bgcolor='#ffffff'; </head> <body> <a href="#" onmouseover="darkcolor()" onmouseout="lightcolor()"> Ten link jest wyj ą tkowy </a> </body> </html> Copyright Roman Simiński Strona : 10
Wywoływanie funkcji obsługa onmouseover i onmouseout Mało roztropne wykorzystanie zdarzeń mouseover i mouseout: <html> <head> function uwazaj() alert( "Je ż eli tam wejdziesz, Twoje ż ycie ju ż nie b ę dzie takie samo!" ); function zaluj() alert( "Je ż eli tam nie wejdziesz, b ę dziesz ż ałował!" ); </head> <body> <a href="#" onmouseover="uwazaj()" onmouseout="zaluj()"> Ten link jest wyj ą tkowy </a> </body> </html> Copyright Roman Simiński Strona : 11
Wywoływanie funkcji obsługa onclick W przeglądarce użytkownicy zwykle używają pojedynczego kliknięcia. <html> <head> function info() alert( "A figa ś winko, nic tu nie zobaczysz!" ); </head> <body> <input type="button" name="hl" value="tylko dla dorosłych!" onclick="info()" /> </body> </html> Copyright Roman Simiński Strona : 11
Wywoływanie funkcji ondblclick Uwaga zdarzenie click zawsze wystąpi przed dblclick. <html> <head> function info() alert( "A figa ś winko, nic tu nie zobaczysz!" ); </head> <body> <p>dla tego przycisku u ż yj podwójnego klikni ę cia:</p> <input type="button" name="hl" value="tylko dla dorosłych!" ondblclick="info()" /> </body> </html> Copyright Roman Simiński Strona : 12
Wywoływanie funkcji obsługa onfocus i onblur Czyli obsługa złapania i zgubienia fokusa : <html> <head> function incolor() document.bgcolor='#5f5f5f'; function outcolor() document.bgcolor='#ffffff'; </head> <body> <input type="text" id="test" onfocus="incolor()" onblur="outcolor()" /> </body> </html> Copyright Roman Simiński Strona : 13
Wywoływanie funkcji obsługa onfocus i onblur Wykorzystując onblur można np. weryfikować dane, tutaj jedynie ostrzeżenie: <html> <head> function outinfo() alert( "Je ż eli u ż yłe ś innych liter ni ż du ż e, to masz problem." ); </head> <body> Napisz du ż ymi literami<br /> <input type="text" id="test1" onblur="outinfo()" /><br /> <input type="text" id="test2" onblur="outinfo()" /> </body> </html> Copyright Roman Simiński Strona : 14
Zdarzenia sterowane czasem settimeout i cleartimeout JavaScript pozwala na asynchroniczne wykonywanie wskazanego kodu po upływie zadanego czasu. Służą do tego funkcje: settimeout() wykonuje wskazany kod JavaScript po upłynięciu zadanego czasu; cleartimeout() anulowanie ustawień określonych funkcją settimeout(). Funkcja settimeout() wykonuje przypisaną jej akcję tylko raz. Forma wywołania: var timeobject = settimeout( "kod w j ę zyku JavaScript", czas_w_milisekundach ); Funkcja cleartimeout() zeruje ostawienia dla obiektu będącego rezultatem funkcji settimeout(): cleartimeout( timeobject ); Copyright Roman Simiński Strona : 15
Zdarzenia sterowane czasem settimeout i cleartimeout, przykład 1 <html> <head> function odliczanie() var timeoutobject = settimeout( 'alert( "Czas min ą ł" )', 5000 ); </head> <body onload="odliczanie()"> <p>masz 5 sekund na podj ę cie decyzji!</p> </body> </html> Copyright Roman Simiński Strona : 16
Zdarzenia sterowane czasem settimeout i cleartimeout, przykład 2 var timeoutobject; var sek = 0; function start() document.getelementbyid( "txt" ).value = sek++; timeoutobject = settimeout( "start()", 1000 ); function stop() cleartimeout( timeoutobject ); function zeruj() document.getelementbyid( "txt" ).value = sek = 0;... <h1>głupiutki stoper</h1> <input type="button" value="start" onclick="start()" /> <input type="text" id="txt" /> <input type="button" value="stop" onclick="stop()" /> <input type="button" value="zeruj" onclick="zeruj()" />... Copyright Roman Simiński Strona : 17
Zdarzenia sterowane czasem settimeout i cleartimeout JavaScript pozwala na asynchroniczne, wielokrotne wykonywanie wskazanego kodu po upływie zadanego czasu. Służą do tego funkcje: setinterval() wykonuje wskazany kod JavaScript po upłynięciu zadanego czasu; clearinterval() anulowanie ustawień określonych funkcją setinterval(). Funkcja settimeout() wykonuje przypisaną jej akcję tylko raz. Forma wywołania: var timeobject = setinterval( "kod w j ę zyku JavaScript", czas_w_milisekundach ); Funkcja clearinterval() zeruje ostawienia dla obiektu będącego rezultatem funkcji setinterval(): clearinterval( timeobject ); Copyright Roman Simiński Strona : 18
Zdarzenia sterowane czasem setinterval i clearinterval, przykład var timeoutobject; var sek = 0; function display() document.getelementbyid( "txt" ).value = sek++; function start() display(); timeoutobject = setinterval( "display()", 1000 ) function stop() clearinterval( timeoutobject ); function zeruj() document.getelementbyid( "txt" ).value = sek = 0;... <h1>głupiutki stoper</h1> <input type="button" value="start" onclick="start()" /> <input type="text" id="txt" /> <input type="button" value="stop" onclick="stop()" /> <input type="button" value="zeruj" onclick="zeruj()" />... Copyright Roman Simiński Strona : 19