Kurs JavaScriptu dla początkujących: 12 rozdziałów i plan na 30 dni

JavaScript to jedyny język programowania, który wszystkie przeglądarki uruchamiają natywnie. Nauka JavaScriptu jest więc nauką ożywiania strony internetowej: reagowania na kliknięcie, sprawdzania formularza, wczytywania danych bez przeładowania strony. Ten przewodnik jest bramą do kursu JavaScriptu w Gekkode: mówi, od czego zacząć, w jakiej kolejności iść dalej, ile czasu zaplanować i po czym poznać, że robisz postępy.

Jest przeznaczony i dla całkiem początkujących, i dla osób, które kopiowały już JavaScript, nie rozumiejąc go do końca. Żadna wcześniejsza wiedza o programowaniu nie jest potrzebna. Kurs jest darmowy, po polsku, a każdy rozdział kończy się ćwiczeniem.

Dlaczego warto dziś uczyć się JavaScriptu

Trzy praktyczne powody, bez marketingowej otoczki:

• Jest wszędzie w sieci. Strona wizytówka, sklep internetowy, aplikacja firmowa: gdy tylko strona robi coś więcej niż wyświetlanie tekstu, stoi za tym JavaScript. To język przeglądarki, a przeglądarka jest najpowszechniejszym środowiskiem uruchomieniowym na świecie.
• Nie kończy się na przeglądarce. Z Node.js ten sam język pisze serwery, narzędzia wiersza poleceń i skrypty automatyzujące. Nie uczysz się jednego języka do frontendu, a drugiego do całej reszty.
• Pętla nauki jest natychmiastowa. Piszesz trzy linijki, przeładowujesz stronę, widzisz wynik. Żadnej kompilacji, żadnej skomplikowanej instalacji: na start wystarczą plik tekstowy i przeglądarka.

Asystenci kodu zmienili jedno: szybko piszą znośny JavaScript. Nie zmienili tego, że ten kod trzeba rozumieć, żeby go poprawić, przeczytać i rozwijać. Podstawy pozostają najlepszą inwestycją.

Co trzeba umieć przed startem

Absolutne minimum, nic ponadto:

• Trochę HTML-a i CSS-a. Wiedzieć, czym jest znacznik, atrybut i klasa. Jeśli nie wiesz, jeden dzień z podstawami HTML-a wystarczy, żeby nadążyć za kursem; nie musisz opanować układu strony.
• Edytor kodu. Visual Studio Code jest darmowy i koloruje JavaScript bez żadnych ustawień. Każdy edytor zwykłego tekstu też się nada.
• Aktualna przeglądarka z konsolą narzędzi deweloperskich (klawisz F12). Konsola to twoje pierwsze narzędzie: pokazuje wyniki, a przede wszystkim błędy, razem z numerem błędnej linii.

Do dwunastu rozdziałów nie musisz instalować Node.js, npm ani żadnego frameworka. Te narzędzia przychodzą wtedy, gdy już umiesz programować.

Kurs krok po kroku: dwanaście rozdziałów po kolei

Program ma przemyślaną kolejność: każdy rozdział korzysta wyłącznie z tego, co wprowadziły poprzednie. Licz dwadzieścia do czterdziestu minut na rozdział, razem z ćwiczeniem.

