Język JavaScript. Absolutne podstawy

Kodologia.pl udostępniła ostatnio darmowy kurs Język JavaScript. Absolutne podstawy. Postanowiłem mu się zatem przyjrzeć.

Pierwsze, co rzuca się w oczy, to pewnego rodzaju niedbałość w samym sposobie tworzenia kursu. Jest w nim bardzo dużo literówek i różnego rodzaju błędów ortograficznych i interpunkcyjnych, np.

Kurs zawiera zadania dotyczące omawianych fragmentów języka JavaScript oraz serię zadań w której stworzysz program do obsługi listy zakupów.

Nie wiadomo także, kto jest autorem kursu, ponieważ jego opisowi towarzyszy jedynie pusta sekcja Prowadzący.

Tego typu rzeczy, chociaż nie są krytycznymi błędami, mimo wszystko sprawiają dość niepozytywne wrażenie na sam start.

Z racji tego, że kurs jest podzielony na lekcje, tak samo zostanie też podzielony ten wpis dla przejrzystości. Kurs, który tutaj omawiam, jest w pełni darmowy i dostępny po zalogowaniu się do portalu Kodologia.pl.

Lekcja 1: Nasze relacje z komputerami

• Przy okazji tej lekcji nie bardzo jest o czym mówić. Mogę jedynie stwierdzić, że przyrównanie programowania w językach programowania do programowania pralki czy też pisania przepisu kucharskiego jest moim zdaniem nieco infantylne. Rozumiem zamysł (chęć wytłumaczenia programowania totalnemu laikowi), niemniej wydaje mi się, że można to było zrobić nieco inaczej.

• W kontekście tej lekcji całkowicie nie pasuje mi dane czytelnikowi zadanie, które polega na poprawie błędu w kodzie JS. Co prawda błąd ten jest trywialny… ale dla kogoś, kto już miał styczność z JS. Sam opis zadania również wprowadza w błąd:

  Uruchom program i przeczytaj komunikat o błędzie. Znajdź linię, której numer wskazuje komunikat i zmodyfikuj ją, aby program zaczął działać poprawnie.

  Problem polega na tym, że w mojej przeglądarce komunikat o błędzie radośnie informuje o script error [błędzie w skrypcie] w linii zerowej.

  Wydaje mi się też, że rozpoczęcie poznawania JS-a od debugowania kodu (bo tym przecież jest to zadanie) bez znajomości choćby podstaw składni JS może być dla początkującego nieco odpychające. Mimo wszystko tradycja „Hello world!” nie wzięła się bez przyczyny.

• Inna rzecz, że konsola Kodologii zdaje się nie działać prawidłowo. Po poprawieniu kodu i naciśnięciu „Sprawdź”, dostałem całkowicie nieoczekiwany wynik:

  13
  __loop_counter = 0; function __detectLoop() { __loop_counter += 1; if (__loop_counter > 250) throw('Infinite loop detected!'); };var a = 5; var b = 6; var c =2; console.log(a + b + c);

• Dziwny jest także sposób integracji edytora z lekcjami. Z racji tego, że zadanie otwiera się w osobnej karcie, to po jego rozwiązaniu i zamknięciu tej karty, powrót do lekcji wymusza na nas odświeżenie strony. Inaczej ta radośnie nas informuje, że wciąż nie wykonaliśmy zadania.

Lekcja 2: Witaj Javascript, czyli jak wyświetlić napis?

• Wypada zacząć od krótkiej dygresji, że nazwę języka JS zapisujemy jako JavaScript, nie zaś Javascript.
• Wydaje mi się, że poziom zadań jest nieco zaburzony. W pierwszej lekcji, na pierwszy ogień, dostaliśmy debugowanie kodu JS. W drugiej dwa pierwsze zadania to dostawienie brakujących cudzysłowów do wywołania console.log oraz wpisanie treści pomiędzy cudzysłowy. Jeśli dodamy do tego fakt, że dokładny przykład posługiwania się console.log jest tuż nad tymi zadaniami, to zadanie z pierwszej lekcji jawi się jako jeszcze trudniejsze.

• Jeśli zechesz podzielić powyższy ciąg na kilka linii, warto skorzystać ze znaku nowej linii \n. Dlaczego znak nowej linii ma w rzeczywistości aż dwa znaki? Po prostu tak ustalili kiedyś twórcy języków programowania.

  Ja rozumiem, że to jest kurs dla całkowicie początkujących, ale akurat znaki ucieczki można było ładnie opisać w formie pobocznej dygresji lub po prostu odesłać do osobnego artykułu. Takie zbytnie uproszczenie może bowiem zasugerować, że tylko i wyłącznie znak nowej linii jest „specjalny”, co nie jest prawdą.

