1 00:00:00,692 --> 00:00:05,537 Podam wam podstawowe zasady korzystania z jQuery na stronie www. 2 00:00:05,637 --> 00:00:08,870 Pierwszy krok – to wprowadzić bibliotekę jQuery 3 00:00:08,951 --> 00:00:12,004 przy użyciu znacznika "script". 4 00:00:12,104 --> 00:00:15,967 Zanim jednak umieścimy JavaScript w naszym znaczniku "script", 5 00:00:16,030 --> 00:00:20,215 dodam atrybut "src". 6 00:00:20,294 --> 00:00:23,127 I muszę to połączyć z jakimś URL-em. 7 00:00:24,242 --> 00:00:26,331 Ale z jakim? 8 00:00:26,413 --> 00:00:28,839 Gdybym pracowała na własnym komputerze 9 00:00:28,915 --> 00:00:32,461 i załadowała jQuery do katalogu, w którym jest moja strona, 10 00:00:32,549 --> 00:00:35,596 mogłabym napisać po prostu "jquery.js". 11 00:00:36,385 --> 00:00:39,387 Ale w Khan Academy to nie zadziała. 12 00:00:39,487 --> 00:00:45,024 Tu jest mi potrzebny URL jQuery na jakimś serwerze online. 13 00:00:45,859 --> 00:00:49,272 Lista tych URL-ów znajduje się na stronie jquery.com. 14 00:00:50,573 --> 00:00:53,498 Wkleję tu jeden z nich. Gotowe. 15 00:00:54,329 --> 00:00:57,972 Chcę zwrócić waszą uwagę na parę spraw związanych z tym URL-em. 16 00:00:58,066 --> 00:01:01,788 Po pierwsze, zaczyna się od "https". 17 00:01:01,842 --> 00:01:05,131 To oznacza, że jest bezpieczny. 18 00:01:05,231 --> 00:01:10,635 Khan Academy pozwala wam sprowadzać tylko bezpieczne zasoby. 19 00:01:11,133 --> 00:01:14,164 To dobry zwyczaj w projektowaniu stron! 20 00:01:15,657 --> 00:01:21,556 Po drugie, ten URL znajduje się na serwerze Google: googleapis.com. 21 00:01:22,755 --> 00:01:27,701 To serwer systemu CDN (sieci dystrybucji treści) 22 00:01:27,753 --> 00:01:32,461 przystosowany do obsługi plików statycznych, jak biblioteki JavaScript. 23 00:01:32,507 --> 00:01:34,729 Obsługuje te pliki bardzo szybko. 24 00:01:35,268 --> 00:01:38,011 Ufam temu serwerowi Google. 25 00:01:38,051 --> 00:01:42,900 Zawsze powinniście ufać serwerom, z których sprowadzacie skrypty, 26 00:01:43,000 --> 00:01:47,318 bo ta operacja niesie potencjalne zagrożenie dla waszej strony. 27 00:01:47,364 --> 00:01:52,770 Po trzecie, w tym URL-u zawiera się numer wersji: 2.1.4. 28 00:01:53,731 --> 00:01:56,233 Biblioteka jQuery aktywnie się rozwija. 29 00:01:56,333 --> 00:01:58,982 Często powstają nowe wersje. 30 00:01:59,082 --> 00:02:03,125 Cyfry po lewej stronie oznaczają znaczące zmiany wersji, 31 00:02:03,225 --> 00:02:07,477 a te po stronie prawej odnoszą się do wersji mniej istotnych. 32 00:02:08,120 --> 00:02:10,227 Ja używam tu biblioteki jQuery2, 33 00:02:10,327 --> 00:02:14,397 która współpracuje z nowoczesnymi przeglądarkami oprócz IE 8. 34 00:02:14,497 --> 00:02:19,551 Sami zdecydujcie, której wersji użyjecie na swojej stronie – zależnie od potrzeb. 35 00:02:19,651 --> 00:02:22,593 Dobrze. Mamy już jQuery. 36 00:02:22,656 --> 00:02:27,051 Teraz użyjmy tej biblioteki w innym znaczniku "script". 37 00:02:30,204 --> 00:02:35,267 Każda biblioteka JavaScript wystawia funkcje i nadaje im nazwy. 38 00:02:35,367 --> 00:02:40,364 Te nazwy i opis funkcji znajdziemy w dokumentacji. 39 00:02:41,657 --> 00:02:45,349 Biblioteka jQuery daje nam ważną funkcję 40 00:02:45,449 --> 00:02:47,446 o bardzo krótkiej nazwie. 41 00:02:47,546 --> 00:02:50,504 To po prostu znaczek dolara. 42 00:02:50,570 --> 00:02:53,429 Najpierw piszemy ten znaczek, 43 00:02:53,491 --> 00:02:56,493 potem dwa nawiasy (bo mamy do czynienia z funkcją) 44 00:02:56,593 --> 00:02:58,677 i, oczywiście, średnik. 45 00:02:59,425 --> 00:03:01,928 Miło, że nazwa funkcji jest krótka, 46 00:03:01,974 --> 00:03:04,691 bo będziemy ją przywoływać bardzo często! 47 00:03:06,160 --> 00:03:09,103 Do funkcji możemy wprowadzić mnóstwo argumentów, 48 00:03:09,161 --> 00:03:14,351 ale w moim przykładzie będzie to po prostu ciąg znaków "h1". 49 00:03:16,309 --> 00:03:18,886 Gdy skończę, program każe jQuery 50 00:03:18,932 --> 00:03:22,919 znaleźć wszystkie elementy "h1" na stronie 51 00:03:23,035 --> 00:03:26,721 i zwrócić je jako obiekt z kolekcji jQuery. 52 00:03:28,142 --> 00:03:33,021 I teraz mogę przywołać do obiektu jQuery inne metody, 53 00:03:33,089 --> 00:03:37,129 żeby zmieniać wszystkie znalezione elementy "h1". 54 00:03:37,179 --> 00:03:40,009 Chcąc zmienić tekst wewnętrzny w każdym elemencie, 55 00:03:40,043 --> 00:03:44,885 przywołam funkcję "text" i wprowadzę ciąg znaków. 56 00:03:46,905 --> 00:03:50,736 Już się robi! Tak! Gotowe. 57 00:03:50,787 --> 00:03:53,033 To nasz pierwszy kontakt z jQuery. 58 00:03:53,078 --> 00:03:56,866 Wprowadziliśmy bibliotekę do programu za pomocą znacznika "script" 59 00:03:56,966 --> 00:03:59,815 i kazaliśmy jej znaleźć wszystkie "h1" na stronie, 60 00:03:59,871 --> 00:04:02,880 a potem – zmienić w nich tekst. 61 00:04:03,577 --> 00:04:07,547 Oglądajcie kolejne odcinki. Zagłębimy się w szczegóły, 62 00:04:07,603 --> 00:04:10,799 poznamy sposoby wybierania i modyfikacji elementów, 63 00:04:10,899 --> 00:04:14,831 dowiemy się, jak używać jQuery w reakcji na zdarzenia użytkownika… 64 00:04:14,931 --> 00:04:17,557 Będzie też zabawa przy animacji i efektach.