Kurs JavaScript od podstaw

Przygotowanie miejsca pracy jest pierwszą czynnością w każdej branży. Dla programisty wiąże się to z instalacją i konfiguracją użytecznych narzędzi.

Ich dobór i świadomość możliwości jest bardzo istotna w efektywnej pracy i nauce.

W tym materiale poznasz podstawowe narzędzia wykorzystywane w pracy programisty JavaScript.

Otrzymasz również spis źródeł wiedzy, które wspomogą Cię w rozwiązywaniu problemów i zagwarantują rozwój.

1. Visual Studio Code (IDE)
   1. Wprowadzenie
   2. Interfejs
   3. Emmet
   4. Linia poleceń (terminal)
   5. Rozszerzenia
   6. Skróty klawiszowe
2. Chrome (przeglądarka)
   1. Wprowadzenie
   2. Rozszerzenia
   3. DevTools
3. Git
   1. Wprowadzenie
   2. Podstawowe komendy
   3. VS Code
4. GitHub
   1. Wprowadzenie
   2. Fork, clone & pull request
   3. .gitignore
5. Node.js
6. Slack
7. Skype
8. LinkedIn
9. Źródła wiedzy
   1. Serwisy
   2. Newslettery
   3. Podcasty
   4. Kursy
   5. Książki

Podstawowa znajomość HTML-a i CSS-a jest niezbędna do rozpoczęcia przygody z programowaniem w JavaScript.

Dlatego poznamy solidne podstawy semantycznego kodu HTML, który jest niezbędny w prawidłowym budowania struktury strony internetowej.

Dowiesz się jak prawidłowo wykorzystywać CSS do efektywnej i efektownej prezentacji zawartości strony.

Łącząc oba zagadnienia będziesz wiedział jak zbudować od zera cały układ strony!

1. HTML
   1. Wprowadzenie
   2. Znaczniki (ang. tags)
   3. Grupy znaczników
   4. Renderowanie znaczników
   5. Atrybuty
   6. Struktura
   7. Semantyka
2. CSS 
   1. Wprowadzenie
   2. Reguły
   3. Osadzenie
   4. Selektory
   5. Właściwości i wartości
   6. Specyficzność
3. Dobre praktyki
   1. Struktura plików
   2. Organizacja CSS
   3. Podstawowy CSS
   4. Ustawianie elementów
      1. display: inline-block
      2. float & clear
      3. flexbox
      4. position: relative & absolute
   5. Tworzenie układu strony

Obecnie ruch na stronach internetowych z urządzeń mobilnych to zdecydowana większość. Dla wybranych witryn wspomniana miara może sięgać nawet 90%.

Umiejętność tworzenie responsywnych stron internetowych tj. dostosowujących się do rozmiaru urządzenia jest niezbędna w orężu każdego frontend-owca.

Poznasz niezbędne pojęcia oraz techniki, które pozwolą zbudować stronę dobrze wyglądającą na każdym urządzeniu.

1. Wprowadzenie
   1. Rozdzielczość & DPI
   2. Viewport
   3. Fluid vs fixed
   4. Jednostki relatywne
   5. Breakpoints
   6. Media queries
   7. Mobile first
   8. AWD vs RWD
2. Responsywna treść
   1. Wiele kolumn tekstu
   2. Wykropkowanie
   3. Kształty
3. Responsywne obrazy
   1. Wypełnianie przestrzeni
   2. Dopasowanie rozmiaru
   3. Skalowalne tło
4. Responsywne wideo (iframe)
5. Responsywne menu
6. Grid
   1. Wprowadzenie
   2. Układ mobile first

Stawiając pierwsze kroki w każdej dziedzinie należy najpierw poznać teorię, która pozwala lepiej interpretować zaistniałe sytuacje. Nie inaczej jest w programowaniu.

Najpierw trzeba poznać strukturę języka i jego specyfikę, a dopiero potem zabrać się za jego wykorzystywanie.

Ten materiał pozwoli Ci poznać teorię JavaScript wraz z praktycznymi przykładami, które potem będziesz mógł wykorzystać w dalszej nauce.

Im dokładniej poznasz podstawy tym łatwiej będzie Ci zrozumieć trudniejsze zagadnienia

1. HTML z JavaScript
2. Zmienne i wartości
   1. Deklaracja zmiennej
   2. var vs let & const
   3. Typy wartości
   4. Konwersja (coercion)
3. Operatory
   1. Arytmetyczne
   2. Przypisania
   3. Porównania
   4. Logiczne
4. Instrukcje warunkowe
   1. if … else
   2. Operator warunkowy
   3. Switch
5. Pętle
   1. For
   2. While
6. Funkcje
   1. Parametry
   2. Zwracanie Wartości
   3. Wyrażenie funkcyjne
   4. Anonimowe funkcje
   5. Wywołanie zwrotne (callback)
   6. Funkcje czasu
   7. Podsumowanie
7. Zakres (scope)
   1. Zmienne globalne vs lokalne
   2. Zakres funkcji i bloku
   3. Przesłanianie zmiennych
