Umieszczanie skryptów

Transkrypt

1 JAVASCRIPT

2 Definicja Zamierzeniem projektantów JS było rozszerzenie możliwości języka HTML w taki sposób, aby strony stały się bardziej atrakcyjne pod względem sposobu prezentacji danych oraz możliwości interakcji z użytkownikiem. W 1995 roku, na mocy porozumienia z firmą Sun Microsystems, w zamian za włączenie do przeglądarki Netscape obsługi technologii Java, język otrzymał oficjalną nazwę JavaScript. JavaScript jest przede wszystkim językiem skryptowym to znaczy interpretowanym. Nie musi zostać skompilowany do kodu maszynowego, aby można było zobaczyć efekty jego działania. Wystarczy nam do tego przeglądarka internetowa, która ten język obsługuje czyli w zasadzie każda z liczących się na rynku aplikacji. Ze względów bezpieczeństwa JavaScript ma znacznie ograniczone uprawnienia dostępu do zasobów komputera, przy użyciu którego przeglądana jest dana strona, a wszelkie odwołania do funkcji i obiektów wykonywane są w trakcie wykonywania programu 2

3 Umieszczanie skryptów Skrypt umieszczamy w parze znaczników <script> </script> w sekcji <head> lub <body> <script type="text/javascript"> kod skryptu </script> 3

4 Umieszczanie skryptów <html xmlns=" <head> <title>strona ze skryptami JavaScript</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="skrypty.js"></script> </head> <body> <script type="text/javascript"> kod skryptu </script> </body> </html> 4

5 Wyświetlanie tekstu na stronie Za wyświetlanie tekstu na stronie odpowiada instrukcja document.write document.write(ʺwyświetlany tekst ʺ); Kilka tekstów/części łączymy znakiem + document.write(ʺtekstʺ+zmienna+ tekst ); 5

6 Komentarze Dodatkowe informacje dla programisty możemy umieścić jako komentarze // komentarz jednowierszowy Lub /* Komentarz wielowierszowy */ 6

7 Okna dialogowe Okno informacyjne alert( treść komunikatu ); 7

8 Okna dialogowe Okno decyzyjne confirm( treść komunikatu ); 8

9 Okna dialogowe Okno tekstowe prompt( treść komunikatu, tekst dom ); 9

10 Typy danych Liczbowe liczby całkowite i rzeczywiste Łańcuchowe ciąg znaków w cudzysłowach Logiczne wartości prawda i fałsz Obiektowy obiekty wbudowane lub użytkownika Specjalne null lub undefined Tablicowe tablica wartości 10

11 Zmienne Zmienne w JS deklarujemy za pomocą słówka kluczowego var var nazwa_zmiennej; Powinniśmy również przypisać warość początkową do zmiennej var nazwa_zmiennej = wartość; 11

12 Zmienne - tablice Tablice w JS deklarujemy za pomocą słówka kluczowego var podobnie jak inne zmienne, jednak od razu powinniśmy zdefiniować zawartość tablicy var tablica = [ 1, 2, Jan, Kowalski, Warszawa ]; Każdy element tablicy jest identyfikowany przez indeks. Pierwszy element ma indeks 0. Np.. tablica[0] = 5; - to zmiana elementu o indeksie 0 z 1 na 5 12

13 Operacje na tablicach Funkcja/Właściwość Opis Przykład length push() Podaje liczbę elementów tablicy Dodaje element na końcu tablicy Tablica.length; tab[tab.length -1] Tab.push(2); Tab.push(2,4,6); 13

14 Operatory matematyczne Symbol Opis + Dodawanie - Odejmowanie * Mnożenie / Dzielenie 14

15 Instrukcja warunkowa If.else Pozwala na podjęcie decyzji w programie, i zależnie czy badany warunek jest prawdziwy, czy fałszywy wykonywane są konkretne instrukcje. If (warunek) { instrukcja; } else { instrukcja; } 15

16 Pętle Są to konstrukcje które mają na celu cykliczne powtarzanie wybranych instrukcji Istnieją 3 rodzaje pętli while do while for 16

