• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[CR] JavaScript (#5): Poznajemy jQuery. Gra w pamięć

VPS Starter Arubacloud
+11 głosów
15,265 wizyt
pytanie zadane 20 września 2017 w Nasze poradniki przez Mirosław Zelent Nałogowiec (34,750 p.)

CR = Code Review. O co chodzi? Zajrzyj tutaj
Pełna lista wszystkich Code Review? Zajrzyj tutaj

https://www.youtube.com/watch?v=edNqTubHUU0

Paczka z plikami z odcinka do pobrania: TUTAJ

komentarz 31 grudnia 2017 przez Farmer Obywatel (1,150 p.)
o co chodzi z tym "błędem krytycznym"?

Bo coś mi chyba umknęło

16 odpowiedzi

+18 głosów
odpowiedź 22 września 2017 przez Ehlert Ekspert (212,630 p.)

W związku z kolejną dyskusją z cyklu best practises vs dydaktyka mam do Pana pytanie. Nie brał Pan nigdy pod uwagę możliwości tworzenia filmów na kanale Pasja Informatyki współpracując z osobami, które zawsze zabierają głos i robią refactoring kodu z filmów?

Nie chcę ujmować Pańskiej wiedzy, ale co odcinek jest coraz głośniej. Mimo świetnych zdolności dydaktycznych jakie Pan prezentuje poprzez kursy, nieczysty kod i złe nawyki (mimo, że to tylko materiał do nauki) znacząco obniżają jakość przekazywanego contentu i owocuje masą zapytań na forum o banalne rzeczy (czekamy na falę jQuery).

Proszę wziąć pod uwagę, że użytkownicy, którzy poddają Pański kod krytyce, to ludzie bardzo pomocni, o czym przekonał się nie jeden forumowicz. Osobiście uważam, że połączenie ich wiedzy i doświadczenia z pańską praktyką nauczycielską znacząco polepszyłoby jakość kursów webdevu na kanale. 

Pozdrawiam
Oczywiście jest to tylko moje skromne zdanie i osobista sugestia. wink

2
komentarz 4 października 2017 przez event15 Szeryf (93,790 p.)
Powiem tylko tyle, że jakiekolwiek złe zdanie miałbym o sposobie nauczania PHP, tak zawsze jestem chętny do pomocy forumowiczom, którzy ciągle odpowiadają na te same pytania oraz w rozwoju bardziej wartościowych materiałów na kanale. Za darmo, bez chwały.
komentarz 14 października 2017 przez Mirosław Zelent Nałogowiec (34,750 p.)

 Powiem tylko tyle, że jakiekolwiek złe zdanie miałbym o sposobie nauczania PHP, tak zawsze jestem chętny do pomocy forumowiczom, którzy ciągle odpowiadają na te same pytania oraz w rozwoju bardziej wartościowych materiałów na kanale. Za darmo, bez chwały.

Bardzo miło mi to słyszeć - to wartościowa postawa, bo produktywna, tworząca wartość. No i wymagasz od siebie, a nie od innych (co jest trudniejsze niż porównywanie się z innymi i wymaganie perfekcji od kogoś, ale w mojej opinii jest jednocześnie podstawą bycia mężczyzną z pasją i inicjatywą). 

Niestety najczęściej w praktyce "bycia w internecie" gdy spotykam się z krytyką, to jest ona naszpikowana bezpardonowymi ocenami, pejoratywnymi, osobistymi docinkami na temat tego jak "słabym" jestem nauczycielem, wyśmiewaniem i etykietowaniem - zwłaszcza po wpisach blogowych Comandeera pozycjonowanych wprost na moje nazwisko wielokrotnie miałem do czynienia z "czystym" hejtem wylewanym różnymi kanałami (zero konkretu, tylko jakiś chamski sposób wyrażenia przesłania "jesteś do niczego" - oczywiście zdaję sobie sprawę, że takiej konsekwencji autor wpisów blogowych nie chciał i może nie być jej w ogóle świadomy).

Zwłaszcza młodzi ludzie (i to szczególnie na YouTube) przyzwyczajeni do "dram", "pocisków", "x obraża", "x masakruje" często nie potrafią rzeczowo dyskutować, stąd każdy krytyczny post (niezależnie od jakości) niejako "nasyła" na Ciebie rzeszę przeróżnych ludzisk, którzy lubują się w obrażaniu (bo nie można tego nazwać krytyką). Dlatego zasadniczo nie warto się angażować w jałowe "dyskusje". Od czasu do czasu pojawi się coś wartościowego, jak na przykład krytyka konkretnych momentów filmów, którą stworzył dawniej Comandeer (emocjonalny wpis "Mam nierówno pod sufitem" przez uprzejmość pominę), co daje wgląd w to jak i dlaczego ktoś prezentujący odmienny ("wstępujący") styl nauczania uzasadnia swój punkt widzenia. I to lubię przeczytać, żeby poprawiać swój warsztat i poszerzać horyzonty. Problem jest niestety taki, że wartościowej krytyki jest w sieci za mało.

Z chęci pomocy forumowiczów skorzystam na pewno, to miła odmiana! Niedługo podeślę Arkowi kod PHP#5. Pozdrawiam i dziękuję za wypowiedzi! - może kiedyś będę mógł znowu komfortowo udzielać się na forum, bez potrzeby odpowiadania na ciągłe listy zarzutów. Co jakiś czas będę próbował to robić. Miłego weekendu! MZ

komentarz 14 października 2017 przez efiku Szeryf (75,160 p.)

może kiedyś będę mógł znowu komfortowo udzielać się na forum, bez potrzeby odpowiadania na ciągłe listy zarzutów. Co jakiś czas będę próbował to robić. Miłego weekendu! MZ

Przecież zawsze mogłeś, sugeruję po wrzuceniu nowego odcinka z PHP#5 śledzić forum przez tydzień i zobaczyć z jakimi problemami przyjdą ludzie, a jakie dajemy rozwiązania. Mile widziane dorzucenie coś od siebie ;) 
 

komentarz 16 października 2017 przez Mirosław Zelent Nałogowiec (34,750 p.)

Przecież zawsze mogłeś

Akurat pan nie powinien mieć problemu ze zrozumieniem, co mam na myśli. Dziękuję za poradę, pozdrawiam

komentarz 16 października 2017 przez efiku Szeryf (75,160 p.)
Luz ;)
+12 głosów
odpowiedź 22 września 2017 przez Rettles Bywalec (2,320 p.)
edycja 3 kwietnia 2020 przez Rettles