1. Wstęp do JavaScriptu: gdzie umieścić skrypt na stronie HTML, znacznik script, pierwsze „Hello World” i konsola.
2. Zmienne i typy danych: let, const, łańcuchy znaków, liczby, wartości logiczne, undefined i null.
3. Operatory i wyrażenia: arytmetyka, porównania (=== zamiast ==), logika, sklejanie tekstu i szablony łańcuchów.
4. Instrukcje warunkowe: if, else, switch i operator warunkowy.
5. Pętle: for, while, for…of i forEach na tablicach.
6. Funkcje: deklaracja, parametry, wartość zwracana, funkcje strzałkowe i zasięg zmiennych.
7. Obiekty: tworzenie, odczyt, zmiana, przechodzenie po właściwościach i ich usuwanie.
8. Obiekt Math: zaokrąglanie, liczby losowe, minimum i maksimum.
9. Manipulowanie stroną HTML: wybranie elementu, zmiana jego tekstu i klas, tworzenie i usuwanie elementów (DOM).
10. Zdarzenia: reagowanie na kliknięcie, na wpisywanie tekstu i na wysłanie formularza przez addEventListener.
11. Moduły ES6: dzielenie kodu na pliki przez import i export.
12. Projekt końcowy: gra w zgadywanie: wszystko powyższe złożone w małą grę, w którą zagrasz w przeglądarce.

Pełny spis treści, wraz z twoim postępem, cały czas widnieje w lewej kolumnie każdego rozdziału.

Twój pierwszy program w JavaScripcie, z komentarzem

Zanim otworzysz rozdział 1, zobacz, jak wygląda kompletny program w JavaScripcie. Nie próbuj zrozumieć wszystkiego: wypatrz tylko pięć rzeczy, które kurs rozwinie.

// 1. Dane: tablica obiektów
const panier = [
  { nom: 'Clavier', prix: 49.9, quantite: 1 },
  { nom: 'Souris', prix: 19.5, quantite: 2 },
];

// 2. Funkcja: obliczenie do wielokrotnego użytku
function totalHT(articles) {
  let total = 0;
  for (const article of articles) {        // 3. Pętla
    total += article.prix * article.quantite;
  }
  return total;
}

// 4. Warunek
const ht = totalHT(panier);
const fraisDePort = ht >= 50 ? 0 : 4.9;

// 5. Wypisanie wyniku
console.log(`Total HT : ${ht.toFixed(2)} €`);
console.log(`Frais de port : ${fraisDePort.toFixed(2)} €`);
console.log(`Total TTC : ${((ht + fraisDePort) * 1.2).toFixed(2)} €`);

Wynik w konsoli:

Total HT : 88.90 €
Frais de port : 0.00 €
Total TTC : 106.68 €

Dane, funkcja, pętla, warunek, wypisanie wyniku: każdy program, nawet ogromny, składa się z tych klocków. Rozdział 2 zaczyna od pierwszego z nich, od zmiennych.

Plan nauki na trzydzieści dni

Ten plan zakłada godzinę dziennie, pięć dni w tygodniu. Nie jest obowiązkowy: to tempo, które zostawia czas na ćwiczenie i nie pozwala zapomnieć tego, co było dzień wcześniej.

Dwie zasady sprawiają, że ten plan działa: powtórz ćwiczenie z poprzedniego rozdziału, zanim otworzysz następny, i przepisz każdy przykład sam, zamiast go kopiować.

Pięć ćwiczeń dla początkujących

Do zrobienia w konsoli przeglądarki albo w pliku exercices.js. Rozwiązania korzystają wyłącznie z rozdziałów od 1 do 7.

1. Konwerter: napisz funkcję celsiusVersFahrenheit(c), która zwraca przeliczoną temperaturę (wzór: c * 9 / 5 + 32). Sprawdź, czy celsiusVersFahrenheit(100) zwraca 212.
2. Parzysta czy nieparzysta: dla każdej liczby od 1 do 20 wypisz w konsoli „parzysta” albo „nieparzysta”. Podpowiedź: operator % zwraca resztę z dzielenia.
3. Największa wartość: napisz maximum(tableau), która zwraca największą wartość z tablicy liczb, bez użycia Math.max.
4. Liczenie samogłosek: napisz compterVoyelles(texte); dla „JavaScript” wynikiem ma być 3.
5. Książka adresowa: utwórz tablicę trzech obiektów { nom, ville }, a potem wypisz po jednym zdaniu na osobę, używając szablonu łańcucha.

Rozwiązania ćwiczeń 1, 3 i 4:

