Kurs JavaScript odc. 3: Gra w wisielca. Przetwarzanie łańcuchów
HTML-код
- Опубликовано: 9 фев 2025
- Jeżeli masz ochotę zobaczyć więcej naszych filmów, podcastów i artykułów w coraz lepszej jakości, to zachęcamy do pozostawienia subskrypcji, a także do odwiedzenia prowadzonych przez nas witryn oraz do polubienia fanpage'u Pasji informatyki na Facebooku.
🔔 Subskrybuj - bit.ly/pasja-sub
Jeśli masz ochotę wesprzeć to co robimy, to możesz:
🖐 Zostać Patronem - patronite.pl/p...
☕️ Ufundować nam wirtualną kawę - buycoffee.to/p...
👉 Fanpage na Facebooku - bit.ly/pasja-fb
👉 Profil Patronite - patronite.pl/p...
👉 Lista Patronów - pasja-informaty...
👉 Donacje na blogu - miroslawzelent....
👉 Harmonogram publikacji - bit.ly/pasja-ha...
👉 Kontakt z nami - pasja-informaty...
👉 Współpraca reklamowa - bit.ly/pasja-ws...
👉 Kursy video dla technikum - pasja-informaty...
👉 Blog informatyczny - miroslawzelent.pl
👉 Trenażer egzaminacyjny - egzamin-informa...
👉 Egzamin-E13.pl - egzamin-e13.pl
👉 Forum dyskusyjne - forum.pasja-in...
👉 Witryna podcastowa - podcast.pasja-i...
👉 Twitter MZ - / miroslawzelent
👉 Twitter DS - / stelmach_damian
Trzeci odcinek kursu pozwoli nam zrozumieć jak w JavaScript przetwarzane są napisy, czyli tzw. łańcuchy (stringi). Oczywiście moglibyśmy przetestować zachowanie się łańcuchów na jakichś przykładowych sentencjach, ale to by było nudne. Zamiast zajmować się na sucho takimi klasykami, wypłyńmy na nieco głębszą wodę i zróbmy sobie dzisiaj grę komputerową, która będzie operować na łańcuchach. Znamy ją myślę wszyscy - nazywa się wisielec (albo szubienica).
💾 POBIERZ PLIKI Z ODCINKA:
miroslawzelent....
📑 CODE REVIEW NA FORUM:
bit.ly/code-rev...
🎵 MUZYKA:
Muzyka w intro:
Runaways - RUclips Audio Library: • Runaways | RUclips Aud...
Muzyka z podsumowania:
Crimson Fly - Huma-Huma: • Video
#pasjainformatyki #programowanie #kursjavascript
jechanie po Internet Explorerze to coś pięknego, oprócz nauki można jeszcze się pośmiać w pewnym momencie:))
Najlepszy polski kanał z kursami na RUclips!
Dziękuje, że jesteś i tworzysz filmy ;)
Wow. Szacun dla Pana, że chce się panu tak tłumaczyć każdą linijkę :D wiele osób by psychicznie nie wytrzymało tego, a pan daje rade i dzięki temu można się za darmo i w prosty sposób nauczyć JS i wielu innych programów. Nawet ja, który z html czy js miałem do czynienia tylko w gimnazjum na lekcjach informatyki, teraz mogę się czegoś na poważnie nauczyć :D
To już mój kilkunasty odcinek Mirosława- Pasji Informatyki i zauważam prawidłowość w tym, iż najlepiej w celu wykorzystania owej wiedzy w praktyce wpaść na własny pomysł w którym moglibyśmy wykorzystać zdobytą wiedzę niż bacznie powtarzać krok za krokiem to co robi Mirosław- jeżeli jednak już nie wpadniemy na ten pomysł z doświadczenia radzę spróbować zrobić omawiany problem następnego dnia ( to jest nie tyle że dobre sprawdzenie nabytych umiejętności co myślenia samodzielnego). Pozdrawiam i dziękuję za kolejną dawkę przydatnej wiedzy!
Polecam dodać do css'a linijki (np. pod element body):
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Zapobiegają one możliwości zaznaczania tekstu, co bardzo denerwuje przy wciskaniu kilkakrotnie jednego przycisku. Estetyczniej wtedy to wygląda 😃
Dzięki! fajny pomysł
Genialne :D właśnie irytowało mnie to od samego początku pojawienia się literek alfabetu :D
fajnie! :D
@@Mikoaj-wo6uv Jasne, że tak, później się sięga po bardziej zaawansowane narzędzia, które ułatwiają życie ;) Te lekcje to tylko wstęp do programowania webowego :P
Trzeba mieć łeb jak sklep żeby zapamiętać te wszystkie języki, szacun Mirek!
+Krzysowsky Gdy sie nauczysz jednego jezyka , to z nastepnymi jest latwiej
Wystarczy opanować tylko C++
@@urbix0166 obiektówka c++ na perfect i sobie poradzisz z każdym językiem, to tylko kwestia przerzucenia sie na inne biblioteki
najważniejsze to złapać zajawkę
Szkoda że nie mam takiego nauczyciela w szkole :/ Dobra robota !
Pan jest najlepszy w tym co robi czyli w genialnym wytłumaczeniu krok po kroku i co z czymś się je. Osoba która dopiero uczy się takiej formy programowania od zero może zostać geniuszem w programowaniu. Pozdrawiam i dziękuje za tak święte przekazanie wiedzy, będę szlifował javascript :D. Udało mi się zrobić szubienice i na spokojnie będę analizował linie kodu, aby zrozumieć dokładnie co z czym się gryzie.
Budzę się w dzień po moim przyjęciu 18-stkowym i widzę nowy odcinek. Miło dostać prezent od samego Pana Mirosława :)
'Paczacz' 🤣 debest 👍
A tak poza tym to ma Pan niesamowity DAR nauczania, Dziękuję i pozdrawiam.
Mirek dziękuję za bardzo cenną wiedzę, jesteś jednym z lepszych nauczycieli jakichkolwiek widziałem, naprawde duży szacun!
Jeszcze raz dziękuję i życzę dalszych sukcesów na rozwój Twojego kanału na RUclips!!
Pozdrawiam, Daniel
nie każdy zdaje sobie sprawę ile pracy wymaga przygotowanie tutoriala z takim flow i jednocześnie wysoką wartością merytoryczną... szacun :-)
Najlepszy poradnik o JS w internecie! Panie Mirosławie, bardzo dziękuje!
Super kanał, czekam z niecierpliwoscią na kolejne materiały.
Panie Mirosławie, bardzo ciekawy i bogaty w wiedzę odcinek, połączony z bardzo fajnym przykładem praktycznym. Serdecznie dziękuję. Z wielką ciekawością oglądam tworzone przez Pana odcinki poświęcone nauce programowania. W tym była dodatkowa frajda - tworzenie gry :) Pozdrawiam Pana serdecznie :)
+Piotrek K Dzięki za miłe słowa, również pozdrawiam. MZ
kiedyś myślałem że JavaScript to ciąg znaków które nic nie znaczą teraz rozumiem o wiele więcej :0 Dziękuje
Dzięki Tobie, spodobało mi się programowanie!! Dzięki :)
Świetny odcinek na walentynki heheh :D
Standardowo, jakbyś wlewał mi wiedzę do głowy, dziękuję! :D Masz super teaching skill'a! Jesteś najlepszym nauczycielem jakiego miałem! Co ja zrobię jak się kursy skończą... ;)
Świetny film, cieszę się, że w nim skupił się pan bardziej na innej możliwości wykorzystania wiedzy, którą już mamy. Pozdrawiam.
Obecnie uczęszczam na kurs z programowania webowego. Mając porównanie mogę śmiało i nieco z przykrością powiedzieć - z Pana filmików zrozumiałam więcej, niż z któregokolwiek, bardzo kosztownego dnia na moim programistycznym bootcampie. Jest Pan bardzo dobrym nauczycielem!
Dzięki za dobre słowo, powodzenia w nauce programowania webowego 🙂👍 Zawsze warto zajrzeć do przeróżnych źródeł, każde przekazuje nieco odmienną perspektywę. Pozdrawiam, MZ
Świetny materiał, aż głowa mnie boli od ilości wiedzy :)
Zajebistee. Jesteś świetny. Najlepszy nauczyciel jakiego znam :D
Gratki za robotę, którą odwalasz dla nas ;)
Niesamowity kurs na wstęp do programowania w JavaScript! Dzięki 👍⚡
Mirku!
Przede wszystkim serdecznie Ci dziękuję za to, że jesteś i robisz to, co robisz na YT. :)
Dzięki twoim materiałom nawet taki stary dziad jak ja mógł nauczyć się czegoś, co wydawało się do niedawna niemożliwe do zrozumienia. Twoja umiejętność tłumaczenia jest Twoim niezaprzeczalnym charyzmatem.
Wisienką na torcie mistrzowskiego tłumaczenia jest pozostawienie projektu w takiej formie, która jest w pełni funkcjonalna, ale pobudza do dalszej twórczej inwencji. :) Piękne.
Ja dla przykładu podłączyłem Wisielca do Wiki, wyciągając z niej przy pomocy fetch() i jej własnej API bazę blisko 1000 polskich przysłów i czyszcząc ją ze śmieci przy pomocy RegExa. Oczywiście czuję się teraz jak rasowy programer, bo pracowałem nad tym do 4 rano. :D
Teraz przede mną zastąpienie generowanego przez pure JS kodu html przy pomocy potęgi AngularJS, dodanie poziomów trudności itd. ;)
6 lat mija a kurs bardzo fajny. Super się słucha. Merytorycznie. Ciąg szkolenia bardzo dobrze opracowany. Wciąga jak Prison Break a dla pokolenia milenialsów Gra o Tron :D
Polecam tego RUclips-wicza :D
Kolejna doskonala lekcja. Brawo. Oby tak dalej.
Bardzo dobry odcinek. Zacząłem odczuwać potrzebę regularnego wspierania tego kanału jakąś kwotą pieniężną. To się wam należy jak mało komu.
Kawał świetnej i fachowej roboty, no i oczywiście wszystko w jasny i przystępny sposób wytłumaczone:) Pozdrawiam i czekam na kolejne publikacje na YT.
Swietna robota i super tlumaczenie zawilych kwestii. Dzieki!
Jest pan genialny w swojej prostocie tlumaczenia :) pana filmiki regularnie magluje przygotowujac sie do kursu frontendowego aby zdac go jak najlepiej licze na dalsze odcinki z html/css/js i moze cos z jquery bo kurs juz w kwietniu :P
Pozdrawiam
Dziekuję za ten sposób prowadzenia tego kursu.
Całkiem dobry tutorial. Gratuluje cierpliwości i wytrwałości w spokojnej zrównoważonej nauce. Powodzenia i pozdrawiam.
GG najlepszy poradnik dzięki tobie uczę się z radością nowych języków
Proszę Pana, chciałbym Panu podziękować za to, że zrodził Pan we mnie chęć do porzuconego pisania stron. Chcę dodać także, że bardzo dobrze Pan tłumaczy, wyjaśnia: na przykład co to jest tajemniczy ciąg Febunaciego. Lubię także w Pańskich filmikach humor. Umie Pan także dobrze wytłumaczyć. Dziękuje jeszcze raz i czekam na kolejny filmik z kursu, bo już wszystko obejrzałem na kanale.
genialny tutorial... na zajeciach u mnie od razu pocisneli z grubymi tematami JSa gdzie ja nawet dobrze podstaw nie ogarnialem i robilem wszystko na czuja - korzystajac z gotowcow - to jest spoko ale na krotka mete. A tu po prostu mozna skumac wszystko
Mistrzostwo... dziękuję ☺
Super seria. Świetny prowadzący. Czekamy na kolejne odcinki z JS.
No nareszcie !!! zabieram sie za ogladanie !!!
Super kanał, super filmy!
no w koncu cos na co czekalem :) Wiecej wiecej wiecej Panie Miroslawie
Drobna nieścisłość - polski alfabet kończy się na "ż" a nie na "ź" jak to zostało pokazane na filmie. Poza tym drobiazgiem naprawdę świetna robota, dzięki!
*Dziękuję za kurs!)*
Stan przytłoczenia kanciastością
Jej! Nowy odcinek.
Szczerze mówiąc myślałem, że zamiast zamiany klawiatury na napis "Tak jest!"/"Przegrałeś!" będzie to wyświetlone za pomocą alertu ale również fajnie wyszło.
+Tpk Games Chcesz to zedytuj (zresztą myślę, że to zrobiłeś) ;)
W charAt() podał Pan liczbę uwzględniając numerację od zera, ale kiedy Pan tłumaczył to, podał liczbę uwzględniając numerację od jedynki. A tak poza tym, to odcinek naprawdę świetny!
Pozdrawiam
Super odcinek!
Dzięki wilkie za kolejny odcinek !
kawały o Explorerze wymiatają :D
w explorerze ta strona i tak nie działa wiec zżarty o nim sa prawdziwymi faktami XD
@@Kingslayer0023 a po co ma działać jak nikt IE nie używa
@@kamilmilewski4152 Uwierz, że znajdą się osoby, które używają 🤔
Świetny materiał :-)
Swietny kurs. Dziekuje!
koks odcinek!!!
Dobry odcinek! Czekma na kolejne ;D
Dziękuję za ten kurs :D
jak sie Pana dobrze słucha, aż chce się uczyć. Może w robocie mi się przyda :)
Fajna tapeta i świetny pomysł na odcinek ;)
Super !
Więcej
super filmik!
\o/ Nareszcie nowy odcinek :D
Czekam na 3 z baz danych =)
Swietne jak zawsze, pozdrawiam i czekam na wiecej!
Świetny kurs! :) Dzięki!
Wszystko działa MEGA
Jak zawsze świetny odcinek :). Już czekam na odcinek z PHP.
Nie rozumiem, jak można dać temu filmowi łapkę w dół :(
idiotów nie brakuje ;)
konkurencja, która za takie kursy bierze hajs - tak obstawiam...
ktoś kto nie rozumie ;)
To byli użytkownicy IE
świetnie wytłumaczone, sporo się nauczyłem :)
Nie mogłem się już doczekać nowego wideo!
Świetny odcinek
nie wiem, czy już ktoś o tym pisał, ale znalazłem szybszą metodę na wrzucenie tych wszystkich liter alfabetu. Zamiast tablicy możemy użyć zmiennej
var litery="AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŹŻ";
a potem już w pętli użyć po prostu
tresc_diva = tresc_diva +'' +litery.charAt(i)+ '';
jeśli się mylę, to proszę o sprostowanie, mi w każdym razie zadziałało ;) i nie trzeba wtedy wypisywać każdego indeksu tablicy ;)
Masz racje, autor specjalnie posłużył się tablicą aby wyjaśnić że w tablicy możemy używać nawiasów klamrowych, oraz jak w samym JS deklarować i używać tablic.
Kolejny świetny film!
Bardzo fajne szkolenie - pozdrawiam Panie Mirosławie :).
Witam. Jestem wielkim fanem kanału, fajnie że szybko to się tak rozwinęło, widzów przybywa. Wszystko super. Ale z drugiej strony nie uczył bym młodych złych nawyków, takich jak innerHTML czy onClick w htmlu. I od samego początku pisać już po angielsku żeby wyuczyć sobie ten nawyk. Mam nadzieję że na wszystko przyjdzie z czasem :) Pozdrawiam serdecznie, nie jestem hejterem. Obejrzałem dużo filmików, dobra robota, ale nasunęła mi się właśnie taka myśl.
veranoo A czego lepiej używać zamiast innerHTML i onClick?
textContent, appendChild, addEventListener createElement np
Masz rację, ale polecam zdecydowanie uczyć się poprawnie pisać kod, myśleć jak piszemy kod. Jak on działa, uczyć się od kogoś bardziej doświadczonego. Bo nabranie złych nawyków jest bardzo proste.
Dziękuję, Panie Profesorze, to zaprawdę FRAJDA!!! :D
Świetne, super :)
Kolejny świetny odcinek, pozdrawiam :)
jesteś szef!!!!
Łapka w góre dla Pana. Super robota :)
super robota !
kiedy zacząłem oglądać kurs HTML i hosting strony dałem ci suba
Już sie nie moge doczekać jak zaczne sie uczyć javascript po tym jak naucze sie html i css do perfekcji😁😁😁
Pierogi i bigos zawsze na propsach :D
Dzięki za świetny kurs :)
toen projekt to dopiero zaawansowany :D trzeba sporo pogłówkować
Można też wystylizować dwie dodatkowe klasy np. literaZielona, literaCzerwona, w css, a w skrypcie wpisać tak: document.getElementById(trafiona).setAttribute("class", "literaZielona"); co zmieni nam klasę.
Super !
56:50 byłbym bardzo wdzięczny za rozjaśnienie co tu się stało!
1) Dlaczego skoro element określa "lit" +i to w kodzie do elementu dodajemy jeszcze literę[i]? Czy var element = "lit" +i; określa z czego składa się element, czy może var element zawiera w sobie te informacje?
2) Dlaczego po id diva, w cudzysłowie wpisujemy jeszcze apostrofy? Rozumiem to w taki sposób, że '+element+' zmieni się potem w lit+i więc to będzie id diva i po tej zmianie efekt będzie zamknięty w cudzysłowie.
3) Dlaczego w id diva, element jest z obu stron zamknięty plusami?
Dzięki za pomoc :)
Nie wiem czy te pytania są jeszcze aktualne, ale jeśli tak to:
1. Zmienna "element" została utworzona aby przypisać wygenerowanym divom z literami ich "id" (lit0, lit1, lit2 itd.). Natomiast "litery[i]" w treści diva pobiera zmienną z konkretnej szufladki tej tablicy gdzie "i" to nr tej szufladki. Tak więc "element" tworzy "id" diva a "tablica[i]" pobiera dla niego wartość w postaci litery.
2. Tak.
3. Dlatego, że element jest zmienną, którą musimy dokleić (dokonać konkatenacji) do reszty łańcucha (stringa) tworzonego diva właśnie za pomocą znaku "+". Tak samo jak doklejamy dostęp do tablicy "litery" za pomocą "+litery[i]+" w treści diva.
Super kurs!!! :)))
Super. zawsze czekam z niecierpliwością na kolejne odcinki kursów. Nie myślał Pan o ruszeniu w Polskę i prowadzeniu kursów stacjonarnych? Byłby Pan bogaty ;). Pozdrawiam
Przeskoczyłem z php na js mając nadzieję , że będzie trochę łatwiej..ale się pomyliłem :D
Proszę dalej :)
Tydzień oglądania Pana kursów > 4 lata nauki w technikum :P
Akurat 4 lata temu napisałeś ten komentarz. Przypadek?
Nie sądzę :)
A tak swoją drogą to jest zabawne, że w takich kursach jak na tym kanale w kilkanaście dni przyjmujesz dawkę wiedzy, z którą szkoła się guzdra bóg wie ile...
1:37:59 napis.toUpperCase(); powinno być chyba zamiana na duże litery, a napis.toLowerCase(); zamiana na małe litery.
super
Czekam na nowe Ciekawe odcinki!
I chętnie bym zobaczył odcinek gdzie tworzysz stronę od początku do końca :]
Bardzo chcialbym , by Pan stworzyl film o tym jak i z czym pan edytuje i tworzy swe filmiki , tzn z jakim programem pan to robi , i jak dodaje te rozne efekty ? :) Filmiki sa profesionalnie stworzone i naprawde wywieraja wrazenia , te rozne przejscia zmiany kolorow . Mowie nie o tym tylko filmuku ale i o innych . :)
47:27 Nie można było stworzyć zmiennej var litery = "ABCDE...."; a następnie dostawać się do niej po przez litery.charAt(0-34)?
Dziękuję bardzo za odpowiedź. Jakoś tak zostałem nauczony, że jak widzę coś kilka razy napisane i że trzeba było się tak przy tym jeszcze natrudzić to pomyślałem czy nie można tego zrobić w inny sposób. Takie trochę zboczenie już zawodowe. Pozdrawiam!
+MCPlayG W tablicy ASCII znaki latin extended (polskie ogonki) będą miały inne numery. Takie coś zadziała, ale tylko dla liter bez polskich znaków.
+Mirosław Zelent Mnie cieszy fakt, że nauka nie idzie w las czego dowodem podczas oglądania jest nagłe wykrycie niedogodności oparte na zdobytej dotychczas wiedzy dzięki czemu w w głowie rodzi się alternatywa i nagłe podniecenie odkryciem prostszego rozwiązania.
W końcu programowanie :) czas na kolejny php :)
Witam! Panie Mirosławie, czy planuje pan może jakąś serię poradników do programowania C#?
JEST BO MA KURS C, C+, C++, i wiele więcej
@@swordwastaken nie ma kursu C a tym bardziej C+ bo taki język nie istnieje.
Witam, czy będzie Pan kontynuował jeszcze serie z programowania w języku C++? Pozdrawiam.
+dominikstepien2000 A co, ciągle czekasz na kolejny odcinek? Zakup sobie symfonię i się z tego ucz.
+dominikstepien2000 Co do serii c++ to pan MZ nie zakończył tej serii. Na pewno kontynuacja tej serii nie jest już priorytetem lecz jednocześnie nie została wyrzucona z serii.
Shirobachi kun Dzięki za info. Pozdrawiam
+dominikstepien2000 Dużo już było wytłumaczone, dla mnie sama podstawa jest wystarczająca, aby "wystartować".
Co racja to racja. Pamiętajcie więcej się nauczycie robiąc własny projekt niż oglądając kurs .. :)
A czy nie dało się tego alfabetu wpisac tak (mówię o 48:10 ) że stworzyć string w którym jest cały alfabet a potem za pomocą litery.charAt(i) wewnątrz tego fora przypisac ? wtedy można by było wkleić do stringa alfabet i nie trzeba by było bawic się w wypisywanie tego linia po linii. Czy coś z takim rozwiązaniem jest nie tak ?
litery w jednej lini kodu:
var litery = ["A","Ą","B", "C", "Ć","D", "E", "Ę", "F", "G", "H", "I", "J", "K", "L", "Ł", "M", "N","Ń", "O","Ó", "P","Q","R", "S","Ś", "T", "U", "V","W", "X", "Y", "Z", "Ź", "Ż"];
e nie var[] litery = {A,B,C} . Jak w javie :)
var lettering ="AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŻŹ"; jeszcze szybciej :D
@@3paszczak w takim przypadku zmienna lettering to nie tablica tylko ciąg znaków, więc indeksowanie może przynosić niespodziewane efekty, jak powiedziano w filmie
porządny człowiek z Ciebie bracie
Super kurs :)