Przejdź do treści

JavaScript od podstaw: konsola

Drugi, rozbudowany kurs JavaScriptu w konsoli przeglądarki: zmienne, operatory, napisy, warunki, pętle, funkcje, tablice i obiekty, a do tego lekcje praktyczne (tabliczka mnożenia, kalendarz, teksty) i refaktoryzacja, czyli ten sam program napisany lepiej. Każdy temat ma kilka przykładów i sporo zadań sprawdzanych automatycznie. Lekcje praktyczne kończą się na stronie WWW (kalendarz zbudowany z elementów DOM), co przygotowuje do JavaScriptu na stronach i do egzaminu INF.03.

Dla kogo: Liceum i technikum: rozbudowany kurs JavaScriptu w konsoli z praktyką i refaktoryzacją, pod INF.03. Więcej o kursie

Pierwszy program: console.log i komentarze

Pierwsze programy w JavaScripcie: wypisywanie tekstu i liczb w konsoli, kilka wartości w jednej linii, komentarze i czytanie komunikatów o błędach. Program uruchamiasz w całości albo krok po kroku.

Zmienne, stałe i typy danych

Zmienne (let) i stałe (const) przechowują wartości pod nazwą. Poznasz typy danych: liczby, napisy, wartości logiczne, undefined i null, sprawdzisz typ operatorem typeof i zamienisz tekst na liczbę. Na koniec dwa sposoby zamiany wartości dwóch zmiennych.

Operatory i obiekt Math

Działania arytmetyczne, reszta z dzielenia, potęgi i kolejność działań, skrócone przypisania, porównania i operatory logiczne. Obiekt Math zaokrągla, liczy pierwiastki i losuje liczby, a toFixed ładnie formatuje kwoty.

Napisy i szablony

Praca z tekstem: długość napisu, pojedyncze znaki, wielkie i małe litery, wycinanie fragmentów, szukanie, zamiana, dzielenie na części i dopełnianie. Szablony w odwrotnych apostrofach z ${...} zastępują żmudne sklejanie plusami.

Instrukcje warunkowe

Program podejmuje decyzje: if, else i else if, warunki złożone z && i ||, instrukcja switch oraz operator warunkowy ?:. Jeden przykład pokazuje refaktoryzację, czyli jak zagnieżdżone warunki zamienić na czytelny łańcuch else if.

Pętla for

Pętla for powtarza kod określoną liczbę razy: liczenie w górę i w dół, sumowanie, budowanie napisu w pętli, warunek w środku pętli oraz instrukcje break i continue. Jeden problem rozwiążesz dwoma sposobami i porównasz liczbę kroków.

Pętle while i do...while

Pętla while powtarza kod, dopóki warunek jest prawdziwy, i sprawdza się tam, gdzie liczby obrotów nie znamy z góry: cyfry liczby, oszczędności, algorytm Euklidesa, zgadywanie metodą połówkową. Do tego do...while i porównanie for z while.

Praktyka: tabliczka mnożenia i wzory

Lekcja praktyczna z pętlami zagnieżdżonymi: tabliczka mnożenia w wersji coraz porządniejszej (wyrównane kolumny, nagłówki), prostokąty, trójkąty, piramidy i szachownice z znaków. Te same wzory zbudujesz potem na stronie WWW.

Funkcje

Funkcja to nazwany fragment kodu, który można wywołać wiele razy z różnymi danymi. Parametry, return, wartości domyślne, trzy sposoby zapisu funkcji (deklaracja, wyrażenie, funkcja strzałkowa), zasięg zmiennych, funkcje wywołujące funkcje i pierwsza rekurencja.

Refaktoryzacja: od powtórzeń do funkcji

Refaktoryzacja to poprawianie budowy kodu bez zmiany jego działania. Krok po kroku zamienisz skopiowane fragmenty na funkcje, magiczne liczby na nazwane stałe, długie warunki na funkcje z nazwą, a zagnieżdżone if na wczesny return. W zadaniach przepisujesz gotowy program i od razu go rozbudowujesz.

Tablice

Tablica przechowuje wiele wartości pod jedną nazwą: listę ocen, dni tygodnia, temperatury. Poznasz indeksy i długość, dodawanie i usuwanie elementów, dwa sposoby przechodzenia pętlą, liczenie sumy, średniej i maksimum, wyszukiwanie, tablice dwuwymiarowe oraz różnicę między kopią a drugą nazwą tej samej tablicy.

