Sprawdź się! Porcja zadań z JavaScriptu

zadania z JavaScriptu

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 🙂

15 Replies to “Sprawdź się! Porcja zadań z JavaScriptu”

  1. Pierwszy! 😉
    https://codepen.io/markow/pen/qLBPbg
    Dzisiaj niedziela, więc lenistwo level hard – sam js, wszystko w console.log()

    1. Super! Zachęcam do sprawdzenia kodu z komentarza poniżej i zrobienia małego code review 🙂

      1. Teraz dopiero znalazłam chwilę, żeby sprawdzić. Bardzo dobrze zrobione zadania 🙂

    1. 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 🙂

    2. 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! 🙂

    3. 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ć 🙂

  2. 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

    1. Kod na pewno bardzo fajny, jednak na chwilę obecną dla mnie prawie nieczytelny. 🙂

    2. 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 🙂

  3. Hej! 🙂
    JSa uczę się dopiero od września, więc proszę o wyrozumiałość 😀
    https://codepen.io/Lisayna/pen/xmbPPb

    1. 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)

  4. Dziękuje wszystkim powyzej za komentarze i wczorajszy konstruktywny code review 🙂
    Pozwoli mi to poprawić moje programistyczne rzemiosło 🙂

  5. Cześć,
    poniżej moje rozwiązania. Będę wdzięczna za konstruktywny feedback 🙂
    https://codepen.io/AgataP/pen/vvKQjv

  6. Witam, podrzucam link do mojego zad nr 1 😉
    https://codepen.io/Pinoo/pen/MLPMVz

Dodaj komentarz