Lekcja 1 - czym jest AJAX ? - 12 minut 8 sekund Dowiadujemy się czym jest AJAX, gdzie się go stosuje i dlaczego warto go stosować. Lekcja 2 - XMLHttpRequest- 11 minut 46 sekund Tworzymy "przygotówkę" AJAX'owej aplikacji tworzšc formularz, który ma w przyszłoci wyczytywać zawartoci plików tekstowych, PHP, XML w miejscu wybranym przez nas. Dowiadujemy się czym jest XMLHttpRequest oraz tworzymy funkcję ajaxInit();, która tworzy obiekt pozwalajšcy nam używać AJAX'a pod każdš nowszš przeglšdarkę bez żadnych błędów. Zaznajamiamy się z konstrukcjš try{} catch{}. Lekcja 3 - Ajax w praktyce - 25 minut 39 sekund Wykorzystujemy AJAXA do wczytywania dynamicznie plików .txt, .php, .html, .xml do wybranego przez nas diva. Wyjaniamy sobie pojęcia synchronicznie oraz asynchronicznie, dowiadujemy się jaka jest różnica pobierania danych w ajaxie używajšcych tych wartoci. Dowiadujemy się: - czym jest funkcja anonimowa, dlaczego się tak nazywa - dlaczego można przypisywać funkcje / metody do zdarzeń - jaki obiekt powstaje, gdy wywoływane sš zdarzenia oraz jak go wykorzystać - jak sprawić, aby wykorzystać ten obiekt w każdej przeglšdarce - jak wysłać żadanie do serwera - czym jest readyStateChange, jak z niego korzystać - jakie mamy statusy readyState - jak obsłużyć statusy typu 404 (not found) - jak sprawić, aby w IE przestał działać cache Lekcja 4 - loading gif - 3 minuty 57 sekund Pokazujemy w jaki sposób poinformować naszego użytkownika o wczytywaniu danych, które sš duże. Lekcja 5 - DOM - 11 minut 23 sekundy Dowiadujemy się czym jest Document Object Model(DOM), dlaczego się tak nazywa, poznajemy narzędzie firefox'a: "DOM inspector", pokazujemy na przykładzie zastosowanie DOM. Przedstawiamy aplikację webowš, którš będziemy tworzyć w następnych lekcjach. Lekcja 6 - suggestBox - wstęp - 15 minut 56 sekund Przygotowujemy nasz formularz, który ma być przyszłym suggestBox'em. Analizujemy naszš bazę danych w pliku XML, tworzymy formularz, ustawiamy dla niego wyglšd w CSS. Przygotowujemy ramkę do wywietlania podpowiedzi, sprawiamy, aby dostosowywała swojš pozycję dynamicznie. Lekcja 7 - suggestBox - obsługa myszki - 20 minut 47 sekund Tworzymy dynamicznie zmieniajšcš zawartoć "pudełka", które jako wartoci sugeruje / podpowiada naszemu użytkownikowi to co miał na myli po wpisaniu literki lub też częci słowa. Sprawiamy, aby po najechaniu myszki nad wybrany rekord, zmieniało się tło, a po kliknięciu został on wybrany. W razie, gdy podane słowo przez użytkownika nie istnieje, nasza ramka robi się czerwona sygnalizujšc błšd. Lekcja 8 - suggestBox - obsługa klawiatury - 19 minut 30 sekund Sprawiamy, aby nasz suggestBoX reagował na strzałkę w dół oraz w górę. Możemy poruszać się po stworzonym menu składajšcym się z podpowiedzi przy pomocy strzałek oraz po wcinięciu entera zatwierdzić odpowiedni wybór. Naprawiamy wiele ciekawych bugów. Lekcja 9 - suggestBox - wywietlanie danych w tabeli - 19 minut 41 sekund Uczymy się tworzyć dynamicznie zmieniajšcš się tabelę w zależnoci od wybranej wartoci z menu podpowiedzi. Lekcja 10 - suggestBox z wykorzystaniem PHP i MySql - 17 minut 0 sekund Dowiadujemy się co zrobić, jeżeli nasza baza danych przechowywana jest nie w pliku xml, ale w MySql. Uczymy się przetwarzać dane z bazy MySql tak, aby działały w naszym suggestBoxie. Pokazujemy co trzeba zrobić, aby wywietały się poprawnie polskie znaki w bazie danych MySql jak i po ich pobraniu w dynamicznie stworzonym pliku XML przy pomocy PHP. Lekcja 11 - zapowied aplikacji filtrujšcej dynamicznie dane - 2 minuty 53 sekundy Zapowiadamy w jaki sposób będzie wyglšdać nasza aplikacja filtrujšca dynamicznie dane z bazy danych. Aplikacja ta będzie reagowała poprawnie na button BACK (cofajšcy historię oglšdanych stron) oraz będzie można z dynamicznie stworzonej treci wysłać komu url, który otworzy odpowiedniš treć. Czyli jest to zapowied zabawy :) Lekcja 12 - aplikacja filtrujšca - wyglšd i przygotowanie funkcji - 12 minut 25 sekund Przygotowujemy formularz, CSS (wyglšd) i funkcje do dalszej zabawy. Lekcja 13 - aplikacja filtrujšca - dynamicznie filtrowanie - 11 minut 44 sekundy Stwarzamy zapytania oraz funkcje odpowiedzialne za dynamiczne filtrowanie danych bez odwieżania całej strony. Lekcja 14 - aplikacja filtrujšca - dalsze przekazywanie linków - 11 minut 10 sekund Tworzymy dynamicznie zmieniajšcy się url, który pozwala nam przekazać dynamicznie stworzone informacje dla np. kolegów użytkownika naszej strony. Lekcja 15 - aplikacja filtrujšca - obsługa przycisków histori back i forward - 4 minuty 4 sekundy Sprawiamy, aby button BACK oraz button FORWARD, czyli tzw. wstecz i wprzód działał prawidłowo z naszš dynamicznie zmieniajšca się treciš strony. Lekcja 16 - wysyłanie danych metodš POST - 4 minuty 9 sekund Pokazujemy w jaki sposób wysyłać danę metodš POST oraz dowiadujemy się kiedy powinnimy stosować POST, a kiedy GET. Lekcja 17 - rozwijane boxy - zapowied - 3 minuty 52 sekundy Zaznajamiamy się z aplikacjš, którš stworzymy w następnych lekcjach. Aplikacja ta po kliknięciu na znak plus lub nagłówek będzie dynamicznie pobierać dane z bazy danych i wywietlać je ładnie sformatowane pod nagłówkiem. Lekcja 18 - rozwijane boxy - przygotowanie boxów - 22 minuty 3 sekundy Instalujemy bazę danych dla naszych przyszłych boxów. Tworzymy wyglšd naszych boxów w HTMLoraz CSS. Stwarzamy własnš funkcję getElementsByClassName, aby działała nam pod IE. Piszemy funkcję, która po kliknięciu na nagłówek lub znak plus / minus rozsuwa albo chowa boxy. Lekcja 19 - rozwijane boxy - zakończenie aplikacji - 17 minut 32 sekundy. Piszemy funkcje, które dynamicznie pobierajš dane z bazy danych do naszych rozwijanych boxów. Lekcja 20 - podpowiedzi - 6 minut 7 sekund Zmieniamy rozwijane boxy w taki sposób, aby nagłówki reagowały na zdarzenie onmouseover. Po najechaniu myszkš na nagłówek pojawiajš się w dynamicznie stworzonym okienku podpowiedzi; podpowiedzi pojawiajš się koło najechanego nagłówka tzn. zmieniajš swojš pozycję w zależnoci od pozycji nagłówka. Lekcja 21 - zapytania przez nagłówek - 22 minuty Dowiadujemy się w jaki sposób zadawać zapytanie przy pomocy HEAD. Tworzymy aplikację, która aktualizuje zawartoć strony co np. 1 s, jeżeli uległa zmianie. RAZEM: 4h 35min 46s
ksn88