Generalnie zawsze unikałem js więc można powiedzieć, że jest to mój pierwszy z nim kontakt, ale poprawiłem co nieco. Naprawiłem ten "krytyczny błąd" :) i dodałem możliwość restartu bez konieczności przeładowania strony, losowanie kart no i troszeczkę przebudowałem skrypt.


Kod: Codesandbox

Demo: zagraj


EDIT:

Całkiem już usprawniłem grę:

  • Zwiększona ilość kart
  • Zmieniona tematykę na Hotsa, w sumie to całkowicie zmieniłem wygląd strony
  • Poziomy trudności
  • System punktacji, który bierze pod uwagę ilość tur, odkrytych kart oraz czas gry
  • Najlepszy wynik (rozróżnia poziomy trudności);

Powoli mi się kończą pomysły.

komentarz 2 kwietnia 2020 przez susanel Nowicjusz (160 p.)

@Rettles, Hej! chętnie zajrzałabym do tego kodu. Niestety linki są juz nieaktywne :(

komentarz 2 kwietnia 2020 przez Rettles Bywalec (2,320 p.)
edycja 2 kwietnia 2020 przez Rettles
Cześć, to prawda ustawiłem repozytorium jako prywatne, bo nie jestem już taki dumny z tego kodu jak kiedyś :D a w ostatnim czasie przyszło mi udostępniać GH potencjalnym pracodawcom, stąd taka decyzja. Link do samej stronki z grą już naprawiłem ;) a odnośnie kodu to spróbuję go udostępnić w innym miejscu, jak coś to dam znać pod tym komentarzem
komentarz 3 kwietnia 2020 przez Rettles Bywalec (2,320 p.)

@susanel, Zaktualizowałem post, dobrej zabawy :D

komentarz 3 kwietnia 2020 przez susanel Nowicjusz (160 p.)
@Rettles, Dziękuję bardzo! Jak najbardziej rozumiem. Ja dopiero się uczę więc dla mnie jest to pomocne. :)
1
komentarz 18 lipca 2023 przez Jan-Rychlik-SH Nowicjusz (100 p.)
+5 głosów
odpowiedź 20 września 2017 przez Schizohatter Nałogowiec (39,600 p.)
edycja 22 września 2017 przez Schizohatter
https://mortmortis.pl/stuff/CR-jQ-5.pdf

Można jeszcze zamiast tworzyć kolejne zagnieżdżenia kodu JS, użyć warunku przeciwnego do tego w ifie + return.

Przejrzałem końcówkę filmu - jest propozycja refaktoryzacji redundancji. Zwracam honor tutaj.

EDIT: Chciałbym przeprosić za JS punkt 4. Trochę za bardzo mnie zaszokował ten pomysł. Nie powinienem wyzywać tego od idiotyzmów.
3
komentarz 20 września 2017 przez Mirosław Zelent Nałogowiec (34,750 p.)
Spoko - zdaję sobie sprawę, że często ludzie nie rozumieją iż to nie jest mój prywatny produkcyjny kod, tylko kod lekcji - stworzony aby prowokować do myślenia i aby używać tylko tego co *już przedstawiono* i tego *co jest właśnie wprowadzane* w 5-tym odcinku kursu - tutaj addEventListener(), selektory CSS w jQ i elementarne metody attr(), css(), html(), addClass(), removeClass(), toggleClass().

Do downvote'ów i krytykowania moich kompetencji zawodowych w internecie jestem już przyzwyczajony (moralnie czy interpersonalnie oceniać tego nie zamierzam) - nie oczekuję też zrozumienia dydaktyki. Osobiście polecam przyjrzeć się jeszcze mechanice zliczania par - tam również można odkryć coś do poprawy - sprawdź czy jesteś w stanie zauważyć krytyczny błąd (oczywiście jeśli masz ochotę).

Generalnie też zabawa polega na przepisaniu (stworzeniu) kodu, a nie na wypunktowaniu tego co każdy z nas widzi że można by poprawić - ale nawet to przyczynić się może do zainspirowania innych, więc dziękuję za (w dodatku tak szybkie) wypunktowanie.

Pozdrawiam!
3
komentarz 20 września 2017 przez Schizohatter Nałogowiec (39,600 p.)
"Generalnie też zabawa polega na przepisaniu (stworzeniu) kodu, a nie na wypunktowaniu tego co każdy z nas widzi że można by poprawić"

Przecież oryginalnie code review miał do tego służyć. Dobrze Pan wie, od której dyskusji to się zaczęło. Umknęło mi, że zrobił Pan z tego zabawę w refactoring. Code refactoring, czy code review, hm? Co oznacza CR?

Robię EOT z jakichkolwiek postów związanych z Pana kursami. To się mija z celem.
3
komentarz 20 września 2017 przez Mirosław Zelent Nałogowiec (34,750 p.)