function celsiusVersFahrenheit(c) {
  return c * 9 / 5 + 32;
}
console.log(celsiusVersFahrenheit(100)); // 212

function maximum(tableau) {
  let max = tableau[0];
  for (const valeur of tableau) {
    if (valeur > max) {
      max = valeur;
    }
  }
  return max;
}
console.log(maximum([3, 17, 8, 42, 5])); // 42

function compterVoyelles(texte) {
  let total = 0;
  for (const lettre of texte.toLowerCase()) {
    if ('aeiouy'.includes(lettre)) {
      total += 1;
    }
  }
  return total;
}
console.log(compterVoyelles('JavaScript')); // 3

Jeśli ćwiczenie 3 stawiło opór, to normalne: wymaga trzymania wartości w pamięci przez całą pętlę. Dokładnie tę umiejętność buduje rozdział 5.

Ile czasu zajmuje nauka JavaScriptu?

To pytanie wraca na każdym starcie, a uczciwa odpowiedź zależy od tego, co nazwiemy „nauczeniem się”:

• Czytać i zmieniać gotowy skrypt: tydzień do dwóch po godzinie dziennie.
• Samodzielnie napisać mały interaktywny program (formularz, kalkulator, prosta gra): trzy do czterech tygodni, i to jest cel tego kursu.
• Poradzić sobie samemu w prawdziwym projekcie, ze zdalnymi danymi i frameworkiem: kilka miesięcy regularnej praktyki.

O wyniku decyduje nie liczba godzin, tylko ich regularność. Trzydzieści minut każdego dnia daje więcej niż cztery godziny w niedzielę.

JavaScript, Python czy TypeScript?

Python jest na samym początku łatwiejszy w czytaniu i świetnie nadaje się do danych i skryptów. Ale jeśli twoim celem jest web, JavaScriptu nie da się ominąć: żaden inny język nie działa w przeglądarce. Jedno nie wyklucza drugiego; zacznij od tego, który pasuje do tego, co chcesz zbudować.

TypeScript to JavaScript z typami. Uczysz się go potem, a nie zamiast: wszystko z tego kursu zostaje prawdziwe w TypeScripcie, a same typy rozumie się dużo lepiej, gdy zdążyło się już spotkać błędy, przed którymi chronią.

Darmowe materiały na dalszy ciąg

• Dokumentacja MDN, po francusku: punkt odniesienia, który warto trzymać otwarty, każda metoda jest tam wyjaśniona z przykładami.
• javascript.info, po angielsku: najpełniejszy kurs online, przydatny, gdy tylko chcesz coś zgłębić.
• Artykuły o JavaScripcie w Gekkode na dalszy ciąg: klasy, bind, call i apply, zamiana łańcucha na liczbę, walidacja e-maila wyrażeniem regularnym.
• A gdy język będzie już opanowany, kurs Vue 3, żeby poznać framework.

Ten przewodnik uzupełnia artykuł o metodzie pracy: 5 rad na skuteczną naukę.

Najczęstsze pytania

Trzeba coś instalować? Nie. Do dwunastu rozdziałów wystarczą edytor tekstu i przeglądarka.

Java i JavaScript to to samo? Nie. To dwa niepowiązane języki; nazwa jest historycznym przypadkiem z 1995 roku.

Czy da się uczyć JavaScriptu bez znajomości HTML-a? Rozdziały od 1 do 8 prawie nie wymagają HTML-a. Od rozdziału 9 umiejętność czytania strony HTML staje się konieczna.

Której przeglądarki użyć? Chrome, Firefox, Edge albo Safari w aktualnej wersji. Każda ma konsolę deweloperską i uruchamia nowoczesny JavaScript z tego kursu.

Od czego zacząć? Od rozdziału 1, Wstęp do JavaScriptu: dwadzieścia minut, żeby wyświetlić pierwszy komunikat na stronie WWW.