Kurs JavaScript od zera
HTML-код
- Опубликовано: 2 авг 2024
- ⭐ zrozumiecreact.pl/ - Sprawdź nasz kurs React! ⭐
👉 Newsletter: zaczynamyprogramowac.pl 👈
🎤 Discord: / discord 🎤
🔥 Grupa na Fejsie: / zaczynamy.programowac 🔥
Fanpage: / jakzaczacprogramowac
Subskrybuj!: / @jzp
BAZA DO KARUZELKI - github.com/Jak-zaczac-program...
Zadania - github.com/Jak-zaczac-program...
Nasz kurs HTML bardzo wam się spodobał. Tym razem mamy dla Ciebie kurs JavaScript!
Spis treści
0:00 - Intro
2:18 - Wymagane oprogramowania
4:19 - Pierwszy JavaScript
8:21 - Zmienne
12:32 - Obiekty
17:07 - Zmienne i obiekty w praktyce
27:31 - Funkcje
34:03 - Funkcje w praktyce
41:54 - Funkcje - wielokrotne wykorzystanie raz napisanego kodu
49:25 - Operatory i instrukcje warunkowe
54:56 - Operatory i instrukcje warunkowe w praktyce
01:01:10 - Pętla FOR
01:05:52 - Pętla FOR w praktyce
Filip Mamcarczyk
Kacper Sokołowski
Podziękowania dla WKTR i themixhelp za feedback przed premiera filmu.
![[BLACKSWAN] ‘Roll Up’ Official Music Video](http://i.ytimg.com/vi/ulvCwyKrwqw/mqdefault.jpg)
Jeden z najlepszych kursów dotyczących nie tylko JavaScript, ale ogólnie pojętych podstaw programowania. Bardzo Wam dziękuję, że stworzyliście coś tak dobrego i udostępniliście to bezpłatnie dla ludzi, którzy chcą poznać bardzo solidne podstawy programowania.
Dzięki wielkie, robicie super robotę!
Genialnie wytłumaczone na bazie żywych przykładów a nie klepanie teorii przez 40h i potem praktyka gdzie się zapomni w tym czasie 70% rzeczy.
Bardzo ci dziękuje za ten odcinek. Mam nadzieje ze będzie więcej 😱❤️
bardzo rzeczowo i zwięźle, super
Wszystko zrozumiałe. Świetny kurs.
Mega odcinek ! W końcu dokładnie rozumiem podstawy
Explained in great detail! Thank you so much!!
Świetne dla początkujących, Pozdrawiam :)
Bardzo dobry odcinek do przypomnienia sobie troche js. Niestety z js pożegnałem sie pół roku temu ale dzięki filmikowi przypomnilem sobie wszystko w godzinkę 😉
Dziękuję za ten filmik, dawno nie programowałem w js, a chciałem jakoś szybko przypomnieć sobie wiadomości z niego. Ten filmik wyjaśnił wszystko i mi przypomniał jak się w nim programowało. Dziękuję za to i mam nadzieje, że dalej będziecie tworzyć takie kursy ❤
Właśnie robiłem kurs 2h temu a tu taka niespodzianka
Jak mi się podoba gdy mówicie ,,dla przyszłych developerów i DEVELOPEREK
Akurat skończyłem webinarium o JS i z chęcią spróbuje ponownie :3 Trafione w sedno
Eh, ten plot twist na koncu :D super tutorial, mam nadzieje ze taka optymalizacja, upraszczanie kodu za pomoca funkcji, z czasem bedzie dla mnie bardziej intuicyjne :) Pozdrawiam!
będzie oglądane
przydatne wiadomosci
Fajny kurs, bardzo praktyczny! 50:57 warto wspomnieć, że możemy też użyć 2 znaki równości (==) jeśli porównujemy tylko wartości, niezależnie od typów zmiennych
Super odcinek, dzięki! Taka propozycja - aby na koniec takiego kursu zrobić krótkie podsumowanie całego kodu z wytłumaczeniem co za co odpowiada, pomoże to utrwalić widzę i zrozumieć wszystko. :)
Świetny kurs, naprawdę przemyślany, a nie spontaniczne pokazywanie - choć za każdą wiedzę jestem wdzieczny, więc za tą tym bardziej. Dziękuję :)
Kłaniamy się nisko ;)
Dzięki
Kurs jest wspaniały! Każdy aspekt dobrze wytłumaczony i poparty przykładami
Dzięki! Kłaniamy się nisko!
Jestem bez wykształcenia i 12h spędziłem na zrozumieniu tego tematu ale się da.
Polecam ;)
Kilka potknięć i zjedzonych zębów ale choćby 100 razy to próbowałem naprawić każdy błąd i kurs skończony. Dzięki :)
Cool You really help me Well done!
Swietny kurs, mega rozlozony na czynniki pierwsze jak dla mnie nawet za prosto :)) ale najlepszy jaki mialam okazje korzystac w Polsce, Korzystam z platnego kursu REACT i polecam kazdemu kto chce porzadnie nauczyc sie programowac
Dzięki za miłe słowo
No to pokotowaliśmy,
Bet your soft is absolutely amazing! Never give up
Akurat oglądałem twój filmik o szklanym designie :D
Super! Mam nadzieję, że ten też Ci się spodoba :)
Kurs jest w ok, przejrzyście wszystko tłumaczysz. Mam jedno małe zastrzeżenie przy wywoływaniu funkcji przekazujemy argumenty a nie parametry. Parametry są tylko przy jej definiowaniu. W przykładowym kodzie isBiggerThan10(20) i isBiggerThan10(5), liczby 20 i 5 to argumenty funkcji. Podobnie z circleLength(i), i to też argument.
Przesyłanie argumentów do parametrów funkcji wytłumaczone mistrzowsko! Ile ja się namęczyłem aby pojąć ta prostą w zasadzie rzecz przy nauce Javy :) - jestem pod wrażeniem Waszego kanału!
Narracja (ścieżka dzwiękowa) jest w filmie niesamowicie szybka i przyznaje że to jedyna niedoskonałość. Reszta na 5-tkę.
Hej! Zrobiłeś razem ze mną mój pierwszy slider w js na mojej stronie :D
Idąc o krok dalej, próbuję zrobić aby kropka w aktywnym slajderze była zaznaczona kolorem, przyjmę podpowiedzi zanim sama zrobię:D
Najlepszy kurs jaki widziałem
🥰
Kacper trochę goni z tłumaczeniem, bardzo szybko podaje dużo ważnych informacji. Robiąc kurs u Filipa, mimo że był na prędkości 1.25, to łatwiej było mi przyswajać wiedzę. Ale to nie zmienia faktu, że od listopada atakuję programowanie na poważnie i tworząc oba kursy wychodzicie mocno naprzeciw moim potrzebom. Serduszko dla was, dobrzy ludzie
Następnym razem będę mówić wolniej! Dzięki za feedback. W moim przypadku będziesz musiał użyć spowolnienia 🙈
Również się zgodzę. Generalnie fajnie wytłumaczone, jednak momentami troszkę za szybko przez co można było się pogubić. Poza tym super kursik i czekam na następne! :D
Myślę, że tempo mówienia nie jest żadnym problemem - przecież można sobie zastopować film 😋
Sztoss. Fajna powtórka, dla zabieganych! Co powiecie na podobny film z PHP?
Niestety na PHP się raczej słabo znamy 🙈 Ale JSa będzie więcej!
Szacunek za szczerość i za materiał;)
It was cool.
Bro it’s very intimidating! I’ve been slacking on it for a month now. The symbols are very confusing. You have to train your mind to
TNice tutorials man is so good at explanation ...since I have been watcNice tutorialng soft soft tutorials , tNice tutorials is my first ti to really understand it . I love soft
yayy
do uruchomenia devtoolsa na windowsie używa się F12
Nie wiem czy to coś ze mną nie tak ale na prędkości 0,75 było mi za szybko.. dalej jest, ale kończę kurs mimo to!
31:35 W drugiej funkcji nie brakuje średnika po nawiasie klamrowym?
Czy wyskakuje Wam Error na linijce 22 jak po przeładowaniu strony klikniecie nie w kropkę a w strzałkę (obojętnie lewa czy prawa)?
U mnie pokazuje "Uncaught TypeError: Cannot read properties of null (reading 'classList')".
Jak zacznę klikanie od kropek to ten Error potem nie pokazuje się.
Super!!! moze caly kurs na Udemy? kupiłbym :D
Dzięki za dobre słowo. Planujemy tego typu kursy w bliżej nieokreślonej przyszłości, ale jeszcze nie teraz.
troche sie zgubiłem a nie mogę znaleźć dokładnie tego momentu w filmie, chodzi mi o funkcje dodawania i usuwania klasy active, a mianowicie, dlaczego przy niektórych "active" dajemy kropke a przy innych nie? wiem ze musze to robić ale chciałbym rozumieć dlaczego i dlaczego akurat tutaj a nie np w następnej linijce
Bardzo ciekawy kurs. Mam jedynie jedno pytanie. Co jeżeli w html będzie więcej niż 3 zdjęcia?
Domyślam się trochę jak, ale czy dobrze myślę to nie wiem. podejrzewam, że te "3" należy zmienić na to co sprawdza ile jest tych zdjęć i dodać do pętli ile razy ma się wywołać i zmienić też w kropkach i strzałkach. Ale jak należałoby sprawdzić to nie wiem, ale myślę, że tu może chodzić o to, że można dodać klasę do tych zdjęć i użyć w JS querySelectorAll(.nazwaKlasy). Ale czy tak jest, to nie wiem. Od niedawna się uczę JS i proszę o wyrozumiałość. I jeżeli ktoś by mógł napisać jak to zrobić to byłbym wdzięczny.
The reason for my asking, is due to crackling/distorting soft, whenever the drum/snare, or whatever is playing. TNice tutorials was the case off
mam pytanie jak wypakować ten zip z kodem html do visiual studio bo jak go otwieram to się uruchamia ta strona
20:35 jak zaczął krzyczeć XDD
23:55 zatrzymałem się tutaj i mam problem bo nie wiem jak zrobić tak żeby w jednym divie były dodane 3 zdjęcia a wyświetlało tylko jedno jak na filmie. Z góry dziękuje za pomoc!
Głupie pytanie: przy tworzeniu zmiennych i obiektów (kropki) w konsoli devtools nie zawsze otwiera mi się "podgląd" elementów na stronie (najeżdżamy kursorem na listę i wtedy podświetla gdzie dany element jest na stronie). Zazwyczaj pokazuje się lista tych elementów (ze strzałkami umożliwiającymi rozwinięcie ich właściwości). Za którymś odświeżeniem przeglądarki dopiero ładuje się ten "podgląd".
Failed to load resource: net::ERR_FILE_NOT_FOUND .Co jesli taki napis mi się wyświetla w konsoli w przegladarce ?
miałem problem w 41minucie mianowicie gdy zmieniałem klikając kropkę pokazywało mi w konsoli cannot read properties of null(reading 'classlist') po 40 minutach szukania buga okazało sie ze miałem spacje na końcu cudzysłowie w drugim id slidera i przez taką błahostkę nie działało
ale jak na razie filmik super ;)
no me acepta los datos para la licencia
1:07:00 - czy kliknięcie powoduje jednorazowe wywołanie pętli? addEventListener sprawia że pętla nie wykonuje się od razu trzy razy?
Pętla zostaje uruchomiona tylko na samym początku (po każdym odświeżeniu strony). Funkcja addEventListener dodaje "nasłuchiwanie" do kropek, przez co od tej pory każde naciśnięcie danej kropki wywołuje funkcję przekazaną jako argument (czyli showSlideI). Naciskanie kropek nie wywołuje ani pętli, ani addEventListener, tylko showSlideI.
Strasznie mi zamieszało w 24:11 min, dlaczego nagle te nasze console.logi są niepotrzebne. Poczułem, że tak trochę bez wyjaśnienia nagle coś co mieliśmy klepać w kodzie jest do wyrzucenia :/ Być może wcześniej coś było mówione ale nie załapałem
Możecie wytłumaczyć po krótce dlaczego w niektórych funkcjach na końcu zamykacie "};" a w niektórych nie? Dla przykładu "let showNextSlide" na końcu ma "};". W przypadku "showPreviousSlide" oraz pętli "for" jest samo "}" (bez średnika). Kod działa poprawie ze średnikiem i bez, ale nie daje mi to spokoju. Domyślam się, że zawsze musi być zamknięta funkcja średnikiem, a ich brak to przeoczenie? Dzięki za poradnik
Dobre oko ;) prawie masz rację. Poczytaj sobie o blokach w JS oraz o „semicolon insertion”
too
Pod koniec rozdziału "Funkcje - wielokrotne wykorzystanie raz napisanego kodu" zauważyłem że funkcje showSlide1,showSlide2,showSlide3 wykonują jedną funkcje showSlide z przekazaniem parametru, postanowiłem zrefaktoryzować kod i usunąć funkcje showSlide1,showSlide2,showSlide3 i bezpośrednio użyć funkcji showSlide w sposób:
dot1.addEventListener("click", showSlide(1));
dot2.addEventListener("click", showSlide(2));
dot3.addEventListener("click", showSlide(3));
lecz takie rozwiązanie nie przynosi żadnego efektu. Nie wiem do końca dlaczego tak się dzieje, czy addEventListener nie może przyjąć funkcji z parametrem jeżeli tak to jak można to sprawdzić w innych podobnych przypadkach. Z góry dziękuje za odpowiedź, świetny materiał :)
Do funkcji addEventListener należy przekazać funkcję. Zauważ, że to co ty przekazujesz to wynik wykonania funkcji showSlide(X) a nie funkcja ;)
Muszę przyznać że na potrzeby te potrzeby pobrałem chroma zazwyczaj kożystam z opery ze względu na możliwość blokowania reklam jak i zwykłego przyzwyczajenia
Opera ma bardzo podobne narzędzia do programowania, więc możesz spróbować zrobić kurs na Operze ;)
cześć,
chciałbym stworzyć stronę z filmami podobną do yt według Ciebie jakie biblioteki do js powinienem umieć?
Jeśli chcesz odwzorować tylko front-end, tak na prawdę to nie musisz znać ani jednej. Czysty JS w zupełności Ci wystarczy.
Jeśli chcesz stworzyć "kolna YT" to poza front-endem będziesz musiał też opanować back-end aby ogarnąć upload wideo, autoryzację itd. To może być dość wymagające - ale dla chcącego nic trudnego.
@@JZP a do backendu co byś polecił?
@Angry 1 Na samym początku nie ma to większego znaczenia. Ważne jest, żeby wybrać sobie jedno narzędzie / język programowania (byle były w miarę popularne i było dużo materiałów do nauki) i po prostu programować. Rozwiązywać kolejne problemy i ćwiczyć. Nie ma tutaj dobrego albo złego wyboru.
@@JZP ale nodejs chyba jest wymagany?
@@IRQ333 node.js to jedna z opcji. Back-end można też robić (i często się robi) w innych językach - Javie, Pythonie, Ruby, C# itd
Tylko mi po kliknięciu kropki 3 wyskakuje zdjęcie numer 2, a następnie klikam kropkę 2 i wyskakuje zdjęcie 3? :) mimo, że doszedłem do końca kursu i mam co do przecinka taki sam kod :D ?
Mam to samo przy zmianie na for.
41:53
nie potrafię otworzyć bazę do karuzelki
Hej! Ciekawy jestem czy według Ciebie ma znaczenie taki zapis:
let showPreviousSlide = () => {
activSlideNumber = activSlideNumber - 1;
if (activSlideNumber === 0) {
activSlideNumber = 3;
};
showSlide(activSlideNumber);
};
Wydaje mi się, że w ten sposób jest mniej do kompilowania? A może w Twoim zapisie chodzi o coś czego ja nie dostrzegam. Na mój gust to, to samo. Ale będę wdzięczny jeśli się odniesiesz do takiego zapisu. Pozdrawiam
Jest to ten sam kod. Oba rozwiązania są OK, różnią się tylko zapisem. Żaden z nich nie jest w lepszy od drugiego.
@@JZP Bardzo dziękuję!
Kurcze po sprawdzeniu czy dobrze podpiety skrypt oraz laczeniu sie pliku js z html sam kod w sobie generuje mi blad na przegladarce. Nie za bardzo czaje co tu zrobic teraz...
A jak jest komunikat błędu?
@@JZP Failed to load resource: the server responded with a status of 404 (Not Found)
@@JZP Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at add.js:38:37
@@JZP jest to w zasadzie przepisany kod z Waszego kursu...wiem że tak sie nie powinno robić i staram sie we wlkasnym zakresie cos stworzyc ale mam problem ogolnie ze slajderami nawet chcac je dodac z innej stronki no ale Wasz generuje mi takie błędy właśnie. Pozdrawiam
Jaki powód stylowania w css po id'kach? Wszędzie podkreślają, aby tego nie robić.
Jeśli jakiś element na stronie jest unikalny, to można używać ID - w CSS i w JS.
27:15
Po pierwsze, mówi się "cudzysłowami", nie "cudzysłowiami".
Po drugie, to nie są cudzysłowy, tylko apostrofy.
ale jakoś zrozumiałeś treść
Fajnie by było coś więcej JS bądź takie zagadnienia, których w polskim yt jest mało.
Np:
- NPM ( nmp.scripts i webpacki)
- API (Fetch, AJAX) itp.
- Jakieś projekty w JS (inne niż snake, zapamiętywanie czy pinpong)
W przyszłość mogłyby się pojawić materiały o frameworkach oraz typescripcie.
Chętnie bym obejrzał od was takie kompendium wiedzy.
Taka seria Roudtour to FronetEndDev
Pozdrawiam :D
P.S. bardzo fajny odcinek !
Dzięki! Taki jest plan, będziemy się starali wprowadzać coraz więcej zaawansowanego JS :) Pracujemy też powoli na długim odcinkiem z kursem Angulara :) Pozdro!
bedzie wiecej o js ???
Trochę o JS już mamy na kanale zachęcam Cię do przejrzenia. Jest coś z JS co Cię szczególnie interesuje o czym moglibyśmy zrobić odcinek?
@@JZP Szczerze to jestem początkującym, ale szybko się uczę np. jak mowiliscie ze teraz zrobimy to, to pauzowałem odcinek , sam to robilem i potem sprawdzałem czy jest dobrze(i o dziwo było). Mocno sie wciągnąłem we front-end wiec chciałbym wiedziec jak najwiecej (przynajmniej do pierwszej pracy). Fajnie jakbyście kontynuowali JS mam na mysli jakiś framework typu React czy Vue
@@_SadekTV Czy po prawie roku "11 miesięcy" nauki programowania masz już jakąś pracę w tej branży?
@@DIES3L.10 siemka. Tak pracuje od niecalego miesiaca jako front :)
Nice! W takim razie mam do ciebie kilka pytań...
1. Ile godzin dziennie poświęcałeś na naukę programowania, zanim cię zatrudnili?
2. Czy uczyłeś się z YT + internet comunity za free lub może kupiłeś jakiś kurs?
3. Jak już szukałeś pierwszej pracy w branży, to było to na zasadzie ""coś tam umiem, ogłoszę się tanio w internecie, może jakiś arab mnie zatrudni""
czy może wysyłałeś CV do różnych firm, więc do ciebie się odezwali, a ty przeszedłeś ich proces rekrutacyjny.
4. Umiesz jeszcze jakieś inne języki programowania poza html/css, javaScript lub jakieś frameworki?
Ogólnie dzisiaj jest to mój drugi dzień nauki w javascript. W poprzednim miesiącu ogarnąłem HTML/css, ale jeszcze muszę doszlifować flexboxa.
Trzymaj kciuki żebym w tym wytrwał.................... bo czasami dopada frustracja, ale na szczęście przechodzi jak postawie kropkę w odpowiednim miejscu XD
sa
Stary ja nawet nie wiem jak to gowno wypakować chyba nie zostanie programistą xD
Trzy zdjęcia, trzy kropki i dwie strzałki a tyle pisania kodu. Beznadziejny jest ten JavaScript. Nie podoba mi się. Wkurza mnie. Komplikowanie prostych kwestii. Strata czasu.
Polecisz jakąś alternatywę?
Everything is cool! Thanks!
niefajen
Gościu! Już szybciej się mówić nie da? Mówisz do ludzi początkujących. Zwolnij trochę.
Ja oglądałem na prędkości 0.8x - 0.9x i dużo więcej wówczas zrozumiałem, także polecam trochę zwolnić wideo 🙂
Chociaz nie zamula. Jak czytam twoj komentarz to az ziewam. Za wolny masz mozg widocznie.
@@ValoraTide po Twoim komentarzu widzę, że w przeciwieństwie do Ciebie mam mózg.
W mózg to Ty dostałeś kamieniem od Dawida. :)
@@ValoraTide Hahahahahahahahahahahhahahahaahahahahahahhahahahahahahahhahahahahahahaahhaahhahahahahahahahahahahahahahahahahahahhahahahahahahahahahhahahaha
To jest dla zaawansowanych. Nic mi to nie mówi!!!
Zanim podałeś rozwiązanie przełączania sliderów strzałkami to spróbowałem po swojemu i działa:
const showPreviousSlide = () => {
if (img1.classList.contains('active')) {
showSlide(3)
} else if (img3.classList.contains('active')) {
showSlide(2)
} else {
showSlide(1)
}
}
const showNextSlide = () => {
if (img1.classList.contains('active')) {
showSlide(2)
} else if (img2.classList.contains('active')) {
showSlide(3)
} else {
showSlide(1)
}
}
Super! Fajnie ze próbujesz sam rozwiązać problem ☺️
@@JZP a tak w ogóle to dlaczego w dziale zmiennych mówicie tylko o lecie a o const nic?
34:28