Samouczek wideo: Nauka JavaScriptu i jQuery

Serdecznie witamy na ostatecznym kursie JavaScript i jQuery.

W tym filmie wyjaśnione zostanie, czym jest JavaScript i co nam daje.

W tym filmie dowiesz się, jakiego edytora będziemy używać, i zainstalujemy go razem.

W tym filmie pokazano, jak korzystać z kliknięć za pomocą JavaScript oraz jak działają zmienne.

Instrukcja warunkowa. If (przetłumaczenie: jeśli) jest bardzo często używane podczas programowania. Na przykład, gdy chcemy wykonać coś tylko wtedy, gdy określony warunek jest spełniony.

W tym wideo chodzi o tablice w JavaScript. Pozwalają nam przechowywać wiele informacji w jednej zmiennej.

W tym filmie dowiesz się, jak działa pętla `for`. Pozwala nam ona wielokrotnie wykonać określony kod po sobie.

Funkcje to rodzaj miniprogramu, który możemy ponownie używać w dowolnym momencie po jego utworzeniu. Gdy na przykład naciśniesz przycisk Home na swoim telefonie komórkowym, zostanie wywołana funkcja, która przywróci cię do ekranu głównego. Funkcje znacznie ułatwiają pracę.

Tutaj zostanie pokazany wynik wyzwania (a mianowicie quiz) oraz stworzona zostanie podstawa HTML.

Tutaj jest programowany CSS (wygląd) quizu.

Tutaj jest programowany i wyjaśniany JavaScript naszego quizu.

Już widziałeś, jak działają funkcje z jednym parametrem. Teraz przyjrzymy się funkcjom z kilkoma parametrami. Kilka parametrów jest używanych, gdy chcemy użyć funkcji z kilkoma różnymi zmiennymi. W matematyce na przykład podczas dodawania kilku wartości.

Istnieją zmienne globalne i lokalne. W skrócie: Zmienne globalne to zmienne, które są tworzone poza funkcjami, a zmienne lokalne to te, które są tworzone wewnątrz funkcji. Tutaj przyjrzymy się dokładniej, jak to działa.

W językach programowania istnieje możliwość definiowania funkcji w taki sposób, że mają one wartość zwrotną. Dotychczas mieliśmy tylko funkcje, które po prostu coś wykonywały, ale nie zwracały nic, z czym moglibyśmy dalej pracować. Dlatego teraz przyjrzymy się instrukcji RETURN.

W tym artykule omówimy operatory matematyczne i operatory przypisania. Operatory matematyczne obejmują dość proste rzeczy, takie jak dodawanie, odejmowanie itp., a operatory przypisania pozwalają stosunkowo łatwo wykonywać proste operacje, takie jak zwiększenie o 5. Ponieważ oba są istotne w programowaniu, omówimy te dwie kwestie tutaj.

Istnieją trzy (lub cztery) różne rodzaje pętli w programowaniu: pętla do-while, pętla while i pętla for. Pętlę for już poznaliśmy. Teraz zajmiemy się pętlą do-while (sterowaną stopą) i pętlą while (sterowaną głową).

W tym artykule chodzi o alternatywę dla warunków if. Chodzi o przełącznik (Switch) i przypadki (Case). Mamy więc praktycznie przełącznik, który przeskakuje między różnymi przypadkami i pozostaje w aktywnym.

Już omówiliśmy tablice, ale nie weszliśmy w szczegóły. Istnieje wiele innych informacji na temat tablic. Najważniejszą cechą tablicy JavaScript jest liczba elementów (length). Jednak tablica posiada również inne cechy, takie jak na przykład index, która dostarcza informacji o pozycji 0 tablicy.

Obiekty są niezmiernie ważnym i interesującym pojęciem w wielu językach programowania. W zasadzie można opisać wszystko jako pewien rodzaj obiektu. Weźmy na przykład obiekt, który zazwyczaj widzimy na ulicach: samochód. Samochód ma określone cechy i może wykonywać określone czynności.

Spójrzmy, jak możemy tworzyć obiekty w JavaScript. W tym celu tworzymy funkcję konstruktora i dwie instancje naszego obiektu w tagu head. Wewnątrz funkcji konstruktora, która ma taką samą nazwę jak nasz obiekt, mówimy programowi, że parametry przekazywane do funkcji konstruktora podczas tworzenia instancji obiektu powinny być właśnie wartościami tego obiektu.

Jako podstawę dla funkcji obiektów zaczynamy od kodu z ostatniego samouczka, w którym stworzyliśmy zmienne, które są tworzone przy każdej instancji naszego obiektu.

W tym samouczku poznasz obiekt Math. Jest to obiekt oparty na klasie Math, który posiada wiele fajnych właściwości i funkcji.

W tym filmie chodzi o obiekt Date lub klasę Date. Są to obiekty, które można użyć do uwzględnienia czasu w programie. Niekoniecznie dotyczy to godziny ani daty, ale może również chodzić o okres czasu. Obiekt Date zawiera czas, który upłynął od chwili 1970-01-01 00:00:00. Istnieją różne sposoby przekazywania parametrów do konstruktora Date.

W tym filmie nauczysz się, jak zbudować interaktywny zegar z JavaScript.