17 Pętla while Instrukcje są powtarzane aż do czasu kiedy warunek występujący po while osiągnie wartość fałsz while(warunek) { Instrukcje; } 17

18 Pętla do while Pętla podobna do poprzedniej z tym że w tym przypadku nawet jeżeli warunek od razu przyjmie wartość fałsz to wykona się chociaż raz do { Instrukcje; } while(warunek) 18

19 Pętla for Pozwala na wykonanie instrukcji określoną ilość razy for(wyr_pocz;warunek;wyr_mod) { Instrukcje; } 19

20 Konwersja typów +(zmienna) konwertuje zmienną tekstową na liczbę, jeżeli jest to możliwe isfinite(zmienna) - zwraca true jeżeli zmienna ma wartośc nieskończoność isnan(zmienna) - zwraca true jeżeli zmienna nie jest liczbą ("Not a Number") 20

21 Konwersja typów Number(zmienna) - sprawdza czy zmienna jest typu liczbowego (zwraca NaN jeżeli nie, zwraca wartość jeżeli tak) parsefloat(zmienna) - konwersja zmiennej do typu float parseint(zmienna) - konwersja zmiennej do typu int (liczbowego) 21 tostring(zmienna) - konwersja zmiennej do typu łańcuchowego

22 Funkcje Zamknięte skrypty które można wielokrotnie wykorzystywać odwołując się do jego nazwy i podając ewentualne argumenty. function nazwa(argument1,argument2) { Instrukcje; } 22

23 Funkcja zwracanie wartości Funkcja może zwracać wartość, za pomocą umieszczenia na końcu funkcji słowa return zmienna; 23

24 Obiekty wprowadzenie Obiekt to konstrukcja programistyczna która składa się z: Właściwości(zmienne, obiekty) Metody(funkcje) 24

25 Deklaracja obiektu var nazwa_zmiennej { właściwość: wartość, właściwość: wartość }; 25

26 Odnoszenie się do obiektu Do obiektu odnosimy się podając jego nazwę i po kropce nazwę właściwości. Taką wartość możemy przypisać do innej zmiennej jak również zmienić wartość właściwości w ten sposób. nazwa_obiektu.właściwość; 26

27 Dodawanie i usuwanie właściwości Aby dodać nową właściwość do obiektu wystarczy podaj nazwę obiektu, nazwę właściwości i wartość. obiekt.właściwość = wartość; Aby usunąć właściwość podajemy słowo delete, obiekt i nazwę właściwości. delete obiekt.właściwość; 27

28 Metody Jak to zostało wcześniej wspomniane obiekty poza właściwościami zawierają również metody. Metoda to przeważnie funkcja zaimplementowana w obiekcie i pozwalająca wykonywać operacje na składnikach obiektu. var osoba = { imie:"jan", nazwisko:"kowalski", wiek: 40, Miasto:"Warszawa", wyp_imie:function() { document.write("witam ma ma imię: "+imie); } }; 28

29 Model DOM Kiedy ładowana jest strona wczytywany jest jej model DOM który składa się ze specjalnych tworów nazywanych węzłami. Wyróżniamy ich cztery rodzaje: Węzeł document główny węzeł dokumentu, Węzły elementów węzły opisujące strukturę dokumentu( h1, p, ul itp.), Węzły atrybutów Węzły tekstowe jest to tekst przechowywany w węźle elementu. 29

30 30

31 Dostęp do elementów na stronie getelementbyid( id ) queryselector( selektor css ) getelementsbytagname( nazwa Znacznika ) getelementsbyclassname( klas a ) queryselectorall( li[id] ) Pobranie elementu na podstawie identyfikatora Wykorzystanie składni selektora css do wybrania elementu Wybranie elementów na podstawie nazwy znacznika Wybranie elementów na podstawie nazwy klasy Wykorzystanie składni selektora css do wybrania elementu lub elementów 31

32 32 Dostęp do elementów na stronie

