Technologie internetowe w programowaniu Tomasz Xięski Roman Simiński Wykorzystanie jquery
Jak jquery wspomaga programistę? jquery wieloplatformowa biboteka JavaScript, wspomagająca manipulację elementami drzewa DOM, wykonywać zapytania asynchroniczne, tworzyć animacje itp. znaleźć Elementy w dokumencie HTML zmienić Zawartość strony HTML reagować Na żądania użytkownika animować Zawartość strony internetowej wymieniać Dane poprzez sieć (aktuazując widok) http://try.jquery.com/ 2
Statyczne strony HTML Web 1.0 w większości statyczne strony internetowe wykorzystujące treści dodawane przez administratora. Web 2.0 serwisy internetowe powstałe ok. 2004 roku, w których główną rolę odgrywa treść tworzona przez samych użytkowników. 3
Jak rozpocząć korzystanie z jquery? Ściągnij bibotekę jquery (lub skorzystaj z CDN). Załaduj bibotekę w kodzie danej strony internetowej. Wykorzystaj możwości biboteki w kodzie swojej strony. DOM DOM DOM JavaScript DOM DOM 4
Wyszukiwanie elementów Strona HTML <!DOCTYPE <html> <head> html> <title>jquery </head> <body> początek</title> <h1>gdzie planujesz wyjechać?</h1> <p>pokaż </body> </html> Listę</p> Reprezentacja w DOM DOCUMENT html head title jquery p... body h1 Gdzie p... p Pokaż... 5
Wyszukiwanie elementów Metoda text() pozwala na dostęp do ciągu znaków zawartego w ramach danego elementu. $jquery("h1").text(); Lub krócej: "Gdzie planujesz wyjechać?" $("h1").text(); Reprezentacja w DOM DOCUMENT html head title jquery p... body "Gdzie planujesz wyjechać?" Jest to też modyfikator: $("h1").text("dokąd? ); "Dokąd?" 6 h1 p Gdzie p... Pokaż...
Czy DOM jest już gotowy? Javascript może zostać wykonany zanim DOM zostanie poprawnie załadowany. Należy mieć pewność, że DOM zakończył wczytywanie zawartości HTML zanim zostanie wykorzystana biboteka jquery. jquery(document).ready(function(){ <code> }); Przykładowe wykorzystanie: jquery(document).ready(function(){ $("h1").text("dokąd?"); }); 7
Modyfikacja tekstu wielu elementów na raz Kod HTML <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <>Paryż</> < class='promo'>rio</> </ul> body h1 h2 ul Gdzie plan... Cele podróży Zmiana tekstu wewnątrz wszystkich elementów sty nieuporządkowanej możwa jest za pomocą polecenia: $("").text(""); 8
Selektory <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <>Paryż</> < class='promo'>rio</> </ul> CSS p {... } $("#cele"); $(".promo"); $("p"); jquery #kontener {... } $("#kontener");.klasa {... } $(".klasa");
Wybór elementów potomnych <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <> <ul id="francja"> <>Paryż</> </ul> </> < class='promo'>rio</> </ul> body... ul Rzym ul Wybór elementu potomnego (dziecka) w hierarchii DOM reazowany jest przez: Rio Paryż $("#destinations "); 10
Wybór tylko bezpośrednich potomków <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <> <ul id="francja"> <>Paryż</> </ul> </> < class='promo'>rio</> </ul> Wybór elementu potomnego (dziecka) w hierarchii DOM reazowany jest przez: body... ul Rzym ul Rio Nie wybrano Paryż $("#destinations > "); 11
Wykorzystanie pseudoselektorów <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <>Paryż</> < class='promo'>rio</> </ul> Pierwszy element: body h1 h2 ul Gdzie plan... Cele podróży $("#cele :first"); Ostatni: $("#cele :last"); 12
Wykorzystanie pseudoselektorów <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <>Paryż</> < class='promo'>rio</> </ul> Nieparzysty element: body h1 h2 ul Gdzie plan... Cele podróży $("#cele :odd"); #0 Parzysty: $("#cele :even"); #1 Numeracja rozpoczyna się od zera! #2 13
Wybór elementów w bardziej wydajny sposób <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <>Paryż</> < class='promo'>rio</> </ul> Zamiast: body h1 h2 ul Gdzie plan... Cele podróży $("#cele "); Stosuj: $("#cele").find(""); http://learn.jquery.com/performance/optimize-selectors/ 14
Wybór elementów w bardziej wydajny sposób Zamiast: $(":first"); Stosuj: $("").first(); body h1 h2 Gdzie plan... Cele podróży Zamiast: $(":last"); Stosuj: $("").last(); ul 15
Poruszanie się po DOM Wybór pierwszego elementu sty: $("").first(); Wybór drugiego elementu sty: $("").first().next(); body h1 h2 Gdzie plan... Cele podróży Powrót do pierwszego elementu: $("").first().next().prev(); ul 16
Poruszanie się po DOM - rodzice i dzieci Wybór elementu nadrzędnego (rodzica): $("").first().parent(); Wybór dzieci: $("#cele").children(""); Funkcja children() wybiera jednak tylko bezpośrednich potomków w przeciwieństwie do np. funkcji find. body h1 h2 ul Gdzie plan... Cele podróży 17
Dodawanie elementów $(document).ready(function() { var cena = $('<p> 399.99</p>'); }); D Dokument Dodawanie elementów: class="wakacje".append(<element>) h2 Bieszczady.after(<element>) Akapit nie jest w DOM button Jaka cena? p Price node (not in thedom yet) 399.99.prepend(<element>).before(<element>) 18
Dodawanie elementów $(document).ready(function() { var cena = $('<p> 399.99</p>'); $('.wakacje').before(cena); }); Dokument p Dany element zostaje umieszczony przed wskazanym. 399.99 class="wakacje" h2 button Bieszczady Jaka cena? 19
Dodawanie elementów D $(document).ready(function() { var cena = $('<p> 399.99</p>'); $('.wakacje').after(cena); }); Dokument h2 class="wakacje" Bieszczady Dany element zostaje umieszczony za wskazanym. Tym razem jest to integralna część hierarchii DOM. button Jaka cena? p Price node (not in thedom yet) 399.99 20
Dodawanie elementów $(document).ready(function() { var cena = $('<p> 399.99</p>'); $('.wakacje').prepend(cena); }); p class="wakacje" Dany element zostaje dołączony jako pierwszy potomek wskazanego. 399.99 h2 button Bieszczady Jaka cena? 21
Dodawanie elementów $(document).ready(function() { var cena = $('<p> 399.99</p>'); $('.wakacje').append(cena); }); Dokument class="wakacje" h2 Bieszczady button Dany element zostaje dołączony jako ostatni element należący do wskazanego. Jest to nieco szybsza metoda od poprzedniej. p Jaka cena? 399.99 Natomiast aby usunąć element: $('button').remove(); 22
Reakcja na zdarzenia Schemat zdefiniowania reakcji na zdarzenie jest następujący: element.on(<zdarzenie, reakcja>) Przykład (wyświetlenie ceny po kknięciu na przycisk): appcation.js $(document).ready(function() { $('button').on('cck', function() { var cena = $('<p>399.99</p>'); $('.wakacje').append(cena); $('button').remove(); }); }); 23
Reakcja na zdarzenia - ulepszona wersja Poprzedni kod wyszukiwał w hierarchii DOM wszystkie przyciski, więc nie działałby poprawnie, gdyby na stronie zawartych było więcej niż jeden przycisk. Należy zbadać co było źródłem zdarzenia i odnieść się tylko do tego elementu. Potrzebny appcation.js jest wskaźnik $(this) $(document).ready(function() { $('button').on('cck', function() { var cena = $('<p>399.99</p>'); $(this).after(cena); $(this).remove(); }); }); 24
Filtrowanie wyszukiwanie określonych elementów <div id='filtry'>... //elementy z klasami.promo i.koniec <button class='promocja-f'>tylko teraz </button> <button class='konczy-f'>ostatnie sztuki</button>... </div> Wyróżnij pozycje znajdujące się aktualnie w promocji poprzez dodanie klasy tak : $('#filtry').on('cck', '.promocja-f',function() { $('.wakacje').filter('.promo').addclass('tak'); }); Usuń wyróżnienie dla promocji dobiegających końca: $('#filtry').on('cck', '.konczy-f', function() { $('.wakacje').filter('.koniec').removeclass('tak'); }); 25
Zmiana sty appcation.js Funkcja css() może być wykorzystywana do zmiany sty. Działa jak akcesor lub modyfikator. $(document).ready(function() { $('#wakacje').on('cck', function() { $(this).css('background-color', '#252b30'); $(this).css('border-color', '1px sod #967'); }); }); Wspomniana funkcja implementuje wzorzec dekorator: $(this).css('background-color', '#252b30').css('border-color', '1px sod #967'); Najlepiej zmienić w ramach jednej instrukcji wszystkie style dla danego komponentu: $(this).css({'background-color': '#252b30', 'border-color': '1px sod #967'}); 26
Ukrywanie i pokazywanie elementów By appcation.js pokazać element blokowy można zmienić wartość atrybutu display: $(document).ready(function() { $('#wakacje').on('cck', function() { $(this).css('display', 'block'); }); }); Jednak efektywniejsza wersja tego przykładu to wykorzystanie funkcji show(): $(this).show() Podobnie ukrywanie elementu można zreazować za pomocą: $(this).hide() Opóźnienie pozwala wprowadzić elementy animacji: $(this).hide("slow") 27
Najprostsza animacja http://api.jquery.com 28
Wbudowane efekty w jquery fadein(), fadeout(), fadeto() ukrywa/pokazuje element zmieniając jego przeźroczystość hide() ukrywa zadany element show() pokazuje zadany element sdedown(), sdeup() ukryj/pokaż elementy wciągając je do góry/dołu strony internetowej Większość funkcji ma jeszcze wariant z przedrostkiem toggle. http://api.jquery.com 29
Proste menu rozwijane 30
Proste menu rozwijane Kod HTML Kod skryptu 31
Własne animacje funkcja animate() Funkcja animate() pozwala na reazację wielu efektów jednocześnie: By jednocześnie zmienić przeźroczystość, położenie oraz wysokość elementu: http://api.jquery.com 32
Obsługa klawiatury http://api.jquery.com 33
Obsługa myszy http://api.jquery.com 34
Przykładowy sposób sterowania postacią z gry 35
Lista zadań do zrobienia 36
Lista zadań do zrobienia 37
Wykonywanie zapytań asynchronicznie Wyśj dane na serwer i pokaż rezultat użytkownikowi po zakończeniu: Pobierz dane i odśwież stronę (bez przeładowania): http://api.jquery.com 38
Wykonywanie zapytań asynchronicznie Wyśj dane na serwer i pokaż rezultat użytkownikowi lub komunikat błędu: Pobierz i wykonaj skrypt JS: http://api.jquery.com 39