Wystarczy obejrzeć odcinek w tym miejscu lub zajrzeć tutaj. I proszę zmniejszyć poziom agresji wobec mnie do akceptowalnego poziomu oraz nie obrażać się nie wiadomo o co. Zabawa w refaktoryzację w tym odcinku ma na celu sprowadzić większą ilość osób do code reviews oraz dać szansę osobom tworzącym tutoriale, aby mogły postować linki do swoich blogów. Jak również osobom wprawnym w JS i jQ dajemy okazję do rozbudowania prymitywnej gry karcianej do rozmiarów większego projektu. Wiele osób prosiło o wyraźniejsze zaakcentowanie CR w odcinkach, co w tym epizodzie dokładnie ma miejsce jako zadanie domowe. Pozdrawiam

komentarz 21 września 2017 przez efiku Szeryf (75,160 p.)
Dobry review. Przynajmniej zwraca uwagę na istotne detale podczas nauki :)

I wprowadza w obecne czasy z js'em ;
1
komentarz 21 września 2017 przez Gambr Dyskutant (7,530 p.)
edycja 22 września 2017 przez Gambr
Nawet do mojego ulubionego miejsca w internecie dotarł toxic i pretensje :/
komentarz 22 września 2017 przez emczek Nowicjusz (190 p.)
Panie Mirosławie, proszę się nie zrażać takimi osobami, które nie rozumieją, że czym innym jest przykład dydaktyczny, a czym innym praca zawodowa. To tak jakby ktoś się czepiał, że w podstawówce uczą dzieciaki, że nie istnieje pierwiastek z liczby ujemnej. Do pewnych poziomów abstrakcji trzeba dojrzeć / zrozumieć podstawy.

Malkontentom proponuję zamiast czepiania się na zasadzie "jestem najlepszy" napisanie kawałka dobrego kodu, a następnie pokazanie go nam - uczącym się, z wyjaśnieniem czemu tak jest ok. Z chęcią skorzystam.
5
komentarz 22 września 2017 przez Schizohatter Nałogowiec (39,600 p.)

"Toxic"? Pretensje? Malkonent?

Pomagam na forach od dobrych kilku lat, w tym także pomagam tutaj. Zakładam, że na to forum trafiają ludzie po kursach Pasji Informatyki, a na inne fora - po innych kursach. Widzę różnicę w poziomie pytań, widzę, jakie problemy napotykają ludzie tu i tam i śmiem twierdzić, że cały problem leży właśnie w kursie Pasji Informatyki, który od początku promuje złe praktyki. Złe praktyki nie są złe "bo tak", tylko są złe, bo powodują problemy - prędzej czy później.

Zrozumcie - nowicjusze - że jak coś krytykujemy to nie po to, żeby krytykować, tylko szczerze boimy się o przyszłość całej sieci. Ja wiem, że przyjazna i miła atmosfera Pana Zelenta powoduje, że czujecie się bezpiecznie i mu ufacie, ale - proszę - zastanówcie się nad tym: nie można być alfą i omegą w każdej dziedzinie, a Mirosław Zelent uczy tak wielu działów, że wręcz niemożliwym jest, aby w każdym z nich był wystarczająco kompetentny. Nie kwestionuję jego kompetencji, jako nauczyciela ogólnie, tylko jako nauczyciela konkretnej rzeczy - webdevu.

Mam wątpliwą przyjemność obserwować, co się dzieje w tym światku właśnie przez wątpliwą jakość niektórych popularnych kursów. Złe praktyki to złe praktyki i dydaktyka nie ma tu nic do rzeczy. Często złych praktyk nie da się już potem z takiej osoby wykorzenić. Przecież to tak, jak pozwalać dziecku pół życia liczyć na palcach, zamiast zmusić go do nauki lepszych sposobów. Wiem - to boli, liczenie na palcach jest przyjazne w przedszkolu - ale nie sprawdza się na dłuższą metę i tutaj jest analogicznie.

Pan Zelent na każdym kroku dyskusji (z "nami") robi z siebie męczennika i nie odpowiada rzeczowo na argumenty, wszystko odbiera jako atak na swoją świętą osobę. Po prostu podejdźcie do sprawy obiektywnie, że nie jesteśmy toksyczni, a może zauważycie, o czym mówię.

 

@emczek

napisanie kawałka dobrego kodu, a następnie pokazanie go nam - uczącym się, z wyjaśnieniem czemu tak jest ok. Z chęcią skorzystam.

To tylko świadczy o tym, że nie przeczytałeś tego, co napisałem w "code review". Właśnie zrobiłem dokładnie to, o czym napisałeś. Wskazałem błędy. Jeśli jesteś zainteresowany, wyguglujesz i dowiesz się, czemu to błędy, a jeśli nie znajdziesz czegoś, wtedy zadasz pytanie na forum i wszyscy wejdą na wyższy poziom.

komentarz 22 września 2017 przez Mirosław Zelent Nałogowiec (34,750 p.)

Spoko, forum to miejsce publiczne - można mnie oskarżać, negować dobro w czymkolwiek co robię, projektować na mnie wiele cech / zachowań, etykietować. Każdy ma prawo do własnej opinii - szanuję to. Myślę że bardzo agresywnie i dobitnie wyraziłeś się na mój temat, ale jeśli odczuwasz taką potrzebę to powinieneś kontynuować - podobnie inne osoby. Osobiście mam olbrzymi dystans do komentarzy w internecie i nie biorę ich emocjonalnie do siebie. Lubię też poczytać krytykę, bo osoby które mnie nienawidzą za to co robię też mogą pomóc wiele poprawić w moim warsztacie. Bo nawet kiedy ktoś obrzuca Cię błotem, to stara się uzasadnić dlaczego tak robi / tak Cię widzi - czasami to też potrafi przynieść wartość (niejako przez "ogień"), pod warunkiem że kiedy czytamy wykazujemy empatię wobec osoby która jest agresywna (w sensie: zakładamy a priori, że ma dobre intencje i staramy się ją zrozumieć. Jedyny przypadek kiedy to nie ma sensu to czytanie postów tzw. trolli - wówczas lepiej w ogóle przejść od razu do następnej wypowiedzi).