W tym filmie chodzi o dziedziczenie i polimorfizm. Dwa koncepty programowania obiektowego.

W tym artykule omówimy pytanie: Co to jest jQuery? jQuery to biblioteka JavaScript, która pozwala nam tworzyć jeszcze lepsze strony internetowe.

Tutaj uczysz się, jak jeszcze łatwiej obsługiwać kliknięcia za pomocą jQuery.

W tym samouczku nauczysz się, jak za pomocą jQuery zmieniać wygląd strony internetowej. Możemy łatwo nadpisać na przykład atrybut pola. W tym przykładzie możemy zmienić link Iframe (czyli src/source), gdy najeżdżamy na prostokąt. Bez problemu możemy zmienić kod i na przykład zwiększyć prostokąt, nadpisując atrybuty Height i Width, kiedy najedziemy na niego kursorem. Ogólnie można teraz wykorzystać tę metodę do zmiany wyglądu strony internetowej bez problemu.

Jedną z fajnych funkcji jQuery jest znikanie elementu. W tym przykładzie znikamy przycisk po kliknięciu innego przycisku. Do tego korzystamy z funkcji FadeOut („funkcja znikania“). Aby ponownie pokazać element, używamy funkcji FadeIn.

W tym wideo zajmiemy się animacją w jQuery. Chodzi o coś, co się porusza. Dbamy o to, żeby element na naszej stronie internetowej się poruszał/zmieniał. Do tego używamy funkcji w jQuery. Nosi ona nazwę animate() i oczekuje trzech parametrów.

Spójrzmy, co to jest jQuery UI.

Akordeon to widget, który pozwala nam, podobnie jak w akordeonie, widzieć tylko określone części całości. Jest to szczególnie przydatne, gdy chcemy przekazać wiele informacji, które jako duży tekst byłby zbyt nieprzejrzysty.

W tym samouczku chodzi o sortowalne elementy w jQuery UI. Są to elementy sortowalne. Znasz to, jeśli korzystasz z witryn produktowych takich jak Wunderlist lub Trello. Możliwość sprawienia, aby elementy były sortowalne, to bardzo fajna funkcja, którą możesz wykorzystać w wielu różnych aplikacjach.

Czasami zdarza się, że chce się umożliwić użytkownikowi zmianę rozmiaru elementu. W takich przypadkach to właśnie obiekty Resizable nadają się doskonale. Pozwalają one dokładnie na to. Na elemencie widać w prawym dolnym rogu mały trójkąt, który można kliknąć, a następnie, trzymając wciśnięty kursor myszy, można go powiększać lub pomniejszać.

W jQuery UI można łatwo zbudować element przy użyciu narzędzia Draggables, którego można przeciągać w prawo i lewo. Jak to zrobić, zobaczymy tutaj.

Paski postępu lub paski postępów są świetnym środkiem, aby poinformować użytkownika, jak daleko jest w danym procesie. Na przykład w procesie sprzedaży w sklepie internetowym lub w ankiecie pomaga użytkownikowi wiedzieć, jak daleko jest w wykonywaniu kroków.

W tym samouczku chciałbym krótko omówić efekty w jQuery UI. Istnieją naprawdę fajne efekty, które pozwalają poprawić wygląd Twojej strony internetowej i dodatkowo kompletnie zaskoczyć swoich użytkowników.

W tym wideo widzisz wynik wyzwania. Strona z często zadawanymi pytaniami (FAQ).

Tutaj przetłumaczymy stronę z pytaniami i odpowiedziami.

W tym filmie zaprezentowano grę mózgową, którą zostanie zaprogramowana w tym rozdziale.

Najpierw zajmiemy się strukturą i wyglądem gry.

Teraz zajmiemy się niektórymi funkcjami gry.

Gracz może już wykonać pierwsze czynności w grze, teraz jednak zajmiemy się tym, aby gra mogła zostać właściwie uruchomiona i zakończona.

Teraz chodzi tylko o dodanie timera do gry, aby poprawnie obliczyć wynik i ograniczyć czas gry. Ponadto wykonamy jeszcze kilka innych niewielkich kroków, aby ukończyć grę.

Aplikacja rozdziału zostanie tutaj przedstawiona. Jest to aplikacja/strona internetowa do tworzenia listy rzeczy do zrobienia.

Teraz stworzymy podstawę i zobaczymy, jak możemy tworzyć i modyfikować odpowiedni motyw za pomocą jQuery Mobile.

Ponieważ stosujemy podejście OOP, musimy stworzyć odpowiednią architekturę. O to się tutaj zajmujemy.

W tym wideo dodamy strony i zajmiemy się stroną, na której tworzymy zadania.

Podobnie jak strona złożenia zamówienia, także strona edycji musi zostać wypełniona i uzyskać odpowiednią funkcjonalność.

Teraz możemy poświęcić uwagę na architekturę i utworzyć strukturę danych.

Mając już naszą strukturę danych, możemy dość łatwo odpowiednio ją wywołać w naszym interfejsie użytkownika.

Podczas programowania było kilka kroków koniecznych w "przepływie wyjaśnień", które teraz możemy naprawić. Dodatkowo zajmujemy się trwałym zapisywaniem danych i uzupełniamy aplikację.