33 Obiekt Window Obiekt window jest obiektem najwyższego poziomu w dokumencie HTML. Właściwości frames[] macierz ramek potomnych w oknie; porządek w macierzy odpowiada porządkowi definiowania w dokumencie frames.length liczba zdefiniowanych ramek self bieżące okno parent okno rodzicielskie ramki potomnej w zestawie zdefiniowanym znacznikiem <FRAMESET> top okno najwyższego rzędu, które jest właścicielem wszystkich widocznych ramek; okna 'top' są swymi własnymi rodzicami status komunikat pojawiający się w pasku stanu okna przeglądarki defaultstatus komunikat pojawiający się w pasku stanu okna przeglądarki standardowo, które oczekuje na wprowadzenie jakichś danych przez użytkownika name wewnętrzny identyfikator okna otwartego metodą window.open() (może być niezdefiniowany) 33

34 Obiekt Window Metody alert("komunikat") wyświetla okienko dialogowe "JavaScript Alert" z podanym komunikatem confirm("komunikat") wyświetla okno dialogowe "Confirm" (tj. okienko z przyciskiem OK i przyciskiem CANCEL) z podanym komunikatem; zwraca TRUE po użyciu przycisku OK, zaś FALSE po użyciu przycisku CANCEL prompt("komunikat") wyświetla okno dialogowe "Prompt" z podanym komunikatem, które oczekuje na wprowadzenie jakichś danych przez użytkownika open("url","nazwa") otwiera na ekranie nowe okno, nadaje mu wewnętrzny identyfikator "nazwa" i ściąga do niego dokument wskazany lokalizatorem "URL" close() zamyka okno z dokumentem, w którym znajduje się instrukcja użycia tej metody ("samobójstwo okna") 34

35 Obiekt location Obiekt location zawiera informacje o bieżącym adresie URL. Właściwości href łańcuch zawierający cały adres URL dokumentu protocol łańcuch zawierający początek adresy URL wraz z pierwszym dwukropkiem; przykładową wartością może być " (HyperText Transfer Protocol) lub wartość "javascript:" (określa kod JavaScript) host łańcuch zawierający nazwę serwera, nazwę domeny, np. ' hostname łańcuch zawierający pełną nazwę serwera łącznie z numerem portu, przykład ' następująco: '?x=3&y=7' 35

36 Obiekt location Obiekt location zawiera informacje o bieżącym adresie URL. Właściwości port łańcuch określający używany przez serwer port komunikacyjny; jeśli nie zostanie określona wartość portu, wtedy przyjmie on wartość 80; port jest numerem kanału wejściowego na serwer pathname łańcuch zawierający część adresy URL, tj. po trzecim ukośniku, np. '~userkatalogindex.html' hash łańcuch rozpoczynający się od '#', który określa nazwę zakotwiczenia w dokumencie; powoduje przejście do zakotwiczenia bez odświeżania dokumentu search łańcuch rozpoczynający się znakiem '?', który określa zapytanie w adresie URL; może on wyglądać następująco: '?x=3&y=7' 36

37 Obiekt location Metody assign(url) wczytuje dokumento adresie wskazanym przez argument url Reload(force) wymusza ponowne wczytanie bieżącej strony Replace(url) zastępuje bierzący dokument przez wczytany spod adresu wskazanego przez URL. 37

38 Obiekt Date Metody getday() zwraca dzień tygodnia getdate() zwraca dzień miesiąca gethours() zwraca wartość reprezentującą godzinę getminutes() zwraca wartość reprezentującą minuty getmonth() zwraca wartość reprezentującą numer miesiąca getseconds() zwraca wartość reprezentującą sekundy gettime() zwraca wartość numeryczną określającą czas; wartość w milisekundach getyear() zwraca rok 38

39 Obiekt Date Metody setdate() ustawia dzień miesiąca sethour() ustawia godzinę setminutes() ustawia minutę setmonth() ustawia miesiąc setseconds() ustawia sekundy settime() ustawia wartość obiektu Date; wartość w milisekundach setyear() ustawia rok togmtstring() zwraca datę w systemie GMT tolocalestring() zwraca datę w formacie lokalnym parse(date) zwraca ilość milisekund, jakie upłynęły od 1 stycznia 1970, 00:00:00 39

