Kurs JavaScript

Wprowadzenie

Koszyk Koszyk
  • Opis
  • Recenzje
  • Autor
  • Transkrypt
  • Pytania i odpowiedzi
  • QA

16 ocen

Wprowadzenie

Kurs, który masz przed sobą, to nowe wydanie naszego najpopularniejszego kursu JavaScript, zaktualizowane o nowości, które pojawiły się zarówno w samym języku, jak i w przeglądarkach internetowych, na przestrzeni ostatnich lat. Materiał ten wprowadzi Cię w świat języka JavaScript na potrzeby sieci, dając Ci solidne podstawy do tego, by tworzyć bardziej dynamiczne strony internetowe. Będzie również świetnym fundamentem do poznawania frameworków typu Angular, React czy Vue.

  1. Najważniejsze konstrukcje jezyka JavaScript
  2. Obiektowy Model Dokumentu i DOM API
  3. JSON i Ajax
  4. Nowości z EcmaScript 6
  5. Praca z npm i snowpack
  6. 5 praktycznych projektów

Moc języka JavaScript

JavaScript to język programowania, który napędza niemal wszystkie strony internetowe. Dopełnia on technologie HTML i CSS, za pomocą których tworzymy strukturę i wygląd dokumentu. Co jednak w sytuacji, gdy chcemy po kliknięciu w wybrany przycisk wyświetlić powiększone zdjęcie lub wczytać dodatkowe dane z serwera? To właśnie w takich sytuacjach przydaje się język JavaScript i tzw. DOM API, dostępne w przeglądarce. Jak się przekonasz, możliwości nowoczesnych przeglądarek w połączeniu z tym językiem są naprawdę ogromne.

Najważniejsze konstrukcje języka

Język JavaScript może być używany nie tylko na stronach internetowych. Z tego powodu, w kursie omówimy najpierw najważniejsze konstrukcje tego języka, które są niezależne od platformy uruchomieniowej. Dzięki temu zbudujesz fundamenty niezbędne do tego, by wykorzystać ten język np. w środowisku Node.js. Krok po kroku omówimy sposoby tworzenia zmiennych, dostępne typy danych i operatory. Następnie zobaczysz jak tworzyć tablice i obiekty, z jakich instrukcji warunkowych i pętli możesz korzystać, a także jak tworzyć własne funkcje. Przekazywana wiedza uwzględniać będzie nowości, które pojawiły się w języku wraz z rewolucyjnym standardem EcmaScript 6 (ES6).

Obiektowy Model Dokumentu

Sam język JavaScript to nie wszystko, by tchnąć ducha w strony internetowe. Z tego powodu, przeglądarki internetowe udostępniają tzw. DOM API. To interfejs, który z użyciem języka JavaScript pozwala na manipulację treścią i wyglądem strony. W kursie bardzo dokładnie omówimy czym jest Obiektowy Model Dokumentu, a także jak z nim pracować. Zobaczysz jak tworzyć nowe elementy HTML i wstawiać je na stronę, jak modyfikować ich treść, atrybuty, style czy klasy CSS. Poznasz sposoby na odczytywanie położenia elementu na stronie i jego wymiarów, które będą niezbędne w wielu sytuacjach. Dowiesz się także, jak przypisywać obsługę zdarzeń w przeglądarce, by np. wywołać własną funkcję, gdy ktoś kliknie w wybrany przez Ciebie przycisk.

JSON i Ajax

JSON to popularny format wymiany danych, a Ajax to potoczna nazwa dla asynchronicznych zapytań HTTP, które wysyłać możemy z poziomu kodu JavaScript. Dziś niemal każda strona internetowa wykorzystuje te technologie. W niektórych przypadkach jako dopełnienie podstawowej funkcjonalności witryny, a w innych jako główny motor napędzający stronę. Jeśli kiedykolwiek widziałeś, jak na stronie internetowej jakaś treść "doczytuje" się np. podczas przewijania - widziałeś w praktyce Ajax. W jednym z rozdziałów kursu zobaczysz, jak pracować z tym formatem, a także jak wysyłać wspomniane zapytania do serwera.

npm i bundlery kodu

Choć kurs który masz przed sobą, jest kursem dla początkujących, to aby zrozumieć jak działa język JavaScript i jak z nim się współcześnie pracuje, omówimy dwa ważne tematy - zarządzanie zależnościami i bundlowanie kodu. Dowiesz się czym jest npm i jak z jego pomocą pobierać paczki gotowego kodu z internetu, a także jak sprawić, by bez trudnu dołączać je do własnego kodu. W tym celu skorzystamy z narzędzia snowpack, które pozwoli nam także na optymalizację kodu przed jego wypuszczeniem w świat. Na tym etapie omówimy również jak działają moduły ESM, pozwalające dzielić kod na mniejsze części.

5 praktycznych projektów