Jedyny problem jaki widzę to osoby, które widząc ultra-agresję, chcąc po ludzku dodać mi otuchy, napiszą coś co z kolei podważa wypowiedź oskarżającego. A ego tej osoby reaguje - i tak zaczyna się wymiana pomiędzy osobami, a wypowiedzi (często mające ten sam sens, ale wielokrotnie przeformułowane) ciągną się naprzemiennie jak włoski makaron (i np. z wątku który w założeniach miał traktować o rozbudowie gry w JS robi się sieczka i walka o to kto ma rację w dyskusji). Widać to pięknie w każdej internetowej dramie - osobiście jestem już daleki od chęci uczestniczenia w nich - kiedyś wyjaśniałem cierpliwie swoje punkty widzenia, ale prawda jest taka, że - w większości przypadków - nikogo to nie obchodzi (w sensie: osoba po drugiej stronie i tak przeczyta Twoje słowa przez pryzmat własnych filtrów i zrozumie co innego niż ty napisałeś. No i opinie ludzi - zwróćmy uwagę - powstają na podstawie ich wyobrażenia na temat danej osoby - stąd często mówią więcej o oceniającym, niż o ocenianym). Dlatego takie internetowe rozmowy to strata czasu - są zbyt jałowe. Sam nie będę w tym uczestniczyć, ale zajrzę za jakiś czas, może ktoś napisze coś ciekawego. Do nikogo nie mam pretensji, nie trzeba mnie bronić, nie traktuję tego emocjonalnie. Dziękuję wszystkim za wypowiedzi. Pozdrawiam!

7
komentarz 22 września 2017 przez Schizohatter Nałogowiec (39,600 p.)
edycja 22 września 2017 przez Schizohatter

Ale ja nie pisałem do Pana, tylko do innych ludzi i Pan się wtrynił. Znowu Pan robi z siebie męczennika "obrzucanego błotem", "oskarżanego", "ludzie mnie nienawidzą" i tak dalej. Jest dla mnie bardzo zabawna taka postawa. Jak Pan napisał, że nie będzie Pan uczestniczyć, to dobrze, bo właściwie od roku nic nowego Pan nie wnosi oprócz tego, że "takie są moje metody" i że "jestem obrzucany błotem".

Nie podoba mi się, że uczy Pan złych praktyk. I tyle. Nie przebieram w słowach i nie owijam w bawełnę, stąd może się wydawać, że to "agresywne" wypowiedzi. To jest moje zdanie, ale nie tylko moje i dlatego staram się być tą "drugą stroną". Posiadanie tylko jednego autorytetu jest zawsze niekorzystne, chyba Pan to przyzna (przed samym sobą).

Chciałem dotrzeć swoim postem do nowicjuszy, ale oczywiście nie mógł Pan się powstrzymać, odebrał Pan to jako atak ad personam, skomentował to (jak bardzo Pana to boli, że tak Pana wszyscy komentują). I samym komentarzem, już mnie Pan zdyskredytował, ponieważ jest Pan dla swoich uczniów autorytetem. A jeśli autorytet powie, że ktoś jest zły, to ten ktoś już ma przesrane. W tym momencie pozbawił Pan swoich uczniów opinii innych ludzi niż Pan, Pana zamknięta klitka stała się jeszcze bardziej zamknięta, brawo.

8
komentarz 22 września 2017 przez niezalogowany
@MZ myślę, że nikt nie miałby panu niczego za złe, gdyby Code Review (a konkretniej krytycznego CR) nie identyfikowalby Pan z "agresją i obrzucaniem błota".

Źle pisany kod miałby jakąkolwiek wartość dydaktyczną gdyby Pan faktycznie poświęcił czas na łamach odcinka i pokazał co jest w nim nie tak. Forma "zadania domowego" bez ukazania dobrej odpowiedzi i wyjaśnienia jej jest jałowa, bo nie oszukujmy się - mało kto poszuka poprawnej odpowiedzi.

Później to my (bardziej zaawansowani forumowicze) musimy się zmagać z kodami które są bezmyslna kopia tych z odcinka.

Przy zwróceniu uwagi danej osobie, że jej kod jest zły, to dostajemy odpowiedzi w stylu "mz tak zrobił więc jest dobrze i tak ma być, jeżeli myślisz inaczej to się nie znasz".

Jak dla mnie to ten system dydaktyczny nie działa, skoro historia powtarza się co wypuszczenie odcinka...

Myślę że czas w którym mówi pan "jak to się już dużo nie umie", albo opowiada pan inne nic nie wnoszące historyjki, lepiej byłoby spożytkować na pokazanie tych dobrych praktyk ;)
komentarz 22 września 2017 przez Gambr Dyskutant (7,530 p.)
Schizohatter a znasz źródła web devowe uczące od początku dobrych praktyk ?
3
komentarz 22 września 2017 przez Karoldev Początkujący (300 p.)
"osoba po drugiej stronie i tak przeczyta Twoje słowa przez pryzmat własnych filtrów i zrozumie co innego niż ty napisałeś"

Wpadłem w ten wątek przypadkiem i połknąwszy dyskusję z ciekawością muszę stwierdzić, że ten cytat przy tej dyskusji pasuje raczej do pana (i naprawdę nie mam złych intencji, proszę nie szukać dalej negatywnych wibracji). By doszukać się tu NIENAWIŚCI w postach Schizohattera, czy kogokolwiek innego, trzeba naprawdę wyprężyć wyobraźnię. Stay positive!
1
komentarz 22 września 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)
edycja 22 września 2017 przez Kamil Łydka


Jak dla mnie to ten system dydaktyczny nie działa, skoro historia powtarza się co wypuszczenie odcinka...