40 Obiekt String Obiekt string przechowuje dane w postaci łańcucha znakowego Właściwości length zwraca wartość liczbową charakteryzującą ilość znaków w łańcuchu Metody big() zwiększa rozmiar czcionki; odpowiednik znacznika <BIG>; przykład tekst = "Cześć!" tekst.big();// zwraca łańcuch "<BIG>Cześć!</BIG>" blink() tekst migający; odpowiednik znacznika <BLINK> bold() tekst pogrubiony; odpowiednik znacznika <B> 40

41 Obiekt String italics() tekst pochylony; odpowiednik znacznika <I> small() zmniejsza rozmiar czcionki; odpowiednik znacznika <SMALL> sub() odpowiednik znacznika <SUB> strike() tekst przekreślony; odpowiednik znacznika <STRIKE> sup() odpowiednik znacznika <SUP> 41

42 Zdarzenia To operacje jakie zachodzą po spełnieniu określonego warunku. Możemy je podzielić na: Zdarzenia myszy Zdarzenia klawiatury Zdarzenia dokumentu Zdarzenia formularza 42

43 Stosowanie zdarzeń Zdarzenia stosujemy wraz z elementem którego reakcji ma dotyczyć np.: <p onmouseover= kolor_tla( green ) > tlo zielone</p> 43

44 Dostępne zdarzenia Nazwa Elementy Zdarzenie onabort Obraz Anulowanie podrania grafiki onblur Okno, elementy formularza Usuniecie aktywności pola onchange Text, textarea, select Zmiana wartości onclick Dowolny znacznik Kliknięcie znacznika ondblclick Dowolny znacznik Podwójne kliknięcie znacznika ondragdrop Okno Przeciągnięcie obiektu poza okno onerror Obraz, okno Błąd podczas ładowania onfocus Okno, elementy formularza Uaktywnienie elementu onkeydown Dokument, obraz, link, textarea Wciśnięcie klawisza na klaw.(przytrzymanie) onkeypress Dokument, obraz, link, textarea Wciśnięcie klawisza na klaw.(krótkotrwałe) onkeyup Dokument, obraz, link, textarea Puszczenie klawisza 44 onload Ciało dokumentu Ładowanie strony

45 Dostępne zdarzenia Nazwa Elementy Zdarzenie onmousedown Dokument, przycisk, link Wciśnięcie klawisza myszy(przytrzymanie) onmouseout Wszystko Opuszczenie danego obszaru przez kursor myszy onmouseover Wszystko Najechanie kursorem nad dany obszar onmouseup Wszystko Puszczenie klawisza myszy onmove Okno Poruszenie oknem onreset Formularz Wyczyszczenie formularza onresize Okno Zmiana rozmiaru okna onselect Text, textarea Wybranie danego elementu onsubmit Formularz Zatwierdzenie formualrza onunload Ciało dokumentu Zamknięcie strony 45

46 Formularze Formularze to konstrukcje w programowaniu internetowym które służą głównie do zbierania informacji od użytkownika i przesyłania ich na serwer. Elementy formularza wprowadzamy w znacznikach <FORM></FORM> 46

47 Pole tekstowe Jest podstawowym rodzajem pola tekstowego. Ma ono wysokość jednej linii tekstu i określoną długość. Można do niego wpisywać tekst, który później zostanie wysłany wraz z formularzem, jako odpowiedź na zadane pytanie. <input type="text" name="nazwa" /> 47

48 Hasło Od zwykłego pola tekstowego różni się tylko tym, że podczas wpisywania do niego tekstu, nie są widoczne podawane znaki, ale jedynie gwiazdki ("*"). Można również stosować dokładnie te same atrybuty. <input type="password" name="nazwa" /> 48