• 3 zadanie z tej lekcji nie przyjmuje poprawnego rozwiązania w postaci:

  console.log( 'chleb\nmasło\nmusztarda' );

  Ten kod wyświetli każdy element listy w nowej linii. Konsola Kodologii twierdzi jednak inaczej.

Lekcja 3: Zmienne i wpisywanie wartości przez użytkownika

• Przy opisie tworzenia zmiennych nie wspomniano ani razu słowa kluczowego var, które pojawia się we wszystkich przykładach. Jest to na tyle istotny element definicji zmiennej, że wypada go zaznaczyć.

• Czasem do opisania zawartości zmiennej nie wystarczy jeden wyraz. W takim przypadku możemy zastosować połączyć wyrazy za pomocą podkreślenia _

  Tego typu konwencja nazewnicza od dłuższego czasu wydaje się o wiele mniej popularna niż tzw. camelCase. Tę drugą konwencję polecają znane style guides, m.in. od Airbnb czy JavaScript Standard Style.

• Należy też pamiętać, iż prompt zawsze zwraca wartość typu string.

  To zdanie jest prawdziwe, ale w kontekście kursu całkowicie niezrozumiałe. Nigdzie bowiem nie pojawiła się nawet wzmianka o typach zmiennych.

• Program nie wie, jak długi będzie ciąg znaków wpisywany przez użytkownika. Czasem jest to jeden wyraz, innym razem zaś długie zdanie. Wciśnięcie klawisza Enter dodaje na końcu znak nowej linii, \n. Program interpretuje to jako zakończenie wprowadzania informacji. Rozumiesz teraz, dlaczego klawisz Enter przenosi nas do nowej linii w edytorach tekstowych, takich jak Word czy LibreOffice.

  Ta informacja jest całkowicie niepoprawna. W przypadku okienek w przeglądarce, wyświetlanych komendami alert, confirm i prompt, klawisz Enter jest przypisany do przycisku sukcesu („Potwierdź”, „OK” lub podobnego). To oznacza, że naciśnięcie entera wcale nie wstawia nowej linii na końcu, ale „naciska” przycisk. Takie zachowanie jest zdefiniowane w specyfikacji HTML. I nie ma to absolutnie nic wspólnego z konwencją wstawiania nowej linii enterem w przypadku edytorów tekstowych.

Lekcja 4: Instrukcja warunkowa if