Kurs podzielony został na możliwie krótkie lekcje, do których w każdej chwili możesz wrócić. Jeśli zatem zapomnisz jak odczytywać wymiary elementu na stronie, szybko odnajdziesz odpowiednią lekcję. Czym jednak była by sama teoria i proste przykłady, bez pokazania, jak połączyć je w całość i wykorzystać w praktyce? Dobra wiadomość jest taka, że w kursie stworzymy aż 5 praktycznych projektów, wykorzystujących zdobytą wcześniej wiedzę. Najpierw napiszemy program losujący Dużego Lotka, następnie dynamiczny pasek postępu przeczytania artykułu, dymek pojawiający się nad elementem po najechaniu na niego myszą, wygenerujemy tabelkę w użytkownikami na podstawie danych JSON, a na koniec tworzymy prosty odtwarzacz wideo, z możliwością pauzowania i przewijania filmu.

Dla kogo jest ten kurs?

Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript nie jest wymagana, ale zalecana jest podstawowa wiedza z zakresu samego programowania (czym są zmienne, pętle, funkcje itd.). Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej i zacząć korzystać z nowoczesnych frameworków.

Dlaczego wybrać właśnie ten kurs?

  1. Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
  2. Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
  3. Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.

Autor: Piotr Palarz

Web Developer. Na co dzień tworzy strony i aplikacje internetowe. Pasjonat technologii webowych, miłośnik JavaScriptu oraz grafik hobbysta. W wolnych chwilach stale poszerza swoją wiedzę, czyta, publikuje w Internecie, a także stara się aktywnie spędzać czas z dala od ekranu monitora.

Web Developer. Na co dzień tworzy strony i aplikacje internetowe. Pasjonat technologii webowych, miłośnik JavaScriptu oraz grafik hobbysta. W wolnych chwilach stale poszerza swoją wiedzę, czyta, publikuje w Internecie, a także stara się aktywnie spędzać czas z dala od ekranu monitora.

5

Średnia ocen autora

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje

Autor: Piotr Palarz

Czas: 9 godzin 20 minut

Aktualizacja: 04.05.2021

  • Certyfikat w ramach Ścieżki
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół
Podaruj w prezencie

Wstęp

  • Wprowadzenie

  • Czym jest JavaScript

  • Wybór narzędzi

  • Wstawianie skryptu na stronę www

Typy danych i operatory

  • Tworzenie zmiennych

  • Tekstowy typ danych

  • Liczbowy typ danych

  • null i undefined

  • Prawda i fałsz

  • Operatory arytmetyczne

  • Operatory porównania

  • Operatory logiczne

  • Inkrementacja i dekrementacja

Tablice

  • Tworzenie tablic

  • Destructuring tablic

  • Dodawanie elementów do tablicy

  • Usuwanie elementów tablicy

  • Operator spread na tablicach

  • Sortowanie tablic

  • Metody tablic

Obiekty

  • Wartości prymitywne i obiekty

  • Tworzenie obiektów

  • Destructuring obiektów

  • Operator spread na obiektach

  • Funkcje jako metody obiektów

  • Przekazywanie przez referencję

Instrukcje warunkowe

  • Instrukcja if

  • Skrócony zapis if

  • Instrukcja switch

Pętle

  • Pętla while

  • Pętla do while

  • Pętla for

  • Pętla for in

  • Pętla for of

  • Przerywanie lub kontynuacja pętli

Funkcje

  • Tworzenie funkcji

  • Zwracanie wartości

  • Parametry funkcji

  • Zakres zmiennych

  • Funkcje strzałkowe

  • Wbudowane funkcje JavaScript

Praca z datami

  • Odczytywanie i formatowanie daty

  • Parsowanie daty

  • Porównywanie dat

Timery

  • setTimeout

  • setInterval

Obsługa wyjątków

  • Blok try catch

  • Zgłaszanie własnych błędów

Praktyczny projekt 1

  • Losowanie Dużego Lotka

Obiektowy Model Dokumentu

  • Czym jest DOM

  • Globalny obiekt window

  • BOM API

  • Wyszukiwanie elementów w drzewie DOM

Modyfikacja drzewa DOM

  • Tworzenie elementów HTML

  • Wstawianie i usuwanie elementów ze strony

  • Tworzenie fragmentu dokumentu

  • Relacje między elementami

  • Praca z atrybutami

Praca z treścią elementów HTML

  • Odczytywanie i ustawianie treści

  • Wartości pól formularza

Manipulacja stylami CSS

  • Praca z klasami CSS

  • Praca z liniowym CSS

Geometria elementów HTML

  • Współrzędne położenia elementu

  • Wymiary elementu

  • Pozycje suwaków

Zdarzenia DOM

  • Czym są zdarzenia

  • Przypisywanie i usuwanie zdarzeń

  • Obiekt event i target

  • Czym jest bubbling

  • Czym jest capturing

  • Zapobieganie domyślnej akcji przeglądarki

  • Zdarzenie DOMContentLoaded i load

Praktyczny projekt 2

  • Postęp przeczytania artykułu

Praktyczny projekt 3

  • Tooltip cz. 1

  • Tooltip cz. 2

  • Tooltip cz. 3

Ajax

  • Czym jest JSON

  • Pobieranie danych

  • Wysyłanie danych

Praktyczny projekt 4

  • Generowanie listy użytkowników

Praktyczny projekt 5

  • Prosty odtwarzacz wideo cz. 1

  • Prosty odtwarzacz wideo cz. 2

Node.js

  • Instalacja środowiska

  • Jak działa npm

  • Bundlery kodu

  • Build produkcyjny

  • Moduły ESM

Zakończenie

  • Podsumowanie

}