49 Pole wyboru Polecenie to spowoduje wyświetlenie pola w postaci kwadratu (pole wyboru), które można zaznaczyć, a także "odznaczyć", myszką. Dzięki niemu możesz wprowadzić pytanie, przy którym można wybrać kilka spośród podanych gotowych odpowiedzi. <input type="checkbox" name="nazwa" value="wartość" />Tu wpisz opis pola 49

50 Etykieta Dodanie opisu na formualrzu czy do elementu. <label><input type="checkbox" name="nazwa" value="wartość" /> To jest etykieta pola obok</label> 50

51 Pole radiowe Umożliwia dokonanie jednego wyboru spośród możliwych opcji. W przypadku obsługi za pomocą JS wymaga atrybutu id <input type="radio" name="nazwa" value="wartość" />Tu wpisz opis pola 51

52 Lista rozwijana Polecenie pozwala wprowadzić listę rozwijalną (menu) - inaczej zwaną również polem kombi - z której możemy wybrać jedną (typ podstawowy) lub kilka możliwości (typ rozszerzony) - za pomocą klawisza Ctrl. <select name="nazwa"> <option>tu wpisz pierwszą możliwość</option> <option>tu wpisz drugą możliwość</option> (...) </select> 52

53 Obszar tekstowy Polecenie to wyświetla na ekranie wieloliniowe pole tekstowe (obszar tekstowy). Pozwala ono na wprowadzenie pewnego dłuższego komentarza przez użytkownika, który wypełnia formularz. <textarea name="nazwa" cols="x" rows="y">tu wpisz tekst który pojawi się domyślnie</textarea> 53

54 Przycisk Wprowadza na formularz przycisk <input type="button" value="napis" /> Type może być: "submit" - przycisk wysłania formularza "reset" - przycisk wyczyszczenia danych "button" - zwykły przycisk (domyślnie) 54

55 55 Jquery - postawy