• W przykładowych kodach są stosowane bashowe komentarze (zaczynające się od #), które nie działają w JS.
• Diagram prezentujący if zawiera blok Wykonaj kod między if a end, co wskazuje, że został przygotowany dla innego języka (Ruby? Pascal?), nie JS.

• Warunkiem może być sprawdzenie, czy zmienna komenda jest równa "D\n":

  Tego typu stwierdzenie sugeruje, że informacja z poprzedniej lekcji o roli nowej linii w prompt jest prawdziwa. Niemniej jest zaprzeczana przez przykładowy kod oraz późniejszy jego opis.

• Operator === służy do porównania ze sobą dwóch wartości. Zwraca wartość true (z ang. prawda) jeśli wartości po obu jego stronach są równe. W przeciwnym wypadku zwraca false (z ang. fałsz).

  Tak po prawdzie operator === to operator identyczności. Operatorem równości nazywa się operator ==, o którego istnieniu warto przynajmniej wspomnieć.

• W przykładowych kodach widać niekonsekwencję stylu. Raz instrukcje w bloku if są otoczone nawiasami klamrowymi (nawet jeśli blok składa się tylko z jednej instrukcji), a raz – nie. Konsekwencja stylu kodu – zwłaszcza w przypadku kursów – jest wręcz kluczowa i uczy tworzenia kodu, który jest łatwiejszy w utrzymaniu.

Lekcja 5: Podstawowe operacje arytmetyczne

• W tej lekcji nagle przykładowe kody deklarują zmienne bez użycia słowa kluczowego var, co skutkuje kodem niepoprawnym składniowo w strict mode (a więc automatycznie: w modułach ES). Tego typu praktyki nie mają prawa pojawiać się w kursach.

• W sekcji Dodawanie liczby do ciągu znakowego pojawia się informacja, że dodanie liczby do ciągu tekstowego powoduje błąd i żeby to zrobić, należy przekonwertować albo liczbę na ciąg tekstowy, albo ciąg tekstowy na liczbę. Ta informacja nie jest do końca prawdziwa.

  Na samym początku wypada zauważyć, że dodanie liczby do ciągu tekstowego nie powoduje błędu, lecz prowadzi do procesu dokładnie opisanego w specyfikacji ECMAScript. W przypadku, gdy choć jedno z łączonych wyrażeń jest ciągiem tekstowym, wynik operacji dodawania zawsze będzie ciągiem tekstowym. Z tego też powodu niepotrzebna jest konwersja liczby na ciąg tekstowy, ponieważ zajdzie ona samoistnie.

• Wydaje mi się także, że warto byłoby choćby wspomnieć o operatorach += i -= jako alternatywnych formach dodawania i odejmowania wartości w zmiennych.

Lekcja 6: Dodajemy menu

• Poznasz zastosowanie wartości logicznych oraz instrukcję warunkową elsif.

  Tego typu literówki w kursach nie powinny się zdarzać. Poza tym w JS-ie nie istnieje instrukcja elseif.

• var prompt = require('sync-prompt').prompt;

  Ten kod nie powinien się znaleźć w tym kursie, bo wprowadza w błąd. Co więcej, nigdzie nie ma informacji, że kod – nazywany w kursie przeglądarkowym – jest uruchamiany wewnątrz Node.js.

• if(komenda === "D")

  Po if nakazujemy programowi sprawdzić czy to co znajduje się w zmiennej komenda jest literą D (i znakiem nowej linii).

  Ta informacja jest nieprawdziwa. Ten warunek sprawdza, czy w zmiennej komenda znajduje się ciąg tekstowy "D". Warunek dla litery i znaku nowej linii wyglądałby inaczej:

  if( komenda === 'D\n' )

• Po raz kolejny diagram blokowy przedstawiony w lekcji nie jest stworzony dla JS-a, na co wskazuje funkcja puts.
• W zadaniach nie pojawiają się polskie znaki, np. pierwsze zadanie w tej lekcji wymaga wypisania ciągu tekstowego "Bede odrabial zadania domowe".

Lekcja 7: Jak dodać wiele produktów?

• Zaczyna mnie drażnić uparte używanie słowa „ilość” zamiast „liczba” dla rzeczowników policzalnych. Wciąż jest to uważane za formę potoczną.
• Walidacja poprawności wykonania zadań mogłaby być nieco dokładniejsza, a nie sprawdzać jedynie wynik. Dzięki temu byłem w stanie wykonać zadanie modyfikując oryginalny kod, nie zaś – dopisując własny.
• Dodatkowo konsola Kodologii średnio sobie radzi z wykrywaniem nieskończonych pętli, co skutkuje nieprzyjemnymi przycięciami.
• Wydaje mi się, że brak wspomnienia o Array.prototype.push i pokazanie wyłącznie techniki dodawania nowych elementów do tablicy przy wykorzystaniu indeksów, jest bardzo sporym przeoczeniem. Zwłaszcza, że wykorzystanie push wydaje się o wiele prostsze i nie wymusza na nas stworzenia dodatkowej zmiennej z licznikiem.

• length jest tzw. funkcją wbudowaną w język Javascript – o funkcjach powiemy sobie w następnej lekcji. Mówiąc prościej, length to pewna możliwość/funkcja języka, która pozwala sprawdzić ile elementów zawiera tablica.

  [].length nie jest funkcją a własnością – to podstawowa różnica. Co więcej, jest to specyficzna własność, która sprawia, że tablica to obiekt egzotyczny.

Lekcja 8: Robimy porządek w kodzie

• Walidacja zadań faktycznie powinna być lepsza. Okazuje się, że obecność komentarza (a więc elementu całkowicie niewpływającego na działanie kodu) decyduje o tym, czy wynik jest uznawany za poprawny. Co więcej, zostawienie pustej linijki na początku kodu również skutkuje niezaliczeniem rozwiązania.

• Pamiętaj jednak, że definicja funkcji musi znajdować się przed jej wywołaniem, w przeciwnym wypadku wystąpi błąd.

  Ta informacja jest nieprawdziwa. Definicje funkcji podlegają hoistingowi i zostają wynoszone na początek danego scope. Można zatem zdefiniować funkcję po jej wywołaniu. Niemniej jest to uważane za złą praktykę.

  Wygląda jednak na to, że konsola Kodologii ma problem z analizą tak napisanego kodu. Nie jest to jednak problem JS-a a właśnie konsoli.

Podsumowanie kursu

Jeżeli chcesz kontynuować z językiem Javascript, polecamy stronę:

–

Znajdziejsz tutaj dokładny opis poszczególnych funkcji, jakie oferuje Javascript.

To chyba najlepsze podsumowanie kursu, pokazujące to, co go trapi: niedopracowanie, liczne literówki i błędy interpunkcyjne czy ortograficzne. Do tego duża część informacji jest po prostu nieprawdziwa. Brakuje też jakichkolwiek odniesień do źródeł. Dlatego trudno mi się zgodzić ze stwierdzeniem ze wstępu, że jest to prawdopodobnie najlepszy kurs dla początkujących.