8. Hoisting
   1. Funkcje
   2. Zmienne var
   3. Zmienne const & let
9. Tablice
   1. Metody i właściwości
   2. Pętle
   3. .forEach()
   4. .map()
   5. Przeznaczenie metod
10. Obiekty
    1. Literały
    2. Metody & this
    3. Kopiowanie przez referencję
    4. Pętle
    5. Obiekty wbudowane
11. Konstruktory
    1. Prototype

Elementy DOM to małe klocki, z których jest zbudowana strona internetowa.

Umiejętne wyszukiwanie, dodawanie czy usuwanie tych elementów jest pierwszym krokiem do budowania interaktywnych i nowoczesnych stron internetowych.

Niezbędną umiejętnością jest również modyfikowanie tych elementów przy pomocy odpowiednich właściwości.

Najwyższy czas, abyś to Ty decydował jak mają wyglądać elementy DOM na Twoje stronie internetowej!

1. Wprowadzenie
2. Wyszukiwanie elementów
   1. .querySelector()
   2. .querySelectorAll()
   3. .getElementById()
   4. .getElementsByClassName()
   5. .getElementsByTagName()
   6. Łączenie wyszukiwań
3. Operacje na elementach
   1. Atrybuty
   2. .dataset
   3. Identyfikatory
   4. Klasy
   5. Zawartość elementów
   6. Style
4. Tworzenie elementów
5. Poruszanie się po DOM

Zdarzenia (ang. events), a w zasadzie ich obsługa to niezbędny element każdej strony internetowej.

Czy nie chciałbyś umieć reagować na działania użytkownika? Pokazać element, gdy zostanie kliknięty przycisk powyżej lub powiększyć obraz, gdy użytkownik najedzie na niego kursorem?

Umiejętność reagowania na akcję użytkownika jest niezbędna do zbudowania nowoczesnej strony internetowej.

Dzięki temu materiałowi będziesz wiedział jak tego dokonać!

1. Wprowadzenie
   1. Nasłuchiwanie zdarzeń
   2. Usuwanie nasłuchiwania
2. Propagacja
   1. Faza bubbling
   2. Faza capturing
3. Obiekt Event
   1. .preventDefault()
   2. .stopPropagation()
   3. .stopImmediatePropagation()
   4. .target vs .currentTarget
4. Rozszerzenie
   1. Wywoływanie zdarzeń
   2. Tworzenie własnych zdarzeń

Obsługa formularzy to jedna z najważniejszych umiejętności dla programisty JavaScript.

Praktycznie na każdej stronie internetowej występuje tego typu element.

Poprawne odebranie danych, sprawdzenie ich poprawności oraz zabezpieczenie to być albo nie być dla każdego biznesu internetowego.

Ten materiał pozwoli Ci się swobodnie poruszać po tego typu zagadnieniach.

1. Wprowadzenie
   1. Właściwości
   2. Zdarzenia
2. Pola formularza
   1. <input>
   2. <select>
   3. <textarea>
   4. Rozszerzenie
3. Walidacja

Standard ECMAScript z 2015r. (ES6) wniósł w świat JavaScript bardzo duży powiew świeżości.

Pojawiło się wiele przydatnych rozwiązań, które zwiększają wygodę pracy, jej efektywność i umożliwiają pracę z najnowszymi wersjami bibliotek np. React.

Poznaj najważniejsze zmiany w języku JS od 2015 roku, po kolejne wersje tego standardu.

Korzystaj z Webpack-a pozwalającego pisać kod zgodny z najnowszymi standardami, który będzie wspierany przez starsze przeglądarki.

1. Wprowadzenie
2. Webpack
   1. Podstawowa konfiguracja
   2. Production vs Development
   3. Babel
3. Łańcuchy szablonowe
   1. Template strings
   2. Tagged template strings
4. Funkcje strzałkowe
   1. Zapis skrótowy
   2. Kontekst dla this
5. Destrukturyzacja
   1. Tablice
   2. Obiekty
   3. Podsumowanie
6. Operator …
   1. Rozproszenie
   2. Reszta
7. Wartości domyślne
8. Klasy
   1. Konstruktor
   2. Metody
   3. Dziedziczenie
9. Moduły
   1. CommonJS
   2. ES6 modules

Komunikacja między frontend-em oraz backend-em odbywa się przy pomocy odpowiedniego interfejsu tj. API.

Niezależnie czy dane mamy pobrać z naszego lokalnego czy zewnętrznego serwera to musimy odpowiednio przygotować zapytanie i poprawnie odebrać odpowiedź.

Ponieważ są to oddzielne byty to komunikacja najczęściej odbywa się w sposób asynchroniczny czyli jest od siebie niezależna.

Dzięki informacjom zawartym w materiale będziesz w stanie płynnie i bez problemów zarządzać całą komunikacją!

1. Asynchroniczność
   1. Callback hell
2. Obietnice
   1. Promise.all()
   2. Promise.race()
3. Fetch
   1. Wprowadzenie
   2. REST API
   3. Format JSON
   4. Podsumowanie
4. JSON Server
   1. Wprowadzenie
   2. Przykład CRUD-a