Ja jeszcze jako niedawno początkujący (a może nadal) zwróciłbym też uwagę na to, że na filmikach jest przedstawione jakby idealne programowanie. 

A jest trochę inaczej w rzeczywistośći... Z własnego doświadczenia i czytając pytania na forum, można zauważyć że jednak początek, to tonięcie w wielkiej ilości błędów, problemów, zagwoztek i trudów.

Ja wiem, że film bez błędów, niekompilującego się kodu albo np. niedziałających funkcji - ogląda się dużo milej i wszystko wygląda bardziej profesjonalnie, ale początkujący robi sobie trochę złą wizje, potem szybko się poddaje i nie potrafi sobie radzić z problemami. Źle wpisana ścieżka do pliku/zdjęcia, to chyba najczęstszy problem i  tylko pytanie "dlaczego nie działa?". Wystarczałoby przypominać o konsoli (choć widziałem, że tutaj coś była użyta) i pokazać jak są wyświetlanie najbardziej spotykane błędy.

Zapewne wtedy byłoby trzeba podzielić taki odcinek na parę mniejszych, ale to też wyszłoby na dobre, bo 1h i 20 minut, to i tak naprawdę dużo, jeśli chodzi o dawkę wiedzy.

Taki tam, mój mały wywód. ;)

 

PS. Ja i tak cały się zastanawiam czemu wszystko jest przedstawiane na tym okropnym Notepad++, jakby nie było lepszych i ładniejszych edytorów (a to też usprawniłoby naukę). ;)

komentarz 22 września 2017 przez emczek Nowicjusz (190 p.)
No właśnie przeczytałem dokładnie całe code review, i z mojego (niewielkiego) doświadczenia wiem, że były tam uwagi słuszne. O to się nie czepiam. Po prostu forma przekazania tego wyglądała trochę pretensjonalnie. Z chęcią zobaczyłbym Twój kod po tych poprawkach o których piszesz (nie żeby się czepiać, tylko zobaczyć inne podejście). Natomiast nie uważam, żeby pan MZ robił złą robotę - nawet jeśli coś nie jest idealne albo aktualne to po to są różne źródła żeby to sobie zrewidować. A od czegoś trzeba zacząć.
3
komentarz 22 września 2017 przez niezalogowany
#chcęPowiadomienia
2
komentarz 22 września 2017 przez Comandeer Guru (599,730 p.)

Natomiast nie uważam, żeby pan MZ robił złą robotę - nawet jeśli coś nie jest idealne albo aktualne to po to są różne źródła żeby to sobie zrewidować. A od czegoś trzeba zacząć.

To jest, niestety, pobożne życzenie i zwracałem na to uwagę wielokrotnie. Wystarczy sobie poobserwować pytania o ocenę kodu tutaj na forum czy na grupach na FB. Niemal nikt nie rewiduje wiedzy w różnych źródłach, dlatego tak istotne jest, by źródło było jak najbardziej poprawne merytorycznie.

4
komentarz 23 września 2017 przez efiku Szeryf (75,160 p.)

Nic się nie zmieni więc na siłę nie ma co ciągnąć tej dyskusji.

Naprawdę koniec.

CR to kompromis pomiędzy "Nauczycielami" a "Programistami".
Ja i tak odpowiadam tutaj na jakiś 1% pytań, bo to się robi nudne jak co chwile pojawiają się pytania: Dlaczego mi ten kod nie działa , o użyłem @, bo tak mi pokazali i nie działa!!!! XD Albo umiem kopiować kod, ale nie umiem zrobić prostego routingu

@Schizohatter, wróć do udzielania się na grupie fejsowej w pierwszych krokach, tam nie ma takiego podziału, lub tutaj odpowiadaj osobą które używać zaczęły jakiś FW, gdzie widzisz, że poziom pytania jest warty odpowiedzi. ;)

Temat wyczerpany, bo za chwilę będziecie krzyczeć na siebie. 

PS: Taki śmieszny mem znalazłem ;) 
https://i.stack.imgur.com/ssRUr.gif

+4 głosów
odpowiedź 10 marca 2019 przez eswu Początkujący (280 p.)
edycja 10 marca 2019 przez Patrycjerz

1. losowość umieszczenia kart przy rozdaniu

2. brak reakcji przy dwukrotnym kliknięciu na tą samą kartę

3. możliwość restartu gry po zakończeniu obecnej

W pliku memory.js wprowadziłem następujące zmiany:

ad 1) na samym początku pliku:

var cards_list = ["ciri.png", "geralt.png", "jaskier.png", "jaskier.png", "iorweth.png", "triss.png", "geralt.png", "yen.png", "ciri.png", "triss.png", "yen.png", "iorweth.png"];
var cards = new Array();

for(var i = 12;i>0;i--)
{
    var rand_id = Math.floor(Math.random() *i);
    cards.push(cards_list[rand_id]);
    cards_list.splice(rand_id,1);
}

ad 2) w definicji funkcji revealCard(nr) zamiast "if ( opacityValue != 0 && lock == false)" :

    if ( opacityValue != 0 && lock == false && nr != visible_nr )

ad 3) w definicji funkcji hide2Cards(nr1, nr2) zamiast "$('.board').html('<h1>You win!<br>Done in '+turnCounter+' turns</h1>');" :

$('.board').html('<h1>You win!<br>Done in '+turnCounter+' turns. <span class="reload" onclick="location.reload()">Click to reload.</span></h1>');

W main.css na koniec pliku dodałem:

.reload
{
    margin-top: 5px;
    letter-spacing: 2px;
}