56 Dołączanie pliku <script src="js/jquery min.js"></script> $(document).ready(function() { // to jest miejsce na nasz kod }); </script> 56

57 Model DOM (Document Object Model) html body head h1 div title 57

58 Selektory $('selektor') Przykład: $('#banner') $('#banner').html('<h1>byłem tu, JavaScript</h1>'); - zmiana tekstu w znacznikach h1 na stronie $('.submenu').hide(); - ukrycie elementów na stronie 58

59 Selektory zaawansowane Selektor potomka $('#navbar a') wszystkie znaczniki a w ramach id navbar Selektor dziecka $('body > p') bezpośredni potomek body Selektory elementów sąsiadujących $('h2 + div') 59

60 Selektory zaawansowane Selektory atrybutów $('img[alt]') $('input[type="text"]') określona wartość $('input[type^=" zaczyna się od.. $('a[href$=".pdf"]') kończy się na $('a[href*="missingmanuals.com"]') zawiera ciąg znaków 60

61 Filtry jquery $(`selektor:filtr`) $('tr:even'), lub $('.stripped tr:even') pobiera parzyste elementy kolekcji $('p:first'); - pierwszy element z grupy $('p:last'); - ostatni element z grupy $('a:not(.navbutton)') lub $('a:not([href^=" - nie pasuje do wywołania $('li:has(a)'); - pobiera elementy li zawierające a $('a:contains(kliknij mnie!)'); - pobiera elementy zawierające podany tekst 61

62 Filtry jquery - cd $('div:hidden').show(); - pobiera elementy ukryte ( właściwość display na none) a funkcja je pokazuje $('div:visible') pobiera elementy widoczne 62

63 Automatyczne pętle JQ wykonuje automatycznie pętle na kolekcji $('#slideshow img').hide(); - pobiera wszystkie znaczniki img z id slideshow i ukrywa je. 63

64 Łańcuchy wywołań funkcji $('#popup').width(300).height(300).text('siema!').fade In(1000); $('#popup').width(300).height(300).text('siema!').fadein(1000); Zmiana rozmiarów elementu o id popup, wyświetlenie tekstu który potem zanika 64

65 Dodawanie treści do stron.html() funkcja odczytuje kod wewnątrz danego elementu i może go zamienić $('#errors').html('<p>w formularzu odnaleziono cztery błędy.</p>');.text() działa podobnie jak html ale nie akceptuje znaczników $('#errors h2').text('nie znaleziono błędów!'); - zmienia tekst w h2.append() dodaje przekazany kod html jako ostatni w danym znaczniku $('#errors').append('<p>w formularzu znaleziono cztery błędy.</p>'); 65

66 Dodawanie treści do stron cd..prepend() dodaje kod html bezpośrednio na początku danego elementu, zaraz po znaczniku otwierającym $('#errors').prepend('<p>w formularzu znaleziono cztery błędy.</p>');.before(),.after() dodają przed i za danym znacznikiem html nowy kod. $('#username').after('<span class="error">nazwa użytkownika jest wymagana</span>'); 66

67 Zastępowanie i usuwanie wybranych elementów.remove() usuwa wybrane elementy ze strony $('#popup').remove();.replace() zamienia dany element/ty $('#product101').replace('<p>dodano do koszyka.</p>'); 67

68 Ustawianie i odczyt atrybutów znaczników addclass() dodaje do elmentu nazwę klasy $('a[href^=" <a href=" na <a href=" class="externallink"> removeclass() usuwa klasę z elementu $('#alertbox').removeclass('highlight'); toggleclass() dodawana do kontrolki (np. przycisk) naprzemiennie dodaje i usuwa klasę $('#changestyle').click(function() { $('body').toggleclass('altstyle'); }); 68

69 Ustawianie i odczyt atrybutów znaczników css() wprowadzanie bezpośrednich zmian we właściwościach css elementów var bgcolor = $('#main').css('background-color'); - pobiera właściwość $('body').css('font-size', '200%'); lub $('.pullquote').css('padding', 100); - ustawia właściwość var basefont = $('body').css('font-size'); basefont = parseint(basefont,10); $('body').css('font-size',basefont * 2); - odzczyt właściwości a następnie zmiana jej na 2 razy większą. 69

70 Ustawianie i odczyt atrybutów znaczników Wykorzystanie literałów obiektowych do zmiany wielu właściwiści funkcją css() $('#highlighteddiv').css({ 'background-color' : '#FF0000', 'border' : '2px solid #FE0037' }); Można też tak: $('#highlighteddiv').css('background-color','#ff0000').css('border','2px solid #FE0037'); 70

71 Odczyt, ustawienia i usuwanie atrybutów HTML attr() odczyt/zmiana wartości atrubutu znacznika html var imagefile = $('#banner img').attr('src'); - pobranie wartości $('#banner img').attr('src','images/newimage.png'); - zmiana wartości atrybutu removeattr() usuwa atrybut ze znacznika $('body').removeattr('bgcolor'); 71

72 Wykonanie akcji na każdym elemencie kolekcji fadeout() stopniowe ukrycie elementów $('img').fadeout(); each() powoduje wykonanie czegoś na każdym elemencie z kolekcji $('selektor').each(); Dla użycia funkcji each() potrzebujemy funkcji anonimowej: $('selektor').each(function(){ // tu jest umieszczony kod funkcji }); 72

73 Funkcja each() cd. $('img').each(function() { alert('znaleziono obrazek.'); }); - jak mamy 50 obrazków na stronie to 50 razy otrzymamy komunikat $(this)- pobiera aktualny element podczas wykonywania pętli $('a[href^=" var extlink = $(this).attr('href'); $('#biblist').append('<li>' + extlink + '</li>'); }); jak na stronie istnieje lista to można utworzyć listę odnośników do stron zewnętrznych 73

74 Zdarzenia -mysza click pojedyncze kliknięcie dblclick podwójne kliknięcie mousedown przytrzymanie klawisza myszy mouseup zwolnienie przycisku myszy mouseover kursor nad elementem mouseout kursor poza elementem mousemove przy ruchu myszy 74

75 Zdarzenia - okno i dokument load po załadowaniu wszystkich elementów strony resize zmiana rozmiaru okna scroll przy przewijaniu zawartości strony unload zamknięcie okna, przejście do nowej strony, zamknięcie dokumentu 75

76 Zdarzenia - formularze submit przy wysyłaniu formularza reset wyczyszczenie zmian w formularzu change zmiana stanu pola (kliknięcie, wybranie z listy rozwijanej itp.) focus wybór pola poprzez kliknięcie lub klawisz Tab blur odwrotność focus, kiedy opuścimy pole 76

77 Zdarzenia - klawiatura keypress przy naciśnięciu klawisz keydown przy naciśnięcu klawisza podobnie jak keypress ale przed nim aktywowane keyup w momencie zwolnienia klawisza 77

78 Obsługa zdarzeń $('a').mouseover(); - przypisanie zdarzenia mouseover do każdego odnośnika na stronie $('#menu').click(); - dodanie zdarzenia click do elementu o id = menu Samo przypisanie zdarzenia nie spowoduje działania. Do jego obsługi konieczna jest funkcja 78

79 Obsługa zdarzeń cd. Samo przypisanie zdarzenia nie spowoduje działania. Do jego obsługi konieczna jest funkcja. $('#start').click(startslideshow); - wywołanie funkcji startslideshow, Uwaga: W wywołaniu funkcji nie ma nawiasów. Wywołanie $('#start').click(startslideshow()); jest błędne 79

80 Obsługa zdarzeń cd. Można również do wywołania funkcji używać funkcji anonimowych: function() { // Tu kod funkcji. } $('#menu').mouseover(function() { }); $('#submenu').show(); 80

81 Zdarzenia występujące w JQ hover() łączy w sobie zdarzenia mousover i mouseout. $('#selektor').hover(funkcja1, funkcja2); - pierwsza funkcja działa jak mousover druga jak,mouseout $('#menu').hover( function() { $('#submenu').show(); }, function() { $('#submenu').hide(); }); // koniec hover 81

82 Zdarzenia występujące w JQ toggle() działa podobnie do hover ale reaguje na pojedyncze kliknięcia, pierwsze to pierwsza funkcja a drugie to druga funkcja. Można również dodać kolejne funkcje wtedy uruchamiane kolejnymi kliknięciami function showsubmenu() { $('#submenu').show(); } function hidesubmenu() { $('#submenu').hide(); } $('#menu').toggle(showsubmenu, hidesubmenu); 82

83 Obiekt zdarzenia W momencie wystąpienia zdarzenia przeglądarka zapisuje dane o nim w obiekcie zdarzenia, który w JQ jest dostępny w funkcji obsługującej zdarzenie a aby się tam dostać potrzebujemy parametrów. $(document).click(function(evt) { var xpos = evt.pagex; var ypox = evt.pagey; alert('x:' + xpos + ' Y:' + ypos); }); // koniec click 83

84 84 Właściwości zdarzenia

85 Zdarzenia domyślne Przeglądarki mają wbudowane domyślne reakcje na niektóre zdarzenia, jednak nie zawsze jest to pożądane, np. submit() jeżeli użytkownik pominął dane w formularzu. $('#menu').click(function(evt){ // Kod JavaScript. evt.preventdefault(); // Program nie przejdzie do strony z menu. }); 85

86 Zdarzenia - usuwanie unbind() usuwa zdarzenie przypisane do znacznika 1 $('a').mouseover(function() { 2 alert('kursor znajduje się nade mną!'); 3 }); 4 $('#disable').click(function() { 5 $('a').unbind('mouseover'); 6 }); - po kliknięciu elementu o id disable komunikat pojawiający się po najechaniu kursorem na link nie będzie się pojawiał. 86

87 Zdarzenia przekazywanie stoppropagation() zatrzymuje przekazywanie zdarzeń dalej. $('#thelink').click(function(evt){ // Wykonywane operacje. evt.stoppropagation(); // Zatrzymuje // przekazywanie zdarzenia. }); 87