Masz chwilę? Chcesz sprawdzić, jak tam z Twoimi podstawami JavaScriptu? Oto pierwszy wpis z nowej serii “JavaScript: Sprawdź się!” Zapraszam do zabawy!
Na czym polega zabawa? W tym wpisie znajdziesz 3 zadania z podstaw JavaScriptu. Rozwiąż je, a link podaj w komentarzu (najlepiej w formie nowego pena z Codepen). Następnie sprawdź zadania osobie, która podała rozwiązanie komentarz wyżej. Skomentuj wpis tej osoby i napisz, co jest według Ciebie dobrze, a co powinna poprawić. Poćwiczysz nie tylko JS, ale także code review, a to bardzo ważne umiejętności 🙂 Pamiętaj – nie wklejaj rozwiązań bezpośrednio do komentarza pod tym wpisem, daj innym szansę się sprawdzić.
Mam nadzieję, że taka forma sprawdzania wiedzy przypadnie Wam do gustu. Jeśli chcecie, by tego typu wpisy pojawiały się regularnie, dajcie znać!
Zadanie 1
Masz daną tablicę: const numbers = [2, 5, 7, 10, 34, 16, 879, 1]. Napisz funkcję, która wypisze w konsoli nową tablicę zawierającą tylko parzyste liczby z tablicy numbers.
Zadanie 2
Napisz funkcję sayHello przyjmującą jeden argument, który jest obiektem zawierającym dane osoby. Jeśli przekazany obiekt ma własność name, Twoja funkcja powinna wypisać w konsoli “Hello, name!”. Jeśli nie, funkcja ma wypisać tylko “Hello!”. Przykładowy obiekt do wywołania funkcji to const person = { name: "Jill", age: 25, hobby: "sports" }.
Zadanie 3
Napisz prostą maszynę losującą, czyli funkcję, która przyjmuje jako argument tablicę zawierającą listę osób. Twoja funkcja powinna zwracać losową osobę z tej tablicy. Przykładowa tablica do wywołania funkcji: const students = ["John", "Bill", "Emma", "Stella", "Rob"].
A teraz ruszaj do rozwiązywania! Pamiętaj – jak nie wiesz od razu, jak coś zrobić – postaraj się rozłożyć problem na czynniki pierwsze i szukać ich rozwiązań. Zaczynamy!
Super, moje rozwiązanie: https://codepen.io/kpowroznik/pen/MPxqWo
https://jsbin.com/qegomituka/edit?html,js,console
Fajne zadania, prosimy o więcej 🙂
https://codepen.io/Fyeem/pen/YJggod
https://codepen.io/anon/pen/Bqberr
https://codepen.io/marizawi/pen/YJMGKd
Właśnie przerabiam js best practices. Widzę u Ciebie 1 zmianę, którą można wdrożyć, zamiast stosować operator warunkowy (trójargumentowy), można użyć operatora logicznego.
Linia 12: const sayHello = ob => console.log(`Hello ${ob.name || “”}`);
Czy ktoś z doświadczenie może się wypowiedzieć?
Hej Oloo,
w pierwszym zadaniu dobrze byłoby zmienić kod, żeby w konsoli od razu pojawiła się tablica z parzystymi liczbami, a nie Array(4), który trzeba rozwinąć.
Może coś takiego – const numbers = [2, 5, 7, 10, 34, 16, 879, 1];
const arr = numbers => numbers.filter(n => n % 2 === 0);
console.log(arr(numbers));
Rozwiązania drugiego zadania za bardzo nie rozumiem, więc ciężko mi się wypowiedzieć. Ale jak działa to chyba nie jest źle 😉
W trzecim natomiast wydaje mi się, że lepiej byłoby wyciągnąć console.loga z ciała funkcji i zawinąć w niego wywołanie. (Nie jestem pewna, czy to jest lepsza praktyka 😉
@Oloo pierwsze i trzecie mamy bardzo podobnie, drugie trochę się różni, ale szczerze mówiąc nie wiem, które podejście jest lepsze. Moim zdaniem Twoje odpowiedzi są ok 🙂
Moje odpowiedzi:
https://codepen.io/AgataP/pen/QZPdrW?editors=1010
Sam pomysł z zadaniami bardzo mi się podoba, dziękuję i czekam na więcej! 🙂
Pozdrowienia,
Agata
dzięki, co do console.log sądzę, że jak najbardziej trzeba to wyciągnąć.
2 zadanie bazowałem na https://devhints.io/es6#destructuring “Default values”
ogólnie polecam https://www.youtube.com/watch?v=eA2YRceiDwk
https://codepen.io/anon/pen/oaOzLQ
Co wy na to?
Bardzo dobrze! Jedno dodatkowe zadanko – spróbuj w zad. 2 wykorzystać ternary operator zamiast if 🙂
Super rozwiązania! Bardzo fajnie użyte filter, pipe itp 🙂
Oloo, tak, to dobry pomysł, żeby użyć operatora logicznego, ale warto też zwrócić uwagę, że gdy mamy imię, dodatkowo w zdaniu musi pojawić się przecinek, więc o to także trzeba zadbać 🙂
Oloo, zwróć uwagę, że funkcja w zadaniu 2 nie działa dokładnie tak, jak powinna. Gdy w podanym obiekcie nie ma zdefiniowanego imienia, wtedy powinno pokazać się samo “Hello!”, u Ciebie natomiast pojawia się “Hello !”, czyli mamy spację między wyrazem Hello a znakiem zapytania, a tego nie chcemy. Dodatkowo, gdy jest imię, po Hello musimy dodać przecinek. Spróbuj popracować nad warunkiem w tym zadaniu 🙂 Od razu przypisujesz pusty string, gdy nie ma zdefiniowanego imienia i możesz na tym bazować, tylko trzeba trochę jeszcze dodać 🙂
Bardzo dobrze rozwiązane zadania! Tylko w zadaniu 2 spróbuj użyć operatora trójskładnikowego, nie trzeba tam kilku linijek ‘ifa’, ponieważ bazujemy na jednej wartości 🙂
Dobrze rozwiązane zadania 🙂 Mam tylko dwie sprawy. W zadaniu 1, gdy używasz filter nie musisz zwracać pustego stringa, gdy liczba nie pasuje do warunku. To właśnie robi filter – gdy warunek pasuje, on dodaje ten element tablicy do nowej tablicy, nie musisz mu wskazywać, co ma robić, gdy nie pasuje.
W zadaniu 2 z kolei sprawdzasz, czy obiekt ma własność ‘name’. Powinnaś oprzeć się na tym, czy to imię jest zdefiniowane, bo teraz, gdy przekażesz obiekt, który ma imię, ale jako pusty string, to wypisze Ci w konsoli “Hello ” dodając spację na końcu. My natomiast chcemy, by tam nie było żadnego dodatkowego znaku. Spróbuj popracować nad tym warunkiem 🙂 I jak pisałam wyżej, spróbuj użyć ternary operator zamiast ifa i zobacz, jak działa 🙂
Michał, coś jest nie tak, bo nie ma żadnego kodu JS, więc w konsoli nic się nie pojawia 😉 Sprawdź, czy na pewno wrzuciłeś link do dobrego projektu i odpowiednio go zapisałeś
Oby więcej takich zadań…
https://codepen.io/patryk-rutkowski/pen/dgLgwp
poprawki: https://codepen.io/anon/pen/Bqberr
dzięki za dobrą zabawę 🙂
Dziękuję, Joanna! Poprawiłam zadanie drugie, zawsze zapominam o operatorze trójskładnikowym, a jest taki pomocny i oszczędny 😉
Dziękuję za uwagi 🙂 Już poprawiłam.
I ja spróbowałem chociaż dopiero zaczynam przygodę z JS
https://jsbin.com/tiqusavelu/edit?html,js,console
I czekam na nowe wyzwania ! 🙂 Super robota !
https://codepen.io/konrad-chmielecki/pen/eQOLOa
Szkoda że nie mam czasu na jakiś swój projekt w JS
Po poprawkach super 🙂
Tak, tak, ternary operator jest naprawdę wygodny! Po poprawkach wszystko super 🙂
Wszystko dobrze teraz! 🙂
Dobrze zrobione zadania! Ale mam dla Ciebie dwa dodatkowe – w zadaniu 2 spróbuj użyć operatora trójskładnikowego zamiast ‘ifa’. Możesz też poszukać jak wyglądają funkcje strzałkowe (arrow functions) i spróbować ich użyć, żeby poznać coś nowego, jeśli nie miałeś z nimi do czynienia
Dobra robota! Mam dwie uwagi – w pierwszy zadaniu to funkcja ma zwracać już przefiltrowaną tablicę, a u Ciebie to Ty wywołujesz metodę ‘filter’ dopiero w console.log. Spróbuj zmodyfikować funkcję tak, aby samo jej wywołanie i podanie jej tablicy, wypisywało parzyste liczby z tablicy w formie nowej tablicy. I dodatkowo – widzę, że w zadaniu 3 używasz ‘var’ aby zdefiniować zmienną. Poczytaj o tym, jak definiuje się zmienne przy pomocy let i const. I również warto poczytać o działaniu arrow functions (funkcji strzałkowych) i spróbować ich użyć, to zagadnienia z ES6. To, co jest teraz w Twoich rozwiązaniach jest dobrze, ale poddaję takie pomysły na ulepszenie i poznanie czegoś nowego 🙂
Dobrze zrobione zadania! Tak, żeby coś ulepszyć – spróbuj poczytać o metodzie filter dla tablic i użyć jej w zadaniu 1 zamiast korzystania z pętli. W zadaniu 2 z kolei skorzystaj z ternary operator zamiast ‘ifa’. Zobacz, jak działa 🙂
Dokonałem zmian.
Hej, wrzucam moje rozwiazania i zaraz zamierzam spojrzec jak zrobili to inni 🙂
Hej,
Widzę nieco się spóźniłem z rozwiązaniami względem innych komentujących, ale finalnie podsyłam też swoje!
https://jsbin.com/nevudijiga/edit?js,console
Pozdrawiam!
Maria, nie widzę Twoich rozwiązań, chyba zapomniałaś dodać link do komentarza 🙂
Dobrze rozwiązane zadania! 🙂 Mam jedynie dwie uwagi co do zad 2 – po pierwsze, zadbaj o formatowanie kodu. DObrze pamiętać, że ‘return’ powinien być od nowej linijki i sprawdź, jak dobrze sformatować warunek. Po drugie – sprawdzasz, czy obiekt ma własność ‘name’, a jeśli ta własność będzie pusta, tzn. podam ‘name’ jako pusty string – Twój kod wypisze “Hello, !”, a nie tego oczekujemy. Spróbuj tak zmodyfikować warunek, żeby sprawdzał, czy w imieniu zostało coś podane 🙂
Ostatnio z chłopakami z pracy rozmawialiśmy, że kolejnemu kandydatowi na front-end damy zadanie z CSS + HTML – jednoelementowy responsywny kwadrat bez użycia JS. ??
https://codepen.io/anon/pen/VVVKzG?editors=0011
Asia, podaj proszę jak to rozwiązywać (jakieś podpowiedzi) bo mam ogromne trudności żeby sam to zrobić. Z góry dziękuję.
A z czym dokładnie masz problem? Podaj link do kodu, żebym mogła zobaczyć co masz do tej pory i gdzie utknąłeś 🙂
Witam!
Super blog, sam jestem na początku drogi do przebranżowienia się, więc wszystko chłonę jak mogę.
Nie wiem czy ktoś tu jeszcze zagląda, ale wrzucę też swoje odpowiedzi. Dopiero się uczę i po przerobieniu podstaw JS chciałem zrobić coś swojego, ale okazało się, że jednak nic nie umiem :D. Próbowałem zabrać się też za zadania z JS z w3resource, ale to też za wysokie progi. Szkoda, że nie ma zbioru zadań z JS, żeby sobie ćwiczyć kod w praktyce i trzeba trochę czasu spędzić, żeby te zadania znaleźć na internecie. Fajnie że u Ciebie są, na pewno będę zaglądał :). No ale koniec narzekania, wrzucam swój kod i dodatkowo jeszcze zrobiłem responsywny kwadrat o którym ktoś wspominał wyżej. Tylko podkreślam, że jestem początkujący, więc nie wiem czy na pewno to jest dobrze (w konsoli niby działa wszystko).
https://codepen.io/anon/pen/zQGzrK?editors=1111
Dziękuję za miłe słowa na temat bloga 🙂 Zadania wykonane bardzo dobrze, nie mam się do czego przyczepić! Wskakuj do drugiej części wpisu, jak chcesz poćwiczyć więcej, tam są zadania troszkę trudniejsze
Moje rozwiązania, super sprawa proszę o więcej 😀
https://codepen.io/mcmichal2/pen/vwKNjx
Podrzucam swoje rozwiązania:
https://codepen.io/guzik912/pen/wbXZzM
Powiem tak, bardzo pozytywny blog. Fajna dawka motywacji, wskazówek i wiedzy! Czekam na więcej! 😉
https://codepen.io/jeraldstarr/pen/KLOzPX
https://codepen.io/jeraldstarr/pen/WBVwoZ
https://codepen.io/jeraldstarr/pen/LowNLP
Dobrze zrobione zadania (ale brakuje pierwszego, spróbuj też je rozwiązać :)). I małe uwagi – plus za dodanie przycisków, które wywołują funkcję, ale trochę jest to mylące, że przyciski masz na stronie, a wyniki funkcji w konsoli. Możesz dodać jakieś pola pod przyciskami, które będą pokazywać wyniki 🙂
W zadaniu z “Hello” warto sprawdzić nie tylko, czy ‘name’ istnieje, ale czy nie jest puste. Spróbuj to dodać do swojego warunku.
Dziękuję za miłe słowa! Zadania bardzo dobrze 🙂 Możesz teraz spróbować zamienić funkcje, które masz na arrow functions i zobaczyć, jak one się zachowują. To tak w ramach eksperymentu 🙂
Wszystkie zadania bardzo dobrze 🙂 Jedynie w tym, gdzie sprawdzamy imię, warto sprawdzić nie tylko, czy ‘name’ istnieje, ale też, czy nie jest puste
Witam.
Dopiero zaczynam z JS, więc jestem bardzo ciekaw, jak wypadną moje rozwiązania w oczach fachowca? 🙂
https://codepen.io/gre99us/pen/PrvdMd?editors=1112
Dzięki za czas i pracę, którą wkładasz w edukowanie innych.
Pozdrawiam,
G.W.
Zadanie 1:
const numbers = [2, 5, 7, 10, 34, 16, 879, 1];
for (i=0;i<numbers.length;i++){
if(numbers[i]%2==0){
console.log(numbers[i])
}
};
Zadanie 2:
function sayHello(osoba){
if(osoba.hasOwnProperty("name")){
console.log('Hello: ' + osoba.name)
} else {
console.log('Hello!');
}
}
const person = { name: "Jill", age: 25, hobby: "sports" }
const noName = { age: 45}
sayHello(noName);
Zadanie 3:
const students = ["John", "Bill", "Emma", "Stella", "Rob"];
function lotto(losuj){
let kto_wypada = Math.ceil(losuj.length * Math.random()) – 1;
console.log(losuj[kto_wypada]);
}
lotto(students);
Wrzuć proszę rozwiązanie na codepen i podeślij link, będzie łatwiej sprawdzić kod 🙂
Zadanie nr 2 można również w ten sposób , podobnie jak kolega Wojtek :
function sayHello (osoba) {
if ((“name”) in osoba) {
console.log (“Hello”+ ” ” + osoba.name)
} else {
console.log (“Hello!”);
}
}
const person = {name: “Jill”, age: 25,hobby: “sports”}
sayHello(person);
https://codepen.io/DJ-JANAS/pen/eYYJrqO
Wiecej prosze takych zadan
Wrzuć proszę zadania na codepen, będzie wygodniej sprawdzić 🙂
Moje rozwiązania:
https://codepen.io/d-kacprzak/pen/ExxgrEq?editors=1111
zad 1
const numbers = [2, 5, 7, 10, 34, 16, 879, 1];
const numbersDivideBy2 = numbers.filter(cur => cur % 2 === 0);
Hej! Lepiej wrzuć rozwiązania w formie linku do codepen, bo teraz ktoś może spojrzeć na rozwiązanie i się zasugerować, zamiast samodzielnie wymyślić 🙂
oki, bede na przyszość pamiętał. Programuję dopiero od tygodnia 😉
Nie ma sprawy! Kod, który napisałeś wyżej jest ok, spróbuj rozwiązać resztę zadań i podrzuć link. Powodzenia 🙂
Zadanie 1
https://codepen.io/oleinka/pen/xxGRJbB
Zadanie 2
https://codepen.io/oleinka/pen/qBdqyKd?editors=0012
Zadanie 3
https://codepen.io/oleinka/pen/VwLmGyy?editors=0012
Dzień dobry,
Ja rozwiązałem zadania w ten sposób
https://codepen.io/NicramZ/pen/ZEGvLOP
Witam.
Udało się rozwiązać. Nauka JS-a oficjalnie rozpoczęta 🙂
https://codepen.io/marc360/pen/ZEbGemB