Metody tablic: map, filter, reduce i sort

Te same zadania co w poprzednim temacie, tylko krócej: `map` przekształca każdy element, `filter` wybiera pasujące, `reduce` składa tablicę w jedną wartość, `sort` porządkuje. Każdą metodę zobaczysz obok zwykłej pętli, która robi to samo, a potem przerobisz pętlę na łańcuch metod. Poznasz też funkcje strzałkowe, `find`, `some`, `every` i pułapkę sortowania liczb.

Obiekty i JSON

Obiekt grupuje dane jednej rzeczy pod nazwami pól: imię, klasa i oceny ucznia zamiast trzech osobnych zmiennych. Poznasz odczyt pól kropką i nawiasami, tablice obiektów, obiekt jako licznik, metody z `this`, destrukturyzację i kopiowanie, a także JSON: tekstowy zapis danych, którym rozmawiają programy i serwery. W refaktoryzacji zamienisz kilka równoległych tablic na jedną tablicę obiektów.

Praktyka: kalendarz

Jeden problem, wiele podejść. Kalendarz miesiąca najpierw wypiszesz w konsoli zwykłymi pętlami, potem policzysz dzień tygodnia obiektem `Date` i zamkniesz wszystko w funkcji. Następnie oddzielisz dane (tablica tygodni) od wyświetlania: ten sam model zamienisz na tekst, na kod HTML, a na końcu przeniesiesz go na stronę, budując tabelę element po elemencie (`createElement`, `appendChild`, rodzic i dziecko) i dodając przyciski miesięcy oraz klikanie w dni.

Praktyka: teksty i szyfry

Napis to ciąg znaków, a każdy znak ma swój kod liczbowy. Na tym pomyśle zbudujesz szyfr Cezara: najpierw prostą pętlą w konsoli, potem po refaktoryzacji z funkcjami, a w innym podejściu z polskim alfabetem. Do tego odwracanie napisów na trzy sposoby, palindromy, zliczanie liter i łamanie szyfru. Na końcu ten sam model trafia na stronę: szyfrator z formularzem, który reaguje na kliknięcie i na każdy wpisany znak.

Algorytmy z egzaminu różnymi sposobami

Algorytmy, które pojawiają się na egzaminach (NWD, liczby pierwsze, ciąg Fibonacciego, wyszukiwanie, systemy liczbowe), każdy w kilku wersjach: od najprostszej do najszybszej. Liczymy kroki algorytmu, żeby zobaczyć, ile daje lepszy pomysł. Na końcu sito Eratostenesa i kalkulator NWD trafiają na stronę: siatka liczb budowana z elementów DOM i lista kroków algorytmu.

Klasy i obiekty

Klasa to przepis na obiekty tego samego rodzaju: jakie mają pola i co potrafią (metody). Zobaczysz drogę od skopiowanych obiektów przez funkcję tworzącą obiekty do klasy, potem konstruktor, metody zmieniające stan, pola prywatne, gettery, składniki statyczne, dziedziczenie z `extends` i `super`, polimorfizm oraz kompozycję. Na końcu klasa staje się komponentem strony: jeden przepis, wiele niezależnych liczników i lista zadań z własnym modelem.

Wyjątki i walidacja

Programy dostają złe dane: pusty tekst zamiast liczby, ujemny wiek, uszkodzony JSON. Zobaczysz, jak błąd przerywa wykonanie i jak go złapać (`try`, `catch`, `finally`), jak samemu zgłosić błąd (`throw`), jak przejść od zwracania kodów błędów do wyjątków, jak napisać własną klasę błędu i jak walidować dane: przerwać na pierwszym błędzie albo zebrać wszystkie. Na końcu walidacja formularzy na stronie, po kliknięciu i na żywo przy wpisywaniu.

Projekt: dziennik ocen krok po kroku

Projekt na zakończenie części konsolowej: program, który wczytuje oceny z tekstu i liczy średnie uczniów i przedmiotów. Pierwsza wersja to jeden blok kodu, a każdy następny krok to refaktoryzacja z zaznaczonymi zmianami: funkcje zamiast powtórzeń, dane jako tablica obiektów i metody tablic, walidacja z wyjątkami, klasa `Gradebook` jako model, osobny widok (raport, tabela) i na końcu ten sam model na stronie. W zadaniach projekt się rozrasta, a obok powstaje drugi mały projekt: magazyn.