Zaczynacie swoją przygodę z JavaScriptem? A może chcecie odświeżyć swoją wiedzę? Przed Wami zadania z JavaScriptu, które pozwolą poćwiczyć umysł i Wasze umiejętności! Do kodu!
Ostatni wpis z zadaniami z JS wzbudził Wasze ogromne zainteresowanie. Wiele osób zdecydowało się podzielić swoim kodem, a także wziąć udział w code review. Dziś ponownie zapraszam Was do zabawy.
Na czym polega zabawa? W tym wpisie znajdziecie 3 zadania z podstaw JavaScriptu. Rozwiążcie je, a link podajcie w komentarzu (najlepiej w formie nowego pena z Codepen). Następnie sprawdźcie zadania osobie, która podała rozwiązanie komentarz wyżej. Skomentujcie wpis tej osoby i napiszcie, co jest według Was dobrze, a co powinna poprawić. Poćwiczycie nie tylko JS, ale także code review, a to bardzo ważne umiejętności ? Pamiętajcie – nie wklejajcie kodu bezpośrednio do komentarza pod tym wpisem (wrzucajcie link do rozwiązania), dajcie innym szansę się sprawdzić.
Widziałam, że ostatnio wiele osób nie komentowało kodu podrzuconego przez innych. I chciałam Was do tego mocno zachęcić – jak nie widzicie błędów, uważacie, że wszystko jest ok – też o tym napiszcie. To także cenny feedback dla osoby, która podaje rozwiązanie. Jak podacie swoje rozwiązanie – rzućcie okiem na kod osoby, która skomentowała post przed Wami. A teraz zaczynamy!
Zadanie 1
Napisz funkcję, która będzie prostą wersją gry “Kamień, papier, nożyce”. Może to być wersja polska lub angielska. Funkcja jako argumenty przyjmuje dwa stringi (“kamień”, “papier” lub “nożyce”), a następnie w formie alertu podaje wynik (czyli np. wypisuje “Gracz nr 1 wygrał” – zakładamy, że gracz numer 1 to osoba, która podała pierwszy string). Jeśli do funkcji zostanie podany nieodpowiedni argument, tj. taki, który nie jest ani kamieniem, ani papierem, ani nożycami, poinformuj o tym gracza wyświetlając alert z tekstem.
To ćwiczenie może być wyjściem do stworzenia czegoś większego – możesz na przykład zrobić mini aplikację, która będzie miała dwa formularze i każdy użytkownik będzie podawał w nim swój typ, a potem obaj będą czekać na wynik. Można też zliczać punkty graczy. To oczywiście tylko pomysł, nie część tego zadania 🙂
Zadanie 2
Napisz funkcję, która jako argumenty przyjmuje ciąg liczb. Liczba argumentów może być dowolna, ale nie mniejsza niż 2 (czyli musimy do funkcji podać minimum dwie liczby). Funkcja ma na celu zwrócić liczbę, która jest największa z podanego jako argumenty zbioru. Jeśli do funkcji zostaną podane argumenty, które nie są liczbami, powinien się wyświetlić odpowiedni komunikat informujący o tym, co należy podać do funkcji (w formie alertu lub console.loga).
Zadanie 3
Napisz funkcję, która przyjmuje jako argument jakieś słowo. Ma ona wypisać, ile samogłosek zawiera podane słowo. Jeśli do funkcji podano argument, który nie jest typu tekstowego, należy wyświetlić odpowiedni komunikat (w formie alertu lub console.loga).
To wszystkie zadania. Ruszajcie do rozwiązywania i koniecznie wklejcie linki do swoich rozwiązań w komentarzu pod tym postem. I oczywiście sprawdźcie kod innych i wypowiedzcie się, co o nim sądzicie 🙂
Pierwszy! 😉
https://codepen.io/markow/pen/qLBPbg
Dzisiaj niedziela, więc lenistwo level hard – sam js, wszystko w console.log()
Hey Asia 🙂
Przesyłam zadanka
https://codepen.io/emiliooo/pen/GPRLqY
Super! Zachęcam do sprawdzenia kodu z komentarza poniżej i zrobienia małego code review 🙂
Zanim ja usiądę do rozwiązań, zachęcam mocno do sprawdzenia kodu osoby, która skomentowała przed Tobą i podzielenia się opinią w komentarzu 🙂
Zadanie 1
Zapomniałeś napisać sprawdzenia prawidłowości argumentów podanych przez graczy i – w przypadku gdy nie są – wyświetlenia stosownego komunikatu.
Funkcja sprawdz() jest wywoływana z poziomu instrukcji warunkowych w wygranyjest() od 1 do 3 razy. Można to zoptymalizować, żeby sprawdzenie odbywało się tylko jeden raz. Oczywiście w tak krótkim kodzie nie ma to większego znaczenia.
Zadanie 2
W przypadku podania dwóch argumentów wyświetlany jest komunikat ‘podaj wiecej argumentów’ oraz jednocześnie zwracany jest komunikat “największa liczba to 0” ponieważ nie został wykonany kod w if i tym samym status wynosi 0.
Wynika to z tego fragmentu kodu:
jest (arguments.length > 2)
powinno być (arguments.length > 1)
Zapomniałeś napisać sprawdzenia, czy wszystkie podane argumenty są liczbami (i wyświetlić komunikatu w przypadku gdy nie są). Z tego też powodu Liczby(1, 2, ‘tekst’) zwróci “największa liczba to tekst”.
Z mniejszych rzeczy, to:
“największa liczba to” – dodaj spację przed zamykającym cudzysłowem, bo tekst zlewa się z wyświetlaną liczbą.
Ten fragment “return ‘największa liczba to’ + status” wrzuć do if, bo inaczej przy podaniu jednego argumentu do fukcji wyświetli się “największa liczba to 0”.
Sam algorytm porównujący która liczba jest największa bardzo fajnie napisany. Prosty, przejrzysty i skuteczny 🙂
Zadanie 3
Zapomniałeś napisać sprawdzenia, czy podany argument jest typu string.
Źle zlicza samogłoski, ponieważ jako samogłoski traktowane są również spacje i przecinki. Wynika to z tego fragmentu kodu:
jest let samogloski = ‘a,ą,e,ę ,o, ó, u, y,i’
powinno być let samogloski = ‘aąeęoóuyi’
Z rzeczy ogólnych
Unikaj pisania nazw funkcji dużą literą, ponieważ wg konwencji w ten sposób pisze się nazwy konstruktorów obiektów (chociaż obecnie częściej korzysta się już z klas niż funkcji konstruktorów).
Przyzwyczajaj się do pisania nazw funkcji i zmiennych po angielsku. Na początku nauki – jeśli tylko pomaga to w nauce – jak najbardziej ok, ale później już tylko po angielsku.
Powodzenia w dalszej nauce! 🙂
https://jsbin.com/kanecegobu/edit?html,js,console
prawie bez ifów ;P
kontrola typów jest taka sobie ale już mi się nie chciało
Hej! 🙂
JSa uczę się dopiero od września, więc proszę o wyrozumiałość 😀
https://codepen.io/Lisayna/pen/xmbPPb
Kod na pewno bardzo fajny, jednak na chwilę obecną dla mnie prawie nieczytelny. 🙂
Emil, pozwoliłam sobie zrobić code review Twojego kodu zanim zobaczyłam komentarz drugiego Emila.
https://codepen.io/Lisayna/pen/aPzVXd – w takiej formie lepiej mi było napisać uwagi i lepiej moim zdaniem czytać 🙂
Dziękuje wszystkim powyzej za komentarze i wczorajszy konstruktywny code review 🙂
Pozwoli mi to poprawić moje programistyczne rzemiosło 🙂
Teraz dopiero znalazłam chwilę, żeby sprawdzić. Bardzo dobrze zrobione zadania 🙂
Hej! Twój kod wydaje się bardzo chaotyczny i dość ciężko się go czyta. Także fajnie jak zrobisz porządek, podzielisz na odpowiednie bloki (albo np. napiszesz komentarze, które to zadanie), bo na razie dużo tu bałaganu. Fajnie też zrobić więcej mówiące alerty niż “Coś nie halo”, bo trudno się domyślić, co jest nie tak (i do tego, w którym zadaniu). I zwróć uwagę, że w pierwszym zadaniu funkcja ma przyjmować dwa argumenty, a nie losować wybór komputera. Daj znać jak uporządkujesz kod 🙂
Hej! Dobrze zrobione zadania 🙂 Kilka małych uwag:
– w pierwszych zdaniu piszesz funkcję ‘rockPaperScissors’, która w sobie wywołuje determineWinner 3 razy. Wg mnie to trochę wprowadza w błąd. Dobrze, gdyby to w ciele jednej funkcji sprawdzano od razu, kto wygrał, a jej wywołanie po prostu odpala skrypt. Rozumiem, że chodziło Ci o to, żeby od razu sobie funkcję sprawdzić, ale w sumie tworzy się z tego po prostu blok, który zawsze trzy razy wywoła funkcję i tyle. A chodziło o to, by móc sobie te funkcję wywołać z różnymi argumentami
– jeśli chcesz poćwiczyć sobie coś innego niż ‘if’, spróbuj zrobić warunki w pierwszym zadaniu za pomocą instrukcji ‘switch’
– jeśli coś jest nie tak w funkcjach, używasz ‘throw new Error’, tymczasem wg zadania to powinien być alert (tak, żeby użytkownik mógł go zobaczyć, teraz dostaje tylko błąd w konsoli)
Cześć,
poniżej moje rozwiązania. Będę wdzięczna za konstruktywny feedback 🙂
https://codepen.io/AgataP/pen/vvKQjv
Witam, podrzucam link do mojego zad nr 1 😉
https://codepen.io/Pinoo/pen/MLPMVz
Trochę po czasie i pewnie nikt tego nie sprawdzi ale podsyłam moje rozwiązanie.
To podsyłam i ja
https://codepen.io/BlackWolf21/pen/zXPNQm
Przepraszam, że dopiero teraz piszę, ale mi gdzieś umknął ten komentarz. Bardzo dobrze wykonane zadania, brawa za dodanie formularza! Może chcesz coś podziałać dalej i zrobić z tego mini grę wykorzystując ten formularz?
Jedynie mała uwaga – deklarujesz zmienne przy użyciu var, a ja proponowałabym zacząć używać let i const. O tym, co dają poczytasz w tym wpisie o ES6. Mam nadzieję, że się przyda 🙂
A jak chcesz sobie trochę jeszcze popracować z tym kodem, to spróbuj niektóre funkcje zamienić na arrow functions, żeby zobaczyć, jak działają.
Bardzo dobrze zrobione zadanie! I duży plus za ubranie gry w szatę graficzną 🙂 Może spróbujesz trochę nad nią popracować i np. dodasz dropdown, w którym byłyby wartości jakie można wybrać?
Żeby pozbyć się błędu, który znalazłeś (remis przy takim samym stringu), najpierw musisz sprawdzić, czy wpisane wartości mają określoną treść, a potem dopiero sprawdzać, czy podane wartości są takie same. Czyli brakuje jednego ifa na sam początek. Warto o tym pamiętać, bo kiedy ktoś wpisze niepoprawną wartość, gra w ogóle nie powinna się zaczynać, więc kod nie musi wskakiwać w kolejne ify, a u Ciebie tak się dzieje.
Czekam na rozwiązania kolejnych zadań, bo jeszcze 2 były we wpisie 🙂
Super rozwiązania! Plus za użycie spread operator 🙂
Witam 🙂
Jestem początkującym webmasterem z ubogim portfolio. W celu jego wzbogacenia zdecydowałem się wykonać kilka małych projektów z js. I pierwsze zadanie sam sobie wymyśliłem. Zrobiłem je wg znalezionych w necie rozwiązań; jednak efekt nie do końca jest taki o jaki mi chodziło. Tak więc czy podesłać ten mój projekt z wyjaśnieniem docelowego efektu?
Spróbuj pokombinować, żeby był taki efekt, jaki chciałeś. A jak się nie uda, podeślij kod, spojrzymy i zobaczymy, co się da poradzić 🙂
Udało mi się dzięki pewnym wskazówkom na grupie fb.
A tak, przy okazji- czy mógłbym napisać prywatnie?
Pozdrawiam 🙂
Pewnie, napisz maila, odpiszę w wolnej chwili