.reload:hover
{
    color: #e9b64a;
    cursor: pointer;
}
+1 głos
odpowiedź 25 września 2017 przez emczek Nowicjusz (190 p.)
Wspominał Pan w odcinku o innych grach opartych na jQuery. Postawiłem sobie dość ambitne zadanie jak na kogoś kto tylko hobbystycznie uczy się programować i próbuję zaprogramować warcaby. Wstępna wersja poniżej. Zdaje sobie sprawę, że wiele rzeczy można w tym chaotycznym kodzie usprawnić, i że gra wymaga jeszcze dalszej pracy. Na razie jestem zadowolony, że chociaż tyle udało mi się napisać. :)

Założenia: bicia są obowiązkowe, można bić do tyłu

Do okodowania: bicia wielokrotne, zamiana w damkę, wykrywanie remisu (15 ruchów bez zbicia), zaprogramowanie sztucznej inteligencji żeby można było grać z komputerem a nie tylko z samym sobą ;)

https://codepen.io/mczekajski/pen/ayxpaR
1
komentarz 5 października 2017 przez Mirosław Zelent Nałogowiec (34,750 p.)
Super, dobra robota! :) Link do demo warcab trafi niedługo na nasz fanpage na Facebooku -  jeśli masz jakieś portfolio / bloga, to możesz osadzić tam (pod dowolnym adresem) to demo - zyskasz trochę wizyt w swojej domenie. Pozdrawiam
komentarz 5 października 2017 przez emczek Nowicjusz (190 p.)
Dziękuję. Portfolio dopiero się tworzy (pewnie jeszcze długo, bo nie mam za dużo do pokazania...). Ta wersja na codepen już jest nieco bardziej rozwinięta, okodowałem bicie wielokrotne, zamianę w damkę, jeszcze kompletny mechanizm bicia damką wymaga dopracowania. Proszę tylko podpisać link moim imieniem i nazwiskiem (Marcin Czekajski) żebym w razie czego mógł się pochwalić ;)
komentarz 6 października 2017 przez Mirosław Zelent Nałogowiec (34,750 p.)
Jasna sprawa, wrzucę zatem w najbliższy poniedziałek. Pozdrawiam
+1 głos
odpowiedź 29 września 2017 przez baran860 Nowicjusz (200 p.)
Po obejrzeniu video zabrakło mi warunku sprawdzającego czy ta druga karta ma inny nr niż ta pierwsza, bo na chwilę obecną istnieje możliwość odkrycia jednej karty potem ponowne jej kliknięcie co powoduje usunięcie z planszy tylko jednej karty :)
komentarz 5 października 2017 przez Mirosław Zelent Nałogowiec (34,750 p.)
Tak jest, to właśnie trzeba poprawić w obsłudze kliknięcia karty. Pozdrawiam
+1 głos
odpowiedź 15 października 2019 przez rafrucin Nowicjusz (160 p.)

Witam,

moja wariacja na temat:

https://github.com/Rafrucin/memory

- dodano wiecej kart i je zmieniono

- dodano dzwieki

- kod jest latwo skalowalny 

 

komentarz 15 października 2019 przez Mirosław Zelent Nałogowiec (34,750 p.)
Wow, fajnie zrealizowane Panie Pawle, także "pod maską :) Pozdrawiam
komentarz 15 października 2019 przez rafrucin Nowicjusz (160 p.)

Wersja Pawła była jedną z inspiracji,  ja mam na imię Raf smiley ale i tak dziękuję za dobre słowo. 

komentarz 15 października 2019 przez Mirosław Zelent Nałogowiec (34,750 p.)
A, rozumiem - nie doczytałem, że przecież Pana imię to Rafał, a Pawła wziąłem z powodu wspomnienia o wersji Pawła Niesiołowskiego (przepraszam). Pozdrawiam!
+1 głos
odpowiedź 14 lutego 2021 przez Paweł Gargula Nowicjusz (240 p.)

Cześć

Dołączam się do zabawy.

Generalne zmiany:

- Osadzenie rozgrywki w klimacie gry League of Legends

- Losowanie kart

- Resetowanie planszy po wygranej

- Próba uproszczenia kodu

Demo: https://pawelgargula.github.io/MemoryGame/

Kod: https://github.com/PawelGargula/MemoryGame

Pozdrawiam

Paweł

+1 głos
odpowiedź 27 lipca 2021 przez qwiateq Początkujący (430 p.)
Dorzucam swoją, trochę poprawioną wersję. Na pewno można tu jeszcze dużo poprawić, ale jako ćwiczenie z odcinka zrobiłem tyle. Zebrałem to co już padło w wątku i w ten sposób sobie poćwiczyłem.

Kod:

https://github.com/pwkwiatkowski/MemoryGame_js_jquery/blob/main/docs/memory.js

Gra:

https://pwkwiatkowski.github.io/MemoryGame_js_jquery/
0 głosów
odpowiedź 25 września 2017 przez Gambr Dyskutant (7,530 p.)

To funkcja która losowa zapełnia tablicę  parami kart bez duplikowania :)

var cards = [
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
];
function setStartPhotos()
{	
	for(i=0; i<12; i++)
	{
		$('#c'+i).css('background-image', 'url(img/game/karta.png)');
	
	}
	generateRandomBoard();
}
function generateRandomBoard()
{
	var ciri=0; geralt=0; jaskier=0; iorweth=0; triss=0; yen=0; 
	var random=0; 
	var randomSwitch =0;
	do
	{
		randomSwitch = Math.floor((Math.random()*6)+1);
		random=Math.floor((Math.random()*12)+1)-1;
		switch(randomSwitch)
		{
			case 1:
			{
				if((ciri<2)&&(cards[random]=="empty"))
				{
					ciri++;
					cards[random]="ciri.png";
				}
			
			break;
			}
			
			case 2:
			{	
				if((geralt<2)&&(cards[random]=="empty"))
				{
					geralt++;
					cards[random]="geralt.png";
				}
			break;
			}
			case 3:
			{	
				if((jaskier<2)&&(cards[random]=="empty"))
				{
					jaskier++;
					cards[random]="jaskier.png";
				}
			break;
			}
			case 4:
			{	
				if((triss<2)&&(cards[random]=="empty"))
				{
					triss++;
					cards[random]="triss.png";
				}
			break;
			}
			case 5:
			{	
				if((yen<2)&&(cards[random]=="empty"))
				{
					yen++;
					cards[random]="yen.png";
				}
			break;
			}
			
			case 6:
			{
				if((iorweth<2)&&(cards[random]=="empty"))
				{
					iorweth++;
					cards[random]="iorweth.png";
				}
			break;
			}	
		}
	}
	while(ciri<2||geralt<2||jaskier<2||triss<2||yen<2||iorweth<2);
	document.write(cards);
}



 

