Jak przygotować fiszki z JavaScriptu

wakeupandcode.pl 6 lat temu

Fiszki z języka angielskiego czy niemieckiego znają wszyscy, ale czy wiecie, iż można też zrobić fiszki z JavaScriptu? Jak? Już tłumaczę!

Jakiś czas temu umieściłam na blogu wpis o uczeniu się i wzbudził on wśród Was ogromne zainteresowanie. Dostałam potem mnóstwo wiadomości z pytaniami, czy mogę konkretnie opisać metody nauki tak, byście mieli gotowe instrukcje. Również w ankiecie, którą przeprowadziłam, wskazaliście, iż najchętniej czytalibyście na blogu wpisy związane z praktycznymi aspektami nauki programowania i tworzenia aplikacji. Dlatego dziś rozpoczynam nową serię Nauka programowania w praktyce, w której będę opisywać konkretne sposoby na to, jak uczyć się kodowania efektywnie. Gotowi? Zaczynamy!

Słowem wstępu

Fiszki kojarzą się z nauką języków obcych, dlatego rozumiem, iż możecie być sceptycznie nastawieni do tej metody przy nauce programowania. Jednak to, co ja Wam przedstawię jest swojego rodzaju wariacją na temat fiszek. Ja moje fiszki robię elektronicznie, bo nie jestem wielką fanką takich klasycznych fiszek. Co zabawne, jako filolog z wykształcenia przy nauce języków obcych stosowałam tę metodę bardzo rzadko, bo ciężko było mi zapamiętać poszczególne słowa. Wolałam uczyć się ich w kontekście, tworzyć krótkie teksty, opisy z ich użyciem, niż przerzucać poszczególne karteczki. Potrzebowałam szerszego kontekstu. I właśnie o ten kontekst postanowiłam wzbogadzić moją wersję fiszek do nauki programowania.

Przykładem będzie tutaj wybrane zagadnienie z JavaScript, ale chodzi o to, by pokazać Wam mechanizm. Możecie go wykorzystać tak naprawdę do dowolnego języka programowania czy jakiegokolwiek innego zagadnienia, które chcecie dobrze opanować. jeżeli czytacie mnie od początku, może przypominacie sobie, iż już kiedyś na blogu opisywałam metodę fiszek, a było to w tym wpisie o nauce Angulara JS. Nie do końca tak ją wtedy nazwałam, ale chodzi w niej dokładnie o to, co przedstawię Wam dzisiaj. Sam Angular JS już dziś jest trochę przeterminowany, ale polecam zajrzeć do tamtego artykułu, żeby zobaczyć zastosowanie tego mechanizmu do prostej aplikacji. Ale najpierw przeczytajcie ten wpis, aby dowiedzieć się, jak stworzyć swoje fiszki do wybranego zagadnienia z JavaScript.

Krok 1: Wybierz zagadnienie

Kiedy uczycie się programowania, szczególnie na początku, ogrom zagadnień do opanowania potrafi przytłoczyć. Ja sama na początku kończyłam z wielką listą zagadnień, które dotykały przeróżnych aspektów i tak naprawdę nie przedstawiały niczego konkretnego oprócz obrazu mojej paniki, ile to jeszcze muszę ogarnąć. Postanowiłam więc dzielić materiał, którym się zajmuję w danym czasie i nie przeskakiwać na inne zagadnienia, choćby jak pojawiały się w trakcie nauki. jeżeli to było coś, chciałam zgłębić później, po prostu zapisywałam to na osobnej liście. Warto to robić, by uniknąć efektu przytłoczenia. Pierwszym krokiem, aby stworzyć fiszki jest więc wybranie konkretnego zagadnienia. To bardzo ważne. Nie twórzcie sobie po prostu fiszek z JavaScriptu, bo zaraz będziecie mieć przed sobą bardzo długą listę! Przykładem, który będzie nam dziś towarzyszył są tablice w JavaScript. To zagadnienie, do którego stworzymy nasze fiszki.

Krok 2: Wybierz narzędzie

