Podstawy programowania w języku JavaScript

Transkrypt

1 Podstawy programowania w języku JavaScript Część trzecia Funkcje i programowanie sterowane zdarzeniami Autor Roman Simiński Kontakt roman.siminski@us.edu.pl 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.

2 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

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 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

13 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

14 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

15 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

16 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

17 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

18 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

19 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

20 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