2
komentarz 25 września 2017 przez Ehlert Ekspert (212,630 p.)

Pomijając tą tablicę, to tyle wyciekło Ci do globalnego scopeu, że random to nie random laugh

komentarz 26 września 2017 przez niezalogowany

Zaproponuję bardziej funkcyjne rozwiązanie z małą pomocą biblioteki lodash

const shuffleCards = cards => _(cards)
	.concat(cards) // podwojenie ilości kart
	.shuffle() // pomieszanie kart
	.value() // zwrócenie nowej tablicy

const cards = ['Dowolna', 'liczba', 'kart']
const gameBoard = shuffleCards(cards)

console.log(gameBoard) 
// ["Dowolna", "liczba", "Dowolna", "liczba", "kart", "kart"]

 

komentarz 26 września 2017 przez Rettles Bywalec (2,320 p.)
edycja 26 września 2017 przez Rettles

Z pomocą jQuery możesz znacznie skrócić twój zapis ;)

Używając arrow (=>) function

// twoja tablica z kartami (bez duplikatów)
let cards = ["1.png", "2.png", "3.png", "4.png"];

// funkcja, która dubluje tablice oraz sortuje ją w losowej kolejności
let shuffleArray = (array) => $.map(array, (element) => [element, element]).sort(() => 0.5 - Math.random());

cards = shuffleArray(cards);

 

funkcję shuffleArray() można zapisać również w taki sposób:

let shuffleArray = function (array) {
    return $.map(array, function (element) {
        return [element, element];
    }).sort(function () {
        return 0.5 - Math.random();
    });
};

 

komentarz 26 września 2017 przez Gambr Dyskutant (7,530 p.)

Zrobie wersję na lokalnych zmiennych, w których funkcja zwraca tablice :)

Ale jak na początkującego to chyba nie ma dramatu :D? 

2
komentarz 26 września 2017 przez niezalogowany

Ten pierwszy kod, to trochę dramat był : p

Hmm, tak naprawdę nie potrzeba do tego jQ

const shuffleArray = arr => [...arr, ...arr].sort(() => 0.5 - Math.random())

Cały problem rozchodzi się o funkcję mieszającą, spójrz na komentarze do tej odpowiedzi, w wolnej chwili sprawdzę dokładniej o co chodzi - ale wstępnie miesza całkiem dobrze

0 głosów
odpowiedź 24 października 2017 przez Paweł Niesiołowski Nowicjusz (140 p.)
edycja 24 października 2017 przez Paweł Niesiołowski

Przyłączam się do zabawy. smiley


Najważniejsze zmiany, które wprowadziłem:

  • naprawiłem "błąd krytyczny" i uprościłem kod,
  • zmieniłem tematykę i wygląd gry - osadziłem ją w świecie serialu "Twin Peaks",
  • dodałem losowanie kart i zwiększyłem ich liczbę,
  • stworzyłem możliwość zapisywania najlepszych wyników (z wykorzystaniem AJAX i PHP),
  • dodałem licznik odwiedzin.

Kod gry: GitHub

Demo: Twin Peaks Memory Game

 

komentarz 25 października 2017 przez Mirosław Zelent Nałogowiec (34,750 p.)
Ha, świetna robota! Laury Palmer się nie spodziewałem, dobry gust serialowy :) No i świetna obudowa w JS, PHP i AJAXie! Poczekam jeszcze trochę czy pojawią się kolejne przeróbki i również pójdzie na naszego FB. Fajnie, że podzieliłeś się pełnym kodem. Pozdrawiam! :)
komentarz 25 października 2017 przez Paweł Niesiołowski Nowicjusz (140 p.)
Dzięki za ten komentarz. Twoje słowa dużo dla mnie znaczą. Niecierpliwie czekam na kolejne odcinki Twoich świetnych kursów. Pozdrawiam! :)
0 głosów
odpowiedź 28 grudnia 2017 przez zirael [PL] Mądrala (5,200 p.)
Czy kod który jest poddany refaktoryzacji z kursów można znaleźć np na githubie?
komentarz 28 grudnia 2017 przez niezalogowany
komentarz 28 grudnia 2017 przez zirael [PL] Mądrala (5,200 p.)
Dziękuję bardzo! Pozdrawiam.
0 głosów
odpowiedź 3 stycznia 2018 przez Michał Kucharski Nowicjusz (140 p.)
Mógłby mi ktoś wskazać jak sprawić, żeby po kliknięciu dwa razy tego samego kafelka nie znikało i nie zaliczało tury? Resztę kodu poprawiłem, ale z tym sobie nie mogę poradzić...

Pozdrawiam
komentarz 4 września 2019 przez Irim Nowicjusz (100 p.)

Dopiero sam zacząłem przerabiać ten kurs stąd ta późna odpowiedź, ale może komuś kto ma pierwszą styczność z programowaniem się przyda, a trafi na ten kurs później. smiley