Chodzi mi tutaj oczywiście o sposób zapisywania fiszek. Jak już wspominałam, mnie nigdy nie przekonywały pojedyczne karteczki i robię fiszki w formie elektronicznej. zwykle korzystam po prostu z jakiejś aplikacji, która umożliwia zapisywanie zadań, czasem używam OneNote i zapisuję pojedyczne zagadnienia w osobnych kartach (co potem daje mi możliwość dopisania notatek). Wybór należy do Was. Warto podjąć decyzję, zanim zaczniecie tworzyć fiszki, żebyście potem po prostu nie zaprzątali sobie głowy tym, jak to teraz zapiszecie i sprawdzicie. Słowo “fiszki” jest tu dość umowne, chodzi po prostu o listę pojedynczych zagadnień, przez które będziecie mogli przejść i zweryfikować, czy umiecie to, co jest na nich zapisane. Nie potrzeba więc jakichś dedykowanych aplikacji. A jeżeli odpowiada Wam wersja analogowa, możecie stworzyć zwyczajne fiszki.

Krok 3: Poznaj zagadnienia

I tutaj trochę wprowadzamy wariację Otóż – moja metoda zakłada, aby najpierw zapoznać się z materiałem i to całkiem dobrze. Naszym przykładem są tablice w JavaScript, więc na początek polecałabym poczytać o tym dokumentację, może zrobić jakiś kurs online i oczywiście dużo ćwiczyć praktycznie. Fiszki nie zmienią tego, iż programowania nauczycie się głównie przez programowanie i to ono powinno być podstawą Waszej nauki. Kurs czy dokumetacja jednak prowadzą Was “za rękę”, a nam zależy, by wiedza weszła Wam do głowy. I dlatego potrzebujemy fiszek!

Krok 4: Zapisz poszczególne zagadnienia

To jest krok, który może dziać się już równolegle z krokiem trzecim. To znaczy – zapisujcie zagadnienia, na które trafiacie podczas nauki. Dla przykładu, dla tablic w JS to mogłyby być takie zagadnienia:

  • sposób zapisu tablicy w JS
  • sposób tworzenia tablicy w JS
  • czym jest indeks tablicy
  • wypisywanie poszczególnych elementów tablicy
  • jakiego typu mogą być elementy tablicy
  • jak dodać element do początku istniejącej tablicy
  • jak dodać element na koniec istniejącej tablicy
  • jak usunąć wybrany element z tablicy
  • jak połączyć dwie tablice
  • jak sprawdzić długość tablicy
  • jak wypisać ostatni element tablicy bez podawania numeru indeksu

Widzicie, jak to działa? Te wszystkie zagadnienia na pewno pojawiłyby się w dokumentacji czy kursie, który dotyka tematu tablic. I żeby płynnie zacząć się po tablicach poruszać, musielibyście powyższe rzeczy opanować (oczywiście nie są to wszystkie zagadnienia związane z tablicami). Warto tworzyć sobie taką listę podczas nauki, bo zwyczajnie łatwiej jest to robić na bieżąco, gdy nie znacie jeszcze danego tematu. Sprawdza się też przejście przez materiał raz jeszcze, gdy raz go przerobicie i wypisanie zagadnień wtedy.

Krok 5: Dopisz rozwiązania

Mamy zagadnienia, potrzebujemy rozwiązań! Fiszka przecież ma nam zapewniać rozwiązanie zadania zaraz po drugiej stronie karteczki. jeżeli korzystacie z kartek, po prostu zapiszecie rozwiązania. Jak robicie fiszki elektronicznie, wybierzcie swój sposób zapisu rozwiązań (ja zwykle po prostu tworzę plik JS w takim przypadku i zapisuję rozwiązania w kodzie, a w komentarzu umieszczam informacje, jakiego zagadnienia rozwiązanie dotyczy). Oczywiście będzie Wam zależało na tym, by do rozwiązań zaglądać jak najrzadziej, więc polecam zapisać je tak, byście nie widzieli ich od razu czytając zagadnienie. Wiem, iż to oczywiste, ale czasem automatycznie tworzymy zagadnienie, piszemy pod nim rozwiązanie i mimochodem sobie na nie zerkamy. Nie o to tutaj chodzi.

Krok 6: Ucz się!