if(oneVisible == false){
            //First card
            oneVisible = true;
            visibleNr = nr;
            lock = false;
        }else{
            //Second card
            if(visibleNr != nr)
            {
                if(cards[visibleNr] == cards[nr])
                {
                    setTimeout(function(){ hide2Cards(nr, visibleNr)}, 750);
                    lock = false;
                    pairsLeft--;
                    if(pairsLeft<=0){
                        $('.board').html('<h1>You win! <br/>Done in ' + turnCounter + ' turns</h1>');
                    }
                }else{
                    setTimeout(function(){ restore2Cards(nr, visibleNr)}, 1000);
                    lock = false;
                }
    
                turnCounter++;
                $('.score').html('Turn counter: ' + turnCounter);
                oneVisible = false;
            }
        }

Dodałem trochę dodatkowego kodu, dzięki czemu mam nadzieję nowe osoby będą mogły szybciej znaleźć miejsce zmian. W warunku else całość została opakowana w jeszcze jedną instrukcję warunkową, która sprawdza numer pierwszej karty (visibleNr) oraz drugiej karty (nr pobranej z argumentu funkcji). Każda karta ma swój kod, więc jeśli numery karty są różne (stąd warunek visibleNr != nr) to wykona się dalsza część elsa.
 

Pozdrawiam

0 głosów
odpowiedź 26 lutego 2018 przez Elche Nowicjusz (140 p.)

Szukam sposobu na uproszczone dodawanie nasłuchiwaczy

Tu umieściłem mój kod

https://jsfiddle.net/t8wgrdeg/1/

chodzi mi konkretnie o tą linijkę

for (var i = 0; i < cardsList.length; i++)
{

	cardsList[i].addEventListener("click", function() { revealCard(i); } );
}

Całoś przy tym działa tak, że nie odsłania kart, ale po dwóch kliknięciach zlicza tury. Po 6. turze pojawia się komunikat "You win". 

Albo nasłuchwacze nie zostały dodane albo parametr nie przesłany albo jedno i drugie. Będę wdzięczny za naprawodzenie na rozwiązanie.

komentarz 17 lutego 2022 przez Qwertak Nowicjusz (100 p.)
Po tylu latach przydać się może tylko komuś innemu, ale było tłumaczone gdzieś wyżej i najprostszym rozwiązaniem jest zmienić 'var' na 'let'.
0 głosów
odpowiedź 15 marca 2018 przez kordix Gaduła (3,910 p.)
edycja 15 marca 2018 przez kordix

Niby takie proste żeby przerobić addEventListener dla każdej karty na pętle a miałem z tym potworny problem.

Powiedzmy że na razie karta ma zwrócić jej numer.

for(var i=0;i<20;i++){
     document.getElementById('c'+i).addEventListener("click",function(){
        revealcard(i);
    });
function revealcard(nr){
console.log(nr);
};

Tutaj z uporem maniaka zwraca tylko ostatni numer z pętli obojętnie której karty bym nie klikał.

Może to obejść w taki sposób?

for(var i=0;i<20;i++){
     document.getElementById('c'+i).addEventListener("click",function(){
        revealcard(this.id.substring(1));
    });

Teraz ładnie zwraca mi odpowiedni numer, ale nie wiem czy to jest najlepsza metoda.

W tych refaktoryzacjach widzę jakąś inną metodologię, np. użycie właściwości target z jquery, ale nie widzę zrobienia tego w czystym js tak żeby po prostu zastąpić ten kod z odcinka. 

Czemu ta pierwsza metoda nie działa?

Intrygującą metodę widzę w ostatniej refaktoryzacji

var cardsList = $('.board div:not(.score, .reset)');

for (var i = 0; i < cardsList.length; i++)
{

    cardsList[i].addEventListener("click", function() { revealCard(i); } );
}

Ale nie czaję jak działa to cardsList - ten uchwyt zwraca tablicę wszystkich divów wewnątrz klasy board które nie mają klasy score albo reset ta? Jest na to jakiś ekwiwalent bez jQuery?

2
komentarz 15 marca 2018 przez niezalogowany

Czemu ta pierwsza metoda nie działa?

W pętli for deklarujesz zmienną i, która po kilku milisekundach przyjmuje wartość 20. W momencie klikania, wyświetlasz jej zawartość -> stąd taki wynik.

Najprostszym rozwiązaniem byłoby zadeklarowanie zmiennej i słowem kluczowym let, zamiast var. Zasięg blokowy zmiennej sprawia, że każda iteracja ma na stałe przypisaną daną wartość iteratora.

Z drugiej strony, w tym miejscu, warto już poczytać o event delegation


Jest na to jakiś ekwiwalent bez jQuery?

documnet.querySelectorAll

0 głosów
odpowiedź 15 marca 2018 przez kordix Gaduła (3,910 p.)

Mam jeszcze inne pytanie jak to jest w końcu z tym zasięgiem zmiennych? Tutaj nie chce mi w ogóle reagować jeśli ustalę zmienną poza funkcją

var pierwszyklik = false;

function revealcard(nr){

console.log(pierwszyklik);

.......

Tutaj loguje mi po prostu undefinded, nawet jeśli mam ustaloną zmienną tuż ponad tą funkcją. Miał ktoś podobny problem?

komentarz 16 marca 2018 przez Marchiew Dyskutant (7,690 p.)
pokaż więcej kodu bo w tym fragmencie nie ma żadnego błędu
komentarz 16 marca 2018 przez kordix Gaduła (3,910 p.)
Dobra mam, użyłem potem var w if-ie czyli zamiast przypisać wartość definiowałem od nowa zmienną. Sory za głupie pytanie.

Podobne pytania

+6 głosów
1 odpowiedź 2,247 wizyt
pytanie zadane 29 grudnia 2017 w Nasze poradniki przez Mirosław Zelent Nałogowiec (34,750 p.)
0 głosów
1 odpowiedź 418 wizyt
pytanie zadane 7 listopada 2017 w JavaScript przez Gabrysia Sochacka Nowicjusz (140 p.)
+1 głos
0 odpowiedzi 2,001 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...