Punkt kulminacyjny całego procesu, czyli nauka. I tutaj nie ma żadnej magicznej metody oprócz: usiądź i ucz się. Po kolei bierzecie zagadnienia z listy i próbujecie samodzielnie w kodzie napisać rozwiązanie. Powtórzę się raz jeszcze, ale pamiętajcie: kod jest najważniejszy. Nie twórzcie fiszek, które wymagają od Was deklamowania regułek, one naprawdę średnio Wam się przydadzą, gdy chcecie ćwiczyć programowanie. Chodzi o to, byście w praktyce nauczyli się danego zagadnienia. jeżeli uda Wam się bez problemu napisać rozwiazanie dla danego zagadnienia, odhaczacie fiszkę jak zrobioną i przechodzicie do następnej. Ja zwykle zapisuję sobie przy takiej fiszce cyferki. 1 oznacza, iż raz napisałam rozwiązanie zupełnie samodzielnie, 2, iż zrobiłam to dwa razy. Dobre opanowanie zagadnienia to nie jest odtworzenie czegoś raz. Ja zwykle staram się to zrobić trzy razy.

Załóżmy, iż po pierwszej rundzie udało mi się rozwiązać połowę zadań od razu, stawiam więc przy nich “1”. I do skutku przechodzę przez te, które jeszcze “1” nie mają. Dopiero jak wszystkie zagadnienia powtórzyłam choćby jeden raz, przechodzę do drugiej rundy. Drugą rundę polecam zrobić od razu, żeby trochę wiedzę utrwalić. Chyba iż przejście przez zagadnienia zajęło Wam np. 3 godziny, wtedy warto zrobić sobie przerwę. Chodzi mi jednak o to, iż drugie powtórzenie robiłabym w miarę gwałtownie po pierwszym, natomiast trzecie dopiero po kilku godzinach, a najlepiej następnego dnia. Czwarty raz powtórzyłabym wszystko np. po tygodniu, żeby być pewną, iż wiedza nie umknęła mi gdzieś w tzw. międzyczasie.

I to wszystko?

Tak jest! To wszystko! Metoda jest prosta, ale uprzedzam, iż czasochłonna. Ale uważam, iż super się sprawdza, bo naprawdę sumiennie uczy przyswajać kolejne zagadnienia. Uważam, iż świetnie sprawdza się na początku nauki, kiedy wiele rzeczy musimy się nauczyć na pamięć, bo nie jesteśmy jeszcze obeznani z kodem i nie możemy czegoś robić na zasadzie analogii. Metoda fiszek sprawdza się u mnie o tyle dobrze, iż stosuję ją również do bardziej złożonych zagadnień, bo tylko ode mnie zależy, jak sformułuję zagadnienia i jakie będą ich rozwiązania. Przy bardziej skomplikowanych problemach nie dążę też do efektu zrobienia czegoś z pamięci, ale wspieram się dokumentacją. Fajnie jest wiedzieć od razu, jak stworzyć tablicę w JS, ale nie wszystko trzeba w programowaniu umieć na pamięć, bo wiele zagadnień jest dość mocno skomplikowanych albo po prostu pojawia się na tyle rzadko, iż zwyczajnie nie opłaca się zaprzątać sobie nimi pamięci, która jednak jest ograniczona. W przypadku złożonych zagadnień fiszki sprawdzają, czy umiem płynnie poruszać się po swoim kodzie, notatkach czy dokumentacji. To również jest coś, czego trzeba się nauczyć.

Jednak na sam początek – skupiajcie się na możliwie jak najbardziej określonych tematach, których chcecie się nauczyć w danym czasie. Wypisujcie zagadnienia i rozwiąznaia i ruszajcie do nauki. I jeszcze jedno – fiszki z angielskiego można kupić, takich z JS pewnie nie. Ja uważam, iż to ogromny plus, ponieważ podczas tworzenia fiszek bardzo wiele się uczycie. Sami zobaczycie

Jak podoba Wam się przedstawiona metoda? Będziecie z niej korzystać? A może macie jakieś pytania? Piszcie śmiało w komentarzach pod tym postem albo na joanna@wakeupandcode.pl. Czekam na Wasze wrażenia po przeczytaniu tekstu! To dla mnie bardzo ważne, aby dowiedzieć się, jak go odbieracie, co mogę zmienić i ulepszyć.

Idź do oryginalnego materiału